/* ==========================================================================
   Studio di Terra — hoja de estilos del sitio público.

   La paleta (--brand, --titulo, --tinta, --fondo, --fondo-2, --pie-fondo,
   --wa) se inyecta desde Contenido::paleta() en el <head> de index.php.
   Acá solo se derivan tonos secundarios con color-mix(), así que cambiar
   un color desde el panel reacomoda toda la gama sin tocar este archivo.
   ========================================================================== */

:root {
  --brand: #5d7525;
  --titulo: #3c3f44;
  --tinta: #3c3f44;
  --fondo: #ffffff;
  --fondo-2: #f6f8f3;
  --pie-fondo: #f6f8f3;
  --wa: #25d366;

  --brand-oscuro: color-mix(in srgb, var(--brand) 82%, #000);
  --brand-suave: color-mix(in srgb, var(--brand) 12%, white);
  --tinta-suave: color-mix(in srgb, var(--tinta) 65%, white);
  --borde: color-mix(in srgb, var(--tinta) 12%, white);
  --sombra: 0 4px 14px rgba(12, 12, 13, 0.1);
  --radio: 20px;

  --serv-cols: 4;
  --serv-align: center;
  /* Antes tope en 24px: en escritorio el contenido llegaba muy cerca del
     borde de la pantalla y se veía apretado. Con más margen de los costados
     y, en general, elementos un toque más chicos (ver el resto del
     archivo), queda más aire alrededor de todo. */
  --wrap-pad: clamp(20px, 6vw, 40px);

  /* Espacio garantizado entre los botones del hero y la tarjeta de
     destacados, y cuánto sube esa tarjeta para superponerse al borde/ola
     del hero. Al ser las dos únicas variables que fijan esa zona (ver
     .hero__in y .destacados más abajo), el primer valor queda SIEMPRE
     como colchón real entre botones y tarjeta sin importar cuánto crezca
     el segundo -- es pura resta algebraica, no dos clamp() compitiendo. */
  --hero-gap-botones-card: clamp(28px, 4vw, 44px);
  --hero-solape-tarjeta: clamp(70px, 9vw, 112px);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { color: var(--titulo); margin: 0; }
p { margin: 0; }

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

.skip {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: clamp(6px, 1.4vw, 9px); justify-content: center;
  padding: clamp(10px, 1.8vw, 13px) clamp(14px, 2.6vw, 20px); border-radius: 10px; font-weight: 700;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .15); border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn img { display: block; flex-shrink: 0; width: clamp(16px, 2vw, 22px); height: clamp(16px, 2vw, 22px); }
.btn--cta { background: var(--brand); color: #fff; }
.btn--cta:hover { background: var(--brand-oscuro); }
.btn--outline { background: var(--fondo); color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand-suave); }
.btn--claro { background: #fff; color: var(--brand); border-color: var(--brand); }
/* Un solo tamaño de botón en toda la web (antes ".btn--grande" hacía a los
   2 del hero más grandes que el resto -- se ve inconsistente, y en mobile,
   apilados uno debajo del otro, la diferencia de tamaño quedaba aún más a
   la vista). ".btn--grande" ya no se usa en ningún lado. */

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  background: var(--fondo); box-shadow: 0 4px 4px rgba(12, 12, 13, .1);
  position: sticky; top: 0; z-index: 100;
}
.nav__in { display: flex; align-items: center; gap: clamp(12px, 2.6vw, 28px); padding: clamp(9px, 1.8vw, 15px) clamp(14px, 3vw, 24px); }
.nav__marca { display: flex; align-items: flex-start; gap: 14px; font-weight: 700; color: var(--titulo); flex: 0 0 auto; }
/* Logo de reemplazo subido desde el panel: se muestra como imagen simple. */
.nav__marca > img { width: clamp(34px, 7vw, 44px); height: clamp(34px, 7vw, 44px); border-radius: 10px; object-fit: cover; }
.nav__marca > span { display: flex; flex-direction: column; line-height: 1.2; align-self: center; font-size: clamp(14px, 2vw, 16px); }
.nav__marca small { font-weight: 500; font-size: clamp(10px, 1.4vw, 12px); color: var(--tinta-suave); text-transform: none; }

/* Logo tal como está armado en el archivo de Figma: un mismo bitmap
   (assets/img/logo.jpg) recortado en dos regiones -- isotipo y logotipo --
   con los mismos porcentajes de recorte que el diseño (nodos "logo" del nav). */
.nav__logo-recorte { position: relative; overflow: hidden; display: block; flex: 0 0 auto; }
.nav__logo-recorte img { position: absolute; max-width: none; }
/* Los porcentajes del recorte son relativos al tamaño del contenedor, así que
   con solo achicar el contenedor de forma fluida el recorte se mantiene
   proporcional en cualquier ancho, sin tocar los porcentajes. */
.nav__logo-recorte--isotipo { width: clamp(32px, 6.4vw, 52px); height: clamp(33px, 6.6vw, 53px); }
.nav__logo-recorte--isotipo img { width: 251.33%; height: 244.66%; left: -75.66%; top: -40.17%; }
.nav__logo-recorte--logotipo { width: clamp(96px, 19vw, 157px); height: clamp(28px, 5.6vw, 45px); margin-top: clamp(1px, .4vw, 4px); }
.nav__logo-recorte--logotipo img { width: 153.15%; height: 528.99%; left: -26.58%; top: -303.07%; }
@media (max-width: 560px) {
  .nav__logo-recorte--logotipo { display: none; }
}
.nav__links { display: flex; gap: 32px; flex: 1 1 auto; font-weight: 700; font-size: 14px; letter-spacing: .03em; }
.nav__links a:hover { color: var(--brand); }
.nav__cta { flex: 0 0 auto; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: var(--titulo); transition: transform .25s ease, opacity .2s ease; }
/* El ícono se transforma en una "X" cuando el menú está abierto -- el usuario
   ve el cambio de estado, no solo lo nota porque aparece una lista debajo.
   Las 3 líneas miden 2px con 5px de separación (16px de alto en total); la
   del medio ya queda justo en el centro del grupo, así que las de arriba y
   abajo solo necesitan moverse 7px hacia ese centro antes de rotar 45°. */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hamburguesa hasta 1040px: con el menú CENTRADO + logo + botón de WhatsApp no
   alcanza el ancho por debajo de eso sin que algo se parta o se salga. */
@media (max-width: 1040px) {
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--fondo);
    flex-direction: column; gap: 0; box-shadow: var(--sombra);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav__links.is-open { max-height: min(70vh, 640px); overflow-y: auto; }
  .nav__links a { padding: 14px 24px; border-top: 1px solid var(--borde); }
  .nav__cta { display: none; }
  /* margin-left:auto empuja el botón a la derecha del todo. Hace falta
     porque ".nav__links" pasa a "position:absolute" acá arriba -- y un
     elemento absoluto SALE del flujo del flex, así que deja de contar para
     el reparto de espacio. Sin este margen, al hamburguesa quedaba pegada
     al logo (nada más quedaba en el flex para separarlos). */
  .nav__burger { display: flex; margin-left: auto; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* display:flow-root: sin esto, como .hero no tiene borde ni padding inferior,
   el margin-bottom de .hero__in "escapa" a través de la sección y colapsa
   con el margin-top negativo de la tarjeta de destacados (que va DESPUÉS de
   </section>) -- el resultado sería la resta de ambos en vez de una
   superposición real, y la tarjeta terminaba sin solape alguno sobre el
   borde/ola del hero. flow-root abre un contexto de bloque propio (igual
   que overflow:hidden a este efecto, pero sin recortar nada) y así el alto
   de .hero sí incluye ese margen completo. */
.hero { position: relative; display: flow-root; padding: clamp(48px, 9vw, 90px) 0 0; }
/* Foto del hero recortada con la misma forma (borde inferior ondulado) del
   archivo de Figma (nodo "Rectangle 5" / hero-web-studio-di-terra 1). */
.hero__foto {
  position: absolute; inset: 0; background-color: var(--fondo-2);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: url('../img/mascaras/hero.svg'); mask-image: url('../img/mascaras/hero.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* margin-bottom = colchón fijo (--hero-gap-botones-card) + lo que después
   sube la tarjeta (--hero-solape-tarjeta): son las dos ÚNICAS variables que
   fijan esta zona (ver .destacados más abajo), así que la resta entre
   ambas SIEMPRE da exactamente el colchón, sea cual sea el solape -- no son
   dos clamp() ajustados a mano por separado que puedan desalinearse en
   algún ancho intermedio (eso fue lo que tapaba los botones antes). */
.hero__in {
  position: relative; text-align: center; max-width: 900px;
  margin: 0 auto calc(var(--hero-gap-botones-card) + var(--hero-solape-tarjeta));
  display: flex; flex-direction: column; gap: clamp(18px, 3vw, 28px); align-items: center;
}
.hero__titulo { font-size: clamp(24px, 5.4vw, 39px); font-weight: 700; line-height: 1.15; color: var(--titulo); }
.hero__titulo :is(em, .brand) { color: var(--brand); font-style: normal; }
.hero__texto { font-size: clamp(14px, 2.1vw, 17px); color: var(--tinta); max-width: 760px; }
.hero__botones { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
/* En mobile, los 2 CTA pasan a ocupar el mismo ancho completo, apilados --
   antes quedaban centrados pero con anchos distintos entre sí (uno bien
   ancho, el otro angosto), lo que se ve descuidado y da tap targets más
   chicos de lo necesario. */
@media (max-width: 560px) {
  .hero__botones { flex-direction: column; align-items: stretch; }
  .hero__botones .btn { width: 100%; }
}

/* Sube la tarjeta --hero-solape-tarjeta por encima del borde/ola del hero
   (como en el diseño de Figma, donde la ola pasa por encima de la propia
   tarjeta), dejando siempre el colchón de arriba intacto frente a los
   botones -- ver la nota en .hero__in. */
.destacados {
  position: relative; margin-top: calc(-1 * var(--hero-solape-tarjeta)); background: #fff; border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: clamp(18px, 4vw, 32px); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 60px);
}
.destacados__item { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 18px); max-width: 300px; }
.destacados__item img { width: clamp(36px, 5.4vw, 50px); height: clamp(36px, 5.4vw, 50px); }
.destacados__item h3 { font-size: clamp(15px, 2vw, 18px); margin-bottom: 6px; }
.destacados__item p { font-size: clamp(12px, 1.5vw, 14px); color: var(--tinta-suave); }
/* El link es "flex:0 0 100%" para forzarlo a su propia fila centrada, pero
   el subrayado va en el <span> interno (ancho = el del texto), no en el
   <a> completo -- si no, la línea se estira a las 100% del ancho de la
   fila entera y parece un separador en vez de un subrayado de texto. */
.destacados__mas { flex: 0 0 100%; text-align: center; margin-top: 8px; }
.destacados__mas span {
  display: inline-block; font-weight: 600; font-size: 14px; color: var(--brand);
  border-bottom: 1px solid var(--brand); padding-bottom: 4px;
}

/* ── Secciones genéricas ─────────────────────────────────────────────── */
.seccion { padding: clamp(48px, 9vw, 90px) 0; }
.seccion--alt { background: var(--fondo-2); }
.seccion__head { text-align: center; max-width: 820px; margin: 0 auto clamp(28px, 5vw, 50px); display: flex; flex-direction: column; gap: clamp(10px, 2vw, 18px); }
.seccion__head h2, .seccion__head h1.proy-titulo { font-size: clamp(22px, 4vw, 30px); }
.seccion__head p { font-size: clamp(14px, 1.9vw, 16px); color: var(--tinta); }
.seccion__accion { text-align: center; margin-top: clamp(28px, 5vw, 50px); }

/* ── Intro (4 pasos numerados + foto) ────────────────────────────────── */
.intro { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 60px); flex-wrap: wrap; }
.intro__col { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 48px); max-width: 320px; flex: 1 1 280px; }
.intro__col--der { text-align: right; align-items: flex-end; }
.intro__item { display: flex; flex-direction: column; gap: 14px; }
.intro__col--der .intro__item { align-items: flex-end; }
.intro__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(38px, 5.4vw, 48px); height: clamp(38px, 5.4vw, 48px);
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: clamp(15px, 2.1vw, 19px);
}
.intro__item h3 { font-size: clamp(16px, 2.3vw, 20px); }
.intro__item p { font-size: clamp(13px, 1.6vw, 15px); color: var(--tinta); }
/* El HTML ya trae la foto PRIMERO (antes de las columnas de texto): así, en
   mobile -- donde no se declara ningún "order" -- el orden visual y el
   orden real del documento son el mismo (importa para lectores de pantalla
   y para cualquier herramienta que lea el texto de la página, no solo para
   quien la ve). En escritorio hace falta reacomodarla visualmente al medio
   con "order" (ver el bloque de min-width:1041px, más abajo). */
.intro__foto { flex: 1 1 240px; max-width: 364px; width: 100%; }
/* max-width:1040px (no 760px): con las 3 columnas (col + foto + col) puestas
   en fila con flex-wrap, hay una franja intermedia (~890px a ~1010px, según
   el ancho exacto de fuente) donde las dos primeras encajan en la fila pero
   la tercera NO alcanza a entrar y salta sola a una segunda fila, centrada,
   lejos de la foto -- un layout roto, no uno "más chico". Point de corte
   elegido con margen de sobra por encima de esa zona, para que el quiebre a
   la versión apilada sea siempre intencional, nunca accidental. */
@media (max-width: 1040px) {
  /* flex-direction:column, no solo flex-wrap: con flex-wrap, el ancho que
     cuenta para decidir qué entra en cada fila es el ancho YA recortado por
     max-width -- así que la foto + la 1ª columna de texto seguían cabiendo
     juntas en una fila y la 2ª quedaba sola, colgada, en la fila de abajo
     (un layout roto a mitad de camino, no uno "más chico"). Con
     flex-direction:column no hay ambigüedad posible: los tres van, siempre,
     uno debajo del otro -- en el mismo orden en que están en el HTML (foto,
     01-02, 03-04), sin necesitar "order". Los textos van centrados en vez
     de mantener la alineación izquierda/derecha pensada para las dos
     columnas de escritorio. */
  .intro { flex-direction: column; }
  .intro__foto { max-width: 280px; }
  .intro__col, .intro__col--der { text-align: center; align-items: center; }
  /* Dos alineaciones distintas hay que igualar acá, no solo una:
     - ".intro__col--der .intro__item" (para el diseño de dos columnas de
       escritorio) es más específica que ".intro__col--der" de arriba, así
       que sin este empate seguía ganando ella y 03-04 quedaban pegados a
       la derecha.
     - ".intro__item" (01-02) nunca tuvo alineación propia -- su valor por
       omisión ("normal"/stretch) los deja pegados a la IZQUIERDA dentro de
       cada ítem, aunque la columna ya esté centrada como bloque.
     Sin las dos, quedaban 01-02 a la izquierda y 03-04 a la derecha: el
     "2 y 2" que se ve mal apilado en una sola columna. */
  .intro__item, .intro__col--der .intro__item { align-items: center; }
}
/* En escritorio, en cambio, la foto va visualmente EN EL MEDIO (entre las
   dos columnas de texto) aunque en el HTML esté primero -- acá sí hace
   falta "order" para lograrlo. */
@media (min-width: 1041px) {
  .intro__col { order: 1; }
  .intro__foto { order: 2; }
  .intro__col--der { order: 3; }
}
/* Misma forma que el archivo de Figma (nodo "Rectangle 7", 364.093x539, rx 182.047). */
.intro__foto img { border-radius: 182px; width: 100%; aspect-ratio: 364.093 / 539; object-fit: cover; }
.intro__accion { text-align: center; margin-top: clamp(32px, 5vw, 60px); }

/* ── Grilla de servicios ─────────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(var(--serv-cols, 4), minmax(240px, 1fr));
  gap: clamp(16px, 3vw, 28px); justify-content: var(--serv-align, center);
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
/* En mobile, un carrusel horizontal deslizable en vez de apilar las 8
   tarjetas en una sola columna: con la foto a aspect-ratio 3/4 a ancho
   completo, cada tarjeta apilada mide más de 450px solo de foto -- son más
   de 5000px de scroll vertical antes de llegar al resto de la página. Con
   scroll-snap nativo (sin JS) se ve/toca una tarjeta entera y se asoma la
   siguiente, invitando a deslizar. */
@media (max-width: 600px) {
  .grid {
    display: flex; overflow-x: auto; gap: 16px; padding-bottom: 6px;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--wrap-pad);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* "justify-content" hereda "center" desde el panel (alineación de la
       grilla de escritorio) -- sirve ahí, pero en un carrusel más angosto
       que su contenido es un desastre: centrar una fila mucho más ancha que
       la pantalla empuja el arranque bien afuera, a una posición negativa
       que "scrollLeft: 0" nunca puede alcanzar -- la 1ª tarjeta queda
       cortada para siempre, sin importar cuánto se deslice. */
    justify-content: flex-start;
  }
  .grid::-webkit-scrollbar { display: none; }
  .serv { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }
}

/* Tarjeta de servicio: solo las esquinas superiores redondeadas, igual que
   en Figma (la caja blanca "Rectangle 9" no tiene esquinas redondeadas). */
.serv { background: #fff; border-radius: 20px 20px 0 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.serv__foto { position: relative; aspect-ratio: 3 / 4; background: var(--fondo-2); }
.serv__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Antes el velo se armaba solo (bottom:0, sin top/height): su alto era el
   del propio título, "auto". Con un título de 1 línea eso daba una caja
   petisa y el degradado (pensado para esa caja chica) quedaba bien atrás
   del texto -- pero apenas el título pasaba a 2 líneas, la caja crecía y el
   degradado (con los mismos % de siempre) dejaba la línea de arriba en la
   zona ya transparente, casi sin fondo. Ahora el velo mide un 62% fijo del
   alto de la foto (independiente del texto) y el título se ancla siempre
   abajo del todo -- así el degradado cubre las 2 líneas SIEMPRE, sea cual
   sea el largo real del título. */
.serv__velo {
  position: absolute; left: 0; right: 0; bottom: 0; top: 58%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(14px, 2.6vw, 20px) clamp(14px, 2.6vw, 22px) clamp(12px, 2vw, 16px);
  background: linear-gradient(0deg, rgba(87, 108, 43, .88) 30%, rgba(87, 108, 43, 0) 100%);
}
/* -webkit-line-clamp corta un título larguísimo a 2 líneas con puntos
   suspensivos; min-height reserva esas mismas 2 líneas aunque el título sea
   cortito -- así todas las tarjetas de la grilla quedan con el título
   ocupando siempre el mismo alto (2 líneas), en vez de que la 2ª línea
   aparezca o no según cuánto texto haya cargado cada servicio. */
.serv__nombre {
  color: #fff; font-size: clamp(16px, 2.1vw, 20px); font-weight: 600; line-height: 1.25;
  min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.serv__body { padding: clamp(13px, 2.3vw, 18px) clamp(13px, 2.3vw, 20px) clamp(16px, 2.6vw, 23px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.serv__desc { font-size: clamp(13px, 1.6vw, 14px); color: var(--tinta); flex: 1; }
.serv__link { align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--brand); border-bottom: 1px solid var(--brand); padding-bottom: 3px; }
.serv__link:hover { color: var(--brand-oscuro); border-color: var(--brand-oscuro); }

/* ── Sobre el estudio ────────────────────────────────────────────────── */
.quienes { display: flex; align-items: center; gap: clamp(32px, 6vw, 70px); flex-wrap: wrap; }
.quienes__foto { position: relative; flex: 1 1 300px; max-width: 480px; width: 100%; }
/* Misma forma que el archivo de Figma (nodo "agrimensor-...-1", 722x722, rounded-30). */
.quienes__foto img { border-radius: 30px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.quienes__insignia {
  position: absolute; right: clamp(-10px, -2vw, -20px); bottom: clamp(-14px, -2.6vw, -30px);
  background: #fff; border-radius: 0 var(--radio) var(--radio) var(--radio);
  box-shadow: var(--sombra); padding: clamp(12px, 2.2vw, 18px) clamp(16px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 6px; max-width: min(260px, 70%);
}
.quienes__insignia strong { color: var(--brand); font-size: clamp(14px, 2vw, 18px); }
.quienes__insignia span { font-size: clamp(10px, 1.4vw, 13px); color: var(--tinta); }
.quienes__texto { flex: 1 1 420px; display: flex; flex-direction: column; gap: 22px; padding: 4%; }
.quienes__texto h2 { font-size: clamp(20px, 3.2vw, 27px); }
.quienes__historia { font-size: clamp(13px, 1.6vw, 15px); color: var(--tinta); display: flex; flex-direction: column; gap: 16px; }
.quienes__historia strong { color: var(--titulo); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-caja { background: #fff; border-radius: 32px; box-shadow: 0 4px 20px rgba(0,0,0,.1); padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 40px); }
.faq { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--borde); padding: 20px 0; }
.faq__item:first-child { padding-top: 0; }
.faq__item summary {
  cursor: pointer; font-weight: 700; font-size: clamp(14px, 1.8vw, 16px); color: var(--titulo);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Mismos íconos de +/- (círculo con trazo) que trae el archivo de Figma. */
.faq__item summary::after {
  content: ''; flex: 0 0 auto; width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px);
  background: url('../img/iconos/faq-cerrada.svg') center / contain no-repeat;
}
.faq__item[open] summary::after { background-image: url('../img/iconos/faq-abierta.svg'); }
.faq__item p { margin-top: 14px; font-size: clamp(13px, 1.6vw, 15px); color: var(--tinta); }

/* ── Pasos (¿Necesitás un agrimensor?) ──────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pasos { grid-template-columns: 1fr; } }
.pasos__item {
  background: color-mix(in srgb, var(--brand) 15%, white); border-radius: var(--radio);
  padding: clamp(22px, 4vw, 36px) clamp(18px, 3.4vw, 28px);
  display: flex; flex-direction: column; gap: 6px; min-height: 420px;
}
@media (max-width: 620px) {
  /* En una sola columna no hace falta forzar la misma altura para todas: con
     contenido de largo distinto, una altura fija deja huecos enormes. */
  .pasos__item { min-height: 0; }
}
.pasos__item--2 { background: color-mix(in srgb, var(--brand) 4%, white); justify-content: flex-start; }
.pasos__item--3 { background: color-mix(in srgb, var(--brand) 30%, white); }
.pasos__item--4 { background: color-mix(in srgb, var(--brand) 11%, white); justify-content: flex-start; }
.pasos__item--1, .pasos__item--3 { justify-content: flex-end; }
.pasos__item h3 { font-size: clamp(16px, 2.1vw, 19px); font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.pasos__item p { font-size: clamp(13px, 1.5vw, 14px); color: var(--tinta); }
/* Más chicos que antes (eran hasta 89px) y con su propio margen abajo,
   separado del "gap" general de la columna: así queda más aire entre el
   ícono y el título/texto, en vez de un espaciado parejo entre las tres
   cosas. El margen es (a propósito) el triple que el que separa el título
   del texto, y es EL MISMO valor para las 4 tarjetas -- antes en 2 de las 4
   el ícono venía al final del HTML (después del texto), así que ni
   siquiera se veía arriba del título en esos casos. */
.pasos__item img { width: clamp(40px, 5vw, 60px); height: clamp(40px, 5vw, 60px); margin-bottom: clamp(54px, 9vw, 84px); }

/* ── CTA final ───────────────────────────────────────────────────────── */
/* Misma silueta ondulada que el archivo de Figma (nodo "Rectangle 14"),
   en vez de una franja verde lisa. */
/* La ola de cta.svg no es un rectángulo completo: en el centro, tanto el
   borde de arriba como el de abajo tienen una pequeña "hendidura" (por eso
   no es una franja lisa). Esas hendiduras son zonas TRANSPARENTES del SVG,
   así que dejan ver lo que haya detrás -- y antes no había nada puesto ahí
   a propósito, así que se veía el blanco de la página asomando justo donde
   la sección siguiente (el footer) tiene su propio fondo. Con un segundo
   fondo (un degradado con un corte duro al 50% de alto, detrás del SVG) esa
   hendidura de ARRIBA muestra el mismo tono que la sección de antes
   (--fondo) y la de ABAJO muestra el mismo tono que el footer
   (--pie-fondo) -- entonces ninguna hendidura "choca" contra lo que sigue,
   sea cual sea el color que se cargue desde el panel. */
.cta {
  position: relative; padding: clamp(70px, 13vw, 130px) 0; overflow: hidden;
  background-image:
    url('../img/mascaras/cta.svg'),
    linear-gradient(to bottom, var(--cta-arriba, var(--fondo)) 0%, var(--cta-arriba, var(--fondo)) 50%, var(--cta-abajo, var(--pie-fondo)) 50%, var(--cta-abajo, var(--pie-fondo)) 100%);
  background-size: 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: center, center;
}
.cta__in {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: clamp(16px, 3vw, 28px); align-items: center;
  padding: 0 clamp(8px, 3vw, 24px);
}
.cta h2 { color: #fff; font-size: clamp(20px, 4vw, 30px); }
.cta p { color: #fff; font-size: clamp(13px, 1.9vw, 16px); opacity: .95; }

/* Envoltorio a todo el ancho/alto de la sección. El recorte a la silueta
   ondulada de cta.svg se aplica acá mismo como mask-image (mismo archivo,
   mismo mask-size:100% 100% que el fondo verde de .cta): así las fotos
   pueden "sangrar" de más, tal como en Figma, pero SIEMPRE quedan recortadas
   por la forma real de la ola -- no por un simple recuadro. overflow:hidden
   queda solo como red de seguridad para navegadores sin soporte de mask. */
.cta__collage-wrap {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url('../img/mascaras/cta.svg'); mask-image: url('../img/mascaras/cta.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* Adentro, un .wrap normal (en flujo, sin position:absolute) da el mismo
   ancho máximo de 1280px y el mismo padding lateral que el logo del nav o
   el botón "Solicitar presupuesto" -- es la misma regla de siempre, sin
   trucos de márgenes automáticos sobre un elemento absoluto. Las columnas
   se posicionan pegadas a sus bordes (que ya están donde tienen que estar). */
.cta__collage-inner { position: relative; height: 100%; }
/* Fotos cuadradas y un poco más grandes que antes, centradas verticalmente
   en la columna: si la columna completa (3 fotos + separaciones) es más
   alta que la sección, el sobrante queda contenido por overflow:hidden y,
   sobre todo, recortado por la máscara de arriba en vez de deformarse. */
.cta__collage {
  position: absolute; top: 50%; transform: translateY(-50%); display: none;
  flex-direction: column; gap: clamp(10px, 1.4vw, 18px); width: 15%; max-width: 210px; min-width: 90px;
}
.cta__collage img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
/* Iba a mostrarse 1 foto de "acento" por lado debajo de 1100px en vez de
   ocultarlas todas, pero no hay lugar real: ".cta__in" (el texto) tiene su
   propio ancho máx. de 760px, pero recién se aleja de los bordes cuando el
   ancho de pantalla LE SOBRA respecto a esos 760px + su padding -- por
   debajo de ~1100px casi no hay margen entre el texto y el borde, así que
   cualquier foto ahí queda encima del texto (probado: se veía pésimo).
   Se necesitaría angostar ".cta__in" a propósito en ese rango para dejarles
   lugar -- un rediseño de esta sección, no un ajuste chico -- así que por
   ahora se ocultan por completo debajo de 1100px, como estaba antes. */
@media (min-width: 1100px) { .cta__collage { display: flex; } }
/* No van a left:0/right:0: eso pega la foto al borde EXTERIOR de la caja
   de .cta__collage-inner, mientras que el contenido visible del resto del
   sitio (logo del nav, grilla de servicios) arranca más adentro, en el
   padding de ".wrap" (--wrap-pad). Usamos la misma variable acá para que
   coincidan siempre con el margen real del contenido, no con el borde. */
.cta__collage--izq { left: var(--wrap-pad); }
.cta__collage--der { right: var(--wrap-pad); }

/* ── Footer (partials/footer.php) ───────────────────────────────────── */
.pie { background: var(--pie-fondo); padding: clamp(36px, 7vw, 60px) 0 0; }
.pie__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 40px); padding-bottom: clamp(24px, 4vw, 40px); }
@media (max-width: 800px) {
  .pie__in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* "justify-items:center" de arriba también centraría la columna de marca
     como bloque (aunque su texto interno ya sea "text-align:left"); acá se
     la deja pegada al borde izquierdo, igual que en escritorio. */
  .pie__col--marca { justify-self: start; }
}
/* Columna de marca centrada (logo + nombre + texto), como en Figma --
   independiente de si el resto de las columnas del footer va centrada o no
   en este ancho de pantalla. */
.pie__col--marca { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* El logo (propio o el recorte de Figma) va dentro de un cuadro blanco con
   sombra, apilado en vertical -- mismo recorte de dos regiones que usa el
   nav, pero en columna en vez de en fila. */
.pie__logo-caja {
  background: #fff; border-radius: 14px; box-shadow: var(--sombra);
  padding: 9px 12px; margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.pie__logo-caja .pie__logo { border-radius: 8px; margin-bottom: 0; width: 40px; height: 40px; }
.pie__logo-recorte--isotipo { width: 26px; height: 27px; }
.pie__logo-recorte--logotipo { width: 72px; height: 21px; margin-top: 1px; }
/* ".nav__logo-recorte--logotipo" se oculta debajo de 560px (ver más arriba)
   para que el nav no se quede sin lugar -- pero acá, en el footer, el
   logotipo va apilado abajo del isotipo, sin competir por ancho con nada;
   no hace falta ocultarlo nunca. El selector compuesto (2 clases) le gana
   en especificidad a esa regla, sea cual sea el orden en el archivo. */
.pie__logo-caja .nav__logo-recorte--logotipo { display: block; }
/* En Figma el nombre propio del agrimensor va en el verde de marca, no en el
   gris oscuro de los demás títulos -- la misma jerarquía que ".hero__titulo em". */
.pie__marca { font-size: clamp(16px, 2vw, 18px); margin-bottom: 4px; color: var(--brand); }
.pie__texto { font-size: 13px; color: var(--tinta); max-width: 320px; }
.pie__col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.pie__datos, .pie__redes { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pie__redes li a { display: flex; align-items: center; gap: 10px; }
.pie__redes svg, .pie__datos svg { width: 18px; height: 18px; }
/* Mismo menú del header, repetido acá como en Figma. No se le toca el
   padding izq/der (no lleva "padding" en shorthand): ".pie__menu" también
   es un ".wrap", y el shorthand pisaría el padding lateral compartido con
   el resto del sitio (--wrap-pad). */
.pie__menu {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 32px);
  padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--borde);
  font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase;
}
.pie__menu a:hover { color: var(--brand); }
.pie__legal {
  border-top: 1px solid var(--borde); padding: 18px 24px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--tinta-suave);
}
@media (max-width: 480px) {
  .pie__legal { flex-direction: column; text-align: center; gap: 8px; }
}
.wa-flota {
  position: fixed; right: 24px; bottom: 24px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra);
  z-index: 90;
}
.wa-flota svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 480px) {
  .wa-flota { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .wa-flota svg { width: 24px; height: 24px; }
}

/* ── Utilidades ──────────────────────────────────────────────────────── */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Mapa de proyectos (portada) ─────────────────────────────────────────
   Adaptado del mapa de Nuestro Pan: lista + buscador a la izquierda, mapa a
   la derecha. Los colores salen de la paleta del panel (--brand, etc.). */
.seccion--mapa .seccion__head { margin-bottom: clamp(20px, 3.4vw, 34px); }
.mapa {
  display: grid; grid-template-columns: 340px 1fr; gap: 20px; height: 560px;
}
.panel {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
  box-shadow: 0 4px 14px rgba(12, 12, 13, .06);
}
.buscador { position: relative; padding: 14px 14px 8px; }
.buscador svg { position: absolute; left: 27px; top: 27px; color: var(--tinta-suave); }
.buscador input {
  width: 100%; padding: 11px 38px 11px 40px; font: inherit; font-size: 14px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo-2); color: var(--tinta);
}
.buscador input:focus { outline: 2px solid color-mix(in srgb, var(--brand) 40%, #fff); border-color: var(--brand); background: #fff; }
.buscador button {
  position: absolute; right: 22px; top: 21px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-suave); font-size: 22px; line-height: 1; cursor: pointer;
}
.buscador button[hidden] { display: none; }
.panel__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 16px 10px; font-size: 13px; color: var(--tinta-suave); font-weight: 600;
}
.panel__meta .link { color: var(--brand); font-weight: 700; border-bottom: 1px solid currentColor; }
.panel__meta .link:hover { color: var(--brand-oscuro); }
.lista { flex: 1; overflow-y: auto; padding: 6px; overscroll-behavior: contain; border-top: 1px solid var(--borde); }
.lista__vacio { padding: 30px 18px; text-align: center; color: var(--tinta-suave); font-size: 14px; }
.item {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; font: inherit;
  padding: 9px; background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  color: var(--tinta);
}
.item:hover { background: var(--fondo-2); }
.item.is-on { background: var(--brand-suave); border-color: color-mix(in srgb, var(--brand) 35%, #fff); }
.item__foto, .item__ini {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
  background: var(--fondo-2); border: 1px solid var(--borde);
}
.item__ini { display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; border: 0; }
.item__nom { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.item__dir { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 2px; }

.mapa__lienzo {
  position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); min-height: 0;
  /* Leaflet usa z-index de hasta 1000 en sus capas y controles (zoom +/-, popups);
     sin esto el mapa se pintaba POR ENCIMA del menú fijo (z-index 100) al hacer
     scroll. "isolation" encierra esos z-index adentro del propio mapa. */
  isolation: isolate; z-index: 0;
}
#map { width: 100%; height: 100%; background: var(--fondo-2); }
.mapa__reset {
  position: absolute; left: 12px; bottom: 22px; z-index: 500; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--borde); border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--tinta);
  cursor: pointer; box-shadow: var(--sombra);
}
.mapa__reset:hover { background: #fff; color: var(--brand); }

.pin { display: grid; place-items: center; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)); }
.pin svg { display: block; }
.pin--on { animation: brinca .45s ease; z-index: 1000 !important; }
@keyframes brinca { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }

/* Los grupos de pines del mapa toman el color de marca. */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background-color: color-mix(in srgb, var(--brand) 88%, #fff); color: #fff; font-weight: 700;
}

.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--sombra); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 262px !important; line-height: 1.5; font-family: inherit; }
.leaflet-popup-tip { box-shadow: var(--sombra); }
.pop__foto { display: block; width: 100%; height: 130px; object-fit: cover; }
.pop__cuerpo { padding: 12px 15px 15px; }
.pop__nom { font-size: 16px; font-weight: 800; margin: 0 0 3px; }
.pop__ubi { font-size: 12.5px; font-weight: 700; color: var(--brand); margin: 0 0 6px; }
.pop__desc { font-size: 13px; color: var(--tinta); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pop__acciones { margin-top: 10px; }
/* Leaflet pinta los links con su propio azul: se ancla bajo ".pop" para ganarle. */
.pop .pop__ir {
  display: inline-block; padding: 7px 14px; border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700;
}
.pop .pop__ir:hover { background: var(--brand-oscuro); color: #fff; }

@media (max-width: 1100px) { .mapa { grid-template-columns: 300px 1fr; } }
@media (max-width: 860px) {
  .mapa { grid-template-columns: 1fr; height: auto; gap: 14px; }
  .mapa__lienzo { height: 360px; order: -1; }
  .panel { max-height: 420px; }
}
@media (max-width: 480px) {
  .mapa__lienzo { height: 340px; }
  .buscador input { font-size: 16px; }   /* 16px evita el zoom automático en iOS */
}

/* ── Primera sección de la portada ───────────────────────────────────────
   La tarjeta de destacados baja por encima de lo que venga después del hero,
   así que la PRIMERA sección necesita aire arriba, sea cual sea (se puede
   reordenar desde el panel). Antes esto lo hacía solo ".seccion--intro". */
.es-primera { padding-top: clamp(70px, 13vw, 130px); }

/* La ola del CTA deja ver, en sus hendiduras, el fondo de lo que tiene arriba
   y abajo; index.php le pasa esos tonos según cómo estén ordenadas las secciones. */
.cta { --cta-arriba: var(--fondo); --cta-abajo: var(--pie-fondo); }

/* ── Página «Trabajos realizados» (proyectos.php) ───────────────────────── */
.pagina-proyectos { padding: clamp(40px, 7vw, 76px) 0 clamp(48px, 9vw, 90px); }
.pagina-proyectos .seccion__head { margin-bottom: clamp(20px, 3.4vw, 34px); }
.proy-filtro { display: flex; justify-content: center; margin: 0 auto clamp(22px, 4vw, 38px); }
.proy-filtro select {
  font: inherit; font-size: 14px; padding: 10px 38px 10px 16px; border: 1px solid var(--borde); border-radius: 999px;
  background: #fff; color: var(--tinta); cursor: pointer; max-width: 100%;
}
.proy-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 24px);
}
.proy { margin: 0; }
.proy[hidden] { display: none; }
.proy__abrir {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; cursor: pointer;
  border-radius: 20px; overflow: hidden; background: var(--fondo-2); font: inherit; color: #fff; text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14); transition: transform .18s ease, box-shadow .18s ease;
}
.proy__abrir:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }
.proy__abrir:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.proy__abrir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mismo degradado verde de las tarjetas de servicio, de abajo hacia arriba. */
.proy__velo {
  position: absolute; left: 0; right: 0; bottom: 0; top: 40%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: clamp(14px, 2vw, 20px);
  background: linear-gradient(0deg, rgba(87, 108, 43, .92) 28%, rgba(87, 108, 43, 0) 100%);
}
.proy__nombre {
  color: #fff; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.proy__depto { font-size: clamp(12px, 1.2vw, 13.5px); font-weight: 500; opacity: .95; }
.proy__mas {
  align-self: flex-start; margin-top: 6px; padding: 3px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid #fff; border-radius: 6px; color: #fff;
}
.proy__vacio { text-align: center; color: var(--tinta-suave); padding: 40px 0; }
@media (max-width: 1000px) { .proy-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .proy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .proy-grid { grid-template-columns: 1fr; } .proy__abrir { aspect-ratio: 4 / 3.6; } }

/* ── Visor de fotos (lightbox) ─────────────────────────────────────────────
   Tarjeta blanca con borde de marca, centrada y NO a pantalla completa: afuera
   queda el sitio, oscurecido y semitransparente. Izquierda: foto con flechas y
   miniaturas. Derecha: nombre, servicio, ubicación, texto y botón. */
.visor {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px); background: rgba(20, 24, 14, .55);
  overflow-y: auto;   /* sin backdrop-filter: haría que los botones fijos de proyecto se muevan con el scroll */
}
.visor[hidden] { display: none; }
.visor__caja {
  position: relative; margin: auto; width: 100%; max-width: 980px; background: #fff;
  border: 2px solid var(--brand); border-radius: clamp(18px, 2.6vw, 28px);
  padding: clamp(18px, 3vw, 32px); box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(18px, 3.2vw, 44px);
}
.visor__x {
  position: absolute; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); z-index: 2;
  width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--brand);
  display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: transform .15s ease;
}
.visor__x svg { width: 36px; height: 36px; }
.visor__x:hover { transform: scale(1.08); }
.visor__x:focus-visible, .visor__nav:focus-visible, .visor__tiras button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.visor__galeria { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: center; }
.visor__marco { position: relative; border-radius: 16px; overflow: hidden; background: var(--fondo-2, #f2f2ee); aspect-ratio: 5 / 4; }
.visor__marco img.visor__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visor__contador {
  position: absolute; right: 10px; bottom: 10px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0, 0, 0, .5); color: #fff;
}
.visor__contador:empty { display: none; }
.visor__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand);
  display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.visor__nav:hover { background: var(--brand); color: #fff; }
.visor__nav--prev { left: 10px; }
.visor__nav--next { right: 10px; }
.visor__nav[hidden] { display: none; }

.visor__tiras { display: flex; gap: 10px; overflow-x: auto; padding: 2px; margin: 0; list-style: none; scrollbar-width: thin; }
.visor__tiras[hidden] { display: none; }
.visor__tiras li { flex: 0 0 calc((100% - 30px) / 4); }
.visor__tiras button {
  display: block; width: 100%; aspect-ratio: 1.1 / 1; padding: 0; border: 2px solid transparent; border-radius: 12px;
  overflow: hidden; background: #ddd; cursor: pointer; opacity: .7; transition: opacity .15s ease, border-color .15s ease;
}
.visor__tiras button:hover { opacity: 1; }
.visor__tiras button.is-on { border-color: var(--brand); opacity: 1; }
.visor__tiras img { display: block; width: 100%; height: 100%; object-fit: cover; }

.visor__pie { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding-top: clamp(0px, 1vw, 8px); }
.visor__pie .visor__titulo { margin: 0; font-weight: 700; padding-right: 48px; font-size: clamp(22px, 3vw, 34px); line-height: 1.12; color: var(--tinta); }
.visor__srv {
  padding: 5px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--tinta);
}
.visor__srv[hidden] { display: none; }
.visor__ubi { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--tinta); font-size: 15px; font-weight: 500; }
.visor__pin { --pin-gota: var(--brand); --pin-centro: #fff; --pin-aguja: var(--brand); display: inline-flex; line-height: 0; transition: transform .15s ease; }
a.visor__pin:hover { transform: translateY(-2px) scale(1.12); }
a.visor__pin:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.visor__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); white-space: pre-line; max-width: 46ch; }
.visor__desc[hidden] { display: none; }
.visor__acciones { margin-top: auto; padding-top: 6px; }
.visor__acciones .btn[hidden] { display: none; }
body.visor-abierto { overflow: hidden; }

@media (max-width: 760px) {
  .visor { align-items: flex-start; }
  .visor__caja { grid-template-columns: 1fr; gap: 16px; padding: 16px; margin: 0 auto; }
  .visor__galeria { align-self: stretch; }
  .visor__pie { gap: 12px; }
  .visor__pie .visor__titulo { font-size: 22px; padding-right: 0; margin-top: 2px; }
  .visor__acciones { width: 100%; margin-top: 4px; }
  .visor__acciones .btn { width: 100%; }
  .visor__x { top: 22px; right: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
}

/* ── Filtro por servicio (mapa y página de proyectos) ────────────────────── */
.panel__filtro { padding: 0 14px 6px; }
.panel__filtro select {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px;
  background: #fff; color: var(--tinta); cursor: pointer;
}
.item__srv {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--brand-suave); color: var(--brand);
}
.pop__srv {
  display: inline-block; margin-bottom: 5px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--brand-suave); color: var(--brand);
}
.proy-filtro { gap: 10px; flex-wrap: wrap; }

/* ── Menú centrado en la página ─────────────────────────────────────────────
   Antes los enlaces quedaban pegados al logo. En escritorio el nav es una
   grilla de 3 columnas (1fr / auto / 1fr): el logo a la izquierda, el botón a
   la derecha y los enlaces en el CENTRO REAL de la página, no entre el logo
   y el botón (que mueve el centro según cuánto mida cada uno). En celular
   sigue como antes: logo + hamburguesa. */
@media (min-width: 1041px) {
  .nav__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav__links { flex: none; justify-content: center; gap: clamp(14px, 2.2vw, 32px); }
  .nav__cta { justify-self: end; }
}
.nav__links a { white-space: nowrap; }

/* ── Mapa en celular: más alto y con popup compacto ──────────────────────────
   Un popup de ~300px en un mapa de 340px obligaba a Leaflet a correr el mapa
   para mostrarlo entero: el pin salía de la vista y el popup se cerraba solo. */
@media (max-width: 860px) {
  .mapa__lienzo { height: min(78vh, 460px); }
}
@media (max-width: 560px) {
  .leaflet-popup-content { width: 232px !important; }
  .pop__foto { height: 96px; }
  .pop__cuerpo { padding: 10px 13px 13px; }
  .pop__nom { font-size: 15px; }
  .pop__desc { -webkit-line-clamp: 3; font-size: 12.5px; }
}

/* ── Pin chico + línea «dirección - departamento» ────────────────────────── */
.pin-mini { display: inline-block; flex: 0 0 auto; vertical-align: -3px; }
.pin-mini__gota { fill: var(--pin-gota, var(--brand)); stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.pin-mini__centro { fill: var(--pin-centro, #fff); }
.pin-mini__aguja-aro { fill: none; stroke: var(--pin-aguja, var(--brand)); stroke-width: 1.8; }
.pin-mini__aguja { fill: var(--pin-aguja, var(--brand)); }
.ubi { display: inline-flex; align-items: center; gap: 6px; }
.ubi .pin-mini { vertical-align: 0; }
.ubi > span { min-width: 0; }

/* En las tarjetas (fondo verde oscuro): pin blanco con el centro verde. */
.proy { position: relative; --pin-gota: #fff; --pin-centro: var(--brand); --pin-aguja: #fff; }
.proy__hueco { display: block; height: 20px; }
.proy__ubi {
  position: absolute; left: clamp(14px, 2vw, 20px); right: clamp(14px, 2vw, 20px);
  /* sobre el hueco que deja .proy__velo: padding de abajo + alto de «Ver más» + separaciones */
  bottom: calc(clamp(14px, 2vw, 20px) + 38px);
  margin: 0; display: flex; align-items: center; gap: 6px; height: 20px;
  color: #fff; font-size: clamp(10.5px, 0.95vw, 12px); font-weight: 500; pointer-events: none;
}
.proy__pin { pointer-events: auto; display: inline-flex; flex: 0 0 auto; border-radius: 6px; line-height: 0; transition: transform .15s ease; }
a.proy__pin:hover { transform: translateY(-2px) scale(1.12); }
a.proy__pin:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.proy__ubitexto { min-width: 0; display: flex; white-space: nowrap; }
/* Si no entra todo en una línea, se recorta SOLO la dirección (con "…"): el departamento siempre se ve. */
.proy__dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.proy__dep { flex: 0 0 auto; }


/* En el mapa (lista y popup): pin de color de marca sobre fondo claro. */
.item__dir .ubi, .pop__ubi .ubi { gap: 5px; }
.panel__meta, .item { scroll-margin-top: 90px; }
.mapa { scroll-margin-top: 96px; }

/* Pin de las tarjetas: solo pin + departamento. Zona de toque más grande que el dibujo (12x16) sin moverlo. */
.proy__pin { padding: 8px 8px; margin: -8px; }

/* ── Menú con muchas opciones ────────────────────────────────────────────────
   El menú se arma en el panel, así que puede tener más opciones de las que
   entran en una fila. site.js agrega .nav--compacto cuando los enlaces
   chocan con el logo o con el botón, y el menú pasa a hamburguesa aunque
   la pantalla sea ancha (mismo aspecto que en celular). */
.nav.nav--compacto .nav__in { display: flex; }
.nav.nav--compacto .nav__links {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--fondo); flex-direction: column;
  justify-content: flex-start; gap: 0; box-shadow: var(--sombra); max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.nav.nav--compacto .nav__links.is-open { max-height: min(70vh, 640px); overflow-y: auto; }
.nav.nav--compacto .nav__links a { padding: 14px 24px; border-top: 1px solid var(--borde); }
/* En pantalla ancha sobra lugar: el botón se queda a la vista, al lado de la hamburguesa. */
.nav.nav--compacto .nav__cta { margin-left: auto; }
.nav.nav--compacto .nav__burger { display: flex; margin-left: 0; }

/* ── Pasar de un proyecto a otro (anterior / siguiente) ───────────────────────
   Botones redondos de color de marca FUERA de la tarjeta, a los costados (las
   flechas chicas de adentro cambian de foto). En pantallas donde no entran al
   costado, pasan a una barrita fija abajo con «Proyecto 2 de 4». */
.visor__proy { display: contents; }
.visor__pn {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: #fff; cursor: pointer; font: inherit;
}
.visor__pn--prev { left: max(12px, calc(50% - 490px - 92px)); }
.visor__pn--next { right: max(12px, calc(50% - 490px - 92px)); }
.visor__pn-circulo {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .18s ease, background .18s ease;
}
.visor__pn:hover .visor__pn-circulo { background: var(--brand-oscuro); transform: scale(1.08); }
.visor__pn--prev:hover .visor__pn-circulo { transform: translateX(-3px) scale(1.08); }
.visor__pn--next:hover .visor__pn-circulo { transform: translateX(3px) scale(1.08); }
.visor__pn:active .visor__pn-circulo { transform: scale(.96); }
.visor__pn:focus-visible { outline: none; }
.visor__pn:focus-visible .visor__pn-circulo { outline: 3px solid #fff; outline-offset: 3px; }
.visor__pn-texto { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.visor__pn-info { display: none; }
.visor__proy[hidden] { display: none; }

@keyframes visor-cambia { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.visor__caja.visor__caja--cambia { animation: visor-cambia .28s ease; }
@media (prefers-reduced-motion: reduce) { .visor__caja.visor__caja--cambia { animation: none; } }

/* Sin lugar al costado de la tarjeta: barrita fija abajo. */
@media (max-width: 1140px) {
  .visor { padding-bottom: 92px; }
  .visor__proy {
    display: flex; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
    align-items: center; gap: 14px; padding: 7px 9px; background: #fff; border: 2px solid var(--brand);
    border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); max-width: calc(100% - 24px);
  }
  .visor__pn { position: static; transform: none; flex-direction: row; }
  .visor__pn-texto { display: none; }
  .visor__pn-circulo { width: 42px; height: 42px; border: 0; box-shadow: none; }
  .visor__pn--prev:hover .visor__pn-circulo, .visor__pn--next:hover .visor__pn-circulo { transform: scale(1.06); }
  .visor__pn-info { display: block; min-width: 108px; text-align: center; font-size: 13px; font-weight: 700; color: var(--tinta); white-space: nowrap; }
  .visor__pn:focus-visible .visor__pn-circulo { outline-color: var(--brand); }
}

/* ── Aire entre secciones ─────────────────────────────────────────────────────
   Una sección sin fondo propio seguida de otra con fondo (por ejemplo «Soluciones»
   y luego «Servicios») sumaba el espacio de abajo de una más el de arriba de la
   otra: ~180px vacíos entre el botón «Ver servicios» y el título de Servicios.
   Se recorta el de abajo; el de arriba de la sección con fondo se mantiene. Lo
   mismo entre dos secciones sin fondo seguidas. */
.seccion:not(.seccion--alt):has(+ .seccion--alt) { padding-bottom: clamp(20px, 3.2vw, 36px); }
.seccion:not(.seccion--alt) + .seccion:not(.seccion--alt) { padding-top: clamp(14px, 2.4vw, 24px); }

/* Footer en celular: el bloque de la marca (logo, nombre y texto) va centrado, como el resto de las columnas. */
@media (max-width: 800px) {
  .pie__col--marca { justify-self: center; align-items: center; text-align: center; }
}

/* ── «Trabajos realizados»: llamado a la acción al final ───────────────────── */
.proy-cta {
  margin: clamp(36px, 6vw, 64px) auto 0; max-width: 760px; padding: clamp(24px, 4vw, 40px) clamp(18px, 4vw, 40px);
  text-align: center; background: var(--brand-suave); border-radius: 22px;
}
.proy-cta h2 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 26px); }
.proy-cta p { margin: 0 0 20px; color: var(--tinta-suave); }
.proy-cta__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }