:root{
  --fondo:#e8d5ba;      /* fondo */
  --texto:#b17f4a;      /* tipografía */
  --destacado:#b4c306;  /* información destacada */
  --tarjeta:#f6ecd8;    /* crema claro del packaging, para tarjetas */
  --ease-out:cubic-bezier(.23,1,.32,1);   /* curva de salida fuerte (entradas) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:'Alegreya Sans',system-ui,sans-serif;font-weight:500;font-size:1.15rem;line-height:1.6}
h1,h2,h3{font-family:'Alegreya',Georgia,serif;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--destacado);outline-offset:3px}

.barra{position:sticky;top:0;z-index:10;background:var(--fondo);padding:.9rem 1rem;text-align:center}
.barra nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.8rem}
.barra a{text-decoration:none;font-weight:700;padding:.2rem .1rem;border-bottom:3px solid transparent;transition:border-color .2s ease}
.barra a.activa{border-bottom-color:var(--destacado)}
.barra a:hover{border-bottom-color:var(--destacado)}

.home{position:relative;overflow:hidden;min-height:calc(100svh - 3.2rem);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:1.5rem 1.25rem 3rem;gap:1.4rem}
.marca{width:min(780px,94vw);height:auto}
.boton{background:var(--destacado);color:#fff;text-decoration:none;font-weight:700;font-size:1.2rem;
  padding:.85rem 1.8rem;border-radius:999px;box-shadow:4px 4px 0 var(--texto);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.boton:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--texto)}}
.boton:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--texto)}

.seccion{position:relative;overflow:hidden;scroll-margin-top:3.2rem;padding:3rem 1.25rem 3rem}
.contenido{position:relative;z-index:1;max-width:760px;margin:0 auto}
/* Títulos de sección: texto marrón con barrita verde y sombra marrón debajo (distinto de las cápsulas crema) */
.chip{position:relative;display:block;width:fit-content;max-width:100%;color:var(--texto);font-weight:700;
  font-size:clamp(1.9rem,5.5vw,2.8rem);line-height:1.15;margin:.4rem 0 1.5rem;padding:0 0 .9rem;text-wrap:balance}
.chip::after{content:"";position:absolute;left:0;bottom:0;width:78px;height:10px;border-radius:10px;background:var(--destacado);box-shadow:3px 3px 0 var(--texto)}
.bajada{margin:0 0 1.6rem}
.estado{text-align:center}
.stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2.2rem 1.2rem;align-items:stretch;padding-top:.8rem}



.pie{text-align:center;padding:2.5rem 1rem 3rem;font-weight:700}
.pie p{margin:0}
.pie a{text-decoration:none;border-bottom:3px solid var(--destacado)}


/* Texto del Home */
/* Franja de tres ideas bajo el logo (mismos párrafos del inicio, ordenados en columnas) */
.franja{position:relative;z-index:1;width:100%;max-width:960px;margin-top:1.4rem;display:grid;gap:1.6rem 2.6rem;text-align:left;
  font-size:1.1rem;line-height:1.65;text-shadow:0 0 5px var(--fondo),0 0 5px var(--fondo)}
@media (min-width:860px){.franja{grid-template-columns:repeat(3,1fr)}}
.franja p{margin:0}
.franja strong{font-weight:700}

/* Stickers de recetas */
.sticker{--rot:-1.2deg;position:relative;display:flex;flex-direction:column;background:var(--tarjeta);border:6px solid var(--texto);border-radius:22px;
  transform:rotate(var(--rot));transition:transform .25s,opacity .6s}
.sticker:nth-child(even){--rot:1deg}
.sticker::before{content:"";position:absolute;top:-22px;left:50%;width:38%;height:34px;transform:translateX(-50%);
  background:rgba(180,195,6,.9)}
.sticker-btn{display:block;flex:1;width:100%;background:none;border:0;padding:2.2rem 1rem 1.1rem;color:inherit;
  font:inherit;text-align:center;cursor:pointer;border-radius:16px}
.sticker-titulo{display:block;font-family:'Alegreya Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.3rem,3.2vw,1.55rem);line-height:1.15}
.sticker-detalle{display:block;font-weight:500;font-size:1.15rem;margin-top:.15rem}
.sticker-btn::after{content:"";display:block;width:10px;height:10px;margin:.7rem auto 0;
  border:solid var(--texto);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform .3s}
.abierta .sticker-btn::after{transform:rotate(225deg) translate(-3px,-3px)}
.sticker.abierta{--rot:0deg;grid-column:1 / -1}
.detalle{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.abierta .detalle{grid-template-rows:1fr}
.detalle-in{overflow:hidden;min-height:0;visibility:hidden;padding:0 1.4rem;transition:visibility 0s .45s}
.abierta .detalle-in{visibility:visible;padding-bottom:1.6rem;transition-delay:0s}
.meta{margin:0 0 1.2rem;padding-top:.4rem;border-top:3px dotted var(--texto)}
.receta-cols{display:grid;gap:1.2rem 2rem}
@media (min-width:700px){.receta-cols{grid-template-columns:1fr 1.35fr}}
.detalle h3{font-size:1.4rem;margin:0 0 .5rem}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
ul.lista li{position:relative;padding-left:1.4rem}
ul.lista li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:.65rem;border-radius:50%;background:var(--texto)}
.tip{margin:1.4rem 0 0;padding:.8rem 1rem;border-left:6px solid var(--destacado);border-radius:12px;background:rgba(180,195,6,.18)}
.sticker .sticker-btn:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){
  .sticker.rev{transform:translateY(12px) rotate(var(--rot))}
  .sticker.rev.visible{transform:rotate(var(--rot))}
}
@media (hover:hover) and (pointer:fine){.sticker:not(.abierta):hover{transform:translateY(-4px) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.detalle,.detalle-in{transition:none}}

.tip-inicio{margin:0 0 1.2rem}
.sticker .pasos-receta{margin:0}

/* Pasos numerados (cocción y recetas) */
.pasos-receta{counter-reset:p;gap:.8rem}
.pasos-receta li{counter-increment:p;position:relative;padding-left:3.5rem;min-height:3.2rem;--ny:-.6rem}
.pasos-receta li::before,.pasos-coccion li::before{content:counter(p);position:absolute;left:var(--cx,0);top:var(--ny,-.15rem);
  display:block;font-family:'Alegreya',Georgia,serif;font-weight:700;font-size:3.4rem;line-height:1;
  color:var(--destacado);text-shadow:.05em .05em 0 var(--texto)}

/* Paso a paso de cocción: mismo criterio que los stickers (fondo, borde, radio, números, títulos y notas) */
.chip-sep{margin-top:3.5rem}
.pasos-coccion{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pasos-coccion li{--cx:1.1rem;--cy:1.05rem;counter-increment:p;position:relative;background:var(--tarjeta);
  border:6px solid var(--texto);border-radius:22px;padding:1rem 1.3rem 1rem 4.4rem;min-height:4.6rem;--ny:.3rem}

/* Pelotitas de quinua (como en el packaging) */
.bola{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:var(--texto);z-index:0;pointer-events:none}
.portada{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.portada>.marca,.portada>.boton{position:relative;z-index:1}
.bola-m{display:none}
/* Celular: la primera pantalla es solo logo y botón; la primera idea asoma abajo para invitar a bajar */
@media (max-width:700px){
  .home{justify-content:flex-start;padding-top:0}
  .portada{min-height:calc(100svh - 3.2rem - 5.5rem);justify-content:center}
  .franja{margin-top:0}
}

/* Bolitas chicas en los márgenes de toda la web (las agrega js/main.js) */
.home{--ancho:960px}
.seccion{--ancho:760px}
.bola-g{--gut:max(10px,calc((100% - var(--ancho)) / 2 - 24px))}
.bola-g.izq{left:calc(12px + var(--g) * (var(--gut) - var(--s) - 12px))}
.bola-g.der{left:auto;right:calc(12px + var(--g) * (var(--gut) - var(--s) - 12px))}
@media (max-width:700px){
  .bola-g{width:var(--sm);height:var(--sm)}
  .bola-g.izq{left:calc(var(--g) * 7px - var(--sm) * .3)}
  .bola-g.der{right:calc(var(--g) * 7px - var(--sm) * .3)}
}

/* Animaciones (solo si la persona no pidió reducir movimiento) */
@media (prefers-reduced-motion:no-preference){
  /* Una sola entrada al cargar: logo, botón, las tres ideas y por último las pelotitas */
  .marca{animation:entrada .9s var(--ease-out) backwards}
  .boton{animation:subir .7s var(--ease-out) .25s backwards}
  .franja p{animation:subir .7s var(--ease-out) backwards}
  .franja p:nth-child(1){animation-delay:.4s}
  .franja p:nth-child(2){animation-delay:.48s}
  .franja p:nth-child(3){animation-delay:.56s}
  .bola{animation:aparece .8s var(--ease-out) calc(var(--d) + .5s) backwards,
        flota var(--f,9s) ease-in-out calc(var(--d) + 1.3s) infinite}
  /* Al bajar: apariciones cortas y discretas */
  .rev{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
  .rev.visible{opacity:1;transform:none}
  .sticker.rev{transition:opacity .45s var(--ease-out),transform .25s var(--ease-out)}
  @keyframes flota{50%{transform:translateY(-12px)}}
  @keyframes aparece{from{transform:scale(.6);opacity:0}}
  @keyframes entrada{from{transform:translateY(14px) scale(.97);opacity:0}}
  @keyframes subir{from{transform:translateY(12px);opacity:0}}
}

/* Valor nutricional (tabla como en el packaging) */
.tabla-nutri{background:var(--destacado);color:#fff;border-radius:22px;overflow:hidden}
.tabla-tit{margin:0;padding:.9rem 1.3rem;font-family:'Alegreya Sans',system-ui,sans-serif;font-weight:800;font-size:1.5rem;line-height:1.2}
.fila{border-top:2px solid #fff}
.fila-btn{display:grid;grid-template-columns:1fr 8.5rem 2.2rem;align-items:stretch;width:100%;padding:0;
  background:none;border:0;color:inherit;font:inherit;font-weight:700;font-size:1.2rem;text-align:left;cursor:pointer}
.fila-btn:hover{background:rgba(255,255,255,.14)}
.fila-nombre,.fila-valor{padding:.75rem 1.3rem;display:flex;align-items:center}
.fila-valor{border-left:2px solid #fff;font-weight:500;justify-content:flex-end}
.fila-btn::after{content:"";align-self:center;justify-self:center;width:9px;height:9px;border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.fila.abierta .fila-btn::after{transform:rotate(225deg) translate(-2px,-2px)}
.fila-detalle{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.fila.abierta .fila-detalle{grid-template-rows:1fr}
.fila-det-in{overflow:hidden;min-height:0;visibility:hidden;background:var(--tarjeta);color:var(--texto);transition:visibility 0s .4s}
.fila.abierta .fila-det-in{visibility:visible;transition-delay:0s}
.fila-det-in p{margin:0;padding:1rem 1.3rem;font-weight:500}
.fila-btn:focus-visible{outline:3px solid #fff;outline-offset:-5px}
@media (prefers-reduced-motion:reduce){.fila-detalle,.fila-btn::after{transition:none}}
/* Celular: el menú es una tira de un renglón que se desliza de costado */
@media (max-width:520px){
  .barra{padding:.8rem 0}
  .barra nav{position:relative;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:1.1rem;padding:0 1.25rem;font-size:.98rem;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent)}
  .barra nav::-webkit-scrollbar{display:none}
  .barra a{flex:none}
}

@media (max-width:600px){
  .home .bola:not(.bola-g):not(.bola-m){display:none}
  .bola-m{display:block}
  .bajada{text-shadow:0 0 5px var(--fondo),0 0 5px var(--fondo)}
}

/* Dónde conseguirla: mapa de Google con dietéticas y herboristerías */
.mapa{border:6px solid var(--texto);border-radius:22px;overflow:hidden;background:var(--tarjeta);aspect-ratio:4/3;max-width:100%}
@media (min-width:700px){.mapa{aspect-ratio:16/9}}
.mapa iframe{display:block;width:100%;height:100%;border:0}
.boton-mapa{display:inline-block;margin-top:1.4rem}

/* Sin palabras sueltas al final de un párrafo (viudas) */
p,li,.bajada,.franja p{text-wrap:pretty}