/* ============================================================
   DEINSA · deinsa.com · Sistema de diseño web
   Implementa el «Instructivo de Diseño Web v1.0 · Sep 2026».
   Tema único claro por mandato de marca: todos los colores se
   pintan de forma explícita, nunca se heredan del host.
   ============================================================ */

:root{
  color-scheme: light;

  /* --- Paleta DEINSA --- */
  --verde:      #1A6858;
  --verde-dk:   #134E43;
  --verde-lt:   #3E8575;
  --lapis:      #1E4B7A;
  --lapis-lt:   #33628F;
  --pizarra:    #556070;
  --gris:       #AEB6BC;
  --gris-lt:    #C9CFD3;
  /* Gris legible para texto menor sobre fondos claros: 5.3x sobre blanco,
     4.5x sobre hueso. El --gris original (2.1x) se reserva para fondos
     oscuros, bordes y estados apagados. */
  --gris-txt:   #656C74;
  --hueso:      #EEEDE9;
  --tinta:      #1A2128;
  --blanco:     #FFFFFF;

  /* Isotipo — SOLO dentro del lockup, y menta como acento
     de eyebrow EXCLUSIVAMENTE sobre fondos oscuros (ver nota AA) */
  --teal:       #145D7B;
  --mint:       #63C4AA;
  --sky:        #84B4E4;

  /* Neutros sesgados hacia el verde ancla */
  --linea:      #E2E4E2;
  --hueso-sv:   #F6F6F4;

  /* --- Layout (instructivo §01) --- */
  --max-w:      1200px;
  --pad-h:      40px;
  --pad-sec:    80px;
  --radius:     8px;
  --radius-sm:  6px;
  --header-h:   72px;
  --gap:        24px;

  /* --- Tipografía --- */
  --font-pf: "Playfair Display", Lora, Georgia, "Times New Roman", serif;
  --font-dm: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mo: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Hero sin fotografía: se sostiene con el degradado de marca y el
     motivo diagonal. Las 4 imágenes se usan en las especialidades.
     Para poner foto de fondo: --hero-img: url("img/archivo.webp"); */
  --hero-img: none;
}

/* ---------- Reset acotado ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--font-dm);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked{ overflow: hidden; }
img,svg{ max-width: 100%; }
img{ display: block; height: auto; }
a{ color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--lapis-lt); }
h1,h2,h3,h4{ margin: 0; text-wrap: balance; }
p{ margin: 0; }
ul,ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; }

/* Foco visible en verde (instructivo §07). Contrasta 6.6:1 sobre
   blanco y 3.4:1 sobre tinta, así que sirve en ambas familias. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :where(a,button,summary):focus-visible{ outline-color: var(--mint); }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--verde); color: var(--blanco);
  padding: 12px 20px; font-weight: 500;
}
.skip:focus{ left: 8px; top: 8px; }

/* ---------- Layout ---------- */
.wrap{ width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-h); }
.section{ padding: var(--pad-sec) 0; scroll-margin-top: calc(var(--header-h) + 8px); }
.section--hueso{ background: var(--hueso); }
.section--tinta{ background: var(--tinta); color: var(--hueso); }
.section--verde{ background: var(--verde-dk); color: var(--blanco); }

/* ---------- Tipografía de página ---------- */
.eyebrow{
  font-family: var(--font-mo); font-size: 12px; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde); margin: 0 0 12px;
}
/* Menta solo sobre fondo oscuro: sobre blanco daría 2.1:1 y reprobaría AA */
.on-dark .eyebrow{ color: var(--mint); }

.h1{
  font-family: var(--font-pf); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.1; letter-spacing: -.01em;
}
.h2{
  font-family: var(--font-pf); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2; color: var(--verde);
}
.on-dark .h2{ color: var(--blanco); }
.h3{ font-family: var(--font-pf); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--tinta); }
.lede{ font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--pizarra); max-width: 62ch; }
.on-dark .lede{ color: var(--gris-lt); }
.mono{ font-family: var(--font-mo); font-variant-numeric: tabular-nums; }

.section-head{ max-width: 68ch; margin-bottom: 48px; }
.section-head .lede{ margin-top: 12px; }
/* Lede en dos líneas fijas (una oración por línea) en escritorio */
/* Encabezado ancho: ocupa la misma columna que el contenido, sin recorte propio,
   para que su margen derecho coincida con el de las tarjetas */
.section-head--wide{ max-width: none; }
.lede--2l, .lede--3l{ max-width: none; }
@media (max-width: 720px){ .lede--3l br{ display: none; } }
.section-foot{ margin-top: 40px; }
.link-cta{
  font-weight: 500; font-size: 15px; color: var(--verde);
  text-decoration: none; border-bottom: 1px solid var(--verde-lt); padding-bottom: 2px;
}
.link-cta:hover{ color: var(--verde-dk); border-bottom-color: var(--verde); }
.on-dark .link-cta{ color: var(--mint); border-bottom-color: rgba(99,196,170,.5); }
.on-dark .link-cta:hover{ color: var(--blanco); border-bottom-color: var(--blanco); }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-dm); font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; padding: 15px 24px; min-height: 46px;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary{ background: var(--verde); color: var(--blanco); }
.btn--primary:hover{ background: var(--verde-dk); color: var(--blanco); }
.btn--ghost{ background: transparent; color: var(--verde); border-color: var(--gris); }
.btn--ghost:hover{ border-color: var(--verde); color: var(--verde-dk); }
.btn--onDark{ background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.55); }
.btn--onDark:hover{ background: rgba(255,255,255,.1); color: var(--blanco); border-color: var(--blanco); }
.btn--sm{ padding: 11px 18px; min-height: 40px; font-size: 14px; }

/* ---------- Header ---------- */
.header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .2s ease;
}
.header.is-scrolled{ box-shadow: 0 2px 14px rgba(26,33,40,.07); }
.header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); height: var(--header-h);
}
.brand{ display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand svg{ display: block; height: 40px; width: auto; }
/* El wordmark del lockup sigue el color dominante de la página: verde en el
   método y sus fases, lazuli donde manda la auditoría, el servicio independiente. */
.brand__word, .brand__base{ fill: var(--verde); }
.pag-lapis .brand__word, .pag-lapis .brand__base{ fill: var(--lapis); }
.nav{ display: flex; align-items: center; gap: 32px; }
.nav__list{ display: flex; align-items: center; gap: 28px; }
.nav__link{
  font-size: 15px; font-weight: 500; color: var(--tinta);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav__link:hover{ color: var(--verde); border-bottom-color: var(--verde); }
.nav__toggle{ display: none; }
.nav__close{ display: none; }

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow: hidden;
  min-height: 86vh; display: flex; align-items: center;
  padding: 72px 0;
  /* Fondo de respaldo: si aún no existe la imagen, la sección se
     sostiene sola con el degradado de marca y el motivo diagonal. */
  background:
    linear-gradient(180deg, rgba(26,33,40,.55) 0%, rgba(26,33,40,.72) 55%, rgba(26,33,40,.92) 100%),
    linear-gradient(135deg, #234A42 0%, #1A2128 60%, #16303F 100%);
  color: var(--hueso);
}
.hero__media{
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
.hero__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,33,40,.45) 0%, rgba(26,33,40,.62) 50%, rgba(26,33,40,.88) 100%);
}
.hero__motif{ position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero__motif i{
  position: absolute; display: block; border-radius: 2px;
  transform: rotate(24deg); transform-origin: top left;
}
.hero__motif i:nth-child(1){ top: -120px; right: -60px; width: 150px; height: 900px; background: var(--verde); opacity: .07; }
.hero__motif i:nth-child(2){ top: -100px; right: 120px; width: 60px;  height: 880px; background: var(--sky);   opacity: .05; }
.hero__motif i:nth-child(3){ top: 20px;   right: 220px; width: 22px;  height: 820px; background: var(--mint);  opacity: .08; }
.hero__inner{ position: relative; z-index: 2; max-width: 760px; }
.hero .h1{ color: var(--blanco); margin-bottom: 20px; }
.hero__lede{ font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; color: rgba(255,255,255,.86); max-width: 56ch; }

/* ---------- Las cinco fases en cascada, en el hero ----------
   Sustituyen al parrafo. Cada fase se desplaza un escalon respecto de la
   anterior y un conector en L la une con ella: se lee que B deriva de A y no
   que son cinco cosas sueltas.

   El escalon es pequeno a proposito. Son cinco, asi que el ultimo acumula
   cuatro: con 14 px se comeria 56 px de ancho en un telefono de 320, donde
   la fase B ya ocupa dos renglones. Crece con la pantalla.

   El renglon partido sangra con EL TEXTO y no con el distintivo, que es lo
   que pide la ficha: lo resuelve la rejilla de dos columnas, no un
   text-indent, porque la segunda columna arranca donde arranca el texto. */
.fases{ --paso: clamp(7px, 1.5vw, 15px); --hueco: clamp(6px, 1vw, 9px);
  list-style: none; margin: 0 0 14px; padding: 0; max-width: 58ch; }
.fases__i{ position: relative; padding-left: calc(var(--i) * var(--paso)); }
.fases__i + .fases__i{ margin-top: var(--hueco); }

/* Conector en L: baja del distintivo anterior y entra en este. */
.fases__i + .fases__i::before{
  content: ""; position: absolute; pointer-events: none;
  left: calc((var(--i) - 1) * var(--paso) + 11px);
  top: calc(-1 * var(--hueco) - 4px);
  width: var(--paso); height: calc(var(--hueco) + 15px);
  border-left: 1px solid rgba(255,255,255,.26);
  border-bottom: 1px solid rgba(255,255,255,.26);
  border-bottom-left-radius: 7px;
}

.fases__a{ display: grid; grid-template-columns: auto 1fr; gap: 0 10px;
  align-items: start; text-decoration: none; color: rgba(255,255,255,.90); }
.fases__a:hover .fases__t, .fases__a:focus-visible .fases__t{ text-decoration: underline; text-underline-offset: 3px; }
.fases__a:hover .fases__l, .fases__a:focus-visible .fases__l{ border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); }
.fases__l{ width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.45); display: grid; place-items: center;
  font: 700 11px/1 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em; color: #fff; }
.fases__t{ font-size: clamp(14px, 1.7vw, 17px); line-height: 1.38; padding-top: 2px; }

.fases__cierre{ margin: 0 0 4px; max-width: 56ch;
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.5; color: rgba(255,255,255,.86); }
.fases__micro{ margin: 0 0 20px;
  font: 400 clamp(12px, 1.3vw, 13px)/1.5 'DM Sans', system-ui, Arial, sans-serif;
  color: rgba(255,255,255,.62); }

@media (prefers-reduced-motion: no-preference){
  .fases__l, .fases__t{ transition: border-color .18s ease, background-color .18s ease; }
}
/* Un cierre de frase que baja siempre a su propia línea, para leerse de corrido */
.frase-entera{ display: block; }
/* Última línea de una bajada que hace de subtítulo del bloque siguiente:
   baja sola y con aire, para que se lea como entrada de las tarjetas. */
.lede__sub{ display: block; margin-top: 14px; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__stats{
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-family: var(--font-mo); font-size: 13px; letter-spacing: .04em;
  color: var(--mint); display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.hero__stats span{ white-space: nowrap; }

/* ---------- Ficha de datos (verde oscuro) ---------- */
.ficha{ padding: 36px 0; }
.ficha__grid{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
}
.ficha__item{ padding: 8px 24px; border-left: 1px solid rgba(255,255,255,.16); }
.ficha__item:first-child{ border-left: none; padding-left: 0; }
.ficha__k{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-lt); margin-bottom: 6px;
}
.ficha__v{ font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--blanco); }

/* ---------- Tarjetas de riesgo ---------- */
.cards-3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.card{
  background: var(--blanco); border-radius: var(--radius);
  border-top: 3px solid var(--verde);
  box-shadow: 0 1px 4px rgba(26,33,40,.08);
  padding: 28px 24px;
}
.card__icon{ color: var(--verde); margin-bottom: 16px; }
.card__icon svg{ width: 30px; height: 30px; }
.card h3{ margin-bottom: 10px; }
.card p{ font-size: 15px; color: var(--pizarra); }

/* ---------- Método: rail de fases ---------- */
.rail{ display: grid; gap: 20px; }
.pasos{ display: grid; gap: 10px; padding: 4px 0 16px; counter-reset: paso; }
.pasos li{
  position: relative; padding-left: 30px; font-size: 14px; line-height: 1.5; color: var(--pizarra);
  counter-increment: paso;
}
.pasos li::before{
  content: counter(paso); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--hueso); color: var(--verde);
  font-family: var(--font-mo); font-size: 11px; display: grid; place-items: center;
}
.pasos b{ color: var(--tinta); font-weight: 500; }

.nota{
  margin-top: 24px; padding: 20px 24px;
  border: 1px dashed var(--gris); border-radius: var(--radius);
  font-size: 15px; color: var(--pizarra);
}
.nota b{ color: var(--verde); font-weight: 500; }

/* ---------- Rutas de entrada ---------- */
.ruta{
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.ruta--destacada{ border-color: var(--verde); box-shadow: 0 2px 12px rgba(26,104,88,.1); }
.ruta__tag{
  align-self: flex-start;
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde); background: rgba(26,104,88,.08); padding: 4px 10px; border-radius: 999px;
}
.ruta--destacada .ruta__tag{ background: var(--verde); color: var(--blanco); }
.ruta p{ font-size: 15px; color: var(--pizarra); flex: 1; }
.ruta__fase{ font-family: var(--font-mo); font-size: 13px; color: var(--lapis); letter-spacing: .04em; }

/* ---------- Diferenciador (tinta) ---------- */
.dif{ display: grid; grid-template-columns: .9fr 1.4fr; gap: 56px; align-items: start; }
.dif__cita{
  font-family: var(--font-pf); font-style: italic;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.3;
  color: var(--mint); margin: 0; text-wrap: nowrap; white-space: nowrap;
}
.dif__cita cite{
  display: block; margin-top: 18px; font-family: var(--font-mo); font-style: normal;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.dif__pitch{
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(174,182,188,.25);
  font-size: 15px; line-height: 1.6; color: var(--gris-lt);
}

/* ---------- Tablas ---------- */
.tabla-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
table.tabla caption{ text-align: left; font-size: 13px; color: var(--pizarra); padding-bottom: 12px; }
.on-dark table.tabla caption{ color: var(--gris); }
table.tabla th, table.tabla td{ text-align: left; padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--linea); }
.on-dark table.tabla th, .on-dark table.tabla td{ border-bottom-color: rgba(174,182,188,.2); }
table.tabla thead th{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra); font-weight: 400;
  border-bottom: 1px solid var(--gris);
}
.on-dark table.tabla thead th{ color: var(--gris); border-bottom-color: rgba(174,182,188,.4); }
table.tabla tbody th{ font-weight: 500; color: var(--tinta); width: 26%; }
.on-dark table.tabla tbody th{ color: var(--blanco); }
table.tabla .col-otros{ color: var(--pizarra); }
.on-dark table.tabla .col-otros{ color: var(--gris); }
table.tabla .col-deinsa{ color: var(--tinta); background: rgba(26,104,88,.06); }
.on-dark table.tabla .col-deinsa{ color: var(--blanco); background: rgba(62,133,117,.18); }
table.tabla thead .col-deinsa{ color: var(--verde); font-weight: 500; }
.on-dark table.tabla thead .col-deinsa{ color: var(--mint); }

/* ---------- Portafolio ---------- */
.stats{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  background: var(--verde); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 48px;
}
.stats__item{ padding: 24px; border-left: 1px solid rgba(255,255,255,.16); }
.stats__item:first-child{ border-left: none; }
.stats__n{
  font-family: var(--font-mo); font-size: 30px; font-weight: 500; line-height: 1;
  color: var(--blanco); display: block; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.stats__l{ font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.88); }

.cards-4{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }

/* ---------- FAQ ---------- */
.faq{ max-width: 740px; border-top: 1px solid var(--gris); }
.faq details{ border-bottom: 1px solid var(--gris); }
.faq summary{
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 44px 20px 0;
  font-size: 16px; font-weight: 500; color: var(--tinta);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--verde); line-height: 1;
}
.faq details[open] summary::after{ content: "\2013"; }
.faq summary:hover{ color: var(--verde); }
.faq details > div{ padding: 0 44px 20px 0; }
.faq details p{ font-size: 15px; color: var(--pizarra); }
.faq details p + p{ margin-top: 10px; }

/* ---------- Contacto ---------- */
.contacto{ display: grid; grid-template-columns: 1.4fr .8fr; gap: 48px; align-items: start; }
.form{ display: grid; gap: 20px; }
.campo{ display: grid; gap: 6px; }
.fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo label{ font-size: 14px; font-weight: 500; color: var(--tinta); }
.campo .hint{ font-size: 13px; color: var(--pizarra); }
input[type=text], input[type=email], input[type=tel], select, textarea{
  font-family: var(--font-dm); font-size: 16px; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--gris);
  border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; min-height: 46px;
}
select{
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--pizarra) 50%),linear-gradient(135deg,var(--pizarra) 50%,transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
textarea{ min-height: 116px; resize: vertical; }
input:hover, select:hover, textarea:hover{ border-color: var(--pizarra); }
.consent{ display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--pizarra); }
.consent input{ width: 18px; height: 18px; margin-top: 3px; accent-color: var(--verde); }
.hp{ position: absolute; left: -9999px; }

/* Confirmación en línea (sin redirección) */
.toast{
  display: none; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius);
  background: rgba(26,104,88,.07); border: 1px solid var(--verde-lt);
}
.toast.is-visible{ display: flex; }
.toast.is-error{ background: rgba(192,57,43,.06); border-color: #C0392B; }
.toast svg{ width: 22px; height: 22px; color: var(--verde); flex-shrink: 0; margin-top: 1px; }
.toast.is-error svg{ color: #C0392B; }
.toast strong{ display: block; color: var(--tinta); font-weight: 500; margin-bottom: 4px; }
.toast p{ font-size: 14px; color: var(--pizarra); }

.aside{ display: grid; gap: 20px; }
.aside__box{ background: var(--lapis); color: var(--blanco); border-radius: var(--radius); padding: 28px; }
.aside__k{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.aside__list{ display: grid; gap: 20px; }
.aside__v{ font-size: 16px; }
.aside__v a{ color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.aside__v a:hover{ color: var(--sky); }
.aside__slogan{
  font-family: var(--font-pf); font-style: italic; font-size: 18.7px; text-align: center;
  color: var(--blanco); margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.aside__nota{ padding: 24px; border: 1px solid var(--gris); border-radius: var(--radius); }
.aside__nota p{ font-size: 14px; color: var(--pizarra); }

/* ---------- Footer ---------- */
.footer{ background: var(--tinta); color: var(--gris); border-top: 1px solid var(--verde); padding: 64px 0 32px; }
.footer__top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr; gap: 40px; }
.footer svg.lockup{ height: 42px; width: auto; }
.footer__slogan{ font-family: var(--font-pf); font-style: italic; font-size: 17px; color: var(--hueso); margin-top: 20px; }
.footer__k{ font-family: var(--font-dm); font-size: 14px; font-weight: 500; color: var(--blanco); margin-bottom: 16px; }
.footer__list{ display: grid; gap: 10px; font-size: 14px; }
.footer a{ color: var(--gris); text-decoration: none; }
.footer a:hover{ color: var(--mint); }
/* ---------- Redes sociales en el pie ----------
   Son enlaces y nada mas. Los iconos son SVG del propio sitio: no se carga
   ningun guion, widget ni imagen de Instagram, Facebook, LinkedIn o TikTok,
   asi que entrar aqui no le dice a esas redes que estuviste. Esa es la
   diferencia entre enlazar un perfil e incrustarlo, y es deliberada.

   El area que se puede tocar mide 44 px aunque el dibujo mida 20: un icono
   de 20 px en un telefono se falla mas veces de las que se acierta. El
   margen negativo devuelve el primer icono a la linea del texto de arriba,
   que si no quedaria sangrado por ese acolchado invisible. */
.redes{ display: flex; flex-wrap: wrap; gap: 2px; margin: 14px 0 0 -12px; list-style: none; }
.redes__a{
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--gris); border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
}
.redes__a svg{ width: 20px; height: 20px; display: block; fill: currentColor; }
.redes__a:hover, .redes__a:focus-visible{ color: var(--mint); background: rgba(255,255,255,.08); }
.redes__a:focus-visible{ outline: 2px solid var(--mint); outline-offset: 2px; }

/* El 404, el gracias y el aviso no tienen columnas en el pie, solo la barra
   de abajo: ahi van los iconos. Los margenes negativos verticales impiden
   que una fila de 44 px estire la barra, que es de 13 px de texto. */
.redes--barra{ margin: -10px 0 -10px -12px; }

.footer__bar{
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(174,182,188,.2);
  display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 13px;
}

/* ---------- Método · fila de cinco fases con conector ----------
   La secuencia es la tesis de la marca («en el orden correcto»):
   los marcadores A–E se apoyan sobre el borde superior de cada
   tarjeta y un conector une los bordes a través del hueco, de modo
   que la línea superior completa se lee como una sola cronología. */
.servicios{
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--gap); margin: 40px 0 24px;
}
.svc{
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-top: 2px solid var(--verde-lt);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 32px 20px 20px;
}
/* Conector: cubre el hueco entre tarjetas a la altura del borde superior */
.svc::before{
  content: ""; position: absolute; top: -2px; left: 100%;
  width: var(--gap); height: 2px; background: var(--verde-lt);
}
.svc:last-child::before{ display: none; }
/* Marcador de fase, montado sobre el borde superior */
.svc__step{
  position: absolute; top: -20px; left: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--verde); color: var(--blanco);
  display: grid; place-items: center;
  font-family: var(--font-mo); font-size: 17px; font-weight: 500;
  box-shadow: 0 0 0 4px var(--blanco);
}
/* Icono de fase, también montado sobre el borde, en el extremo opuesto al marcador */
.svc__icon{
  position: absolute; top: -18px; right: 14px;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--blanco); border: 1px solid var(--linea); color: var(--verde);
  display: grid; place-items: center;
}
.svc__icon svg{ width: 18px; height: 18px; }
.svc__nombre{
  font-family: var(--font-pf); font-weight: 700; font-size: 19px; line-height: 1.2;
  color: var(--tinta);
}
.svc__tagline{
  font-family: var(--font-pf); font-style: italic; font-size: 15px; line-height: 1.4;
  color: var(--pizarra);
}
.svc__list{ display: grid; gap: 7px; margin-top: 2px; flex: 1; }
.svc__list li{
  position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--tinta);
}
.svc__list li::before{
  content: "\2192"; position: absolute; left: 0; top: 0;
  color: var(--verde-lt); font-weight: 500;
}
/* El diseño humanizado se anuncia en azul, igual que en Diseño y Auditoría */
.svc__list li.tono-lapis{
  margin: -3px 0 -3px -8px; padding: 3px 8px 3px 28px;
  background: rgba(30,75,122,.05); border: 1px dashed var(--lapis-lt);
  border-radius: 6px; color: var(--lapis);
}
.svc__list li.tono-lapis::before{ left: 8px; top: 3px; color: var(--lapis-lt); }
.js #metodo .servicios > .svc .svc__list li.tono-lapis::before{
  color: color-mix(in srgb, var(--lapis-lt) calc(var(--on) * 100%), var(--gris));
}
.svc__dur{
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linea);
  font-family: var(--font-mo); font-size: 12px; color: var(--lapis);
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Servicio independiente: fuera de la secuencia, bloque ancho */
.servicio-ind{
  display: grid; grid-template-columns: 56px minmax(0,1fr) minmax(0,1.1fr);
  gap: 24px; align-items: start;
  margin-bottom: 40px; padding: 28px;
  background: var(--hueso-sv); border: 1px dashed var(--lapis-lt); border-radius: var(--radius);
}
.servicio-ind__icon{
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: rgba(30,75,122,.08); color: var(--lapis);
  display: grid; place-items: center;
}
.servicio-ind__icon svg{ width: 24px; height: 24px; }
.servicio-ind__k{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lapis); margin-bottom: 8px;
}
.servicio-ind__body{ display: flex; flex-direction: column; gap: 8px; }
.servicio-ind__body .svc__nombre{ padding-right: 0; }
.servicio-ind__body .svc__dur{ border-top: none; padding-top: 0; margin-top: 4px; }
.servicio-ind__list li::before{ color: var(--lapis-lt); }

/* ---------- Iconos animados ----------
   Cada trazo lleva pathLength="1": el dash se normaliza y el mismo
   keyframe dibuja cualquier icono. Se dispara con .is-in (IntersectionObserver
   en site.js) y se desactiva por completo con prefers-reduced-motion. */
.ico path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico.is-in path{ animation: ico-draw 1.1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes ico-draw{ to{ stroke-dashoffset: 0; } }
.svc__icon, .servicio-ind__icon, .svcx__icon, .svc-hero__icon{ transition: transform .35s cubic-bezier(.22,1,.36,1), color .2s ease; }
.svc:hover .svc__icon, .servicio-ind:hover .servicio-ind__icon, .svcx__a:hover .svcx__icon{ transform: translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .ico path{ stroke-dashoffset: 0 !important; animation: none !important; }
  .svc__icon, .servicio-ind__icon, .svcx__icon, .svc-hero__icon{ transition: none; transform: none !important; }
}

/* Enlace al detalle desde cada tarjeta del método */
.svc__link{
  margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--verde);
  text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start;
}
.svc__link:hover{ color: var(--verde-dk); border-bottom-color: var(--verde); }
.nav__link.is-active{ color: var(--verde); border-bottom-color: var(--verde); }

/* ---------- Páginas de servicio ---------- */
.crumbs{ display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--pizarra); margin-bottom: 28px; }
.crumbs a{ color: var(--pizarra); text-decoration: none; }
.crumbs a:hover{ color: var(--verde); }
.crumbs span[aria-current]{ color: var(--tinta); }

.svc-hero{ padding: 48px 0 40px; }
.svc-hero__grid{ display: grid; grid-template-columns: minmax(0,1fr) 168px; gap: 32px; align-items: center; }
.svc-hero__h1{ color: var(--verde); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
/* Segunda línea del titular: baja sola, en cursiva y en tinta */
.svc-hero__h1-sub{ display: block; color: var(--tinta); font-weight: 400; }
/* Segunda línea larga: baja de tamaño para caber en un solo renglón */
.svc-hero__h1-sub--larga{ font-size: clamp(14px, 2.1vw, 26px); line-height: 1.3; }
.svc-hero__largo{ font-family: var(--font-pf); font-style: italic; font-size: 18px; color: var(--pizarra); margin: 8px 0 16px; }
.svc-hero .lede{ max-width: 58ch; }
/* Sin la línea del nombre largo, la bajada toma ese mismo aire */
.svc-hero__h1 + .lede{ margin-top: 24px; }
.svc-hero__icon{
  width: 168px; height: 168px; border-radius: var(--radius);
  background: var(--blanco); border: 1px solid var(--linea); color: var(--verde);
  display: grid; place-items: center;
}
.ico--xl{ width: 96px; height: 96px; }
.ico--lg{ width: 28px; height: 28px; }

.svc-meta{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 36px 0 0; padding: 0; border-top: 1px solid var(--linea);
}
/* Con dos datos, la franja se reparte en dos y no deja un hueco a la derecha */
.svc-meta:has(> div:nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0,1fr)); }
.svc-meta > div{ padding: 20px 24px 0 0; }
.svc-meta > div + div{ border-left: 1px solid var(--linea); padding-left: 24px; }
.svc-meta dt{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: 6px; }
.svc-meta dd{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--tinta); }

.prose{ max-width: 68ch; }
.prose .h2{ margin-bottom: 20px; }
.prose p{ font-size: 17px; line-height: 1.7; color: var(--tinta); }
.prose p + p{ margin-top: 16px; }

.proc{ counter-reset: paso; display: grid; max-width: 760px; }
.proc__i{
  counter-increment: paso;
  display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px;
  padding: 20px 0 22px; border-top: 1px solid var(--linea);
}
.proc__i::before{
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-mo); font-size: 14px; font-weight: 500; color: var(--verde);
  padding-top: 3px; grid-row: 1 / span 2;
}
.proc__i b{ display: block; font-family: var(--font-pf); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--tinta); margin-bottom: 6px; grid-column: 2; }
.proc__i span{ font-size: 15px; line-height: 1.55; color: var(--pizarra); grid-column: 2; }
.proc__i:last-child{ border-bottom: 1px solid var(--linea); }

.entreg{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }
.entreg__i{
  position: relative; padding: 20px 20px 20px 48px;
  background: var(--hueso-sv); border: 1px solid var(--linea); border-radius: var(--radius);
}
.entreg__i::before{
  content: ""; position: absolute; left: 20px; top: 26px;
  width: 14px; height: 8px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}
.entreg__i b{ display: block; font-weight: 500; font-size: 16px; color: var(--tinta); margin-bottom: 4px; }
.entreg__i span{ font-size: 14px; line-height: 1.5; color: var(--pizarra); }
.opcional{ margin-top: 24px; padding: 16px 20px; border-left: 2px solid var(--lapis-lt); font-size: 15px; color: var(--pizarra); max-width: 70ch; }
.opcional b{ color: var(--lapis); }
/* Tres efectos del diseño humanizado, al pie del texto de entrada */
.impacto{ margin-top: 32px; padding: 20px 0 0; border-top: 1px solid var(--linea); }
.impacto__k{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: 14px; }
.impacto ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 24px; }
.impacto b{ display: block; color: var(--tinta); font-weight: 500; margin-bottom: 4px; }
.impacto span{ font-size: 14px; line-height: 1.5; color: var(--pizarra); }
/* Cuando el bloque abre la sección, el texto que sigue arranca con aire */
.impacto + p{ margin-top: 36px; }

.sig{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; }
.sig__k{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); margin-bottom: 10px; }
.sig p{ color: var(--gris-lt); font-size: 16px; line-height: 1.6; max-width: 48ch; }
.sig .link-cta{ display: inline-block; margin-top: 14px; }

.cta-band{ padding: 56px 0; }
.cta-band__inner{ display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band .h2{ margin-bottom: 8px; }
.cta-band p{ color: rgba(255,255,255,.82); max-width: 52ch; }

.svc-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 40px; padding-bottom: 56px; }
.svc-nav__a{
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  border: 1px solid var(--linea); border-radius: var(--radius); text-decoration: none; color: var(--tinta);
}
.svc-nav__a span{ font-family: var(--font-mo); font-size: 12px; color: var(--pizarra); }
.svc-nav__a b{ font-family: var(--font-pf); font-size: 17px; }
.svc-nav__a--next{ text-align: right; }
.svc-nav__a:hover{ border-color: var(--verde); color: var(--verde); }

/* Índice de servicios */
.svcx-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.svcx__a{
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius);
  text-decoration: none; color: var(--tinta); transition: border-color .2s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.svcx__a:hover{ border-color: var(--verde); transform: translateY(-2px); }
.svcx__icon{ width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(26,104,88,.08); color: var(--verde); display: grid; place-items: center; margin-bottom: 6px; }
.svcx__k{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.svcx__h{ font-family: var(--font-pf); font-weight: 700; font-size: 21px; line-height: 1.2; }
.svcx__t{ font-size: 15px; line-height: 1.5; color: var(--pizarra); flex: 1; }
/* Ficha de servicio: el paso que se destaca, el flujo en prosa y el alcance */
.svcx__paso{ display: block; position: relative; padding-left: 18px; }
.svcx__paso::before{ content: "\2192"; position: absolute; left: 0; top: 0; color: var(--verde-lt); font-weight: 500; }
.svcx__paso--lapis{
  margin-left: -8px; padding: 4px 8px 4px 26px;
  background: rgba(30,75,122,.05); border: 1px dashed var(--lapis-lt);
  border-radius: 6px; color: var(--lapis);
}
.svcx__paso--lapis::before{ left: 8px; top: 4px; color: var(--lapis-lt); }
.svcx__flujo{ display: block; margin-top: 12px; }
.svcx__alcance{ display: block; margin-top: 12px; font-size: 14px; color: var(--gris-txt); }
.svcx__d{ font-family: var(--font-mo); font-size: 12px; color: var(--lapis); padding-top: 12px; border-top: 1px solid var(--linea); }

/* ---------- Auditoría: el servicio independiente se distingue en lazuli ----------
   Mismo criterio que en el método de la portada: la fase que no pertenece a la
   secuencia A–E cambia de familia de color. Se redefinen las variables dentro
   del bloque, así todo lo que ya pinta en verde —titulares, iconos, viñetas,
   enlaces y bandas— queda en azul sin duplicar reglas. */
.tono-lapis, .svcx--lapis{
  --verde: var(--lapis); --verde-dk: #14385C; --verde-lt: var(--lapis-lt); --mint: var(--sky);
}
.svcx--lapis .svcx__icon{ background: rgba(30,75,122,.08); }
/* Cuando la marca lazuli va sobre un bloque suelto —un paso, un entregable, el
   bloque de impacto— se encuadra como la auditoría en el método: velo azul y
   borde punteado en lazuli. El cambio de familia de color por sí solo no se
   distingue del verde a este tamaño de texto. */
.impacto.tono-lapis, .proc__i.tono-lapis, .entreg__i.tono-lapis{
  background: rgba(30,75,122,.05);
  border: 1px dashed var(--lapis-lt);
  border-radius: var(--radius);
}
.impacto.tono-lapis{ padding: 20px 22px; }
.proc__i.tono-lapis{ padding: 18px 20px 20px; }
.entreg__i.tono-lapis{ border-style: dashed; }
/* Los títulos de los bloques marcados también van en azul, un tono más claro
   que el del encuadre para que se distingan de la tinta del cuerpo. */
.proc__i.tono-lapis b, .entreg__i.tono-lapis b, .impacto.tono-lapis .impacto__k, .impacto.tono-lapis b{ color: var(--lapis-lt); }
/* El rótulo del bloque marcado adopta el formato de los títulos del proceso:
   Playfair en negritas, sin versalitas ni interletraje, en el mismo azul. */
.impacto.tono-lapis .impacto__k{
  font-family: var(--font-pf); font-weight: 700; font-size: 19px;
  line-height: 1.25; letter-spacing: 0; text-transform: none;
}

/* ---------- Menú «Servicios» desplegable ----------
   Escritorio: aparece al pasar el cursor o al enfocar con teclado
   (focus-within), sin JavaScript. Móvil: dentro del overlay, se
   expande con el botón de flecha. */
.nav__item{ position: relative; display: flex; align-items: center; gap: 2px; }
.nav__sub-toggle{
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  background: transparent; border: 0; color: var(--pizarra); cursor: pointer; padding: 0;
  transition: transform .2s ease, color .15s ease;
}
.nav__sub-toggle svg{ width: 14px; height: 14px; }
.nav__item:hover .nav__sub-toggle, .nav__item:focus-within .nav__sub-toggle, .nav__item.is-open .nav__sub-toggle{ color: var(--verde); transform: rotate(180deg); }
.nav__sub{
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 120;
  width: 400px; padding: 8px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(26,33,40,.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Puente invisible para que el cursor no «caiga» entre el enlace y el panel */
.nav__sub::before{ content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* El último desplegable se alinea a la derecha para no salirse de la pantalla */
.nav__item--der .nav__sub{ left: auto; right: -12px; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub, .nav__item.is-open .nav__sub{ opacity: 1; visibility: visible; transform: none; }
/* Criterio: ningún texto sale del cuadro que lo contiene ni se parte a media
   palabra: el salto ocurre solo en los espacios (overflow-wrap: normal) y el
   contenedor se dimensiona para el texto más largo. Los desplegables
   permiten el salto de línea y su ancho se fija para que el nombre más largo
   quepa en dos líneas como máximo. */
.nav__sub li a{
  display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: baseline; gap: 10px; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 0;
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; color: var(--tinta); text-decoration: none;
}
.nav__sub li a span{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.nav__sub li a:hover, .nav__sub li a:focus-visible{ background: var(--hueso-sv); color: var(--verde); }
/* En el menú, la auditoría se distingue en lazuli: es el servicio independiente,
   con el mismo velo azul que lo separa de las cinco fases en el método. */
.nav__sub li a[href*="auditoria-de-infraestructura-sanitaria"]{
  background: rgba(30,75,122,.05);
  border: 1px dashed var(--lapis-lt);
  color: var(--lapis);
}
.nav__sub li a[href*="auditoria-de-infraestructura-sanitaria"] span{ color: var(--lapis); }
.nav__sub li a[href*="auditoria-de-infraestructura-sanitaria"]:hover,
.nav__sub li a[href*="auditoria-de-infraestructura-sanitaria"]:focus-visible{
  background: rgba(30,75,122,.14);
  color: var(--lapis);
}
.nav__sub-all{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea); }
.nav__sub li.nav__sub-all a, #subPortafolio li.nav__sub-all a{ display: block; grid-template-columns: none; font-size: 14px; color: var(--verde); white-space: normal; }
/* Submenú del portafolio: la etiqueta es un número, la columna es más angosta y el panel más ancho */
#subPortafolio{ width: 420px; }
.nav__sub-all--first{ margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
#subPortafolio li a{ grid-template-columns: 32px minmax(0,1fr); white-space: normal; }
#subPortafolio li a span{ text-align: right; }
/* ---------- Sistema de movimiento ----------
   Una sola curva (ease-out exponencial), duraciones cortas y entradas
   escalonadas por grupo. Las clases .rv / .is-in las asigna site.js: sin
   JavaScript nada queda oculto. prefers-reduced-motion lo apaga todo. */
:root{ --ease-out: cubic-bezier(.22,1,.36,1); --rv-dur: .7s; }

/* Revelado al entrar en pantalla: se eleva 14px y aparece */
.rv{ opacity: 0; transform: translateY(14px); transition: opacity var(--rv-dur) var(--ease-out), transform var(--rv-dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.rv.is-in{ opacity: 1; transform: none; }
.rv.is-in.rv--done{ will-change: auto; }

/* Hero: entrada en cascada al cargar (solo en la portada) */
.js .hero__inner > *{ opacity: 0; transform: translateY(16px); animation: hero-in .8s var(--ease-out) forwards; }
.hero__inner > :nth-child(1){ animation-delay: .05s; }
.hero__inner > :nth-child(2){ animation-delay: .15s; }
.hero__inner > :nth-child(3){ animation-delay: .28s; }
.hero__inner > :nth-child(4){ animation-delay: .40s; }
.hero__inner > :nth-child(5){ animation-delay: .50s; }
.hero__inner > :nth-child(6){ animation-delay: .60s; }
@keyframes hero-in{ to{ opacity: 1; transform: none; } }

/* ---------- Hero en telefonos bajos o muy estrechos ----------
   Con el cierre y la microlinea entre las fases y los botones, el boton
   principal se sale de la primera vista: medido, 375x667 lo deja a 11 px del
   borde —que la barra de Safari se come— y 320x568 lo manda 200 px mas abajo.

   Aqui esas dos frases bajan debajo del boton. No se toca ningun texto ni el
   hero de escritorio: cambia el orden visual, y solo donde la altura obliga.

   Van detras de «Sin costo · En linea» y no entre ella y el boton, porque
   esa condicion se lee pegada al boton y separarlos no se entenderia.

   Son parrafos, no enlaces, asi que el orden de tabulacion no cambia: entre
   las fases y los botones no queda nada que reciba el foco. Si algun dia se
   pone ahi un enlace, este bloque hay que repensarlo.

   El reparto de la cascada se rehace por clase para que entre en el orden en
   que se ve y no en el del documento; sin esto las frases de abajo
   apareceran antes que el boton que tienen encima. Por eso el bloque vive
   aqui y no junto a .fases: ahi no podria pisar los nth-child de arriba. */
@media (max-width: 480px) and (max-height: 700px), (max-width: 340px){
  .hero__inner{ display: flex; flex-direction: column; }
  .hero__inner > .eyebrow{ order: 1; animation-delay: .05s; }
  .hero__inner > .h1{ order: 2; animation-delay: .15s; }
  .hero__inner > .fases{ order: 3; animation-delay: .28s; margin-bottom: 0; }
  .hero__inner > .hero__actions{ order: 4; animation-delay: .40s; }
  .hero__inner > .cond--hero{ order: 5; animation-delay: .50s; }
  .hero__inner > .fases__cierre{ order: 6; animation-delay: .60s; margin-top: 20px; }
  .hero__inner > .fases__micro{ order: 7; animation-delay: .68s; margin-bottom: 0; }
  .hero__inner > .hero__stats{ order: 8; }
}

/* En las pantallas mas bajas, bajar las dos frases no alcanza: medido, en
   320x568 el boton se quedaba 68 px por debajo del borde. La culpa es del
   titulo, que a 34 px cae en cuatro renglones y se come 150 px el solo;
   34 px en una pantalla de 320 era grande de todos modos. Con 25 px entra
   en dos renglones.

   El corte va por ALTO y no por ancho, porque el problema es vertical: asi
   entra 360x640, el Android chico mas comun, donde el titulo tambien se
   partia en tres, y se queda fuera 375x667, que ya cabia entero y no
   necesita que se le toque nada. El corte por ancho cubre aparte los 320
   altos, donde el titulo se partiria igual.

   No cambia ningun texto ni el escritorio: ninguna ventana de escritorio
   mide 480 px de ancho. */
@media (max-width: 480px) and (max-height: 660px), (max-width: 340px){
  .hero{ padding: 40px 0; }
  .hero .h1{ font-size: 25px; line-height: 1.16; margin-bottom: 14px; }
  .hero__actions{ margin-top: 24px; }
}
/* Las barras diagonales entran deslizando y luego respiran muy despacio */
.hero__motif i{ animation: motif-in 1.2s var(--ease-out) both, motif-drift 18s ease-in-out 1.2s infinite alternate; }
.hero__motif i:nth-child(2){ animation-delay: .12s, 1.4s; }
.hero__motif i:nth-child(3){ animation-delay: .24s, 1.6s; }
@keyframes motif-in{ from{ opacity: 0; transform: rotate(24deg) translateY(-80px); } to{ transform: rotate(24deg) translateY(0); } }
@keyframes motif-drift{ from{ transform: rotate(24deg) translateY(0); } to{ transform: rotate(24deg) translateY(28px); } }

/* ---------- Hero: ciclo de fondo por servicio ----------
   Debajo del scrim y del texto (z-index 0): cada diapositiva es una imagen de
   referencia a pantalla completa, atenuada y con un acercamiento lento, más el
   nombre y el icono del servicio en grande y traslúcidos, a la derecha (escritorio)
   o abajo a la derecha (móvil), como marca de agua. La última diapositiva es el
   lockup DEINSA. site.js alterna .is-on cada 4.5 s con fundido cruzado. */
.hero__cycle{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cyc{ position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.cyc.is-on{ opacity: 1; }
.cyc__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .5; transform: scale(1.04); }
.cyc.is-on .cyc__img{ animation: cyc-zoom 7s linear forwards; }
@keyframes cyc-zoom{ from{ transform: scale(1.04); } to{ transform: scale(1.12); } }
.cyc__tag{
  position: absolute; right: var(--pad-h); top: 50%; transform: translateY(-50%);
  width: min(43vw, 620px); display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  color: var(--hueso); opacity: 0; transition: opacity 1s ease .3s, transform 1.2s var(--ease-out) .3s;
}
.cyc.is-on .cyc__tag{ opacity: 1; }
.cyc__ico{ width: clamp(120px, 16vw, 220px); height: auto; opacity: .5; margin-bottom: 8px; stroke-width: 1.3; }
.cyc__k{ font-family: var(--font-mo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); opacity: .85; }
.cyc__n{ font-family: var(--font-pf); font-weight: 700; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -.01em; opacity: .48; }
.cyc--brand{ background: linear-gradient(135deg, #234A42 0%, #1A2128 60%, #16303F 100%); }
.cyc__tag--brand{ opacity: 0; }
.cyc--brand.is-on .cyc__tag--brand{ opacity: 1; }
.cyc__lock{ width: 100%; height: auto; display: block; }
.cyc__lock--v{ display: none; }
/* Secuencia del cierre (tiempos desde que entra la diapositiva del lockup; el destello
   ocupa los primeros ~1.5 s): la guía A→E se traza y cada paso se enciende en orden; los
   módulos del isotipo suben por la diagonal al ritmo de los pasos (A·B → 1, C·D → 2, E → 3);
   la guía cede su lugar al wordmark, que entra con un barrido; el descriptor sube y un
   subrayado menta remata el lockup. Los estados finales se conservan mientras la
   diapositiva sale (.is-out). */
.lk__rail{ fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.lk__step circle{ fill: var(--mint); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.lk__step text{ fill: var(--mint); opacity: 0; }
.lk__m{ opacity: 0; transform: translateY(46px); }
.lk__word{ opacity: 0; clip-path: inset(-10% 100% -10% 0); }
.lk__under{ fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.lk__desc{ opacity: 0; transform: translateY(6px); }
.cyc--brand.is-on .lk__rail, .cyc--brand.is-out .lk__rail{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: lk-rail 1.2s var(--ease-out) 1s forwards, lk-fade .75s ease 5.05s forwards; }
.cyc--brand.is-on .lk__step circle, .cyc--brand.is-out .lk__step circle{ animation: lk-pop .68s cubic-bezier(.3,1.4,.5,1) forwards, lk-fade .75s ease 5.05s forwards; }
.cyc--brand.is-on .lk__step text, .cyc--brand.is-out .lk__step text{ animation: lk-in .6s ease forwards, lk-fade .75s ease 5.05s forwards; }
.cyc--brand.is-on .lk__step--1 circle, .cyc--brand.is-on .lk__step--1 text, .cyc--brand.is-out .lk__step--1 circle, .cyc--brand.is-out .lk__step--1 text{ animation-delay: 1.45s, 5.05s; }
.cyc--brand.is-on .lk__step--2 circle, .cyc--brand.is-on .lk__step--2 text, .cyc--brand.is-out .lk__step--2 circle, .cyc--brand.is-out .lk__step--2 text{ animation-delay: 1.75s, 5.05s; }
.cyc--brand.is-on .lk__step--3 circle, .cyc--brand.is-on .lk__step--3 text, .cyc--brand.is-out .lk__step--3 circle, .cyc--brand.is-out .lk__step--3 text{ animation-delay: 2.5s, 5.05s; }
.cyc--brand.is-on .lk__step--4 circle, .cyc--brand.is-on .lk__step--4 text, .cyc--brand.is-out .lk__step--4 circle, .cyc--brand.is-out .lk__step--4 text{ animation-delay: 2.8s, 5.05s; }
.cyc--brand.is-on .lk__step--5 circle, .cyc--brand.is-on .lk__step--5 text, .cyc--brand.is-out .lk__step--5 circle, .cyc--brand.is-out .lk__step--5 text{ animation-delay: 3.55s, 5.05s; }
.cyc--brand.is-on .lk__m, .cyc--brand.is-out .lk__m{ animation: lk-rise 1.05s var(--ease-out) forwards; }
.cyc--brand.is-on .lk__m--1, .cyc--brand.is-out .lk__m--1{ animation-delay: 1.45s; }
.cyc--brand.is-on .lk__m--2, .cyc--brand.is-out .lk__m--2{ animation-delay: 2.5s; }
.cyc--brand.is-on .lk__m--3, .cyc--brand.is-out .lk__m--3{ animation-delay: 3.55s; }
.cyc--brand.is-on .lk__word, .cyc--brand.is-out .lk__word{ animation: lk-wipe 1.5s var(--ease-out) 5.5s forwards; }
.cyc--brand.is-on .lk__desc, .cyc--brand.is-out .lk__desc{ animation: lk-up 1.05s var(--ease-out) 6.4s forwards; }
.cyc--brand.is-on .lk__under, .cyc--brand.is-out .lk__under{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: lk-rail 1.35s var(--ease-out) 6.85s forwards, lk-fade 1.2s ease 8.8s forwards; }
@keyframes lk-rail{ from{ opacity: 1; stroke-dashoffset: 1; } to{ opacity: 1; stroke-dashoffset: 0; } }
@keyframes lk-pop{ from{ transform: scale(0); } to{ transform: scale(1); } }
@keyframes lk-in{ to{ opacity: 1; } }
@keyframes lk-fade{ to{ opacity: 0; } }
@keyframes lk-rise{ from{ opacity: 0; transform: translateY(46px); } 40%{ opacity: 1; } to{ opacity: 1; transform: translateY(0); } }
@keyframes lk-wipe{ from{ opacity: 1; clip-path: inset(-10% 100% -10% 0); } to{ opacity: 1; clip-path: inset(-10% 0 -10% 0); } }
@keyframes lk-up{ to{ opacity: 1; transform: translateY(0); } }
/* Remate «México → MX»: ya presentado el lockup, a la derecha de DEINSA se traza una línea
   blanca de la que surge «México»; la línea se retira y la palabra se contrae a «MX», a la
   mitad del tamaño de DEINSA, que queda como cierre. Tiempos desde que entra la diapositiva. */
.cyc__lock{ overflow: visible; }
.lk__bar{ fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.lk__mexico{ fill: var(--hueso); opacity: 0; clip-path: inset(-12% 100% -12% 0); transform-box: view-box; transform-origin: 452px 84px; }
.lk__mx{ fill: var(--hueso); opacity: 0; transform-box: view-box; transform-origin: 452px 84px; }
.cyc__lock--v .lk__mexico{ transform-origin: 393px 192px; }
.cyc__lock--v .lk__mx{ transform-origin: 393px 192px; }
.cyc--brand.is-on .lk__bar, .cyc--brand.is-out .lk__bar{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: lk-rail .6s var(--ease-out) 8.5s forwards, lk-fade .45s ease 10.6s forwards; }
.cyc--brand.is-on .lk__mexico, .cyc--brand.is-out .lk__mexico{ animation: lk-mx-wipe 1.05s var(--ease-out) 8.95s forwards, lk-mx-shrink .75s var(--ease-out) 11.2s forwards; }
.cyc--brand.is-on .lk__mx, .cyc--brand.is-out .lk__mx{ animation: lk-mx-in .68s var(--ease-out) 11.43s forwards; }
@keyframes lk-mx-wipe{ from{ opacity: 1; clip-path: inset(-12% 100% -12% 0); } to{ opacity: 1; clip-path: inset(-12% -2% -12% 0); } }
@keyframes lk-mx-shrink{ from{ opacity: 1; transform: scale(1); } to{ opacity: 0; transform: scale(.5); } }
@keyframes lk-mx-in{ from{ opacity: 0; transform: scale(1.35); } to{ opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .lk__bar, .lk__mexico{ display: none; }
  .lk__mx{ opacity: 1; transform: none; animation: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .lk__rail, .lk__step, .lk__under{ display: none; }
  .lk__m{ opacity: 1; transform: none; animation: none !important; }
  .lk__word{ opacity: 1; clip-path: none; animation: none !important; }
  .lk__desc{ opacity: 1; transform: none; animation: none !important; }
}
/* Carrusel: el sello entra desde la derecha y sale hacia la izquierda */
.cyc:not(.is-on) .cyc__tag{ transform: translate(28px, -50%); }
.cyc.is-out .cyc__tag{ transform: translate(-28px, -50%); transition-delay: 0s, 0s; }
/* Los iconos del carrusel repiten el trazo y el gesto de su servicio cada vez que entra su diapositiva
   (site.js reactiva .is-in); mismos tiempos que las tarjetas del método. */
.cyc__tag[data-ico="b"] .ico{ transform-origin: 25% 80%; }
.cyc__tag[data-ico="b"] .ico.is-in{ animation: pen-tilt 1s var(--ease-out) 1.1s 1; }
.cyc__tag[data-ico="d"] .ico.is-in{ animation: node-orbit 6s linear 1.1s infinite; }
.cyc__tag[data-ico="x"] .ico.is-in .beat{ animation: ico-draw 1.1s cubic-bezier(.22,1,.36,1) forwards, ico-pulse 2.2s linear 1.4s infinite; }
/* Destello de luz entre Auditoría y el lockup: nace en la zona del sello (derecha) y se apaga
   mientras el lockup aparece poco a poco; el texto, a la izquierda, solo recibe un brillo suave. */
.hero__flash{ position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 75% at 74% 50%, #fff 0%, rgba(255,255,255,.75) 28%, rgba(238,237,233,.25) 58%, rgba(238,237,233,0) 80%); }
.hero__flash.is-flash{ animation: cyc-flash 2.4s ease-out forwards; }
@keyframes cyc-flash{ 0%{ opacity: 0; } 28%{ opacity: .95; } 100%{ opacity: 0; } }
.cyc--brand{ transition-duration: 2.2s; }
.cyc--brand .cyc__tag--brand{ transition: opacity .8s ease .5s, transform 1s var(--ease-out) .5s, width 1s var(--ease-out) .5s; transform-origin: right center; }
/* Dos columnas en el hero (≥1200 px): el texto ocupa la mitad izquierda del ancho útil y el
   sello del servicio la columna derecha; ninguno invade al otro. */
@media (min-width: 1200px){ .hero__inner{ max-width: min(760px, 50%); } }
/* El lockup crece por anchura, anclado a su borde derecho, hasta el mayor tamaño que cabe en la
   columna derecha sin tocar el texto (tope 930 px = 1.5× su base); entra ya creciendo
   (0.5–1.5 s) y conserva ese tamaño hasta que la diapositiva se desvanece. */
.cyc--brand.is-on .cyc__tag--brand, .cyc--brand.is-out .cyc__tag--brand{ width: max(min(43vw, 620px), min(930px, calc(50vw - 64px))); }
@media (max-width: 1199px){ .cyc--brand.is-on .cyc__tag--brand, .cyc--brand.is-out .cyc__tag--brand{ width: 260px; } }
@media (max-width: 980px){ .cyc--brand.is-on .cyc__tag--brand, .cyc--brand.is-out .cyc__tag--brand{ width: 78%; } }
@media (prefers-reduced-motion: reduce){ .cyc--brand .cyc__tag--brand{ transition: none; } }
@media (max-width: 1199px){
  .cyc__tag{ width: min(34vw, 300px); }
  .cyc__lock{ display: none; } .cyc__lock--v{ display: block; }
  .cyc--brand.is-on .cyc__tag--brand{ opacity: .85; }
}
@media (max-width: 980px){
  .cyc__img{ opacity: .4; }
  .cyc__tag{ top: auto; bottom: 28px; transform: none; width: 60%; }
  .cyc:not(.is-on) .cyc__tag{ transform: translate(28px, 0); }
  .cyc.is-out .cyc__tag{ transform: translate(-28px, 0); }
  .hero__flash{ background: radial-gradient(ellipse 80% 45% at 50% 82%, #fff 0%, rgba(255,255,255,.75) 28%, rgba(238,237,233,.25) 58%, rgba(238,237,233,0) 80%); }

  .cyc__ico{ width: clamp(96px, 22vw, 140px); }
  .cyc__n{ font-size: clamp(34px, 9vw, 56px); opacity: .34; }
  .cyc__ico{ opacity: .36; }
  .cyc--brand.is-on .cyc__tag--brand{ opacity: .6; }
}
@media (prefers-reduced-motion: reduce){
  .cyc{ transition: none; }
  .cyc.is-on .cyc__img{ animation: none; }
  .cyc__tag{ transition: none; }
  .hero__flash.is-flash{ animation: none; }
}

/* Método: el conector y los marcadores se encienden en secuencia A→E */
.js .servicios .svc::before{ transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + 260ms); }
.servicios.is-in .svc::before{ transform: scaleX(1); }
.js .svc__step{ transform: scale(.6); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s ease; transition-delay: calc(var(--i, 0) * 140ms + 120ms); }
.servicios.is-in .svc__step{ transform: none; opacity: 1; }
@media (max-width: 720px){
  .js .servicios .svc::before{ transform: scaleY(0); transform-origin: top center; }
  .servicios.is-in .svc::before{ transform: scaleY(1); }
}

/* Tarjetas: elevación suave al pasar el cursor */
.card, .ruta, .esp, .credencial, .entreg__i{ transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s ease; }
.card:hover, .ruta:hover, .esp:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,33,40,.08); }

/* Iconos de las tarjetas de «El reto»: mismo trazo dibujado */
.card:hover .card__icon svg{ transform: translateY(-2px) scale(1.06); }
.card__icon svg{ transition: transform .35s var(--ease-out); }

/* Tabla comparativa: las filas entran una por una */
.js .tabla tbody tr{ opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.tabla.is-in tbody tr{ opacity: 1; transform: none; }

/* Cifras: el número cuenta hasta su valor (site.js) y la etiqueta sube */
.stats__n{ font-variant-numeric: tabular-nums; }

/* FAQ: el contenido del desplegable aparece con un leve descenso */
details > :not(summary){ animation: faq-in .35s var(--ease-out); }
@keyframes faq-in{ from{ opacity: 0; transform: translateY(-4px); } }
.faq summary::after, .faq summary svg{ transition: transform .3s var(--ease-out); }

/* Botones y enlaces: respuesta táctil breve */
.btn{ transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s var(--ease-out); }
.btn:active{ transform: translateY(1px); }
.link-cta{ transition: color .15s ease, border-color .15s ease; }

/* WhatsApp flotante: entra tras la carga */
.wa-float{ animation: wa-in .6s var(--ease-out) 1s both; }
@keyframes wa-in{ from{ opacity: 0; transform: translateY(12px) scale(.94); } }

/* Formulario: foco con transición */
input, select, textarea{ transition: border-color .2s ease, box-shadow .2s ease; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity: 1; transform: none; transition: none; }
  .hero__inner > *{ opacity: 1; transform: none; animation: none; }
  .hero__motif i{ animation: none; }
  .servicios .svc::before, .svc__step{ transform: none; opacity: 1; transition: none; }
  .tabla tbody tr{ opacity: 1; transform: none; transition: none; }
  .card:hover, .ruta:hover, .esp:hover{ transform: none; }
  details > :not(summary){ animation: none; }
  .wa-float{ animation: none; }
}

/* ---------- Gesto propio de cada servicio ----------
   Un mismo gesto por icono en todas sus apariciones (tarjeta del método,
   índice de servicios y cabecera de su página), disparado dos veces: al
   entrar en pantalla, justo después del trazo, y al pasar el cursor.
   Planeación: el mapa se desdobla · Diseño: el lápiz se inclina para escribir
   Gestoría: el sello oficial cae y se asienta · Comisionamiento: la hoja se palomea renglón por renglón
   Coordinación: el nodo gira de forma continua
   Auditoría: la lupa recorre. Cada gesto tiene un alias «-h» idéntico para
   que el navegador lo reinicie al pasar el cursor. */
@keyframes pen-tilt{   0%,100%{ transform: rotate(0); } 35%{ transform: rotate(-22deg) translate(-1px,1px); } 65%{ transform: rotate(-16deg) translate(1px,0); } }
@keyframes pen-tilt-h{ 0%,100%{ transform: rotate(0); } 35%{ transform: rotate(-22deg) translate(-1px,1px); } 65%{ transform: rotate(-16deg) translate(1px,0); } }
@keyframes node-orbit{   from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
@keyframes ico-pulse{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: -1; } }
/* Comisionamiento · hoja de verificación: tras el trazo de la hoja, la secuencia de palomeo
   renglón por renglón (aparece el renglón, se marca su paloma con rebote; luego el siguiente).
   Mismos tiempos en tarjeta, índice y carrusel; la cabecera de la página espera .45 s más. */
@keyframes ico-check{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
.ico--list.is-in .ln{ animation: ico-draw .35s var(--ease-out) forwards; }
.ico--list.is-in .ck{ animation: ico-check .45s cubic-bezier(.3,1.4,.5,1) forwards; }
.ico--list.is-in .l1{ animation-delay: 1.15s; } .ico--list.is-in .c1{ animation-delay: 1.4s; }
.ico--list.is-in .l2{ animation-delay: 1.85s; } .ico--list.is-in .c2{ animation-delay: 2.1s; }
.ico--list.is-in .l3{ animation-delay: 2.55s; } .ico--list.is-in .c3{ animation-delay: 2.8s; }
.svc-hero__icon .ico--list.is-in .l1{ animation-delay: 1.6s; }  .svc-hero__icon .ico--list.is-in .c1{ animation-delay: 1.85s; }
.svc-hero__icon .ico--list.is-in .l2{ animation-delay: 2.3s; }  .svc-hero__icon .ico--list.is-in .c2{ animation-delay: 2.55s; }
.svc-hero__icon .ico--list.is-in .l3{ animation-delay: 3s; }    .svc-hero__icon .ico--list.is-in .c3{ animation-delay: 3.25s; }
/* Al pasar el cursor se repite la secuencia (alias ico-redraw para reiniciar) */
#fase-e:hover .ico--list.is-in .ln, .svcx__a[data-ico="e"]:hover .ico--list.is-in .ln, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .ln{ animation: ico-redraw .35s var(--ease-out) forwards; }
#fase-e:hover .ico--list.is-in .ck, .svcx__a[data-ico="e"]:hover .ico--list.is-in .ck, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .ck{ animation: ico-redraw .45s cubic-bezier(.3,1.4,.5,1) forwards; }
#fase-e:hover .ico--list.is-in .l1, .svcx__a[data-ico="e"]:hover .ico--list.is-in .l1, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .l1{ animation-delay: .05s; }
#fase-e:hover .ico--list.is-in .c1, .svcx__a[data-ico="e"]:hover .ico--list.is-in .c1, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .c1{ animation-delay: .3s; }
#fase-e:hover .ico--list.is-in .l2, .svcx__a[data-ico="e"]:hover .ico--list.is-in .l2, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .l2{ animation-delay: .75s; }
#fase-e:hover .ico--list.is-in .c2, .svcx__a[data-ico="e"]:hover .ico--list.is-in .c2, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .c2{ animation-delay: 1s; }
#fase-e:hover .ico--list.is-in .l3, .svcx__a[data-ico="e"]:hover .ico--list.is-in .l3, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .l3{ animation-delay: 1.45s; }
#fase-e:hover .ico--list.is-in .c3, .svcx__a[data-ico="e"]:hover .ico--list.is-in .c3, .svc-hero__icon[data-ico="e"]:hover .ico--list.is-in .c3{ animation-delay: 1.7s; }
@media (prefers-reduced-motion: reduce){ .ico--list .ln, .ico--list .ck{ animation: none !important; stroke-dashoffset: 0 !important; } }
/* Auditoría: el pulso recorre el trazo de forma continua (2.2 s, lineal) una vez dibujado 
   el edificio; el trazo del edificio se dibuja como los demás. */
.svc .ico, .servicio-ind .ico, .svcx__icon .ico, .svc-hero__icon .ico{ transform-origin: center; }
/* El lápiz gira sobre su punta (abajo a la izquierda) */
#fase-b .ico, .svcx__a[data-ico="b"] .ico, .svc-hero__icon[data-ico="b"] .ico{ transform-origin: 25% 80%; }

/* Al entrar: tarjeta e índice tras el trazo (1.1 s); cabecera tras caja y trazo (1.6 s) */
#fase-b .ico.is-in, .svcx__a[data-ico="b"] .ico.is-in{ animation: pen-tilt 1s var(--ease-out) 1.1s 1; }
#fase-d .ico.is-in, .svcx__a[data-ico="d"] .ico.is-in{ animation: node-orbit 6s linear 1.1s infinite; }
#auditoria .ico.is-in .beat, .svcx__a[data-ico="x"] .ico.is-in .beat{ animation: ico-draw 1.1s cubic-bezier(.22,1,.36,1) forwards, ico-pulse 2.2s linear 1.4s infinite; }
.svc-hero__icon[data-ico="b"] .ico.is-in{ animation: pen-tilt 1.1s var(--ease-out) 1.6s 1; }
.svc-hero__icon[data-ico="d"] .ico.is-in{ animation: node-orbit 6s linear 1.6s infinite; }
.svc-hero__icon[data-ico="x"] .ico.is-in .beat{ animation: ico-draw 1.1s cubic-bezier(.22,1,.36,1) .45s forwards, ico-pulse 2.2s linear 1.9s infinite; }
/* Comisionamiento: los interruptores se trazan en «apagado» y se activan uno tras otro, tras el trazo */

/* Al pasar el cursor: mismo gesto, alias «-h» */
#fase-b:hover .ico, .svcx__a[data-ico="b"]:hover .ico, .svc-hero__icon[data-ico="b"]:hover .ico{ animation: pen-tilt-h 1s var(--ease-out) 1; }
/* D: el giro continuo ya corre; el cursor no lo reinicia */
/* Auditoría: el pulso ya corre; el cursor no lo reinicia */
.svc-hero__icon[data-ico="a"]:hover .ico--map.is-in .map__r{ animation: map-refold-r .9s cubic-bezier(.22,1,.36,1) both; }
.svc-hero__icon[data-ico="a"]:hover .ico--map.is-in .map__l{ animation: map-refold-l .9s cubic-bezier(.22,1,.36,1) .12s both; }

/* Áreas que acompañan: marcas de los entregables, numerales del proceso, flechas */
.js .entreg__i::before{ transform: rotate(-45deg) scale(0); opacity: 0; transition: transform .45s var(--ease-out), opacity .2s ease; transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
.entreg__i.is-in::before{ transform: rotate(-45deg) scale(1); opacity: 1; }
.js .proc__i::before{ opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.proc__i.is-in::before{ opacity: 1; transform: none; }
.svc-nav__a span{ display: inline-block; transition: transform .3s var(--ease-out); }
.svc-nav__a:hover span{ transform: translateX(4px); }
.svc-nav__a:not(.svc-nav__a--next):hover span{ transform: translateX(-4px); }
.link-cta, .svc__link{ transition: color .15s ease, border-color .15s ease, padding-left .3s var(--ease-out); }
.sig .link-cta:hover, .svc__link:hover{ padding-left: 4px; }
.crumbs a{ transition: color .15s ease; }

@media (prefers-reduced-motion: reduce){
  .svc-hero__icon .ico, .svc .ico, .servicio-ind .ico, .svcx__icon .ico, .card .ico, .svc-hero__icon:hover .ico--tick.is-in path, .svc-hero__icon:hover .ico--map.is-in path{ animation: none !important; }
  .js .entreg__i::before{ transform: rotate(-45deg) scale(1); opacity: 1; transition: none; }
  .js .proc__i::before{ opacity: 1; transform: none; transition: none; }
  .svc-nav__a:hover span{ transform: none; }
  .sig .link-cta:hover, .svc__link:hover{ padding-left: 0; }
}

/* «Palomeado»: el escudo se traza primero, la paloma entra después y el
   icono da un pequeño rebote al completarse. Al pasar el cursor se repite. */
.ico--tick.is-in path:nth-child(1){ animation-duration: .8s; }
.ico--tick.is-in path:nth-child(2){ animation-duration: .4s; animation-delay: .75s; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
.ico--tick.is-in{ animation: ico-tick .5s var(--ease-out) 1.05s both; }
@keyframes ico-tick{ 0%{ transform: scale(1); } 45%{ transform: scale(1.14) rotate(-4deg); } 100%{ transform: scale(1) rotate(0); } }
@keyframes ico-tick-h{ 0%{ transform: scale(1); } 45%{ transform: scale(1.14) rotate(-4deg); } 100%{ transform: scale(1) rotate(0); } }
@keyframes ico-redraw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
.card:hover .ico--tick.is-in path:nth-child(2){ animation: ico-redraw .45s cubic-bezier(.3,1.4,.5,1) .1s both; }
.card:hover .ico--tick.is-in{ animation: ico-tick-h .5s var(--ease-out) .35s both; }
@media (prefers-reduced-motion: reduce){ .ico--tick.is-in, .card:hover .ico--tick.is-in{ animation: none; } .card:hover .ico--tick.is-in path:nth-child(2){ animation: none; } }

/* Giro de 180°: la red de especialistas gira media vuelta al completar el trazo y otra al pasar el cursor */
.ico--spin{ transform-origin: center; }
.ico--spin.is-in{ animation: ico-spin 2s var(--ease-out) 1.05s both; }
@keyframes ico-spin{ from{ transform: rotate(0); } to{ transform: rotate(180deg); } }
@keyframes ico-spin-back{ from{ transform: rotate(180deg); } to{ transform: rotate(360deg); } }
.card:hover .ico--spin.is-in{ animation: ico-spin-back 2s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce){ .ico--spin.is-in, .card:hover .ico--spin.is-in{ animation: none; } }

/* Gráfica: las barras crecen desde la base, una tras otra, después de la línea; al pasar el cursor vuelven a crecer */
.js .ico--bars rect{ transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
.ico--bars.is-in rect{ animation: ico-bar .6s cubic-bezier(.22,1,.36,1) both; }
.ico--bars.is-in rect:nth-of-type(1){ animation-delay: .7s; }
.ico--bars.is-in rect:nth-of-type(2){ animation-delay: .85s; }
.ico--bars.is-in rect:nth-of-type(3){ animation-delay: 1s; }
@keyframes ico-bar{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes ico-bar-again{ 0%{ transform: scaleY(1); } 30%{ transform: scaleY(.15); } 100%{ transform: scaleY(1); } }
.card:hover .ico--bars.is-in rect{ animation: ico-bar-again .7s cubic-bezier(.22,1,.36,1) both; }
.card:hover .ico--bars.is-in rect:nth-of-type(2){ animation-delay: .08s; }
.card:hover .ico--bars.is-in rect:nth-of-type(3){ animation-delay: .16s; }
@media (prefers-reduced-motion: reduce){ .js .ico--bars rect{ transform: none; } .ico--bars.is-in rect, .card:hover .ico--bars.is-in rect{ animation: none; } }

/* Mapa que se desdobla: el panel central aparece y los laterales giran
   desde su pliegue (derecho primero, izquierdo después). Sustituye al
   trazo dibujado en este icono. Al pasar el cursor se vuelve a desdoblar. */

/* ---------- Sello oficial: escudo con paloma de Gestoría y de «Normatividad COFEPRIS» ----------
   El icono no se traza: entra completo desde la esquina, inclinado como una mano que estampa,
   golpea (leve sobrepaso) y se asienta con un balanceo breve; en el impacto parpadea un aro
   punteado de sello y se disipa. Tarjeta, índice y carrusel a los .35 s; cabecera de la página
   a los .8 s (espera a su caja). Al pasar el cursor se repite (alias «-h»). */
.ico--seal path{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.ico--seal .off{ transform-box: view-box; transform-origin: 12px 12px; }
.ico--seal .seal{ transform-box: view-box; transform-origin: 12px 12px; opacity: 0; stroke-width: 1.25; stroke-dasharray: 1.1 1.3; }
.js .ico--seal .off{ opacity: 0; transform: translate(6px,-6px) scale(1.5) rotate(-20deg); }
.ico--seal.is-in .off{ animation: seal-in .5s cubic-bezier(.2,.9,.3,1.2) .35s forwards, seal-settle .6s ease .85s; }
.ico--seal.is-in .seal{ animation: seal-ring .8s ease-out .62s forwards; }
.svc-hero__icon .ico--seal.is-in .off{ animation: seal-in .5s cubic-bezier(.2,.9,.3,1.2) .8s forwards, seal-settle .6s ease 1.3s; }
.svc-hero__icon .ico--seal.is-in .seal{ animation: seal-ring .8s ease-out 1.07s forwards; }
.card:hover .ico--seal.is-in .off, #fase-c:hover .ico--seal.is-in .off, .svcx__a[data-ico="c"]:hover .ico--seal.is-in .off, .svc-hero__icon[data-ico="c"]:hover .ico--seal.is-in .off{ animation: seal-in-h .5s cubic-bezier(.2,.9,.3,1.2) forwards, seal-settle-h .6s ease .5s; }
.card:hover .ico--seal.is-in .seal, #fase-c:hover .ico--seal.is-in .seal, .svcx__a[data-ico="c"]:hover .ico--seal.is-in .seal, .svc-hero__icon[data-ico="c"]:hover .ico--seal.is-in .seal{ animation: seal-ring-h .8s ease-out .27s forwards; }
@keyframes seal-in{   0%{ opacity: 0; transform: translate(6px,-6px) scale(1.5) rotate(-20deg); } 60%{ opacity: 1; transform: translate(0,0) scale(.94) rotate(2deg); } 100%{ opacity: 1; transform: translate(0,0) scale(1) rotate(0); } }
@keyframes seal-in-h{ 0%{ opacity: 0; transform: translate(6px,-6px) scale(1.5) rotate(-20deg); } 60%{ opacity: 1; transform: translate(0,0) scale(.94) rotate(2deg); } 100%{ opacity: 1; transform: translate(0,0) scale(1) rotate(0); } }
@keyframes seal-settle{   30%{ transform: rotate(-2.5deg); } 65%{ transform: rotate(1.5deg); } }
@keyframes seal-settle-h{ 30%{ transform: rotate(-2.5deg); } 65%{ transform: rotate(1.5deg); } }
@keyframes seal-ring{   0%{ opacity: 0; transform: scale(1.18); } 25%{ opacity: .7; transform: scale(1); } 100%{ opacity: 0; transform: scale(1); } }
@keyframes seal-ring-h{ 0%{ opacity: 0; transform: scale(1.18); } 25%{ opacity: .7; transform: scale(1); } 100%{ opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .js .ico--seal .off{ opacity: 1; transform: none; animation: none !important; }
  .ico--seal .seal{ display: none; }
}
.ico--map path{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; transform-box: fill-box; }
.js .ico--map .map__m{ opacity: 0; }
.js .ico--map .map__l{ transform-origin: right center; transform: perspective(40px) rotateY(-100deg); opacity: 0; }
.js .ico--map .map__r{ transform-origin: left center;  transform: perspective(40px) rotateY(100deg);  opacity: 0; }
.ico--map.is-in .map__m{ animation: map-center .35s ease-out both; }
.ico--map.is-in .map__r{ animation: map-unfold-r .7s cubic-bezier(.22,1,.36,1) .25s both; }
.ico--map.is-in .map__l{ animation: map-unfold-l .7s cubic-bezier(.22,1,.36,1) .55s both; }
@keyframes map-center{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes map-unfold-r{ from{ transform: perspective(40px) rotateY(100deg); opacity: 0; } 30%{ opacity: 1; } to{ transform: perspective(40px) rotateY(0); opacity: 1; } }
@keyframes map-unfold-l{ from{ transform: perspective(40px) rotateY(-100deg); opacity: 0; } 30%{ opacity: 1; } to{ transform: perspective(40px) rotateY(0); opacity: 1; } }
@keyframes map-refold-r{ 0%{ transform: perspective(40px) rotateY(0); } 40%{ transform: perspective(40px) rotateY(95deg); } 100%{ transform: perspective(40px) rotateY(0); } }
@keyframes map-refold-l{ 0%{ transform: perspective(40px) rotateY(0); } 40%{ transform: perspective(40px) rotateY(-95deg); } 100%{ transform: perspective(40px) rotateY(0); } }
#fase-a:hover .ico--map.is-in .map__r, .svcx__a[data-ico="a"]:hover .ico--map.is-in .map__r{ animation: map-refold-r .9s cubic-bezier(.22,1,.36,1) both; }
#fase-a:hover .ico--map.is-in .map__l, .svcx__a[data-ico="a"]:hover .ico--map.is-in .map__l{ animation: map-refold-l .9s cubic-bezier(.22,1,.36,1) .12s both; }
.svc-hero__icon[data-ico="a"] .ico--map.is-in .map__l{ animation-delay: .7s; }
.svc-hero__icon[data-ico="a"] .ico--map.is-in .map__r{ animation-delay: .35s; }
@media (prefers-reduced-motion: reduce){
  .js .ico--map .map__m, .js .ico--map .map__l, .js .ico--map .map__r{ opacity: 1; transform: none; animation: none !important; }
}

/* (Gestoría usa ahora el sello oficial; ver «Sello oficial» más abajo) */

/* ---------- Páginas de servicio: cabecera en cascada y remates ----------
   Misma curva y mismo ritmo que la portada. */
.js .svc-hero .crumbs, .js .svc-hero__grid > div:first-child > *, .js .svc-hero > .wrap > .eyebrow, .js .svc-hero > .wrap > .h1, .js .svc-hero > .wrap > .lede{ opacity: 0; transform: translateY(14px); animation: hero-in .75s var(--ease-out) forwards; }
.js .svc-hero .crumbs{ animation-delay: .05s; transform: translateY(6px); }
.js .svc-hero__grid > div:first-child > :nth-child(1), .js .svc-hero > .wrap > .eyebrow{ animation-delay: .12s; }
.js .svc-hero__grid > div:first-child > :nth-child(2), .js .svc-hero > .wrap > .h1{ animation-delay: .22s; }
.js .svc-hero__grid > div:first-child > :nth-child(3), .js .svc-hero > .wrap > .lede{ animation-delay: .32s; }
.js .svc-hero__grid > div:first-child > :nth-child(4){ animation-delay: .42s; }
.js .svc-hero__icon{ opacity: 0; transform: scale(.92); animation: icon-box-in .8s var(--ease-out) .25s forwards; }
@keyframes icon-box-in{ to{ opacity: 1; transform: none; } }
/* El trazo del icono grande espera a que la caja llegue */
.svc-hero__icon .ico.is-in path{ animation-delay: .45s; }
.svc-hero__icon .ico--tick.is-in path:nth-child(1){ animation-delay: .45s; }
.svc-hero__icon .ico--map.is-in .map__m{ animation-delay: .45s; }

/* Proceso: la línea de cada paso se extiende desde la izquierda antes del texto */
.js .proc__i{ border-top-color: transparent; }
.js .proc__i::after{ content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--linea); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.proc__i{ position: relative; }
.proc__i.is-in::after{ transform: scaleX(1); }
.js .proc__i:last-child{ border-bottom-color: transparent; }

/* Entregables: al pasar el cursor la marca se reafirma */
.entreg__i:hover{ transform: translateY(-2px); border-color: var(--verde-lt); }
.entreg__i:hover::before{ animation: check-again .45s var(--ease-out); }
@keyframes check-again{ 0%{ transform: rotate(-45deg) scale(1); } 40%{ transform: rotate(-45deg) scale(1.35); } 100%{ transform: rotate(-45deg) scale(1); } }

/* Lo que sigue: el enlace a la fase siguiente late una vez al entrar */
.sig .link-cta{ display: inline-block; }
.sig > div.is-in .link-cta{ animation: link-nudge 1s var(--ease-out) .8s 1; }
@keyframes link-nudge{ 0%,100%{ transform: translateX(0); } 40%{ transform: translateX(6px); } }

/* Banda de cierre: el botón entra después del texto */
.js .cta-band__inner .btn{ opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out) .25s, transform .6s var(--ease-out) .25s, background-color .15s ease, border-color .15s ease, color .15s ease; }
.cta-band__inner.is-in .btn{ opacity: 1; transform: none; }

/* Índice de servicios: el icono de cada tarjeta se dibuja al entrar y el título sube un poco después */
.svcx__h, .svcx__t, .svcx__d{ transition: transform .35s var(--ease-out); }
.svcx__a:hover .svcx__h{ transform: translateX(2px); }

@media (prefers-reduced-motion: reduce){
  .js .svc-hero .crumbs, .js .svc-hero__grid > div:first-child > *, .js .svc-hero > .wrap > .eyebrow, .js .svc-hero > .wrap > .h1, .js .svc-hero > .wrap > .lede, .js .svc-hero__icon{ opacity: 1; transform: none; animation: none; }
  .js .proc__i{ border-top-color: var(--linea); } .js .proc__i:last-child{ border-bottom-color: var(--linea); } .js .proc__i::after{ display: none; }
  .entreg__i:hover{ transform: none; } .entreg__i:hover::before, .sig > div.is-in .link-cta{ animation: none; }
  .js .cta-band__inner .btn{ opacity: 1; transform: none; transition: none; }
  .svcx__a:hover .svcx__h{ transform: none; }
}
.porta__head .h3{ margin-bottom: 6px; }
.tab.is-active{ color: var(--verde); border-bottom-color: var(--verde); }
.tab.is-active .tab__n{ color: var(--verde-lt); }
.js .tabpanel.is-active{ animation: panel-in .5s var(--ease-out) both; }
@keyframes panel-in{ from{ opacity: 0; transform: translateY(8px); } }

.tp__grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; margin-bottom: 32px; }
/* El título entra en la columna de los chips: el bloque deja de ser un
   encabezado ancho con dos columnas casi vacías debajo. */
.tp__grid--mapa{ align-items: center; gap: 48px; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.tp__grid--mapa .tp__side .h2{ margin-bottom: 22px; }
.tp__grid--mapa .tp__k{ margin-bottom: 10px; }
/* Los estados se enlistan en vertical, de norte a sur: nombre a la izquierda,
   número de proyectos a la derecha, con una fina línea entre renglones. */
.tp__grid--mapa .tp__estados{ flex-direction: column; flex-wrap: nowrap; gap: 0; max-width: 340px; }
.tp__grid--mapa .tp__estados li{
  width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--linea);
  border-radius: 0; background: transparent; align-items: center;
}
.tp__grid--mapa .tp__estados li:first-child{ border-top: 1px solid var(--linea); }
.tp__grid--mapa .tp__estados li span{ margin-left: auto; }
.tp__grid--mapa .tp__estados li:hover, .tp__grid--mapa .tp__estados li.is-hi{
  transform: none; background: var(--hueso-sv); border-color: var(--linea);
}
.tp__k{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: 6px; }
.tp__estados{ display: flex; flex-wrap: wrap; gap: 8px; }
.tp__estados li{
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--hueso-sv); font-size: 14px; color: var(--tinta);
}
.tp__estados li::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); align-self: center; }
.tp__estados li span{ font-family: var(--font-mo); font-size: 12px; color: var(--pizarra); }
.tp__estados .tp__varias::before{ background: var(--gris); }

.tp__mapwrap{ background: var(--hueso-sv); border: 1px solid var(--linea); border-radius: var(--radius); padding: 18px; }
.mx{ display: block; width: 100%; height: auto; --mx-off: #D9DDD9; --mx-on: var(--mx-off); }
.mx.is-in{ --mx-on: var(--verde); }
.mx__s{ fill: var(--mx-off); stroke: var(--blanco); stroke-width: .9; stroke-linejoin: round; }
/* Un estado encendido usa la variable de su clave; si el panel no la define, queda apagado */

/* Tabla de fases por proyecto: cabecera en dos niveles, legible.
   Nivel 1 (fases) sobre verde oscuro con texto blanco de 13 px y la letra de la
   fase en menta; nivel 2 (subcolumnas de Diseño) sobre hueso con texto tinta. */
.tp__tablewrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--radius); background: var(--blanco); }
table.tabla--porta{ width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
table.tabla--porta thead th{ text-transform: none; letter-spacing: .01em; width: auto;
  background: var(--verde-dk); color: var(--blanco); font-family: var(--font-dm); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: .01em;
  padding: 14px 12px; text-align: center; vertical-align: middle; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16);
}
table.tabla--porta thead th.tp__ub{ text-align: left; padding-left: 16px; min-width: 220px; }
table.tabla--porta thead th:last-child{ border-right: 0; }
table.tabla--porta thead th i{ display: block; font-family: var(--font-mo); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--mint); margin-bottom: 3px; }
table.tabla--porta thead tr:last-child th{ background: var(--hueso); color: var(--tinta); font-weight: 500; font-size: 12.5px; border-right-color: var(--linea); border-bottom: 1px solid var(--linea); padding: 9px 10px; }
table.tabla--porta thead th.tp__nd{ background: #2D5D52; color: rgba(255,255,255,.72); }
table.tabla--porta thead th.tp__nd i{ color: rgba(255,255,255,.5); }
table.tabla--porta tbody th{ width: auto; text-align: left; font-weight: 500; vertical-align: middle; padding: 12px 16px; color: var(--tinta); white-space: nowrap; border-bottom: 1px solid var(--linea); }
table.tabla--porta tbody td{ text-align: center; vertical-align: middle; padding: 12px; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); }
table.tabla--porta tbody tr:last-child th, .tabla--porta tbody tr:last-child td{ border-bottom: 0; }
table.tabla--porta tbody tr:nth-child(even) th, .tabla--porta tbody tr:nth-child(even) td{ background: var(--hueso-sv); }
table.tabla--porta tbody td.tp__nd{ color: var(--gris-txt); background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0,0,0,.035) 6px 7px); }
.tp__idx{ font-family: var(--font-mo); font-size: 11px; color: var(--gris-txt); margin-right: 10px; }
.tp__mark{ display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--verde); vertical-align: middle; }
.tp__no{ color: var(--gris-txt); }
.tp__nota{ font-size: 13px; color: var(--pizarra); margin-top: 14px; max-width: 80ch; }

/* Páginas del portafolio: foto en la caja de cabecera; tarjetas con imagen en el índice; enlace por especialidad en la principal */
.svc-hero__icon--img{ overflow: hidden; padding: 0; }
.svc-hero__icon--img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Portafolio · conector isotipo → imagen ----------
   Una línea sale del costado del texto y llega al borde izquierdo de la
   imagen, a su centro vertical; sobre ella aparecen en orden los tres módulos
   del isotipo —teal, menta, cielo— y al llegar el último la imagen pasa de
   atenuada a plena con un sello: una breve presión de escala y un anillo que
   pulsa. site.js añade .play al entrar la sección en pantalla, una sola vez.
   El anillo se resuelve con box-shadow y no con un elemento, porque el cuadro
   de la imagen recorta lo que sobresale. */
.svc-hero--conn .svc-hero__grid{ position: relative; --conn-len: 190px; --mo-size: 15px; }
.svc-hero--conn .conn{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.svc-hero--conn .rail{ position: absolute; right: 168px; top: 50%; width: var(--conn-len); height: 1.5px; }
.svc-hero--conn .rail .line{ position: absolute; inset: 0; background: var(--mint); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.svc-hero--conn .rail .mo{
  position: absolute; top: 50%; width: var(--mo-size); height: var(--mo-size); border-radius: 3px;
  transform: translate(-50%,-50%) scale(0); opacity: 0; box-shadow: 0 2px 5px rgba(26,33,40,.14);
}
.svc-hero--conn .rail .mo1{ left: 4%;  background: var(--teal); }
.svc-hero--conn .rail .mo2{ left: 50%; background: var(--mint); }
.svc-hero--conn .rail .mo3{ left: 96%; background: var(--sky); }
.svc-hero--conn .svc-hero__icon--img{ position: relative; z-index: 2; opacity: .5; transform: scale(1.06); transform-origin: left center; }

.svc-hero--conn.play .line{ animation: conn-draw 1.2s var(--ease-out) .2s forwards; }
.svc-hero--conn.play .mo1{ animation: conn-pop .5s var(--ease-out) .40s forwards; }
.svc-hero--conn.play .mo2{ animation: conn-pop .5s var(--ease-out) .75s forwards; }
.svc-hero--conn.play .mo3{ animation: conn-pop .5s var(--ease-out) 1.10s forwards; }
.svc-hero--conn.play .svc-hero__icon--img{ animation: conn-sello .75s var(--ease-out) 1.35s forwards, conn-anillo .8s ease-out 1.45s; }

@keyframes conn-draw{ to{ transform: scaleX(1); } }
@keyframes conn-pop{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  60%{ opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
  100%{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes conn-sello{
  0%{ opacity: .5; transform: scale(1.06); }
  70%{ opacity: 1; transform: scale(.985); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes conn-anillo{
  0%{ box-shadow: 0 0 0 0 rgba(99,196,170,.75); }
  22%{ box-shadow: 0 0 0 4px rgba(99,196,170,.5); }
  100%{ box-shadow: 0 0 0 14px rgba(99,196,170,0); }
}

/* Cuando la retícula se apila, el conector no tiene dónde correr */
@media (max-width: 980px){
  .svc-hero--conn .conn{ display: none; }
  .svc-hero--conn .svc-hero__icon--img{ opacity: 1; transform: none; animation: none; }
}
@media (min-width: 1200px){ .svc-hero--conn .svc-hero__grid{ --conn-len: 230px; } }
@media (prefers-reduced-motion: reduce){
  .svc-hero--conn .rail .line{ transform: scaleX(1); animation: none !important; }
  .svc-hero--conn .rail .mo{ opacity: 1; transform: translate(-50%,-50%) scale(1); animation: none !important; }
  .svc-hero--conn .svc-hero__icon--img{ opacity: 1; transform: none; animation: none !important; }
}
.svcx-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.svcx__a--porta{ padding: 0 0 24px; overflow: hidden; }
.svcx__a--porta > :not(.svcx__media){ margin-left: 24px; margin-right: 24px; }
.svcx__media{ display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 18px; background: var(--hueso); }
.svcx__media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out); }
.svcx__a--porta:hover .svcx__media img{ transform: scale(1.04); }

/* Portafolio · galería de espacios por tipo de proyecto: retícula 3 · 2 · 1, pie con el
   nombre de referencia de la imagen y ampliación en <dialog> (site.js). */
.fotos{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 20px; }
.foto{ margin: 0; }
.foto__btn{ display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); background: var(--hueso); aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.foto__btn:focus-visible{ outline: 2px solid var(--verde); outline-offset: 3px; }
.foto__btn img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out); }
.foto:hover .foto__btn img, .foto__btn:focus-visible img{ transform: scale(1.04); }
.foto figcaption{ display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--tinta); }
.foto figcaption b{ font-family: var(--font-mo); font-weight: 500; font-size: 11px; letter-spacing: .12em; color: var(--verde); }
.lb{ border: 0; padding: 0; margin: auto; width: min(1200px, 92vw); max-height: 92vh; background: transparent; color: #fff; overflow: visible; }
.lb::backdrop{ background: rgba(26,33,40,.9); }
.lb figure{ margin: 0; }
.lb img{ display: block; width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius); background: var(--tinta); }
.lb figcaption{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 2px 0; font-size: 14.5px; color: var(--hueso); }
.lb figcaption b{ font-family: var(--font-mo); font-weight: 500; font-size: 11px; letter-spacing: .12em; color: var(--mint); margin-right: 10px; }
.lb__close{ font: 500 14px/1 var(--font-dm); color: var(--hueso); background: transparent; border: 1px solid rgba(238,237,233,.45); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.lb__close:hover, .lb__close:focus-visible{ border-color: var(--mint); color: var(--mint); outline: none; }
.lb__stage{ position: relative; }
.lb__nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(238,237,233,.35); background: rgba(26,33,40,.55); color: var(--hueso); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.lb__nav svg{ width: 22px; height: 22px; }
.lb__nav--prev{ left: 14px; } .lb__nav--next{ right: 14px; }
.lb__nav:hover, .lb__nav:focus-visible{ background: rgba(26,33,40,.85); border-color: var(--mint); color: var(--mint); outline: none; }
.lb__c{ margin-left: 12px; font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em; color: var(--gris); }
@media (max-width: 560px){ .lb__nav{ width: 40px; height: 40px; } .lb__nav--prev{ left: 8px; } .lb__nav--next{ right: 8px; } .lb figcaption{ flex-wrap: wrap; } }
@media (max-width: 980px){ .fotos{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .fotos{ grid-template-columns: 1fr; } }
@media (max-width: 980px){ .svcx-grid--2{ grid-template-columns: 1fr; } }

/* Movimiento: las marcas de la tabla aparecen tras su fila */
.js .tp__mark{ transform: scale(0); transition: transform .4s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--i, 0) * 60ms + 260ms); }
.tabla.is-in .tp__mark{ transform: scale(1); }

@media (max-width: 980px){ .tp__grid{ grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 720px){
  .tp__mapwrap{ padding: 12px; }
  .tabla--porta{ min-width: 720px; font-size: 14px; }
  .tabla--porta tbody th{ padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .js .tabpanel.is-active{ animation: none; }
  .mx{ --mx-on: var(--verde); } .mx__s{ transition: none; }
  .js .tp__mark{ transform: none; transition: none; }
}

/* ---------- Mapa: encendido por estado y resalte cruzado ----------
   Cada estado con proyectos recibe cuatro variables en el <svg> del panel
   (--s color, --h resalte, --p pulso, --d retardo en ms). Las mismas reglas
   valen para los 32 estados: en los que no tienen proyectos las variables
   no existen y la animación va de gris a gris, es decir, no se ve.
   --x-<clave> la pone site.js al pasar el cursor por la ficha o la fila. */
.mx__s{ transform-box: fill-box; transform-origin: center; transition: fill .25s ease; }
.mx__s[data-s="ags"]{ --c:var(--s-ags,var(--mx-off)); --h:var(--h-ags,var(--mx-off)); --p:var(--p-ags,1); --d:var(--d-ags,0); --x:var(--x-ags,var(--c)); }
.mx__s[data-s="bc"]{ --c:var(--s-bc,var(--mx-off)); --h:var(--h-bc,var(--mx-off)); --p:var(--p-bc,1); --d:var(--d-bc,0); --x:var(--x-bc,var(--c)); }
.mx__s[data-s="bcs"]{ --c:var(--s-bcs,var(--mx-off)); --h:var(--h-bcs,var(--mx-off)); --p:var(--p-bcs,1); --d:var(--d-bcs,0); --x:var(--x-bcs,var(--c)); }
.mx__s[data-s="camp"]{ --c:var(--s-camp,var(--mx-off)); --h:var(--h-camp,var(--mx-off)); --p:var(--p-camp,1); --d:var(--d-camp,0); --x:var(--x-camp,var(--c)); }
.mx__s[data-s="chis"]{ --c:var(--s-chis,var(--mx-off)); --h:var(--h-chis,var(--mx-off)); --p:var(--p-chis,1); --d:var(--d-chis,0); --x:var(--x-chis,var(--c)); }
.mx__s[data-s="chih"]{ --c:var(--s-chih,var(--mx-off)); --h:var(--h-chih,var(--mx-off)); --p:var(--p-chih,1); --d:var(--d-chih,0); --x:var(--x-chih,var(--c)); }
.mx__s[data-s="coah"]{ --c:var(--s-coah,var(--mx-off)); --h:var(--h-coah,var(--mx-off)); --p:var(--p-coah,1); --d:var(--d-coah,0); --x:var(--x-coah,var(--c)); }
.mx__s[data-s="col"]{ --c:var(--s-col,var(--mx-off)); --h:var(--h-col,var(--mx-off)); --p:var(--p-col,1); --d:var(--d-col,0); --x:var(--x-col,var(--c)); }
.mx__s[data-s="cdmx"]{ --c:var(--s-cdmx,var(--mx-off)); --h:var(--h-cdmx,var(--mx-off)); --p:var(--p-cdmx,1); --d:var(--d-cdmx,0); --x:var(--x-cdmx,var(--c)); }
.mx__s[data-s="dgo"]{ --c:var(--s-dgo,var(--mx-off)); --h:var(--h-dgo,var(--mx-off)); --p:var(--p-dgo,1); --d:var(--d-dgo,0); --x:var(--x-dgo,var(--c)); }
.mx__s[data-s="gto"]{ --c:var(--s-gto,var(--mx-off)); --h:var(--h-gto,var(--mx-off)); --p:var(--p-gto,1); --d:var(--d-gto,0); --x:var(--x-gto,var(--c)); }
.mx__s[data-s="gro"]{ --c:var(--s-gro,var(--mx-off)); --h:var(--h-gro,var(--mx-off)); --p:var(--p-gro,1); --d:var(--d-gro,0); --x:var(--x-gro,var(--c)); }
.mx__s[data-s="hgo"]{ --c:var(--s-hgo,var(--mx-off)); --h:var(--h-hgo,var(--mx-off)); --p:var(--p-hgo,1); --d:var(--d-hgo,0); --x:var(--x-hgo,var(--c)); }
.mx__s[data-s="jal"]{ --c:var(--s-jal,var(--mx-off)); --h:var(--h-jal,var(--mx-off)); --p:var(--p-jal,1); --d:var(--d-jal,0); --x:var(--x-jal,var(--c)); }
.mx__s[data-s="mex"]{ --c:var(--s-mex,var(--mx-off)); --h:var(--h-mex,var(--mx-off)); --p:var(--p-mex,1); --d:var(--d-mex,0); --x:var(--x-mex,var(--c)); }
.mx__s[data-s="mich"]{ --c:var(--s-mich,var(--mx-off)); --h:var(--h-mich,var(--mx-off)); --p:var(--p-mich,1); --d:var(--d-mich,0); --x:var(--x-mich,var(--c)); }
.mx__s[data-s="mor"]{ --c:var(--s-mor,var(--mx-off)); --h:var(--h-mor,var(--mx-off)); --p:var(--p-mor,1); --d:var(--d-mor,0); --x:var(--x-mor,var(--c)); }
.mx__s[data-s="nay"]{ --c:var(--s-nay,var(--mx-off)); --h:var(--h-nay,var(--mx-off)); --p:var(--p-nay,1); --d:var(--d-nay,0); --x:var(--x-nay,var(--c)); }
.mx__s[data-s="nl"]{ --c:var(--s-nl,var(--mx-off)); --h:var(--h-nl,var(--mx-off)); --p:var(--p-nl,1); --d:var(--d-nl,0); --x:var(--x-nl,var(--c)); }
.mx__s[data-s="oax"]{ --c:var(--s-oax,var(--mx-off)); --h:var(--h-oax,var(--mx-off)); --p:var(--p-oax,1); --d:var(--d-oax,0); --x:var(--x-oax,var(--c)); }
.mx__s[data-s="pue"]{ --c:var(--s-pue,var(--mx-off)); --h:var(--h-pue,var(--mx-off)); --p:var(--p-pue,1); --d:var(--d-pue,0); --x:var(--x-pue,var(--c)); }
.mx__s[data-s="qro"]{ --c:var(--s-qro,var(--mx-off)); --h:var(--h-qro,var(--mx-off)); --p:var(--p-qro,1); --d:var(--d-qro,0); --x:var(--x-qro,var(--c)); }
.mx__s[data-s="qroo"]{ --c:var(--s-qroo,var(--mx-off)); --h:var(--h-qroo,var(--mx-off)); --p:var(--p-qroo,1); --d:var(--d-qroo,0); --x:var(--x-qroo,var(--c)); }
.mx__s[data-s="slp"]{ --c:var(--s-slp,var(--mx-off)); --h:var(--h-slp,var(--mx-off)); --p:var(--p-slp,1); --d:var(--d-slp,0); --x:var(--x-slp,var(--c)); }
.mx__s[data-s="sin"]{ --c:var(--s-sin,var(--mx-off)); --h:var(--h-sin,var(--mx-off)); --p:var(--p-sin,1); --d:var(--d-sin,0); --x:var(--x-sin,var(--c)); }
.mx__s[data-s="son"]{ --c:var(--s-son,var(--mx-off)); --h:var(--h-son,var(--mx-off)); --p:var(--p-son,1); --d:var(--d-son,0); --x:var(--x-son,var(--c)); }
.mx__s[data-s="tab"]{ --c:var(--s-tab,var(--mx-off)); --h:var(--h-tab,var(--mx-off)); --p:var(--p-tab,1); --d:var(--d-tab,0); --x:var(--x-tab,var(--c)); }
.mx__s[data-s="tamps"]{ --c:var(--s-tamps,var(--mx-off)); --h:var(--h-tamps,var(--mx-off)); --p:var(--p-tamps,1); --d:var(--d-tamps,0); --x:var(--x-tamps,var(--c)); }
.mx__s[data-s="tlax"]{ --c:var(--s-tlax,var(--mx-off)); --h:var(--h-tlax,var(--mx-off)); --p:var(--p-tlax,1); --d:var(--d-tlax,0); --x:var(--x-tlax,var(--c)); }
.mx__s[data-s="ver"]{ --c:var(--s-ver,var(--mx-off)); --h:var(--h-ver,var(--mx-off)); --p:var(--p-ver,1); --d:var(--d-ver,0); --x:var(--x-ver,var(--c)); }
.mx__s[data-s="yuc"]{ --c:var(--s-yuc,var(--mx-off)); --h:var(--h-yuc,var(--mx-off)); --p:var(--p-yuc,1); --d:var(--d-yuc,0); --x:var(--x-yuc,var(--c)); }
.mx__s[data-s="zac"]{ --c:var(--s-zac,var(--mx-off)); --h:var(--h-zac,var(--mx-off)); --p:var(--p-zac,1); --d:var(--d-zac,0); --x:var(--x-zac,var(--c)); }
/* Color en reposo; resalte cruzado (--x) cuando site.js lo define */
.mx__s[data-s]{ fill: var(--x); }
/* Encendido: gris → menta con pulso → verde, escalonado por --d (en ms) */
.js .mx__s[data-s]{ fill: var(--mx-off); }
.mx.is-in .mx__s[data-s]{ fill: var(--x); animation: state-in 1.1s var(--ease-out) calc(var(--d) * 1ms + 350ms) backwards; }
@keyframes state-in{ 0%{ fill: var(--mx-off); transform: scale(1); } 40%{ fill: var(--h); transform: scale(var(--p)); } 100%{ fill: var(--c); transform: scale(1); } }
/* Estado con proyectos al pasar el cursor: menta y un latido */
.mx.is-in .mx__s[data-s]:hover{ fill: var(--h); animation: state-hover .6s var(--ease-out); }
@keyframes state-hover{ 0%{ transform: scale(1); } 40%{ transform: scale(var(--p)); } 100%{ transform: scale(1); } }

/* Fichas de estado: entran escalonadas (site.js) y responden al cursor */
.tp__estados li{ transition: transform .3s var(--ease-out), border-color .2s ease, background-color .2s ease; cursor: default; }
.tp__estados li:hover, .tp__estados li.is-hi{ transform: translateY(-2px); border-color: var(--verde); background: var(--blanco); }
.tp__estados li::before{ transition: transform .3s var(--ease-out), background-color .2s ease; }
.tp__estados li:hover::before, .tp__estados li.is-hi::before{ transform: scale(1.4); background: var(--mint); }
.js .tp__estados li.is-in::before{ animation: chip-dot .5s cubic-bezier(.3,1.4,.5,1) .35s both; }
@keyframes chip-dot{ from{ transform: scale(0); } to{ transform: scale(1); } }

/* Tabla: la fila bajo el cursor se resalta y su estado en el mapa también */
table.tabla--porta tbody tr{ transition: background-color .2s ease; }
table.tabla--porta tbody tr:hover th, table.tabla--porta tbody tr:hover td{ background: rgba(26,104,88,.07); }
table.tabla--porta tbody tr:hover .tp__mark{ animation: check-again .45s var(--ease-out); }
table.tabla--porta tbody tr:hover .tp__idx{ color: var(--verde); }

/* Cabecera: el número cuenta (site.js) */
.tp__count{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .js .mx__s[data-s], .mx.is-in .mx__s[data-s]{ fill: var(--x); animation: none; }
  .mx.is-in .mx__s[data-s]:hover{ animation: none; }
  .tp__estados li:hover, .tp__estados li.is-hi{ transform: none; }
  .js .tp__estados li.is-in::before{ animation: none; }
  table.tabla--porta tbody tr:hover .tp__mark{ animation: none; }
}

/* ---------- Blog ---------- */
.post-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.svc-hero .eyebrow time{ color: inherit; }
@media (max-width: 980px){ .post-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .post-grid{ grid-template-columns: 1fr; } }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px 0 14px;
  background: #25D366; color: var(--blanco);
  border-radius: 999px; text-decoration: none;
  font-family: var(--font-dm); font-size: 15px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(26,33,40,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ color: var(--blanco); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,33,40,.28); }
.wa-float:focus-visible{ outline: 2px solid var(--tinta); outline-offset: 3px; }
.wa-float svg{ width: 28px; height: 28px; flex-shrink: 0; }
.wa-float__txt{ white-space: nowrap; }

/* ---------- Red de especialistas coordinados ---------- */
.red{ margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); }
.red__k{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra); margin-bottom: 16px;
}
.red__list{ display: flex; flex-wrap: wrap; gap: 10px; }
.red__list li{
  font-size: 14px; color: var(--tinta);
  padding: 8px 16px; background: var(--hueso); border-radius: 999px;
}
.on-dark .red{ border-top-color: rgba(174,182,188,.25); }
.on-dark .red__k{ color: var(--gris); }
.on-dark .red__list li{ background: rgba(238,237,233,.08); color: var(--hueso); }

/* ---------- Credenciales del fundador ---------- */
.credenciales{
  margin-top: 48px; padding: 32px;
  background: var(--hueso); border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 40px;
}
.credenciales__head{ grid-column: 1 / -1; }
.credenciales__head h3{ font-family: var(--font-pf); font-size: 20px; color: var(--tinta); margin-bottom: 8px; }
.credenciales__head p{ font-size: 15px; color: var(--pizarra); max-width: 62ch; }
.credencial{ display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
.credencial__k{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lapis); padding-top: 3px;
}
.credencial__v{ font-size: 15px; line-height: 1.5; color: var(--tinta); }
.credencial__v span{ display: block; color: var(--pizarra); font-size: 14px; margin-top: 3px; }

/* ---------- Páginas de texto ---------- */
.prosa{ max-width: 70ch; }
.prosa h2{ font-family: var(--font-pf); font-size: 24px; color: var(--verde); margin: 44px 0 12px; }
.prosa h3{ font-family: var(--font-pf); font-size: 19px; color: var(--tinta); margin: 28px 0 8px; }
.prosa p{ margin-bottom: 14px; color: var(--pizarra); }
.prosa ul{ margin-bottom: 14px; }
.prosa ul li{ position: relative; padding-left: 18px; margin-bottom: 8px; color: var(--pizarra); }
.prosa ul li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:1px; background: var(--verde-lt); }
.prosa strong{ color: var(--tinta); font-weight: 500; }
.aviso-legal{ padding: 20px; background: var(--hueso); border-radius: var(--radius); font-size: 14px; color: var(--pizarra); margin-top: 32px; }

/* ============================================================
   Responsivo · breakpoints del instructivo §04
   980 · 860 (colapso de nav) · 720 · 480
   ============================================================ */
@media (max-width: 980px){
  :root{ --pad-h: 28px; --pad-sec: 64px; }
  .cards-3{ grid-template-columns: 1fr; }
  .servicios{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 40px; }
  .svc:nth-child(3)::before{ display: none; }
  .svcx-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc-hero__grid{ grid-template-columns: minmax(0,1fr) 128px; }
  .svc-hero__icon{ width: 128px; height: 128px; }
  .ico--xl{ width: 72px; height: 72px; }
  .dif{ grid-template-columns: 1fr; gap: 36px; }
  .contacto{ grid-template-columns: 1fr; gap: 40px; }
  .footer__top{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .ficha__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 0; }
  .ficha__item:nth-child(odd){ border-left: none; padding-left: 0; }
  .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats__item:nth-child(odd){ border-left: none; }
  .stats__item:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.16); }
}

@media (max-width: 860px){
  .nav__toggle{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: transparent;
    border: 1px solid var(--gris); border-radius: var(--radius-sm);
    color: var(--tinta); cursor: pointer;
  }
  .nav__toggle svg{ width: 20px; height: 20px; }
  /* El header sticky con backdrop-filter sería el contenedor del overlay fijo:
     en móvil se retira el blur para que inset:0 se refiera a la ventana. */
  .header{ -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--blanco); }
  /* Overlay de pantalla completa sobre tinta */
  .nav{
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    gap: 20px; padding: 80px 28px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--tinta);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open{ opacity: 1; visibility: visible; transform: none; }
  .nav__list{ flex-direction: column; gap: 20px; text-align: center; width: 100%; }
  .nav__link{
    font-family: var(--font-pf); font-size: 28px; font-weight: 700;
    color: var(--hueso); border-bottom: none; padding: 4px 0;
  }
  .nav__link:hover{ color: var(--mint); border-bottom-color: transparent; }
  .nav .btn{ width: min(100%, 340px); margin-top: 12px; }
  .nav__close{
    display: grid; place-items: center;
    position: absolute; top: 16px; right: 24px; width: 44px; height: 44px;
    background: transparent; border: 1px solid rgba(238,237,233,.35);
    border-radius: var(--radius-sm); color: var(--hueso); cursor: pointer;
  }
  .nav__close svg{ width: 18px; height: 18px; }
  /* Desplegable de servicios dentro del overlay */
  .nav__item{ flex-direction: column; align-items: center; gap: 0; width: 100%; }
  .nav__item > .nav__link{ display: inline-flex; align-items: center; gap: 8px; }
  .nav__sub-toggle{ position: absolute; right: -36px; top: 8px; width: 32px; height: 32px; color: var(--hueso); }
  .nav__sub-toggle svg{ width: 18px; height: 18px; }
  .nav__sub{
    position: static; width: 100%; min-width: 0; padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none; transform: none;
    display: none; opacity: 1; visibility: visible;
  }
  .nav__sub::before{ display: none; }
  .nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub{ display: none; }
  .nav__item.is-open .nav__sub{ display: block; padding-top: 8px; }
  .nav__sub li a, #subPortafolio li a{ grid-template-columns: 1fr; text-align: center; gap: 2px; justify-items: center; padding: 8px 12px; font-size: 17px; color: var(--hueso); white-space: normal; }
  #subPortafolio{ width: 100%; } #subPortafolio li a span{ text-align: center; }
  .nav__sub li a span{ color: var(--mint); }
  .nav__sub li a:hover, .nav__sub li a:focus-visible{ background: transparent; color: var(--mint); }
  .nav__sub-all{ border-top-color: rgba(238,237,233,.2); }
  .nav__sub-all--first{ border-bottom-color: rgba(238,237,233,.2); }
  .nav__sub-all a{ color: var(--mint); }
}

@media (max-width: 720px){
  :root{ --pad-h: 20px; --pad-sec: 48px; --gap: 16px; }
  .hero{ min-height: 70vh; padding: 56px 0; }
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .hero__actions .btn{ width: 100%; }
  .hero__motif i:nth-child(3){ display: none; }
  .servicios{ grid-template-columns: 1fr; row-gap: 36px; }
  .svc::before{ top: 100%; left: 35px; width: 2px; height: 36px; }
  .svc:nth-child(3)::before{ display: block; }
  .servicio-ind{ grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .svc-hero{ padding: 32px 0; }
  .svc-hero__grid{ grid-template-columns: 1fr; gap: 20px; }
  .svc-hero__icon{ width: 88px; height: 88px; order: -1; }
  .ico--xl{ width: 48px; height: 48px; }
  .svc-meta{ grid-template-columns: 1fr; }
  .svc-meta > div + div{ border-left: none; padding-left: 0; border-top: 1px solid var(--linea); margin-top: 16px; }
  .proc__i{ grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
  .entreg{ grid-template-columns: 1fr; }
  .sig{ grid-template-columns: 1fr; gap: 32px; }
  .cta-band__inner{ flex-direction: column; align-items: flex-start; }
  .cta-band .btn{ width: 100%; }
  .svc-nav{ grid-template-columns: 1fr; }
  .svc-nav__a--next{ text-align: left; }
  .svcx-grid{ grid-template-columns: 1fr; }
  /* En móvil el flotante se vuelve circular para no tapar contenido */
  .wa-float{ right: 16px; bottom: 16px; width: 56px; padding: 0; justify-content: center; }
  .wa-float__txt{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entregables, .pilares, .impacto ul{ grid-template-columns: 1fr; }
  .cards-4{ grid-template-columns: 1fr; }
  .fila{ grid-template-columns: 1fr; }
  .footer__top{ grid-template-columns: 1fr; gap: 36px; }
  .section-head{ margin-bottom: 32px; }
  .credenciales{ grid-template-columns: 1fr; padding: 24px; }
  .credencial{ grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 480px){
  :root{ --pad-h: 16px; }
  .stats{ grid-template-columns: 1fr; }
  .stats__item{ border-left: none; }
  .stats__item + .stats__item{ border-top: 1px solid rgba(255,255,255,.16); }
  .ficha__grid{ grid-template-columns: 1fr; }
  .ficha__item{ border-left: none; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print{
  .header,.nav,.hero__motif,.hero__cycle,.footer__bar,.wa-float{ display: none; }
  body{ font-size: 12pt; }
  .section{ padding: 16pt 0; }
  .hero{ min-height: auto; background: none; color: var(--tinta); }
  .hero .h1{ color: var(--tinta); }
}

/* ---------- Método: encendido progresivo al bajar (solo inicio, #metodo) ----------
   Las cinco fases arrancan apagadas: riel gris, marcador hueco y textos atenuados.
   Al desplazar, el riel superior se llena de izquierda a derecha y, al alcanzar el
   marcador de cada fase, esa fase se enciende y se queda encendida. La fase en curso
   lleva un halo de menta. site.js escribe --fill, --fillx, --on, data-on y data-cur.
   Sin JS no se aplica nada: la sección se ve completa, como hasta ahora. */
.js #metodo .servicios > .svc{
  --on: 0;
  border-top-color: transparent;
  background-image: linear-gradient(to right,
    var(--verde-lt) 0 calc(var(--fill, 0) * 100%),
    var(--linea) calc(var(--fill, 0) * 100%) 100%);
  background-origin: border-box; background-clip: border-box;
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 0;
}
/* El conector hereda el llenado en lugar del barrido de entrada */
.js #metodo .servicios .svc::before{
  transform: none; transition: none;
  background: linear-gradient(to right,
    var(--verde-lt) 0 calc(var(--fillx, 0) * 100%),
    var(--linea) calc(var(--fillx, 0) * 100%) 100%);
}
/* El marcador ya no entra por secuencia: su llenado es la propia secuencia */
.js #metodo .servicios .svc__step{ transform: none; opacity: 1; }

/* Estado apagado */
.js #metodo .servicios > .svc .svc__step{
  background: var(--blanco); color: var(--gris);
  box-shadow: 0 0 0 4px var(--blanco), inset 0 0 0 2px var(--linea);
}
.js #metodo .servicios > .svc .svc__icon{ color: var(--gris); }
.js #metodo .servicios > .svc .svc__nombre{
  color: color-mix(in srgb, var(--tinta) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicios > .svc .svc__tagline{
  color: color-mix(in srgb, var(--pizarra) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicios > .svc .svc__list li::before{
  color: color-mix(in srgb, var(--verde-lt) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicios > .svc .svc__list,
.js #metodo .servicios > .svc .svc__dur,
.js #metodo .servicios > .svc .svc__link{ opacity: calc(.45 + .55 * var(--on)); }
/* Transiciones del encendido */
.js #metodo .servicios > .svc .svc__step{
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out),
              box-shadow .45s var(--ease-out), transform .5s var(--ease-out), opacity .3s ease;
}
.js #metodo .servicios > .svc .svc__icon,
.js #metodo .servicios > .svc .svc__nombre,
.js #metodo .servicios > .svc .svc__tagline,
.js #metodo .servicios > .svc .svc__list,
.js #metodo .servicios > .svc .svc__dur,
.js #metodo .servicios > .svc .svc__link{
  transition: color .45s var(--ease-out), opacity .45s var(--ease-out);
}
/* Fase encendida */
.js #metodo .servicios > .svc[data-on="1"] .svc__step{
  background: var(--verde); color: var(--blanco);
  box-shadow: 0 0 0 4px var(--blanco), inset 0 0 0 2px var(--verde);
}
.js #metodo .servicios > .svc[data-on="1"] .svc__icon{ color: var(--verde); }
/* Fase en curso: halo de menta */
.js #metodo .servicios > .svc[data-cur="1"] .svc__step{
  box-shadow: 0 0 0 4px var(--blanco), 0 0 0 9px rgba(62,133,117,.26),
              inset 0 0 0 2px var(--verde);
}
/* En una columna el riel del conector corre hacia abajo */
@media (max-width: 720px){
  .js #metodo .servicios .svc::before{
    background: linear-gradient(to bottom,
      var(--verde-lt) 0 calc(var(--fillx, 0) * 100%),
      var(--linea) calc(var(--fillx, 0) * 100%) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  .js #metodo .servicios > .svc{ --on: 1 !important; --fill: 1 !important; --fillx: 1 !important; }
  .js #metodo .servicios > .svc .svc__step,
  .js #metodo .servicios > .svc[data-on="1"] .svc__step{
    background: var(--verde); color: var(--blanco); transition: none;
    box-shadow: 0 0 0 4px var(--blanco), inset 0 0 0 2px var(--verde);
  }
  .js #metodo .servicios > .svc .svc__icon{ color: var(--verde); transition: none; }
}

/* Auditoría, sexto momento de la secuencia. Es un servicio independiente, así que
   conserva su acento lapislázuli y su marco punteado: no se vuelve una sexta fase,
   solo se apaga y se enciende con las demás, al final. */
.js #metodo .servicio-ind{
  --on: 0;
  border-color: var(--linea);
  /* Fondo azul translúcido que aparece con el encendido y se va al apagarse */
  background-image: linear-gradient(rgba(30,75,122,calc(var(--on) * .08)), rgba(30,75,122,calc(var(--on) * .08)));
  transition: border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.js #metodo .servicio-ind .servicio-ind__icon{
  background: var(--blanco); color: var(--gris);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out),
              transform .35s var(--ease-out);
}
.js #metodo .servicio-ind .servicio-ind__k{
  color: color-mix(in srgb, var(--lapis) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicio-ind .svc__nombre{
  color: color-mix(in srgb, var(--tinta) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicio-ind .svc__tagline{
  color: color-mix(in srgb, var(--pizarra) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicio-ind .servicio-ind__list li::before{
  color: color-mix(in srgb, var(--lapis-lt) calc(var(--on) * 100%), var(--gris));
}
.js #metodo .servicio-ind .servicio-ind__list,
.js #metodo .servicio-ind .svc__dur,
.js #metodo .servicio-ind .svc__link{ opacity: calc(.45 + .55 * var(--on)); }
.js #metodo .servicio-ind .servicio-ind__k,
.js #metodo .servicio-ind .svc__nombre,
.js #metodo .servicio-ind .svc__tagline,
.js #metodo .servicio-ind .servicio-ind__list,
.js #metodo .servicio-ind .svc__dur,
.js #metodo .servicio-ind .svc__link{
  transition: color .45s var(--ease-out), opacity .45s var(--ease-out);
}
.js #metodo .servicio-ind[data-on="1"]{ border-color: var(--lapis-lt); }
.js #metodo .servicio-ind[data-on="1"] .servicio-ind__icon{
  background: rgba(30,75,122,.08); color: var(--lapis);
}
.js #metodo .servicio-ind[data-cur="1"]{ box-shadow: 0 0 0 4px rgba(30,75,122,.10); }
@media (prefers-reduced-motion: reduce){
  .js #metodo .servicio-ind{ --on: 1 !important; border-color: var(--lapis-lt); transition: none; }
  .js #metodo .servicio-ind .servicio-ind__icon{
    background: rgba(30,75,122,.08); color: var(--lapis); transition: none;
  }
}

/* ---------- El mismo encendido, en el resto del sitio ----------
   Cualquier lista marcada con data-luz enciende sus elementos en orden al
   desplazar: apagados arrancan en gris y recuperan color al ser alcanzados.
   El que va en curso lleva un halo breve. site.js escribe --on, data-on y
   data-cur; sin JS no se aplica nada. */
.js [data-luz] > *{ --on: 0; }

/* Tarjetas de servicio y de portafolio */
.js [data-luz] .svcx__icon{
  background: var(--hueso-sv); color: var(--gris);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out),
              transform .35s var(--ease-out);
}
.js [data-luz] [data-on="1"] .svcx__icon{ background: rgba(26,104,88,.08); color: var(--verde); }
.js [data-luz] .svcx--lapis[data-on="1"] .svcx__icon{ background: rgba(30,75,122,.08); color: var(--lapis); }
.js [data-luz] .svcx__k{ color: color-mix(in srgb, var(--verde) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .svcx__h{ color: color-mix(in srgb, var(--tinta) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .svcx__t{ color: color-mix(in srgb, var(--pizarra) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .svcx__paso--lapis{ color: color-mix(in srgb, var(--lapis) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .svcx__paso--lapis::before{ color: color-mix(in srgb, var(--lapis-lt) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .svcx__d{
  color: color-mix(in srgb, var(--lapis) calc(var(--on) * 100%), var(--gris));
  border-top-color: color-mix(in srgb, var(--linea) calc(var(--on) * 100%), var(--hueso-sv));
}
.js [data-luz] [data-cur="1"] .svcx__a{ box-shadow: 0 0 0 3px rgba(62,133,117,.16); }

/* Entregables de cada servicio */
.js [data-luz] .entreg__i::before{
  border-color: color-mix(in srgb, var(--verde) calc(var(--on) * 100%), var(--gris));
}
.js [data-luz] .entreg__i b{ color: color-mix(in srgb, var(--tinta) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .entreg__i span{ color: color-mix(in srgb, var(--pizarra) calc(var(--on) * 100%), var(--gris)); }
/* El entregable marcado enciende en azul: el encendido pinta el título con una
   mezcla y sobrescribe al color del bloque, así que se repite aquí en lazuli. */
.js [data-luz] .entreg__i.tono-lapis b{ color: color-mix(in srgb, var(--lapis-lt) calc(var(--on) * 100%), var(--gris)); }
.js [data-luz] .entreg__i[data-cur="1"]{ box-shadow: 0 0 0 3px rgba(62,133,117,.16); }

/* Transiciones del encendido */
.js [data-luz] .svcx__a, .js [data-luz] .entreg__i{
  transition: border-color .2s ease, transform .35s var(--ease-out), box-shadow .45s var(--ease-out);
}
.js [data-luz] .svcx__k, .js [data-luz] .svcx__h, .js [data-luz] .svcx__t,
.js [data-luz] .svcx__d, .js [data-luz] .entreg__i b, .js [data-luz] .entreg__i span{
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .js [data-luz] > *{ --on: 1 !important; }
  .js [data-luz] .svcx__icon{ background: rgba(26,104,88,.08); color: var(--verde); transition: none; }
  .js [data-luz] [data-cur="1"] .svcx__a,
  .js [data-luz] .entreg__i[data-cur="1"]{ box-shadow: none; }
}

/* ---------- Auditoría en el índice de servicios ----------
   Es el servicio independiente: conserva el azul con el que aparece en el método
   del inicio, apagada y encendida, para que se distinga de las cinco fases. */
html:not(.js) .svcx__a[data-ico="x"] .svcx__icon{ background: rgba(30,75,122,.08); color: var(--lapis); }
html:not(.js) .svcx__a[data-ico="x"] .svcx__k{ color: var(--lapis); }
.svcx__a[data-ico="x"]:hover{ border-color: var(--lapis); }
.js [data-luz] .svcx__a[data-ico="x"]{
  /* Mismo velo translúcido que en el inicio: entra con el encendido y se va al apagarse */
  background-image: linear-gradient(rgba(30,75,122,calc(var(--on) * .08)), rgba(30,75,122,calc(var(--on) * .08)));
}
.js [data-luz] .svcx__a[data-ico="x"] .svcx__k{
  color: color-mix(in srgb, var(--lapis) calc(var(--on) * 100%), var(--gris));
}
.js [data-luz] [data-on="1"] .svcx__a[data-ico="x"] .svcx__icon{
  background: rgba(30,75,122,.08); color: var(--lapis);
}
.js [data-luz] [data-cur="1"] .svcx__a[data-ico="x"]{ box-shadow: 0 0 0 3px rgba(30,75,122,.16); }
@media (prefers-reduced-motion: reduce){
  .js [data-luz] .svcx__a[data-ico="x"] .svcx__icon{ background: rgba(30,75,122,.08); color: var(--lapis); }
}

/* ---------- Condiciones del diagnóstico ----------
   Mismo texto, mismo formato y una sola línea en todas las secciones: encabezado,
   siguiente paso y las bandas de llamada a la acción de las páginas interiores.
   Solo se permite que corra a dos líneas por debajo de 480 px, donde forzarla
   desbordaría la pantalla. */
.cond{
  font-family: var(--font-mo); font-size: 13px; letter-spacing: .02em;
  color: var(--verde); margin-top: 10px;
}
@media (min-width: 481px){ .cond{ white-space: nowrap; } }
.on-dark .cond, .cta-band .cond{ color: var(--mint); }
.cond--hero{ margin-top: 18px; font-size: 13.5px; }
@media (max-width: 480px){ .cond{ font-size: 12.5px; line-height: 1.5; } }

/* ---------- Fotografía de fondo en la entrada de cada servicio ----------
   La imagen de la fase, muy tenue, detrás del texto: da contexto sin competir
   con la lectura. Se desvanece hacia abajo para que la ficha de datos quede
   sobre fondo limpio. La ruta de la imagen llega en --foto desde el HTML. */
.svc-hero{ position: relative; overflow: hidden; }
.svc-hero::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--foto); background-size: cover; background-position: center;
  opacity: .135;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 34%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0 34%, transparent 78%);
}
.svc-hero > .wrap{ position: relative; z-index: 1; }
/* En vertical la entrada es mucho más alta: la foto se baja aún más para no competir */
@media (max-width: 720px){ .svc-hero::before{ opacity: .115; } }
@media print{ .svc-hero::before{ display: none; } }

/* ══════════════════════════════════════════════════════════════════
   BLOG · formato editorial
   Tres vistas: /blog/ (destacado + lista), /blog/todos/ (archivo con
   filtros y búsqueda) y el artículo. Usa los mismos tokens del sitio.
   ══════════════════════════════════════════════════════════════════ */
.art-wrap{ width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--pad-h); }

/* ---------- Artículo: entrada ---------- */
.art-hero{ background: var(--hueso-sv); padding: 48px 0 56px; }
.art-tags{ display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.art-cat{
  font-family: var(--font-mo); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--verde); border: 1px solid var(--verde); border-radius: 3px; padding: 4px 10px;
}
.art-num{
  font-family: var(--font-mo); font-size: 10px; letter-spacing: .14em;
  color: var(--pizarra); border: 1px solid var(--linea); border-radius: 3px; padding: 4px 10px;
}
.art-title{ font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; text-wrap: normal; margin-bottom: 20px; }
.art-sub{ font-size: 17px; line-height: 1.65; color: var(--pizarra); max-width: 52ch; margin-bottom: 24px; }
.art-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 20px; border-top: 1px solid var(--linea); }
.art-dot{ color: var(--linea); }
.art-dato{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .04em; color: var(--pizarra); }
.prose p.art-firma{ margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--linea); text-align: right; font-family: var(--font-mo); font-size: 11px; letter-spacing: .06em; color: var(--gris-txt); }

/* ---------- Artículo: fotografía de cabecera ---------- */
.art-foto{ width: 100%; max-width: 800px; margin: -32px auto 0; padding: 0 var(--pad-h); }
.art-foto figure{ margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 40px rgba(26,33,40,.12); }
.art-foto img{ display: block; width: 100%; height: auto; }

/* ---------- Artículo: cuerpo ---------- */
.art-body{ padding: 52px 0 0; }
.art-body .prose{ max-width: 720px; }
.art-body h2{
  font-family: var(--font-pf); font-weight: 700; font-size: 24px; line-height: 1.25;
  color: var(--tinta); margin: 44px 0 16px;
}
.art-body p{ font-size: 16.5px; line-height: 1.78; color: var(--pizarra); margin-bottom: 20px; }
.art-body p strong{ color: var(--tinta); font-weight: 500; }
.pullquote{
  margin: 36px 0; padding: 26px 30px;
  border-left: 3px solid var(--verde); background: var(--hueso-sv);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pullquote p{
  font-family: var(--font-pf); font-style: italic; font-size: 21px; line-height: 1.4;
  color: var(--tinta); margin: 0;
}

/* ---------- Artículo: también puede interesarte ---------- */
.art-related{ padding: 56px 0 80px; }
.related-hd{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pizarra); border-bottom: 1px solid var(--linea); padding-bottom: 16px; margin-bottom: 28px;
}
.related-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.r-card{
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--linea); border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s ease, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.r-card:hover{ border-color: var(--verde); box-shadow: 0 8px 24px rgba(26,33,40,.08); transform: translateY(-2px); }
.r-thumb{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hueso); }
.r-thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.r-body{ display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.r-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.r-cat{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); }
.r-num{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .1em; color: var(--gris-txt); }
.r-title{ font-family: var(--font-pf); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--tinta); text-wrap: balance; transition: color .2s ease; }
.r-card:hover .r-title{ color: var(--verde); }
.r-meta{ font-family: var(--font-mo); font-size: 11px; color: var(--pizarra); }

/* ---------- /blog/ : destacado + lista lateral ---------- */
.blog-hd{
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  border-bottom: 1px solid var(--linea); padding-bottom: 20px; margin-bottom: 48px;
}
.blog-hd__h1{ font-size: clamp(28px, 3.2vw, 36px); }
.blog-hd__link{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pizarra); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--gris); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.blog-hd__link:hover{ color: var(--verde); border-color: var(--verde); }
.blog-grid{ display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 48px; align-items: start; }

.feat__img{ display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--hueso); }
.feat__img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.feat__img:hover img{ transform: scale(1.02); }
.feat__body{ padding-top: 28px; }
.feat__badge{
  display: inline-block; background: var(--verde); color: var(--blanco);
  font-family: var(--font-mo); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.feat__num{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .14em; color: var(--gris-txt); margin: 10px 0 12px; }
.feat__h{ font-family: var(--font-pf); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; text-wrap: balance; margin-bottom: 14px; }
.feat__h a{ color: var(--tinta); text-decoration: none; transition: color .2s ease; }
.feat__h a:hover{ color: var(--verde); }
.feat__t{ font-size: 15.5px; line-height: 1.7; color: var(--pizarra); max-width: 54ch; }
.feat__meta{ font-family: var(--font-mo); font-size: 11px; letter-spacing: .04em; color: var(--pizarra); margin: 20px 0 28px; }

.blog-side{ border-left: 1px solid var(--linea); padding-left: 40px; }
.blog-side__hd{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pizarra); border-bottom: 1px solid var(--linea); padding-bottom: 20px;
}
.blog-side__hd a{ color: var(--verde); text-decoration: none; font-size: 10px; letter-spacing: .12em; }
.blog-side__hd a:hover{ color: var(--verde-dk); }
.s-item{
  display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit;
}
.s-item:last-child{ border-bottom: none; }
.s-thumb{ display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--hueso); }
.s-thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.s-txt{ display: flex; flex-direction: column; gap: 6px; }
.s-cat{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); }
.s-num{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .1em; color: var(--gris-txt); }
.s-title{ font-family: var(--font-pf); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--tinta); transition: color .2s ease; }
.s-item:hover .s-title{ color: var(--verde); }
.s-meta{ font-family: var(--font-mo); font-size: 11px; color: var(--pizarra); }

/* ---------- /blog/todos/ : archivo ---------- */
.arch-top{ padding: 48px 0 68px; }
.crumbs--dk{ color: rgba(238,237,233,.7); }
.crumbs--dk a{ color: rgba(238,237,233,.7); }
.crumbs--dk a:hover{ color: var(--mint); }
.crumbs--dk span[aria-current]{ color: var(--hueso); }
.arch-top__h1{ color: var(--hueso); margin-bottom: 8px; }
.arch-top__sub{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(174,182,188,.75);
}
.arch-busca{ max-width: 520px; margin: 32px 0 -52px; }
.arch-busca__i{
  width: 100%; font-family: var(--font-dm); font-size: 15px; color: var(--tinta);
  background: var(--blanco); border: none; border-radius: var(--radius);
  padding: 14px 20px; box-shadow: 0 4px 20px rgba(26,33,40,.25);
}
.arch-busca__i::placeholder{ color: var(--gris-txt); }
.arch-busca__i:focus{ outline: 2px solid var(--mint); outline-offset: 2px; }
.arch-body{ background: var(--hueso-sv); }
.arch-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.pill{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pizarra); background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 20px; padding: 7px 16px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pill:hover{ border-color: var(--verde-lt); color: var(--verde); }
.pill.is-on{ background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.arch-cuenta{
  font-family: var(--font-mo); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pizarra); border-bottom: 1px solid var(--linea); padding-bottom: 16px; margin-bottom: 28px;
}
.arch-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.arch-vacio{
  grid-column: 1 / -1; padding: 48px; text-align: center;
  font-family: var(--font-mo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pizarra);
}

/* ---------- Tarjeta de artículo (archivo y principal) ---------- */
.a-card{ display: flex; }
.a-card__a{
  display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s ease, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.a-card__a:hover{ border-color: var(--verde); box-shadow: 0 10px 28px rgba(26,33,40,.1); transform: translateY(-3px); }
.a-card__img{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hueso); }
.a-card__img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.a-card__a:hover .a-card__img img{ transform: scale(1.03); }
.a-card__body{ display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.a-card__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a-card__cat{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); }
.a-card__num{ font-family: var(--font-mo); font-size: 10px; letter-spacing: .1em; color: var(--gris-txt); }
.a-card__h{ font-family: var(--font-pf); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--tinta); text-wrap: balance; transition: color .2s ease; }
.a-card__a:hover .a-card__h{ color: var(--verde); }
.a-card__t{ font-size: 14px; line-height: 1.6; color: var(--pizarra); flex: 1; }
.a-card__pie{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linea);
}
.a-card__meta{ font-family: var(--font-mo); font-size: 11px; color: var(--pizarra); }
.a-card__flecha{ color: var(--verde); transition: transform .3s var(--ease-out); }
.a-card__a:hover .a-card__flecha{ transform: translateX(3px); }

/* ---------- Adaptación a pantallas menores ---------- */
@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr; gap: 40px; }
  .blog-side{ border-left: none; border-top: 1px solid var(--linea); padding-left: 0; padding-top: 24px; }
  .arch-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .arch-grid{ grid-template-columns: 1fr; }
  .related-grid{ grid-template-columns: 1fr; }
  .art-foto{ margin-top: -20px; }
  .art-hero{ padding: 36px 0 44px; }
  .arch-busca{ margin-bottom: -46px; }
}
@media (prefers-reduced-motion: reduce){
  .feat__img:hover img, .a-card__a:hover .a-card__img img, .a-card__a:hover .a-card__flecha{ transform: none; }
  .a-card__a:hover, .r-card:hover{ transform: none; }
}
/* El enlace al detalle sigue a la Auditoría sin aire adicional */
#metodo .servicio-ind{ margin-bottom: 12px; }
#metodo .section-foot{ margin-top: 12px; }

/* Del enlace "Conoce el alcance" a la bajada del blog: una cuarta parte del aire de sección */
#portafolio{ padding-bottom: calc(var(--pad-sec) / 4); }
#blog{ padding-top: calc(var(--pad-sec) / 4); }

/* ---------- Método anclado, según la referencia ----------
   Se fija el bloque completo: encabezado, las cinco fases y la Auditoría. La pista
   mide 230vh, que con seis momentos da ~235 px de scroll por momento, el ritmo de
   la referencia (245 px con cinco).

   El aire interno del bloque se gobierna con --k (1 = aire completo, 0 = mínimo).
   site.js baja --k lo justo para que el bloque quepa bajo la cabecera, así el
   anclaje funciona en cualquier altura de ventana en vez de desactivarse. */
.metodo__track{ position: relative; }
/* El método arranca pegado a lo anterior: mientras no está anclado, la sección
   no necesita el aire completo arriba y así el bloque entero cabe en pantalla. */
@media (min-width: 981px){ .js #metodo{ padding-top: calc(var(--pad-sec) / 3); } }
@media (min-width: 981px){
  .js #metodo .metodo__track{ height: 230vh; }
  .js #metodo .metodo__stage{
    --k: 1;
    position: sticky; top: var(--header-h);
    display: flex; flex-direction: column;
    padding: calc(6px * var(--k)) 0 calc(20px * var(--k));
  }
  /* Los marcadores sobresalen 20px sobre las tarjetas: el margen los descuenta
     para que la separación visible con la entradilla sea de 0.5cm como mínimo */
  .js #metodo .metodo__stage .section-head{ margin-bottom: calc(20px + 0.5cm + 13px * var(--k)); }
  .js #metodo .metodo__stage .servicios{ margin: 0; }
  .js #metodo .metodo__stage .svc{
    padding: calc(16px + 16px * var(--k)) 20px calc(8px + 12px * var(--k));
  }
  .js #metodo .metodo__stage .svc__list{ gap: calc(3px + 4px * var(--k)); }
  .js #metodo .metodo__stage .svc__dur{ padding-top: calc(4px + 8px * var(--k)); }
  .js #metodo .metodo__stage .servicio-ind{
    margin: calc(6px + 10px * var(--k)) 0 0;
    padding: calc(8px + 12px * var(--k)) 22px;
  }
}
@media (prefers-reduced-motion: reduce){
  .js #metodo .metodo__track{ height: auto; }
  .js #metodo .metodo__stage{ position: static; display: block; padding: 0; }
  .js #metodo .metodo__stage .section-head{ margin-bottom: 48px; }
  .js #metodo .metodo__stage .servicios{ margin: 40px 0 24px; }
  .js #metodo .metodo__stage .svc{ padding: 32px 20px 20px; }
  .js #metodo .metodo__stage .svc__list{ gap: 7px; }
  .js #metodo .metodo__stage .servicio-ind{ margin: 0 0 12px; padding: 28px; }
}


/* ---------- Consentimiento de cookies: banner y panel ---------- */
/* El fondo del banner es blanco y el de la página también: sin un borde
   visible no se lee como pieza aparte, y la sombra sola no basta. Con la
   línea neutra quedaba a 1.28 de contraste contra la página. Va en lapis,
   el azul del sitio: dentro del sitio conviene un solo azul. */
.cookies{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--blanco); border-top: 2px solid var(--lapis);
  box-shadow: 0 -6px 24px rgba(26,33,40,.10);
}
/* La animación es adorno, no posición: sin "both", si no corre, el banner
   se queda en su sitio natural. De ella depende poder consentir. */
@media (prefers-reduced-motion: no-preference){
  .cookies{ animation: cookies-in .28s var(--ease-out); }
}
@keyframes cookies-in{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
.cookies__in{
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 24px;
}
.cookies__txt{
  margin: 0; flex: 1 1 auto;
  font-family: var(--font-dm); font-size: 13.5px; line-height: 1.6; color: var(--gris-txt);
}
.cookies__txt a{ color: var(--verde); text-decoration: underline; }
.cookies__btns{ display: flex; gap: 10px; flex: 0 0 auto; }
.cookies__b{
  min-height: 42px; min-width: 116px; padding: 0 22px;
  font-family: var(--font-dm); font-size: 14px; font-weight: 500;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--tinta); border-radius: 4px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cookies__b:hover{ background: var(--tinta); color: var(--blanco); }
.cookies__b:focus-visible{ outline: 2px solid var(--verde); outline-offset: 2px; }

.cookies-mod{
  position: fixed; inset: 0; z-index: 500;
  background: rgba(26,33,40,.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cookies-mod__caja{
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--blanco); border: 1px solid var(--lapis); border-radius: 8px;
  /* Sin relleno abajo: ese espacio lo pone la fila de botones, que va pegada
     al fondo. Dejarlo aqui abria un hueco por el que se veia el texto
     desplazandose por debajo de los botones. */
  padding: 28px 28px 0;
  box-shadow: 0 18px 48px rgba(26,33,40,.26);
}
.cookies-mod__t{
  margin: 0 0 18px; font-family: var(--font-pf); font-size: 22px; color: var(--tinta);
}
.cookies-mod__f{ padding: 14px 0; border-top: 1px solid var(--linea); }
/* Arriba y no al centro: los nombres de las casillas de analitica ocupan dos
   renglones en un telefono, y centrada la casilla queda flotando entre los
   dos. El desplazamiento la deja a la altura del primer renglon, que es al
   que pertenece. */
.cookies-mod__f label{
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-dm); font-size: 14.5px; line-height: 1.65; color: var(--tinta);
}
.cookies-mod__f label input{ margin-top: 4px; flex: 0 0 auto; }
.cookies-mod__f p{
  margin: 6px 0 0 26px;
  font-family: var(--font-dm); font-size: 13px; line-height: 1.55; color: var(--gris-txt);
}
.cookies-mod__f code{ font-family: var(--font-mo); font-size: 12px; }
/* Pegada al fondo del cuadro: con dos casillas el panel no cabe entero en un
   telefono corto y «Guardar» quedaba fuera de vista, sin barra ni nada que
   avisara de que habia que desplazar. El fondo blanco es necesario, no
   decorativo: sin el, el texto se desplaza por debajo y se lee encima. */
.cookies-mod__btns{
  position: sticky; bottom: 0; background: var(--blanco);
  display: flex; justify-content: flex-end; gap: 10px;
  margin: 22px -28px 0; padding: 18px 28px 28px;
  border-top: 1px solid var(--linea);
}

/* La version corta del texto solo se ve en pantallas de telefono. Las dos
   estan en el HTML para poder elegir por CSS: asi girar el telefono cambia
   el texto sin recargar. Con display:none la que sobra tampoco llega al
   lector de pantalla, que es lo correcto: lee lo mismo que se ve, no las
   dos versiones seguidas. */
.cookies__corto{ display: none; }

@media (max-width: 720px){
  .cookies__in{ flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 20px 15px; }
  .cookies__btns{ justify-content: stretch; }
  .cookies__b{ flex: 1 1 0; padding: 0 12px; }
  /* Los dos botones siguen midiendo lo mismo y pesando lo mismo: rechazar
     tiene que costar exactamente lo que cuesta aceptar. */
  .cookies__largo{ display: none; }
  .cookies__corto{ display: inline; }
  .cookies__txt{ font-size: 13px; line-height: 1.45; }
}
@media print{
  .cookies, .cookies-mod{ display: none; }
}

/* El banner de cookies comparte esquina con el botón de WhatsApp:
   --cookies-alto lo fija el guion con la altura real del banner. */
.cookies-visible .wa-float{ bottom: calc(var(--cookies-alto, 0px) + 16px); }

/* El flotante se retira cuando la barra del pie entra en pantalla: ahí
   tapaba «Preferencias de cookies», el único acceso al panel. */
.wa-float.is-oculto{
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
}
.wa-float{ transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease, visibility .2s ease; }
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition: none; }
}

/* Botón IA del menú: enlace a la herramienta, con un realce discreto
   para que se lea como pieza aparte sin competir con el CTA. */
.nav__link--ia{
  border: 1px solid var(--verde-lt); border-radius: 999px;
  padding: 5px 14px; color: var(--verde);
  letter-spacing: .08em; font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav__link--ia:hover{ background: var(--verde); border-color: var(--verde); color: var(--blanco); }
@media (max-width: 980px){
  .nav__link--ia{ display: inline-block; margin-top: 4px; }
}