/* EL VESTÍBULO: la cara pública de la portada, la que se ve sin haber entrado.

   Está aparte de `portada.css` porque es la otra pantalla. Ahí vive lo que
   comparten las dos —la densidad, los botones, la cabecera, el pie y los
   emergentes—; aquí, solo lo que existe antes de entrar: el logotipo grande, la
   palabra de la marca, el lema y la tarjeta de acceso. Al entrar, todo esto
   desaparece de la página y no vuelve.

   Es también la única parte del producto que no se parece al panel, y es a
   propósito: aquí se presenta algo, no se administra nada. Lo que sí comparte
   es la barra de arriba, la caja y los botones, que es lo que hace que la
   puerta y la casa se reconozcan.

   Se carga después de `portada.css`, así que puede afinar lo de allí. */

/* ──────────────────────────────────────────────────────────── vestíbulo ───
   La cara pública. Es lo único de esta página que no se parece al panel, y es a
   propósito: aquí se presenta un producto, no se administra. Lo que sí comparte
   es todo lo demás — la barra de arriba, el ancho, la caja, los botones. */

/* El armazón reserva la primera columna de 1024 px en adelante para el menú.
   El vestíbulo no tiene menú, así que su único hijo caería en 240 px. Es la
   única regla del armazón que esta página redefine, y se redefine desde fuera
   en lugar de copiarse: el archivo del paquete sigue siendo el del paquete. */
@media (min-width: 1024px) {
  .vestibulo.armazon-disposicion { grid-template-columns: minmax(0, 1fr); }
}

/* Centrado vertical cuando sobra sitio y NUNCA cuando falta. Un `margin: auto`
   solo se come el espacio libre POSITIVO, así que en un móvil donde el
   contenido es más alto que la pantalla se resuelve en cero y no recorta la
   parte de arriba — que es lo que pasa con `align-content: center`. */
.vestibulo { margin-block: auto; }

/* Halos suaves en los dos colores de marca, solo aquí. El área privada lleva el
   fondo plano del panel: dos habitaciones de la misma casa, una con ventana. */
.vestibulo::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(38% 44% at 12% 18%, color-mix(in srgb, var(--skj-mal) 20%, transparent), transparent 70%),
    radial-gradient(42% 48% at 88% 82%, color-mix(in srgb, var(--skj-marca) 24%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: .5;
}

/* Más estrecho que los 1280 px del área privada, y a propósito. Ahí el ancho lo
   manda el panel —las dos pantallas tienen que cuadrar en el salto—; aquí no
   hay nada al otro lado que cuadrar, y una presentación de dos piezas estirada
   a 1280 px deja un vacío en medio que no se lee como aire, sino como que falta
   algo. */
.vestibulo__rejilla {
  display: grid;
  gap: 20px;
  align-items: center;
  max-width: 68rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .vestibulo__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: 32px; }
}

.vestibulo__cara { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.vestibulo__marca { width: 44px; height: 44px; }

/* CUÁL DE LOS DOS LOGOTIPOS SE VE.
   ─────────────────────────────────────────────────────────────────────────
   Aquí había un `<picture>` con `media="(prefers-color-scheme: dark)"`, y eso
   pregunta por el SISTEMA — no por el tema elegido. Desde que hay conmutador
   son dos cosas distintas: quien forzara el oscuro en una máquina en claro se
   encontraba el logotipo de tinta oscura sobre el fondo oscuro, o sea invisible.

   Con dos `<img>` y estos selectores, la pregunta pasa a ser la misma que
   responde todo lo demás de la página, y el caso «sistema» sigue funcionando
   sin JavaScript. Se usan las versiones de 256 px y no las de 512: se pintan a
   44 px, así que 256 cubre hasta una pantalla de 5×, y las dos juntas pesan
   menos que la de 512 que había sola. */
.vestibulo__marca--oscuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root[data-tema='sistema']:not([data-theme]) .vestibulo__marca--claro { display: none; }
  :root[data-tema='sistema']:not([data-theme]) .vestibulo__marca--oscuro { display: block; }
}

:root[data-theme='dark'] .vestibulo__marca--claro { display: none; }
:root[data-theme='dark'] .vestibulo__marca--oscuro { display: block; }

/* De 4,6 rem a 3,2 rem como techo. La palabra sigue siendo lo más grande de la
   pantalla, pero deja de ser lo único: a 64 px empujaba el resto fuera del
   primer vistazo, que es justo lo contrario de lo que hace un titular. */
.palabra {
  margin: 0;
  /* `fit-content` y no el ancho del bloque: con `background-clip: text` el
     degradado se reparte por la CAJA, no por las letras. Siendo un `<h1>` la
     caja medía toda la columna —unos 500 px para tres letras de 70—, así que
     las tres caían dentro del primer 14 % del degradado y la marca salía roja
     entera: el azul del producto, que es el del final, no llegaba a aparecer
     nunca. La portada quedaba con un color dominante distinto al del panel por
     un detalle de maquetación. */
  width: fit-content;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .12em;
  text-indent: .12em;
  background: linear-gradient(102deg, var(--skj-mal) 4%, var(--skj-tinta) 48%, var(--skj-marca) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.trazo { width: 64px; height: 2px; border-radius: 999px; background: var(--skj-acento); }

.lema {
  margin: 0;
  max-width: 30rem;
  font-family: var(--skj-fuente-titulo);
  font-size: 1.15rem;
  line-height: 1.45;
  text-wrap: balance;
}

.capacidades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.capacidad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--skj-borde);
  border-radius: var(--skj-radio-pieza);
  background: var(--skj-panel);
  font-size: 12px;
  color: var(--skj-tenue);
}
.capacidad::before { content: ""; width: 6px; height: 6px; border-radius: 999px; flex: none; }
.capacidad:nth-child(1)::before { background: var(--skj-mal); }
.capacidad:nth-child(2)::before { background: var(--skj-marca); }
.capacidad:nth-child(3)::before { background: var(--skj-acento); }

/* El cuerpo de la caja de acceso. La caja en sí es `armazon-caja`.
   `.entrada` y `.acciones` NO están aquí aunque se usen dentro: las comparte el
   diálogo de borrado, que vive en la otra pantalla. */
.acceso__cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.paso { display: flex; flex-direction: column; gap: 12px; }

.zona-boton { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; justify-content: center; }

/* El botón de Google vive en un iframe de fondo BLANCO. Al pedirle forma de
   píldora, Google redondea el botón pero no el iframe, y en modo oscuro asoman
   cuatro esquinas blancas. Recortando el contenedor desaparecen. `line-height:
   0` quita además la franja que el iframe deja debajo por alinearse como
   texto. */
#boton-google {
  /* ANCHO DEFINIDO, y no es cosmético: Google mide este contenedor para decidir
     cómo de ancho se dibuja. Dentro de un flex centrado el contenedor vale lo
     que ocupe su contenido —y su contenido es el botón que aún no existe—, así
     que la medida sale de cero y Google se dibuja en su forma mínima: el
     círculo con la «G» y sin una palabra. El botón aparece, o sea que no hay
     error en ningún sitio; simplemente deja de decir para qué sirve.
     `max-width` es para los 320 px, donde 260 no caben. */
  width: 260px;
  max-width: 100%;
  border-radius: var(--skj-radio-pieza);
  overflow: hidden;
  line-height: 0;
  /* Por si el iframe tarda en pintar: mientras, se ve el color de la caja y no
     un rectángulo claro. */
  background: var(--skj-panel);
}
#boton-google iframe { color-scheme: light; }