/* O³ — sistema de movimiento del home.
   · Intro del hero y nav: animación de entrada al cargar (IntersectionObserver + transiciones).
   · Todo lo demás: si el navegador soporta animation-timeline, motion.js marca los elementos
     con .sfx y avanzan/retroceden con el scroll (bloque "Modo scroll"). Si no, respaldo con
     la animación de entrada de siempre (reglas con :not(.sfx)).
   · Los estados ocultos solo aplican con JS (.js) y sin modo reducido (.fx-off).
   · motion.js agrega .fx-ready al arrancar; si no carga, el failsafe muestra todo a los 4 s.
   · Solo se anima transform, opacity, filter y clip-path. */
:root { --lux: cubic-bezier(.16, 1, .3, 1); --gold: #B8A88A; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
[data-modal] { cursor: pointer; }
.ln { display: block; }
.manif .ln + .ln { margin-top: 1.42em; }

/* ── Estados iniciales (intro del hero + respaldo sin scroll-timeline) ── */
.js:not(.fx-off) [data-fx="nav"] { opacity: 0; transform: translateY(-14px); transition: opacity 1.2s var(--lux) .2s, transform 1.4s var(--lux) .2s; }
.js:not(.fx-off) [data-fx="up"]:not(.sfx) { opacity: 0; transform: translateY(42px); transition: opacity 1.3s var(--lux), transform 1.5s var(--lux); transition-delay: var(--d, 0ms); }
.js:not(.fx-off) [data-fx="label"]:not(.sfx) > .lb { display: inline-block; opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--lux), opacity .8s ease-out; transition-delay: var(--d, 0ms); }

/* Líneas que suben desde una máscara */
.js:not(.fx-off) .split .ln { overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.js:not(.fx-off) .manif .ln + .ln { margin-top: 1.28em; }
.js:not(.fx-off) .split:not(.sfx) .ln-i { display: block; transform: translateY(130%); transition: transform 1.4s var(--lux); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--step, 120ms)); }

/* Titular del hero: letras que enfocan */
.js:not(.fx-off) [data-fx="chars"] .w { display: inline-block; white-space: nowrap; }
.js:not(.fx-off) [data-fx="chars"] .ch { display: inline-block; opacity: 0; filter: blur(16px); transform: translateY(.35em) scale(1.04); transition: opacity 1.2s var(--lux), filter 1.5s var(--lux), transform 1.6s var(--lux); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 45ms); }

/* Fondo del hero: zoom lento que se aclara */
.js:not(.fx-off) [data-screen-label="Hero"] > video,
.js:not(.fx-off) [data-screen-label="Hero"] > img { transform: scale(1.16); filter: brightness(.5) saturate(.8); transition: transform 3.4s cubic-bezier(.2, .8, .2, 1), filter 2.6s ease-out; }
.js:not(.fx-off) .hero-ready > img, .js:not(.fx-off) .hero-ready > video { transform: none; filter: none; }

/* Grupos escalonados */
.js:not(.fx-off) [data-fx="stagger"]:not(.sfx) > * { opacity: 0; transform: translateY(34px); transition: opacity 1.2s var(--lux), transform 1.4s var(--lux); transition-delay: calc(var(--i, 0) * 140ms + 150ms); }
.js:not(.fx-off) .os-row:not(.sfx) > *,
.js:not(.fx-off) [data-fx="rows"]:not(.sfx) > * > * { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--lux), transform 1.3s var(--lux); transition-delay: calc(var(--i, 0) * 110ms + 300ms); }

/* Filetes que se dibujan */
.js:not(.fx-off) .has-rule { position: relative; border-top-color: transparent !important; }
.js:not(.fx-off) .has-rule:not(.sfx)::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--lux); transition-delay: calc(var(--i, 0) * 110ms); }

/* Diagrama: se arma de abajo hacia arriba */
.js:not(.fx-off) [data-fx="diagram"]:not(.sfx) > * { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1s var(--lux), transform 1.2s var(--lux), filter 1.2s var(--lux); transition-delay: calc(var(--i, 0) * 190ms); }
.diagram-box { position: relative; overflow: hidden; }
.js:not(.fx-off) [data-fx="diagram"]:not(.sfx) > .diagram-box { transition: opacity 1s var(--lux), transform 1.2s var(--lux), filter 1.2s var(--lux), border-color 1.6s ease; transition-delay: calc(var(--i, 0) * 190ms), calc(var(--i, 0) * 190ms), calc(var(--i, 0) * 190ms), 1.5s; }
.js:not(.fx-off) .diagram-box:not(.sfx)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(184, 168, 138, .3) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }

/* Barras del índice */
.js:not(.fx-off) [data-fx="bars"]:not(.sfx) .fill { transform: scaleX(0); transform-origin: 0 50%; transition: transform 2s var(--lux); transition-delay: calc(var(--i, 0) * 150ms + 200ms); }

/* Tarjetas de casos: cortina + zoom */
.js:not(.fx-off) .cards > a:not(.sfx) > div:first-child { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--lux); transition-delay: calc(var(--i, 0) * 120ms); }
.js:not(.fx-off) .cards > a:not(.sfx) > div:first-child video,
.js:not(.fx-off) .cards > a:not(.sfx) > div:first-child img { transform: scale(1.22); transition: transform 2.2s var(--lux); transition-delay: calc(var(--i, 0) * 120ms); }
.js:not(.fx-off) .cards > a:not(.sfx) > div:not(:first-child) { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--lux), transform 1.2s var(--lux); transition-delay: calc(var(--i, 0) * 120ms + 500ms); }

/* ── Estados revelados (animación de entrada) ─────── */
.js .is-in[data-fx="nav"], .js .is-in[data-fx="up"] { opacity: 1; transform: none; }
.js .is-in[data-fx="label"] > .lb { opacity: 1; clip-path: inset(-30% -10% -30% 0); }
.js .split.is-in .ln-i { transform: none; }
.js [data-fx="chars"].is-in .ch { opacity: 1; filter: none; transform: none; }
.js [data-fx="stagger"].is-in > *,
.js .os-row.is-in > *,
.js [data-fx="rows"].is-in > * > *,
.js [data-fx="diagram"].is-in > * { opacity: 1; transform: none; filter: none; }
.js .is-in.has-rule::before, .js .is-in > .has-rule::before { transform: none; }
.js [data-fx="diagram"].is-in > .diagram-box { border-color: rgba(184, 168, 138, .55) !important; }
.js [data-fx="diagram"].is-in > .diagram-box::after { transform: translateX(120%); transition: transform 1.8s var(--lux) 1.4s; }
.js [data-fx="bars"].is-in .fill { transform: none; }
.js .cards > a.is-in > div:first-child { clip-path: inset(0); }
.js .cards > a.is-in > div:first-child img, .js .cards > a.is-in > div:first-child video { transform: none; }
.js .cards > a.is-in > div:not(:first-child) { opacity: 1; transform: none; }

/* ── Modo scroll: avanza y retrocede con el scroll ──
   Rangos en vh desde que el elemento asoma por abajo: empieza cuando su borde superior está a
   ~85% de la pantalla (--rs) y termina cerca de la mitad (--re), para que la animación ocurra
   donde se está mirando. Líneas y grupos se escalonan con --i. En el CTA y el footer el rango
   es más corto: la página termina antes de que lleguen a la mitad. */
@supports (animation-timeline: view()) {
  /* overflow hidden crea cajas de scroll que congelan las líneas de tiempo; clip se ve igual */
  .fx-scroll body > div:first-child { overflow-x: clip !important; }
  .fx-scroll [data-screen-label][style*="overflow: hidden"] { overflow: clip !important; }

  .fx-scroll { --rs: 15vh; --re: 55vh; }
  .fx-scroll [data-screen-label="CTA"] { --rs: 2vh; --re: 22vh; }
  /* El footer es bajo: su borde superior no pasa del ~65% de la pantalla */
  .fx-scroll [data-screen-label="Footer"] { --rs: 0vh; --re: 12vh; --st: 2vh; }

  @keyframes sfx-up { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
  @keyframes sfx-line { from { transform: translateY(130%); } to { transform: none; } }
  @keyframes sfx-from-left { from { opacity: 0; transform: translateX(-40vw); } to { opacity: 1; transform: none; } }
  @keyframes sfx-from-right { from { opacity: 0; transform: translateX(40vw); } to { opacity: 1; transform: none; } }
  @keyframes sfx-label { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(-30% -10% -30% 0); } }
  @keyframes sfx-fade { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes sfx-scale-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes sfx-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  @keyframes sfx-zoom { from { transform: scale(1.22); } to { transform: none; } }
  @keyframes sfx-shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  @keyframes sfx-gold { to { border-color: rgba(184, 168, 138, .55); } }

  .fx-scroll .sfx { --sfx-ease: cubic-bezier(.25, .6, .3, 1); }

  /* Textos sueltos */
  .fx-scroll .sfx[data-fx="up"] { animation: sfx-up both var(--sfx-ease); animation-timeline: view(); animation-range: cover var(--rs) cover var(--re); }

  /* Etiquetas "[ … ]" */
  .fx-scroll .sfx[data-fx="label"] { view-timeline: --sfx-label block; }
  .fx-scroll .sfx[data-fx="label"] > .lb { display: inline-block; animation: sfx-label both var(--sfx-ease); animation-timeline: --sfx-label; animation-range: cover calc(var(--rs) - 3vh) cover calc(var(--re) - 10vh); }

  /* Titulares por línea */
  .fx-scroll .sfx.split { view-timeline: --sfx-split block; }
  .fx-scroll .sfx.split .ln-i { display: block; animation: sfx-line both var(--sfx-ease); animation-timeline: --sfx-split; animation-range: cover calc(var(--rs) + var(--i, 0) * 7vh) cover calc(var(--re) + var(--i, 0) * 7vh); }
  .fx-scroll .sfx.manif .ln-i { animation-range: cover calc(var(--rs) - 5vh + var(--i, 0) * 9vh) cover calc(var(--re) - 15vh + var(--i, 0) * 9vh); }

  /* La Tensión: el primer bloque entra desde la izquierda y el segundo desde la derecha, sin máscara */
  .fx-scroll #eleva .sfx.split .ln { overflow: visible; }
  .fx-scroll #eleva .sfx.split .ln-i { animation-name: sfx-from-left; }
  .fx-scroll #eleva .sfx.split[style*="text-align: right"] .ln-i { animation-name: sfx-from-right; }

  /* Grupos: stagger y barras comparten la línea de tiempo del contenedor */
  .fx-scroll .sfx[data-fx="stagger"],
  .fx-scroll .sfx[data-fx="bars"] { view-timeline: --sfx-group block; }
  .fx-scroll .sfx[data-fx="stagger"] > * { animation: sfx-up both var(--sfx-ease); animation-timeline: --sfx-group; animation-range: cover calc(var(--rs) + var(--i, 0) * var(--st, 6vh)) cover calc(var(--re) + var(--i, 0) * var(--st, 6vh)); }

  /* Filas (Brand OS y Elevar) con su filete */
  .fx-scroll .sfx.os-row, .fx-scroll .sfx-row { view-timeline: --sfx-row block; }
  .fx-scroll .sfx.os-row > *, .fx-scroll .sfx-row > * { animation: sfx-up both var(--sfx-ease); animation-timeline: --sfx-row; animation-range: cover var(--rs) cover var(--re); }
  .fx-scroll .sfx.has-rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule); transform-origin: 0 50%; animation: sfx-scale-x both var(--sfx-ease); animation-timeline: view(); animation-range: cover calc(var(--rs) - 5vh) cover var(--re); }

  /* Diagrama: cada pieza según su propia posición; la caja se dora y la cruza un brillo */
  .fx-scroll .sfx[data-fx="diagram"] > * { animation: sfx-fade both var(--sfx-ease); animation-timeline: view(); animation-range: cover var(--rs) cover calc(var(--re) - 10vh); }
  .fx-scroll .sfx[data-fx="diagram"] > .diagram-box { view-timeline: --sfx-piece block; animation: sfx-fade both var(--sfx-ease), sfx-gold both linear; animation-timeline: view(), view(); animation-range: cover var(--rs) cover calc(var(--re) - 10vh), cover var(--re) cover calc(var(--re) + 20vh); }
  .fx-scroll .diagram-box.sfx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(184, 168, 138, .3) 50%, transparent 70%); pointer-events: none; animation: sfx-shimmer both linear; animation-timeline: --sfx-piece; animation-range: cover var(--re) cover calc(var(--re) + 35vh); }

  /* Barras del índice */
  .fx-scroll .sfx[data-fx="bars"] .fill { transform-origin: 0 50%; animation: sfx-scale-x both var(--sfx-ease); animation-timeline: --sfx-group; animation-range: cover calc(var(--rs) + var(--i, 0) * 6vh) cover calc(var(--re) + var(--i, 0) * 6vh); }

  /* Tarjetas: cortina + zoom (en el carrusel móvil quedan visibles: es su propia caja de scroll) */
  .fx-scroll .cards > a.sfx { view-timeline: --sfx-card block; }
  .fx-scroll .cards > a.sfx > div:first-child { animation: sfx-curtain both var(--sfx-ease); animation-timeline: --sfx-card; animation-range: cover calc(var(--rs) + var(--i, 0) * 4vh) cover calc(var(--re) + var(--i, 0) * 4vh); }
  .fx-scroll .cards > a.sfx > div:first-child img,
  .fx-scroll .cards > a.sfx > div:first-child video { animation: sfx-zoom both var(--sfx-ease); animation-timeline: --sfx-card; animation-range: cover var(--rs) cover calc(var(--re) + 25vh); }
  .fx-scroll .cards > a.sfx > div:not(:first-child) { animation: sfx-up both var(--sfx-ease); animation-timeline: --sfx-card; animation-range: cover calc(var(--rs) + 20vh + var(--i, 0) * 4vh) cover calc(var(--re) + 20vh + var(--i, 0) * 4vh); }
}

/* ── Hero y nav por scroll ──
   Sin intro de carga: aparecen quietos y se desarman con el scroll. scrub.js escribe --hp
   (0 → 1, avance de la pista del hero). Todo !important porque reemplaza la intro de entrada. */
@supports (animation-timeline: view()) and (overflow-x: clip) {
  .js [data-fx="nav"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-screen-label="Hero"] > video { transform: scale(calc(1 + var(--hp, 0) * .12)) !important; filter: none !important; transition: none !important; }
  .js [data-screen-label="Hero"] [data-fx="label"] > .lb { display: inline-block; opacity: 1 !important; transition: none !important;
    clip-path: inset(-30% calc(-10% + clamp(0, var(--hp, 0) * 6, 1) * 110%) -30% 0) !important; }
  .js [data-screen-label="Hero"] [data-fx="chars"] .ch { --q: clamp(0, (var(--hp, 0) - .04 - var(--i, 0) * .012) * 6, 1);
    opacity: calc(1 - var(--q)) !important; filter: blur(calc(var(--q) * 16px)) !important;
    transform: translateY(calc(var(--q) * -.35em)) !important; transition: none !important; }
  .js [data-screen-label="Hero"] .split .ln-i { --q: clamp(0, (var(--hp, 0) - .1 - var(--i, 0) * .05) * 6, 1);
    transform: translateY(calc(var(--q) * 130%)) !important; transition: none !important; }
  .js [data-screen-label="Hero"] [data-fx="up"] { opacity: calc(1 - clamp(0, var(--hp, 0) * 7, 1)) !important;
    transform: translateY(calc(clamp(0, var(--hp, 0) * 7, 1) * 20px)) !important; transition: none !important; }
}

/* ── Interacción ───────────────────────────────────── */
.tap, .nav-cta { position: relative; }
.tap::after, .nav-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--lux); }
.cards [style*="border-radius: 50%"] { transition: background-color .6s var(--lux), border-color .6s var(--lux), color .6s var(--lux); }
@media (hover: hover) {
  .tap:hover::after, .nav-cta:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .js .cards > a.is-in:hover > div:first-child img, .cards > a:hover > div:first-child img,
  .js .cards > a.is-in:hover > div:first-child video, .cards > a:hover > div:first-child video { transform: scale(1.06); transition: transform 1.4s var(--lux); transition-delay: 0s; }
  .cards > a:hover [style*="border-radius: 50%"] { background-color: var(--gold) !important; border-color: var(--gold) !important; color: #050505 !important; }
}

/* Filete de progreso de lectura */
.o3-progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 60; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(184, 168, 138, 0), #B8A88A 40%, #F2EFE8); }

/* Barra flotante (clon del nav) al subir */
.o3-bar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 50 !important; padding-top: 16px !important; padding-bottom: 16px !important; background: rgba(5, 5, 5, .58); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid rgba(184, 168, 138, .16); transform: translateY(-102%); transition: transform .9s var(--lux); }
.o3-bar.is-on { transform: none; }

/* Grano de película (solo escritorio) */
@media (hover: hover) and (pointer: fine) {
  body::after { content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .07; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
}

/* ── Modal de agendamiento ─────────────────────────── */
html.o3-lock, html.o3-lock body { overflow: hidden; }
.o3-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .9s; }
.o3-modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.o3-modal__veil { position: absolute; inset: 0; background: rgba(5, 5, 5, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .8s var(--lux); }
.o3-modal.is-open .o3-modal__veil { opacity: 1; }
.o3-modal__box { position: relative; width: min(700px, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto; background: #FFFFFF; color: #111111; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--lux); }
.o3-modal.is-open .o3-modal__box { clip-path: inset(0); }
.o3-modal__box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--lux) .35s; }
.o3-modal.is-open .o3-modal__box::before { transform: none; }
.o3-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 0 24px; font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .3em; color: #706E69; }
.o3-modal__close { position: relative; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; transition: transform .6s var(--lux); }
.o3-modal__close::before, .o3-modal__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: #111111; transition: background-color .4s; }
.o3-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.o3-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.o3-modal__close:hover { transform: rotate(90deg); }
.o3-modal__close:hover::before, .o3-modal__close:hover::after { background: var(--gold); }
.o3-modal__frame { position: relative; padding: 8px 18px 8px; min-height: 200px; }
.o3-modal__frame iframe { display: block; width: 100%; height: 810px; border: 0; opacity: 0; transition: opacity .8s ease; }
.o3-modal.is-loaded .o3-modal__frame iframe { opacity: 1; }
.o3-modal__loading { position: absolute; top: 48px; left: 24px; right: 24px; font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .3em; color: #A6A39D; }
.o3-modal__loading::after { content: ""; display: block; margin-top: 14px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: o3-load 1.4s var(--lux) infinite; }
.o3-modal.is-loaded .o3-modal__loading { display: none; }
@keyframes o3-load { from { transform: translateX(-60%); opacity: .2; } 50% { opacity: 1; } to { transform: translateX(60%); opacity: .2; } }
@media (max-width: 640px) {
  .o3-modal { padding: 0; align-items: flex-end; }
  .o3-modal__box { width: 100%; max-height: 94dvh; -webkit-overflow-scrolling: touch; }
  .o3-modal__frame { padding: 4px 8px; }
  .o3-modal__frame iframe { height: 900px; }
}

/* ── Accesibilidad y failsafe ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .o3-bar, .o3-modal, .o3-modal__veil, .o3-modal__box, .o3-modal__box::before { transition: none !important; }
  .o3-modal__loading::after { animation: none; }
}
@keyframes o3-show { to { opacity: 1; transform: none; filter: none; clip-path: none; } }
.js:not(.fx-ready) [data-fx],
.js:not(.fx-ready) [data-fx] > *,
.js:not(.fx-ready) [data-fx="rows"] > * > *,
.js:not(.fx-ready) .os-row > *,
.js:not(.fx-ready) .cards > a > div,
.js:not(.fx-ready) .cards img,
.js:not(.fx-ready) .cards video,
.js:not(.fx-ready) [data-screen-label="Hero"] > video,
.js:not(.fx-ready) [data-screen-label="Hero"] > img { animation: o3-show .6s ease 4s forwards; }

/* ── Parallax (sin uso desde que El valor es video por scroll; se mantiene por si se reactiva) ── */
[data-parallax] > img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.35)) !important; will-change: transform; }
[data-parallax] > div:last-child { transform: translate3d(0, var(--ty, 0px), 0); will-change: transform; }