/* ═══════════════════════════════════════════════════════════════════════════
   Portada — pantalla de elección. Cabe entera en 360×640 sin scroll.
   ═══════════════════════════════════════════════════════════════════════════
   Logo, nombre y DOS botones. Nada más: ni secciones, ni "sobre nosotros", ni
   hero de relleno. El comensal acaba de escanear el QR con el plato en la mesa
   y solo quiere una de dos cosas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ SIN `overflow: hidden`. `.portada` ES el <body>, y con <html> en `visible`
   ese recorte se propaga al viewport: en un teléfono de 640 px el contenido
   sobrante quedaba AMPUTADO —ni con el dedo ni con la rueda se llegaba—, y lo
   que se perdía era el pie que declara el local como ficticio y la firma de
   Aurai SpA. La foto de fondo no lo necesita: es un `background` con `cover`,
   que no desborda. */
.portada {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Foto de la boca del horno, a sangre, y un velo encima: el texto tiene que
   leerse aunque la foto no cargue, así que el velo va sobre un fondo sólido y
   nunca al revés. */
.portada-foto {
  position: absolute;
  inset: 0;
  background: var(--fondo) url("/demo/assets/portada-horno-v1.webp") center / cover no-repeat;
  z-index: 0;
}

.portada-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fondo) 62%, transparent) 0%,
    color-mix(in srgb, var(--fondo) 78%, transparent) 42%,
    color-mix(in srgb, var(--fondo) 94%, transparent) 100%
  );
}

.portada > .banda-demo {
  position: relative;
  z-index: 3;
}

.portada-centro {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 20px;
  text-align: center;
}

.portada-logo {
  width: 200px;
  max-width: 62vw;
  height: auto;
  margin: 0 auto;
}

.portada-nombre {
  margin: 0;
  font-size: 34px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

.portada-bajada {
  margin: 0;
  font-size: 15px;
  color: var(--texto-suave);
}

/* El único adorno de la portada. */
.portada-regla {
  width: 112px;
  height: 1px;
  border: 0;
  margin: 2px 0 6px;
  background: var(--borde);
}

.portada-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

.portada-botones .btn {
  width: 100%;
}

.portada-nota {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--texto-suave);
}

.portada-pie {
  position: relative;
  z-index: 2;
  padding: 14px 20px 20px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}

.portada-pie p {
  margin: 0 0 4px;
}

.portada-pie p:last-child {
  margin-bottom: 0;
}

.portada-pie a {
  color: var(--acento);
}

@media (min-height: 760px) {
  .portada-centro {
    gap: 22px;
  }
}