/* ════════════════════════════════════════════════════════════════
   GREEN SHADES CR LANDSCAPING — hoja de estilos
   Design by nature · Diseño, innovación y naturaleza.
   Índice:
   01. Variables y base
   02. Utilidades (wrap, tags, botones, enlaces, reveal)
   03. Header y navegación
   04. Menú móvil
   05. Hero
   06. Introducción
   07. Rewilding (eje central)
   08. Nosotros
   09. Marquee
   10. Índice de servicios
   11. Secciones detalladas de servicios
   12. Banda CTA
   13. Proyecto destacado (corporativo BAC)
   14. Proceso
   15. Diferenciadores
   16. Clientes
   17. Cobertura
   18. Cotización (formulario)
   19. Contacto
   20. Footer
   21. WhatsApp flotante
   22. Responsive
   23. Accesibilidad y movimiento reducido
   ════════════════════════════════════════════════════════════════ */

/* ── 01. VARIABLES Y BASE ─────────────────────────────────────── */

/* Tipografías variables autoalojadas (latin) */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* ── Paleta de marca Green Shades ──────────────────────────────
     Fuente única de color del sitio. Estos ocho tokens son la paleta
     oficial: no introduzcas hexadecimales de marca fuera de este bloque. */
  --verde-abismo:   #14352A; /* verde bosque principal: hero, footer, secciones oscuras */
  --verde-bosque:   #1E4C38; /* verde profundo: superficies oscuras secundarias, botón sólido */
  --verde-follaje:  #2F7A55; /* verde medio: enlaces activos, líneas, foco, acciones secundarias */
  --verde-brote:    #7BA83C; /* verde botánico: acento natural en superficies */
  --verde-neblina:  #C2DDA8; /* verde claro: bloques editoriales suaves, texto sobre oscuro */
  --lima-electrico: #C6D82E; /* lima orgánico: acento puntual, uso moderado */
  --verde-papel:    #E4EFDF; /* verde niebla: fondo alterno, texto sobre oscuro */
  --blanco-hoja:    #F6FBF2; /* blanco vegetal: fondo claro principal */

  /* Alias de la paleta "Jardín Claro" (Opción i). Mismos colores, nomenclatura
     --gs-*. Son la fuente única de color; no introducir hexadecimales de marca
     fuera de este bloque. */
  --gs-950: var(--verde-abismo);   /* #14352A */
  --gs-900: var(--verde-bosque);   /* #1E4C38 */
  --gs-700: var(--verde-follaje);  /* #2F7A55 */
  --gs-olive: var(--verde-brote);  /* #7BA83C */
  --gs-olive-300: var(--verde-neblina); /* #C2DDA8 */
  --gs-lima: var(--lima-electrico);/* #C6D82E */
  --gs-ivory: var(--verde-papel);  /* #E4EFDF */
  --gs-white: var(--blanco-hoja);  /* #F6FBF2 */
  --gs-charcoal: #17251D;          /* texto profundo */

  /* Derivados (mismos tonos con alfa) */
  --line-dark: rgba(20, 53, 42, 0.16);
  --line-light: rgba(246, 251, 242, 0.22);
  --text-muted: rgba(20, 53, 42, 0.74);
  --text-muted-light: rgba(246, 251, 242, 0.75);
  --verde-oliva-proyecto: #C9D3B5; /* verde suave coordinado con el proyecto destacado */

  /* Estado de error — fuera de la paleta de marca a propósito: se necesita
     un tono no verde para que el error no dependa solo del color de marca. */
  --error: #A4442E;
  --error-dark: #7C3322;
  --error-bg: rgba(164, 68, 46, 0.07);

  /* Tipografía */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Escala */
  --fs-hero: clamp(3rem, 11vw, 9rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body: clamp(1rem, 1.1vw, 1.0625rem);
  --fs-tag: 0.6875rem;

  /* Espacios */
  --section-y: clamp(5rem, 11vw, 10rem);
  --wrap-max: 1320px;
  --wrap-pad: clamp(1.25rem, 5vw, 4.5rem);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur: 0.9s;

  /* Grano fotográfico sutil */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

html {
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--verde-abismo);
  background: var(--blanco-hoja);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 380;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }

h2 em, .hero__tagline em, .band-cta__text em, .coverage__statement em {
  font-style: italic;
  font-weight: 340;
}

p { margin: 0; }

::selection { background: var(--verde-follaje); color: var(--verde-papel); }

/* Desplazamiento con margen para todas las secciones enlazables */
[id] { scroll-margin-top: 5.5rem; }

/* ── 02. UTILIDADES ───────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--verde-bosque);
  color: var(--verde-papel);
  padding: 0.75em 1.25em;
  font-size: 0.875rem;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

.tag {
  font-size: var(--fs-tag);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--verde-bosque);
  margin: 0 0 1.1rem;
}

.tag--light { color: var(--verde-neblina); }

.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 48rem; }

.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.section-head--split > div { max-width: 34rem; }

.section-head__note {
  max-width: 22rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding-bottom: 0.35rem;
}

/* Botones */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 1em 2em;
  border: 1px solid var(--verde-abismo);
  border-radius: 2px;
  color: var(--verde-abismo);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.btn:hover { background: var(--verde-abismo); color: var(--verde-papel); }

.btn--solid {
  background: var(--verde-bosque);
  border-color: var(--verde-bosque);
  color: var(--verde-papel);
}

.btn--solid:hover { background: var(--verde-follaje); border-color: var(--verde-follaje); color: var(--verde-papel); }

.btn--solid-light {
  background: var(--verde-papel);
  border-color: var(--verde-papel);
  color: var(--verde-bosque);
}

.btn--solid-light:hover { background: transparent; color: var(--verde-papel); border-color: var(--verde-papel); }

.btn--light {
  border-color: rgba(228, 239, 223, 0.55);
  color: var(--verde-papel);
}

.btn--light:hover { background: var(--verde-papel); border-color: var(--verde-papel); color: var(--verde-bosque); }

.btn--nav {
  background: var(--verde-bosque);
  border-color: var(--verde-bosque);
  color: var(--verde-papel);
  padding: 0.8em 1.5em;
}

.btn--nav:hover { background: var(--verde-follaje); border-color: var(--verde-follaje); }

/* Píldora oscura: CTA principal del detalle de servicio */
.btn--pill {
  border-radius: 999px;
  background: var(--gs-950);
  border-color: var(--gs-950);
  color: var(--gs-white);
  padding: 1.05em 2.1em;
}

.btn--pill:hover {
  background: var(--gs-lima);
  border-color: var(--gs-lima);
  color: var(--gs-950);
}

/* Enlaces subrayados */
.link-underline {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: 0.4em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out);
}

.link-underline:hover { background-size: 32% 1px; }

.link-underline--light { color: var(--verde-papel); }

/* ── Placeholder de fotografía ─────────────────────────────────
   Bloque verde que reserva el lugar de cada imagen real. Para
   sustituirlo, reemplace el <div class="ph"> por su <img>/<picture>
   conservando el contenedor y la proporción. */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--gs-900);
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* Círculos decorativos: recuerdan el trazo botánico de la marca */
.ph::before,
.ph::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(246, 251, 242, 0.22);
  pointer-events: none;
}

/* min() evita que los círculos se agranden de más en bloques muy anchos */
.ph::before {
  width: min(46%, 210px);
  aspect-ratio: 1;
  top: -13%;
  left: -5%;
}

.ph::after {
  width: min(32%, 148px);
  aspect-ratio: 1;
  bottom: -11%;
  right: 8%;
}

.ph__label {
  position: relative;
  z-index: 1;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 251, 242, 0.82);
  text-align: center;
  padding-inline: 1rem;
}

/* Variantes de color y proporción */
.ph--olive { background: var(--gs-olive); }

.ph--olive::before,
.ph--olive::after { border-color: rgba(20, 53, 42, 0.34); }

.ph--olive .ph__label { color: rgba(20, 53, 42, 0.78); }

/* Sobre secciones oscuras conviene un verde algo más claro */
.ph--onDark { background: var(--gs-700); }

.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 10; }
.ph--band { aspect-ratio: auto; height: 100%; border-radius: 0; }

/* Animación de entrada (solo si hay JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── 03. HEADER Y NAVEGACIÓN ──────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

/* Velo superior: garantiza legibilidad del logo blanco y del nav sobre zonas
   claras de la foto del hero. Se desvanece cuando el header adopta fondo claro. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(96px, 15vh, 168px);
  background: linear-gradient(to bottom, rgba(20, 53, 42, 0.62), rgba(20, 53, 42, 0.30) 45%, rgba(20, 53, 42, 0));
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.4s var(--ease-out);
}

.site-header.is-scrolled::before,
.site-header--solid::before { opacity: 0; }

.site-header__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: 0.85rem var(--wrap-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

/* Logotipo oficial: dos versiones (blanca/color) que alternan según el
   fondo del header (transparente sobre hero vs. claro al hacer scroll). */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--verde-papel);
  line-height: 1.05;
}

.brand__logo {
  display: block;
  width: auto;
  height: clamp(48px, 5.4vw, 64px);
}

.brand__logo--dark { display: none; }

/* La versión blanca vive sobre foto: sombra sutil para separarla de zonas claras */
.brand__logo--light { filter: drop-shadow(0 1px 8px rgba(20, 53, 42, 0.55)); }

.site-header.is-scrolled .brand__logo--light,
.site-header--solid .brand__logo--light { display: none; }

.site-header.is-scrolled .brand__logo--dark,
.site-header--solid .brand__logo--dark { display: block; }

/* Header siempre sólido claro (páginas internas sobre fondo claro) */
.site-header--solid {
  position: sticky;
  background: rgba(246, 251, 242, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-dark);
}

.site-header--solid .site-nav a { color: var(--verde-abismo); }
.site-header--solid .nav-toggle__line { background: var(--verde-abismo); }

/* Header sólido oscuro (detalle de servicio, sobre fondo verde profundo) */
.site-header--dark {
  position: sticky;
  background: rgba(20, 53, 42, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(228, 239, 223, 0.16);
}

.site-header--dark .brand__logo--light { display: block; filter: none; }
.site-header--dark .brand__logo--dark { display: none; }
.site-header--dark .site-nav a { color: var(--gs-ivory); text-shadow: none; }
.site-header--dark .nav-toggle__line { background: var(--gs-ivory); }

/* Sobre header oscuro el botón se invierte para no perderse */
.site-header--dark .btn--nav {
  background: var(--gs-ivory);
  border-color: var(--gs-ivory);
  color: var(--gs-900);
}

.site-header--dark .btn--nav:hover {
  background: var(--gs-lima);
  border-color: var(--gs-lima);
  color: var(--gs-950);
}

/* Fondo de página oscuro: evita destellos claros al hacer scroll */
body.page-dark { background: var(--gs-950); }

.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 420;
  letter-spacing: 0.01em;
}

.brand__cr { font-style: italic; font-weight: 340; }

.brand__descriptor {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  margin-top: 0.28em;
  color: var(--verde-neblina);
  transition: color 0.4s var(--ease-out);
}

.site-nav__list {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--verde-papel);
  padding-bottom: 0.35em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease-out), color 0.4s var(--ease-out);
}

.site-nav a:hover { background-size: 100% 1px; }

.lang-toggle {
  flex: 0 0 auto;
  min-width: 2.8rem;
  min-height: 2.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(246, 251, 242, 0.65);
  border-radius: 999px;
  background: rgba(20, 53, 42, 0.14);
  color: var(--verde-papel);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.lang-toggle:hover {
  background: var(--verde-papel);
  border-color: var(--verde-papel);
  color: var(--verde-abismo);
  transform: translateY(-1px);
}

.site-header.is-scrolled .lang-toggle,
.site-header--solid .lang-toggle {
  background: transparent;
  border-color: rgba(20, 53, 42, 0.38);
  color: var(--verde-abismo);
}

.site-header.is-scrolled .lang-toggle:hover,
.site-header--solid .lang-toggle:hover {
  background: var(--verde-bosque);
  border-color: var(--verde-bosque);
  color: var(--verde-papel);
}

.site-header--dark .lang-toggle {
  background: transparent;
  border-color: rgba(246, 251, 242, 0.65);
  color: var(--verde-papel);
}

.site-header--dark .lang-toggle:hover {
  background: var(--verde-papel);
  border-color: var(--verde-papel);
  color: var(--verde-abismo);
}

/* Sobre el hero (header transparente): sombra tenue para asegurar contraste */
.site-header:not(.is-scrolled):not(.site-header--solid) .site-nav a {
  text-shadow: 0 1px 12px rgba(20, 53, 42, 0.5);
}

/* Estado al hacer scroll: fondo marfil, texto oscuro */
.site-header.is-scrolled {
  background: rgba(246, 251, 242, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-dark);
}

.site-header.is-scrolled .brand { color: var(--verde-bosque); }
.site-header.is-scrolled .brand__descriptor { color: var(--verde-bosque); }
.site-header.is-scrolled .site-nav a { color: var(--verde-abismo); }

/* Hamburguesa */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
}

.nav-toggle__line {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--verde-papel);
  margin: 7px 0;
  transition: transform 0.35s var(--ease-out), background-color 0.4s var(--ease-out);
}

.site-header.is-scrolled .nav-toggle__line { background: var(--verde-abismo); }

body.menu-open .nav-toggle__line { background: var(--verde-papel); }
body.menu-open .nav-toggle__line:first-child { transform: translateY(4.25px) rotate(45deg); }
body.menu-open .nav-toggle__line:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ── 04. MENÚ MÓVIL ───────────────────────────────────────────── */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--verde-abismo);
  color: var(--verde-papel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem var(--wrap-pad) 3rem;
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform 0.55s var(--ease-out), visibility 0s 0.55s;
}

body.menu-open .mobile-menu {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.55s var(--ease-out), visibility 0s;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__list a {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  font-weight: 360;
  color: var(--verde-papel);
  text-decoration: none;
  padding: 0.32em 0;
  border-bottom: 1px solid var(--line-light);
}

.mobile-menu__list a em {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--verde-neblina);
  vertical-align: super;
  margin-right: 0.9em;
}

.mobile-menu__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.mobile-menu__foot p {
  font-size: 0.8125rem;
  color: var(--text-muted-light);
  text-align: right;
}

/* ── 05. HERO ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--verde-papel);
  background: var(--verde-abismo);
  overflow: hidden;
  padding: 7rem var(--wrap-pad) 6rem;
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* Contexto de apilamiento propio: mantiene los z-index de los velos DENTRO
     del fondo, para que nunca se pinten sobre el texto ni bloqueen los clics.
     `isolation` además limita la mezcla del baño verde a la fotografía. */
  z-index: 0;
  isolation: isolate;
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto ya viene con las altas luces comprimidas; este realce devuelve
     cuerpo a los medios para que el paisaje no se vea lavado bajo el velo. */
  filter: saturate(1.08) contrast(1.05);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__bg img {
    transform: scale(1.08);
    animation: hero-zoom 4.5s var(--ease-out) forwards;
  }
}

@keyframes hero-zoom {
  to { transform: scale(1); }
}

/* Orden de capas del hero (de abajo hacia arriba): foto → baño verde →
   scrim → grano. La foto lleva transform/animation, así que se pinta como
   elemento apilado: sin estos z-index taparía a los velos que van sobre ella. */

/* Scrim con forma: se concentra en la columna central —donde vive el texto—
   y se desvanece hacia los bordes, de modo que el paisaje sigue visible a
   izquierda y derecha. Las bandas superior e inferior protegen el header y
   el pie del hero. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(60% 52% at 50% 47%, rgba(20, 53, 42, 0.50), rgba(20, 53, 42, 0.20) 58%, rgba(20, 53, 42, 0) 86%),
    linear-gradient(to bottom, rgba(20, 53, 42, 0.34) 0%, rgba(20, 53, 42, 0.03) 26%, rgba(20, 53, 42, 0.03) 66%, rgba(20, 53, 42, 0.42) 100%);
}

/* Baño verde de marca: tiñe la fotografía sin apagarla (opacidad baja).
   `color` conserva la luz y el detalle de la foto, solo desplaza el tono. */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gs-700);
  opacity: 0.44;
  mix-blend-mode: color;
  pointer-events: none;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
}

/* Logotipo oficial (versión blanca) dentro del hero */
.hero__logo {
  display: block;
  width: auto;
  height: clamp(58px, 12vw, 104px);
  margin: 0 auto clamp(1.6rem, 3.5vh, 2.8rem);
  filter: drop-shadow(0 2px 18px rgba(20, 53, 42, 0.45));
}

.hero__title {
  font-family: var(--font-serif);
  color: var(--verde-papel);
  font-size: var(--fs-hero);
  font-weight: 320;
  letter-spacing: -0.01em;
  line-height: 0.96;
  text-shadow: 0 2px 34px rgba(20, 53, 42, 0.42);
}

.hero__title em { font-style: italic; font-weight: 300; color: var(--verde-neblina); }

.hero__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 350;
  font-style: italic;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  color: var(--verde-papel);
  text-shadow: 0 1px 18px rgba(20, 53, 42, 0.5);
}

.hero__text {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  /* Marfil sólido (no al 75%): es texto corrido sobre foto y necesita
     el contraste completo para cumplir AA. */
  color: var(--gs-white);
  text-shadow: 0 1px 18px rgba(20, 53, 42, 0.6);
}

.hero__actions {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  flex-wrap: wrap;
}

.hero__foot {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--wrap-pad) 2rem;
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--text-muted-light);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.hero__scroll-line {
  width: 1px;
  height: 52px;
  background: rgba(228, 239, 223, 0.35);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--verde-papel);
  transform-origin: top;
  animation: scroll-cue 2.4s var(--ease-out) infinite;
}

@keyframes scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__wa {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 239, 223, 0.3);
  padding-bottom: 0.35em;
  transition: color 0.3s, border-color 0.3s;
}

.hero__wa:hover { color: var(--verde-papel); border-color: var(--verde-papel); }

/* ── 06. INTRODUCCIÓN ─────────────────────────────────────────── */

.intro {
  background: var(--verde-papel);
  padding-block: var(--section-y);
}

.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.intro__copy { grid-column: 1 / 8; }

.intro__title { max-width: 15em; }

.intro__text {
  max-width: 34rem;
  margin: 1.6rem 0 2.4rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--text-muted);
}

.intro__figure {
  grid-column: 9 / 13;
  margin: 0;
}

.hero__bg picture,
.featured__media picture,
.events__media picture,
.sd__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.intro__figure picture {
  display: block;
}

.intro__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
}


.intro__figure figcaption,
.about figcaption,
.featured__detail figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.9rem;
}

/* ── 07. REWILDING (EJE CENTRAL) ──────────────────────────────── */

.rewild {
  position: relative;
  color: var(--verde-papel);
  background: var(--verde-abismo);
  padding-block: clamp(5rem, 12vw, 11rem);
  overflow: hidden;
}

.rewild__bg { position: absolute; inset: 0; }

.rewild__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.9);
}

.rewild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(20, 53, 42, 0.92) 40%, rgba(20, 53, 42, 0.72));
}

.rewild__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.rewild__head { grid-column: 1 / 7; }

.rewild__title {
  color: var(--verde-papel);
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1;
  font-weight: 330;
}

.rewild__title em { color: var(--lima-electrico); font-weight: 320; }

.rewild__body { grid-column: 7 / 13; }

.rewild__lead {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 350;
  line-height: 1.35;
  color: var(--verde-papel);
  margin-bottom: 1.4rem;
}

.rewild__text {
  color: var(--text-muted-light);
  max-width: 40rem;
}

.rewild__points {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 2.5rem;
}

.rewild__points li {
  display: flex;
  gap: 0.9rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line-light);
  font-size: 0.9375rem;
  color: var(--verde-papel);
}

.rewild__points span {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--verde-brote);
  font-size: 0.9rem;
}

/* ── 08. NOSOTROS ─────────────────────────────────────────────── */

.about {
  background: var(--blanco-hoja);
  padding-block: var(--section-y);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}

/* Columna de imágenes: se apilan sin dejar huecos en blanco al lado */
.about__media {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  align-content: start;
}

.about__media picture {
  display: block;
}

.about__founders-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.about__img-main,
.about__img-side {
  margin: 0;
}

.about__copy {
  align-self: center;
  display: grid;
  gap: 1.4rem;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
}

.about__copy strong { font-weight: 600; }

.about__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.about__list li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line-dark);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── 09. MARQUEE ──────────────────────────────────────────────── */

.marquee {
  background: var(--gs-olive-300);
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-block: 1px solid rgba(20, 53, 42, 0.16);
}

.marquee__track {
  display: inline-flex;
  align-items: baseline;
  gap: 2.6rem;
  white-space: nowrap;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 48s linear infinite; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

.marquee__track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 330;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--gs-950);
}

.marquee__track i {
  font-style: normal;
  color: var(--gs-700);
  font-size: 1.2rem;
}

/* ── 10. ÍNDICE DE SERVICIOS ──────────────────────────────────── */

.svc-index {
  background: var(--verde-papel);
  padding-block: var(--section-y);
}

.svc-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}

.svc-index__item {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  color: var(--verde-abismo);
  transition: padding-left 0.4s var(--ease-out);
}

.svc-index__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 1rem;
  color: var(--verde-follaje);
}

.svc-index__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
}

.svc-index__name {
  font-family: var(--font-serif);
  font-weight: 390;
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  line-height: 1.15;
  transition: color 0.3s var(--ease-out);
}

.svc-index__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.svc-index__arrow {
  position: relative;
  width: 26px;
  height: 10px;
  justify-self: end;
  opacity: 0.5;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}

.svc-index__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.svc-index__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.svc-index__item:hover,
.svc-index__item:focus-visible {
  padding-left: 1.1rem;
  outline: none;
}

.svc-index__item:hover .svc-index__name,
.svc-index__item:focus-visible .svc-index__name { color: var(--verde-follaje); }

.svc-index__item:hover .svc-index__arrow,
.svc-index__item:focus-visible .svc-index__arrow {
  transform: translateX(0.5rem);
  opacity: 1;
  color: var(--verde-follaje);
}

.svc-index__item:focus-visible { box-shadow: inset 3px 0 0 var(--verde-follaje); }

/* Tarjetas de servicio: cada una redirige a su pantalla de detalle */
.svc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--blanco-hoja);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  text-decoration: none;
  color: var(--verde-abismo);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.svc-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 1rem;
  color: var(--verde-follaje);
}

.svc-card__name {
  font-family: var(--font-serif);
  font-weight: 390;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  transition: color 0.3s var(--ease-out);
}

.svc-card__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex: 1 1 auto;
}

.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--verde-bosque);
}

.svc-card__arrow {
  position: relative;
  width: 22px;
  height: 8px;
  transition: transform 0.35s var(--ease-out);
}

.svc-card__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.svc-card__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.svc-card:hover,
.svc-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--verde-follaje);
  box-shadow: 0 14px 34px rgba(20, 53, 42, 0.12);
  outline: none;
}

.svc-card:hover .svc-card__name,
.svc-card:focus-visible .svc-card__name { color: var(--verde-follaje); }

.svc-card:hover .svc-card__arrow,
.svc-card:focus-visible .svc-card__arrow { transform: translateX(4px); }

.svc-card:focus-visible { box-shadow: 0 0 0 3px rgba(47, 122, 85, 0.4); }

@media (max-width: 900px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .svc-cards { grid-template-columns: 1fr; }
}

/* ── 11. SECCIONES DETALLADAS DE SERVICIOS ────────────────────── */

.svc { padding-block: clamp(4rem, 9vw, 8rem); }

.svc--light { background: var(--blanco-hoja); }
.svc--paper { background: var(--verde-papel); }
.svc--mist  { background: var(--verde-neblina); }
.svc--dark  { background: var(--verde-abismo); color: var(--verde-papel); }

.svc--dark .svc__title { color: var(--verde-papel); }
.svc--dark .svc__title em { color: var(--verde-neblina); }
.svc--dark .svc__lead { color: var(--text-muted-light); }
.svc--dark .svc__num { color: var(--verde-brote); }
.svc--dark .svc__scope li { color: var(--verde-papel); border-color: var(--line-light); }

.svc__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.svc--reverse .svc__text { order: 2; }
.svc--reverse .svc__media { order: 1; }

.svc__text { max-width: 34rem; }

.svc__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--verde-follaje);
  margin-bottom: 1rem;
}

.svc__title { margin-bottom: 1.4rem; }
.svc__title em { color: var(--verde-follaje); }

.svc__lead {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
}

.svc__scope {
  list-style: none;
  margin: 1.8rem 0 2.2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc__scope li {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--verde-bosque);
  border: 1px solid rgba(47, 122, 85, 0.35);
  border-radius: 999px;
  padding: 0.4em 0.95em;
}

.svc__cta { margin-top: 0.3rem; }

/* Composición de imágenes */
.svc__media { display: grid; gap: clamp(0.7rem, 1.4vw, 1.1rem); }

.svc__fig { margin: 0; overflow: hidden; }

.svc__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.svc__fig:hover img { transform: scale(1.04); }

/* Dúo: dos imágenes lado a lado */
.svc__media--duo { grid-template-columns: 1fr 1fr; }
.svc__media--duo .svc__fig img { aspect-ratio: 4 / 5; }

/* Trío: una grande arriba + dos pequeñas */
.svc__media--trio {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "lead lead" "a b";
}
.svc__media--trio .svc__fig--lead { grid-area: lead; }
.svc__media--trio .svc__fig--lead img { aspect-ratio: 16 / 10; }
.svc__media--trio .svc__fig:not(.svc__fig--lead) img { aspect-ratio: 1 / 1; }

/* Variante alta para imágenes verticales */
.svc__media--duo .svc__fig--tall img { aspect-ratio: 3 / 5; }

/* ── 12. BANDA CTA ────────────────────────────────────────────── */

.band-cta {
  background: var(--verde-oliva-proyecto);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.band-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.band-cta__text {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--gs-950);
  max-width: 22em;
}

.band-cta__text em { color: var(--gs-900); }

/* ── 13. PROYECTO DESTACADO (CORPORATIVO BAC) ─────────────────── */

.featured {
  background: var(--gs-white);
  color: var(--gs-charcoal);
  padding-bottom: var(--section-y);
}

.featured__media {
  margin: 0;
  height: min(58vh, 480px);
  overflow: hidden;
}

.featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.featured__body {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.featured__intro { max-width: 46rem; }

.featured__intro h2 { color: var(--gs-950); margin: 1.2rem 0 1.5rem; }
.featured__intro h2 em { color: var(--gs-700); }

.featured__intro > p { color: var(--text-muted); }

.featured__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}

.featured__cols h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-tag);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gs-700);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
  margin-bottom: 0.8rem;
}

.featured__cols p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── 13b. EVENTOS Y ALQUILER DE PLANTAS ───────────────────────── */

.events {
  background: var(--gs-ivory);
  color: var(--gs-charcoal);
  padding-block: var(--section-y);
}

.events__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.events__media {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}

.events__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 55%;
}


.events__copy h2 { color: var(--gs-950); margin-bottom: 1.4rem; }
.events__copy h2 em { color: var(--gs-700); }

.events__lead {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  max-width: 34rem;
}

.events__scope {
  list-style: none;
  margin: 1.8rem 0 2.2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.events__scope li {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gs-900);
  border: 1px solid rgba(47, 122, 85, 0.35);
  border-radius: 999px;
  padding: 0.4em 0.95em;
}

@media (max-width: 820px) {
  .events__grid { grid-template-columns: 1fr; }
  .events__media { order: -1; }
}

/* ── 14. PROCESO ──────────────────────────────────────────────── */

.process {
  background: var(--verde-papel);
  padding-block: var(--section-y);
}

.process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}

.process__step {
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) minmax(0, 40rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 3.6vw, 2.8rem) 0;
  border-top: 1px solid var(--line-dark);
}

.process__step:last-child { border-bottom: 1px solid var(--line-dark); }

/* Sangrías alternadas: el bloque de texto se desplaza en cada paso */
.process__step:nth-child(even) .process__body { grid-column: 2; transform: translateX(clamp(0px, 6vw, 5rem)); }

.process__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: var(--verde-follaje);
}

.process__body { grid-column: 2; }

.process__body h3 { margin-bottom: 0.6rem; }

.process__body p { color: var(--text-muted); }

.process__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--verde-bosque);
  background: var(--verde-neblina);
  border-radius: 999px;
  padding: 0.35em 0.9em;
}

.process__step--optional .process__num { color: var(--verde-brote); }

/* ── 15. DIFERENCIADORES ──────────────────────────────────────── */

.values {
  background: var(--blanco-hoja);
  padding-block: var(--section-y);
}

.values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.value {
  background: var(--blanco-hoja);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.value__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--verde-follaje);
}

.value h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.2;
}

.value p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.value--wide { grid-column: span 3; flex-direction: row; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.value--wide h3 { flex: 0 0 auto; max-width: 22rem; }
.value--wide p { flex: 1 1 20rem; }

/* ── 16. CLIENTES ─────────────────────────────────────────────── */

.clients {
  background: var(--verde-bosque);
  color: var(--verde-papel);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.clients__head { grid-column: 1 / 6; }
.clients__head h2 { color: var(--verde-papel); }
.clients__head h2 em { color: var(--lima-electrico); }
.clients__text { margin-top: 1.2rem; color: var(--text-muted-light); }

.clients__tags {
  grid-column: 6 / 13;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.clients__tags li {
  font-size: 0.875rem;
  color: var(--verde-papel);
  border: 1px solid rgba(228, 239, 223, 0.35);
  border-radius: 999px;
  padding: 0.5em 1.15em;
}

/* ── 17. COBERTURA ────────────────────────────────────────────── */

.coverage {
  position: relative;
  min-height: min(56vh, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 50%, var(--gs-white), rgba(246, 251, 242, 0) 72%),
    var(--gs-olive-300);
}

/* Trazo botánico sutil de fondo, en lugar de fotografía */
.coverage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(20, 53, 42, 0.16);
  pointer-events: none;
}

.coverage__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem var(--wrap-pad);
}

.coverage__statement {
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.2;
  color: var(--gs-950);
  max-width: 18em;
  margin-inline: auto;
}

.coverage__statement em { color: var(--gs-700); }

.coverage__note {
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── 18. COTIZACIÓN ───────────────────────────────────────────── */

.quote {
  background: var(--verde-papel);
  padding-block: var(--section-y);
}

.quote__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.quote__intro { grid-column: 1 / 6; }

.quote__intro > p {
  margin-top: 1.5rem;
  color: var(--text-muted);
  max-width: 26rem;
}

.quote__wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.8rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--verde-bosque);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 53, 42, 0.3);
  padding-bottom: 0.3em;
  transition: color 0.3s, border-color 0.3s;
}

.quote__wa-link:hover { color: var(--verde-follaje); border-color: var(--verde-follaje); }

.quote__aside {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Formulario */
.form {
  grid-column: 6 / 13;
  display: grid;
  gap: 1.9rem;
}

.form__hp { position: absolute; left: -9999px; }

.form__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.9rem 2.5rem;
}

.form__field label,
.form__radios legend {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--verde-bosque);
  margin-bottom: 0.55rem;
}

.form__field label span {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--text-muted);
}

.form__field input[type="text"],
.form__field input[type="tel"],
.form__field input[type="email"],
.form__field select,
.form__field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--verde-abismo);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 53, 42, 0.3);
  border-radius: 0;
  padding: 0.6em 0;
  transition: border-color 0.3s;
}

.form__field textarea { resize: vertical; min-height: 6.5rem; }

.form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314352A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2em center;
  padding-right: 1.8em;
  cursor: pointer;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-bottom: 1.5px solid var(--verde-follaje);
}

.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  outline: 2px solid var(--verde-follaje);
  outline-offset: 4px;
}

.form__field input::placeholder,
.form__field textarea::placeholder { color: rgba(20, 53, 42, 0.35); }

/* Campo con error */
.form__field.has-error input,
.form__field.has-error select,
.form__field.has-error textarea { border-bottom-color: var(--error); }

.form__error {
  display: none;
  font-size: 0.8125rem;
  color: var(--error);
  margin-top: 0.5rem;
}

.form__field.has-error .form__error { display: block; }

.form__hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

input[type="file"] {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding-top: 0.4em;
}

input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--verde-bosque);
  background: transparent;
  border: 1px solid var(--verde-bosque);
  border-radius: 2px;
  padding: 0.7em 1.4em;
  margin-right: 1em;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

input[type="file"]::file-selector-button:hover {
  background: var(--verde-bosque);
  color: var(--verde-papel);
}

.form__radios {
  border: 0;
  margin: 0;
  padding: 0;
}

.form__radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 2rem 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--verde-abismo);
  cursor: pointer;
}

.form__radios input,
.form__consent input {
  accent-color: var(--verde-follaje);
  width: 1.05rem;
  height: 1.05rem;
}

.form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

.form__consent input { flex-shrink: 0; margin-top: 0.15rem; }

.form__status {
  display: none;
  font-size: 0.9375rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--error);
  background: var(--error-bg);
  color: var(--error-dark);
}

.form__status.is-error { display: block; }

.form .btn { justify-self: start; }

/* Confirmación de envío */
.form-success {
  grid-column: 6 / 13;
  align-self: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--blanco-hoja);
  border-top: 2px solid var(--verde-follaje);
}

.form-success h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

.form-success p { color: var(--text-muted); margin-bottom: 1rem; max-width: 34rem; }

.form-success .btn { margin-top: 0.5rem; }

/* ── 19. CONTACTO ─────────────────────────────────────────────── */

.contact {
  background: var(--gs-white);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.contact__col .tag { margin-bottom: 0.7rem; }

.contact__col a,
.contact__col p {
  font-family: var(--font-serif);
  font-weight: 360;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--gs-950);
  text-decoration: none;
  line-height: 1.4;
}

.contact__col a {
  background-image: linear-gradient(var(--gs-700), var(--gs-700));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease-out), color 0.3s;
}

.contact__col a:hover { color: var(--gs-700); background-size: 100% 1px; }

.contact__col p span {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* ── 20. FOOTER ───────────────────────────────────────────────── */

/* Único bloque oscuro del recorrido: cierra la página y separa el pie
   de la sección de contacto, que ahora es clara. */
.footer {
  background: var(--gs-950);
  color: var(--text-muted-light);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
  overflow: hidden;
}

/* Firma de marca en Fraunces itálica —la misma voz de los titulares—,
   legible y en verde claro, no como marca de agua. */
.footer__wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.7rem, 4vw, 3rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--gs-olive-300);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line-light);
  user-select: none;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-light);
}

.footer__logo {
  display: block;
  width: auto;
  height: clamp(64px, 7vw, 86px);
  margin-bottom: 1.2rem;
}

.footer__col p { font-size: 0.9375rem; }

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9375rem;
}

.footer__col a {
  color: var(--text-muted-light);
  text-decoration: none;
  transition: color 0.3s;
}

.footer__col a:hover { color: var(--verde-papel); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(228, 239, 223, 0.62);
}

/* ── 20b. DETALLE DE SERVICIO (servicio.html) ─────────────────── */

.sd {
  background: var(--gs-white);
  color: var(--gs-charcoal);
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

/* Bandas editoriales de las páginas SEO de servicios. Conservan la paleta
   existente y separan visualmente cada bloque sin añadir elementos decorativos. */
.page-service .sd { padding-block: 0; }

.sd__hero-band {
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6.5rem);
  background: var(--gs-white);
}

.sd__overview-band {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--gs-ivory);
  border-block: 1px solid var(--line-dark);
}

.sd__related-band {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--gs-white);
}

.sd__conversion-band {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--verde-neblina);
  border-top: 1px solid var(--line-dark);
}

.sd__num {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gs-700);
  margin-bottom: 1.1rem;
}

.sd__title {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  font-weight: 340;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--gs-950);
  max-width: 14em;
}

/* Galería de las 3 fotografías reales de cada servicio */
.sd__gallery {
  margin: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
}

.page-service .sd__gallery { margin-bottom: 0; }

.sd__breadcrumbs {
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gs-700);
}

.sd__breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd__breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: rgba(47, 122, 85, 0.5);
}

.sd__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sd__breadcrumbs a:hover { border-color: currentColor; }

.sd__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  background: var(--gs-900);
}

.sd__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.sd__photo:hover img { transform: scale(1.025); }

.sd__desc {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--gs-950);
  max-width: 28em;
}

.sd__scope {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-dark);
}

.sd__scope-title,
.sd__related-title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 360;
  color: var(--gs-950);
}

.sd__scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 54rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.sd__scope-list li {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--gs-900);
}

.sd__scope-list li::before {
  content: "·";
  margin-right: 0.65rem;
  color: var(--gs-500);
}

.sd__related {
  margin-top: clamp(2.4rem, 5vw, 4rem);
}

.page-service .sd__related { margin-top: 0; }

.sd__related-intro {
  max-width: 40rem;
  margin-top: 0.65rem;
  color: var(--gs-700);
}

.sd__related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.sd__related-list a {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--gs-900);
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.sd__related-list a:hover {
  border-color: var(--gs-500);
  background: var(--gs-ivory);
  color: var(--gs-700);
}

/* Invitación a cotización */
.sd__cta {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.4rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 10px;
  background: var(--gs-ivory);
}

.page-service .sd__cta {
  margin-top: 0;
  background: var(--gs-white);
  box-shadow: 0 18px 50px rgba(20, 53, 42, 0.08);
}

.sd__cta-tag {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gs-700);
  margin-bottom: 0.7rem;
}

.sd__cta-title {
  font-family: var(--font-serif);
  font-weight: 360;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--gs-950);
  max-width: 12em;
}

.sd__cta-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  flex-wrap: wrap;
}

.sd__cta-link {
  font-size: 0.8125rem;
  color: var(--gs-900);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 122, 85, 0.5);
  padding-bottom: 0.25em;
  transition: color 0.3s, border-color 0.3s;
}

.sd__cta-link:hover { color: var(--gs-700); border-color: var(--gs-700); }

/* Volver */
.sd__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gs-900);
  text-decoration: none;
  transition: color 0.3s;
}

.sd__back:hover { color: var(--gs-700); }

.sd__back-arrow {
  position: relative;
  width: 20px;
  height: 8px;
}

.sd__back-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.sd__back-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 820px) {
  .sd__cta { align-items: flex-start; }
  .sd__cta-title { max-width: none; }
  .sd__related-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .sd__gallery { grid-template-columns: 1fr 1fr; }
  /* La tercera imagen ocupa el ancho completo para no dejar un hueco */
  .sd__gallery > :last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .sd__cta-actions { width: 100%; }
  .sd__cta-actions .btn { width: 100%; text-align: center; }
  .sd__scope-list { grid-template-columns: 1fr; }
}

/* ── 21. WHATSAPP FLOTANTE ────────────────────────────────────── */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 80;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--verde-follaje);
  color: var(--verde-papel);
  box-shadow: 0 6px 24px rgba(20, 53, 42, 0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), background-color 0.3s;
}

.wa-float.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wa-float:hover { background: var(--verde-bosque); }

/* ── 22. RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .btn--nav { display: none; }
  .nav-toggle { display: block; }

  .intro__copy { grid-column: 1 / 8; }
  .intro__figure { grid-column: 8 / 13; }

  .rewild__head { grid-column: 1 / 13; }
  .rewild__body { grid-column: 1 / 13; }

  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .value--wide { grid-column: span 2; }

  .clients__head { grid-column: 1 / 13; }
  .clients__tags { grid-column: 1 / 13; }

  .quote__grid { grid-template-columns: 1fr; }
  .quote__intro { grid-column: 1; max-width: 34rem; }
  .form { grid-column: 1; }
  .form-success { grid-column: 1; }

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

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__copy { grid-column: 1; }
  /* A una columna la figura ocupa todo el ancho: si se reduce y se alinea
     a la derecha queda un hueco vacío a su izquierda. */
  .intro__figure { grid-column: 1; max-width: none; justify-self: stretch; }
  .intro__figure .intro__image { aspect-ratio: 16 / 10; }

  .rewild__points { grid-template-columns: 1fr; gap: 0; }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }

  .svc__inner { grid-template-columns: 1fr; gap: 2rem; }
  .svc--reverse .svc__text,
  .svc--reverse .svc__media { order: 0; }
  .svc__text { max-width: none; }

  .featured__cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .featured__media { height: min(42vh, 320px); }

  .process__step { grid-template-columns: 3.5rem 1fr; }
  .process__step:nth-child(even) .process__body { transform: none; }

  .clients__grid { grid-template-columns: 1fr; }

  .form__row--2 { grid-template-columns: 1fr; }

  .contact__grid { grid-template-columns: 1fr; gap: 1.8rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }

  .hero__foot { justify-content: center; }
  .hero__wa { display: none; }
}

@media (max-width: 560px) {
  .svc-index__item { grid-template-columns: 2.5rem 1fr auto; gap: 0.9rem; }
  .svc-index__text { flex-direction: column; gap: 0.15rem; }
  .svc-index__arrow { width: 20px; }

  .values__grid { grid-template-columns: 1fr; }

  /* En columna, `flex: 1 1 20rem` pasa a ser ALTO mínimo y deja un hueco
     enorme dentro de la tarjeta: aquí el contenido manda. */
  .value--wide { grid-column: span 1; flex-direction: column; }
  .value--wide h3 { max-width: none; }
  .value--wide p { flex: 0 1 auto; }

  .svc__media--trio { grid-template-areas: "lead lead" "a b"; }
}


/* ── 23. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO ──────────────────── */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--verde-follaje);
  outline-offset: 3px;
}

.site-header:not(.is-scrolled) a:focus-visible,
.hero a:focus-visible,
.rewild a:focus-visible,
.svc--dark a:focus-visible,
.btn--light:focus-visible,
.clients a:focus-visible,
.mobile-menu a:focus-visible {
  outline-color: var(--verde-papel);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .hero__scroll-line::after { display: none; }
}