/* ==========================================================================
   FUYANG WEALTH · WEB v2 · la escena del inicio

   Va ENCIMA de site.css y hereda todo lo que el sitio ya tiene: la cabecera
   con el dock, el selector de idioma, los colores (papel #FAFAF9, naranja
   #D9581C, tinta #0E1013), la tipografía (Archivo / DM Sans / JetBrains Mono)
   y los botones (btn-acento, btn-primary). Aquí solo vive lo que la escena
   agrega, con prefijo v2- para no chocar.

   El hero está calcado del video de referencia del dueño, con medidas
   tomadas de un cuadro a resolución completa: palabra 1 arriba a la
   izquierda DETRÁS del contenedor, palabra 2 abajo a la derecha DELANTE,
   columna izquierda (rótulo, sello, botón), columna derecha (tarjeta y tres
   cifras alineadas a la derecha).
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.v2-viaje { height: 270vh; position: relative; }
.v2-escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--blanco); }

/* ---------- Las dos palabras ---------- */
.v2-p1, .v2-p2 { position: absolute; margin: 0; font-family: var(--display); font-weight: 600;
  font-size: min(10vw, 18.5vh); line-height: .86; letter-spacing: -.055em; color: var(--tinta); white-space: nowrap; will-change: transform, opacity; }
.v2-p1 { z-index: 1; left: var(--pad); top: 0; }      /* top lo calcula v2.js contra el contenedor */
.v2-p2 { z-index: 1; right: var(--pad); top: 0; pointer-events: none; }   /* detrás, metida bajo la base */

/* La sombra: capa 0, detrás de las palabras (capa 1) y del contenedor (2).
   Difusa, cae atrás y a la izquierda, como la del estudio. v2.js la ubica. */
.v2-sombra { position: absolute; z-index: 0; left: 0; top: 0; width: 400px; height: 300px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 16, 19, .24), rgba(14, 16, 19, .10) 55%, rgba(14, 16, 19, 0));
  filter: blur(22px); transform: skewX(-18deg); }

/* ---------- Columna izquierda ---------- */
.v2-desde { position: absolute; z-index: 3; left: var(--pad); top: 47vh; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--gris); }
.v2-sello { position: absolute; z-index: 3; left: calc(var(--pad) - 6px); top: 58vh; width: 92px; height: 92px; }
.v2-sello svg { width: 100%; height: 100%; overflow: visible; }
.v2-sello text { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; fill: var(--tinta); }
.v2-sello-giro { transform-origin: 60px 60px; transform-box: view-box; }
.v2-sello-play { fill: var(--naranja); }
.v2-cta { position: absolute; z-index: 5; left: var(--pad); bottom: 6vh; }

/* ---------- Columna derecha ---------- */
.v2-tarjeta { position: absolute; z-index: 3; right: var(--pad); top: calc(var(--nav-h) + 5vh); width: 196px; min-height: 92px;
  display: grid; grid-template-columns: 1fr 72px; background: #fff; border: 1px solid var(--regla); border-radius: var(--r-mini); overflow: hidden; text-decoration: none; }
.v2-tj-txt { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 12px; }
.v2-tj-txt svg { width: 18px; height: 14px; fill: var(--naranja); margin-bottom: 4px; }
.v2-tj-txt b { white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: -.01em; color: var(--tinta); }
.v2-tj-txt i { font-style: normal; font-family: var(--texto); font-size: 9.5px; color: var(--gris); line-height: 1.3; }
.v2-tarjeta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; background: var(--naranja); }
.v2-cifras { position: absolute; z-index: 3; right: var(--pad); top: 0; margin: 0; display: grid; gap: 2.2vh; text-align: right; }   /* top: v2.js */
.v2-cifras dt { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -.03em; color: var(--tinta); }
.v2-cifras dd { margin: 6px 0 0; font-family: var(--texto); font-weight: 500; font-size: 13px; color: var(--gris); white-space: nowrap; }

/* ---------- El contenedor. El aparejo viene DENTRO del render: nada se
   dibuja aparte. El render lleva transparencia propia (alfa sacada del negro), así es opaco de verdad: tapa lo que queda detrás. ---------- */
@property --r-hueco { syntax: '<length>'; inherits: true; initial-value: 0px; }
.v2-cont { --r-hueco: 0px; transition: --r-hueco .35s var(--t); position: absolute; z-index: 2; left: 50%; top: 0; width: min(80vw, 108vh); will-change: transform, opacity; }
.v2-cont img { width: 100%; height: auto; }
.v2-cont-a { position: absolute; inset: 0;
  /* el círculo del mouse: transparente adentro, el negro afuera */
  -webkit-mask-image: radial-gradient(circle var(--r-hueco, 0px) at var(--mx, 50%) var(--my, 50%), transparent 98%, #000 100%);
          mask-image: radial-gradient(circle var(--r-hueco, 0px) at var(--mx, 50%) var(--my, 50%), transparent 98%, #000 100%); }



/* ---------- Rótulos de la ficha técnica, como en el video ----------
   El ancla es la esquina del contenedor (ancho 0). Encima, un cuadrito de
   vidrio esmerilado sobre el esquinero; de él sale una línea en codo hacia
   afuera y el texto queda FUERA del contenedor, sin pisarlo. */
.v2-rotulo { position: absolute; width: 0; height: 0; opacity: 0; }
.r-cuadro { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 3px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(5px) saturate(1.2); -webkit-backdrop-filter: blur(5px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(14, 16, 19, .08), 0 6px 16px rgba(14, 16, 19, .12); }
.r-linea { position: absolute; width: 72px; height: 46px; border-color: var(--tinta); border-style: solid; border-width: 0;
  transform: scale(var(--l, 0)); }
.r-txt { position: absolute; margin: 0; width: max-content; font-family: var(--texto); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--tinta); }
/* arriba: la línea sube desde el cuadro y sale hacia el lado */
.v2-rotulo.arriba .r-linea { bottom: 17px; border-top-width: 1px; }
.v2-rotulo.arriba .r-txt { bottom: 52px; }
/* abajo: baja desde el cuadro y sale hacia el lado */
.v2-rotulo.abajo .r-linea { top: 17px; border-bottom-width: 1px; }
.v2-rotulo.abajo .r-txt { top: 52px; }
.v2-rotulo.izq .r-linea { right: 0; border-right-width: 1px; transform-origin: right; }
.v2-rotulo.izq .r-txt { right: 82px; text-align: right; }
.v2-rotulo.der .r-linea { left: 0; border-left-width: 1px; transform-origin: left; }
.v2-rotulo.der .r-txt { left: 82px; }

/* ---------- La banda: tablero del sitio, delgada ---------- */
.v2-banda.cierre { position: absolute; z-index: 6; left: 0; right: 0; top: 0; transform: translateY(110vh); will-change: transform; }
.v2-banda-in { position: relative; z-index: 1; }
.v2-banda .cierre-inner { max-width: none; min-height: 52vh; }   /* lo justo para tapar el contenedor entero */
.v2-banda h2 { max-width: 760px; font-size: clamp(24px, 2.7vw, 38px); }
.v2-banda-eti { margin: 0 0 10px; font-family: var(--texto); font-size: 14px; color: rgba(255,255,255,.82); }

/* ---------- La foto ---------- */
.v2-foto { position: absolute; z-index: 7; left: 0; top: 0; width: 0; height: 0; overflow: hidden; opacity: 0; will-change: clip-path; border-radius: 18px; }
.v2-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.v2-chevrones { position: absolute; z-index: 8; right: calc(max(24px, 4.5vw) + 32px); bottom: 5vh; width: clamp(96px, 10vw, 160px); fill: #fff; opacity: 0; }

/* ---------- Líneas: la imagen aparece flotando junto al cursor ----------
   Sin marco ni fondo: las ilustraciones y los contenedores van recortados y
   flotan con su propia sombra. La foto real de la inspección va con esquinas
   redondeadas. */
.v2-lineas { position: relative; padding: 120px var(--pad); background: var(--blanco); }
.v2-lineas-cab { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; margin-bottom: 56px; }
.v2-lineas-cab .eyebrow { margin: 0; }
.v2-lineas-cab h2 { grid-column: 2; margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -.03em; }
.v2-lineas-cab .btn-primary { grid-column: 2; justify-self: start; }
.v2-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regla); }
.v2-lista li { border-bottom: 1px solid var(--regla); }
.v2-lista a { display: grid; grid-template-columns: 1fr 1.4fr 40px; align-items: center; gap: 24px; padding: 26px 0; text-decoration: none; color: inherit; }
.v2-l-n { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; color: var(--gris); transition: color .25s; }
.v2-l-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.v2-l-tags i { font-style: normal; font-family: var(--texto); font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--regla-2); border-radius: var(--r-pill); color: var(--gris); }
.v2-l-f { justify-self: end; transition: transform .25s var(--t); }
.v2-lista li:hover .v2-l-n { color: var(--tinta); }
.v2-lista li:hover .v2-l-f { transform: translateX(4px); }
.v2-lista-foto { position: absolute; z-index: 4; left: 0; top: 0; width: 210px; height: 160px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(14, 16, 19, .18));
  opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .25s, transform .35s var(--t); }
.v2-lista-foto.es-foto { object-fit: cover; border-radius: var(--r); filter: none; box-shadow: 0 18px 40px -16px rgba(14,16,19,.35); }
.v2-lista-foto.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Cierre (aprobado por el dueño). Provisional: el costado del
   contenedor en CSS hasta el render del contenedor negro atravesado. ---------- */
.v2-cierre { position: relative; height: 90vh; min-height: 560px; overflow: hidden; background: linear-gradient(180deg, #5ea8e6 0%, #9fcdf1 55%, #d9ecfa 100%); }
.v2-cierre-marca { position: absolute; left: 50%; top: 6vh; transform: translateX(-50%); margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(90px, 20vw, 360px); line-height: .9; letter-spacing: -.05em; color: #fff; white-space: nowrap; }
.v2-cierre-cont { position: absolute; left: -4%; right: -4%; bottom: -6%; height: 56%; transform: rotate(-3deg); transform-origin: 0 100%;
  background: repeating-linear-gradient(90deg, #1b1e23 0 26px, #0e1013 26px 34px); }
.v2-cierre-txt { position: absolute; right: 12%; top: 50%; transform: rotate(-3deg); color: #fff; display: grid; gap: 18px; justify-items: start; }
.v2-cierre-txt h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.2vw, 64px); line-height: 1; letter-spacing: -.035em; }
.v2-cierre-txt .btn-primary { background: var(--naranja); border-color: var(--naranja); }

@media (max-width: 860px) {
  .v2-cont { width: 94vw; }
  .v2-tarjeta, .v2-desde, .v2-sello { display: none; }
  .v2-cifras { top: auto; bottom: 22vh; gap: 2vh; }
  .v2-cifras dt { font-size: 22px; }
  .v2-rotulo { font-size: 11px; }
  .v2-lineas-cab { grid-template-columns: 1fr; } .v2-lineas-cab h2, .v2-lineas-cab .btn-primary { grid-column: 1; }
  .v2-lista a { grid-template-columns: 1fr 30px; } .v2-l-tags { display: none; }
}

/* ==========================================================================
   CABECERA Y DOCK en la v2

   1) La barra va TRANSPARENTE: con el fondo gris de site.css cortaba el cable
      del contenedor justo debajo de ella. Ahora el cable la atraviesa hasta
      el borde superior, como en la referencia.
   2) El dock pasa a UNA cápsula compacta: los siete círculos de 44 px con su
      sombra cada uno (y la magnificación al pasar) ocupaban ~400 px y se
      montaban sobre el selector de idioma. Íconos de 36 px dentro de un solo
      contenedor translúcido; la página activa en naranja. ~290 px.
   Los !important vencen el ancho que dock.js escribe en línea al magnificar.
   ========================================================================== */
.nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.nav.nav--scrolled { background: transparent; box-shadow: none; border-bottom-color: transparent; }




/* Pasada la escena del contenedor, la cabecera recupera su fondo: sin él, el
   contenido corre por debajo del nombre de la marca. */
.nav.v2-nav-fondo { background: rgba(250, 250, 249, .88); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); transition: background .3s; }

/* ==========================================================================
   LA CUADRÍCULA (bento) · como la referencia del dueño
   Cuadros blancos, filete fino, título arriba a la izquierda y un "lienzo"
   gris claro con el contenido. Todo crece con el texto: nada de anchos fijos
   que corten el inglés o el chino, ni el texto que reescribe el traductor de
   Google.
   ========================================================================== */
.bt { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border-radius: 22px;
  background: #fff; border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; overflow: hidden; }
.bt-tit { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(16px, 1.25vw, 20px); letter-spacing: -.02em; line-height: 1.15; }
.bt-sub { margin: -4px 0 0; font-family: var(--texto); font-size: 13px; line-height: 1.4; color: var(--gris); }
.bt-lienzo { position: relative; flex: 1; min-height: 0; border-radius: 16px; background: var(--papel); border: 1px solid rgba(14,16,19,.05);
  display: grid; place-items: center; padding: 14px; overflow: hidden; }
.bt-lienzo > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bt-enlace { font-family: var(--texto); font-weight: 600; font-size: 14px; color: var(--naranja-osc); }

/* La cuadrícula dentro de la escena (posición: la del cuadro de la foto). */
.v2-bento { position: absolute; z-index: 8; left: 0; top: 0; width: 0; height: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); pointer-events: none; }
.v2-bento.activa { pointer-events: auto; }
.v2-bento > .bt { opacity: 0; transform: translateY(24px); }
.bt-foto { grid-column: 1 / 8; grid-row: 1; background: transparent; border-color: transparent; justify-content: flex-end; }
.bt-foto .bt-tit-claro { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.bt-laptop { grid-column: 8 / 13; grid-row: 1; }
.bt-movil { grid-column: 1 / 5; grid-row: 2; }
.bt-movil .bt-lienzo { padding: 8px 8px 0; align-items: end; }
.bt-avisos { grid-column: 5 / 9; grid-row: 2; }
.bt-etapas { grid-column: 9 / 13; grid-row: 2; }
/* Avisos: burbujas oscuras como notificaciones del celular */
.bt-avisos .bt-lienzo { display: grid; align-content: center; gap: 8px; place-items: stretch; }
.aviso { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tinta); color: #fff; }
.av-ico { flex: 0 0 26px; height: 26px; border-radius: 7px; background: var(--naranja) center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='white'%3E%3Cpath d='M17 2 3 16l14 14h8L11 16 25 2z'/%3E%3Cpath d='M31 2 17 16l14 14h8L25 16 39 2z'/%3E%3C/svg%3E"); }
.aviso b { display: block; font-family: var(--texto); font-size: 13px; font-weight: 600; }
.aviso i { display: block; font-style: normal; font-family: var(--texto); font-size: 11.5px; opacity: .7; }
/* Etapas: la línea pasa exacta por el centro de cada punto */
.bt-etapas .bt-lienzo { place-items: stretch; align-content: center; gap: 14px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.etapas::before { content: ''; position: absolute; left: 10%; right: 10%; top: 5px; height: 1px; background: rgba(14,16,19,.18); }
.etapas li { position: relative; padding-top: 18px; text-align: center; font-family: var(--texto); font-size: 11.5px; line-height: 1.25; color: var(--gris); }
.etapas li::before { content: ''; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; border: 1px solid rgba(14,16,19,.3); box-sizing: border-box; }
.etapas li.ok::before { background: var(--tinta); border-color: var(--tinta); }
.etapas li.ahora { color: var(--tinta); font-weight: 600; }
.etapas li.ahora::before { background: var(--naranja); border-color: var(--naranja); box-shadow: 0 0 0 4px var(--naranja-suave); }
.et-dato { margin: 0; text-align: center; font-family: var(--texto); font-size: 12.5px; color: var(--tinta-2); }

/* Segunda cuadrícula, en el flujo */
.v2-mas { padding: 120px var(--pad) 40px; background: var(--blanco); }
.v2-mas-cab { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; margin-bottom: 40px; }
.v2-mas-cab .eyebrow { margin: 0; }
.v2-mas-cab h2 { grid-column: 2; margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -.03em; }
.v2-bento2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.v2-bento2 .bt { min-height: 300px; }
.bt-3d { grid-column: 1 / 8; grid-row: span 2; }
.bt-3d .bt-lienzo img { max-height: 300px; }
.bt-docs { grid-column: 8 / 13; }
.bt-cuenta { grid-column: 8 / 13; }
.bt-servicios { grid-column: 1 / 13; min-height: 0 !important; }
.bt-docs .bt-lienzo { place-items: stretch; align-content: center; gap: 8px; }
.bt-cuenta .bt-lienzo { place-items: stretch; align-content: center; gap: 10px; }
.cu-cifra { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.03em; }
.cu-cifra small { font-family: var(--texto); font-weight: 500; font-size: 14px; color: var(--gris); letter-spacing: 0; }
.cu-barra { height: 8px; border-radius: 999px; background: rgba(14,16,19,.08); overflow: hidden; }
.cu-barra span { display: block; height: 100%; border-radius: inherit; background: var(--naranja); }
.cu-pie { margin: 0; font-family: var(--texto); font-size: 12.5px; color: var(--gris); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; place-items: center; justify-content: flex-start; align-content: center; }
.chips span { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--regla-2); font-family: var(--texto); font-size: 13.5px; }
@media (max-width: 860px) {
  .v2-mas-cab { grid-template-columns: 1fr; } .v2-mas-cab h2 { grid-column: 1; }
  .v2-bento2 > .bt { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ==========================================================================
   ¿POR QUÉ FUYANG? · tres tarjetas, la del centro con foto a todo el alto
   Crecen con el texto (inglés, chino, traductor de Google): sin altos fijos.
   ========================================================================== */
.v2-porque { padding: 120px var(--pad); background: var(--blanco); text-align: center; }
.pq-pildora { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--regla-2);
  font-family: var(--texto); font-size: 13.5px; color: var(--tinta); }
.pq-pildora span { color: var(--naranja); }
.v2-porque h2 { margin: 0 auto 12px; max-width: 18ch; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.035em; }
.pq-sub { margin: 0 auto 48px; max-width: 46ch; font-family: var(--texto); font-size: 16px; color: var(--gris); }
.pq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; text-align: left; }
.pq-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 26px; background: var(--papel-2); overflow: hidden; min-height: 440px; }
.pq-ico { width: 26px; height: 26px; fill: none; stroke: var(--naranja); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.pq-card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.pq-txt { margin: 0 0 14px; font-family: var(--texto); font-size: 14px; line-height: 1.45; color: var(--gris); }
.pq-ui { margin-top: auto; padding: 16px; border-radius: 18px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.pq-ui-tit { margin: 0; font-family: var(--texto); font-weight: 600; font-size: 14.5px; }
.pq-ui-sub { margin: -6px 0 0; font-family: var(--texto); font-size: 12.5px; color: var(--gris); }
.pq-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pq-check li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--papel);
  font-family: var(--texto); font-size: 13.5px; }
.pq-check li::after { content: '✓'; flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--naranja); }
.pq-ui-btn { display: block; text-align: center; padding: 11px; border-radius: 999px; background: var(--papel); font-family: var(--texto); font-weight: 600; font-size: 13.5px; }
.pq-recibo { align-items: center; text-align: center; }
.pq-ok { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; font-size: 20px; }
.pq-res { width: 100%; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--regla); display: grid; gap: 6px; }
.pq-res div { display: flex; justify-content: space-between; gap: 10px; font-family: var(--texto); font-size: 13px; }
.pq-res dt { color: var(--gris); } .pq-res dd { margin: 0; font-weight: 600; }
.pq-recibo .pq-ui-btn { width: 100%; }
/* Tarjeta central: la foto a todo el alto, el texto arriba sobre un velo */
.pq-foto { padding: 0; background: var(--tinta); }
.pq-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pq-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,19,.62) 0%, rgba(14,16,19,.2) 38%, rgba(14,16,19,0) 60%); }
.pq-foto-txt { position: relative; z-index: 1; padding: 24px; color: #fff; }
.pq-foto-txt .pq-ico { stroke: #fff; }
.pq-foto-txt .pq-txt { color: rgba(255,255,255,.85); }
@media (max-width: 860px) { .pq-grid { grid-template-columns: 1fr; } .pq-card { min-height: 380px; } }

.bt-sub-claro { position: relative; z-index: 2; color: rgba(255,255,255,.9); max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.bt-foto::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(0deg, rgba(14,16,19,.55), rgba(14,16,19,0) 55%); pointer-events: none; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bt-chips span { padding: 4px 10px; border-radius: 999px; background: var(--papel-2); font-family: var(--texto); font-size: 11.5px; color: var(--tinta-2); }

/* Documentos: ícono de PDF real, estado con visto y fecha, y en el pendiente
   los dos botones del portal. */
.doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--regla); }
.doc-ico { flex: 0 0 22px; height: 26px; fill: #fff; stroke: var(--naranja); stroke-width: 1.3; stroke-linejoin: round; }
.doc-ico text { fill: var(--naranja); stroke: none; font: 700 6px var(--texto); letter-spacing: .02em; }
.doc-n { flex: 1; min-width: 0; font-family: var(--texto); font-size: 13.5px; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
.doc-n i { font-style: normal; font-weight: 400; color: var(--gris); }
.doc em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-family: var(--texto); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(31,157,85,.1); color: #157a41; }
.doc em svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doc-pend { border-color: rgba(217,88,28,.35); box-shadow: 0 0 0 3px var(--naranja-suave); }
.doc-acc { display: flex; gap: 6px; }
.doc-btn { font-family: var(--texto); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--naranja); color: #fff; white-space: nowrap; }
.doc-btn.sec { background: transparent; color: var(--tinta-2); border: 1px solid var(--regla-2); }
.doc-pie { margin: 4px 2px 0; font-family: var(--texto); font-size: 12.5px; color: var(--gris); }
.doc-pie b { color: var(--tinta); font-weight: 600; }

/* Sombra de contacto pegada al contenedor (la del suelo va aparte, detrás de las palabras) */
.v2-cont { filter: drop-shadow(0 30px 28px rgba(14,16,19,.18)) drop-shadow(0 6px 8px rgba(14,16,19,.12)); }
/* Marcos tipo Apple: filete fino + borde interior claro + sombra corta */
.bt { border: 1px solid rgba(14,16,19,.08); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(14,16,19,.04), 0 12px 32px -18px rgba(14,16,19,.18); }
.bt-lienzo, .bt-collage img { border: 1px solid rgba(14,16,19,.06); }
/* Collage del visor 3D */
.bt-collage { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 300px; }
.bt-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; transition: transform .6s var(--t); }
.bt-collage .cg-a { grid-row: 1 / 3; }
.bt-3d:hover .bt-collage img { transform: scale(1.02); }
.bt-collage { flex: none; grid-template-rows: repeat(2, 150px); min-height: 0; }
.bt-collage img { min-height: 0; }

/* Collage: llena todo el alto de la tarjeta, sin blancos */
.bt-3d .bt-collage { flex: 1 1 0; min-height: 300px; grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
.bt-3d .bt-collage img { height: 100%; }

/* Franja inferior del héroe: llena el blanco sin competir con las palabras */
.v2-pie { position: absolute; z-index: 3; left: calc(var(--pad) + 250px); right: var(--pad); bottom: 7vh; margin: 0; padding: 18px 0 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 28px; border-top: 1px solid rgba(14,16,19,.1); }
.v2-pie li { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-2, #4a4f57); }
.v2-pie b { font-weight: 600; color: var(--tinta, #0E1013); font-size: 13px; }
.v2-pie-baja { align-content: center; justify-items: center; gap: 8px !important; font-size: 12px; }
.v2-pie-baja i { width: 1px; height: 26px; background: linear-gradient(var(--naranja), transparent); animation: v2baja 1.8s ease-in-out infinite; }
@keyframes v2baja { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (max-width: 1100px) { .v2-pie { display: none; } }
@media (prefers-reduced-motion: reduce) { .v2-pie-baja i { animation: none; } }

.v2-pie-baja button { display: grid; justify-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 12px; color: inherit; cursor: pointer; transition: background .2s, color .2s; }
.v2-pie-baja button:hover { background: rgba(14,16,19,.05); color: var(--tinta, #0E1013); }
.v2-pie-baja button:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
/* Tarjeta del retrato: más baja y alargada, la frase completa en una línea */
.v2-tarjeta { width: 248px; min-height: 0; height: 66px; grid-template-columns: 1fr 66px; }
.v2-tj-txt { gap: 1px; padding: 8px 12px; }
.v2-tj-txt svg { width: 14px; height: 11px; margin-bottom: 2px; }
.v2-tj-txt i { white-space: nowrap; font-size: 10px; }
/* Indicador de deslizar: óvalo de línea fina con un punto que baja (estilo Apple) */
.v2-pie-baja button { gap: 7px; padding: 4px 8px; color: var(--gris, #6B7079); font-size: 11px; letter-spacing: .02em; }
.v2-pie-baja button:hover { background: none; color: var(--tinta, #0E1013); }
.v2-pie-baja .v2-raton { position: relative; width: 20px; height: 32px; border: 1.5px solid currentColor; border-radius: 12px;
  background: none; animation: none; opacity: .75; transition: opacity .2s; }
.v2-pie-baja button:hover .v2-raton { opacity: 1; }
.v2-raton::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px;
  background: var(--naranja); animation: v2raton 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes v2raton { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v2-raton::after { animation: none; opacity: 1; } }

.v2-cont img { filter: none; }
/* Contenedor blanco: misma sombra, más marcada, para que se lea igual que la del negro */
.v2-cont.es-blanco { filter: drop-shadow(0 34px 30px rgba(14,16,19,.30)) drop-shadow(0 8px 10px rgba(14,16,19,.20)) drop-shadow(0 0 1px rgba(14,16,19,.25)); }
/* Collage: tres fotos quietas, mismo marco y mismo radio */
.bt-3d .bt-collage img { border: 1px solid rgba(14,16,19,.08); border-radius: 14px; transform: none !important; transition: none; box-sizing: border-box; }
.bt-3d .bt-collage img { padding: 0 !important; margin: 0; background: none; }
/* Cierre: el contenedor real cruza en diagonal; nombre en el cielo, botón sobre la pared lisa */
.v2-cierre { height: auto; min-height: 0; aspect-ratio: 16 / 9; max-height: 100vh; background: #5f9fe4; }
.v2-cierre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.v2-cierre-marca { z-index: 1; top: 4%; font-size: clamp(70px, 15vw, 250px); }
.v2-cierre-txt { z-index: 1; transform: none; top: auto; bottom: 10%; right: 7%; }
.v2-cierre-txt h2 { font-size: clamp(26px, 3.2vw, 52px); }
@media (max-width: 860px) { .v2-cierre { aspect-ratio: 4 / 5; } .v2-cierre-foto { object-position: 30% 100%; } .v2-cierre-txt { left: 7%; right: auto; } }
/* Tarjeta del retrato, versión final: logo junto al nombre, márgenes parejos, foto con su propio radio */
.v2-tarjeta { width: 244px; height: 64px; padding: 6px; gap: 0; grid-template-columns: 1fr 52px; align-items: center;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(14,16,19,.04), 0 8px 24px -14px rgba(14,16,19,.18); }
.v2-tj-txt { padding: 0 10px 0 8px; gap: 3px; justify-content: center; min-width: 0; }
.v2-tj-fila { display: flex; align-items: center; gap: 7px; }
.v2-tj-fila svg { width: 13px; height: 11px; margin: 0; flex: none; }
.v2-tj-txt b { font-size: 13px; line-height: 1.1; }
.v2-tj-txt i { font-size: 11px; line-height: 1.2; padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-tarjeta img { width: 52px; height: 52px; border-radius: 9px; }

/* ========== Animaciones cíclicas de las tarjetas de la plataforma (breves, sobrias) ========== */
/* En tiempo real: los tres avisos entran uno tras otro, se quedan y el ciclo vuelve a empezar */
.bt-avisos .bt-lienzo { overflow: hidden; }
.aviso { min-width: 0; }
.aviso > span:last-child { min-width: 0; }
.aviso b, .aviso i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-avisos .aviso { animation: v2aviso 7s cubic-bezier(.2,.8,.2,1) infinite both; }
.bt-avisos .aviso:nth-child(2) { animation-delay: .6s; }
.bt-avisos .aviso:nth-child(3) { animation-delay: 1.2s; }
@keyframes v2aviso { 0% { opacity: 0; transform: translateY(-14px) scale(.97); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* Documentos: el packing list se aprueba solo y vuelve a quedar pendiente */
.doc-estado { display: grid; justify-items: end; }
.doc-estado > * { grid-area: 1 / 1; }
.doc-acc { animation: v2acc 6s ease infinite; }
.doc-ya { opacity: 0; animation: v2ya 6s ease infinite; }
.doc-pend { animation: v2pend 6s ease infinite; }
.doc-acc .doc-btn:last-child { animation: v2pulso 6s ease infinite; }
@keyframes v2acc { 0%, 38% { opacity: 1; transform: none; } 46%, 92% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; } }
@keyframes v2ya { 0%, 42% { opacity: 0; transform: translateX(6px); } 50%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes v2pend { 0%, 42% { border-color: rgba(217,88,28,.35); box-shadow: 0 0 0 3px var(--naranja-suave); } 50%, 90% { border-color: rgba(14,16,19,.08); box-shadow: none; } 100% { border-color: rgba(217,88,28,.35); box-shadow: 0 0 0 3px var(--naranja-suave); } }
@keyframes v2pulso { 0%, 28%, 40%, 100% { transform: none; } 34% { transform: scale(.93); } }

/* Cuenta: la barra se llena como cuando se registra un abono */
.cu-barra span { animation: v2abono 6s cubic-bezier(.3,.7,.2,1) infinite; transform-origin: left; }
@keyframes v2abono { 0%, 10% { transform: scaleX(.62); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.62); } }

@media (prefers-reduced-motion: reduce) {
  .bt-avisos .aviso, .doc-acc, .doc-ya, .doc-pend, .doc-acc .doc-btn, .cu-barra span { animation: none; }
}
@media (max-width: 860px) {
  .v2-cierre-marca { top: 3%; }
  .v2-cierre-txt { top: calc(4% + 15vw + 18px); bottom: auto; left: 7%; right: 7%; gap: 12px; }
  .v2-cierre-txt h2 { color: #fff; }
}
/* Cierre sin palabra gigante: frase y botón arriba, en el cielo, centrados */
.v2-cierre-txt { top: 11%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); justify-items: center; text-align: center; gap: 20px; }
.v2-cierre-txt h2 { font-size: clamp(32px, 4.4vw, 68px); }
@media (max-width: 860px) { .v2-cierre-txt { top: 8%; left: 50%; right: auto; width: 86%; } }
/* Cierre minimalista, alineado a la derecha en el cielo */
.v2-cierre-txt { top: 12%; left: auto; right: 7%; transform: none; justify-items: end; text-align: right; gap: 16px; width: auto; }
.v2-cierre-txt h2 { font-size: clamp(26px, 2.8vw, 44px); font-weight: 600; letter-spacing: -.03em; }
.v2-cierre-txt .btn-primary { padding: 10px 18px; font-size: 13px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, color .2s; }
.v2-cierre-txt .btn-primary:hover { background: #fff; color: var(--tinta, #0E1013); border-color: #fff; }
@media (max-width: 860px) { .v2-cierre-txt { top: 8%; right: 7%; left: auto; width: auto; } }
.v2-cierre-txt .btn-primary { background: var(--naranja); border-color: var(--naranja); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 18px -8px rgba(160,60,10,.55); }
.v2-cierre-txt .btn-primary:hover { background: var(--naranja-osc, #B9461A); border-color: var(--naranja-osc, #B9461A); color: #fff; }

/* ===== Demo del visor 3D (la tarjeta grande): se llena el contenedor en bucle ===== */
.bt-demo3d { flex: 1 1 0; min-height: 320px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }
.d3-visor { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--papel-2, #F6F5F2); border: 1px solid rgba(14,16,19,.06); min-width: 0; }
.d3-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--gris, #6B7079); }
.d3-ref { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; color: var(--tinta, #0E1013); }
.d3-vivo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,16,19,.08); }
.d3-vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--naranja); animation: v2latido 1.6s ease-in-out infinite; }
@keyframes v2latido { 50% { opacity: .3; } }
.d3-cont { width: 100%; height: auto; flex: 1; min-height: 0; }
.d3-caja { fill: #fff; stroke: #0E1013; stroke-width: 1.5; }
.d3-fondo { fill: none; stroke: rgba(14,16,19,.35); stroke-width: 1.2; }
.d3-cont circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: v2rollo 9s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i) * 45ms); }
.r-cli { fill: #2a2d33; stroke: #0E1013; }
.r-sua { fill: var(--naranja); stroke: #b84a16; animation-delay: calc(1.2s + var(--i) * 45ms) !important; }
@keyframes v2rollo { 0% { opacity: 0; transform: translateY(-8px) scale(.6); } 6%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.9); } }
.d3-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.d3-datos p { margin: 0; display: grid; gap: 2px; padding: 10px 12px; background: #fff; border-radius: 10px; border: 1px solid rgba(14,16,19,.06); }
.d3-datos b { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.d3-n2 { color: var(--naranja); }
.d3-datos small { font-size: 11.5px; color: var(--gris, #6B7079); }
.d3-barra { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(14,16,19,.08); }
.d3-barra span { height: 100%; transform-origin: left; animation: v2barra 9s cubic-bezier(.3,.7,.2,1) infinite; }
.d3-b-cli { width: 64%; background: #2a2d33; }
.d3-b-sua { width: 35%; background: var(--naranja); animation-delay: 1.4s !important; }
@keyframes v2barra { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.d3-pie { margin: 0; font-size: 12px; color: var(--gris, #6B7079); line-height: 1.4; }
.d3-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid rgba(14,16,19,.08); display: block; min-height: 0; }
@media (max-width: 860px) { .bt-demo3d { grid-template-columns: 1fr; } .d3-foto { height: 200px; } }
@media (prefers-reduced-motion: reduce) { .d3-cont circle, .d3-barra span, .d3-vivo i { animation: none; opacity: 1; transform: none; } }
/* Cambio negro → blanco: fundido suave, no corte seco */
.v2-cont-a { transition: opacity .6s cubic-bezier(.4,0,.2,1); }
.v2-cont { transition: --r-hueco .35s var(--t), filter .6s cubic-bezier(.4,0,.2,1); }
/* Todo blanco: nada de fondos crema dentro de las tarjetas; solo filete gris y sombra mínima */
.bt-lienzo, .pq-card, .pq-check li, .pq-ui-btn, .d3-visor { background: #fff !important; }
.bt-lienzo { border: 1px solid rgba(14,16,19,.07); box-shadow: 0 1px 2px rgba(14,16,19,.03), 0 6px 18px -12px rgba(14,16,19,.12); }
.bt-chips span { background: #fff; border: 1px solid rgba(14,16,19,.1); }
.pq-card { border: 1px solid rgba(14,16,19,.07); box-shadow: 0 10px 30px -18px rgba(14,16,19,.18); }
.pq-check li, .pq-ui-btn { border: 1px solid rgba(14,16,19,.08); }
/* Cabecera de sección: centrada y apilada (eyebrow → título → bajada) */
.v2-mas-cab { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; max-width: 760px; margin: 0 auto 48px; }
.v2-mas-cab h2 { grid-column: 1; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.v2-mas-lead { margin: 4px 0 0; font-family: var(--texto); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--gris); max-width: 56ch; }
/* Tarjetas: título y bajada con jerarquía clara y aire constante */
.bt { padding: 22px; gap: 0; }
.bt-tit { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.15; }
.bt-sub { margin: 6px 0 16px; font-size: 14px; line-height: 1.45; max-width: 60ch; }
.bt-enlace { margin-top: 14px; }
/* Banda naranja más delgada */
.v2-banda .cierre-inner { min-height: 30vh; padding-top: 40px; padding-bottom: 40px; }

/* ===== Demos de la plataforma (reemplazan las fotos de la tarjeta grande) ===== */
.bt-demos .bt-collage { display: none; }
.dm-rejilla { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 12px; }
.dm { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.dm-buscar { grid-column: 1 / 3; }
.dm-eti { margin: 0; font-family: var(--texto); font-size: 12px; font-weight: 600; color: var(--gris); }
.dm-nota { margin: 0; font-family: var(--texto); font-size: 12px; color: var(--gris); line-height: 1.4; }
/* buscar */
.dm-campo { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(14,16,19,.12); box-shadow: 0 0 0 3px rgba(217,88,28,.08); }
.dm-campo svg { width: 18px; height: 18px; fill: none; stroke: var(--gris); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.dm-tecleo { font-family: var(--mono, ui-monospace, monospace); font-size: 14px; color: var(--tinta); white-space: nowrap; overflow: hidden; width: 0; animation: dmTeclea 7s steps(13, end) infinite; }
.dm-cursor { width: 1.5px; height: 18px; background: var(--naranja); animation: dmCursor .9s step-end infinite; }
@keyframes dmTeclea { 0%, 6% { width: 0; } 34%, 90% { width: 13ch; } 100% { width: 0; } }
@keyframes dmCursor { 50% { opacity: 0; } }
.dm-res { display: grid; gap: 8px; }
.dm-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(14,16,19,.08); font-family: var(--texto); font-size: 13.5px;
  opacity: 0; transform: translateY(6px); animation: dmRes 7s cubic-bezier(.2,.8,.2,1) infinite; }
.dm-fila b { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; }
.dm-fila span { flex: 1; min-width: 0; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-fila mark { background: var(--naranja-suave, #FBE7DC); color: var(--tinta); border-radius: 4px; padding: 0 3px; }
.dm-fila em { font-style: normal; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: #FFF3EA; color: #A8410F; white-space: nowrap; }
@keyframes dmRes { 0%, 38% { opacity: 0; transform: translateY(6px); } 44%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* ruta */
.dm-cifra { margin: 0; font-family: var(--texto); font-size: 14px; color: var(--gris); }
.dm-cifra b { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -.03em; color: var(--tinta); line-height: 1; }
.dm-linea { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-family: var(--texto); font-size: 11.5px; color: var(--tinta-2); margin-top: auto; }
.dm-pista { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(14,16,19,.25) 0 4px, transparent 4px 8px); }
.dm-pista::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--naranja); animation: dmPista 8s cubic-bezier(.45,0,.25,1) infinite; }
.dm-barco { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 0 4px rgba(217,88,28,.18); animation: dmBarco 8s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes dmPista { 0% { width: 0; } 70%, 92% { width: 58%; } 100% { width: 0; } }
@keyframes dmBarco { 0% { left: 0; } 70%, 92% { left: 58%; } 100% { left: 0; } }
/* días libres */
.dm-anillo { position: relative; width: 132px; height: 132px; margin: 4px auto; }
.dm-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dm-fondo-a, .dm-arco { fill: none; stroke-width: 9; }
.dm-fondo-a { stroke: rgba(14,16,19,.08); }
.dm-arco { stroke: var(--naranja); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; animation: dmArco 8s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes dmArco { 0% { stroke-dashoffset: 314; } 30%, 90% { stroke-dashoffset: 42; } 100% { stroke-dashoffset: 314; } }
.dm-anillo p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.dm-anillo b { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.dm-anillo small { font-family: var(--texto); font-size: 11.5px; color: var(--gris); }
@media (max-width: 860px) { .dm-rejilla { grid-template-columns: 1fr; } .dm-buscar { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dm-tecleo { animation: none; width: 13ch; } .dm-fila { animation: none; opacity: 1; transform: none; }
  .dm-pista::before, .dm-barco, .dm-arco, .dm-cursor { animation: none; } .dm-pista::before { width: 58%; } .dm-barco { left: 58%; } .dm-arco { stroke-dashoffset: 42; }
}
.bt-lienzo.dm { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; text-align: left; place-items: stretch !important; }
.dm-linea { width: 100%; }
.dm-libres .dm-nota { text-align: center; }
.dm-libres .dm-anillo { margin-top: auto; margin-bottom: auto; }
/* Demos compactas: sin alto forzado, cada panel mide lo que su contenido */
.bt-demos { align-self: start; }
.dm-rejilla { flex: none; grid-template-rows: auto auto; gap: 10px; }
.bt-lienzo.dm { flex: none; padding: 14px 16px; gap: 10px; }
.dm-res { gap: 6px; }
.dm-fila { padding: 8px 10px; }
.dm-cifra b { font-size: 32px; }
.dm-linea { margin-top: 2px; }
.dm-libres { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
.dm-libres .dm-anillo { width: 84px; height: 84px; margin: 0; flex: none; }
.dm-libres .dm-anillo b { font-size: 24px; }
.dm-libres .dm-anillo small { font-size: 10px; }
.dm-libres > div:last-child, .dm-libres .dm-txt { display: grid; gap: 4px; }
.dm-libres .dm-nota { text-align: left; }
/* Logo real de Fuyang (cuadro negro con 中 y barra superior) */
.v2-tj-fila .v2-logo { width: 13px; height: 16px; fill: #0E1013; flex: none; }
.av-ico { background: #fff url("../v2/logo-fuyang.svg") center / 13px auto no-repeat; }
.v2-chevrones { height: auto; width: clamp(56px, 5vw, 84px); }

/* ===== Rejilla 2×2 de funciones (inspiración: marco gris, panel blanco que sangra, texto debajo) ===== */
.fx-grid { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.fx { margin: 0; display: grid; gap: 0; align-content: start; }
.fx-marco { position: relative; height: 340px; overflow: hidden; border-radius: 22px; background: #F5F5F7; border: 1px solid rgba(14,16,19,.06); padding: 40px 0 0 64px; }
.fx-panel { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; background: #fff; border: 1px solid rgba(14,16,19,.08); border-right: 0; border-bottom: 0;
  border-radius: 16px 0 0 0; box-shadow: 0 10px 30px -18px rgba(14,16,19,.2); overflow: hidden; }
.fx-cab { margin: 0 0 2px; font-family: var(--texto); font-size: 13px; font-weight: 600; color: var(--tinta-2); padding-bottom: 10px; border-bottom: 1px solid rgba(14,16,19,.08); }
.fx h3 { margin: 22px 0 6px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.4vw, 22px); letter-spacing: -.02em; line-height: 1.15; }
.fx > p { margin: 0; font-family: var(--texto); font-size: 15px; line-height: 1.5; color: var(--gris); max-width: 60ch; }
.fx-lista { display: grid; }
.fx-fila { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid rgba(14,16,19,.07); font-family: var(--texto); font-size: 14px; white-space: nowrap; }
.fx-fila b { font-family: var(--mono, ui-monospace, monospace); font-weight: 500; font-size: 13px; min-width: 64px; }
.fx-fila span { flex: 1; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; }
.fx-fila i { font-style: normal; color: var(--naranja); font-weight: 600; }
.fx-tenue { opacity: .55; }
.fx .dm-fila { margin-bottom: 4px; }
.fx-docs .doc { padding: 8px 10px; }
.fx-docs .doc-n { white-space: nowrap; }
.fx-libres { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(14,16,19,.07); }
.fx-libres .dm-anillo { width: 72px; height: 72px; margin: 0; flex: none; }
.fx-libres .dm-anillo b { font-size: 20px; } .fx-libres .dm-anillo small { font-size: 9.5px; }
.fx-libres span { display: grid; gap: 2px; font-family: var(--texto); font-size: 12.5px; color: var(--gris); }
.fx-libres span b { color: var(--tinta); font-size: 14px; font-weight: 600; }
.fx .cu-cifra { margin: 6px 0 0; }
@media (max-width: 860px) { .fx-grid { grid-template-columns: 1fr; } .fx-marco { height: 300px; padding: 28px 0 0 28px; } }
.v2-cont-a { transition: opacity .15s linear; }
.v2-cont { transition: --r-hueco .35s var(--t), filter .15s linear; }
.v2-tj-fila .v2-logo { width: 13px; height: 16px; }
/* Tarjetas 2×2 más compactas */
.fx-grid { gap: 28px 20px; }
.fx-marco { height: 250px; padding: 28px 0 0 40px; border-radius: 18px; }
.fx-panel { padding: 14px 18px; gap: 8px; border-radius: 12px 0 0 0; }
.fx-cab { font-size: 12px; padding-bottom: 8px; }
.fx-fila { padding: 8px 2px; font-size: 13px; }
.fx-docs .doc { padding: 6px 8px; }
.fx h3 { margin: 16px 0 4px; font-size: clamp(16px, 1.2vw, 19px); }
.fx > p { font-size: 13.5px; line-height: 1.45; }
.fx .dm-campo { height: 38px; }
.fx .dm-cifra b { font-size: 28px; }
.fx .cu-cifra { font-size: 30px; }
.fx-libres .dm-anillo { width: 60px; height: 60px; }
.fx-libres .dm-anillo b { font-size: 17px; }
@media (max-width: 860px) { .fx-marco { height: 230px; padding: 22px 0 0 22px; } }
/* Menos aire entre secciones */
.v2-mas { padding-top: 64px !important; padding-bottom: 24px !important; }
.v2-mas-cab { margin-bottom: 32px; }
.v2-lineas { padding-top: 64px !important; padding-bottom: 72px !important; }
.v2-lineas-cab { margin-bottom: 32px; }
/* Ícono de los avisos: logo blanco sobre naranja Fuyang */
.av-ico { background: var(--naranja) url("../v2/logo-fuyang-blanco.svg") center / 12px auto no-repeat; }
/* Mismo ancho que el panel de arriba (márgenes de 8vw, como cuadroFoto en v2.js) */
.v2-mas, .v2-lineas { padding-left: max(24px, 8vw) !important; padding-right: max(24px, 8vw) !important; }
/* Lista de líneas, compacta: cabecera en una fila (texto a la izquierda, botón a la derecha) y filas más bajas */
.v2-lineas { padding-top: 48px !important; padding-bottom: 56px !important; }
.v2-lineas-cab { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 32px; row-gap: 8px; align-items: end; margin-bottom: 24px; }
.v2-lineas-cab .eyebrow { grid-column: 1; }
.v2-lineas-cab h2 { grid-column: 1; font-size: clamp(22px, 2.2vw, 32px); max-width: 26ch; }
.v2-lineas-cab .btn-primary { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.v2-lista a { padding: 16px 0; }
.v2-l-n { font-size: clamp(17px, 1.5vw, 22px); }
/* Logo en naranja en puntos puntuales */
.v2-tj-fila .v2-logo { fill: var(--naranja); }
/* Sombra SOLO en el contenedor: va en la imagen de abajo (misma silueta que la de arriba), no en el grupo con los rótulos */
.v2-cont, .v2-cont.es-blanco { filter: none !important; }
.v2-cont-b { filter: drop-shadow(0 30px 28px rgba(14,16,19,.18)) drop-shadow(0 6px 8px rgba(14,16,19,.12)) !important; transition: filter .15s linear; }
.v2-cont.es-blanco .v2-cont-b { filter: drop-shadow(0 34px 30px rgba(14,16,19,.30)) drop-shadow(0 8px 10px rgba(14,16,19,.20)) drop-shadow(0 0 1px rgba(14,16,19,.25)) !important; }
/* Ícono de los avisos: fondo negro como la burbuja, logo en naranja */
.av-ico { background: transparent url("../v2/logo-fuyang-naranja.svg") center / 20px auto no-repeat; }
/* Avisos blancos con sombra, estilo notificación de iPhone */
.aviso { background: #fff; color: var(--tinta, #0E1013); border: 1px solid rgba(14,16,19,.06);
  box-shadow: 0 1px 2px rgba(14,16,19,.05), 0 10px 24px -12px rgba(14,16,19,.22); }
.aviso i { color: var(--gris, #6B7079); opacity: 1; }
/* Logo de la tarjeta dentro de un ícono de app (cuadro redondeado, brillo arriba, sombra corta) */
.v2-app { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6.5px;
  background: linear-gradient(180deg, #24272d 0%, #0E1013 100%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 1px 2px rgba(14,16,19,.25), 0 4px 10px -4px rgba(14,16,19,.35); }
.v2-app .v2-logo { width: 11px; height: 13.5px; fill: var(--naranja); }
.v2-app .v2-logo g { stroke: #0E1013; }
.v2-tj-txt i { padding-left: 31px; }
/* Aviso tipo iPhone: tarjeta blanca + ícono de app (cuadro negro redondeado con el logo naranja) */
.aviso { padding: 10px 14px 10px 10px; gap: 12px; border-radius: 16px; }
.av-ico { flex: 0 0 34px; height: 34px; border-radius: 8.5px;
  background: url("../v2/logo-fuyang-naranja.svg") center / 15px auto no-repeat, linear-gradient(180deg, #24272d 0%, #0E1013 100%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 1px 2px rgba(14,16,19,.2); }
/* Ícono de app: fondo negro, logo blanco */
.av-ico { background: url("../v2/logo-fuyang-blanco.svg") center / 15px auto no-repeat, linear-gradient(180deg, #24272d 0%, #0E1013 100%); }
.v2-app .v2-logo { fill: #fff; }

/* ===== Celular: escena del héroe ===== */
@media (max-width: 860px) {
  .v2-p1, .v2-p2 { font-size: 17vw !important; }
  .v2-rotulo { display: none; }
  .v2-cifras { left: var(--pad); right: var(--pad); top: auto !important; bottom: calc(16vh + 56px); display: flex; justify-content: space-between; gap: 12px; text-align: left; }
  .v2-cifras > div { flex: 1; }
  .v2-cifras dt { font-size: 30px; }
  .v2-cifras dd { font-size: 11px; white-space: normal; line-height: 1.3; }
  .v2-cta { bottom: calc(10vh + 8px); }
}

/* ===== Celular: el héroe es una pantalla; el bento va debajo, en flujo normal ===== */
@media (max-width: 860px) {
  .v2-viaje { height: auto !important; }
  .v2-escenario { position: relative !important; height: auto !important; min-height: 100svh; overflow: visible !important; }
  .v2-banda, .v2-foto, .v2-chevrones { display: none !important; }
  .v2-bento { position: relative !important; inset: auto !important; width: auto !important; height: auto !important;
    margin: calc(100svh + 8px) var(--pad) 0; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: none !important; gap: 14px; opacity: 1 !important; }
  .v2-bento > .bt { grid-column: 1 !important; grid-row: auto !important; opacity: 1 !important; transform: none !important; min-height: 0; }
  .v2-bento .bt-foto { min-height: 360px; background: url("../v2/puerto.webp") center 30% / cover no-repeat; }
  .v2-bento .bt-lienzo { min-height: 200px; }
}
@media (max-width: 860px) { .v2-bento { z-index: 6; background: #fff; padding-top: 8px; } }
/* Celular: las filas de documentos no se pisan (sin nombre de archivo, etiqueta compacta) */
@media (max-width: 860px) {
  .fx-docs .doc { gap: 8px; }
  .fx-docs .doc-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .fx-docs .doc-n i { display: none; }
  .fx-docs .doc em, .fx-docs .doc-btn { font-size: 11px; padding: 3px 8px; white-space: nowrap; flex: none; }
  .fx-docs .doc-estado { flex: none; }
  .fx-panel { padding: 12px 14px; }
}
/* Celular: el margen de 100svh del bento se colapsaba hacia arriba y empujaba toda la escena
   (el contenedor quedaba fuera de la primera pantalla). flow-root lo contiene dentro del escenario. */
@media (max-width: 860px) { .v2-escenario { display: flow-root !important; } }
@media (max-width: 860px) {
  /* Anclados a la primera pantalla (el escenario ahora es más alto que ella) */
  .v2-cifras { top: calc(100svh - 16vh - 120px) !important; bottom: auto !important; }
  .v2-cta { top: calc(100svh - 10vh - 56px) !important; bottom: auto !important; }
}
@media (max-width: 860px) {
  .v2-bento .bt-movil .bt-lienzo { height: 300px; min-height: 0; overflow: hidden; }
  .v2-bento .bt-movil .bt-lienzo img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
  .v2-bento .bt-laptop .bt-lienzo img { width: 100%; height: auto; object-fit: contain; }
}
/* Celular: barra superior negra sólida (marca e idioma en claro); el contenedor cuelga de ella.
   Colores fijos: el modo oscuro del teléfono no los cambia. */
:root { color-scheme: light; }
@media (max-width: 860px) {
  .nav, .nav.v2-nav-fondo { background: #0E1013 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 0 !important; box-shadow: none !important; }
  .nav .nav-brand-1 { color: #fff !important; }
  .nav .nav-brand-2 { color: rgba(255,255,255,.7) !important; }
  .nav .lang-switcher { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: none !important; }
  .nav .lang-btn, .nav .lang-btn.active { color: #fff !important; background: transparent !important; }
}
@media (max-width: 860px) {
  .nav .lang-switcher::before { background: transparent !important; box-shadow: none !important; }
  .v2-cont { width: 116vw !important; }
  .v2-escenario { overflow-x: clip !important; }
}
@media (max-width: 860px) { .v2-cont { width: 138vw !important; } .v2-p1, .v2-p2 { font-size: 19vw !important; } }
@media (max-width: 860px) { .v2-cont { width: 112vw !important; } .v2-cont { transition: --r-hueco .45s var(--t); } }
@media (max-width: 860px) { .v2-escenario { min-height: 0 !important; } }
/* Espaciado parejo en las tarjetas: chips separados del lienzo, lienzos sin aire de sobra */
.bt-chips { margin: 0 0 14px !important; gap: 6px !important; }
@media (max-width: 860px) {
  .bt-chips span { padding: 4px 10px; font-size: 12px; }
  .v2-bento .bt-laptop .bt-lienzo { padding: 12px 10px 0 !important; min-height: 0 !important; }
  .v2-bento .bt-lienzo { min-height: 0 !important; }
  .v2-bento .bt-avisos .bt-lienzo, .v2-bento .bt-etapas .bt-lienzo { padding: 14px !important; }
  .v2-bento .bt { padding: 18px !important; }
  .v2-bento .bt-sub { margin-bottom: 12px !important; }
}
@media (max-width: 860px) {
  .v2-bento .bt-movil .bt-lienzo { height: 260px !important; padding: 0 !important; }
  .v2-bento .bt-movil .bt-lienzo img { object-fit: cover !important; object-position: 60% 8% !important; }
}
/* La foto del lienzo respeta la curva del marco (sin esquina cuadrada asomando) */
.bt-lienzo { overflow: hidden; }
.bt-lienzo > img { border-radius: inherit; }
@media (max-width: 860px) {
  #bento .bt-movil .bt-lienzo { height: 260px !important; max-height: 260px !important; display: block !important; }
  #bento .bt-movil .bt-lienzo img { display: block; width: 100% !important; height: 260px !important; max-height: 260px !important; object-fit: cover !important; object-position: 60% 6% !important; }
}

/* Invitación a pasar el cursor/dedo: píldora discreta bajo el contenedor */
.v2-invita { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(14,16,19,.08); box-shadow: 0 6px 18px -10px rgba(14,16,19,.25);
  font-family: var(--texto); font-size: 12.5px; color: var(--tinta-2, #3a3f46); white-space: nowrap; pointer-events: none;
  opacity: 0; animation: v2invEntra .6s .9s ease forwards; transition: opacity .35s ease, transform .35s ease; }
.v2-invita i { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 0 0 rgba(217,88,28,.45); animation: v2invPulso 1.8s ease-out infinite; }
.v2-invita.fuera { opacity: 0 !important; animation: none; transform: translate(-50%, 6px); }
.inv-dedo { display: none; }
@media (hover: none), (pointer: coarse) { .inv-mouse { display: none; } .inv-dedo { display: inline; } }
@keyframes v2invEntra { to { opacity: 1; } }
@keyframes v2invPulso { 0% { box-shadow: 0 0 0 0 rgba(217,88,28,.45); } 100% { box-shadow: 0 0 0 9px rgba(217,88,28,0); } }
/* Tarjeta del retrato: cabe la frase completa con el ícono de app */
.v2-tarjeta { width: 272px !important; }
.v2-tj-txt i { overflow: visible; text-overflow: clip; }
/* MacBook entero dentro de su cuadro (sin cortar la base) */
.bt-laptop .bt-lienzo { display: grid; place-items: center; overflow: hidden; }
.bt-laptop .bt-lienzo img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; }
.bt-laptop .bt-lienzo { position: relative; display: block !important; }
.bt-laptop .bt-lienzo img { position: absolute; inset: 10px 12px 0; width: calc(100% - 24px); height: calc(100% - 10px); object-fit: contain; object-position: center bottom; }
@media (max-width: 860px) { #bento .bt-laptop .bt-lienzo { height: 210px !important; } }
/* Sin saltos de diseño (CLS): lo que se ubica midiendo el contenedor aparece ya ubicado */
.v2-escenario:not(.medida) .v2-p1, .v2-escenario:not(.medida) .v2-p2,
.v2-escenario:not(.medida) .v2-cifras, .v2-escenario:not(.medida) .v2-invita { visibility: hidden; }
/* Contraste: gris de texto un punto más oscuro (≥ 4.5:1 también sobre el marco gris) */
:root { --gris: #5D6168; }
.fx-tenue { opacity: .75; }