/* El viaje (prototipo). Lo que se ve es el canvas; el HTML solo pone los textos encima. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noche); color: var(--blanco); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texto); font-size: var(--t-cuerpo); line-height: 1.5; }
.dato { font-family: var(--f-dato); font-size: var(--t-dato); letter-spacing: var(--track-dato); text-transform: uppercase; margin: 0; }
.naranja { color: var(--naranja); }

#viaje { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.v-recorrido { height: 4800vh; }   /* 1100vh por tramo (TRAMOS = 3 en main.js) */

/* Barra superior: logo y cambio de idioma */
.v-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 28px var(--margen); pointer-events: none; }
.v-nav a, .v-nav button { pointer-events: auto; }
.v-nav__logo img { display: block; width: clamp(120px, 11vw, 160px); height: auto; }
.idioma { background: none; border: 0; color: var(--blanco); cursor: pointer; padding: 8px 0 8px 12px; opacity: 0.8; }
.idioma:hover, .idioma:focus-visible { opacity: 1; }

/* Botón de música: cuatro barras que bailan cuando suena */
.v-nav__acciones { display: flex; align-items: center; gap: 18px; pointer-events: auto; }
.v-sonido { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--blanco); cursor: pointer; padding: 8px 0; }
.v-sonido__barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.v-sonido__barras i { width: 2px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(0.18); transition: transform 0.4s ease; }
.v-sonido[aria-pressed="true"] .v-sonido__barras i { animation: v-barra 1.1s ease-in-out infinite alternate; }
.v-sonido[aria-pressed="true"] .v-sonido__barras i:nth-child(2) { animation-duration: 0.8s; animation-delay: -0.3s; }
.v-sonido[aria-pressed="true"] .v-sonido__barras i:nth-child(3) { animation-duration: 1.35s; animation-delay: -0.6s; }
.v-sonido[aria-pressed="true"] .v-sonido__barras i:nth-child(4) { animation-duration: 0.95s; animation-delay: -0.15s; }
@keyframes v-barra { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
.v-sonido__aviso { font-size: 0.6rem; opacity: 0.75; transition: opacity 0.6s ease; }
.v-sonido.sonado .v-sonido__aviso { opacity: 0; width: 0; overflow: hidden; }
html.claro .v-sonido { color: var(--noche); }
@media (prefers-reduced-motion: reduce) { .v-sonido[aria-pressed="true"] .v-sonido__barras i { animation: none; transform: scaleY(0.7); } }
@media (max-width: 700px) { .v-sonido__aviso { display: none; } }

/* Intro de carga: un visor de líneas (anillos, segmentos, líneas angulares) que se completa con la carga.
   --carga (0–1) la pone el JS. Al llegar a 1 se abre la página. */
html:not(.listo) { overflow: hidden; }
html:not(.listo) .v-nav { opacity: 0; }
.v-nav { transition: opacity 1.2s ease 0.8s; }
.v-intro { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: var(--noche); overflow: hidden;
  transition: opacity 1.3s ease 0.25s, visibility 0s linear 1.6s; --carga: 0; }
html.listo .v-intro { opacity: 0; visibility: hidden; }

.v-hud { grid-area: 1 / 1; width: min(74vmin, 640px); height: min(74vmin, 640px); overflow: visible; fill: none; stroke: var(--azul-polvo);
  opacity: 0; animation: v-hud-entra 1.4s cubic-bezier(.2,.7,.2,1) forwards; transition: transform 1.5s cubic-bezier(.6,0,.2,1), opacity 1.1s ease; }
html.listo .v-hud { transform: scale(1.9); opacity: 0; }
@keyframes v-hud-entra { from { opacity: 0; transform: scale(0.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
.hud-fino { stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.hud-medio { stroke-width: 2; opacity: 0.8; vector-effect: non-scaling-stroke; }
.hud-raya { stroke-dasharray: 2 14; opacity: 0.6; }
.hud-punto { stroke-dasharray: 60 22 6 22; opacity: 0.35; }
.hud-marcas line { stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }
.hud-marcas line.larga { opacity: 0.9; }
.hud-giro { transform-origin: 0px 0px; animation: v-giro 60s linear infinite; }
.hud-giro--b { animation-duration: 22s; animation-direction: reverse; }
.hud-giro--c { animation-duration: 34s; }
@keyframes v-giro { to { transform: rotate(360deg); } }
/* el aro de segmentos: apagados → encendidos con la carga; el de cabeza, naranja (el único punto naranja) */
.hud-segmentos line { stroke-width: 3; opacity: 0.16; vector-effect: non-scaling-stroke; transition: opacity 0.35s ease, stroke 0.35s ease; }
.hud-segmentos line.on { opacity: 1; stroke: var(--blanco); }
.hud-segmentos line.cabeza { opacity: 1; stroke: var(--naranja); }
.hud-linea { stroke-width: 1.5; opacity: 0.85; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--carga)); }
.hud-linea--corta { opacity: 0.55; }

.v-intro__centro { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 22px; z-index: 1; }
.v-intro__logo { width: min(30vmin, 260px); height: auto; opacity: 0; transform: translateY(8px); animation: v-entra 1.2s cubic-bezier(.2,.7,.2,1) 0.35s forwards;
  transition: transform 1.4s cubic-bezier(.5,0,.2,1), filter 1.4s ease; }
html.listo .v-intro__logo { transform: scale(1.12); filter: blur(10px); }
.v-intro__dato { display: flex; gap: 1.2em; opacity: 0; font-size: 0.68rem; animation: v-entra 1s ease 0.7s forwards; }
.v-intro__dato .v-carga__num { color: var(--blanco); min-width: 2.4em; text-align: right; }
@keyframes v-entra { to { opacity: 0.9; transform: none; } }

/* esquinas de visor */
.v-esquina { position: absolute; width: 34px; height: 34px; border: 0 solid var(--azul-polvo); opacity: 0; animation: v-entra 1s ease 0.5s forwards; }
.v-esquina--1 { top: 28px; left: 28px; border-top-width: 1px; border-left-width: 1px; }
.v-esquina--2 { top: 28px; right: 28px; border-top-width: 1px; border-right-width: 1px; }
.v-esquina--3 { bottom: 28px; left: 28px; border-bottom-width: 1px; border-left-width: 1px; }
.v-esquina--4 { bottom: 28px; right: 28px; border-bottom-width: 1px; border-right-width: 1px; }
@media (max-width: 700px) { .v-esquina { width: 22px; height: 22px; } .v-esquina--1, .v-esquina--2 { top: 16px; } .v-esquina--3, .v-esquina--4 { bottom: 16px; } .v-esquina--1, .v-esquina--3 { left: 16px; } .v-esquina--2, .v-esquina--4 { right: 16px; } }
@media (prefers-reduced-motion: reduce) { .hud-giro, .v-hud { animation: none; opacity: 1; } .v-intro__logo, .v-intro__dato, .v-esquina { animation-duration: 0.01s; } html.listo .v-hud, html.listo .v-intro__logo { transform: none; filter: none; } }

/* Textos dentro del viaje: entran desenfocados y abiertos, salen igual */
.v-textos { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.v-texto { position: absolute; max-width: min(36rem, 84vw); opacity: 0; filter: blur(14px); transform: translateY(18px); letter-spacing: 0.06em;
  transition: opacity 0.9s ease, filter 0.9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), letter-spacing 1.2s cubic-bezier(.2,.7,.2,1); }
.v-texto.activo { opacity: 1; filter: blur(0); transform: none; letter-spacing: 0; }
/* Las frases entran letra a letra (main.js las parte en .palabra > .letra con su índice --i) */
.palabra { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(0.55em) scale(1.25); transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease; }
.v-texto.activo .letra { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 26ms + 150ms); }
/* destello: cuando la frase termina de formarse, una ola de luz la recorre letra a letra */
.v-texto.activo .letra { animation: destello 0.75s ease-out calc(var(--i) * 24ms + 1150ms) 1 both; }
@keyframes destello {
  0%, 100% { text-shadow: inherit; }
  35% { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 34px rgba(190, 222, 243, 0.9), 0 0 70px rgba(190, 222, 243, 0.55); }
}
.v-texto--oscuro.activo .letra { animation-name: destello-oscuro; }
@keyframes destello-oscuro { 0%, 100% { text-shadow: inherit; } 35% { color: var(--azul-profundo); text-shadow: 0 0 18px rgba(255, 255, 255, 1), 0 0 40px rgba(190, 222, 243, 0.9); } }
/* formada la frase, las letras quedan sueltas: el cursor las empuja y se bambolean como líquido (main.js) */
.v-texto.activo.lista .letra { transition: opacity 0.35s ease, filter 0.35s ease; transition-delay: 0s; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .v-texto.activo .letra { animation: none; } .letra { filter: none; transform: none; transition: opacity 0.4s ease; } .v-texto.activo .letra { transition-delay: 0s; } }

/* sombra para leerse sobre mundos brillantes (la lava, el amanecer); en la galería blanca no hace falta */
.v-texto { text-shadow: 0 0 28px rgba(6, 6, 9, 0.85), 0 0 10px rgba(6, 6, 9, 0.55), 0 1px 3px rgba(6, 6, 9, 0.6); }
.v-texto--oscuro { text-shadow: 0 0 24px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.7); }
.v-boton { text-shadow: none; }
.v-texto--centro { left: 50%; top: 9vh; transform: translate(-50%, 18px); text-align: center; width: min(90rem, 90vw); max-width: none; }
.v-texto--centro.activo { transform: translate(-50%, 0); }
/* a los lados, sin tocar el cubo (que ocupa el centro) */
.v-texto--izq { left: var(--margen); top: 50%; margin-top: -4rem; max-width: min(28rem, 30vw); }
.v-texto--der { right: var(--margen); top: 50%; margin-top: -4rem; max-width: min(28rem, 30vw); text-align: right; }
.v-texto .dato { opacity: 0.75; margin-bottom: 1rem; }

.v-titular { font-family: var(--f-titular); font-weight: 800; letter-spacing: var(--track-titular); font-size: clamp(2.2rem, 4.6vw, 5.4rem); line-height: 1.02; margin: 0; }
/* portada: titular pequeño, todo blanco, con aire (se quiere muy sobrio) */
.v-titular--portada { font-weight: 700; font-size: clamp(1.5rem, 2.7vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; max-width: 22ch; margin: 0.4rem auto 0; text-wrap: balance; }
.v-titular--portada .naranja { color: inherit; }
.v-frase { font-family: var(--f-titular); font-weight: 800; letter-spacing: var(--track-titular); font-size: clamp(1.8rem, 3.1vw, 3.7rem); line-height: 1.06; margin: 0; text-wrap: balance; }
/* en los bloques que llevan pieza debajo (servicios, caso, lab), el título va algo menor para que quepa todo */
.v-frase:has(~ .pieza), .v-frase:has(~ .comparar), .v-frase:has(~ .vistas), .v-frase:has(~ .v-botones) { font-size: clamp(1.6rem, 2.7vw, 3.1rem); }

.v-parrafo { margin: 1rem 0 0; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); line-height: 1.5; opacity: 0.86; text-wrap: pretty; }
.v-texto--centro .v-parrafo { max-width: 34rem; margin-left: auto; margin-right: auto; }
.v-texto--bajo { top: auto; bottom: 14vh; }
/* botones: solo se pueden tocar cuando su tramo está activo */
.v-botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4rem 0 0; }
.v-texto--der .v-botones { justify-content: flex-end; }
.v-botones--centro { justify-content: center; }
.v-boton { display: inline-block; padding: 0.8em 1.4em; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; color: var(--blanco); text-decoration: none;
  font-family: var(--f-dato); font-size: var(--t-dato); letter-spacing: var(--track-dato); text-transform: uppercase; backdrop-filter: blur(8px); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.v-texto.activo .v-boton { pointer-events: auto; }
.v-boton:hover, .v-boton:focus-visible { background: var(--blanco); color: var(--noche); border-color: var(--blanco); }
.v-boton--naranja { background: var(--naranja); border-color: var(--naranja); color: var(--noche); text-transform: none; letter-spacing: 0.04em; }
/* la galería blanca: texto y barra superior en oscuro */
.v-texto--oscuro { color: var(--noche); }
.v-boton--oscuro { color: var(--noche); border-color: rgba(6, 6, 9, 0.5); }
.v-boton--oscuro:hover, .v-boton--oscuro:focus-visible { background: var(--noche); color: var(--blanco); border-color: var(--noche); }
.v-nav__logo img, .idioma { transition: filter 0.8s ease, color 0.8s ease; }
html.claro .v-nav__logo img { filter: invert(1); }
html.claro .idioma { color: var(--noche); }

.v-bajar { position: fixed; left: 50%; bottom: 5vh; transform: translateX(-50%); opacity: 0; transition: opacity 0.8s ease; }
.v-bajar.activo { opacity: 0.7; }

/* Botones vivos (botones.js): el contorno lo dibujan partículas; la línea del borde se quita */
.v-boton, .chip > span { position: relative; }
.boton__puntos { position: absolute; left: -9px; top: -9px; width: calc(100% + 18px); height: calc(100% + 18px); pointer-events: none; }
html.botones-vivos .v-boton, html.botones-vivos .chip > span { border-color: transparent; }
html.botones-vivos .chip input:checked + span { background: rgba(190, 222, 243, 0.12); color: var(--blanco); border-color: transparent; }
html.botones-vivos .v-boton:hover, html.botones-vivos .v-boton:focus-visible { background: rgba(190, 222, 243, 0.14); color: var(--blanco); border-color: transparent; }
html.botones-vivos .v-boton--oscuro:hover, html.botones-vivos .v-boton--oscuro:focus-visible { background: rgba(6, 6, 9, 0.08); color: var(--noche); }
html.botones-vivos .v-boton--naranja, html.botones-vivos .v-boton--naranja:hover, html.botones-vivos .brief__nav .v-boton--naranja { background: rgba(254, 80, 0, 0.9); color: var(--noche); }
.v-sonido__puntos { display: block; width: 46px; height: 22px; }

/* ================= Brief del cierre ================= */
.v-texto--cierre { top: 7vh; }
.v-texto--cierre .v-titular { font-size: clamp(1.7rem, 3.2vw, 3.6rem); }
.v-texto--cierre > .v-parrafo { margin-top: 0.6rem; }
.brief { width: min(40rem, 88vw); margin: 1.4rem auto 0; padding: 22px 24px 20px; border-radius: 22px; text-align: left; text-shadow: none; letter-spacing: normal;
  background: rgba(6, 6, 9, 0.5); border: 1px solid rgba(190, 222, 243, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.v-texto.activo .brief, .v-texto.activo .brief__otros a { pointer-events: auto; }
.brief fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.brief__puntos { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 0; }
.brief__puntos li { width: 22px; height: 2px; background: rgba(190, 222, 243, 0.25); transition: background 0.4s ease; }
.brief__puntos li.on { background: var(--naranja); }
.brief__paso { display: none; }
.brief__paso.activo { display: block; animation: brief-entra 0.5s cubic-bezier(.2,.7,.2,1); }
@keyframes brief-entra { from { opacity: 0; transform: translateY(10px); } }
.brief__pregunta { padding: 0; font-family: var(--f-titular); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.5rem); letter-spacing: var(--track-titular); }
.brief__nota { margin: 4px 0 0; font-size: 0.9rem; opacity: 0.7; }
.brief__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: block; padding: 0.7em 1.15em; border-radius: 999px; border: 1px solid rgba(190, 222, 243, 0.3); font-size: 0.95rem; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.chip:hover span { border-color: var(--azul-polvo); }
.chip input:checked + span { background: var(--blanco); color: var(--noche); border-color: var(--blanco); }
.chip input:focus-visible + span { outline: 2px solid var(--azul-polvo); outline-offset: 2px; }
.chip--mini span { padding: 0.4em 0.9em; font-size: 0.8rem; }
.brief__campos { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin-top: 14px; align-items: end; }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo .dato { opacity: 0.7; font-size: 0.62rem; }
.brief__via { display: flex; gap: 6px; }
.brief input[type="text"], .brief input[type="email"], .brief input[type="tel"], .brief select { width: 100%; min-width: 0; padding: 0.7em 0.9em; border-radius: 12px; border: 1px solid rgba(190, 222, 243, 0.3);
  background: rgba(6, 6, 9, 0.55); color: var(--blanco); font: inherit; font-size: 1rem; }
.brief input:focus-visible, .brief select:focus-visible { outline: 2px solid var(--azul-polvo); outline-offset: 1px; }
.brief__tel { display: flex; gap: 6px; }
.brief__tel[hidden], .brief__email[hidden] { display: none; }
.brief__tel select { width: auto; flex: none; max-width: 8.5rem; }
.brief .mal, .brief .mal + span { border-color: var(--naranja) !important; }
.brief__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 0.85rem; opacity: 0.85; cursor: pointer; }
.brief__consent input { margin-top: 3px; accent-color: var(--naranja); }
.brief__consent.mal { color: var(--naranja); opacity: 1; }
.brief__error { margin: 12px 0 0; min-height: 1em; color: var(--naranja); font-size: 0.62rem; }
.brief__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.brief__nav .v-boton { cursor: pointer; background: none; backdrop-filter: none; }
.brief__nav .v-boton--naranja { background: var(--naranja); text-transform: uppercase; letter-spacing: var(--track-dato); }
.brief__nav [hidden] { display: none; }
.brief__ok { margin: 6px 0 4px; font-family: var(--f-titular); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.brief__ok[hidden] { display: none; }
.brief.enviado .brief__puntos, .brief.enviado .brief__nav, .brief.enviado .brief__error { display: none; }
.brief__otros { margin: 14px 0 0; font-size: 0.62rem; opacity: 0.85; text-shadow: 0 0 12px rgba(6, 6, 9, 0.9); }
.brief__otros a { color: inherit; }
@media (max-width: 700px) { .brief__campos { grid-template-columns: 1fr; } .brief { padding: 18px 16px; } }

/* ================= Recursos de cada tramo (traídos de la web anterior) ================= */
.v-texto.activo .pieza, .v-texto.activo .comparar, .v-texto.activo .caso-tabs, .v-texto.activo .vista { pointer-events: auto; }
.v-texto .pieza, .v-texto .comparar, .v-texto .vista, .v-texto .caso-tab { text-shadow: none; letter-spacing: normal; }
/* los bloques con pieza se centran en vertical y son algo más anchos */
.v-texto--izq, .v-texto--der { margin-top: 0; translate: 0 -50%; max-width: min(46rem, 38vw); }
.v-texto--ancho { max-width: min(46rem, 43vw); }
.panel { border-radius: 18px; overflow: hidden; }
.pieza { display: block; margin-top: 2.2rem; border-radius: 18px; background: rgba(14, 16, 26, 0.72); border: 1px solid rgba(190, 222, 243, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--blanco); text-decoration: none; overflow: hidden; max-width: 34rem; }
.pieza__pie { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px; color: var(--azul-polvo); border-top: 1px solid rgba(190, 222, 243, 0.1); }
/* Webs: navegador en miniatura; al pasar el cursor, la web se recorre sola */
.navegador__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(190, 222, 243, 0.1); }
.navegador__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(190, 222, 243, 0.25); }
.navegador__barra .dato { margin-left: 10px; opacity: 0.7; }
.navegador__pantalla { display: block; height: clamp(180px, 22vw, 280px); overflow: hidden; }
.navegador__pantalla img { width: 100%; transition: transform 6s cubic-bezier(0.45, 0, 0.25, 1); }
.pieza--web:hover .navegador__pantalla img, .pieza--web:focus-visible .navegador__pantalla img { transform: translateY(calc(-100% + clamp(180px, 22vw, 280px))); }
/* Branding: el tablero de marca, en mosaico */
.pieza--marca { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 8px; padding: 8px; background: rgba(14, 16, 26, 0.5); }
.marca__celda { border-radius: 12px; padding: 16px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; }
.marca__logo { grid-row: span 2; background: #22306F; color: #EEE4DD; align-items: center; justify-content: center; }
.marca__logo svg { width: 78%; height: auto; }
.marca__colores { flex-direction: row; gap: 6px; padding: 10px; background: rgba(238, 228, 221, 0.06); }
.marca__colores i { flex: 1; border-radius: 8px; }
.marca__colores .c1 { background: #EEE4DD; } .marca__colores .c2 { background: #22306F; } .marca__colores .c3 { background: #141A3D; box-shadow: inset 0 0 0 1px rgba(238, 228, 221, 0.15); } .marca__colores .c4 { background: #EC5BA8; }
.marca__tipo { background: #EEE4DD; color: #22306F; }
.marca__tipo span { font: 400 2.6rem/1 "Bagel Fat One", var(--f-titular); }
.marca__app { background: #141A3D; color: #EEE4DD; flex-direction: row; align-items: flex-end; }
.marca__vaso { width: 34px; height: 46px; border-radius: 4px 4px 10px 10px; background: linear-gradient(#EEE4DD 0 34%, #22306F 34% 70%, #EEE4DD 70%); position: relative; }
.marca__vaso::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: #EC5BA8; }
.marca__app small, .marca__tipo small { opacity: 0.7; }
/* SEO y GEO: una pregunta y su respuesta */
.pieza--geo { padding: 0; }
.geo__pregunta { margin: 0; padding: 18px 18px 14px; font-size: 1rem; min-height: 3.6em; }
.geo__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--azul-polvo); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.geo__respuesta { margin: 0 12px; padding: 16px; border-radius: 12px; background: rgba(190, 222, 243, 0.07); opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease-suave), transform 0.8s var(--ease-suave); }
.geo__respuesta.on { opacity: 1; transform: none; }
.geo__respuesta p { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.geo__respuesta strong { color: var(--blanco); background: linear-gradient(transparent 62%, rgba(254, 80, 0, 0.55) 62%); padding: 0 2px; }
.geo__fuente { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; color: var(--azul-polvo); }
.geo__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }
.pieza--geo .pieza__pie { margin-top: 12px; }
/* Edición y motion: el reel de la marca en una tira de película que se arrastra (60 fotogramas en una sola imagen) */
.pieza--motion { --fx: 0%; --fy: 0%; user-select: none; -webkit-user-select: none; }
.motion__pantalla { position: relative; height: clamp(220px, 24vw, 300px); display: grid; place-items: center; background: #07070b; overflow: hidden; }
.motion__pantalla::before, .motion__visor, .motion__fotos i { background-image: url("/assets/servicios/reel-fotogramas.jpg"); background-size: 1000% 600%; }
.motion__pantalla::before { content: ""; position: absolute; inset: -20px; background-position: var(--fx) var(--fy); filter: blur(22px) brightness(0.55); }
.motion__visor { position: relative; height: 100%; aspect-ratio: 9 / 16; background-position: var(--fx) var(--fy); box-shadow: 0 0 0 1px rgba(190, 222, 243, 0.14), 0 20px 50px rgba(0, 0, 0, 0.6); }
.motion__tc, .motion__pista { position: absolute; bottom: 10px; font-size: 0.62rem; }
.motion__tc { left: 12px; color: var(--naranja); }
.motion__pista { right: 12px; opacity: 0.7; }
.motion__tira { position: relative; padding: 14px 14px; background: #0b0c12; touch-action: pan-y; }
.motion__tira::before, .motion__tira::after { content: ""; position: absolute; left: 14px; right: 14px; height: 5px; background: repeating-linear-gradient(90deg, rgba(190, 222, 243, 0.22) 0 6px, transparent 6px 14px); }
.motion__tira::before { top: 4px; } .motion__tira::after { bottom: 4px; }
.motion__fotos { display: flex; gap: 3px; }
.motion__fotos i { flex: 1; aspect-ratio: 9 / 16; border-radius: 2px; opacity: 0.5; transition: opacity 0.3s; }
.motion__fotos i.on { opacity: 1; }
.motion__cabezal { position: absolute; top: 2px; bottom: 2px; left: 14px; width: 2px; background: var(--naranja); box-shadow: 0 0 10px rgba(254, 80, 0, 0.8); pointer-events: none; }
.motion__cabezal::before { content: ""; position: absolute; top: -2px; left: 50%; width: 10px; height: 10px; transform: translate(-50%, 0) rotate(45deg); background: var(--naranja); }
.motion__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.caso-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.8rem; }
.caso-tab { font: 400 0.72rem/1 var(--f-dato); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanco); background: transparent; border: 1px solid rgba(190, 222, 243, 0.28); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.caso-tab:hover { border-color: var(--azul-polvo); }
.caso-tab.activo { background: var(--blanco); color: var(--noche); border-color: var(--blanco); }
.comparar { --corte: 50%; position: relative; aspect-ratio: 16 / 9; margin-top: 1rem; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); touch-action: pan-y; }
.comparar__capa { position: absolute; inset: 0; background: #111; }
.comparar__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s, transform 1.2s var(--ease-suave); }
.comparar.cambiando .comparar__capa img { opacity: 0; transform: scale(1.03); }
.comparar__antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.comparar__etiqueta { position: absolute; bottom: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(6, 6, 9, 0.62); color: var(--blanco); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.comparar__antes .comparar__etiqueta { left: 14px; }
.comparar__despues .comparar__etiqueta { right: 14px; }
.comparar__linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; background: var(--blanco); transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 18px rgba(255, 255, 255, 0.5); }
.comparar__linea .dato { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--blanco); color: var(--noche); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.comparar__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pieza { margin-top: 1.4rem; text-align: left; }
.v-texto--der .pieza { margin-left: auto; }
.navegador__pantalla { height: auto; aspect-ratio: 16 / 10; background: #141A3D; }
.navegador__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.navegador__pantalla { position: relative; background: var(--noche); }
/* la miniatura grande, centrada sobre el logo; el texto de ese bloque se estrecha para no pisarla */
.v-texto--medio { left: 65%; top: 52%; translate: -50% -50%; width: min(54vw, 1040px); max-width: none; }
.v-texto--medio .pieza { margin: 0; max-width: none; }
.v-texto--estrecho { max-width: min(24rem, 25vw); }
/* miniatura: solo la imagen, con esquinas redondas; "Verla →" asoma al poner el cursor */
.pieza--miniatura { position: relative; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.6s ease; }
.pieza--miniatura:hover, .pieza--miniatura:focus-visible { transform: scale(1.04); box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(190, 222, 243, 0.35); }
.v-texto .pieza--miniatura .miniatura__ir { position: absolute; margin: 0; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 999px; background: rgba(6, 6, 9, 0.7); color: var(--blanco);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; translate: 0 6px; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(.2,.7,.2,1); }
.v-texto .pieza--miniatura:hover .miniatura__ir, .v-texto .pieza--miniatura:focus-visible .miniatura__ir { opacity: 1; translate: 0 0; }
.navegador__puntos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.motion__pantalla { height: clamp(150px, 15vw, 210px); }
.marca__celda { min-height: 78px; padding: 12px; }
/* el tablero de marca se arma al llegar */
.pieza--marca .marca__celda { opacity: 0; transform: translateY(24px) scale(0.86); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.3,1.5,.5,1); }
.v-texto.activo .pieza--marca .marca__celda { opacity: 1; transform: none; }
.v-texto.activo .pieza--marca .marca__celda:nth-child(2) { transition-delay: 0.12s; } .v-texto.activo .pieza--marca .marca__celda:nth-child(3) { transition-delay: 0.24s; } .v-texto.activo .pieza--marca .marca__celda:nth-child(4) { transition-delay: 0.36s; }
/* The 1%: comparador (en la galería blanca) */
.caso-tabs { margin-top: 1.1rem; }
.caso-tab { color: var(--noche); border-color: rgba(6, 6, 9, 0.35); }
.caso-tab:hover { border-color: var(--noche); }
.caso-tab.activo { background: var(--noche); color: var(--blanco); border-color: var(--noche); }
/* sin caja ni borde: los cuatro lados se desvanecen (máscara con difuminado) y el comparador es más grande */
.comparar { margin-top: 0.8rem; box-shadow: none; border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.comparar .comparar__etiqueta { bottom: 15%; } .comparar__antes .comparar__etiqueta { left: 11%; } .comparar__despues .comparar__etiqueta { right: 11%; }
#v-caso { width: min(64rem, 52vw); max-width: none; }
/* las dos webs del Lab: más grandes y sin caja, con los cuatro lados desvanecidos */
.v-texto--ancho:has(.vistas) { width: min(70rem, 58vw); max-width: none; }
.vistas { gap: 6px; }
.vista__marco, .vista.nitida .vista__marco { border-radius: 0; box-shadow: none; background: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.vista__pie { padding: 0 10%; margin-top: 2px; }
#v-caso .v-parrafo { max-width: 34rem; }
/* Vistas previas de las webs: a través de luz líquida; nítidas al parar el cursor */
.vistas { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.vista { display: block; color: var(--noche); text-decoration: none; }
.vista__marco { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--noche);
  box-shadow: 0 24px 60px -28px rgba(6, 6, 9, 0.6); transition: transform 0.7s cubic-bezier(.2,.7,.2,1), box-shadow 0.7s ease; }
.vista__marco img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: url(#liquido-0) saturate(0.75) brightness(0.9); transition: scale 0.9s cubic-bezier(.2,.7,.2,1); scale: 1.06; }
.vistas li:nth-child(2) .vista__marco img { filter: url(#liquido-1) saturate(0.75) brightness(0.9); }
/* el velo de luz: reflejos azul polvo que se mueven sobre la vista */
.vista__luz { position: absolute; inset: -30%; background:
    radial-gradient(40% 30% at 30% 35%, rgba(190, 222, 243, 0.55), transparent 70%),
    radial-gradient(35% 28% at 70% 65%, rgba(27, 63, 191, 0.5), transparent 70%),
    radial-gradient(22% 18% at 60% 25%, rgba(255, 255, 255, 0.5), transparent 70%);
  mix-blend-mode: screen; animation: vista-luz 9s ease-in-out infinite alternate; transition: opacity 0.7s ease; }
.vistas li:nth-child(2) .vista__luz { animation-duration: 11s; animation-direction: alternate-reverse; }
@keyframes vista-luz { from { transform: translate(-6%, -4%) rotate(0deg); } to { transform: translate(6%, 5%) rotate(14deg); } }
.vista.nitida .vista__marco { transform: scale(1.06); box-shadow: 0 34px 80px -26px rgba(6, 6, 9, 0.7), 0 0 0 1px rgba(6, 6, 9, 0.12); }
.vista.nitida .vista__marco img { filter: none; scale: 1; }
.vista.nitida .vista__luz { opacity: 0; }
.vista__pie { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.6rem; }
.vista__pie .dato { font-size: 0.6rem; }
.vista__ir { opacity: 0.55; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(.2,.7,.2,1); }
.vista.nitida .vista__ir { opacity: 1; translate: 6px 0; }
.v-filtros { position: absolute; }

/* --- Todo lo que es vista previa o comparación se muestra con las partículas de la marca (lienzos en recursos.js) --- */
.vista__marco img { filter: none; scale: 1; }
.vistas li:nth-child(2) .vista__marco img { filter: none; }
.vista__puntos, .comparar__puntos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.comparar__linea { background: none; box-shadow: none; }           /* la frontera ya no es una línea: es una franja de partículas */
/* motion: sin caja ni borde. Detrás de las partículas, un velo oscuro que se desvanece hacia los lados (máscara de opacidad) */
.v-texto--motion { left: 38%; top: 52%; width: min(58vw, 1120px); }
.pieza--motion { padding: 0; border: 0; border-radius: 0; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(6, 6, 9, 0.78) 0%, rgba(6, 6, 9, 0.6) 45%, rgba(6, 6, 9, 0.25) 75%, rgba(6, 6, 9, 0) 100%); }
.v-texto.activo .pieza--motion { pointer-events: none; }
.motion__lienzo { display: block; width: 100%; aspect-ratio: 16 / 8; }

@media (max-width: 700px) {
  /* en el móvil no caben junto al logo: de momento se muestran solo los textos */
  .v-texto .pieza, .v-texto .comparar, .v-texto .caso-tabs, .vistas { display: none; }
  .v-texto--izq, .v-texto--der, .v-texto--ancho { translate: none; max-width: none; }
  .v-texto--medio { display: none; }
  .v-nav { padding: 20px 16px; }
  .v-texto--izq, .v-texto--der { left: 16px; right: 16px; top: auto; bottom: 12vh; margin: 0; text-align: left; max-width: none; }
  .v-texto--centro { top: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .v-texto { transition: opacity 0.6s ease; filter: none; transform: none; letter-spacing: 0; }
  .v-texto--centro { transform: translateX(-50%); }
}

/* ================= Hologramas (orden de Santiago, 14 nov 2026; vale para todo el proyecto) =================
   Nada lleva caja, borde ni esquinas: cada pieza flota sobre el mundo, con los lados desvanecidos y un leve vaivén. */
.pieza, .pieza--miniatura, .pieza--miniatura:hover, .pieza--miniatura:focus-visible, .brief, .panel { border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.pieza__pie, .navegador__barra { border: 0; }
.pieza:not(.pieza--motion), .comparar, .vistas { animation: flota 7s ease-in-out infinite; }
.vistas li:nth-child(2) { animation: flota 8.5s ease-in-out -3s infinite; }
@keyframes flota { 50% { translate: 0 -7px; } }
/* máscara: los cuatro lados se desvanecen */
.navegador__pantalla, .pieza--marca, .pieza--geo {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.navegador__pantalla { background: none; }
/* lo de verdad (el vídeo, la captura) solo aparece al poner el cursor; en reposo se ven solo las partículas */
.navegador__video, .vista__marco img { opacity: 0; transition: opacity 0.5s ease; }
.definida .navegador__video, .vista.definida .vista__marco img { opacity: 1; }
/* líneas de holograma, muy tenues */
.navegador__pantalla::after, .vista__marco::after, .comparar::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(190, 222, 243, 0.09) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
/* el chat y el formulario: sin caja; detrás, un velo oscuro que se funde con el mundo */
.pieza--geo, .pieza--marca { padding: 26px 30px; }
.pieza--geo { background: radial-gradient(ellipse closest-side, rgba(6, 6, 9, 0.7), rgba(6, 6, 9, 0.5) 60%, rgba(6, 6, 9, 0)); }
.geo__respuesta { background: none; border-left: 0; padding-left: 0; margin: 0 6px; }
.brief { padding: 34px 44px 30px; background: radial-gradient(ellipse closest-side, rgba(6, 6, 9, 0.74), rgba(6, 6, 9, 0.56) 62%, rgba(6, 6, 9, 0)); }
.brief input[type="text"], .brief input[type="email"], .brief input[type="tel"], .brief select { border: 0; border-radius: 0; background: rgba(190, 222, 243, 0.08); box-shadow: inset 0 -1px 0 rgba(190, 222, 243, 0.5); }
.brief .mal { box-shadow: inset 0 -2px 0 var(--naranja) !important; }
.marca__celda { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .pieza, .comparar, .vistas, .vistas li { animation: none; } }
/* contraste: los textos pequeños, algo más firmes */
.v-texto .dato { opacity: 0.92; }
.brief__nota, .campo .dato { opacity: 0.88; }
.vista__ir { opacity: 0.8; }
/* el comparador no puede ser más alto que la pantalla */
#v-caso .comparar { max-width: calc(48vh * 16 / 9); }

/* Aviso de cookies: abajo a la izquierda, sin caja (velo oscuro), no tapa el viaje */
.v-cookies { position: fixed; left: var(--margen); bottom: 4vh; z-index: 7; width: min(26rem, calc(100vw - 32px)); padding: 26px 30px; opacity: 0; translate: 0 14px; transition: opacity 0.5s ease, translate 0.5s cubic-bezier(.2,.7,.2,1);
  background: radial-gradient(ellipse closest-side, rgba(6, 6, 9, 0.9), rgba(6, 6, 9, 0.72) 65%, rgba(6, 6, 9, 0)); font-size: 0.9rem; line-height: 1.45; }
.v-cookies.visible { opacity: 1; translate: 0 0; }
.v-cookies p { margin: 0 0 14px; }
.v-cookies a { color: var(--azul-polvo); }
.v-cookies__botones { display: flex; gap: 10px; }
.v-cookies .v-boton { cursor: pointer; background: none; padding: 0.7em 1.2em; }
.v-cookies .v-boton--naranja { background: var(--naranja); color: var(--noche); text-transform: uppercase; letter-spacing: var(--track-dato); }
.brief__legal { margin-top: 6px; opacity: 0.75; }
@media (max-width: 700px) { .v-cookies { left: 16px; bottom: 16px; padding: 20px; } }