/* Design X AI · capa cinematográfica (v1). Compartida por todas las páginas.
   Todo lo animado vive detrás de html.cine (lo pone cine.js) y se apaga con prefers-reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.nav-shell { view-transition-name: dxai-header; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Revelados: más profundidad que el original (escala + desenfoque en escritorio) */
html.cine .reveal { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay: var(--cine-d, 0ms); transform: translateY(26px) scale(.985); }
html.cine.cine-desk .reveal:not(.visible) { filter: blur(6px); }
html.cine .reveal.visible { transform: none; filter: none; }

/* ---------- Hero oscuro con video (solo home) ---------- */
.hero.cine-dark { position: relative; isolation: isolate; color: #f5f7ff; background: #04060d; }
.cine-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; contain: strict; background: #04060d url(/assets/cine/hero-poster.webp) center/cover no-repeat; }
.cine-hero-grad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scale: 1.45; background:
  radial-gradient(40% 40% at 20% 30%, rgba(0,188,212,.22), transparent 70%),
  radial-gradient(35% 35% at 80% 60%, rgba(108,43,217,.25), transparent 70%),
  radial-gradient(30% 30% at 50% 90%, rgba(21,94,239,.18), transparent 70%);
  animation: cineDrift 18s ease-in-out infinite alternate; will-change: transform; }
@keyframes cineDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg); } 100% { transform: translate3d(3%, 2%, 0) rotate(8deg); } }
.cine-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.cine-hero-video.is-playing { opacity: .9; }
.cine-hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,6,13,.88) 0%, rgba(4,6,13,.55) 48%, rgba(4,6,13,.25) 100%), linear-gradient(0deg, rgba(4,6,13,.9) 0%, transparent 30%); }
.hero.cine-dark h1 { color: #fff; }
.hero.cine-dark h1 em { background: linear-gradient(90deg, #35d6ea, #4f8bff 45%, #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.cine-dark .hero-copy { color: rgba(235,240,255,.82); }
.hero.cine-dark .eyebrow { color: #8ce8f1; }
.hero.cine-dark .hero-points span { color: rgba(235,240,255,.78); }
.hero.cine-dark .btn-primary { background: #fff; color: #06152f !important; }
.hero.cine-dark .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hero.cine-dark .btn-secondary:hover { background: rgba(255,255,255,.16); }
.hero.cine-dark .product-window { box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }

/* Titular palabra por palabra (las palabras siguen siendo texto real en el HTML) */
.cine-w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px); animation: cineWord .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 55ms + 80ms); }
@keyframes cineWord { to { opacity: 1; transform: none; filter: none; } }
h1 em .cine-w { background: inherit; -webkit-background-clip: text; background-clip: text; }

/* ---------- Casos: historia con scroll ---------- */
@media (min-width: 981px) {
  html.cine .cine-story .case { overflow: visible; align-items: start; }
  html.cine .cine-story .case-image { position: sticky; top: 92px; align-self: start; min-height: 0; height: min(600px, calc(100vh - 120px)); border-radius: 34px; overflow: hidden; }
}
html.cine .cine-story .case-image img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1) .15s; }
html.cine .cine-story .case.visible .case-image img { clip-path: inset(0 0 0% 0); }
.cine-story-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--cyan, #00bcd4), var(--blue, #155eef), var(--violet, #6c2bd9)); z-index: 60; pointer-events: none; }

/* Parallax: la imagen se mueve dentro de su marco */
html.cine [data-cine-parallax] { will-change: transform; }

/* ---------- Tarjetas de precio ---------- */
.price-card, .wf-card, .mk-card, .investment-card, .mod { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .price-card:hover, .wf-card:hover, .mk-card:hover, .investment-card:hover, .mod:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(19,27,45,.14); border-color: rgba(21,94,239,.35); }
  html.cine .price-card, html.cine .wf-card, html.cine .mk-card { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(21,94,239,.07), transparent 60%); }
}
.cine-count { font-variant-numeric: tabular-nums; }

/* ---------- Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cine-hero-grad { animation: none; }
  .cine-hero-video { display: none; }
  .cine-w { animation: none; opacity: 1; transform: none; filter: none; }
  html.cine .reveal, html.cine .cine-story .case-image img { transition: none; transform: none; filter: none; clip-path: none; }
  .price-card, .wf-card, .mk-card, .investment-card, .mod { transition: none; }
  .price-card:hover, .wf-card:hover, .mk-card:hover, .investment-card:hover, .mod:hover { transform: none; }
}
/* Celular: sin desenfoques ni efectos caros */
@media (max-width: 760px) {
  .cine-w { filter: none; }
  .cine-hero-grad { animation: none; will-change: auto; scale: 1.2; }
  .cine-hero-veil { background: linear-gradient(180deg, rgba(4,6,13,.72) 0%, rgba(4,6,13,.6) 60%, rgba(4,6,13,.9) 100%); }
}

/* =====================================================================
   v2 · Tema oscuro cinematográfico para TODO el sitio
   (los colores por componente se generan en /assets/cine/theme/*.css y
   <style id="cine-page-theme"> con tools/build_cine.py; aquí van las bases)
   ===================================================================== */
html.cine-theme { color-scheme: dark; background: #05070e; }
html.cine-theme body { background-color: #070a14; }
html.cine-theme ::selection { background: rgba(53,214,234,.35); color: #fff; }
html.cine-theme a:focus-visible, html.cine-theme button:focus-visible, html.cine-theme summary:focus-visible,
html.cine-theme input:focus-visible, html.cine-theme select:focus-visible, html.cine-theme textarea:focus-visible { outline: 2px solid #35d6ea; outline-offset: 3px; }

/* Formularios legibles en oscuro */
html.cine-theme input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
html.cine-theme select, html.cine-theme textarea { background-color: #0b1120; color: #eef1f8; border-color: rgba(255,255,255,.16); }
html.cine-theme input::placeholder, html.cine-theme textarea::placeholder { color: #8d95a7; opacity: 1; }
html.cine-theme select option { background: #0b1120; color: #eef1f8; }
html.cine-theme label { color: inherit; }

/* Tablas */
html.cine-theme table { color: #dfe4ee; border-color: rgba(255,255,255,.12); }
html.cine-theme th { color: #f2f5fb; }
html.cine-theme th, html.cine-theme td { border-color: rgba(255,255,255,.1); }
html.cine-theme tbody tr:nth-child(even) td { background-color: rgba(255,255,255,.025); }

/* FAQ */
html.cine-theme details { border-color: rgba(255,255,255,.1); }
html.cine-theme summary { color: #f2f5fb; }
html.cine-theme details[open] summary { color: #fff; }

/* Cuerpo de artículos / legales */
html.cine-theme .article-copy, html.cine-theme .legal-content, html.cine-theme .legal-body { color: #cfd5e1; }
html.cine-theme .article-copy p, html.cine-theme .article-copy li, html.cine-theme .legal-content p, html.cine-theme .legal-content li { color: #c9d0dc; }
html.cine-theme .article-copy a, html.cine-theme .legal-content a { color: #7fb0ff; }
html.cine-theme .article-copy strong, html.cine-theme .legal-content strong { color: #f2f5fb; }
html.cine-theme code { background: rgba(255,255,255,.07); color: #e6ebf5; }

/* Encabezado oscuro con vidrio, consistente en todas las páginas */
html.cine-theme .nav-shell, html.cine-theme body > header:first-of-type { background-color: rgba(6,9,18,.78); border-bottom-color: rgba(255,255,255,.07); }
html.cine-theme footer { border-top-color: rgba(255,255,255,.08); }

/* Gradiente de texto en titulares (se mantiene vivo en oscuro) */
html.cine-theme h1 em, html.cine-theme h2 em { -webkit-text-fill-color: transparent; }
.cine-h1 .cine-clip .cine-w { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Héroe por página: imagen IA + gradiente + velo ---------- */
.cine-hero { position: relative; isolation: isolate; overflow: hidden; }
.cine-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; contain: strict; background: #05070e; pointer-events: none; }
.cine-hero-media picture, .cine-hero-media img { display: block; width: 100%; height: 100%; }
.cine-hero-media img { object-fit: cover; object-position: 70% 50%; opacity: .62; transform: scale(1.04); }
.cine-hero-media .cine-hero-grad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scale: 1.4; mix-blend-mode: screen; opacity: .7;
  background: radial-gradient(40% 50% at 20% 30%, rgba(53,214,234,.18), transparent 70%), radial-gradient(35% 45% at 80% 70%, rgba(155,107,255,.18), transparent 70%);
  animation: cineDrift 22s ease-in-out infinite alternate; will-change: transform; }
.cine-hero-media .cine-hero-veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,14,.92) 0%, rgba(5,7,14,.72) 45%, rgba(5,7,14,.35) 100%), linear-gradient(0deg, #070a14 0%, transparent 28%); }
.cine-hero h1, .cine-hero .hero-copy, .cine-hero .hero-lead, .cine-hero p { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.cine-hero .hero-visual, .cine-hero .category-visual, .cine-hero figure { position: relative; }

/* ---------- Banda visual entre secciones ---------- */
.cine-band { max-width: 1180px; width: calc(100% - 40px); margin: clamp(28px, 6vw, 72px) auto; border-radius: 28px; overflow: hidden; position: relative;
  aspect-ratio: 21 / 9; background: #0b1120; box-shadow: 0 40px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); }
.cine-band picture, .cine-band img { display: block; width: 100%; height: 100%; }
.cine-band img { object-fit: cover; transform: scale(1.12); }
.cine-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,20,.15), rgba(7,10,20,.05) 50%, rgba(7,10,20,.55)); pointer-events: none; }

/* Tarjetas: elevación y foco de cursor genéricos */
@media (hover: hover) and (pointer: fine) {
  html.cine-theme [class*="-card"]:not(.cine-band), html.cine-theme .module, html.cine-theme article.item {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
  html.cine-theme [class*="-card"]:not(.price-card):hover, html.cine-theme .module:hover, html.cine-theme article.item:hover {
    transform: translateY(-4px); box-shadow: 0 26px 70px rgba(0,0,0,.45); border-color: rgba(53,214,234,.28); }
}

@media (max-width: 760px) {
  .cine-hero-media .cine-hero-grad { animation: none; will-change: auto; }
  .cine-hero-media img { opacity: .42; object-position: 60% 50%; }
  .cine-hero-media .cine-hero-veil { background: linear-gradient(180deg, rgba(5,7,14,.78), rgba(5,7,14,.7) 60%, #070a14); }
  .cine-band { aspect-ratio: 16 / 9; border-radius: 20px; width: calc(100% - 28px); }
  .cine-band img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero-media .cine-hero-grad { animation: none; }
  html.cine-theme [class*="-card"], html.cine-theme .module, html.cine-theme article.item { transition: none; transform: none !important; }
}

/* Celular: render diferido de secciones fuera de pantalla (menos trabajo de estilo/layout al cargar) */
@media (max-width: 760px) {
  html.cine-theme main > section:not(:first-of-type), html.cine-theme main > .cine-band, html.cine-theme body > footer {
    content-visibility: auto; contain-intrinsic-size: auto 900px; }
}

/* =====================================================================
   v4 · Variante CLARA (html.cine-light): fondos claros, texto oscuro,
   mismo movimiento. Las imágenes IA (oscuras) quedan como tarjetas/bandas
   o detrás de un velo claro para que el titular se lea.
   ===================================================================== */
html.cine-light { color-scheme: light; }
html.cine-light .cine-hero h1, html.cine-light .cine-hero p, html.cine-light .cine-hero .hero-copy, html.cine-light .cine-hero .hero-lead { text-shadow: none; }
html.cine-light .cine-hero-media, html.cine-light .cine-hero-bg { background-color: #f5f5f7; }
html.cine-light .cine-hero-media img { opacity: .30; filter: saturate(1.1); }
html.cine-light .cine-hero-media .cine-hero-grad { mix-blend-mode: normal; opacity: .55;
  background: radial-gradient(40% 50% at 18% 28%, rgba(0,188,212,.16), transparent 70%), radial-gradient(35% 45% at 82% 70%, rgba(108,43,217,.13), transparent 70%); }
html.cine-light .cine-hero-media .cine-hero-veil {
  background: linear-gradient(90deg, rgba(245,245,247,.97) 0%, rgba(245,245,247,.86) 45%, rgba(245,245,247,.5) 100%), linear-gradient(0deg, #f5f5f7 0%, transparent 30%); }
/* Home: video/póster detrás de velo claro */
html.cine-light .hero.cine-home .cine-hero-bg { background: #f5f5f7 url(/assets/cine/hero-poster.webp) center/cover no-repeat; }
html.cine-light .hero.cine-home .cine-hero-video.is-playing { opacity: .4; }
html.cine-light .hero.cine-home .cine-hero-grad { opacity: .6; }
html.cine-light .hero.cine-home .cine-hero-veil {
  background: linear-gradient(90deg, rgba(245,245,247,.95) 0%, rgba(245,245,247,.82) 50%, rgba(245,245,247,.55) 100%), linear-gradient(0deg, #f5f5f7 0%, transparent 25%); }
/* Banda: tarjeta de imagen sobre fondo claro */
html.cine-light .cine-band { background: #e9ebf0; box-shadow: 0 30px 80px rgba(19,27,45,.18), 0 0 0 1px rgba(29,29,31,.06); }
html.cine-light .cine-band::after { background: linear-gradient(180deg, transparent 60%, rgba(7,10,20,.25)); }
@media (hover: hover) and (pointer: fine) {
  html.cine-light [class*="-card"]:not(.cine-band), html.cine-light .module, html.cine-light article.item {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
  html.cine-light [class*="-card"]:not(.price-card):hover, html.cine-light .module:hover, html.cine-light article.item:hover {
    transform: translateY(-4px); box-shadow: 0 24px 60px rgba(19,27,45,.12); border-color: rgba(21,94,239,.28); }
}
@media (max-width: 760px) {
  html.cine-light .cine-hero-media img { opacity: .22; }
  html.cine-light .cine-hero-media .cine-hero-veil, html.cine-light .hero.cine-home .cine-hero-veil { background: linear-gradient(180deg, rgba(245,245,247,.9), rgba(245,245,247,.84) 60%, #f5f5f7); }
  html.cine-light main > section:not(:first-of-type), html.cine-light main > .cine-band, html.cine-light body > footer {
    content-visibility: auto; contain-intrinsic-size: auto 900px; }
}
@media (prefers-reduced-motion: reduce) {
  html.cine-light [class*="-card"], html.cine-light .module, html.cine-light article.item { transition: none; transform: none !important; }
}