/* Red 360+1 — sistema de diseño
   Identidad real: DIN/DINBold, verde #3B4935, rojo #E53838, crema #F7F4F0
   Rojo canónico: #E53838 (el de los logotipos SVG).
   Para texto sobre crema se usa la variante AA --red-deep. */

@font-face {
  font-family: 'DIN';
  src: url('../fonts/DIN.woff2') format('woff2'),
       url('../fonts/DIN.woff') format('woff'),
       url('../fonts/DIN.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DINBold';
  src: url('../fonts/DINBold.woff2') format('woff2'),
       url('../fonts/DINBold.woff') format('woff'),
       url('../fonts/DINBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --green:        #3B4935;
  --green-deep:   #222A1D;
  --green-mid:    #4F5F44;
  --green-soft:   #646F59;
  --red:          #E53838;   /* acento gráfico (tick, subrayado, punto): superficies claras */
  --red-deep:     #C42B2B;   /* rojo para TEXTO/botón: AA sobre crema (5.14:1) y con blanco (5.04:1) */
  --accent-lime:  #A9C24E;   /* acento para superficies oscuras (hero, enfoque, contacto, diagrama) */
  --accent-lime-line: rgba(169,194,78,.35);
  --cream:        #F7F4F0;
  --paper:        #FFFFFF;
  --line:         #E1DCCF;
  --line-deep:    rgba(247,244,240,.16);
  --ink:          #2A3326;
  --muted:        #656E5A;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  --text-xs:  .75rem;
  --text-sm:  .875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);

  /* Sistema cartográfico editorial: el radio se elimina del sistema.
     Sobrevive solo en affordances interactivas (--radius-btn / --radius-pill). */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  /* Retícula de agrimensura y medidas del sistema */
  --grid-unit: 64px;
  --carto-line: 1px;
  --rule: var(--line);                    /* color de regla por superficie (las oscuras lo redefinen) */
  --carto-grid-ink: rgba(59,73,53,.10);   /* retícula sobre claro: decidida, no tímida */
  --carto-grid-ink-dark: rgba(247,244,240,.12);
  --measure-font: .75rem;                 /* cuerpo de coordenadas, cotas y folios */
  --measure-track: .08em;
  --bleed: -2.5rem;                       /* cruce de límite permitido: UN elemento por sección */
  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1180px;
  --nav-h: 66px; /* alto real del header fijo (logo 34px + padding vertical) */
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body{ overflow-x: clip; } /* la tira de aliados corre de borde a borde sin crear scroll horizontal */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DIN', -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: 'DINBold', sans-serif; margin: 0; color: var(--green); letter-spacing: -.01em; }
p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: inherit; }
img,svg{ display: block; max-width: 100%; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
@media (max-width: 640px){ .container{ padding: 0 var(--space-3); } }
/* Franja de transición (701–1023): hereda la composición móvil con MÁS aire.
   Nada de estados fluidos sin diseñar: esta franja solo respira. */
@media (min-width: 701px) and (max-width: 1023px){
  :root{ --space-6: 5.5rem; --space-7: 8rem; }
  .container{ padding: 0 var(--space-5); }
}

.eyebrow{
  display: inline-flex; align-items: center; gap: .7em;
  font-family: 'DINBold'; font-size: var(--text-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-soft); margin-bottom: var(--space-2);
}
/* Cruz de registro: sustituye a la barrita genérica */
.eyebrow::before{
  content:''; width: 13px; height: 13px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23E53838' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.eyebrow.on-dark{ color: #B9C2A9; }
/* Kicker vertical (regla 11): en desktop las secciones pares lo llevan al margen */
@media (min-width: 1024px){
  .eyebrow.carto-v{
    writing-mode: vertical-rl; transform: rotate(180deg);
    margin-bottom: 0; letter-spacing: .26em;
  }
  .eyebrow.carto-v::before{ transform: rotate(90deg); }
}

.lead{ font-size: var(--text-lg); line-height: 1.55; color: var(--green-soft); max-width: 58ch; }

.btn{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: 'DINBold'; font-size: var(--text-sm); letter-spacing: .01em;
  padding: .95em 1.6em; border-radius: var(--radius-btn); border: 1px solid transparent;
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary{ background: var(--red-deep); color: #fff; box-shadow: 0 6px 16px -10px rgba(196,43,43,.35); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(196,43,43,.42); }
.btn-ghost{ border-color: rgba(247,244,240,.35); color: var(--cream); background: transparent; } /* los <button> traen fondo de UA */
.btn-ghost:hover{ border-color: rgba(247,244,240,.7); }

a, button, .nav__toggle{ transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--red); outline-offset: 3px;
}
.hero :focus-visible, .focus :focus-visible, .contact :focus-visible{ outline-color: var(--accent-lime); }

/* ===== Navegación ===== */
.nav{
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: rgba(247,244,240,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{ border-bottom-color: var(--line); }

/* Barra de progreso de scroll — indicador de avance narrativo */
.scrollbar{ position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 130; pointer-events: none; }
.scrollbar span{ display:block; height:100%; width:100%; background:var(--accent-lime); transform-origin:left center; transform: scaleX(0); }
@supports (animation-timeline: scroll()){
  .scrollbar span{ animation: scrollbarGrow linear both; animation-timeline: scroll(root); }
}
@keyframes scrollbarGrow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.nav .container{ display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.nav__logo img{ height: 34px; width: auto; }
.nav__links{ display: flex; align-items: center; gap: var(--space-4); }
.nav__links a{
  font-family: 'DINBold'; font-size: var(--text-sm); text-decoration: none; color: var(--green);
  padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color .2s;
}
.nav__links a:hover, .nav__links a.active{ border-bottom-color: var(--red); }
/* CTA primario del header: "Contacto" con tratamiento de botón.
   Sigue siendo un <a href="#contacto"> dentro de .nav__links, por lo que el scrollspy
   de js/nav.js (selector .nav__links a[href^="#"]) no cambia; .active pasa de subrayado a anillo. */
.nav__links a.nav__cta{
  background: var(--red-deep); color: #fff;
  padding: .5em 1.05em; border-radius: var(--radius-btn); border-bottom: none;
}
.nav__links a.nav__cta:hover{ border-bottom: none; transform: translateY(-1px); }
.nav__links a.nav__cta.active{ border-bottom: none; box-shadow: 0 0 0 3px rgba(196,43,43,.22); }
.nav__lang{ display:flex; gap:.4em; font-family:'DINBold'; font-size: var(--text-xs); }
.nav__lang .on, .nav__lang a[aria-current]{ color: var(--red-deep); } /* AA a 12px sobre crema (el --red se queda a 3.87:1) */
.nav__lang a{ text-decoration:none; color: var(--green-soft); }
.nav__toggle{ display:none; background:none; border:none; padding: var(--space-1); min-width:44px; min-height:44px; }
.nav__toggle span{ display:block; width:22px; height:2px; background:var(--green); margin:5px 0; transition: transform .25s var(--ease), opacity .25s var(--ease); }
/* Estado abierto: las líneas exteriores viajan al centro y rotan a X.
   ±12px verificado con la geometría real: 2px de línea + 5px y 5px de margen
   entre centros de línea. La línea central se desvanece. */
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(12px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-12px) rotate(-45deg); }

@media (max-width: 900px){
  /* Mejora progresiva: sin JS el panel queda desplegado y usable; solo se
     colapsa cuando nav.js marca el header con data-nav-ready. */
  .nav__links{
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--cream); padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--line); gap: 0;
  }
  /* Cerrado: visibility saca los enlaces del orden de tabulación.
     Transición explícita (no 'all'); visibility se retrasa .25s al cerrar
     para no cortar el desvanecido, y es inmediata al abrir. */
  .nav[data-nav-ready] .nav__links{
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s linear .25s;
  }
  .nav[data-nav-ready] .nav__links.open{
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s;
  }
  .nav__links a{ display:flex; align-items:center; min-height:44px; }
  .nav__links a.nav__cta{ justify-content:center; margin-top: var(--space-1); border-radius: var(--radius-btn); }
  .nav__lang{ min-height:44px; align-items:center; }
  /* El toggle solo aparece cuando hay JS que lo haga funcionar */
  .nav[data-nav-ready] .nav__toggle{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .nav__toggle span, .nav__links{ transition: none; }
}

/* ===== Hero ===== */
.hero{
  position: relative; background: var(--green-deep); color: var(--cream);
  --rule: var(--line-deep);
  padding: calc(var(--space-7) + 60px) 0 var(--space-6); overflow: hidden;
}
/* La portada es la LÁMINA 01 del levantamiento: retícula de agrimensura visible
   (.carto-grid--dark en el HTML), cabecera de lámina con coordenada, folio de predio
   sobre hachura (único fondo del hero, regla 6) y una curva de nivel que cruza el
   límite inferior (regla 9). Los selectores .hero .x blindan posición/z-index de los
   SVG de fondo frente al .carto-grid > * de las utilidades cartográficas. */
.hero.carto-allow-bleed{ overflow: visible; } /* el bleed necesita verse; body ya clipa el eje X */
.hero .hero__topo{ position:absolute; inset:0; opacity:.16; z-index:0; } /* primer plano decidido (regla 7): fuera del rango tímido .05–.08 */
.hero .hero__mark{
  position: absolute; right: -18%; top: 7%; transform: none;
  width: 64vw; max-width: 340px; opacity: .22; z-index: 0;
}
.hero .container{ position: relative; z-index: 2; }
.hero__grid{ opacity: 0; animation: heroIn .8s var(--ease) .1s forwards; }
@keyframes heroIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }

/* Cabecera de lámina: coordenada de margen + norte (solo desktop), cerrada por
   regla de 1px con cruz de registro en el arranque (regla 5) */
.hero__lamina{
  position: relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: var(--carto-line) solid var(--line-deep);
}
.hero__lamina::after{
  content:'+'; position:absolute; bottom:-.62em; left:-.3em;
  font-family:'DINBold'; font-size:15px; line-height:1; color: var(--red);
}
.hero__norte{ display:none; } /* la rosa de los vientos no existe en móvil (spec de viewports) */

/* Folio de predio 01: en móvil vive ARRIBA del titular, a su clamp mínimo (4rem),
   sobre el único parche hachurado del hero */
.hero__folio{ margin-bottom: var(--space-3); }
.hero__folio-area{ display:inline-block; padding: .5rem .9rem; }
.hero__escala{
  display:flex; align-items:center; gap: var(--space-2); margin-top: var(--space-2);
  font-family:'DINBold'; font-size: var(--measure-font); letter-spacing: var(--measure-track);
  text-transform: uppercase; font-variant-numeric: tabular-nums; color: #8A9279;
}
.hero__escala b{ font-weight:400; }
.hero__escala svg{ width:140px; height:auto; flex:0 0 auto; }

.hero h1{
  color: #fff; font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -.02em;
  max-width: 18ch; margin-bottom: var(--space-3);
}
.hero h1 .accent{ color: var(--accent-lime); }
.hero p.lead{ color: #C7CDB9; margin-bottom: var(--space-4); }
.hero__cta{ display:flex; gap: var(--space-2); flex-wrap: wrap; }

/* Pie de lámina: la prueba social separada por cruces de registro, no por puntos;
   la cruz roja vive en el extremo DERECHO (diagonal con la de la cabecera) */
.hero__proof{
  position: relative; margin-top: var(--space-5);
  display:flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items:center;
  border-top: var(--carto-line) solid var(--line-deep); padding-top: var(--space-3);
  font-size: var(--text-xs); color: #9CA68A; letter-spacing: .02em;
}
.hero__proof::before{
  content:'+'; position:absolute; top:-.62em; right:-.3em;
  font-family:'DINBold'; font-size:15px; line-height:1; color: var(--red);
}
.hero__proof b{ color: #DADFC9; font-family: 'DINBold'; font-weight: 400; }
.hero__proof i{
  width:9px; height:9px; display:block; border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23566048' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Curva de nivel: el ÚNICO elemento del hero que cruza el límite (regla 9);
   el margen negativo var(--bleed) lo aporta .carto-bleed-down */
.hero .hero__curva{
  position:absolute; bottom:0; right: clamp(1.5rem, 8vw, 4rem); z-index:2;
  width:110px; height:auto; display:block;
}

/* Desktop ≥1024: composición asimétrica — titular en columnas 1–8, predio en 9–13,
   paddings verticales anclados a la retícula de 64px (regla 8) */
@media (min-width: 1024px){
  .hero{ padding: calc(var(--grid-unit) * 2 + 60px) 0 calc(var(--grid-unit) * 1.5); }
  .hero__grid{
    display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: var(--space-3); align-items:start;
  }
  .hero__lamina{ grid-column: 1 / -1; grid-row: 1; margin-bottom: calc(var(--grid-unit) - var(--space-2)); }
  .hero__norte{
    display:inline-flex; flex-direction:column; align-items:center; gap:.35rem;
    font-family:'DINBold'; font-size:.6875rem; letter-spacing:.08em; color:#8A9279;
  }
  .hero__main{ grid-column: 1 / 9; grid-row: 2; }
  .hero h1{ max-width: 14ch; }
  .hero__folio{
    grid-column: 9 / 13; grid-row: 2; margin-bottom: 0; justify-self: end;
    display:flex; flex-direction:column; align-items:flex-end; text-align:right;
    animation: heroIn .9s var(--ease) .3s backwards;
  }
  .hero__escala svg{ width:160px; }
  .hero__proof{ grid-column: 1 / -1; grid-row: 3; }
  .hero .hero__mark{ right: -6%; top: auto; bottom: -8%; width: min(42vw, 560px); max-width: none; opacity: .25; }
  .hero .hero__curva{ width:150px; right: clamp(3rem, 10vw, 9rem); }
}
@media (prefers-reduced-motion: reduce){
  .hero__grid, .hero__folio{ opacity:1; animation:none; }
}

/* ===== Secciones genéricas ===== */
.section{ padding: var(--space-7) 0; }
.section--tight{ padding: var(--space-6) 0; }
.section--alt{ background: var(--paper); }
/* Cabecera de sección: abre con regla de agrimensura + cruz de registro en la
   intersección. La composición (columna 2 o 6 de .carto-12, coordenada, folio)
   la decide cada diseñador de sección; esto es el mínimo común. */
.section__head{
  position: relative; max-width: 46rem; margin-bottom: var(--space-5);
  padding-top: var(--space-3); border-top: var(--carto-line) solid var(--rule);
}
.section__head::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size: 15px; line-height:1; color: var(--red);
}
.section__head h2{ font-size: var(--text-3xl); line-height: 1.08; margin-bottom: var(--space-2); }

/* ===== Quiénes somos y cómo trabajamos — lámina 02 del levantamiento =====
   Móvil: folio y coordenada ARRIBA del título, reglas a sangre del container.
   Desktop (≥1024): cabecera a 7/12 desde la columna 2 (sección impar, regla 3)
   y lámina de folio hachurada en el margen derecho que cruza el límite superior
   (único cruce de la sección, regla 9; único contenedor con fondo, regla 6). */
.nos-coord{ margin-bottom: var(--space-3); }
.about-intro{
  position: relative; max-width: 44rem;
  padding-top: var(--space-3); border-top: var(--carto-line) solid var(--rule);
}
/* Cruz de registro en el origen de la regla (regla 5) */
.about-intro::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size: 15px; line-height:1; color: var(--red);
}
.about-intro h2{ font-size: var(--text-3xl); line-height: 1.14; }
.about-intro p{ color: var(--green-soft); font-size: var(--text-base); max-width: 58ch; margin-top: var(--space-2); }
/* Lámina de folio: hachura catastral + predio 02 en contorno rojo.
   Cruces de registro en esquinas opuestas (mismo patrón que .cta-band). */
#nosotros .nos-plate{
  position: relative; width: fit-content;
  padding: var(--space-2) var(--space-3); margin-top: 0; margin-bottom: var(--space-4);
}
#nosotros .nos-plate::before, #nosotros .nos-plate::after{
  font-family:'DINBold'; font-size: 15px; line-height:1; color: var(--red);
  position:absolute; pointer-events:none;
}
#nosotros .nos-plate::before{ content:'+'; top:-.55em; left:-.3em; }
#nosotros .nos-plate::after{ content:'+'; bottom:-.55em; right:-.3em; }
#nosotros .nos-plate .carto-predio{ display:block; }
#nosotros .nos-cota{ margin-top: var(--space-6); }
@media (min-width: 1024px){
  .nos-head .nos-coord{ grid-column: 2 / span 7; margin-bottom: 0; }
  .nos-head .about-intro{ grid-column: 2 / span 7; grid-row: 2; max-width: none; }
  #nosotros .nos-plate{
    position: absolute; z-index: 2; top: calc(-1 * var(--space-7)); right: 0;
    margin-top: var(--bleed); /* el cruce del límite (regla 9) con el token del sistema */
    margin-bottom: 0; padding: var(--space-3) var(--space-4);
  }
  /* Las franjas del pliego arrancan alineadas al inicio de la columna 2 de .carto-12;
     la franja MVV y la cota de cierre quedan a sangre: asimetría deliberada. */
  #nosotros .timeline-head, #nosotros .procesos, #nosotros .ventaja-block{
    margin-left: calc((100% - 11 * var(--space-3)) / 12 + var(--space-3));
  }
}

/* ===== Misión / Visión / Valores ===== */
/* Franja MVV: aquí la retícula de agrimensura se VE y gobierna (regla 8):
   padding vertical y columnas en múltiplos de --grid-unit (64px). */
.mvv{ display:block; margin-top: var(--space-6); padding: var(--grid-unit) 0; }
.mvv__data > .mvv__item + .mvv__item{ margin-top: var(--space-3); }
@media (min-width: 1024px){
  /* Fallback sin JS en desktop: franja de 3 columnas separadas por una celda exacta */
  .mvv__data{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-unit); }
  .mvv__data > .mvv__item + .mvv__item{ margin-top: 0; }
}
.mvv__item{ border-top: 1px solid var(--line); padding-top: var(--space-3); }
.mvv__item h3{ font-size: var(--text-lg); color: var(--green); margin-bottom: .5em; }
.mvv__item p{ font-size: var(--text-sm); color: var(--green-soft); line-height: 1.6; max-width: 46ch; }
.mvv__values{ display:flex; flex-wrap:wrap; gap:.5em; margin-top: var(--space-2); }
.mvv__values li{ font-size:.6875rem; font-family:'DINBold'; color: var(--green); letter-spacing:.07em; text-transform:uppercase; border:1px solid var(--line); padding:.45em .8em; border-radius:0; }
/* (migrado) La composición móvil del MVV es ahora la base; el grid vive en ≥1024. */

.timeline-head{
  display:flex; align-items:baseline; gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-2); border-top: var(--carto-line) solid var(--rule);
}
.timeline-head h3{ font-size: var(--text-lg); }
.timeline-head span{
  font-size: var(--measure-font); color: var(--muted); text-transform: uppercase;
  letter-spacing: var(--measure-track); font-family:'DINBold';
  margin-left: auto; font-variant-numeric: tabular-nums; /* la medida vive en el extremo, como cota */
}

/* ===== Chips y enlaces internos (reutilizables, superficies claras) ===== */
.chips, .ecomap__panel-chips{ display:flex; flex-wrap:wrap; gap:.5em; margin-top: var(--space-2); }
/* Etiqueta catastral: los metadatos NO interactivos pierden la píldora.
   El radio 999px queda reservado a affordances clicables (regla 1). */
.chips span, .ecomap__panel-chips span{
  font-size: .6875rem; font-family:'DINBold'; color: var(--green-soft);
  letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .45em .8em; border-radius: 0;
}
.inline-link{
  display:inline-flex; align-items:center; gap:.4em; margin-top: var(--space-2);
  font-family:'DINBold'; font-size: var(--text-xs); letter-spacing:.04em;
  color: var(--red-deep); text-decoration:none;
  border-bottom: 1px solid rgba(196,43,43,.3); padding-bottom:.15em;
  transition: border-color .2s var(--ease);
}
.inline-link:hover{ border-bottom-color: var(--red-deep); }
/* display de clase > UA [hidden]: reafirmar el ocultamiento para elementos con display propio */
.inline-link[hidden], .chips[hidden], .ecomap__panel-chips[hidden]{ display:none; }

/* ===== Pulso de llegada (destino de la cadena sistémica / enlaces internos) ===== */
@keyframes targetPulse{ 0%{ box-shadow: 0 0 0 0 rgba(169,194,78,.55); } 100%{ box-shadow: 0 0 0 26px rgba(169,194,78,0); } }
.is-target{ animation: targetPulse 1s var(--ease) 2; border-radius: var(--radius); }

/* ===== Procesos independientes: pliego de levantamiento =====
   Tres módulos expandibles separados por reglas de 1px y numerados con marco
   de folio (01–03) — sin tarjeta, sin fondo, radio 0 (reglas 1 y 6; hitList 6).
   Funcional intacto: [data-expand], button[aria-expanded], grid-template-rows. */
.procesos{ border-bottom: var(--carto-line) solid var(--line); }
.proceso{ border-top: var(--carto-line) solid var(--line); }
.proceso__head{
  display:grid; grid-template-columns: auto 1fr 18px; grid-template-areas: "folio title x" "folio sum x";
  column-gap: var(--space-2); row-gap: .35em; align-items: start;
  width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit;
  cursor: pointer; padding: var(--space-3) 0; min-height: 44px;
}
/* Numeración de predio en marco de folio (motivo marco-de-folio del sistema) */
.proceso__folio{
  grid-area: folio; width: 56px; height: 34px; margin-top: .1em;
  display:flex; align-items:center; justify-content:center;
  font-family:'DINBold'; font-size: var(--text-sm); color: var(--green);
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 44' fill='none'%3E%3Cpath d='M1 10V1h9M62 1h9v9M71 34v9h-9M10 43H1v-9' stroke='%233B4935' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition: color .25s var(--ease);
}
.proceso__head b{ grid-area: title; font-family:'DINBold'; font-weight:400; font-size: var(--text-base); color: var(--green); line-height:1.25; transition: color .25s var(--ease); }
.proceso__head:hover b, .proceso.is-open .proceso__folio{ color: var(--red-deep); }
.proceso__sum{ grid-area: sum; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.proceso__x{ grid-area: x; position: relative; width: 18px; height: 18px; margin-top: .2em; }
.proceso__x::before, .proceso__x::after{
  content:''; position:absolute; left: 2px; right: 2px; top: 8px; height: 2px;
  background: var(--red-deep); border-radius: 2px; transition: transform .35s var(--ease);
}
.proceso__x::after{ transform: rotate(90deg); }
.proceso.is-open .proceso__x::after{ transform: rotate(0deg); }
.proceso__body{ display:grid; }
html.js .proceso__body{ grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
html.js .proceso.is-open .proceso__body{ grid-template-rows: 1fr; }
.proceso__in{ overflow: hidden; min-height: 0; padding: 0; }
.proceso__in p{ font-size: var(--text-sm); color: var(--green-soft); line-height: 1.6; }
.proceso__in > :last-child{ margin-bottom: var(--space-3); }
@media (min-width: 1024px){
  .proceso__head{ column-gap: var(--space-3); }
  .proceso__folio{ width: 72px; height: 44px; font-size: var(--text-base); }
  /* El cuerpo expandido se indenta bajo la columna de texto, no bajo el folio */
  .proceso__in{ padding-left: calc(72px + var(--space-3)); }
  .proceso__in p{ max-width: 58ch; }
}

/* ===== Ventaja diferencial: registro catastral 02.1–02.5 =====
   El row-card (radio 10 + hover de fondo) se sustituye por reglas de 1px,
   folio decimal y hover tipográfico (hitList 10). */
.ventaja{ counter-reset: ventaja; border-bottom: var(--carto-line) solid var(--line); }
.ventaja li{
  display:grid; grid-template-columns: 1fr; row-gap: .3em;
  padding: var(--space-3) 0; border-top: var(--carto-line) solid var(--line);
}
.ventaja li::before{
  content: '02.' counter(ventaja); counter-increment: ventaja;
  font-family:'DINBold'; font-size: var(--measure-font); letter-spacing: var(--measure-track);
  color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.6;
}
.ventaja b{ font-family:'DINBold'; font-weight:400; font-size: var(--text-lg); color: var(--green); line-height:1.2; transition: color .22s var(--ease); }
.ventaja li:hover b{ color: var(--red-deep); }
.ventaja li:hover::before{ color: var(--red-deep); }
.ventaja span{ font-size: var(--text-sm); color: var(--green-soft); line-height: 1.55; }
@media (min-width: 1024px){
  .ventaja li{ grid-template-columns: 4.5rem 230px 1fr; column-gap: var(--space-3); row-gap: 0; align-items: baseline; }
}

/* ===== MVV: diagrama interactivo (mejora progresiva de la franja) ===== */
/* align-items:start + padding compensatorio: el texto del panel no re-centra al cambiar de nodo */
/* Base móvil: diagrama y panel apilados; en ≥1024 dos columnas ancladas a la retícula:
   escenario = 5 celdas exactas (320px, 1:1 con el viewBox del SVG), gutter = 1 celda. */
.mvv.is-enhanced{ display:block; }
.mvv.is-enhanced .mvv__panel{ padding-top: var(--space-3); }
@media (min-width: 1024px){
  .mvv.is-enhanced{ display:grid; grid-template-columns: calc(var(--grid-unit) * 5) 1fr; gap: var(--grid-unit); align-items: start; }
  .mvv.is-enhanced .mvv__panel{ padding-top: var(--space-4); }
}
.mvv.is-enhanced .mvv__data{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; padding:0; margin:-1px; border:0;
}
.mvv__stage{ width:100%; max-width: 330px; }
.mvv__svg{ width:100%; height:auto; display:block; overflow: visible; }
.mvv__hub circle, .mvv__hub ellipse{ fill:none; stroke: var(--green); opacity:.3; }
.mvv__link{ stroke: var(--line); stroke-width:1.2; transition: stroke .3s var(--ease); }
.mvv__link.is-selected{ stroke: var(--green-soft); stroke-width:1.6; }
.mvv__node{ cursor:pointer; outline:none; }
.mvv__node-bg{ fill: var(--paper); stroke: var(--line); stroke-width:1.2; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.mvv__node-ring{ fill:none; stroke: var(--red); stroke-width:1.4; opacity:0; transition: opacity .3s var(--ease); }
.mvv__node-focus{ fill:none; stroke: var(--green); stroke-width:1.6; opacity:0; }
.mvv__node:focus-visible .mvv__node-focus{ opacity:.9; }
.mvv__node-label{ font-family:'DINBold'; font-size:13px; fill: var(--green); transition: fill .3s var(--ease); }
.mvv__node.is-hover .mvv__node-bg{ stroke: var(--green-soft); }
.mvv__node.is-selected .mvv__node-bg{ fill: var(--green); stroke: var(--green); }
.mvv__node.is-selected .mvv__node-ring{ opacity:.9; }
.mvv__node.is-selected .mvv__node-label{ fill:#fff; }
.mvv__panel{ min-height: 210px; }
.mvv__panel-kicker{
  display:inline-block; font-family:'DINBold'; font-size: var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase; color: var(--red-deep);
}
.mvv__panel-title{ font-family:'DINBold'; font-size: var(--text-2xl); color: var(--green); margin:.35rem 0 .5rem; line-height:1.15; }
.mvv__panel-text{ color: var(--green-soft); font-size: var(--text-base); line-height:1.65; max-width: 56ch; margin:0; }
.mvv__panel-values{ margin-top: var(--space-2); }
.mvv__panel.is-in .mvv__panel-title, .mvv__panel.is-in .mvv__panel-text, .mvv__panel.is-in .mvv__panel-values{
  animation: mvvIn .4s var(--ease) both;
}
@keyframes mvvIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .mvv__hub-spin{ transform-box: fill-box; transform-origin: center; animation: spinMark 90s linear infinite; }
}
/* Base móvil (antes max-width:900): diagrama centrado, panel sin alto mínimo */
.mvv__stage{ margin-inline:auto; max-width: 290px; }
.mvv__panel{ min-height: 0; }
@media (min-width: 1024px){
  .mvv__stage{ margin-inline: 0; max-width: calc(var(--grid-unit) * 5); }
  .mvv__panel{ min-height: 210px; }
}
@media (prefers-reduced-motion: reduce){
  .proceso__body, .services__detail, .mvv__link, .mvv__node-bg, .mvv__node-label, .ventaja li, .ventaja b{ transition:none; }
  .mvv__panel.is-in .mvv__panel-title, .mvv__panel.is-in .mvv__panel-text, .mvv__panel.is-in .mvv__panel-values{ animation:none; }
  .is-target{ animation:none; }
}


/* ===== Nuestro enfoque ===== */
.focus{ background: var(--green-deep); color: var(--cream); --rule: var(--line-deep); }
.focus .section__head h2{ color: #fff; }
.focus .lead{ color: #C7CDB9; }
/* — Lámina 03: cabecera cartográfica de #enfoque —
   La textura tímida de fondo (.focus::before, opacity .06) se ELIMINA (regla 7):
   el lenguaje territorial pasa a primer plano con folio, coordenada y curva de nivel. */
.section.focus::before{ content: none; }
.focus{ --sec-pad: var(--space-7); }
@media (max-width: 760px){ .focus{ --sec-pad: var(--space-6); } } /* sigue al padding real de .section en ≤760 (styles.css:782) */

.enfoque__headrow{ position: relative; }
/* Folio de predio 03: el ÚNICO elemento que cruza el límite superior (regla 9).
   top = var(--bleed) por encima del borde de la sección, medido desde el arranque del contenido. */
.enfoque__predio{
  position: absolute; left: 0; top: calc(var(--bleed) - var(--sec-pad));
  z-index: 0; pointer-events: none;
}
.enfoque__folio{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.enfoque__curva{ width: 100px; height: auto; }

@media (min-width: 1024px){
  .enfoque__headrow{ margin-bottom: var(--space-5); }
  .enfoque__headrow .enfoque__folio{ grid-column: 1 / 5; margin-bottom: 0; padding-top: var(--space-2); }
  .enfoque__headrow .section__head{ grid-column: 6 / 13; margin-bottom: 0; }
  .enfoque__curva{ width: 150px; margin-top: auto; }
  /* Kicker vertical (regla 11, sección par): colgado del margen, alineado al inicio del h2 */
  .focus .eyebrow.carto-v{ position: absolute; left: -2.6rem; top: var(--space-3); }
}


/* ===== Diagrama de flujo sistémico (material institucional): riel vertical + nodos clicables ===== */
/* Base móvil: una columna. La composición rica es la excepción (≥1024) sobre 12 columnas:
   sysflow 1–5 bajo el folio, focos 7–12 — asimetría deliberada, no dos mitades. */
.enfoque__grid{ margin-top: var(--space-5); }
.enfoque__grid > .sysflow{ margin-bottom: var(--space-6); }
.focus__stack{ display:flex; flex-direction:column; }
@media (min-width: 1024px){
  .enfoque__grid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--space-3); align-items:start; }
  .enfoque__grid > .sysflow{ grid-column: 1 / 6; margin-bottom: 0; }
  .enfoque__grid > .focus__stack{ grid-column: 7 / 13; }
}

.sysflow{ position:relative; }
.sysflow__steps{ position:relative; display:flex; flex-direction:column; gap: var(--space-4); margin:0; padding:0; list-style:none; }
/* Riel: se dibuja de arriba hacia abajo al entrar en vista */
.sysflow__steps::before{
  content:''; position:absolute; left:26px; top:26px; bottom:-34px; width:2px;
  background: linear-gradient(to bottom, var(--accent-lime-line), rgba(169,194,78,.12));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.5s var(--ease) .25s;
}
.sysflow.is-visible .sysflow__steps::before{ transform: scaleY(1); }
/* Operadores del modelo sobre el riel */
.sysflow__step{ position:relative; }
.sysflow__step:not(:last-child)::after{
  content:'+'; position:absolute; left:26px; bottom: calc(var(--space-4) * -1 + 3px);
  transform: translate(-50%, 0); color: var(--accent-lime); font-family:'DINBold'; font-size: var(--text-base);
  background: var(--green-deep); padding: 2px 0; line-height:1;
}
.sysflow__node{
  display:flex; align-items:center; gap: var(--space-3); width:100%;
  background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.sysflow__icon{
  flex: 0 0 auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(247,244,240,.05); border: 1px solid var(--line-deep);
  color: var(--accent-lime); position:relative; z-index:1;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.sysflow__node:hover .sysflow__icon, .sysflow__node:focus-visible .sysflow__icon{
  border-color: var(--accent-lime-line); background: rgba(247,244,240,.1); transform: scale(1.06);
}
.sysflow__body{ display:flex; flex-direction:column; gap:.15em; min-height:52px; justify-content:center; }
.sysflow__body b{ font-family:'DINBold'; font-weight:400; font-size: var(--text-lg); color:#fff; line-height:1.15; }
.sysflow__hint{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:'DINBold'; font-size: var(--text-xs); letter-spacing:.05em; color:#8A9279;
  opacity:0; transform: translateY(-2px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.sysflow__node:hover .sysflow__hint, .sysflow__node:focus-visible .sysflow__hint{
  opacity:1; transform:none; color: var(--accent-lime);
}
/* En táctil no hay hover: el hint queda siempre visible */
@media (hover: none){
  .sysflow__hint{ opacity:1; transform:none; }
}
.sysflow__results{ position:relative; margin-top: var(--space-5); padding-left: 52px; display:flex; flex-wrap:wrap; gap: var(--space-2); }
.sysflow__results::before{
  content:'='; position:absolute; left:26px; top:-26px; transform: translate(-50%, 0);
  color: var(--accent-lime); font-family:'DINBold'; font-size: var(--text-base);
  background: var(--green-deep); padding: 2px 0; line-height:1;
}
.sysflow__result{
  display:inline-flex; align-items:center; gap:.6em;
  border: 1px solid var(--line-deep); border-radius: 0; padding: .75em 1.3em;
  font-family:'DINBold'; font-size: var(--text-sm); color:#DDE2D2;
}
/* El radio píldora sobrevive SOLO en el resultado clicable (affordance, regla 1) */
.sysflow__result--link{ border-radius: var(--radius-pill); }
.sysflow__result svg{ color: var(--accent-lime); flex:0 0 auto; }
.sysflow__result--link{
  background:none; font:inherit; font-family:'DINBold'; font-size: var(--text-sm); text-align:left;
  cursor:pointer; -webkit-appearance:none; appearance:none; color: var(--accent-lime);
  border-color: var(--accent-lime-line);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.sysflow__result--link:hover, .sysflow__result--link:focus-visible{
  background: rgba(169,194,78,.1); border-color: var(--accent-lime); transform: translateY(-2px);
}
/* (breakpoint compositivo 900px eliminado: la base ya ES la composición móvil;
    900px queda solo para el colapso funcional del menú, que no se toca) */
@media (prefers-reduced-motion: reduce){
  .sysflow__steps::before{ transition:none; transform: scaleY(1); }
  .sysflow__icon, .sysflow__hint, .sysflow__result--link{ transition:none; }
  .sysflow__node:hover .sysflow__icon{ transform:none; }
  .sysflow__result--link:hover{ transform:none; }
}

/* Los focos dejan de ser cajas translúcidas (el 'glass card' de IA): entradas de
   levantamiento separadas por regla de 1px con cruz de registro y folio en marco
   de esquinas (reglas 1, 4 y 5). Sin fondo, sin borde, radio 0. */
.focus__card{ position: relative; padding: var(--space-4) 0 var(--space-5); border-top: var(--carto-line) solid var(--rule); }
.focus__card::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size:15px; line-height:1; color: var(--red); pointer-events:none;
}
.focus__folio{
  position: relative; display:inline-grid; place-items:center;
  color: var(--accent-lime); margin-bottom: var(--space-2);
}
.focus__folio svg{ grid-area: 1 / 1; display:block; }
.focus__folio b{
  grid-area: 1 / 1; font-family:'DINBold'; font-weight:400; font-size: 1.125rem;
  letter-spacing:.06em; color: var(--cream); font-variant-numeric: tabular-nums;
}
.focus__card h3{ color:#fff; font-size: var(--text-xl); margin-bottom: var(--space-2); }
.focus__card p{ color:#C7CDB9; font-size: var(--text-sm); }
@media (min-width: 1024px){
  /* Asimetría deliberada: el segundo foco entra escalonado, como predios colindantes */
  .focus__stack .focus__card + .focus__card{ margin-left: var(--space-6); }
  .focus__folio{ position:absolute; top: var(--space-4); right: 0; margin-bottom: 0; }
  .focus__card h3, .focus__card p{ max-width: calc(100% - 96px); }
}
.focus__tags{ display:flex; flex-wrap:wrap; gap: .5em; margin-top: var(--space-2); }
.focus__tags span{ font-size:.6875rem; font-family:'DINBold'; color:var(--accent-lime); letter-spacing:.07em; text-transform:uppercase; border:1px solid rgba(169,194,78,.35); padding:.45em .8em; border-radius:0; }


/* ===== Valor agregado desde el IMJUS (dentro de Enfoque): CEMINT + Umbrales ===== */
/* La franja IMJUS abre con línea de cota y medida expuesta (regla 4), no con borde mudo */
.imjus-band{ margin-top: var(--space-6); }
.imjus-band__cota{ margin-bottom: var(--space-4); }
.imjus-band__head{ display:flex; align-items:baseline; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.imjus-band__head h3{ font-size: var(--text-lg); color:#fff; }
.imjus-band__head span{ font-size: var(--measure-font); color:#8A9279; text-transform:uppercase; letter-spacing: var(--measure-track); font-family:'DINBold'; font-variant-numeric: tabular-nums; }
/* Base móvil: CEMINT y Umbrales apilados */
.imjus-band__grid{ display:block; }
/* CEMINT: el 'predio marcado' — ÚNICO contenedor con fondo de toda la sección (regla 6);
   los ticks de esquina los pone .carto-frame--cream en el HTML */
.imjus-band__grid .focus__card--cemint{ border-top: 0; padding: var(--space-4); background: rgba(247,244,240,.04); }
.imjus-band__grid .focus__card--cemint::before{ content: none; }
.cemint-divisions{ display:grid; grid-template-columns: 1fr 1fr; gap: .8em var(--space-3); margin-top: var(--space-3); }
.cemint-divisions li{ position:relative; padding-left: 1.5em; font-size: var(--text-xs); line-height:1.45; color:#C7CDB9; }
/* Banco de nivel topográfico como viñeta (motivo de la biblioteca, sustituye al bullet) */
.cemint-divisions li::before{
  content:''; position:absolute; left:0; top:.18em; width:13px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M10 2 18.5 16.5H1.5L10 2Z' stroke='%23A9C24E'/%3E%3Ccircle cx='10' cy='11.5' r='1.6' fill='%23A9C24E'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cemint-divisions b{ display:block; font-family:'DINBold'; font-weight:400; color: var(--accent-lime); letter-spacing:.05em; }
.umbrales{ position:relative; margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--carto-line) solid var(--rule); }
.umbrales::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size:15px; line-height:1; color: var(--red); pointer-events:none;
}
@media (min-width: 1024px){
  .imjus-band__grid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--space-3); align-items:stretch; }
  .imjus-band__grid .focus__card--cemint{ grid-column: 1 / 8; }
  .umbrales{
    grid-column: 9 / 13; margin-top: 0; padding-top: 0; border-top: 0;
    border-left: var(--carto-line) solid var(--rule); padding-left: var(--space-4);
  }
  .umbrales::before{ top:-.45em; left:-.36em; }
}
.umbrales__kicker{ display:block; font-family:'DINBold'; font-size: var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:#8A9279; margin-bottom:.7em; }
.umbrales h3{ color:#fff; font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.umbrales p{ color:#C7CDB9; font-size: var(--text-sm); line-height:1.65; max-width: 44ch; }
.umbrales__link{
  display:inline-flex; align-items:center; gap:.45em; margin-top: var(--space-3);
  font-family:'DINBold'; font-size: var(--text-sm); color: var(--accent-lime); text-decoration:none;
  border-bottom: 1px solid var(--accent-lime-line); padding-bottom:.15em;
  transition: border-color .2s var(--ease);
}
.umbrales__link:hover{ border-bottom-color: var(--accent-lime); }
/* (breakpoint compositivo 900px eliminado: la base ya es móvil; el flex-wrap del
    head quedó legislado arriba para todo ancho) */
@media (max-width: 640px){ .cemint-divisions{ grid-template-columns: 1fr; } }

/* ===== Áreas y servicios ===== */
.services__list{ border-top: 1px solid var(--line); }
.services__item{ border-bottom: 1px solid var(--line); }
.services__item:last-child{ border-bottom: none; }
.services__row{
  /* Tabla de levantamiento: la columna de numeración mide exactamente una celda de la
     retícula (--grid-unit = 64px, regla 8); el margen negativo la deja anclada al origen del tile. */
  display:grid; grid-template-columns: var(--grid-unit) 280px minmax(0, 1fr) 28px; align-items: start; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); margin: 0 calc(var(--space-2) * -1);
  width: calc(100% + var(--space-2) * 2);
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: 0; /* regla 1: fila de tabla, no tarjeta */
  transition: background .22s var(--ease);
}
.services__row:hover{ background: var(--cream); } /* la sección ya es --paper: el hover necesita contraste real */
.services__row:hover .services__num{ color: var(--red); }
/* Numeración de predio 01-07: elemento gráfico de la fila (regla 10), no metadato gris */
.services__num{
  font-family:'DINBold'; font-weight:400; font-size: 2rem; color: var(--green-soft); line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.services__item.is-open .services__num{ color: var(--red); }
.services__name{ display:flex; align-items:center; gap: .6em; }
.services__name svg{ color: var(--green); flex: 0 0 auto; }
.services__name b{ font-family:'DINBold'; font-size: var(--text-base); color: var(--green); }
.services__row p{ font-size: var(--text-sm); color: var(--muted); margin:0; line-height: 1.5; }
.services__chev{
  display:flex; align-items:center; justify-content:center; width: 28px; height: 28px;
  color: var(--green-soft); border: 1px solid var(--line); border-radius: 50%;
  transition: transform .35s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.services__item.is-open .services__chev{ transform: rotate(180deg); color: var(--green); border-color: var(--green-soft); }
.services__detail{ display:grid; }
html.js .services__detail{ grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
html.js .services__item.is-open .services__detail{ grid-template-rows: 1fr; }
.services__detail-in{ overflow: hidden; min-height: 0; position: relative; padding-left: calc(var(--grid-unit) + var(--space-3)); }
/* Línea guía: prolonga la primera línea de la retícula (64px) dentro del detalle expandido */
.services__detail-in::before{ content:''; position:absolute; left: var(--grid-unit); top: 2px; bottom: var(--space-3); width: var(--carto-line); background: var(--rule); }
.services__detail-in p{ font-size: var(--text-sm); color: var(--green-soft); line-height: 1.6; max-width: 68ch; margin: 0; }
.services__detail-in > :last-child{ margin-bottom: var(--space-3); }

@media (max-width: 760px){
  .services__row{ grid-template-columns: minmax(0, 1fr) 28px; gap: var(--space-1) var(--space-2); }
  .services__num, .services__name, .services__row p{ grid-column: 1; }
  .services__chev{ grid-column: 2; grid-row: 1; }
  .services__num{ font-size: 1.25rem; }
  .services__detail-in{ padding-left: 0; }
  .services__detail-in::before{ content: none; }
  /* Sin la columna de 64px la retícula ya no gobierna: se apaga (regla 8, nada de retícula decorativa) */
  .services__list.carto-grid::before{ content: none; }
}
@media (prefers-reduced-motion: reduce){
  .services__detail, .services__chev, .services__row{ transition:none; }
}

/* ===== Especialización ambiental (dentro de Áreas): dos predios con estructura DISTINTA.
   Agenda = área hachurada con lindero de 1px, el ÚNICO contenedor con fondo de la sección (regla 6);
   Litigio = pura estructura: reglas de 1px y marcos de folio. Radio 0 en ambos (regla 1).
   Base = composición móvil (una columna); la asimétrica vive en min-width:1024. ===== */
.env-grid{ display: block; }
.env-card{ border-radius: 0; padding: 0; }
.env-card h3{ font-size: var(--text-xl); margin-bottom: var(--space-3); }
/* Predio marcado del plano: lindero verde + hachura catastral (.carto-hatch en el HTML) */
.env-card--agenda{ border: var(--carto-line) solid var(--green); padding: var(--space-4); }
.env-list{ display: grid; grid-template-columns: 1fr; gap: .3em var(--space-4); }
.env-list li{ font-size: var(--text-sm); color: var(--ink); padding: .5em 0 .5em 1.6em; position: relative; line-height: 1.45; }
/* Banco de nivel topográfico como viñeta (motivo del sistema; sustituye al circulito genérico) */
.env-list li::before{
  content:''; position:absolute; left:0; top:.6em; width:13px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M10 2 18.5 16.5H1.5L10 2Z' stroke='%233B4935'/%3E%3Ccircle cx='10' cy='11.5' r='1.6' fill='%233B4935'/%3E%3C/svg%3E") center/contain no-repeat;
}
.areas__curva{ margin-top: var(--space-3); }
/* Litigio estratégico: abre con regla de 1px + cruz de registro en la intersección; sin caja */
.env-card--litigio{
  background: none; border: 0; position: relative;
  margin-top: var(--space-5); border-top: var(--carto-line) solid var(--rule); padding-top: var(--space-3);
}
.env-card--litigio::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size: 15px; line-height: 1; color: var(--red);
}
.env-card--litigio h3{ color: var(--green); }
.env-card__lead{ font-size: var(--text-sm); color: var(--muted); line-height:1.6; max-width: 58ch; margin-bottom: var(--space-4); }
.litigio-steps{ counter-reset: paso; list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-4); }
.litigio-steps li{ counter-increment: paso; position:relative; padding-left: var(--grid-unit); min-height: 34px; }
/* Paso numerado dentro de marco de folio (motivo marco-de-folio, números MEDIANOS) */
.litigio-steps li::before{
  content: counter(paso, decimal-leading-zero); position:absolute; left:0; top:.1em;
  width: 56px; height: 34px; display:grid; place-items:center;
  font-family:'DINBold'; font-size: var(--text-sm); color: var(--red-deep);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 44' fill='none'%3E%3Cpath d='M1 10V1h9M62 1h9v9M71 34v9h-9M10 43H1v-9' stroke='%233B4935' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.litigio-steps b{ display:block; font-family:'DINBold'; font-weight:400; font-size: var(--text-sm); color: var(--green); margin-bottom:.35em; }
.litigio-steps span{ display:block; font-size: var(--text-xs); color: var(--muted); line-height:1.55; }
/* Desktop (≥1024): dos predios desiguales (5/12 y 7/12) separados por regla vertical de 1px
   con cruz de registro en su arranque; nunca dos cajas gemelas (migración max-width→min-width) */
@media (min-width: 1024px){
  .env-grid{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4); align-items: start; }
  .env-card--litigio{ margin-top: 0; border-top: 0; padding-top: 0; border-left: var(--carto-line) solid var(--rule); padding-left: var(--space-4); }
  .env-card--litigio::before{ top: -.5em; left: -.36em; }
  .litigio-steps{ grid-template-columns: 1fr 1fr; }
}

/* --- Lámina #areas: cabecera 7/12 con folio de predio en el margen (reglas 2, 3 y 9) --- */
#areas .areas__marg{ margin-bottom: var(--space-3); }
#areas .areas__folio{ display: block; margin-top: 0; } /* móvil/tableta: el folio abre la lámina, sin sangrado */
#areas .areas__marg .carto-coord{ margin-top: var(--space-1); }
@media (min-width: 1024px){
  /* La regla de apertura corre las 12 columnas; la cabecera arranca en la columna 2 (sección impar) */
  #areas .areas__lay{ position: relative; border-top: var(--carto-line) solid var(--rule); padding-top: var(--space-3); }
  #areas .areas__lay::before{
    content:'+'; position:absolute; top:-.62em; left:-.34em;
    font-family:'DINBold'; font-size: 15px; line-height: 1; color: var(--red);
  }
  #areas .section__head{ grid-column: 2 / 9; grid-row: 1; max-width: none; border-top: 0; padding-top: 0; }
  #areas .section__head::before{ content: none; }
  #areas .areas__marg{
    grid-column: 9 / 13; grid-row: 1; margin-bottom: 0;
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  }
  /* El ÚNICO cruce de límite de la sección (regla 9): el folio 04 rompe la regla de apertura */
  #areas .areas__folio{ margin-top: var(--bleed); }
  #areas .areas__marg .carto-coord{ margin-top: var(--space-2); }
}

/* ===== Ecosistema y aliados — lámina 05 del levantamiento =====
   Base = composición MÓVIL (una columna: coordenada, folio, título, plano, ficha).
   La composición asimétrica (plano + ficha catastral sobre .carto-12) vive solo en ≥1024. */

/* Coordenada de margen y folio de predio (decorativos: aria-hidden en el HTML) */
.ecosystem__coord{ margin: 0 0 var(--space-1); max-width: none; }
.ecosystem__folio{ margin-bottom: var(--space-3); }

/* Cota de cierre de la lámina ("05 → 06") y curva de nivel que cierra el bloque de texto */
.ecosystem__cota{ margin: var(--space-5) 0 0; max-width: none; }
.ecosystem__contour{ width: 110px; height: auto; margin-top: var(--space-2); }

.ecomap{ display:grid; grid-template-columns: 1fr; gap: var(--space-4); align-items:start; }
.ecomap__stage{ position:relative; max-width: 460px; margin-inline:auto; width:100%; }
/* La retícula de agrimensura gobierna el stage (sus bordes son el origen de la cuadrícula).
   El marco de esquinas (.carto-frame) solo existe en ≥1024: en móvil padding 0 y ticks 0
   conservan el sangrado del mapa y la garantía de etiquetas ≥11px a 375px. */
.ecomap__stage.carto-frame{ --tick: 0px; padding: 0; }
.ecomap__svg{ width:100%; height:auto; display:block; overflow: visible; }

/* Datos: lista de respaldo (sin JS). Con JS pasa a ser alternativa para lectores de pantalla. */
.ecomap__data{ margin:0; display:grid; gap: var(--space-2); }
.ecomap__data dt{ font-family:'DINBold'; color: var(--green); font-size: var(--text-base); }
.ecomap__data dd{ margin:0; color: var(--muted); font-size: var(--text-sm); }
.ecomap.is-enhanced .ecomap__data{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; margin:-1px; border:0; }

/* Links (conexiones hub → sector) */
.ecomap__link{ fill:none; stroke: var(--line); stroke-width:1; transition: stroke .3s var(--ease), stroke-width .3s var(--ease), opacity .3s var(--ease); }
.ecomap__link.is-hover{ stroke: var(--green-soft); stroke-width:1.4; }
.ecomap__link.is-selected{ stroke: var(--accent-lime); stroke-width:2.2; }
.ecomap__link.is-dim{ opacity:.4; }

/* Nodos: burbujas llenas con el nombre adentro (tonos variados) */
.ecomap__node{ cursor:pointer; transition: opacity .3s var(--ease); }
.ecomap__hit{ fill:#fff; fill-opacity:0; }
.ecomap__inner{ transform-box: fill-box; transform-origin: center; transition: transform .28s var(--ease); }
.ecomap__node.is-hover .ecomap__inner{ transform: scale(1.06); }
.ecomap__dot{ transition: fill .3s var(--ease); }
.ecomap__dot--v0{ fill: var(--green); }
.ecomap__dot--v1{ fill: var(--green-mid); }
.ecomap__dot--v2{ fill: #55654A; }
.ecomap__node.is-selected .ecomap__dot{ fill: var(--green-deep); }
.ecomap__btext{ fill: #F2F0EA; font-family:'DINBold'; pointer-events:none; }
.ecomap__ring{ fill:none; stroke:var(--accent-lime); stroke-width:1.6; opacity:0; transition: opacity .3s var(--ease); }
.ecomap__focus{ fill:none; stroke: var(--cream); stroke-width:1.6; opacity:0; }
.ecomap__node:focus{ outline:none; }
.ecomap__node:focus-visible .ecomap__focus{ opacity:.9; }
.ecomap__node.is-selected .ecomap__ring{ opacity:1; }
.ecomap__node.is-dim{ opacity:.3; }

/* Academia IMJUS: nodo satélite (más pequeño, más cerca del hub, enlace punteado) */
.ecomap__node--academy .ecomap__dot{ fill: var(--green-soft); }
.ecomap__link--academy{ stroke-dasharray: 3 4; }

/* Affordance: pulso ambiental en nodos aún no visitados (se apaga al visitarlos) */
@keyframes ecoIdle{ 0%, 100%{ opacity: 0; } 50%{ opacity: .5; } }
.ecomap__node.is-idle:not(.is-selected):not(.is-hover) .ecomap__ring{
  animation: ecoIdle 3.8s ease-in-out infinite;
  animation-delay: var(--idle-delay, 0s);
}

/* Hub central */
.ecomap__hub-core{ fill: var(--green); }
.ecomap__hub-ring{ fill:none; stroke:var(--accent-lime); stroke-opacity:.5; stroke-width:1.2; }
.ecomap__hub text{ fill:#fff; font-family:'DINBold'; font-size:13px; }

/* Ficha de detalle: siempre poblada (hub por defecto), sin texto-instrucción.
   Móvil: registro alineado a la izquierda bajo una regla a sangre del container;
   en ≥1024 la regla pasa a vertical (ficha catastral de la columna derecha). */
.ecomap__panel{ min-height: 0; padding-top: var(--space-3); border-top: var(--carto-line) solid var(--rule); }
.ecomap.is-enhanced .ecomap__panel-body{ opacity:0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ecomap.is-enhanced .ecomap__panel-body.is-in{ opacity:1; transform:none; }
.ecomap__panel-link{ margin-top: var(--space-3); }
/* El kicker de la ficha es una coordenada: cruz de registro delante (el JS solo toca el texto) */
.ecomap__panel-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'DINBold'; font-size: var(--measure-font); letter-spacing: var(--measure-track);
  text-transform:uppercase; color: var(--red-deep); font-variant-numeric: tabular-nums;
}
.ecomap__panel-kicker::before{
  content:''; width:13px; height:13px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23E53838' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ecomap__panel-title{ font-family:'DINBold'; font-size: var(--text-2xl); color: var(--green); margin:.35rem 0 .5rem; line-height:1.15; }
.ecomap__panel-desc{ color: var(--muted); font-size: var(--text-base); line-height:1.65; max-width: 40ch; margin:0; }

/* Composición DESKTOP (≥1024): cabecera 7/12 desde la columna 6 (sección par, regla 3),
   kicker vertical en el margen (regla 11), folio 05 cruzando el límite superior (regla 9),
   plano sobre retícula con marco de esquinas (regla 8) y ficha catastral colgada de una
   regla vertical de 1px con cruz de registro. La franja 701–1023 hereda la base móvil. */
@media (min-width: 1024px){
  /* La lámina abre pegada al límite para que el folio lo cruce de verdad
     (#areas es blanca: el "05" pisa el cambio de fondo blanco→crema). */
  #ecosistema{ padding-top: var(--space-3); }

  .ecosystem__head{ align-items: start; }
  .ecosystem__folio{ grid-column: 1 / 5; text-align: right; margin-bottom: 0; }
  .ecosystem__folio .carto-predio{ font-size: clamp(8.5rem, 11vw, 9rem); } /* ≥3× el h2 (regla 10) */
  .ecosystem__head .section__head{ grid-column: 6 / span 7; max-width: none; }
  #ecosistema .section__head .eyebrow.carto-v{
    position: absolute; top: var(--space-3); right: calc(100% + var(--space-2));
  }

  .ecomap{ grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); column-gap: var(--grid-unit); align-items: stretch; }
  .ecomap__stage{ max-width: none; margin-inline: 0; }
  /* Padding = 1 celda de la retícula: el borde del SVG queda anclado a la cuadrícula (regla 8) */
  .ecomap__stage.carto-frame{ --tick: 22px; padding: var(--grid-unit); }
  .ecomap.is-enhanced .ecomap__panel{ padding-top: var(--space-7); }
  .ecomap__panel{
    min-height: 224px; border-top: none; padding-top: 0;
    border-left: var(--carto-line) solid var(--rule); padding-left: var(--space-4);
    position: relative;
  }
  .ecomap__panel::before{
    content:'+'; position:absolute; top:-.55em; left:-.34em;
    font-family:'DINBold'; font-size:15px; line-height:1; color: var(--red);
  }

  /* Cierre: párrafo alineado a la columna de la cabecera; curva de nivel en el margen */
  .ecosystem__lower{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--space-3); }
  .ecosystem__lower > p{ grid-column: 6 / span 7; grid-row: 1; }
  .ecosystem__contour{ grid-column: 2 / 5; grid-row: 1; width: 150px; margin-top: .35rem; justify-self: start; }
  .ecosystem__lower .cta-band{ grid-column: 1 / -1; }
}
/* En pantallas angostas el mapa sangra hasta 12px del borde del viewport:
   junto con el viewBox compacto que fija js/ecomap.js (≤900px), garantiza
   etiquetas ≥11px reales a 375px. El resto de la sección conserva su padding. */
@media (max-width: 640px){
  .ecomap__stage{
    width: min(100vw - 1.5rem, 460px);
    margin-inline: calc((100% - min(100vw - 1.5rem, 460px)) / 2);
  }
}

@media (prefers-reduced-motion: reduce){
  .ecomap__link, .ecomap__dot, .ecomap__ring, .ecomap__btext, .ecomap__inner, .ecomap__node, .ecomap__panel-body{ transition:none; }
  .ecomap__node.is-hover .ecomap__inner{ transform:none; }
  .ecomap__node.is-idle .ecomap__ring{ animation:none; }
}

.ecosystem__lower{ margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ecosystem__lower p{ color: var(--green-soft); font-size: var(--text-base); line-height:1.6; max-width: 62ch; }
.ecosystem__copy p{ color: var(--green-soft); margin:0; }
/* Muro de aliados: por defecto el nombre en texto. Cuando existe el archivo de logo
   (js/allies.js lo detecta en img/aliados/), se muestra el logo en tratamiento
   monocromo que se colorea al hover. Si falta el archivo, queda el nombre (sin imagen rota). */
.allies{ display:flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items:center; }
.ally{ position:relative; display:inline-flex; align-items:center; }
.ally__name{ font-family:'DINBold'; font-size: var(--text-sm); color: var(--green-soft); letter-spacing:.01em; }
.ally__logo{
  height: 30px; width:auto; max-width: 132px; object-fit:contain;
  filter: grayscale(1); opacity:.6;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.ally.has-logo .ally__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ally.has-logo:hover .ally__logo{ filter: grayscale(0); opacity:1; }

/* ===== Tira de aliados en loop (dos filas contrapuestas, logos a color) =====
   Vive fuera del .container: corre de borde a borde sin trucos de viewport. */
.allies-marquee{
  margin-top: var(--space-5);
  position: relative;
  padding-block: var(--space-4);
  border-top: var(--carto-line) solid var(--line);
  border-bottom: var(--carto-line) solid var(--line);
  /* Sin overflow:hidden aquí: el recorte del loop lo hacen las .allies-marquee__row
     (y body{overflow-x:clip}); el contenedor debe dejar ver las cruces sobre sus reglas. */
}
/* Cruces de registro en el margen del pliego (marcas de imprenta de la hoja) */
.allies-marquee::before, .allies-marquee::after{
  content:'+'; position:absolute; font-family:'DINBold'; font-size:15px; line-height:1;
  color: var(--red); pointer-events:none;
}
.allies-marquee::before{ top:-.55em; left: var(--space-3); }
.allies-marquee::after{ bottom:-.55em; right: var(--space-3); }
.allies-marquee__row{ overflow: hidden; }
.allies-marquee__row + .allies-marquee__row{ margin-top: var(--space-4); }
.allies-marquee__track{ display: flex; width: max-content; }
.allies-marquee .allies{
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--space-7); padding-right: var(--space-7);
}
.allies-marquee__row.is-looping .allies-marquee__track{
  animation: marqueeLoop var(--marquee-dur, 46s) linear infinite;
}
.allies-marquee__row.is-looping[data-dir="rtl"] .allies-marquee__track{ animation-direction: reverse; }
.allies-marquee__row:hover .allies-marquee__track,
.allies-marquee__row:focus-within .allies-marquee__track{ animation-play-state: paused; }
@keyframes marqueeLoop{ to{ transform: translateX(-50%); } }
/* Control pausar/reanudar del loop (WCAG 2.2.2 — Pausar, detener, ocultar).
   El botón nace [hidden] y js/marquee.js lo muestra solo cuando el loop corre:
   sin JS o con prefers-reduced-motion no hay animación que pausar.
   animation-play-state (y no animation:none) conserva la posición al reanudar. */
.allies-marquee.is-paused .allies-marquee__row.is-looping .allies-marquee__track,
.allies-marquee.is-offscreen .allies-marquee__row.is-looping .allies-marquee__track{
  animation-play-state: paused;
}
.allies-marquee__bar{ display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.allies-marquee__toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; /* área táctil mínima (WCAG 2.5.8 / HIG) */
  padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--green-soft);
  cursor: pointer; touch-action: manipulation;
}
.allies-marquee__toggle[hidden]{ display: none; }
.allies-marquee__toggle:hover{ color: var(--green); border-color: var(--green-soft); background: var(--paper); }
/* Pausa activada: verde institucional pleno + icono de play (cambia la forma, no solo el color) */
.allies-marquee__toggle[aria-pressed="true"]{ background: var(--green); border-color: var(--green); color: var(--cream); }
.allies-marquee__icon--play{ display: none; }
.allies-marquee__toggle[aria-pressed="true"] .allies-marquee__icon--play{ display: block; }
.allies-marquee__toggle[aria-pressed="true"] .allies-marquee__icon--pause{ display: none; }
/* Logos a COLOR, plena presencia al hover */
.allies-marquee .ally__logo{
  filter: none; opacity: .92; height: 38px; max-width: 190px;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.allies-marquee .ally:hover .ally__logo{ opacity: 1; transform: scale(1.06); }
/* Sin loop (sin JS o reduced-motion): filas que envuelven dentro del ancho, nada se corta */
html:not(.js) .allies-marquee,
.allies-marquee--static{ padding-inline: var(--space-4); }
html:not(.js) .allies-marquee .allies{ flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
@media (prefers-reduced-motion: reduce){
  .allies-marquee{ padding-inline: var(--space-4); }
  .allies-marquee__row.is-looping .allies-marquee__track{ animation: none; }
  .allies-marquee .allies{ flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  .allies-marquee__track{ width: auto; }
  .allies-marquee__track [data-clone]{ display:none; }
  .allies-marquee .ally__logo, .allies-marquee .ally:hover .ally__logo{ transition:none; transform:none; }
  .allies-marquee__bar{ display:none; } /* sin animación no hay nada que pausar */
}
@media (max-width: 640px){
  .allies-marquee .allies{ gap: var(--space-5); padding-right: var(--space-5); }
  .allies-marquee .ally__logo{ height: 30px; max-width: 150px; }
}

/* ===== Banda CTA intermedia: puente reutilizable hacia #contacto (fin de Áreas y ecosistema).
   Verde institucional + .btn-primary existente; sin animación propia (entra por el sistema de reveal). ===== */
/* La banda deja de ser rectángulo verde: es una estación de cota sobre el propio
   fondo de la sección. Dos reglas horizontales con cruces de registro en las
   intersecciones; el botón .btn-primary existente es la 'medida'. */
.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); flex-wrap:wrap;
  margin-top: var(--space-6); padding: var(--space-4) 0;
  background: none; color: inherit; border-radius: 0; position: relative;
  border-top: var(--carto-line) solid var(--green);
  border-bottom: var(--carto-line) solid var(--green);
}
.cta-band::before, .cta-band::after{
  font-family:'DINBold'; font-size: 15px; line-height: 1; color: var(--red);
  position:absolute; pointer-events:none;
}
.cta-band::before{ content:'+'; top:-.6em; left:-.3em; }
.cta-band::after{ content:'+'; bottom:-.6em; right:-.3em; }
.cta-band__text{ margin:0; max-width:52ch; }
.cta-band__text b{ display:block; font-family:'DINBold'; font-weight:400; font-size: var(--text-lg); color: var(--green); line-height:1.3; }
.cta-band__text span{ display:block; font-size: var(--text-sm); color: var(--muted); margin-top:.35em; }
.cta-band .btn-primary{ flex:0 0 auto; }
.cta-band :focus-visible{ outline-color: var(--red); }
.ecosystem__lower .cta-band{ margin-top: var(--space-4); }
@media (max-width: 640px){
  .cta-band{ padding: var(--space-3) 0; }
  .cta-band .btn-primary{ width:100%; justify-content:center; }
}

/* ===== Contacto ===== */
.contact{ background: var(--green-deep); color: var(--cream); --rule: var(--line-deep); }
.contact .section__head h2{ color: #fff; }
.contact .lead{ color: #C7CDB9; }

/* Ficha de contacto del levantamiento (predio 05, sección impar: cabecera en col 2).
   Base = composición MÓVIL; ≥1024 monta la lámina asimétrica sobre .carto-12.
   Sin caja translúcida: registros de campo separados por reglas de 1px y UN solo
   contenedor con fondo (la hachura oscura del "predio marcado", regla 6). */
.contact__lamina{ margin-bottom: var(--space-5); }
.contact__lamina .section__head{ margin-bottom: 0; }
.contact__folio{
  display:flex; flex-direction:column; align-items:flex-start;
  gap: var(--space-1); margin-bottom: var(--space-3);
}

/* Registros de campo: etiqueta de dato pequeña (DINBold, tracking de medida),
   valor tipográfico protagonista. El marcador de coordenada sustituye al icono genérico. */
.contact__grid{ display:block; }
.contact__list{ border-bottom: var(--carto-line) solid var(--rule); }
.contact__list li{
  display:flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) 0; border-top: var(--carto-line) solid var(--rule);
}
.contact__list svg{ color: var(--accent-lime); flex: 0 0 auto; margin-top: .25em; }
.contact__list b{
  display:block; font-family:'DINBold'; color:#B9C2A9;
  font-size: var(--measure-font); letter-spacing: var(--measure-track);
  text-transform: uppercase; margin-bottom: .4em;
}
.contact__list span{
  display:block; font-family:'DINBold'; font-size: var(--text-xl);
  color:#fff; line-height:1.25; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.contact__list span a{
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: rgba(247,244,240,.35);
}
.contact__list span a:hover{ text-decoration-color: var(--accent-lime); }

/* Predio marcado: el único contenedor con fondo de la sección (hachura vía
   .carto-hatch--dark en el HTML). Radio 0, borde de 1px y cruz de registro. */
.contact__card{
  position: relative; margin-top: var(--space-4);
  border: var(--carto-line) solid var(--rule); border-radius: 0;
  padding: var(--space-4); display:flex; flex-direction:column; justify-content:center;
}
.contact__card::before{
  content:'+'; position:absolute; top:-.62em; left:-.34em;
  font-family:'DINBold'; font-size: 15px; line-height:1; color: var(--red);
  pointer-events:none;
}
.contact__card p{ color:#C7CDB9; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.contact__card .btn-primary{ width:100%; justify-content:center; }
/* Acciones del bloque de contacto: mailto principal + respaldo "Copiar correo" (js/copy-email.js) */
.contact__actions{ display:flex; flex-direction:column; gap: var(--space-1); }
.contact__actions .btn{ width:100%; justify-content:center; }
.copy-email.is-done{ border-color: var(--accent-lime-line); color: var(--accent-lime); }
/* Región de estado accesible (aria-live): fuera de pantalla, mismo patrón que .skip-link */
.copy-email__status{ position:absolute; left:-9999px; }

/* Cota de cierre del levantamiento (regla 4: el cierre expone su medida) */
.contact__cota{ margin-top: var(--space-5); }

/* Cruce de límite (regla 9): la curva de nivel atraviesa la regla contacto/footer.
   Se posiciona respecto a la sección (.contact ya es position:relative) y
   .carto-allow-bleed en el HTML libera el overflow. Decorativa, sin eventos. */
.contact__close{
  position:absolute; z-index:2; right: clamp(1.5rem, 9vw, 7.5rem);
  bottom: calc(var(--bleed) / 2); pointer-events:none; line-height:0;
}
.contact__close svg{ width:150px; height:auto; }
@media (max-width: 700px){ .contact__close svg{ width:110px; } }

/* Composición desktop (≥1024): lámina asimétrica sobre 12 columnas.
   Cabecera en col 2 (7/12, sección impar); folio 05 en cols 10 a 12;
   registros en cols 2 a 7 y predio marcado en cols 9 a 12 (la col 8 respira). */
@media (min-width: 1024px){
  .contact__lamina .section__head{ grid-column: 2 / span 7; grid-row: 1; }
  .contact__folio{
    grid-column: 10 / span 3; grid-row: 1; margin-bottom: 0;
    align-items: flex-end; text-align: right; justify-self: end;
  }
  .contact__folio .carto-predio{ font-size: 8.5rem; } /* razón mayor a 3x frente al h2 (regla 10) */
  .contact__grid{
    display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
    column-gap: var(--space-3); align-items: start;
  }
  .contact__list{ grid-column: 2 / span 6; }
  .contact__card{ grid-column: 9 / span 4; margin-top: 0; }
  .contact__cota{ margin-top: var(--space-6); }
}

/* ===== Footer: cajetín del plano =====
   Placa de identificación (logo + escala gráfica) cerrada por regla de 1px con
   cruz de registro; debajo, nav de secciones y colofón. Base móvil apilada;
   ≥1024 el cajetín se lee en dos filas horizontales. */
.footer{
  background: var(--green-deep); border-top: 1px solid var(--line-deep);
  padding: var(--space-5) 0 var(--space-4); --rule: var(--line-deep);
}
.footer .container{ display:block; }
.footer__plate{
  position: relative; display:flex; flex-direction:column; align-items:flex-start;
  gap: var(--space-2); padding-bottom: var(--space-3);
  border-bottom: var(--carto-line) solid var(--rule);
}
.footer__plate::after{
  content:'+'; position:absolute; bottom:-.6em; right:-.3em;
  font-family:'DINBold'; font-size: 15px; line-height:1; color: var(--red);
  pointer-events:none;
}
.footer img{ height: 24px; opacity:.85; } /* logoHome.svg: la versión clara de la identidad sobre verde profundo */
.footer__meta{ padding-top: var(--space-2); }
.footer__nav{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.footer__nav a{
  font-family:'DINBold'; font-size: var(--text-xs); color:#8A9279; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
  letter-spacing: .06em; text-transform: uppercase;
}
.footer__nav a:hover{ color: var(--cream); }
.footer small{
  display:block; color:#8A9279; font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: var(--carto-line) solid var(--rule);
}
@media (min-width: 1024px){
  .footer__plate{ flex-direction:row; align-items:center; justify-content:space-between; }
  .footer__meta{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-4); padding-top: var(--space-3); }
  .footer__nav{ display:flex; flex-wrap:wrap; gap: var(--space-1) var(--space-3); }
  .footer small{ margin-top:0; padding-top:0; border-top:none; }
}

@media (max-width: 640px){
  /* La composición móvil del hero ahora ES la hoja base (migración a min-width:1024) */
  .section{ padding: var(--space-6) 0; }
}

/* ===== Textura territorial: motivo de contorno recurrente + graticula SIG.
   Generativo/abstracto, on-brand (líneas topográficas = inteligencia territorial).
   Sin archivos: SVG en data-URI. Crea también el hilo visual conector entre secciones. ===== */
.focus, .contact, #nosotros, .section--alt{ position: relative; overflow: hidden; }
.focus > .container, .contact > .container, #nosotros > .container, .section--alt > .container{ position: relative; z-index: 1; }

/* Contacto sale de la textura tímida (regla 7): su cierre trabaja con reglas de 1px,
   hachura y motivos de primer plano en lugar del fondo a opacity .06 */
.focus::before, #nosotros::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}
/* Secciones oscuras: contornos crema (eco del hero) */
.focus::before{
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none' fill='none' stroke='%23F7F4F0' stroke-width='1'%3E%3Cpath d='M0 90 C200 60 400 130 600 88 S1200 100 1200 100'/%3E%3Cpath d='M0 190 C220 150 420 230 640 180 S1200 196 1200 196'/%3E%3Cpath d='M0 300 C200 250 440 330 660 270 S1200 286 1200 286'/%3E%3Cpath d='M0 410 C220 360 420 450 640 380 S1200 396 1200 396'/%3E%3Cpath d='M0 510 C200 460 440 540 660 470 S1200 486 1200 486'/%3E%3C/svg%3E");
}
/* Quiénes somos: la textura tímida (.05) se ELIMINA (regla 7). El motivo territorial
   vive ahora en primer plano: retícula .carto-grid en la franja MVV y hachura
   catastral en la lámina de folio .nos-plate. */
/* Áreas: la graticula tímida (.05, rango prohibido por la regla 7) se elimina.
   La retícula de agrimensura del sistema (.carto-grid--fade, opacidad decidida .10/.22)
   vive ahora sobre .services__list, anclada a la columna de 64px de las filas (regla 8). */

/* ===== Sistema cartográfico editorial — utilidades .carto-* =====
   El lenguaje territorial (retícula de agrimensura, cruces de registro, cotas,
   coordenadas, numeración de predio) como sistema gráfico de PRIMER plano.
   Solo CSS + SVG data-URI; animar únicamente transform/opacity. */

/* Retícula de agrimensura VISIBLE: celdas de 64px con cruz de registro al centro.
   Solo se pinta donde el layout se alinea a ella (regla 8). */
.carto-grid{ position: relative; }
.carto-grid::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0 .5h64M.5 0v64' stroke='%233B4935' stroke-opacity='.1'/%3E%3Cpath d='M32 27v10M27 32h10' stroke='%233B4935' stroke-opacity='.22'/%3E%3C/svg%3E");
  background-size: var(--grid-unit) var(--grid-unit);
}
.carto-grid--dark::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0 .5h64M.5 0v64' stroke='%23F7F4F0' stroke-opacity='.12'/%3E%3Cpath d='M32 27v10M27 32h10' stroke='%23F7F4F0' stroke-opacity='.25'/%3E%3C/svg%3E");
}
.carto-grid--fade::before{
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.carto-grid > *{ position:relative; z-index:1; }

/* Hachura catastral: relleno de área (sustituye fondos sólidos secundarios).
   Máximo un área hachurada por franja (regla 6). */
.carto-hatch{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M-2 10 10 -2M-2 2 2 -2M6 10 10 6' stroke='%233B4935' stroke-opacity='.16'/%3E%3C/svg%3E");
}
.carto-hatch--dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M-2 10 10 -2M-2 2 2 -2M6 10 10 6' stroke='%23F7F4F0' stroke-opacity='.14'/%3E%3C/svg%3E");
}

/* Marco de esquinas (corner ticks): el sustituto sistémico de la tarjeta */
.carto-frame{
  --tick: 18px; --frame-ink: var(--green);
  position: relative; border-radius: 0; padding: var(--space-3);
  background-image:
    linear-gradient(var(--frame-ink), var(--frame-ink)), linear-gradient(var(--frame-ink), var(--frame-ink)),
    linear-gradient(var(--frame-ink), var(--frame-ink)), linear-gradient(var(--frame-ink), var(--frame-ink)),
    linear-gradient(var(--frame-ink), var(--frame-ink)), linear-gradient(var(--frame-ink), var(--frame-ink)),
    linear-gradient(var(--frame-ink), var(--frame-ink)), linear-gradient(var(--frame-ink), var(--frame-ink));
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size:
    var(--tick) var(--carto-line), var(--carto-line) var(--tick),
    var(--tick) var(--carto-line), var(--carto-line) var(--tick),
    var(--tick) var(--carto-line), var(--carto-line) var(--tick),
    var(--tick) var(--carto-line), var(--carto-line) var(--tick);
  background-repeat: no-repeat;
}
.carto-frame--cream{ --frame-ink: rgba(247,244,240,.55); }
.carto-frame--lime{ --frame-ink: var(--accent-lime-line); }

/* Línea de cota fluida: separador con flechas, ticks y medida expuesta al centro */
.carto-cota{
  display:flex; align-items:center; gap: var(--space-2);
  font-family:'DINBold'; font-size: var(--measure-font); letter-spacing: var(--measure-track);
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.carto-cota::before, .carto-cota::after{
  content:''; flex:1 1 0; height:9px; min-width: var(--space-4); background-repeat:no-repeat;
}
.carto-cota::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M.5 0v9' stroke='%23656E5A'/%3E%3Cpath d='M8 1 1.5 4.5 8 8' fill='none' stroke='%23656E5A'/%3E%3C/svg%3E"),
    linear-gradient(#656E5A, #656E5A);
  background-position: left center, left center;
  background-size: 13px 9px, 100% 1px;
}
.carto-cota::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M12.5 0v9' stroke='%23656E5A'/%3E%3Cpath d='M5 1l6.5 3.5L5 8' fill='none' stroke='%23656E5A'/%3E%3C/svg%3E"),
    linear-gradient(#656E5A, #656E5A);
  background-position: right center, right center;
  background-size: 13px 9px, 100% 1px;
}
.carto-cota--dark{ color:#8A9279; }
.carto-cota--dark::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M.5 0v9' stroke='%23F7F4F0' stroke-opacity='.5'/%3E%3Cpath d='M8 1 1.5 4.5 8 8' fill='none' stroke='%23F7F4F0' stroke-opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(rgba(247,244,240,.4), rgba(247,244,240,.4));
}
.carto-cota--dark::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M12.5 0v9' stroke='%23F7F4F0' stroke-opacity='.5'/%3E%3Cpath d='M5 1l6.5 3.5L5 8' fill='none' stroke='%23F7F4F0' stroke-opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(rgba(247,244,240,.4), rgba(247,244,240,.4));
}

/* Coordenada de margen: cruz de registro + folio tipográfico */
.carto-coord{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'DINBold'; font-size: var(--measure-font); letter-spacing: var(--measure-track);
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.carto-coord::before{
  content:''; width:13px; height:13px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23E53838' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.carto-coord--dark{ color:#8A9279; }

/* Numeración de predio: número de sección enorme, solo contorno */
.carto-predio{
  font-family:'DINBold'; font-weight:400;
  font-size: clamp(4rem, 9vw, 8rem); line-height:.85; letter-spacing:-.02em;
  color: transparent; -webkit-text-stroke: 1px var(--green);
  user-select:none;
}
.carto-predio--dark{ -webkit-text-stroke-color: rgba(247,244,240,.45); }
.carto-predio--red{ -webkit-text-stroke-color: var(--red); }
@supports not (-webkit-text-stroke: 1px #000){
  .carto-predio{ color: var(--line); }
  .carto-predio--dark{ color: rgba(247,244,240,.22); }
}

/* Retícula editorial de 12 columnas (composición desktop; en ≤1023 no existe) */
.carto-12{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--space-3); row-gap: var(--space-4); }
@media (max-width: 1023px){ .carto-12{ display:block; } }

/* Cruce de límite de sección (regla 9): un solo elemento por sección */
.carto-bleed-up{ margin-top: var(--bleed); }
.carto-bleed-down{ margin-bottom: var(--bleed); }
.section.carto-allow-bleed, #nosotros.carto-allow-bleed{ overflow: visible; }

/* Color de los motivos SVG inline de la biblioteca (currentColor) */
.carto-motif{ color: var(--green-soft); }
.carto-motif--cream{ color: rgba(247,244,240,.55); }
.carto-motif--lime{ color: var(--accent-lime); }
.carto-motif--red{ color: var(--red); }

/* Skip link (accesibilidad): oculto hasta recibir foco por teclado */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background: var(--green); color: var(--cream); padding:.7em 1.2em; font-family:'DINBold'; font-size: var(--text-sm); border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus{ left:0; outline:2px solid var(--accent-lime); outline-offset:2px; }

/* Legibilidad: cuerpo de párrafo a 16px en móvil (etiquetas/tags quedan en --text-sm) */
@media (max-width: 760px){
  .focus__card p, .services__row p, .services__detail-in p, .proceso__sum, .proceso__in p, .ventaja span,
  .mvv__item p, .mvv__panel-text, .umbrales p, .env-list li, .env-card__lead, .litigio-steps span, .cemint-divisions li{ font-size: var(--text-base); }
}

/* ===== Motion: dibujo del topo del hero + giro ambiental del globo ===== */
@media (prefers-reduced-motion: no-preference){
  .hero__topo path{
    stroke-dasharray: 2200; stroke-dashoffset: 2200;
    animation: drawTopo 2.6s var(--ease) .2s forwards;
  }
  .hero__topo path:nth-child(2){ animation-delay:.35s; }
  .hero__topo path:nth-child(3){ animation-delay:.5s; }
  .hero__topo path:nth-child(4){ animation-delay:.65s; }
  .hero__topo path:nth-child(5){ animation-delay:.8s; }
  .hero__spin{ transform-box: fill-box; transform-origin: center; animation: spinMark 120s linear infinite; }
}
@keyframes drawTopo{ to{ stroke-dashoffset: 0; } }
@keyframes spinMark{ to{ transform: rotate(360deg); } }

/* ===== Reveal en scroll — SEGURO: el contenido vive siempre en el HTML.
   Sin la clase .js (JS ausente), con reduced-motion, o con el fallback .reveal-all,
   todo se muestra completo. Solo se anima la ENTRADA, nunca se oculta contenido. ===== */
@media (prefers-reduced-motion: no-preference){
  html.js:not(.reveal-all) #nosotros .nos-plate,
  html.js:not(.reveal-all) #nosotros .nos-coord,
  html.js:not(.reveal-all) #nosotros .nos-cota,
  html.js:not(.reveal-all) #nosotros .about-intro,
  html.js:not(.reveal-all) #nosotros .mvv,
  html.js:not(.reveal-all) #nosotros .timeline-head,
  html.js:not(.reveal-all) #nosotros .proceso,
  html.js:not(.reveal-all) #nosotros .ventaja-block,
  html.js:not(.reveal-all) #enfoque .section__head,
  html.js:not(.reveal-all) #enfoque .sysflow,
  html.js:not(.reveal-all) #enfoque .focus__card,
  html.js:not(.reveal-all) #enfoque .imjus-band,
  html.js:not(.reveal-all) #areas .section__head,
  html.js:not(.reveal-all) #areas .services__item,
  html.js:not(.reveal-all) #areas .timeline-head,
  html.js:not(.reveal-all) #areas .env-card,
  html.js:not(.reveal-all) #areas .cta-band,
  html.js:not(.reveal-all) #ecosistema .section__head,
  html.js:not(.reveal-all) #ecosistema .ecosystem__lower,
  html.js:not(.reveal-all) #contacto .section__head,
  html.js:not(.reveal-all) #contacto .contact__grid{
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  /* Áreas: distancia de entrada por tipo de elemento (variación 8-24px, no el 20px uniforme):
     cabecera 16px, filas del levantamiento 10px, predios ambientales 24px, estación de cota 8px */
  html.js:not(.reveal-all) #areas .section__head{ transform: translateY(16px); }
  html.js:not(.reveal-all) #areas .services__item{ transform: translateY(10px); }
  html.js:not(.reveal-all) #areas .env-card{ transform: translateY(24px); }
  html.js:not(.reveal-all) #areas .cta-band{ transform: translateY(8px); }
  html.js .is-visible{ opacity: 1 !important; transform: none !important; }
  /* Contacto: distancias de entrada propias (folio 10px, ficha 14px; la cabecera
     conserva los 20px del bloque general). Variación por tipo de elemento. */
  html.js:not(.reveal-all) #contacto .contact__folio{
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  html.js:not(.reveal-all) #contacto .contact__grid{ transform: translateY(14px); }
  /* Ecosistema: distancias de entrada por tipo (variar 8–24px, no desactivar; el
     mecanismo de js/reveal.js y sus fallbacks quedan intactos). */
  html.js:not(.reveal-all) #ecosistema .section__head{ transform: translateY(14px); }
  html.js:not(.reveal-all) #ecosistema .ecomap{
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  html.js:not(.reveal-all) #ecosistema .ecosystem__lower{ transform: translateY(22px); }
  /* Sección 02 — distancias de reveal por tipo de pieza (8–24px, hitList 11):
     coordenada y cota apenas se registran; la lámina de folio DESCIENDE a su
     sitio (cruza el límite desde el hero); los módulos suben corto. */
  html.js:not(.reveal-all) #nosotros .nos-coord,
  html.js:not(.reveal-all) #nosotros .nos-cota{ transform: translateY(8px); }
  html.js:not(.reveal-all) #nosotros .nos-plate{ transform: translateY(-16px); }
  html.js:not(.reveal-all) #nosotros .proceso{ transform: translateY(12px); }
  html.js:not(.reveal-all) #nosotros .ventaja-block{ transform: translateY(16px); }

  /* Stagger interno del diagrama de flujo: los pasos entran en cascada con el riel */
  html.js:not(.reveal-all) #enfoque .sysflow .sysflow__step,
  html.js:not(.reveal-all) #enfoque .sysflow .sysflow__results{
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  html.js #enfoque .sysflow.is-visible .sysflow__step,
  html.js #enfoque .sysflow.is-visible .sysflow__results,
  html.reveal-all #enfoque .sysflow .sysflow__step,
  html.reveal-all #enfoque .sysflow .sysflow__results{ opacity: 1; transform: none; }
  html.js #enfoque .sysflow.is-visible .sysflow__step:nth-child(2){ transition-delay: .12s; }
  html.js #enfoque .sysflow.is-visible .sysflow__step:nth-child(3){ transition-delay: .24s; }
  html.js #enfoque .sysflow.is-visible .sysflow__step:nth-child(4){ transition-delay: .36s; }
  html.js #enfoque .sysflow.is-visible .sysflow__step:nth-child(5){ transition-delay: .48s; }
  html.js #enfoque .sysflow.is-visible .sysflow__results{ transition-delay: .62s; }
}