/* itatí Agroinversiones — clon fiel de itatiagro.com
   Paleta extraída del kit de Elementor real del sitio (post-5.css):
   fondo #0A1716, acentos #61CE70 / #BDE589, texto #7A7A7A, énfasis #eaffcf.
   Tipografía: Mersad (autohosteada, ver assets/fonts/), provista por Margarita. */

@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-100.woff2") format("woff2"),
       url("fonts/mersad-100.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-200.woff2") format("woff2"),
       url("fonts/mersad-200.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-300.woff2") format("woff2"),
       url("fonts/mersad-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-400.woff2") format("woff2"),
       url("fonts/mersad-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-500.woff2") format("woff2"),
       url("fonts/mersad-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-600.woff2") format("woff2"),
       url("fonts/mersad-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-700.woff2") format("woff2"),
       url("fonts/mersad-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-800.woff2") format("woff2"),
       url("fonts/mersad-800.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("fonts/mersad-900.woff2") format("woff2"),
       url("fonts/mersad-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a1716;
  --bg-alt: #0f1d1b;
  --bg-card: #12211f;
  --verde: #61ce70;
  --lima: #bde589;
  --crema: #eaffcf;
  --texto: #c7d0c9;
  --texto-suave: #7a7a7a;
  --borde: #223330;
  --radio: 6px;
  --max-width: 1140px;
  --font: "Mersad", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

::selection { background: var(--verde); color: #0a1716; }

/* Foco visible solo para navegación por teclado — evita el anillo por defecto del
   navegador (que no calza con la paleta) sin sacrificar accesibilidad al tabular. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Los controles de formulario (input, button, textarea, select) no heredan la
   tipografía del body por defecto en ningún navegador — sin esto usan la fuente del
   sistema (ej. Arial) en vez de Mersad. */
input, button, textarea, select { font-family: inherit; }

/* Animación de entrada (igual al fadeInUp/fadeIn que usa Elementor en el sitio real):
   el JS agrega .reveal a los bloques principales y .is-visible cuando entran en pantalla. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fundido de entrada para imágenes con loading="lazy": sin esto, la foto aparece de
   golpe apenas termina de cargar (a veces después de que la tarjeta ya es visible),
   lo que se siente como una carga trabada. El JS agrega .img-cargada en el evento load. */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .45s ease;
}
img[loading="lazy"].img-cargada {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  padding-top: 88px;
  font-family: var(--font);
  font-weight: 400;
  color: var(--texto);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.22; max-width: 46ch; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a { color: inherit; }

strong, b { color: var(--crema); font-weight: 500; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Calcado del sitio real: sin mayúsculas, sin letter-spacing, peso normal y el verde
   claro (lima), no el verde oscuro que tenía antes. */
.eyebrow {
  font-family: var(--font);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 400;
  color: var(--lima);
  margin: 0 0 .9em;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  /* Fuerza a Chrome a componer el header en su propia capa GPU desde el primer
     pintado. Sin esto, en el primer render a veces se ve un destello del fondo
     oscuro de la página detrás del header, que se autocorrige apenas se dispara
     un scroll y Chrome recalcula la composición. */
  transform: translateZ(0);
  will-change: transform;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  max-width: none;
  padding: 0 64px;
}

.logo { display: flex; align-items: center; }
.logo img { display: block; height: 51px; width: auto; }

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
  color: var(--texto);
  transition: color .2s ease;
}

.nav a:hover, .nav a.is-active { color: var(--lima); }

/* Botón hamburguesa — oculto en desktop, la nav se muestra siempre en línea */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: none;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--crema);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn {
  display: inline-block;
  padding: .8em 1.6em;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--lima);
  color: #0a1716;
}

.btn-primary:hover { background: var(--crema); transform: translateY(-1px); }

.btn-ghost {
  border-color: rgba(234, 255, 207, .4);
  color: var(--crema);
}

.btn-ghost:hover { border-color: var(--lima); color: var(--lima); transform: translateY(-1px); }

.btn-small { padding: .6em 1.2em; font-size: .85rem; }

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.hero-video {
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-video.is-visible { opacity: 1; }

/* Los videos de ficha de campo van directo en el HTML (ya livianos, sin carga diferida),
   así que se muestran apenas cargan — no dependen de que un JS les agregue .is-visible. */
.campo-hero-video { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 23, 22, .92) 0%, rgba(10, 23, 22, .55) 45%, rgba(10, 23, 22, .35) 100%);
}

.hero-hard-edge .hero-overlay,
#inicio .hero-overlay {
  background: rgba(10, 23, 22, .6);
}

/* El header es transparente: subimos el hero por debajo para que la foto/video
   arranque desde el borde superior real de la pantalla, no desde abajo del header. */
.hero-hard-edge,
#inicio {
  margin-top: -88px;
}

.hero-align-bottom { align-items: flex-end; }

.hero-content {
  position: relative;
  z-index: 1;
  padding: 120px 24px 64px;
}

.hero h1 { margin-bottom: .15em; }
.hero h1 + h1 { color: var(--texto); font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin-bottom: 1.4em; max-width: 36ch; }

/* Hero del home: color crema cálido, tamaño moderado y todo centrado. */
#inicio h1 {
  color: #fef7e5;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  animation: hero-title-up .9s cubic-bezier(.16,.84,.44,1) both;
}
#inicio h1 + h1 {
  color: #fef7e5;
  font-weight: 700;
  font-size: clamp(.95rem, 1.9vw, 1.3rem);
  animation: hero-title-up .9s cubic-bezier(.16,.84,.44,1) both;
}

@keyframes hero-title-up {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #inicio h1, #inicio h1 + h1 { animation: none; }
}
#inicio .hero-content {
  text-align: center;
}
#inicio .hero-content > * {
  margin-left: auto;
  margin-right: auto;
}
#inicio .hero-cta {
  justify-content: center;
}

.hero .lead {
  font-size: 1.05rem;
  max-width: 52ch;
  color: var(--texto);
}

.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 1.8em;
  flex-wrap: wrap;
}

.hero-lead-section .lead {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  font-size: 1.25rem;
  color: var(--crema);
}

/* Preview cards (Campos / Proyectos) under hero */
.preview-cards {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px;
}

.preview-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform .25s ease;
}

.preview-card:hover { transform: scale(1.01); }

/* Imagen de fondo como clase (no inline style) — Netlify minifica el HTML al
   deployar y rompe las comillas anidadas de background-image:url('...') en un
   atributo style con comillas dobles, dejando la tarjeta sin foto. */
.preview-card-campos { background-image: url(img/preview-campos.webp); }
.preview-card-proyectos { background-image: url(img/proyectos-hero.webp); }

.preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 23, 22, .42) 0%, rgba(10, 23, 22, .36) 45%, rgba(10, 23, 22, .84) 100%);
}

.preview-content {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
}

.preview-card h3 {
  color: var(--crema);
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 600;
  margin-bottom: .25em;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.preview-card .preview-cta {
  display: inline-block;
  color: var(--crema);
  font-size: .82rem;
  background: rgba(10, 23, 22, .7);
  border: 1px solid rgba(234, 255, 207, .2);
  padding: .4em 1em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.preview-desc {
  position: absolute;
  left: 32px;
  right: 90px;
  bottom: 32px;
  color: var(--crema);
  font-size: .92rem;
  margin: 0;
  background: rgba(10, 23, 22, .55);
  backdrop-filter: blur(6px);
  padding: 16px 20px;
  border-radius: 12px;
}

.preview-arrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(10, 23, 22, .55);
  border: 1px solid rgba(234, 255, 207, .25);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(6px);
}

/* Sections */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }

.section-intro {
  color: var(--texto-suave);
  max-width: 64ch;
  font-size: 1.05rem;
  margin-bottom: 2.4em;
}

.porque-titulo {
  text-align: center;
  max-width: none;
  font-size: clamp(2rem, 4.4vw, 3rem);
}
.porque-titulo .acento { color: var(--lima); }

.section-center { text-align: center; }
.section-center .section-intro { margin-left: auto; margin-right: auto; }

/* Stat callout */
.stat {
  padding: 72px 0;
  text-align: center;
}

.stat-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.stat-brand-logo { height: 40px; width: auto; }
.stat-brand-text {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  text-align: left;
}

.stat-copy {
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--texto);
}
.stat-copy .acento { color: var(--lima); font-weight: 700; }

/* Por qué itatí — diagrama interactivo (desktop) */
.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;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--lima);
}

/* Espaciado calcado del sitio real (medido directo del DOM: gap de 20px entre
   columnas, 10px entre los íconos chicos y el círculo grande). */
.itati-diagram {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Más padding arriba que abajo: el círculo del medio se levanta bastante
     (ver .diagram-circle-center) y necesita el aire extra para no pisar el
     título de la sección. */
  padding: 130px 0 30px;
}

.diagram-col { display: flex; align-items: center; gap: 0; }
.diagram-fill { width: 1px; }
.diagram-box { display: flex; align-items: center; gap: 10px; }

/* El gap tiene que absorber el corrimiento hacia arriba del círculo negro
   (.diagram-circle-center) para que no le pise a los íconos de encima. */
.diagram-centro { flex-direction: column; gap: 150px; }
.diagram-stack { display: flex; flex-direction: column; gap: 10px; }
.diagram-stack-row {
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  /* El círculo negro central es position:relative (para poder levantarlo) y sin
     esto pinta por encima de estos íconos aunque estén antes en el DOM — quedaban
     tapados por completo. */
  position: relative;
  z-index: 1;
}
/* El del medio (t2) se levanta un poco para armar la forma de triángulo. */
.diagram-stack-row .diagram-dot:nth-child(2) { transform: translateY(-15px); }
.diagram-stack-row .diagram-dot:nth-child(2):hover,
.diagram-stack-row .diagram-dot:nth-child(2).is-active { transform: translateY(-15px) scale(1.08); }

.diagram-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  padding: 0;
}

.diagram-dot img { width: 22px; height: 22px; }

.diagram-dot:hover, .diagram-dot.is-active {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--lima);
}

.diagram-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: var(--font);
  font-weight: 500;
}

.diagram-circle-side {
  width: 230px;
  height: 230px;
  background: var(--lima);
  color: #0a1716;
  font-size: 1.15rem;
  line-height: 1.3;
}

.diagram-circle-center {
  width: 230px;
  height: 230px;
  background: #000;
  /* Se levanta bien por encima de los círculos de los costados, que quedan
     nivelados entre sí. position:relative en vez de margin-top: un margen
     negativo acá afecta el recentrado del flex padre y termina "comiéndose"
     casi todo el corrimiento — relative lo saca del flujo así el desplazamiento
     es el que se pide, sin que el layout lo compense. */
  position: relative;
  top: -140px;
}

.diagram-logo { width: 130px; height: auto; }

/* Por qué itatí — el diagrama de círculos se usa siempre (antes, en mobile cambiaba
   por una lista de texto plana; ahora apila los mismos círculos verticalmente). */
.porque-grid { display: none; }

@media (min-width: 861px) {
  .itati-diagram { display: flex; }
}

@media (max-width: 860px) {
  .itati-diagram {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 0;
  }
  .diagram-fill { display: none; }
  .diagram-box { flex-direction: column; gap: 16px; }
  .diagram-productor .diagram-stack,
  .diagram-inversor .diagram-stack {
    flex-direction: row;
  }
  .diagram-circle-center { position: static; top: 0; }
  /* Los 3 íconos arriba del círculo negro son siempre el mismo isotipo de itatí
     (a diferencia de los de productor/inversor, que son distintos entre sí) —
     en mobile no suman información, así que solo quedan en desktop. */
  .diagram-centro .diagram-stack-row { display: none; }
  .diagram-circle-side, .diagram-circle-center { width: 200px; height: 200px; }
  .diagram-logo { width: 110px; }
}

.porque-col h4 {
  font-family: var(--font);
  color: var(--lima);
  font-weight: 500;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 1.2em;
}

.porque-col.centro h4 { color: var(--crema); }

.porque-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
  font-size: .95rem;
  color: var(--texto);
}

.porque-item:last-child { border-bottom: none; }

.porque-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: .5em;
  background: var(--verde);
}

.porque-col.centro .porque-dot { background: var(--lima); }

/* Card grids */
.card-grid {
  display: grid;
  gap: 24px;
}

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

.card {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 24px;
}

.card h3 { color: #fff; font-size: 1.05rem; }
.card p { color: var(--texto-suave); font-size: .93rem; margin-bottom: 0; }

.team-card {
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease;
}
.team-card:hover { border-color: var(--lima); }
.team-card:hover .team-card-foto { border-color: var(--lima); }
.team-card h3 { margin-bottom: .2em; }
.team-card p { color: var(--lima); }

.team-card-foto {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borde);
  margin-bottom: 18px;
  transition: border-color .15s ease;
}

.team-card-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 10px auto 0;
  border-radius: 6px;
  background: var(--lima);
  color: var(--bg);
}

/* Cómo trabajamos — acordeón: título siempre visible, detalle cerrado hasta que
   se abre (mismo patrón que las FAQ, con numerito de paso). */
.proceso-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 2em;
}

.proceso-h2 { max-width: none; }

.proceso-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px;
}

.proceso-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  justify-content: center;
}
.proceso-item summary::-webkit-details-marker { display: none; }

.proceso-titulo {
  display: block;
  text-align: center;
  color: var(--crema);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
}

/* Flechita centrada abajo del título: abre/cierra el subtexto de cada item. */
.proceso-chevron {
  display: inline-flex;
  color: var(--lima);
  transition: transform .15s ease;
}
.proceso-item[open] .proceso-chevron { transform: rotate(180deg); }

.proceso-item p {
  color: var(--texto);
  font-size: .85rem;
  line-height: 1.55;
  margin: 0;
  padding: 6px 0 0;
}

/* Alianzas estratégicas */
.alianzas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.alianza-chip {
  padding: 10px 18px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--texto-suave);
  font-size: .88rem;
}

/* Mapa */
.mapa {
  width: 100%;
  height: 440px;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: .9rem;
}

.mapa-nota {
  font-size: .82rem;
  color: var(--texto-suave);
  margin-top: .7em;
}

/* Marcador del mapa: gota sólida en verde lima con centro oscuro (estilo pin
   clásico), en vez del pin celeste de Leaflet o el isotipo suelto. */
.mapa-marcador {
  display: flex;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
  transition: transform .15s ease;
}

.mapa-marcador:hover { transform: scale(1.12); }

.mapa-marcador svg { display: block; }

/* El CSS de Leaflet se inyecta en runtime (después del nuestro), así que sus reglas por
   defecto ganan la cascada salvo que forcemos !important acá — sin esto, los controles
   de zoom quedan con el cuadrado blanco de fábrica en vez del tema oscuro del sitio. */
/* El CSS de Leaflet fuerza su propia fuente (Helvetica/Arial) en .leaflet-container;
   sin esto, los controles y el popup quedan con una tipografía distinta al resto del sitio. */
.leaflet-container {
  font-family: var(--font) !important;
}

.leaflet-control-zoom {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important;
}

.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--crema) !important;
  border-color: var(--borde) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--lima) !important;
  color: #0a1716 !important;
}

.leaflet-control-attribution {
  background: rgba(10, 23, 22, .78) !important;
  color: var(--texto-suave) !important;
  border-radius: 8px 0 0 0;
}

.leaflet-control-attribution a { color: var(--texto) !important; }

/* Popup de nombre de campo sobre el mapa — aparece solo al clickear el pin */
.leaflet-popup.mapa-popup .leaflet-popup-content-wrapper {
  background: var(--bg);
  border: 1px solid var(--lima);
  border-radius: var(--radio);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.leaflet-popup.mapa-popup .leaflet-popup-content {
  font-family: var(--font);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--texto);
  margin: 10px 14px;
}

.leaflet-popup.mapa-popup .leaflet-popup-content strong {
  color: var(--crema);
  font-size: .95rem;
}

.leaflet-popup.mapa-popup .leaflet-popup-tip {
  background: var(--bg);
  box-shadow: none;
}

.mapa-popup-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--lima);
  font-weight: 700;
  text-decoration: none;
}

.mapa-popup-link:hover { text-decoration: underline; }

/* Campos — listado con detalle completo */
.campos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.campo-card {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.campo-foto {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.campo-body { padding: 26px 30px 30px; }

.campo-card h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: .1em;
}

.campo-ubicacion {
  color: var(--verde);
  font-size: .85rem;
  margin-bottom: 1.2em;
}

.campo-datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  padding: 16px 0;
  margin-bottom: 1.2em;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.campo-dato dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin: 0 0 .2em;
}

.campo-dato dd {
  margin: 0;
  color: var(--crema);
  font-weight: 500;
  font-size: 1rem;
}

.campo-card p { color: var(--texto-suave); font-size: .93rem; }

.campo-verificar {
  display: inline-block;
  margin-top: .6em;
  font-size: .76rem;
  color: #d99a4e;
}

/* Campo — página de detalle individual (/campos/<slug>.html), igual al sitio real:
   hero con video/foto de fondo, galería, dos columnas (contenido + ficha técnica lateral). */
.campo-hero { min-height: 88vh; margin-top: -88px; }

.campo-hero .hero-overlay {
  background: rgba(10, 23, 22, .45);
}

.campo-hero-breadcrumb { margin: 0 0 1.4em; }
.campo-hero-breadcrumb a { color: var(--lima); text-decoration: none; font-size: .88rem; }

.campo-hero .hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: .3em;
}

.campo-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--crema);
  font-size: .95rem;
  margin-bottom: 1.6em;
}

/* El espacio del ícono va como margen y no como gap: el texto que sigue a la etiqueta
   traducible ("Superficie" + ": 1.562 ha") son dos ítems flex distintos, y un gap le
   metía aire de más justo antes de los dos puntos. */
.campo-hero-meta span { display: inline-flex; align-items: center; }
.campo-hero-meta svg { color: var(--lima); flex: none; margin-right: 7px; }

.campo-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-stat-pill {
  background: rgba(10, 23, 22, .55);
  border: 1px solid rgba(234, 255, 207, .2);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 12px 20px;
}

.hero-stat-pill .label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin-bottom: .3em;
}

.hero-stat-pill .valor { font-size: 1.1rem; color: var(--lima); font-weight: 500; }

.hero-scroll-chevron {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(234, 255, 207, .3);
  color: var(--lima);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 1;
  animation: hero-chevron-bounce 2s ease-in-out infinite;
}

@keyframes hero-chevron-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 700px) {
  .campo-hero { min-height: 80vh; }
  .campo-hero-stats { flex-direction: column; }
  .hero-stat-pill { width: 100%; }
}

.detalle-breadcrumb { padding: 28px 0 0; }
.detalle-breadcrumb a { color: var(--verde); text-decoration: none; font-size: .88rem; }

.detalle-galeria {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 20px 0 40px;
}

.detalle-galeria img,
.detalle-galeria video,
.detalle-galeria .galeria-video-thumb {
  flex: 1 1 0;
  min-width: 220px;
  max-width: 420px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.detalle-galeria img { cursor: zoom-in; }

.detalle-galeria img:hover { opacity: .92; transform: scale(1.015); }

.galeria-video-thumb {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.galeria-video-thumb img {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.galeria-video-thumb:hover img { opacity: .92; transform: scale(1.015); }

.galeria-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 23, 22, .55);
  pointer-events: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s ease;
}

.galeria-video-thumb:hover .galeria-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(97, 206, 112, .75);
}

.galeria-video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

#video-lightbox-video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  animation: lightbox-scale-in .28s cubic-bezier(.16, 1, .3, 1);
}

/* Lightbox — abre cualquier foto de la galería en grande */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 23, 22, .94);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  animation: lightbox-fade .2s ease;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  width: 92vw;
  height: 88vh;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
  animation: lightbox-scale-in .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lightbox-scale-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img, #video-lightbox-video { animation: none; }
}

.lightbox-cerrar {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(234, 255, 207, .3);
  background: rgba(10, 23, 22, .6);
  color: var(--crema);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .15s ease;
}

.lightbox-cerrar:hover {
  border-color: var(--lima);
  color: var(--lima);
  transform: rotate(90deg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(234, 255, 207, .3);
  background: rgba(10, 23, 22, .6);
  color: var(--crema);
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}

.lightbox-nav:hover {
  border-color: var(--lima);
  color: var(--lima);
  background: rgba(10, 23, 22, .85);
}

.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.detalle-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}

.detalle-box {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 30px;
  margin-bottom: 28px;
}

.detalle-box h2 { font-size: 1.3rem; margin-bottom: .7em; }
.detalle-box p { color: var(--texto); font-size: .96rem; }
.detalle-box p:last-child { margin-bottom: 0; }
.detalle-box strong { color: var(--lima); font-weight: 500; }

.detalle-estructura-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detalle-estructura-grid .detalle-sub {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 0;
}

.detalle-sub h4 { color: var(--lima); font-size: .92rem; font-weight: 500; margin: 0 0 .5em; }
.detalle-sub p { color: var(--texto); font-size: .93rem; margin: 0; }

.ficha-tecnica {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px;
  position: sticky;
  top: 90px;
}

.ficha-tecnica h2 { font-size: 1.2rem; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }

.ficha-row {
  display: flex;
  align-items: center;
  font-size: .92rem;
  color: var(--texto);
  margin-bottom: 12px;
}

.ficha-row:last-of-type { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.ficha-row svg { flex: none; color: var(--lima); margin-right: 10px; }

.ficha-stat { margin-bottom: 16px; }
.ficha-stat .label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin-bottom: .3em; }
.ficha-stat .valor { font-size: 1.25rem; color: var(--crema); font-weight: 500; }

.ficha-tecnica .btn-primary { width: 100%; text-align: center; margin-top: 8px; }

@media (max-width: 900px) {
  .detalle-layout { grid-template-columns: 1fr; }
  .ficha-tecnica { position: static; }
  .detalle-estructura-grid { grid-template-columns: 1fr; }
}

/* Campos — listado (página /campos.html, igual al sitio real) */
.campos-title {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
}

.campos-filtros-titlerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.campos-filtros-titulo {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: .3em;
}

.campos-filtros-titulo em {
  font-style: italic;
  color: var(--lima);
}

.btn-limpiar-filtros {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto);
  font-size: .8rem;
  font-family: inherit;
  padding: .5em 1.15em;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

/* Botón "Filtros" mobile — despliega el panel completo; oculto en desktop, donde
   el panel de filtros ya va expandido de por sí. */
.filtros-toggle-mobile {
  display: none;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-family: inherit;
  font-size: .92rem;
  padding: .85em 1.1em;
  border-radius: 12px;
  cursor: pointer;
}

.filtros-toggle-mobile svg:first-child { flex: none; color: var(--lima); }

.filtros-badge[hidden] { display: none; }

.filtros-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lima);
  color: #0a1716;
  font-size: .78rem;
  font-weight: 700;
}

.filtros-toggle-chevron {
  margin-left: auto;
  flex: none;
  transition: transform .2s ease;
}

.filtros-toggle-mobile[aria-expanded="true"] .filtros-toggle-chevron { transform: rotate(180deg); }

/* Chips de filtros activos — cada uno se puede sacar individualmente con la X */
.filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.filtros-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .45em .5em .45em 1em;
  border-radius: 999px;
  border: 1px solid var(--lima);
  color: var(--lima);
  font-size: .82rem;
  background: rgba(189, 229, 137, .08);
}

.filtros-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(189, 229, 137, .18);
  color: var(--lima);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: 0;
}

.filtros-chip-limpiar {
  align-self: center;
  color: var(--texto-suave);
  font-size: .82rem;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 860px) {
  .filtros-toggle-mobile { display: flex; }
  .btn-limpiar-filtros { display: none; }
  #campos-filtros-bar { display: none; }
  #campos-filtros-bar.is-open { display: flex; margin-top: 12px; }
}

.btn-limpiar-filtros:hover { border-color: var(--lima); color: var(--crema); }
.btn-limpiar-filtros svg { flex: none; }

.campos-filtros-bar {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 16px 24px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
}

.campos-filtros-bar .filtro-grupo {
  flex: 1 1 180px;
  min-width: 160px;
}

.campos-filtros-cta {
  display: inline-block;
  white-space: nowrap;
  margin-top: 12px;
  font-size: .78rem;
  color: var(--lima);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}

.campos-filtros-cta:hover { border-color: var(--lima); }

.campos-filtros-cta::after { content: " →"; }

.filtro-grupo { margin-bottom: 0; }
.filtro-grupo h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--texto-suave);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
}

.filtro-grupo h4 svg { flex: none; color: var(--lima); }

/* En mobile el título de cada grupo se vuelve clickeable para desplegar/colapsar
   (ver .filtro-grupo-titulo más abajo); en desktop no hace nada, todo va expandido. */
.filtro-grupo-titulo { cursor: default; }

.filtro-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--texto);
  padding: 2px 0;
  cursor: pointer;
  position: relative;
}

.filtro-check input {
  position: absolute;
  opacity: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.filtro-check .check-box {
  width: 15px;
  height: 15px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  flex: none;
  display: inline-block;
  position: relative;
}

.filtro-check input:checked + .check-box {
  background: var(--lima);
  border-color: var(--lima);
}

.filtro-check input:checked + .check-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #0a1716;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filtro-check input:indeterminate + .check-box {
  background: var(--verde);
  border-color: var(--verde);
}

.filtro-check input:indeterminate + .check-box::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: #0a1716;
}

/* Por ubicación: país (<details> nativo) + provincias anidadas, ocultas hasta que se
   abre el acordeón — el show/hide lo maneja el navegador, no JS propio. */
.filtro-pais { margin-bottom: 0; }

.filtro-pais-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.filtro-pais-row::-webkit-details-marker { display: none; }
.filtro-pais-row::marker { content: ""; }

.filtro-pais-chevron {
  display: inline-flex;
  color: var(--texto-suave);
  padding: 6px;
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}

.filtro-pais-row:hover .filtro-pais-chevron { color: var(--lima); }
.filtro-pais[open] > .filtro-pais-row .filtro-pais-chevron { transform: rotate(180deg); }

.filtro-provincias {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  border-left: 1px solid var(--borde);
  margin: 2px 0 2px 7px;
}

.filtro-check-sub { font-size: .8rem; padding: 2px 0; }
.filtro-check-sub .check-box { width: 14px; height: 14px; }

.filtro-histograma {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  margin-bottom: 4px;
}

.filtro-histograma span {
  flex: 1;
  background: var(--lima);
  opacity: .55;
  border-radius: 1px;
}

/* Slider de doble rango real: dos <input type="range"> superpuestos, cada uno con su
   thumb clickeable y el track transparente salvo la franja "activa" entre ambos. */
.filtro-slider-doble {
  position: relative;
  height: 16px;
  margin-bottom: 6px;
}

.filtro-slider-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: var(--borde);
  border-radius: 2px;
  transform: translateY(-50%);
}

.filtro-slider-fill {
  position: absolute;
  top: 50%;
  height: 3px;
  background: var(--lima);
  border-radius: 2px;
  transform: translateY(-50%);
}

.filtro-slider-doble input[type="range"] {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.filtro-slider-doble input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lima);
  cursor: pointer;
  margin-top: 0;
}

.filtro-slider-doble input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lima);
  cursor: pointer;
}

.filtro-slider-doble input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.filtro-slider-doble input[type="range"]::-moz-range-track { background: transparent; }

.filtro-rango { font-size: .74rem; color: var(--texto-suave); margin: 0; }

.filtro-precios { display: flex; gap: 8px; }
.filtro-precio-box {
  flex: 1;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 6px 10px;
}
.filtro-precio-label {
  display: block;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin-bottom: 2px;
}
.filtro-precio-valor { font-size: .82rem; color: var(--texto); }
.filtro-precio-valor b { color: var(--crema); font-weight: 500; }

.campos-lista-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.campo-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s cubic-bezier(.16, 1, .3, 1), border-color .22s ease;
}

.campo-row:hover {
  transform: translateY(-5px);
  border-color: var(--lima);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}

.campo-row-foto {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.campo-row:hover .campo-row-foto {
  transform: scale(1.04);
}

.campo-row[hidden] { display: none; }

.campo-row-foto {
  width: 100%;
  height: 170px;
  object-fit: cover;
  flex: none;
}

.campo-row-body { padding: 20px; }
.campo-row-body h3 { color: var(--crema); font-size: 1.12rem; margin-bottom: .45em; }
.campo-row-body p {
  color: var(--texto);
  font-size: .9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.campo-row-body strong { color: var(--lima); font-weight: 500; }

.campo-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.campo-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--texto-suave);
}

.campo-meta-item svg { flex: none; color: var(--lima); }

.campo-meta-tipo {
  display: inline-flex;
  align-items: center;
  font-size: .74rem;
  color: var(--lima);
  border: 1px solid var(--lima);
  padding: .28em .85em;
  border-radius: 999px;
}

.btn-saber-mas {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  background: var(--lima);
  color: #0a1716;
  font-size: .88rem;
  font-weight: 500;
  padding: .7em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  margin-top: .6em;
}

.btn-saber-mas span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10, 23, 22, .15);
  font-size: .8rem;
}

.campos-sin-resultados { color: var(--texto-suave); }

/* Proyectos — grilla de tarjetas destacadas */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.proyecto-card {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px;
}

.proyecto-card-foto {
  width: 100%;
  max-width: none;
  height: 200px;
  object-fit: cover;
  flex: none;
  border-radius: calc(var(--radio) + 4px);
  border: 1px solid var(--lima);
  filter: grayscale(1) brightness(1.2) contrast(1.12);
}

.proyecto-card-body {
  padding: 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.proyecto-badge {
  display: inline-block;
  font-size: .78rem;
  color: var(--lima);
  border: 1px solid var(--lima);
  padding: .3em 1em;
  border-radius: 999px;
  margin-bottom: 1.1em;
}

.proyecto-card-body h3 { color: var(--crema); margin-bottom: .5em; }

.proyecto-card-titulo-dos-pisos { font-size: 1.28rem; line-height: 1.4; }
.proyecto-card-body p { color: var(--texto); font-size: .96rem; line-height: 1.6; margin-bottom: 0; }

@media (max-width: 720px) {
  .proyecto-card { flex-direction: column; }
  .proyecto-card-foto { width: 100%; max-width: none; height: 220px; }
  .proyecto-card-body { padding: 28px; }
}

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

@media (max-width: 640px) {
  .campos-lista-cards { grid-template-columns: 1fr; }
  .campo-row-foto { height: 200px; }
}

/* Mismo umbral que el menú hamburguesa (.nav-toggle) — antes esto usaba 640px
   mientras el resto de la nav mobile usaba 860px, y en ese rango intermedio
   (641-860px) los filtros quedaban con el ícono "+" pero sin colapsar de verdad. */
@media (max-width: 860px) {
  .campos-filtros-bar { flex-direction: column; gap: 0; padding: 4px 16px; }
  .campos-filtros-titlerow { flex-direction: column; align-items: flex-start; }

  /* Grupos de filtro colapsados por default — se despliegan al tocar el título.
     flex-basis:180px (puesto para el ancho en el layout de fila de desktop) se
     convierte en alto mínimo al pasar a columna acá — lo pisamos a auto. */
  .campos-filtros-bar .filtro-grupo { flex: 0 0 auto; min-width: 0; }
  .filtro-grupo { border-top: 1px solid var(--borde); padding: 8px 0; }
  .filtro-grupo:first-child { border-top: none; }
  .filtro-grupo-titulo {
    cursor: pointer;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .filtro-grupo-titulo::after {
    content: "+";
    color: var(--lima);
    font-size: 1rem;
  }
  .filtro-grupo.is-open .filtro-grupo-titulo::after { content: "–"; }
  .filtro-grupo-body {
    display: none;
    margin-top: 12px;
  }
  .filtro-grupo.is-open .filtro-grupo-body { display: block; }
}

/* Contacto */
.section-dark {
  background: #000;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Barra social flotante — fija al borde derecho, sigue visible al hacer scroll. */
.social-float {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--lima);
  color: var(--lima);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.social-float a:hover {
  background: var(--lima);
  border-color: var(--lima);
  color: #0a1716;
}

@media (max-width: 860px) {
  .social-float { display: none; }
}

/* Footer */
/* La sección de contacto justo antes (fondo casi negro, 96px de padding) más el
   padding propio del footer sumaban ~144px de vacío sin ninguna transición visible
   entre ambos — se achica acá para que no se lea como un hueco. */
#contacto.section { padding-bottom: 56px; }

.site-footer {
  padding: 32px 0 28px;
  border-top: 1px solid var(--borde);
  background: var(--bg);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--borde);
}

.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-logo { height: 24px; width: auto; }
.footer-tagline { margin: 0; font-size: .82rem; color: var(--texto-suave); }

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--texto);
  transition: color .15s ease, border-color .15s ease;
}
.footer-social a:hover { color: var(--lima); border-color: var(--lima); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer p {
  margin: 0;
  font-size: .82rem;
  color: var(--texto-suave);
}

.footer-year { color: var(--lima); }

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a { font-size: .85rem; color: var(--texto-suave); text-decoration: none; }
.footer-links a:hover { color: var(--lima); }

/* Responsive */
@media (max-width: 860px) {
  .header-row { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 0 solid var(--borde);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, border-bottom-width .25s ease;
  }
  .nav.is-open { max-height: 320px; border-bottom-width: 1px; }
  .nav a {
    padding: 16px 24px;
    border-top: 1px solid var(--borde);
  }
  .card-grid-4, .card-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .proceso-list { grid-template-columns: repeat(2, 1fr); }
  .porque-grid { grid-template-columns: 1fr; gap: 40px; }
  .campos-grid { grid-template-columns: 1fr; }
  .proyectos-grid { grid-template-columns: 1fr; }
  .preview-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .card-grid-4, .card-grid-2, .card-grid-5 { grid-template-columns: 1fr; }
  .proceso-list { grid-template-columns: 1fr; }
  .campo-datos { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 80vh; }
  .section { padding: 64px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll-chevron { animation: none; }
}

/* Educación — nav rápida, glosario, FAQ */
.edu-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.6em;
}

.edu-subnav a {
  display: inline-block;
  padding: .6em 1.4em;
  border-radius: 999px;
  border: 1px solid rgba(234, 255, 207, .25);
  color: var(--crema);
  text-decoration: none;
  font-size: .85rem;
}

.edu-subnav a:hover { border-color: var(--lima); color: var(--lima); }

.glosario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.glosario-item {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px;
}

.glosario-item dt { color: var(--lima); font-weight: 600; font-size: .95rem; margin-bottom: .4em; }
.glosario-item dd { color: var(--texto-suave); font-size: .88rem; margin: 0; line-height: 1.5; }

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 4px 22px;
  margin-bottom: 14px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 28px 18px 0;
  color: #fff;
  font-weight: 500;
  font-size: .98rem;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  color: var(--lima);
  font-size: 1.3rem;
  line-height: 1;
}

.faq-item[open] summary::after { content: "–"; }

.faq-item p {
  color: var(--texto);
  font-size: .93rem;
  padding-bottom: 20px;
  margin: 0;
}

.edu-nota {
  color: var(--texto-suave);
  font-size: .82rem;
  margin-top: 2em;
}

@media (max-width: 860px) {
  .glosario-grid { grid-template-columns: 1fr; }
}

/* Selector de idioma fijo — funcional (ES/EN), ver script.js */
.selector-idioma {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  font-family: var(--font);
}

.selector-idioma-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.selector-idioma .bandera { font-size: 1rem; }
.selector-idioma .chevron { color: #888; margin-left: 2px; }

.selector-idioma-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  min-width: 100%;
}

.selector-idioma-menu button {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: .85rem;
  color: #1a1a1a;
  padding: 10px 16px;
  cursor: pointer;
}

.selector-idioma-menu button:hover { background: var(--crema-suave, #f0f0f0); }

/* Página Nosotros: fondo levemente más claro que el resto del sitio y unificado
   (sin alternar section/section-alt), con los bloques de equipo centrados. */
.pagina-nosotros { --bg: #0e2019; --bg-alt: #0e2019; }
.pagina-nosotros .section { padding: 48px 0; }

.pagina-nosotros .section > .wrap > .eyebrow,
.pagina-nosotros .section > .wrap > h1,
.pagina-nosotros .section > .wrap > .section-intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.pagina-nosotros .card-grid-4 {
  /* El máximo de minmax() es lo que Grid usa para calcular cuántas columnas
     entran en auto-fit — con 260px solo entraban 3 en el ancho del wrap. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
}

/* Página Contacto: formulario + alternativa de WhatsApp al costado. */
.contacto-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.contacto-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 32px;
}

.form-row { display: flex; flex-direction: column; gap: 8px; }

.form-row label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--crema);
}

.form-row input,
.form-row textarea {
  font-family: var(--font);
  font-size: .95rem;
  color: var(--crema);
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .75em 1em;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--lima);
}

.form-row input.campo-tocado:invalid,
.form-row textarea.campo-tocado:invalid {
  border-color: #d9705a;
}

.contacto-form-privacidad {
  align-items: flex-start !important;
  font-size: .85rem;
  line-height: 1.5;
}
.contacto-form-privacidad .check-box { margin-top: 3px; }
.contacto-form-privacidad a { color: var(--lima); }

/* Botón de enviar: bien clarito/apagado mientras falta completar algo,
   sólido y oscuro recién cuando el formulario está completo y listo. */
.contacto-form-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}
.contacto-form-submit:disabled {
  background: rgba(189, 229, 137, .18);
  color: rgba(234, 255, 207, .35);
  cursor: not-allowed;
}
.contacto-form-submit:not(:disabled) {
  background: var(--lima);
  color: #0a1716;
}
.contacto-form-submit:not(:disabled):hover { background: var(--crema); }

.contacto-form-estado {
  font-size: .85rem;
  margin: 0;
  min-height: 1.2em;
}
.contacto-form-estado.ok { color: var(--lima); }
.contacto-form-estado.error { color: #e08b73; }

.contacto-whatsapp-alt {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
}
.contacto-whatsapp-alt p { color: var(--texto); margin-bottom: 1.2em; }

@media (max-width: 860px) {
  .contacto-layout { grid-template-columns: 1fr; }
}