/* ═══════════════════════════════════════════════════════════
   Kookis — galletas artesanales
   Dirección: tinta azul dibujada a mano sobre papel blanco.
   Todo lo redondo es una galleta; todo lo lineal es el trazo del logo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Tinta */
  --ink:        #1B45A6;
  --ink-deep:   #0C2568;
  --ink-mute:   #4A63B0;
  --ink-hair:   #C6D2F0;

  /* Papel */
  --paper:      #FFFFFF;
  --paper-2:    #EDF1FB;

  /* Horno */
  --dough:      #F0C978;
  --chip:       #43240F;

  /* Trazo */
  --stroke:     2px;
  --stroke-thin:1.6px;

  /* Tipos */
  --display: "Gabarito", ui-rounded, system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;

  /* Escala */
  --t-lead: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --t-h2:   clamp(2rem, 1.4rem + 3vw, 3.75rem);
  --t-h3:   clamp(1.25rem, 1.1rem + .7vw, 1.6rem);

  /* Ritmo */
  --pad:    clamp(1.25rem, 5vw, 4rem);
  --gap:    clamp(1.5rem, 3vw, 2.5rem);
  --bay:    clamp(3.25rem, 6.5vw, 6rem);
  --max:    1180px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-deep);
  background-color:var(--paper);
  /* papel con punteo azul tenue */
  background-image:radial-gradient(#DEE6F8 1px, transparent 1px);
  background-size:26px 26px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:99; background:var(--ink); color:#fff;
  padding:.75rem 1.25rem; border-radius:999px;
  font-weight:600; text-decoration:none;
  transition:top .2s;
}
.skip:focus{ top:.75rem; }

/* ═══ Trazo compartido de todos los SVG de tinta ═══ */
svg[viewBox]{
  fill:none;
  stroke:currentColor;
  stroke-width:var(--stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* .pip = chip de chocolate / ojo: sólido, sin contorno */
svg .pip{ fill:currentColor; stroke:none; }
.dashed{ stroke-dasharray:7 7; }

/* ═══════════════════════════ Topbar ═══════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:var(--gap);
  padding:.7rem var(--pad);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:var(--stroke-thin) solid transparent;
  transition:border-color .3s, background .3s;
}
.topbar.is-stuck{ border-bottom-color:var(--ink-hair); }

.topbar__mark{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:800; font-size:1.2rem;
  letter-spacing:-.02em; color:var(--ink);
  text-decoration:none; margin-right:auto;
}
.mini-cookie{ width:26px; height:26px; flex:none; }
.topbar__mark:hover .mini-cookie{ transform:rotate(18deg); }
.mini-cookie{ transition:transform .4s var(--ease-pop); }

.topbar__nav{ display:flex; gap:1.5rem; }
.topbar__nav a{
  font-size:.9375rem; font-weight:500; color:var(--ink-deep);
  text-decoration:none; padding:.25rem 0;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% var(--stroke-thin);
  background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease-out), color .2s;
}
.topbar__nav a:hover{ color:var(--ink); background-size:100% var(--stroke-thin); }

@media (max-width:720px){ .topbar__nav{ display:none; } }

/* ═══════════════════════════ Botones ═══════════════════════════ */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.6rem;
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.01em; line-height:1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:var(--stroke) solid var(--ink);
  border-radius:999px; text-decoration:none;
  transition:transform .25s var(--ease-pop), box-shadow .25s var(--ease-out), background .2s, color .2s;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 0 -4px var(--ink-hair); }
.btn:active{ transform:translateY(0); }

.btn--sm{ padding:.55rem 1.1rem; font-size:.9375rem; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); }
.btn--ghost:hover{ background:var(--paper-2); }

/* el mordisco: al pasar el mouse, se le come una esquina al botón */
.btn--bite::after{
  content:""; position:absolute; top:-9px; right:14px;
  width:26px; height:26px; border-radius:50%;
  background:var(--paper);
  border:var(--stroke) solid var(--ink);
  transform:scale(0); transform-origin:center;
  transition:transform .3s var(--ease-pop);
}
.btn--bite:hover::after,
.btn--bite:focus-visible::after{ transform:scale(1); }

.linkish{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.9rem;
  font-weight:600; font-size:.9375rem; color:var(--ink);
  text-decoration:none;
}
.linkish::after{
  content:"→"; transition:transform .25s var(--ease-out);
}
.linkish:hover::after{ transform:translateX(5px); }
.linkish::before{
  content:""; position:absolute; inset:0; /* toda la tarjeta es clickeable */
}

/* ═══════════════════════════ Hero ═══════════════════════════ */
.hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:clamp(2.5rem,7vw,5rem) var(--pad) clamp(3.5rem,8vw,6rem);
  min-height:min(92svh,900px);
  overflow:hidden;
}

.hero__chips{ position:absolute; inset:0; pointer-events:none; }
.chip{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:calc(var(--s) * .82);
  border-radius:50% 50% 45% 55%;
  background:var(--ink);
  opacity:.14;
  animation:drift var(--t) ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) rotate(0deg); }
  to  { transform:translate3d(14px,-26px,0) rotate(38deg); }
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
  font-size:.8125rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pin{ width:15px; height:15px; }

/* ── El wordmark: la firma de la página ── */
.wordmark{
  display:flex; align-items:center; justify-content:center;
  gap:.02em; margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(4.25rem, 19vw, 13rem);
  line-height:.86; letter-spacing:-.045em;
  color:var(--ink);
}
.wm-cookies{ display:flex; align-items:center; gap:.015em; }
.wm-cookie-slot{ position:relative; display:inline-flex; }
.wm-cookie{
  width:.78em; height:.78em; display:block;
  --stroke:3.5px;
}
.wm-cookie--bit{ position:absolute; inset:0; opacity:0; }

/* estado final del mordisco */
.is-bitten [data-whole]{ opacity:0; }
.is-bitten [data-bit]{ opacity:1; }
[data-whole], [data-bit]{ transition:opacity .12s linear; }

/* migas que saltan con el mordisco */
.crumbs{ position:absolute; top:12%; right:4%; width:1px; height:1px; }
.crumbs i{
  position:absolute; width:.09em; height:.075em;
  border-radius:50%; background:var(--ink); opacity:0;
}
.is-bitten .crumbs i{ animation:crumb .7s var(--ease-out) forwards; }
.crumbs i:nth-child(1){ --cx:.55em;  --cy:-.5em;  animation-delay:0s;    }
.crumbs i:nth-child(2){ --cx:.85em;  --cy:-.1em;  animation-delay:.03s;  }
.crumbs i:nth-child(3){ --cx:.35em;  --cy:-.8em;  animation-delay:.06s;  }
.crumbs i:nth-child(4){ --cx:1.05em; --cy:-.65em; animation-delay:.09s;  }
.crumbs i:nth-child(5){ --cx:.15em;  --cy:-.25em; animation-delay:.05s;  }
@keyframes crumb{
  0%  { opacity:1; transform:translate(0,0) scale(1); }
  70% { opacity:1; }
  100%{ opacity:0; transform:translate(var(--cx),var(--cy)) scale(.4); }
}

.hero__sub{
  margin:.6rem 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,3.5vw,2rem);
  letter-spacing:.01em; color:var(--ink);
}

.hero__lead{
  max-width:34ch; margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  font-size:var(--t-lead); line-height:1.55; color:var(--ink-mute);
  text-wrap:balance;
}

.hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}

.hero__cue{
  margin-top:auto; padding-top:clamp(2rem,6vw,4rem);
  color:var(--ink-mute); display:block;
}
.hero__cue svg{ width:20px; height:34px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ═══════════════════════════ Cinta ═══════════════════════════ */
.ribbon{
  background:var(--ink); color:#fff;
  padding:.85rem 0; overflow:hidden;
  border-block:var(--stroke) solid var(--ink-deep);
}
.ribbon__track{
  display:flex; align-items:center; gap:2rem; width:max-content;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.9rem,2vw,1.05rem);
  letter-spacing:.02em; white-space:nowrap;
  animation:marquee 34s linear infinite;
}
.ribbon:hover .ribbon__track{ animation-play-state:paused; }
.ribbon__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════════════════════ Secciones ═══════════════════════════ */
.section{
  max-width:var(--max);
  margin-inline:auto;
  padding:var(--bay) var(--pad);
}

/* banda pálida: corta el punteo y le da ritmo a la página */
.band{
  background:var(--paper-2);
  border-bottom:var(--stroke-thin) solid var(--ink-hair);
}

.head{ max-width:46ch; margin-bottom:clamp(2rem,4vw,3rem); }
.eyebrow{
  margin:0 0 .75rem;
  font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.h2{
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:var(--t-h2); line-height:1.02; letter-spacing:-.035em;
  color:var(--ink-deep); text-wrap:balance;
}
.head__note{
  margin:1.1rem 0 0; max-width:52ch;
  font-size:var(--t-lead); color:var(--ink-mute);
}

/* ── Tres hechos ── */
.facts__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.fact{ color:var(--ink); }
.fact__icon{ width:52px; height:52px; margin-bottom:1.1rem; }
.fact h3{
  margin:0 0 .4rem;
  font-family:var(--display); font-weight:700; font-size:var(--t-h3);
  letter-spacing:-.02em; color:var(--ink-deep);
}
.fact p{ margin:0; color:var(--ink-mute); font-size:.9875rem; }

/* ── Formatos ── */
.formats{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.format{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.5rem,3vw,2.25rem) 1.5rem 2rem;
  border:var(--stroke) solid var(--ink-hair);
  border-radius:28px;
  background:var(--paper);
  transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s var(--ease-out);
}
.format:hover{
  transform:translateY(-8px);
  border-color:var(--ink);
  box-shadow:0 16px 0 -8px var(--ink-hair);
}
.format:focus-within{ border-color:var(--ink); }

.format__tag{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  padding:.3rem .85rem; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  color:#fff; background:var(--ink);
  border-radius:999px;
}
.format--star{ border-color:var(--ink); }

.format__photo{
  width:clamp(150px,54%,230px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  border:var(--stroke) solid var(--ink);
  margin-bottom:1.4rem;
  background:var(--paper-2);
}
.format__photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:center;
  filter:saturate(1.06) contrast(1.06);
  transition:transform .5s var(--ease-out);
}
/* las bolsas quedan en la mitad de abajo de la foto */
.format__photo img.is-low{ object-position:center 64%; }
.format:hover .format__photo img{ transform:scale(1.07) rotate(2deg); }

.format__name{
  margin:0;
  font-family:var(--display); font-weight:800; font-size:var(--t-h3);
  letter-spacing:-.025em; color:var(--ink-deep);
}
.format__size{
  margin:.3rem 0 .8rem;
  font-family:var(--serif); font-style:italic; font-size:1.0625rem;
  color:var(--ink);
}
.format__desc{ margin:0; font-size:.9375rem; color:var(--ink-mute); max-width:30ch; }

/* ── Sabores: la galleta partiéndose, en video ── */
.sabores__grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.sabor{ position:relative; }

.sabor__media{
  position:relative;
  aspect-ratio:3/4; margin-bottom:1.2rem;
  border:var(--stroke) solid var(--ink);
  border-radius:28px; overflow:hidden;
  background:var(--paper-2);
}
.sabor__video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease-out);
}
.sabor:hover .sabor__video{ transform:scale(1.03); }

/* botón de play: sólo cuando el video no arranca solo */
.sabor__play{
  position:absolute; inset:auto .75rem .75rem auto;
  display:none; place-items:center;
  width:52px; height:52px; padding:0;
  border:var(--stroke) solid var(--ink);
  border-radius:50%;
  background:var(--paper); color:var(--ink);
  cursor:pointer;
  transition:transform .25s var(--ease-pop), background .2s;
}
.sabor__play svg{ width:22px; height:22px; fill:currentColor; stroke:none; margin-left:2px; }
.sabor__play:hover{ transform:scale(1.08); background:var(--paper-2); }
.sabor__media.needs-play .sabor__play{ display:grid; }

.sabor__name{
  margin:0 0 .45rem;
  font-family:var(--display); font-weight:800; font-size:var(--t-h3);
  letter-spacing:-.025em; color:var(--ink-deep);
}
.sabor__desc{ margin:0; font-size:.9375rem; color:var(--ink-mute); max-width:34ch; }

.sabores__ask{ margin:clamp(2rem,4vw,3rem) 0 0; text-align:center; }

/* ── Momento ── */
.momento{
  position:relative;
  padding:clamp(4rem,9vw,7rem) var(--pad);
  background:var(--ink); color:#fff;
  text-align:center;
  overflow:hidden;
}
.momento__mascot{
  width:clamp(104px,14vw,150px); height:auto;
  margin:0 auto clamp(1.75rem,4vw,2.5rem);
  --stroke:2.5px;
  animation:saludo 3.6s ease-in-out infinite;
  transform-origin:50% 90%;
}
@keyframes saludo{
  0%,100%{ transform:translateY(0) rotate(-1.5deg); }
  50%    { transform:translateY(-7px) rotate(1.5deg); }
}
.momento__quote{
  margin:0 auto; max-width:26ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.6rem,5.2vw,3.25rem);
  line-height:1.16; letter-spacing:.005em;
  text-wrap:balance;
}
.momento__by{
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ── Pedido ── */
.pedido__wrap{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .pedido__wrap{ grid-template-columns:1.1fr .9fr; }
}

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.75rem; }
.step{ display:flex; gap:1.25rem; align-items:flex-start; }
.step__n{
  flex:none;
  display:grid; place-items:center;
  width:44px; height:44px;
  border:var(--stroke) solid var(--ink);
  border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:1.1rem;
  color:var(--ink);
}
.step h3{
  margin:.5rem 0 .3rem;
  font-family:var(--display); font-weight:700; font-size:1.125rem;
  letter-spacing:-.015em; color:var(--ink-deep);
}
.step p{ margin:0; font-size:.9375rem; color:var(--ink-mute); }

.card{
  padding:clamp(1.5rem,3vw,2rem);
  border:var(--stroke) solid var(--ink);
  border-radius:28px;
  background:var(--paper);
}
.card__title{
  margin:0 0 1.25rem;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  letter-spacing:-.02em; color:var(--ink-deep);
}
.contact{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 0;
  text-decoration:none; color:var(--ink-deep);
  border-top:var(--stroke-thin) solid var(--ink-hair);
  transition:color .2s;
}
.contact:first-of-type{ border-top:0; padding-top:0; }
.contact svg{ width:24px; height:24px; flex:none; color:var(--ink); transition:transform .3s var(--ease-pop); }
.contact:hover{ color:var(--ink); }
.contact:hover svg{ transform:scale(1.12) rotate(-6deg); }
.contact span{ display:flex; flex-direction:column; }
.contact strong{ font-weight:600; font-size:1rem; }
.contact small{ font-size:.8125rem; color:var(--ink-mute); }

/* ═══════════════════════════ Footer ═══════════════════════════ */
.foot{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1rem;
  padding:clamp(3rem,7vw,5rem) var(--pad) clamp(2rem,4vw,3rem);
  border-top:var(--stroke) solid var(--ink-hair);
  color:var(--ink);
}
.foot__mark{ width:66px; height:66px; }
.foot__name{
  margin:0;
  font-family:var(--display); font-weight:800; font-size:1.6rem;
  letter-spacing:-.03em; color:var(--ink);
  display:flex; flex-direction:column; line-height:1.1;
}
.foot__name span{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.95rem; letter-spacing:.01em; color:var(--ink-mute);
}
.foot__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:.5rem; }
.foot__links a{ font-size:.9375rem; font-weight:500; color:var(--ink-deep); text-decoration:none; }
.foot__links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.foot__legal{
  margin:1rem 0 0;
  font-size:.8125rem; color:var(--ink-mute);
}

/* ═══════════════════════════ Movimiento ═══════════════════════════ */

/* entrada de la portada */
[data-anim]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out) var(--d,0ms), transform .7s var(--ease-out) var(--d,0ms);
}
.is-loaded [data-anim]{ opacity:1; transform:none; }

/* las galletas caen en su lugar */
[data-drop]{
  opacity:0; transform:translateY(-140%) rotate(-30deg) scale(.5);
  transition:opacity .35s linear var(--d,0ms), transform .85s var(--ease-pop) var(--d,0ms);
}
.is-loaded [data-drop]{ opacity:1; transform:none; }

/* revelado al scrollear */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out) var(--d,0ms), transform .7s var(--ease-out) var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* Movimiento reducido: se va el desplazamiento, se quedan los fundidos y el
   feedback de color. La página sigue respondiendo, pero nada se mueve de lugar. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  /* lo que se movía solo, se detiene */
  .chip{ display:none; }
  .ribbon__track,
  .hero__cue svg,
  .momento__mascot{ animation:none; }
  .is-bitten .crumbs i{ animation:none; opacity:0; }

  /* las entradas pasan a ser sólo fundido, sin subir ni caer */
  [data-anim], [data-drop], [data-reveal]{
    transform:none !important;
    transition:opacity .45s ease !important;
  }

  /* el hover deja de desplazar, pero conserva color y borde */
  .btn:hover,
  .format:hover,
  .sabor__play:hover,
  .contact:hover svg,
  .topbar__mark:hover .mini-cookie{ transform:none; }
  .format:hover .format__photo img,
  .sabor:hover .sabor__video{ transform:none; }
  .btn--bite::after{ display:none; }
}