/* ==========================================================================
   GALERÍA — DETALLE (/galeria/{slug})
   Requiere base.css y marketing.css cargados antes (las fijas del layout);
   se pasa por 'hojas' SOLO en esta página, igual que portada.css en la home.

   Qué es: la página intermedia que abre cada tarjeta de /galeria. El tour del
   cliente va en un <iframe> a pantalla casi completa y a la derecha un panel
   de ~340px con su marca, título, ciudad y descripción, el botón de compartir,
   el contador de visitas y, al fondo, la caja de conversión de Viewroom3D. La
   referencia que aprobó el dueño es Kuula: escenario oscuro, panel lateral
   sobre fondo #111–#15, texto claro.

   Vocabulario propio `gv-*` por la misma razón que `pt-*` en la portada: este
   tramo es OSCURO SIEMPRE (el tour manda, como en un cine; no sigue la
   preferencia claro/oscuro del visitante) y mezclarlo con los tokens de mk-*
   obligaría a tocar marketing.css, que en este cambio está prohibido. El
   encabezado y el pie siguen siendo los del layout; el escenario vive entre
   los dos y solo al pie se le cambia la piel para que la página no termine en
   una franja blanca pegada al bloque oscuro (mismo truco que .cuerpo-portada).
   ========================================================================== */

.gv {
  /* Paleta fija del escenario. Se declara en .gv y no en :root para que no se
     filtre al resto del sitio. Contrastes medidos con la fórmula WCAG 2.1 (la
     misma de app/Core/Color.php): --gv-txt-2 da 8,0:1 y --gv-txt-3 da 4,9:1
     sobre el panel, y ningún texto baja de 13px (regla de base.css). */
  --gv-fondo:   #0F1114;                   /* escenario y pie */
  --gv-panel:   #15181D;                   /* panel lateral */
  --gv-control: #21262E;                   /* relleno de los botones del panel */
  --gv-control-hover: #2A303A;
  --gv-borde:   rgba(255, 255, 255, .08);  /* separadores sutiles */
  --gv-borde-2: rgba(255, 255, 255, .22);  /* límite de un CONTROL: 3,2:1 sobre --gv-control (DISENO §7) */
  --gv-txt:     #F2F4F7;
  --gv-txt-2:   #AEB7C4;                   /* cuerpo gris claro */
  --gv-txt-3:   #8792A2;                   /* secundario apagado */
  --gv-azul:    #0E4FD1;                   /* el azul de marca, el mismo de portada.css */
  --gv-azul-2:  #0A3CA6;
  --gv-nav:     64px;                      /* min-height real de .mk-nav-inner en marketing.css */

  background: var(--gv-fondo);
  color: var(--gv-txt);
  /* Scrollbars y controles nativos oscuros dentro del escenario. */
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   1. Escenario: tour + panel
   Móvil primero: apilado (tour arriba, panel abajo). De 901px hacia arriba,
   rejilla de dos columnas que llena el alto de la ventana menos el encabezado
   pegajoso del layout: sin ese descuento la caja de conversión queda cortada
   bajo el pliegue. minmax(0, 1fr) y no 1fr a secas: con 1fr el mínimo es el
   contenido y un iframe ancho empuja la rejilla a hacer scroll horizontal.
   -------------------------------------------------------------------------- */

.gv-escenario { display: block; }

.gv-tour {
  position: relative;
  /* 60dvh como piso en móvil (lo pidió el dueño); dvh para que la barra de
     URL del navegador no se coma el tour, con vh de respaldo para navegadores
     viejos que no conocen dvh. */
  height: 60vh;
  height: 60dvh;
  min-height: 340px;
  background: #0A0C0E;   /* lo que se ve el instante antes de cargar el iframe */
}

.gv-tour iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gv-panel {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-5);
  /* En móvil el panel es lo último de la página: el respiro inferior suma la
     zona segura del iPhone, nunca la reemplaza (regla de base.css). */
  padding-bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  background: var(--gv-panel);
  border-top: 1px solid var(--gv-borde);
  /* Barra de scroll discreta cuando el panel scrollea (solo escritorio). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.gv-panel::-webkit-scrollbar { width: 8px; }
.gv-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 4px; }

@media (min-width: 901px) {
  .gv-escenario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    height: calc(100vh - var(--gv-nav));
    height: calc(100dvh - var(--gv-nav));
    /* Piso para pantallas apaisadas bajitas: mejor un poco de scroll que un
       panel aplastado donde la caja de conversión no cabe. */
    min-height: 540px;
  }
  .gv-tour { height: auto; min-height: 0; }
  .gv-panel {
    border-top: 0;
    border-left: 1px solid var(--gv-borde);
    overflow-y: auto;
    min-height: 0;
  }
  /* La caja de conversión se pega al fondo del panel cuando el contenido es
     corto, como el cajón "PRO" de la referencia. Solo en escritorio: apilada
     en móvil ya viene después de todo por orden natural. */
  .gv-cta { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   2. Cabecera del panel: volver, marca del cliente, título y lugar
   -------------------------------------------------------------------------- */

.gv-volver {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--gv-txt-3);
  text-decoration: none;
}
.gv-volver:hover { color: var(--gv-txt); }
.gv-volver svg { width: 14px; height: 14px; }

.gv-marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

/* El logo va sobre una pastilla blanca y no directo sobre el panel: el cliente
   subió su logo para fondos claros (el panel y los correos del producto lo son)
   y un logo marino sobre #15181D desaparece. Con la pastilla, cualquier logo
   menos uno blanco puro se ve; el caso blanco lo cubre el respaldo de inicial. */
.gv-logo {
  flex: none;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  background: #fff;
  border-radius: 10px;
}
.gv-logo img {
  max-height: 30px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
}

/* Sin logo: la inicial sobre el color de marca del proyecto, el mismo respaldo
   que usan las tarjetas de la galería (pt-tarjeta-inicial). --marca y
   --marca-txt los pone la vista; color_texto ya viene validado por contraste
   contra color_primario desde el panel del cliente, acá no se recalcula nada. */
.gv-inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--marca, #0E4FD1), color-mix(in oklab, var(--marca, #0E4FD1) 55%, #0B2141));
  color: var(--marca-txt, #fff);
  font-size: 17px;
  font-weight: 700;
}

.gv-marca-nombre {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gv-txt);
  overflow-wrap: anywhere;
}

/* 16–18px/700 fue el encargo: el título grande ya lo tiene el tour de al lado. */
.gv-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.gv-sub {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gv-txt-2);
}

.gv-lugar {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gv-txt-3);
}
.gv-lugar svg { flex: none; width: 14px; height: 14px; }

.gv-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gv-txt-2);
  /* anywhere y no break-word: solo parte la palabra si de verdad desbordaría,
     y una URL pegada en la descripción no puede forzar scroll horizontal. */
  overflow-wrap: anywhere;
}

.gv-sep {
  border: 0;
  border-top: 1px solid var(--gv-borde);
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Acciones: compartir + contador de visitas
   -------------------------------------------------------------------------- */

.gv-acciones {
  display: flex;
  gap: var(--e-2);
}

.gv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--tactil);
  padding: 0 var(--e-4);
  border: 1px solid var(--gv-borde-2);
  border-radius: 10px;
  background: var(--gv-control);
  color: var(--gv-txt);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ms-rapido) var(--ease-entrada);
}
.gv-btn:hover { background: var(--gv-control-hover); }
.gv-btn:active { transform: translateY(1px); }
.gv-btn svg { flex: none; width: 16px; height: 16px; }

.gv-btn--compartir { flex: 1; }

/* WhatsApp y X: solo icono, cuadrados de 44 para no perder el área táctil. */
.gv-btn--icono {
  flex: none;
  width: var(--tactil);
  padding: 0;
}

.gv-vistas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 13px;
  color: var(--gv-txt-2);
}
.gv-vistas svg { flex: none; width: 16px; height: 16px; color: var(--gv-txt-3); }

/* Enlace opcional al dominio propio del cliente. */
.gv-directo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gv-txt-3);
  text-decoration: none;
}
.gv-directo:hover { color: var(--gv-txt); text-decoration: underline; }
.gv-directo svg { flex: none; width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   4. Caja de conversión de Viewroom3D
   El equivalente del cajón "Upgrade to PRO" de la referencia, con nuestro azul
   de portada. Degradado sobrio del mismo tono, nada de neones sobre el panel.
   -------------------------------------------------------------------------- */

.gv-cta {
  padding: var(--e-5);
  border-radius: 14px;
  background: linear-gradient(150deg, var(--gv-azul), var(--gv-azul-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
}

.gv-cta-marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.gv-cta-marca svg { flex: none; width: 15px; height: 15px; }

.gv-cta-titulo {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.gv-cta-texto {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

/* Botón claro sobre el azul: #0E4FD1 sobre blanco da 6,4:1 (medido en
   portada.css para el mismo par). */
.gv-cta-btn {
  margin-top: var(--e-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tactil);
  border-radius: 10px;
  background: #fff;
  color: var(--gv-azul);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ms-rapido) var(--ease-entrada);
}
.gv-cta-btn:hover { background: #EAF1FE; }
.gv-cta-btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   5. El pie del layout, vestido de escenario
   Mismo truco que .cuerpo-portada en portada.css: el <footer> sigue siendo el
   del layout, acá solo se le cambia la piel para que la página no salte de
   negro a blanco al llegar abajo.
   -------------------------------------------------------------------------- */

.cuerpo-galeria-ver .mk-pie {
  background: #0F1114;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: #AEB7C4;
}
.cuerpo-galeria-ver .mk-pie a { color: #AEB7C4; }
.cuerpo-galeria-ver .mk-pie a:hover { color: #fff; }
.cuerpo-galeria-ver .mk-pie-legal { border-top-color: rgba(255, 255, 255, .10); color: #8792A2; }
.cuerpo-galeria-ver .mk-pie-marca { color: #fff; }
.cuerpo-galeria-ver .mk-pie-lugar { color: #8792A2; }