/* caso-herencia.css — tokens y lo propio del caso Restaurante La Herencia.
   Todo lo demas vive en caso-base.css, que es COMPARTIDA: no se toca aqui.

   Por que lo propio vive en este archivo y no en la base: el generador del
   sitio copia caso-base.css de un solo caso y la sirve una vez para todos.
   Una regla nueva alli se pierde en la siguiente corrida; una regla aqui
   viaja con el caso. Regla de la casa: lo compartido se sincroniza a mano,
   asi que se agrega lo menos posible.

   ---------------------------------------------------------------------------
   LA PALETA sale de las piezas, muestreada de los JPG originales (dic 2021):
     #7A1E12  el vinotinto de los trazos y de los titulares de las piezas
     #3D120A  el marron chocolate del brochazo oscuro (almuerzo, arroz)
     #E8C49A  el beige kraft del brochazo claro (velitas, novenas)

   El vinotinto de marca ya funciona sobre blanco sin tocarlo: #7A1E12 da
   10,39:1. Blanco sobre el acento: el mismo 10,39:1. Es el par que mandaria
   en un boton si la pagina lo llevara; aqui no hay CTA dentro del fragmento.

   En oscuro el vinotinto no entra (sobre #101215 no llega ni a 2:1), asi que
   el acento pasa al dorado de las velas del 7 de diciembre: #E8B86A da
   10,27:1 sobre el fondo de la base. */

/* --- La tipografia del caso -------------------------------------------------
   Fraunces (Undercase Type: Phaedra Charles, Flavia Zimbardi), licencia SIL
   OFL 1.1. La licencia va al lado de los archivos, en assets/fonts/, y tiene
   que viajar con ellos.

   DECISION Y SU MATIZ: la regla de la casa es sacar la fuente de AMPLIAR LAS
   LETRAS DE LOS TITULARES, no de mirar el logotipo. Ampliados, los titulares
   de estas piezas son una geometrica redonda tipo Poppins, que no dice nada
   por si sola: es la fuente por defecto de Canva en 2021. Lo que SI firma el
   caso es su registro: recetario viejo, brochazo a mano, mesa de madera.
   Fraunces es esa voz: una serif de contraste alto con caracter, del mismo
   mundo que el script del logotipo sin imitarlo. Se usa SOLO en titulares y
   rotulos; el cuerpo queda en la pila del sistema, porque un parrafo entero
   en serif display se lee peor, no mas de marca.

   Son dos archivos estaticos (400 y 700), subset `latin`, ~35 KB cada uno.
   Va `font-display: swap`: el titular se ve desde el primer pintado con la
   pila del sistema y cambia despues. Nunca hay texto invisible.

   Versionados en el repo, no por CDN: el sitio se publica en Hostinger y no
   debe depender de un tercero para renderizar. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-latin-400.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;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fraunces-latin-700.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;
}

.caso--herencia {
  --caso-acento: #7a1e12;          /* el vinotinto de marca tal cual: 10,39:1 */
  --caso-acento-texto: #fff;       /* 10,39:1 sobre el acento */
  --caso-secundario: #3d120a;      /* marron chocolate del brochazo, 15,5:1 */
  --caso-fondo-alt: #faf4ea;       /* crema calido, el papel bajo el trazo */
  --caso-linea: #ecdfc9;
  --herencia-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

/* Igual que Figaro: el fondo es blanco siempre. La identidad vive sobre
   crema y fotografia calida; seguir al sistema partirla a la mitad. Los
   tokens de oscuro quedan escritos y calibrados por si la integracion quita
   el atributo: el acento pasa al dorado de las velas (#E8B86A, 10,27:1). */
@media (prefers-color-scheme: dark) {
  .caso--herencia:not([data-tema="claro"]) {
    --caso-acento: #e8b86a;
    --caso-acento-texto: #231500;  /* 11,0:1 sobre el acento */
    --caso-secundario: #d9bba0;
    --caso-fondo-alt: #171310;
    --caso-linea: #332c20;
  }
}


/* --- Titular y rotulos en serif --------------------------------------------
   Solo los rotulos y el titular. En sentence case, sin mayusculas sostenidas:
   Fraunces ya tiene la voz alta que Figaro resolvia con la condensada en caja
   alta. `letter-spacing` ligeramente negativo, el justo para que el contraste
   de la serif respire a cuerpo grande. */

.caso--herencia .caso__titular,
.caso--herencia .caso__bloque-titulo {
  font-family: var(--herencia-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.08;
}

.caso--herencia .caso__nota-titulo {
  font-family: var(--herencia-serif);
  font-weight: 700;
  letter-spacing: 0;
}

.caso--herencia .caso__entrada + .caso__entrada { margin-top: .9rem; }


/* --- Rejilla de verticales -------------------------------------------------
   CUATRO piezas 9:16 exactas (1080x1920). Se bajo de cinco a cuatro en la
   segunda pasada de ago 2026, a pedido de Miguel: sin texto ni notas encima
   ni debajo, cuatro cierra una reja pareja (2x2 en telefono, fila de 4 desde
   760 px) y cinco dejaba una celda suelta. La que salio fue historia-antojos:
   el registro de los antojos ya queda cubierto por el animado, que abre
   justamente con chicharron y papa criolla.

   Rejilla propia y no `.caso__bento`, por la misma razon que Figaro: las
   cuatro son 1080x1920 exactas, asi que la casilla se define por proporcion
   y ninguna pierde un pixel. */

.caso--herencia .caso__verticales {
  display: grid;
  /* Explicito y no `auto-fit`, por lo mismo que .caso__mosaico de la base:
     auto-fit arma una pista de mas y su gap deja pixeles muertos. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.7rem, 1.8vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso--herencia .caso__verticales li { margin: 0; min-width: 0; }
.caso--herencia .caso__verticales figure { margin: 0; }

@media (min-width: 760px) {
  .caso--herencia .caso__verticales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --- El hero: video + dos piezas, junto al texto de entrada ----------------
   Segunda pasada de ago 2026, a pedido de Miguel: el animado se sube al
   primer acto como pieza de entrada -sin controles, en bucle, mudo, como un
   cinemagraph- y se le suman dos piezas fijas para que el bloque de medios
   quede a una altura parecida a la del texto que tiene al lado. El resto del
   feed (antojos, novenas, almuerzo) sale de esta composicion: con dos piezas
   fijas y el animado ya hay variedad de sobra, y meter las cinco convertia
   el primer acto en otro mosaico igual al de las verticales.

   Las dos piezas elegidas son las que NO se repiten en contenido con el
   animado (que abre con chicharron y cierra con bandeja paisa, o sea platos
   salados): velitas pone el tono de marca y arroz con leche el postre.

   7:6 y no una particion pareja dentro del propio bloque: el video es
   vertical (0,56 de proporcion) y con columnas iguales queda mas alto que
   las dos piezas apiladas. Con el bloque topado a 600px (ver el reparto,
   mas abajo), 7:6 es lo que dejo el video y las dos piezas a la MISMA
   altura, medido en el navegador a 1440px de ventana: antes, con 6:5, las
   piezas quedaban 14,8px mas cortas y se veia un hueco debajo de ellas,
   junto al video. Ajustar esta proporcion no toca la del reparto de mas
   abajo: son dos particiones distintas, una adentro de la otra. */

.caso--herencia .caso__hero-media {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(.75rem, 1.8vw, 1.25rem);
  align-items: start;
}
.caso--herencia .caso__hero-video {
  border-radius: var(--caso-radio-lg);
  overflow: hidden;
  background: var(--caso-fondo-alt);
}
.caso--herencia .caso__hero-video video {
  display: block;
  width: 100%;
  height: auto;
}
.caso--herencia .caso__hero-piezas {
  display: grid;
  gap: clamp(.75rem, 1.8vw, 1.25rem);
}
.caso--herencia .caso__hero-piezas .caso__marco { border-radius: var(--caso-radio-lg); }

@media (max-width: 719px) {
  /* Bajo el quiebre del reparto (ver caso-base.css, .caso__dupla en 860px:
     aqui la propia reja se apila antes, a 720, porque dos piezas apiladas
     junto a un video igual de angosto se ven amontonadas). */
  .caso--herencia .caso__hero-media { grid-template-columns: 1fr; }
  .caso--herencia .caso__hero-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- El reparto de este caso, angosto y no 8:4 -----------------------------
   `.caso__reparto` de la base parte el ancho completo del contenedor en 8:4
   (ver caso-base.css, desde 1000px). Ese 8fr es lo que dejaba el hueco: el
   TRACK medía ~700px pero el hero-media, ya topado por su propia proporcion
   6:5, solo llenaba ~600 -el resto quedaba como aire muerto antes del texto,
   que ademas se sumaba al gap del reparto (hasta 3,5rem/56px de la base).

   La correccion va en el TRACK, no en un max-width suelto sobre el hijo: si
   se topa el hijo pero no el track, el hueco reaparece igual. Con el primer
   track fijo en 600px maximo, el segundo (`1fr`) se lleva justo lo que
   sobra y el texto queda pegado a las piezas. De paso el gap baja de los
   3,5rem de la base a 2rem: con las piezas ya angostas, el respiro amplio
   se leia como el mismo hueco que se estaba corrigiendo. */
@media (min-width: 1000px) {
  .caso--herencia .caso__reparto {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2rem);
  }
  /* La base pone `.caso__reparto .caso__intro { max-width: none }` porque en
     el 8:4 original el propio track angosto (~350px) ya hacia de tope. Con
     el segundo track ahora en `1fr` -mas ancho, para no dejar aire muerto-
     el texto se estira a ~490px y pierde las lineas que le daban su alto:
     paso de calzar con el hero-media a quedar un tercio mas bajo. 38ch
     vuelve a acercar el texto a los ~355px que tenia antes, sin tocar el
     ancho del track (el sobrante queda como margen a la derecha del
     parrafo, no como hueco entre el texto y las piezas). */
  .caso--herencia .caso__reparto .caso__intro { max-width: 38ch; }
}