@property --st-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root{ --st-sf:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif; }

html[data-piel="plumon"] .hero--nivel .hechos__marco{ border-top:0; margin-bottom:54px; padding-top:clamp(18px,2.4vh,24px); padding-bottom:0; }
html[data-piel="plumon"] .hero--nivel .hechos__lista{ gap:clamp(8px,.9vw,14px); }
html[data-piel="plumon"] .hero--nivel .hecho{ position:relative; padding:12px 14px 13px; border-radius:18px; isolation:isolate;
  background:linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px -18px rgba(0,0,0,.6);
  opacity:0; transform:none; animation:st-ficha .9s cubic-bezier(.2,1.5,.35,1) both; animation-delay:calc(1s + var(--i,0) * .12s);
  transition:translate .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s ease; }
/* borde de luz: degradado que gira despacio */
html[data-piel="plumon"] .hero--nivel .hecho::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--st-ang), rgba(111,182,255,.9), rgba(249,198,88,.95), rgba(255,255,255,.35), rgba(111,182,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:st-gira 9s linear infinite; opacity:.85; }
html[data-piel="plumon"] .hero--nivel .hecho:hover{ translate:0 -4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 20px 34px -16px rgba(0,0,0,.65), 0 0 22px -6px rgba(249,198,88,.55); }
html[data-piel="plumon"] .hero--nivel .hecho:nth-child(odd){ --r:-3deg; } html[data-piel="plumon"] .hero--nivel .hecho:nth-child(even){ --r:2.5deg; }
@keyframes st-ficha{
  0%{ opacity:0; scale:.7; rotate:var(--r,-3deg); translate:0 16px; }
  55%{ opacity:1; scale:1.04; rotate:var(--r,-3deg); translate:0 0; }
  80%{ scale:.99; rotate:0deg; }
  100%{ opacity:1; scale:1; rotate:0deg; translate:0 0; } }
html[data-piel="plumon"] .hero--nivel .hechos__marco .trz-raya{ top:-4px; }
@media (max-width:900px){
  html[data-piel="plumon"] .hero--nivel .hechos__marco{ margin-bottom:40px; padding-top:18px; }
  html[data-piel="plumon"] .hero--nivel .hecho{ padding:10px 11px 11px; border-radius:15px; }
}
@media (prefers-reduced-motion:reduce){ html[data-piel="plumon"] .hero--nivel .hecho{ animation:none; opacity:1; } html[data-piel="plumon"] .hero--nivel .hecho::before{ animation:none; } }

/* ---------- 2 · horario "en vivo" (Live Activity) ---------- */
.st-vivo{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border-radius:999px; background:#0B1220; color:#fff;
  font-family:var(--st-sf); font-size:13px; font-weight:600; letter-spacing:-.005em; line-height:1.2; white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(11,18,32,.7), inset 0 1px 0 rgba(255,255,255,.08); align-self:center; margin-bottom:6px; }
.st-vivo__pulso{ position:relative; width:9px; height:9px; border-radius:50%; background:#34C759; flex:0 0 9px; }
.st-vivo__pulso::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #34C759; opacity:0; animation:st-pulso 1.8s ease-out infinite; }
.st-vivo.es-fuera .st-vivo__pulso{ background:#8E8E93; } .st-vivo.es-fuera .st-vivo__pulso::after{ display:none; }
@keyframes st-pulso{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.8); opacity:0; } }
.st-vivo__txt b{ font-weight:650; color:#9ED5FF; }
.st-vivo__barra{ width:64px; height:5px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; }
.st-vivo__barra i{ display:block; height:100%; width:var(--av,0%); border-radius:5px; background:linear-gradient(90deg,#34C759,#9ED5FF); transition:width .8s ease; }
.st-vivo.es-fuera .st-vivo__barra{ display:none; }
@media (max-width:900px){ .st-vivo{ margin:10px 0 0; } }
@media (prefers-reduced-motion:reduce){ .st-vivo__pulso::after{ animation:none; } }


/* ---------- 4 · el trazo se endereza (como el Apple Pencil al sostener) ---------- */
.st-recto{ fill:none; stroke:#004484; stroke-width:1.9; stroke-dasharray:1 2; stroke-dashoffset:1.001; opacity:0; }
.st-endereza .st-recto{ opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset .28s cubic-bezier(.4,0,.2,1), opacity .12s ease; }
.st-endereza > g, .st-endereza > path{ opacity:0; transition:opacity .22s ease .08s; }
.st-endereza{ animation:st-pulso-forma .45s cubic-bezier(.3,1.6,.5,1); transform-origin:center; }
@keyframes st-pulso-forma{ 0%{ scale:1; } 40%{ scale:1.08; } 100%{ scale:1; } }
@media (prefers-reduced-motion:reduce){ .st-endereza{ animation:none; } }

/* ---------- 5 · palomitas → WhatsApp ---------- */
html[data-piel="plumon"] .cuida__punto.st-elegible{ cursor:pointer; border-radius:12px; outline-offset:6px; }
html[data-piel="plumon"] .cuida__punto.st-elegible:focus-visible{ outline:2px solid #F9C658; }
html[data-piel="plumon"] .cuida__punto.st-elegible .cuida__punto-t{
  background:linear-gradient(transparent 48%, rgba(255,207,63,.85) 48%, rgba(255,207,63,.85) 94%, transparent 94%) no-repeat 0 0 / 0% 100%;
  transition:background-size .45s cubic-bezier(.55,.08,.35,1), color .3s ease; padding:0 2px; margin-left:-2px; }
html[data-piel="plumon"] .cuida__punto.st-elegible:hover .cuida__punto-t{ background-size:22% 100%; }
html[data-piel="plumon"] .cuida__punto.es-elegida .cuida__punto-t{ background-size:100% 100% !important; color:#0C1F4F; }
html[data-piel="plumon"] .cuida__punto.es-elegida .trz-palomita{ filter:drop-shadow(0 0 6px rgba(249,198,88,.9)); scale:1.25; transition:scale .3s cubic-bezier(.3,1.6,.5,1); }
.st-pista{ display:inline-block; margin-top:6px; font-family:'Caveat','Segoe Print',cursive; font-weight:700; font-size:clamp(19px,1.5vw,23px); color:#F9C658; }
.st-pista::before{ content:"↓ "; }
.cuida .cierre__frase a.st-lista{ color:#fff; }
.cuida .cierre__frase a .st-num{ display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; margin-left:.35em; border-radius:999px; background:#25D366; color:#fff;
  font-family:var(--st-sf); font-size:.62em; font-weight:700; vertical-align:.18em; animation:st-num .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes st-num{ from{ scale:.4; } to{ scale:1; } }

html[data-piel="plumon"] .calc__fila{ position:relative; display:flex; align-items:center; max-width:360px; padding:7px 7px 7px 18px; isolation:isolate;
  background:rgba(255,255,255,.9); border:1px solid rgba(12,31,79,.14); border-radius:20px; box-shadow:0 10px 26px -14px rgba(12,31,79,.45); }
html[data-piel="plumon"] .calc__fila::before, html[data-piel="plumon"] .calc__fila::after{ content:""; position:absolute; inset:-2px; border-radius:22px; padding:2px;
  background:conic-gradient(from var(--st-ang), #2F7BF5, #6FB6FF, #F9C658, #004484, #2F7BF5);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s ease; animation:st-gira 3.2s linear infinite; pointer-events:none; }
html[data-piel="plumon"] .calc__fila::after{ inset:-6px; border-radius:26px; padding:6px; filter:blur(12px); z-index:-1; }
html[data-piel="plumon"] .calc__fila:focus-within::before, html[data-piel="plumon"] .calc__fila.st-lleno::before{ opacity:1; }
html[data-piel="plumon"] .calc__fila:focus-within::after, html[data-piel="plumon"] .calc__fila.st-lleno::after{ opacity:.5; }
@keyframes st-gira{ to{ --st-ang:360deg; } }
html[data-piel="plumon"] .calc__sel{ flex:1 1 auto; width:auto !important; min-width:0; background:none !important; border:0 !important; padding:4px 0 !important;
  font-family:var(--st-sf) !important; font-weight:600 !important; font-size:21px !important; letter-spacing:0 !important; color:var(--tinta); caret-color:#2F7BF5; }
html[data-piel="plumon"] .calc__sel::placeholder{ color:rgba(60,60,67,.38) !important; }
html[data-piel="plumon"] .calc__sel:focus-visible{ outline:none; }
.st-enviar{ flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(60,60,67,.16); color:#fff; transition:background .25s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.st-enviar svg{ width:17px; height:17px; }
.calc__fila.st-lleno .st-enviar{ background:#2F7BF5; transform:scale(1.06); }

/* ---------- 7 · mensaje de WhatsApp en "para entrar" (mismo lenguaje que bachillerato) ---------- */
.st-wa{ position:absolute; z-index:4; display:block; width:clamp(220px,17vw,270px); color:#111B21; font-family:var(--st-sf); text-decoration:none; }
.st-wa--der{ top:18px; right:18px; } .st-wa--abajo{ bottom:14px; right:14px; top:auto; }
.st-wa__escribe, .st-wa__msg{ position:absolute; top:0; right:0; background:#D9FDD3; border-radius:12px; border-top-right-radius:0; box-shadow:0 1px .5px rgba(11,20,26,.13), 0 14px 30px -14px rgba(11,20,26,.45); }
.st-wa--abajo .st-wa__escribe, .st-wa--abajo .st-wa__msg{ top:auto; bottom:0; }
.st-wa__escribe::before, .st-wa__msg::before{ content:""; position:absolute; top:0; right:-8px; width:10px; height:12px; background:#D9FDD3; clip-path:polygon(0 0, 100% 0, 0 100%); }
.st-wa__escribe{ display:flex; gap:4px; padding:12px 14px; opacity:0; transform:translateY(-8px) scale(.92); transition:opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
.st-wa__escribe i{ width:7px; height:7px; border-radius:50%; background:#5E7A6E; animation:st-wa-punto 1.1s ease-in-out infinite; }
.st-wa__escribe i:nth-child(2){ animation-delay:.15s; } .st-wa__escribe i:nth-child(3){ animation-delay:.3s; }
@keyframes st-wa-punto{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.st-wa.llega .st-wa__escribe{ opacity:1; transform:none; }
.st-wa.dicho .st-wa__escribe{ opacity:0; transform:scale(.9); transition-duration:.15s; }
.st-wa__msg{ display:block; width:100%; box-sizing:border-box; padding:7px 10px 6px 11px; opacity:0; transform:translateY(-10px) scale(.94); transform-origin:top right; transition:opacity .3s ease, transform .5s cubic-bezier(.2,1.35,.4,1); }
.st-wa.dicho .st-wa__msg{ opacity:1; transform:none; }
.st-wa__de{ display:block; font-size:12.5px; font-weight:600; color:#06866B; margin-bottom:2px; }
.st-wa__txt{ display:inline; font-size:14px; line-height:1.35; }
.st-wa__meta{ float:right; display:inline-flex; align-items:center; gap:3px; margin:6px 0 -2px 10px; font-size:11px; color:#667781; }
.st-wa__leido{ width:16px; height:11px; color:#53BDEB; }
@media (max-width:900px){ .st-wa{ width:200px; } .st-wa__txt{ font-size:13px; } }
@media (prefers-reduced-motion:reduce){ .st-wa__msg{ transition:none; } .st-wa__escribe i{ animation:none; } }

/* el mensaje LLEGA: burbuja blanca, sin palomitas (verde + ✓✓ = mensaje que tú mandaste) */
.st-wa__escribe, .st-wa__msg, .st-wa__escribe::before, .st-wa__msg::before{ background:#FFFFFF; }
.st-wa__leido{ display:none; }
/* en celular la burbuja tapaba a la mamá y al hijo de la foto: solo escritorio */
@media (max-width:900px){ .st-wa{ display:none; } }
/* "toca las que te importan": las palomitas en reposo se atenúan; la elegida se enciende (4/8 papás no
   distinguían qué estaba elegido porque las cinco ya se veían palomeadas) */
html[data-piel="plumon"] .cuida__punto.st-elegible .trz-palomita{ opacity:.4; transition:opacity .3s ease, scale .3s cubic-bezier(.3,1.6,.5,1); }
html[data-piel="plumon"] .cuida__punto.es-elegida .trz-palomita{ opacity:1; }