/*
 * GringoLock · web comercial · el sistema de diseño (gl.css) · 10-nov-2026
 *
 * Una sola hoja para todas las páginas. Los tokens son los del kit de marca (brandkit-gringolock/kit-2026-11/vidrio/:
 * tokens.json y gringolock-vidrio.css), con los mismos nombres que usa la app (--gl-marca-*, --gl-v-*). Lo que agrega la
 * web (tipografía, espaciado, grilla, componentes) va con el prefijo --gl-t-, --gl-e- y clases .gl-*.
 * El catálogo, con un ejemplo de HTML por componente, está en ../NOTAS.md.
 *
 * Reglas del kit que se respetan acá:
 *  · Desenfoca sólo lo que flota (la cabecera, el menú del celular y la acción del pulgar). Las tarjetas son vidrio
 *    quieto: translúcidas sobre la luz del ambiente, sin backdrop-filter.
 *  · Un solo oro por pantalla: la acción principal.
 *  · «Reducir movimiento»: nada se mueve ni brilla. «Reducir transparencia» o «más contraste»: todo sólido.
 *  · El texto de párrafo va en crema (no en el gris del kit) sobre las tarjetas: con la luz de oro detrás, el gris baja de AA.
 */

/* ── 0 · Letras (archivos propios, nada de Google) ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'GringoLock Display';
  src: url('fuentes/inter-tight-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fuentes/inter-400.woff2') format('woff2');
  font-weight: 400 500;
  font-display: optional;            /* sin cambio de letra a mitad de carga: salto de diseño 0 (se precarga en el HTML) */
}
@font-face {
  font-family: 'Inter';
  src: url('fuentes/inter-600.woff2') format('woff2');
  font-weight: 600 800;
  font-display: optional;
}

/* ── 1 · Tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* La marca (no cambian) */
  --gl-marca-oro: #ffbf00;
  --gl-marca-oro-claro: #ffd54a;
  --gl-marca-oro-hondo: #e8a900;
  --gl-marca-negro: #12100a;
  --gl-marca-crema: #f7f2e6;
  --gl-marca-tinta: #160f02;

  /* El ambiente: siempre negro */
  --gl-fondo: #0b0906;
  --gl-panel: #16130d;
  --gl-texto: #f7f2e6;
  --gl-texto-2: #b3a88c;                    /* del kit: sólo sobre el negro liso (8,4:1) */
  --gl-texto-3: #9a907a;
  --gl-texto-cuerpo: rgba(247, 242, 230, 0.84); /* párrafos, también sobre las tarjetas */
  --gl-filo: rgba(247, 242, 230, 0.1);
  --gl-ok: #8fc79a;
  --gl-atencion: #e9a25f;
  --gl-error: #f2968f;
  --gl-ambar: #ffa53a;                      /* vuelta 2: el ámbar de la burbuja (§27), en rótulos y en el resplandor */
  --gl-ambar-hondo: #ff8a1f;
  --gl-vivo: #ff4d3d;                       /* vuelta 2: el punto rojo «En vivo» de la cámara (§27c) */
  --gl-v-luces:
    radial-gradient(26% 20% at 30% 26%, rgba(255, 191, 0, 0.24), transparent 70%),
    radial-gradient(34% 16% at 50% 80%, rgba(255, 191, 0, 0.26), transparent 72%),
    radial-gradient(20% 14% at 72% 76%, rgba(233, 162, 95, 0.14), transparent 70%);
  --gl-v-luces-duracion: 22s;

  /* El vidrio que flota (desenfoca) */
  --gl-v-desenfoque: blur(26px) saturate(175%);
  --gl-v-relleno: rgba(26, 22, 14, 0.7);
  --gl-v-relleno-luz: rgba(255, 248, 230, 0.09);
  --gl-v-borde: rgba(255, 248, 230, 0.14);
  --gl-v-sombra-baja: rgba(0, 0, 0, 0.32);
  --gl-v-sombra: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

  /* Las tarjetas: vidrio quieto, radios concéntricos */
  --gl-v-tarjeta: linear-gradient(180deg, rgba(255, 248, 230, 0.075), rgba(255, 248, 230, 0.035));
  --gl-v-tarjeta-solida: #1d1a12;
  --gl-v-tarjeta-borde: rgba(255, 248, 230, 0.1);
  --gl-v-tarjeta-brillo: rgba(255, 255, 255, 0.08);
  --gl-v-tarjeta-sombra: 0 10px 28px rgba(0, 0, 0, 0.3);
  --gl-v-radio: 22px;
  --gl-v-radio-dentro: 14px;
  --gl-v-hundido: rgba(0, 0, 0, 0.3);
  --gl-v-hundido-borde: rgba(255, 248, 230, 0.12);

  /* Los botones: cápsula, 48 px como mínimo (la acción del pulgar, 54) */
  --gl-v-boton-alto: 48px;
  --gl-v-boton-pulgar: 54px;
  --gl-v-oro: linear-gradient(180deg, var(--gl-marca-oro-claro) 0%, var(--gl-marca-oro) 52%, var(--gl-marca-oro-hondo) 100%);
  --gl-v-oro-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(140, 90, 0, 0.35), 0 10px 26px rgba(255, 191, 0, 0.26);
  --gl-v-boton-vidrio: radial-gradient(130% 100% at 28% -10%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 50%), rgba(255, 255, 255, 0.04);
  --gl-v-boton-vidrio-sombra: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.3);
  --gl-v-lente: rgba(255, 191, 0, 0.14);
  --gl-v-lente-borde: rgba(255, 191, 0, 0.34);
  --gl-v-lente-texto: #ffd66b;

  /* La barra de abajo de la app (para las maquetas de teléfono) */
  --gl-v-barra-fondo: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 55%), rgba(22, 19, 12, 0.62);
  --gl-v-barra-sombra: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.55);
  --gl-v-burbuja-fondo: radial-gradient(130% 100% at 28% -10%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.02) 72%),
    linear-gradient(0deg, rgba(255, 214, 107, 0.06), transparent 55%), rgba(255, 255, 255, 0.04);
  --gl-v-burbuja-sombra: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(255, 255, 255, 0.16),
    inset 2px 0 1.5px -1px rgba(255, 214, 107, 0.6), inset -2px 0 1.5px -1px rgba(140, 200, 255, 0.5),
    inset 0 0 14px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.35);

  /* El movimiento */
  --gl-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --gl-resorte: cubic-bezier(0.3, 1.45, 0.5, 1);
  --gl-v-brillo-pasada: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 236, 180, 0.06) 53%, transparent 64%);
  --gl-v-brillo-duracion: 1.1s;
  --gl-v-brillo-curva: cubic-bezier(0.3, 0.6, 0.2, 1);
  --gl-aparece-duracion: 900ms;

  /* La letra */
  --gl-letra-marca: 'GringoLock Display', 'Inter Tight', 'Inter', system-ui, sans-serif; /* siempre 800 */
  --gl-letra: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gl-letra-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* horas y códigos, con números tabulares */
  --gl-apretada: -0.035em;

  /* La web: escala tipográfica (celular → compu) */
  --gl-t-heroe: clamp(42px, 5.2vw, 72px);
  --gl-t-1: clamp(36px, 5.4vw, 72px);
  --gl-t-2: clamp(30px, 3.8vw, 52px);
  --gl-t-3: clamp(20px, 1.7vw, 24px);
  --gl-t-bajada: clamp(17px, 1.35vw, 19.5px);
  --gl-t-cuerpo: 16px;
  --gl-t-chico: 14px;
  --gl-t-rotulo: 12.5px;

  /* La web: espaciado (múltiplos de 4) y grilla */
  --gl-e-1: 4px;
  --gl-e-2: 8px;
  --gl-e-3: 12px;
  --gl-e-4: 16px;
  --gl-e-5: 24px;
  --gl-e-6: 32px;
  --gl-e-7: 48px;
  --gl-e-8: 64px;
  --gl-e-9: 96px;
  --gl-seccion-y: clamp(80px, 11vw, 152px);
  --gl-margen: clamp(16px, 4vw, 40px);  /* el costado: 16 px en el celular */
  --gl-ancho: 1240px;
  --gl-hueco: clamp(12px, 1.6vw, 20px); /* entre celdas del bento */
  --gl-cabecera: 64px;                   /* alto de la cabecera (la usa también el candado 3D) */
}

/* ── 2 · Base ───────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--gl-fondo);
  color-scheme: dark;
  scroll-padding-top: calc(var(--gl-cabecera) + 12px);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100%;
  background: var(--gl-fondo);
  color: var(--gl-texto);
  font: 400 var(--gl-t-cuerpo)/1.55 var(--gl-letra);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: rgba(255, 191, 0, 0.32); color: var(--gl-marca-crema); }
:focus-visible { outline: 2px solid var(--gl-marca-oro); outline-offset: 3px; border-radius: 6px; }
.gl-solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gl-saltar {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 50;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gl-marca-crema);
  color: var(--gl-marca-tinta);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.gl-saltar:focus { transform: none; }
.gl-icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 3 · El fondo vivo: las luces de oro del kit, fijas detrás de toda la página (sólo transform: no se redibujan) ── */
.gl-fondo-vivo {
  position: fixed;
  inset: -30% -40%;
  z-index: 0;
  pointer-events: none;
  background: var(--gl-v-luces);
}
@media (prefers-reduced-motion: no-preference) {
  .gl-fondo-vivo { animation: gl-luces var(--gl-v-luces-duracion) ease-in-out infinite alternate; will-change: transform; }
}
@keyframes gl-luces {
  0% { transform: translate3d(-6%, -3%, 0) rotate(0deg); }
  50% { transform: translate3d(5%, 4%, 0) rotate(8deg); }
  100% { transform: translate3d(-3%, 6%, 0) rotate(-6deg); }
}

/* ── 4 · Grilla y secciones ─────────────────────────────────────────────────────────────────────────────────────── */
main { position: relative; display: block; }
.gl-envase { width: 100%; max-width: var(--gl-ancho); margin-inline: auto; padding-inline: var(--gl-margen); }
.gl-seccion { position: relative; z-index: 2; padding-block: var(--gl-seccion-y); }
.gl-seccion--pegada { padding-top: 0; }
.gl-grilla { display: grid; gap: var(--gl-hueco); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gl-dos { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.gl-dos--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.gl-dos--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gl-pila > * + * { margin-top: var(--gl-e-4); }
@media (max-width: 859px) {
  .gl-dos, .gl-dos--5-7, .gl-dos--7-5 { grid-template-columns: minmax(0, 1fr); }
}

/* La cabeza de una sección: el rótulo de arriba, el título y la bajada */
.gl-cabeza-seccion { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.gl-cabeza-seccion--centro { margin-inline: auto; text-align: center; }
.gl-cabeza-seccion--centro .gl-sobretitulo { justify-content: center; }
.gl-cabeza-seccion .gl-bajada { margin-top: var(--gl-e-5); }

/* ── 5 · Tipografía ─────────────────────────────────────────────────────────────────────────────────────────────── */
.gl-sobretitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--gl-e-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gl-marca-oro);
}
.gl-sobretitulo::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.gl-titulo-heroe, .gl-titulo-1, .gl-titulo-2, .gl-titulo-3 {
  font-family: var(--gl-letra-marca);
  font-weight: 800;
  letter-spacing: var(--gl-apretada);
  color: var(--gl-marca-crema);
  text-wrap: balance;
}
.gl-titulo-heroe { font-size: var(--gl-t-heroe); line-height: 0.98; }
.gl-titulo-1 { font-size: var(--gl-t-1); line-height: 1; }
.gl-titulo-2 { font-size: var(--gl-t-2); line-height: 1.04; }
.gl-titulo-3 { font-size: var(--gl-t-3); line-height: 1.15; letter-spacing: -0.02em; }
.l { color: var(--gl-marca-oro); }
.gl-bajada { font-size: var(--gl-t-bajada); line-height: 1.55; color: var(--gl-texto-cuerpo); max-width: 36em; text-wrap: pretty; }
.gl-texto { color: var(--gl-texto-cuerpo); text-wrap: pretty; }
.gl-chico { font-size: var(--gl-t-chico); line-height: 1.5; color: var(--gl-texto-2); }
.gl-mono { font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gl-nota { margin-top: var(--gl-e-5); font-size: var(--gl-t-chico); line-height: 1.5; color: var(--gl-texto-2); }

/* ── 6 · Botones y enlaces ──────────────────────────────────────────────────────────────────────────────────────── */
.gl-boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--gl-v-boton-alto);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font: 600 15px/1 var(--gl-letra);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--gl-suave), filter 180ms var(--gl-suave), box-shadow 220ms var(--gl-suave);
}
.gl-boton--oro { background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra); }
.gl-boton--vidrio { background: var(--gl-v-boton-vidrio); color: var(--gl-marca-crema); box-shadow: var(--gl-v-boton-vidrio-sombra); }
.gl-boton--pulgar { min-height: var(--gl-v-boton-pulgar); padding: 0 26px; font-size: 16px; }
.gl-boton--chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.gl-boton .gl-icono { width: 18px; height: 18px; stroke-width: 2; }
.gl-boton:active { transform: scale(0.97); }
@media (hover: hover) {
  .gl-boton--oro:hover { filter: brightness(1.06); box-shadow: var(--gl-v-oro-sombra), 0 14px 34px rgba(255, 191, 0, 0.32); }
  .gl-boton--vidrio:hover { filter: brightness(1.25); }
  .gl-boton:hover { transform: translateY(-1px); }
  /* la pasada de brillo del kit, al pasar el mouse */
  .gl-boton::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--gl-v-brillo-pasada) 130% 0 / 300% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
  }
  .gl-boton:hover::after { animation: gl-pasada var(--gl-v-brillo-duracion) var(--gl-v-brillo-curva) both; }
}
.gl-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--gl-e-6); }

.gl-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--gl-marca-crema);
  text-decoration: none;
}
.gl-enlace .gl-icono { width: 18px; height: 18px; color: var(--gl-marca-oro); transition: transform 260ms var(--gl-suave); }
.gl-enlace span { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 320ms var(--gl-suave); padding-bottom: 2px; }
@media (hover: hover) {
  .gl-enlace:hover span { background-size: 100% 1px; }
  .gl-enlace:hover .gl-icono { transform: translateX(4px); }
}

/* ── 7 · Rótulos: lo que dice cada afirmación (Funciona hoy · En el primer edificio · Próximamente) ───────────────── */
.gl-rotulo {
  --punto: var(--gl-marca-oro);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 6px 11px 6px 9px;
  border: 1px solid var(--gl-filo);
  border-radius: 999px;
  background: rgba(247, 242, 230, 0.05);
  font-size: var(--gl-t-rotulo);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gl-texto);
  white-space: nowrap;
}
.gl-rotulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--punto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--punto) 22%, transparent); }
.gl-rotulo--hoy { --punto: var(--gl-ok); }
.gl-rotulo--primero { --punto: var(--gl-atencion); }
.gl-rotulo--pronto { --punto: var(--gl-marca-oro); border-style: dashed; border-color: rgba(255, 191, 0, 0.32); }
.gl-rotulo--pronto::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--punto); }

/* La leyenda de los rótulos (una vez por página, cerca del primero) */
.gl-leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: var(--gl-e-5); font-size: var(--gl-t-chico); color: var(--gl-texto-2); }

/* ── 8 · Tarjetas de vidrio ─────────────────────────────────────────────────────────────────────────────────────── */
.gl-tarjeta {
  position: relative;
  border-radius: var(--gl-v-radio);
  background: var(--gl-v-tarjeta);
  border: 1px solid var(--gl-v-tarjeta-borde);
  box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo), var(--gl-v-tarjeta-sombra);
}
.gl-tarjeta--solida { background: var(--gl-v-tarjeta-solida); }
.gl-tarjeta__cuerpo { padding: clamp(22px, 2.6vw, 34px); }
.gl-tarjeta .gl-titulo-3 + .gl-texto, .gl-tarjeta .gl-titulo-3 + p { margin-top: 10px; }
.gl-tarjeta .gl-rotulo { margin-bottom: 14px; }
/* La pasada de brillo cuando llega el candado (data-brillando la pone candado.js en la sección) */
@media (prefers-reduced-motion: no-preference) {
  .gl-tarjeta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: var(--gl-v-brillo-pasada) 120% 0 / 320% 100% no-repeat;
  }
  [data-brillando] .gl-tarjeta::after { animation: gl-pasada var(--gl-v-brillo-duracion) var(--gl-v-brillo-curva) both; }
}
@keyframes gl-pasada {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -20% 0; }
}
/* La tarjeta que reacciona al mouse: sube 4 px, se le aclara el borde y una luz sigue al puntero (gl.js pone --mx/--my) */
.gl-interactiva { transition: transform 420ms var(--gl-suave), border-color 300ms var(--gl-suave), box-shadow 420ms var(--gl-suave); }
.gl-interactiva::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 214, 107, 0.11), transparent 45%);
  transition: opacity 300ms var(--gl-suave);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gl-interactiva:hover { transform: translateY(-4px); border-color: rgba(255, 214, 107, 0.26); box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo), 0 22px 48px rgba(0, 0, 0, 0.45); }
  .gl-interactiva:hover::before { opacity: 1; }
}

/* ── 9 · Bento: celdas de distinto tamaño en una grilla de 6 columnas ───────────────────────────────────────────── */
.gl-bento {
  display: grid;
  gap: var(--gl-hueco);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
}
.gl-bento > * { grid-column: span 2; min-width: 0; }
.gl-bento .gl-celda--3 { grid-column: span 3; }
.gl-bento .gl-celda--4 { grid-column: span 4; }
.gl-bento .gl-celda--6 { grid-column: span 6; }
.gl-bento .gl-celda--alta { grid-row: span 2; }
@media (max-width: 859px) {
  .gl-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .gl-bento > *, .gl-bento .gl-celda--3, .gl-bento .gl-celda--4, .gl-bento .gl-celda--6 { grid-column: auto; }
  .gl-bento .gl-celda--alta { grid-row: auto; }
}
@media (min-width: 600px) and (max-width: 859px) {
  .gl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-bento .gl-celda--alta, .gl-bento .gl-celda--4, .gl-bento .gl-celda--6 { grid-column: span 2; }
}

/* ── 10 · Fotos: la foto con su lugar reservado (sin saltos), la foto con texto y la banda ───────────────────────── */
.gl-foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--gl-v-radio);
  background: #0f0d09;
  box-shadow: 0 0 0 1px var(--gl-v-tarjeta-borde), 0 20px 50px rgba(0, 0, 0, 0.4);
}
.gl-foto > img, .gl-foto picture > img { width: 100%; height: 100%; object-fit: cover; }
.gl-foto--3-2 { aspect-ratio: 3 / 2; }
.gl-foto--4-5 { aspect-ratio: 4 / 5; }
.gl-foto--2-3 { aspect-ratio: 2 / 3; }
.gl-foto--ancha { aspect-ratio: 21 / 9; }
/* La foto con texto: la foto llena la celda, un velo de abajo hacia arriba y el texto encima */
.gl-foto-texto {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--gl-v-radio);
  background: #0f0d09;
  box-shadow: 0 0 0 1px var(--gl-v-tarjeta-borde), 0 20px 50px rgba(0, 0, 0, 0.35);
  color: var(--gl-marca-crema);
  text-decoration: none;
}
.gl-foto-texto__foto { position: absolute; inset: 0; z-index: -2; }
.gl-foto-texto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gl-suave); }
.gl-foto-texto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 9, 6, 0) 30%, rgba(11, 9, 6, 0.72) 62%, rgba(11, 9, 6, 0.94) 100%);
  pointer-events: none;
}
.gl-foto-texto__texto { position: relative; padding: clamp(22px, 2.6vw, 32px); }
.gl-foto-texto__texto .gl-texto { margin-top: 10px; max-width: 30em; }
.gl-foto-texto__texto .gl-enlace { margin-top: 10px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gl-foto-texto:hover .gl-foto-texto__foto img, .gl-foto-texto:hover .gl-puntos__lienzo > img { transform: scale(1.045); }
}
/* --costado: en la compu el texto va a la izquierda y la foto se ve a la derecha (celdas anchas y bajas) */
@media (min-width: 860px) {
  .gl-foto-texto--costado { justify-content: center; }
  .gl-foto-texto--costado::after { background: linear-gradient(90deg, rgba(11, 9, 6, 0.95) 0%, rgba(11, 9, 6, 0.86) 40%, rgba(11, 9, 6, 0.2) 74%, rgba(11, 9, 6, 0) 100%); }
  .gl-foto-texto--costado .gl-foto-texto__texto { max-width: 60%; }
}
/* La banda: una foto de borde a borde con el texto encima (estilo «una sola foto hace todo el trabajo») */
.gl-banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 28px);
  min-height: clamp(260px, 38vw, 480px);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 0 0 1px var(--gl-v-tarjeta-borde), 0 30px 70px rgba(0, 0, 0, 0.45);
}
.gl-banda > img, .gl-banda picture { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gl-banda::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 9, 6, 0.86) 0%, rgba(11, 9, 6, 0.4) 55%, rgba(11, 9, 6, 0.1) 100%),
    linear-gradient(0deg, rgba(11, 9, 6, 0.6), transparent 50%);
}
.gl-banda__texto { padding: clamp(24px, 4vw, 56px); max-width: 40rem; }
/* La grilla fina de oro encima de una foto (como un plano) */
.gl-banda--plano::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 214, 107, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 214, 107, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000);
}
.gl-credito { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: 11px; color: rgba(247, 242, 230, 0.7); }

/* ── 11 · Puntos sobre una foto (lo que hace GringoLock en cada lugar) ──────────────────────────────────────────── */
/* .gl-puntos llena su celda; el lienzo tiene la proporción de la foto y la cubre como object-fit: cover, así cada punto
   (en % de la foto) cae siempre en su lugar. */
.gl-puntos { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.gl-puntos__lienzo {
  --proporcion: 0.6667;                                  /* ancho / alto de la foto */
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * var(--proporcion)));
  aspect-ratio: var(--proporcion);
  transform: translate(-50%, -50%);
}
.gl-puntos__lienzo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gl-suave); }
.gl-punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gl-punto::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gl-v-oro);
  box-shadow: 0 0 0 4px rgba(255, 191, 0, 0.22), 0 0 18px rgba(255, 191, 0, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .gl-punto::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 107, 0.7);
    animation: gl-latido 2.4s var(--gl-suave) infinite;
  }
}
@keyframes gl-latido { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.gl-punto__globo {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(22, 19, 12, 0.92);
  box-shadow: 0 0 0 1px var(--gl-v-borde), 0 12px 28px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--gl-marca-crema);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 220ms var(--gl-suave), transform 260ms var(--gl-suave);
}
.gl-punto__globo b { display: block; margin-bottom: 3px; color: var(--gl-marca-oro); font-weight: 600; }
.gl-punto[aria-expanded='true'] .gl-punto__globo,
.gl-punto:focus-visible .gl-punto__globo { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .gl-punto:hover .gl-punto__globo { opacity: 1; transform: translate(-50%, 0); } }
.gl-punto--der .gl-punto__globo { left: auto; right: -6px; transform: translate(0, 6px); }
.gl-punto--der[aria-expanded='true'] .gl-punto__globo, .gl-punto--der:focus-visible .gl-punto__globo { transform: none; }
@media (hover: hover) { .gl-punto--der:hover .gl-punto__globo { transform: none; } }

/* ── 12 · Listas con rótulo y pasos numerados ───────────────────────────────────────────────────────────────────── */
.gl-lista { list-style: none; margin: 0; padding: 0; }
.gl-lista > li { padding: 18px 0; border-top: 1px solid var(--gl-filo); }
.gl-lista > li:last-child { padding-bottom: 0; }
.gl-lista h3 { margin-top: 12px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--gl-marca-crema); }
.gl-lista p { margin-top: 6px; color: var(--gl-texto-cuerpo); }
.gl-lista--grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
@media (max-width: 599px) { .gl-lista--grilla { grid-template-columns: minmax(0, 1fr); } }
.gl-lista--datos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--gl-e-5); font-size: var(--gl-t-chico); color: var(--gl-texto-2); }
.gl-lista--datos > li { padding: 0; border: 0; }
.gl-lista--datos > li::before { content: '·'; margin-right: 8px; color: var(--gl-marca-oro); }
.gl-lista--checks > li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.gl-lista--checks .gl-icono { margin-top: 2px; color: var(--gl-marca-oro); }

.gl-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gl-hueco); }
.gl-pasos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-paso { position: relative; padding: clamp(24px, 2.6vw, 34px); }
.gl-paso__numero {                     /* el número va en un elemento (los ::before/::after son de la tarjeta) */
  display: block;
  margin-bottom: clamp(28px, 4vw, 56px);
  font-family: var(--gl-letra-marca);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 214, 107, 0.55);
  background: linear-gradient(180deg, rgba(255, 214, 107, 0.22), transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
}
.gl-paso .gl-texto { margin-top: 10px; }
.gl-paso .gl-rotulo { margin-top: 16px; }
@media (max-width: 859px) { .gl-pasos { grid-template-columns: minmax(0, 1fr); } .gl-paso__numero { margin-bottom: 20px; } }

/* ── 13 · La maqueta de teléfono (y la app adentro, a escala: todo en em, con la letra atada al ancho) ────────────── */
.gl-telefonos { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 12px 0 8px; }
.gl-telefonos > .gl-telefono { flex: none; }
/* En la compu, tres teléfonos escalonados: el del medio (--centro) más grande y adelante. En el HTML el del medio va
   primero, así en el celular es el primero del carrusel. */
.gl-telefonos > .gl-telefono--izq { order: 1; z-index: 1; --w: clamp(140px, 14.5vw, 210px); transform: translate(14%, 7%) rotate(-5deg); }
.gl-telefonos > .gl-telefono--centro { order: 2; z-index: 2; --w: clamp(160px, 16.5vw, 240px); }
.gl-telefonos > .gl-telefono--der { order: 3; z-index: 1; --w: clamp(140px, 14.5vw, 210px); transform: translate(-14%, 7%) rotate(5deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 860px) {
  .gl-telefonos:hover > .gl-telefono--izq { transform: translate(6%, 4%) rotate(-7deg); }
  .gl-telefonos:hover > .gl-telefono--der { transform: translate(-6%, 4%) rotate(7deg); }
  .gl-telefonos:hover > .gl-telefono--centro { transform: translateY(-8px); }
}
@media (max-width: 859px) {
  /* en el celular: se pasan con el dedo (el carrusel tiene su propio scroll; la página no se corre de costado) */
  .gl-telefonos {
    justify-content: flex-start;
    gap: 14px;
    margin-inline: calc(var(--gl-margen) * -1);
    padding: 12px var(--gl-margen) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gl-margen);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gl-telefonos::-webkit-scrollbar { display: none; }
  .gl-telefonos > .gl-telefono { order: 0; scroll-snap-align: start; transform: none !important; --w: 236px; }
}
.gl-telefono {
  --w: 220px;
  position: relative;
  width: var(--w);
  aspect-ratio: 390 / 820;
  padding: calc(var(--w) * 0.036);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(160deg, #2b2519, #0d0b07 40%, #1b170f);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 190, 0.22), inset 0 0 0 3px #050403, 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 191, 0, 0.08);
  transition: transform 600ms var(--gl-suave);
}
.gl-telefono__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.135);
  background: var(--gl-marca-negro);
  container-type: inline-size;
}
.gl-telefono__pantalla::before { /* la luz del ambiente de la app */
  content: '';
  position: absolute;
  inset: -20% -40%;
  background: var(--gl-v-luces);
  opacity: 0.85;
}
.gl-telefono__isla { position: absolute; top: 2.2%; left: 50%; z-index: 5; width: 30%; height: 3.6%; border-radius: 99px; background: #000; transform: translateX(-50%); }

/* La app adentro: la medida base es 1 em = 1/26 del ancho de la pantalla (≈ 15 px en un teléfono de 390) */
.gl-app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; font-size: 3.85cqw; line-height: 1.35; color: var(--gl-texto); }
.gl-app svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gl-app__estado { display: flex; justify-content: space-between; align-items: center; padding: 0.95em 1.9em 0.2em; font-size: 0.86em; font-weight: 600; }
.gl-app__estado span:last-child { letter-spacing: 0.1em; }
.gl-app__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1.2em 0.65em;
  background: linear-gradient(180deg, var(--gl-v-relleno-luz), transparent 60%), rgba(26, 22, 14, 0.55);
  box-shadow: inset 0 -1px 0 var(--gl-v-borde);
}
.gl-app__marca { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--gl-letra-marca); font-weight: 800; font-size: 1.32em; letter-spacing: var(--gl-apretada); }
.gl-app__marca img { width: 1.55em; height: 1.55em; border-radius: 0.4em; box-shadow: 0 0 0 1px var(--gl-v-lente-borde); }
.gl-app__marca i { font-style: normal; color: var(--gl-marca-oro); }
.gl-app__perfil { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #6b5a2c, #2a2210 70%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 214, 107, 0.25); }
.gl-app__cuerpo { flex: 1; min-height: 0; padding: 1.1em 1.1em 0; overflow: hidden; }
.gl-app__antes { font-size: 0.92em; color: var(--gl-texto-2); }
.gl-app__titulo { margin: 0.1em 0 0.7em; font-family: var(--gl-letra-marca); font-weight: 800; font-size: 2.15em; line-height: 1.05; letter-spacing: var(--gl-apretada); color: var(--gl-marca-crema); }
.gl-app__panel { margin-bottom: 0.8em; padding: 0.95em; border-radius: 1.25em; background: var(--gl-v-tarjeta); border: 1px solid var(--gl-v-tarjeta-borde); box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo); list-style: none; }
.gl-app__arriba { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; margin-bottom: 0.7em; }
.gl-app__rotulo { font-size: 0.74em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gl-texto-2); }
.gl-app__estado-ok, .gl-app__estado-at { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82em; color: var(--gl-texto-2); }
.gl-app__estado-ok::before, .gl-app__estado-at::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--gl-ok); }
.gl-app__estado-at::before { background: var(--gl-atencion); }
.gl-app__deslizar { position: relative; display: flex; align-items: center; height: 3.6em; padding: 0.3em; border-radius: 99px; background: var(--gl-v-hundido); box-shadow: inset 0 0 0 1px var(--gl-v-hundido-borde); }
.gl-app__deslizar > span:last-child { flex: 1; text-align: center; padding-right: 2.6em; font-size: 0.9em; font-weight: 600; color: var(--gl-texto-2); }
.gl-app__perilla { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra); }
.gl-app__burbuja { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.7em; padding: 0.45em 0.8em; border-radius: 99px; background: var(--gl-v-boton-vidrio); box-shadow: var(--gl-v-boton-vidrio-sombra); font-size: 0.84em; font-weight: 600; }
.gl-app__burbuja svg { color: var(--gl-marca-oro); }
.gl-app__fila { display: flex; gap: 0.7em; align-items: center; }
.gl-app__fila + .gl-app__fila { margin-top: 0.8em; padding-top: 0.8em; border-top: 1px solid var(--gl-filo); }
.gl-app__datos { flex: 1; min-width: 0; }
.gl-app__datos b { display: block; font-size: 1.08em; font-weight: 600; }
.gl-app__datos .gl-app__estado-ok { margin-top: 0.15em; }
.gl-app__indic { display: flex; flex-wrap: wrap; gap: 0.25em 0.7em; margin-top: 0.4em; font-size: 0.76em; color: var(--gl-texto-2); }
.gl-app__indic span { display: inline-flex; align-items: center; gap: 0.3em; }
.gl-app__indic svg { width: 1.15em; height: 1.15em; }
.gl-app__chips { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.5em; padding: 0; list-style: none; }
.gl-app__chips li { padding: 0.25em 0.6em; border-radius: 99px; border: 1px solid var(--gl-filo); font-size: 0.72em; color: var(--gl-texto); }
.gl-app__abrir { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.7em 1em; border-radius: 99px; background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra); font-weight: 700; font-size: 0.95em; }
.gl-app__abrir--vidrio { background: var(--gl-v-boton-vidrio); color: var(--gl-marca-crema); box-shadow: var(--gl-v-boton-vidrio-sombra); }
.gl-app__icono { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; background: rgba(255, 248, 230, 0.06); color: var(--gl-marca-oro); flex: none; }
.gl-app__dia { margin: 0.2em 0 0.5em; font-size: 0.74em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gl-texto-2); }
.gl-app__entrada { display: flex; align-items: center; gap: 0.7em; }
.gl-app__entrada + .gl-app__entrada { margin-top: 0.75em; }
.gl-app__entrada small { display: block; font-size: 0.8em; color: var(--gl-texto-2); }
.gl-app__entrada > span:nth-child(2) { flex: 1; min-width: 0; }
.gl-app__entrada b { font-weight: 600; }
.gl-app__hora { font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: 0.86em; color: var(--gl-texto-2); }
.gl-app__accion { margin: 0.4em 0 0; padding: 0.95em; border-radius: 99px; background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra); text-align: center; font-weight: 700; display: flex; justify-content: center; gap: 0.4em; align-items: center; }
.gl-app__pestanas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto 0.75em 1.6em;
  padding: 0.28em;
  height: 3.65em;
  border-radius: 99px;
  background: var(--gl-v-barra-fondo);
  box-shadow: var(--gl-v-barra-sombra);
}
.gl-app__pestanas span { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.05em; font-size: 0.7em; font-weight: 600; color: var(--gl-texto-2); border-radius: 99px; }
.gl-app__pestanas svg { width: 1.6em; height: 1.6em; }
.gl-app__pestanas .activa { color: var(--gl-marca-crema); background: var(--gl-v-burbuja-fondo); box-shadow: var(--gl-v-burbuja-sombra); }
.gl-app__pestanas .activa svg { color: var(--gl-marca-oro); filter: drop-shadow(0 0 0.35em rgba(255, 191, 0, 0.55)); }

/* ── 14 · Un día sin llaves: desplazamiento pegajoso ────────────────────────────────────────────────────────────── */
.gl-momentos { list-style: none; margin: 0; padding: 0; position: relative; }
.gl-momentos::before { /* la línea del día; --avance (0 a 1) la llena de oro mientras se baja */
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gl-marca-oro) calc(var(--avance, 0) * 100%), rgba(247, 242, 230, 0.12) calc(var(--avance, 0) * 100%));
}
.gl-momento { position: relative; padding: 0 0 0 40px; transition: opacity 500ms var(--gl-suave); }
.gl-momento + .gl-momento { margin-top: clamp(40px, 12vh, 140px); }
.gl-momento::before { /* el punto del momento */
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gl-fondo);
  box-shadow: inset 0 0 0 2px rgba(247, 242, 230, 0.3);
  transition: box-shadow 400ms var(--gl-suave), background 400ms var(--gl-suave);
}
.gl-momento__hora { display: block; font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--gl-marca-oro); }
.gl-momento .gl-titulo-3 { margin-top: 10px; }
.gl-momento .gl-texto { margin-top: 8px; max-width: 32em; }
.gl-momento .gl-rotulo { margin-top: 14px; }
.gl-js .gl-momento { opacity: 0.6; }               /* atenuado, pero el texto sigue pasando AA */
.gl-js .gl-momento.es-activo, .gl-js .gl-momento.es-pasado { opacity: 1; }
.gl-momento.es-activo::before, .gl-momento.es-pasado::before { background: var(--gl-marca-oro); box-shadow: 0 0 0 4px rgba(255, 191, 0, 0.2), 0 0 16px rgba(255, 191, 0, 0.5); }
@media (min-width: 860px) {
  .gl-momento { min-height: 34vh; }
}
/* El renglón del registro: cómo queda anotada cada entrada (igual que «Mis entradas» de la app) */
.gl-registro {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 26rem);
  margin-top: 16px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: var(--gl-v-tarjeta);
  border: 1px solid var(--gl-v-tarjeta-borde);
  box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo);
}
.gl-registro__icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 248, 230, 0.06); color: var(--gl-marca-oro); flex: none; }
.gl-registro__icono .gl-icono { width: 20px; height: 20px; }
.gl-registro__texto { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; }
.gl-registro__texto b { display: block; font-weight: 600; color: var(--gl-marca-crema); }
.gl-registro__texto small { font-size: 13px; color: var(--gl-texto-2); }
.gl-registro__hora { font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--gl-texto-2); }
/* El reloj que acompaña al candado */
.gl-reloj {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(22, 19, 12, 0.78);
  box-shadow: 0 0 0 1px var(--gl-v-borde), 0 10px 24px rgba(0, 0, 0, 0.4);
  font-family: var(--gl-letra-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--gl-marca-crema);
  white-space: nowrap;
  transform: translateX(-50%);
}
.gl-reloj::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gl-marca-oro); box-shadow: 0 0 10px rgba(255, 191, 0, 0.8); }

/* ── 15 · Preguntas desplegables ────────────────────────────────────────────────────────────────────────────────── */
.gl-preguntas { border-top: 1px solid var(--gl-filo); }
.gl-preguntas details { border-bottom: 1px solid var(--gl-filo); }
.gl-preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gl-marca-crema);
  cursor: pointer;
  list-style: none;
}
.gl-preguntas summary::-webkit-details-marker { display: none; }
.gl-preguntas summary::after {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(var(--gl-marca-oro), var(--gl-marca-oro)) center / 14px 2px no-repeat,
    linear-gradient(var(--gl-marca-oro), var(--gl-marca-oro)) center / 2px 14px no-repeat,
    var(--gl-v-boton-vidrio);
  box-shadow: var(--gl-v-boton-vidrio-sombra);
  transition: transform 320ms var(--gl-suave);
}
.gl-preguntas details[open] summary::after { transform: rotate(135deg); }
.gl-preguntas summary:focus-visible { outline-offset: 6px; }
.gl-preguntas .gl-respuesta { padding: 0 56px 22px 0; color: var(--gl-texto-cuerpo); max-width: 44em; }
.gl-preguntas .gl-respuesta .gl-rotulo { margin-bottom: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .gl-preguntas details[open] .gl-respuesta { animation: gl-abre 420ms var(--gl-suave); }
}
@keyframes gl-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 16 · Precio y calculadora ──────────────────────────────────────────────────────────────────────────────────── */
.gl-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-family: var(--gl-letra-marca); font-weight: 800; letter-spacing: -0.04em; color: var(--gl-marca-crema); }
.gl-cifra__numero { font-size: clamp(60px, 6.4vw, 92px); line-height: 0.95; white-space: nowrap; background: linear-gradient(180deg, #fff3d0, var(--gl-marca-oro) 60%, var(--gl-marca-oro-hondo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-cifra__unidad { font-family: var(--gl-letra); font-weight: 500; font-size: 17px; letter-spacing: 0; color: var(--gl-texto-cuerpo); }
.gl-calculadora { margin-top: var(--gl-e-6); padding: 18px; border-radius: 18px; background: var(--gl-v-hundido); box-shadow: inset 0 0 0 1px var(--gl-v-hundido-borde); }
.gl-calculadora label { display: block; font-size: 14px; font-weight: 600; color: var(--gl-marca-crema); }
.gl-calculadora__fila { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.gl-calculadora input[type='range'] { flex: 1; min-width: 0; height: 44px; accent-color: var(--gl-marca-oro); background: transparent; }
.gl-calculadora__total { display: block; margin-top: 10px; font-size: 15px; color: var(--gl-texto-cuerpo); }
.gl-calculadora__total b { font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 20px; color: var(--gl-marca-crema); }
.gl-calculadora__unidades { min-width: 3.5ch; font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: 20px; text-align: right; color: var(--gl-marca-oro); }

/* ── 17 · La cabecera (una píldora de vidrio que flota) y el menú del celular ───────────────────────────────────── */
.gl-cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--gl-cabecera);
  padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  pointer-events: none;                 /* sólo la píldora recibe el mouse: lo de alrededor deja pasar el clic */
}
.gl-cabecera__pildora {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  max-width: calc(var(--gl-ancho) + 16px);
  margin: 0 auto;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gl-v-relleno-luz), transparent 60%), var(--gl-v-relleno);
  backdrop-filter: var(--gl-v-desenfoque);
  -webkit-backdrop-filter: var(--gl-v-desenfoque);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 0 0 1px var(--gl-v-borde), 0 12px 30px var(--gl-v-sombra-baja);
  pointer-events: auto;
}
.gl-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  font-family: var(--gl-letra-marca);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: var(--gl-apretada);
  line-height: 1;
  color: var(--gl-marca-crema);
  text-decoration: none;
  white-space: nowrap;
}
.gl-marca img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px var(--gl-v-lente-borde), 0 4px 14px rgba(255, 191, 0, 0.18); }
.gl-nav { display: flex; align-items: center; gap: 2px; }
.gl-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(247, 242, 230, 0.8);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--gl-suave), background 200ms var(--gl-suave);
}
.gl-nav a:hover { color: var(--gl-marca-crema); background: rgba(255, 248, 230, 0.06); }
.gl-nav a[aria-current='page'] { color: var(--gl-marca-crema); background: var(--gl-v-lente); box-shadow: inset 0 0 0 1px var(--gl-v-lente-borde); }
.gl-cabecera__acciones { display: flex; align-items: center; gap: 6px; }
.gl-ingresar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--gl-marca-crema); text-decoration: none; }
.gl-ingresar:hover { background: rgba(255, 248, 230, 0.06); }
.gl-menu-boton {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gl-v-boton-vidrio);
  box-shadow: var(--gl-v-boton-vidrio-sombra);
  cursor: pointer;
}
.gl-menu-boton .gl-icono { width: 20px; height: 20px; stroke-width: 2; }
.gl-menu-boton .gl-icono--cerrar { display: none; }
.gl-menu-boton[aria-expanded='true'] .gl-icono--abrir { display: none; }
.gl-menu-boton[aria-expanded='true'] .gl-icono--cerrar { display: block; }
@media (max-width: 1099px) {
  .gl-nav, .gl-ingresar { display: none; }
  .gl-menu-boton { display: grid; }
}
@media (max-width: 379px) { .gl-cabecera__acciones .gl-boton { display: none; } }

/* El menú del celular: una hoja de vidrio a pantalla completa, debajo de la cabecera */
.gl-menu {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  padding: calc(var(--gl-cabecera) + 20px) var(--gl-margen) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(11, 9, 6, 0.72), rgba(11, 9, 6, 0.9)), var(--gl-v-relleno);
  backdrop-filter: var(--gl-v-desenfoque);
  -webkit-backdrop-filter: var(--gl-v-desenfoque);
}
.gl-menu[hidden] { display: none; }
.gl-menu nav { display: flex; flex-direction: column; }
.gl-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--gl-filo);
  font-family: var(--gl-letra-marca);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: var(--gl-apretada);
  color: var(--gl-marca-crema);
  text-decoration: none;
}
.gl-menu nav a .gl-icono { width: 22px; height: 22px; color: var(--gl-marca-oro); }
.gl-menu__abajo { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; }
.gl-menu__abajo .gl-boton { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gl-menu:not([hidden]) nav a { animation: gl-entra 520ms var(--gl-suave) both; }
  .gl-menu:not([hidden]) nav a:nth-child(2) { animation-delay: 40ms; }
  .gl-menu:not([hidden]) nav a:nth-child(3) { animation-delay: 80ms; }
  .gl-menu:not([hidden]) nav a:nth-child(4) { animation-delay: 120ms; }
  .gl-menu:not([hidden]) nav a:nth-child(5) { animation-delay: 160ms; }
  .gl-menu:not([hidden]) nav a:nth-child(6) { animation-delay: 200ms; }
}
@keyframes gl-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.gl-menu-abierto { overflow: hidden; }

/* ── 18 · La acción del pulgar: «Pedí tu propuesta» flotando abajo en el celular (aparece después de la portada) ── */
.gl-pulgar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 18;
  display: none;
  width: min(calc(100% - 32px), 400px);
  transform: translate(-50%, 140%);
  transition: transform 520ms var(--gl-suave);
}
.gl-pulgar .gl-boton { width: 100%; box-shadow: var(--gl-v-oro-sombra), 0 18px 40px rgba(0, 0, 0, 0.55); }
.gl-pulgar.es-visible { transform: translate(-50%, 0); }
@media (max-width: 859px) { .gl-js .gl-pulgar { display: block; } }

/* ── 19 · El pie ────────────────────────────────────────────────────────────────────────────────────────────────── */
.gl-pie { position: relative; z-index: 2; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gl-filo); background: linear-gradient(180deg, rgba(11, 9, 6, 0), rgba(11, 9, 6, 0.85) 30%); }
.gl-pie__arriba { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.gl-pie__marca p { margin-top: 14px; max-width: 22em; color: var(--gl-texto-2); }
.gl-pie h2 { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gl-marca-oro); }
.gl-pie ul { list-style: none; margin: 0; padding: 0; }
.gl-pie li a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(247, 242, 230, 0.82); text-decoration: none; overflow-wrap: anywhere; }
.gl-pie li a:hover { color: var(--gl-marca-crema); text-decoration: underline; text-underline-offset: 4px; }
.gl-pie__palabra {
  margin: clamp(48px, 7vw, 88px) 0 0;
  font-family: var(--gl-letra-marca);
  font-weight: 800;
  font-size: clamp(64px, 17vw, 250px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 214, 107, 0.22), rgba(255, 191, 0, 0.02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
.gl-pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gl-filo); font-size: 13px; line-height: 1.55; color: var(--gl-texto-2); }
.gl-pie__abajo a { color: inherit; }
/* Los créditos de las fotos, escondidos a un toque (vuelta 2): <details class="gl-pie__creditos"><summary>Créditos</summary>
   <p>Fotos: …</p></details>. Cerrado queda a la derecha de lo legal; abierto crece hacia la izquierda y el «Créditos» no se
   mueve. Unsplash y Pexels no obligan a citar: alcanza con que estén a un toque. Arriba de una foto, ningún crédito. */
.gl-pie__creditos { max-width: 46em; margin-left: auto; text-align: right; }
.gl-pie__creditos[open] { flex: 1 1 20em; }
.gl-pie__creditos > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-block: -12px;
  padding-inline: 2px;
  list-style: none;
  cursor: pointer;
  color: var(--gl-texto-2);
  text-decoration: underline;
  text-decoration-color: rgba(179, 168, 140, 0.45);
  text-underline-offset: 3px;
}
.gl-pie__creditos > summary::-webkit-details-marker { display: none; }
.gl-pie__creditos > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--gl-suave); }
.gl-pie__creditos[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.gl-pie__creditos > summary:hover { color: var(--gl-marca-crema); }
.gl-pie__creditos > p { margin-top: 10px; text-align: left; }
.gl-pie__abajo p { overflow-wrap: anywhere; }
@media (max-width: 859px) {
  .gl-pie__arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-pie__marca { grid-column: 1 / -1; }
  .gl-pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* lugar para la acción del pulgar */
}

/* ── 20 · Movimiento al bajar: aparece una vez (gl.js agrega .es-visible). Sin JS o con «reducir movimiento», quieto ─ */
.gl-js .gl-aparece { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--gl-aparece-duracion) var(--gl-suave), transform var(--gl-aparece-duracion) var(--gl-suave); transition-delay: var(--retraso, 0ms); }
.gl-js .gl-aparece.es-visible { opacity: 1; transform: none; }
.gl-js .gl-aparece--escala { transform: scale(0.96); }
/* El título que entra palabra por palabra (gl.js parte el texto; el título conserva su aria-label) */
.gl-palabra { display: inline-block; }
.gl-js [data-palabras] .gl-palabra { opacity: 0; transform: translate3d(0, 0.45em, 0); transition: opacity 700ms var(--gl-suave), transform 800ms var(--gl-suave); transition-delay: calc(var(--i, 0) * 55ms); }
.gl-js [data-palabras].es-visible .gl-palabra { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gl-js .gl-aparece, .gl-js [data-palabras] .gl-palabra { opacity: 1; transform: none; transition: none; }
  .gl-js .gl-momento { opacity: 1; }
  .gl-boton, .gl-interactiva, .gl-telefono, .gl-pulgar, .gl-foto-texto__foto img { transition: none; }
}

/* ── 21 · El candado 3D: los lugares reservados y la capa que viaja (los nombres los usa candado.js: no cambiarlos) ── */
.gl-con-candado {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: var(--gl-ancho);
  margin: 0 auto;
  padding: var(--gl-seccion-y) var(--gl-margen);
}
.gl-con-candado > * { min-width: 0; }
.columna-candado { position: relative; align-self: stretch; }
/* El lugar del candado: reservado desde el HTML (cuadrado, con su tamaño) para que nada salte cuando llega el 3D */
.puesto {
  --l: clamp(250px, 26vw, 340px);
  position: relative;
  width: var(--l);
  aspect-ratio: 1;
  margin: 0 auto;
}
@media (min-width: 860px) {
  /* en la compu, el lugar queda pegado a media pantalla mientras pasa su texto (salvo en la portada) */
  .gl-con-candado:not(.gl-heroe) .puesto { position: sticky; top: calc(50vh + var(--gl-cabecera) / 2 - var(--l) / 2); margin: 0 0 0 auto; }
}
.puesto::after { /* el piso: una luz de oro muy baja debajo del candado quieto */
  content: '';
  position: absolute;
  left: 24%; right: 24%; bottom: 11%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 191, 0, 0.2), rgba(255, 191, 0, 0.05) 55%, transparent);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  transition: opacity 500ms var(--gl-suave);
}
.quieto { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 500ms var(--gl-suave); }
html.con-3d .quieto, html.con-3d .puesto::after { opacity: 0; }
.capa-3d {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--s0, 560px);
  height: var(--s0, 560px);
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--gl-suave);
  contain: strict;
  will-change: transform;
}
html.con-3d .capa-3d { opacity: 1; }
.capa-3d canvas { display: block; width: 100%; height: 100%; }
.capa-3d::after {
  content: '';
  position: absolute;
  left: 24%; right: 24%; bottom: 11%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 191, 0, 0.2), rgba(255, 191, 0, 0.05) 55%, transparent);
  filter: blur(6px);
  z-index: -1;
}
.lienzo-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; visibility: hidden; }
.agarre {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  display: none;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.con-3d .agarre { display: block; }
.agarre.agarrando { cursor: grabbing; }

/* La portada */
.gl-heroe {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: center;
  min-height: calc(100vh - var(--gl-cabecera));
  min-height: calc(100svh - var(--gl-cabecera));
  padding-block: 24px 40px;
}
.gl-heroe .columna-candado { align-self: center; }
.gl-heroe .puesto { --l: min(100%, calc(100vh - 150px), 600px); }
.gl-heroe__tarjeta { max-width: 580px; padding: clamp(28px, 3vw, 40px); }
.gl-heroe__tarjeta .gl-bajada { margin-top: 20px; }
.gl-heroe__tarjeta .gl-acciones { margin-top: 28px; }
.gl-bajar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gl-texto-2);
  text-decoration: none;
  transform: translateX(-50%);
}
.gl-bajar::after { content: ''; width: 1px; height: 36px; background: linear-gradient(180deg, var(--gl-marca-oro), transparent); }
@media (prefers-reduced-motion: no-preference) { .gl-bajar::after { animation: gl-baja 2.2s var(--gl-suave) infinite; transform-origin: top; } }
@keyframes gl-baja { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* El celular: el candado viaja arriba de cada texto, más chico */
@media (max-width: 859px) {
  .gl-con-candado { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 56px var(--gl-margen) 64px; }
  .columna-candado { align-self: auto; }
  .puesto { --l: min(54vw, 210px); }
  .gl-heroe { padding: 4px var(--gl-margen) 40px; min-height: 0; gap: 8px; }
  .gl-heroe .puesto { --l: min(82vw, 38vh, 330px); --l: min(82vw, 38svh, 330px); }
  .gl-heroe__tarjeta { max-width: none; padding: 26px 20px 22px; }
  .gl-titulo-heroe { font-size: 42px; }
  .gl-heroe .gl-acciones .gl-boton { flex: 1 1 100%; }
  .gl-bajar { display: none; }
}

/* ── 22 · Accesibilidad de la transparencia y respaldo sin backdrop-filter ──────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .gl-cabecera__pildora, .gl-menu { background: var(--gl-v-tarjeta-solida); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .gl-tarjeta, .gl-registro { background: var(--gl-v-tarjeta-solida); }
  .gl-texto, .gl-bajada, .gl-lista p { color: var(--gl-marca-crema); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gl-cabecera__pildora { background: rgba(22, 19, 12, 0.94); }
  .gl-menu { background: rgba(11, 9, 6, 0.97); }
}
@media print {
  .gl-fondo-vivo, .capa-3d, .lienzo-fx, .agarre, .gl-pulgar, .gl-cabecera { display: none !important; }
}

/* ── 23 · Piezas chicas: ícono grande, controles de la casa, aviso del celular ──────────────────────────────────── */
.gl-icono-grande {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--gl-v-lente);
  box-shadow: inset 0 0 0 1px var(--gl-v-lente-borde);
  color: var(--gl-marca-oro);
}
.gl-icono-grande .gl-icono { width: 24px; height: 24px; }
/* Los controles de la casa (maqueta, decorativa): ícono, nombre y su interruptor */
.gl-controles { position: relative; z-index: 1; display: grid; gap: 10px; align-self: flex-end; width: min(calc(100% - 44px), 300px); margin: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) auto; }
.gl-control { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(22, 19, 12, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--gl-v-borde), 0 12px 28px rgba(0, 0, 0, 0.45); }
.gl-control > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.25; }
.gl-control b { display: block; font-size: 14px; font-weight: 600; color: var(--gl-marca-crema); }
.gl-control small { font-size: 12.5px; color: var(--gl-texto-2); }
.gl-control__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 248, 230, 0.06); color: var(--gl-texto-2); transition: background 400ms var(--gl-suave), color 400ms var(--gl-suave); }
.gl-control__icono .gl-icono { width: 19px; height: 19px; }
.gl-interruptor { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: rgba(255, 248, 230, 0.16); transition: background 400ms var(--gl-suave); }
.gl-interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gl-marca-crema); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 500ms var(--gl-resorte); }
.gl-control--prendido .gl-control__icono, .es-visible .gl-control--se-prende .gl-control__icono { background: var(--gl-v-lente); color: var(--gl-marca-oro); }
.gl-control--prendido .gl-interruptor, .es-visible .gl-control--se-prende .gl-interruptor { background: var(--gl-v-oro); }
.gl-control--prendido .gl-interruptor::after, .es-visible .gl-control--se-prende .gl-interruptor::after { transform: translateX(16px); background: #fff; }
.gl-control--se-prende .gl-interruptor, .gl-control--se-prende .gl-interruptor::after, .gl-control--se-prende .gl-control__icono { transition-delay: 1100ms; }
/* El aviso que llega al celular (maqueta, decorativa) */
.gl-aviso { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 248, 230, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px var(--gl-v-borde); }
.gl-aviso > span:last-child { line-height: 1.3; }
.gl-aviso b { display: block; font-size: 14px; font-weight: 600; color: var(--gl-marca-crema); }
.gl-aviso small { font-size: 12.5px; color: var(--gl-texto-2); }
.gl-aviso__icono { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--gl-v-oro); color: var(--gl-marca-tinta); }
.gl-aviso__icono .gl-icono { width: 19px; height: 19px; stroke-width: 2.1; }
@media (prefers-reduced-motion: no-preference) {
  .es-visible .gl-aviso__icono .gl-icono { animation: gl-suena 2.6s var(--gl-suave) 600ms 2; transform-origin: 50% 10%; }
}
@keyframes gl-suena { 0%, 40%, 100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(8deg); } 32% { transform: rotate(-4deg); } }

/* ── 24 · La portada: el armado de cada bloque ──────────────────────────────────────────────────────────────────── */
.gl-dia .gl-cabeza-seccion { margin-bottom: clamp(40px, 6vw, 80px); }
.gl-dia .gl-bajada { max-width: 34em; }
.gl-quien { grid-auto-rows: minmax(300px, auto); }
.gl-quien__admin { min-height: 640px; }
.gl-quien .gl-foto-texto:not(.gl-quien__admin) { min-height: 300px; }
.gl-banda__frase { margin-top: 16px; max-width: 13em; }
.gl-pasos { margin-top: var(--gl-hueco); }
.gl-app-seccion .gl-cabeza-seccion { margin-bottom: 24px; }
.gl-app-seccion .gl-telefonos { margin: 0 0 clamp(36px, 5vw, 64px); }
.gl-app-lista { margin-top: 0; }
.gl-tranquilidad { align-items: center; }
.gl-tranquilidad .gl-cabeza-seccion { margin-bottom: 28px; }
.gl-tranquilidad__tarjetas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.gl-tranquilidad__tarjetas > .gl-tarjeta { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 24px; }
.gl-tranquilidad__tarjetas > .gl-tarjeta > * { grid-column: 2; }
.gl-tranquilidad__tarjetas > .gl-tarjeta > .gl-icono-grande { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.gl-tranquilidad__tarjetas .gl-rotulo { margin: 0 0 12px; }
.gl-viene { grid-auto-rows: minmax(250px, auto); }
.gl-viene__casa { min-height: 540px; }
.gl-viene__casa .gl-titulo-2 { margin-top: 2px; }
.gl-viene__chica { display: flex; flex-direction: column; justify-content: flex-end; }
.gl-viene__amenities { min-height: 340px; }
.gl-precios { align-items: center; }
.gl-precio { padding: clamp(26px, 3vw, 40px); }
.gl-precio .gl-acciones { align-items: center; gap: 12px 20px; }
.gl-preguntas-bloque { align-items: start; }
.gl-cierre { min-height: 86vh; min-height: 86svh; align-items: center; }
.gl-cierre .columna-candado { align-self: stretch; }
.gl-cierre__tarjeta { align-self: center; max-width: 640px; padding: clamp(28px, 3.4vw, 48px); }
.gl-cierre__tarjeta .gl-bajada { margin-top: 18px; }
@media (max-width: 859px) {
  html.gl-pulgar-arriba .gl-cabecera__cta { opacity: 0; visibility: hidden; }
  .gl-cabecera__cta { transition: opacity 300ms var(--gl-suave), visibility 300ms; }
  .gl-quien__admin { min-height: 580px; }
  .gl-viene__casa { min-height: 520px; }
  .gl-cierre { min-height: 0; }
  .gl-cierre__tarjeta { padding: 26px 20px 24px; }
  .gl-cierre .gl-acciones .gl-boton { flex: 1 1 100%; }
  .gl-momento + .gl-momento { margin-top: 44px; }
}

/* ── 25 · La cinta del registro: renglones que pasan solos (decorativa: lo mismo está dicho con texto en la página) ── */
.gl-cinta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 44px;
  padding: 0 6px 0 4px;
  border-radius: 999px;
  background: rgba(22, 19, 12, 0.55);
  box-shadow: inset 0 0 0 1px var(--gl-v-borde);
  overflow: hidden;
}
.gl-cinta .gl-rotulo { flex: none; position: relative; z-index: 1; background: rgba(22, 19, 12, 0.95); }
.gl-cinta__ventana { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gl-cinta__pista { display: flex; width: max-content; }
.gl-cinta__pista ul { display: flex; gap: 34px; margin: 0; padding: 0 34px 0 0; list-style: none; }
.gl-cinta__pista li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.02em; color: rgba(247, 242, 230, 0.8); white-space: nowrap; }
.gl-cinta__pista li b { font-weight: 500; color: var(--gl-marca-oro); }
.gl-cinta__pista li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gl-marca-oro); opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .gl-cinta__pista { animation: gl-cinta 46s linear infinite; }
  .gl-cinta:hover .gl-cinta__pista { animation-play-state: paused; }
}
@keyframes gl-cinta { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.gl-heroe__cinta { position: absolute; left: var(--gl-margen); right: var(--gl-margen); bottom: 22px; }
@media (max-width: 859px) {
  .gl-heroe__cinta { position: relative; left: auto; right: auto; bottom: auto; margin-top: 4px; }
  .gl-cinta .gl-rotulo { padding-inline: 8px; }
  /* las fotos con texto al costado: en el celular, la foto arriba y el texto abajo (sin texto encima de la luz) */
  .gl-foto-texto--costado { min-height: 0; justify-content: flex-start; }
  .gl-foto-texto--costado .gl-foto-texto__foto { position: relative; inset: auto; height: 220px; }
  .gl-foto-texto--costado::after { background: linear-gradient(180deg, rgba(11, 9, 6, 0) 0, rgba(11, 9, 6, 0) 140px, rgba(11, 9, 6, 0.94) 220px, rgba(11, 9, 6, 0.96) 100%); }
  .gl-foto-texto--costado .gl-foto-texto__texto { margin-top: -44px; }
  .gl-tranquilidad .gl-foto { aspect-ratio: 3 / 2; }
}

/* Con el menú abierto, un solo oro: el de la hoja (la cabecera esconde el suyo sin mover nada) */
html.gl-menu-abierto .gl-cabecera__cta { visibility: hidden; }

/* ── 26 · Lo común de las páginas de adentro (revisión del 10-nov) ──────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* La cabeza con el candado quieto al costado (cómo funciona, edificios y lo que viene; antes, repetido en dos hojas) */
.gl-cabeza-candado { align-items: center; }
.gl-candado-quieto { display: block; width: min(340px, 100%); height: auto; justify-self: center; opacity: 0.92; }
@media (max-width: 859px) {
  .gl-candado-quieto { width: 180px; justify-self: start; margin-top: 8px; }
}
.gl-tarjeta .gl-texto + .gl-texto { margin-top: 12px; }

/* El cierre de las páginas sin candado 3D: la tarjeta de lado a lado y el candado quieto (cerrado) a la derecha */
.gl-cierre__tarjeta--ancha { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 5vw, 80px); }
.gl-cierre__tarjeta--ancha .gl-bajada { max-width: 34em; }
.gl-cierre__candado { display: block; width: clamp(150px, 17vw, 230px); height: auto; opacity: 0.92; }
@media (max-width: 859px) {
  .gl-cierre__tarjeta--ancha { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 24px; }
  .gl-cierre__candado { display: none; }
  .gl-cierre__tarjeta--ancha .gl-acciones .gl-boton { flex: 1 1 100%; }
}

/* La página actual: en el menú del celular y en el pie, en oro; el botón de la cabecera en «Pedí tu propuesta», sin oro */
.gl-menu nav a[aria-current='page'] { color: var(--gl-marca-oro); }
.gl-pie li a[aria-current='page'] { color: var(--gl-marca-oro); }
.gl-cabecera__cta[aria-current='page'],
.gl-menu__abajo .gl-boton--oro[aria-current='page'] { background: var(--gl-v-lente); color: var(--gl-marca-crema); box-shadow: inset 0 0 0 1px var(--gl-v-lente-borde); }

/* La lista con tilde, con un párrafo y su rótulo adentro */
.gl-lista--checks p { margin-top: 0; }
.gl-lista--checks li > div > .gl-rotulo { margin-top: 10px; }

/* ── 27 · La burbuja: el dato que se lee de un vistazo (vuelta 2, 10-nov) ───────────────────────────────────────── */
/* Sale de los widgets de GringoPMS que le gustaron a Franco: una tarjeta casi negra y translúcida, de borde fino y cálido;
   un resplandor ámbar y dorado que nace de una esquina y se apaga hacia el negro; el número grande en crema y los rótulos
   chicos en mayúsculas espaciadas (alguno en ámbar). Se usa POCO, como acento: el precio (portada y Precios) y los
   widgets del celular (§27b). Afuera del celular lleva sólo hechos que ya están en la web ($ 2.500 por unidad, sin IVA,
   cada 3 meses por IPC, sin permanencia): ningún número inventado. Todo va en em: manda la letra de la burbuja (16 px en
   la página; adentro del celular, la del celular).
   <div class="gl-burbuja">                                    --der: el resplandor nace arriba a la derecha
     <p class="gl-burbuja__rotulo">Entradas <b>hoy</b></p>     el <b> va en ámbar
     <p class="gl-burbuja__numero">3</p>
     <p class="gl-burbuja__detalle">La última, 19:30</p>
     <span class="gl-burbuja__barra" style="--valor: 64%"></span>   a veces
   </div> */
.gl-burbuja {
  --esquina: 0% 0%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  padding: 1.15em 1.3em 1.25em;
  border-radius: 1.375em;
  color: var(--gl-marca-crema);
  background:
    radial-gradient(55% 70% at var(--esquina), rgba(255, 205, 96, 0.22), transparent 72%),
    radial-gradient(140% 130% at var(--esquina), rgba(255, 158, 26, 0.36), rgba(255, 128, 10, 0.14) 34%, rgba(255, 110, 0, 0.04) 58%, transparent 78%),
    linear-gradient(180deg, rgba(20, 16, 10, 0.8), rgba(8, 6, 4, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 212, 150, 0.13), inset 0 1px 0 rgba(255, 236, 200, 0.08), 0 1.1em 2.6em rgba(0, 0, 0, 0.42);
}
.gl-burbuja--der { --esquina: 100% 0%; }
.gl-burbuja--abajo { --esquina: 100% 100%; }
.gl-burbuja__rotulo { font-size: 0.75em; font-weight: 600; line-height: 1.35; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gl-texto-2); }
.gl-burbuja__rotulo b, .gl-burbuja__ambar { font-weight: 600; color: var(--gl-ambar); }
.gl-burbuja__numero { font-family: var(--gl-letra-marca); font-weight: 800; font-size: 3em; line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gl-marca-crema); }
.gl-burbuja__numero small { margin-left: 0.14em; font-size: 0.4em; letter-spacing: -0.01em; color: var(--gl-texto-cuerpo); }
.gl-burbuja__detalle { font-size: 0.875em; line-height: 1.4; color: var(--gl-texto-cuerpo); }
.gl-burbuja__barra { position: relative; align-self: stretch; height: 0.25em; margin-top: 0.3em; border-radius: 99px; overflow: hidden; background: rgba(255, 248, 230, 0.1); }
.gl-burbuja__barra::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--valor, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--gl-ambar-hondo), var(--gl-marca-oro)); box-shadow: 0 0 0.5em rgba(255, 170, 40, 0.55); }
/* El precio (portada y Precios): la tarjeta entera es la burbuja, con la calculadora y los botones adentro */
.gl-burbuja--precio { gap: 0; padding: clamp(26px, 3vw, 40px); border-radius: var(--gl-v-radio); font-size: 16px; }
.gl-burbuja--precio .gl-burbuja__rotulo { font-size: 12.5px; }
.gl-burbuja--precio .gl-burbuja__numero { margin: 14px 0 8px; font-size: clamp(60px, 6.4vw, 92px); }
.gl-burbuja--precio .gl-burbuja__detalle { font-size: 17px; }
.gl-burbuja--precio .gl-calculadora, .gl-burbuja--precio .gl-acciones { align-self: stretch; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .gl-burbuja { background: radial-gradient(140% 130% at var(--esquina), rgba(255, 158, 26, 0.3), transparent 70%), #110d08; }
}

/* ── 27b · El celular de la app: una maqueta con pantallas que se recorren (vuelta 2, 10-nov) ─────────────────────── */
/* Una sola pieza: gl.js (§9) arma el HTML adentro de <div class="gl-celular gl-aparece" data-celular></div> (sin nada
   adentro: así se reserva el lugar), en la portada y en Vecinos. Cinco pantallas (Inicio, Cámara, Amenities, Entradas,
   Visitas), cada una con su rótulo a la vista en la leyenda. La tira de botones es un tablist; la leyenda, su tabpanel; el
   teléfono es decorativo. Angosto (menos de 560 px de ancho): el teléfono, la tira abajo y la leyenda. Ancho: el teléfono
   a la izquierda y, a la derecha, la tira en columna y la leyenda. */
.gl-celular { container: celular / inline-size; }
.gl-celular:empty { min-height: 600px; }
html:not(.gl-js) .gl-celular { display: none; }
.gl-celular__marco { --celular-w: min(78cqw, 290px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
.gl-celular__telefono { position: relative; z-index: 0; }
.gl-celular__telefono::before { content: ''; position: absolute; inset: 14% -16% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 166, 30, 0.2), transparent); filter: blur(18px); pointer-events: none; }
.gl-celular .gl-telefono { --w: var(--celular-w); }
.gl-celular__pantallas { position: relative; z-index: 1; height: 100%; }
.gl-celular__pantalla { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(1.5%) scale(0.985); transition: opacity 340ms var(--gl-suave), transform 520ms var(--gl-suave), visibility 0s linear 520ms; }
.gl-celular__pantalla.es-activa { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--gl-suave) 80ms, transform 560ms var(--gl-suave) 80ms, visibility 0s; }
.gl-celular__lado { width: 100%; max-width: 440px; }
.gl-celular__pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--gl-v-barra-fondo); box-shadow: var(--gl-v-barra-sombra); }
.gl-celular__pestana {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gl-texto-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 250ms var(--gl-suave);
}
.gl-celular__pestana:hover { color: var(--gl-marca-crema); }
.gl-celular__pestana:focus-visible { outline-offset: 1px; border-radius: 18px; }
.gl-celular__pestana[aria-selected='true'] {
  color: var(--gl-marca-crema);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 158, 26, 0.3), rgba(255, 128, 10, 0.08) 55%, transparent 80%), rgba(10, 8, 5, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 212, 150, 0.18);
}
.gl-celular__lente { display: grid; place-items: center; flex: none; }
.gl-celular__lente svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gl-celular__pestana[aria-selected='true'] .gl-celular__lente { color: var(--gl-marca-oro); }
.gl-celular__avance { position: absolute; left: 24%; right: 24%; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 248, 230, 0.14); opacity: 0; }
.gl-celular--avanza [aria-selected='true'] .gl-celular__avance { opacity: 1; }
.gl-celular--avanza [aria-selected='true'] .gl-celular__avance::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gl-ambar-hondo), var(--gl-marca-oro)); transform-origin: 0 50%; animation: gl-celular-avance 5s linear both; }
.gl-celular--pausa .gl-celular__avance::before { animation-play-state: paused !important; }
@keyframes gl-celular-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gl-celular__leyendas { display: grid; margin-top: 20px; }
.gl-celular__leyenda { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 240ms var(--gl-suave), visibility 0s linear 240ms; }
.gl-celular__leyenda.es-activa { visibility: visible; opacity: 1; transition: opacity 420ms var(--gl-suave) 60ms, visibility 0s; }
.gl-celular__leyenda .gl-rotulo { margin-bottom: 12px; }
.gl-celular__leyenda .gl-titulo-3 { margin-bottom: 8px; }
.gl-celular__leyenda .gl-texto { max-width: 30em; }
.gl-celular__leyenda:focus-visible { outline-offset: 6px; }
.gl-app-seccion .gl-celular { margin: 8px 0 clamp(40px, 5vw, 64px); }
@container celular (min-width: 560px) {
  .gl-celular--grande .gl-celular__marco { --celular-w: clamp(260px, 40cqw, 330px); grid-template-columns: auto minmax(0, 400px); justify-content: center; }
}
@container celular (min-width: 560px) {
  .gl-celular__marco { --celular-w: clamp(240px, 48cqw, 310px); grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: center; column-gap: clamp(28px, 5cqw, 56px); }
  .gl-celular__lado { max-width: 400px; }
  .gl-celular__pestanas { flex-direction: column; padding: 6px; border-radius: 24px; }
  .gl-celular__pestana { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 7px 16px 7px 8px; font-size: 15px; }
  .gl-celular__lente { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 248, 230, 0.06); }
  .gl-celular__pestana[aria-selected='true'] .gl-celular__lente { background: var(--gl-v-lente); box-shadow: inset 0 0 0 1px var(--gl-v-lente-borde); }
  .gl-celular__avance { left: 58px; right: 18px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-celular__pantalla, .gl-celular__pantalla.es-activa, .gl-celular__leyenda, .gl-celular__leyenda.es-activa { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .gl-celular__pestanas { background: var(--gl-v-tarjeta-solida); }
}

/* Las piezas nuevas de la app (en em, como el resto de .gl-app en §13) */
.gl-app__senal { display: inline-flex; align-items: center; gap: 0.3em; }
.gl-app__senal svg { width: 1.15em; height: 1.15em; }
.gl-app__hola { font-family: var(--gl-letra-marca); font-weight: 800; font-size: 1.75em; line-height: 1.05; letter-spacing: var(--gl-apretada); color: var(--gl-marca-crema); }
.gl-app__lugar { display: flex; align-items: center; gap: 0.45em; margin: 0.3em 0 0.85em; font-size: 0.9em; color: var(--gl-texto-2); }
.gl-app__lugar svg { width: 1.15em; height: 1.15em; color: var(--gl-marca-oro); }
.gl-app__lugar b { font-weight: 600; color: var(--gl-marca-crema); }
.gl-app__abrir-panel { display: flex; flex-direction: column; align-items: center; gap: 0.8em; margin-bottom: 0.7em; padding: 1.3em 1em 1em; border-radius: 1.4em; background: var(--gl-v-tarjeta); border: 1px solid var(--gl-v-tarjeta-borde); box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo); }
.gl-app__boton-abrir {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  width: 6.4em;
  height: 6.4em;
  border-radius: 50%;
  background: var(--gl-v-oro);
  color: var(--gl-marca-tinta);
  box-shadow: var(--gl-v-oro-sombra), 0 0 0 0.5em rgba(255, 191, 0, 0.12), 0 0 0 1em rgba(255, 191, 0, 0.05), 0 0 2.4em rgba(255, 191, 0, 0.3);
}
.gl-app__boton-abrir svg { width: 2em; height: 2em; stroke-width: 2.1; }
.gl-app__boton-abrir b { font-size: 0.8em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gl-app__boton-abrir::after { content: ''; position: absolute; inset: -0.5em; border-radius: 50%; border: 1px solid rgba(255, 214, 107, 0.55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .es-activa .gl-app__boton-abrir::after { animation: gl-onda 2.4s var(--gl-suave) 600ms infinite; }
}
@keyframes gl-onda { 0% { transform: scale(0.92); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
.gl-app__abrir-que { display: flex; align-items: center; gap: 0.6em; font-size: 0.86em; }
.gl-app__abrir-que b { font-weight: 600; }
.gl-app__depto { margin-bottom: 0.6em; padding: 0.7em 0.75em 0.7em 0.7em; }
.gl-app__depto .gl-app__abrir { font-size: 0.86em; padding: 0.6em 0.9em; }
.gl-app__depto small .gl-app__estado-ok { font-size: 1em; }
/* Amenities y Visitas: el botón de oro abajo de todo, como en la app */
.gl-app__cuerpo--columna { display: flex; flex-direction: column; }
.gl-app__cuerpo--columna > .gl-app__accion { margin-top: auto; margin-bottom: 1.1em; }
.gl-app__widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55em; margin-bottom: 0.7em; }
.gl-app .gl-burbuja { font-size: 0.84em; gap: 0.3em; padding: 0.85em 0.95em 0.95em; border-radius: 1.3em; box-shadow: inset 0 0 0 1px rgba(255, 212, 150, 0.14), inset 0 1px 0 rgba(255, 236, 200, 0.08); }
.gl-app .gl-burbuja__rotulo { font-size: 0.7em; letter-spacing: 0.12em; }
.gl-app .gl-burbuja__numero { font-size: 2.4em; }
.gl-app .gl-burbuja__detalle { font-size: 0.86em; }
.gl-app__mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.gl-app__tesela { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; min-height: 4.8em; padding: 0.7em 0.55em 0.6em 0.7em; border-radius: 1.1em; background: var(--gl-v-tarjeta); border: 1px solid var(--gl-v-tarjeta-borde); box-shadow: inset 0 1px 0 var(--gl-v-tarjeta-brillo); }
.gl-app__tesela[data-ir] { cursor: pointer; }
.gl-app__tesela svg { width: 1.45em; height: 1.45em; color: var(--gl-marca-oro); }
.gl-app__tesela--pronto svg { color: var(--gl-texto-2); }
.gl-app__tesela b { font-size: 0.84em; font-weight: 600; line-height: 1.15; }
.gl-app__pronto { display: inline-block; width: max-content; padding: 0.22em 0.5em; border-radius: 99px; border: 1px dashed rgba(255, 191, 0, 0.55); font-size: 0.64em; font-weight: 600; line-height: 1.15; color: var(--gl-v-lente-texto); white-space: nowrap; }
.gl-app__globo { position: absolute; top: 0.6em; right: 0.6em; display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.4em; border-radius: 99px; background: var(--gl-ambar); color: var(--gl-marca-tinta); font-size: 0.7em; font-weight: 700; font-style: normal; }
.gl-app__volver { display: flex; align-items: center; gap: 0.35em; padding: 0.4em 1.1em 0.7em 0.7em; }
.gl-app__volver > svg { width: 1.45em; height: 1.45em; color: var(--gl-marca-oro); }
.gl-app__volver b { flex: 1; min-width: 0; font-family: var(--gl-letra-marca); font-weight: 800; font-size: 1.35em; letter-spacing: -0.02em; }
.gl-app__volver .gl-app__pronto { font-size: 0.7em; }
/* La cámara: pantalla completa, como una llamada (sin la barra de abajo) */
.gl-app__cuerpo--camara { display: flex; flex-direction: column; padding: 0 0.75em 1.5em; }
.gl-app__cuerpo--camara .gl-camara { flex: none; aspect-ratio: 4 / 5.1; border-radius: 1.2em; }
.gl-app__timbre { display: flex; align-items: center; gap: 0.7em; margin-top: 0.8em; padding: 0.7em 0.85em; border-radius: 1.1em; background: rgba(255, 191, 0, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.3); }
.gl-app__timbre > svg { width: 1.5em; height: 1.5em; color: var(--gl-marca-oro); }
@media (prefers-reduced-motion: no-preference) {
  .es-activa .gl-app__timbre > svg { animation: gl-suena 2.6s var(--gl-suave) 500ms infinite; transform-origin: 50% 10%; }
}
.gl-app__timbre b { display: block; font-weight: 600; }
.gl-app__timbre small { display: block; font-size: 0.8em; color: var(--gl-texto-2); }
.gl-app__llamada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-top: auto; padding-top: 0.9em; }
.gl-app__llamar { display: flex; flex-direction: column; align-items: center; gap: 0.45em; font-size: 0.8em; font-weight: 600; color: var(--gl-texto-2); }
.gl-app__llamar i { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: var(--gl-v-boton-vidrio); box-shadow: var(--gl-v-boton-vidrio-sombra); color: var(--gl-marca-crema); font-style: normal; }
.gl-app__llamar i svg { width: 1.75em; height: 1.75em; }
.gl-app__llamar--abrir { color: var(--gl-marca-crema); }
.gl-app__llamar--abrir i { width: 5.6em; height: 5.6em; background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra), 0 0 1.8em rgba(255, 191, 0, 0.35); }
.gl-app__llamar--abrir i svg { stroke-width: 2.1; }
.gl-app__llamar--ignorar i { color: var(--gl-error); }
/* Amenities */
.gl-app__dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35em; margin-bottom: 0.75em; }
.gl-app__dias span { display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.5em 0 0.55em; border-radius: 0.9em; background: rgba(255, 248, 230, 0.05); font-size: 0.72em; font-weight: 600; color: var(--gl-texto-2); }
.gl-app__dias b { font-family: var(--gl-letra-marca); font-size: 1.55em; font-weight: 800; letter-spacing: -0.02em; color: var(--gl-marca-crema); }
.gl-app__dias .activo { background: var(--gl-v-oro); color: var(--gl-marca-tinta); box-shadow: var(--gl-v-oro-sombra); }
.gl-app__dias .activo b { color: var(--gl-marca-tinta); }
.gl-app__libre { font-size: 0.78em; font-weight: 600; color: var(--gl-ok); }
.gl-app__tuyo { padding: 0.25em 0.6em; border-radius: 99px; background: rgba(255, 165, 58, 0.16); font-size: 0.74em; font-weight: 700; color: var(--gl-ambar); white-space: nowrap; }
.gl-app .gl-burbuja + .gl-app__accion { margin-top: 0.7em; }
.gl-app__panel + .gl-burbuja { margin-bottom: 0; }
/* Entradas: los filtros */
.gl-app__filtros { display: flex; flex-wrap: wrap; gap: 0.35em; margin: -0.2em 0 0.4em; padding: 0; list-style: none; }
.gl-app__filtros li { padding: 0.35em 0.75em; border-radius: 99px; border: 1px solid var(--gl-filo); font-size: 0.74em; font-weight: 600; color: var(--gl-texto-2); }
.gl-app__filtros .activo { border-color: transparent; background: var(--gl-v-boton-vidrio); box-shadow: var(--gl-v-boton-vidrio-sombra); color: var(--gl-marca-crema); }
/* Visitas: el pase con su QR */
.gl-app__pase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.8em; }
.gl-app__pase > div { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.gl-app__pase .gl-burbuja__numero { font-size: 2em; }
.gl-app__pase .gl-burbuja__barra { grid-column: 1 / -1; margin-top: 0.7em; }
.gl-app__qr { display: block; width: 5.6em; height: 5.6em; padding: 0.4em; border-radius: 0.8em; background: var(--gl-marca-crema); color: var(--gl-marca-tinta); }
.gl-app__qr svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.gl-app__compartir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; margin: 0.7em 0 1em; }
.gl-app__compartir > span { justify-content: center; font-size: 0.86em; }

/* ── 27c · La imagen de cámara: una foto tratada como lo que ve una cámara (viñeta, líneas, grano, hora, «En vivo») ── */
/* <div class="gl-camara"><img …><span class="gl-camara__mira"></span><span class="gl-camara__vivo">En vivo</span>
   <span class="gl-camara__hora">19:32:08</span><span class="gl-camara__nombre">Puerta de calle</span></div>
   En em: se agranda con la letra del lugar. Decorativa (aria-hidden en el que la contiene). La foto es edificios-1. */
.gl-camara { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 1em; background: #050403; color: #fff; }
.gl-camara > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 46% 64%); filter: saturate(0.5) contrast(1.2) brightness(0.92); transform: scale(1.06); }
.gl-camara::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 100% at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.74) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px);
}
.gl-camara::after {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.24;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.gl-camara__mira {
  --mira-l: 1.1em;
  --mira-g: 1.5px;
  --mira-c: rgba(255, 255, 255, 0.62);
  position: absolute;
  inset: 0.6em;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--mira-c), var(--mira-c)) 0 0 / var(--mira-l) var(--mira-g) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 0 0 / var(--mira-g) var(--mira-l) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 100% 0 / var(--mira-l) var(--mira-g) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 100% 0 / var(--mira-g) var(--mira-l) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 0 100% / var(--mira-l) var(--mira-g) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 0 100% / var(--mira-g) var(--mira-l) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 100% 100% / var(--mira-l) var(--mira-g) no-repeat,
    linear-gradient(var(--mira-c), var(--mira-c)) 100% 100% / var(--mira-g) var(--mira-l) no-repeat;
}
.gl-camara__vivo, .gl-camara__hora, .gl-camara__nombre { position: absolute; z-index: 3; font-size: 0.72em; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.gl-camara__vivo { top: 1.4em; left: 1.4em; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4em 0.65em 0.4em 0.55em; border-radius: 99px; background: rgba(0, 0, 0, 0.55); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gl-camara__vivo::before { content: ''; width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--gl-vivo); box-shadow: 0 0 0.6em var(--gl-vivo); }
.gl-camara__hora { top: 1.95em; right: 1.5em; font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.gl-camara__nombre { left: 1.5em; bottom: 1.6em; font-size: 0.78em; font-weight: 600; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: no-preference) {
  /* se mueve sólo la que se ve: la pantalla activa del celular, o la suelta (--viva) cuando ya apareció */
  .gl-celular__pantalla.es-activa .gl-camara::after, .es-visible .gl-camara--viva::after { animation: gl-grano 1s steps(5) infinite; }
  .gl-celular__pantalla.es-activa .gl-camara__vivo::before, .es-visible .gl-camara--viva .gl-camara__vivo::before { animation: gl-latido 1.4s ease-in-out infinite; }
}
@keyframes gl-grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(4%, 4%); } 100% { transform: translate(0, 0); } }
@keyframes gl-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── 27d · Las cámaras de seguridad en «Lo que viene» (página y adelanto de la portada) ─────────────────────────── */
.gl-camaras { align-items: center; }
.gl-camaras__texto .gl-bajada { margin-top: 18px; }
.gl-camaras__texto .gl-rotulo { margin-top: 22px; }
.gl-camaras__monitor { display: grid; gap: 10px; padding: 12px; }
.gl-camaras__monitor .gl-camara { font-size: clamp(14px, 1.25vw, 17px); border-radius: 14px; }
.gl-camaras__eventos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gl-camaras__eventos li { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 14px; background: rgba(255, 248, 230, 0.05); box-shadow: inset 0 0 0 1px var(--gl-filo); }
.gl-camaras__eventos li > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
.gl-camaras__eventos b { display: block; font-size: 14px; font-weight: 600; color: var(--gl-marca-crema); }
.gl-camaras__eventos small { font-size: 12.5px; color: var(--gl-texto-2); }
.gl-camaras__icono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--gl-v-lente); color: var(--gl-marca-oro); }
.gl-camaras__icono .gl-icono { width: 18px; height: 18px; }
.gl-camaras__icono--alerta { background: rgba(255, 77, 61, 0.14); color: #ff9a90; }
.gl-camaras__hora { font-family: var(--gl-letra-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gl-texto-2); }
.gl-viene__camaras .gl-camara { margin-bottom: 22px; font-size: 14px; border-radius: 14px; }
@media (max-width: 859px) {
  .gl-camaras__texto { order: -1; }   /* en el celular, primero el título y después la imagen */
}

/* ── 28 · El candado sin WebGL: se mece en una tira de fotos del motor (la pone candado-arranque.js) ────────────── */
/* 13 cuadros de -25° a +25° uno al lado del otro (assets/candado-3d-tira.webp, la imagen la pone el JS). De ida y vuelta
   con steps() son 24 pasos por vaivén. Arranca en el cuadro del medio (el 6, la misma foto que .quieto): el retraso
   negativo es 6/13 de la ida. Sin animación queda en ese cuadro. */
.gl-tira {
  position: absolute;
  inset: 0;
  background-position: 50% 0;
  background-size: 1300% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: gl-tira 2.6s steps(13, jump-none) -1.2s infinite alternate;
}
.puesto.con-tira > .quieto { opacity: 0; transition: none; }
@keyframes gl-tira { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .gl-tira { animation: none; } }
/* En la compu el 3D de la portada queda a media altura del hero, que tiene 24 px arriba y 40 abajo: la imagen baja
   esos 8 px para que el paso de la imagen al 3D no salte (medido de 1024×768 a 1920×1080; en el celular da 0). */
@media (min-width: 860px) { .gl-heroe .puesto { top: 8px; } }