/*
 * styles.css — Vivero Vancho
 * Paleta cálida y natural (verde vivero + terracota de maceta) sobre fondo
 * crema. Tipografía grande y alto contraste a propósito: el público del
 * negocio va de +20 a +80 años, así que la legibilidad manda sobre la moda.
 */
:root {
  /* --- Paleta --- */
  --bg: #FBF7EF;
  --surface: #FFFFFF;
  --surface-alt: #F3ECDD;
  --text: #26241C;
  --text-soft: #55503F;
  --border: #E3D9C4;
  --accent: #3E7A45;          /* verde vivero — acento único para acciones */
  --accent-strong: #2C5A32;
  --terracota: #C1622E;       /* color de apoyo, solo decorativo (macetas, íconos) */
  --sage: #DCE6D3;            /* verde suave decorativo — fondos de íconos, blobs, olas */
  --sage-deep: #C3D5B8;
  --tierra: #4A3423;          /* marrón tierra — cierre visual (footer), cálido y de tono suelo */
  --tierra-light: #F3ECDD;    /* texto claro sobre --tierra */
  --tierra-tint: #EFE1CB;     /* marrón tierra bien clarito — fondos suaves, anillos, fichas */

  /* --- Tipografía --- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1160px;
  --gutter: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Las ramas decorativas del hero sangran un poco fuera del viewport a
     propósito (ver .hero-branch); esto evita que generen scroll horizontal. */
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 1.15rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Oculta visualmente pero deja disponible para lectores de pantalla */
.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;
}

/* --- Header / nav --- */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--gutter);
}
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
}
.logo svg { width: 44px; height: 44px; flex-shrink: 0; }
.logo-text {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}
.logo-text span { display: block; font-size: .95rem; font-family: var(--body-font); font-weight: 600; color: var(--accent-strong); letter-spacing: .02em; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
}
.nav-menu a { position: relative; text-decoration: none; padding: .25rem 0; }
.nav-menu a:hover { color: var(--accent-strong); }
/* Hojita que aparece arriba del link al pasar el mouse (o con foco de
   teclado) — pedido del cliente: animación al pasar sobre los botones del
   menú (primero se probó con una flor, después se cambió a hoja). Es un
   ::before con una hoja puntiaguda dibujada en SVG (verde de la marca, con
   su nervadura central más oscura), oculta y achicada por defecto, que
   aparece y "crece" con la transición. */
.nav-menu a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,3 C25,9 27,20 16,29 C5,20 7,9 16,3 Z' fill='%233E7A45'/%3E%3Cpath d='M16,7 L16,25' stroke='%232C5A32' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(-50%, 3px) scale(.3) rotate(-20deg);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.nav-menu a:hover::before,
.nav-menu a:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu a::before { transition: opacity .15s ease; transform: translate(-50%, 0) scale(1); }
}
.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: .6rem 1rem;
    font-size: 1rem;
  }
  .nav-menu {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem var(--gutter) 1.5rem;
    display: none;
    box-shadow: 0 12px 20px -12px rgba(38,36,28,.25);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { font-size: 1.15rem; }
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 12px 24px -10px rgba(44, 90, 50, .55); }
.btn-secondary { background: transparent; color: var(--accent-strong); border-color: var(--accent); }
.btn-secondary:hover { background: var(--surface-alt); box-shadow: 0 12px 24px -14px rgba(38, 36, 28, .35); }
/* .icon fija su propio color (ver más abajo) para verse bien sobre fondos
   claros en el resto del sitio; dentro de un botón tiene que heredar el
   color del texto del botón (blanco en primary, verde en secondary) en vez
   de pisarlo. */
.btn .icon { color: inherit; }

/* --- Hero --- */
.hero {
  position: relative;
  padding: 3.5rem 0 6.5rem;
  background: linear-gradient(180deg, var(--surface-alt), var(--bg));
}
/* El hero pasó de ser dos columnas (texto | tarjeta de foto) a una sola
   foto a todo el ancho de la SECCIÓN (borde a borde, no sólo del
   .container). La copy también dejó de usar el .container centrado del
   resto del sitio (eso dejaba un margen en blanco a la izquierda en
   pantallas anchas, porque el .container se limita a 1160px y se centra):
   ahora .hero-inner ocupa el 100% de la sección, con sólo un padding chico
   para que el texto arranque casi pegado al borde real — pedido del
   cliente: "de lado a lado", como la referencia. Ver .hero-photo (fondo
   absoluto de toda la sección) y .hero-copy más abajo. */
.hero-inner {
  position: relative;
  min-height: 340px;
  /* Un poco más de aire a la izquierda que a la derecha (pedido del
     cliente: el texto quedaba muy pegado al borde en mobile). */
  padding: 0 var(--gutter) 0 2.25rem;
}
@media (min-width: 860px) {
  /* +2cm pedido por el cliente para correr la tarjeta más hacia la derecha. */
  .hero-inner { min-height: 460px; padding: 0 0 0 calc(4rem + 2cm); }
}
@media (min-width: 1300px) {
  .hero-inner { padding-left: calc(5.5rem + 2cm); }
}
.wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  /* Tiene que pintar por encima de .hero-scrim (el panel sólido que tapa la
     foto en mobile), si no el nuevo panel lo tapa y desaparecen la ola y el
     gnomo. */
  z-index: 2;
}
.wave-divider svg { width: 100%; height: 70px; display: block; }

/* Gnomo corriendo sobre la ola del hero (única ola, ver arriba), de punta
   a punta en bucle infinito, como si la ola fuera una cadena de montañas.
   .hero-wave-gnome mueve el conjunto en horizontal (translateX en vw para
   que el recorrido sea proporcional al ancho real); .gnome-bob agrega el
   rebote vertical de la corrida; las piernas se turnan con gnome-leg-swing.
   Si el usuario prefiere menos movimiento, todo queda quieto (ver media
   query al final de este bloque). */
.hero-wave-gnome {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 32px;
  z-index: 1;
  pointer-events: none;
  animation: gnome-run 16s linear infinite;
}
.hero-wave-gnome svg { width: 100%; height: auto; display: block; }
.gnome-bob { animation: gnome-bob .45s ease-in-out infinite; }
.gnome-leg { transform-origin: 23px 46px; animation: gnome-leg-swing .45s ease-in-out infinite; }
.gnome-leg-front { animation-delay: 0s; }
.gnome-leg-back { animation-delay: .225s; }
@keyframes gnome-run {
  from { transform: translateX(-8vw); }
  to { transform: translateX(105vw); }
}
@keyframes gnome-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes gnome-leg-swing {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-20deg); }
}
@media (min-width: 860px) {
  .hero-wave-gnome { width: 40px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wave-gnome,
  .gnome-bob,
  .gnome-leg {
    animation: none;
  }
}
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.7rem);
  line-height: 1.1;
  margin: 0 0 1.2rem;
  max-width: 16ch;
}
.hero-title-line { display: block; }
.hero-title-line--dark { color: var(--text); }
/* Segunda línea del título en itálica de la tipografía display, como el
   "Home" en cursiva verde de la referencia; el ícono de brote reemplaza
   al destello/subrayado decorativo que tenía antes. */
.hero-title-line--accent {
  color: var(--accent-strong);
  font-style: italic;
}
.hero-title-icon {
  width: .7em;
  height: .7em;
  vertical-align: middle;
  margin-left: .15em;
  color: var(--accent);
}
.hero p {
  color: var(--text-soft);
  max-width: 55ch;
  font-size: 1.2rem;
  margin: 0 0 1.75rem;
}
.hero p.hero-address {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-soft);
  margin: -.5rem 0 1.75rem;
}
.hero-address .icon { width: 20px; height: 20px; color: var(--accent-strong); flex-shrink: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-copy {
  /* Asegura que el texto siempre pinte por encima de la foto de fondo y de
     las ramitas decorativas del hero. */
  position: relative;
  z-index: 2;
  padding: 2.5rem 0;
}
@media (min-width: 860px) {
  /* De ≥860px la copy se angosta al tercio izquierdo de la foto. Antes acá
     había un degradé que se iba desvaneciendo hacia la foto — se veía la
     sombra/textura de las hojas por detrás de las letras. El cliente pidió
     que el texto no tenga nunca una foto de fondo, así que ahora es un
     panel sólido y parejo (mismo criterio que .hero-scrim en mobile). */
  .hero-copy {
    width: 42%;
    max-width: 30ch;
    padding: 3rem 0;
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1rem -1.5rem -1rem -3rem;
    /* Puntas curvas (antes eran en escuadra) — pedido del cliente: que la
       tarjeta se vea más amigable. */
    border-radius: 24px;
    background: var(--bg);
  }
}
@media (min-width: 1300px) {
  .hero-copy { max-width: 34ch; }
}
/* Panel sólido que tapa la foto de punta a punta del hero SÓLO en mobile
   (ver comentario en el HTML) — reemplaza al scrim recortado de antes, que
   dejaba tiritas de foto visibles en el borde izquierdo y debajo de los
   botones. Vive fuera de .hero-inner (mismo nivel que .hero-photo), con
   inset:0 relativo a .hero para cubrir EXACTAMENTE lo mismo que la foto.
   Pinta por encima de la foto pero por debajo de las hojas decorativas y
   del texto (ver z-index de .hero-leaves y .hero-copy). */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  pointer-events: none;
}
@media (min-width: 860px) {
  .hero-scrim { display: none; }
}

/* Manojo de hojas suelto en la esquina superior izquierda del hero (varias
   hojas de distinto tamaño/ángulo desde un mismo punto). Pinta por encima
   de la foto de fondo (z-index 1 > 0) pero detrás de la copy (z-index 2),
   así que aunque se acerque al texto el texto siempre pinta encima.
   El cliente pidió sacar los manojos de las dos esquinas derechas (se
   veían como bordes en punta sobresaliendo del borde del hero) para que
   ese lado quede limpio/uniforme — sólo quedan éste y su par de abajo
   (hero-leaves-bottom-left). */
.hero-leaves {
  position: absolute;
  top: -6px;
  z-index: 1;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.hero-leaves svg { width: 100%; height: 100%; display: block; }
.hero-leaves-left { left: -10px; }
/* Mismo manojo, ahora anclado a la esquina inferior izquierda (top->bottom
   y espejado en vertical) para enmarcar ese lado del hero. */
.hero-leaves-bottom { top: auto; bottom: -6px; }
.hero-leaves-bottom-left { left: -10px; transform: scaleY(-1); }
@media (min-width: 860px) {
  .hero-leaves { top: -10px; width: 170px; height: 170px; }
  .hero-leaves-left { left: -16px; }
  .hero-leaves-bottom { top: auto; bottom: -10px; }
  .hero-leaves-bottom-left { left: -16px; }
}
@media (min-width: 1300px) {
  .hero-leaves { top: -14px; width: 210px; height: 210px; }
  .hero-leaves-left { left: -22px; }
  .hero-leaves-bottom { top: auto; bottom: -14px; }
  .hero-leaves-bottom-left { left: -22px; }
}

/* Foto del hero: fondo a todo el ancho de la SECCIÓN (borde a borde, sin el
   margen del .container ni esquinas redondeadas — pedido del cliente: que
   la imagen ocupe todo el hook a lo ancho). Vive fuera de .hero-inner, como
   primer hijo de .hero, y se estira con position:absolute + inset:0 para
   llenar exactamente el alto que marca .hero-copy (el único contenido en
   flujo normal), recortando con object-fit:cover — así nunca sobra ni
   falta foto, en cualquier ancho. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* --- Secciones genéricas --- */
.section { position: relative; padding: 4rem 0; border-top: 1px solid var(--border); }
.section-alt { background: var(--surface-alt); position: relative; }
.section--no-top-border { border-top: none; }
.section-head { max-width: 68ch; margin: 0 0 2.5rem; }
.section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  margin: 0 0 .6rem;
}
.section .kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  font-weight: 800;
  color: var(--accent-strong);
  margin: 0 0 .6rem;
}
.section .lead { color: var(--text-soft); font-size: 1.15rem; margin: 0; }

/* Marrón tierra como segundo acento temático: lo usamos en las secciones
   que hablan de trayectoria/confianza (Nosotros, Reseñas), mientras que
   el verde queda para las secciones de producto/acción (Rubros,
   Ubicación, Contacto). Así conviven los dos colores sin competir.
   Reseñas no tiene ".kicker" (todavía usa el badge "Ejemplo" en vez del
   texto "// ..."), así que el acento ahí va en el <h2>. */
#nosotros .kicker {
  color: var(--tierra);
}
#resenas .section-head h2 {
  color: var(--tierra);
}

/* --- Rubros (carrusel tipo "spotlight": una tarjeta destacada que rota
   entre los 9 rubros, con una fila de miniaturas para saltar a cualquiera) --- */
.icon {
  width: 28px;
  height: 28px;
  color: var(--accent-strong);
  fill: currentColor;
}

.rubros-carousel { display: flex; flex-direction: column; gap: 1.75rem; }

.rubros-spotlight {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
}

.rubros-spotlight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
}
@media (min-width: 700px) {
  .rubros-spotlight-card { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}

.rubros-spotlight-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sage);
}
@media (min-width: 700px) {
  .rubros-spotlight-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
}
.rubros-spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
  display: block;
}

.rubros-spotlight-body { padding: 2.75rem 1.75rem 1.75rem; }
.rubros-spotlight-body h3 { font-size: 1.5rem; margin: 0 0 .6rem; }
.rubros-spotlight-body p { color: var(--text-soft); margin: 0; font-size: 1.08rem; }

.rubros-spotlight.is-fading .rubros-spotlight-body {
  opacity: 0;
  transform: translateY(10px);
}
.rubros-spotlight.is-fading .rubros-spotlight-media img {
  opacity: 0;
  transform: scale(.94);
}
.rubros-spotlight-body {
  transition: opacity .4s ease, transform .4s ease;
}
.rubros-spotlight-media img {
  transition: opacity .4s ease, transform .45s ease;
}

.rubros-nav {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.rubros-nav:hover { background: var(--sage); }
.rubros-nav:active { transform: scale(.94); }
.rubros-nav .icon { width: 22px; height: 22px; }
.rubros-nav--prev .icon { transform: rotate(180deg); }

.rubros-thumbs {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  padding: .25rem .25rem .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--tierra-tint) transparent;
}
.rubros-thumb {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-soft);
  font: inherit;
  font-size: .85rem;
  text-align: center;
}
.rubros-thumb img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  padding: .55rem;
  background: var(--sage);
  border: 3px solid var(--surface);
  outline: 2px solid var(--border);
  outline-offset: 0;
  transition: outline-color .15s ease, transform .15s ease;
}
.rubros-thumb:hover img { transform: translateY(-2px); }
.rubros-thumb.is-active {
  color: var(--accent-strong);
  font-weight: 800;
}
.rubros-thumb.is-active img { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .rubros-spotlight-body,
  .rubros-spotlight-media img,
  .rubros-thumb img {
    transition: none;
  }
}

/* En celular las flechas de navegación (48px c/u) + el gap se comían casi
   la mitad del ancho disponible, dejando la tarjeta angosta y la foto del
   producto chiquita dentro de ella (a eso se suma el padding fijo de 2rem
   sobre la imagen). Acá se achican flechas y separación para que la
   tarjeta gane ancho, se sube el alto del recuadro de foto (de 4/3 a
   cuadrado) para que haya más lugar vertical, y se baja el padding interno
   — el resultado es una foto notablemente más grande sin tocar nada del
   layout de escritorio (que ya usa sus propias reglas a partir de 700px). */
@media (max-width: 699px) {
  .rubros-spotlight { gap: .4rem; }
  .rubros-nav { width: 38px; height: 38px; }
  .rubros-nav .icon { width: 18px; height: 18px; }
  .rubros-spotlight-media { aspect-ratio: 1 / 1; }
  .rubros-spotlight-media img { padding: .9rem; }
  .rubros-thumb { width: 100px; }
  .rubros-thumb img { width: 72px; height: 72px; }
}

/* --- Marcas (carrusel infinito de logos) ---
   Mismo mecanismo que .resenas-track más abajo: .marcas-track contiene dos
   copias idénticas del set de logos una al lado de la otra y se anima
   corriéndose -50% de su ancho total (que es exactamente el ancho de una
   copia), así el corte entre una vuelta y la siguiente no se nota. Se
   pausa al pasar el mouse/foco y se desactiva con prefers-reduced-motion. */
.marcas-track-wrap {
  overflow: hidden;
  margin-top: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marcas-track {
  display: flex;
  width: max-content;
  /* 92s para mantener ~33px/s (misma velocidad que el resto de los
     carruseles tipo marquee del sitio) ahora que cada copia trae las 16
     marcas reales en una sola tanda — ver comentario en el HTML. */
  animation: marcas-scroll 92s linear infinite;
}
.marcas-track:hover,
.marcas-track:focus-within {
  animation-play-state: paused;
}
.marcas-set {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 var(--gutter) 0 0;
}
@keyframes marcas-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marcas-track { animation: none; }
}
.marca-logo {
  flex: 0 0 150px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- Nosotros --- */
.nosotros-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) {
  .nosotros-grid { grid-template-columns: .8fr 1.2fr; }
}
.stat-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 210px;
  height: 210px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0 0 8px var(--tierra-tint), 0 0 0 11px var(--terracota);
}
.stat-badge strong { font-family: var(--display); font-size: 3rem; line-height: 1; }
.stat-badge span { font-weight: 700; margin-top: .4rem; font-size: 1.05rem; }
.nosotros-copy p { color: var(--text-soft); font-size: 1.15rem; }

/* --- Nuestro mundo (galería de fotos reales) ---
   Mosaico parejo de 2 columnas en mobile y 4 en desktop, todas las fichas
   del mismo tamaño (sin foto "destacada" — se sacó, pedido del cliente).
   Las fichas "próximamente" usan el mismo trazo punteado que .resena-card
   (ver más abajo) para que se lean como contenido en construcción y no
   como una foto rota.
   Cada foto real es un <button> (ver index.html): al pasar el mouse por
   arriba (o enfocarla con teclado) se agranda "en el lugar" tipo burbuja,
   subiendo por encima de las fichas vecinas con z-index. Al clickearla (o
   tocarla en celular) se abre el lightbox de pantalla completa para verla
   más grande (ver initGaleriaLightbox en main.js y .lightbox más abajo).
   Con prefers-reduced-motion activado, la transición se anula sola por la
   regla global del final de este archivo. */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.galeria-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sage);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.galeria-item--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--surface-alt);
  border: 2px dashed var(--border);
  color: var(--text-soft);
  font-weight: 700;
  font-size: .95rem;
  cursor: default;
}
.galeria-item--placeholder .icon { width: 34px; height: 34px; color: var(--accent-strong); }
.galeria-item:not(.galeria-item--placeholder):hover,
.galeria-item:not(.galeria-item--placeholder):focus-visible {
  transform: scale(1.15);
  z-index: 5;
  box-shadow: 0 22px 40px -14px rgba(38, 36, 28, .45);
}
@media (min-width: 700px) {
  .galeria-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .galeria-item { aspect-ratio: auto; }
}

/* --- Lightbox de la galería ---
   Un único overlay reutilizado para todas las fotos de .galeria-grid (ver
   initGaleriaLightbox en main.js). Arranca con [hidden] + sin .is-open;
   al abrir, JS saca el [hidden] y agrega .is-open en el frame siguiente
   para que la transición de opacidad se vea (si arrancaran juntos, el
   navegador no anima el cambio). body.has-lightbox congela el scroll de
   fondo mientras el modal está abierto. */
body.has-lightbox { overflow: hidden; }
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: rgba(20, 18, 12, .92);
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}
.lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.lightbox-close,
.lightbox-nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox-close {
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-nav--prev { left: 1.25rem; }
.lightbox-nav--next { right: 1.25rem; }
@media (max-width: 599px) {
  .lightbox { padding: 3rem 1rem; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav--prev { left: .5rem; }
  .lightbox-nav--next { right: .5rem; }
}

/* --- Reseñas --- */
.badge-ejemplo {
  display: inline-block;
  background: var(--terracota);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: .75rem;
}
/* Insignia de reseña real de Google (verde, para diferenciarla a simple
   vista del terracota que usamos para contenido de ejemplo/placeholder). */
.badge-google {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--accent-strong);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: .75rem;
}
.section-head .badge-google { font-size: .85rem; margin-bottom: 1rem; }
/* Carrusel infinito: .resenas-track-wrap recorta y sangra de borde a
   borde (sale del .container a propósito); .resenas-track contiene dos
   copias idénticas del set de tarjetas una al lado de la otra y se anima
   corriéndose -50% de su ancho total, que es exactamente el ancho de una
   copia — al llegar ahí el loop reinicia sin que se note el corte. Cada
   copia repite las 9 reseñas reales 2 veces (ver comentario en el HTML,
   18 tarjetas ≈ 5810px por copia) para que ningún monitor, por ancho que
   sea, llegue a mostrar el final del set antes de que el loop reinicie.
   La duración subió a 115s para mantener la misma velocidad de
   desplazamiento de siempre (~50px/s) ahora que el recorrido es más
   largo al haber más tarjetas por copia. */
.resenas-track-wrap {
  overflow: hidden;
  margin-top: 2.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.resenas-track {
  display: flex;
  width: max-content;
  animation: resenas-scroll 115s linear infinite;
}
.resenas-track:hover,
.resenas-track:focus-within {
  animation-play-state: paused;
}
.resenas-set {
  display: flex;
  gap: 1.5rem;
  padding: 0 var(--gutter) 0 0;
}
@keyframes resenas-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .resenas-track { animation: none; }
}
.resena-card {
  position: relative;
  background: var(--surface);
  border: 1px dashed rgba(74, 52, 35, .35);
  border-radius: 16px;
  padding: 1.75rem;
  overflow: hidden;
  flex: 0 0 300px;
  width: 300px;
}
.resena-card::before {
  content: '“';
  position: absolute;
  top: .3rem;
  left: 1.2rem;
  font-family: var(--display);
  font-size: 6.5rem;
  line-height: 1;
  color: var(--tierra);
  opacity: .16;
  pointer-events: none;
}
.resena-card .badge-ejemplo,
.resena-card .badge-google,
.resena-card p.cita,
.resena-card .autor { position: relative; z-index: 1; }
.resena-card p.cita { font-size: 1.1rem; margin: 0 0 1rem; color: var(--text); }
.resena-card .autor { font-weight: 800; color: var(--text-soft); font-size: .95rem; }

/* --- Ubicación / mapa --- */
.ubicacion-grid { display: grid; gap: 2rem; }
@media (min-width: 860px) {
  .ubicacion-grid { grid-template-columns: .9fr 1.1fr; }
}
.ubicacion-info { display: flex; flex-direction: column; gap: 1.25rem; }
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-item .info-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--tierra);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.info-item h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.info-item p, .info-item a { margin: 0; color: var(--text-soft); font-size: 1.05rem; text-decoration: none; }
.info-item a.link { color: var(--accent-strong); font-weight: 700; text-decoration: underline; }
.map-frame {
  border: 2px solid var(--tierra-tint);
  border-radius: 16px;
  overflow: hidden;
  min-height: 320px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* --- Contacto: botones directos a WhatsApp/Instagram (sin formulario,
   ver comentario en index.html) --- */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn-contact { padding: 1.1rem 2.2rem; font-size: 1.1rem; }
.btn-contact .icon { width: 22px; height: 22px; transition: transform .25s ease; }
.btn-contact:hover .icon { transform: scale(1.12); }

/* --- Footer --- */
.footer {
  padding: 2.5rem 0;
  background: var(--accent-strong);
  color: var(--tierra-light);
  font-size: 1rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-weight: 700; color: var(--tierra-light); }
.footer-links a:hover { color: #E8B679; }

/* --- Accesibilidad --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}