/* alegria.css — ilustraciones y microinteracciones (decorativas, aria-hidden; el texto real vive en el HTML) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.eyes{transform-box:fill-box;transform-origin:center;animation:parpadeo 5.5s infinite}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes sube{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes titila{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(14deg)}}
@keyframes salto{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}
@keyframes sube-cora{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-120px) scale(1.3)}}
@keyframes dibuja{0%{stroke-dashoffset:300}60%,100%{stroke-dashoffset:0}}
@keyframes late{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}

/* hero: personajes alrededor de la foto */
.hero-wrap{--px:0;--py:0}
.deco{position:absolute;z-index:2;pointer-events:none;translate:calc(var(--px)*var(--k,20)*1px) calc(var(--py)*var(--k,20)*1px);transition:translate .25s ease-out}
.deco svg{display:block;width:100%;height:auto;overflow:visible}
.d-globo{width:78px;top:-26px;right:-34px;--k:-26}
.d-globo svg{animation:sube 5.5s ease-in-out infinite;transform-origin:50% 100%}
.d-globo2{width:54px;top:70px;right:-52px;--k:-38}
.d-globo2 svg{animation:sube 6.8s ease-in-out -2s infinite}
.d-estrella{width:44px;top:36px;left:-30px;--k:30}
.d-estrella svg{animation:titila 3.8s ease-in-out infinite}
.d-nube{width:120px;top:48%;left:-84px;--k:46;opacity:.95}
.d-nube svg{animation:sube 8s ease-in-out -1s infinite}
.osito{position:absolute;z-index:3;right:-40px;bottom:-30px;width:146px;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;translate:calc(var(--px)*-16px) calc(var(--py)*-12px);transition:translate .25s ease-out}
.osito svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 14px rgba(70,40,10,.22));transition:transform .25s}
.osito:hover svg,.osito:focus-visible svg{transform:rotate(-6deg) scale(1.06)}
.osito.saluda svg{animation:salto .7s}
.osito:focus-visible{outline:3px solid var(--acc);outline-offset:4px;border-radius:24px}
.osito .tip{position:absolute;left:50%;top:-38px;translate:-50% 0;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--acc-d);box-shadow:var(--sh1);opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none}
.osito:hover .tip,.osito:focus-visible .tip{opacity:1;transform:none}
.corazon{position:absolute;bottom:60%;color:#ff6b86;font-size:1.4rem;pointer-events:none;animation:sube-cora 1.4s ease-out forwards;text-shadow:0 2px 6px rgba(255,107,134,.35)}

/* línea de latido */
.latido{display:flex;align-items:center;gap:14px;margin:6px 0 34px;color:var(--acc)}
.latido svg.l{flex:1;height:44px;min-width:0}
.latido path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;animation:dibuja 3.6s ease-in-out infinite}
.latido .cora{width:34px;height:34px;flex:none;animation:late 1.6s ease-in-out infinite}
.latido .t{font-size:.9rem;font-weight:600;color:var(--m);letter-spacing:-.01em}

/* etapas */
.sub{color:var(--m);font-size:1.1rem;margin:-14px 0 28px}
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.etapa{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px 26px;text-align:center;box-shadow:var(--sh1);overflow:hidden;transition:transform .25s,box-shadow .25s;outline:0}
.etapa::before{content:"";position:absolute;inset:0 0 auto 0;height:96px;background:var(--bg-e,var(--sky));opacity:.55;border-radius:var(--r-lg) var(--r-lg) 50% 50%/var(--r-lg) var(--r-lg) 26px 26px;transition:height .3s,opacity .3s}
.etapa:hover,.etapa:focus-visible,.etapa.activa{transform:translateY(-5px);box-shadow:var(--sh2)}
.etapa:hover::before,.etapa:focus-visible::before,.etapa.activa::before{height:140px;opacity:.8}
.etapa .pers{position:relative;display:block;width:104px;height:104px;margin:0 auto 14px}
.etapa .pers svg{width:100%;height:100%;overflow:visible}
.etapa:hover .pers,.etapa:focus-visible .pers,.etapa.activa .pers{animation:salto .65s}
.etapa h3{position:relative;font-size:1.18rem;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.etapa p{position:relative;color:var(--m);font-size:.95rem;line-height:1.5}
.etapa:nth-child(1){--bg-e:#cdeefa}.etapa:nth-child(2){--bg-e:#ffe9b8}.etapa:nth-child(3){--bg-e:#c9f0dd}.etapa:nth-child(4){--bg-e:#e3dcfb}

/* cierre */
.cierre{position:relative;overflow:hidden}
.cierre>*{position:relative;z-index:1}
.cierre .osito{right:18px;bottom:-14px;width:112px;z-index:2;translate:none}
.cierre .d-globo{top:14px;right:auto;left:26px;width:60px}
.cierre .d-globo2{top:40px;right:auto;left:96px;width:42px}
.cierre .d-estrella{top:26px;left:auto;right:150px;width:34px}

@media (max-width:900px){.etapas{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .d-globo{right:-10px;width:62px;top:-18px}.d-globo2{right:-14px;width:42px;top:64px}
  .d-estrella{left:-6px;width:34px}.d-nube{left:-34px;width:84px}
  .osito{right:-8px;bottom:-22px;width:104px}
}
@media (max-width:560px){
  .etapas{gap:12px}.etapa{padding:20px 12px 22px}.etapa .pers{width:84px;height:84px}
  .cierre .osito{position:relative;right:auto;bottom:auto;display:block;margin:22px auto 0;width:100px}
  .cierre .d-globo,.cierre .d-globo2,.cierre .d-estrella{display:none}
  .latido .t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .eyes,.d-globo svg,.d-globo2 svg,.d-estrella svg,.d-nube svg,.latido path,.latido .cora,.osito.saluda svg,.etapa:hover .pers,.etapa:focus-visible .pers,.etapa.activa .pers{animation:none}
  .latido path{stroke-dashoffset:0}.deco,.osito{translate:none;transition:none}.etapa,.etapa::before{transition:none}
}

/* ===== nivel 2: ojos, brazo, gorro, camino, pasos, chispas ===== */
.eyes{translate:var(--ex,0px) var(--ey,0px)}
.brazo{transform-box:fill-box;transform-origin:10% 95%;animation:saludo 7s ease-in-out infinite}
@keyframes saludo{0%,78%,100%{transform:rotate(0)}82%,90%{transform:rotate(-28deg)}86%,94%{transform:rotate(8deg)}}
.osito:hover .brazo,.osito:focus-visible .brazo{animation:saludo 1.4s ease-in-out infinite}
.gorro{display:none;transform-box:fill-box;transform-origin:50% 100%}
.osito.fiesta .gorro{display:block;animation:gorro-pop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes gorro-pop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(-8deg)}}
.osito.fiesta .tip{opacity:1;transform:none}

/* recién nacido: dormido, despierta al pasar */
.etapa .despierto{opacity:0;transition:opacity .25s}
.etapa .dormido{transition:opacity .25s}
.etapa:hover .despierto,.etapa:focus-visible .despierto,.etapa.activa .despierto{opacity:1}
.etapa:hover .dormido,.etapa:focus-visible .dormido,.etapa.activa .dormido{opacity:0}
.zz{animation:zz 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.zz2{animation-delay:-1.2s}
@keyframes zz{0%{opacity:0;transform:translateY(4px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-8px) scale(1.15)}}
.etapa:hover .zz,.etapa:focus-visible .zz,.etapa.activa .zz{animation:none;opacity:0}

/* camino punteado entre las etapas */
.etapas{position:relative}
.etapas::before{content:"";position:absolute;left:12%;right:12%;top:76px;height:0;border-top:3px dashed #bfe0ee;z-index:0;pointer-events:none}
.etapa{z-index:1}
@supports (animation-timeline:view()){
  .etapa{animation:subir-e linear both;animation-timeline:view()}
  .etapa:nth-child(1){animation-range:entry 0% entry 30%}
  .etapa:nth-child(2){animation-range:entry 8% entry 38%}
  .etapa:nth-child(3){animation-range:entry 16% entry 46%}
  .etapa:nth-child(4){animation-range:entry 24% entry 54%}
  @keyframes subir-e{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
  .etapa:hover,.etapa:focus-visible,.etapa.activa{animation:none}
}

/* pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:p}
.paso{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 26px;box-shadow:var(--sh1);transition:transform .25s,box-shadow .25s}
.paso:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.paso .pico{display:block;width:72px;height:72px;margin-bottom:16px}
.paso .pico svg{width:100%;height:100%;overflow:visible}
.paso .num{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#4fbfc2,#137a7e);box-shadow:0 6px 14px rgba(10,132,166,.3)}
.paso h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.paso p{color:var(--m);font-size:.95rem;line-height:1.5}
.paso .late{transform-box:fill-box;transform-origin:center;animation:late 1.6s ease-in-out infinite}
.paso .check{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .5s ease-out}
.paso:hover .check,.paso.vista .check{stroke-dashoffset:0}
.paso .cora-p{transform-box:fill-box;transform-origin:center;animation:late 2.2s ease-in-out infinite}
.paso:hover .pico svg{animation:salto .6s}

/* chispas en los botones principales */
.cta{position:relative}
.cta::before,.cta::after{content:"✦";position:absolute;color:#ffd45e;font-size:1rem;line-height:1;pointer-events:none;opacity:0;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.cta::before{top:-9px;right:-6px}
.cta::after{bottom:-9px;left:-6px;font-size:.75rem;transition-delay:.08s}
.cta:hover::before,.cta:hover::after,.cta:focus-visible::before,.cta:focus-visible::after{opacity:1;transform:scale(1)}

@media (max-width:900px){.etapas::before{display:none}.pasos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .brazo,.osito:hover .brazo,.zz,.paso .late,.paso .cora-p,.paso:hover .pico svg,.osito.fiesta .gorro{animation:none}
  .etapa{animation:none}.eyes{translate:0 0}.paso .check{stroke-dashoffset:0}
}

/* ===== credenciales para humanos ===== */
.insignias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.insignia{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px 26px;box-shadow:var(--sh1);transition:transform .25s,box-shadow .25s}
.insignia:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.insignia.destacada{background:linear-gradient(160deg,#fff,#eefaf4);border-color:#bfe9d3}
.insignia .iico{display:block;width:76px;height:76px;margin-bottom:16px}
.insignia .iico svg{width:100%;height:100%;overflow:visible}
.insignia:hover .iico svg{animation:salto .6s}
.insignia .ok{position:absolute;top:24px;right:22px;margin:0}
.insignia h3{font-size:1.22rem;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.insignia p{color:var(--m);font-size:1rem;line-height:1.55}
.insignia .dato{display:block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--soft)}
.verifica{margin-top:22px;padding:18px 22px;background:#f5f5f7;border-radius:var(--r-md);color:var(--m);font-size:.95rem;line-height:1.6}
.verifica b{color:var(--ink)}
.verifica a{color:var(--acc-d);font-weight:600}
@media (max-width:900px){.insignias{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.insignia:hover .iico svg{animation:none}}

/* ===== fotos reales ===== */
.foto{aspect-ratio:2/3;object-fit:cover}
.sobre-col{display:flex;flex-direction:column;gap:22px}
.sobre-foto{width:100%;max-width:360px;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh2);display:block}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gfoto{margin:0;position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--sh1);background:#e9eef2}
.gfoto.g-alta{grid-row:span 2}
.gfoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gfoto:hover img{transform:scale(1.05)}
.gfoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:-.01em;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (max-width:900px){.galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.gfoto figcaption{font-size:.82rem;padding:26px 12px 10px}}
@media (max-width:560px){.galeria{grid-auto-rows:170px;gap:10px}.sobre-foto{max-width:100%}}
@media (prefers-reduced-motion:reduce){.gfoto img,.gfoto figcaption{transition:none}}

/* video en galería */
.gfoto video{width:100%;height:100%;object-fit:cover;display:block;background:#e9eef2}
.galeria{grid-auto-flow:dense}

/* ===== guías para papás (s572f) ===== */
.guia .miga{font-size:.85rem;color:var(--soft);margin-bottom:18px}
.guia .miga a{color:var(--acc-d);text-decoration:none}
.guia .fecha{font-size:.85rem;color:var(--soft);margin:-22px 0 26px}
.guia .resumen{background:linear-gradient(160deg,#fff,#eefaf4);border:1px solid #bfe9d3;border-left:5px solid var(--ok);border-radius:var(--r-lg);padding:22px 26px;margin:0 0 30px;box-shadow:var(--sh1)}
.guia .resumen b{display:block;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ok);margin-bottom:8px}
.guia .resumen p{font-size:1.08rem;line-height:1.6;color:var(--ink)}
.guia h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:40px 0 14px}
.guia p,.guia li{color:var(--m);line-height:1.65}
.guia ul{margin:0 0 10px 22px}
.guia li{margin-bottom:6px}
.guia .tabla{margin:12px 0 20px}
.guia .alerta{background:#fff3f6;border:1px solid #f6c2d4;border-left:5px solid var(--rosa);border-radius:var(--r-lg);padding:18px 22px;margin:22px 0}
.guia .alerta b{display:block;color:#b8236f;margin-bottom:8px}
.guia .alerta ul{margin-bottom:0}
.guia details{margin-bottom:10px}
.guia .aviso{font-size:.85rem;color:var(--soft);border-top:1px dashed var(--line);padding-top:16px;margin-top:34px}
.guia .relacionadas{font-size:.95rem;margin-top:14px}
.guia .relacionadas a{color:var(--acc-d);font-weight:600}
/* portada: guías */
.guias{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.guias a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;text-decoration:none;box-shadow:var(--sh1);transition:transform .25s,box-shadow .25s}
.guias a:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.guias a b{display:block;color:var(--ink);font-size:1.08rem;letter-spacing:-.015em;margin-bottom:6px}
.guias a span{color:var(--m);font-size:.92rem;line-height:1.5}
.guias a i{display:block;font-style:normal;font-size:1.6rem;margin-bottom:10px}
@media (max-width:900px){.guias{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guias{grid-template-columns:1fr}}