/* ==========================================================================
   Casa Bianca — hoja de estilos única
   ==========================================================================
   La identidad no se inventa aquí: se copia de la carta impresa y del local.
   Bandas negras con texto en claro, fondo color papel crema, línea de puntos
   entre el plato y su precio, y titulares en una condensada que rima con el
   logotipo ("CASA BIANCA · CAFETERÍA").

   Tipografías servidas desde /fonts en lugar de desde Google Fonts: el CDN de
   Google transmite la IP del visitante a un tercero, lo que en la UE es un
   problema de RGPD para el negocio. Alojarlas aquí lo elimina y además evita
   una conexión extra, que en móvil se nota.
   ========================================================================== */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-latin.woff2') format('woff2-variations');
  font-weight: 200 700;              /* fuente variable: un archivo, todos los pesos */
  font-style: normal;
  font-display: swap;                /* el texto se lee antes de que cargue la fuente */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}

/* --------------------------------------------------------------------------
   Tokens — tres capas: primitiva (valor crudo), semántica (para qué sirve),
   de componente (dónde se usa). Cambiar el color de un botón se hace en la
   capa de componente sin tocar la paleta.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;               /* diseño comprometido con un solo modo */

  /* --- Capa primitiva: paleta sacada de la carta y del local --- */
  --tinta:            #1A1815;       /* negro cálido de las bandas impresas */
  --tinta-suave:      #5C554A;
  --crema:            #F7F2E8;       /* el papel de la carta */
  --crema-honda:      #EFE7D8;
  --blanco:           #FFFFFF;       /* paredes y mesas */
  --terracota:        #9A4F36;       /* baldosa del suelo, oscurecida para contraste */
  --terracota-clara:  #B4674D;       /* sólo decorativa, nunca texto pequeño */
  --madera:           #C9A87C;       /* pino de la barra; sólo filetes y bordes */
  --rojo-cojin:       #B32E28;       /* los cojines rojos de las sillas */
  --verde-whatsapp:   #075E54;

  /* Contrastes verificados sobre crema (#F7F2E8):
       tinta 15.9  AAA · tinta-suave 6.6  AA · terracota 5.3  AA
     Con texto blanco encima:
       terracota 5.9 AA · rojo-cojin 6.3 AA · verde-whatsapp 7.7 AAA
     madera (2.0) y terracota-clara (3.8) NO valen para texto: sólo adorno. */

  /* --- Capa semántica --- */
  --fondo:            var(--crema);
  --fondo-alterno:    var(--blanco);
  --fondo-banda:      var(--tinta);
  --texto:            var(--tinta);
  --texto-tenue:      var(--tinta-suave);
  --texto-invertido:  var(--crema);
  --acento:           var(--terracota);
  --destacado:        var(--rojo-cojin);
  --borde:            #DED3BF;
  --borde-fuerte:     var(--tinta);
  --foco:             var(--terracota);

  /* --- Tipografía. Arranca grande a propósito: buena parte de la clientela
         pasa de los cincuenta y lee en el móvil, muchas veces en la terraza
         y a pleno sol. 18px es el mínimo, no el máximo. --- */
  --font-titular: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-texto:   'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --texto-sm:   1rem;         /* 16px — sólo notas al pie */
  --texto-base: 1.125rem;     /* 18px */
  --texto-lg:   1.25rem;
  --texto-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --texto-2xl:  clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
  --texto-3xl:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  --interlineado:        1.6;
  --interlineado-corto:  1.15;

  /* --- Espaciado, escala de 4px --- */
  --e1: 0.25rem;  --e2: 0.5rem;  --e3: 0.75rem; --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;    --e7: 3rem;    --e8: 4rem;   --e9: 6rem;

  --ancho-max:   68rem;
  --ancho-texto: 38rem;          /* medida cómoda de lectura */
  --radio:       4px;            /* casi recto: la carta impresa no tiene curvas */
  --radio-btn:   3px;

  /* --- Capa de componente --- */
  --btn-alto-min:      2.75rem;  /* 44px: mínimo para tocar con el pulgar */
  --btn-primario-bg:   var(--acento);
  --btn-primario-tx:   var(--blanco);
  --btn-secundario-tx: var(--tinta);
  --btn-secundario-bd: var(--tinta);
  --btn-whatsapp-bg:   var(--verde-whatsapp);

  --banda-bg:      var(--fondo-banda);
  --banda-tx:      var(--texto-invertido);
  --puntos-color:  var(--tinta);
  --puntos-alpha:  0.32;

  --cabecera-bg:   var(--crema);
  --tarjeta-bg:    var(--blanco);
  --tarjeta-bd:    var(--borde);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
}

/* Anclas: sin esto la cabecera fija tapa el titular al saltar a una sección */
[id] { scroll-margin-top: 5rem; }

h1, h2, h3 {
  font-family: var(--font-titular);
  font-weight: 700;
  line-height: var(--interlineado-corto);
  letter-spacing: 0.02em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

h1 { font-size: var(--texto-3xl); text-transform: uppercase; letter-spacing: 0.04em; }
h2 { font-size: var(--texto-2xl); text-transform: uppercase; letter-spacing: 0.05em; }
h3 { font-size: var(--texto-xl); text-transform: uppercase; letter-spacing: 0.06em; }

p { margin: 0 0 var(--e4); max-width: var(--ancho-texto); }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* Un solo estilo de foco para todo, y bien visible: es lo que permite
   recorrer la página con el teclado sin perderse. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Primer tabulador de la página: salta la navegación y va al contenido. */
.skip-link {
  position: absolute; left: var(--e4); top: -4rem;
  z-index: 100;
  background: var(--tinta); color: var(--crema);
  padding: var(--e3) var(--e4);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--e4); }

/* Marca visible de contenido que aún falta. Se ve a propósito: en la revisión
   con la dueña, cada hueco tiene que saltar a la vista. Antes de publicar no
   puede quedar ni uno (buscar "pendiente" y "TODO"). */
.pendiente {
  background: #FFF3C4;
  color: #6B4E00;
  padding: 0 var(--e1);
  border-radius: 2px;
  font-style: italic;
}
.pendiente-bloque {
  background: #FFF3C4;
  color: #6B4E00;
  border-left: 4px solid #C9A227;
  padding: var(--e3) var(--e4);
  font-style: italic;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Cabecera y navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cabecera-bg);
  border-bottom: 1px solid var(--borde);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e3);
  flex-wrap: wrap;
}

.brand { display: block; text-decoration: none; color: var(--texto); line-height: 0; }

/* El logotipo hereda el color de donde esté (currentColor en el SVG): oscuro
   sobre la cabecera crema, claro sobre el pie negro. El aspect-ratio se
   declara aquí porque un SVG en línea sin width/height propios se dibujaría
   a 300x150 por defecto.

   A este tamaño el "BAR Y CAFETERÍA" del rombo no llega a leerse, y es a
   propósito: a los logotipos con filete les pasa igual impresos en pequeño.
   Lo que funciona a 52px es la silueta, que es lo que la gente reconoce. El
   nombre completo se lo lleva el aria-label del enlace, y el pie lo enseña
   ya a un tamaño en que sí se lee. */
.brand-logo {
  height: 52px;
  width: auto;
  aspect-ratio: 420 / 266;
  display: block;
}

.nav-toggle {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--btn-alto-min);
  padding: var(--e2) var(--e3);
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-btn);
  color: var(--texto);
  font-family: var(--font-titular);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  width: 1.125rem; height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 2px; background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.nav { flex-basis: 100%; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding: var(--e3) 0;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--font-titular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--borde);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--acento); }

/* Cerrado por defecto en móvil; lo abre el botón. Si no hay JavaScript,
   .nav no lleva el atributo hidden y el menú queda simplemente desplegado,
   que es un fallo mucho más benigno que un menú inaccesible. */
.nav[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.hero { background: var(--tinta); }

.hero-img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  /* El recorte tira hacia arriba a propósito. Con el centro por defecto se
     pierden las copas colgadas y la estantería, que es lo mejor de la foto,
     y se queda casi sólo el mostrador. */
  object-position: center 28%;
}

.hero-body {
  padding-block: var(--e6) var(--e7);
  color: var(--texto-invertido);
}
.hero-body h1 { margin-bottom: var(--e2); }
.hero-body p  { color: var(--texto-invertido); }

.eyebrow {
  font-family: var(--font-titular);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--madera);          /* decorativo sobre fondo oscuro, no es texto crítico */
  margin-bottom: var(--e2);
}

.lede { font-size: var(--texto-lg); }

.estado { font-weight: 600; }
.estado a { color: var(--madera); }
.estado[data-abierto="si"]::before,
.estado[data-abierto="no"]::before {
  content: "";
  display: inline-block;
  width: .6rem; height: .6rem;
  margin-right: var(--e2);
  border-radius: 50%;
  vertical-align: middle;
}
.estado[data-abierto="si"]::before { background: #4ADE80; }
.estado[data-abierto="no"]::before { background: #F87171; }

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-alto-min);
  padding: var(--e3) var(--e5);
  border-radius: var(--radio-btn);
  border: 2px solid transparent;
  font-family: var(--font-titular);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.btn-primario   { background: var(--btn-primario-bg); color: var(--btn-primario-tx); }
.btn-primario:hover { background: var(--tinta); }

.btn-secundario { background: transparent; color: var(--btn-secundario-tx); border-color: var(--btn-secundario-bd); }
.btn-secundario:hover { background: var(--tinta); color: var(--crema); }

.btn-whatsapp   { background: var(--btn-whatsapp-bg); color: var(--blanco); }
.btn-whatsapp:hover { background: var(--tinta); }

/* Sobre el fondo oscuro de la portada el botón fantasma necesita invertirse */
.hero .btn-secundario { color: var(--crema); border-color: var(--crema); }
.hero .btn-secundario:hover { background: var(--crema); color: var(--tinta); }

.acciones-lista { display: flex; flex-wrap: wrap; gap: var(--e3); max-width: none; }

/* En el móvil el teléfono es la acción principal de toda la página: quien
   quiere reservar mesa llama, no rellena un formulario. Ocupa el ancho
   completo para que sea imposible fallar el toque. */
@media (max-width: 45.99em) {
  .btn-telefono { width: 100%; }
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.seccion { padding-block: var(--e7); }
.seccion + .seccion { border-top: 1px solid var(--borde); }
.seccion-destacada { background: var(--fondo-alterno); border-top: none; }
.seccion-contacto  { background: var(--fondo-alterno); }

/* Sección en negro. Cae entre dos secciones color crema, así que el contraste
   hace todo el trabajo sin necesidad de recuadros ni iconos. Es el mismo
   recurso que las bandas negras de la carta impresa. */
.seccion-oscura {
  background: var(--fondo-banda);
  color: var(--texto-invertido);
  border-top: none;
}
.seccion-oscura h2,
.seccion-oscura p { color: var(--texto-invertido); }
.seccion-oscura .seccion-intro { color: var(--madera); font-size: var(--texto-lg); }

/* Sobre negro, el botón terracota se apaga. En crema con texto oscuro salta
   a la vista, que es lo que tiene que hacer la única acción de la sección. */
.seccion-oscura .btn-primario { background: var(--crema); color: var(--tinta); }
.seccion-oscura .btn-primario:hover { background: var(--madera); color: var(--tinta); }

.pedidos-texto { font-size: var(--texto-lg); }

/* Versión reducida del mismo aviso, para la carta */
.aviso-pedidos {
  background: var(--fondo-banda);
  color: var(--texto-invertido);
  padding: var(--e5);
  border-radius: var(--radio);
  margin-bottom: var(--e7);
}
.aviso-pedidos h2 {
  background: none;             /* si no, hereda la banda negra de .carta-seccion h2 */
  color: var(--texto-invertido);
  padding: 0;
  margin-bottom: var(--e2);
  font-size: var(--texto-xl);
}
.aviso-pedidos p { color: var(--texto-invertido); }
.aviso-pedidos .btn-primario { background: var(--crema); color: var(--tinta); }
.aviso-pedidos .btn-primario:hover { background: var(--madera); color: var(--tinta); }

.seccion-intro { color: var(--texto-tenue); margin-top: calc(var(--e4) * -1); }
.seccion-cta { margin-top: var(--e5); }

.nota { font-size: var(--texto-sm); color: var(--texto-tenue); }
.nota-legal { margin-top: var(--e6); font-style: italic; }

/* --- Las tres tarjetas de menú: lo primero que la gente viene a mirar --- */
.menus-lista {
  list-style: none; margin: 0 0 var(--e5); padding: 0;
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.menu-card {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5);
  background: var(--tarjeta-bg);
  border: 1px solid var(--tarjeta-bd);
  border-top: 4px solid var(--tinta);
  border-radius: var(--radio);
}
.menu-card-nombre {
  font-family: var(--font-titular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-lg);
}
.menu-card-precio {
  font-family: var(--font-titular);
  font-size: var(--texto-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* El menú de estudiantes es lo más competitivo que tiene el negocio y hoy no
   aparece en ningún sitio de internet. Se marca a propósito. */
.menu-card-estrella {
  border-top-color: var(--destacado);
  background: var(--crema-honda);
}
.menu-card-estrella .menu-card-precio { color: var(--destacado); }

/* --------------------------------------------------------------------------
   Lista de precios con línea de puntos
   Es el gesto más reconocible de la carta impresa y se traduce bien a web.
   -------------------------------------------------------------------------- */
.precios { list-style: none; margin: 0 0 var(--e5); padding: 0; max-width: var(--ancho-texto); }

.precios li {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding-block: var(--e3);
  border-bottom: 1px solid transparent;
}

.precios-nombre { order: 0; flex: 0 1 auto; }

/* El relleno de puntos: crece para ocupar lo que sobra entre nombre y precio */
.precios li::before {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--puntos-color);
  opacity: var(--puntos-alpha);
  transform: translateY(-0.3em);
}

.precios-precio {
  order: 2;
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* los precios quedan alineados en columna */
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Horario
   -------------------------------------------------------------------------- */
.horario {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--ancho-texto);
}
.horario th, .horario td {
  text-align: left;
  padding: var(--e3) var(--e2);
  border-bottom: 1px solid var(--borde);
}
.horario th { font-weight: 600; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario tr[data-hoy] { background: var(--crema-honda); font-weight: 700; }

/* --------------------------------------------------------------------------
   Foto junto al horario
   --------------------------------------------------------------------------
   Recorte cuadrado y no el 3:4 original: la foto es vertical y al lado de una
   tabla de siete filas quedaría desproporcionada, con la tabla flotando
   arriba y medio metro de hueco debajo. En cuadrado siguen entrando tanto el
   brindis como la ración.
   -------------------------------------------------------------------------- */
.horario-inner { display: grid; gap: var(--e6); }
.horario-foto { margin: 0; }
.horario-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio);
}

@media (min-width: 46em) {
  .horario-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--e7);
  }
  /* La foto va la primera visualmente aunque en el HTML esté después. Es
     decorativa, así que alterar su orden visual no afecta a quien navega con
     teclado ni a un lector de pantalla: el horario se sigue leyendo antes. */
  .horario-foto { order: -1; }
}

/* --------------------------------------------------------------------------
   Dónde estamos
   -------------------------------------------------------------------------- */
.donde-inner { display: grid; gap: var(--e6); }
.direccion { font-size: var(--texto-lg); line-height: 1.5; }
.datos { list-style: none; margin: var(--e5) 0 0; padding: 0; }
.datos li { padding-block: var(--e2); border-top: 1px solid var(--borde); }
.donde-foto { margin: 0; }
.donde-foto img { border-radius: var(--radio); }

/* --------------------------------------------------------------------------
   Carta
   -------------------------------------------------------------------------- */
.carta { padding-block: var(--e6) var(--e8); }

.carta-indice { margin-bottom: var(--e7); }
.carta-indice ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2);
}
.carta-indice a {
  display: inline-block;
  padding: var(--e2) var(--e4);
  min-height: var(--btn-alto-min);
  display: inline-flex; align-items: center;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-btn);
  color: var(--texto);
  text-decoration: none;
  font-family: var(--font-titular);
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}
.carta-indice a:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.carta-seccion { margin-bottom: var(--e7); }

/* La banda negra con el texto en claro, calcada de la carta en papel */
.carta-seccion h2 {
  background: var(--banda-bg);
  color: var(--banda-tx);
  padding: var(--e2) var(--e4);
  margin-bottom: var(--e4);
  max-width: var(--ancho-texto);
}
.carta-seccion h3 {
  margin-top: var(--e6);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--tinta);
  max-width: var(--ancho-texto);
}
.carta-cta { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e7); max-width: none; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--tinta);
  color: var(--texto-invertido);
  padding-block: var(--e7);
  margin-top: var(--e8);
}
.site-footer p { color: var(--texto-invertido); margin-bottom: var(--e2); }
.site-footer a { color: var(--madera); }

/* Aquí sí hay sitio: a este tamaño el rombo se lee entero, filigranas y
   "BAR Y CAFETERÍA" incluidos. */
.footer-logo {
  width: min(240px, 70%);
  height: auto;
  aspect-ratio: 420 / 266;
  display: block;
  margin-bottom: var(--e5);
}
.redes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e5) 0 0; padding: 0; }

/* Icono y nombre juntos, no sólo el icono: una parte de la clientela no
   reconoce la silueta de Facebook sin la palabra al lado, y la palabra
   tampoco estorba a quien sí la reconoce.
   El alto mínimo deja el enlace en 44px, que es lo que necesita un pulgar. */
.red {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--btn-alto-min);
  padding: var(--e2) 0;
  color: var(--madera);
  text-decoration: none;
  font-family: var(--font-titular);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.red:hover { color: var(--crema); text-decoration: underline; text-underline-offset: 4px; }
.red-icono { width: 1.5rem; height: 1.5rem; flex: none; }

/* --------------------------------------------------------------------------
   A partir de tablet
   Móvil primero: todo lo de arriba es la versión estrecha, que es como va a
   entrar la inmensa mayoría de la gente.
   -------------------------------------------------------------------------- */
@media (min-width: 46em) {
  .nav-toggle { display: none; }

  /* En pantalla ancha la navegación se ve siempre, aunque el botón la haya
     dejado con hidden en móvil. */
  .nav, .nav[hidden] { display: block; flex-basis: auto; }
  .nav ul { display: flex; gap: var(--e5); }
  .nav a { border-bottom: none; padding: var(--e2) 0; }

  .hero-img { max-height: 70vh; }
  .hero-body { padding-block: var(--e7) var(--e8); }

  .donde-inner { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--e7); }
  .seccion { padding-block: var(--e8); }
}

@media (min-width: 64em) {
  .donde-inner { grid-template-columns: 1.2fr 1fr; }
}

/* --------------------------------------------------------------------------
   Preferencias del sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .nav-toggle, .hero-acciones, .carta-indice { display: none; }
  body { background: #fff; font-size: 11pt; }
  .carta-seccion h2 { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}