/* JRR Consultores - hoja de estilos principal */
/* ==========================================================================
   JRR CONSULTORES · Landing page
   Dirección de arte: "Expediente técnico"
   Papel milimetrado, tinta azul de sello y lápiz rojo de revisión: los
   materiales del informe económico y del expediente de inversión.
   --------------------------------------------------------------------------
   ÍNDICE
   01. Variables (design tokens)
   02. Reset y base
   03. Maquetación y componentes compartidos (botones, titulares, hoja)
   04. A · Cabecera
   05. B · Portada y Tabla 1
   06. C · Sobre nosotros
   07. D · Valores
   08. E · Servicios
   09. Metodología
   10. F · Equipo directivo
   10b. Capacitación, cursos y laboratorio
   10c. Fotografías y mira de la portada
   11. G · Banda de llamada a la acción
   12. H · Contacto y formulario
   13. I · Pie y WhatsApp flotante
   14. Animaciones (solo sin "movimiento reducido")
   15. Preferencias del usuario
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES (DESIGN TOKENS)
   ========================================================================== */
:root {
  /* --- Color: papeles --- */
  --c-papel: #F1F3EF;         /* fondo general: papel frío, ligeramente verdoso */
  --c-papel-2: #E6EBE5;       /* bandas alternas */
  --c-hoja: #FFFFFF;          /* hojas sueltas: Tabla 1 y formulario */

  /* --- Color: tintas --- */
  --c-noche: #121A4A;         /* tinta profunda: titulares, banda CTA y pie */
  --c-tinta: #1F2F86;         /* azul de sello: botones y enlaces */
  --c-texto: #1A1F2E;         /* grafito: texto corrido */
  --c-texto-2: #4A5266;       /* notas y entradillas */
  --c-texto-3: #8A93A0;       /* marcas de relleno (fotos pendientes) */
  --c-lapiz: #C7362B;         /* lápiz rojo de revisión: uso muy medido */
  --c-error: #B42E24;         /* lápiz rojo con contraste AA para texto pequeño */
  --c-ok: #24634A;            /* tinta verde de visto bueno */

  /* --- Color: reglas y cuadrícula --- */
  --c-regla: #C3CABF;         /* filetes finos */
  --c-regla-campo: #98A197;   /* línea de los campos del formulario */
  --grid-minor: rgba(46, 125, 96, .09);
  --grid-major: rgba(46, 125, 96, .17);

  /* --- Tipografía --- */
  --font-display: "Archivo", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Escala (Bringhurst: 14 · 17 · 21 · 24 · 36 · 48 · 72 …), fluida entre móvil y escritorio */
  --fs-hero: clamp(3rem, 1.5rem + 6.4vw, 7rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  /* --- Espaciado --- */
  --gutter: clamp(1rem, 5vw, 3rem);
  --container: 76rem;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --header-h: 4.25rem;

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-papel);
  color: var(--c-texto);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }
strong { font-weight: 600; }

a { color: var(--c-tinta); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--c-noche); }

:focus-visible { outline: 2px solid var(--c-tinta); outline-offset: 3px; }
main:focus { outline: none; }

::selection { background: var(--c-tinta); color: var(--c-papel); }

.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--c-noche);
  color: var(--c-papel);
  font-family: var(--font-display);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-papel); }


/* ==========================================================================
   03. MAQUETACIÓN Y COMPONENTES COMPARTIDOS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }

/* --- Titulares de sección: condensados, en tinta profunda --- */
.h2 {
  font-family: var(--font-display);
  font-stretch: 76%;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: .98;
  letter-spacing: -.005em;
  color: var(--c-noche);
  text-wrap: balance;
}

/* Cabecera de sección: titular a la izquierda, entradilla alineada a su base */
.section-head {
  display: grid;
  gap: 1rem 4rem;
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
}
.section-head__lead {
  max-width: 34rem;
  color: var(--c-texto-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 5fr 7fr; align-items: end; }
  .section-head__lead { justify-self: end; }
}

/* --- Botones: rectángulos de tinta, sin adornos --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--sm { padding: .55rem .95rem; font-size: .875rem; }
.btn--lg { padding: 1rem 1.6rem; font-size: 1.0625rem; }

.btn--ink { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-papel); }
.btn--ink:hover { background: var(--c-noche); border-color: var(--c-noche); color: var(--c-papel); }

.btn--line { border-color: var(--c-tinta); color: var(--c-tinta); }
.btn--line:hover { background: rgba(31, 47, 134, .07); color: var(--c-noche); }

.btn--paper { background: var(--c-papel); border-color: var(--c-papel); color: var(--c-noche); }
.btn--paper:hover { background: var(--c-hoja); color: var(--c-noche); }
.btn--paper:focus-visible { outline-color: var(--c-papel); }

/* --- Hoja suelta: el único elemento con sombra (papel sobre la mesa) --- */
.sheet {
  position: relative;
  background: var(--c-hoja);
  border: 1px solid #CCD2CA;
  box-shadow: 0 1px 0 #D9DED7, 0 22px 40px -26px rgba(18, 26, 74, .28);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* --- Papel milimetrado (portada y banda CTA) --- */
.hero,
.cta { position: relative; isolation: isolate; }
.hero::before,
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px;
  pointer-events: none;
}


/* ==========================================================================
   04. A · CABECERA
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-papel);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--c-regla); }

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Logotipo tipográfico: siglas condensadas + nombre en cursiva */
.brand { display: inline-flex; align-items: baseline; color: var(--c-noche); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--c-noche); }
.brand__type { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.brand__jrr {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .01em;
}
.brand__rest {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--c-texto-2);
}

.nav__link {
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 500;
  color: var(--c-texto);
  text-decoration: none;
}
.nav__link:hover { color: var(--c-tinta); }
.nav__link.is-active { color: var(--c-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }

/* Barra de progreso de lectura: un trazo de lápiz rojo bajo la cabecera */
.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-lapiz);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* Botón hamburguesa (44 × 44 px) */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  border: 1.5px solid var(--c-noche);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; background: var(--c-noche); transition: transform .25s var(--ease-out), opacity .2s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Móvil: el menú es un panel que cae bajo la barra */
.nav__menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  padding: .5rem var(--gutter) 1.75rem;
  background: var(--c-papel);
  border-bottom: 2px solid var(--c-noche);
}
.nav.is-open .nav__menu { display: block; }
.nav__menu .nav__list { display: grid; }
.nav__menu .nav__link { display: block; padding: .8rem 0; border-bottom: 1px solid var(--c-regla); font-size: 1.25rem; }
.nav__menu .nav__cta { margin-top: 1.5rem; width: 100%; }

@media (max-width: 419px) {
  .nav__cta--bar { display: none; }
}

/* Escritorio: enlaces en línea dentro de la barra */
@media (min-width: 1024px) {
  .nav__toggle, .nav__cta--bar { display: none; }
  .nav__menu,
  .nav.is-open .nav__menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav__menu .nav__list { display: flex; gap: 1.75rem; }
  .nav__menu .nav__link { display: inline; padding: 0; border: 0; font-size: .9688rem; }
  .nav__menu .nav__cta { margin-top: 0; width: auto; padding: .6rem 1.05rem; font-size: .9375rem; }
}


/* ==========================================================================
   05. B · PORTADA Y TABLA 1
   ========================================================================== */
.hero { padding-top: clamp(2.5rem, 1rem + 6vw, 6rem); }

/* La cuadrícula se desvanece hacia el pie de la portada */
.hero::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}

.hero__place {
  font-style: italic;
  font-size: 1.125rem;
  color: var(--c-texto-2);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-family: var(--font-display);
  font-stretch: 72%;
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: .9;
  letter-spacing: -.012em;
  color: var(--c-noche);
  max-width: 12.5ch;
  text-wrap: balance;
}

.hero__lead {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-texto-2);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Franja de áreas: separadas por filetes verticales, como columnas de una tabla */
.hero__areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border-top: 2px solid var(--c-noche);
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 500;
  color: var(--c-noche);
}
.hero__areas li { padding: .85rem 1rem 1.1rem 0; }
.hero__areas li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--c-regla); }
@media (min-width: 720px) {
  .hero__areas { display: flex; flex-wrap: wrap; }
  .hero__areas li { padding: .9rem 2.25rem 1.25rem; border-left: 1px solid var(--c-regla); }
  .hero__areas li:first-child { padding-left: 0; border-left: 0; }
}

/* --- Hoja con la Tabla 1 --- */
.hero__sheet { max-width: 32rem; width: 100%; justify-self: center; }

.sheet__folio {
  position: absolute;
  top: .9rem; right: 1rem;
  padding: .1rem .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--c-tinta);
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 600;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  transform: rotate(-3deg);
  opacity: .85;
}

/* Tabla de regresión con filetes estilo "booktabs" */
.reg {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1rem;
  line-height: 1.35;
}
.reg caption {
  caption-side: top;
  text-align: left;
  padding: 0 5.5rem 1rem 0;
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--c-noche);
}
.reg__name { font-weight: 800; }
.reg__dep {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: .9375rem;
  color: var(--c-texto-2);
}
.reg thead th {
  padding: .5rem 0;
  border-top: 2px solid var(--c-texto);
  border-bottom: 1px solid var(--c-texto);
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--c-texto-2);
  text-align: left;
}
.reg tbody th { padding: .6rem .75rem .6rem 0; font-weight: 400; text-align: left; }
.reg tbody td { padding: .6rem 0 .6rem .75rem; }
.reg tbody tr:first-child > * { padding-top: .85rem; }
.reg tbody tr:last-child > * { padding-bottom: .85rem; border-bottom: 2px solid var(--c-texto); }
.reg .num { text-align: right; white-space: nowrap; }
.reg .se { color: var(--c-texto-2); }

/* Estrellas con ancho fijo: los decimales quedan alineados */
.reg sup {
  display: inline-block;
  width: 2em;
  margin-right: -.35em;
  text-align: left;
  font-size: .7em;
  line-height: 0;
  vertical-align: .55em;
  color: var(--c-tinta);
}
.reg sup.ns { font-style: italic; color: var(--c-lapiz); }

.reg__flag th { color: var(--c-texto-2); }
.reg__circled { position: relative; display: inline-block; }

/* El trazo de lápiz rojo: el único momento animado de la página */
.pencil {
  position: absolute;
  top: -.75em; bottom: -.65em;
  left: -.85em; right: -.35em;
  width: calc(100% + 1.2em);
  height: calc(100% + 1.4em);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.pencil path {
  fill: none;
  stroke: var(--c-lapiz);
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazo 1.1s 1.6s cubic-bezier(.55, .1, .35, 1) forwards;
}
@keyframes trazo { to { stroke-dashoffset: 0; } }

.reg__note {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--c-texto-2);
}


/* ==========================================================================
   06. C · SOBRE NOSOTROS
   ========================================================================== */
.about__grid { display: grid; gap: 2rem 5rem; }
@media (min-width: 960px) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .about__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

.about__photo { margin-top: 2.5rem; }

.about__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 38rem; }

.pillars {
  display: grid;
  gap: 2rem 2.5rem;
  margin-block: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pillar { padding-top: calc(.9rem + 1.5px); background: linear-gradient(var(--c-noche), var(--c-noche)) no-repeat 0 0 / 100% 1.5px; }
.pillar dt {
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 650;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--c-noche);
}
.pillar dd { margin-top: .45rem; color: var(--c-texto-2); line-height: 1.55; }

.about__close {
  max-width: 38rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--c-tinta);
  font-style: italic;
  color: var(--c-texto-2);
}


/* ==========================================================================
   07. D · VALORES
   ========================================================================== */
.values { background: var(--c-papel-2); }

.values__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.value { padding-top: calc(1.25rem + 4px); background: linear-gradient(var(--c-noche), var(--c-noche)) no-repeat 0 0 / 100% 4px; }
.value__title {
  font-family: var(--font-display);
  font-stretch: 70%;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  line-height: 1;
  color: var(--c-tinta);
}
.value__text { margin-top: .85rem; max-width: 20rem; font-size: 1.125rem; color: var(--c-texto-2); }


/* ==========================================================================
   08. E · SERVICIOS (filas de un índice)
   ========================================================================== */
.services__list { border-top: 2px solid var(--c-noche); }

.service {
  display: grid;
  gap: .6rem;
  padding-block: 1.5rem;
  background: linear-gradient(var(--c-regla), var(--c-regla)) no-repeat 0 100% / 100% 1px;
  transition: background-color .25s;
}
.service:hover { background-color: rgba(31, 47, 134, .035); }
@media (min-width: 900px) {
  .service {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 9.5rem;
    gap: 3rem;
    align-items: baseline;
    padding-block: 1.75rem;
  }
}

.service__title {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 650;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--c-noche);
}
.service__sub {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--c-texto-2);
}
.service__text { max-width: 36rem; color: var(--c-texto-2); }
.service__link {
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  justify-self: start;
}


/* ==========================================================================
   09. METODOLOGÍA (la línea se dibuja con el scroll; JS fija --p y .is-reached)
   ========================================================================== */
.training { background: var(--c-papel-2); }

.method { position: relative; --p: 0; }
.method__track {
  position: absolute;
  background: var(--c-regla);
  top: 1.25rem; bottom: 1.25rem; left: calc(1.25rem - 1px);
  width: 2px;
}
.method__fill {
  position: absolute;
  inset: 0;
  background: var(--c-tinta);
  transform: scaleY(var(--p));
  transform-origin: top;
}

.method__steps { display: grid; gap: 2.5rem; }
.method__step { position: relative; padding-left: 4rem; }

.method__node {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 2px solid var(--c-regla);
  border-radius: 50%;
  background: var(--c-papel);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-texto-2);
  transition: background-color .35s, border-color .35s, color .35s;
}
.method__step.is-reached .method__node { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-papel); }

.method__title {
  padding-top: .35rem;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 650;
  font-size: 1.3125rem;
  line-height: 1.2;
  color: var(--c-noche);
}
.method__text { margin-top: .6rem; color: var(--c-texto-2); }

@media (min-width: 900px) {
  .method__track { top: calc(1.25rem - 1px); bottom: auto; left: 1.25rem; right: 1.25rem; width: auto; height: 2px; }
  .method__fill { transform: scaleX(var(--p)); transform-origin: left; }
  .method__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
  .method__step { padding-left: 0; padding-top: 4rem; }
  .method__title { padding-top: 0; }
}


/* ==========================================================================
   10. F · EQUIPO DIRECTIVO (fichas con espacio para foto carné)
   ========================================================================== */
.team__grid { display: grid; gap: 2.75rem 2.5rem; }
@media (min-width: 640px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.member__photo {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-papel-2);
  border: 1px dashed var(--c-regla-campo);
}
.member__photo svg { width: 42%; fill: none; stroke: var(--c-texto-3); stroke-width: 1.1; stroke-linecap: round; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }

.member__role {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 650;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--c-noche);
}
.member__text { margin-top: .5rem; max-width: 22rem; color: var(--c-texto-2); }

/* Móvil: foto carné pequeña al lado del texto */
@media (max-width: 639px) {
  .member { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .member__photo { grid-row: span 2; }
  .member__role { margin-top: 0; }
}


/* ==========================================================================
   11. G · BANDA DE LLAMADA A LA ACCIÓN (milimetrado en blanco sobre tinta)
   ========================================================================== */
.cta {
  --grid-minor: rgba(241, 243, 239, .05);
  --grid-major: rgba(241, 243, 239, .1);
  padding-block: clamp(4rem, 2rem + 7vw, 7rem);
  background: var(--c-noche);
  color: var(--c-papel);
}

.cta__inner { display: grid; gap: 2rem 5rem; align-items: end; }
@media (min-width: 960px) { .cta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.cta__title {
  font-family: var(--font-display);
  font-stretch: 74%;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  line-height: .98;
  text-wrap: balance;
}
.cta__text { max-width: 28rem; margin-bottom: 1.75rem; font-size: 1.125rem; color: rgba(241, 243, 239, .8); }


/* ==========================================================================
   12. H · CONTACTO Y FORMULARIO
   ========================================================================== */
.contact { background: var(--c-papel-2); }

.contact__grid { display: grid; gap: 3rem 5rem; align-items: start; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.contact__lead { margin-top: 1.25rem; max-width: 30rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-texto-2); }

.contact__list { margin-top: 2.25rem; border-top: 2px solid var(--c-noche); }
.contact__item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: .9rem;
  border-bottom: 1px solid var(--c-regla);
}
.contact__item dt { font-family: var(--font-display); font-stretch: 90%; font-weight: 500; font-size: .9375rem; color: var(--c-texto-2); }
.contact__item dd { font-size: 1.125rem; overflow-wrap: anywhere; }

/* --- Formulario: renglones para llenar a mano --- */
.form__row { display: grid; gap: 0 1.75rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { margin-bottom: 1.1rem; }
.field__label {
  display: block;
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--c-noche);
}
.field__input {
  display: block;
  width: 100%;
  padding: .55rem 0 .5rem;
  border: 0;
  border-bottom: 1.5px solid var(--c-regla-campo);
  border-radius: 0;
  background: transparent;
  color: var(--c-texto);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color .2s, box-shadow .2s;
}
.field__input::placeholder { color: #737B87; opacity: 1; }
.field__input:focus { outline: none; border-bottom-color: var(--c-tinta); box-shadow: 0 1.5px 0 var(--c-tinta); }

/* El mensaje se escribe sobre renglones */
textarea.field__input {
  resize: vertical;
  min-height: calc(10rem + 1.5px);
  padding: 0;
  line-height: 2rem;
  background-image: linear-gradient(transparent calc(2rem - 1px), #DCE1DA calc(2rem - 1px));
  background-size: 100% 2rem;
  background-attachment: local;
}

.field.has-error .field__input { border-bottom-color: var(--c-error); }
.field.has-error .field__input:focus { box-shadow: 0 1.5px 0 var(--c-error); }
.field__error {
  display: block;
  min-height: 1.3rem;
  margin-top: .3rem;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--c-error);
}

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .75rem; }
.form__note { font-style: italic; font-size: var(--fs-small); color: var(--c-texto-2); }

.form__status { margin-top: 1.25rem; padding-left: .9rem; border-left: 3px solid var(--c-tinta); font-size: .9688rem; }
.form__status:empty { display: none; }
.form__status.is-ok { border-left-color: var(--c-ok); color: var(--c-ok); }
.form__status.is-error { border-left-color: var(--c-error); color: var(--c-error); }

/* Autocompletado del navegador sin fondo amarillo */
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--c-hoja) inset; -webkit-text-fill-color: var(--c-texto); }


/* ==========================================================================
   13. I · PIE Y WHATSAPP FLOTANTE
   ========================================================================== */
.site-footer {
  padding-block: 3rem 2.5rem;
  background: var(--c-noche);
  color: rgba(241, 243, 239, .72);
  border-top: 1px solid rgba(241, 243, 239, .12);
}
.footer__grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 960px) { .footer__grid { grid-template-columns: auto 1fr auto; gap: 3rem; } }

.brand--footer, .brand--footer:hover { color: var(--c-papel); margin-right: 0; }
.brand--footer .brand__rest { color: rgba(241, 243, 239, .7); }

.footer__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__nav a {
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 500;
  font-size: .9375rem;
  color: rgba(241, 243, 239, .8);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--c-papel); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--c-papel); }
.footer__legal { font-size: var(--fs-small); }
.footer__credit { opacity: .75; }
.footer__credit a { color: inherit; }

.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .45rem;
  border-radius: 999px;
  background: var(--c-noche);
  color: var(--c-papel);
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(18, 26, 74, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity .3s, transform .3s var(--ease-out), visibility 0s .3s;
}
.wa-float.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wa-float:hover { color: var(--c-papel); background: var(--c-tinta); }
.wa-float svg { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; background: #25D366; fill: #fff; }
@media (max-width: 479px) {
  .wa-float { padding-right: .45rem; }
  .wa-float__label { display: none; }
}


/* ==========================================================================
   10b. CAPACITACIÓN, CURSOS Y LABORATORIO
   ========================================================================== */
.training__intro { display: grid; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) { .training__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.training__facts { border-top: 2px solid var(--c-noche); }
.training__facts div { padding-block: 1rem; border-bottom: 1px solid var(--c-regla); }
.training__facts dt { font-family: var(--font-display); font-stretch: 88%; font-weight: 650; font-size: 1.125rem; color: var(--c-noche); }
.training__facts dd { margin-top: .25rem; color: var(--c-texto-2); }

/* Filtros por área */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  padding: .5rem .95rem;
  border: 1.5px solid var(--c-regla-campo);
  border-radius: 2px;
  background: transparent;
  color: var(--c-texto);
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.filter:hover { border-color: var(--c-noche); }
.filter[aria-pressed="true"] { background: var(--c-noche); border-color: var(--c-noche); color: var(--c-papel); }
.filters__count { margin: .9rem 0 1.5rem; font-style: italic; font-size: var(--fs-small); color: var(--c-texto-2); }

/* Fichas de curso: cada área lleva el color de un sello distinto */
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.25rem; }
.course {
  --sello: var(--c-tinta);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.25rem;
  background: var(--c-hoja);
  border: 1px solid #D5DAD3;
  border-top: 3px solid var(--sello);
  transition: border-color .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.course:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(18, 26, 74, .45); }
.course[hidden] { display: none; }
.course[data-area="economia"] { --sello: #24634A; }
.course[data-area="econometria"] { --sello: var(--c-lapiz); }
.course[data-area="proyectos"] { --sello: #8A6418; }
.course[data-area="datos"] { --sello: #5B3F8C; }

.course__area { font-family: var(--font-display); font-stretch: 90%; font-weight: 600; font-size: .8125rem; color: var(--sello); }
.course__title {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 650;
  font-size: 1.3125rem;
  line-height: 1.15;
  color: var(--c-noche);
}
.course__text { margin-top: .6rem; font-size: 1rem; line-height: 1.55; color: var(--c-texto-2); }

.course__more { margin-top: 1rem; border-top: 1px solid var(--c-regla); }
.course__more summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: .7rem;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--c-tinta);
  cursor: pointer;
  list-style: none;
}
.course__more summary::-webkit-details-marker { display: none; }
.course__more summary::after { content: "+"; font-size: 1.25rem; line-height: 1; transition: transform .3s var(--ease-out); }
.course__more[open] summary::after { transform: rotate(45deg); }
.course__more ul { padding-bottom: .5rem; }
.course__more li { position: relative; padding: .2rem 0 .2rem 1rem; font-size: .9688rem; color: var(--c-texto); }
.course__more li::before { content: ""; position: absolute; left: 0; top: .78em; width: .4rem; height: .4rem; background: var(--sello); }
.course__more[open] ul { animation: desplegar .35s var(--ease-out); }

.course__cta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-weight: 600;
  font-size: .9375rem;
}

/* Al cambiar de filtro, las fichas que quedan entran con un leve ascenso */
.course.is-entering { animation: aparecer .45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 45ms); }

/* --- Laboratorio de econometría --- */
.lab { display: grid; gap: 2rem 3rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .lab { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.lab__title {
  font-family: var(--font-display);
  font-stretch: 78%;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--c-noche);
}
.lab__text { margin-top: 1rem; color: var(--c-texto-2); }

.lab__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; border-top: 2px solid var(--c-texto); }
.lab__stats div { padding: .7rem 0 .8rem; border-bottom: 1px solid var(--c-regla); }
.lab__stats div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--c-regla); }
.lab__stats dt { font-family: var(--font-display); font-stretch: 90%; font-weight: 500; font-size: .8125rem; color: var(--c-texto-2); }
.lab__stats dd {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--c-tinta);
}
.lab__read { min-height: 3.2em; margin-top: 1rem; font-style: italic; font-size: .9688rem; color: var(--c-texto-2); }
.lab__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* El gráfico se apoya sobre papel milimetrado */
.lab__plot {
  background-color: #FBFCFA;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  border: 1px solid var(--c-regla);
}
.lab__svg { width: 100%; height: auto; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lab__svg text { font-family: var(--font-display); font-size: 12px; fill: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.lab__axis { stroke: var(--c-texto); stroke-width: 1.5; fill: none; }
.lab__fit { stroke: var(--c-tinta); stroke-width: 3; stroke-linecap: round; }
.lab__resid { stroke: var(--c-lapiz); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .75; }
.lab__pt { cursor: grab; touch-action: none; outline: none; }
.lab__pt .hit { fill: transparent; }
.lab__pt .dot { fill: var(--c-tinta); stroke: var(--c-hoja); stroke-width: 2; transition: r .15s; }
.lab__pt.is-outlier .dot { fill: var(--c-lapiz); }
.lab__pt:hover .dot, .lab__pt.is-drag .dot { r: 9; }
.lab__pt.is-drag { cursor: grabbing; }
.lab__pt:focus-visible .ring { stroke: var(--c-tinta); stroke-width: 2; fill: none; }
.lab__pt .ring { fill: none; stroke: transparent; }
.lab__pt.is-new .dot { animation: brotar .4s var(--ease-out); }


/* ==========================================================================
   10c. FOTOGRAFÍAS Y MIRA DE LA PORTADA
   ========================================================================== */
.photo img { width: 100%; height: auto; background: var(--c-papel-2); }
.photo figcaption { margin-top: .6rem; font-style: italic; font-size: var(--fs-small); color: var(--c-texto-2); }
.training__photo img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Mira con coordenadas sobre el milimetrado de la portada --- */
.hero__cursor { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; }
.hero.is-pointing .hero__cursor { opacity: 1; }
.hero__cx, .hero__cy { position: absolute; background: rgba(31, 47, 134, .28); }
.hero__cx { top: 0; bottom: 0; left: var(--cx, 50%); width: 1px; }
.hero__cy { left: 0; right: 0; top: var(--cy, 50%); height: 1px; }
.hero__coord {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  transform: translate(.55rem, -1.65rem);
  padding: .05rem .35rem;
  background: var(--c-papel);
  font-family: var(--font-display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-tinta);
  white-space: nowrap;
}


/* ==========================================================================
   14. ANIMACIONES
   Solo se activan con JavaScript (clase .js) y sin "movimiento reducido".
   JS añade .is-in a cada bloque cuando entra en pantalla.
   ========================================================================== */
@keyframes aparecer { from { opacity: 0; transform: translateY(.9rem); } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-.4rem); } }
@keyframes brotar { from { r: 0; } }
@keyframes alzar { from { clip-path: inset(-10% -30% 100% -5%); transform: translateY(.25em); } to { clip-path: inset(-10% -30% -15% -5%); } }

@media (prefers-reduced-motion: no-preference) {
  /* Portada: titular, entradilla, Tabla 1 fila por fila y, al final, el lápiz */
  .js .hero__place { animation: aparecer .7s var(--ease-out) both; }
  .js .hero__title { animation: alzar 1s .1s var(--ease-out) both; }
  .js .hero__lead { animation: aparecer .8s .35s var(--ease-out) both; }
  .js .hero__actions { animation: aparecer .8s .45s var(--ease-out) both; }
  .js .hero__sheet { animation: aparecer 1s .45s var(--ease-out) both; }
  .js .reg tbody tr { animation: aparecer .6s var(--ease-out) both; }
  .js .reg tbody tr:nth-child(1) { animation-delay: .75s; }
  .js .reg tbody tr:nth-child(2) { animation-delay: .9s; }
  .js .reg tbody tr:nth-child(3) { animation-delay: 1.05s; }
  .js .reg tbody tr:nth-child(4) { animation-delay: 1.2s; }
  .js .hero__areas li { animation: aparecer .7s var(--ease-out) both; }
  .js .hero__areas li:nth-child(1) { animation-delay: .7s; }
  .js .hero__areas li:nth-child(2) { animation-delay: .78s; }
  .js .hero__areas li:nth-child(3) { animation-delay: .86s; }
  .js .hero__areas li:nth-child(4) { animation-delay: .94s; }
  .js .hero__areas li:nth-child(5) { animation-delay: 1.02s; }

  /* Cabeceras de sección */
  .js .section-head > * { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .js .section-head > :nth-child(2) { transition-delay: .12s; }
  .js .section-head:not(.is-in) > * { opacity: 0; transform: translateY(1.1rem); }

  /* Filetes que se trazan de izquierda a derecha */
  .js .pillar, .js .value, .js .service { transition: background-size 1s var(--ease-out), background-color .25s; }
  .js .pillars:not(.is-in) .pillar { background-size: 0 1.5px; }
  .js .values__grid:not(.is-in) .value { background-size: 0 4px; }
  .js .services__list:not(.is-in) .service { background-size: 0 1px; }
  .js .value:nth-child(2), .js .pillar:nth-child(2), .js .service:nth-child(2) { transition-delay: .1s; }
  .js .value:nth-child(3), .js .pillar:nth-child(3), .js .service:nth-child(3) { transition-delay: .2s; }
  .js .pillar:nth-child(4), .js .service:nth-child(4) { transition-delay: .3s; }
  .js .service:nth-child(5) { transition-delay: .4s; }
  .js .service:nth-child(6) { transition-delay: .5s; }
  .js .value__title, .js .value__text { transition: opacity .8s .25s, transform .8s .25s var(--ease-out); }
  .js .values__grid:not(.is-in) .value__title,
  .js .values__grid:not(.is-in) .value__text { opacity: 0; transform: translateY(.8rem); }

  /* Fotos que "se revelan": de un tono de copia antigua al color, mientras se descubren */
  .js .photo img { transition: clip-path 1.2s var(--ease-out), filter 1.6s ease; }
  .js .photo:not(.is-in) img { clip-path: inset(0 0 100% 0); filter: grayscale(1) sepia(.35) contrast(.85); }

  /* Fichas de curso y laboratorio */
  .js .courses:not(.is-in) .course { opacity: 0; transform: translateY(1.25rem); }
  .js .courses .course { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .25s, box-shadow .3s; transition-delay: calc(var(--k, 0) * 70ms); }
  .js .courses .course:hover { transition-delay: 0s; }
  .js .lab { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  .js .lab:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }

  /* Pasos de la metodología */
  .js .method__step { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .js .method__step:not(.is-reached) { opacity: .45; }
}


/* ==========================================================================
   15. PREFERENCIAS DEL USUARIO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .pencil path { stroke-dashoffset: 0; }
}

@media print {
  .site-header, .wa-float, .cta, .contact__panel, .lab, .filters, .hero__cursor { display: none; }
  .hero::before { display: none; }
}