/* Lilé — "Dulcería pastel". Tokens y reglas en DESIGN.md */
:root{
  /* Paleta del manual */
  --rosa:#F8BBD0; --lila:#D6C2F3; --durazno:#FFD9B3; --amarillo:#FFE89C; --celeste:#BFE6F7; --crema:#FFF6EE;
  --rosa-int:#F4A7C3; --lila-int:#C9B4EE; --menta:#CFE8D6; --rosa-claro:#FCE4EA;
  /* Tintas para texto (contraste sobre crema y pastel) */
  --ciruela:#4B3560; --ciruela-suave:#6F5A82; --frambuesa:#B8457A; --azul-tinta:#2F6F8C;
  --blanco:#FFFFFF; --borde:#EEDFEA;
  --sombra:0 14px 34px -16px rgba(75,53,96,.28);
  color-scheme:light;

  --titulo:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --texto:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rebote:cubic-bezier(.3,1.5,.5,1);
  --seccion:72px;
}
@media (min-width:900px){ :root{ --seccion:104px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:84px; }
body{
  margin:0;
  background:var(--crema);
  color:var(--ciruela);
  font:400 17px/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
ul,ol{ list-style:none; margin:0; padding:0; }
p{ margin:0 0 16px; }
h1,h2,h3{ font-family:var(--titulo); font-weight:600; margin:0; color:var(--ciruela); }
h2{ font-size:clamp(34px,7vw,52px); line-height:1.08; text-wrap:balance; margin-bottom:18px; }
h3{ font-size:24px; line-height:1.2; }
a{ color:var(--frambuesa); text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--ciruela); outline-offset:3px; border-radius:10px; }
section[tabindex="-1"]:focus{ outline:none; }

.wrap{
  width:100%; max-width:1140px; margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saltar{
  position:absolute; left:16px; top:-80px; z-index:100;
  background:var(--ciruela); color:var(--crema); padding:12px 18px; border-radius:999px;
  font-weight:800; text-decoration:none;
}
.saltar:focus{ top:12px; }

.lead{ font-size:19px; color:var(--ciruela-suave); max-width:46ch; }
.ph{ background:var(--amarillo); color:var(--ciruela); border-radius:6px; padding:0 6px; font-weight:800; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:600 15px/1.2 var(--titulo); letter-spacing:.04em; color:var(--frambuesa);
  margin-bottom:12px;
}
.eyebrow svg{ width:18px; height:18px; flex:none; }
.eyebrow--ciruela{ color:var(--ciruela); }
/* Sobre la banda rosa, --frambuesa da 4.18:1; este tono apenas más oscuro llega a 4.67:1 (AA) */
.banda--rosa .eyebrow{ color:#AD3F72; }

/* Botón sticker */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2px solid var(--ciruela);font:600 18px/1 var(--titulo);text-decoration:none;color:var(--ciruela);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s ease,background-color .2s;box-shadow:0 4px 0 var(--ciruela)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ciruela)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ciruela)}
.btn-rosa{background:var(--rosa)} .btn-rosa:hover{background:var(--rosa-int)}
.btn-blanco{background:var(--blanco)} .btn-blanco:hover{background:var(--amarillo)}
.btn .flecha{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* Cabecera */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(255,246,238,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding-top:env(safe-area-inset-top);
  transition:box-shadow .25s ease;
}
.cabecera.scrolled{ box-shadow:var(--sombra); }
.cabecera__fila{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cabecera__logo{ display:block; border-radius:10px; }
.cabecera__logo img{ height:46px; width:auto; }

.nav{ display:none; }
.nav ul{ display:flex; gap:4px; }
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  font:500 17px/1 var(--titulo); color:var(--ciruela); text-decoration:none;
  transition:background-color .2s;
}
.nav a:hover{ background:var(--rosa-claro); }
.nav a[aria-current="true"]{ background:var(--lila); }

.burger{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--blanco); color:var(--ciruela);
  border:2px solid var(--ciruela); box-shadow:0 3px 0 var(--ciruela);
  cursor:pointer; padding:0;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease;
}
.burger:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ciruela); }
.burger svg,.panel__cerrar svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
@media (min-width:920px){
  .nav{ display:block; }
  .burger{ display:none; }
}

/* Menú móvil */
.velo{ position:fixed; inset:0; z-index:50; background:rgba(75,53,96,.32); opacity:0; transition:opacity .35s ease; }
.velo.visible{ opacity:1; }
.panel{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(86vw,360px);
  background:var(--crema);
  border-radius:28px 0 0 28px;
  padding:calc(16px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 20px;
  box-shadow:var(--sombra);
  transform:translateX(105%);
  visibility:hidden;
  transition:transform .35s cubic-bezier(.3,1.2,.5,1), visibility 0s linear .35s;
  overflow-y:auto;
}
.panel.abierto{ transform:none; visibility:visible; transition:transform .35s cubic-bezier(.3,1.2,.5,1), visibility 0s; }
.panel__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.panel__top img{ height:40px; width:auto; }
.panel__cerrar{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; padding:0;
  background:var(--blanco); color:var(--ciruela); border:2px solid var(--ciruela); cursor:pointer;
}
.panel__lista{ display:grid; gap:10px; }
.panel__lista a{
  display:flex; align-items:center; gap:14px; min-height:56px; padding:0 18px;
  background:var(--blanco); border-radius:18px; border:1.5px solid var(--borde);
  font:500 22px/1 var(--titulo); color:var(--ciruela); text-decoration:none;
}
.panel__lista a:hover{ background:var(--rosa-claro); }
.panel__lista a[aria-current="true"]{ background:var(--lila); border-color:var(--lila); }
.punto{ width:12px; height:12px; border-radius:50%; flex:none; border:1.5px solid var(--ciruela); }
@media (min-width:920px){ .panel,.velo{ display:none !important; } }

/* Ondas */
.wave{ display:block; width:100%; height:34px; margin-bottom:-1px; }
.wave--salida{ transform:scaleY(-1); margin-top:-1px; margin-bottom:0; }

/* Bandas y secciones */
.seccion,.banda{ padding:var(--seccion) 0; position:relative; }
.banda--rosa{ background:var(--rosa-claro); }
.banda--lila{ background:var(--lila); }
.cabeza{ text-align:center; display:flex; flex-direction:column; align-items:center; margin-bottom:40px; }
.nota{ text-align:center; color:var(--ciruela-suave); font-size:15px; margin:40px 0 0; }

/* 1. Inicio */
.inicio{ position:relative; padding:28px 0 calc(var(--seccion) - 24px); text-align:center; overflow:clip; }
.inicio__contenido{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.inicio__logo{ width:min(88vw,480px); margin:0 0 8px; animation:entrada 1s var(--rebote) both; }
.tagline{ font:600 clamp(26px,5.6vw,40px)/1.15 var(--titulo); margin:0 0 14px; text-wrap:balance; }
.t1{ color:var(--frambuesa); } .t2{ color:#7A5BB8; } .t3{ color:var(--azul-tinta); }
.inicio .lead{ margin-bottom:28px; }
.acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; margin-bottom:28px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  background:var(--blanco); border:1.5px solid var(--borde); border-radius:999px;
  padding:8px 16px; font-size:14px; font-weight:800;
}
.chip--cr svg{ width:22px; height:22px; }
.arcoiris{ width:min(70%,300px); height:auto; margin-top:32px; }

.flotantes{ position:absolute; inset:0; pointer-events:none; }
.flota{ position:absolute; animation:bob 6s ease-in-out infinite; }
.flota:nth-child(3n+1){ animation-delay:-1.5s; }
.flota:nth-child(3n+2){ animation-delay:-3s; }
.flota:nth-child(3n){ animation-delay:-4.5s; }
.brilla{ animation:twinkle 2.8s ease-in-out infinite; }

/* Móvil: quedan 3, pequeños, en las esquinas */
.inicio .flota{ display:none; }
.f1{ display:block !important; width:34px; height:31px; top:14px; left:12px; }
.f3{ display:block !important; width:34px; height:33px; top:22px; right:12px; }
.f5{ display:block !important; width:24px; height:24px; bottom:120px; right:16px; }
.f2{ width:58px; height:58px; top:36%; left:4%; }
.f4{ width:84px; height:59px; top:12%; right:9%; }
.f6{ width:40px; height:37px; bottom:24%; right:6%; }
.f7{ width:120px; height:120px; bottom:8%; left:7%; }
@media (min-width:700px){
  .inicio .f2,.inicio .f4,.inicio .f6{ display:block; }
  .f1{ width:46px; height:42px; top:9%; left:9%; }
  .f3{ width:52px; height:50px; top:auto; bottom:30%; right:12%; }
  .f5{ width:32px; height:32px; top:38%; right:4%; bottom:auto; }
}
@media (min-width:1100px){ .inicio .f7{ display:block; } }

/* 2. Nuestra historia */
.historia{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .historia{ grid-template-columns:1fr 1.1fr; gap:72px; } }
.historia__arte{ position:relative; width:min(100%,440px); aspect-ratio:1; justify-self:center; }
.mancha{ position:absolute; }
.mancha--rosa{ inset:6% 18% 14% 4%; background:var(--rosa); border-radius:58% 42% 55% 45% / 47% 58% 42% 53%; animation:morph 12s ease-in-out infinite; }
.mancha--lila{ inset:24% 4% 4% 30%; background:var(--lila); border-radius:42% 58% 38% 62% / 55% 40% 60% 45%; animation:morph 14s ease-in-out infinite reverse; opacity:.92; }
.arte{ position:absolute; }
.arte--corazon{ width:28%; height:26%; top:26%; left:22%; }
.arte--flor{ width:24%; aspect-ratio:1; height:auto; top:8%; right:12%; animation-delay:-2s; }
.arte--rayos{ width:18%; aspect-ratio:1; height:auto; bottom:10%; left:8%; }
.arte--destello{ width:12%; aspect-ratio:1; height:auto; top:6%; left:10%; }
.arte--corazon2{ width:16%; height:15%; bottom:16%; right:16%; animation-delay:-4s; }
.historia__texto p:not(.eyebrow){ color:var(--ciruela-suave); max-width:52ch; }
.valores{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.valores li{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blanco); border-radius:999px; padding:8px 16px 8px 12px;
  font:500 17px/1.2 var(--titulo); box-shadow:var(--sombra);
}
.valores svg{ width:22px; height:22px; }

/* 3. Productos */
.colecciones{ display:grid; gap:28px; }
@media (min-width:700px){ .colecciones{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.coleccion{
  background:var(--blanco); border:2px solid var(--ciruela); border-radius:30px; overflow:hidden;
  box-shadow:0 5px 0 var(--ciruela);
  transition:transform .35s var(--rebote), box-shadow .35s var(--rebote);
}
.coleccion:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:0 11px 0 var(--ciruela); }
.coleccion:nth-child(2):hover{ transform:translateY(-6px) rotate(1deg); }
.coleccion__patron{ display:block; width:100%; height:auto; aspect-ratio:4/3; border-bottom:2px solid var(--ciruela); }
.coleccion__cuerpo{ padding:22px 24px 26px; }
.coleccion__cuerpo p{ color:var(--ciruela-suave); margin:8px 0 0; }
.pastilla{
  display:inline-block; background:var(--amarillo); color:var(--ciruela);
  font-size:13px; font-weight:800; border-radius:999px; padding:4px 12px; margin-bottom:12px;
}

/* 4. Próximamente */
.proximamente{ overflow:clip; }
.proximamente__contenido{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.proximamente h2{ font-size:clamp(40px,9vw,72px); }
.proximamente .lead{ color:var(--ciruela); }
.p1{ width:30px; height:30px; top:14%; left:8%; }
.p2{ width:44px; height:40px; bottom:16%; left:12%; }
.p3{ width:46px; height:44px; top:12%; right:9%; }
.p4{ width:26px; height:26px; bottom:22%; right:14%; }
@media (max-width:699px){ .p2{ display:none; } .p1{ top:6%; } .p3{ top:4%; width:34px; height:33px; } }
.pasos{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0 32px; }
.paso{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.7); border-radius:999px; padding:8px 18px 8px 8px;
  font:500 17px/1.2 var(--titulo);
}
.paso__num{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:2px solid var(--ciruela); font-weight:600; font-size:16px; background:var(--blanco);
}
.paso--hecho .paso__num{ background:var(--ciruela); }
.paso--hecho svg{ width:18px; height:18px; fill:none; stroke:var(--blanco); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* 5. Contacto */
.contactos{ display:grid; gap:16px; }
.contacto{
  display:flex; align-items:center; gap:18px;
  background:var(--blanco); border:1.5px solid var(--borde); border-radius:26px; padding:20px;
  transition:transform .3s var(--rebote), border-color .2s;
}
.contacto:hover{ transform:translateY(-4px); border-color:var(--lila-int); }
.contacto__icono{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; flex:none; color:var(--ciruela); }
.contacto__icono svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.contacto h3{ font-size:22px; }
.contacto__valor{ color:var(--ciruela-suave); margin:4px 0 0; overflow-wrap:anywhere; }
.contacto__valor a{ font-weight:700; display:inline-block; min-height:44px; line-height:44px; margin:-10px 0; }
.contacto__aviso{ color:var(--frambuesa); font-size:13px; font-weight:800; margin:4px 0 0; }
@media (min-width:760px){
  .contactos{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .contacto{ flex-direction:column; align-items:flex-start; padding:26px; }
}

/* 6. Pie */
.pie{
  background:var(--ciruela); color:#F5ECF8; text-align:center;
  padding:56px 0 calc(32px + env(safe-area-inset-bottom));
}
.pie__contenido{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.pie__logo{ display:inline-block; background:var(--crema); border-radius:28px; padding:10px 22px; }
.pie__logo img{ height:64px; width:auto; }
.pie__enlaces{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px; }
.pie__enlaces a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:#F5ECF8; text-decoration:none; font-weight:700; border-radius:999px; }
.pie__enlaces a:hover{ text-decoration:underline; }
.pie a:focus-visible{ outline-color:var(--amarillo); }
.pie__legal{ margin:0; color:#D7C8E4; font-size:14px; }
.pie__corazon{ width:14px; height:13px; vertical-align:-1px; }

/* Aparición al bajar (solo elementos que empiezan fuera de pantalla; ver main.js) */
.por-revelar{ opacity:0; transform:translateY(26px); }
.revelado{ transition:opacity .7s ease, transform .7s var(--rebote); }

/* Animaciones */
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-12px) rotate(5deg); }
}
@keyframes twinkle{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.7); opacity:.55; }
}
@keyframes entrada{
  from{ transform:translateY(14px) scale(.85); opacity:0; }
  to{ transform:none; opacity:1; }
}
@keyframes morph{
  0%,100%{ border-radius:58% 42% 55% 45% / 47% 58% 42% 53%; }
  33%{ border-radius:40% 60% 45% 55% / 60% 40% 58% 42%; }
  66%{ border-radius:55% 45% 62% 38% / 42% 55% 45% 58%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .por-revelar{ opacity:1; transform:none; }
}