/* ==========================================================================
   VEGAS DEL VERDE — base.css
   Reset, tipografía, utilidades de layout, animación de entrada y botones.
   Depende de tokens.css (cargarlo SIEMPRE antes que este archivo).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Josefin+Sans:wght@300;400;600&family=Poiret+One&display=swap");

/* ==========================================================================
   1. RESET MODERNO
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* el header fijo no debe tapar el destino de un ancla */
  scroll-padding-top: calc(var(--alto-header) + var(--esp-md));
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-cuerpo);
  font-weight: var(--peso-normal);
  line-height: var(--alto-linea-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  background-color: rgb(var(--gris-verde-rgb) / 0.25);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:target {
  scroll-margin-top: calc(var(--alto-header) + var(--esp-md));
}

/* ==========================================================================
   2. TIPOGRAFÍA
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-ligero);
  line-height: var(--alto-linea-titulo);
  letter-spacing: var(--track-titulo);
  color: var(--color-texto);
  text-wrap: balance;
}

h1 {
  font-family: var(--fuente-display);
  font-size: var(--fs-h1);
  line-height: var(--alto-linea-apretado);
  letter-spacing: var(--track-display);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--peso-normal);
}

h5,
h6 {
  font-size: var(--fs-cuerpo);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

p {
  max-width: var(--medida);
}

p + p {
  margin-top: var(--esp-sm);
}

strong,
b {
  font-weight: var(--peso-medio);
}

em {
  font-style: italic;
}

small {
  font-size: var(--fs-pequeno);
}

/* Listas de contenido (sin clase) */
ul:not([class]),
ol:not([class]) {
  padding-left: 1.25em;
  max-width: var(--medida);
}

ul:not([class]) li + li,
ol:not([class]) li + li {
  margin-top: var(--esp-3xs);
}

ul:not([class]) li::marker {
  color: var(--color-acento-texto);
}

/* Lista con hojita — para enumeraciones de servicios */
.lista-hojas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  list-style: none;
  padding: 0;
  max-width: var(--medida);
}

.lista-hojas > li {
  position: relative;
  padding-left: 1.6em;
}

.lista-hojas > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.62em;
  height: 0.62em;
  border-radius: 0 var(--radio-full) 0 var(--radio-full);
  background-color: var(--color-acento);
}

/* ==========================================================================
   3. ENLACES Y FOCO
   ========================================================================== */
a {
  color: var(--color-acento-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--transicion-rapida);
}

a:hover {
  color: var(--color-texto);
}

:focus-visible {
  outline: 2px solid var(--verde-oliva);
  outline-offset: 3px;
  border-radius: var(--radio-xs);
}

/* Sobre fondos oscuros el foco cambia de color para mantener contraste */
.sobre-oscuro :focus-visible,
.pie-sitio :focus-visible {
  outline-color: var(--verde-menta);
}

::selection {
  background-color: rgb(var(--verde-menta-rgb) / 0.35);
  color: var(--color-texto);
}

.saltar-contenido {
  position: absolute;
  left: var(--esp-sm);
  top: var(--esp-sm);
  z-index: var(--z-saltar);
  padding: var(--esp-2xs) var(--esp-md);
  background-color: var(--verde-oliva);
  color: var(--color-texto-inverso);
  border-radius: var(--radio-full);
  font-size: var(--fs-pequeno);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transicion);
}

.saltar-contenido:focus-visible {
  transform: translateY(0);
  color: var(--color-texto-inverso);
}

/* Sólo para lectores de pantalla */
.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-contenedor) + var(--padding-contenedor) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-contenedor);
}

.contenedor--estrecho {
  --ancho-contenedor: var(--ancho-sm);
}

.contenedor--medio {
  --ancho-contenedor: var(--ancho-md);
}

.contenedor--ancho {
  --ancho-contenedor: var(--ancho-xl);
}

.seccion {
  position: relative;
  padding-block: var(--esp-seccion);
  scroll-margin-top: calc(var(--alto-header) + var(--esp-md));
}

.seccion--compacta {
  padding-block: var(--esp-seccion-sm);
}

.seccion--amplia {
  padding-block: var(--esp-seccion-lg);
}

.seccion--alt {
  background-color: var(--color-fondo-alt);
}

.seccion--oscura {
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4,
.seccion--oscura h5,
.seccion--oscura h6 {
  color: var(--color-texto-inverso);
}

.seccion--oscura a {
  color: var(--color-acento);
}

.seccion--oscura a:hover {
  color: var(--color-texto-inverso);
}

/* Grids */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid-2 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

/* Rejilla que se adapta sola: la opción preferida para tarjetas */
.grid-auto {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.grid-auto--ancha {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.grid-auto--estrecha {
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

@media (min-width: 40em) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 60em) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* Utilidades sueltas */
.apilar {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  align-items: flex-start;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm);
  align-items: center;
}

.centrado {
  text-align: center;
}

.centrado p,
.centrado .entradilla {
  margin-inline: auto;
}

.medida-corta {
  max-width: var(--medida-corta);
}

.sin-margen {
  margin: 0;
}

/* ==========================================================================
   5. ENCABEZADO DE SECCIÓN (antetítulo + título en caps)
   ========================================================================== */
.seccion-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
  max-width: var(--medida);
  margin-bottom: var(--gap-lg);
}

.seccion-encabezado.centrado {
  align-items: center;
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--color-acento-texto);
  margin: 0;
}

.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 1px;
  background-color: currentColor;
  flex: none;
  opacity: 0.75;
}

.centrado .eyebrow::after {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 1px;
  background-color: currentColor;
  flex: none;
  opacity: 0.75;
}

.seccion--oscura .eyebrow {
  color: var(--color-acento);
}

.titulo-seccion {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h2);
  font-weight: var(--peso-ligero);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  line-height: var(--alto-linea-titulo);
  margin: 0;
}

.titulo-seccion--sm {
  font-size: var(--fs-h3);
}

.titulo-seccion--xs {
  font-size: var(--fs-h4);
}

.titulo-display {
  font-family: var(--fuente-display);
  font-size: var(--fs-h1);
  font-weight: var(--peso-normal);
  letter-spacing: var(--track-display);
  line-height: var(--alto-linea-apretado);
  text-transform: none;
}

.entradilla {
  font-size: var(--fs-grande);
  font-weight: var(--peso-ligero);
  line-height: var(--alto-linea-suelto);
  color: var(--color-texto-suave);
  max-width: var(--medida);
}

.seccion--oscura .entradilla {
  color: var(--color-texto-inverso-suave);
}

.nota {
  font-size: var(--fs-pequeno);
  color: var(--color-texto-suave);
}

.credito {
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
}

/* Regla decorativa fina */
.regla {
  border: 0;
  height: 1px;
  background-color: var(--color-borde-suave);
  margin-block: var(--esp-lg);
}

/* ==========================================================================
   6. ANIMACIÓN DE ENTRADA POR SCROLL
   Sin JS todo queda visible; el script añade .js al <html> y .visible a
   cada elemento cuando entra en pantalla (IntersectionObserver).
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--desplazamiento-reveal), 0);
  transition:
    opacity var(--transicion-reveal),
    transform var(--transicion-reveal);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal--izq {
  transform: translate3d(calc(var(--desplazamiento-reveal) * -1), 0, 0);
}

.js .reveal--der {
  transform: translate3d(var(--desplazamiento-reveal), 0, 0);
}

.js .reveal--zoom {
  transform: scale(0.96);
}

.js .reveal--velo {
  transform: none;
  clip-path: inset(0 0 18% 0);
  transition:
    opacity var(--transicion-reveal),
    clip-path var(--transicion-reveal);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Escalonado: aplicar a un contenedor para retrasar a sus hijos .reveal */
.reveal-secuencia > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-secuencia > .reveal:nth-child(2) { --reveal-delay: 90ms; }
.reveal-secuencia > .reveal:nth-child(3) { --reveal-delay: 180ms; }
.reveal-secuencia > .reveal:nth-child(4) { --reveal-delay: 270ms; }
.reveal-secuencia > .reveal:nth-child(5) { --reveal-delay: 360ms; }
.reveal-secuencia > .reveal:nth-child(6) { --reveal-delay: 450ms; }
.reveal-secuencia > .reveal:nth-child(n + 7) { --reveal-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .reveal-secuencia > .reveal {
    --reveal-delay: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--radio-full);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-boton);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--transicion),
    border-color var(--transicion),
    color var(--transicion),
    transform var(--transicion-rapida),
    box-shadow var(--transicion);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg,
.btn img {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Primario — verde oliva sólido */
.btn-primario {
  background-color: var(--verde-oliva);
  color: var(--color-texto-inverso);
  box-shadow: var(--sombra-sm);
}

.btn-primario:hover {
  background-color: var(--tinta);
  color: var(--color-texto-inverso);
  box-shadow: var(--sombra-md);
}

/* Secundario — contorno */
.btn-secundario {
  background-color: transparent;
  border-color: rgb(var(--verde-oliva-rgb) / 0.45);
  color: var(--color-acento-texto);
}

.btn-secundario:hover {
  background-color: var(--verde-oliva);
  border-color: var(--verde-oliva);
  color: var(--color-texto-inverso);
}

/* WhatsApp — acento menta, el CTA de conversión del sitio */
.btn-whatsapp {
  background-color: var(--verde-menta);
  color: var(--tinta);
  box-shadow: var(--sombra-sm);
}

.btn-whatsapp:hover {
  background-color: var(--tinta);
  color: var(--verde-menta);
  box-shadow: var(--sombra-md);
}

/* Sobre foto o fondo oscuro */
.btn-claro {
  background-color: rgb(var(--crema-rgb) / 0.92);
  color: var(--tinta);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
}

.btn-claro:hover {
  background-color: var(--crema);
  color: var(--tinta);
}

.btn-fantasma {
  background-color: transparent;
  border-color: var(--color-borde-inverso);
  color: var(--color-texto-inverso);
}

.btn-fantasma:hover {
  background-color: rgb(var(--crema-rgb) / 0.12);
  border-color: var(--color-texto-inverso);
  color: var(--color-texto-inverso);
}

/* Modificadores de tamaño */
.btn-grande {
  padding: 1.05em 2.2em;
  min-height: 3.25rem;
  font-size: var(--fs-cuerpo);
}

.btn-pequeno {
  padding: 0.6em 1.15em;
  min-height: 2.25rem;
  font-size: var(--fs-micro);
}

.btn-bloque {
  display: flex;
  width: 100%;
}

/* Enlace con flecha, para CTAs de bajo peso */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-boton);
  text-decoration: none;
  color: var(--color-acento-texto);
}

.enlace-flecha::after {
  content: "→";
  transition: transform var(--transicion-rapida);
}

.enlace-flecha:hover::after {
  transform: translateX(0.3em);
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm);
  align-items: center;
}

/* ==========================================================================
   8. TARJETAS E IMÁGENES (base compartida; cada sección la extiende)
   ========================================================================== */
.tarjeta {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion);
}

.tarjeta__cuerpo {
  padding: var(--esp-md);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
}

.marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background-color: rgb(var(--gris-verde-rgb) / 0.3);
}

.marco > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

.marco--3-2 { aspect-ratio: 3 / 2; }
.marco--4-3 { aspect-ratio: 4 / 3; }
.marco--1-1 { aspect-ratio: 1 / 1; }
.marco--16-9 { aspect-ratio: 16 / 9; }
.marco--retrato { aspect-ratio: 4 / 5; }

a:hover > .marco > img,
.tarjeta:hover .marco > img,
.marco--zoom:hover > img {
  transform: scale(var(--escala-hover));
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--esp-2xs);
  font-size: var(--fs-micro);
  color: var(--color-texto-suave);
}

/* Cifra destacada (101 aves, 4 hectáreas, 347 plantas…) */
.cifra {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--fs-cifra);
  font-weight: var(--peso-normal);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--color-acento-texto);
}

.seccion--oscura .cifra {
  color: var(--color-acento);
}

.cifra + .cifra-etiqueta {
  display: block;
  margin-top: var(--esp-2xs);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-texto-suave);
}

.seccion--oscura .cifra-etiqueta {
  color: var(--color-texto-inverso-suave);
}

/* Etiqueta / píldora */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  border-radius: var(--radio-full);
  background-color: rgb(var(--verde-menta-rgb) / 0.18);
  border: 1px solid rgb(var(--verde-oliva-rgb) / 0.16);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-acento-texto);
}

.pildora--destacada {
  background-color: rgb(var(--amarillo-rgb) / 0.28);
}

.seccion--oscura .pildora {
  background-color: rgb(var(--crema-rgb) / 0.1);
  border-color: var(--color-borde-inverso);
  color: var(--color-acento);
}