/* ==========================================================
   La Receta de Casa · Estilos
   Los valores de marca salen de tokens.css.
   Los estados iniciales de las animaciones van bajo .js:
   sin JavaScript, todo el contenido queda visible.
   ========================================================== */

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--alto-menu))}
body{margin:0;background-color:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.grano{background-color:var(--fondo);background-image:repeating-radial-gradient(circle at 0 0,var(--grano) 0 1px,transparent 1px 4px)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.rotulo{font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;letter-spacing:.28em;font-size:14px}
.cond{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase}

/* ---------- Sol de Mayo ---------- */
.sol,.mini-sol{display:block;width:100%;height:100%;color:var(--amarillo)}
.gira{transform-box:fill-box;transform-origin:center;animation:girar 90s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Menú fijo ---------- */
.menu{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);border-bottom:3px solid var(--pizarra);transform:translateY(-110%);transition:transform .6s var(--curva)}
.menu.visible,.menu:focus-within,html:not(.js) .menu{transform:none}
.menu-in{max-width:var(--ancho);margin:0 auto;height:var(--alto-menu);display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);padding:0 var(--esp-4)}
.isotipo{display:flex;align-items:center;gap:var(--esp-2);text-decoration:none}
.isotipo .mini-sol{width:42px;height:42px;flex:none}
.isotipo span{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:24px;line-height:.88;color:var(--titulo);text-shadow:2px 2px 0 rgba(23,56,79,.12)}
.chapas{display:flex;gap:var(--esp-1);list-style:none;margin:0;padding:0}
.chapas a{display:block;padding:var(--esp-1) 14px;border:2px solid var(--azul);color:var(--titulo);font-family:var(--f-rotulo);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.chapas a:hover{background:rgba(42,133,196,.12)}
.chapas a.activa{background:var(--pizarra);border-color:var(--pizarra);color:var(--amarillo)}

/* ---------- Portada ---------- */
.portada{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden;z-index:0}
.portada::before{content:"";position:absolute;inset:var(--esp-3);border:3px double var(--linea);pointer-events:none}
.portada-in{--fs:clamp(4.2rem,17vw,10.5rem);position:relative;width:100%;padding:calc(var(--fs) * 1.02) 20px 0;text-align:center;will-change:transform,opacity}
.marca{position:relative;display:inline-block}
.marca h1{position:relative;z-index:2;margin:0;font-family:var(--f-titulo);font-weight:800;font-size:var(--fs);line-height:.84;text-transform:uppercase;color:var(--titulo);text-shadow:5px 5px 0 rgba(23,56,79,.14)}
.linea-titulo{display:block}
.palabra{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .04em .08em;margin-bottom:-.08em}
.palabra>span{display:inline-block}
.js .palabra>span{transform:translateY(112%)}
.sol-ventana{position:absolute;z-index:1;left:50%;top:calc(var(--fs) * -1.08);width:calc(var(--fs) * 1.5);height:calc(var(--fs) * 1.3);transform:translateX(-50%);overflow:hidden;pointer-events:none}
.sol-sube{position:absolute;left:50%;bottom:0;--d:calc(var(--fs) * 1.2);width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2)}
.js .sol-sube{transform:translateY(105%);opacity:0}
.bajada{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:calc(var(--fs) * .2)}
.bajada .tramo{width:clamp(34px,6vw,70px);height:3px;background:var(--amarillo)}
.bajada .tramo:first-child{transform-origin:right}
.bajada .tramo:last-child{transform-origin:left}
.js .bajada .tramo{transform:scaleX(0)}
.bajada .rotulo{font-size:clamp(13px,1.5vw,17px);color:var(--rotulo)}
.js .bajada .rotulo{opacity:0;transform:translateY(10px)}
.globito{position:absolute;z-index:3;top:calc(var(--fs) * -1.02);left:min(calc(50% + var(--fs) * .52), calc(100% - 11rem));background:var(--amarillo);color:var(--verde);font-family:var(--f-texto);font-weight:700;font-size:clamp(17px,2vw,26px);line-height:1.2;padding:.45em 1em;border-radius:999px;white-space:nowrap;transform-origin:10% 100%;transform:rotate(-3deg);box-shadow:0 18px 40px -22px rgba(23,56,79,.55)}
.js .globito{transform:scale(.4) rotate(-8deg);opacity:0}
.globito::after{content:"";position:absolute;left:18px;bottom:-9px;border:10px solid transparent;border-top-color:var(--amarillo);border-bottom:0;transform:skewX(-20deg)}
.etiqueta-envio{position:absolute;top:36px;left:36px;z-index:3;background:var(--verde);padding:5px}
.js .etiqueta-envio{opacity:0;transform:translateX(-24px)}
.etiqueta-envio span{display:block;border:2px double var(--verde-claro);padding:7px 14px;color:var(--papel-claro);font-size:13px;letter-spacing:.24em}
.bajar{position:absolute;bottom:40px;left:0;right:0;margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);color:var(--gris);text-decoration:none}
.js .bajar{opacity:0}
.bajar .rotulo{font-size:12px;white-space:nowrap}
.bajar i{display:block;width:0;height:34px;border-left:2px dotted var(--gris);animation:gota 1.8s var(--curva) infinite}
@keyframes gota{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Secuencia de entrada */
.listo .palabra>span{animation:subePalabra 1s var(--curva) forwards}
.listo .p1>span{animation-delay:.15s}.listo .p2>span{animation-delay:.27s}.listo .p3>span{animation-delay:.45s}.listo .p4>span{animation-delay:.57s}
.listo .sol-sube{animation:subeSol 2.3s var(--curva) 1s forwards}
.listo .bajada .tramo{animation:dibuja 1s var(--curva) 2.1s forwards}
.listo .bajada .rotulo{animation:aparece .9s var(--curva) 2.35s forwards}
.listo .globito{animation:globo .9s cubic-bezier(.34,1.56,.64,1) 2.9s forwards}
.listo .etiqueta-envio{animation:entraIzq .9s var(--curva) 3.3s forwards}
.listo .bajar{animation:aparece 1s ease 3.7s forwards}
@keyframes subePalabra{to{transform:none}}
@keyframes subeSol{0%{transform:translateY(105%);opacity:0}20%{opacity:1}100%{transform:none;opacity:1}}
@keyframes dibuja{to{transform:scaleX(1)}}
@keyframes aparece{to{opacity:1;transform:none}}
@keyframes globo{to{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes entraIzq{to{opacity:1;transform:none}}

/* ---------- Contenido que tapa la portada ---------- */
.contenido{position:relative;z-index:2;background-color:var(--fondo);background-image:repeating-radial-gradient(circle at 0 0,var(--grano) 0 1px,transparent 1px 4px)}
.productos{position:relative;margin-top:-30px;border-top:6px solid var(--pizarra);background-color:var(--azul);background-image:repeating-linear-gradient(45deg,rgba(23,56,79,.10) 0 2px,transparent 2px 12px);background-position:0 var(--py,0px);padding:var(--esp-7) var(--margen) 110px}
.productos-in{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:start}

/* Vitrina: precio grande fijo (decorativa, repite los datos de las tarjetas) */
.vitrina{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--alto-menu) + var(--esp-5))}
html:not(.js) .vitrina{visibility:hidden}
.chapa-precio{background:var(--pizarra);padding:var(--esp-2);aspect-ratio:1;width:min(420px,100%);margin:0 auto}
.chapa-precio>div{height:100%;border:3px double var(--amarillo);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.chapa-precio .rotulo{color:var(--amarillo);font-size:13px;letter-spacing:.3em}
.v-dato{display:flex;flex-direction:column;gap:10px;transition:opacity .3s,transform .3s}
.v-nombre{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--papel-claro);font-size:clamp(34px,3.8vw,48px);line-height:.86}
.v-precio{font-family:var(--f-titulo);font-weight:800;color:var(--amarillo);font-size:clamp(60px,6.6vw,84px);line-height:.86;text-shadow:4px 4px 0 rgba(0,0,0,.25)}
.v-kilo{color:var(--celeste-texto);font-size:13px;letter-spacing:.26em}
.v-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);color:var(--celeste-texto);font-size:15px}
.v-pie .sol{width:60px;height:60px;flex:none}
.cambiando .v-dato{opacity:0;transform:translateY(10px)}

/* Cartel de precios */
.cartel{background-color:var(--papel);background-image:repeating-radial-gradient(circle at 0 0,rgba(23,56,79,.05) 0 1px,transparent 1px 4px);border:3px double var(--amarillo);outline:10px solid var(--pizarra);padding:34px 36px 30px;display:flex;flex-direction:column;align-items:center;gap:var(--esp-3);color:var(--pizarra)}
.cartel .rotulo{color:var(--verde);font-size:13px;letter-spacing:.3em;text-align:center}
.cartel h2{margin:0;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--azul);font-size:clamp(46px,5vw,64px);line-height:.84;text-align:center;text-shadow:3px 3px 0 rgba(23,56,79,.14)}
.entre-rayas{display:flex;align-items:center;gap:var(--esp-2)}
.entre-rayas i{width:44px;height:3px;background:var(--amarillo)}
.cartel .entre-rayas .rotulo{color:var(--pizarra)}
.cortes{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.corte{display:flex;align-items:baseline;gap:var(--esp-2)}
.corte b{display:block;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.8vw,34px);line-height:.95}
.corte small{display:block;font-size:15px;color:var(--gris-texto)}
.corte .punteado{flex:1;border-bottom:2px dotted var(--borde);min-width:20px}
.corte .monto{font-family:var(--f-titulo);font-weight:800;font-size:clamp(26px,2.8vw,34px);color:var(--verde);white-space:nowrap}
.cartel .nota{color:var(--gris-texto);font-size:12px;letter-spacing:.18em;text-align:center}
.cartel .regla{width:100%;height:3px;background:var(--pizarra);margin-top:4px}
.cartel .frase{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1;text-align:center}

/* Tarjetas de cada corte */
.tarjetas{display:grid;gap:var(--esp-5);margin-top:48px}
.tarjeta{display:grid;gap:var(--esp-2)}
.tarjeta-caja{background:var(--tarjeta);border:3px double var(--linea);padding:var(--esp-2)}
.foto{background-color:var(--papel);background-image:repeating-radial-gradient(circle at 0 0,rgba(23,56,79,.05) 0 1px,transparent 1px 4px);border:2px dotted var(--borde);aspect-ratio:16/10;display:grid;place-items:center;padding:var(--esp-3)}
.foto svg{width:74%;height:auto}
.tarjeta-texto{padding:18px var(--esp-2) 10px;display:flex;flex-direction:column;gap:var(--esp-1)}
.tarjeta-texto .rotulo{color:var(--rotulo);font-size:12px;letter-spacing:.26em}
.tarjeta h3{margin:0;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--titulo);font-size:clamp(36px,3.6vw,44px);line-height:.86;text-shadow:3px 3px 0 rgba(23,56,79,.12)}
.tarjeta p{margin:0;font-size:17px;max-width:46ch}
.chapa-kilo{display:flex;align-items:center;gap:14px;background:var(--pizarra);padding:var(--esp-2) 20px}
.chapa-kilo .rotulo{color:var(--celeste-texto);font-size:13px;letter-spacing:.24em}
.chapa-kilo .punteado{flex:1;border-bottom:2px dotted rgba(220,235,247,.45)}
.chapa-kilo b{font-family:var(--f-titulo);font-weight:800;color:var(--amarillo);font-size:34px;line-height:1}

/* ---------- Secciones en papel ---------- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:var(--esp-7) var(--margen)}
.cabecera{background:var(--pizarra);padding:var(--esp-2);margin-bottom:44px}
.cabecera>div{border:2px double var(--amarillo);padding:14px;display:flex;align-items:center;justify-content:center;gap:18px}
.cabecera i{width:var(--esp-5);height:2px;background:var(--amarillo);flex:none;transition:transform 1s var(--curva) .2s}
.cabecera i:first-child{transform-origin:right}.cabecera i:last-child{transform-origin:left}
.js .cabecera i{transform:scaleX(0)}
.js .cabecera.adentro i{transform:scaleX(1)}
.cabecera h2{margin:0;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--papel-claro);font-size:clamp(26px,3vw,34px);line-height:1.05;text-align:center}
.cabecera h2 .palabra>span{transition:transform .9s var(--curva)}
.cabecera.adentro h2 .palabra>span{transform:none}
.cabecera h2 .palabra:nth-child(2)>span{transition-delay:.06s}.cabecera h2 .palabra:nth-child(3)>span{transition-delay:.12s}.cabecera h2 .palabra:nth-child(4)>span{transition-delay:.18s}.cabecera h2 .palabra:nth-child(5)>span{transition-delay:.24s}
.valores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.valor{background:var(--tarjeta);border:3px double var(--linea);padding:26px var(--esp-4);display:flex;flex-direction:column;gap:10px}
.valor .mini-sol{width:50px;height:50px;transition:transform 1.2s var(--curva) .2s,opacity .8s .2s}
.js .valor .mini-sol{transform:rotate(-120deg) scale(.4);opacity:0}
.js .valor.adentro .mini-sol{transform:none;opacity:1}
.valor h3{margin:0;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--titulo);font-size:30px;line-height:.9;text-shadow:2px 2px 0 rgba(23,56,79,.12)}
.valor p{margin:0;font-size:17px}
.centro{text-align:center}
.pedir-texto{max-width:30ch;margin:0 auto 34px;font-size:clamp(21px,2.3vw,27px);font-weight:600;line-height:1.3}
.boton-wa{display:inline-flex;align-items:center;gap:var(--esp-2);background:var(--whatsapp);color:var(--pizarra);text-decoration:none;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:26px;line-height:1;padding:var(--esp-3) 34px;border:2px solid var(--pizarra);box-shadow:5px 5px 0 var(--pizarra);transition:transform .2s var(--curva),box-shadow .2s var(--curva)}
.boton-wa:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pizarra)}
.boton-wa:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--pizarra)}
.boton-wa svg{width:26px;height:26px;flex:none}
.contactos{display:flex;justify-content:center;margin:0 auto 30px;max-width:760px;background:var(--tarjeta);border:3px double var(--linea)}
.contacto{flex:1;text-align:center;padding:26px 20px;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.contacto+.contacto{border-left:2px dotted var(--linea)}
.contacto .rotulo{color:var(--rotulo);font-size:13px}
.contacto strong{font-family:var(--f-titulo);font-weight:800;font-size:clamp(28px,3vw,36px);line-height:1}
.contacto:hover strong{color:var(--titulo)}
.redes{max-width:52ch;margin:0 auto;text-align:center;font-size:18px}
.redes a{color:var(--titulo);font-weight:600}

/* Pie: banner de cierre */
.cierre{max-width:var(--ancho);margin:0 auto 0;padding:0 var(--margen) var(--esp-6)}
.banner{background-color:var(--azul);background-image:repeating-linear-gradient(45deg,rgba(23,56,79,.10) 0 2px,transparent 2px 12px);padding:var(--esp-3)}
.banner>div{border:4px double var(--amarillo);padding:38px 42px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.banner .frase{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--papel-claro);font-size:clamp(34px,4vw,46px);line-height:.9;text-shadow:4px 4px 0 rgba(23,56,79,.3);margin:0}
.banner .rotulo{color:var(--amarillo);font-size:13px;margin-top:var(--esp-2)}
.firma{background:var(--pizarra);color:var(--celeste-texto);text-align:center;padding:var(--esp-3) 20px;font-size:13px}

/* Revelado al hacer scroll */
[data-revela]{transition:opacity 1s var(--curva),transform 1s var(--curva);transition-delay:var(--d,0s)}
.js [data-revela]{opacity:0;transform:translateY(34px)}
.js [data-revela].adentro{opacity:1;transform:none}

/* ---------- Celular ---------- */
@media (max-width:860px){
  body{font-size:17px}
  .menu-in{padding:0 var(--esp-2);gap:var(--esp-1)}
  .isotipo span{display:none}
  .isotipo .mini-sol{width:34px;height:34px}
  .chapas{gap:5px}
  .chapas a{padding:6px var(--esp-1);font-size:11px;letter-spacing:.1em;white-space:nowrap}
  .chapas li:first-child{display:none}
  .portada::before{inset:10px}
  .portada-in{--fs:clamp(3.4rem,15vw,5.2rem)}
  .etiqueta-envio{top:26px;left:50%;transform:translateX(-50%)}
  .js .etiqueta-envio{transform:translate(-50%,-10px)}
  .etiqueta-envio span{font-size:11px;letter-spacing:.18em;white-space:nowrap}
  @keyframes entraIzq{to{opacity:1;transform:translate(-50%,0)}}
  .globito{left:auto;right:-4px;top:calc(var(--fs) * -1.55)}
  .portada-in{padding-top:calc(var(--fs) * 1.5)}
  .sol-ventana{top:calc(var(--fs) * -1.45);width:calc(var(--fs) * 1.9);height:calc(var(--fs) * 1.65)}
  .sol-sube{--d:calc(var(--fs) * 1.5)}
  .productos{padding:60px var(--margen) 80px}
  .productos-in{grid-template-columns:1fr;gap:36px}
  .vitrina{position:relative;top:0}
  .chapa-precio{width:min(320px,100%)}
  .cartel{padding:26px 18px var(--esp-4);outline-width:8px}
  .corte small{font-size:13px}
  .valores{grid-template-columns:1fr}
  .seccion{padding:var(--esp-6) var(--margen)}
  .contactos{flex-direction:column}
  .contacto+.contacto{border-left:0;border-top:2px dotted var(--linea)}
  .boton-wa{font-size:22px;padding:14px var(--esp-4)}
  .banner>div{padding:28px 22px;justify-content:center;text-align:center}
  .cierre{padding:0 var(--margen) 48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .palabra>span,.sol-sube,.bajada .tramo,.bajada .rotulo,.globito,.etiqueta-envio,.bajar,[data-revela],.valor .mini-sol,.cabecera i{opacity:1!important;transform:none!important}
  .globito{transform:rotate(-3deg)!important}
  .gira{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  .etiqueta-envio{transform:translateX(-50%)!important}
}

/* ---------- Página 404 ---------- */
.error{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:var(--esp-4) var(--margen);text-align:center}
.error-in{display:flex;flex-direction:column;align-items:center;gap:var(--esp-4)}
.error .mini-sol{width:72px;height:72px}
.error h1{margin:0;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;color:var(--titulo);font-size:clamp(46px,8vw,84px);line-height:.84;text-shadow:var(--sombra-letra)}
.error .rotulo{color:var(--rotulo)}
.error .volver{display:inline-block;padding:var(--esp-2) var(--esp-4);background:var(--pizarra);border:2px solid var(--pizarra);color:var(--amarillo);font-family:var(--f-rotulo);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.16em;text-decoration:none}