/* base.css aparta el carril de la barra para que las pantallas con riel no
   brinquen; la portada mide lo que la ventana y no corre, así que ese carril
   quedaba vacío como una franja gris junto a la onda. */
html:has(.portada) { scrollbar-gutter: auto; }
body:has(.portada) { background: var(--fondo); }

.portada {
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--alto-marca));
  overflow: hidden;
  background: var(--tarjeta);
}
.portada-onda {
  pointer-events: none;
  position: absolute; bottom: 0; right: 0; z-index: 0;
  width: clamp(28.75rem, 64vw, 58.75rem);
  aspect-ratio: 712 / 482;
}
.portada-onda img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

.portada-encabezado, .portada-cuerpo, .portada-pie { position: relative; z-index: 10; }

.portada-encabezado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(1.25rem, 5vh, 3.5rem) clamp(1.5rem, 6vw, 5.5rem) 0;
}
.portada-logo { display: block; width: auto; height: clamp(2.375rem, 4.4vw, 3.25rem); object-fit: contain; }

.portada-credito { display: flex; align-items: center; gap: 0.875rem; }
.portada-credito-rotulo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--gris-claro); }
.portada-credito-linea { display: block; width: 1px; height: 1.625rem; background: rgb(2 24 56 / 0.14); }
.portada-credito img { display: block; width: auto; height: clamp(2rem, 3.6vw, 2.625rem); object-fit: contain; }

.portada-cuerpo {
  display: flex; flex: 1; align-items: center;
  padding: clamp(1.5rem, 8vh, 4.5rem) clamp(1.5rem, 6vw, 5.5rem);
}
.portada-contenido { display: flex; flex-direction: column; width: min(52rem, 100%); gap: clamp(1.75rem, 3.6vw, 2.25rem); }
.portada-intro { display: flex; flex-direction: column; gap: 0.875rem; }
.portada-antetitulo { margin: 0; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); color: var(--gris); }
.portada-titulo {
  margin: 0;
  font-size: min(clamp(2rem, 6vw, 5rem), 9vh);
  font-weight: 700; line-height: 1.01; letter-spacing: -0.04em;
  color: var(--tinta);
  text-wrap: pretty;
}
.portada-entrada { margin: 0; max-width: 23em; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: var(--gris); text-wrap: pretty; }

.portada-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.portada-boton {
  display: flex; align-items: center; justify-content: center; gap: 0.6875rem;
  width: min(22.5rem, 100%); height: 3.625rem; padding: 0 1.25rem;
  border: 1px solid var(--acento); border-radius: var(--radio-control);
  background: var(--acento);
  color: #fff; font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.portada-boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); text-decoration: none; }
.portada-boton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(19 109 171 / 0.3); }

/* El logotipo de Microsoft en cuatro cuadros, sin pedir una imagen. */
.portada-microsoft { display: grid; flex: none; grid-template-columns: 8px 8px; grid-template-rows: 8px 8px; gap: 2px; }
.portada-microsoft span { display: block; }
.portada-microsoft .cuadro-rojo { background: #f25022; }
.portada-microsoft .cuadro-verde { background: #7fba00; }
.portada-microsoft .cuadro-azul { background: #00a4ef; }
.portada-microsoft .cuadro-amarillo { background: #ffb900; }

/* Pantallas de aviso: el título es una frase, no un nombre. */
.portada-titulo-aviso { font-size: clamp(1.75rem, 4vw, 2.75rem); }

/* Con ilustración, el cuerpo reparte el ancho entre el texto y el dibujo; sin
   ella el texto se queda con todo. La onda no convive con la ilustración. */
.portada-cuerpo-ilustrado { gap: clamp(2rem, 5vw, 4.5rem); }
.portada-cuerpo-ilustrado .portada-contenido { width: min(32rem, 100%); }
.portada-ilustracion { flex: 0 1 26rem; min-width: 0; }
.portada-ilustracion img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  /* Invertido: el dibujo queda arriba del texto, que es el orden de lectura. */
  .portada-cuerpo-ilustrado { flex-direction: column-reverse; align-items: flex-start; gap: 2rem; }
  .portada-ilustracion { flex: none; width: min(14rem, 60%); }
}

.portada-nota { margin: 0; width: min(22.5rem, 100%); font-size: 0.84375rem; line-height: 1.6; color: var(--gris); }
.portada-nota code { font-size: 0.8em; }
.portada-nota-local { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px dashed var(--linea); font-size: 0.78125rem; }

.portada-pie {
  display: flex; flex-direction: column; gap: 0.375rem;
  padding: 0 clamp(1.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vh, 2.75rem);
  font-size: 0.78125rem; line-height: 1.4;
  color: var(--gris-claro);
}
.portada-pie > span { white-space: nowrap; }
.portada-pie-credito { display: flex; align-items: center; gap: 0.4375rem; }
.portada-pie-credito img { display: block; width: auto; height: 0.8125rem; object-fit: contain; }
.portada-pipa { color: rgb(2 24 56 / 0.18); }
.portada-credito-pie { display: none; align-items: center; gap: 0.4375rem; }
.portada-credito-pie img { display: block; width: auto; height: 1rem; object-fit: contain; }

@media (max-width: 640px) {
  .portada-onda { display: none; }
  .portada-credito { display: none; }
  .portada-credito-pie { display: flex; }
  .portada-boton { width: 100%; }
  .portada-nota { width: 100%; }
  .portada-pie > span { white-space: normal; }
}