/* ============================================================
   Sabores del Mundo — base: reset, tokens, tipografía, logotipo
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- Tokens ---------- */
:root{
  /* colores de marca (tomados del logotipo) */
  --ink:#16204A;
  --ink-2:#3A456E;
  --ink-3:#5C6584;
  --cream:#FFF7EF;
  --cream-2:#FBEADB;
  --sand:#F5E3D2;
  --white:#FFFFFF;

  --pink:#EE2B5F;
  --pink-d:#C61847;
  --orange:#F4762A;
  --yellow:#F7BE1E;
  --green:#79C043;
  --teal:#0FA69F;
  --blue:#2A9FE0;
  --purple:#8B45B5;
  /* versiones oscuras, para texto sobre blanco (contraste AA) */
  --pink-t:#C61847;
  --orange-t:#B4531A;
  --green-t:#3F7A1B;
  --blue-t:#15719F;
  --purple-t:#7A34A4;

  --wa:#20BA5A;
  --wa-d:#189449;

  /* tipografías */
  --f-logo:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --f-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-body:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  /* medidas */
  --wrap:1140px;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --r-s:12px;
  --r-m:18px;
  --r-l:28px;
  --r-xl:40px;

  /* sombras y curvas */
  --sh-s:0 2px 6px rgba(22,32,74,.05), 0 8px 24px -12px rgba(22,32,74,.18);
  --sh-m:0 4px 12px rgba(22,32,74,.06), 0 24px 48px -24px rgba(22,32,74,.28);
  --sh-l:0 30px 70px -30px rgba(22,32,74,.4);
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Base ---------- */
html{
  overflow-x:clip;
  scrollbar-gutter:stable;   /* el hueco de la barra siempre reservado: al
                                desbloquear la pagina no se mueve nada */
}
html.sin-scroll{overflow:hidden}
body{
  overflow-x:clip;
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
}
body.is-intro{overflow:hidden;height:100vh}
p{max-width:62ch}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  font-variation-settings:'SOFT' 40,'WONK' 0,'opsz' 90;
  text-wrap:balance;
}
h1 em,h2 em,h3 em{
  font-style:normal;
  color:var(--pink);
  font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 120;
}
.h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.15rem)}
.h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem)}

.lead{font-size:clamp(1.06rem,1.01rem + .3vw,1.24rem);color:var(--ink-2);line-height:1.65}
.lead--center{margin-inline:auto;text-align:center}

.eyebrow{
  font-family:var(--f-body);
  font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:26px;height:3px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow));
}
.sect__head .eyebrow{justify-content:center}

.wrap{width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 10px;transition:top .2s}
.skip-link:focus{top:0}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Iconos ---------- */
.ico{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.ico--end{width:1em;height:1em;margin-left:.1em}

/* ---------- Franja de colores (papel picado) ---------- */
.flagline{
  display:block;height:6px;border-radius:99px;width:110px;
  background:linear-gradient(90deg,
    var(--pink) 0 16.6%,var(--orange) 16.6% 33.3%,var(--yellow) 33.3% 50%,
    var(--green) 50% 66.6%,var(--teal) 66.6% 83.3%,var(--purple) 83.3% 100%);
}
.flagline--wide{width:170px;height:7px;margin-inline:auto}

/* ============================================================
   Logotipo (wordmark) — "Sabores" a color + "del mundo" con lengua
   ============================================================ */
.wm{display:inline-block;line-height:1;font-family:var(--f-logo);text-align:center}
.wm__top{
  display:block;font-weight:800;letter-spacing:-.012em;
  font-size:1em;
}
.wm__top b{color:var(--c,var(--ink));display:inline-block}
/* el color de cada letra, sin estilos en linea (asi la CSP puede ser estricta) */
.wm__top b:nth-child(1){--c:var(--pink)}
.wm__top b:nth-child(2){--c:var(--orange)}
.wm__top b:nth-child(3){--c:var(--green)}
.wm__top b:nth-child(4){--c:var(--teal)}
.wm__top b:nth-child(5){--c:var(--blue)}
.wm__top b:nth-child(6){--c:var(--purple)}
.wm__top b:nth-child(7){--c:var(--yellow)}
.wm__bot{
  display:flex;align-items:flex-end;justify-content:center;gap:.14em;
  margin-top:-.16em;color:var(--ink);
}
.wm__del{
  font-style:normal;font-weight:700;font-size:.36em;
  letter-spacing:.02em;transform:translateY(-.5em) rotate(-6deg);
}
.wm__mundo{
  display:inline-flex;align-items:baseline;
  font-weight:800;font-size:.72em;letter-spacing:-.01em;
}
/* la "u" es una boca: el cuenco llega a la linea base y la lengua asoma debajo */
.wm__u{
  display:inline-block;width:.532em;height:.709em;margin:0 .025em;
  position:relative;top:.204em;   /* apoya el cuenco en la linea base */
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M30 78c0-20 12-34 30-34s30 14 30 34v51a30 30 0 0 1-60 0z' fill='%23EE2B5F'/%3E%3Cpath d='M60 84v60' stroke='%23C61847' stroke-width='6' stroke-linecap='round' opacity='.4'/%3E%3Cpath d='M22 15V61a38 38 0 0 0 76 0V15' fill='none' stroke='%2316204A' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wm--light .wm__bot,.wm--light .wm__del{color:var(--cream)}
.wm--light .wm__u{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M30 78c0-20 12-34 30-34s30 14 30 34v51a30 30 0 0 1-60 0z' fill='%23EE2B5F'/%3E%3Cpath d='M60 84v60' stroke='%23C61847' stroke-width='6' stroke-linecap='round' opacity='.4'/%3E%3Cpath d='M22 15V61a38 38 0 0 0 76 0V15' fill='none' stroke='%23FFF7EF' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wm--sm{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem)}
.wm--xl{font-size:clamp(3.1rem,1.6rem + 6.4vw,6.2rem)}

/* ---------- Animación de entrada por scroll ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}