/* Sin lactosa y a lo loco — hoja común.
   Paleta derivada del icono de la marca (#C3B1FB, #DCD4FD).
   Todos los pares de texto verificados a 4.5:1 o más. */

@font-face{font-family:'Varela Round';src:url('tipos/varela-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('tipos/nunito-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('tipos/nunito-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('tipos/nunito-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --marca:#C3B1FB; --marca-clara:#DCD4FD; --marca-honda:#5A3FBE;
  --cta:#4B2FA8; --sobre-cta:#FFFFFF;
  --papel:#FBFAFF; --superficie:#FFFFFF;
  --tinta:#1A1726; --tinta-suave:#565070; --tinta-lavanda:#241C3D; --lema:#3B2E63;
  --linea:#E7E3F5; --sombra:rgba(36,28,61,.10);

  --titulo:'Varela Round',ui-rounded,system-ui,sans-serif;
  --texto:'Nunito Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem; --e6:3rem; --e8:4rem;
  --curva:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){:root{
  --marca:#B7A3F7; --marca-clara:#2A2440; --marca-honda:#C6B4FF;
  --cta:#B7A3F7; --sobre-cta:#14121C;
  --papel:#14121C; --superficie:#1C1927;
  --tinta:#EDEAF7; --tinta-suave:#A9A3BE; --tinta-lavanda:#14121C; --lema:#241C3D;
  --linea:#2C2740; --sombra:rgba(0,0,0,.45);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}

a{color:var(--marca-honda);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--titulo);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3rem);line-height:1.1;margin:0 0 var(--e2)}
h2{font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.2;margin:0 0 var(--e2)}
h3{font-size:1.05rem;font-family:var(--texto);font-weight:700;margin:0 0 .3rem}
p{margin:0 0 var(--e2);max-width:38rem}

.contenedor{max-width:64rem;margin:0 auto;padding:0 var(--e3)}
.seccion{padding:var(--e8) 0}
.seccion+.seccion{border-top:1px solid var(--linea)}
.entradilla{font-size:1.15rem;color:var(--tinta-suave);max-width:34rem}
.etiqueta{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--marca-honda);margin:0 0 var(--e1)}

/* ── portada ─────────────────────────────────────────────── */
.hero{background:var(--marca);padding:var(--e8) 0 var(--e6);text-align:center;
  color:var(--tinta-lavanda)}
.hero .sello{max-width:22rem;margin:0 auto var(--e3);border-radius:16px;
  box-shadow:0 14px 40px var(--sombra)}
.hero .lema{font-family:var(--titulo);font-size:clamp(1.15rem,3vw,1.5rem);
  color:var(--lema);margin:0}
@media (prefers-reduced-motion:no-preference){
  .hero .sello{animation:entra .6s var(--curva) both}
  @keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── rejilla de características ───────────────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--e2);margin-top:var(--e4)}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;
  padding:var(--e3);transition:box-shadow .22s var(--curva),border-color .22s var(--curva)}
.tarjeta:hover{box-shadow:0 8px 24px var(--sombra);border-color:var(--marca)}
.tarjeta p{margin:0;font-size:.96rem;color:var(--tinta-suave)}
.icono{width:40px;height:40px;border-radius:10px;background:var(--marca-clara);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--e2)}
.icono svg{width:22px;height:22px;stroke:var(--marca-honda);stroke-width:1.75;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── descargas ────────────────────────────────────────────── */
.tiendas{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)}
.tienda{display:flex;align-items:center;gap:.75rem;min-height:44px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:12px;
  padding:.8rem 1.15rem;text-decoration:none;color:var(--tinta);
  transition:transform .2s var(--curva),box-shadow .2s var(--curva)}
a.tienda:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--sombra)}
.tienda svg{width:24px;height:24px;fill:currentColor;flex:none}
.tienda span{display:block;line-height:1.25}
.tienda .grande{font-weight:700;font-size:.98rem}
.tienda .chica{font-size:.8rem;color:var(--tinta-suave)}
.pronto{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--marca-honda);background:var(--marca-clara);border-radius:4px;
  padding:.2rem .5rem;margin-left:.35rem}

/* ── listas y pie ─────────────────────────────────────────── */
.enlaces{list-style:none;padding:0;margin:var(--e2) 0 0;display:grid;gap:.6rem}
.enlaces a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.pie{border-top:1px solid var(--linea);padding:var(--e4) 0;color:var(--tinta-suave);
  font-size:.9rem}

/* ── páginas legales ──────────────────────────────────────── */
.documento{max-width:44rem;margin:0 auto;padding:var(--e6) var(--e3) var(--e8)}
.documento h2{margin-top:var(--e6);padding-bottom:.4rem;border-bottom:1px solid var(--linea)}
.documento h3{margin-top:var(--e3)}
.documento li{margin-bottom:.45rem;max-width:38rem}
.fecha{color:var(--tinta-suave);font-size:.92rem;margin-top:-.5rem}
.destacado{background:var(--marca-clara);border-radius:12px;padding:var(--e2) var(--e3);
  margin:var(--e3) 0;color:var(--tinta)}
.volver{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-size:.95rem}

/* CTA de la portada, ahora que las tiendas tienen destino */
.hero-cta{margin:var(--e3) 0 0}
.hero-cta a{display:inline-flex;align-items:center;min-height:48px;
  background:var(--cta);color:var(--sobre-cta);text-decoration:none;
  font-family:var(--titulo);font-size:1.05rem;padding:.75rem 1.8rem;border-radius:999px;
  transition:transform .2s var(--curva),box-shadow .2s var(--curva)}
.hero-cta a:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--sombra)}