/* La vitrina pública de LHM Contratos y su recorrido inmersivo (Hito 6, 2026-11-02).
 *
 * Paleta de la marca: azul noche #0B192C (fondo), azul eléctrico #008DDA (halos, filetes, foco) y oro #D4AF37
 * (acentos SOBRE OSCURO: sobre blanco el oro da 2,1:1 y no se usa para texto). Inter para el texto.
 * La profundidad es CSS 3D (perspective + translateZ) y la mueve lhm-vitrina-contratos.js con el puntero y el
 * desplazamiento. 🔴 Con `prefers-reduced-motion: reduce` nada se mueve ni gira: el contenido es el mismo.
 * Sin librerías: nada que cargar de más para quien solo mira (trampa 260). */

body:has(.vc-portada), body:has(.vci) { background: #0B192C; color: #E8EEF6; }
/* 🔴 `clip` y no `hidden`: el fondo de la portada se extiende a los lados (inset -50vw) y desbordaba en horizontal;
   `hidden` haría de .lhm-vit un contenedor de desplazamiento y la cabecera dejaría de quedarse fija. */
body:has(.vc-portada) .lhm-vit, body:has(.vci) .lhm-vit { overflow-x: clip; }
body:has(.vc-portada) .lhm-vit, body:has(.vci) .lhm-vit { background: radial-gradient(1200px 700px at 80% -10%, rgba(0, 141, 218, .22), transparent 60%), #0B192C; }
body:has(.vc-portada) .lhm-vit-cab, body:has(.vci) .lhm-vit-cab { background: rgba(11, 25, 44, .82); border-bottom: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; }
body:has(.vc-portada) .lhm-vit-cab .logo-txt, body:has(.vci) .lhm-vit-cab .logo-txt { color: #fff; }
body:has(.vc-portada) footer .text-muted, body:has(.vci) footer .text-muted { color: #9FB1C7 !important; }

.vc-portada { position: relative; padding: clamp(2rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); overflow: visible; }
.vc-portada-fondo { position: absolute; inset: -2rem -50vw; pointer-events: none; overflow: hidden; z-index: 0; }
.vc-halo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.vc-halo-1 { width: 520px; height: 520px; background: #008DDA; top: -160px; right: 8%; }
.vc-halo-2 { width: 380px; height: 380px; background: #D4AF37; opacity: .18; bottom: -160px; left: 12%; }
.vc-rejilla { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.vc-antetitulo { color: #9FB1C7; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.vc-filete { display: inline-block; width: 36px; height: 2px; background: linear-gradient(90deg, #D4AF37, #008DDA); }
.vc-titulo { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); line-height: 1.08; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.vc-oro { background: linear-gradient(90deg, #D4AF37, #F3D77A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-sub { color: #C3D0E0; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); max-width: 40rem; margin-top: 1rem; }
.vc-nota { color: #9FB1C7; font-size: .85rem; }
.vc-btn-oro { background: #D4AF37; color: #0B192C; border: 0; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(212, 175, 55, .6); }
.vc-btn-oro:hover, .vc-btn-oro:focus-visible { background: #E2C25A; color: #0B192C; }
.vc-btn-claro { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.vc-btn-claro:hover, .vc-btn-claro:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }
.vc-portada a:focus-visible, .vci a:focus-visible, .vci button:focus-visible { outline: 3px solid #008DDA; outline-offset: 3px; }

/* La escena 3D de la portada: tres capturas en perspectiva y fichas que flotan delante. */
.vc-escena { position: relative; height: clamp(300px, 34vw, 460px); perspective: 1400px; }
/* 🔴 SIN `transform-style: preserve-3d`: con él las fichas y las capturas comparten el espacio 3D y el plano girado de
   una captura CORTA la ficha que tiene delante (se vio en la captura). Así cada una conserva su perspectiva y se apilan
   por z-index. */
.vc-capa { position: absolute; margin: 0; width: 78%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 141, 218, .15);
  transition: transform .25s ease-out; will-change: transform; background: #0F2236; }
.vc-capa img { display: block; width: 100%; height: auto; }
.vc-capa-1 { left: 0; top: 18%; transform: rotateY(-18deg) rotateX(6deg) translateZ(40px); z-index: 3; }
.vc-capa-2 { left: 14%; top: 6%; transform: rotateY(-18deg) rotateX(6deg) translateZ(0); z-index: 2; opacity: .92; }
.vc-capa-3 { left: 26%; top: -4%; transform: rotateY(-18deg) rotateX(6deg) translateZ(-40px); z-index: 1; opacity: .75; }
.vc-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 999px;
  background: rgba(11, 25, 44, .86); border: 1px solid rgba(212, 175, 55, .55); color: #fff; font-size: .8rem; font-weight: 500;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); backdrop-filter: blur(6px); transition: transform .25s ease-out; white-space: nowrap;
  }
.vc-chip i { color: #D4AF37; font-size: 1rem; }
.vc-chip-a { left: -2%; top: 4%; } .vc-chip-b { left: -6%; top: 66%; } .vc-chip-c { right: 6%; bottom: -4%; }

.vc-indice { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0 2rem; position: relative; z-index: 2; }
.vc-indice a { color: #C3D0E0; text-decoration: none; font-size: .85rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.vc-indice a:hover, .vc-indice a:focus-visible { border-color: #008DDA; color: #fff; }

.vc-capitulo { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid rgba(255,255,255,.06); position: relative; }
.vc-num { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #D4AF37; font-size: .9rem; letter-spacing: .1em; }
.vc-h2 { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -.01em; margin: .4rem 0 .8rem; }
.vc-icono { color: #008DDA; }
.vc-frase { color: #C3D0E0; font-size: 1.08rem; max-width: 46rem; }
.vc-puntos { list-style: none; padding: 0; margin: 1rem 0; }
.vc-puntos li { color: #DCE5F0; padding: .45rem 0 .45rem 1.6rem; position: relative; border-bottom: 1px dashed rgba(255,255,255,.08); }
.vc-puntos li::before { content: ''; position: absolute; left: 0; top: .95rem; width: .7rem; height: 2px; background: #D4AF37; }
.vc-prueba { color: #9FB1C7; font-size: .85rem; } .vc-prueba code, .vc-garantia code { color: #7FC8F0; background: rgba(0,141,218,.12); padding: .1rem .35rem; border-radius: 4px; }

/* El marco de cada captura: entra girando (data-vc-revelar → .vc-visible) y se inclina con el puntero. */
.vc-marco { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0F2236;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,141,218,.18); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease; will-change: transform; }
/* 🔴 Lo oculto-hasta-entrar solo con JavaScript activo (`.vc-js` en <html>): sin él, al imprimir o en una captura de
   página completa, los capítulos se quedaban invisibles. */
.vc-js .vc-capitulo:not(.vc-visible) .vc-marco { opacity: 0; transform: perspective(1400px) rotateX(14deg) rotateY(-10deg) translateY(30px) scale(.96); }
.vc-js .vc-capitulo.vc-par:not(.vc-visible) .vc-marco { transform: perspective(1400px) rotateX(14deg) rotateY(10deg) translateY(30px) scale(.96); }
.vc-marco img { display: block; width: 100%; height: auto; }

.vc-garantias { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid rgba(255,255,255,.06); }
.vc-garantia { height: 100%; padding: 1.4rem; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1); transition: transform .3s ease, border-color .3s ease; }
.vc-garantia:hover { border-color: rgba(212,175,55,.5); }
.vc-garantia i { font-size: 1.8rem; color: #D4AF37; }
.vc-garantia h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin: .6rem 0 .4rem; }
.vc-garantia p { color: #C3D0E0; font-size: .92rem; }
.vc-cierre { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid rgba(255,255,255,.06); }

[data-vc-revelar] { transition: opacity .8s ease, transform .8s ease; }
.vc-js [data-vc-revelar]:not(.vc-visible) { opacity: 0; transform: translateY(24px); }

/* ── El recorrido inmersivo ─────────────────────────────────────────────────────────────────────────────────────── */
.vci { position: relative; }
.vci-escena { min-height: calc(100vh - 80px); display: flex; align-items: center; position: relative; padding: 3rem 0; scroll-margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,.06); }
.vci-portada { border-top: 0; }
.vci-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: 100%; }
.vci-texto { position: relative; z-index: 2; max-width: 46rem; }
.vci-ancho { max-width: none; width: 100%; }
.vci-ayuda { color: #9FB1C7; margin-top: 2rem; font-size: .9rem; }
.vci-escenario { position: relative; height: clamp(300px, 40vw, 520px); perspective: 1400px; }
.vci-pantalla { position: absolute; inset: 6% 4% 10% 0; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0F2236;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,141,218,.18); transform: rotateY(-14deg) rotateX(8deg); transition: transform .25s ease-out; }
.vci-pantalla img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.vci-ficha { position: absolute; z-index: 4; max-width: 18rem; padding: .7rem .9rem; border-radius: 12px; font-size: .85rem; line-height: 1.35;
  background: rgba(11,25,44,.92); color: #fff; border: 1px solid rgba(212,175,55,.5); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); backdrop-filter: blur(6px);
  transition: transform .25s ease-out; }
.vci-ficha-0 { right: -2%; top: 2%; } .vci-ficha-1 { left: -4%; top: 44%; border-color: rgba(0,141,218,.6); } .vci-ficha-2 { right: 6%; bottom: 0; }
.vc-js .vci-escena:not(.vc-visible) .vci-pantalla { transform: rotateY(-30deg) rotateX(18deg) translateZ(-120px); opacity: .2; }
.vc-js .vci-escena:not(.vc-visible) .vci-ficha { opacity: 0; transform: translateZ(-80px); }
.vci-escena .vci-pantalla, .vci-escena .vci-ficha { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.vci-final { justify-content: center; }
.vci-puntos { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 40; }
.vci-puntos a { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.vci-puntos a.activo { background: #D4AF37; box-shadow: 0 0 0 4px rgba(212,175,55,.2); }

/* El modo presentación: una escena a la vez, sin cabecera ni pie. */
body:has(.vci-diapositivas) .lhm-vit-cab, body:has(.vci-diapositivas) .lhm-vit > footer { display: none; }
body:has(.vci-diapositivas) { overflow: hidden; }
.vci-diapositivas .vci-escena { position: fixed; inset: 0; min-height: 0; padding: 4vh 6vw; border: 0; opacity: 0; visibility: hidden;
  background: radial-gradient(1200px 700px at 80% -10%, rgba(0, 141, 218, .22), transparent 60%), #0B192C; transition: opacity .5s ease, visibility .5s; }
.vci-diapositivas .vci-escena.vci-actual { opacity: 1; visibility: visible; }
.vci-controles { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; z-index: 60;
  background: rgba(11,25,44,.85); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.vci-contador { color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem; min-width: 4.5rem; text-align: center; }

@media (max-width: 991.98px) {
  .vci-grid { grid-template-columns: 1fr; }
  .vci-escenario { height: 300px; }
  .vci-ficha { position: relative; display: block; max-width: none; margin-top: .6rem; left: auto; right: auto; top: auto; bottom: auto; }
  .vci-puntos { display: none; }
  .vc-chip { display: none; }
  .vc-escena { height: 280px; }
  .vc-capa { width: 84%; } .vc-capa-2 { left: 7%; } .vc-capa-3 { left: 13%; }
}
@media print {
  .vc-js [data-vc-revelar], .vc-js .vc-marco, .vc-js .vci-pantalla, .vc-js .vci-ficha { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-capa, .vc-chip, .vc-marco, .vci-pantalla, .vci-ficha, [data-vc-revelar] { transition: none !important; transform: none !important; opacity: 1 !important; }
  .vci-escena:not(.vc-visible) .vci-pantalla, .vci-escena:not(.vc-visible) .vci-ficha { opacity: 1 !important; transform: none !important; }
  .vci-diapositivas .vci-escena { transition: none; }
}

/* ── El pitch de inversores (/conozca/inversores) ───────────────────────────────────────────────────────────────── */
/* Una serie por gráfico, en el acento del tema; texto en tinta clara, nunca en el color de la serie (dataviz). */
.vcp-heroe { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 1.25rem; }
.vcp-cifra { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); font-weight: 700; line-height: 1; color: #D4AF37; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vcp-cifra-texto { color: #E3EAF3; font-size: clamp(1rem, .95rem + .35vw, 1.25rem); max-width: 34rem; }
.vcp-fuente { color: #8EA2BA; font-size: .78rem; margin: .35rem 0 0; max-width: 72rem; }
.vcp-fuente a { color: #7FC8F0; }
.vcp-barras { width: 100%; height: auto; display: block; overflow: visible; }
.vcp-barra { fill: #D4AF37; }
.vcp-barras g:hover .vcp-barra { fill: #F3D77A; }
.vcp-eje { fill: #C3D0E0; font-size: 13px; font-family: Inter, system-ui, sans-serif; }
.vcp-valor { fill: #FFFFFF; font-size: 13px; font-weight: 600; font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.vcp-ficha { padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #C3D0E0; font-size: .9rem; }
.vcp-ficha b { display: block; color: #fff; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.vcp-lista { list-style: none; padding: 0; margin: .5rem 0; color: #C3D0E0; }
.vcp-lista li { padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.vcp-lista li b { color: #fff; }
.vcp-lista .bx { color: #008DDA; margin-right: .25rem; }
.vcp-lista a { color: #7FC8F0; }
.vcp-tabla { --bs-table-bg: transparent; --bs-table-color: #C3D0E0; font-size: .85rem; min-width: 52rem; }
.vcp-tabla th, .vcp-tabla td { border-color: rgba(255,255,255,.1); vertical-align: middle; }
.vcp-tabla thead th { color: #9FB1C7; font-weight: 600; font-size: .78rem; }
.vcp-tabla tbody th { color: #fff; font-weight: 500; }
.vcp-nuestro { background: rgba(212,175,55,.10) !important; color: #fff !important; }
.vcp-nuestro .bx { color: #D4AF37; }
.vcp-nuestro code { color: #7FC8F0; background: rgba(0,141,218,.12); padding: .05rem .3rem; border-radius: 4px; }
.vcp-nd { color: #8EA2BA !important; }
.vci-diapositivas.vcp .vci-escena { overflow-y: auto; }
.vcp-fuente code { color: #7FC8F0; background: rgba(0,141,218,.12); padding: .05rem .3rem; border-radius: 4px; }
.vcp .vci-texto .row > [class*="col-"] { min-width: 0; }
@media (max-width: 576px) { .vcp-eje, .vcp-valor { font-size: 19px; } }