/* =========================================================
   ESTILOS — El Bigote de Leche, San Juan del Río

   Inspirado en la pastelería Yann Couvreur (París):
   marrón cacao, crema y caramelo; títulos en mayúsculas
   con peso ligero y mucho espaciado; botones casi cuadrados.

   Para cambiar los colores de todo el sitio, edita solo
   las variables de aquí abajo.
   ========================================================= */

:root {
  /* ---- PALETA ---- */
  --papel:    #FFFFFF;   /* fondo principal */
  --crema:    #F7F3E9;   /* fondo de secciones alternas */
  --cacao:    #6D4833;   /* marrón de la casa: texto, fondos oscuros, botones */
  --caramelo: #BD8F68;   /* acento claro: líneas y detalles sobre fondo oscuro */
  --caramelo-2: #8A6242; /* acento oscuro: enlaces y antetítulos sobre fondo claro */
  --suave:    #8A7566;   /* texto secundario */
  --borde:    rgba(109, 72, 51, 0.18);

  /* ---- TIPOGRAFÍA ----
     Jost es la versión libre de la geométrica que usa Yann Couvreur.
     Great Vibes se reserva para el nombre, por la caligrafía del logo. */
  --texto:   "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --titulos: "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --script:  "Great Vibes", "Segoe Script", cursive;

  /* ---- MEDIDAS ---- */
  --ancho: 1240px;
  --radio: 2px;          /* esquinas casi rectas, como la referencia */
  --sombra: 0 16px 40px rgba(109, 72, 51, 0.10);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--cacao);
  font-family: var(--texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--titulos);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.22;
  margin: 0 0 0.55em;
}
h3 {
  font-family: var(--titulos);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.35;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); }
h3 { font-size: 0.98rem; }

p { margin: 0 0 1em; }

a { color: var(--caramelo-2); text-decoration: none; }
a:hover { color: var(--cacao); text-decoration: underline; }

img, iframe { max-width: 100%; display: block; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 26px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--cacao); color: #fff;
  padding: 12px 20px; z-index: 999;
}
.saltar:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--caramelo-2); outline-offset: 3px; }

/* Marca de referencia del encabezado: invisible y sin estorbar.
   Vive a 60px del inicio del documento; en cuanto se sale de la pantalla,
   sabemos que ya bajaste y el encabezado se vuelve banda. */
#centinela {
  position: absolute; top: 60px; left: 0;
  width: 1px; height: 1px;
  pointer-events: none; opacity: 0;
}

/* Etiquetas chiquitas en mayúsculas, el sello de este estilo */
.antetitulo {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.68rem; font-weight: 500;
  color: var(--caramelo-2);
  margin-bottom: 1.1em;
}

/* ---------- Encabezado ----------
   OJO con el orden: por defecto el encabezado es una BANDA BLANCA legible.
   Solo cuando estás hasta arriba, encima de la foto de portada, el
   JavaScript le pone la clase .transparente y el fondo desaparece.

   Está al revés a propósito. Si el JavaScript falla, tarda, o la página
   se ve dentro de un visor que no avisa del desplazamiento, lo que queda
   es la banda legible — nunca letras blancas sobre fondo blanco. */
.encabezado {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 4px 22px rgba(109, 72, 51, 0.07);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Estado transparente. No es transparente del todo: lleva un velo oscuro
   que se desvanece hacia abajo. Cumple dos funciones —

   1. Sobre la foto de portada, garantiza que las letras blancas se lean
      aunque la foto tenga una zona clara justo arriba. Es lo que hace
      cualquier sitio serio con encabezado encima de imagen.
   2. Es la red de seguridad: si algún visor raro no avisara del
      desplazamiento y el encabezado se quedara en este estado, las letras
      blancas SIGUEN siendo legibles aunque abajo haya secciones claras. */
.encabezado.transparente {
  background: linear-gradient(to bottom,
              rgba(28, 18, 12, 0.46) 0%,
              rgba(28, 18, 12, 0.22) 55%,
              rgba(28, 18, 12, 0) 100%);
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.encabezado__interior {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  transition: min-height .35s ease;
}
.encabezado.transparente .encabezado__interior { min-height: 96px; }

.navegacion { display: flex; gap: 34px; justify-self: start; }
.encabezado__derecha { display: flex; align-items: center; gap: 18px; justify-self: end; }

/* --- La marca, centrada --- */
.marca {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--cacao); font-family: var(--script);
  font-size: 1.62rem; font-weight: 400; line-height: 1.1;
  padding: 4px 0;
  transition: opacity .35s ease, visibility .35s ease;
}
.marca:hover { text-decoration: none; }

/* Hasta arriba manda el logotipo grande de la portada, así que la marca
   del encabezado se esconde para no repetirlo. Reaparece al bajar. */
.encabezado.transparente .marca { opacity: 0; visibility: hidden; }

/* El logotipo chiquito de la banda. La imagen viene del CSS, no del
   JavaScript, para que se vea siempre: aunque los scripts estén
   bloqueados, tarden, o la página se abra dentro de un visor. */
.marca__logo {
  display: block; flex: none;
  width: 54px; height: 54px;
  background-image: url("../imagenes/logo-tinta.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* --- Navegación --- */
.navegacion a {
  color: var(--cacao);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.71rem; font-weight: 500;
  position: relative; padding: 6px 0;
}
.navegacion a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: currentColor; transition: width .28s ease;
}
.navegacion a:hover { text-decoration: none; color: inherit; }
.navegacion a:hover::after { width: 100%; }

/* --- Iconos de redes, minimalistas --- */
.social { display: flex; align-items: center; gap: 16px; }
.social a { color: var(--cacao); display: block; opacity: .9; transition: opacity .25s ease; }
.social a:hover { opacity: 1; text-decoration: none; }
.social svg { width: 19px; height: 19px; display: block; }

/* --- Botón de menú para celular --- */
.menu-boton {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.menu-boton span {
  display: block; width: 26px; height: 1px; background: var(--cacao);
  transition: transform .25s ease, opacity .2s ease;
}
.menu-boton.abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-boton.abierto span:nth-child(2) { opacity: 0; }
.menu-boton.abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Estado transparente: todo en blanco encima de la foto --- */
.encabezado.transparente .navegacion a,
.encabezado.transparente .marca,
.encabezado.transparente .social a { color: #fff; }
.encabezado.transparente .menu-boton span { background: #fff; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 16px 34px;
  border-radius: var(--radio);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-size: 0.72rem; font-weight: 500;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.boton:hover { text-decoration: none; }

.boton--principal { background: var(--cacao); color: #fff; }
.boton--principal:hover { background: var(--caramelo-2); color: #fff; }

/* Para usar sobre los bloques marrones */
.boton--claro { background: var(--crema); color: var(--cacao); }
.boton--claro:hover { background: #fff; color: var(--cacao); }

.boton--fantasma {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75);
}
.boton--fantasma:hover { background: #fff; color: var(--cacao); }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  min-height: min(92vh, 820px);
  /* El contenido se pega a la parte alta: el logotipo queda arriba,
     con aire respecto al encabezado, y centrado de izquierda a derecha. */
  display: flex; align-items: flex-start;
  padding: 132px 0 90px;
  overflow: hidden;
}
/* Las fotos se piden desde el CSS, no desde JavaScript: así el navegador
   empieza a bajarlas de inmediato y la portada aparece mucho antes.
   Van en dos capas: primero la foto, debajo un degradado. Si la foto
   todavía no existe, el navegador se salta esa capa y se ve el degradado. */
/* La foto va siempre como fondo, incluso con video: es el "poster"
   (lo que se ve mientras el video carga) y el respaldo si el navegador
   no puede reproducirlo. */
.portada__imagen {
  position: absolute; inset: 0; overflow: hidden;
  background-image: url("../imagenes/portada.jpg"),
                    linear-gradient(150deg, #3A251A 0%, #6D4833 55%, #BD8F68 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* El video, si existe imagenes/portada.mp4. Si no existe o el navegador
   no puede reproducirlo, este elemento no pinta nada y se ve la foto
   de fondo de aquí arriba, tal cual. */
.portada__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* El velo café. Son dos capas: el degradado de siempre, más un oscurecido
   parejo encima. Ese segundo es el que permite que el texto blanco se lea
   sobre video en movimiento, donde el ojo necesita más contraste que
   sobre una foto quieta.

   Se aplica SIEMPRE, con o sin video, y desde el CSS: si dependiera del
   JavaScript, en un navegador que no lo ejecute el video se reproduciría
   sin oscurecer y el título quedaría ilegible. Sobre foto fija el efecto
   es apenas un poco más oscuro, que tampoco estorba. */
.portada__imagen::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(40,25,16,0.88) 5%, rgba(40,25,16,0.42) 55%, rgba(40,25,16,0.28) 100%),
    rgba(28, 18, 12, 0.22);
}

/* Si el visitante pidió "menos movimiento" en su sistema, el video
   ni siquiera se reproduce: se queda quieto en la primera imagen. */
@media (prefers-reduced-motion: reduce) {
  .portada__video { display: none; }
}
/* Composición centrada: el logotipo manda y todo se acomoda debajo */
.portada__contenido {
  position: relative; color: #fff;
  max-width: 800px; margin: 0 auto; text-align: center;
}
.portada h1 { color: #fff; margin-bottom: 0.5em; }

/* El logotipo grande de la portada.
   Si todavía no existe imagenes/logo-blanco.png, no se ve nada y la
   portada sigue funcionando con el título. */
.portada__logo {
  width: clamp(160px, 21vw, 250px);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(22px, 3vw, 38px);
  background-image: url("../imagenes/logo-blanco.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.portada__antetitulo {
  text-transform: uppercase; letter-spacing: 0.26em;
  font-size: 0.68rem; font-weight: 500;
  color: var(--caramelo); margin-bottom: 1.4em;
}
.portada__texto {
  font-size: 1.02rem; color: rgba(255,255,255,0.86);
  max-width: 540px; margin-left: auto; margin-right: auto;
  font-weight: 300;
}
.portada__acciones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 36px;
}

/* ---------- Carrusel de fotos ---------- */
.carrusel {
  position: relative;
  height: clamp(400px, 62vh, 660px);
  overflow: hidden;
  background: var(--crema);
}
.carrusel__fotos { position: absolute; inset: 0; }
.carrusel__foto {
  position: absolute; inset: 0;
  opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 1.4s ease;
}
.carrusel__foto.activa { opacity: 1; }
/* Foto arriba, degradado decorativo debajo por si la foto aún no existe */
.carrusel__foto:nth-child(1) { background-image: url("../imagenes/carrusel-1.jpg"), linear-gradient(140deg, #4A3123, #8A6242); }
.carrusel__foto:nth-child(2) { background-image: url("../imagenes/carrusel-2.jpg"), linear-gradient(140deg, #6D4833, #BD8F68); }
.carrusel__foto:nth-child(3) { background-image: url("../imagenes/carrusel-3.jpg"), linear-gradient(140deg, #8A6242, #E0CDB6); }

/* El carrusel es una banda muy ancha (2.8:1) y las fotos son 3:2, así que
   se recorta casi la mitad del alto. Por defecto recorta desde el centro,
   pero en la primera el croissant y el vaso están en la parte baja del
   encuadre: si la dejáramos centrada se cortarían. Se baja el punto de
   recorte para que el platillo quede completo. */
.carrusel__foto:nth-child(1) { background-position: center 68%; }

.carrusel__controles {
  position: absolute; left: 0; right: 0; bottom: 24px;
  display: flex; justify-content: center; align-items: center; gap: 16px;
}
.carrusel__puntos { display: flex; align-items: center; gap: 10px; }
.punto {
  width: 34px; height: 2px; padding: 0;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color .3s ease;
}
.punto:hover { background: rgba(255, 255, 255, 0.75); }
.punto.activo { background: #fff; }

/* Botón de pausa: hace falta para que el carrusel sea accesible.
   Un carrusel que avanza solo debe poder detenerse sin usar el mouse. */
.carrusel__pausa {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color .25s ease;
}
.carrusel__pausa:hover { color: #fff; }
.carrusel__pausa svg { width: 100%; height: 100%; display: block; }
.carrusel__pausa .icono-play { display: none; }
.carrusel__pausa[aria-pressed="true"] .icono-pausa { display: none; }
.carrusel__pausa[aria-pressed="true"] .icono-play { display: block; }

/* ---------- Franja de horarios ---------- */
.franja { background: var(--cacao); color: var(--crema); }
.franja__interior {
  display: flex; flex-wrap: wrap; justify-content: space-around;
  gap: 20px 40px; padding: 30px 26px; text-align: center;
}
.franja__dato { display: flex; flex-direction: column; gap: 5px; }
.franja__dato strong {
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.64rem; color: var(--caramelo); font-weight: 500;
}
.franja__dato span { font-size: 0.94rem; font-weight: 300; }
.franja__dato a { color: var(--crema); }
.franja__dato a:hover { color: #fff; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(66px, 8.5vw, 116px) 0; }
.seccion--crema { background: var(--crema); }
.seccion--oscura { background: var(--cacao); color: var(--crema); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--oscura p { color: rgba(247, 243, 233, 0.80); font-weight: 300; }
.seccion--oscura .antetitulo { color: var(--caramelo); }

.titulo-seccion { max-width: 660px; margin: 0 auto clamp(42px, 5vw, 66px); text-align: center; }
.titulo-seccion__texto { color: var(--suave); font-weight: 300; }

/* ---------- Destacados ---------- */
.rejilla-3 {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  background: var(--borde);
  border: 1px solid var(--borde);
}
.tarjeta-destacado {
  background: var(--papel);
  padding: 44px 36px 40px;
}
.tarjeta-destacado__regla {
  display: block; width: 34px; height: 1px;
  background: var(--caramelo); margin-bottom: 26px;
}
.tarjeta-destacado p { color: var(--suave); margin: 0; font-size: 0.94rem; font-weight: 300; }

/* ---------- Carta: categorías ---------- */
.categorias {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.categoria {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px 32px 32px;
  transition: border-color .25s ease;
}
.categoria:hover { border-color: var(--caramelo); }
.categoria strong {
  display: block;
  font-family: var(--titulos);
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.9rem; font-weight: 500;
  margin-bottom: 14px;
}
.categoria span {
  display: block; color: var(--suave);
  font-size: 0.92rem; line-height: 1.7; font-weight: 300;
}

/* ---------- Banda del menú digital ---------- */
.banda { background: var(--cacao); color: var(--crema); text-align: center; }
.banda__interior { padding: clamp(66px, 8vw, 104px) 26px; }
.banda h2 { color: #fff; }
.banda .antetitulo { color: var(--caramelo); }
.banda p {
  color: rgba(247, 243, 233, 0.82); font-weight: 300;
  max-width: 520px; margin: 0 auto 34px;
}
.banda__nota { font-size: 0.82rem; color: rgba(247,243,233,0.6); margin: 20px 0 0; }

/* ---------- Galería: texto a la izquierda, fotos a la derecha ---------- */
.galeria-bloque {
  display: grid; gap: clamp(34px, 5vw, 70px);
  grid-template-columns: 0.85fr 1.4fr;
  align-items: center;
}
.galeria-bloque__texto { max-width: 400px; }
.galeria-bloque__parrafo { color: var(--suave); font-weight: 300; margin-bottom: 30px; }

/* Seis fotos en dos columnas por tres filas. Se eligió 2 columnas y no 3
   porque las fotos son horizontales (3:2) y en celdas de 1.56:1 casi no
   se recortan; con tres columnas quedarían casi cuadradas y se comerían
   los lados del plato. */
.galeria {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 220px;
}
.galeria__item { margin: 0; overflow: hidden; border-radius: var(--radio); }
.galeria__item > div {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  background-color: #EDE5D8;
  transition: transform .6s ease;
}
/* Cada foto con su rayado decorativo debajo, por si todavía no existe */
.galeria__item:nth-child(1) > div { background-image: url("../imagenes/galeria-1.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:nth-child(2) > div { background-image: url("../imagenes/galeria-2.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:nth-child(3) > div { background-image: url("../imagenes/galeria-3.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:nth-child(4) > div { background-image: url("../imagenes/galeria-4.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:nth-child(5) > div { background-image: url("../imagenes/galeria-5.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:nth-child(6) > div { background-image: url("../imagenes/galeria-6.jpg"), repeating-linear-gradient(45deg, #E6DACA 0 14px, #EFE7DA 14px 28px); }
.galeria__item:hover > div { transform: scale(1.05); }

/* ---------- Nosotros ---------- */
.nosotros {
  display: grid; gap: clamp(34px, 5vw, 70px);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.nosotros__imagen {
  min-height: 460px; border-radius: var(--radio);
  background-size: cover; background-position: center;
  background-image: url("../imagenes/nosotros.jpg"),
                    linear-gradient(150deg, #5A3B2A, #BD8F68);
  background-repeat: no-repeat;
}
.nosotros__texto .boton { margin-top: 16px; }

/* ---------- Visítanos ---------- */
.visitanos {
  display: grid; gap: 46px;
  grid-template-columns: 1fr 1.3fr; align-items: start;
}
.dato { margin-bottom: 32px; }
.dato h3 {
  font-size: 0.68rem; letter-spacing: 0.24em;
  color: var(--caramelo-2); margin-bottom: 10px;
}
.dato p { margin: 0; font-size: 0.98rem; font-weight: 300; line-height: 1.8; }
.dato p.dato__accion { margin-top: 14px; }
.dato p.dato__nota {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--suave);
  line-height: 1.7;
}
.dato a { color: var(--cacao); border-bottom: 1px solid var(--caramelo); }
.dato a:hover { color: var(--caramelo-2); text-decoration: none; }

.dato a.enlace-ruta {
  display: inline-block;
  text-transform: uppercase; letter-spacing: 0.17em;
  font-size: 0.68rem; font-weight: 500;
  padding-bottom: 4px;
}

.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.redes a {
  padding: 12px 26px; border-radius: var(--radio);
  border: 1px solid var(--borde); color: var(--cacao);
  text-transform: uppercase; letter-spacing: 0.17em;
  font-size: 0.68rem; font-weight: 500;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.redes a:hover { background: var(--cacao); border-color: var(--cacao); color: #fff; text-decoration: none; }

.visitanos__mapa {
  border-radius: var(--radio); overflow: hidden;
  background: var(--crema);
}
.visitanos__mapa iframe { width: 100%; height: 470px; border: 0; }

/* ---------- Pie ---------- */
.pie { background: var(--cacao); color: rgba(247, 243, 233, 0.75); padding: 74px 0 0; }
.pie__interior {
  display: grid; gap: 40px;
  grid-template-columns: 1.5fr 1fr 1fr;
  padding-bottom: 52px;
}
.marca--pie { color: var(--crema); }
.marca--pie:hover { color: #fff; }
.pie__nota { max-width: 340px; margin: 14px 0 0; font-size: 0.9rem; font-weight: 300; }
.pie h3 {
  font-size: 0.66rem; letter-spacing: 0.24em;
  color: var(--caramelo); margin-bottom: 18px;
}
.pie__enlaces { display: flex; flex-direction: column; gap: 12px; }
.pie__enlaces a {
  color: rgba(247, 243, 233, 0.75);
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.7rem; font-weight: 400;
}
.pie__enlaces a:hover { color: #fff; text-decoration: none; }
.pie__contacto { font-size: 0.9rem; font-weight: 300; line-height: 1.9; }
.pie__contacto a { color: rgba(247, 243, 233, 0.75); }
.pie__contacto a:hover { color: #fff; text-decoration: none; }
.pie__legal {
  border-top: 1px solid rgba(247, 243, 233, 0.16);
  padding-top: 26px; padding-bottom: 30px;
}
.pie__legal p {
  margin: 0; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(247, 243, 233, 0.5);
}

/* ---------- Aparición al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.revelar.visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1060px) {
  .navegacion { gap: 24px; }
  .marca__logo { width: 62px; height: 62px; }
  .galeria-bloque { grid-template-columns: 0.9fr 1.3fr; gap: 34px; }
  .galeria { grid-auto-rows: 200px; }
}

/* Debajo de 900px ya no caben lado a lado: el texto se va arriba */
@media (max-width: 900px) {
  .galeria-bloque { grid-template-columns: 1fr; }
  .galeria-bloque__texto { max-width: 620px; }
  .galeria { grid-auto-rows: 220px; }
}

@media (max-width: 1000px) {
  .nosotros, .visitanos { grid-template-columns: 1fr; }
  .nosotros__imagen { min-height: 320px; order: -1; }
  .pie__interior { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Menú de hamburguesa: la marca se va a la izquierda y el menú a la derecha.
     Los iconos de redes se quedan visibles, solo un poco más juntos. */
  .menu-boton { display: flex; }
  .social { gap: 14px; }

  .encabezado__interior { grid-template-columns: 1fr auto; min-height: 78px; }
  .encabezado.transparente .encabezado__interior { min-height: 78px; }
  .marca { justify-self: start; order: -1; }
  .encabezado__derecha { justify-self: end; }
  .marca__logo { width: 54px; height: 54px; }
  .marca__logo { width: 46px; height: 46px; }

  .navegacion {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 12px 30px rgba(109, 72, 51, 0.10);
    padding: 8px 26px 22px;
    display: none;
  }
  .navegacion.abierta { display: flex; }
  .navegacion a { padding: 16px 0; border-bottom: 1px solid var(--borde); }
  .navegacion a::after { display: none; }
  /* Aunque el encabezado esté transparente, el menú desplegado va sólido */
  .encabezado.transparente .navegacion a { color: var(--cacao); }

}

@media (max-width: 720px) {
  .portada { padding: 110px 0 64px; min-height: 82vh; }
  .portada__acciones .boton { flex: 1 1 auto; text-align: center; }

  .franja__interior { flex-direction: column; padding: 26px; }

  .carrusel { height: clamp(300px, 48vh, 420px); }
  .galeria { grid-auto-rows: 170px; gap: 10px; }

  .categoria { padding: 28px 24px; }
  .visitanos__mapa iframe { height: 330px; }
  .pie__interior { grid-template-columns: 1fr; gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .revelar { opacity: 1; transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .encabezado, .portada, .galeria, .carrusel, .visitanos__mapa, .pie, .banda { display: none; }
  body { background: #fff; }
  .categoria { break-inside: avoid; border: 0; }
}