/* Capa de movimiento de todo el sistema. Se apaga con "reducir movimiento". */
@view-transition { navigation: auto; }
html { background: var(--grafito); }
body { background: transparent; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }
main#contenido { view-transition-name: contenido; }
.barra, .pub-barra { view-transition-name: barra; }
::view-transition-old(contenido) { animation: vt-sale .2s ease both; }
::view-transition-new(contenido) { animation: vt-entra .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* Fondo vivo */
.fondo-vivo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.fondo-vivo i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; }
.fondo-vivo i:nth-child(1) { width: 58vmax; height: 58vmax; left: -18vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(205,177,122,.17), transparent); animation: deriva1 34s ease-in-out infinite alternate; }
.fondo-vivo i:nth-child(2) { width: 52vmax; height: 52vmax; right: -20vmax; top: 12vh; background: radial-gradient(closest-side, rgba(166,133,68,.15), transparent); animation: deriva2 41s ease-in-out infinite alternate; }
.fondo-vivo i:nth-child(3) { width: 46vmax; height: 46vmax; left: 24vw; bottom: -30vmax; background: radial-gradient(closest-side, rgba(150,110,70,.11), transparent); animation: deriva3 47s ease-in-out infinite alternate; }
@keyframes deriva1 { to { transform: translate3d(16vw, 18vh, 0) scale(1.14); } }
@keyframes deriva2 { to { transform: translate3d(-20vw, 14vh, 0) scale(.88); } }
@keyframes deriva3 { to { transform: translate3d(12vw, -24vh, 0) scale(1.2); } }
.barra, .pub-barra { background: rgba(27,30,34,.72); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }

/* Respuesta a la interacción */
.boton { position: relative; overflow: hidden; transition: background-color .2s, border-color .2s, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(205,177,122,.2); }
.boton.sutil:hover { box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.boton:active { transform: translateY(0) scale(.985); }
.boton:not(.sutil)::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.boton:not(.sutil):hover::after { left: 120%; }
.nav-enlace { transition: color .18s, box-shadow .22s; }
.nav-sub { transform-origin: top left; }
.nav-enlace[aria-expanded="true"] + .nav-sub { animation: despliega .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes despliega { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.nav-sub a { transition: background-color .15s, padding-left .18s; }
.nav-sub a:hover { padding-left: 14px; }
.guia { animation: guia-entra .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes guia-entra { from { transform: translateX(28px); opacity: 0; } }
dialog[open] { animation: dialogo-entra .28s cubic-bezier(.2,.8,.2,1) both; }
dialog[open]::backdrop { animation: velo-entra .25s ease both; }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(14px) scale(.975); } }
@keyframes velo-entra { from { opacity: 0; } }
.foco-tour { transition: left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1); }
.tarjeta-tour { animation: dialogo-entra .28s cubic-bezier(.2,.8,.2,1) both; }
.brindis { animation: brindis-entra .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes brindis-entra { from { opacity: 0; transform: translate(-50%, 10px); } }
tbody tr { transition: background-color .15s; }
.recorrido a { transition: background-color .2s, padding-left .25s cubic-bezier(.2,.8,.2,1); }
.recorrido a:hover { padding-left: 12px; }
.recorrido em { transition: transform .25s cubic-bezier(.2,.8,.2,1); transform-origin: left center; }
.recorrido a:hover em { transform: scale(1.14); }
.atencion li, .tarea { transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.atencion li:hover { transform: translateX(4px); background: var(--grafito-3); }
.tarea:hover { transform: translateY(-2px); background: var(--grafito-3); }
.pestanas button { transition: color .18s, box-shadow .22s; }
.progreso i { transition: width .7s cubic-bezier(.2,.8,.2,1); }

/* Entradas al hacer scroll */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,.8,.24,1); transition-delay: var(--retraso, 0s); }
.js .revelar.visto { opacity: 1; transform: none; }

/* Título principal */
.linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.linea > span { display: block; animation: linea-sube 1.15s cubic-bezier(.16,.8,.24,1) both; animation-delay: var(--retraso, .15s); }
@keyframes linea-sube { from { transform: translateY(108%); } }
.aparece { animation: aparece .9s ease both; animation-delay: var(--retraso, .6s); }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }

/* Escena 3D */
.lienzo-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-con-escena] .orbitas { transition: opacity .8s; }
[data-con-escena].escena-lista .orbitas { opacity: 0 !important; }
[data-con-escena] .lienzo-3d { opacity: 0; transition: opacity 1.2s ease .1s; }
[data-con-escena].escena-lista .lienzo-3d { opacity: 1; }
.portada { min-height: min(86vh, 860px); display: flex; align-items: center; }
.portada .envoltura { width: 100%; pointer-events: none; }
.portada .envoltura a, .portada .envoltura button { pointer-events: auto; }
.portada .bloque-acciones { z-index: 1; }
.lienzo-fijo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.portada, .pub-seccion { border-bottom-color: transparent; }
.frase-vuelo { min-height: 96vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.frase-vuelo p { font-family: "Newsreader", Georgia, serif; font-size: clamp(38px, 6.2vw, 84px); line-height: 1.04; letter-spacing: -.015em; max-width: 13em; text-wrap: balance; text-shadow: 0 2px 40px rgba(10,11,13,.9); }
.pub-seccion { overflow-x: clip; }
.pub-seccion .envoltura { position: relative; }
.pub-seccion .envoltura::before { content: ""; position: absolute; inset: -40px -60px; background: radial-gradient(closest-side, rgba(20,22,26,.72), transparent); z-index: -1; pointer-events: none; }

/* Luz del cursor e intro */
.luz-cursor { position: fixed; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(222,199,151,.1), transparent); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s; mix-blend-mode: screen; will-change: transform; }
.magnetico { transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .2s, box-shadow .25s; }
.intro-marca { position: fixed; inset: 0; z-index: 100; background: #15171a; color: var(--laton); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: intro-sale .55s cubic-bezier(.7,0,.3,1) 1.1s both; }
.intro-marca svg { width: 96px; height: 96px; animation: intro-logo 1.65s cubic-bezier(.5,0,.2,1) both; }
.intro-marca path { stroke-dasharray: 1; animation: intro-traza .95s cubic-bezier(.5,0,.2,1) both; }
.intro-marca path:nth-child(2) { animation-delay: .1s; }
.intro-marca path:nth-child(3) { animation-delay: .2s; }
@keyframes intro-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-logo { from { transform: rotate(-110deg) scale(.62); opacity: 0; } 42% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } to { transform: rotate(46deg) scale(8); opacity: 0; } }
@keyframes intro-sale { to { opacity: 0; } }

/* Muro de sistemas */
.muro { padding: 24px 0 96px; overflow: hidden; }
.muro h2 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(32px, 4vw, 52px); text-align: center; margin-bottom: 44px; letter-spacing: -.01em; }
.muro-plano { display: grid; gap: 18px; transform: perspective(1300px) rotateX(13deg) rotateZ(-4deg) scale(1.1); transform-origin: center; }
.muro-fila { display: flex; gap: 18px; width: max-content; animation: muro-a 62s linear infinite; }
.muro-fila:nth-child(2) { animation-name: muro-b; animation-duration: 74s; }
.muro-fila img { display: block; height: clamp(150px, 19vw, 262px); width: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.muro:hover .muro-fila { animation-play-state: paused; }
@keyframes muro-a { to { transform: translate3d(-50%, 0, 0); } }
@keyframes muro-b { from { transform: translate3d(-50%, 0, 0); } to { transform: none; } }

/* Portales */
.cabeza-viva { position: relative; overflow: hidden; margin: -36px calc(50% - 50vw) 28px; padding: 36px calc(50vw - 50%) 8px; min-height: 196px; }
.cabeza-viva .lienzo-3d { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 62%), linear-gradient(transparent, #000 0); mask-image: linear-gradient(90deg, transparent 30%, #000 62%); }
.cabeza-viva .titulo { position: relative; margin-bottom: 0; }
.grafica-ingresos { margin-top: 36px; }
.grafica-ingresos svg { display: block; width: 100%; height: 220px; overflow: visible; }
.grafica-ingresos .serie { stroke-dasharray: 1; animation: traza-serie 1.8s cubic-bezier(.3,.7,.2,1) both .2s; }
.grafica-ingresos .relleno { animation: velo-entra 1.3s ease both 1s; }
.grafica-ingresos .marca-p { fill: var(--grafito); stroke: var(--laton); stroke-width: 2; animation: velo-entra .4s ease both; animation-delay: calc(.45s + var(--i) * .22s); }
.grafica-ingresos text { fill: var(--suave); font-size: 12px; font-family: "Manrope", sans-serif; }
.resumen-grafica { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.resumen-grafica em { font-family: "Newsreader", Georgia, serif; font-style: normal; font-size: 38px; color: var(--laton); line-height: 1; }
.resumen-grafica span { color: var(--suave); font-size: 14px; }
@keyframes traza-serie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
tbody tr, .lista > li, .recorrido li, .atencion li { animation: fila-entra .55s cubic-bezier(.2,.8,.2,1) both; }
tbody tr:nth-child(2), .lista > li:nth-child(2), .recorrido li:nth-child(2), .atencion li:nth-child(2) { animation-delay: .05s; }
tbody tr:nth-child(3), .lista > li:nth-child(3), .recorrido li:nth-child(3), .atencion li:nth-child(3) { animation-delay: .1s; }
tbody tr:nth-child(4), .lista > li:nth-child(4), .recorrido li:nth-child(4) { animation-delay: .15s; }
tbody tr:nth-child(n+5), .lista > li:nth-child(n+5), .recorrido li:nth-child(n+5) { animation-delay: .2s; }
@keyframes fila-entra { from { opacity: 0; transform: translateY(10px); } }
.tarea { cursor: grab; display: block; }
.tarea.arrastrando { opacity: .4; }
.columna { border-radius: 8px; transition: background-color .2s, box-shadow .2s; min-height: 160px; padding: 4px; }
.columna.destino { background: rgba(205,177,122,.08); box-shadow: inset 0 0 0 1px var(--laton); }
.tarea .mover { background: none; border: 0; color: var(--laton-claro); font-size: 13px; padding: 4px 0 0; text-decoration: underline; text-underline-offset: 3px; display: block; }
.tarea.nueva { animation: tarea-cae .42s cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes tarea-cae { from { transform: scale(.92) translateY(-8px); opacity: 0; } }

/* Vitrina de demostraciones */
.demos { position: relative; height: 620vh; scroll-margin-top: 62px; }
.demos-fijo { position: sticky; top: 62px; height: calc(100vh - 62px); display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.4fr); gap: 32px; align-items: center; max-width: 1360px; margin: 0 auto; padding: 0 28px; overflow: hidden; }
.demos-texto h2 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.01em; }
.demos-texto div p { color: var(--suave); margin: 10px 0 20px; max-width: 42ch; }
.demos-lista { list-style: none; padding: 0; border-top: 1px solid var(--linea); }
.demos-lista button { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea); padding: 9px 4px; color: var(--suave); transition: color .25s; }
.demos-lista button::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--laton); transform: scaleX(var(--avance, 0)); transform-origin: left; }
.demos-lista b { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; }
.demos-lista small { display: grid; grid-template-rows: 0fr; font-size: 14px; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), margin .3s; }
.demos-lista small > span { overflow: hidden; }
.demos-lista button[aria-current="true"] { color: var(--texto); }
.demos-lista button[aria-current="true"] small { grid-template-rows: 1fr; margin-top: 3px; color: var(--suave); }
.demos-nota { font-size: 13px; color: var(--suave); margin-top: 14px; }
.demos-escena { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1500px; }
.dispositivo { --r-x: 6deg; --r-y: -16deg; --r-z: 1deg; position: relative; transform-style: preserve-3d; transform: rotateX(var(--r-x)) rotateY(var(--r-y)) rotateZ(var(--r-z)); transition: width .85s cubic-bezier(.3,.8,.2,1), height .85s cubic-bezier(.3,.8,.2,1), border-radius .85s cubic-bezier(.3,.8,.2,1), padding .85s; background: linear-gradient(145deg, #4a4d52, #1d1f22 42%, #33353a); padding: var(--marco, 12px); border-radius: var(--radio, 16px); box-shadow: 0 2px 1px rgba(255,255,255,.14) inset, 0 50px 90px -24px rgba(0,0,0,.8), 0 18px 40px rgba(0,0,0,.4), 0 0 90px rgba(205,177,122,.09); width: var(--ancho-d); height: var(--alto-d); will-change: transform; }
.dispositivo[data-tipo="laptop"] { --ancho-d: min(56vw, 95vh, 820px); --alto-d: calc(min(56vw, 95vh, 820px) * .635); --marco: 11px; --radio: 15px; }
.dispositivo[data-tipo="tablet"] { --ancho-d: min(50vw, 92vh, 740px); --alto-d: calc(min(50vw, 92vh, 740px) * .685); --marco: 17px; --radio: 28px; }
.dispositivo[data-tipo="telefono"] { --alto-d: min(76vh, 640px); --ancho-d: calc(min(76vh, 640px) * .5); --marco: 9px; --radio: 38px; }
.pantalla { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--radio) - var(--marco) + 2px); background: #0d0e10; transition: border-radius .85s cubic-bezier(.3,.8,.2,1); }
.pantalla video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.pantalla video.activo { opacity: 1; }
.pantalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.1), transparent 34%); pointer-events: none; }
.base-laptop { position: absolute; left: -7%; right: -7%; top: 100%; height: 15px; background: linear-gradient(#54575c, #24262a 62%, #15161a); border-radius: 2px 2px 13px 13px; transform-origin: top; transition: opacity .35s; box-shadow: 0 26px 34px rgba(0,0,0,.55); }
.base-laptop::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 5px; background: #17181b; border-radius: 0 0 7px 7px; }
.dispositivo:not([data-tipo="laptop"]) .base-laptop { opacity: 0; }
.reflejo-disp { position: absolute; left: 8%; right: 8%; top: 106%; height: 90px; background: radial-gradient(closest-side, rgba(205,177,122,.2), transparent); filter: blur(22px); transform: translateZ(-60px); }

@media (max-width: 1020px) {
  .portada { min-height: 0; }
  .portada .envoltura { padding-bottom: 250px; }
  .portada .orbitas { display: none; }
  .frase-vuelo { min-height: 72vh; }
  .muro { padding-bottom: 60px; }
  .muro-plano { transform: perspective(900px) rotateX(9deg) rotateZ(-3deg) scale(1.15); }
  .cabeza-viva { margin-top: -26px; min-height: 150px; padding-top: 26px; }
  .cabeza-viva .lienzo-3d { opacity: .55 !important; }
  .grafica-ingresos svg { height: 170px; }
  .demos { height: auto; padding: 48px 0; }
  .demos-fijo { position: static; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 0 16px; overflow: visible; }
  .demos-escena { height: 66vw; max-height: 540px; min-height: 340px; perspective: 1000px; order: 2; }
  .demos-texto { display: contents; }
  .demos-texto > div { order: 1; }
  .demos-lista { order: 3; }
  .demos-nota { order: 4; margin: 0; }
  .dispositivo { --r-x: 3deg; --r-y: -8deg; --r-z: 0deg; }
  .dispositivo[data-tipo="laptop"] { --ancho-d: min(78vw, 620px); --alto-d: calc(min(78vw, 620px) * .635); --marco: 7px; --radio: 11px; }
  .dispositivo[data-tipo="tablet"] { --ancho-d: min(78vw, 600px); --alto-d: calc(min(78vw, 600px) * .685); --marco: 10px; --radio: 18px; }
  .dispositivo[data-tipo="telefono"] { --alto-d: min(92vw, 500px); --ancho-d: calc(min(92vw, 500px) * .5); --marco: 7px; --radio: 28px; }
  .fondo-vivo i { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .revelar { opacity: 1; transform: none; }
  .fondo-vivo i { animation: none; }
  .muro-fila { animation: none; }
  .demos { height: auto; padding: 60px 0; }
  .demos-fijo { position: static; height: auto; min-height: 640px; }
}

/* Sin scroll horizontal por elementos a todo el ancho */
html, body { overflow-x: clip; }
.frase-vuelo p { text-shadow: 0 2px 8px rgba(10,11,13,.85), 0 0 60px rgba(10,11,13,.95); }
.frase-vuelo p { position: relative; }
.frase-vuelo p::before { content: ""; position: absolute; inset: -16% -9%; z-index: -1; background: radial-gradient(closest-side, rgba(15,17,20,.82), rgba(15,17,20,.55) 62%, transparent); pointer-events: none; }