/* =========================================================
   Landing Farmacias Fischel — hoja de estilos principal
   BEM + custom properties · mobile first
   Breakpoints: 375 base · 768 tablet · 1024 desktop · 1440 wide
   Paleta muestreada del archivo de Figma.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --c-rojo:#F40014;
  --c-rojo-oscuro:#C40010;
  --c-rojo-plancha:#E31B23;   /* fondo de la tarjeta “6 provincias” */
  --c-rojo-suave:#FFD6D9;
  --c-turquesa:#00B4B0;
  --c-turquesa-chip:#00B1B0;  /* rectángulos de beneficios #SOYFischel */
  --c-turquesa-suave:#DCF2F1;

  --c-titulo:#2B2B2B;
  --c-texto:#3B3B3B;
  --c-texto-muted:#5C5C5C;
  --c-texto-soft:#8A8A8A;
  --c-linea:#E8E8E8;
  --c-linea-form:#DCDCDC;

  --c-blanco:#FFFFFF;
  --c-gris:#F4F4F4;
  --c-gris-card:#F1F1F1;
  --c-gris-sucursales:#EFF1F1;
  --c-gris-soy:#EFF1F1;
  --c-footer:#F5F6F5;
  --c-mapa:#DCEAF6;

  --font-display:"Montserrat", system-ui, sans-serif;
  --font-body:"Open Sans", system-ui, sans-serif;
  --font-script:"Grand Hotel", cursive;
  /* Gotham (licencia del cliente); Montserrat como respaldo web */
  --font-gotham:"Gotham","Gotham Book","GothamBook","Montserrat",system-ui,sans-serif;

  --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --section-y:clamp(44px, 6vw, 80px);
  --gutter:clamp(16px, 4vw, 32px);
  --gap-split:clamp(28px, 4vw, 56px);

  --radius-pill:999px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --shadow-card:0 4px 14px rgba(0,0,0,.05);

  --maxw:1200px;
  --tap:44px;
  --header-h:70px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--c-texto);background:var(--c-blanco);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-rojo);text-decoration:none}
a:hover{color:var(--c-rojo-oscuro);text-decoration:underline}
button{font:inherit}
:focus-visible{outline:3px solid var(--c-turquesa);outline-offset:2px;border-radius:4px}
::selection{background:var(--c-turquesa);color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none !important;transition:none !important}}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--c-rojo);padding:12px 18px;font-weight:700}
.skip-link:focus{left:0}
.script{font-family:var(--font-script);font-weight:400;line-height:1}
.script--red{color:var(--c-rojo)}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--grey{background:var(--c-gris)}


.split{display:grid;gap:var(--gap-split);align-items:center}
.split--top{align-items:start}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:0}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--stretch{align-self:stretch;border-radius:4px;min-height:340px}

.section__title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--c-titulo);text-wrap:balance}
.section__kicker{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--c-rojo);margin-top:10px}
.section__kicker--teal{color:var(--c-turquesa);font-size:clamp(15px,1.5vw,18px);margin-top:12px}
.section__kicker--dark{color:var(--c-titulo);font-size:14px;margin-top:clamp(22px,3vw,34px);margin-bottom:var(--space-3)}
.section__text{font-family:var(--font-gotham);font-weight:400;font-size:16px;line-height:1.4;letter-spacing:0;color:var(--c-texto-muted);margin-top:var(--space-4);max-width:48ch;text-wrap:pretty}


/* ---------- 4. Botones y enlaces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 22px;border:0;border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer;transition:background-color .2s,color .2s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--c-rojo);color:#fff}
.btn--primary:hover{background:var(--c-rojo-oscuro);color:#fff}
.btn--block{width:100%}
.hero__tagline{margin-top:20px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-rojo-plancha)}
.link-underline{display:inline-block;margin-top:20px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-rojo);text-decoration:underline;text-underline-offset:3px}

/* ---------- 4b. Banner Live Shopping full-bleed (entre header y hero) ---------- */
.promo{position:relative;background:var(--c-rojo-plancha);line-height:0}
.promo[hidden]{display:none}
.promo__link-all{display:block}
.promo__link-all img{display:block;width:100%;height:auto;aspect-ratio:800/700;object-fit:cover}
@media (min-width:768px){
  .promo__link-all img{aspect-ratio:1920/420}
}

/* ---------- 4c. Página legal (política de privacidad) ---------- */
.legal{background:#fff}
.legal__inner{max-width:760px;margin-inline:auto}
.legal__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--c-texto-soft)}
.legal__breadcrumb a{color:var(--c-rojo-plancha)}
.legal__title{margin-top:18px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,3.6vw,42px);line-height:1.1;letter-spacing:-.025em;color:var(--c-titulo);text-wrap:balance}
.legal__lead{margin-top:8px;font-family:var(--font-gotham);font-weight:400;font-size:16px;color:var(--c-texto-soft)}
.legal__subtitle{margin-top:clamp(28px,3.4vw,44px);font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,1.7vw,18px);line-height:1.3;letter-spacing:.02em;color:var(--c-rojo-plancha)}
.legal__inner p{margin-top:16px;font-family:var(--font-gotham);font-weight:400;font-size:16px;
  line-height:1.65;letter-spacing:0;color:var(--c-texto);text-wrap:pretty}
.legal__inner p a{color:var(--c-rojo-plancha);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.legal__inner p a:hover{color:var(--c-rojo-oscuro)}
.legal__subtitle+p{margin-top:14px}

/* ---------- 5. Header + nav ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--c-blanco);border-bottom:1px solid #ECECEC}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:14px;min-height:var(--header-h)}
.header.is-scrolled{box-shadow:0 3px 12px rgba(0,0,0,.06)}
.logo{display:block;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo img{height:clamp(38px,4vw,50px);width:auto}

.header__toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:var(--tap);height:var(--tap);background:none;border:0;cursor:pointer}
.header__toggle-bar{display:block;width:24px;height:2px;background:var(--c-rojo);border-radius:2px;transition:transform .25s,opacity .2s}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2){opacity:0}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{position:absolute;inset-inline:0;top:100%;background:#fff;border-bottom:1px solid var(--c-linea);
  padding:var(--space-5) var(--gutter);box-shadow:0 10px 24px rgba(0,0,0,.08);
  visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.nav.is-open{visibility:visible;opacity:1;transform:none}
.nav__list{display:grid;gap:var(--space-2)}
.nav__link{display:flex;align-items:center;gap:4px;min-height:var(--tap);font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--c-texto)}
.nav__link:hover,.nav__link[aria-current="true"]{color:var(--c-rojo);text-decoration:none}
.nav__link--soy{padding-block:6px}
.nav__link--soy img{height:19px;width:auto}

/* ---------- 6. Hero ---------- */
.hero{background:var(--c-blanco)}
.hero__inner{display:grid;gap:var(--gap-split);align-items:center;padding-block:clamp(32px,5vw,64px) clamp(24px,3vw,40px)}
.hero__title{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.6vw,54px);line-height:1.08;letter-spacing:-.02em;color:var(--c-titulo);text-wrap:balance}
.hero__title em{font-style:normal;color:var(--c-rojo-plancha)}
.hero__lead{font-size:16px;line-height:1.65;color:var(--c-texto-muted);margin-top:22px;max-width:46ch;text-wrap:pretty}
.hero__media{margin:0;position:relative}
.hero__media img{width:100%;height:auto}

/* ---------- 7. Cifras + provincias ---------- */
.stats__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,1.8vw,22px);align-items:stretch;
  max-width:1040px;margin-inline:auto;justify-content:center;padding-bottom:clamp(40px,5vw,72px)}
.stats__cards{display:grid;gap:clamp(12px,1.4vw,18px);align-content:stretch}
.stat{background:var(--c-gris-card);border-radius:14px;padding:13px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,2.7vw,33px);line-height:1.05;color:var(--c-rojo-plancha);letter-spacing:-.02em}
.stat__label{font-family:var(--font-display);font-weight:500;font-size:12px;color:var(--c-texto-muted)}
.stat--service{padding:12px}
.stat__link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}
.stat__link:hover{text-decoration:none}
.stat--service:hover{background:#E9E9E9}
.stat__ico{width:48px;height:auto}

.provinces{background:var(--c-rojo-plancha);border-radius:16px;color:#fff;min-width:0;max-width:564px;
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(16px,2.5vw,34px);align-items:center}
.provinces__map img{width:100%;max-width:265px;margin-inline:auto}
.provinces__copy{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.provinces__num{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5vw,62px);line-height:1;letter-spacing:-.03em;flex:0 0 auto}
.provinces__label{font-family:var(--font-display);font-weight:500;font-size:13px;line-height:1.35;color:#FFC9CD}
.provinces__claim{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,18px);line-height:1.25;margin-top:8px}

/* ---------- 8. Sobre nosotros ---------- */
.about__media{margin:0;max-width:470px;border-radius:8px;overflow:hidden}
.about__media img{width:100%;height:auto}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:clamp(24px,3vw,40px) clamp(18px,2.2vw,30px);margin-top:clamp(28px,3.4vw,44px);align-items:start}
.feature__ico{height:56px;width:auto}
.feature p{font-family:var(--font-gotham);font-weight:400;font-size:16px;line-height:1.35;letter-spacing:0;color:var(--c-texto-muted);margin-top:18px}

/* ---------- 9. #SOYFischel ---------- */
.soy-lockup{display:flex;align-items:baseline;gap:6px}
.soy-lockup__hash{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--c-turquesa);letter-spacing:-.01em}
.soy-lockup .script{font-size:clamp(28px,3.4vw,40px)}
.soy-lockup--sm{margin-top:20px}
.soy-lockup--sm .soy-lockup__hash{font-size:clamp(18px,2.2vw,24px)}
.soy-lockup--sm .script{font-size:clamp(24px,2.8vw,32px)}
.soy-lockup+.section__title{margin-top:12px}

.soy{background:#fff;padding-block:clamp(28px,4vw,56px)}
.soy__panel{background:var(--c-gris);border-radius:clamp(12px,1.4vw,18px);padding:clamp(28px,4vw,56px)}
.soy__logo{width:clamp(220px,26vw,320px);height:auto}
.soy__title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.14;letter-spacing:-.02em;color:var(--c-texto);margin-top:clamp(18px,2.2vw,28px);text-wrap:balance}
.soy__text{font-family:var(--font-gotham);font-weight:400;font-size:16px;letter-spacing:0;line-height:1.4;color:var(--c-texto-muted);margin-top:16px;max-width:52ch;text-wrap:pretty}
.soy__text:first-of-type{margin-top:clamp(16px,2vw,24px)}
.soy__media{min-height:300px;border-radius:clamp(10px,1.2vw,14px)}
.soy__benefits-title{font-family:var(--font-display);font-weight:800;font-size:clamp(16px,1.7vw,20px);color:var(--c-texto);
  margin:clamp(28px,3.4vw,44px) 0 clamp(14px,1.6vw,20px)}
.soy__benefits-title span{color:var(--c-rojo-plancha)}

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.8vw,24px)}
.benefit{background:var(--c-turquesa-chip);border-radius:8px;padding:16px 20px;min-height:88px;display:flex;align-items:center;gap:16px}
.benefit__ico{height:38px;width:auto;flex:0 0 auto}
.benefit__ico--tall{height:44px}
.benefit span{font-family:var(--font-gotham);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:0;vertical-align:middle;color:#fff}

/* ---------- 10. Cuponera ---------- */
.cuponera__logo{width:clamp(160px,17vw,215px);height:auto}
.cuponera__soy{width:clamp(170px,19vw,225px);height:auto;margin-top:clamp(16px,2vw,24px)}
.cuponera__title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.02em;color:var(--c-texto);margin-top:clamp(16px,2vw,24px);text-wrap:balance}
.cuponera__text{font-family:var(--font-gotham);font-weight:400;font-size:16px;letter-spacing:0;line-height:1.4;color:var(--c-texto-muted);margin-top:clamp(16px,2vw,24px);max-width:50ch;text-wrap:pretty}
.cuponera__chips-title{font-family:var(--font-display);font-weight:800;font-size:clamp(16px,1.7vw,20px);color:var(--c-texto);
  margin:clamp(24px,3vw,38px) 0 clamp(12px,1.5vw,18px)}
.cuponera__media{margin:0;align-self:start;margin-top:clamp(-40px,-3vw,0px)}
.cuponera__media img{width:100%;height:auto}

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(10px,1.4vw,18px)}
.chip{display:flex;align-items:center;gap:14px;min-height:64px;background:var(--c-rojo-plancha);color:#fff;border-radius:8px;padding:14px 18px}
.chip__ico{height:32px;width:auto;flex:0 0 auto}
.chip span{font-family:var(--font-gotham);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:0;vertical-align:middle}

/* ---------- 11. Sucursales + buscador ---------- */
.branches{background:var(--c-gris-sucursales);padding-block:var(--section-y)}
.branches__title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.8vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--c-texto)}
.branches__text{font-family:var(--font-gotham);font-weight:400;font-size:16px;letter-spacing:0;line-height:1.4;color:var(--c-texto-muted);margin-top:clamp(18px,2.2vw,28px);max-width:42ch;text-wrap:pretty}
.branches__text strong{font-weight:700;color:var(--c-texto)}
.branches__map{margin:0}
.branches__map img{width:100%;height:auto;border-radius:4px}

.finder{display:grid;gap:14px;max-width:400px;margin-top:clamp(24px,3vw,40px)}
.finder__select{width:100%;min-height:52px;padding:14px 44px 14px 22px;border:1px solid #E4E4E4;border-radius:var(--radius-pill);
  font-family:var(--font-gotham);font-weight:400;font-size:16px;color:var(--c-texto-muted);text-align:center;cursor:pointer;
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 22px center;background-size:12px;
  -webkit-appearance:none;appearance:none}
.finder__select:focus{outline:none;border-color:var(--c-turquesa);box-shadow:0 0 0 3px rgba(0,177,176,.18)}
.finder__select:disabled{opacity:.6;cursor:not-allowed}
.finder__result{font-family:var(--font-gotham);font-weight:700;font-size:16px;line-height:1.4;color:var(--c-texto);min-height:20px;margin-top:18px}

/* ---------- 12. FAQ ---------- */
.faq__title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.4vw,48px);line-height:1.05;letter-spacing:-.025em;color:var(--c-texto);margin-bottom:clamp(24px,3vw,40px);white-space:nowrap}
@media (max-width:420px){.faq__title{font-size:24px}}
.faq{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px)}
.faq__item{background:#fff;border:1px solid #EFEFEF;border-radius:22px;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border-color .3s,box-shadow .28s,transform .28s}
.faq__item.is-open{border-color:#F6C9CC}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;
  padding:17px 26px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-texto)}
.faq__q::-webkit-details-marker{display:none}
.faq__icon{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#EDEDED;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),background-color .3s}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;
  background:#8A8A8A;transform:translate(-50%,-50%);transition:background-color .3s,opacity .3s}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q:hover .faq__icon{background:var(--c-rojo-plancha)}
.faq__q:hover .faq__icon::before,.faq__q:hover .faq__icon::after{background:#fff}
.faq__item.is-open .faq__icon{background:var(--c-rojo-plancha);transform:rotate(135deg)}
.faq__item.is-open .faq__icon::before,.faq__item.is-open .faq__icon::after{background:#fff}
.faq__item.is-open .faq__q{color:var(--c-rojo-plancha)}
.faq__panel{height:0;overflow:hidden;transition:height .4s cubic-bezier(.22,.61,.36,1)}
.faq__a{padding:2px 30px 22px;font-family:var(--font-gotham);font-weight:400;font-size:15px;line-height:1.5;color:var(--c-texto-muted);
  opacity:0;transform:translateY(-4px);transition:opacity .3s .06s,transform .3s .06s}
.faq__item.is-open .faq__a{opacity:1;transform:none}
.faq__media{min-height:340px;border-radius:8px}

/* ---------- 13. Footer ---------- */
.footer{background:var(--c-footer);border-top:1px solid #E4E4E4}
/* 1 columna en móvil; a 560px pasa a 2 y a 1024px a 4 (ver breakpoints) */
.footer__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,44px);padding-block:clamp(32px,4vw,52px);align-items:start}
.footer__logo img{height:52px;width:auto}
.footer__block{display:flex;flex-direction:column;gap:14px;font-size:13.5px;line-height:1.6;color:var(--c-texto-muted)}
.footer__block p{margin:0}
.footer__title{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--c-texto);margin-bottom:0}
.footer__list{display:flex;flex-direction:column;gap:12px}
.footer__badges{display:flex;flex-direction:column;gap:10px;max-width:172px}
.footer__badges img{width:100%;height:auto}
.footer a{color:var(--c-texto-muted);text-decoration:none}
.footer a:hover{color:var(--c-rojo-plancha);text-decoration:underline}

@media (min-width:560px) and (max-width:1023px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px);row-gap:clamp(24px,3vw,36px)}
  /* logo y datos de contacto a ancho completo; enlaces y app en dos columnas */
  .footer__grid>*:nth-child(1),.footer__grid>*:nth-child(2){grid-column:1 / -1}
  .footer__grid>*:nth-child(2){max-width:64ch}
}
@media (min-width:1024px){
  .footer__grid{grid-template-columns:auto minmax(0,1.3fr) auto auto;gap:clamp(32px,4vw,64px)}
  .footer__logo img{height:56px}
}
.footer__bottom{border-top:1px solid #E4E4E4;font-size:12.5px;color:var(--c-texto-soft)}
.footer__bottom-inner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-block:16px}
.footer__bottom p{margin:0}
.powered{display:inline-flex;align-items:center;gap:7px;color:var(--c-texto-soft);white-space:nowrap}
.powered img{height:15px;width:auto;opacity:.8;transition:opacity .25s}
.footer a.powered:hover{color:var(--c-texto);text-decoration:none}
.powered:hover img{opacity:1}

/* =========================================================
   14. Breakpoints
   ========================================================= */

/* --- Intermedio 640px: evita imágenes gigantes en una sola columna --- */
@media (min-width:640px) and (max-width:1023px){
  .hero__inner,.split{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
  .split__media,.split__media--stretch,.faq__media{min-height:0}
  .about__media{max-width:none}
  .cuponera__media{margin-top:0}
  .soy__media{min-height:0}
  .branches__map img,.provinces__map img{max-width:none}
  .features{grid-template-columns:repeat(3,1fr)}
  .feature__ico{height:44px}
  .feature p{font-size:15px;margin-top:12px}
  .benefits,.chips{grid-template-columns:repeat(2,1fr)}
  .hero__title{font-size:clamp(28px,4.4vw,40px)}
  .section__title,.soy__title,.cuponera__title,.branches__title,.faq__title{font-size:clamp(24px,3.6vw,34px)}
}

/* --- Tablet 768px --- */
@media (min-width:768px){
  /* columnas al ancho real del contenido para que el bloque quede centrado */
  .stats__inner{grid-template-columns:minmax(150px,175px) minmax(0,564px)}
  .features{grid-template-columns:repeat(3,1fr)}
  .benefits{grid-template-columns:repeat(3,1fr)}
}

/* --- Desktop 1024px --- */
@media (min-width:1024px){
  .header__toggle{display:none}
  .nav{position:static;padding:0;background:none;border:0;box-shadow:none;
    visibility:visible;opacity:1;transform:none}
  .nav__list{display:flex;gap:clamp(14px,2.2vw,30px)}
  .nav__link{font-size:13px;min-height:auto;white-space:nowrap;padding-block:6px}

  .hero__inner,.split{grid-template-columns:1fr 1fr}
  .split--media-first .split__media{order:0}
  .split__media{min-height:340px}
  .about__media{max-width:470px}
}

/* --- Wide 1440px --- */
@media (min-width:1440px){
  :root{--gutter:32px}
}

/* =========================================================
   15. MOVIMIENTO
   Todo el movimiento vive en este bloque, para poder auditarlo
   o desactivarlo de un tiro. Respeta prefers-reduced-motion.
   ========================================================= */

/* --- Reveal al entrar en viewport (JS agrega .is-in) --- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal][data-reveal].is-in{opacity:1 !important;transform:none !important}

/* --- Hovers de tarjetas --- */
.stat,.benefit,.chip,.faq__item{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,background-color .28s}
.stat:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.benefit:hover,.chip:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.benefit__ico,.chip__ico,.stat__ico,.feature__ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.benefit:hover .benefit__ico,.chip:hover .chip__ico,.stat--service:hover .stat__ico{transform:scale(1.1)}
.feature:hover .feature__ico{transform:translateY(-3px) scale(1.06)}

/* --- Imágenes: zoom suave dentro del marco --- */
.about__media,.soy__media,.faq__media,.cuponera__media,.branches__map{overflow:hidden}
.about__media img,.faq__media img,.branches__map img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.about__media:hover img,.faq__media:hover img{transform:scale(1.04)}

/* --- Hero: flotación muy leve de la imagen --- */
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero__media img{animation:float-soft 7s ease-in-out infinite}

/* --- Enlaces y navegación --- */
.nav__link{transition:color .2s,transform .2s}
.nav__link:hover{transform:translateX(3px)}
.footer__list a{transition:color .2s,transform .2s}
.footer__list a:hover{transform:translateX(3px)}
.footer__badges img{transition:transform .25s,opacity .25s}
.footer__badges a:hover img{transform:translateY(-2px);opacity:.88}
.logo img{transition:transform .3s}
.logo:hover img{transform:scale(1.04)}

/* --- FAQ: respuesta que se despliega --- */
.faq__item:hover{box-shadow:0 6px 18px rgba(0,0,0,.07)}
.faq__item.is-open{box-shadow:0 8px 22px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.faq__panel{transition:none}.faq__a{opacity:1 !important;transform:none !important}}

/* --- Selects del buscador --- */
.finder__select{transition:border-color .2s,box-shadow .2s,transform .2s}
.finder__select:not(:disabled):hover{border-color:#CFCFCF;transform:translateY(-1px)}
.finder__result{transition:opacity .3s}
.finder__result.is-updating{opacity:0}

/* --- Foco visible con teclado (accesibilidad) --- */
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--c-turquesa);outline-offset:3px;border-radius:4px}

/* --- Sin movimiento si el usuario lo pidió --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}