/* ═══════════════════════════════════════════════════════
   10-portada.css  —  La primera pantalla, de nuevo.

   Tres cosas viven aquí:

   1. EL MARCO DE LA FOTO. La cocina ya no se recorta sola con
      object-fit: vive en un marco de 16:9 que se agranda hasta
      cubrir la pantalla. Así el recorte es siempre el mismo,
      pase lo que pase con el tamaño de la ventana.

   2. LA COLUMNA DE TEXTO. Fraunces —variable, con sus ejes
      opsz y WONK— para el titular; Archivo, apretada y en
      versalitas, para lo demás. Sobre foto oscura el texto va
      claro en los DOS temas: es lo único legible ahí.

   3. EL VELO. No se pinta aquí (ver el apartado 1b), pero es
      parte de la portada: le baja el protagonismo a una foto
      cuyo máster sólo da 1344 px —o sea, disimula lo que no se
      puede arreglar— y deja el centro limpio.
   ═══════════════════════════════════════════════════════ */

@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{ --tipo-titulo:"Fraunces","Archivo",Georgia,"Times New Roman",serif; }


/* ═══ 1. EL MARCO DE LA FOTO ═══════════════════════════════
   Ancho = el mayor entre la pantalla y (alto × 16/9). Es la
   fórmula de "cover", pero escrita a mano para que el logo
   pueda vivir en el mismo sistema de coordenadas. */
.marco-foto{
  --ancho:max(100%, calc(var(--alto-portada,100svh) * 16 / 9));
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:var(--ancho); height:calc(var(--ancho) * 9 / 16);
}
.marco-foto > picture{ position:absolute; inset:0; display:block; }
[data-tema] .marco-foto > picture img{
  width:100%; height:100%; object-fit:fill; transform:none;
  filter:contrast(1.14) saturate(1.05) brightness(1.01); }


/* ═══ 1b. EL VELO ══════════════════════════════════════════
   NO se define aquí, y es a propósito. Ya existe, y bien
   resuelto, en tres sitios que trabajan juntos:

     01-base.css:202   .fondo-portada::after   — el velo base
     05-contraste.css  [data-tema="noche"]     — viñeta oscura
     02-temas.css      [data-tema="dia"]       — viñeta blanca

   Los tres son viñetas: apagan las orillas y dejan el centro
   más limpio, que es justo lo que pedía "la foto a segundo
   plano".

   Aquí se llegó a añadir un segundo velo sobre .marco-foto.
   Fue un error y se quitó: duplicaba una decisión que el
   proyecto ya tomaba en un solo lugar, y habría dejado dos
   sitios que ajustar cada vez que se quisiera mover el tono.
   Si hay que subir o bajar el velo, se toca el de esas tres
   hojas, no se añade otro.                                */


/* ═══ 2. LA COLUMNA DE TEXTO ═══════════════════════════════ */
.portada{ min-height:100svh; display:flex; flex-direction:column;
  justify-content:left; padding-block:clamp(6rem,14vh,9rem) clamp(2rem,5vh,3.4rem); }
.portada-reja{ display:block; }

/* proporción propia: columna angosta, sostenida por un hilo de cobre */
.dicho-portada{ position:relative; max-width:min(38ch,42%);
  padding-left:clamp(1.1rem,2.4vw,2rem); }
.dicho-portada::before{ content:""; position:absolute; left:0; top:.35rem; bottom:.6rem;
  width:1px; background:linear-gradient(180deg,var(--cobre-toque),transparent 88%);
  opacity:.85; }

.portada .lema{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem;
  font-family:var(--tipo); font-size:.76rem; font-weight:700;
  font-variation-settings:"wdth" 92; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cobre-luz); text-shadow:0 1px 2px rgba(0,0,0,.55),0 5px 18px rgba(0,0,0,.45); }
.portada .lema::before{ width:1.6rem; }

.portada h1{
  font-family:var(--tipo-titulo);
  font-size:clamp(2.5rem,1.4rem + 1.0vw,2.0rem);
  font-weight:50; line-height:.92; letter-spacing:-.022em;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
  max-width:11ch; text-wrap:balance; }

.portada .entrada{ margin-top:1.5rem; max-width:33ch;
  font-size:clamp(1rem,.94rem + .3vw,1.14rem); line-height:1.5;
  font-variation-settings:"wdth" 96; }

.portada .mandos{ margin-top:3.1rem; gap:.55rem; }
.portada .mandos .boton{ min-height:40px; padding:.58rem 1rem; font-size:.82rem; }

/* los tres duros: fila baja, apretada, tipo ficha técnica */
.portada .duros{ margin-top:clamp(2.2rem,5vh,3.5rem);
  padding-left:clamp(1.1rem,1.4vw,1rem); max-width:min(38ch,42%); gap:.55rem; }
.portada .duros li{ gap:.55rem; padding-right:.55rem; }
.portada .duros svg{ width:24px; height:24px; }
.portada .duros b{ font-size:.75rem; line-height:1.2; letter-spacing:.03em; }


/* ═══ TEXTO SOBRE FOTO OSCURA: claro en los dos temas ══════
   La cocina es oscura de día y de noche. Forzar la paleta clara
   aquí es lo que permite dejar la imagen sin un solo velo. */
@media (min-width:940px){
  [data-tema] .portada{
    --hueso:#F4F2EF; --hueso-med:rgba(244,242,239,.78);
    --cobre-luz:#E3AC78; --cobre-toque:#E3AC78;
    color:#F4F2EF; }
  [data-tema] .portada h1,
  [data-tema] .portada .duros b{ color:#F6F4F1; }
  [data-tema] .portada .entrada,
  [data-tema] .portada .duros span span{ color:rgba(244,242,239,.78); }
  [data-tema] .portada .duros svg{ color:#E3AC78; }

  /* sombra de letra ajustada a la foto nueva (manda sobre 08-fondo) */
  [data-tema="noche"] .portada :is(h1,.lema,.entrada),
  [data-tema="dia"]   .portada :is(h1,.lema,.entrada),
  [data-tema="noche"] .portada .duros :is(b,span),
  [data-tema="dia"]   .portada .duros :is(b,span){
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 10px 34px rgba(0,0,0,.62); }

  /* el botón hueco se vuelve de cristal: sobre foto se ve mejor */
  [data-tema] .portada .boton--hueco{
    background:rgba(255,255,255,.07); border-color:rgba(244,242,239,.42);
    color:#F4F2EF; backdrop-filter:blur(6px); }
  [data-tema] .portada .boton--hueco:hover{
    background:rgba(255,255,255,.14); border-color:#F4F2EF; }
}


/* ═══ PANTALLA ANGOSTA ═════════════════════════════════════
   En vertical, un 16:9 que cubre recorta demasiado: la cocina
   se sale de cuadro. Así que la foto pasa a ser un cintillo de
   ancho completo pegado arriba, y el texto arranca debajo,
   sobre el color del tema. */
@media (max-width:939px){
  .marco-foto{
    --ancho:100%;
    top:0; left:0; transform:none;
    width:100%; height:calc(100vw * 9 / 16); }
  .portada{ min-height:0;
    padding-block:calc(100vw * 9 / 16 + clamp(1.8rem,6vw,3rem)) var(--aire); }
  .dicho-portada{ max-width:none; }
  .portada .duros{ max-width:none; }
  .portada h1{ font-size:clamp(2.5rem,1.1rem + 8vw,3.6rem); max-width:13ch; }
}