/* =========================================================
   PUEBLO HUNDIO — style.css
   Vamos armando los estilos sección por sección.
   ========================================================= */

/* ---------------------------------------------------------
   VARIABLES GLOBALES
   Guardamos acá los colores y fuentes de la marca para
   reutilizarlos en todas las secciones sin repetir código.
   --------------------------------------------------------- */
:root {
  --color-crema: #F7F3EC;
  --color-terracota: #B5654B;
  --color-verde-bosque: #3E4A38; /* antes era un verde salvia más claro (#7A8B6F); este es más profundo/sofisticado */
  --color-carbon: #2B2620;
  --color-dorado: #C9A24B;
  /* Bronce, solo para el acento de "Servicios" (INCLUYE, íconos,
     botones outline) — distinto a propósito de --color-dorado de
     arriba (que es más brillante y se usa para las estrellas de
     reseñas). Con el rediseño editorial, el texto ya no va sobre el
     blanco casi puro de la tarjeta (esa tarjeta ya no existe) sino
     directo sobre el café-suave de la sección (#F3EDE5, más oscuro
     que el blanco anterior) — recalculado, este tono un poco más
     oscuro (#7D6234) da ~4.9:1 contra ese fondo, sigue pasando el
     mínimo de texto chico (4.5:1) que necesita "INCLUYE". */
  --color-bronce: #7D6234;

  /* Solo existe en peso 400 (ver comentario en el <head> de
     index.html) — todo lo que la use debe ir en font-weight: 400 */
  --fuente-titulos: 'Libre Caslon Display', serif;
  --fuente-texto: 'Lora', serif; /* antes era Work Sans (sans-serif); ahora es una serif, así que también cambia el fallback genérico */
  --fuente-script: 'Cormorant', serif; /* acento decorativo, uso puntual (ej. "Descubre" en Servicios) */
  --fuente-nav: 'Courier Prime', monospace; /* solo para los links del menú del header — solo tiene pesos 400/700, así que va en 400 */

  /* Alto del header fijo. Lo usamos en el CSS del header mismo,
     en el padding-top del Hero (para que no quede tapado) y en
     el scroll-padding-top de más abajo (para que los links del
     menú no dejen las secciones escondidas debajo del header) */
  --header-height: 76px;
}

/* ---------------------------------------------------------
   RESET BÁSICO
   Quitamos márgenes por defecto del navegador y unificamos
   el box-sizing para que los tamaños sean predecibles.
   --------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* El header queda fijo (position: fixed) y "flota" arriba de todo,
   así que le pedimos a la página que, al saltar a una sección con
   un link tipo #contacto, deje ese espacio de aire arriba — si no,
   el título de la sección quedaría escondido detrás del header.
   "scroll-behavior: smooth" además hace que ese salto sea animado
   en vez de instantáneo. */
html {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  color: var(--color-carbon);
  background-color: var(--color-crema);
}

/* ---------------------------------------------------------
   CONTENEDOR GENERAL
   Centra el contenido y le pone un ancho máximo, para que
   el texto no se estire de borde a borde en pantallas grandes.
   --------------------------------------------------------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Título de sección, reutilizable en varias secciones */
.section-title {
  font-family: var(--fuente-titulos);
  /* Libre Caslon Display solo tiene peso 400 — un poco más de
     tamaño compensa el peso visual que se pierde al no tener 600 */
  font-weight: 400;
  color: var(--color-carbon);
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
}

/* Oculta contenido visualmente pero lo deja disponible para
   lectores de pantalla (accesibilidad) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   BOTÓN GENERAL
   Lo dejamos como clase reutilizable (.btn) porque vamos a
   necesitar botones parecidos en otras secciones.
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  background-color: var(--color-terracota);
  color: #FFFFFF;
  font-family: var(--fuente-texto);
  font-weight: 600;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  background-color: #9c4f39; /* terracota un poco más oscuro */
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   HEADER / NAVBAR (fijo arriba de todo el sitio)
   --------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 500; /* por debajo del lightbox (1000), por encima de todo lo demás */

  /* Blanco (no el crema de las secciones) para que el fondo blanco
     propio del logo se funda con el header, sin un borde visible */
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(43, 38, 32, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo-link {
  display: flex;
  align-items: center;
}

.header__logo {
  display: block;
  height: 58px; /* el logo tiene harto detalle (ícono + texto), necesita este tamaño para leerse bien */
  width: auto;
  object-fit: contain;
}

/* ---- Navegación: en celular es un menú desplegable oculto,
   en desktop pasa a ser una fila de links (ver media query) ---- */
.header__nav {
  display: none; /* oculto hasta que main.js le agregue .is-open */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  flex-direction: column;
  background-color: #FFFFFF;
  box-shadow: 0 16px 24px rgba(43, 38, 32, 0.12);
  padding: 0.5rem 1.5rem 1rem;
}

.header__nav.is-open {
  display: flex;
}

.header__link {
  display: block;
  /* Courier Prime (monoespaciada, aire "máquina de escribir"), solo
     acá — el resto del sitio usa --fuente-texto (Lora). Courier
     Prime solo tiene pesos 400/700, por eso el 400 en vez del 500
     que usábamos antes */
  font-family: var(--fuente-nav);
  font-weight: 400;
  font-size: 0.85rem;
  /* mayúsculas + letras separadas: mismo tratamiento "editorial"
     que ya usamos en las etiquetas chicas del sitio (SOBRE NOSOTROS,
     INCLUYE, etc.) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-carbon);
  text-decoration: none;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid rgba(43, 38, 32, 0.08);
}

.header__link:last-child {
  border-bottom: none;
}

.header__link:hover,
.header__link:focus-visible {
  color: var(--color-terracota);
}

/* ---- WhatsApp (siempre visible) + botón hamburguesa ---- */
.header__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* En celular es un ícono circular, chico, para no competir en
   espacio con el logo y el menú hamburguesa */
.header__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Verde bosque (no terracota, como el resto de los botones de
     WhatsApp del sitio) — combina mejor con los tonos de la foto
     nueva del Hero. Ojo: esto es SOLO para este botón del header;
     "Cotizar por WhatsApp" en Servicios y "Escríbenos por WhatsApp"
     en Contacto siguen en terracota. El blanco del texto/ícono da
     ~9.4:1 de contraste contra este verde (de sobra por sobre el
     mínimo de 4.5:1), así que se mantiene sin cambios. */
  background-color: var(--color-verde-bosque);
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.header__whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.header__whatsapp-texto {
  display: none; /* en celular no mostramos el texto, solo el ícono */
}

.header__whatsapp:hover {
  background-color: #323B2D; /* verde bosque, un poco más oscuro */
}

.header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--color-carbon);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.header__toggle:hover {
  color: var(--color-terracota);
}

/* ---------------------------------------------------------
   RESPONSIVE: header (desktop)
   --------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-height: 100px;
  }

  .header__logo {
    height: 78px;
  }

  /* En desktop el menú deja de ser un desplegable: vuelve a ser
     parte del flujo normal, en fila, y siempre visible */
  .header__nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 1.75rem;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .header__link {
    padding: 0.4rem 0;
    border-bottom: none;
    font-size: 0.8rem;
  }

  /* En desktop el botón de WhatsApp vuelve a ser una píldora con texto,
     igual que los demás botones del sitio, en vez de un ícono redondo */
  .header__whatsapp {
    width: auto;
    height: auto;
    border-radius: 4px;
    padding: 0.6rem 1.1rem;
  }

  .header__whatsapp-texto {
    display: inline;
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.9rem;
  }

  .header__toggle {
    display: none; /* en desktop no hace falta el botón hamburguesa */
  }
}

/* ---------------------------------------------------------
   SECCIÓN 1: INICIO / HERO
   --------------------------------------------------------- */
.hero {
  position: relative; /* punto de referencia para el overlay y el contenido */
  height: 100vh;
  width: 100%;

  /* padding-top para que el header fijo no tape el título/botón;
     como el reset del principio pone box-sizing: border-box en
     todo, este padding queda DENTRO de los 100vh (no los estira) */
  padding-top: var(--header-height);
  box-sizing: border-box;

  /* Foto real de la fachada: piscina, quinchos blancos, árboles y
     cerro. Ojo con la ruta: como este archivo (style.css) vive
     dentro de css/, para llegar a la carpeta assets/ hay que
     "salir" un nivel primero con ../ */
  background-image: url('../assets/images/fotos-2026/hero-fachada.jpg');
  background-size: cover;

  /* Esta foto es casi cuadrada (1281x1086), así que se recorta
     distinto según la pantalla:
     - En desktop (pantalla más ancha que la foto) el recorte es
       arriba/abajo: el 20% vertical sube el encuadre para mostrar
       árboles, quinchos y cerro, dejando abajo el agua de la piscina
       con la franja de cemento casi fuera de cuadro.
     - En celular (pantalla vertical) el recorte es a los costados:
       el 85% horizontal corre la foto hacia la derecha, donde está
       el agua, dejando solo un poco del cemento de la izquierda. */
  background-position: 85% 20%;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Capa oscura semi-transparente ("vidrio ahumado") entre la
   foto de fondo y el texto, para que el texto blanco se lea bien */
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 0.55 en vez de 0.5: la foto tiene zonas muy claras (cielo
     celeste, quinchos blancos y agua turquesa) detrás del texto
     centrado. Con 0.55 el texto blanco se lee bien tanto en
     desktop como en celular (se recortan distinto). */
  background-color: rgba(0, 0, 0, 0.55);
}

/* El contenido va POR ENCIMA del overlay gracias a z-index */
.hero__content {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  padding: 0 1.5rem;
  max-width: 40rem;
}

/* Composición del Hero, de mayor a menor protagonismo:
   1. Título (Libre Caslon Display, grande) — la marca
   2. Frase (Lora, semi-bold) — el mensaje emotivo
   3. Subtítulo (Lora, liviano + opacity) — el dato informativo
   Los 3 comparten el mismo color base (crema), así que la jerarquía
   la marca el tamaño, el peso y el espaciado, no el color. */
.hero__title {
  font-family: var(--fuente-titulos);
  /* Libre Caslon Display solo tiene peso 400; subimos el tamaño
     (acá y en el media query de desktop) para que el título no
     pierda presencia al perder el peso 600 que tenía Fraunces */
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

/* Frase emotiva: en texto normal (no itálica — esa diferenciación
   ya no hace falta sin el "Bienvenidos" script arriba), pero con
   peso semi-bold para que siga destacando por sobre el subtítulo */
.hero__frase {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-crema);
  margin-bottom: 1.5rem;
}

/* Subtítulo: el más discreto de los 3 — chico, peso liviano y
   con opacity reducida, para que se lea como un dato de contexto
   y no compita con la frase de arriba */
.hero__subtitle {
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-crema);
  opacity: 0.8;
  margin-bottom: 2.25rem;
}

/* Botón "Cotiza tu evento": versión con borde en vez de relleno,
   solo para el botón que está dentro del Hero. Usamos el selector
   ".hero__content .btn" (en vez de tocar el HTML) para no afectar
   los otros botones que también usan la clase .btn en el resto del
   sitio (los 3 de "Cotizar por WhatsApp" en Servicios) — como este
   selector es más específico que ".btn" solo, gana en la cascada
   y sobrescribe justo lo que necesitamos acá. */
.hero__content .btn {
  background-color: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hero__content .btn:hover {
  background-color: #FFFFFF;
  color: var(--color-carbon);
}

/* ---------------------------------------------------------
   RESPONSIVE: pantallas más grandes (tablet/desktop)
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__title {
    font-size: 4.8rem;
  }

  .hero__frase {
    font-size: 1.5rem;
  }

  .hero__subtitle {
    font-size: 1.1rem;
  }
}

/* ---------------------------------------------------------
   SECCIÓN 2: SOBRE NOSOTROS / HISTORIA
   --------------------------------------------------------- */
.sobre {
  /* Mismo marfil pálido que usa "Gastronomía" — como esta sección
     no es vecina de esa (Galería queda entre las dos), no hay riesgo
     de que se peguen entre sí. Sigue distinguiéndose bien de Galería
     (--color-crema, más gris-blanco) arriba y de Contacto (blanco)
     abajo. */
  background-color: #F7EEDF;
  padding: 4rem 0;
}

/* ---- Bloque editorial: foto + texto, apilado en celular ---- */
.sobre__editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

/* Foto única de la sección (letrero de mosaico de la entrada).
   Marco casi cuadrado (633x660), con esquinas redondeadas y
   sombra suave. La foto es 4:3, así que en este marco se recortan los costados;
   el letrero está algo cargado a la izquierda (ocupa del 12% al
   75% del ancho), y con el centro exacto se le cortaba el borde
   izquierdo: anclar al 38% lo deja entero */
.sobre__foto {
  display: block;
  width: 100%;
  aspect-ratio: 633 / 660;
  object-fit: cover;
  object-position: 38% 50%;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(43, 38, 32, 0.18);
}

.sobre__etiqueta {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracota);
  margin-bottom: 0.75rem;
}

.sobre__texto {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-carbon);
}

/* ---- Cifras destacadas: ancho completo, ahora como tarjeta blanca
   flotante (misma sombra que .nota-especial), para que se sienta
   parte de la misma familia visual dentro de la sección */
.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* celular: 2 columnas x 2 filas */
  gap: 2rem 0;
  background-color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(43, 38, 32, 0.1);
  border-radius: 4px;
  padding: 2rem 1.5rem;
}

.cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.75rem;
  border-left: 1px solid rgba(43, 38, 32, 0.15);
}

/* En la grilla de 2 columnas, la columna izquierda (items 1 y 3)
   no lleva línea divisoria a su izquierda */
.cifra:nth-child(odd) {
  border-left: none;
}

/* Ícono: mismo tamaño y color para las 4, así todas parten
   con el mismo peso visual arriba */
.cifra__icono {
  width: 28px;
  height: 28px;
  color: var(--color-verde-bosque);
  margin-bottom: 0.6rem;
}

.cifra__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Primera línea: puede ser un número (200, 2) o una palabra
   ("Amplias", "Empresas y") — mismo tamaño de fuente para las 4,
   así todas ocupan el mismo espacio arriba del texto secundario */
.cifra__num {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  color: var(--color-terracota);
  line-height: 1.15;
  margin-bottom: 0.3rem;
}

.cifra__texto {
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  color: var(--color-carbon);
}

/* Nota especial: "¿Por qué se llama Pueblo Hundio?"
   Se ve claramente distinta del bloque de historia: tarjeta blanca
   con borde izquierdo verde bosque, comilla grande y ondas de río
   en el mismo verde, y el texto en cursiva, como una
   pausa/curiosidad dentro de la página.
   Contraste sobre el blanco: texto carbón ~15:1, verde de la
   comilla y las ondas ~9.4:1. */
.nota-especial {
  position: relative;
  max-width: 700px;
  margin: 3.5rem auto 0;
  background-color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(43, 38, 32, 0.1);
  border-left: 5px solid var(--color-verde-bosque);
  border-radius: 4px;
  padding: 2rem 1.75rem 2rem 3rem;
}

/* Comilla grande decorativa, arriba a la izquierda */
.nota-especial::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  left: 0.6rem;
  font-family: var(--fuente-titulos);
  font-size: 6.5rem;
  color: var(--color-verde-bosque);
  line-height: 1;
}

/* Título + ondas en una fila; si el título ocupa 2 líneas (en
   celular), las ondas quedan centradas a su lado */
.nota-especial__encabezado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.nota-especial__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.4rem;
  color: var(--color-carbon);
}

.nota-especial__ondas {
  flex-shrink: 0;
  width: 40px;
  height: 17px;
  color: var(--color-verde-bosque);
}

.nota-especial__texto {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-carbon);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   RESPONSIVE: sección "Sobre nosotros"
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .sobre {
    padding: 6rem 0;
  }

  .section-title {
    font-size: 2.75rem;
  }

  /* Foto a la izquierda, texto a la derecha */
  .sobre__editorial {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Cifras: pasan de 2x2 a una sola fila de 4, con línea
     divisoria entre cada una (menos antes de la primera) */
  .cifras {
    grid-template-columns: repeat(4, 1fr);
    padding: 2.5rem 2rem;
  }

  .cifra:nth-child(n + 2) {
    border-left: 1px solid rgba(43, 38, 32, 0.15);
  }

  .cifra__icono {
    width: 32px;
    height: 32px;
    margin-bottom: 0.75rem;
  }

  .cifra__num {
    font-size: 2.1rem;
  }
}

/* ---------------------------------------------------------
   SECCIÓN 3: SERVICIOS
   --------------------------------------------------------- */
.servicios {
  background-color: #FFFFFF;
  padding: 4rem 0;
}

/* Acento script, mismo tratamiento que "Bienvenidos" tenía en el
   Hero (Cormorant italic), pero en terracota en vez de crema —
   acá el fondo es claro, no una foto oscura */
.servicios__acento {
  font-family: var(--fuente-script);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-terracota);
  margin-bottom: 0.5rem;
}

.servicios__subtitulo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--color-verde-bosque);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

/* Lista de bloques editoriales, apilados verticalmente. El gap
   grande es a propósito: ahora cada bloque ocupa el ancho completo
   de la sección, así que necesitan "respirar" entre ellos — antes,
   con tarjetas chicas en fila, alcanzaba con mucho menos aire */
.servicios__lista {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Cada bloque es foto + cuerpo de texto. En celular: 1 columna,
   la foto siempre arriba y el texto abajo — los 3 bloques iguales,
   sin alternar. El alternado izquierda/derecha es un efecto que
   solo se activa en desktop (ver media query más abajo). */
.servicio-bloque {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}

.servicio-bloque__foto {
  display: block;
  width: 100%;
  /* aspect-ratio en vez de un alto fijo en px: como ahora la foto
     ocupa medio ancho de la sección (bastante más que la tarjeta
     chica de antes) y ese ancho cambia según la pantalla, un alto
     fijo se vería desproporcionado — así escala con el ancho real */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(43, 38, 32, 0.1);
  /* Filtro cálido/sepia sutil, para que las 3 fotos de esta sección
     se sientan parte de una misma paleta y no como 3 fotos sueltas
     con su propio balance de color original */
  filter: sepia(0.15) saturate(1.08);
}

/* "Programa Completo": la foto actual (salón con gente almorzando)
   es 4:3, igual que la caja, así que entra completa y este ancla no
   tiene efecto hoy; se deja por si se cambia por una foto de otra
   proporción (55% prioriza la gente por sobre el techo) */
.servicio-bloque__foto--programa {
  object-position: 50% 55%;
}

/* "Arriendo": la foto actual (salón decorado para matrimonio) es
   4:3, igual que la caja, así que entra completa; el centro es el
   valor por defecto */
.servicio-bloque__foto--arriendo {
  object-position: 50% 50%;
}

/* "Solo Piscinas": la foto es VERTICAL (1086x1448) y la caja es
   horizontal (4:3), así que se recorta arriba y abajo. Ancla al
   70%: deja la baranda, los quinchos, el cerro y la piscina, y
   sacrifica sobre todo cielo (y algo del cemento de abajo) */
.servicio-bloque__foto--piscinas {
  object-position: 50% 70%;
}

/* Mismo tratamiento que los íconos de "Sobre Nosotros" (.cifra__icono):
   trazo fino, sin relleno, en el bronce de acento de esta sección */
.servicio-bloque__icono {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--color-bronce);
  margin-bottom: 1rem;
}

.servicio-bloque__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

.servicio-bloque__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.6rem;
  color: var(--color-carbon);
  margin-bottom: 0.75rem;
}

.servicio-bloque__desc {
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-carbon);
  margin-bottom: 1.5rem;
}

.servicio-bloque__incluye-label {
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bronce);
  margin-bottom: 0.75rem;
}

.servicio-bloque__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.servicio-bloque__lista li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-carbon);
}

/* Bullet propio (puntito bronce) en vez del bullet por defecto */
.servicio-bloque__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-bronce);
}

/* Versión outline del botón (fondo transparente, borde bronce).
   En celular ocupa el ancho completo (patrón típico móvil); desde
   los 640px ya hay espacio de sobra en la columna de texto, así que
   pasa a ajustarse a su propio contenido en vez de estirarse entero
   — se ve más "editorial" y menos "formulario" */
.servicio-bloque__btn {
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
  background-color: transparent;
  border: 2px solid var(--color-bronce);
  color: var(--color-bronce);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.servicio-bloque__btn:hover {
  background-color: var(--color-bronce);
  color: #FFFFFF;
}

/* ---------------------------------------------------------
   RESPONSIVE: sección "Servicios"
   --------------------------------------------------------- */
@media (min-width: 640px) {
  .servicio-bloque__btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .servicios {
    padding: 6rem 0;
  }

  .servicios__lista {
    gap: 6rem;
  }

  .servicio-bloque {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Bloque 2 ("Arriendo"): foto a la derecha, texto a la izquierda.
     Usamos "order" para invertir el orden VISUAL, en vez de cambiar
     el orden en el HTML — así el orden de lectura/teclado (foto
     primero, texto después) se mantiene igual en los 3 bloques,
     solo cambia lo que se ve en pantalla */
  .servicio-bloque--invertido .servicio-bloque__foto {
    order: 2;
  }

  .servicio-bloque--invertido .servicio-bloque__body {
    order: 1;
  }
}

/* ---------------------------------------------------------
   NUESTRA GASTRONOMÍA (entre Servicios y Galería)
   --------------------------------------------------------- */
.gastronomia {
  /* Marfil muy pálido y suave. "Sobre Nosotros" usa este mismo tono
     a propósito (no son vecinas, Galería queda entre las dos, así
     que no hay riesgo de que se peguen). Ojo con los vecinos reales
     de ESTA sección: "Servicios" (#F3EDE5) y "Galería" (--color-crema,
     #F7F3EC) son también tonos muy pálidos — este valor está elegido
     a propósito un poco por debajo de ambos en el canal azul, para
     que la diferencia siga siendo perceptible en vez de fundirse
     con cualquiera de los dos. */
  background-color: #F7EEDF;
  padding: 4rem 0;
}

/* Frase de apertura con peso emocional: itálica + terracota (el
   mismo acento de color que ya usamos en otras partes del sitio
   para este tipo de frase) — antes convivía con un subtítulo aparte
   arriba ("El sabor de Pueblo Hundio"), pero se fusionaron en una
   sola frase, así que esta es ahora el único texto de apertura de
   la sección. Más grande que el texto de cuerpo normal, pero
   claramente más chica que el título — no debe competir con
   "Nuestra Gastronomía". max-width para que no se estire de punta
   a punta en desktop, que se leería raro en una frase tan corta. */
.gastronomia__frase {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-terracota);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

/* ---- Plato destacado: la especialidad de la casa ---- */
.gastronomia__destacado {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  margin-bottom: 3rem;
}

.gastronomia__destacado-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* La foto actual (un plato de costillar) es 4:3, igual que la
     caja, así que entra completa y este ancla no tiene efecto hoy;
     se deja por si se cambia por una foto vertical (100% prioriza
     la parte de abajo, donde suele estar el plato) */
  object-position: 50% 100%;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(43, 38, 32, 0.15);
}

.gastronomia__etiqueta {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracota);
  margin-bottom: 0.75rem;
}

.gastronomia__destacado-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.9rem;
  color: var(--color-carbon);
  margin-bottom: 0.75rem;
}

.gastronomia__destacado-desc {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-carbon);
  max-width: 32rem;
}

/* ---- Grilla de otros platos ---- */
/* Con 10 fotos (2 filas: 5 + 5) la grilla queda pareja, pero si se
   agregan o quitan fotos, un CSS Grid tradicional dejaría un
   hueco vacío a la derecha de la segunda fila. Usamos flexbox con
   wrap + justify-content: center en su lugar: cuando la última fila
   no se llena, sus fotos se centran como grupo en vez de quedar
   pegadas a la izquierda con espacio vacío al lado — se ve mucho
   más prolijo con una cantidad de fotos que no es múltiplo exacto
   de las columnas. */
.gastronomia__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* <figure> trae margen propio por defecto en el navegador; lo sacamos.
   flex-basis calcula el ancho de 2 columnas en celular (restando el
   gap), así cada foto ocupa la mitad del ancho disponible */
.gastronomia__item {
  margin: 0;
  flex: 0 1 calc(50% - 0.5rem);
}

.gastronomia__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* Consomé, ensalada y pollo: fotos horizontales (4:3) donde el
   plato está algo cargado a la derecha; corremos el recorte cuadrado
   (60% en vez de 50%) para que el plato quede centrado */
.gastronomia__foto--consome,
.gastronomia__foto--ensalada,
.gastronomia__foto--pollo {
  object-position: 60% 50%;
}

/* Foto de "Vinos de la Zona": es VERTICAL (1086x1448), así que el
   recorte cuadrado es arriba/abajo, y la botella es más alta que lo
   que entra. Ancla al 30% para que la etiqueta quede completa,
   sacrificando solo la punta de la tapa */
.gastronomia__foto--vino {
  object-position: 50% 30%;
}

/* Zoom para consomé, ensalada y pebre: el plato queda más chico que
   en el resto de la grilla. Agrandamos la foto con
   transform: scale() y este contenedor recorta lo que sobra
   (overflow: hidden), con las mismas esquinas que el resto de las
   fotos de la grilla, para que el plato llene el cuadro como en
   "Corte de res a las verduras" o "Pollo asado" */
.gastronomia__zoom {
  overflow: hidden;
  border-radius: 4px;
}

.gastronomia__zoom img {
  transform-origin: center;
}

/* El plato no está justo al centro de su foto, así que además del
   scale() usamos un translate() para llevar su centro al centro del
   cuadro. Cuenta: si el plato está en C% del cuadro, el translate es
   -scale × (C - 50)%. Ojo con el orden: el translate va ANTES del
   scale para que sus % no se multipliquen por el zoom */

/* Consomé: taza + platillo centrados en ~50% / 57%; el platillo
   ocupa ~77% del ancho sin zoom y ~94% con 1.22 */
.gastronomia__zoom--consome {
  transform: translate(0.4%, -8.5%) scale(1.22);
}

/* Ensalada: plato centrado en ~50% / 51%; ocupa ~85% del ancho sin
   zoom y ~94% con 1.08 */
.gastronomia__zoom--ensalada {
  transform: translate(0%, -1.4%) scale(1.08);
}

/* Pebre (foto del tazón de greda): tazón centrado en ~46% / 47%,
   ocupa ~68% del ancho sin zoom; con 1.27 queda en ~85%, parejo con
   el resto de los platos. El mango de la cuchara queda
   parcialmente fuera del cuadro, a propósito */
.gastronomia__zoom--pebre {
  transform: translate(4.6%, 2.5%) scale(1.27);
}

/* Algunas etiquetas ocupan 2 líneas ("Tortilla de verduras (opción
   vegetariana)"): reservamos el alto de 2 líneas en TODAS para que
   las fotos de una misma fila no queden desalineadas */
.gastronomia__item figcaption {
  margin-top: 0.5rem;
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 2.8em;
  color: var(--color-carbon);
  text-align: center;
}

/* ---------------------------------------------------------
   RESPONSIVE: sección "Nuestra Gastronomía"
   --------------------------------------------------------- */
@media (min-width: 600px) {
  .gastronomia__item {
    /* 5 columnas: ancho de cada foto = 1/5 del disponible, descontando
       los 4 gaps de 1rem entre columnas (4rem / 5 = 0.8rem) */
    flex-basis: calc(20% - 0.8rem);
  }
}

@media (min-width: 768px) {
  .gastronomia {
    padding: 6rem 0;
  }

  .gastronomia__frase {
    font-size: 1.5rem;
  }

  .gastronomia__destacado {
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
  }
}

/* ---------------------------------------------------------
   SECCIÓN 4: GALERÍA
   --------------------------------------------------------- */
.galeria {
  background-color: #FFFFFF;
  padding: 4rem 0;
}

.galeria__subtitulo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--color-verde-bosque);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

/* Grilla de fotos: 2 columnas en celular. Flexbox con wrap +
   justify-content: center (igual que en Gastronomía) en vez de
   CSS Grid, para que si la última fila queda incompleta sus fotos
   se centren en vez de quedar pegadas a la izquierda */
.galeria__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Cada foto es un <button>; "all: unset" le quita el estilo
   por defecto del navegador (fondo gris, borde, etc.) para que
   se vea como un simple contenedor de imagen */
.galeria__item {
  all: unset;
  position: relative;
  display: block;
  /* 2 columnas: mitad del ancho, descontando medio gap */
  flex: 0 0 calc(50% - 0.375rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

/* El "all: unset" + "display: block" de arriba le gana al atributo
   hidden del navegador, así que hay que volver a ocultarlas a mano */
.galeria__item[hidden] {
  display: none;
}

/* Aparición suave de las fotos 9 a 22 al tocar "Ver más fotos" */
.galeria__item--aparece {
  animation: galeria-aparece 0.45s ease both;
}

@keyframes galeria-aparece {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__item--aparece {
    animation: none;
  }
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Encuadre por foto, solo donde el centro por defecto corta lo
   principal. Las dos panorámicas (16:9) pierden casi la mitad del
   ancho en el cuadrado:
   - Vista aérea: el recinto (piscinas y salón) está a la derecha
     del camino; a la izquierda solo hay viñedo
   - Desayuno: la mesa larga en perspectiva está cargada a la
     izquierda; a la derecha quedan las otras mesas
   - Evento matrimonio (4:3): el corazón de luces está a la
     izquierda */
.galeria__foto--aerea {
  object-position: 62% 50%;
}

.galeria__foto--desayuno {
  object-position: 30% 50%;
}

.galeria__foto--celebracion {
  object-position: 25% 50%;
}

/* Capa oscura + ícono de lupa, ocultos por defecto */
.galeria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(43, 38, 32, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.galeria__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 34px;
  height: 34px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.galeria__zoom svg {
  width: 100%;
  height: 100%;
}

/* Etiqueta con el título de la foto: a diferencia del oscurecimiento y la lupa
   (que solo aparecen al hacer hover), esta va SIEMPRE visible —
   es información, no una micro-interacción. El degradado (de
   transparente a oscuro) es lo que garantiza que el texto blanco
   se lea bien sin importar qué tan clara sea la foto de fondo,
   sin necesidad de una franja sólida que se vea como un "sticker". */
.galeria__etiqueta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.5rem 0.6rem;
  background: linear-gradient(to top, rgba(43, 38, 32, 0.75), rgba(43, 38, 32, 0));
  color: #FFFFFF;
  font-family: var(--fuente-texto);
  /* Títulos descriptivos (no categorías de una palabra): van tal
     cual se escriben, sin mayúsculas forzadas, y pueden ocupar
     hasta 2 líneas */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Botón "Ver más fotos" / "Ver menos": mismo outline bronce que
   los botones de Servicios (.servicio-bloque__btn). Como es un
   <button> y no un <a>, hay que resetear el borde y la tipografía
   que trae el navegador */
.galeria__mas {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.galeria__ver-mas {
  background-color: transparent;
  border: 2px solid var(--color-bronce);
  color: var(--color-bronce);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.galeria__ver-mas:hover {
  background-color: var(--color-bronce);
  color: #FFFFFF;
}

.galeria__ver-mas:focus-visible {
  outline: 2px solid var(--color-terracota);
  outline-offset: 2px;
}

/* El hover (oscurecimiento + lupa + zoom leve de la foto) solo
   se activa en pantallas que realmente tienen mouse — en celular
   (hover: none) esto no aplica, así evitamos que quede "pegado"
   después de tocar la foto */
@media (hover: hover) {
  .galeria__item:hover::after,
  .galeria__item:focus-visible::after {
    opacity: 1;
  }

  .galeria__item:hover .galeria__zoom,
  .galeria__item:focus-visible .galeria__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .galeria__item:hover img,
  .galeria__item:focus-visible img {
    transform: scale(1.06);
  }
}

.galeria__item:focus-visible {
  outline: 2px solid var(--color-terracota);
  outline-offset: 2px;
}

/* ---- Lightbox ---- */
.lightbox {
  display: none; /* main.js le agrega/quita la clase .is-open */
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 1.5rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox__cerrar,
.lightbox__flecha {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lightbox__cerrar svg,
.lightbox__flecha svg {
  width: 20px;
  height: 20px;
}

.lightbox__cerrar:hover,
.lightbox__flecha:hover {
  background-color: rgba(255, 255, 255, 0.22);
}

.lightbox__cerrar {
  top: 1.25rem;
  right: 1.25rem;
}

.lightbox__flecha {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__flecha--prev {
  left: 0.75rem;
}

.lightbox__flecha--next {
  right: 0.75rem;
}

.lightbox__cerrar:focus-visible,
.lightbox__flecha:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   RESPONSIVE: sección "Galería"
   --------------------------------------------------------- */
@media (min-width: 600px) {
  /* 3 columnas en tablet: 2 gaps de 0.75rem repartidos en 3 */
  .galeria__item {
    flex-basis: calc(33.333% - 0.5rem);
  }
}

@media (min-width: 1024px) {
  .galeria {
    padding: 6rem 0;
  }

  .galeria__grid {
    gap: 1.25rem;
  }

  /* 4 columnas: 3 gaps de 1.25rem repartidos en 4 */
  .galeria__item {
    flex-basis: calc(25% - 0.9375rem);
  }

  .galeria__etiqueta {
    font-size: 0.8rem;
    padding: 2rem 0.75rem 0.85rem;
  }

  .galeria__mas {
    margin-top: 2.5rem;
  }

  .lightbox__flecha--prev {
    left: 1.5rem;
  }

  .lightbox__flecha--next {
    right: 1.5rem;
  }
}

/* ---------------------------------------------------------
   SECCIÓN 5: CONTACTO
   --------------------------------------------------------- */
.contacto {
  background-color: #FFFFFF;
  padding: 4rem 0;
}

.contacto__subtitulo {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--color-verde-bosque);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

/* 2 columnas en desktop, apiladas en celular */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

/* ---- Columna del mapa ---- */
/* relative: para poder poner el botón "Abrir en Google Maps" encima
   de la imagen, abajo y centrado */
.contacto__mapa-wrapper {
  position: relative;
  border-radius: 6px;
  overflow: hidden; /* recorta la imagen para que respete el border-radius */
  box-shadow: 0 8px 22px rgba(43, 38, 32, 0.1);
}

/* Imagen del mapa: mismo alto fijo que tenía el iframe (350px).
   La foto es panorámica (1747x900) y el pin de Pueblo Hundio está a
   la derecha (~70% del ancho), así que el ancla al 85% lo deja
   siempre a la vista, con su nombre, también en celular, donde se
   recortan bastante los costados */
.contacto__mapa {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: 85% 50%;
}

/* Botón sobre la imagen: centrado con left/right 0 + margin auto
   (en vez de translateX(-50%)), porque el hover de .btn ya usa
   transform para levantarlo y se pisarían */
.contacto__mapa-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  width: max-content;
  margin: 0 auto;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.contacto__direccion {
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-carbon);
  margin-top: 1.25rem;
}

.contacto__link-mapa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-terracota);
  text-decoration: none;
}

.contacto__link-mapa svg {
  width: 15px;
  height: 15px;
}

.contacto__link-mapa:hover {
  text-decoration: underline;
}

/* ---- Columna de frase + WhatsApp + redes ---- */
/* En celular la columna mide justo lo que su contenido necesita,
   así que el space-between no separa nada: la distancia entre la
   frase y el botón la da el margin-top de .contacto__acciones-final.
   En desktop todo va alineado arriba (ver media query más abajo). */
.contacto__col--acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* Frase de acento, mismo tratamiento que .gastronomia__frase
   (itálica + terracota) para que se sienta parte de la misma
   familia visual de frases destacadas del sitio */
.contacto__frase {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-terracota);
}

/* Ícono decorativo al final de la frase — mismo estilo de línea
   fina que el sol, la llave, las olas y la hoja del resto del sitio.
   Tamaño en "em" (no px) para que escale junto con el font-size de
   la frase (1.2rem en celular, 1.5rem en desktop); hereda el color
   terracota de .contacto__frase, no hace falta repetirlo. */
.contacto__frase-icono {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-left: 0.3em;
}

.contacto__frase-icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contacto__acciones-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Separación entre la frase y el botón de WhatsApp (40px) */
  margin-top: 2.5rem;
}

/* Botón de WhatsApp: el más destacado de la sección */
.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background-color: var(--color-terracota);
  color: #FFFFFF;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1.15rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(181, 101, 75, 0.3);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-whatsapp svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.btn-whatsapp:hover {
  background-color: #9c4f39;
  transform: translateY(-2px);
}

/* Ahora apiladas (ícono + texto en cada fila), no círculos sueltos
   en línea como antes */
.contacto__redes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  margin-top: 1.5rem;
}

/* El link completo (ícono + texto), no solo el círculo */
.contacto__red {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-carbon);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contacto__red:hover {
  color: var(--color-terracota);
}

/* Solo el círculo del ícono (antes esto era el link completo) */
.contacto__red-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(43, 38, 32, 0.15);
  color: var(--color-carbon);
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contacto__red-icono svg {
  width: 21px;
  height: 21px;
}

.contacto__red:hover .contacto__red-icono {
  background-color: var(--color-terracota);
  border-color: var(--color-terracota);
  color: #FFFFFF;
}

/* ---- Reseñas ---- */
.resenas__resumen {
  text-align: center;
  margin-bottom: 2rem;
}

.resenas__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.5rem;
  color: var(--color-carbon);
  margin-bottom: 0.5rem;
}

.resenas__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.resenas__rating-num {
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-carbon);
}

/* La estrella dorada: es el único lugar del sitio donde usamos
   el color dorado que definimos en las variables, para destacar
   la calificación */
.resenas__estrella-icono {
  color: var(--color-dorado);
  font-size: 1.1rem;
  line-height: 1;
}

.resenas__rating-texto {
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  color: rgba(43, 38, 32, 0.65);
}

.resenas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.resena-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-crema);
  border-radius: 6px;
  padding: 1.5rem;
}

.resena-card__estrellas {
  color: var(--color-dorado);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.resena-card__texto {
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-carbon);
  margin-bottom: 1rem;
  flex-grow: 1; /* empuja el nombre hacia el fondo de la tarjeta, igual que en Servicios */
}

.resena-card__nombre {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 0.95rem;
  color: var(--color-carbon);
}

/* ---------------------------------------------------------
   RESPONSIVE: sección "Contacto"
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .contacto {
    padding: 6rem 0;
  }

  /* Las 2 columnas alineadas arriba: la frase empieza a la altura
     del borde superior del mapa, y el botón y las redes van justo
     debajo de ella (sin estirarse hasta el fondo de la columna) */
  .contacto__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  .contacto__col--acciones {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  /* El margin-top negativo compensa el espacio que deja el
     line-height arriba de la primera línea, para que el borde
     superior de las letras quede a la altura del borde del mapa */
  .contacto__frase {
    font-size: 1.5rem;
    margin-top: -0.4rem;
  }

  .contacto__acciones-final {
    align-items: flex-start;
  }

  .resenas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .resenas__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer {
  background-color: var(--color-carbon);
  padding: 3rem 0 2rem;
}

/* 3 columnas: apiladas en celular, en fila desde los 600px (mismo
   breakpoint que ya usa .footer__inner más abajo) */
/* Antes eran 3 columnas en grid; con solo 2 (marca + contacto),
   un grid de 1fr/1fr dejaba mucho aire vacío en el medio. Con flex
   + justify-content: space-between (mismo patrón que ya usa
   .footer__inner más abajo) cada bloque mide lo que su propio
   contenido necesita y quedan anclados a los 2 extremos — así esta
   fila queda alineada con la de copyright + redes sociales de abajo
   (marca arriba de "© 2026...", contacto arriba de los íconos) */
.footer__columnas {
  display: flex;
  flex-direction: column;
  align-items: center; /* el max-width de .footer__col los deja angostos; esto los centra como bloque, no solo el texto adentro */
  gap: 2.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.footer__col {
  max-width: 22rem;
}

.footer__marca {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.3rem;
  color: var(--color-crema);
  margin-bottom: 0.35rem;
}

.footer__marca-sub {
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  color: rgba(247, 243, 236, 0.6);
}

/* Mismo tratamiento que las etiquetas chicas del resto del sitio
   (mayúsculas + letter-spacing), pero en crema para el fondo oscuro */
.footer__col-titulo {
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.6);
  margin-bottom: 0.9rem;
}

.footer__dato {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(247, 243, 236, 0.75);
}

.footer__dato--link {
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.footer__dato--link:hover {
  color: var(--color-crema);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  /* Línea divisoria sutil, para separar visualmente las 3 columnas
     nuevas de arriba de la línea de copyright de siempre */
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 243, 236, 0.15);
}

.footer__copy {
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  color: rgba(247, 243, 236, 0.75);
}

.footer__redes {
  display: flex;
  gap: 0.75rem;
}

.footer__red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 236, 0.25);
  color: rgba(247, 243, 236, 0.85);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer__red svg {
  width: 16px;
  height: 16px;
}

.footer__red:hover {
  background-color: var(--color-terracota);
  border-color: var(--color-terracota);
  color: #FFFFFF;
}

@media (min-width: 600px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer__columnas {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---------------------------------------------------------
   CAJITA "¿CON QUIÉN QUIERES HABLAR?" (botones de WhatsApp)
   Mini modal centrado en pantalla (en vez de un popover pegado
   al botón) para que nunca quede cortado en celular ni tapado
   por el header fijo. z-index por encima del header (500) y del
   lightbox (1000).
   --------------------------------------------------------- */
.wa-elegir {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(43, 38, 32, 0.45);
}

/* El display: flex de arriba le gana al atributo hidden del
   navegador, así que hay que volver a ocultarla a mano */
.wa-elegir[hidden] {
  display: none;
}

.wa-elegir__caja {
  position: relative;
  width: 100%;
  max-width: 320px;
  background-color: var(--color-crema);
  border: 1px solid rgba(43, 38, 32, 0.15);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(43, 38, 32, 0.25);
  padding: 1.75rem 1.5rem 1.5rem;
  animation: wa-elegir-aparece 0.2s ease both;
}

@keyframes wa-elegir-aparece {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-elegir__caja {
    animation: none;
  }
}

.wa-elegir__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-carbon);
  cursor: pointer;
}

.wa-elegir__cerrar svg {
  width: 18px;
  height: 18px;
}

.wa-elegir__cerrar:hover {
  background-color: rgba(43, 38, 32, 0.08);
}

.wa-elegir__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400; /* Libre Caslon Display solo tiene peso 400 */
  font-size: 1.3rem;
  color: var(--color-carbon);
  margin-bottom: 1.25rem;
  padding-right: 1.5rem; /* que no choque con la X */
}

.wa-elegir__opciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Cada persona: borde y texto verde bosque; al pasar el mouse se
   rellena de verde con texto crema */
.wa-elegir__opcion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-verde-bosque);
  border-radius: 6px;
  background-color: #FFFFFF;
  color: var(--color-verde-bosque);
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wa-elegir__opcion svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.wa-elegir__opcion:hover {
  background-color: var(--color-verde-bosque);
  color: var(--color-crema);
}

.wa-elegir__cerrar:focus-visible,
.wa-elegir__opcion:focus-visible {
  outline: 2px solid var(--color-terracota);
  outline-offset: 2px;
}