/* Encabezado compartido; el resto del estilo del Castillo Blanco solo afecta a su portada. */
body[data-pagina="castillo"] { scroll-padding-top: 72px; }
/* El nav no ocupa sitio en la página (height 0): el contenedor se pinta encima y puede crecer al abrir el menú sin empujar el contenido. */
.nav--principal { position: sticky; top: 0; z-index: 50; width: min(calc(100% - 40px), 1000px); height: 0; margin: 0 auto; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav--principal .contenedor { position: absolute; top: 0; left: 0; right: 0; width: 100%; max-width: none; height: 58px; padding: 0 20px; gap: 18px; border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 28px 28px; background: var(--fondo); box-shadow: 0 12px 34px rgba(0,0,0,.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav--principal .marca { color: var(--tinta); }
.nav--principal .nav-links { display: flex; align-items: center; gap: clamp(12px, 1.45vw, 20px); }
.nav--principal .nav-links a { padding: 7px 0; }
.nav--principal .castillo-nav-preferencias { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 12px; }
.nav--principal .nav-acciones { gap: 9px; margin-left: 0; }
.nav--principal .btn--chico { background: var(--azul); color: var(--fondo); }
.castillo-github { display: none; }
.castillo-menu { display: none; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--tinta); cursor: pointer; }
.castillo-menu svg { width: 19px; height: 19px; }
.castillo-menu .menu-close, .castillo-menu[aria-expanded="true"] .menu-open { display: none; }
.castillo-menu[aria-expanded="true"] .menu-close { display: block; }
body[data-pagina="castillo"] .castillo-recorrido {
  position: relative;
  overflow: clip;
  background: #111722;
  color: #f7f8fb;
}
body[data-pagina="castillo"] .castillo-fijado {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 60px);
  overflow: hidden;
  background: #111722;
}
.castillo-arte { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.castillo-bruma { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 47%, transparent 12%, rgba(7, 11, 18, .12) 52%, rgba(4, 7, 12, .72) 100%); }
.castillo-bruma::after { content: ""; position: absolute; inset: 0; opacity: calc(var(--story-progress, 0) * .76); background: linear-gradient(180deg, rgba(239, 244, 251, .06), rgba(239, 244, 251, .98)); }
.castillo-producto { position: absolute; z-index: 3; right: clamp(28px, 8vw, 138px); bottom: 21%; width: clamp(260px, 34vw, 490px); padding: 10px; border: 1px solid rgba(255,255,255,.48); border-radius: 22px; background: rgba(10, 15, 24, .72); box-shadow: 0 28px 80px rgba(0,0,0,.36); opacity: clamp(0, calc((var(--story-progress, 0) - .2) * 4), 1); transform: translate3d(0, calc((1 - var(--story-progress, 0)) * 44px), 0); transition: opacity .3s ease; }
.castillo-producto img { width: 100%; border-radius: 14px; }
.castillo-mascota-sombra { position: absolute; z-index: 3; left: 50%; bottom: 29.7%; width: 142px; height: 22px; border-radius: 50%; background: rgba(7, 11, 18, .64); filter: blur(9px); transform: translateX(-50%); }
.castillo-mascota { position: absolute; z-index: 4; left: 50%; bottom: 30%; width: clamp(92px, 10vw, 144px); height: auto; filter: drop-shadow(0 12px 12px rgba(4,7,12,.32)); transform-origin: 50% 88%; animation: castillo-plastilina 5s ease-in-out infinite; }
@keyframes castillo-plastilina {
  0%, 72%, 100% { transform: translate(-50%, 0) scale(1, 1); }
  78% { transform: translate(-50%, 2px) scale(1.08, .91); }
  84% { transform: translate(-50%, -8px) scale(.97, 1.04); }
  91% { transform: translate(-50%, 0) scale(1, 1); }
}
.castillo-copys { position: absolute; z-index: 5; top: 12%; left: max(6vw, calc((100vw - 1180px) / 2)); width: min(470px, 42vw); min-height: 390px; }
.castillo-copy { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease, visibility .5s; text-shadow: 0 2px 24px rgba(5,9,16,.4); }
.castillo-copy h1, .castillo-copy h2 { max-width: 640px; margin: 12px 0 18px; color: #fff; font-size: clamp(42px, 5.6vw, 76px); line-height: .99; }
.castillo-copy > p:not(.eyebrow) { max-width: 440px; color: rgba(247,248,251,.84); font-size: clamp(16px, 1.55vw, 20px); }
.castillo-copy .eyebrow { color: #d9e5f5; }
.castillo-recorrido:not(.castillo-recorrido--pinned) .castillo-copys { position: relative; inset: auto; display: grid; gap: 28px; width: auto; min-height: 0; padding: 54px max(20px, calc((100% - 1100px) / 2)); }
.castillo-recorrido:not(.castillo-recorrido--pinned) .castillo-copy { position: relative; inset: auto; display: block; width: auto; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(7, 11, 18, .78); backdrop-filter: blur(10px); opacity: 1; visibility: visible; transform: none; }
.castillo-recorrido:not(.castillo-recorrido--pinned) [data-stage="0"] { border-color: transparent; background: transparent; backdrop-filter: none; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.castillo-recorrido:not(.castillo-recorrido--pinned) [data-stage="0"] { margin-bottom: 128px; }
.castillo-recorrido--pinned { height: 300vh; }
body[data-pagina="castillo"] .castillo-recorrido--pinned .castillo-fijado { position: sticky; top: 60px; height: calc(100svh - 60px); min-height: 520px; }
.castillo-recorrido--pinned[data-step="0"] [data-stage="0"], .castillo-recorrido--pinned[data-step="1"] [data-stage="1"], .castillo-recorrido--pinned[data-step="2"] [data-stage="2"] { opacity: 1; visibility: visible; transform: none; }
.castillo-recorrido--pinned[data-step="1"] .castillo-mascota { transform: translate(-50%, -6px) scale(1.03, .98); }
.castillo-recorrido--pinned[data-step="2"] .castillo-mascota { transform: translate(-50%, -22px) scale(.94, 1.06); }
.castillo-indicador { position: absolute; z-index: 6; bottom: 38px; left: 50%; width: 24px; height: 40px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; transform: translateX(-50%); }
.castillo-indicador i { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; border-radius: 99px; background: white; transform: translateX(-50%); animation: castillo-indicador 1.7s ease-in-out infinite; }
@keyframes castillo-indicador { 0%,100% { opacity:.35; transform:translate(-50%,0); } 65% { opacity:1; transform:translate(-50%,12px); } }
.castillo-scroll { position: absolute; z-index: 6; bottom: 22px; left: 50%; margin: 0; color: rgba(255,255,255,.76); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }
.castillo-recorrido--pinned[data-step="2"] .castillo-indicador, .castillo-recorrido--pinned[data-step="2"] .castillo-scroll { opacity: 0; }
.castillo-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.castillo-acciones .btn, .castillo-copy .btn, .castillo-cierre .btn { box-shadow: 0 12px 36px rgba(2,8,18,.24); }
.castillo-text-link { color: #fff; text-decoration-color: rgba(255,255,255,.56); text-underline-offset: 4px; }
.castillo-demo .cabecera { max-width: 680px; margin-inline: auto; text-align: center; }
.pagina-castillo .sim[data-escena] { height: auto; padding-top: 12px; }
.pagina-castillo .sim-pin { position: static; top: auto; height: auto; min-height: 0; padding-top: 0; }
.pagina-castillo .sim-pin .laptop { margin-bottom: 12px; }
.pagina-castillo .sim-pin > .contenedor { position: relative; z-index: 1; }
.pagina-castillo .sim-pin > .laptop { width: calc(100% - 32px); }
.castillo-video { padding-top: 72px; }
.castillo-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.castillo-tarjetas .tarjeta { min-height: 240px; padding: 28px; }
.castillo-tarjetas h3 { margin: 34px 0 10px; }
.castillo-numero { color: var(--azul-txt); font: 600 12px var(--mono); letter-spacing: .1em; }
.castillo-privacidad-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 8vw, 120px); }
.castillo-privacidad-layout .cabecera { margin: 0; }
.castillo-privacidad-layout .cabecera h2 { margin-bottom: 0; }
.castillo-privacidad-layout > div:last-child p { max-width: 560px; color: var(--muted); font-size: 18px; }
.castillo-descarga { display: grid; justify-items: center; gap: 16px; padding: 38px 24px; border: 1px solid var(--linea); border-radius: 24px; background: var(--tarjeta); text-align: center; }
.castillo-descarga > p { margin: 0; color: var(--muted); font-size: 14px; }
.castillo-descarga .descargas-alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; }
.castillo-codigo { background: radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--violeta) 30%, transparent), transparent 70%); }
.castillo-codigo-contenido { max-width: 760px; text-align: center; }
.castillo-codigo-contenido p:not(.eyebrow) { color: var(--muted); }
.castillo-codigo-contenido .btn { margin-top: 14px; }
.castillo-faq { max-width: 850px; }
.castillo-faq .cabecera { text-align: center; margin-bottom: 32px; }
.castillo-faq details { padding: 20px 4px; border-top: 1px solid var(--linea); }
.castillo-faq details:last-child { border-bottom: 1px solid var(--linea); }
.castillo-faq summary { cursor: pointer; font-weight: 650; }
.castillo-faq details p { color: var(--muted); margin-bottom: 0; }
.castillo-cierre { background: radial-gradient(55% 65% at 50% 100%, var(--hielo), transparent 78%); }
.castillo-cierre img { padding: 12px; border-radius: 24px; background: #151921; box-shadow: 0 14px 44px rgba(12,12,14,.22); }
.pagina-castillo :focus-visible { outline-color: var(--azul-txt); }

@media (max-width: 900px) {
  .nav--principal { width: min(calc(100% - 36px), 540px); }
  .nav--principal .contenedor { height: auto; min-height: 58px; padding: 8px 16px 12px; gap: 12px; flex-wrap: wrap; }
  .nav--principal .marca { order: 1; }
  .nav--principal .nav-links { position: static; order: 4; flex: 0 0 100%; width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 3px; padding: 12px 0 0; border-top: 1px solid var(--linea); white-space: normal; }
  .nav--principal .nav-links.abierto { display: flex; }
  .nav--principal .nav-links a { padding: 11px 14px; border-radius: 12px; }
  .nav--principal .nav-links a:hover { background: var(--gris); }
  .nav--principal .castillo-nav-preferencias .castillo-github { display: grid; flex: none; place-items: center; width: 36px; height: 36px; margin-right: auto; padding: 0; border-radius: 50%; color: var(--tinta); }
  .nav--principal .castillo-nav-preferencias .castillo-github svg { display: block; width: 22px; height: 22px; }
  .nav--principal .castillo-nav-preferencias .castillo-github:hover { background: var(--gris); }
  .nav--principal .castillo-nav-preferencias { margin: 8px 4px 4px; padding: 14px 10px 4px; justify-content: flex-end; border-left: 0; }
  .nav--principal .castillo-menu { display: grid; order: 2; margin-left: auto; }
  .nav--principal .nav-acciones { order: 3; margin-left: 0; }
  .castillo-recorrido--pinned { height: auto; }
  .castillo-recorrido--pinned .castillo-fijado { position: relative; top: auto; display: flex; height: auto; min-height: 0; flex-direction: column; overflow: hidden; }
  .castillo-arte { position: absolute; height: min(90svh, 760px); }
  .castillo-mascota { bottom: auto; top: max(0px, calc(min(59.4svh, 502px) - 96px)); width: 96px; }
  .castillo-mascota-sombra { bottom: auto; top: calc(min(59.4svh, 502px) - 9px); width: 110px; }
  .castillo-producto { display: none; }
  .castillo-copys { top: auto; left: auto; width: auto; min-height: 0; }
  .castillo-recorrido--pinned .castillo-copys { position: relative; inset: auto; display: grid; gap: 24px; width: auto; padding: min(58svh, 480px) 20px 34px; background: linear-gradient(180deg, transparent, #111722 7%, #111722); }
  .castillo-recorrido--pinned .castillo-copy { position: relative; inset: auto; width: auto; opacity: 1; visibility: visible; transform: none; }
  .castillo-copy h1, .castillo-copy h2 { font-size: clamp(34px, 9vw, 48px); }
  .castillo-indicador, .castillo-scroll { display: none; }
  .nav--principal .nav-acciones { gap: 6px; }
  .castillo-tarjetas { grid-template-columns: 1fr; }
  .castillo-tarjetas .tarjeta { min-height: 0; }
  .castillo-privacidad-layout { grid-template-columns: 1fr; gap: 12px; }
  .castillo-descarga .descargas-alt { flex-direction: column; }
}
@media (max-width: 480px) {
  .nav--principal { width: calc(100% - 40px); }
  .nav--principal .contenedor { gap: 8px; padding: 8px 10px 12px; }
  .nav--principal .nav-acciones { gap: 4px; }
  .nav--principal .marca span { display: inline; }
  .nav--principal .btn--chico { width: auto; padding: 0 12px; }
  .nav--principal .btn--chico span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .castillo-acciones { gap: 12px; margin-top: 20px; }
  .castillo-acciones .btn { height: 46px; padding-inline: 14px; font-size: 14px; }
  .castillo-text-link { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .castillo-mascota, .castillo-indicador i { animation: none; }
  .castillo-copy, .castillo-producto { transition: none; }
  .castillo-recorrido--pinned { height: auto; }
  .castillo-recorrido--pinned .castillo-fijado { position: relative; top: auto; display: flex; height: auto; min-height: 0; flex-direction: column; overflow: hidden; }
  .castillo-recorrido--pinned .castillo-copys { position: relative; inset: auto; display: grid; gap: 24px; width: auto; padding: 46vh 20px 34px; background: linear-gradient(180deg, transparent, #111722 7%, #111722); }
  .castillo-recorrido--pinned .castillo-copy { position: relative; inset: auto; width: auto; opacity: 1; visibility: visible; transform: none; }
  .castillo-producto { display: none; }
  .castillo-indicador, .castillo-scroll { display: none; }
}



/* La barra es UNA sola silueta, como el notch de la app: orejas cóncavas de 24 px arriba, esquinas de 28 px abajo, un canto de luz fino y la sombra siguiendo
   el contorno entero. El cuerpo es un fondo recortado con máscara (no hay piezas pegadas) y la sombra/canto los pone un filtro sobre el conjunto. */
.nav--principal { --e: 24px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .34)); }
.nav--principal .contenedor { isolation: isolate; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav--principal .contenedor { border-radius: 0 0 28px 28px; background: var(--fondo); }
.nav--principal .contenedor::before, .nav--principal .contenedor::after { content: ""; position: absolute; z-index: -1; top: 0; width: var(--e); height: var(--e); pointer-events: none; }
.nav--principal .contenedor::before { left: calc(1px - var(--e)); background: radial-gradient(circle at 0 100%, transparent calc(var(--e) - .6px), var(--fondo) var(--e)); }
.nav--principal .contenedor::after { right: calc(1px - var(--e)); background: radial-gradient(circle at 100% 100%, transparent calc(var(--e) - .6px), var(--fondo) var(--e)); }
/* margen lateral para que las orejas no se salgan de la pantalla; en móvil son algo más pequeñas para que la barra conserve su ancho */
.nav--principal { width: min(calc(100% - 2 * var(--e) - 8px), 1000px); }
@media (max-width: 900px) { .nav--principal { width: min(calc(100% - 2 * var(--e) - 8px), 540px); } }
@media (max-width: 600px) { .nav--principal { --e: 16px; width: calc(100% - 2 * var(--e)); } }

/* Escritorio: tres zonas. Logo a la izquierda, enlaces centrados, y a la derecha el idioma junto a «Descargar» (JS mueve el idioma ahí; en móvil vive en el menú). */
@media (min-width: 901px) {
  .nav--principal .marca { flex: 1 1 0; }
  .nav--principal .nav-acciones { flex: 1 1 0; justify-content: flex-end; gap: 10px; }
  .nav--principal .nav-acciones .castillo-nav-preferencias { margin: 0; padding: 0; border: 0; }
  .nav--principal .nav-acciones .idioma-btn { height: 34px; min-width: 40px; padding: 0 10px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; transition: background .15s, color .15s; }
  .nav--principal .nav-acciones .idioma-btn:hover { background: rgba(255, 255, 255, .1); color: var(--tinta); }
}

/* Simulador «Míralo en el notch»: columna normal (cabecera → portátil → estados → leyenda), sin el recorrido fijado de la portada vieja, que tapaba los botones */
.pagina-castillo .sim[data-escena] { height: auto; padding: 72px 0 80px; }
.pagina-castillo .sim-pin { position: static; display: block; height: auto; padding: 0; }
.pagina-castillo .sim[data-escena] .sim-pin > .laptop { width: min(100% - 32px, 1180px); margin: 44px auto 0; transform: none; opacity: 1; will-change: auto; }
.pagina-castillo .sim-pin > .contenedor { margin-top: 8px; }
.pagina-castillo .sim .try { margin-top: 0; gap: 10px; }
.pagina-castillo .sim .try button { padding: 10px 20px; border-color: var(--linea); background: var(--gris); color: var(--tinta); transition: background .2s, border-color .2s, transform .2s; }
.pagina-castillo .sim .try button:hover { background: color-mix(in srgb, var(--tinta) 10%, var(--fondo)); border-color: color-mix(in srgb, var(--tinta) 40%, var(--linea)); transform: translateY(-1px); }
.pagina-castillo .sim .try button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.pagina-castillo .sim .cap { margin-top: 18px; color: var(--tinta-2); }
.pagina-castillo .sim .mn[data-s="pet"] { --w: 150px; --h: 42px; --r: 21px; --bg: #fff; }
/* el fondo de la pantalla del simulador es el mismo castillo de la laptop de arriba, más vivo y sin pétalos genéricos */
.pagina-castillo .sim .wall { background: #0a0d18 url(castillo/img/laptop-fondo.jpg) 50% 30% / cover no-repeat; height: calc(var(--u) * 420px); }
.pagina-castillo .sim .wall .petal, .pagina-castillo .sim .wall .shine { display: none; }
.pagina-castillo .sim .laptop { filter: drop-shadow(0 30px 60px rgba(120, 140, 255, .14)); }

/* Orejas del notch-mascota del simulador: más grandes, solapadas 1 px con el cuerpo (sin costura) y del mismo blanco que él; sombra suave arriba y mejillas al despertar */
.pagina-castillo .sim .mn[data-s="pet"] { box-shadow: inset 0 7px 9px -8px rgba(40, 44, 60, .38), 0 14px 30px -14px rgba(0, 0, 0, .7); }
.pagina-castillo .sim .mn::before { right: calc(100% - 1px); background: radial-gradient(circle at 0 100%, transparent calc(var(--e) - .6px), var(--bg) var(--e)); }
.pagina-castillo .sim .mn::after { left: calc(100% - 1px); background: radial-gradient(circle at 100% 100%, transparent calc(var(--e) - .6px), var(--bg) var(--e)); }
.pagina-castillo .sim .l-pet .eye { top: 10px; width: 11.36px; height: 14px; color: #0b0c10; }
.pagina-castillo .sim .l-pet .eye svg { stroke-width: 2; }
.pagina-castillo .sim .l-pet .zz { right: 18px; top: 9px; font-size: 8.5px; color: #9aa0ad; letter-spacing: .08em; }
.pagina-castillo .sim .l-pet::before, .pagina-castillo .sim .l-pet::after { content: ""; position: absolute; top: 23px; width: 9px; height: 4px; border-radius: 50%; background: #ff8fa8; opacity: 0; transition: opacity .3s ease; }
.pagina-castillo .sim .l-pet::before { left: 55px; }
.pagina-castillo .sim .l-pet::after { left: 86px; }
.pagina-castillo .sim .l-pet.awake::before, .pagina-castillo .sim .l-pet.awake::after { opacity: .75; }

/* ===== Simulador fiel al notch de la app: cabecera con batería + fecha + hora, flechas y puntos, y los widgets de música, Ollama y sistema ===== */
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"]) {
  --r: 34px; --e: 10px; --w: 420px; --h: 140px;
  background: linear-gradient(180deg, #000 0, #000 38%, rgba(10, 10, 14, .9) 72%, rgba(22, 22, 30, .72) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 22px 44px -18px rgba(0, 0, 0, .85);
}
.pagina-castillo .sim .ly.l-nav { transition: opacity .2s ease; }
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"]) .l-nav { opacity: 1; transition: opacity .32s ease .25s; }
.pagina-castillo .sim .nx-ico { width: 16px; height: 16px; flex: none; overflow: visible; }
.pagina-castillo .sim .nx-verde .carga { stroke: #34d058; } .pagina-castillo .sim .nx-verde .rayo { fill: #34d058; }
.pagina-castillo .sim .nx-hora { font: 700 1em/1 inherit; white-space: nowrap; }
.pagina-castillo .sim .nx-hora small { margin-left: .25em; font-size: .72em; font-weight: 600; color: #b9bcc6; }
.pagina-castillo .sim .nx-pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 16px; }
.pagina-castillo .sim .nx-hdr { position: absolute; left: 0; right: 0; top: 5px; height: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.pagina-castillo .sim .nx-fecha { font-weight: 500; color: #f2f3f6; }
.pagina-castillo .sim .mn[data-s="music"] .nx-hdr { padding-left: 96px; }
.pagina-castillo .sim .nx-flecha { position: absolute; top: 61px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #5d5d63; }
.pagina-castillo .sim .nx-flecha.izq { left: 13px; } .pagina-castillo .sim .nx-flecha.der { right: 13px; }
.pagina-castillo .sim .nx-flecha svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pagina-castillo .sim .nx-puntos { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; }
.pagina-castillo .sim .nx-puntos i { width: 4px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width .25s, background .25s; }
.pagina-castillo .sim .mn[data-s="music"] .nx-puntos i:nth-child(1), .pagina-castillo .sim .mn:is([data-s="ollama"], [data-s="system"]) .nx-puntos i:nth-child(4) { width: 12px; background: #fff; }
.pagina-castillo .sim .l-music .art { border-radius: 9px; background: linear-gradient(135deg, #2b1d4d, #b15e5b 55%, #f2c27c); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); }
.pagina-castillo .sim .nx-t { font-size: 11.5px; font-variant-numeric: tabular-nums; color: #f2f3f6; }
.pagina-castillo .sim .l-music .prog { height: 3.5px; background: rgba(255, 255, 255, .25); }
.pagina-castillo .sim .nx-ctls { position: absolute; left: 0; right: 0; top: 106px; height: 22px; }
.pagina-castillo .sim .nx-ctls > span { position: absolute; top: 0; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; transform: translateX(-50%); }
.pagina-castillo .sim .nx-ctls > span:nth-child(1) { left: 76px; } .pagina-castillo .sim .nx-ctls > span:nth-child(2) { left: 160px; }
.pagina-castillo .sim .nx-ctls > span:nth-child(3) { left: 210px; } .pagina-castillo .sim .nx-ctls > span:nth-child(4) { left: 260px; } .pagina-castillo .sim .nx-ctls > span:nth-child(5) { left: 372px; }
.pagina-castillo .sim .nx-ctl { width: 18px; height: 18px; } .pagina-castillo .sim .nx-ctl-sm .nx-ctl { width: 14px; height: 14px; }
.pagina-castillo .sim .nx-eq { transform: translate(-50%, -50%); }
.pagina-castillo .sim .nx-off { left: 46px; top: 44px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.pagina-castillo .sim .nx-off svg { width: 26px; height: 26px; fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.9; stroke-linecap: round; }
.pagina-castillo .sim .nx-txt { font-size: 11px; line-height: 1.3; }
.pagina-castillo .sim .nx-gauge { left: 330px; top: 46px; width: 50px; height: 50px; display: grid; place-items: center; }
.pagina-castillo .sim .nx-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3.4; }
.pagina-castillo .sim .nx-gauge .p { stroke: rgba(255, 255, 255, .22); } .pagina-castillo .sim .nx-gauge .v { stroke: #f2f3f6; stroke-linecap: round; stroke-dasharray: 83 100; }
.pagina-castillo .sim .nx-gauge b { font-size: 11.5px; }
.pagina-castillo .sim .l-ollama .wbtn { width: 162px; height: 23px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 500; color: #f4f5f8; }
.pagina-castillo .sim .nx-sys { position: absolute; left: 46px; right: 46px; top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 46px; }
.pagina-castillo .sim .nx-m p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 12px; }
.pagina-castillo .sim .nx-m p span { color: #d8dae2; font-weight: 600; } .pagina-castillo .sim .nx-m p b { font: 500 11.5px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #f2f3f6; }
.pagina-castillo .sim .nx-b { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.pagina-castillo .sim .nx-b u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #cfd2da, #fff); }
.pagina-castillo .sim .b1 u { width: 33%; } .pagina-castillo .sim .b3 u { width: 29%; }
.pagina-castillo .sim .b2 u { width: 85%; background: linear-gradient(90deg, #e3a43b, #f4c161); } .pagina-castillo .sim .b4 u { width: 96%; background: linear-gradient(90deg, #e2504d, #ff7a6b); }
.pagina-castillo .sim .wall video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .pagina-castillo .sim .try { flex-wrap: nowrap; gap: 5px; }
  .pagina-castillo .sim .try button { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 380px) { .pagina-castillo .sim .try button { padding: 8px 8px; font-size: 12.5px; } .pagina-castillo .sim .try { gap: 4px; } }

/* música como en la app: portada, "Zombie Lady", controles grandes; Ollama sin que el disco pise los botones */
.pagina-castillo .sim .l-music .art { background: #111 url(castillo/img/portada.jpg?v=2) center / cover no-repeat; }
.pagina-castillo .sim .nx-t { font-size: 13.5px; }
.pagina-castillo .sim .l-music .prog { height: 4px; }
.pagina-castillo .sim .nx-ctl { width: 23px; height: 23px; } .pagina-castillo .sim .nx-ctl-sm .nx-ctl { width: 18px; height: 18px; }
.pagina-castillo .sim .nx-ctls { top: 104px; height: 24px; } .pagina-castillo .sim .nx-ctls > span { width: 26px; height: 24px; }
.pagina-castillo .sim .nx-off { top: 40px; width: 54px; height: 54px; } .pagina-castillo .sim .nx-off svg { width: 24px; height: 24px; }
.pagina-castillo .sim .nx-gauge { top: 42px; width: 46px; height: 46px; }
.pagina-castillo .sim .l-ollama .wbtn { top: 102px; height: 22px; }

/* orden de los widgets del notch (Música, Letra, Sistema, Ollama), letra, y sin la franja de luz del borde superior */
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"], [data-s="lyrics"]) {
  --r: 34px; --e: 10px; --h: 140px;
  background: linear-gradient(180deg, #000 0, #000 38%, rgba(10, 10, 14, .9) 72%, rgba(22, 22, 30, .72) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 0 22px 44px -18px rgba(0, 0, 0, .85);
}
.pagina-castillo .sim .mn[data-s="lyrics"] { --w: 520px; }
.pagina-castillo .sim .mn[data-s="system"] .nx-puntos i:nth-child(4) { width: 4px; background: rgba(255, 255, 255, .3); }
.pagina-castillo .sim .mn[data-s="system"] .nx-puntos i:nth-child(3) { width: 12px; background: #fff; }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(1) { left: 47px; } .pagina-castillo .sim .nx-ctls2 > span:nth-child(2) { left: 92px; }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(3) { left: 132px; } .pagina-castillo .sim .nx-ctls2 > span:nth-child(4) { left: 172px; }
.pagina-castillo .sim .nx-cort { width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina-castillo .sim .l-lyrics .art { border-radius: 9px; background: #111 url(castillo/img/portada.jpg?v=2) center / cover no-repeat; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); }
.pagina-castillo .sim .l-lyrics .prog { height: 4px; background: rgba(255, 255, 255, .25); }
.pagina-castillo .sim .l-lyrics .lyr { left: 266px; width: 236px; top: 12px; bottom: 6px; }
.pagina-castillo .sim .l-lyrics .lyr li { font-size: 15px; }
@media (max-width: 600px) { .pagina-castillo .sim .try { gap: 4px; } .pagina-castillo .sim .try button { padding: 8px 8px; font-size: 12px; } }
@media (max-width: 380px) { .pagina-castillo .sim .try button { padding: 8px 6px; font-size: 11.5px; } }

/* música: medidas de la app (título 16, artista 12.5, tiempos 14.5, barra de 5 px, controles grandes) */
.pagina-castillo .sim .l-music .sb { font-size: 16px; }
.pagina-castillo .sim .l-music .dim { font-size: 12.5px; color: #8e9099; }
.pagina-castillo .sim .l-music .nx-t { font-size: 14.5px; }
.pagina-castillo .sim .l-music .prog { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.pagina-castillo .sim .l-music .art { width: 62px; height: 62px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 16px -8px rgba(0, 0, 0, .9); }
.pagina-castillo .sim .nx-ctls > span:nth-child(2) .nx-ctl, .pagina-castillo .sim .nx-ctls > span:nth-child(4) .nx-ctl { width: 24px; height: 24px; }
.pagina-castillo .sim .nx-ctls > span:nth-child(3) .nx-ctl { width: 26px; height: 26px; }
.pagina-castillo .sim .nx-ctl-sm .nx-ctl { width: 20px; height: 20px; }
.pagina-castillo .sim .nx-ctls > span { width: 30px; height: 26px; }
.pagina-castillo .sim .nx-flecha { width: 16px; height: 16px; background: #6c6c72; }
/* letra */
.pagina-castillo .sim .l-lyrics .sb { font-size: 14px; }
.pagina-castillo .sim .l-lyrics .nx-cort { font-size: 11px; width: 132px; }
.pagina-castillo .sim .l-lyrics .nx-t { font-size: 14px; }
.pagina-castillo .sim .l-lyrics .art { width: 56px; height: 56px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 16px -8px rgba(0, 0, 0, .9); }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(2) .nx-ctl, .pagina-castillo .sim .nx-ctls2 > span:nth-child(4) .nx-ctl { width: 22px; height: 22px; }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(3) .nx-ctl { width: 24px; height: 24px; }
.pagina-castillo .sim .l-lyrics .lyr li { font-size: 15px; line-height: 1.22; }

/* indicador de música de la app (icono «media» de NotchWindow): cuatro barras gruesas de 2,8 px que suben y bajan a ritmos distintos */
.pagina-castillo .sim .nx-eq4 { width: 18px; height: 18px; display: flex; align-items: flex-end; gap: 1.3px; padding-left: 1.6px; box-sizing: border-box; }
.pagina-castillo .sim .nx-eq4 i { flex: none; width: 2.8px; height: 14px; margin-bottom: 2px; border-radius: 1.4px; background: #fff; transform-origin: 50% 100%; animation: nx-eq 450ms ease-in-out infinite alternate; }
.pagina-castillo .sim .nx-eq4 i:nth-child(1) { --a: .3; --b: 1; animation-duration: 450ms; }
.pagina-castillo .sim .nx-eq4 i:nth-child(2) { --a: 1; --b: .3; animation-duration: 600ms; }
.pagina-castillo .sim .nx-eq4 i:nth-child(3) { --a: .45; --b: .95; animation-duration: 350ms; }
.pagina-castillo .sim .nx-eq4 i:nth-child(4) { --a: .85; --b: .3; animation-duration: 520ms; }
@keyframes nx-eq { from { transform: scaleY(var(--a)); } to { transform: scaleY(var(--b)); } }
@media (prefers-reduced-motion: reduce) { .pagina-castillo .sim .nx-eq4 i { animation: none; transform: scaleY(.7); } }

/* la línea de color de arriba era el fondo azul de la pantalla asomando por el borde del fondo animado: pantalla negra y el fondo cubre su borde (el marco y la cámara de la laptop se quedan como estaban) */
.pagina-castillo .sim .screen { background: #000; }


/* la cabecera (batería, fecha y hora) va centrada en el panel también en música */
.pagina-castillo .sim .mn[data-s="music"] .nx-hdr { padding-left: 0; }

/* sin la línea de color sobre el notch: el borde de arriba del notch (y de sus orejas) se alarga 4 px hacia el marco, así el fondo no se asoma por el antialiasing */
.pagina-castillo .sim .mn::before, .pagina-castillo .sim .mn::after { box-shadow: 0 -4px 0 var(--bg); }
.pagina-castillo .sim .mn { box-shadow: 0 -4px 0 var(--bg), 0 14px 34px -16px rgba(0, 0, 0, .95); }
.pagina-castillo .sim .mn[data-s="pet"] { box-shadow: 0 -4px 0 var(--bg), inset 0 7px 9px -8px rgba(40, 44, 60, .38), 0 14px 30px -14px rgba(0, 0, 0, .7); }
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"], [data-s="lyrics"]) { box-shadow: 0 -4px 0 #000, inset 0 -1px 0 rgba(255, 255, 255, .2), 0 22px 44px -18px rgba(0, 0, 0, .85); }

/* el vídeo se pasa 4 px por arriba y por abajo de su caja (que recorta el borde): así su primera fila de píxeles, que los navegadores con aceleración dibujan con colores propios (azul y rojo), queda fuera */

/* sea cual sea el motivo (el fondo asomando por detrás de esa franja), los 3 px de arriba de la pantalla son negros, como el marco: el fondo de la laptop nunca se ve justo encima del notch */

/* Ollama: el control gana presencia y el bloque principal queda un poco más alto, como en los otros estados */
.pagina-castillo .sim .nx-off { left: 44px; top: 44px; width: 52px; height: 52px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2.2px rgba(255, 255, 255, .3); }
.pagina-castillo .sim .nx-off svg { width: 24px; height: 24px; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.pagina-castillo .sim .mn[data-s="ollama"] .l-ollama > :not(.wbtn) { translate: 0 -4px; }
.pagina-castillo .sim .l-ollama .nx-txt { font-size: 11px; line-height: 1.22; color: #9a9ca4; }
.pagina-castillo .sim .nx-gauge { left: 332px; top: 48px; width: 44px; height: 44px; }
.pagina-castillo .sim .nx-gauge svg { stroke-width: 4.4; }
.pagina-castillo .sim .nx-gauge .v { stroke-dasharray: 86 100; }
.pagina-castillo .sim .nx-gauge b { font-size: 11px; font-weight: 700; }
.pagina-castillo .sim .l-ollama .wbtn { width: 162px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 12.5px; font-weight: 500; top: 102px; }
.pagina-castillo .sim .mn[data-s="ollama"] .nx-flecha { top: 61px; }

/* el notch sube 3 px: su borde de arriba queda pegado (y recortado) bajo el marco de la pantalla, sin rendija por donde se vea el fondo de la laptop */

/* sin la franja negra de 3 px que añadí sobre la pantalla: el notch sube y se pega al marco, y no queda ninguna banda a sus lados */

/* música con letra: el degradado de la app, negro arriba y el tono cálido de la portada abajo */
.pagina-castillo .sim .mn[data-s="lyrics"] {
  background: linear-gradient(180deg, #000 0, #000 40%, #1d0f0d 62%, #522a24 82%, #8c5446 100%);
  box-shadow: 0 -4px 0 #000, inset 0 -1px 0 rgba(255, 220, 205, .38), 0 22px 44px -18px rgba(0, 0, 0, .85);
}

/* esa fila de colores era la primera línea del fondo asomando sobre el notch: el fondo empieza 3 px más abajo y la pantalla (negra) cubre ese hueco, igual que el notch */

/* la fila de color: el vídeo (capa de GPU) se salía por la arista de arriba de la pantalla. Ahora la pantalla recorta con clip-path, el vídeo ya no toca ese borde (empieza 5 px más abajo, sin sobrepasar su caja) y una tira negra lo cubre */
.pagina-castillo .sim .screen { clip-path: inset(0 round calc(var(--u) * 15px) calc(var(--u) * 15px) 0 0); isolation: isolate; }

/* ===== notch más largo (460 px; 560 con letra) y con sus orejas visibles ===== */
/* el fondo vuelve a llegar hasta arriba para que se vean las orejas; el borde lo cubre el recorte de la pantalla y el vídeo empieza 2 px dentro (debajo queda la imagen fija del mismo fotograma) */
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"]) { --w: 460px; --h: 146px; --e: 12px; }
.pagina-castillo .sim .mn[data-s="lyrics"] { --w: 560px; --h: 146px; --e: 12px; }
.pagina-castillo .sim .mn[data-s="pet"], .pagina-castillo .sim .mn[data-s="idle"] { --e: 10px; }
/* música (460) */
.pagina-castillo .sim .l-music .prog { width: 258px !important; }
.pagina-castillo .sim .l-music .nx-r { left: 380px !important; }
.pagina-castillo .sim .l-music .nx-ctls > span:nth-child(1) { left: 76px; } .pagina-castillo .sim .l-music .nx-ctls > span:nth-child(2) { left: 178px; }
.pagina-castillo .sim .l-music .nx-ctls > span:nth-child(3) { left: 230px; } .pagina-castillo .sim .l-music .nx-ctls > span:nth-child(4) { left: 282px; } .pagina-castillo .sim .l-music .nx-ctls > span:nth-child(5) { left: 412px; }
.pagina-castillo .sim .l-music .nx-eq4 { left: 425px !important; }
/* Ollama (460) */
.pagina-castillo .sim .l-ollama .nx-txt { width: 268px; }
.pagina-castillo .sim .nx-gauge { left: 372px; }
.pagina-castillo .sim .l-ollama .wbtn { width: 182px; }
.pagina-castillo .sim .l-ollama .wbtn:last-of-type { left: 235px !important; }
/* letra (560) */
.pagina-castillo .sim .l-lyrics .prog { width: 100px !important; }
.pagina-castillo .sim .l-lyrics .nx-r { left: 206px !important; }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(1) { left: 47px; } .pagina-castillo .sim .nx-ctls2 > span:nth-child(2) { left: 100px; }
.pagina-castillo .sim .nx-ctls2 > span:nth-child(3) { left: 146px; } .pagina-castillo .sim .nx-ctls2 > span:nth-child(4) { left: 192px; }
.pagina-castillo .sim .l-lyrics > span[style*="width:1px"] { left: 274px !important; }
.pagina-castillo .sim .l-lyrics .lyr { left: 290px; width: 262px; }

/* orejas bien visibles en todos los estados (14 px en la pastilla, 16 px en los paneles), sin subir el notch, y las «z z» dentro del cuerpo */
.pagina-castillo .sim .mn[data-s="pet"], .pagina-castillo .sim .mn[data-s="idle"] { --e: 14px; }
.pagina-castillo .sim .mn:is([data-s="music"], [data-s="ollama"], [data-s="system"], [data-s="lyrics"]) { --e: 16px; }
.pagina-castillo .sim .l-pet .zz { top: 9px; right: 16px; font-size: 9px; color: #8f95a3; }

/* GEOMETRÍA FINAL de la pantalla del simulador (sustituye a los ajustes anteriores): el fondo llega hasta el borde de arriba, el notch va pegado a él y el vídeo empieza 2 px dentro */
.pagina-castillo .sim .screen::before { display: none; }
.pagina-castillo .sim .wall { top: 0; height: calc(var(--u) * 420px); }
.pagina-castillo .sim .wall video { inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.pagina-castillo .sim .mn-holder { top: 0; z-index: 2; }

/* la «tira» clara que bajaba junto al notch era la luz de la luna del propio vídeo, justo en el borde de arriba: se encuadra más abajo (castillo y árboles) para que no caiga ahí */
.pagina-castillo .sim .wall { background-position: 50% 82%; }
.pagina-castillo .sim .wall video { object-position: 50% 82%; }

/* sin imagen fija bajo el vídeo: los 2 px de arriba de la pantalla son del color del marco (la imagen de carga ya la pone el propio vídeo con su poster) */
.pagina-castillo .sim .wall { background-image: none; background-color: #05070d; }
.pagina-castillo .sim .wall video { object-position: 50% 82%; }


/* ===== la barra cambia a tema claro (solo ella) cuando pasa sobre una zona de fondo negro, donde si no se perdería ===== */
@property --navf { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --navt { syntax: "<color>"; inherits: true; initial-value: #f2f2f4; }
@property --navm { syntax: "<color>"; inherits: true; initial-value: #9a9aa1; }
@property --navl { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .13); }
.nav--principal { --navf: #000000; --navt: #f2f2f4; --navm: #9a9aa1; --navl: rgba(255, 255, 255, .13); transition: --navf .35s ease, --navt .35s ease, --navm .35s ease, --navl .35s ease;
  --fondo: var(--navf); --tinta: var(--navt); --muted: var(--navm); --azul: var(--navt); --azul-txt: var(--navt); --linea: var(--navl); --gris: color-mix(in srgb, var(--navt) 8%, var(--navf)); }
.nav--principal.nav--claro { --navf: #f7f8fb; --navt: #0b0c10; --navm: #5a5e6a; --navl: rgba(0, 0, 0, .12); }
.nav--principal.nav--claro { filter: drop-shadow(0 12px 22px rgba(255, 255, 255, .1)) drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }

/* la línea de la letra se resalta casi al instante (la animación de color y el desplazamiento son cortos) para que no vaya detrás del reloj */
.pagina-castillo .sim .lyr ol { transition: transform .4s cubic-bezier(.3, .7, .2, 1); }
.pagina-castillo .sim .lyr li { transition: color .25s, transform .35s; }

/* controles y tiempos como en la app (medidos sobre su captura): triángulos redondeados de 22 px, pausa de dos barras redondeadas, tiempos de 15 px */
.pagina-castillo .sim .nx-ctl { width: 24px; height: 24px; }
.pagina-castillo .sim .nx-ctls > span { width: 32px; height: 26px; }
.pagina-castillo .sim .nx-ctls > span:nth-child(2) .nx-ctl, .pagina-castillo .sim .nx-ctls > span:nth-child(4) .nx-ctl,
.pagina-castillo .sim .nx-ctls2 > span:nth-child(2) .nx-ctl, .pagina-castillo .sim .nx-ctls2 > span:nth-child(4) .nx-ctl { width: 25px; height: 25px; }
.pagina-castillo .sim .nx-ctls > span:nth-child(3) .nx-ctl, .pagina-castillo .sim .nx-ctls2 > span:nth-child(3) .nx-ctl { width: 25px; height: 25px; }
.pagina-castillo .sim .nx-ctl-sm .nx-ctl { width: 21px; height: 21px; }
.pagina-castillo .sim .l-lyrics .nx-t, .pagina-castillo .sim .l-music .nx-t { font-size: 15px; }
.pagina-castillo .sim .l-lyrics .art, .pagina-castillo .sim .l-music .art { border-radius: 7px; box-shadow: none; }
.pagina-castillo .sim .l-lyrics .prog { background: rgba(255, 255, 255, .3); }
.pagina-castillo .sim .l-lyrics .sb, .pagina-castillo .sim .l-music .sb { font-weight: 700; }
.pagina-castillo .sim .l-lyrics .nx-cort { font-size: 11.5px; color: #8d8e95; }
.pagina-castillo .sim .l-lyrics .prog, .pagina-castillo .sim .l-music .prog { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.pagina-castillo .sim .l-lyrics .prog i, .pagina-castillo .sim .l-music .prog i { border-radius: 2px; }
.pagina-castillo .sim .l-lyrics .lyr li { font-weight: 700; color: rgba(255, 255, 255, .34); }
.pagina-castillo .sim .l-lyrics .lyr li.on { color: #fff; }
@media (max-width: 900px) { .nav--principal .nav-links { overflow: hidden; } }
.nav--principal .contenedor { transform-origin: 50% 0; }
/* al recogerse el menú, sus filas no se comprimen ni se recolocan: mantienen su tamaño y simplemente se recortan */
@media (max-width: 900px) { .nav--principal .nav-links > * { flex: none; } .nav--principal .nav-links { contain: layout paint; } }
/* la primera fila (logo, menú, Descargar) no se mueve ni 1 px mientras la barra cambia de altura: sus líneas no se reparten el espacio sobrante */
@media (max-width: 900px) { .nav--principal .contenedor { align-content: flex-start; } }

/* ===== simulador de la barra de tareas (mascotas) ===== */
.pagina-castillo .castillo-barra { padding: 72px 0 80px; text-align: center; }
.pagina-castillo .castillo-barra .cabecera { max-width: 680px; margin-inline: auto; }
.pagina-castillo .barra-sim { width: min(100% - 32px, 1000px); margin: 44px auto 0; }
.pagina-castillo .barra-sim .escritorio { border-radius: 24px; box-shadow: 0 30px 60px -24px rgba(120, 140, 255, .18), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.pagina-castillo .barra-sim > .contenedor { padding: 0; }
.pagina-castillo .barra-sim .pet-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.pagina-castillo .barra-sim .pet-try + .pet-try { margin-top: 10px; }
.pagina-castillo .barra-sim .pet-try button { padding: 9px 18px; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #f1f3f8; transition: background .2s, border-color .2s, transform .2s; }
.pagina-castillo .barra-sim .pet-try button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); transform: translateY(-1px); }
.pagina-castillo .barra-sim .pet-try button[aria-pressed="true"] { background: #f4f5f8; color: #0b0c10; border-color: #f4f5f8; }
.pagina-castillo .barra-sim .cap { margin: 18px auto 0; max-width: 620px; color: rgba(255, 255, 255, .72); text-align: center; }
@media (max-width: 600px) { .pagina-castillo .barra-sim .pet-try button { padding: 8px 12px; font-size: 13.5px; } }
/* la «escena» de la mascota de la sección de arriba es una tarjeta; aquí es solo la capa donde se para la mascota, sobre el escritorio */
.pagina-castillo .barra-sim .pet-escena { display: block; height: 130px; border: 0; border-radius: 0; background: none; box-shadow: none; place-items: initial; }
@media (max-width: 800px) { .pagina-castillo .barra-sim .pet-escena { height: 130px; } }
.pagina-castillo .barra-sim .pet-escena { position: absolute; left: 0; right: 0; }
.pagina-castillo .barra-sim > .contenedor .cap { display: block; width: auto; max-width: 620px; margin: 18px auto 0; text-align: center; }
.pagina-castillo .barra-sim .cap span { text-align: center; }
.pagina-castillo .barra-sim .cap span[hidden] { display: none; }

/* la barra de tareas es la parte de abajo de la misma laptop del simulador de arriba: marco negro con el mismo contorno, esquinas de pantalla de 15 px, barbilla y base con su muesca */
.pagina-castillo .barra-sim { width: min(100% - 64px, 1000px); }
.pagina-castillo .laptop-b { position: relative; }
.pagina-castillo .marco-b { position: relative; padding: 0 9px 26px; background: #050506; border: 2px solid #24262c; border-top: 0; border-radius: 0 0 24px 24px; -webkit-mask: linear-gradient(transparent, #000 56px); mask: linear-gradient(transparent, #000 56px); }
.pagina-castillo .marco-b .escritorio { margin: 0; max-width: none; border-radius: 0 0 15px 15px; box-shadow: none; }
.pagina-castillo .base-b { position: relative; height: 18px; margin: -1px -5% 0; border-radius: 0 0 26px 26px / 0 0 16px 16px; background: linear-gradient(#34363d 0, #17181c 30%, #07080a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 34px 40px -16px rgba(120, 140, 255, .16); }
.pagina-castillo .base-b::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(#050506, #1a1b20); }
.pagina-castillo .barra-sim .pet-escena { z-index: 3; }
.pagina-castillo .barra-sim .barra-tareas { z-index: 1; }

/* controles de la barra de tareas: tarjetas de mascota con su sprite y fichas de estado con su punto de color (el mismo del icono de la bandeja) */
.pagina-castillo .barra-sim > .contenedor { margin-top: 34px; padding: 0 !important; }
.pagina-castillo .barra-sim .pet-try { display: grid; margin: 0; }
.pagina-castillo .barra-sim .pet-mascotas-b { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 0 auto 14px; }
.pagina-castillo .barra-sim .pet-estados-intro { max-width: 760px; margin: 0 auto 12px; text-align: center; }
.pagina-castillo .barra-sim .pet-estados-titulo { margin: 0; color: #f1f3f8; font-size: 14px; font-weight: 700; }
.pagina-castillo .barra-sim .pet-estados-ayuda { margin: 4px 0 0; color: rgba(241, 243, 248, .62); font-size: 12.5px; line-height: 1.45; }
.pagina-castillo .barra-sim .pet-estados-b { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
.pagina-castillo .barra-sim .pet-estados-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pagina-castillo .barra-sim .pet-interaccion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); }
.pagina-castillo .barra-sim .pet-interaccion-titulo { margin: 0; color: #f1f3f8; font-size: 13.5px; font-weight: 650; }
.pagina-castillo .barra-sim .pet-interaccion .pe { width: min(100%, 260px); }
.pagina-castillo .barra-sim .pet-try button { font-family: inherit; cursor: pointer; transition: background .22s, border-color .22s, transform .3s cubic-bezier(.34, 1.5, .5, 1), box-shadow .22s, color .22s; }
.pagina-castillo .barra-sim .pc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 8px 12px; min-height: 96px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); color: #d9dce6; font-size: 13.5px; font-weight: 600; }
.pagina-castillo .barra-sim .mb { display: block; height: 44px; background-repeat: no-repeat; background-position: 0 0; background-size: auto 44px; image-rendering: pixelated; filter: grayscale(.55) brightness(.85); transition: filter .25s, transform .35s cubic-bezier(.34, 1.6, .5, 1); }
.pagina-castillo .barra-sim .pc:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .3); }
.pagina-castillo .barra-sim .pc:hover .mb { filter: none; }
.pagina-castillo .barra-sim .pc[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .7); color: #fff; box-shadow: 0 10px 30px -10px rgba(140, 160, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35); transform: translateY(-2px); }
.pagina-castillo .barra-sim .pc[aria-pressed="true"] .mb { filter: none; transform: scale(1.12); }
.pagina-castillo .barra-sim .pe { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); color: #dce0e9; font-size: 13.5px; font-weight: 550; line-height: 1.3; text-align: left; }
.pagina-castillo .barra-sim .pd { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); transition: box-shadow .25s; }
.pagina-castillo .barra-sim .pe::after { content: ""; flex: none; width: 6px; height: 10px; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg); transition: opacity .18s; }
.pagina-castillo .barra-sim .pe:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.pagina-castillo .barra-sim .pe[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #181a20), #121419); border-color: color-mix(in srgb, var(--c) 72%, transparent); color: #fff; box-shadow: 0 8px 24px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pagina-castillo .barra-sim .pe[aria-pressed="true"] .pd { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), 0 0 12px var(--c); }
.pagina-castillo .barra-sim .pe[aria-pressed="true"]::after { opacity: 1; }
.pagina-castillo .barra-sim .pet-try button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .pagina-castillo .barra-sim .pet-mascotas-b { gap: 6px; }
  .pagina-castillo .barra-sim .pc { padding: 10px 4px 9px; min-height: 84px; border-radius: 16px; font-size: 12px; }
  .pagina-castillo .barra-sim .mb { height: 36px; background-size: auto 36px; zoom: .82; }
  .pagina-castillo .barra-sim .pet-estados-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pagina-castillo .barra-sim .pe { min-height: 46px; padding: 9px 10px; font-size: 12.5px; }
  .pagina-castillo .barra-sim .pet-interaccion { padding: 10px 12px; }
}
@media (max-width: 420px) { .pagina-castillo .barra-sim .pet-interaccion { align-items: stretch; flex-direction: column; } .pagina-castillo .barra-sim .pet-interaccion .pe { width: 100%; } }
.pagina-castillo .barra-sim .pet-escena { overflow: visible; }
.pagina-castillo .barra-sim .pet-try .pc[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .7); color: #fff; }
.pagina-castillo .barra-sim .pet-try .pe[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #181a20), #121419); border-color: color-mix(in srgb, var(--c) 72%, transparent); color: #fff; box-shadow: 0 8px 24px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pagina-castillo .barra-sim .pet-try .pc:hover, .pagina-castillo .barra-sim .pet-try .pe:hover { color: #fff; }
.pagina-castillo .barra-sim .mb { height: 56px; background-size: auto 56px; }
.pagina-castillo .barra-sim .pc { min-height: 112px; }
@media (max-width: 700px) { .pagina-castillo .barra-sim .pc { min-height: 92px; } .pagina-castillo .barra-sim .mb { height: 44px; background-size: auto 44px; zoom: 1; } }
.pagina-castillo .barra-sim > .contenedor .cap { width: min(100%, 620px); margin: 14px auto 0; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); color: rgba(241, 243, 248, .84); line-height: 1.5; text-align: center; }
.pagina-castillo .barra-sim .pet-reaccion-label { display: block; margin-bottom: 4px; color: rgba(241, 243, 248, .56); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }

/* ===== laptop de la barra de tareas, rehecha: proporción de pantalla real (apaisada) en todos los anchos, marco parejo, bisagra y base con labio frontal ===== */
.pagina-castillo .barra-sim { width: min(100% - 40px, 1000px); }
.pagina-castillo .marco-b { padding: 0 clamp(7px, 1.1vw, 12px) clamp(16px, 2.6vw, 28px); border: 0; border-radius: 0 0 clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 26px);
  background: linear-gradient(90deg, #17181c, #050506 6%, #050506 94%, #17181c);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), inset 1px 0 0 rgba(255, 255, 255, .1), inset -1px 0 0 rgba(255, 255, 255, .1);
  -webkit-mask: linear-gradient(transparent, #000 36px); mask: linear-gradient(transparent, #000 36px); }
.pagina-castillo .marco-b .escritorio { height: auto; aspect-ratio: 2.1 / 1; border-radius: 0 0 clamp(9px, 1.4vw, 15px) clamp(9px, 1.4vw, 15px); }
@media (max-width: 700px) { .pagina-castillo .marco-b .escritorio { aspect-ratio: 1.5 / 1; min-height: 230px; } }
.pagina-castillo .base-b { height: clamp(14px, 2.2vw, 22px); margin: -1px -4.5% 0; border-radius: 0 0 clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px) / 0 0 100% 100%;
  background: linear-gradient(#3b3d45 0, #1b1c21 22%, #0a0a0d 70%, #050506 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 22px 36px -14px rgba(0, 0, 0, .9), 0 40px 70px -30px rgba(120, 140, 255, .22); }
.pagina-castillo .base-b::before { width: 17%; height: 38%; background: linear-gradient(#030304, #121317); border-radius: 0 0 14px 14px / 0 0 100% 100%; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.pagina-castillo .base-b::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); }
@media (max-width: 700px) { .pagina-castillo .barra-sim .mb { height: 56px; background-size: auto 56px; zoom: .8; } }

/* el escritorio se dibuja SIEMPRE como una pantalla de laptop real de 1280 × 720 (barra de tareas de 48 px, botones de 40, mascota de 96) y se reduce entero con `zoom` (--k lo calcula mundo.js): las proporciones son las de Windows en todos los anchos */
.pagina-castillo .marco-b { overflow: hidden; }
.pagina-castillo .marco-b .escritorio { width: 1280px; height: 720px; aspect-ratio: auto; zoom: var(--k, .76); --sx: 138px; }
.pagina-castillo .barra-sim .barra-tareas { height: 48px; gap: 6px; padding: 0; }
.pagina-castillo .barra-sim .barra-tareas .tb-b { width: 40px; height: 40px; border-radius: 8px; }
.pagina-castillo .barra-sim .tb-extra, .pagina-castillo .barra-sim .tb-sys, .pagina-castillo .barra-sim .reloj { display: flex; }
.pagina-castillo .barra-sim .logo-w { width: 26px; height: 26px; bottom: 11px; left: calc(50% - var(--sx) - 13px); }
.pagina-castillo .barra-sim .pet-escena { bottom: 48px; height: 140px; }
.pagina-castillo .barra-sim .pet { left: calc(50% - var(--sx) - var(--fw) / 2); bottom: -13px; scale: 1; }
.pagina-castillo .barra-sim .bandeja { right: 14px; gap: 12px; font-size: 12px; }
.pagina-castillo .barra-sim .tb-chev { width: 10px; height: 10px; }
.pagina-castillo .barra-sim .bandeja-mira { width: 30px; height: 30px; border-radius: 6px; }
.pagina-castillo .barra-sim .bandeja-mira img { width: 20px; height: 20px; }
.pagina-castillo .barra-sim .punto { width: 8px; height: 8px; right: 3px; bottom: 3px; }
.pagina-castillo .barra-sim .tb-sys svg { width: 14px; height: 14px; }
.pagina-castillo .barra-sim .reloj { font-size: 11px; line-height: 1.25; padding: 0 6px; }
/* búsqueda y vista de tareas de Windows 11 */
.pagina-castillo .barra-sim .tb-busca { display: flex; align-items: center; gap: 9px; width: 132px; height: 36px; padding: 0 14px; box-sizing: border-box; border-radius: 18px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06); color: #f2f3f6; font: 500 14px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
.pagina-castillo .barra-sim .tb-busca svg { width: 17px; height: 17px; flex: none; }
.pagina-castillo .barra-sim .tb-tareas { display: grid; place-items: center; background: none; color: #f2f3f6; }
.pagina-castillo .barra-sim .tb-tareas svg { width: 24px; height: 24px; }
.pagina-castillo .barra-sim .tb-extra { display: none; }
.pagina-castillo .marco-b .escritorio { --sx: 92px; }

/* La barra blanca se recoge en la mascota del notch tras 25 s sin actividad en la página. */
.nav--principal .contenedor { transition: width .55s cubic-bezier(.22,.75,.2,1), height .45s ease, min-height .45s ease, left .55s cubic-bezier(.22,.75,.2,1), transform .55s cubic-bezier(.22,.75,.2,1), padding .35s ease, gap .35s ease, border-radius .45s ease; }
.nav--principal .marca,
.nav--principal .nav-links,
.nav--principal .castillo-menu,
.nav--principal .nav-acciones { transition: opacity .18s ease, visibility 0s linear; }
.nav--principal .nav-mascota { position: absolute; inset: 0; display: grid; place-items: center; color: #0b0c10; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.nav--principal .nav-mascota svg { width: 56px; height: 30px; overflow: visible; }
.nav--principal .nav-mascota .nav-ojos-cerrados,
.nav--principal .nav-mascota .nav-ojos-abiertos,
.nav--principal .nav-mascota .nav-ojos-felices,
.nav--principal .nav-mascota .nav-rubor { opacity: 0; transition: opacity .2s ease; }
.nav--principal .nav-mascota .nav-ojos-abiertos { transform-box: fill-box; transform-origin: center; }
.nav--principal .nav-mascota .nav-ojos-abiertos ellipse { transform-box: fill-box; transform-origin: center; transition: transform .2s cubic-bezier(.2,.75,.2,1); }
.nav--principal.nav--claro[data-mascota] { --e: 14px; }
.nav--principal.nav--claro[data-mascota] .contenedor { left: 50%; right: auto; width: 132px; height: 42px; min-height: 42px; padding: 0; gap: 0; flex-wrap: nowrap; transform: translateX(-50%); border: 0; border-radius: 0 0 22px 22px; background: var(--navf); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav--principal.nav--claro[data-mascota] .marca,
.nav--principal.nav--claro[data-mascota] .nav-links,
.nav--principal.nav--claro[data-mascota] .castillo-menu,
.nav--principal.nav--claro[data-mascota] .nav-acciones { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .18s; }
.nav--principal.nav--claro[data-mascota] .nav-mascota { opacity: 1; visibility: visible; transition-delay: .12s, 0s; }
.nav--principal.nav--claro:is([data-mascota="mirando-izquierda"], [data-mascota="mirando-derecha"], [data-mascota="despierta"]) .nav-ojos-abiertos { opacity: 1; }
.nav--principal.nav--claro[data-mascota="mirando-izquierda"] .nav-ojos-abiertos ellipse { transform: translateX(-2.6px); }
.nav--principal.nav--claro[data-mascota="mirando-derecha"] .nav-ojos-abiertos ellipse { transform: translateX(2.6px); }
.nav--principal.nav--claro[data-mascota="durmiendo"] .nav-ojos-cerrados { opacity: 1; }
.nav--principal.nav--claro[data-mascota="despertando"] .nav-ojos-cerrados { opacity: 0; }
.nav--principal.nav--claro[data-mascota="despertando"] .nav-ojos-abiertos { opacity: 1; animation: castillo-nav-despertar .42s cubic-bezier(.2,.75,.2,1) both; }
.nav--principal.nav--claro[data-mascota="despierta"] .nav-ojos-abiertos { animation: castillo-nav-parpadeo var(--nav-blink-duration, 5.4s) var(--nav-blink-delay, 1s) infinite; }
.nav--principal.nav--claro[data-mascota="saludo"] .nav-ojos-felices { opacity: 1; }
.nav--principal.nav--claro[data-mascota="saludo"] .nav-rubor { opacity: .82; transition: opacity .2s ease .12s; }
@keyframes castillo-nav-despertar { from { opacity: 0; transform: scaleY(.08); } to { opacity: 1; transform: scaleY(1); } }
@keyframes castillo-nav-parpadeo { 0%, 91%, 100% { transform: scaleY(1); } 93%, 96% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) {
  .nav--principal .contenedor,
  .nav--principal .nav-mascota,
  .nav--principal .marca,
  .nav--principal .nav-links,
  .nav--principal .castillo-menu,
  .nav--principal .nav-acciones { transition: none; animation: none; }
}

/* La cara de los notches de monitor y laptop conserva el mismo tamaño tierno del navbar. */
.pagina-castillo .equipos-escena .nr-par path { stroke-width: 2; }

.pagina-castillo .marco-b .escritorio > .fondo-taskbar { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; pointer-events: none; }

/* Bisel grafito para el simulador: conserva las medidas de la pantalla y solo da definición al marco. */
.pagina-castillo .sim .lid { background: linear-gradient(180deg, #68707c 0, #343a44 1px, #15181e 4px, #242830 10px, #090a0d 18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 24px 58px rgba(0, 0, 0, .48); }
.pagina-castillo .sim .bezel { background: linear-gradient(145deg, #171a20, #040506 48%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14); }
.pagina-castillo .sim .screen { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pagina-castillo .sim .cam { display: block; z-index: 1; width: calc(var(--u) * 5px); height: calc(var(--u) * 5px); margin-left: calc(var(--u) * -2.5px); background: radial-gradient(circle at 34% 32%, #7890b7 0 8%, #26324a 22%, #07090e 72%); box-shadow: 0 0 0 calc(var(--u) * 1px) rgba(255, 255, 255, .14), 0 0 calc(var(--u) * 4px) rgba(133, 159, 205, .2); }

/* Galería de mascotas: escenario y controles forman una composición compacta; se anulan los offsets del simulador de taskbar. */
.pagina-castillo .pets .cabecera { margin-bottom: 32px; }
.pagina-castillo .pets .pet-caja { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; gap: clamp(16px, 3vw, 32px); max-width: 1040px; }
.pagina-castillo .pets .pet-escena { inset: auto; height: 320px; border-color: rgba(180, 202, 235, .2); border-radius: 24px; background: radial-gradient(65% 55% at 50% 100%, rgba(87, 145, 210, .26), transparent 76%), linear-gradient(150deg, #121b2b, #090d16 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 54px rgba(0, 0, 0, .28); }
.pagina-castillo .pets .pet-sprite { margin-bottom: 24px; }
.pagina-castillo .pets .pet-sombra { bottom: 48px; width: 190px; opacity: .7; }
.pagina-castillo .pets .pet-controles { align-content: center; gap: 14px; padding: 16px; border: 1px solid rgba(180, 202, 235, .16); border-radius: 24px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); }
.pagina-castillo .pets .pet-lista { gap: 8px; }
.pagina-castillo .pets .pet-opcion { min-width: 0; min-height: 102px; padding: 10px 4px 8px; border-radius: 16px; background: rgba(5, 8, 14, .52); }
.pagina-castillo .pets .pet-opcion[aria-checked="true"] { border-color: rgba(139, 184, 255, .9); background: linear-gradient(180deg, rgba(83, 132, 202, .2), rgba(83, 132, 202, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 2px rgba(93, 151, 230, .16); }
.pagina-castillo .pets .pet-opcion b { font-size: 12.5px; }
.pagina-castillo .pets .pet-estados { justify-content: center; gap: 8px; }
.pagina-castillo .pets .pet-estado { padding: 8px 13px; border-color: rgba(255, 255, 255, .15); background: rgba(5, 8, 14, .46); color: rgba(245, 247, 252, .86); font-size: 14px; }
.pagina-castillo .pets .pet-estado[aria-pressed="true"] { border-color: #e9eef8; background: #e9eef8; color: #111722; }
.pagina-castillo .pets .pet-cap { min-height: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(235, 240, 249, .72); font-size: 14px; line-height: 1.5; }
@media (max-width: 700px) {
  .pagina-castillo .pets .pet-caja { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pagina-castillo .pets .pet-escena { height: 292px; }
  .pagina-castillo .pets .pet-sprite { transform: scale(min(var(--z, 3), 2.25)); }
  .pagina-castillo .pets .pet-controles { padding: 14px; }
}
@media (max-width: 420px) {
  .pagina-castillo .pets .pet-escena { height: 270px; }
  .pagina-castillo .pets .pet-sprite { transform: scale(min(var(--z, 3), 2.05)); }
  .pagina-castillo .pets .pet-mini { transform: scale(.82); transform-origin: center; margin-block: -6px; }
  .pagina-castillo .pets .pet-opcion b { font-size: 11.5px; }
  .pagina-castillo .pets .pet-estado { padding-inline: 10px; font-size: 13px; }
}

/* Intro (castillo-intro.js): el notch aparece pintado de blanco, la pintura se derrite y gotea sobre el suelo del castillo, y la gota grande aterriza y deja a la mascota.
   Todo cuelga de html.intro: sin esa clase (movimiento reducido, otra sección, recarga con scroll) no existe nada de esto. */
.nav-pintura { display: none; }
html.intro .nav-pintura { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 0 0 28px 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .3' numOctaves='3' seed='7' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23fff' surfaceScale='1.4'%3E%3CfeDistantLight azimuth='235' elevation='74'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 120px, #eef3fb;
  background-blend-mode: multiply, normal; box-shadow: inset 0 -5px 9px rgba(120, 140, 175, .35), inset 0 3px 5px rgba(255, 255, 255, .7); }
html.intro .nav-pintura::before, html.intro .nav-pintura::after { content: ""; position: absolute; top: 0; width: var(--e, 24px); height: var(--e, 24px); }
html.intro .nav-pintura::before { left: calc(1px - var(--e, 24px)); background: radial-gradient(circle at 0 100%, transparent calc(var(--e, 24px) - .6px), #eef3fb var(--e, 24px)); }
html.intro .nav-pintura::after { right: calc(1px - var(--e, 24px)); background: radial-gradient(circle at 100% 100%, transparent calc(var(--e, 24px) - .6px), #eef3fb var(--e, 24px)); }
html.intro .mundo-mascota, html.intro .mundo-sombra { opacity: 0 !important; }   /* !important: mundo.js le pone su propia opacidad en línea a la sombra */
html.intro-sombra .mundo-sombra { opacity: 0 !important; }   /* la sombra espera a media formación */
html.intro-sale .mundo-mascota { animation: intro-aparece .18s ease-out both; }
html.intro-sombra-sale .mundo-sombra { animation: intro-aparece .45s ease-out both; }
@keyframes intro-aparece { from { opacity: 0; } }   /* sin «to»: termina en lo que ya tenga (la sombra no es del todo opaca) */
.intro-capa { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.intro-capa > * { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.intro-capa > .intro-goo, .intro-capa > svg { opacity: 1; }   /* la capa goo y el filtro no se apagan como las piezas sueltas */
.intro-goo { position: absolute; inset: 0; filter: url(#intro-goo); }
.intro-goo > * { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.intro-cola { background: #eef3fb; border-radius: 0 0 99px 99px; transform-origin: 50% 0; }
.intro-bulbo { border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0 20%, #eef3fb 55%, #d3dcec 100%); }
.intro-charco { border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .95), rgba(238, 243, 251, .55) 58%, rgba(238, 243, 251, 0) 74%); }
.intro-mascota { transform-origin: 50% 92.45%; }
.intro-mascota svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1px rgba(5, 8, 14, .7)) drop-shadow(0 14px 12px rgba(3, 6, 12, .4)); }   /* la misma sombra que la mascota real: sin salto al cambiarse */

/* ===== Secciones de detalle: control, memoria, agentes, novedades, privacidad, instalar, automatizar =====
   Un mosaico de tarjetas (la misma tarjeta de «Los detalles que se agradecen») con tres ideas visuales: pasos numerados unidos por una línea
   (como los tutoriales de Linear y Raycast), una cifra grande como protagonista (como las fichas de Apple) y barras de memoria que se leen sin leyenda. */
.cx-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cx-c2 { grid-column: span 2; } .cx-c3 { grid-column: span 3; } .cx-c4 { grid-column: span 4; }
.cx-card { display: flex; flex-direction: column; padding: 30px; }
.cx-card .eyebrow { margin-bottom: 10px; font-size: 13px; }
.cx-card h3 { margin: 0 0 10px; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.015em; line-height: 1.15; }
.cx-card > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.cx-card > .cx-nota { margin-top: auto; padding-top: 18px; color: var(--faint); font-size: 13px; line-height: 1.5; }
.cx-nota code, .cx-card code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--linea-suave); color: var(--tinta-2); }
.cx-nota a { color: var(--azul-txt); }
.cx-sello { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--azul-txt) 40%, var(--linea)); border-radius: 999px; color: var(--azul-txt); font: 600 11px/1.4 var(--sys); letter-spacing: .02em; white-space: nowrap; }
.cx-sello--exp { border-color: rgba(242, 163, 58, .5); color: #f2a33a; }
.cx-num { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid var(--linea); border-radius: 50%; background: var(--fondo); color: var(--azul-txt); font: 600 12px var(--mono); }

/* Mecanismos: cinco pasos en el orden en que se buscan, unidos por una línea */
.cx-mecs { list-style: none; margin: 8px 0 0; padding: 0; }
.cx-mec { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding-bottom: 22px; }
.cx-mec:last-child { padding-bottom: 6px; }
.cx-mec:not(:last-child)::before { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1px; background: linear-gradient(var(--linea), transparent); }
.cx-mec-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.cx-mec-cab h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.cx-mec dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 0; }
.cx-mec dt { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cx-mec dd { margin: 2px 0 0; color: var(--tinta-2); font-size: 14px; line-height: 1.45; }

/* Cifra grande: lo que mide para saber que el modelo no trabaja */
.cx-cifra { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; color: var(--tinta); }
.cx-cifra b { font: 600 clamp(54px, 7vw, 84px)/1 var(--sys); letter-spacing: -.045em; background: linear-gradient(180deg, var(--tinta), color-mix(in srgb, var(--azul-txt) 70%, var(--tinta))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-cifra span { color: var(--muted); font: 500 22px var(--sys); }
.cx-card > .cx-cifra-pie { margin-top: 6px; color: var(--tinta-2); font-weight: 600; font-size: 15px; }

/* Modo juego: tres momentos sobre una línea */
.cx-linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.cx-linea li { position: relative; padding-top: 22px; }
.cx-linea li::before { content: ""; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--azul-txt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-txt) 20%, transparent); }
.cx-linea li::after { content: ""; position: absolute; top: 8px; left: 16px; right: -6px; height: 1px; background: var(--linea); }
.cx-linea li:last-child::after { display: none; }
.cx-linea b { display: block; color: var(--tinta); font: 600 14px var(--mono); }
.cx-linea span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.cx-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; }
.cx-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea-suave); color: var(--tinta-2); font-size: 15px; }

/* Memoria: barras que se leen sin leyenda */
.cx-medidores { display: grid; gap: 22px; margin-top: auto; padding-top: 26px; }
.cx-medidor-cab { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--tinta-2); font-size: 14px; font-weight: 600; }
.cx-medidor-cab em { color: var(--faint); font-style: normal; font-weight: 500; }
.cx-barra { display: flex; height: 10px; overflow: hidden; border-radius: 5px; background: var(--linea-suave); }
.cx-barra i { display: block; height: 100%; }
.cx-barra .m { background: linear-gradient(90deg, #19b8ff, #6c7bff); }
.cx-barra .r { background: var(--faint); opacity: .55; }
.cx-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.cx-leyenda i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.cx-leyenda .m { background: #19b8ff; } .cx-leyenda .r { background: var(--faint); opacity: .7; }
.cx-leyenda b { font-weight: 500; }
.cx-total { margin-left: auto; color: var(--tinta-2); font: 600 13px var(--mono); }
.cx-antes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; padding-top: 24px; }
.cx-antes small { display: block; margin-bottom: 8px; color: var(--faint); font-size: 12px; }
.cx-acciones { list-style: none; margin: 18px 0 0; padding: 0; }
.cx-acciones li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--linea-suave); }
.cx-acciones b { color: var(--tinta); font-size: 14px; }
.cx-acciones span { color: var(--faint); font-size: 13px; text-align: right; }
.cx-modelos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-modelos li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea-suave); border-radius: 14px; background: color-mix(in srgb, var(--fondo) 55%, transparent); }
.cx-modelos .pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.cx-modelos .en-uso .pt { background: #33e07a; box-shadow: 0 0 0 4px rgba(51, 224, 122, .16); }
.cx-modelos b { display: block; color: var(--tinta); font: 600 14px var(--mono); }
.cx-modelos small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; }
.cx-modelos small em { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--linea-suave); color: var(--tinta-2); font-style: normal; }
.cx-modelos .cx-sello { margin-left: auto; }

/* Agentes: planifica → implementa → revisa */
.cx-flujo { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 10px; list-style: none; margin: -20px auto 36px; padding: 0; }
.cx-flujo li:not(.cx-flecha) { display: grid; align-content: center; gap: 2px; min-width: 128px; padding: 14px 22px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); text-align: center; }
.cx-flujo b { color: var(--tinta); font-size: 16px; }
.cx-flujo small { color: var(--azul-txt); font-size: 12px; font-weight: 600; }
.cx-flecha { align-self: center; color: var(--faint); font-size: 20px; }

.cx-pie { margin: 26px auto 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.55; text-align: center; }
.cx-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; margin: -24px 0 44px; padding: 0; }
.cx-pills li { padding: 7px 16px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--tinta-2); font-size: 14px; font-weight: 500; }

/* Privacidad, instalación y enlaces */
.castillo-privacidad .cx-red { margin: 56px 0 18px; color: var(--muted); text-align: center; }
.castillo-privacidad .cx-red code, .cx-pie code { padding: 2px 8px; border-radius: 8px; background: var(--linea-suave); color: var(--tinta-2); font-size: .92em; }
.castillo-privacidad .cx-card { min-height: 0; }
.cx-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0 0 22px; padding: 0; }
.cx-pasos li { position: relative; padding: 26px; border: 1px solid var(--linea); border-radius: 24px; background: var(--tarjeta); }
.cx-pasos h3 { margin: 18px 0 6px; font-size: 20px; letter-spacing: -.01em; }
.cx-pasos p { margin: 0; color: var(--muted); font-size: 15px; }
.cx-req { margin: 18px 0 0; color: var(--faint); font-size: 13px; text-align: center; }
.pagina-castillo .verificar { max-width: 760px; margin: 22px auto 0; }
.pagina-castillo .verificar summary { cursor: pointer; text-align: center; color: var(--azul-txt); font-weight: 500; }
.pagina-castillo .verificar-cuerpo { display: grid; gap: 14px; margin-top: 16px; }
.pagina-castillo .smartscreen { margin: 0; color: var(--muted); font-size: 14px; }
.cx-automatizar .terminal { min-width: 0; }
.cx-enlaces { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 26px 0 0; padding: 0; font-size: 14px; }
.cx-idioma { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.cx-idioma b { padding: 5px 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta); font-weight: 600; }

@media (max-width: 960px) {
  .cx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-c4 { grid-column: span 2; }
  .cx-c2, .cx-c3 { grid-column: span 1; }
  .cx-bento > :last-child:nth-child(odd) { grid-column: span 2; }
  .cx-control .cx-c2 { grid-column: span 2; }
  .cx-pasos { grid-template-columns: 1fr; }
  .cx-pasos li { display: grid; grid-template-columns: 30px 1fr; gap: 0 16px; padding: 22px; }
  .cx-pasos .cx-num { grid-row: span 2; }
  .cx-pasos h3 { margin: 3px 0 4px; }
}
@media (max-width: 640px) {
  .cx-bento { grid-template-columns: 1fr; }
  .cx-c2, .cx-c3, .cx-c4, .cx-bento > :last-child:nth-child(odd), .cx-control .cx-c2 { grid-column: auto; }
  .cx-card { padding: 24px; }
  .cx-mec dl { grid-template-columns: 1fr; }
  .cx-antes { grid-template-columns: 1fr; }
  .cx-flujo { margin-top: -28px; }
  .cx-flujo .cx-flecha { transform: rotate(90deg); flex-basis: 100%; text-align: center; }
  .cx-linea { grid-template-columns: 1fr; gap: 16px; }
  .cx-linea li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cx-card { transition: none; } }

@media (min-width: 601px) and (max-width: 900px) { .mas-grid > :last-child:nth-child(odd) { grid-column: span 2; } }

/* ===== Terminal de PowerShell: una ventana de Windows Terminal con vidrio, pestaña y resaltado de sintaxis ===== */
.cx-term { position: relative; isolation: isolate; border: 1px solid rgba(160, 190, 255, .16); border-radius: 16px; background: linear-gradient(180deg, rgba(14, 22, 44, .92), rgba(5, 8, 18, .96)); color: #dfe6f5; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 80px -20px rgba(70, 120, 255, .28); font: 13.5px/1.75 var(--mono); }
.cx-term::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(80% 60% at 12% 0%, rgba(75, 120, 255, .2), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(140, 90, 255, .14), transparent 70%); }
.cx-term-barra { display: flex; align-items: flex-end; gap: 4px; height: 42px; padding: 8px 0 0 10px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(160, 190, 255, .1); font: 12px var(--sys); color: #9aa7c4; }
.cx-term-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px 10px 0 0; background: rgba(12, 18, 36, .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); color: #eaf0ff; }
.cx-term-tab i { margin-left: 8px; color: #7d8aa8; font-size: 10px; font-style: normal; }
.cx-term-ps { width: 15px; height: 15px; color: #5aa9ff; }
.cx-term-mas { align-self: center; padding: 0 10px; color: #7d8aa8; font-size: 16px; }
.cx-term-ctl { display: flex; align-self: stretch; margin-left: auto; }
.cx-term-ctl svg { width: 46px; height: 100%; padding: 14px 18px; fill: none; stroke: #9aa7c4; stroke-width: 1; }
.cx-term-ctl svg:last-child { border-top-right-radius: 15px; }
.cx-term pre { margin: 0; padding: 22px 24px 26px; overflow-x: auto; white-space: pre; font: inherit; }
.cx-term .l { display: block; min-height: 1.75em; }
.cx-term .t-prompt { color: #4ade80; font-weight: 600; }
.cx-term .t-ruta { color: #7aa7ff; }
.cx-term .t-cmd { color: #f2d27a; }
.cx-term .t-par { color: #8fb4ff; }
.cx-term .t-amp { color: #c4a6ff; }
.cx-term .t-op { color: #8b93a8; }
.cx-term .t-var { color: #7be0d0; }
.cx-term .t-str { color: #f1a98c; }
.cx-term .t-com { color: #6a7794; font-style: italic; }
.cx-cursor { display: inline-block; width: .6em; height: 1.15em; margin-bottom: -.2em; background: #dfe6f5; border-radius: 1px; animation: cx-cursor 1.1s steps(1) infinite; }
@keyframes cx-cursor { 50% { opacity: 0; } }
@keyframes cx-linea-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.js .cx-term .l { opacity: 0; }
.js .cx-term.vista .l { animation: cx-linea-entra .45s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--i) * .32s) both; }
@media (max-width: 640px) { .cx-term { font-size: 12px; } .cx-term pre { padding: 18px 16px 22px; white-space: pre-wrap; overflow-wrap: anywhere; } .cx-term-ctl svg { width: 38px; padding: 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .js .cx-term .l { opacity: 1; animation: none !important; } .cx-cursor { animation: none; } }

/* ===== Terminal, segunda pasada: pestaña con esquinas curvas, controles de Windows 11, salida de los comandos y barra de estado ===== */
.cx-term { --tf: #0a1124; overflow: hidden; border-color: rgba(150, 180, 255, .2); background: #060a16; box-shadow: 0 50px 100px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .7), 0 0 100px -24px rgba(80, 130, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cx-term::before { background: radial-gradient(70% 50% at 10% 0%, rgba(80, 130, 255, .22), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(150, 100, 255, .16), transparent 70%); }
.cx-term-barra { align-items: stretch; gap: 0; height: 44px; padding: 8px 0 0 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-bottom: 0; }
.cx-term-tab { position: relative; align-self: flex-end; height: 36px; padding: 0 14px; gap: 9px; border-radius: 10px 10px 0 0; background: var(--tf); box-shadow: none; color: #f1f5ff; font-weight: 500; }
.cx-term-tab::before, .cx-term-tab::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; }
.cx-term-tab::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 9.5px, var(--tf) 10px); }
.cx-term-tab::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--tf) 10px); }
.cx-term-tab i { display: grid; place-items: center; width: 20px; height: 20px; margin: 0 -4px 0 8px; border-radius: 6px; }
.cx-term-tab i svg { width: 8px; height: 8px; fill: none; stroke: #8f9cba; stroke-width: 1.1; }
.cx-term-ps { width: 16px; height: 16px; color: #62aeff; filter: drop-shadow(0 0 6px rgba(98, 174, 255, .55)); }
.cx-term-mas { display: grid; place-items: center; align-self: center; width: 32px; height: 28px; margin-left: 6px; border-radius: 8px; padding: 0; }
.cx-term-mas + .cx-term-mas { margin-left: 0; width: 24px; }
.cx-term-mas svg { width: 10px; height: 10px; fill: none; stroke: #8f9cba; stroke-width: 1.1; }
.cx-term-ctl { align-self: flex-start; height: 34px; margin: -8px 0 0 auto; }
.cx-term-ctl b { display: grid; place-items: center; width: 46px; height: 100%; }
.cx-term-ctl svg { width: 10px; height: 10px; padding: 0; stroke: #c6d0e8; stroke-width: 1; fill: none; shape-rendering: geometricPrecision; opacity: .9; }
.cx-term-ctl .cerrar { border-top-right-radius: 15px; }
.cx-term-ctl .cerrar svg { stroke-linecap: round; }
.cx-term pre { padding: 20px 24px 22px; background: var(--tf); line-height: 1.8; }
.cx-term .t-sep { color: #5a6a90; }
.cx-term .t-ruta { color: #6ea0ff; }
.cx-term .t-ok { color: #4ade80; text-shadow: 0 0 10px rgba(74, 222, 128, .55); }
.cx-term .t-out { color: #e8eefc; font-weight: 600; }
.cx-term .t-dim { color: #8591ad; }
.cx-term .l:has(.t-ok), .cx-term .l:has(.t-bar) { padding-left: 1.2em; }
.cx-term .t-com { opacity: .85; }
.t-bar { display: inline-flex; width: 7.5em; height: .55em; margin: 0 .2em; overflow: hidden; vertical-align: .05em; border-radius: 3px; background: rgba(255, 255, 255, .09); }
.t-bar i { display: block; width: var(--w); background: linear-gradient(90deg, #19b8ff, #7a84ff); }
.t-bar i.r { background: #6b7690; opacity: .7; }
.cx-term-pie { display: flex; justify-content: space-between; padding: 7px 14px; border-top: 1px solid rgba(150, 180, 255, .1); background: rgba(255, 255, 255, .03); color: #6f7c9c; font: 11px var(--sys); letter-spacing: .02em; }
@media (hover: hover) {
  .cx-term-ctl b:hover { background: rgba(255, 255, 255, .09); }
  .cx-term-ctl .cerrar:hover { background: #c42b1c; }
  .cx-term-ctl .cerrar:hover svg { stroke: #fff; }
  .cx-term-tab i:hover, .cx-term-mas:hover { background: rgba(255, 255, 255, .08); }
}
@media (max-width: 640px) { .cx-term-ctl b { width: 38px; } .cx-term-pie { padding: 6px 12px; } .t-bar { width: 4.5em; } }
.cx-term-ctl svg, .cx-term-mas svg, .cx-term-tab i svg { display: block; }
.cx-term-ctl svg, .cx-term-mas svg, .cx-term-tab i svg { width: 12px; height: 12px; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.cx-term-ctl svg { stroke-width: 1.15; stroke: #d3dbef; opacity: 1; }
.cx-term-ctl b { transition: background .15s; }

/* ===== Movimiento: entradas escalonadas, barras que se llenan, bruma que deriva, foco que sigue al cursor y barra de progreso =====
   Todo es decorativo y se apaga con prefers-reduced-motion. Las entradas usan animation con fill «backwards»: al terminar, la tarjeta vuelve a su estilo normal y el hover sigue funcionando. */
@keyframes cx-entra { from { opacity: 0; transform: translateY(46px) scale(.95); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cx-llena { from { transform: scaleX(0); } }
@keyframes cx-baja { from { transform: scaleY(0); } }
@keyframes cx-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes cx-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes cx-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cx-flecha { 0%, 100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(5px); opacity: 1; } }
@keyframes cx-deriva-a { from { transform: translate3d(-8%, 0, 0) scale(1); } to { transform: translate3d(10%, 6%, 0) scale(1.12); } }
@keyframes cx-deriva-b { from { transform: translate3d(9%, 4%, 0) scale(1.1); } to { transform: translate3d(-10%, -4%, 0) scale(.95); } }
@keyframes cx-pulso { 0% { transform: scale(.4); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cx-prog { to { transform: scaleX(1); } }
@keyframes cx-latido { 0%, 100% { box-shadow: 0 50px 100px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .7), 0 0 100px -24px rgba(80, 130, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .08); } 50% { box-shadow: 0 50px 100px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .7), 0 0 130px -14px rgba(110, 150, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .14); } }

/* Entrada escalonada de los mosaicos */
.js .cx-bento > .revela.vista, .js .mas-grid > .revela.vista, .js .castillo-tarjetas > .revela.vista, .js .cx-pasos.vista > li { animation: cx-entra .95s cubic-bezier(.2, .8, .2, 1) calc(var(--n, 0) * 90ms) backwards; }
.cx-bento > :nth-child(1), .mas-grid > :nth-child(1), .castillo-tarjetas > :nth-child(1), .cx-pasos > :nth-child(1) { --n: 0; }
.cx-bento > :nth-child(2), .mas-grid > :nth-child(2), .castillo-tarjetas > :nth-child(2), .cx-pasos > :nth-child(2) { --n: 1; }
.cx-bento > :nth-child(3), .mas-grid > :nth-child(3), .castillo-tarjetas > :nth-child(3), .cx-pasos > :nth-child(3) { --n: 2; }
.cx-bento > :nth-child(4), .mas-grid > :nth-child(4) { --n: 3; }
.cx-bento > :nth-child(5), .mas-grid > :nth-child(5) { --n: 4; }
.mas-grid > :nth-child(6) { --n: 5; } .mas-grid > :nth-child(7) { --n: 6; } .mas-grid > :nth-child(8) { --n: 7; } .mas-grid > :nth-child(9) { --n: 8; }

/* Títulos: un destello de luz recorre el h2 al aparecer */
.js .cx-control .cabecera.vista h2, .js .cx-memoria .cabecera.vista h2, .js .cx-agentes .cabecera.vista h2, .js .cx-novedades .cabecera.vista h2, .js .mas .cabecera.vista h2 { background: linear-gradient(100deg, var(--tinta) 38%, #bfe3ff 48%, #d9c8ff 52%, var(--tinta) 62%) 100% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cx-brillo 2.2s cubic-bezier(.4, 0, .2, 1) .25s both; }

/* Las barras se llenan, la línea de mecanismos se dibuja y los números saltan */
.js .vista .cx-barra i, .js .vista .t-bar i { transform-origin: 0 50%; animation: cx-llena 1.5s cubic-bezier(.2, .8, .2, 1) .45s backwards; }
.js .vista .cx-barra i + i, .js .vista .t-bar i + i { animation-delay: .75s; }
.js .cx-mec { --k: 0; }
.cx-mec:nth-child(2) { --k: 1; } .cx-mec:nth-child(3) { --k: 2; } .cx-mec:nth-child(4) { --k: 3; } .cx-mec:nth-child(5) { --k: 4; }
.js .vista .cx-mec:not(:last-child)::before { transform-origin: 50% 0; animation: cx-baja .7s ease calc(.3s + var(--k) * .22s) backwards; }
.js .vista .cx-mec .cx-num, .js .cx-pasos.vista .cx-num { animation: cx-pop .6s cubic-bezier(.3, 1.7, .5, 1) calc(.2s + var(--k, 0) * .22s) backwards; }
.js .vista .cx-linea li::before { animation: cx-pop .5s cubic-bezier(.3, 1.7, .5, 1) backwards; }
.js .vista .cx-linea li:nth-child(2)::before { animation-delay: .35s; } .js .vista .cx-linea li:nth-child(3)::before { animation-delay: .7s; }

/* La cifra «2,5 s» late cada 2,5 s: un anillo que se expande */
.cx-cifra { position: relative; }
.cx-cifra::after { content: ""; position: absolute; left: 0; top: 50%; width: 1.7em; height: 1.7em; margin: -.85em 0 0 -.5em; border: 2px solid var(--azul-txt); border-radius: 50%; opacity: 0; pointer-events: none; font-size: 40px; }
.js .vista .cx-cifra::after { animation: cx-pulso 2.5s ease-out infinite; }

/* Flujo de agentes, píldoras y terminal */
.cx-flecha { animation: cx-flecha 1.8s ease-in-out infinite; }
.cx-pills li { animation: cx-flota 6s ease-in-out infinite; transition: border-color .3s, color .3s, background .3s; }
.cx-pills li:nth-child(2) { animation-delay: -1.5s; } .cx-pills li:nth-child(3) { animation-delay: -3s; } .cx-pills li:nth-child(4) { animation-delay: -4.5s; }
.cx-pills li:hover { border-color: var(--azul-txt); color: var(--tinta); background: color-mix(in srgb, var(--azul-txt) 10%, var(--tarjeta)); }
.cx-flujo li:not(.cx-flecha) { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s; }
.cx-flujo li:not(.cx-flecha):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--azul-txt) 55%, var(--linea)); }
.js .cx-term.vista { animation: cx-latido 5s ease-in-out 3s infinite; }

/* Bruma: manchas de luz que derivan despacio detrás de cada sección, como las nubes de la escena de arriba */
.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas { position: relative; isolation: isolate; overflow: hidden; }
.cx-control::before, .cx-memoria::before, .cx-agentes::before, .cx-novedades::before, .cx-automatizar::before, .mas::before,
.cx-control::after, .cx-memoria::after, .cx-agentes::after, .cx-novedades::after, .cx-automatizar::after, .mas::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 70vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); will-change: transform; }
.cx-control::before, .cx-agentes::before, .cx-automatizar::before { top: -12vmax; left: -22vmax; background: radial-gradient(closest-side, rgba(60, 130, 255, .2), transparent); animation: cx-deriva-a 26s ease-in-out infinite alternate; }
.cx-control::after, .cx-agentes::after, .cx-automatizar::after { bottom: -14vmax; right: -24vmax; background: radial-gradient(closest-side, rgba(150, 100, 255, .17), transparent); animation: cx-deriva-b 32s ease-in-out infinite alternate; }
.cx-memoria::before, .cx-novedades::before, .mas::before { top: -10vmax; right: -24vmax; background: radial-gradient(closest-side, rgba(40, 200, 220, .15), transparent); animation: cx-deriva-b 30s ease-in-out infinite alternate; }
.cx-memoria::after, .cx-novedades::after, .mas::after { bottom: -12vmax; left: -22vmax; background: radial-gradient(closest-side, rgba(90, 120, 255, .17), transparent); animation: cx-deriva-a 36s ease-in-out infinite alternate; }

/* Foco de luz que sigue al cursor sobre las tarjetas y una ligera inclinación 3D */
.mas-tarjeta, .cx-pasos li { --mx: 50%; --my: 50%; }
.mas-tarjeta::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(130, 170, 255, .16), transparent 62%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.mas-tarjeta:hover::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cx-card:hover { transform: perspective(1000px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

/* Barra de progreso de lectura (solo donde el navegador sabe animar con el scroll) */
@supports (animation-timeline: scroll()) {
  body.pagina-castillo::after { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #19b8ff, #7a84ff, #c48bff); box-shadow: 0 0 12px rgba(122, 132, 255, .7); pointer-events: none; animation: cx-prog linear both; animation-timeline: scroll(root); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cx-bento > .revela.vista, .js .mas-grid > .revela.vista, .js .castillo-tarjetas > .revela.vista, .js .cx-pasos.vista > li, .js .vista .cx-barra i, .js .vista .t-bar i, .js .vista .cx-mec::before, .js .vista .cx-num, .js .vista .cx-linea li::before, .js .cx-term.vista, .cx-flecha, .cx-pills li, .js .vista .cx-cifra::after { animation: none !important; }
  .js .cx-control .cabecera.vista h2, .js .cx-memoria .cabecera.vista h2, .js .cx-agentes .cabecera.vista h2, .js .cx-novedades .cabecera.vista h2, .js .mas .cabecera.vista h2 { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .cx-control::before, .cx-control::after, .cx-memoria::before, .cx-memoria::after, .cx-agentes::before, .cx-agentes::after, .cx-novedades::before, .cx-novedades::after, .cx-automatizar::before, .cx-automatizar::after, .mas::before, .mas::after { animation: none; }
  body.pagina-castillo::after { display: none; }
}

/* ===== Scroll 3D y acentos por sección =====
   Cada sección nueva tiene su propio acento apagado (--ac / --acr) y su propia animación ligada al scroll con animation-timeline: view() / scroll(),
   sin librerías. Las ideas vienen del scrollytelling de pines por capas y de scroll horizontal (basement.studio) y de los efectos de portada con CSS puro.
   Todo vive dentro de @supports y de prefers-reduced-motion: no-preference; donde no hay soporte queda la entrada escalonada de arriba. */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

#control { --ac: #6fa8a0; --acr: 111, 168, 160; }
#memoria { --ac: #8a93d6; --acr: 138, 147, 214; }
#agentes { --ac: #c9a877; --acr: 201, 168, 119; }
#mas { --ac: #b393b8; --acr: 179, 147, 184; }
#novedades { --ac: #c98d86; --acr: 201, 141, 134; }
#privacidad { --ac: #8fb08f; --acr: 143, 176, 143; }
#instalar, #automatizar { --ac: #7d9bbf; --acr: 125, 155, 191; }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .eyebrow { color: var(--ac); }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .cx-num { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 40%, var(--linea)); }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .cx-sello { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 45%, var(--linea)); }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .mas-tarjeta:hover { border-color: color-mix(in srgb, var(--ac) 50%, var(--linea)); box-shadow: 0 22px 50px rgba(8, 14, 30, .2), 0 0 40px -18px rgba(var(--acr), .5); }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .mas-tarjeta::before { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(var(--acr), .15), transparent 62%); }
:is(#control, #memoria, #agentes, #mas, #novedades, #privacidad, #instalar, #automatizar) .mas-tarjeta::after { background: radial-gradient(circle, rgba(var(--acr), .22), transparent 70%); }
#mas .mas-ico { background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 32%, #121830), #090d17); border-color: color-mix(in srgb, var(--ac) 50%, transparent); }
#control .cx-cifra b { background-image: linear-gradient(180deg, var(--tinta), color-mix(in srgb, var(--ac) 75%, var(--tinta))); }
#control .cx-cifra::after { border-color: var(--ac); }
#control .cx-linea li::before { background: var(--ac); box-shadow: 0 0 0 4px rgba(var(--acr), .2); }
#memoria .cx-barra .m { background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, #1a2040), var(--ac)); }
#memoria .cx-leyenda .m { background: var(--ac); }
#agentes .cx-flujo small { color: var(--ac); }
#privacidad .cx-card h3 { color: color-mix(in srgb, var(--ac) 35%, var(--tinta)); }
:is(.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas)::before { background: radial-gradient(closest-side, rgba(var(--acr), .17), transparent); }
:is(.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas)::after { background: radial-gradient(closest-side, rgba(var(--acr), .1), transparent); }
/* clip (y no hidden): hidden convertiría la sección en el contenedor de scroll y rompería position: sticky */
.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas { overflow: clip; }
body.pagina-castillo::after { background: linear-gradient(90deg, #6fa8a0, #8a93d6, #c9a877, #b393b8, #c98d86, #8fb08f, #7d9bbf); box-shadow: none; opacity: .85; }

@keyframes cx-gira-x { from { opacity: 0; transform: perspective(1100px) translateY(70px) rotateX(24deg) scale(.95); } }
@keyframes cx-profundo { from { opacity: 0; transform: perspective(1000px) translateZ(-260px) translateY(50px) rotateX(-10deg); } }
@keyframes cx-carta { from { opacity: 0; transform: perspective(900px) translateY(90px) translateZ(-140px) rotateX(-16deg); } }
@keyframes cx-cierra-i { from { opacity: 0; transform: perspective(1000px) translateX(-120px) rotateY(28deg) scale(.92); } }
@keyframes cx-cierra-c { from { opacity: 0; transform: perspective(1000px) translateY(60px) scale(.8); } }
@keyframes cx-cierra-d { from { opacity: 0; transform: perspective(1000px) translateX(120px) rotateY(-28deg) scale(.92); } }
@keyframes cx-endereza { from { opacity: .15; transform: perspective(1300px) translateY(70px) rotateX(26deg) rotateY(-14deg) scale(.9); } }
@keyframes cx-par-a { from { translate: 0 90px; } to { translate: 0 -34px; } }
@keyframes cx-par-b { from { translate: 0 40px; } to { translate: 0 -64px; } }
@keyframes cx-par-c { from { translate: 0 120px; } to { translate: 0 -14px; } }
@keyframes cx-recorre { to { transform: translateX(calc(-100% + 100vw)); } }
@keyframes cx-enciende { to { border-color: color-mix(in srgb, var(--ac) 70%, var(--linea)); background: color-mix(in srgb, var(--ac) 13%, var(--tarjeta)); box-shadow: 0 0 36px -10px rgba(var(--acr), .55); transform: translateY(-4px); } }
@keyframes cx-pal { from { opacity: 0; transform: translateY(.55em) rotateX(-65deg); filter: blur(6px); } }
@keyframes cx-anillo { to { --p: 100%; } }
@keyframes cx-paso { to { border-color: color-mix(in srgb, var(--ac) 65%, var(--linea)); background: color-mix(in srgb, var(--ac) 11%, var(--tarjeta)); } }
@keyframes cx-num-lleno { to { background: var(--ac); color: #0a1124; border-color: var(--ac); } }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* Las entradas pasan a depender del scroll: «backwards» solo pinta el estado inicial, y al terminar la tarjeta vuelve a su estilo normal (el hover sigue funcionando) */
  .js .cx-bento > .revela, .js .mas-grid > .revela, .js .castillo-tarjetas > .revela, .js .cx-pasos > li, .js .cx-term { opacity: 1; }
  .js .cx-bento > .revela.vista, .js .mas-grid > .revela.vista, .js .castillo-tarjetas > .revela.vista, .js .cx-pasos.vista > li {
    animation: cx-gira-x linear backwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }

  /* Control: las cartas de los mecanismos llegan desde el fondo y la línea se dibuja con el scroll */
  .js .vista .cx-mec { animation: cx-carta linear backwards; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .js .vista .cx-mec:not(:last-child)::before { animation: cx-baja linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  .js .vista .cx-mec .cx-num { animation: cx-pop linear backwards; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  .cx-control .cx-mecs { perspective: 1100px; }
  .js .cx-control .cx-bento > .revela.vista:nth-child(n+2) { animation-name: cx-profundo; }

  /* Memoria: las tarjetas giran sobre el eje X y las barras se llenan al ritmo del scroll */
  .cx-memoria .cx-bento { perspective: 1400px; }
  .js .vista .cx-barra i, .js .vista .t-bar i { animation: cx-llena linear backwards; animation-timeline: view(); animation-range: entry 35% cover 38%; }
  .js .vista .cx-barra i + i, .js .vista .t-bar i + i { animation-delay: 0s; animation-range: entry 45% cover 46%; }

  /* Detalles: parallax por columnas con la propiedad independiente «translate», que no pisa el hover (transform) */
  .js .mas-grid > .revela.vista:nth-child(3n+1) { animation: cx-gira-x linear backwards, cx-par-a linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 80%, cover 0% cover 100%; }
  .js .mas-grid > .revela.vista:nth-child(3n+2) { animation: cx-gira-x linear backwards, cx-par-b linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 80%, cover 0% cover 100%; }
  .js .mas-grid > .revela.vista:nth-child(3n) { animation: cx-gira-x linear backwards, cx-par-c linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 80%, cover 0% cover 100%; }

  /* Privacidad: las tres tarjetas se cierran como un candado */
  .castillo-privacidad .cx-bento { perspective: 1000px; }
  .js .castillo-privacidad .cx-bento > .revela.vista:nth-child(1) { animation-name: cx-cierra-i; }
  .js .castillo-privacidad .cx-bento > .revela.vista:nth-child(2) { animation-name: cx-cierra-c; }
  .js .castillo-privacidad .cx-bento > .revela.vista:nth-child(3) { animation-name: cx-cierra-d; }

  /* Instalar: los pasos se encienden en secuencia y el botón se «carga» con un anillo */
  .js .cx-pasos.vista > li { animation: cx-gira-x linear backwards, cx-paso linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 80%, entry 55% cover 35%; }
  .js .cx-pasos.vista > li:nth-child(2) { animation-range: entry 0% entry 80%, entry 70% cover 45%; }
  .js .cx-pasos.vista > li:nth-child(3) { animation-range: entry 0% entry 80%, entry 85% cover 55%; }
  .js .cx-pasos.vista > li .cx-num { animation: cx-num-lleno linear both; animation-timeline: view(); animation-range: entry 55% cover 35%; }
  .js .cx-pasos.vista > li:nth-child(2) .cx-num { animation-range: entry 70% cover 45%; }
  .js .cx-pasos.vista > li:nth-child(3) .cx-num { animation-range: entry 85% cover 55%; }
  .castillo-descarga .btn { position: relative; }
  .castillo-descarga .btn::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; padding: 2px; background: conic-gradient(var(--ac) var(--p), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; animation: cx-anillo linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }

  /* Automatizar: la terminal llega inclinada y se endereza al centrarse; conserva su latido */
  .cx-automatizar .dos-col { perspective: 1300px; }
  .js .cx-term.vista { animation: cx-endereza linear backwards, cx-latido 5s ease-in-out 3s infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 90%, normal; }

  /* Títulos: cada palabra entra girando (castillo-fx.js las separa) y sustituye al destello */
  .js .cx-control .cabecera.vista h2, .js .cx-memoria .cabecera.vista h2, .js .cx-agentes .cabecera.vista h2, .js .cx-novedades .cabecera.vista h2, .js .mas .cabecera.vista h2 { animation: none; background: none; -webkit-text-fill-color: currentColor; perspective: 700px; }
  .cx-pal { display: inline-block; animation: cx-pal linear backwards; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(40% + var(--i) * 5%); }
}

/* Piezas que fijan la pantalla: solo con espacio de sobra (escritorio) */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  /* Agentes: scroll horizontal fijado. El flujo se enciende nodo a nodo y las cinco tarjetas cruzan la pantalla */
  .cx-hscroll { height: 340vh; view-timeline: --hs block; }
  .cx-hsticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100vh; overflow: hidden; padding-top: 56px; }
  .cx-hsticky .cabecera { margin-bottom: 36px; }
  .cx-agentes .cx-flujo { margin: -8px auto 34px; }
  .cx-agentes .cx-pista { display: flex; width: max-content; gap: 16px; padding: 0 max(24px, calc((100vw - 1100px) / 2)); animation: cx-recorre linear both; animation-timeline: --hs; animation-range: contain 4% contain 96%; }
  .js .cx-agentes .cx-pista > .cx-card.revela.vista { flex: 0 0 min(380px, 78vw); animation: none; }
  .cx-agentes .cx-flujo li:not(.cx-flecha) { animation: cx-enciende linear both; animation-timeline: --hs; animation-range: contain 2% contain 26%; }
  .cx-agentes .cx-flujo li:nth-of-type(3) { animation-range: contain 22% contain 50%; }
  .cx-agentes .cx-flujo li:nth-of-type(5) { animation-range: contain 46% contain 74%; }

  /* Novedades: un mazo de cartas que se apilan con position: sticky (pin por capas) */
  .cx-novedades .cx-mazo { display: block; max-width: 740px; margin: 0 auto; padding-bottom: 10vh; }
  .cx-novedades .cx-mazo > .cx-card { position: sticky; top: calc(104px + var(--n) * 24px); min-height: 270px; margin-bottom: 24vh; transform-origin: 50% 0; scale: calc(1 - (4 - var(--n)) * .022); filter: brightness(calc(.8 + var(--n) * .05)); }
  .cx-novedades .cx-mazo > .cx-card:last-child { margin-bottom: 0; }
  .js .cx-novedades .cx-mazo > .cx-card.revela.vista { animation: cx-carta linear backwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
}

.cx-agentes .cx-pista { padding-inline: max(16px, calc((100vw - 1100px) / 2)); }
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .cx-agentes .cx-pista { max-width: 1100px; margin-inline: auto; padding-inline: 24px; } }

/* iOS Safari: la barra del navegador cambia la altura visible. Lo que queda bajo la escena fijada (100svh) debe ser del oscuro de su borde inferior, no el lila de fondo de .mundo, o se ve una franja blanca; y el fondo de la página, también oscuro, evita el azul al rebotar el scroll */
html { background: var(--fondo, #03040A); overscroll-behavior-y: none; }
.mundo--vert.mundo--fijo { background: #0a0f18; }
/* iOS no recorta con overflow:hidden las capas con will-change (el banco de nubes .mundo-alba): clip-path sí */
.mundo-escena { -webkit-clip-path: inset(0); clip-path: inset(0); }

/* El logo del cierre es el icono real de la app (el mismo de la barra), sin la caja oscura que se le ponía a la marca blanca */
.castillo-cierre img { padding: 0; border-radius: 22px; background: none; box-shadow: 0 14px 44px rgba(0, 0, 0, .4); }

/* Haz de luz del notch (como el de la app): recorre el borde de abajo del notch, de la oreja derecha a la izquierda, con frente nítido y cola que se desvanece.
   Sustituye a la barra de progreso, que se animaba con el scroll y se trababa. Lo dibuja castillo-fx.js; el color sigue a la sección. */
body.pagina-castillo::after { display: none !important; }
.cx-haz { position: absolute; z-index: 4; overflow: visible; pointer-events: none; color: #a9b7ff; transition: color .9s ease, opacity .4s; }
.cx-haz path { fill: none; stroke: currentColor; stroke-linecap: butt; }
.nav--claro .cx-haz { filter: brightness(.7) saturate(1.5); }
html.intro .cx-haz { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cx-haz { display: none; } }


/* Móvil: el flujo Planifica → Implementa → Revisa queda en una sola línea, así las flechas apuntan en su dirección real */
@media (max-width: 640px) {
  .cx-flujo { flex-wrap: nowrap; gap: 6px; align-items: stretch; }
  .cx-flujo li:not(.cx-flecha) { flex: 1 1 0; min-width: 0; padding: 12px 6px; border-radius: 14px; }
  .cx-flujo b { font-size: 14px; }
  .cx-flujo small { font-size: 11px; }
  .cx-flujo .cx-flecha { flex: none; flex-basis: auto; transform: none; font-size: 16px; }
}


/* ===== Segunda pasada de scroll creativo =====
   Cada sección tiene ahora su propia «escena» ligada al scroll con animation-timeline (sin librerías):
   - Control: una rueda de cartas en 3D (rolodex) que gira con el scroll y enciende el mecanismo que queda al frente.
   - Memoria: vista explotada isométrica; las cuatro tarjetas llegan desde capas separadas y se ensamblan.
   - Agentes: coverflow: las tarjetas giran y se alejan según su distancia al centro de la pantalla fijada.
   - Detalles: reparto de cartas; las nueve salen de un mazo en el centro y se colocan en su sitio.
   - Novedades: mazo con vuelta de página; cada carta sube volteándose y la anterior se hunde y se apaga.
   - Privacidad: tríptico: dos puertas se abren a los lados de la tarjeta central, con luz detrás.
   - Instalar: los pasos suben como peldaños y la caja de descarga se llena como una barra de progreso.
   - Automatizar: la terminal teclea cada línea con una cortina que avanza al ritmo del scroll.
   Solo con soporte de animation-timeline y sin movimiento reducido; las piezas que fijan la pantalla, solo en escritorio. */
@property --rot { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hp { syntax: "<number>"; inherits: true; initial-value: 0; }

@keyframes cx-rueda { to { --rot: 4; } }
@keyframes cx-hp { to { --hp: 1; } }
@keyframes cx-ensambla { from { opacity: 0; transform: perspective(1500px) rotateX(58deg) rotateZ(calc(var(--sx) * -24deg)) translate3d(calc(var(--sx) * 170px), calc(var(--sy) * 150px), calc(var(--sz) * 240px)); } 55% { opacity: 1; } }
@keyframes cx-reparte { from { opacity: 0; transform: translate(calc(var(--cx) * -1 * (100% + 14px)), calc(var(--cy) * -1 * (100% + 14px))) rotate(calc(var(--r) * 1deg)) scale(.8); } 35% { opacity: 1; } }
@keyframes cx-voltea { from { opacity: 0; transform: perspective(1300px) translateY(140px) rotateX(-68deg); } 55% { opacity: 1; } }
@keyframes cx-hunde { to { transform: perspective(1300px) translateY(-14px) rotateX(7deg) scale(.95); filter: brightness(.55); } }
@keyframes cx-puerta-i { from { opacity: 0; transform: perspective(1400px) rotateY(72deg) translateX(40px); } 50% { opacity: 1; } }
@keyframes cx-puerta-d { from { opacity: 0; transform: perspective(1400px) rotateY(-72deg) translateX(-40px); } 50% { opacity: 1; } }
@keyframes cx-puerta-c { from { opacity: .2; transform: perspective(1400px) scale(.86); } }
@keyframes cx-luz { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cx-peldano { from { opacity: 0; transform: perspective(1000px) translateY(calc(var(--n) * 38px + 60px)) rotateX(-24deg); } }
@keyframes cx-sube { from { opacity: 0; transform: perspective(1200px) rotateX(20deg) translateY(70px) scale(.92); } }
@keyframes cx-teclea { from { opacity: .15; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes cx-barra-sube { from { transform: scaleX(0); } }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Memoria: vista explotada ---------- */
  #memoria .cx-bento { perspective: 1600px; }
  #memoria .cx-bento > .cx-card.revela.vista { animation: cx-ensambla linear backwards; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  #memoria .cx-bento > :nth-child(1) { --sx: -1; --sy: -1; --sz: 1.1; }
  #memoria .cx-bento > :nth-child(2) { --sx: 1; --sy: -1; --sz: .5; }
  #memoria .cx-bento > :nth-child(3) { --sx: -1; --sy: 1; --sz: .8; }
  #memoria .cx-bento > :nth-child(4) { --sx: 1; --sy: 1; --sz: 1.4; }

  /* ---------- Privacidad: el candado se abre como un tríptico ---------- */
  #privacidad .cx-bento { position: relative; perspective: 1400px; }
  #privacidad .cx-bento::before { content: ""; position: absolute; inset: -30px 12% -30px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acr), .32), transparent 75%); filter: blur(26px); animation: cx-luz linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
  #privacidad .cx-bento > .cx-card.revela.vista { animation-timeline: view(); animation-range: entry 5% cover 38%; animation-fill-mode: backwards; animation-timing-function: linear; }
  #privacidad .cx-bento > :nth-child(1).revela.vista { transform-origin: 100% 50%; animation-name: cx-puerta-i; }
  #privacidad .cx-bento > :nth-child(2).revela.vista { animation-name: cx-puerta-c; }
  #privacidad .cx-bento > :nth-child(3).revela.vista { transform-origin: 0 50%; animation-name: cx-puerta-d; }

  /* ---------- Instalar: peldaños y barra de progreso ---------- */
  #instalar .cx-pasos.vista > li { animation: cx-peldano linear backwards, cx-paso linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 85%, entry 55% cover 35%; }
  #instalar .cx-pasos.vista > li:nth-child(2) { animation-range: entry 0% entry 85%, entry 70% cover 45%; }
  #instalar .cx-pasos.vista > li:nth-child(3) { animation-range: entry 0% entry 85%, entry 85% cover 55%; }
  #instalar .castillo-descarga { position: relative; overflow: hidden; animation: cx-sube linear backwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  #instalar .castillo-descarga::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(var(--acr), .2), var(--ac) 80%, #fff); box-shadow: 0 0 16px rgba(var(--acr), .8); animation: cx-barra-sube linear both; animation-timeline: view(); animation-range: entry 35% cover 42%; }

  /* ---------- Automatizar: la terminal teclea con el scroll ---------- */
  #automatizar .cx-term { view-timeline: --term block; }
  #automatizar .cx-term .l { animation: cx-teclea linear both; animation-timeline: --term; animation-range: entry calc(8% + var(--i) * 5.2%) entry calc(20% + var(--i) * 5.2%); }
}

/* ---------- Piezas pesadas: solo escritorio ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {

  /* Control: rolodex de mecanismos. La tarjeta pasa por la pantalla y su cilindro gira de 0 a 4 posiciones */
  #control .cx-c4 { view-timeline: --ctl block; }
  #control .cx-mecs { position: relative; height: 380px; margin: 14px 0 16px; perspective: 1300px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); animation: cx-rueda linear both; animation-timeline: --ctl; animation-range: cover 16% cover 74%; }
  #control .cx-mec { position: absolute; left: 0; right: 0; top: 50%; height: 128px; margin-top: -64px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 18px; background: color-mix(in srgb, var(--tarjeta) 90%, var(--ac)); transform-style: preserve-3d;
    --d: calc(var(--k) - var(--rot)); --a: max(var(--d), -1 * var(--d));
    transform: rotateX(calc(var(--d) * -40deg)) translateZ(250px);
    opacity: calc(1.15 - var(--a) * .32);
    border-color: color-mix(in srgb, var(--ac) calc(max(0, 1 - var(--a)) * 75%), var(--linea));
    box-shadow: 0 calc(max(0, 1 - var(--a)) * 24px) calc(max(0, 1 - var(--a)) * 50px) -18px rgba(var(--acr), .55);
    animation: none; }
  #control .cx-mec::before { display: none; }
  #control .cx-mec .cx-num { animation: none; }
  #control .cx-mec dl { margin-top: 2px; }

  /* Agentes: coverflow. --hp (0→1) lo mueve el scroll fijado; cada tarjeta mide su distancia al centro */
  #agentes .cx-hsticky { animation: cx-hp linear both; animation-timeline: --hs; animation-range: contain 4% contain 96%; }
  #agentes .cx-pista { perspective: 1300px; }
  #agentes .cx-pista > :nth-child(1) { --i: 0; } #agentes .cx-pista > :nth-child(2) { --i: 1; } #agentes .cx-pista > :nth-child(3) { --i: 2; } #agentes .cx-pista > :nth-child(4) { --i: 3; } #agentes .cx-pista > :nth-child(5) { --i: 4; }
  #agentes .cx-pista > .cx-card { --d: calc(var(--i) - (1.15 + var(--hp) * 2)); --a: max(var(--d), -1 * var(--d));
    transform: rotateY(calc(var(--d) * -21deg)) translateZ(calc(var(--a) * -80px)) scale(calc(1 - var(--a) * .05));
    border-color: color-mix(in srgb, var(--ac) calc(max(0, 1 - var(--a)) * 70%), var(--linea));
    box-shadow: 0 calc(max(0, 1 - var(--a)) * 30px) calc(max(0, 1 - var(--a)) * 60px) -24px rgba(var(--acr), .5); }

  /* Detalles: reparto de cartas. Todas empiezan sobre la del centro, con un giro distinto, y se colocan en su casilla de la cuadrícula de 3 columnas */
  #mas .mas-grid > :nth-child(1) { --cx: -1; --cy: -1; --r: -9; } #mas .mas-grid > :nth-child(2) { --cx: 0; --cy: -1; --r: 6; } #mas .mas-grid > :nth-child(3) { --cx: 1; --cy: -1; --r: -5; }
  #mas .mas-grid > :nth-child(4) { --cx: -1; --cy: 0; --r: 10; } #mas .mas-grid > :nth-child(5) { --cx: 0; --cy: 0; --r: 0; } #mas .mas-grid > :nth-child(6) { --cx: 1; --cy: 0; --r: -7; }
  #mas .mas-grid > :nth-child(7) { --cx: -1; --cy: 1; --r: 8; } #mas .mas-grid > :nth-child(8) { --cx: 0; --cy: 1; --r: -10; } #mas .mas-grid > :nth-child(9) { --cx: 1; --cy: 1; --r: 5; }
  #mas .mas-grid > .revela.vista { animation: cx-reparte linear backwards; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  #mas .mas-grid > :nth-child(5) { z-index: 3; }

  /* Novedades: vuelta de página. Cada carta sube volteándose; cuando llega la siguiente, la anterior se hunde y se apaga */
  #novedades .cx-mazo { timeline-scope: --n2, --n3, --n4, --n5; }
  #novedades .cx-mazo > :nth-child(2) { view-timeline: --n2 block; } #novedades .cx-mazo > :nth-child(3) { view-timeline: --n3 block; }
  #novedades .cx-mazo > :nth-child(4) { view-timeline: --n4 block; } #novedades .cx-mazo > :nth-child(5) { view-timeline: --n5 block; }
  #novedades .cx-mazo > .cx-card { scale: 1; filter: none; }
  #novedades .cx-mazo > .cx-card.revela.vista { animation: cx-voltea linear backwards; animation-timeline: view(); animation-range: entry 0% entry 72%; transform-origin: 50% 100%; }
  #novedades .cx-mazo > :nth-child(1).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n2; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  #novedades .cx-mazo > :nth-child(2).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n3; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  #novedades .cx-mazo > :nth-child(3).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n4; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  #novedades .cx-mazo > :nth-child(4).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n5; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
}
}

/* ---------- Respaldo móvil/tablet: sin pines ni 3D pesado; los mosaicos suben con una inclinación suave ---------- */
@media (max-width: 900px) {
  #memoria .cx-bento, #privacidad .cx-bento { perspective: none; }
}

/* Móvil y tablet: la vista explotada y las puertas del tríptico se simplifican a la entrada con inclinación suave, para no mover tarjetas fuera de pantalla */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  #memoria .cx-bento > .cx-card.revela.vista, #privacidad .cx-bento > .cx-card.revela.vista { animation: cx-gira-x linear backwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  #privacidad .cx-bento::before { display: none; }
}
}

/* ===== Versión móvil de las escenas =====
   En el móvil no hay pines ni cilindros que ocupen la pantalla, pero sí gestos que el dedo ya conoce: deslizar tarjetas en horizontal y apilarlas al subir.
   - Cómo funciona, Agentes y Detalles: carruseles que se deslizan con el dedo (scroll-snap); cada tarjeta gira en 3D según su distancia al centro (coverflow) con view(inline).
   - Memoria y Novedades: las tarjetas se apilan como un mazo con position: sticky y la que queda debajo se hunde y se apaga.
   - Privacidad: las tarjetas entran alternando lados; Instalar: una línea se dibuja uniendo los pasos.
   Además se quitan las manchas de bruma animadas y con desenfoque, que cuestan mucho en un teléfono. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @keyframes cx-m-carta { 0% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--ac, var(--azul-txt)) 65%, var(--linea)); } 100% { opacity: .5; transform: scale(.9); } }   /* solo escala y opacidad: el giro 3D con overflow:hidden hacía desaparecer el contenido de la tarjeta en Safari */
  @keyframes cx-m-izq { from { opacity: 0; transform: perspective(900px) translateX(-70px) rotateY(26deg); } }
  @keyframes cx-m-der { from { opacity: 0; transform: perspective(900px) translateX(70px) rotateY(-26deg); } }

  /* Bruma: sin desenfoque ni animación */
  :is(.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas)::before, :is(.cx-control, .cx-memoria, .cx-agentes, .cx-novedades, .cx-automatizar, .mas)::after { filter: none; animation: none; will-change: auto; }

  /* Carruseles con el dedo */
  #agentes .cx-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0; padding: 10px 12vw 30px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #agentes .cx-pista::-webkit-scrollbar, #control .cx-mecs::-webkit-scrollbar, #mas .mas-grid::-webkit-scrollbar { display: none; }
  #agentes .cx-pista > .cx-card.revela.vista { flex: 0 0 76vw; scroll-snap-align: center; animation: cx-m-carta linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }

  #control .cx-mecs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 10px -8px 0; padding: 8px 8px 22px; scrollbar-width: none; overscroll-behavior-x: contain; }
  #control .cx-mec { flex: 0 0 88%; scroll-snap-align: center; padding: 16px; border: 1px solid var(--linea); border-radius: 18px; background: color-mix(in srgb, var(--tarjeta) 90%, var(--ac)); animation: cx-m-carta linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  #control .cx-mec::before { display: none; }
  #control .cx-mec .cx-num { animation: none; }

  #mas .mas-grid { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; width: 100vw; margin-inline: calc(50% - 50vw); padding: 8px 9vw 28px; scrollbar-width: none; overscroll-behavior-x: contain; }
  #mas .mas-grid > .mas-tarjeta.revela.vista { flex: 0 0 82vw; padding: 22px; scroll-snap-align: center; animation: cx-m-carta linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }

  /* Mazos apilados */
  :is(#memoria, #novedades) .cx-bento { display: block; timeline-scope: --n2, --n3, --n4, --n5; }
  :is(#memoria, #novedades) .cx-bento > .cx-card { position: sticky; top: calc(84px + var(--n) * 14px); margin-bottom: 16vh; transform-origin: 50% 100%; }
  :is(#memoria, #novedades) .cx-bento > .cx-card:last-child { margin-bottom: 0; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(2) { view-timeline: --n2 block; } :is(#memoria, #novedades) .cx-bento > :nth-child(3) { view-timeline: --n3 block; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(4) { view-timeline: --n4 block; } :is(#memoria, #novedades) .cx-bento > :nth-child(5) { view-timeline: --n5 block; }
  :is(#memoria, #novedades) .cx-bento > .cx-card.revela.vista { animation: cx-voltea linear backwards; animation-timeline: view(); animation-range: entry 0% entry 72%; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(1).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n2; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(2).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n3; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(3).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n4; animation-range: entry 0% entry 72%, entry 35% cover 20%; }
  :is(#memoria, #novedades) .cx-bento > :nth-child(4).revela.vista { animation: cx-voltea linear backwards, cx-hunde linear both; animation-timeline: view(), --n5; animation-range: entry 0% entry 72%, entry 35% cover 20%; }

  /* Privacidad: entran alternando lados */
  #privacidad .cx-bento > :nth-child(odd).revela.vista { animation-name: cx-m-izq; }
  #privacidad .cx-bento > :nth-child(even).revela.vista { animation-name: cx-m-der; }

  /* Instalar: una línea une los pasos y se dibuja con el scroll */
  #instalar .cx-pasos { position: relative; }
  #instalar .cx-pasos::before { content: ""; position: absolute; z-index: 0; left: 36px; top: 46px; bottom: 46px; width: 2px; border-radius: 2px; background: linear-gradient(var(--ac), rgba(var(--acr), .2)); box-shadow: 0 0 10px rgba(var(--acr), .6); transform-origin: 50% 0; animation: cx-baja linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
}
}