/* ============================================================================
   3D GENERATIVO · tres mecanismos en la misma fila
   Contrato: docs/02-DECLARACIONES.md §21.5-vicies.semel
   ----------------------------------------------------------------------------
   Por qué esta sección necesita CSS propio cuando Blockchain o Imágenes 360 no
   lo necesitaban igual: aquí la fila mezcla TRES mecanismos distintos.

     01  vídeo local                → se estira como cualquier vídeo
     02  iframe de Luma (modelo 3D) → NO se puede estirar: se deforma el modelo
     03  iframe de Luma (otro)      → idem

   Un iframe no tiene proporción propia; si se deja al 100% de una celda que no
   es cuadrada, el modelo sale estirado. Y si las tres tarjetas no acaban a la
   misma altura, la fila queda coja. De ahí `aspect-ratio: 960/662` en las tres:
   es la proporción del VÍDEO de la 01, que es el que manda.

   ORIGEN: `ds-v2/code/prototipo/maqueta-3d-generativo.html`, commit 7d757d5
   («tarjetas con visor Luma»). Se copia la forma; se traduce el vestido.

   TABLA DE TRADUCCIÓN DE TOKENS:
     original        aquí
     --bd        →  --borde
     --card      →  --superficie-2
     --sim-fondo →  --superficie
     --acento    →  --acento    (ya permuta: naranja en oscuro, azul en claro)
     --txt-acento→  --acento
     --mut       →  --mut
     --acento-rgb→  --acento-rgb  (ya existe, 01-declaraciones.css:93)
   ========================================================================== */

/* ── LA REJILLA ─────────────────────────────────────────────────────────────
   3 columnas en PC, 1 en tablet y teléfono — igual que `.dn-riel`.
   Un modelo 3D en una celda de 380px de ancho no se puede ni girar bien. */
.g3-riel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(24px, 3.4vh, 36px);
  width: 100%;
}

@media (max-width: 1099px) {
  .g3-riel { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}

/* ── LA PIEZA ─────────────────────────────────────────────────────────────── */
.g3-pieza {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  border-radius: var(--radio-3, 16px);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  overflow: hidden;
  transition: border-color .4s, transform .4s;
}

.g3-pieza:hover {
  border-color: var(--acento-borde);
  transform: translateY(-4px);
}

/* ── EL PANEL ───────────────────────────────────────────────────────────────
   La proporción del VÍDEO de la 01 (960×662 = 1.45). Las tres tarjetas la
   comparten para que la fila quede a nivel. `height:auto` es obligatorio: sin
   él, `height` del contenedor gana y el aspect-ratio se ignora. */
.g3-panel {
  position: relative;
  aspect-ratio: 960 / 662;
  height: auto;
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

/* El panel de los iframes lleva el negro del lienzo 3D del original: el modelo
   viene con fondo #0d1117 y así no se ve un rectángulo distinto alrededor. */
.g3-panel--3d {
  background: #0d1117;
}

.g3-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══ EL TRUCO DEL IFRAME — TAL CUAL VENÍA ══════════════════════════════════
   Luma NO permite ocultar su logo por parámetro: su código solo contempla las
   cuatro esquinas, y cualquier otro valor cae en `bottom-left`. Lo que se hizo
   fue ESCALAR el iframe al 150% y desplazarlo (left:-13%, top:-15%) para que el
   logo —que vive en una franja de 16px pegada al borde inferior izquierdo—
   quede FUERA del recorte.

   Con 150% de ancho quedan ~16% de sobra por cada lado, suficiente para los
   ~58px del logo. El zoom interno del modelo NO cambia: se compensa recortando
   márgenes.

   SI ESTO SE «ARREGLA» poniendo el iframe al 100%, el logo de Luma vuelve a
   aparecer en la esquina. No es un descuido: es el mecanismo. */
.g3-luma {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -13%;
  top: -15%;
  border: 0;
  display: block;
}

/* ── EL AVISO «Haga clic y arrastre para girar» ────────────────────────────
   Va DENTRO del panel pero FUERA del iframe, así que no le roba el arrastre:
   `pointer-events: none` deja pasar el gesto al modelo.

   Late para llamar la atención y SE APAGA en cuanto el usuario toca el panel
   (clase `.ya-tocado`, la pone el JS). Vuelve al salir del panel. */
.g3-pista {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: var(--z-contenido);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 22px;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eaf1fa;
  background: rgba(8, 12, 18, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  pointer-events: none;
  animation: g3Latido 2.6s ease-in-out infinite;
  transition: opacity .45s, transform .45s;
}

.g3-pista svg { flex: 0 0 auto; opacity: .95; animation: g3Mano 2.6s ease-in-out infinite; }
.g3-pista b { font-weight: 600; }

.g3-panel--3d.ya-tocado .g3-pista {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

@keyframes g3Latido {
  0%, 100% { border-color: rgba(255, 255, 255, .18); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
  50%      { border-color: rgba(255, 255, 255, .45); box-shadow: 0 6px 26px rgba(0, 0, 0, .6); }
}

@keyframes g3Mano {
  0%, 100% { transform: translateX(-2.5px); }
  50%      { transform: translateX(2.5px); }
}

/* ── LAS CIFRAS: FUERA, A PETICIÓN DE OZ ──────────────────────────────────
   El original ponía una cifra en cristal arriba a la derecha de cada tarjeta:
   0 · 1 · 0. Orden de Oz (2026-10-23): «las cifras no me gustan para poner 0
   prefiero eliminar el numero del todo» y después «elimina las 3».

   Se quitaron las TRES del HTML, no solo las que valían cero: las tres tenían
   que leerse como una serie, y dos tarjetas con número y una sin él quedaría
   descolgada. Los datos que aportan información NO se pierden: siguen en el pie
   de cada tarjeta (.g3-dato), que es donde se leen de verdad.

   Aquí vivían `.g3-cifra` (la placa de cristal) y `.g3-num` (el número). Se
   borran sus reglas porque una clase sin uso en el CSS es exactamente lo que el
   contrato prohíbe: código muerto que alguien «arreglará» sin saber que ya no
   pinta nada. */

/* ── EL PIE ───────────────────────────────────────────────────────────────── */
.g3-pie { display: block; padding: 15px 15px 17px; }

.g3-tag {
  display: block;
  margin-bottom: 5px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}

.g3-h {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(.86rem, 1.05vw, 1.02rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.g3-pie small {
  display: block;
  font-size: .73rem;
  line-height: 1.5;
  color: var(--mut);
}

.g3-dato {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--borde);
  font-size: .62rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--mut);
}

/* ── ANZUELOS PROPIOS DE LA SECCIÓN ───────────────────────────────────────
   Sin declaraciones: el estilo viene de `.au-hero`. Se declaran porque el
   verificador exige regla para toda clase del HTML, y con razón. */
.g3-hero,
.g3-hero__lienzo,
.g3-hero__rotulo { /* anzuelos, el estilo viene de .au-hero */ }

/* ── SI EL IFRAME NO CARGA ────────────────────────────────────────────────
   Luma es un servicio externo: sin internet, o si bloquean el embed, la caja
   se queda en negro sin decir nada. Como no se puede detectar un fallo dentro
   de un iframe de otro origen, se deja un fondo con aviso DETRÁS del iframe:
   si carga, lo tapa; si no, se lee. */
.g3-panel--3d::before {
  content: "Cargando el modelo 3D…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .72rem;
  color: #8a94a6;
  pointer-events: none;
}

/* ── QUIEN PREFIERE NO VER MOVIMIENTO ─────────────────────────────────────
   El aviso late; se queda quieto. Los modelos 3D NO giran solos: solo si el
   usuario arrastra, así que no hay nada más que apagar. */
@media (prefers-reduced-motion: reduce) {
  .g3-pista,
  .g3-pista svg { animation: none; }
  .g3-pieza:hover { transform: none; }
}