/* agalu.com.ar: portada y páginas legales. Diseño del boceto 2 (11/10, aprobado por Seba):
   las letras de la app (Poppins; Fredoka solo para "Agalú"), colores sólidos de la marca,
   la historia en tres pasos con capturas reales y Dobli, y la "boleta" para anotarse.
   Solo oscuro, con el azul noche del kit. Sin estilos dentro del HTML: la CSP del sitio no
   los deja (style-src 'self', en servidor/publico/.htaccess). */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fuentes/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fuentes/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(fuentes/poppins-700.woff2) format("woff2")}
/* Fredoka trae solo las letras del logo ("Agalú"): no usarla para otros textos. */
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(fuentes/fredoka-600-logo.woff2) format("woff2")}
:root{--noche:#16233F;--hondo:#0E1830;--panel:#1D2C4D;--borde:#2C3D63;--texto:#F5F7FA;--suave:#B9C3D6;--agua:#2E9BE6;--gas:#FF6B35;--luz:#FFD23F;--papel:#F5F7FA;--tinta:#3C4A66;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noche);color:var(--texto);font:16px/1.65 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--luz);outline-offset:3px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--luz);color:var(--noche);padding:8px 12px;border-radius:8px;z-index:10}
.saltar:focus{left:8px}
.envase{max-width:1080px;margin:0 auto;padding:0 22px}
.angosto{max-width:780px}
.c-agua{color:var(--agua)}.c-gas{color:var(--gas)}.c-luz{color:var(--luz)}

/* Cabecera */
header{position:sticky;top:0;z-index:5;background:rgba(22,35,63,.94);border-bottom:1px solid var(--borde)}
header .envase{display:flex;align-items:center;justify-content:space-between;height:64px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo,.marca>span{font-family:Fredoka,Poppins,sans-serif;font-weight:600;font-size:28px;line-height:1}
nav a{font-size:14px;color:var(--suave);text-decoration:none;margin-left:20px}
nav a:hover{color:var(--texto)}
@media(max-width:600px){nav .op{display:none}}

/* Botones */
.boton{display:inline-block;background:var(--luz);color:var(--noche);font:700 16px Poppins,sans-serif;border:0;border-radius:999px;padding:13px 26px;text-decoration:none;cursor:pointer;transition:transform .15s}
.boton:hover{transform:translateY(-1px)}
.boton.oscuro{background:var(--noche);color:var(--papel)}

/* Portada */
.portada{padding:44px 0 70px;overflow:hidden}
@media(max-width:600px){.portada{padding-bottom:140px}}
.portada .envase{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
@media(max-width:860px){.portada .envase{grid-template-columns:1fr;gap:50px}}
h1{font-weight:700;font-size:clamp(34px,5.2vw,58px);line-height:1.06;letter-spacing:-.02em;margin:0 0 30px}
.subrayado{position:relative;white-space:nowrap}
.subrayado svg{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:14px}
.subrayado path{fill:none;stroke:var(--luz);stroke-width:4;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:trazo 1.2s .4s ease-out forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.bajada{color:var(--suave);font-size:18px;max-width:30em;margin:0 0 28px}
.nota{color:var(--suave);font-size:13px;margin:14px 0 0}
.tel{justify-self:center;position:relative;width:270px;border-radius:38px;border:9px solid #24345a;background:#0A1226;transform:rotate(3deg);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.tel img{display:block;width:100%;height:auto;border-radius:29px}
.tel .dobli{position:absolute;left:-74px;bottom:30px;width:100px;height:100px}
/* Dobli se presenta: globito junto a él, un segundo después de cargar (11/10). */
.hola{position:absolute;left:-262px;bottom:52px;width:184px;margin:0;background:var(--papel);color:var(--noche);font-size:14px;font-weight:600;line-height:1.35;padding:10px 12px;border-radius:14px 14px 4px 14px;transform:rotate(-3deg);opacity:0;animation:aparece-hola .5s 1s ease-out forwards;z-index:2}
@keyframes aparece-hola{from{opacity:0;transform:rotate(-3deg) translateY(8px)}to{opacity:1;transform:rotate(-3deg)}}
/* En el celular, Dobli y su globito van juntos debajo del celular, como una charla. */
@media(max-width:600px){.tel{width:230px}.tel .dobli{left:0;bottom:-104px;width:76px;height:76px}.hola{left:84px;bottom:-86px;width:180px;font-size:13px;border-radius:14px 14px 14px 4px}}

/* La historia en tres pasos */
.paso{padding:72px 0;border-top:1px solid var(--borde)}
.paso.primero{border-top:0;padding-top:30px}
.paso.vuelta{background:var(--hondo)}
.paso .envase{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.paso.vuelta .texto{order:2}
@media(max-width:860px){.paso .envase{grid-template-columns:1fr;gap:34px}.paso.vuelta .texto{order:0}}
.num{display:inline-block;font-weight:700;font-size:20px;color:var(--noche);background:var(--luz);padding:2px 15px;border-radius:999px;margin-bottom:14px}
/* Dobli salta de un paso al otro, antes de los tres pasos (pedido de Seba, 11/10). */
.intro-pasos{padding:46px 0 10px;border-top:1px solid var(--borde);text-align:center}
.intro-titulo{margin:0;font-weight:700;font-size:clamp(22px,2.6vw,28px)}
.escena-salta{position:relative;width:220px;height:120px;margin:10px auto 0}
.escalones{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:space-between}
.escalones span{width:56px;height:10px;border-radius:5px}
.escalones .e1{background:var(--agua)}.escalones .e2{background:var(--gas)}.escalones .e3{background:var(--luz)}
.escena-salta .dobli{position:absolute;bottom:14px;left:50%;width:66px;height:66px;margin-left:-33px;animation:salta 3.6s ease-in-out infinite}
@keyframes salta{0%,20%{transform:translateX(-82px)}30%{transform:translate(0,-34px)}40%,53%{transform:translateX(0)}63%{transform:translate(82px,-34px)}73%,93%{transform:translateX(82px)}100%{transform:translateX(-82px)}}
.primero .num{background:var(--agua)}.vuelta .num{background:var(--gas)}
h2{font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
.texto p{color:var(--suave);font-size:17px;margin:0 0 12px}
.texto b{color:var(--texto);font-weight:600}
.dice{display:flex;gap:12px;align-items:flex-start;margin-top:20px}
.dice .dobli{width:60px;height:60px;flex:0 0 60px}
.texto .globo{background:var(--papel);color:var(--noche);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:15px;font-weight:600;margin:6px 0 0}
.escribiendo{display:flex;gap:5px;padding:14px 16px}
.escribiendo i{width:8px;height:8px;border-radius:50%;background:var(--noche);animation:punto 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.2s}.escribiendo i:nth-child(3){animation-delay:.4s}
@keyframes punto{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.visual{justify-self:center}
.visual img{display:block;width:250px;height:auto;border-radius:26px;border:7px solid #24345a}

/* Empresas y datos, en una línea */
.franja{padding:30px 0;border-top:1px solid var(--borde);color:var(--suave);font-size:15px}
.franja b{font-weight:600}
.franja a{color:var(--texto)}

/* "Sumate a la prueba": una boleta de papel con el borde troquelado (Dobli es una boleta). */
.prueba{padding:80px 0;border-top:1px solid var(--borde);background:var(--hondo)}
.boleta{max-width:580px;margin:0 auto;background:var(--papel);color:var(--noche);border-radius:18px 18px 0 0;padding:34px 34px 48px;
 -webkit-mask:radial-gradient(10px at 50% 100%,#0000 98%,#000) 50% 100%/22px 100% repeat-x;mask:radial-gradient(10px at 50% 100%,#0000 98%,#000) 50% 100%/22px 100% repeat-x}
@media(max-width:480px){.boleta{padding:26px 20px 44px}}
.boleta .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px dashed #C3CAD6;padding-bottom:16px;margin-bottom:18px}
.boleta h2{color:var(--noche);margin:0}
.boleta .cab .dobli{width:78px;height:78px;flex:0 0 78px}
.boleta .dobli .papel{fill:#fff;stroke:var(--noche);stroke-width:3}
.boleta p{color:var(--tinta);margin:0 0 16px}
.anotarme label{display:block;font-weight:600;margin-bottom:6px}
.anotarme-fila{display:flex;gap:10px}
@media(max-width:480px){.anotarme-fila{flex-direction:column}}
.anotarme input{flex:1;min-width:0;font:16px Poppins,sans-serif;color:var(--noche);background:#fff;border:2px solid #C3CAD6;border-radius:12px;padding:12px 14px}
.anotarme input:focus-visible{outline:3px solid var(--agua);outline-offset:2px}
.anotarme-msj{min-height:1.6em;margin:10px 0 0!important;font-weight:600}
.anotarme-msj.bien{color:#17803D!important}.anotarme-msj.mal{color:#C2410C!important}
.boleta .chico{font-size:12px;color:#5A6782;margin:6px 0 0}
.boleta .chico a{color:var(--noche)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esperando{position:fixed;inset:0;z-index:20;background:rgba(14,24,48,.8);display:grid;place-items:center}
.esperando[hidden]{display:none}
.esperando-caja{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:18px 26px;font-weight:600}

/* Pie */
footer{padding:34px 0;border-top:1px solid var(--borde);color:var(--suave);font-size:14px}
footer .envase{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:space-between}
footer a{margin-right:16px}
.pie-legal{flex-basis:100%;margin:6px 0 0;font-size:12px;line-height:1.5;color:#8C97AE}

/* Páginas legales */
.legal{padding:48px 0 72px}
.legal h1{font-size:clamp(28px,4vw,40px)}
.legal h2{font-size:22px;margin:34px 0 10px}
.legal p,.legal li{color:#DCE2EC}
.legal ul,.legal ol{padding-left:22px}
.legal .caja{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:18px 20px;margin:18px 0}
.legal .caja p{margin:0}

/* Dobli, con sus caras de la app (dobli() en www/js/app.js). Ante el tope pasado se
   preocupa, nunca festeja. Se anima siempre (decisión de Seba, 11/10). */
.dobli{display:block;overflow:visible}
.dobli .papel{fill:#F5F7FA}.dobli .esquina{fill:#D5DBE5}.dobli .renglon{fill:none;stroke:#C3CAD6;stroke-width:4;stroke-linecap:round}
.dobli .ojo{fill:#16233F}.dobli .trazo{fill:none;stroke:#16233F;stroke-width:4.5;stroke-linecap:round}.dobli .trazo.fino{stroke-width:3}.dobli .boca{fill:#16233F}
.dobli .agua{fill:var(--agua)}.dobli .gas{fill:var(--gas)}.dobli .luz{fill:var(--luz)}
.dobli .ojos{transform-box:fill-box;transform-origin:center;animation:parpadeo 4s infinite}
@keyframes parpadeo{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}}
.asoma{animation:asoma 3.4s ease-in-out infinite}
@keyframes asoma{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg) translateY(-8px)}}
.mira .ojos{animation:mira 5s ease-in-out infinite}
@keyframes mira{0%,15%{transform:translateX(0)}25%,40%{transform:translateX(-4px)}50%,65%{transform:translateX(4px)}75%{transform:translateX(0) scaleY(1)}78%{transform:scaleY(.1)}81%,100%{transform:scaleY(1)}}
.preocupa{animation:tiembla 4s infinite}
@keyframes tiembla{0%,70%,100%{transform:none}74%,82%{transform:translateX(-2px)}78%,86%{transform:translateX(2px)}}
.habla{animation:asiente 1.2s ease-in-out infinite}
@keyframes asiente{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-2deg)}}
.festeja{animation:festeja 1.8s ease-in-out infinite}
@keyframes festeja{0%,100%{transform:none}30%{transform:translateY(-10px) rotate(-6deg)}60%{transform:translateY(-10px) rotate(6deg)}}

/* Al bajar, cada sección aparece (sitio.js). Sin JS, todo visible. */
.js .aparece{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.js .aparece.visto{opacity:1;transform:none}

/* Páginas de error (/error/, 11/10): Dobli con cara de duda. */
.error-dobli{width:120px;height:120px;margin:10px 0 20px}
.error-dobli .dobli{width:100%;height:100%;animation:duda 3s ease-in-out infinite}
@keyframes duda{0%,100%{transform:rotate(0)}30%,60%{transform:rotate(-10deg)}}
.legal .boton{color:var(--noche)}
.error-codigo{font-size:13px;color:var(--suave)!important}