/* "Nuestra abuela Blanca" (ES /abuela-blanca/).
   Se carga después de platos.css y cambia solo la paleta: fondo negro igual al
   de las fotos (#030303) para que no se vea dónde termina la imagen, texto en
   el crema del logo. Las letras son las de toda la web: Jost para leer y la
   cursiva Great Vibes para lo que tiene que emocionar. */
body.homenaje{
  --bg:#030303; --bg2:#030303;
  --crema:#FFE3B0;           /* el crema exacto del logo */
  --line:rgba(255,227,176,.14);
  background:var(--bg)
}
.homenaje ::selection{background:var(--crema);color:#030303}
.homenaje{scrollbar-color:#3a3328 #030303}
.homenaje .ir-inicio a{text-shadow:none}

/* APERTURA: la foto del libro sola, a todo el ancho, sin texto encima. El
   título "Nuestra abuela Blanca" queda para Google y lectores de pantalla,
   pero no se ve */
.apertura{position:relative;max-width:1600px;margin:0 auto;padding-top:5.5rem}
.apertura img{width:100%}
.titulo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(min-width:900px){.apertura{padding-top:0}}

/* RELATO */
.relato-b{max-width:680px;margin:0 auto;padding:0 1.5rem}
.relato-b p{font-size:clamp(1.1rem,1.6vw,1.2rem);line-height:1.85;color:#E9D6B4;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.relato-b p+p{margin-top:1.3rem}
/* "Aires Caseros" con el logo y "tiene una abuela." en cursiva */
.primera{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2.8rem,7vw,4.6rem);line-height:1.15;color:var(--crema);text-align:center;margin:0 auto;padding:0 1.25rem}
.primera img{width:min(460px,78vw);margin:0 auto .5rem}

.bloque{margin-top:clamp(5rem,12vw,9rem)}
.bloque.corto{margin-top:clamp(2.6rem,5vw,4rem)}

/* FOTOS: todas centradas y del mismo ancho, nunca recortadas, sin bordes ni
   sombras: el negro las funde con la página */
.foto-ancha,.par{max-width:1600px;margin-left:auto;margin-right:auto}
.par{display:grid;gap:clamp(2rem,5vw,4rem)}
.foto-ancha img,.par img{width:100%}
/* BORDES DIFUMINADOS: las fotos se funden con el negro en los cuatro lados,
   así no se marca el corte ni la línea clara de 1px que traen algunas en el
   borde. La curva es suave (smoothstep) para que no se vea una franja donde
   empieza el degradé. No se recorta nada: solo se oscurece el margen. */
.apertura img,.foto-ancha img,.par img{
  --fx:11%; --fy:10%;
  --mh:linear-gradient(to right,transparent,rgba(0,0,0,.04) calc(var(--fx) * .125),rgba(0,0,0,.16) calc(var(--fx) * .25),rgba(0,0,0,.32) calc(var(--fx) * .375),rgba(0,0,0,.5) calc(var(--fx) * .5),rgba(0,0,0,.68) calc(var(--fx) * .625),rgba(0,0,0,.84) calc(var(--fx) * .75),rgba(0,0,0,.96) calc(var(--fx) * .875),#000 var(--fx),#000 calc(100% - var(--fx)),rgba(0,0,0,.96) calc(100% - var(--fx) * .875),rgba(0,0,0,.84) calc(100% - var(--fx) * .75),rgba(0,0,0,.68) calc(100% - var(--fx) * .625),rgba(0,0,0,.5) calc(100% - var(--fx) * .5),rgba(0,0,0,.32) calc(100% - var(--fx) * .375),rgba(0,0,0,.16) calc(100% - var(--fx) * .25),rgba(0,0,0,.04) calc(100% - var(--fx) * .125),transparent);
  --mv:linear-gradient(to bottom,transparent,rgba(0,0,0,.04) calc(var(--fy) * .125),rgba(0,0,0,.16) calc(var(--fy) * .25),rgba(0,0,0,.32) calc(var(--fy) * .375),rgba(0,0,0,.5) calc(var(--fy) * .5),rgba(0,0,0,.68) calc(var(--fy) * .625),rgba(0,0,0,.84) calc(var(--fy) * .75),rgba(0,0,0,.96) calc(var(--fy) * .875),#000 var(--fy),#000 calc(100% - var(--fy)),rgba(0,0,0,.96) calc(100% - var(--fy) * .875),rgba(0,0,0,.84) calc(100% - var(--fy) * .75),rgba(0,0,0,.68) calc(100% - var(--fy) * .625),rgba(0,0,0,.5) calc(100% - var(--fy) * .5),rgba(0,0,0,.32) calc(100% - var(--fy) * .375),rgba(0,0,0,.16) calc(100% - var(--fy) * .25),rgba(0,0,0,.04) calc(100% - var(--fy) * .125),transparent);
  -webkit-mask-image:var(--mh),var(--mv);
  -webkit-mask-composite:source-in;
  mask-image:var(--mh),var(--mv);
  mask-composite:intersect
}
.apertura img{--fx:18%;--fy:9%}

/* CIERRE: la frase, y "está hablando de ella" en cursiva grande, antes del
   color */
.cierre{max-width:680px;margin-left:auto;margin-right:auto;padding:0 1.5rem;text-align:center}
.cierre p{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.8;color:#E9D6B4;text-wrap:balance}
.cierre p span{display:block;font-family:'Great Vibes',cursive;font-size:clamp(3rem,7.5vw,4.8rem);line-height:1.2;color:var(--crema);margin-top:.6rem}

/* COLOR: la primera foto a color aparece en blanco y negro y se colorea
   despacio cuando entra en pantalla (solo con JS y sin "reducir movimiento") */
.js .revela img{filter:grayscale(1) brightness(.92);transition:filter 3.2s cubic-bezier(.16,1,.3,1)}
.js .revela.visto img{filter:none}
@media(prefers-reduced-motion:reduce){.js .revela img{filter:none;transition:none}}

/* FIRMA Y SALIDA */
.firma{text-align:center;padding:0 1.25rem}
/* Logo completo: AIRESCASEROS arriba, el corazón y "cocina con amor" abajo */
.firma .marca{width:min(300px,64vw);margin:0 auto 1.8rem}
.firma .corazon{width:min(150px,34vw);margin:0 auto}
.salida{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}
.homenaje .btn-line{border-color:rgba(255,227,176,.55);color:var(--crema)}
.homenaje .btn-line:hover{background:var(--crema);color:#030303}

/* FOOTER en negro */
.homenaje footer{background:#030303;border-top:1px solid var(--line);margin-top:clamp(5rem,10vw,8rem)}
.homenaje footer .amor{color:var(--crema)}
.homenaje footer nav a{color:#9C8F7A;border-color:rgba(156,143,122,.4)}
.homenaje footer nav a:hover{color:var(--crema)}
.homenaje footer small{color:#8A7F6C}

/* CHINO (/zh/nainai/): la cursiva de la casa no trae caracteres chinos, así
   que las frases en cursiva usan Noto Serif SC, igual que el resto de /zh/ */
html:lang(zh) .primera,html:lang(zh) .cierre p span{font-family:'Noto Serif SC','Songti SC',serif;font-weight:600;letter-spacing:.06em}
html:lang(zh) .primera{font-size:clamp(1.9rem,4.6vw,2.8rem)}
html:lang(zh) .cierre p span{font-size:clamp(2rem,5vw,3rem);margin-top:.8rem}