/* Empalife landing — mobile-first. Palette from the brand manual. */
:root{
  --gold:#b6a37c;
  --black:#000;
  --white:#fff;
  --brown:#3a2d28;
  --paper:#f2f0eb;
  --font-display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-script:"Caveat",cursive;
  --wrap:1240px;
  --gutter:24px;
  --tap:44px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--font-body);line-height:1.5}
img,video,svg{display:block;max-width:100%}
a{color:var(--gold)}
a:hover{color:var(--white)}
button{font:inherit}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;background:var(--gold);color:var(--black);font-weight:700;padding:12px 18px;text-decoration:none}
.skip-link:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Default ring is gold on black (>= 3:1). Light or gold surfaces need a dark ring. */
.announce :focus-visible,.locations :focus-visible,.skip-link:focus-visible{outline-color:var(--black)}

/* Placeholders (visible on purpose) */
.todo{background:rgba(182,163,124,.22);box-shadow:0 0 0 2px rgba(182,163,124,.22)}
.locations .todo{background:rgba(58,45,40,.12);box-shadow:0 0 0 2px rgba(58,45,40,.12)}

/* Shared type */
.display{font-family:var(--font-display);font-weight:400;text-transform:uppercase}
.gold{color:var(--gold)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;border-radius:4px;font-size:15px;font-weight:700;text-decoration:none;transition:background-color .2s,color .2s}
.btn--gold{background:var(--gold);color:var(--black)}
.btn--gold:hover{background:var(--white);color:var(--black)}
.btn--white{background:var(--white);color:var(--black)}
.btn--white:hover{background:var(--gold);color:var(--black)}
.btn--outline{align-self:flex-start;min-height:var(--tap);padding:12px 20px;border:2px solid var(--gold);border-radius:0;background:transparent;color:var(--gold);font-size:14px;letter-spacing:1px;text-transform:uppercase}
.btn--outline:hover{background:var(--gold);color:var(--black)}
.btn--dark{align-self:flex-start;min-height:var(--tap);margin-top:6px;padding:12px 18px;background:var(--black);color:var(--gold);font-size:14px;border:2px solid var(--black)}
.btn--dark:hover{background:var(--brown);color:var(--white);border-color:var(--brown)}
/* Placeholder links (data-todo) */
a[aria-disabled="true"]{cursor:not-allowed;text-decoration:underline dashed}
.btn[aria-disabled="true"]{border:2px dashed var(--gold);text-decoration:none}

/* Announcement bar */
.announce{background:var(--gold);color:var(--black);text-align:center;padding:10px 16px;font-size:13px;font-weight:700}
.announce a{color:var(--black);display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px;margin:-10px 0}
.announce a:hover{color:var(--brown)}

/* Header */
.site-header__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px}
.logo{display:block;height:52px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;font-weight:600}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;text-decoration:none}
.lang{display:inline-flex;align-items:center}
.lang__btn{min-width:var(--tap);min-height:var(--tap);padding:0 6px;border:0;background:none;color:var(--white);font-weight:600;cursor:pointer}
.lang__btn:hover{color:var(--gold)}
.lang__btn[aria-pressed="true"]{color:var(--gold);cursor:default}

/* Hero */
.hero{position:relative;display:flex;align-items:flex-end;width:100%;min-height:620px;background:var(--brown) url("../img/hero-poster.webp?v=ac22b5fbfb") center/cover no-repeat;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.hero__video.is-playing{opacity:1}
/* No src yet (before the start, reduced motion, or no JS): show the poster background only */
.hero__video:not([src]){display:none}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%)}
.hero__content{position:relative;display:flex;flex-direction:column;gap:18px;padding-bottom:56px}
.hero__title{font-size:clamp(64px,11vw,150px);line-height:.85}
.hero__lead{font-size:17px;max-width:480px;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* Fixed background bands.
   iOS Safari ignores background-attachment:fixed, so the image lives on a
   position:fixed layer that the parent clips with clip-path (works without JS). */
.fixed-bg{position:relative;isolation:isolate;clip-path:inset(0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:380px;padding:48px var(--gutter);text-align:center;background:var(--brown)}
.fixed-bg::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url("../img/fondo-900.webp?v=2655e1c295") center/cover no-repeat var(--brown)}
.fixed-bg--short{min-height:320px;gap:6px}
.fixed-bg__icon{width:52px;height:52px;color:var(--white)}
.fixed-bg__title{font-size:clamp(48px,7vw,96px);line-height:.9}
.fixed-bg__script{font-family:var(--font-script);font-weight:700;font-size:44px;line-height:1;color:var(--gold)}
@media (min-width:900px){
  .fixed-bg::before{background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url("../img/fondo-1600.webp?v=86936c720c")}
}

/* Products */
.products{display:flex;flex-direction:column;gap:36px;padding-top:80px;padding-bottom:80px}
.section-title{font-size:clamp(48px,8vw,64px);line-height:.9}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.card{display:flex;flex-direction:column;gap:12px}
.card__media{aspect-ratio:4/5;background:var(--brown);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__title{font-size:40px;line-height:.95}
.card__text{font-size:15px;line-height:1.5}

/* Reviews */
.reviews{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-top:72px;padding-bottom:72px}
.rating{flex:0 1 260px;display:flex;flex-direction:column;gap:6px}
.rating__score{font-size:96px;line-height:.9;color:var(--gold)}
.rating__stars{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.stars{display:flex;gap:2px;color:var(--gold)}
.stars svg{width:18px;height:18px}
.rating__meta{font-size:14px}
.rating__link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:14px}
.quotes{flex:999 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.quote{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:2px solid var(--gold)}
.quote__text{font-size:15px;line-height:1.6}
.quote__by{font-size:13px;font-weight:700;color:var(--gold)}

/* Locations */
.locations{background:var(--paper);color:var(--black)}
.locations__inner{display:flex;flex-direction:column;gap:32px;padding-top:72px;padding-bottom:72px}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px;background:var(--black);border:2px solid var(--black)}
.place{display:flex;flex-direction:column;gap:8px;padding:28px 24px;background:var(--paper)}
.place__eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brown)}
.place__name{font-size:36px;line-height:1}
.place__addr{font-size:15px;font-weight:600}
.place__hours{font-size:14px;line-height:1.6}
.hours{display:grid;grid-template-columns:auto 1fr;gap:0 16px;font-size:14px;line-height:1.7}
.hours dt{font-weight:600}
.place__phone{font-size:14px}
.place a:not(.btn){color:var(--black);font-weight:600;display:inline-flex;align-items:center;min-height:var(--tap)}
.place__actions{display:flex;flex-wrap:wrap;gap:8px}

/* Footer */
.site-footer{background:var(--black)}
.guarda{height:20px;background:url("../img/guarda-tile-gold.webp?v=d6eb865d2f") repeat-x;background-size:auto 100%}
.site-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;padding-bottom:96px;font-size:13px}
.logo--footer{height:64px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer-links a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* Sticky WhatsApp bar */
.wa-bar{position:sticky;bottom:0;z-index:20;display:flex;justify-content:center;padding:10px 16px;background:var(--black);border-top:1px solid var(--gold)}
.wa-bar__btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:480px;min-height:48px;padding:14px;border-radius:4px;background:var(--gold);color:var(--black);font-size:15px;font-weight:700;text-decoration:none;transition:background-color .2s}
.wa-bar__btn:hover{background:var(--white);color:var(--black)}
.wa-bar__btn svg{width:20px;height:20px}

@media (min-width:700px){
  :root{--gutter:32px}
  .hero__content{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

/* Spanish visitors: js/lang-boot.js?v=bec2933519 sets html.i18n-pending before first paint and js/i18n.js?v=428101c481 clears it once the
   text is translated. The animation is the lifeline if i18n.js never runs: after 1.5 s the page shows regardless. */
html.i18n-pending body{visibility:hidden;animation:i18n-reveal 1ms 1.5s forwards}
@keyframes i18n-reveal{to{visibility:visible}}