/* ============================================================================
   Pantallas de marca (DOCS/06 §4.8): ingreso, MFA, recuperación, invitación,
   registro, acceso concedido, salida y errores. Cielo CSS según la franja de
   Bogotá + escena Three.js transparente encima (DOCS/11 §4.1, §4.4). Estilo
   Vidrio: titular a la izquierda y tarjeta de vidrio a la derecha. La tarjeta
   NUNCA se mueve: solo anima la escena.
   ============================================================================ */

.pantalla-marca{min-height:100vh;min-height:100dvh;background:var(--cielo-4,var(--ui-bg));color:var(--ui-text);display:flex;flex-direction:column}

/* --- Cielo ------------------------------------------------------------------ */
.cielo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 30% 78%,var(--cielo-brillo),transparent 62%),
    radial-gradient(80% 50% at 82% 8%,var(--cielo-brillo-2),transparent 70%),
    linear-gradient(180deg,var(--cielo-1) 0%,var(--cielo-2) 38%,var(--cielo-3) 68%,var(--cielo-4) 100%)}
.cielo--noche .cielo::after,.cielo--amanecer .cielo::after,.cielo--atardecer .cielo::after{content:"";position:absolute;inset:0 0 40% 0;
  background:
    radial-gradient(60% 40% at 18% 12%,var(--cielo-brillo),transparent 70%),
    radial-gradient(50% 36% at 64% 4%,var(--cielo-brillo-2),transparent 70%)}
[data-theme-ui="light"] .cielo::after{display:none}

/* --- Cabecera: marca y reloj de Bogotá -------------------------------------------- */
.marca-cabecera{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1280px,100%);margin:0 auto;padding:20px 40px 0}
.marca-cabecera .marca__isotipo{width:48px;height:48px}
.marca-cabecera .marca__logotipo{height:21px}
.marca-cabecera .marca__sub{font-size:8.5px}
.marca-cabecera a:hover{color:inherit}
.marca-reloj{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;border-radius:var(--r-pill);background:var(--ui-vidrio);border:1px solid var(--ui-vidrio-borde);font-size:13px;font-weight:600;box-shadow:var(--ui-shadow);white-space:nowrap}
.marca-reloj>.ico{color:var(--sol)}
[data-theme-ui="dark"] .marca-reloj>.ico{color:var(--ui-accent)}
.marca-reloj time{font-variant-numeric:tabular-nums}
.marca-reloj__lugar{padding-left:10px;border-left:1px solid var(--ui-border);color:var(--ui-accent);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* --- Pantallas con formulario: titular a la izquierda, tarjeta de vidrio a la derecha ---- */
.marca-layout{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:48px;width:min(1280px,100%);margin:0 auto;padding:16px 40px 12px}
.marca-mensaje{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:600px;padding-top:4vh}
.marca-mensaje h2{font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.marca-mensaje h2 span{color:var(--ui-accent)}
.marca-mensaje__texto{max-width:500px;color:var(--ui-text);opacity:.86;font-size:16px}
.tarjeta-marca{position:relative;align-self:center;min-width:0;background:var(--ui-vidrio);border:1px solid var(--ui-vidrio-borde);border-radius:var(--r-xl);padding:30px 30px 22px;box-shadow:var(--ui-shadow)}
/* El desenfoque solo con GPU confirmada (frontend/motor/calidad.js · confirmarVidrio) */
[data-vidrio] .tarjeta-marca{-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
.tarjeta-marca::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--marca-verde),var(--marca-verde-logo) 55%,var(--marca-azul-progreso))}
.tarjeta-marca h1{font-size:30px;margin-bottom:4px}
.tarjeta-marca__sub{color:var(--ui-muted);font-size:14px;margin-bottom:20px}
.tarjeta-marca__saludo{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 9px;margin-bottom:12px;border-radius:var(--r-pill);background:var(--ui-accent-glow);font-size:12.5px;font-weight:700;color:var(--ui-text)}
.tarjeta-marca__saludo .ico{width:16px;height:16px;color:var(--sol)}
[data-theme-ui="dark"] .tarjeta-marca__saludo .ico{color:var(--ui-accent)}
.tarjeta-marca__fila{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-2px 0 18px;font-size:13.5px}
.tarjeta-marca__pie{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--ui-muted);text-align:center}
.tarjeta-marca__pie .ico{color:var(--ui-accent)}
.tarjeta-marca .mensaje{margin-bottom:14px}
.tarjeta-marca .boton--bloque+.boton--bloque{margin-top:10px}

/* --- Acceso concedido / salida / errores: tarjeta de vidrio bajo la escena ------------- */
.marca-transicion{position:relative;z-index:1;flex:1;display:grid;place-items:end center;padding:0 16px 8vh;text-align:center}
.marca-transicion>div{width:100%;max-width:540px;padding:22px 28px 24px;border-radius:var(--r-xl);background:var(--ui-vidrio);border:1px solid var(--ui-vidrio-borde);box-shadow:var(--ui-shadow)}
[data-vidrio] .marca-transicion>div{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.marca-transicion h1{font-size:clamp(26px,3.6vw,38px);margin-top:8px;text-wrap:balance}
.marca-transicion p{color:var(--ui-muted);margin:8px 0 16px}
.marca-transicion .eyebrow{justify-content:center;color:var(--ui-accent)}
.marca-transicion__acciones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

.marca-pie{position:relative;z-index:1;text-align:center;text-wrap:balance;font-size:12px;font-weight:600;color:var(--ui-text);opacity:.75;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
.marca-pie span{color:var(--ui-accent);margin:0 2px}

/* Sin escena (movimiento reducido, sin WebGL) el isotipo ocupa el sitio de la torre: los mismos
   centros que fija `redimensionar` en frontend/motor/escenas/archivo.js */
.escena--fondo[data-escena="archivo"]>.escena__respaldo{inset:auto;left:30%;top:65.5%;margin:0;width:min(30vh,240px);transform:translate(-50%,-50%)}
.escena--fondo[data-escena-modo="exito"]>.escena__respaldo,.escena--fondo[data-escena-modo="salida"]>.escena__respaldo{left:50%;top:33%}

/* --- Responsive --------------------------------------------------------------------- */
@media (max-width:1100px) and (min-width:901px){
  .marca-layout{grid-template-columns:minmax(0,1fr) 380px;gap:28px;padding:16px 28px 12px}
  .marca-cabecera{padding:18px 28px 0}
}
/* ≤ 900 px: la escena arriba (sin titular) y la tarjeta debajo */
@media (max-width:900px){
  .marca-cabecera{padding:14px 16px 0}
  .marca-cabecera .marca__sub,.marca-reloj__fecha{display:none}
  .marca-reloj{padding:6px 12px 6px 10px;box-shadow:none}
  .marca-reloj__lugar{padding-left:0;border-left:0}
  .marca-layout{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center;padding:34vh 16px 8px;align-content:start}
  .marca-mensaje{display:none}
  .tarjeta-marca{width:100%;max-width:520px;padding:24px 20px 18px;border-radius:var(--r-lg)}
  .tarjeta-marca::before{left:20px;right:20px}
  .tarjeta-marca h1{font-size:26px}
  .marca-transicion{padding-bottom:5vh}
  .marca-transicion>div{padding:18px 18px 20px;border-radius:var(--r-lg)}
  .escena--fondo[data-escena="archivo"]>.escena__respaldo{left:50%;top:19%;width:min(22vh,170px)}
  .escena--fondo[data-escena-modo="exito"]>.escena__respaldo,.escena--fondo[data-escena-modo="salida"]>.escena__respaldo{top:27%}
}
@media (max-width:420px){
  .marca-reloj__lugar{display:none}
  .marca-cabecera .marca__logotipo{height:15px}
  .marca-cabecera .marca__isotipo{width:32px;height:32px}
  .marca-layout{padding:31vh 12px 6px}
  .tarjeta-marca{padding:22px 16px 16px}
  .tarjeta-marca h1{font-size:23px}
  .tarjeta-marca__fila{flex-direction:column;align-items:flex-start;gap:8px}
}