/* ============================================================
   IMMERSIVE VR-MEDIA — Hoja de estilos principal
   Sitio HTML estático — SEO 2026 + AEO + Performance
   Clases nombradas con palabras clave (regla SEO-friendly)
   ============================================================ */

/* ---------- Fuentes self-hosted (máx. 2 familias) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fuentes/space-grotesk-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fuentes/instrument-serif-regular-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fuentes/instrument-serif-italic-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --cyan-vr: #29abe2;
  --cyan-vr-claro: #7fd4ff;
  --cyan-vr-tenue: rgba(41, 171, 226, .14);
  --tinta-oscura: #07070b;
  --tinta-oscura-2: #0b0d14;
  --linea-sutil: rgba(255, 255, 255, .09);
  --texto-tenue: rgba(255, 255, 255, .62);
  --texto-mas-tenue: rgba(255, 255, 255, .45);
  --fuente-principal: 'Space Grotesk', system-ui, sans-serif;
  --fuente-serif: 'Instrument Serif', Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--tinta-oscura); color: #fff;
  font-family: var(--fuente-principal); font-weight: 300;
  line-height: 1.6; overflow-x: hidden;
}
img, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: var(--fuente-serif); font-style: italic; font-weight: 400; }

/* ---------- Accesibilidad ---------- */
.enlace-saltar-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan-vr); color: #04121c; font-weight: 500;
  padding: .9rem 1.4rem; border-radius: 0 0 .8rem 0;
}
.enlace-saltar-contenido:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cyan-vr); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Tipografía ---------- */
.titulo-hero-inicio {
  font-weight: 500; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem); text-transform: uppercase;
}
.titulo-hero-inicio .acento-cyan { color: var(--cyan-vr); }
.titulo-hero-inicio .frase-serif {
  display: block; text-transform: none;
  font-family: var(--fuente-serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 4.2rem); letter-spacing: 0;
}
.titulo-pagina {
  font-weight: 500; font-size: clamp(2.3rem, 5.4vw, 4.3rem);
  line-height: 1.04; letter-spacing: -.02em;
}
.titulo-pagina em, .titulo-seccion em {
  background: linear-gradient(120deg, var(--cyan-vr-claro), var(--cyan-vr) 55%, #1668b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titulo-seccion {
  font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.1; letter-spacing: -.015em; margin-bottom: 1rem;
}
.subtitulo-seccion {
  font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25; margin: 2.2rem 0 .8rem;
}
.texto-destacado { font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.75; color: var(--texto-tenue); }
.texto-cuerpo { font-size: 1rem; line-height: 1.8; color: var(--texto-tenue); }
.texto-destacado strong, .texto-cuerpo strong { color: #fff; font-weight: 500; }
.etiqueta-mono {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 400;
  color: var(--cyan-vr); display: inline-flex; align-items: center; gap: .6rem;
}
.etiqueta-mono::before { content: ""; width: 2.2rem; height: 1px; background: var(--cyan-vr); opacity: .7; }
.etiqueta-mono--tenue { color: var(--texto-mas-tenue); }
.etiqueta-mono--tenue::before { background: var(--texto-mas-tenue); }

/* ---------- Layout ---------- */
.seccion-contenido { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; overflow: hidden; }
.seccion-contenido--compacta { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.contenedor-seccion { width: min(1200px, 92vw); margin: 0 auto; position: relative; z-index: 2; }
.contenedor-seccion--estrecho { width: min(880px, 92vw); margin: 0 auto; position: relative; z-index: 2; }

/* ---------- Cabecera y navegación ---------- */
.cabecera-sitio {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  background: transparent; border-bottom: 1px solid transparent;
}
.cabecera-sitio.cabecera-con-scroll {
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  background: rgba(7, 7, 11, .72); border-bottom-color: var(--linea-sutil);
}
.cabecera-interna {
  width: min(1360px, 94vw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0;
}
.logo-sitio { display: inline-flex; align-items: center; gap: .8rem; }
.logo-sitio img { width: 2.6rem; height: 2.6rem; transition: transform .45s cubic-bezier(.22,1,.36,1); transform-origin: center; position: relative; z-index: 2; }
.logo-sitio:hover img { transform: scale(1.35); }
.logo-sitio .nombre-marca { font-weight: 500; letter-spacing: .14em; font-size: .92rem; text-transform: uppercase; }
.logo-sitio .nombre-marca small { display: block; font-size: .56rem; letter-spacing: .5em; color: var(--cyan-vr); font-weight: 400; }

.navegacion-principal > ul { display: flex; align-items: center; gap: 1.9rem; }
.navegacion-principal a {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  color: rgba(255,255,255,.78); padding: .8rem 0; display: inline-block;
  border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease;
}
.navegacion-principal a:hover, .navegacion-principal a[aria-current="page"] { color: var(--cyan-vr); border-bottom-color: var(--cyan-vr); }
.navegacion-principal .elemento-con-submenu { position: relative; }
.navegacion-principal .submenu-soluciones, .navegacion-principal .submenu-sectores {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, .6rem);
  min-width: 19rem; padding: .9rem; border-radius: 1rem;
  background: rgba(11, 13, 20, .97); border: 1px solid var(--linea-sutil);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.navegacion-principal .elemento-con-submenu:hover .submenu-soluciones,
.navegacion-principal .elemento-con-submenu:hover .submenu-sectores,
.navegacion-principal .elemento-con-submenu:focus-within .submenu-soluciones,
.navegacion-principal .elemento-con-submenu:focus-within .submenu-sectores {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.navegacion-principal .submenu-soluciones a, .navegacion-principal .submenu-sectores a {
  display: block; padding: .62rem .9rem; border: 0; border-radius: .6rem;
  font-size: .72rem; letter-spacing: .14em; color: var(--texto-tenue);
}
.navegacion-principal .submenu-soluciones a:hover, .navegacion-principal .submenu-sectores a:hover {
  background: var(--cyan-vr-tenue); color: #fff;
}
.navegacion-principal .indicador-submenu { font-size: .6rem; margin-left: .35rem; color: var(--cyan-vr); }

.acciones-cabecera { display: flex; align-items: center; gap: .9rem; }
.boton-cotizar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .55rem 1.6rem; border-radius: 999px;
  background: #fff; color: #04121c; font-weight: 500;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s ease, transform .3s ease;
}
.boton-cotizar:hover { background: var(--cyan-vr); transform: translateY(-2px); }
.boton-cotizar--borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.boton-cotizar--borde:hover { background: var(--cyan-vr-tenue); color: var(--cyan-vr-claro); box-shadow: inset 0 0 0 1px var(--cyan-vr); }

.boton-menu-movil {
  display: none; align-items: center; gap: .6rem; min-height: 48px; min-width: 48px;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.boton-menu-movil .lineas-menu { width: 1.2rem; height: 2px; background: #fff; position: relative; }
.boton-menu-movil .lineas-menu::before, .boton-menu-movil .lineas-menu::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #fff;
}
.boton-menu-movil .lineas-menu::before { top: -5px; }
.boton-menu-movil .lineas-menu::after { top: 5px; }

/* ---------- Menú móvil a pantalla completa ---------- */
.menu-movil-pantalla {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(7, 7, 11, .96); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem min(8vw, 4rem) 3rem;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
  overflow-y: auto;
}
.menu-movil-pantalla.menu-abierto { opacity: 1; visibility: visible; }
.menu-movil-pantalla a.enlace-menu-movil {
  font-size: clamp(1.9rem, 6.5vw, 3rem); font-weight: 300; line-height: 1.3;
  color: rgba(255,255,255,.75); padding: .35rem 0; display: block;
  transition: color .3s ease, letter-spacing .3s ease;
}
.menu-movil-pantalla a.enlace-menu-movil:hover { color: var(--cyan-vr); letter-spacing: .03em; }
.menu-movil-pantalla .grupo-submenu-movil { margin: .4rem 0 .8rem; }
.menu-movil-pantalla .grupo-submenu-movil summary {
  font-size: clamp(1.9rem, 6.5vw, 3rem); font-weight: 300; color: rgba(255,255,255,.75);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .8rem; min-height: 48px;
}
.menu-movil-pantalla .grupo-submenu-movil summary::-webkit-details-marker { display: none; }
.menu-movil-pantalla .grupo-submenu-movil summary::after { content: "+"; color: var(--cyan-vr); font-size: 1.6rem; }
.menu-movil-pantalla .grupo-submenu-movil[open] summary::after { content: "–"; }
.menu-movil-pantalla .grupo-submenu-movil a {
  display: block; padding: .5rem 0 .5rem 1.4rem; min-height: 48px;
  color: var(--texto-tenue); font-size: 1rem; letter-spacing: .06em;
}
.menu-movil-pantalla .grupo-submenu-movil a:hover { color: var(--cyan-vr-claro); }

/* ---------- Hero de inicio ---------- */
.seccion-hero-inicio {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(7rem, 14vh, 10rem) 0 4rem; overflow: hidden;
  background:
    radial-gradient(58% 48% at 78% 26%, rgba(41,171,226,.13), transparent 70%),
    radial-gradient(42% 42% at 10% 88%, rgba(22,104,176,.10), transparent 70%),
    var(--tinta-oscura);
}
.seccion-hero-inicio .contenedor-seccion { text-align: center; }
.seccion-hero-inicio .imagen-hero-vr {
  width: min(34rem, 72vw); margin: clamp(1.5rem, 4vh, 3rem) auto 0; position: relative; z-index: 2;
  filter: drop-shadow(0 40px 90px rgba(41,171,226,.30));
  animation: flotar-objeto 7s ease-in-out infinite;
}
.anillo-orbital-hero {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: min(58rem, 130vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(41,171,226,.22); pointer-events: none; z-index: 1;
}
.anillo-orbital-hero::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan-vr); box-shadow: 0 0 18px 5px rgba(41,171,226,.8);
  animation: girar-anillo 30s linear infinite; transform-origin: 4px calc(min(29rem, 65vw));
}
.etiqueta-vertical-hero {
  position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-size: .68rem; letter-spacing: .5em; text-transform: uppercase; color: var(--texto-mas-tenue);
  white-space: nowrap; z-index: 2;
}

/* ---------- Hero de páginas internas ---------- */
.seccion-hero-pagina {
  position: relative; overflow: hidden;
  padding: clamp(8.5rem, 15vw, 12.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(58% 48% at 78% 30%, rgba(41,171,226,.12), transparent 70%),
    radial-gradient(40% 40% at 12% 85%, rgba(22,104,176,.10), transparent 70%),
    var(--tinta-oscura);
}
.seccion-hero-pagina .contenedor-seccion {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.seccion-hero-pagina .columna-objeto-3d { position: relative; display: flex; justify-content: center; align-items: center; }
.seccion-hero-pagina .columna-objeto-3d img {
  width: min(28rem, 80%); position: relative; z-index: 2;
  filter: drop-shadow(0 30px 70px rgba(41,171,226,.35));
  animation: flotar-objeto 7s ease-in-out infinite;
}
.seccion-hero-pagina .columna-objeto-3d::before {
  content: ""; position: absolute; inset: 12% 8%; z-index: 0;
  background: radial-gradient(circle, rgba(41,171,226,.22), transparent 62%);
  filter: blur(50px); animation: pulsar-brillo 5s ease-in-out infinite;
}
.anillo-orbital {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(41,171,226,.25); z-index: 1;
  animation: girar-anillo 26s linear infinite;
}
.anillo-orbital::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan-vr); box-shadow: 0 0 18px 4px rgba(41,171,226,.8);
}
.anillo-orbital--secundario { width: 96%; animation-duration: 40s; animation-direction: reverse; border-style: dashed; opacity: .5; }

@keyframes flotar-objeto { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-22px) rotate(1.4deg); } }
@keyframes pulsar-brillo { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes girar-anillo { to { transform: rotate(360deg); } }

/* ---------- Fondos interactivos ---------- */
.particulas-vr { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.particulas-vr canvas { width: 100%; height: 100%; display: block; }
.piso-reticular {
  position: absolute; left: 50%; bottom: -12%; width: 160%; height: 60%; z-index: 0;
  transform: translateX(-50%) perspective(600px) rotateX(62deg); transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(41,171,226,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,171,226,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 75%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 75%);
  animation: mover-reticula 14s linear infinite; pointer-events: none;
}
@keyframes mover-reticula { to { background-position: 0 46px, 0 0; } }
.orbe-brillante {
  position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0;
  background: radial-gradient(circle, rgba(41,171,226,.28), transparent 65%);
  pointer-events: none;
}

/* ---------- Migas de pan (breadcrumb) ---------- */
.breadcrumb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 2.2rem; }
.breadcrumb-nav li { display: inline-flex; align-items: center; gap: .55rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.breadcrumb-nav li + li::before { content: "/"; color: var(--cyan-vr); opacity: .7; }
.breadcrumb-nav a { color: var(--texto-mas-tenue); transition: color .3s ease; padding: .4rem 0; }
.breadcrumb-nav a:hover { color: var(--cyan-vr-claro); }
.breadcrumb-nav [aria-current="page"] { color: var(--cyan-vr); }

/* ---------- Bloque Respuesta Rápida (AEO) ---------- */
.respuesta-rapida-aio {
  position: relative; margin-top: 2rem; padding: 1.6rem 1.8rem 1.6rem 2.2rem;
  border-radius: 1.1rem; border: 1px solid var(--linea-sutil);
  border-left: 3px solid var(--cyan-vr);
  background: linear-gradient(120deg, rgba(41,171,226,.10), rgba(41,171,226,.03) 55%, transparent);
}
.respuesta-rapida-aio .etiqueta-respuesta {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-vr); font-weight: 400;
}
.respuesta-rapida-aio p { font-size: 1.02rem; line-height: 1.75; color: rgba(255,255,255,.78); }
.respuesta-rapida-aio p strong { color: #fff; font-weight: 500; }

.miga-actualizada {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--linea-sutil);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-mas-tenue);
}
.miga-actualizada::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px rgba(61,220,132,.8); }

/* ---------- Cintilla de tecnologías (marquee) ---------- */
.cintilla-tecnologias {
  position: relative; padding: 1.4rem 0; overflow: hidden;
  border-top: 1px solid var(--linea-sutil); border-bottom: 1px solid var(--linea-sutil);
  background: rgba(255,255,255,.015);
}
.cintilla-tecnologias .pista-cintilla { display: flex; gap: 3.2rem; width: max-content; animation: desplazar-cintilla 30s linear infinite; }
.cintilla-tecnologias span {
  font-size: .82rem; letter-spacing: .34em; text-transform: uppercase; font-weight: 400;
  color: var(--texto-mas-tenue); white-space: nowrap;
}
.cintilla-tecnologias span.acento-cyan { color: var(--cyan-vr); }
@keyframes desplazar-cintilla { to { transform: translateX(-50%); } }

/* ---------- Declaración / misión ---------- */
.declaracion-mision { position: relative; text-align: center; overflow: hidden; }
.declaracion-mision .palabra-fondo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(6rem, 22vw, 18rem); font-weight: 700; letter-spacing: -.03em;
  color: rgba(255,255,255,.025); text-transform: uppercase; pointer-events: none; user-select: none;
}
.declaracion-mision .titulo-seccion { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.declaracion-mision .texto-destacado { max-width: 46rem; margin: 1.6rem auto 0; }

/* ---------- Banda de estadísticas ---------- */
.banda-estadisticas { border-top: 1px solid var(--linea-sutil); border-bottom: 1px solid var(--linea-sutil); background: var(--tinta-oscura-2); }
.banda-estadisticas .contenedor-seccion { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.dato-estadistico { text-align: center; padding: 1rem .5rem; }
.dato-estadistico .numero-dato {
  font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff, var(--cyan-vr-claro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dato-estadistico .rotulo-dato { margin-top: .4rem; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-mas-tenue); }

/* ---------- Cuadrículas de tarjetas ---------- */
.cuadricula-tarjetas { display: grid; gap: 1.4rem; margin-top: 3rem; }
.cuadricula-tarjetas--tres { grid-template-columns: repeat(3, 1fr); }
.cuadricula-tarjetas--dos { grid-template-columns: repeat(2, 1fr); }
.cuadricula-tarjetas--cuatro { grid-template-columns: repeat(4, 1fr); }

.tarjeta-solucion-vr, .tarjeta-sector-vr, .tarjeta-caso-exito, .tarjeta-tecnologia-inmersiva,
.tarjeta-articulo-blog, .tarjeta-recurso-descargable, .tarjeta-generica-vr {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 1.3rem; border: 1px solid var(--linea-sutil);
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.tarjeta-solucion-vr:hover, .tarjeta-sector-vr:hover, .tarjeta-caso-exito:hover,
.tarjeta-tecnologia-inmersiva:hover, .tarjeta-articulo-blog:hover, .tarjeta-recurso-descargable:hover, .tarjeta-generica-vr:hover {
  transform: translateY(-8px); border-color: rgba(41,171,226,.45);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 40px rgba(41,171,226,.12);
}
.imagen-tarjeta { position: relative; aspect-ratio: 16/10; overflow: hidden; background: radial-gradient(70% 90% at 50% 20%, rgba(41,171,226,.12), transparent), var(--tinta-oscura-2); }
.imagen-tarjeta img { width: 100%; height: 100%; object-fit: contain; padding: 1.6rem; transition: transform .6s ease; }
.tarjeta-solucion-vr:hover .imagen-tarjeta img, .tarjeta-caso-exito:hover .imagen-tarjeta img,
.tarjeta-sector-vr:hover .imagen-tarjeta img, .tarjeta-tecnologia-inmersiva:hover .imagen-tarjeta img,
.tarjeta-articulo-blog:hover .imagen-tarjeta img { transform: scale(1.06) translateY(-4px); }
.cuerpo-tarjeta { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.numero-tarjeta { font-size: .72rem; letter-spacing: .3em; color: var(--cyan-vr); font-weight: 400; }
.titulo-tarjeta { font-size: 1.22rem; font-weight: 500; line-height: 1.25; }
.texto-tarjeta { font-size: .92rem; line-height: 1.65; color: var(--texto-tenue); flex: 1; }
.enlace-tarjeta {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: .5rem; min-height: 48px;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan-vr); font-weight: 400;
}
.enlace-tarjeta::after { content: "→"; transition: transform .3s ease; }
.enlace-tarjeta:hover::after { transform: translateX(5px); }
.etiqueta-sector-tarjeta {
  align-self: flex-start; padding: .3rem .8rem; border-radius: 999px;
  background: var(--cyan-vr-tenue); color: var(--cyan-vr-claro);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Pasos de proceso ---------- */
.pasos-proceso { display: grid; gap: 0; margin-top: 3rem; counter-reset: paso; }
.paso-proceso {
  position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.6rem;
  padding: 1.8rem 0; border-top: 1px solid var(--linea-sutil);
}
.paso-proceso:last-child { border-bottom: 1px solid var(--linea-sutil); }
.paso-proceso .numero-paso {
  font-size: 2.2rem; font-weight: 300; color: var(--cyan-vr); line-height: 1;
  font-family: var(--fuente-serif); font-style: italic;
}
.paso-proceso .titulo-paso { font-size: 1.15rem; font-weight: 500; margin-bottom: .4rem; }
.paso-proceso .texto-paso { color: var(--texto-tenue); font-size: .95rem; line-height: 1.7; max-width: 44rem; }

/* ---------- Línea de tiempo ---------- */
.linea-tiempo { position: relative; margin-top: 3rem; padding-left: 2rem; }
.linea-tiempo::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px; background: linear-gradient(to bottom, var(--cyan-vr), rgba(41,171,226,.05)); }
.hito-linea-tiempo { position: relative; padding: 0 0 2.2rem 1.6rem; }
.hito-linea-tiempo::before {
  content: ""; position: absolute; left: -2rem; top: .45rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan-vr); box-shadow: 0 0 14px 3px rgba(41,171,226,.55); transform: translateX(-4px);
}
.hito-linea-tiempo .anio-hito { font-size: .78rem; letter-spacing: .3em; color: var(--cyan-vr); font-weight: 400; }
.hito-linea-tiempo .titulo-hito { font-size: 1.2rem; font-weight: 500; margin: .35rem 0; }
.hito-linea-tiempo .texto-hito { color: var(--texto-tenue); font-size: .95rem; line-height: 1.7; max-width: 44rem; }

/* ---------- Tabla comparativa ---------- */
.contenedor-tabla-comparativa { overflow-x: auto; margin-top: 2.6rem; border-radius: 1.1rem; border: 1px solid var(--linea-sutil); }
.tabla-comparativa { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla-comparativa caption { text-align: left; padding: 1.1rem 1.4rem; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-vr); border-bottom: 1px solid var(--linea-sutil); }
.tabla-comparativa th, .tabla-comparativa td { padding: 1rem 1.4rem; text-align: left; font-size: .93rem; line-height: 1.6; border-bottom: 1px solid var(--linea-sutil); }
.tabla-comparativa thead th { background: rgba(41,171,226,.08); color: #fff; font-weight: 500; }
.tabla-comparativa tbody th { color: var(--cyan-vr-claro); font-weight: 400; }
.tabla-comparativa td { color: var(--texto-tenue); }
.tabla-comparativa tbody tr:last-child th, .tabla-comparativa tbody tr:last-child td { border-bottom: 0; }

/* ---------- Cita de cliente ---------- */
.cita-cliente {
  position: relative; margin-top: 3rem; padding: clamp(2rem, 5vw, 3.4rem);
  border-radius: 1.4rem; border: 1px solid var(--linea-sutil);
  background: linear-gradient(140deg, rgba(41,171,226,.09), transparent 60%);
}
.cita-cliente blockquote { font-family: var(--fuente-serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.45; color: rgba(255,255,255,.92); }
.cita-cliente figcaption { margin-top: 1.4rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-mas-tenue); }
.cita-cliente figcaption strong { color: var(--cyan-vr); font-weight: 400; display: block; margin-bottom: .2rem; }

/* ---------- FAQ (details/summary nativo) ---------- */
.faq-pagina { margin-top: 3rem; }
.faq-pagina details {
  border: 1px solid var(--linea-sutil); border-radius: 1rem; margin-bottom: .9rem;
  background: rgba(255,255,255,.02); overflow: hidden; transition: border-color .3s ease;
}
.faq-pagina details[open] { border-color: rgba(41,171,226,.4); }
.faq-pagina summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; min-height: 48px;
  font-size: 1.02rem; font-weight: 400; color: rgba(255,255,255,.9); line-height: 1.45;
}
.faq-pagina summary::-webkit-details-marker { display: none; }
.faq-pagina summary::after {
  content: "+"; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(41,171,226,.45); color: var(--cyan-vr); font-size: 1.1rem; font-weight: 300;
  transition: transform .3s ease, background .3s ease;
}
.faq-pagina details[open] summary::after { transform: rotate(45deg); background: var(--cyan-vr-tenue); }
.faq-pagina summary:hover { color: var(--cyan-vr-claro); }
.faq-pagina details p { padding: 0 1.4rem 1.3rem; color: var(--texto-tenue); font-size: .96rem; line-height: 1.75; }
.faq-pagina details a { color: var(--cyan-vr-claro); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reel / video ---------- */
.reel-video { position: relative; }
.marco-video-360 {
  position: relative; aspect-ratio: 16/9; border-radius: 1.4rem; overflow: hidden;
  border: 1px solid var(--linea-sutil); background: #000;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(41,171,226,.10);
}
.marco-video-360 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fachada-video {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: rgba(7,7,11,.35);
  transition: background .3s ease;
}
.fachada-video:hover { background: rgba(7,7,11,.15); }
.fachada-video .boton-reproducir {
  width: 5.4rem; height: 5.4rem; border-radius: 50%;
  background: rgba(41,171,226,.92); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 50px rgba(41,171,226,.5); transition: transform .3s ease;
}
.fachada-video:hover .boton-reproducir { transform: scale(1.1); }
.fachada-video .boton-reproducir svg { width: 2rem; height: 2rem; fill: #04121c; margin-left: .25rem; }

/* ---------- Logos de clientes ---------- */
.logos-clientes .cuadricula-logos {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 3rem;
  background: var(--linea-sutil); border: 1px solid var(--linea-sutil); border-radius: 1.2rem; overflow: hidden;
}
.celda-logo-cliente {
  background: var(--tinta-oscura); padding: 1.6rem 1.2rem;
  display: flex; align-items: center; justify-content: center; min-height: 6.5rem;
  transition: background .4s ease;
}
.celda-logo-cliente:hover { background: var(--tinta-oscura-2); }
.celda-logo-cliente img { max-height: 2.6rem; width: auto; filter: grayscale(1) brightness(1.6); opacity: .55; transition: filter .4s ease, opacity .4s ease; }
.celda-logo-cliente:hover img { filter: none; opacity: 1; }

/* ---------- Llamado a la acción ---------- */
.llamado-accion { position: relative; overflow: hidden; text-align: center; }
.llamado-accion .contenedor-seccion { max-width: 56rem; }
.llamado-accion .titulo-seccion { font-size: clamp(2rem, 4.8vw, 3.6rem); }
.llamado-accion .texto-destacado { max-width: 42rem; margin: 1.2rem auto 2.2rem; }
.grupo-botones-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Contenido de artículo (body) ---------- */
.articulo-contenido { max-width: 46rem; }
.articulo-contenido h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 3rem 0 1.1rem; }
.articulo-contenido h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 500; line-height: 1.3; margin: 2.2rem 0 .8rem; color: rgba(255,255,255,.94); }
.articulo-contenido p { margin-bottom: 1.15rem; font-size: 1rem; line-height: 1.8; color: var(--texto-tenue); }
.articulo-contenido p strong, .articulo-contenido li strong { color: #fff; font-weight: 500; }
.articulo-contenido a { color: var(--cyan-vr-claro); text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease; }
.articulo-contenido a:hover { color: var(--cyan-vr); }
.articulo-contenido ul, .articulo-contenido ol { margin: 0 0 1.3rem 1.3rem; }
.articulo-contenido ul { list-style: none; }
.articulo-contenido ul li { position: relative; padding-left: 1.3rem; margin-bottom: .6rem; color: var(--texto-tenue); line-height: 1.7; }
.articulo-contenido ul li::before { content: "✦"; position: absolute; left: 0; color: var(--cyan-vr); font-size: .8rem; top: .2rem; }
.articulo-contenido ol { list-style: decimal; }
.articulo-contenido ol li { margin-bottom: .6rem; color: var(--texto-tenue); line-height: 1.7; padding-left: .4rem; }
.articulo-contenido ol li::marker { color: var(--cyan-vr); }
.articulo-contenido table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
.articulo-contenido th, .articulo-contenido td { padding: .8rem 1rem; border-bottom: 1px solid var(--linea-sutil); text-align: left; font-size: .92rem; }
.articulo-contenido thead th { color: #fff; font-weight: 500; background: rgba(41,171,226,.08); }
.articulo-contenido td { color: var(--texto-tenue); }
.articulo-contenido .iv2-lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.75; color: rgba(255,255,255,.78); }

/* ---------- Lista de beneficios ---------- */
.lista-beneficios { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 2.4rem; }
.item-beneficio {
  display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.2rem;
  border-radius: .9rem; border: 1px solid var(--linea-sutil); background: rgba(255,255,255,.02);
  font-size: .94rem; line-height: 1.6; color: rgba(255,255,255,.82);
}
.item-beneficio::before { content: "✦"; color: var(--cyan-vr); flex: 0 0 auto; margin-top: .1rem; }

/* ---------- Cluster / contenido relacionado ---------- */
.contenido-relacionado-cluster { border-top: 1px solid var(--linea-sutil); }
.tarjeta-cluster { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linea-sutil); transition: padding-left .3s ease; }
.tarjeta-cluster:hover { padding-left: .8rem; }
.tarjeta-cluster .tipo-cluster { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-vr); min-width: 7.5rem; }
.tarjeta-cluster .titulo-cluster { font-size: 1.08rem; font-weight: 500; }
.tarjeta-cluster .descripcion-cluster { font-size: .88rem; color: var(--texto-mas-tenue); margin-top: .15rem; }
.tarjeta-cluster .flecha-cluster { color: var(--cyan-vr); font-size: 1.3rem; transition: transform .3s ease; }
.tarjeta-cluster:hover .flecha-cluster { transform: translateX(6px); }

/* ---------- Contacto ---------- */
.cuadricula-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: 3rem; }
.tarjeta-dato-contacto { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.4rem; border-radius: 1rem; border: 1px solid var(--linea-sutil); background: rgba(255,255,255,.02); margin-bottom: 1rem; transition: border-color .3s ease; min-height: 48px; }
.tarjeta-dato-contacto:hover { border-color: rgba(41,171,226,.45); }
.tarjeta-dato-contacto .icono-contacto { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--cyan-vr-tenue); display: flex; align-items: center; justify-content: center; color: var(--cyan-vr); font-size: 1.1rem; }
.tarjeta-dato-contacto .rotulo-contacto { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-mas-tenue); }
.tarjeta-dato-contacto .valor-contacto { font-size: 1rem; color: #fff; font-weight: 400; }
.formulario-contacto { display: grid; gap: 1.1rem; }
.campo-formulario { display: grid; gap: .45rem; }
.campo-formulario label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-mas-tenue); }
.campo-formulario input, .campo-formulario textarea, .campo-formulario select {
  width: 100%; padding: .95rem 1.1rem; border-radius: .8rem; font-size: 16px;
  background: rgba(255,255,255,.04); border: 1px solid var(--linea-sutil); color: #fff;
  font-family: var(--fuente-principal); transition: border-color .3s ease;
}
.campo-formulario input:focus, .campo-formulario textarea:focus, .campo-formulario select:focus { outline: none; border-color: var(--cyan-vr); }
.campo-formulario textarea { min-height: 9rem; resize: vertical; }

/* ---------- Autor (blog) ---------- */
.caja-autor-articulo { display: flex; gap: 1.3rem; align-items: center; margin-top: 3rem; padding: 1.6rem; border-radius: 1.1rem; border: 1px solid var(--linea-sutil); background: rgba(255,255,255,.02); }
.caja-autor-articulo .avatar-autor { width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(140deg, var(--cyan-vr), #1668b0); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.2rem; color: #04121c; flex: 0 0 auto; }
.caja-autor-articulo .nombre-autor { font-weight: 500; }
.caja-autor-articulo .cargo-autor { font-size: .82rem; color: var(--texto-mas-tenue); }

/* ---------- Pie de página ---------- */
.pie-pagina { border-top: 1px solid var(--linea-sutil); background: var(--tinta-oscura-2); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.cuadricula-pie { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.pie-pagina h2, .pie-pagina h3 { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-vr); font-weight: 400; margin-bottom: 1.2rem; }
.pie-pagina ul li { margin-bottom: .55rem; }
.pie-pagina ul a { font-size: .9rem; color: var(--texto-tenue); transition: color .3s ease; display: inline-block; padding: .25rem 0; }
.pie-pagina ul a:hover { color: var(--cyan-vr-claro); }
.marca-pie img { width: 3rem; margin-bottom: 1rem; }
.marca-pie p { font-size: .9rem; color: var(--texto-tenue); line-height: 1.7; max-width: 20rem; }
.footer-seccion-redes { display: flex; gap: .8rem; margin-top: 1.3rem; }
.footer-seccion-redes a {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea-sutil); color: var(--texto-tenue); font-size: .72rem; letter-spacing: .08em;
  transition: all .3s ease;
}
.footer-seccion-redes a:hover { border-color: var(--cyan-vr); color: var(--cyan-vr-claro); transform: translateY(-3px); }
.barra-inferior-pie {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-sutil);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .76rem; color: var(--texto-mas-tenue);
}
.barra-inferior-pie a { color: var(--texto-mas-tenue); }
.barra-inferior-pie a:hover { color: var(--cyan-vr-claro); }
.enlaces-legales-pie { display: flex; gap: 1.6rem; }

/* ---------- Animación de aparición ---------- */
.animacion-aparecer { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.animacion-aparecer.elemento-visible { opacity: 1; transform: none; }

/* ---------- Mapa del sitio ---------- */
.cuadricula-mapa-sitio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; }
.cuadricula-mapa-sitio h2 { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-vr); font-weight: 400; margin-bottom: 1rem; }
.cuadricula-mapa-sitio ul li { margin-bottom: .5rem; }
.cuadricula-mapa-sitio a { color: var(--texto-tenue); font-size: .94rem; }
.cuadricula-mapa-sitio a:hover { color: var(--cyan-vr-claro); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .navegacion-principal { display: none; }
  .boton-menu-movil { display: inline-flex; }
  .cuadricula-tarjetas--cuatro { grid-template-columns: repeat(2, 1fr); }
  .logos-clientes .cuadricula-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .seccion-hero-pagina .contenedor-seccion { grid-template-columns: 1fr; }
  .seccion-hero-pagina .columna-objeto-3d { order: -1; margin-bottom: 1rem; }
  .seccion-hero-pagina .columna-objeto-3d img { width: min(17rem, 62%); }
  .cuadricula-tarjetas--tres, .cuadricula-tarjetas--dos { grid-template-columns: 1fr; }
  .banda-estadisticas .contenedor-seccion { grid-template-columns: repeat(2, 1fr); }
  .lista-beneficios { grid-template-columns: 1fr; }
  .cuadricula-contacto { grid-template-columns: 1fr; }
  .cuadricula-pie { grid-template-columns: 1fr 1fr; }
  .cuadricula-mapa-sitio { grid-template-columns: 1fr; }
  .etiqueta-vertical-hero { display: none; }
  .logos-clientes .cuadricula-logos { grid-template-columns: repeat(3, 1fr); }
  .tarjeta-cluster { grid-template-columns: 1fr; gap: .4rem; }
  .tarjeta-cluster .flecha-cluster { display: none; }
  .paso-proceso { grid-template-columns: 3.4rem 1fr; gap: 1rem; }
  .acciones-cabecera .boton-cotizar { display: none; }
}

/* ---------- Objetos 3D con animación permanente (video en loop) ---------- */
.objeto-con-animacion { display: block; position: relative; }
.objeto-con-animacion picture { display: block; transition: opacity .35s ease; }
.video-objeto-hover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: screen;
  pointer-events: none; z-index: 3; background: #05050a;
}
/* Los anillos son decorativos: no deben interceptar el hover del objeto */
.anillo-orbital, .anillo-orbital::before, .anillo-orbital::after { pointer-events: none; }
/* El fondo de seccion crea un contexto de apilado que rompe el blend screen:
   en contextos circulares el video se muestra como "portal" holográfico oscuro.
   Centrado exacto sobre el anillo con top/left 50% + translate (en WebKit el
   esquema inset:0 + margin:auto + aspect-ratio falla y ancla el disco a la
   izquierda). La columna es cuadrada para que el disco sea un círculo perfecto */
.seccion-hero-pagina .columna-objeto-3d,
.cuadricula-video-destacado .columna-objeto-3d { aspect-ratio: 1; }
.seccion-hero-pagina .columna-objeto-3d .objeto-con-animacion,
.cuadricula-video-destacado .columna-objeto-3d .objeto-con-animacion { position: static; }
.seccion-hero-pagina .video-objeto-hover,
.cuadricula-video-destacado .video-objeto-hover {
  mix-blend-mode: normal; border-radius: 50%;
  outline: 1px solid rgba(41,171,226,.30);
  box-shadow: inset 0 0 60px rgba(41,171,226,.20), 0 0 44px rgba(41,171,226,.18);
  inset: auto; top: 50%; left: 50%; margin: 0;
  transform: translate(-50%, -50%);
  width: 88%; height: 88%; /* 15% más grande que el disco original */
}
/* Hero del home: el span se ajusta exacto a la imagen y el disco se centra en él */
.seccion-hero-inicio .objeto-con-animacion {
  display: block; position: relative;
  width: min(34rem, 72vw); margin: clamp(1.5rem, 4vh, 3rem) auto 0;
}
.seccion-hero-inicio .objeto-con-animacion .imagen-hero-vr { width: 100%; margin: 0; display: block; }
.seccion-hero-inicio .video-objeto-hover {
  mix-blend-mode: normal; border-radius: 50%;
  outline: 1px solid rgba(41,171,226,.30);
  box-shadow: inset 0 0 60px rgba(41,171,226,.20), 0 0 44px rgba(41,171,226,.18);
  inset: auto; top: 50%; left: 50%; margin: 0;
  transform: translate(-50%, -50%);
  width: min(32.8rem, 69.5vw); height: min(32.8rem, 69.5vw); /* 15% más grande */
}
/* En tarjetas el video reemplaza al fondo de la imagen con el mismo panel oscuro */
.imagen-tarjeta .video-objeto-hover { mix-blend-mode: normal; }
/* Tarjetas con escena real (a todo color): imagen y video cubren el marco */
.imagen-tarjeta--escena img { object-fit: cover; padding: 0; }
.imagen-tarjeta--escena .video-objeto-hover { object-fit: cover; background: transparent; }

/* ---------- Casos de éxito en video (escena animada + reproductor) ---------- */
.casos-video-lista { display: flex; flex-direction: column; gap: 4.2rem; margin-top: 2.8rem; }
.caso-exito-video {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.caso-exito-video:nth-child(even) .caso-exito-visual { order: 2; }
.caso-exito-visual { margin: 0; }
.caso-exito-visual .objeto-con-animacion {
  position: relative; display: block;
  border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--linea-sutil);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.caso-exito-visual .objeto-con-animacion picture { position: absolute; inset: 0; }
.caso-exito-visual .objeto-con-animacion picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* El video de escena es a todo color: sin blend, sin disco, cubre el marco */
.caso-exito-visual .video-objeto-hover {
  mix-blend-mode: normal; background: transparent; object-fit: cover;
  border-radius: 0; outline: none; box-shadow: none; height: 100%; width: 100%;
}
.caso-exito-detalle h3 { font-size: 1.6rem; font-weight: 500; margin: .4rem 0 .8rem; }
.caso-exito-detalle > p:not(.etiqueta-mono) { color: var(--texto-tenue, #b8c2cc); margin-bottom: 1.4rem; line-height: 1.65; }
@media (max-width: 860px) {
  .caso-exito-video { grid-template-columns: 1fr; gap: 1.4rem; }
  .caso-exito-video:nth-child(even) .caso-exito-visual { order: 0; }
  .casos-video-lista { gap: 3.2rem; }
}
/* Animación permanente: la clase la pone el JS cuando el video ya está reproduciendo */
.objeto-con-animacion.animacion-activa picture { opacity: 0; }
.objeto-con-animacion.animacion-activa .video-objeto-hover { opacity: 1; }
/* Si el video no carga, la imagen estática permanece siempre */
.objeto-con-animacion.video-no-disponible picture { opacity: 1; }
.objeto-con-animacion.video-no-disponible .video-objeto-hover { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .objeto-con-animacion.animacion-activa picture { opacity: 1; }
  .objeto-con-animacion.animacion-activa .video-objeto-hover { opacity: 0; }
}

/* ---------- La imagen animada (respaldo WebP) ES el mismo disco circular ----------
   En los contextos circulares el video aparece como un "portal" circular oscuro;
   la imagen de respaldo debe verse exactamente igual desde el primer instante:
   mismo tamaño, misma posición, mismo recorte circular, mismo brillo y el mismo
   flotado — así jamás se ve un cuadro negro, ni antes ni después de que el
   video tome el relevo (el crossfade es invisible). */
.seccion-hero-pagina .columna-objeto-3d .objeto-con-animacion picture,
.cuadricula-video-destacado .columna-objeto-3d .objeto-con-animacion picture {
  position: absolute; inset: auto; top: 50%; left: 50%; margin: 0;
  width: 88%; height: 88%;
  border-radius: 50%; overflow: hidden; background: #05050a;
  outline: 1px solid rgba(41,171,226,.30);
  box-shadow: inset 0 0 60px rgba(41,171,226,.20), 0 0 44px rgba(41,171,226,.18);
  transform: translate(-50%, -50%);
  animation: flotar-objeto-centrado 7s ease-in-out infinite;
  z-index: 2;
}
.seccion-hero-pagina .columna-objeto-3d .objeto-con-animacion picture img,
.cuadricula-video-destacado .columna-objeto-3d .objeto-con-animacion picture img {
  width: 100%; height: 100%; max-height: none; object-fit: cover; display: block;
}
/* Hero del home: el span se vuelve cuadrado y la picture es el disco,
   con exactamente las mismas medidas del disco de video */
.seccion-hero-inicio .objeto-con-animacion { aspect-ratio: 1; }
.seccion-hero-inicio .objeto-con-animacion picture {
  position: absolute; inset: auto; top: 50%; left: 50%; margin: 0;
  width: min(32.8rem, 69.5vw); height: min(32.8rem, 69.5vw);
  border-radius: 50%; overflow: hidden; background: #05050a;
  outline: 1px solid rgba(41,171,226,.30);
  box-shadow: inset 0 0 60px rgba(41,171,226,.20), 0 0 44px rgba(41,171,226,.18);
  transform: translate(-50%, -50%);
  animation: flotar-objeto-centrado 7s ease-in-out infinite;
  z-index: 2;
}
.seccion-hero-inicio .objeto-con-animacion picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 860px) {
  .seccion-hero-pagina .columna-objeto-3d .objeto-con-animacion picture,
  .cuadricula-video-destacado .columna-objeto-3d .objeto-con-animacion picture {
    width: 79%; height: 79%; /* igual que el disco de video en móvil */
  }
}
@media (prefers-reduced-motion: reduce) {
  .seccion-hero-pagina .columna-objeto-3d .objeto-con-animacion picture,
  .cuadricula-video-destacado .columna-objeto-3d .objeto-con-animacion picture,
  .seccion-hero-inicio .objeto-con-animacion picture { animation: none; }
}

/* ---------- Cuadrícula de videos de clientes ---------- */
.cuadricula-videos-cliente {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem; margin-top: 2.6rem;
}
.cuadricula-videos-cliente--uno { max-width: 56rem; margin-left: auto; margin-right: auto; }
.bloque-video-cliente { margin: 0; }
.rotulo-video-cliente {
  margin-top: 1rem; font-size: .92rem; color: rgba(255,255,255,.62);
  letter-spacing: .02em; text-align: center;
}
.rotulo-video-cliente strong { color: var(--cyan-vr); font-weight: 600; }

/* ---------- Bloque destacado con objeto + texto (gaming/advergaming) ---------- */
.cuadricula-video-destacado {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem;
  align-items: center; margin-top: 2.8rem;
}
.cuadricula-video-destacado .columna-objeto-3d img { width: min(24rem, 86%); }
@media (max-width: 860px) {
  .cuadricula-video-destacado { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ============================================================
   AJUSTES MÓVILES 2026-09-09
   Héroes centrados, objeto dentro del anillo orbital,
   Respuesta Directa centrada, menú móvil compacto con efectos
   ============================================================ */

/* El video del objeto también flota como la imagen estática */
.video-objeto-hover { animation: flotar-objeto 7s ease-in-out infinite; }

/* En contextos circulares el flotado debe CONSERVAR el centrado
   (las keyframes normales pisan el translate(-50%,-50%) y el disco
   queda desplazado — así se veía desalineado en iPhone) */
@keyframes flotar-objeto-centrado {
  0%,100% { transform: translate(-50%,-50%) translateY(0) rotate(-1.2deg); }
  50% { transform: translate(-50%,-50%) translateY(-22px) rotate(1.4deg); }
}
.seccion-hero-pagina .video-objeto-hover,
.seccion-hero-inicio .video-objeto-hover,
.cuadricula-video-destacado .video-objeto-hover {
  animation: flotar-objeto-centrado 7s ease-in-out infinite;
}

/* Anillo centrado (corrige la animación para conservar el centrado) */
@keyframes girar-anillo-centrado {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

@media (max-width: 860px) {
  /* --- Héroes de página: contenido centrado --- */
  .seccion-hero-pagina .contenedor-seccion { text-align: center; justify-items: center; }
  .seccion-hero-pagina .breadcrumb-nav { justify-content: center; margin-bottom: 1.5rem; }

  /* --- Objeto dentro del círculo orbital --- */
  .seccion-hero-pagina .columna-objeto-3d {
    width: min(19.5rem, 76vw); aspect-ratio: 1;
    margin: 0 auto 1.8rem;
  }
  .seccion-hero-pagina .columna-objeto-3d img {
    width: 72%; max-height: 72%; object-fit: contain;
  }
  .seccion-hero-pagina .columna-objeto-3d .anillo-orbital {
    width: 100%; top: 50%; left: 50%;
    animation: girar-anillo-centrado 26s linear infinite;
  }
  .seccion-hero-pagina .columna-objeto-3d .anillo-orbital--secundario { width: 111%; }
  /* Disco de video: centrado y 15% más grande, siempre dentro del anillo móvil */
  .seccion-hero-pagina .video-objeto-hover,
  .cuadricula-video-destacado .video-objeto-hover { width: 79%; height: 79%; }

  /* --- Bloque Respuesta Directa centrado --- */
  .seccion-hero-pagina .respuesta-rapida-aio {
    text-align: center;
    border-left: 1px solid var(--linea-sutil);
    border-top: 3px solid var(--cyan-vr);
    padding: 1.5rem 1.4rem;
  }

  /* --- Bloque destacado (gaming/advergaming): igual que héroe --- */
  .cuadricula-video-destacado .columna-objeto-3d { width: min(19.5rem, 76vw); aspect-ratio: 1; margin: 0 auto; }
  .cuadricula-video-destacado .columna-objeto-3d img { width: 74%; max-height: 74%; object-fit: contain; }
  .cuadricula-video-destacado .anillo-orbital { width: 100%; top: 50%; left: 50%; animation: girar-anillo-centrado 26s linear infinite; }
  .cuadricula-video-destacado .anillo-orbital--secundario { width: 111%; }
}

/* --- Menú móvil: tipografía -40%, más llamativo, efectos de fondo --- */
.menu-movil-pantalla {
  background:
    radial-gradient(52% 38% at 82% 10%, rgba(41,171,226,.26), transparent 70%),
    radial-gradient(46% 36% at 10% 90%, rgba(22,104,176,.22), transparent 70%),
    radial-gradient(70% 55% at 50% 118%, rgba(41,171,226,.14), transparent 72%),
    rgba(7,7,11,.88);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  justify-content: flex-start; padding-top: 7rem;
}
.menu-movil-pantalla::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(41,171,226,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,171,226,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 38%, #000, transparent);
  mask-image: radial-gradient(75% 65% at 50% 38%, #000, transparent);
}
.menu-movil-pantalla::after {
  content: ""; position: fixed; right: -22%; top: -16%; width: 62vw; height: 62vw;
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(41,171,226,.34), transparent 65%);
  filter: blur(28px); animation: pulsar-brillo 6s ease-in-out infinite;
}
.menu-movil-pantalla a.enlace-menu-movil,
.menu-movil-pantalla .grupo-submenu-movil summary {
  text-shadow: 0 0 22px rgba(41,171,226,.28);
}
.menu-movil-pantalla a.enlace-menu-movil {
  font-size: clamp(1.14rem, 3.9vw, 1.8rem); font-weight: 400; letter-spacing: .05em;
  color: rgba(255,255,255,.88); padding: .55rem .2rem .55rem 1rem;
  border-left: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease, letter-spacing .3s ease;
}
.menu-movil-pantalla a.enlace-menu-movil:hover {
  color: var(--cyan-vr-claro); border-left-color: var(--cyan-vr); letter-spacing: .1em;
}
.menu-movil-pantalla .grupo-submenu-movil { margin: .2rem 0 .5rem; }
.menu-movil-pantalla .grupo-submenu-movil summary {
  font-size: clamp(1.14rem, 3.9vw, 1.8rem); font-weight: 400; letter-spacing: .05em;
  color: rgba(255,255,255,.88); padding-left: 1rem; border-left: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.menu-movil-pantalla .grupo-submenu-movil summary:hover { color: var(--cyan-vr-claro); border-left-color: var(--cyan-vr); }
.menu-movil-pantalla .grupo-submenu-movil summary::after { font-size: 1.15rem; }
.menu-movil-pantalla .grupo-submenu-movil a { font-size: .95rem; min-height: 44px; padding: .45rem 0 .45rem 2rem; }

/* Video destacado al inicio de cada caso de éxito (debajo del badge "Actualizado").
   Debajo del video va una imagen animada (WebP ping-pong): cubre la animación
   incluso cuando el sistema bloquea el autoplay (ahorro de energía iOS);
   el video aparece encima solo cuando ya está reproduciéndose. */
.video-caso-destacado .marco-video-360 .imagen-animada-caso {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000;
}
.video-caso-destacado .marco-video-360 video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000;
  opacity: 0; transition: opacity .6s ease;
}
.video-caso-destacado.animacion-activa .marco-video-360 video { opacity: 1; }

/* ============================================================
   Modal de contacto (se abre al hacer clic en cualquier enlace
   de correo info@immersive.com.co) y aviso de mensaje enviado
   ============================================================ */
.modal-contacto { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.modal-contacto[hidden] { display: none; }
.modal-contacto-fondo { position: absolute; inset: 0; background: rgba(3,4,8,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-contacto-caja {
  position: relative; width: min(30rem, 100%); max-height: min(92vh, 92svh); overflow-y: auto;
  background: linear-gradient(165deg, #101322 0%, #0a0c16 70%);
  border: 1px solid rgba(41,171,226,.28); border-radius: 20px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(41,171,226,.12);
  animation: modal-contacto-entrar .45s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-contacto-entrar {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.modal-contacto-cerrar {
  position: absolute; top: .8rem; right: .9rem; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.85);
  font-size: 1.35rem; line-height: 1; cursor: pointer; transition: all .3s ease;
}
.modal-contacto-cerrar:hover { background: rgba(41,171,226,.2); border-color: var(--cyan-vr); transform: rotate(90deg); }
.modal-contacto-titulo { font-size: clamp(1.5rem, 4.6vw, 2rem); font-weight: 400; margin: .4rem 0 .5rem; }
.modal-contacto-titulo em { font-style: italic; color: var(--cyan-vr-claro); }
.modal-contacto-sub { font-size: .92rem; color: rgba(255,255,255,.66); margin: 0 0 1.3rem; }
.modal-contacto-sub strong { color: var(--cyan-vr-claro); font-weight: 500; }
.modal-contacto-form { display: grid; gap: .9rem; }
.campo-contacto { display: grid; gap: .35rem; }
.campo-contacto span {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.campo-contacto input, .campo-contacto textarea {
  width: 100%; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  color: #fff; font: inherit; font-size: .95rem;
  padding: .75rem .9rem; transition: border-color .3s ease, background .3s ease;
}
.campo-contacto textarea { resize: vertical; min-height: 5.5rem; }
.campo-contacto input:focus, .campo-contacto textarea:focus {
  outline: none; border-color: var(--cyan-vr); background: rgba(41,171,226,.07);
  box-shadow: 0 0 0 3px rgba(41,171,226,.15);
}
.campo-trampa { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }
.boton-enviar-contacto { justify-content: center; width: 100%; margin-top: .3rem; cursor: pointer; }
.boton-enviar-contacto:disabled { opacity: .55; cursor: wait; }
.nota-captcha { font-size: .72rem; color: rgba(255,255,255,.45); text-align: center; margin: .2rem 0 0; }
.nota-captcha a { color: var(--cyan-vr-claro); }
.modal-contacto-abierto, .modal-contacto-abierto body { overflow: hidden; }

.aviso-correo-enviado {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 140%);
  z-index: 950; max-width: min(30rem, 92vw);
  background: linear-gradient(135deg, rgba(41,171,226,.16), rgba(41,171,226,.06)), #0d1019;
  border: 1px solid rgba(41,171,226,.4); border-radius: 14px;
  color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.5;
  padding: 1rem 1.4rem; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.aviso-correo-enviado strong { color: var(--cyan-vr-claro); }
.aviso-correo-enviado.visible { transform: translate(-50%, 0); }

/* Reproductor YouTube (API) dentro del marco 16:9 */
.marco-video-360 .jugador-youtube { position: absolute; inset: 0; }
.marco-video-360 .jugador-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }