/* Stellorient · movimiento del sitio. Todo es opcional: sin JavaScript, sin WebGL o con
   «reducir movimiento» la página se ve completa y quieta (las clases las pone movimiento.js). */
.constel, .aurora { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.constel.lista, .aurora.lista { opacity: 1; }

/* entrada del héroe, escalonada */
.mov .hero .eyebrow, .mov .hero h1, .mov .hero .lead, .mov .hero .acciones, .mov .hero .escena { opacity: 0; transform: translateY(18px); }
.mov .hero.entra .eyebrow, .mov .hero.entra h1, .mov .hero.entra .lead, .mov .hero.entra .acciones, .mov .hero.entra .escena {
  opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.mov .hero.entra h1 { transition-delay: .12s; }
.mov .hero.entra .lead { transition-delay: .26s; }
.mov .hero.entra .acciones { transition-delay: .4s; }
.mov .hero.entra .escena { transition-delay: .55s; transition-duration: 1.2s; }

/* revelado al hacer scroll */

/* la tarjeta que espera tu sí respira para pedir atención */
.mov .aprob .bts span:first-child { position: relative; }
.mov .aprob .bts span:first-child::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1.5px solid var(--ambar); opacity: 0; animation: pide 3.2s ease-out infinite; }
@keyframes pide { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: .75; } 70%, 100% { opacity: 0; transform: scale(1.14); } }

/* la escena se inclina un poco con el cursor (solo con ratón) */
.mov .escena .ventana, .mov .escena .telefono { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .constel { display: none; }
  .mov .hero .eyebrow, .mov .hero h1, .mov .hero .lead, .mov .hero .acciones, .mov .hero .escena { opacity: 1 !important; transform: none !important; }
  .mov .aprob .bts span:first-child::after { display: none; }
}

.cierre { overflow: hidden; }
.cierre > .col { position: relative; z-index: 1; }

/* ---------- v2: profundidad, conversación que llega sola, avance de lectura ---------- */
/* el chat de escritorio deja libre el lado del teléfono (antes el teléfono tapaba el texto) */
@media (min-width: 900px) { .ventana .chat { padding-right: 360px; } .ventana .chat .burbuja { max-width: 78%; } }

.nav { position: sticky; }
.avance { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--ambar)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

.mov .telefono { translate: 0 var(--py, 0px); }
.mov .halo { translate: 0 calc(var(--py, 0px) * -.5); }

.guion > * { transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.mov .guion > :not(.escribe) { opacity: 0; transform: translateY(12px) scale(.98); }
.mov .guion > :not(.escribe).hola { opacity: 1; transform: none; }
.escribe { display: none; align-self: flex-start; gap: 4px; padding: 12px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: #181D27; border: 1px solid #272D3A; }
.mov .guion > .escribe.on { display: inline-flex; }
.escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--apagado); animation: punto 1s ease-in-out infinite; }
.escribe i:nth-child(2) { animation-delay: .15s; } .escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .avance, .escribe { display: none; } .mov .telefono, .mov .halo { translate: none; } }

/* ---------- escenas de vida bajo el titular ---------- */
.vida { display: grid; margin-top: 22px; font: 500 clamp(18px, 2.4vw, 26px)/1.3 var(--titulo); letter-spacing: -.01em; color: var(--suave); max-width: 30ch; }
.vida .esc { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease, transform .6s ease; transform: translateY(8px); pointer-events: none; }
.vida .esc.on { opacity: 1; transform: none; }
/* palabras amarillas: borde negro difuminado al 40 % */
.vida b { color: var(--ambar); font-weight: 600; -webkit-text-stroke: 4px rgba(0, 0, 0, .4); paint-order: stroke fill; text-shadow: 0 0 4px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .vida .esc { transition: none; } }

/* ---------- bloques claros (alternan con el oscuro de producto) ---------- */
.claro {
  --fondo: #161A23; --sup: #1E2430; --sup2: #1A1F29; --texto: #F9F5EB; --suave: #DCD7C9; --apagado: #ABABA8;
  --linea: #3C4456; --tenue: #2A303D; --dibujo: #6A7287; --ambar-fondo: #2A2D33; --ambar: #E8CC8E;
  background: var(--fondo); color: var(--texto); border-top-color: var(--tenue);
}
.claro .titulo-sec h2 em { color: var(--apagado); }
.claro .nov, .claro .principio { border-color: var(--linea); background: var(--sup); }

/* ---------- tarjetas de confianza ---------- */
.confianza { display: grid; gap: 16px; margin-top: 40px; }
.tarjeta { background: var(--sup); border: 1px solid var(--linea); border-radius: 18px; padding: 26px; display: grid; gap: 12px; align-content: start; }
.tarjeta svg { width: 30px; height: 30px; fill: none; stroke: var(--ambar); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta h3 { font-size: 21px; font-weight: 600; }
.tarjeta p { color: var(--suave); font-size: 15.5px; }
@media (min-width: 860px) { .confianza { grid-template-columns: repeat(3, 1fr); } }

/* ---------- viaje por las constelaciones ---------- */
.viaje { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.viaje.lista { opacity: 1; }
.mov main, .mov footer { position: relative; z-index: 1; }
.mov .claro { background: color-mix(in srgb, var(--fondo) 74%, transparent); }
.mov .bloque, .mov footer { background: transparent; }
@media (prefers-reduced-motion: reduce) { .viaje { display: none; } }

/* control de pausa */
.pausa { position: fixed; z-index: 30; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); background: rgba(14, 17, 24, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linea); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.pausa:hover { color: var(--texto); border-color: var(--ambar); }
.pausa .t-r, .pausa[aria-pressed="true"] .t-p { display: none; }
.pausa[aria-pressed="true"] .t-r { display: inline; }

/* sin rayas que partan la página en bloques: es un solo cielo continuo */
.mov .bloque, .mov footer, .mov .claro { border-top: 0; border-bottom: 0; }

/* el contenido se desplaza hacia los lados con el viaje: que no cree barra horizontal */
.mov main, .mov footer { overflow-x: clip; }
html.mov, .mov body { overflow-x: clip; }

/* ---------- la app: elegante y con riqueza sobria (tinta oscura, hilos de champán, serif en los títulos) ---------- */
.ventana { background: linear-gradient(180deg, #10141C, #0A0D13); border: 1px solid rgba(232, 204, 142, .16);
  box-shadow: 0 50px 140px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .025), inset 0 1px 0 rgba(232, 204, 142, .24), 0 0 80px -30px rgba(232, 204, 142, .22); }
.ventana .lado { background: linear-gradient(180deg, #0D1016, #090C11); border-right-color: rgba(232, 204, 142, .1); }
.ventana .lado .t { font-family: var(--titulo); font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.fila { transition: background .3s; }
.fila.on { background: linear-gradient(90deg, rgba(232, 204, 142, .12), rgba(232, 204, 142, .015)); box-shadow: inset 2px 0 0 var(--ambar); }
.fila .av { background: #151922; border: 1px solid rgba(232, 204, 142, .16); color: var(--suave); }
.fila .n { background: linear-gradient(180deg, #F0D9A4, #D9B877); box-shadow: 0 0 12px rgba(232, 204, 142, .4); }
.ventana .chat { background: linear-gradient(180deg, #0C1017, #090C11); }
.chat .cab { font-family: var(--titulo); font-size: 16px; border-bottom-color: rgba(232, 204, 142, .12); }
.burbuja.yo { background: linear-gradient(180deg, #2F3648, #252B3A); border: 1px solid rgba(255, 255, 255, .07); color: var(--texto); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.burbuja.el { background: linear-gradient(180deg, #151A23, #0F131A); border: 1px solid rgba(232, 204, 142, .14); color: var(--suave); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.archivo { background: linear-gradient(180deg, #151A23, #0F131A); border-color: rgba(232, 204, 142, .14); }
.archivo .ic { border-color: rgba(232, 204, 142, .35); background: rgba(232, 204, 142, .05); }
.aprob { position: relative; border: 1px solid rgba(232, 204, 142, .34); background: linear-gradient(180deg, #181B24, #0F1219);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 22px 44px -20px rgba(232, 204, 142, .3), inset 0 1px 0 rgba(232, 204, 142, .2); transition: border-color .6s, box-shadow .6s; }
.aprob h4 { font-family: var(--titulo); font-weight: 600; font-size: 17px; letter-spacing: -.005em; }
.pantalla .aprob h4 { font-size: 14.5px; }
.aprob .bts span:first-child { background: linear-gradient(180deg, #F2DCA8, #D8B676); color: #1A1508; border-color: #E8CC8E; box-shadow: 0 8px 20px -8px rgba(232, 204, 142, .6), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .16s ease, filter .2s; }
.aprob .bts span.pulsado { transform: scale(.94); filter: brightness(1.18); }
.aprob .listo { display: none; align-items: center; gap: 9px; margin-top: 12px; font: 600 13px var(--cuerpo); color: var(--ambar); }
.aprob .listo i { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(232, 204, 142, .6); background: rgba(232, 204, 142, .1); font-size: 11px; }
.pantalla .aprob .listo { font-size: 12px; }
.aprob.hecho { border-color: rgba(232, 204, 142, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 26px 50px -18px rgba(232, 204, 142, .45), inset 0 1px 0 rgba(232, 204, 142, .3); }
.aprob.hecho .bts { display: none; }
.aprob.hecho .listo { display: flex; animation: llega .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes llega { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.escribe { background: linear-gradient(180deg, #151A23, #0F131A); border-color: rgba(232, 204, 142, .14); }
.escribe i { background: var(--ambar); }

.telefono { background: linear-gradient(160deg, #4A4F5C, #14171F 38%, #2A2E3A); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(232, 204, 142, .24), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pantalla { background: linear-gradient(180deg, #0D1118, #080A0F); }
.pantalla .cab { border-bottom-color: rgba(232, 204, 142, .12); }
.pantalla .cab b { font-family: var(--titulo); font-size: 15px; }
.pantalla .campo { border-color: rgba(232, 204, 142, .22); background: rgba(255, 255, 255, .02); }
.pantalla .campo i { background: linear-gradient(180deg, #F2DCA8, #D8B676); position: relative; box-shadow: 0 6px 14px -6px rgba(232, 204, 142, .6); }
.pantalla .campo i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-top: 2px solid #1A1508; border-right: 2px solid #1A1508; transform: translate(-65%, -50%) rotate(45deg); }

/* llegada de los mensajes: cada uno entra desde su lado */
.mov .guion > .fija, .mov .guion > .fija.fija { opacity: 1; transform: none; }
.mov .guion > .yo:not(.hola) { transform: translate(18px, 8px) scale(.97); }
.mov .guion > .el:not(.hola), .mov .guion > .archivo:not(.hola) { transform: translate(-18px, 8px) scale(.97); }
.mov .guion > .aprob:not(.hola) { transform: translateY(14px) scale(.97); }
.guion > * { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), border-color .6s, box-shadow .6s; }

/* ---------- los cuatro gráficos de «Vertiza» se animan (solo con JS y a la vista; con pausa se congelan) ---------- */
.principios svg * { transform-box: fill-box; transform-origin: center; }
.vive .b1 { animation: m1 9s ease infinite; } .vive .b2 { animation: m2 9s ease infinite; } .vive .b3 { animation: m3 9s ease infinite; }
@keyframes m1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 11%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes m2 { 0%, 24% { opacity: 0; transform: translateX(10px); } 32%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes m3 { 0%, 44% { opacity: 0; transform: translateY(8px); } 52%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.vive .pt { animation: dotsvg 1.1s ease-in-out infinite; } .vive .pt:nth-of-type(2) { animation-delay: .15s; } .vive .pt:nth-of-type(3) { animation-delay: .3s; }
@keyframes dotsvg { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.principio .f1, .principio .f2, .principio .ckm, .principio .l1, .principio .l2 { stroke-dasharray: 1; }
.vive .f1 { animation: f1 9s ease infinite; } .vive .f2 { animation: f2 9s ease infinite; } .vive .ckm { animation: f4 9s ease infinite; }
@keyframes f1 { 0% { stroke-dashoffset: 1; opacity: 1; } 18%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes f2 { 0%, 28% { stroke-dashoffset: 1; opacity: 1; } 48%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes f4 { 0%, 54% { stroke-dashoffset: 1; opacity: 1; } 66%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vive .ck { animation: ck 9s ease infinite; } .vive .st { animation: st 9s ease infinite; } .vive .f3, .vive .no { animation: dim 9s ease infinite; }
@keyframes ck { 0%, 44% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.18); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st { 0%, 14% { transform: none; filter: none; } 22% { transform: scale(1.4); filter: drop-shadow(0 0 5px rgba(232, 204, 142, .85)); } 32%, 100% { transform: none; filter: none; } }
@keyframes dim { 0%, 24% { opacity: .9; } 36%, 90% { opacity: .22; } 100% { opacity: .9; } }

.vive .orb { animation: orb 7s linear infinite; }
@keyframes orb { to { stroke-dashoffset: -60; } }
.vive .c1 { animation: resp 4.2s ease-in-out infinite; } .vive .c2 { animation: resp 4.2s ease-in-out 1.4s infinite; } .vive .c3 { animation: flota 4.2s ease-in-out .7s infinite; }
@keyframes resp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.vive .tw { animation: tw 3s ease-in-out infinite; } .vive .t2 { animation-delay: .8s; } .vive .t3 { animation-delay: 1.6s; }
@keyframes tw { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }

.vive .l1 { animation: l1 9s ease infinite; } .vive .l2 { animation: l2 9s ease infinite; } .vive .tx1 { animation: tx1 9s ease infinite; } .vive .tx2 { animation: tx2 9s ease infinite; }
@keyframes l1 { 0% { stroke-dashoffset: 1; opacity: 1; } 22%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes l2 { 0%, 30% { stroke-dashoffset: 1; opacity: 1; } 52%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tx1 { 0%, 18% { opacity: 0; } 28%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tx2 { 0%, 48% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
.en-pausa .principios * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .principios svg * { animation: none !important; } }

/* tarjetas con más fondo: hilo de champán arriba y un resplandor suave bajo el dibujo */
.claro .principios { border-color: rgba(232, 204, 142, .16); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(232, 204, 142, .2); }
.claro .principio { background: radial-gradient(120% 70% at 50% 0%, rgba(232, 204, 142, .06), transparent 60%), linear-gradient(180deg, #1B202A, #151922); }
.principio svg .d { stroke: #8C93A8; } .principio svg .d-tenue { stroke: #4A5266; }

/* ---------- el resto de los gráficos también se mueven (solo con JS y a la vista; con pausa se congelan) ---------- */
.en-pausa .vive, .en-pausa .vive *, .en-pausa .vive::before, .en-pausa .vive::after { animation-play-state: paused !important; }

/* pila de aprobaciones: las tarjetas llegan una a una y la última se aprueba sola */
.pila .aprob { overflow: hidden; }
.pila .aprob .listo { display: flex; position: absolute; left: 16px; bottom: 14px; margin: 0; opacity: 0; }
.pila.vive .aprob:nth-child(1) { animation: pa1 11s ease infinite; }
.pila.vive .aprob:nth-child(2) { animation: pa2 11s ease infinite; }
.pila.vive .aprob:nth-child(3) { animation: pa3 11s ease infinite; }
@keyframes pa1 { 0%, 2% { opacity: 0; translate: 0 26px; } 10%, 90% { opacity: .55; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 -10px; } }
@keyframes pa2 { 0%, 14% { opacity: 0; translate: 0 26px; } 23%, 90% { opacity: .8; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 -10px; } }
@keyframes pa3 { 0%, 28% { opacity: 0; translate: 0 30px; } 38%, 90% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 -10px; } }
.pila.vive .aprob:nth-child(3) .bts span:first-child { animation: pulsa 11s ease infinite; }
@keyframes pulsa { 0%, 58% { scale: 1; filter: none; } 62% { scale: .93; filter: brightness(1.2); } 66%, 100% { scale: 1; filter: none; } }
.pila.vive .aprob:nth-child(3) .bts { animation: bts 11s ease infinite; }
@keyframes bts { 0%, 64% { opacity: 1; } 70%, 92% { opacity: 0; } 98%, 100% { opacity: 0; } }
.pila.vive .aprob:nth-child(3) .listo { animation: lis 11s ease infinite; }
@keyframes lis { 0%, 66% { opacity: 0; translate: 0 6px; } 74%, 92% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }
.pila.vive .aprob:nth-child(3) { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(232, 204, 142, .3); }

/* «Conectado»: pulsos de luz viajan del centro a cada cuenta; el anillo punteado gira; los nodos respiran */
.orbita .pulso { fill: none; stroke: var(--ambar); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .12 1; stroke-dashoffset: .12; opacity: 0; filter: drop-shadow(0 0 4px rgba(232, 204, 142, .9)); }
.orbita.vive .pulso { animation: pulso 5.2s ease-in-out infinite; opacity: 1; }
.orbita.vive .pulso:nth-of-type(3) { animation-delay: .9s; } .orbita.vive .pulso:nth-of-type(4) { animation-delay: 1.8s; } .orbita.vive .pulso:nth-of-type(5) { animation-delay: 2.7s; }
@keyframes pulso { 0% { stroke-dashoffset: .12; } 40%, 100% { stroke-dashoffset: -1; } }
.orbita .anillo { transform-box: view-box; transform-origin: 300px 210px; }
.orbita.vive .anillo { animation: giro 70s linear infinite reverse; }
.orbita .nd, .orbita .astro { transform-box: fill-box; transform-origin: center; }
.orbita.vive .nd { animation: nodo 5.2s ease-in-out infinite; }
.orbita.vive g:nth-of-type(3) .nd { animation-delay: .9s; } .orbita.vive g:nth-of-type(4) .nd { animation-delay: 1.8s; } .orbita.vive g:nth-of-type(5) .nd { animation-delay: 2.7s; }
@keyframes nodo { 0%, 30%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
.orbita.vive .astro { animation: astro 4.5s ease-in-out infinite; }
@keyframes astro { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232, 204, 142, 0)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(232, 204, 142, .55)); } }

/* temas: llegan los mensajes en cada teléfono y se resalta uno tras otro */
.temas figure:nth-child(1) { --o: 0s; } .temas figure:nth-child(2) { --o: .7s; } .temas figure:nth-child(3) { --o: 1.4s; } .temas figure:nth-child(4) { --o: 2.1s; }
.temas.vive .mini .b { animation: tb 8s ease both infinite; animation-delay: calc(var(--o, 0s) + var(--d, 0s)); }
.mini .b:nth-child(2) { --d: .6s; } .mini .b:nth-child(3) { --d: 1.2s; } .mini .b:nth-child(4) { --d: 1.8s; }
@keyframes tb { 0% { opacity: 0; translate: 0 8px; } 8%, 88% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }
.temas.vive .mini .k::after { animation: lat 2.4s ease-in-out infinite; }
@keyframes lat { 0%, 100% { scale: 1; } 50% { scale: 1.25; } }
.temas.vive figure { animation: lev 12s ease-in-out infinite; animation-delay: calc(var(--o, 0s) * 0 + var(--v, 0s)); }
.temas figure:nth-child(1) { --v: 0s; } .temas figure:nth-child(2) { --v: 3s; } .temas figure:nth-child(3) { --v: 6s; } .temas figure:nth-child(4) { --v: 9s; }
@keyframes lev { 0%, 25%, 100% { translate: 0 0; } 6%, 19% { translate: 0 -8px; } }
.temas.vive figcaption { animation: cap 12s ease-in-out infinite; animation-delay: var(--v, 0s); }
@keyframes cap { 0%, 25%, 100% { color: var(--apagado); } 6%, 19% { color: var(--ambar); } }

/* novedades: las filas entran y una línea de luz las recorre */
.novedades { position: relative; }
.novedades.vive .nov { animation: nv .8s cubic-bezier(.2, .7, .2, 1) both; }
.novedades.vive .nov:nth-child(2) { animation-delay: .12s; } .novedades.vive .nov:nth-child(3) { animation-delay: .24s; } .novedades.vive .nov:nth-child(4) { animation-delay: .36s; } .novedades.vive .nov:nth-child(5) { animation-delay: .48s; }
@keyframes nv { from { opacity: 0; translate: -26px 0; } to { opacity: 1; translate: 0 0; } }
.novedades::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(232, 204, 142, .7), transparent); }
.novedades.vive::after { animation: barre 7s ease-in-out 1s infinite; }
@keyframes barre { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 55% { top: 100%; opacity: 1; } 62%, 100% { top: 100%; opacity: 0; } }

/* precios: las franjas avanzan despacio y un destello recorre la caja */
.pendiente { position: relative; overflow: hidden; background: none; }
.pendiente > * { position: relative; z-index: 1; }
.pendiente::before { content: ""; position: absolute; inset: 0 -40px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(232, 204, 142, .045) 14px 28px); }
.pendiente.vive::before { animation: franja 3.2s linear infinite; }
@keyframes franja { to { translate: -39.6px 0; } }
.pendiente::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent, rgba(232, 204, 142, .1), transparent); }
.pendiente.vive::after { animation: destello 6.5s ease-in-out infinite; }
@keyframes destello { 0% { left: -40%; opacity: 0; } 10% { opacity: 1; } 50% { left: 100%; opacity: 1; } 60%, 100% { left: 100%; opacity: 0; } }

/* confianza: las tarjetas entran y cada icono se dibuja / se cierra */
.confianza { gap: 28px; margin-bottom: 24px; }
.confianza.vive .tarjeta { animation: nv .8s cubic-bezier(.2, .7, .2, 1) both; }
.confianza.vive .tarjeta:nth-child(2) { animation-delay: .14s; } .confianza.vive .tarjeta:nth-child(3) { animation-delay: .28s; }
.tarjeta .tk1, .tarjeta .tk2, .tarjeta .tk3, .tarjeta .tk4 { stroke-dasharray: 1; }
.confianza.vive .tk1 { animation: tk 6s ease infinite .4s; }
.confianza.vive .tk2 { animation: tk 6s ease infinite .5s; } .confianza.vive .tk3 { animation: tk 6s ease infinite .8s; } .confianza.vive .tk4 { animation: tk 6s ease infinite 1.1s; }
@keyframes tk { 0% { stroke-dashoffset: 1; } 18%, 86% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
.confianza.vive .tk5 { animation: cand 6s ease-in-out infinite .6s; }
@keyframes cand { 0%, 8% { translate: 0 -3px; } 20%, 86% { translate: 0 0; } 96%, 100% { translate: 0 -3px; } }
.tarjeta svg { filter: drop-shadow(0 0 6px rgba(232, 204, 142, .25)); }

/* acceso clientes: el logo late y un destello recorre el botón */
.clientes { position: relative; }
.clientes.vive .t svg { animation: astro2 4.5s ease-in-out infinite; }
@keyframes astro2 { 0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 204, 142, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(232, 204, 142, .5)); } }
.clientes .btn { position: relative; overflow: hidden; }
.clientes .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(232, 204, 142, .28), transparent); opacity: 0; }
.clientes.vive .btn::after { animation: destello2 5s ease-in-out 1s infinite; }
@keyframes destello2 { 0% { left: -60%; opacity: 0; } 8% { opacity: 1; } 40% { left: 120%; opacity: 1; } 48%, 100% { left: 120%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vive, .vive * { animation: none !important; } }

/* ---------- ventanas del menú: cada opción abre su propia vista, con información completa ---------- */
@media (min-width: 900px) and (max-width: 1120px) { .nav ul { gap: 16px; } .nav .btn.sec { display: none; } }
.vistas { position: relative; z-index: 1; }
.mov .vistas .vista { display: none; }
.mov .vistas .vista.abierta { display: block; }
.mov.en-vista main { display: none; }
.nav ul a[aria-current="page"] { color: var(--texto); box-shadow: 0 2px 0 var(--ambar); padding-bottom: 4px; }
.volver { display: inline-flex; margin-bottom: 28px; font: 500 12.5px var(--mono); letter-spacing: .05em; color: var(--apagado); }
.volver:hover { color: var(--ambar); }
.mas, .mas-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cartas { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartas.dos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cartas.cuatro { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vistas .tarjeta { background: linear-gradient(180deg, #151A23, #0F131A); border-color: rgba(232, 204, 142, .14); }
.tarjeta.grande { padding: 34px; gap: 14px; }
.tarjeta.grande h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; }
.tarjeta.grande .mono { color: var(--ambar); }

.pasos { counter-reset: p; list-style: none; margin: 40px 0 0; padding: 0; max-width: 780px; }
.pasos li { counter-increment: p; position: relative; padding: 0 0 30px 66px; }
.pasos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(232, 204, 142, .45); background: rgba(232, 204, 142, .06); color: var(--ambar); font: 600 16px var(--titulo); }
.pasos li::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 1px; background: linear-gradient(var(--linea), transparent); }
.pasos li:last-child::after { display: none; }
.pasos b { display: block; font: 600 20px var(--titulo); margin-bottom: 4px; }
.pasos p { margin: 0; color: var(--suave); }

.noticias { display: grid; gap: 24px; margin-top: 40px; }
.noticia { display: grid; gap: 12px; padding: 30px; border-radius: 20px; border: 1px solid rgba(232, 204, 142, .16); background: linear-gradient(180deg, #151A23, #0F131A); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(232, 204, 142, .12); }
.noticia .meta { display: flex; align-items: center; gap: 14px; }
.etq { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ambar); color: var(--sobre-ambar); border-radius: 999px; padding: 3px 11px; }
.noticia time { font: 500 12px var(--mono); color: var(--apagado); letter-spacing: .04em; }
.noticia h3 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; }
.noticia .res { margin: 0; color: var(--suave); font-size: 17px; }
.noticia .como { border-left: 2px solid rgba(232, 204, 142, .4); padding-left: 18px; }
.noticia .como b { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); }
.noticia .como ul { margin: 8px 0 0; padding-left: 18px; color: var(--suave); display: grid; gap: 4px; }
.noticia .gana { margin: 0; }
.noticia .gana b { color: var(--ambar); }

.planes { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 20px; border: 1px solid rgba(232, 204, 142, .16); background: linear-gradient(180deg, #151A23, #0F131A); }
.plan.destaca { border-color: rgba(232, 204, 142, .55); box-shadow: 0 30px 80px -40px rgba(232, 204, 142, .45), inset 0 1px 0 rgba(232, 204, 142, .25); }
.plan .mono { color: var(--ambar); }
.plan h3 { font-size: 30px; }
.plan > p { margin: 0; color: var(--suave); }
.plan .precio { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea); font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.aviso-caja { margin-top: 32px; padding: 24px 28px; border: 1px dashed rgba(232, 204, 142, .4); border-radius: 16px; color: var(--suave); max-width: 860px; }
.aviso-caja p { margin: 0; }

.faq { display: grid; gap: 10px; margin-top: 32px; max-width: 860px; }
.faq details { border: 1px solid var(--linea); border-radius: 14px; padding: 0 22px; background: rgba(255, 255, 255, .015); transition: border-color .3s; }
.faq details[open] { border-color: rgba(232, 204, 142, .35); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font: 600 18px var(--titulo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ambar); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p, .faq details ul { margin: 0 0 20px; color: var(--suave); }

.contactos { display: grid; gap: 24px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.panel-contacto { display: grid; gap: 12px; align-content: start; padding: 30px; border-radius: 20px; border: 1px solid rgba(232, 204, 142, .18); background: linear-gradient(180deg, #151A23, #0F131A); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(232, 204, 142, .14); }
.panel-contacto .mono { color: var(--ambar); }
.panel-contacto h3 { font-size: 28px; line-height: 1.1; }
.panel-contacto > p { margin: 0; color: var(--suave); }
.panel-contacto form.demo { padding: 0; border: 0; background: none; margin-top: 8px; }
.panel-contacto .nota { color: var(--apagado); font-size: 13.5px; margin: 0; }
.panel-contacto .nota a { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.nota.centro { text-align: center; margin-top: 28px; color: var(--apagado); }
.nota.centro a { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

/* el salto de dimensión: la vista actual se acerca y se desenfoca; la nueva sale del fondo hasta enfocarse */
.portal { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
  background: radial-gradient(circle at 50% 45%, rgba(232, 204, 142, .12), rgba(10, 13, 19, .5) 55%, rgba(10, 13, 19, .88)); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.portal.on { opacity: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.saliendo main, html.saliendo .vistas, html.saliendo footer { transform-origin: 50% var(--oy, 45vh); transform: scale(1.22); opacity: 0; transition: transform .5s cubic-bezier(.55, 0, .9, .4), opacity .45s ease; }
html.saliendo.atras main, html.saliendo.atras .vistas, html.saliendo.atras footer { transform: scale(.84); }
html.entrando main, html.entrando .vistas, html.entrando footer { transform-origin: 50% var(--oy, 45vh); animation: dim-in .9s cubic-bezier(.16, .8, .2, 1) both; }
html.entrando.atras main, html.entrando.atras .vistas, html.entrando.atras footer { animation-name: dim-out; }
@keyframes dim-in { from { transform: scale(.88); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes dim-out { from { transform: scale(1.16); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .portal { display: none; } }
.vista h2[tabindex="-1"]:focus, .vista h2[tabindex="-1"]:focus-visible { outline: none; }

/* menú en pantallas pequeñas: botón «Menú» que despliega las mismas opciones */
.menu-movil { font: 600 13px var(--cuerpo); color: var(--texto); background: transparent; border: 1px solid var(--linea); border-radius: 10px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.menu-movil:hover { border-color: var(--ambar); }
@media (min-width: 900px) { .menu-movil { display: none !important; } }
@media (max-width: 899px) {
  .nav.abierto ul { display: grid; position: absolute; top: 60px; left: 0; right: 0; gap: 0; padding: 8px 20px 18px; background: rgba(10, 13, 19, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232, 204, 142, .2); font-size: 18px; }
  .nav.abierto ul li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--tenue); color: var(--suave); font-family: var(--titulo); }
  .nav.abierto ul li:last-child a { border-bottom: 0; }
  .nav.abierto ul a[aria-current="page"] { color: var(--ambar); box-shadow: none; }
}

/* ---------- membresías con precio (integración del contenido publicado el 27/10) ---------- */
.planes.cuatro { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan .cifra { margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--suave); font: 500 13px var(--mono); letter-spacing: .05em; }
.plan .cifra b { font: 600 52px / 1 var(--titulo); letter-spacing: -.02em; color: var(--texto); }
.plan .precio a.btn { text-transform: none; letter-spacing: 0; font: 600 15px var(--sans, inherit); }
.nota-precios, .intro-precios { max-width: 860px; color: var(--apagado); font-size: 14.5px; margin: 22px 0 0; }
.intro-precios { color: var(--suave); font-size: 16px; margin: 0 0 8px; }
.contactos.tres { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 24px; }
.panel-contacto h3 a { color: var(--texto); text-decoration: none; }