/* ==========================================================================
   FOT LIBRE — Design System
   Basado en MANUAL_v04.pdf (paleta, tipografías y usos de marca)
   Mobile-first · sin dependencias · sin frameworks
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Primarios (Manual pág. 10) */
  --c-petroleo:      #324D54;
  --c-teal:          #007F88;
  --c-gris-verdoso:  #5A6E72;
  --c-gris-topo:     #424444;

  /* Secundarios (Manual pág. 11) */
  --c-blanco:        #FFFFFF;
  --c-salvia:        #B1B297;
  --c-gris-claro:    #CACFD2;
  --c-negro:         #000000;
  --c-rosa:          #F1AAC9;
  /* Rosa oscurecido para texto/íconos sobre blanco (AA, 5.5:1). El rosa
     crudo se usa tal cual sobre fondos oscuros (petróleo), donde ya rinde
     6.65:1 sin oscurecer. */
  --c-rosa-700:      #A14D72;
  /* Salvia diluido a fondo cálido, para romper el blanco/gris neutro de
     las secciones alternadas sin competir con el petróleo. */
  --c-crema:         #F4F2EA;

  /* Unidad de negocio TERRENOS (Manual pág. 19) — acento del sitio */
  --c-aqua:          #00A5AD;

  /* Derivados de sistema (tintes y sombras de los primarios, no colores nuevos) */
  --c-petroleo-900:  #22383E;
  --c-petroleo-700:  #2A434A;
  --c-teal-700:      #00666D;
  --c-teal-050:      #E6F2F3;
  --c-neutro-050:    #F5F7F7;
  --c-neutro-100:    #EDF1F1;
  --c-neutro-200:    #DDE4E4;

  /* Roles semánticos */
  --bg:              var(--c-blanco);
  --bg-alt:          var(--c-crema);
  --bg-oscuro:       var(--c-petroleo);
  --texto:           var(--c-gris-topo);
  --texto-suave:     #5B6668;
  --titulo:          var(--c-petroleo);
  --borde:           var(--c-neutro-200);
  --acento:          var(--c-teal);
  --acento-hover:    var(--c-teal-700);
  --foco:            var(--c-aqua);

  /* Tipografía (Manual pág. 15-16)
     MUSEO  → titulares y destacados   (licencia comercial: cargar vía Adobe Fonts o self-host)
     ARCHIVO→ textos de corrido        (Google Fonts) */
  --f-titulo: "Museo", "Museo Slab", "Archivo", system-ui, sans-serif;
  --f-texto:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-xl:   clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --t-3xl:  clamp(2.125rem, 1.7rem + 1.9vw, 3.375rem);
  --t-4xl:  clamp(2.5rem, 1.85rem + 2.9vw, 4.5rem);

  /* Espaciado */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-seccion: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --ancho: 1200px;
  --ancho-texto: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radios y sombras — lenguaje sobrio, institucional */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-full: 999px;
  /* Pastilla del header: redondeada pero no cápsula, para no perder el
     carácter institucional del manual */
  --r-pastilla: 999px;   /* cápsula completa */
  --r-panel: 22px;       /* el panel móvil no puede ser cápsula */
  --alto-header: 100px;  /* 88px de pastilla + 12px de respiro superior */
  --s-1: 0 1px 2px rgba(34,56,62,.06), 0 2px 8px rgba(34,56,62,.05);
  --s-2: 0 4px 12px rgba(34,56,62,.08), 0 12px 32px rgba(34,56,62,.07);
  --s-3: 0 10px 24px rgba(34,56,62,.10), 0 24px 60px rgba(34,56,62,.10);

  --transicion: 220ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. FUENTES
   -------------------------------------------------------------------------- */
/* ARCHIVO — self-hosted (WPO). Fuente variable, subset latin (cubre español:
   Latin-1, puntuación general, €, ™). Un solo .woff2 de ~35 KB cubre los pesos
   400-800 que usa el sitio. Sin peticiones a terceros: se elimina el request a
   Google Fonts y se gana ~100-200 ms de LCP. El .woff2 se precarga desde
   functions.php con crossorigin. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;              /* rango variable completo */
  font-stretch: 100%;
  font-display: swap;                /* evita FOIT: texto visible con la fallback */
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MUSEO no es una fuente libre. Al contratar la licencia, descomentar y self-hostear:
@font-face { font-family:"Museo"; src:url("../fonts/museo-700.woff2") format("woff2");
             font-weight:700; font-display:swap; }
@font-face { font-family:"Museo"; src:url("../fonts/museo-900.woff2") format("woff2");
             font-weight:900; font-display:swap; }
   Hasta entonces, el stack cae en Archivo con el mismo peso óptico. */

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--c-aqua); color: #fff; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  color: var(--titulo);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--t-3xl); font-weight: 800; }
h3 { font-size: var(--t-xl);  font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--t-lg);  font-weight: 700; letter-spacing: -0.01em; }
p  { text-wrap: pretty; }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--texto-suave); }

/* Antetítulo — el sistema "_" del manual (FotLibre_//Manual de Marca_) */
.antetitulo {
  display: inline-block;
  font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-rosa-700);
  margin-bottom: var(--e-4);
}
/* Recurso gráfico: una línea de acento adelante (kicker editorial) y el "_"
   del sistema del manual atrás. Enriquece el tag sin recargar la marca. */
.antetitulo::before {
  content: ""; display: inline-block; width: 1.75rem; height: 2px;
  vertical-align: middle; margin: -.15em .7em 0 0;
  background: currentColor; opacity: .85;
}
/* El "_" del sistema gráfico del manual: viaja pegado a la última palabra */
.antetitulo::after { content: "\00a0_"; opacity: .7; }
.antetitulo--claro { color: var(--c-rosa); }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: var(--e-seccion); }
.seccion--alt {
  position: relative; overflow: hidden;
  background: var(--bg-alt);
}
/* Mismo patrón de marca que la franja CTA, en la variante clara (marrón
   suave) para que combine con el fondo crema en vez del verde de las
   secciones oscuras. "cover" en vez de "contain": es un patrón decorativo,
   no una foto con un borde "especial" que se note al recortarlo, así que
   siempre puede llenar la sección entera sin dejar zonas sin textura. */
.seccion--alt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/patron-fondo-claro.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .25;
}
.seccion--alt > .contenedor { position: relative; z-index: 1; }
/* position:relative + overflow:hidden acotan la .textura-fondo a esta sección */
.seccion--oscura { position: relative; overflow: hidden; background: var(--bg-oscuro); color: #DCE6E8; }
.seccion--oscura h2, .seccion--oscura h3, .seccion--oscura h4 { color: #fff; }
.seccion--oscura .lead { color: #B8C9CC; }

.medida { max-width: var(--ancho-texto); }
.duo { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5.5rem); }
  .duo--texto-derecha > *:first-child { order: 2; }
}
.grilla { display: grid; gap: var(--e-5); }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.cabecera-seccion { max-width: 60ch; margin-bottom: var(--e-7); }

/* --------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .85rem 1.6rem;
  font-family: var(--f-texto); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .01em; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-full);
  cursor: pointer; transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .flecha { transition: transform var(--transicion); }
.btn:hover .flecha { transform: translateX(3px); }

.btn--primario { background: var(--c-teal); color: #fff; box-shadow: var(--s-1); }
.btn--primario:hover { background: var(--c-teal-700); box-shadow: var(--s-2); }

.btn--secundario { background: transparent; color: var(--c-petroleo); border-color: var(--c-petroleo); }
.btn--secundario:hover { background: var(--c-petroleo); color: #fff; }

.btn--claro { background: #fff; color: var(--c-petroleo); }
.btn--claro:hover { background: var(--c-neutro-100); }

.btn--fantasma-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--fantasma-claro:hover { background: #fff; color: var(--c-petroleo); border-color: #fff; }

.btn--bloque { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px; /* WCAG 2.5.8 — área táctil */
  font-weight: 700; font-size: var(--t-sm); color: var(--acento); text-decoration: none;
}
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha .flecha { transition: transform var(--transicion); }
.enlace-flecha:hover .flecha { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-petroleo); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-md) 0;
}
.saltar:focus { left: 0; }

/* --- Header "pastilla" ---------------------------------------------------
   Flota sobre el hero: sticky con un respiro arriba y margen negativo para
   que el contenido de abajo pase por detrás. Sobre el hero va translúcido
   oscuro con el logo en negativo; al salir del hero se vuelve claro y el
   logo pasa a color. */
.header {
  position: sticky; top: 0; z-index: 100;
  /* el padding lateral separa la pastilla del borde de la pantalla;
     el margen negativo deja que el hero pase por detrás */
  padding: var(--e-3) var(--gutter) 0;
  margin-bottom: calc(-1 * var(--alto-header));
}
/* Rejilla de 3 columnas: el menú queda centrado en la pastilla sin importar
   cuánto midan el logo y el CTA. */
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--e-5);
  /* mismo ancho útil que .contenedor, para que la pastilla no sobresalga */
  max-width: calc(var(--ancho) - 2 * var(--gutter)); margin-inline: auto;
  min-height: 84px; padding: var(--e-3) clamp(1.1rem, 2vw, 1.6rem);
  /* Glass simple, igual que .buscador: un solo velo blanco translúcido,
     sin degradé superpuesto. */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-pastilla);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: 0 6px 26px rgba(12,24,27,.16), inset 0 1px 0 rgba(255,255,255,.10);
  transition: background var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.header__inner > .nav { grid-column: 2; }
.header__inner > .header__cta,
.header__inner > .menu-btn { grid-column: 3; justify-self: end; }

/* Estado sólido: pasamos el hero, o el menú móvil está abierto */
.header.is-solido .header__inner,
.header.menu-abierto .header__inner {
  background:
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.55)),
    rgba(255,255,255,.86);
  border-color: rgba(50,77,84,.12);
  box-shadow: 0 6px 24px rgba(34,56,62,.10), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Logo: dos versiones apiladas que se cruzan en opacidad */
.header__logo {
  position: relative; display: block; grid-column: 1; justify-self: start;
  width: 118px; height: 62px;
}
.header__logo img {
  position: absolute; inset: 0; width: 118px; height: auto;
  transition: opacity var(--transicion);
}
.header__logo .logo--color  { opacity: 0; }
.header.is-solido .header__logo .logo--blanco,
.header.menu-abierto .header__logo .logo--blanco { opacity: 0; }
.header.is-solido .header__logo .logo--color,
.header.menu-abierto .header__logo .logo--color  { opacity: 1; }

.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.6rem); list-style: none; padding: 0; }
.nav__link {
  position: relative; display: block; padding: .5rem 0;
  font-size: var(--t-sm); font-weight: 600; color: #EAF2F3; text-decoration: none;
  transition: color var(--transicion);
}
.header.is-solido .nav__link,
.header.menu-abierto .nav__link { color: var(--c-petroleo); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: .15rem; width: 100%; height: 2px;
  background: var(--c-aqua); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicion);
}
.nav__link:hover { color: #fff; }
.header.is-solido .nav__link:hover { color: var(--c-teal); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link--externo::before { content: "↗"; font-size: .8em; margin-right: .25em; opacity: .6; }

/* CTA del header: más compacto que un .btn de sección, para no competir con el logo */
.header__cta {
  display: none;
  min-height: 42px; padding: .55rem 1.15rem;
  font-size: .8125rem; letter-spacing: .005em; white-space: nowrap;
}

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%; cursor: pointer;
  transition: border-color var(--transicion);
}
.header.is-solido .menu-btn,
.header.menu-abierto .menu-btn { border-color: var(--borde); }
.menu-btn__barras, .menu-btn__barras::before, .menu-btn__barras::after {
  display: block; width: 20px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform var(--transicion), opacity var(--transicion),
              background var(--transicion);
}
.header.is-solido .menu-btn__barras,
.header.is-solido .menu-btn__barras::before,
.header.is-solido .menu-btn__barras::after,
.header.menu-abierto .menu-btn__barras,
.header.menu-abierto .menu-btn__barras::before,
.header.menu-abierto .menu-btn__barras::after { background: var(--c-petroleo); }
.menu-btn__barras::before, .menu-btn__barras::after { content: ""; position: absolute; }
.menu-btn__barras::before { transform: translateY(-6px); }
.menu-btn__barras::after  { transform: translateY(6px); }
.menu-btn[aria-expanded="true"] .menu-btn__barras { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__barras::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras::after  { transform: rotate(-45deg); }

/* Panel móvil: cuelga de la pastilla, con su mismo lenguaje.
   position:absolute a propósito: si quedara en el flujo normal, al abrirse
   sumaría su alto dentro de .header y el margin-bottom negativo (pensado
   para superponer la pastilla al hero) empujaría el hero hacia abajo. */
.menu-movil {
  /* width:auto es necesario: el div también lleva la clase .contenedor, que
     fija width:100% y eso pisa el cálculo por left/right del posicionamiento
     absoluto (el navegador ignora "right" si "width" ya quedó resuelto). */
  display: none; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); width: auto; z-index: 10;
  margin-top: var(--e-2);
  padding: var(--e-4) clamp(1rem, 4vw, 1.5rem) var(--e-5);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(50,77,84,.10);
  border-radius: var(--r-panel);
  box-shadow: var(--s-2);
  backdrop-filter: saturate(160%) blur(16px);
  max-width: calc(var(--ancho) - 2 * var(--gutter)); margin-inline: auto;
  max-height: calc(100dvh - var(--alto-header));
  overflow-y: auto;
}
.menu-movil.is-open { display: block; }
.menu-movil ul { list-style: none; padding: 0; }
.menu-movil ul a {
  display: block; padding: .9rem 0; font-weight: 600; font-size: var(--t-lg);
  color: var(--c-petroleo); text-decoration: none; border-bottom: 1px solid var(--c-neutro-100);
}
.menu-movil .btn { margin-top: var(--e-5); }

/* --- Conmutación desktop / mobile ---------------------------------------
   Va al final del bloque de header: estas reglas deben ganar por orden de
   cascada, no por !important. Breakpoint en 1120px porque con 6 ítems de
   menú + logo + CTA el nav se apretaba a 1024. */
@media (min-width: 1120px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .menu-btn, .menu-movil { display: none; }
}

/* En mobile la cápsula completa (999px) se veía muy "globo" sobre el hero.
   Bajamos a un radio de panel: mismo lenguaje que el menú desplegable. */
@media (max-width: 1119px) {
  .header__inner { border-radius: var(--r-panel); }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-petroleo-900);
  /* El header flota por encima, así que el hero recupera esa altura arriba */
  padding-top: calc(var(--alto-header) + clamp(3rem, 2rem + 7vw, 7rem));
  padding-bottom: clamp(4rem, 3rem + 9vw, 8.5rem);
}
@media (min-width: 900px) {
  /* Solo el hero de la Home ocupa toda la pantalla, para que el CTA (Cotizá
     tu terreno) quede siempre visible sin scrollear. Los heroes internos
     quedan fuera a propósito: son cabeceras de página, no portadas, y con
     100vh resultaban desproporcionadamente altos. */
  .hero:not(.hero--interno) { min-height: 100vh; display: flex; align-items: center; }
}
.hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; opacity: .58;
}
/* Slideshow del hero: 3 aéreas con crossfade + zoom lento (Ken Burns).
   Reemplaza al video de fondo: 3 imágenes pesan una fracción y logran el
   mismo efecto. La slide activa va al .58 con el que está calibrado el
   degradado de abajo (.hero::after). */
.hero__slider { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: .58; }
.hero__slide picture { position: absolute; inset: 0; display: block; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.01); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active img { animation: none; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Calibrado sobre la fotografía aérea: deja respirar la trama urbana del
     lado derecho y mantiene el bloque de texto de la izquierda por encima
     de 4.5:1 contra blanco. Medido, no estimado. */
  background:
    radial-gradient(115% 90% at 10% 26%, rgba(28,47,52,.92) 0%, rgba(28,47,52,.66) 42%, rgba(28,47,52,.28) 100%),
    linear-gradient(180deg, rgba(28,47,52,.30) 0%, rgba(28,47,52,.10) 38%, rgba(28,47,52,.78) 100%);
}
/* En mobile el texto ocupa todo el ancho, así que el velo tiene que ser
   parejo y no radial: con el degradado de desktop el blanco caía a 1.98:1. */
@media (max-width: 900px) {
  .hero::after {
    background:
      linear-gradient(180deg, rgba(24,41,45,.86) 0%, rgba(24,41,45,.80) 45%, rgba(24,41,45,.90) 100%);
  }
  .hero__fondo { opacity: .5; }
}

.hero__contenido { max-width: 46rem; color: #fff; }
.hero h1 { color: #fff; }
.hero__bajada {
  margin-top: var(--e-5); max-width: 40rem;
  font-size: var(--t-lg); line-height: 1.55; color: #C8D8DA;
}
.hero .acciones { margin-top: var(--e-7); }

.datos {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: 0; list-style: none;
}
.dato {
  flex: 1 1 200px; padding: var(--e-4) var(--e-5);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); backdrop-filter: blur(6px);
}
.dato__valor {
  display: block; font-family: var(--f-titulo); font-size: var(--t-xl);
  font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15;
}
.dato__etiqueta { display: block; margin-top: .15rem; font-size: var(--t-sm); color: #A9BFC2; }

/* Tarjeta con sello institucional (CUCICBA).
   El escudo va sobre un chip blanco: es una marca de terceros y no se
   recolorea, y sobre el fondo oscuro su azul marino se empastaría. */
.dato--sello { display: flex; align-items: center; gap: var(--e-4); }
.dato__sello {
  flex-shrink: 0; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 6px;
  background: #fff; border-radius: var(--r-md);
}
.dato__sello img { width: auto; height: 34px; }
.dato--sello > div { min-width: 0; }

/* Mobile: las 3 tarjetas pasan a un carrusel deslizable con scroll-snap, para
   no apilarlas y obligar a scrollear. El asomo de la tarjeta siguiente avisa
   que se puede deslizar. */
@media (max-width: 760px) {
  .datos {
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  .datos::-webkit-scrollbar { display: none; }
  .dato { flex: 0 0 78%; scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   9. MAPA DE INCIDENCIAS — mockup interactivo
   -------------------------------------------------------------------------- */
.mapa-mock {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-petroleo); box-shadow: var(--s-3);
}
.mapa-mock__barra {
  display: flex; align-items: center; gap: var(--e-2);
  padding: .7rem .9rem; background: var(--c-petroleo-900);
}
.mapa-mock__punto { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.mapa-mock__url {
  flex: 1; margin-left: var(--e-2); padding: .25rem .7rem;
  font-size: var(--t-xs); color: #93AAAE;
  background: rgba(255,255,255,.06); border-radius: var(--r-full);
}
.mapa-mock__lienzo { display: block; width: 100%; height: auto; background: #23393F; }

.barrio {
  fill: #3E6067;                 /* incidencia media (base) */
  stroke: #22383E; stroke-width: 1.1;
  transition: fill .18s ease;
  cursor: pointer;
}
.barrio--alta { fill: #00A5AD; } /* incidencia alta */
.barrio--baja { fill: #2A434A; } /* incidencia baja */
.barrio:hover, .barrio:focus, .barrio.is-activo { fill: #EAF6F6; outline: none; }

.mapa-tooltip {
  position: absolute; top: 16%; right: 5%;
  max-width: 62%; min-width: 168px; padding: .8rem .95rem;
  background: rgba(255,255,255,.97); border-radius: var(--r-md); box-shadow: var(--s-2);
  font-size: var(--t-xs); line-height: 1.45; color: var(--c-gris-topo);
  pointer-events: none;
}
.mapa-tooltip strong { display: block; font-size: var(--t-base); color: var(--c-petroleo); }
/* En mobile el tooltip no debe tapar el mapa: pasa a ser un pie de figura */
@media (max-width: 560px) {
  .mapa-tooltip {
    position: static; max-width: none; border-radius: 0; box-shadow: none; margin-top: 0;
    background: var(--c-petroleo-900); color: #B8C9CC;
  }
  .mapa-tooltip strong { color: #fff; }
  .mapa-tooltip em { color: var(--c-aqua); }
}
.mapa-tooltip em { font-style: normal; color: var(--c-teal); font-weight: 700; text-transform: capitalize; }

.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-4); list-style: none; padding: 0;
           font-size: var(--t-xs); color: var(--texto-suave); }
.leyenda li { display: flex; align-items: center; gap: .45rem; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: block; }

/* Callout técnico */
.callout {
  padding: var(--e-5); margin-top: var(--e-6);
  background: var(--c-teal-050); border-left: 4px solid var(--c-teal); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout h3 { font-size: var(--t-base); margin-bottom: var(--e-2); }
.callout p { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }

/* --------------------------------------------------------------------------
   10. FORMULARIOS
   -------------------------------------------------------------------------- */
.form-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--s-2);
}
/* Dentro de una tarjeta el título no compite con los de sección */
.form-card h2 { font-size: var(--t-xl); }
.campo { margin-bottom: var(--e-5); }
.campo__label { display: block; margin-bottom: .4rem; font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo); }
.campo__label .req { color: var(--c-teal); }
.campo__input {
  width: 100%; min-height: 50px; padding: .75rem 1rem;
  background: #fff; color: var(--texto);
  border: 1.5px solid var(--c-gris-claro); border-radius: var(--r-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__input::placeholder { color: #93A0A2; }
.campo__input:hover { border-color: var(--c-gris-verdoso); }
.campo__input:focus { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(0,127,136,.15); outline: none; }
textarea.campo__input { min-height: 110px; resize: vertical; }
select.campo__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6E72' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
  padding-right: 2.6rem;
}
.campo__ayuda { display: block; margin-top: .35rem; font-size: var(--t-xs); color: var(--texto-suave); }
.campos-2 { display: grid; gap: 0; }
@media (min-width: 560px) { .campos-2 { grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); } }
.form-nota { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--texto-suave); text-align: center; }

/* --------------------------------------------------------------------------
   11. TARJETAS
   -------------------------------------------------------------------------- */
.tarjeta {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--s-2); border-color: var(--c-gris-claro); }
.tarjeta p { color: var(--texto-suave); margin-top: var(--e-3); }
.tarjeta .btn, .tarjeta .enlace-flecha { margin-top: auto; padding-top: var(--e-5); align-self: flex-start; }
.tarjeta .btn { margin-top: var(--e-6); padding-top: .85rem; }

.tarjeta__icono {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--e-4);
  background: var(--c-teal-050); border-radius: var(--r-md); color: var(--c-teal);
}
.seccion--oscura .tarjeta__icono { background: rgba(0,165,173,.16); color: var(--c-aqua); }

/* Pilares sobre fondo oscuro */
.pilar { padding-top: var(--e-5); }
.pilar h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.pilar p { color: #AFC3C6; font-size: var(--t-sm); }

/* Tarjetas de contenido (Novedades) */
.nota {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.nota:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.nota__media { aspect-ratio: 16/10; overflow: hidden; background: var(--c-neutro-100); }
.nota__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.nota:hover .nota__media img { transform: scale(1.04); }
.nota__cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e-5); }
.nota h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.nota h3 a { color: inherit; text-decoration: none; }
.nota h3 a:hover { color: var(--c-teal); }
.nota p { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-5); }
.nota .enlace-flecha { margin-top: auto; }

.etiqueta {
  align-self: flex-start; display: inline-block; margin-bottom: var(--e-3); padding: .3rem .7rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-teal-700); background: var(--c-teal-050); border-radius: var(--r-sm);
}
.etiqueta--prensa { color: #6B4E26; background: #F6EFE2; }

/* --------------------------------------------------------------------------
   12. MEDIA / FIGURAS
   -------------------------------------------------------------------------- */
.figura { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-2); }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura--marco { padding: var(--e-4); background: var(--c-neutro-100); box-shadow: none; }
.figura--marco img { border-radius: var(--r-md); }
figcaption { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--texto-suave); }

/* Marca de agua con la textura del manual */
/* Fondo de sección oscura: una aérea de la Ciudad bajo un velo verde de marca
   (antes: el isologo repetido en mosaico). El degradado teal→petróleo la
   "verdea" y la mantiene lo bastante oscura para que el texto claro pase AA. */
.textura-fondo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Misma aérea que las cabeceras internas (hero-aerea): el archivo viejo
     traía un bloque sólido de "zona segura" en su tercio izquierdo, con un
     borde vertical duro a los 425px. Ese borde estaba DENTRO de la imagen,
     así que ningún cover/contain lo podía evitar — se veía como un corte en
     el fondo. Con el bloque recortado, "cover" cubre la sección entera sin
     cortes y el degradado (primero en la lista, o sea por encima de la
     foto) la verdea y la oscurece para que el texto pase AA. */
  background-image:
    linear-gradient(rgba(0,72,78,.80), rgba(24,42,47,.92)),
    url("../img/foto/hero-aerea-1280.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.seccion--oscura > .contenedor { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   13. LISTA DE BENEFICIOS
   -------------------------------------------------------------------------- */
.checks { list-style: none; padding: 0; display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--e-3); align-items: start; font-size: var(--t-sm); }
.checks svg { margin-top: .3em; color: var(--c-rosa-700); flex-shrink: 0; }
.seccion--oscura .checks svg { color: var(--c-rosa); }

/* --------------------------------------------------------------------------
   14. LÍNEA DE TIEMPO / PROCESO
   -------------------------------------------------------------------------- */
.pasos { list-style: none; padding: 0; display: grid; gap: var(--e-6); counter-reset: paso; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(4, 1fr); gap: var(--e-5); } }
.paso { position: relative; padding-top: var(--e-5); border-top: 2px solid var(--c-neutro-200); counter-increment: paso; }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block; margin-bottom: var(--e-3);
  font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 800; color: var(--c-aqua); line-height: 1;
}
.paso h3 { font-size: var(--t-base); margin-bottom: var(--e-2); }
.paso p { font-size: var(--t-sm); color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   15. CTA FRANJA
   -------------------------------------------------------------------------- */
.franja {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  /* petróleo: fondo oficial de marca para este patrón (manual), texto en AA (7.15:1 párrafo, 9.03:1 título) */
  background: var(--c-petroleo); color: #fff; text-align: center;
}
.franja h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.franja p { max-width: 52ch; margin: var(--e-4) auto 0; color: #CFEAEC; }
.franja .acciones { justify-content: center; }
.franja__textura {
  position: absolute; inset: 0; z-index: -1; opacity: .25;
  /* "cover" en vez de "100% auto": en mobile la franja es angosta y alta
     (el patrón, más ancho que alto, quedaba corto y dejaba huecos arriba y
     abajo). "cover" nunca corta arriba/abajo en esa proporción — recorta
     a los costados en cambio, que para un patrón decorativo no se nota. En
     desktop (sección ancha y baja) "cover" se comporta igual que ancho
     completo, así que sirve para los dos casos sin media query. */
  background-image: url("../img/patron-fondo.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--c-petroleo-900); color: #A9BFC2; padding-block: var(--e-8) var(--e-6); font-size: var(--t-sm); }
.footer__grid { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-6); } }
.footer__logo { width: 148px; margin-bottom: var(--e-4); }
.footer h3 {
  margin-bottom: var(--e-4); font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; line-height: 1.4;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .2rem; }
.footer ul a { display: inline-block; padding-block: .45rem; } /* área táctil ≥24px */
.footer a { color: #A9BFC2; text-decoration: none; transition: color var(--transicion); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__dato { display: block; margin-bottom: var(--e-4); line-height: 1.3; }
.footer__dato strong { display: block; margin-bottom: .3rem; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: #7E9296; font-weight: 700; }
.footer__dato a, .footer__dato span { color: #fff; font-size: var(--t-base); }
.footer__dato a { display: inline-block; }
.footer__legal a { display: inline-block; padding-block: .4rem; }
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-7); padding-top: var(--e-5);
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-xs); color: #7E9296;
}
.footer__legal > p { margin: 0; }
.footer__legales { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.footer__credito { width: 100%; padding-top: var(--e-3); border-top: 1px solid rgba(255,255,255,.07); }
@media (min-width: 900px) { .footer__credito { width: auto; padding-top: 0; border-top: 0; } }
.footer__credito a { font-weight: 600; color: #A9BFC2; }
.redes { display: flex; gap: var(--e-3); }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff;
  transition: background var(--transicion), border-color var(--transicion);
}
.redes a:hover { background: var(--c-teal); border-color: var(--c-teal); }

/* --------------------------------------------------------------------------
   16b. FRANJA MÍNIMA (formulario a pantalla completa, sin nav ni footer)
   -------------------------------------------------------------------------- */
.franja-minima { padding: var(--e-4) 0; border-bottom: 1px solid var(--borde); background: #fff; }
.franja-minima__inner { display: flex; align-items: center; justify-content: space-between; }
.franja-minima__salir {
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); text-decoration: none;
}
.franja-minima__salir:hover { color: var(--c-petroleo); text-decoration: underline; }
.seccion--formulario { background: var(--bg-alt); min-height: 70vh; display: flex; align-items: center; }

/* 17. El botón flotante de WhatsApp del prototipo no se porta al tema:
   se resuelve con un plugin externo, que trae su propio markup y estilos.
   Dejar acá una regla huérfana solo sumaría CSS que nadie usa. */

/* --------------------------------------------------------------------------
   17b. HERO INTERNO + UNIDADES DE NEGOCIO
   -------------------------------------------------------------------------- */
/* Cabecera de página interna: más baja que la portada de la Home — es un
   encabezado, no una portada — y con el mismo tratamiento de fondo que la
   sección oscura de la Home (.textura-fondo), que es el que mejor deja ver
   la aérea. */
.hero--interno {
  padding-top: calc(var(--alto-header) + clamp(1.5rem, 1rem + 2.5vw, 2.75rem));
  padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.25rem);
}
.hero--interno h1 { font-size: var(--t-3xl); }
/* La foto va a plena intensidad: quien oscurece es el velo de abajo, igual
   que en .textura-fondo. Antes iba al .5 y encima llevaba un velo del .96,
   por eso la aérea casi no se apreciaba. */
.hero--interno .hero__fondo { opacity: 1; }
/* Mismo velo teal→petróleo de .textura-fondo: verdea la aérea y la deja lo
   bastante oscura para que el texto claro pase AA (medido sobre la zona más
   clara de la foto: 7.6:1 en blanco, 5.2:1 en la bajada #C8D8DA). */
.hero--interno::after {
  background: linear-gradient(rgba(0,72,78,.80), rgba(24,42,47,.92));
}

.miga { font-size: var(--t-xs); color: #9DB3B7; margin-bottom: var(--e-4); }
.miga ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; padding: 0; }
.miga li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.miga a { display: inline-block; padding-block: .3rem; color: #C8D8DA; text-decoration: none; }
.miga a:hover { text-decoration: underline; }

/* Tarjetas de unidad de negocio — colores del Manual pág. 18-20 */
.unidad {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.unidad:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.unidad::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--u, var(--c-teal)); }
/* La barra superior lleva el color exacto de submarca (--u).
   La píldora usa --u-txt: el mismo color oscurecido lo justo para que el texto
   blanco a 11px alcance 4.5:1. Aqua #00A5AD y Fucsia #EC0C77 no llegan (3.01 y
   4.30) usados como fondo de texto chico. */
.unidad__tag {
  display: inline-block; margin-bottom: var(--e-3); padding: .28rem .7rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--u-txt, var(--u)); border-radius: var(--r-sm);
}
.unidad h3 { margin-bottom: var(--e-3); }
.unidad p { font-size: var(--t-sm); color: var(--texto-suave); }
.unidad--terrenos    { --u: #00A5AD; --u-txt: #007F88; }  /* Verde Teal, del mismo set */
.unidad--residencial { --u: #EC0C77; --u-txt: #C40A63; }
.unidad--desarrollos { --u: #225AA0; --u-txt: #225AA0; }

/* Perfiles del ecosistema */
.perfil {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--e-4);
  padding: var(--e-5) 0; border-bottom: 1px solid var(--borde);
}
.perfil:last-child { border-bottom: 0; }
.perfil__num {
  font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 800;
  color: var(--c-aqua); line-height: 1.2;
}
.perfil h3 { font-size: var(--t-base); margin-bottom: var(--e-2); }
.perfil p { font-size: var(--t-sm); color: var(--texto-suave); }

/* Cita institucional */
.cita {
  max-width: 46ch; margin-inline: auto; text-align: center;
  font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 700;
  line-height: 1.3; color: var(--c-petroleo); letter-spacing: -.015em;
}
.cita::before { content: "“"; display: block; font-size: 3em; line-height: .6; color: var(--c-aqua); margin-bottom: .1em; }
.cita footer { margin-top: var(--e-5); font-family: var(--f-texto); font-size: var(--t-sm);
               font-weight: 400; color: var(--texto-suave); letter-spacing: 0; }

/* Cifras institucionales */
.cifras { display: grid; gap: var(--e-6); list-style: none; padding: 0; text-align: center; }
@media (min-width: 700px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifra__valor { display: block; font-family: var(--f-titulo); font-size: var(--t-2xl);
                font-weight: 800; color: var(--c-aqua); letter-spacing: -.03em; line-height: 1.1; }
.cifra__etiqueta { display: block; margin-top: var(--e-2); font-size: var(--t-sm); color: #AFC3C6; }

/* --------------------------------------------------------------------------
   17c. STEPPER — Cotizá tu terreno
   -------------------------------------------------------------------------- */
.stepper { max-width: 680px; margin-inline: auto; }

.stepper__barra { margin-bottom: var(--e-6); }
.stepper__pasos { display: flex; list-style: none; padding: 0; counter-reset: st; }
.stepper__paso {
  flex: 1; position: relative; padding-top: var(--e-5);
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave);
  text-align: center; counter-increment: st;
}
.stepper__paso::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--c-neutro-200); border-radius: 2px;
  transition: background var(--transicion);
}
.stepper__paso + .stepper__paso::before { left: 2px; width: calc(100% - 2px); }
.stepper__paso[data-estado="activo"]    { color: var(--c-teal-700); }
.stepper__paso[data-estado="activo"]::before,
.stepper__paso[data-estado="hecho"]::before { background: var(--c-teal); }
.stepper__paso[data-estado="hecho"] { color: var(--c-petroleo); }
.stepper__paso[data-estado="hecho"]::after { content: " ✓"; }

.stepper__panel { display: none; }
.stepper__panel.is-activo { display: block; animation: entra .32s cubic-bezier(.22,.61,.36,1); }
@keyframes entra { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stepper__panel.is-activo { animation: none; } }

.stepper__nav { display: flex; gap: var(--e-3); margin-top: var(--e-6); }
.stepper__nav .btn { flex: 1; }
.stepper__nav .btn--secundario { flex: 0 0 auto; }

.stepper__leyenda { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-5); }

/* Grupo de opciones tipo tarjeta (radios accesibles) */
.opciones { display: grid; gap: var(--e-3); border: 0; padding: 0; margin: 0 0 var(--e-5); }
.opciones legend { margin-bottom: .5rem; font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo); padding: 0; }
@media (min-width: 560px) { .opciones--2 { grid-template-columns: 1fr 1fr; } }
.opcion { position: relative; display: block; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion span {
  display: block; min-height: 48px; padding: .8rem 1rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo);
  background: #fff; border: 1.5px solid var(--c-gris-claro); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.opcion span small { display: block; font-weight: 400; color: var(--texto-suave); margin-top: .15rem; }
.opcion:hover span { border-color: var(--c-gris-verdoso); }
.opcion input:checked + span { border-color: var(--c-teal); background: var(--c-teal-050); }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Resumen final del stepper */
.resumen { list-style: none; padding: 0; margin: 0 0 var(--e-5);
           border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden; }
.resumen li { display: flex; justify-content: space-between; gap: var(--e-4);
              padding: .7rem 1rem; font-size: var(--t-sm); border-bottom: 1px solid var(--c-neutro-100); }
.resumen li:last-child { border-bottom: 0; }
.resumen dt, .resumen b { color: var(--texto-suave); font-weight: 500; }
.resumen span { font-weight: 600; color: var(--c-petroleo); text-align: right; }

.campo__error { display: none; margin-top: .35rem; font-size: var(--t-xs); color: #B3261E; font-weight: 600; }
.campo.is-invalido .campo__input { border-color: #B3261E; }
.campo.is-invalido .campo__error { display: block; }

.exito {
  display: none; padding: var(--e-7) var(--e-5); text-align: center;
  background: var(--c-teal-050); border-radius: var(--r-lg);
}
.exito.is-visible { display: block; }
.exito__icono { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--e-4);
                background: var(--c-teal); color: #fff; border-radius: 50%; }

/* --------------------------------------------------------------------------
   17d. RUTAS (FOT Partners) — 4 caminos del ecosistema
   -------------------------------------------------------------------------- */
.rutas { display: grid; gap: var(--e-5); }
@media (min-width: 720px)  { .rutas { grid-template-columns: 1fr 1fr; } }

.ruta {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.ruta:hover { transform: translateY(-4px); box-shadow: var(--s-2); }
.ruta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--u, var(--c-teal)); }
.ruta__num {
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 800;
  letter-spacing: .1em; color: var(--u, var(--c-teal)); margin-bottom: var(--e-2);
}
.ruta h3 { margin-bottom: var(--e-2); }
.ruta__para { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-4); }
.ruta .checks { margin-top: 0; margin-bottom: var(--e-5); }
.ruta .btn { margin-top: auto; align-self: flex-start; }
.ruta--broker  { --u: #00A5AD; }
.ruta--finder  { --u: #007F88; }
.ruta--dev     { --u: #225AA0; }
.ruta--academia{ --u: #674089; }

/* Regalo de valor inmediato */
.recurso {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4); margin-bottom: var(--e-5);
  background: var(--bg-alt); border-radius: var(--r-md); font-size: var(--t-sm);
}
.recurso svg { flex-shrink: 0; color: var(--u, var(--c-teal)); margin-top: .15em; }
.recurso strong { display: block; color: var(--c-petroleo); }

/* --------------------------------------------------------------------------
   17e. BLOG — filtros, índice y artículo
   -------------------------------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); padding: 0; list-style: none; }
.filtro {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo); text-decoration: none;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-full);
  cursor: pointer; transition: all var(--transicion);
}
.filtro:hover { border-color: var(--c-gris-verdoso); }
.filtro[aria-pressed="true"], .filtro[aria-current="page"] { background: var(--c-petroleo); border-color: var(--c-petroleo); color: #fff; }

/* --------------------------------------------------------------------------
   17f. TABS (FOT Partners — formularios por perfil)
   -------------------------------------------------------------------------- */
.tabs__lista {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  padding: 0 0 var(--e-5); margin: 0 0 var(--e-6); list-style: none;
  border-bottom: 1px solid var(--borde);
}
.tabs__boton {
  display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.2rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-full);
  cursor: pointer; transition: all var(--transicion);
}
.tabs__boton:hover { border-color: var(--c-gris-verdoso); }
.tabs__boton[aria-selected="true"] { background: var(--c-petroleo); border-color: var(--c-petroleo); color: #fff; }
.tabs__boton:focus-visible { outline: 3px solid var(--c-aqua); outline-offset: 2px; }

.nota--destacada { grid-column: 1 / -1; }
@media (min-width: 880px) {
  .nota--destacada { flex-direction: row; }
  .nota--destacada .nota__media { flex: 0 0 52%; aspect-ratio: auto; }
  .nota--destacada .nota__cuerpo { padding: clamp(1.5rem, 3.5vw, 2.75rem); justify-content: center; }
  .nota--destacada h3 { font-size: var(--t-2xl); }
  .nota--destacada p { font-size: var(--t-base); }
}
.nota__meta { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-3);
              font-size: var(--t-xs); color: var(--texto-suave); }

/* Cuerpo del artículo */
.prosa { max-width: 68ch; }
.prosa > * + * { margin-top: var(--e-5); }
.prosa h2 { font-size: var(--t-xl); margin-top: var(--e-8); }
.prosa h3 { font-size: var(--t-lg); margin-top: var(--e-7); }
.prosa ul, .prosa ol { padding-left: 1.3em; display: grid; gap: .5rem; }
.prosa li { padding-left: .25rem; }
.prosa li::marker { color: var(--c-teal); }
.prosa blockquote {
  padding: var(--e-4) var(--e-5); border-left: 4px solid var(--c-aqua);
  background: var(--bg-alt); font-size: var(--t-lg); line-height: 1.5; color: var(--c-petroleo);
}
.prosa figure img { border-radius: var(--r-md); }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.prosa table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-sm); }
.prosa th, .prosa td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--borde); }
.prosa th { background: var(--bg-alt); font-weight: 700; color: var(--c-petroleo); }
.prosa td:not(:first-child), .prosa th:not(:first-child) { text-align: right; }

.articulo__cabecera { max-width: 68ch; }
.articulo__meta { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-5);
                  padding-top: var(--e-5); border-top: 1px solid var(--borde);
                  font-size: var(--t-sm); color: var(--texto-suave); }
.compartir { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.compartir a { display: grid; place-items: center; width: 40px; height: 40px;
               border: 1px solid var(--borde); border-radius: 50%; color: var(--c-petroleo); }
.compartir a:hover { background: var(--c-petroleo); color: #fff; border-color: var(--c-petroleo); }

@media (min-width: 1000px) {
  .articulo-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--e-8); align-items: start; }
  .articulo-aside { position: sticky; top: calc(var(--alto-header) + var(--e-4)); }
}
@media (max-width: 999px) {
  /* Sin las dos columnas, el aside cae en el flujo justo detrás del último
     bloque del artículo y quedaba pegado a él: acá el "gap" del grid no
     existe, así que el aire lo pone el propio aside. */
  .articulo-aside { margin-top: var(--e-7); }
}
.indice { padding: var(--e-5); background: var(--bg-alt); border-radius: var(--r-lg); }
.indice h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--e-3); }
.indice ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.indice a { display: block; padding: .4rem 0; font-size: var(--t-sm); color: var(--texto-suave); text-decoration: none; }
.indice a:hover { color: var(--c-teal); }

/* CTA de la barra lateral del artículo: mismo lenguaje de tarjeta que .indice */
.aside-cta { padding: var(--e-5); background: var(--bg-alt); border-radius: var(--r-lg); }

/* --------------------------------------------------------------------------
   17f. CONTACTO
   -------------------------------------------------------------------------- */
.canal {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--e-5); background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r-lg); text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.canal:hover { transform: translateY(-3px); box-shadow: var(--s-2); border-color: var(--c-gris-claro); }
.canal h3 { font-size: var(--t-base); margin-bottom: .25rem; }
.canal p { font-size: var(--t-sm); color: var(--texto-suave); }
.canal strong { display: block; margin-top: var(--e-3); font-size: var(--t-base); color: var(--c-teal-700); }

.mapa-embed { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: var(--c-neutro-100); }
.mapa-embed iframe { width: 100%; height: 100%; border: 0; }

.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  padding: var(--e-5) 0; font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 700;
  color: var(--c-petroleo); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.5em; font-weight: 400; color: var(--c-teal);
  transition: transform var(--transicion);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: var(--e-5); color: var(--texto-suave); max-width: 70ch; }

/* --------------------------------------------------------------------------
   17g. CAPA DE MOVIMIENTO
   Animaciones por código en lugar de video: ~0 KB de red, 60 fps en mobile,
   y todo se apaga con prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* El mapa de barrios es un choropleth estático: más institucional y legible. */

/* --- Entrada del titular del hero, línea por línea ----------------------- */
.hero h1, .hero__bajada, .hero .acciones, .hero .antetitulo, .hero .datos, .hero .miga {
  animation: sube .85s cubic-bezier(.16,.84,.44,1) backwards;
}
.hero .miga        { animation-delay: .02s; }
.hero .antetitulo  { animation-delay: .06s; }
.hero h1           { animation-delay: .13s; }
.hero__bajada      { animation-delay: .22s; }
.hero .acciones    { animation-delay: .31s; }
.hero .datos       { animation-delay: .40s; }
@keyframes sube { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: none; } }

/* --- Reveal escalonado dentro de grillas y listas ------------------------ */
.aparece.visible > .grilla > *,
.aparece.visible.grilla > *,
.aparece.visible > .rutas > *,
.aparece.visible.rutas > *,
.aparece.visible > .pasos > *,
.aparece.visible.pasos > *,
.aparece.visible > .cifras > * {
  animation: sube .7s cubic-bezier(.16,.84,.44,1) backwards;
}
.aparece.visible > *:nth-child(1),  .aparece.visible > * > *:nth-child(1) { animation-delay: .00s; }
.aparece.visible > *:nth-child(2),  .aparece.visible > * > *:nth-child(2) { animation-delay: .08s; }
.aparece.visible > *:nth-child(3),  .aparece.visible > * > *:nth-child(3) { animation-delay: .16s; }
.aparece.visible > *:nth-child(4),  .aparece.visible > * > *:nth-child(4) { animation-delay: .24s; }
.aparece.visible > *:nth-child(5),  .aparece.visible > * > *:nth-child(5) { animation-delay: .32s; }
.aparece.visible > *:nth-child(6),  .aparece.visible > * > *:nth-child(6) { animation-delay: .40s; }

/* --- Brillo que cruza el botón primario al pasar el mouse ---------------- */
.btn--primario, .btn--claro { position: relative; overflow: hidden; }
.btn--primario::after, .btn--claro::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s cubic-bezier(.3,0,.2,1);
  pointer-events: none;
}
.btn--primario:hover::after, .btn--claro:hover::after { left: 125%; }

/* --- Subrayado del menú: barrido en vez de escala ------------------------ */
.nav__link::after { transition: transform .34s cubic-bezier(.16,.84,.44,1); }
.nav__link:hover::after { transform: scaleX(1); }

/* --- Tarjetas: elevación con acompañamiento del borde -------------------- */
.tarjeta, .nota, .unidad, .ruta, .canal {
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
  will-change: transform;
}

/* --- Contadores ---------------------------------------------------------- */
.dato__valor, .cifra__valor { font-variant-numeric: tabular-nums; }

/* --- Indicador de scroll en el hero de la Home -------------------------- */
.scroll-hint {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2rem); z-index: 2;
  display: grid; place-items: center; width: 34px; height: 54px;
  margin-left: -17px; border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--r-full);
  transition: border-color var(--transicion), transform var(--transicion);
}
.scroll-hint:hover { border-color: var(--c-aqua); transform: translateY(3px); }
.scroll-hint span {
  display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--c-aqua);
  animation: rueda 2.1s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes rueda {
  0%   { transform: translateY(-9px); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(9px); opacity: 0; }
}
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* --- Apagado total para quien pide menos movimiento ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .scroll-hint span { animation: none !important; }
  .hero h1, .hero__bajada, .hero .acciones, .hero .antetitulo,
  .hero .datos, .hero .miga,
  .aparece.visible > .grilla > *, .aparece.visible.grilla > *,
  .aparece.visible > .rutas > *, .aparece.visible.rutas > *,
  .aparece.visible > .pasos > *, .aparece.visible.pasos > *,
  .aparece.visible > .cifras > * { animation: none !important; opacity: 1; transform: none; }
  .btn--primario::after, .btn--claro::after { display: none; }
}

/* --------------------------------------------------------------------------
   18. UTILIDADES
   -------------------------------------------------------------------------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17h. COTIZÁ TU TERRENO — buscador del hero + wizard de 5 pasos
   -------------------------------------------------------------------------- */

/* --- Buscador de dirección en el hero ------------------------------------ */
.buscador {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin-top: var(--e-7); max-width: 40rem; padding: var(--e-3);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-lg);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
.buscador__campo { position: relative; flex: 1 1 15rem; }
.buscador__input {
  width: 100%; min-height: 54px; padding: .8rem 1.05rem;
  background: #fff; color: var(--texto);
  border: 0; border-radius: var(--r-md);
}
.buscador__input::placeholder { color: #93A0A2; }
.buscador__input:focus-visible { outline: 3px solid var(--c-aqua); outline-offset: 2px; }
.buscador .btn { flex: 0 0 auto; min-height: 54px; }
.buscador__nota { margin-top: var(--e-3); font-size: var(--t-xs); color: #A9BFC2; }
@media (max-width: 560px) {
  /* En mobile el campo y el botón quedan apilados: mismo ancho y mismo
     radio para que se vean como un solo bloque, no dos formas distintas. */
  .buscador__campo { flex: 1 1 100%; }
  .buscador .btn { flex: 1 1 100%; border-radius: var(--r-md); }
}

/* --- Desplegable de sugerencias de dirección ----------------------------- */
.autocompletar {
  position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; right: 0;
  margin: 0; padding: .3rem; list-style: none;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--s-3);
  max-height: 15rem; overflow-y: auto; text-align: left;
}
.autocompletar[hidden] { display: none; }
.autocompletar button {
  display: flex; gap: .55rem; align-items: flex-start; width: 100%;
  padding: .6rem .7rem; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--texto-suave);
}
.autocompletar button:hover,
.autocompletar li.is-activo button { background: var(--c-teal-050); }
.autocompletar b { color: var(--c-petroleo); font-weight: 700; }
.autocompletar svg { flex-shrink: 0; margin-top: .2em; color: var(--c-teal); }
.autocompletar__pie {
  padding: .45rem .7rem .25rem; text-align: right;
  font-size: var(--t-xs); color: var(--texto-suave);
}

/* --- Wizard de 5 pasos --------------------------------------------------- */
.wizard { max-width: 36rem; margin-inline: auto; }
.wizard .campo { position: relative; }          /* ancla del autocompletar */
.wizard__progreso { margin-bottom: var(--e-8); }
.wizard__progreso[hidden] { display: none; }
.wizard__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4);
  margin-bottom: .55rem;
  font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-petroleo);
}
.wizard__meta span:last-child { color: var(--texto-suave); letter-spacing: .04em; }
.wizard__riel {
  display: block; height: 5px; overflow: hidden;
  background: var(--c-neutro-100); border-radius: var(--r-full);
}
.wizard__avance {
  display: block; height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-aqua));
  border-radius: var(--r-full);
  transition: width .38s cubic-bezier(.22,.61,.36,1);
}
.wizard__panel { display: none; border: 0; padding: 0; margin: 0; }
.wizard__panel.is-activo { display: block; animation: entra .32s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .wizard__panel.is-activo { animation: none; } }
.wizard__panel h2 { font-size: var(--t-2xl); letter-spacing: -.02em; }
.wizard__ayuda { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }
.wizard__campos { margin-top: var(--e-6); }
.wizard__campos .campo:last-child,
.wizard__campos .opciones:last-child { margin-bottom: 0; }
.wizard__nav { display: flex; gap: var(--e-3); margin-top: var(--e-7); }
.wizard__nav .btn--primario { flex: 1; justify-content: center; }
.wizard__nav .btn--secundario { flex: 0 0 auto; padding-inline: 1.2rem; }
.opciones.is-invalido .campo__error { display: block; }

/* --- Toggle "Sumar parcelas linderas" ------------------------------------ */
.switch {
  display: flex; align-items: center; gap: .7rem; margin-top: var(--e-5);
  font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo); cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__pista {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px;
  background: var(--c-gris-claro); border-radius: var(--r-full);
  transition: background var(--transicion);
}
.switch__pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--transicion);
}
.switch input:checked + .switch__pista { background: var(--c-teal); }
.switch input:checked + .switch__pista::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__pista { outline: 3px solid var(--foco); outline-offset: 2px; }

/* --- Parcelas linderas dinámicas ----------------------------------------- */
.linderos {
  margin-top: var(--e-4); padding: var(--e-4);
  background: var(--bg-alt); border: 1px dashed var(--borde); border-radius: var(--r-md);
}
.linderos[hidden] { display: none; }
.lindero { position: relative; display: flex; gap: var(--e-2); align-items: center; margin-bottom: var(--e-3); }
.lindero .campo__input { background: #fff; }
.lindero__quitar {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--texto-suave);
}
.lindero__quitar:hover { background: #fff; color: var(--c-petroleo); }
.linderos__agregar {
  width: 100%; padding: .6rem; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 700; color: var(--c-teal-700);
}
.linderos__agregar:hover { background: var(--c-teal-050); }

/* --------------------------------------------------------------------------
   18. WORDPRESS — piezas que no existían en el prototipo estático
   -------------------------------------------------------------------------- */

/* Honeypot antispam: fuera de pantalla, pero alcanzable por bots que leen el
   DOM. No se usa display:none porque muchos bots lo detectan y lo saltean. */
.fot-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Mensaje de resultado del formulario, con los colores del prototipo. */
.form-estado {
  margin-top: var(--e-4); padding: .85rem 1rem; border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.45;
}
.form-estado--ok    { background: var(--c-teal-050); color: var(--c-teal-700); border: 1px solid rgba(0,102,109,.22); }
.form-estado--error { background: #FCEDF2; color: #8E2F53; border: 1px solid rgba(142,47,83,.22); }

/* Campo con error de validación. */
.campo.is-invalido .campo__input { border-color: #C2416B; }
.campo.is-invalido .campo__error { display: block; color: #8E2F53; }
.campo__error { display: none; margin-top: .35rem; font-size: var(--t-xs); }

/* Ítem del menú marcado como CTA (clase btn-cta o menu-cta en Apariencia →
   Menús). El header ya trae su propio botón, así que este solo aparece en el
   menú móvil y en el pie, donde no compite con él. */
.nav__lista .nav__cta { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--t-xs); }

/* Logo cargado desde el Personalizador: se adapta al alto del header. */
.header__logo--custom img { width: auto; height: 62px; }

/* Paginación de archivos y resultados. */
.navigation.pagination { margin-top: var(--e-7); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .5rem .9rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-petroleo); text-decoration: none;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-full);
}
.navigation.pagination .page-numbers:hover { border-color: var(--c-gris-verdoso); }
.navigation.pagination .page-numbers.current { background: var(--c-petroleo); border-color: var(--c-petroleo); color: #fff; }

/* Paginación interna de una entrada partida con <!--nextpage-->. */
.paginacion-interna { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-6); font-size: var(--t-sm); }

/* Alineaciones que puede insertar el editor de bloques. */
.alignwide  { max-width: min(100%, 1100px); margin-inline: auto; }
.alignfull  { max-width: 100%; }
.alignleft  { float: left;  margin: 0 var(--e-5) var(--e-4) 0; }
.alignright { float: right; margin: 0 0 var(--e-4) var(--e-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .blocks-gallery-caption { font-size: var(--t-xs); color: var(--texto-suave); margin-top: var(--e-2); }

/* Barra de administración: evita que tape el header fijo. */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }