/* ═══════════════════════════════════════════════════════════════
   templa — Sistema de diseño

   Concepto: LA RUTA. El isotipo es un umbral que se atraviesa, y la
   promesa es la próxima parada de crecimiento. De ahí sale todo:
   los seis pilares son seis paradas, cada una con su color, y la
   barra del hero es la ruta completa.

   El color NO decora: dice en qué parada estás. Un pilar, su tarjeta,
   su icono y su tramo de la barra comparten color.

   El vinotinto NO es una parada: es templa cuando no hay área. Botones,
   enlaces, logo por defecto. Y el logo toma el color del área a la que
   sirve — verde en un PDF de finanzas, petróleo en uno de empleabilidad,
   vinotinto cuando no hay área. Ver --logo-color.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Fondo — blanco roto neutro, para que los colores saturados canten */
  --ground: #F8F9F8;
  --ground-raised: #FFFFFF;
  --ground-sunk: #EDEFEE;
  --ground-alt: #EBF1F0;   /* panel alterno, con matiz petróleo: da ritmo entre secciones */

  /* Tinta — negro con matiz petróleo, nunca gris neutro */
  --ink: #101F22;
  --ink-deep: #0E3038;
  --ink-deeper: #0A2429;
  --ink-soft: #47585C;
  --ink-faint: #5F7074;

  /* Las seis paradas de la ruta */
  --verde: #12795A;      /* Finanzas */
  --petroleo: #0E4C5C;   /* Empleabilidad */
  --cobre: #C0662F;      /* Mentoría */
  --ciruela: #7B2E6E;    /* Bienestar */
  --indigo: #3B3A7A;     /* Habilidades */
  --ambar: #BD7D1B;      /* Talleres */

  /* La marca. No es una parada: es templa cuando no hay área.
     Botones, enlaces, logo por defecto, favicon.
     8,2:1 con texto blanco encima. El cobre sólo daba 3,8:1 y obligaba
     a un tono de rescate aparte para los botones; ese parche desaparece. */
  --vinotinto: #8A2E43;
  --vinotinto-hover: #6E2436;
  --vinotinto-claro: #D4788C;  /* sobre fondo oscuro — 4,6:1 */

  /* El color del logo. Cada página lo redefine según el área a la que
     sirve; sin redefinir, la marca va en vinotinto. */
  --logo-color: var(--vinotinto);

  /* Paradas sobre fondo oscuro */
  --cobre-claro: #D97F45;
  --verde-claro: #3FA97F;

  /* Sobre fondo oscuro.
     CUIDADO con `--on-dark-faint`: sólo sirve sobre `--ink`, donde da 4,58:1.
     Sobre los petróleos más claros NO alcanza el 4,5:1 que pide el texto
     normal — 4,38:1 en `--ink-deeper` y 3,79:1 en `--ink-deep`. Es decir:
     vale en el pie y no vale en asesoría, historia ni contacto. Ahí va
     `--on-dark-soft`, que da entre 7 y 8:1. */
  --on-dark: #EAF0EF;
  --on-dark-soft: #9DB3B5;
  --on-dark-faint: #6E8A8D;

  /* Líneas */
  --rule: #DDE2E0;
  --rule-strong: #C2CAC7;
  --rule-dark: #24484F;

  /* Estados */
  --danger: #A32E22;
  --danger-ground: #FBEDEB;
  --ok: #12795A;

  /* Type */
  --face: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radio — por jerarquía, nunca un mismo valor en todo */
  --r-flat: 0;
  --r-surface: 4px;   /* campos, botones */
  --r-card: 12px;     /* tarjetas: objetos que se levantan */
  --r-pill: 999px;    /* sólo píldoras */

  /* Layout */
  --measure: 68ch;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --spine-w: 4px;
  --nav-h: 68px;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 140ms;
  --slow: 320ms;
}

/* ─── Reset & base ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` lo pisa cualquier regla de clase que fije `display`: la hoja del
   navegador tiene menos peso que `.btn { display: inline-flex }`. Sin esto,
   `el.hidden = true` sobre un botón o un campo simplemente no hace nada.
   Estaba sólo en tools.css, así que la trampa seguía viva en la landing: el
   botón de descarga del modal se quedaba visible ofreciendo un recurso que
   todavía no existe. Va en la hoja base, que es la que cargan todas las
   páginas. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 3px;
}

/* On dark sections the blue focus ring disappears — use straw */
.asesoria :focus-visible,
.historia :focus-visible,
.contacto :focus-visible,
.footer :focus-visible {
  outline-color: var(--ambar);
}

/* ─── Typography ─────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  font-variation-settings: 'wdth' 106, 'wght' 700;
}

h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

h4 {
  font-size: 0.9375rem;
  line-height: 1.35;
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

/* ─── Skip link ──────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-variation-settings: 'wdth' 100, 'wght' 600;
}

.skip-link:focus {
  left: calc(var(--spine-w) + 0.75rem);
  top: 0.75rem;
}

/* ─── The temper spine ───────────────────────────────────────────
   One vertical rule down the page edge. As you scroll, heat travels
   down it in the real temper-colour sequence. This is the page's
   single orchestrated motion moment, and it answers a user action
   (scrolling) rather than playing on its own.
   ─────────────────────────────────────────────────────────────── */
.spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine-w);
  background: var(--ground-sunk);
  z-index: 90;
  pointer-events: none;
}

.spine__heat {
  width: 100%;
  height: 0;
  /* La ruta, en el mismo orden que los pilares y que la barra del hero */
  background: linear-gradient(
    to bottom,
    var(--verde) 0%,
    var(--petroleo) 20%,
    var(--cobre) 40%,
    var(--ciruela) 60%,
    var(--indigo) 80%,
    var(--ambar) 100%
  );
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  will-change: height;
}

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ─── Botones ────────────────────────────────────────────────────
   El vinotinto de la marca es el color de la acción. Ninguna parada
   lo usa, así que el ojo aprende que vinotinto = aquí se hace algo.
   ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-py: 0.7rem;
  --btn-px: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-surface);
  font-size: 0.9375rem;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn--sm {
  --btn-py: 0.55rem;
  --btn-px: 1rem;
  font-size: 0.875rem;
}

.btn--lg {
  --btn-py: 0.9rem;
  --btn-px: 1.75rem;
  font-size: 1rem;
}

.btn--full {
  width: 100%;
}

.btn--primary {
  background: var(--vinotinto);
  color: #FFF4F6;
  box-shadow: 0 1px 0 rgba(16, 31, 34, 0.12);
}

.btn--primary:hover {
  background: var(--vinotinto-hover);
}

/* No hay .btn--gold. Existió, pintaba el botón de compra con `--ambar`, y
   `--ambar` es el color de Talleres: un botón de acción vestido de parada.
   Rompía la regla central del sistema —el color dice en qué parada estás, no
   decora— justo en el elemento donde más importa. Las acciones van en
   vinotinto, sin excepción de precio. */

.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--on-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--ghost:hover {
  color: var(--ink);
}

/* Botón primario sobre sección oscura: se invierte a superficie blanca con la
   marca en vinotinto. El vinotinto pleno sólo daba 1,7:1 contra el petróleo del
   fondo — el texto se leía, pero el botón dejaba de leerse como botón.
   Blanco contra el fondo oscuro: 16:1. Vinotinto sobre blanco: 8,2:1. */
.asesoria .btn--primary,
.historia .btn--primary,
.contacto .btn--primary,
.footer .btn--primary {
  background: var(--ground-raised);
  border-color: var(--vinotinto);
  color: var(--vinotinto);
}

.asesoria .btn--primary:hover,
.historia .btn--primary:hover,
.contacto .btn--primary:hover,
.footer .btn--primary:hover {
  background: #F3E7EA;
  border-color: var(--vinotinto-hover);
}

/* …pero el formulario de contacto va en una tarjeta BLANCA dentro de la
   sección oscura, y ahí la inversión de arriba deja un botón blanco sobre
   fondo blanco: invisible. Dentro de la tarjeta manda el fondo de la
   tarjeta, no el de la sección. */
.contacto__form-card .btn--primary {
  background: var(--vinotinto);
  border-color: var(--vinotinto);
  color: var(--on-dark);
}

.contacto__form-card .btn--primary:hover {
  background: var(--vinotinto-hover);
  border-color: var(--vinotinto-hover);
}

/* Outline buttons sitting on a dark section */
.asesoria .btn--outline,
.historia .btn--outline,
.contacto .btn--outline {
  border-color: var(--on-dark-soft);
  color: var(--on-dark);
}

.asesoria .btn--outline:hover,
.historia .btn--outline:hover,
.contacto .btn--outline:hover {
  background: var(--on-dark);
  color: var(--ink);
}

.btn__loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.btn--loading .btn__text {
  visibility: hidden;
}

.btn--loading .btn__loader {
  display: flex;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.spinner {
  animation: spin 780ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease),
    background-color var(--fast) var(--ease);
}

.navbar--scrolled {
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 95%, transparent);
  border-bottom-color: var(--rule);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* El logo es un SVG con la palabra ya en curvas, así que no depende de que
   Archivo haya cargado ni se desplaza durante el render.

   Se pinta por máscara, no como <img>, para que tome --logo-color: un solo
   archivo sirve los siete colores. Cada página de herramienta redefine
   --logo-color según su área; la landing lo deja en vinotinto. */
.logo-mask {
  display: block;
  background-color: var(--logo-color);
  -webkit-mask: var(--logo-src) no-repeat center / contain;
  mask: var(--logo-src) no-repeat center / contain;
}

/* Navegadores sin máscara: el SVG se pinta tal cual, en su color de archivo */
@supports not ((mask-image: url('#')) or (-webkit-mask-image: url('#'))) {
  .logo-mask {
    background: var(--logo-src) no-repeat center / contain;
  }
}

.navbar__logo-img {
  --logo-src: url('/assets/templa-horizontal.svg');
  height: 26px;
  aspect-ratio: 353.5 / 102;
}

@media (max-width: 860px) {
  .navbar__logo-img {
    height: 23px;
  }
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__link {
  position: relative;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  transition: color var(--fast) var(--ease);
}

.navbar__link:hover {
  color: var(--ink);
}

.navbar__link--active {
  color: var(--ink);
}

/* The active marker is a temper tick, tying the nav to the spine */
.navbar__link--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  background: var(--vinotinto);
}

.navbar__link--cta {
  padding: 0.45rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-surface);
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 600;
}

.navbar__link--cta:hover {
  background: var(--ink);
  color: var(--on-dark);
}

.navbar__link--cta.navbar__link--active::after {
  display: none;
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-surface);
  cursor: pointer;
}

.navbar__hamburger-line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Hero ───────────────────────────────────────────────────────
   The headline is the design. Three verbs, each set wider and
   heavier than the last on Archivo's width axis — the type itself
   performs the tempering the brand is named for.
   ─────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--section-y);
  border-bottom: 1px solid var(--rule);
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ─── Panel de la ruta ───────────────────────────────────────────
   Contesta la pregunta que trae quien llega: «¿esto para qué me
   sirve a mí?». Y enseña el código de color antes de que aparezcan
   las tarjetas, para que abajo ya se entienda solo.
   ─────────────────────────────────────────────────────────────── */
.ruta-panel {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 0 0 0.6rem;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(16, 31, 34, 0.45);
}

.ruta-panel__title {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  padding: 1.25rem 1.5rem 0.9rem;
}

.ruta-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.parada {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.62rem 1.5rem 0.62rem 2.6rem;
  position: relative;
  text-decoration: none;
  font-size: 0.9688rem;
  font-variation-settings: 'wdth' 100, 'wght' 650;
  color: var(--ink);
  transition: background-color var(--fast) var(--ease),
    padding-left var(--fast) var(--ease);
}

/* El punto es el mismo color del tramo y de la tarjeta */
.parada::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.08em;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--parada);
}

.parada span {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-variation-settings: 'wdth' 100, 'wght' 400;
}

.parada:hover,
.parada:focus-visible {
  background: color-mix(in srgb, var(--parada) 9%, transparent);
  padding-left: 2.85rem;
}

.parada--verde { --parada: var(--verde); }
.parada--petroleo { --parada: var(--petroleo); }
.parada--cobre { --parada: var(--cobre); }
.parada--ciruela { --parada: var(--ciruela); }
.parada--indigo { --parada: var(--indigo); }
.parada--ambar { --parada: var(--ambar); }

/* Los tres verbos son la misma letra y el mismo grosor: lo único que
   cambia es el TAMAÑO, que crece hacia la promesa. El remate va en
   verde porque el vinotinto ya tiene un trabajo asignado: las acciones. */
.hero__title {
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}

.hero__line {
  display: block;
  font-variation-settings: 'wdth' 108, 'wght' 800;
  color: var(--ink);
}

.hero__line--1 {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
}

.hero__line--2 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
}

.hero__line--3 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  color: var(--verde);
}

.hero__subtitle {
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}

/* ─── La ruta ────────────────────────────────────────────────────
   Seis tramos, uno por pilar, en el mismo orden que las tarjetas de
   servicios. Es decorativa y a la vez es el índice del sitio: cada
   tramo lleva a su sección y se ensancha al pasar por encima.
   ─────────────────────────────────────────────────────────────── */
.ruta {
  display: flex;
  width: 100%;
  height: 6px;
}

.ruta__tramo {
  flex: 1;
  display: block;
  background: var(--tramo);
}

.ruta__tramo:nth-child(1) { --tramo: var(--verde); }
.ruta__tramo:nth-child(2) { --tramo: var(--petroleo); }
.ruta__tramo:nth-child(3) { --tramo: var(--cobre); }
.ruta__tramo:nth-child(4) { --tramo: var(--ciruela); }
.ruta__tramo:nth-child(5) { --tramo: var(--indigo); }
.ruta__tramo:nth-child(6) { --tramo: var(--ambar); }

/* ─── Section header ─────────────────────────────────────────── */
.section-header {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section-header::before {
  content: '';
  display: block;
  width: 52px;
  height: 5px;
  margin-bottom: 1.35rem;
  border-radius: var(--r-pill);
  background: var(--area, var(--vinotinto));
}

.pilares { --area: var(--verde); }
.asesoria { --area: var(--verde-claro); }
/* herramientas e historia no son un área: son la marca. */
.herramientas { --area: var(--vinotinto); }
.historia { --area: var(--vinotinto-claro); }
.mentoria { --area: var(--indigo); }
.talleres { --area: var(--ambar); }

.section-header__title {
  margin-bottom: 0.9rem;
}

.section-header__subtitle {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.section-header__title--light {
  color: var(--on-dark);
}

.section-header__subtitle--light {
  color: var(--on-dark-soft);
}

/* Inside a two-column section the header leads a column rather than
   the page, so it takes the column's width and a tighter gap. */
.section-header--left {
  max-width: none;
  margin-bottom: 2rem;
}

/* ─── Pilares — las seis paradas ─────────────────────────────────
   Tarjetas separadas, cada una con el color de su parada en una
   banda superior. El color no adorna: identifica el pilar, y es el
   mismo del tramo de la ruta y del icono.
   ─────────────────────────────────────────────────────────────── */
.pilares {
  padding-block: var(--section-y);
}

.pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.pilar-card {
  position: relative;
  padding: 2rem 1.6rem 1.9rem;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

/* La banda de color: la parada a la que pertenece la tarjeta */
.pilar-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--parada);
}

.pilar-card:nth-child(1) { --parada: var(--verde); }
.pilar-card:nth-child(2) { --parada: var(--petroleo); }
.pilar-card:nth-child(3) { --parada: var(--cobre); }
.pilar-card:nth-child(4) { --parada: var(--ciruela); }
.pilar-card:nth-child(5) { --parada: var(--indigo); }
.pilar-card:nth-child(6) { --parada: var(--ambar); }

.pilar-card:hover,
.pilar-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--parada);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--parada) 55%, transparent);
}

.pilar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.15rem;
  border-radius: var(--r-surface);
  color: var(--parada);
  background: color-mix(in srgb, var(--parada) 12%, transparent);
}

.pilar-card__icon svg {
  width: 26px;
  height: 26px;
}

.pilar-card__title {
  margin-bottom: 0.5rem;
}

.pilar-card__desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ─── Asesoría ───────────────────────────────────────────────── */
.asesoria {
  padding-block: var(--section-y);
  background: var(--ink-deep);
  color: var(--on-dark);
}

.asesoria__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.asesoria__for-title {
  margin-bottom: 1rem;
  color: var(--on-dark);
}

.asesoria__for-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
  max-width: var(--measure);
}

.asesoria__for-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}

.asesoria__for-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 1px;
  background: var(--verde-claro);
}

.asesoria__card {
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--verde-claro);
  border-radius: var(--r-surface);
  background: var(--ink-deeper);
}

.asesoria__card-inner {
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.asesoria__card-title {
  margin-bottom: 1.25rem;
  color: var(--on-dark);
}

.asesoria__card-features {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.asesoria__card-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}

.asesoria__card-features svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--verde-claro);
}

/* Aquí iban tres filas de Duración / Modalidad / Inversión, las tres con un
   marcador sin llenar. Se retiraron por decisión de templa: la asesoría no
   se vende por su precio en la página, se vende en la llamada. La modalidad
   pasó a la lista de «qué incluye», que es donde ayuda a decidir en vez de
   parecer una ficha de producto.

   La oferta de los quince minutos toma el verde claro del borde superior de
   la tarjeta: es el área de finanzas hablando, no un adorno. */
.asesoria__oferta {
  padding: 1rem 1.15rem;
  margin: 1.5rem 0 1.25rem;
  background: color-mix(in srgb, var(--verde-claro) 12%, transparent);
  border-left: 3px solid var(--verde-claro);
  border-radius: var(--r-surface);
}

.asesoria__oferta-titulo {
  font-size: 1.0625rem;
  line-height: 1.25;
  font-variation-settings: 'wdth' 104, 'wght' 700;
  color: var(--on-dark);
  margin-bottom: 0.35rem;
}

.asesoria__oferta-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* `--on-dark-soft` y no `--on-dark-faint`: el faint da 4,38:1 sobre el
   petróleo de la tarjeta y esto es texto de 0,875rem, así que necesita 4,5:1.
   El soft da 8,3:1. */
.asesoria__card-nota {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--on-dark-soft);
}

.asesoria__card-nota a {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.asesoria__card-nota a:hover {
  color: var(--verde-claro);
}

/* ─── Herramientas ───────────────────────────────────────────── */
.herramientas {
  padding-block: var(--section-y);
  background: var(--ground-alt);
}

.herramientas__tabs {
  display: inline-flex;
  gap: 0;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
}

.herramientas__tab {
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.9375rem;
  color: var(--ink-faint);
  cursor: pointer;
  font-variation-settings: 'wdth' 100, 'wght' 550;
  transition: color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.herramientas__tab:hover {
  color: var(--ink);
}

.herramientas__tab--active {
  color: var(--ink);
  border-bottom-color: var(--vinotinto);
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.herramientas__panel--hidden {
  display: none;
}

.herramientas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Tool cards are real objects (they are products), so they get a
   surface — but no drop shadow. The left edge carries the access
   type: bronze for free, straw for premium. */
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--card-edge, var(--rule-strong));
  border-radius: var(--r-card);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--card-edge) 60%, transparent);
}

/* El canto izquierdo lleva el color del área, igual que las tarjetas de
   servicios: así el código de color es uno solo en toda la página. */
.tool-card--finanzas { --card-edge: var(--verde); }
.tool-card--empleabilidad { --card-edge: var(--petroleo); }
.tool-card--habilidades { --card-edge: var(--indigo); }
/* Las tarjetas premium NO llevan un color propio: llevan el de su área, igual
   que las gratuitas. Antes tomaban `--ambar`, que es Talleres, así que una
   tarjeta de Empleabilidad se pintaba de Talleres por el hecho de costar
   dinero. El precio no es una parada del camino; el área sí. Lo que distingue
   a una premium es su etiqueta, no su color. */

/* Anunciada pero no construida: se apaga. La tarjeta sigue diciendo qué
   resuelve —para eso está, genera expectativa— pero sin el peso visual de
   algo en lo que se pueda hacer clic. */
.tool-card--pronto {
  background: var(--ground-alt);
  box-shadow: none;
}

/* Y no se levanta al pasar por encima: el levantamiento promete que hay algo
   al otro lado. */
.tool-card--pronto:hover {
  transform: none;
  box-shadow: none;
}

.tool-card--pronto .tool-card__title { color: var(--ink-soft); }

/* Ocupa el lugar del botón, con el mismo `margin-top:auto`, para que las
   tarjetas de una fila terminen alineadas aunque unas tengan botón y otras
   no. */
.tool-card__pronto {
  margin-top: auto;
  padding-top: 0.2rem;
  font-size: 0.875rem;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  color: var(--ink-faint);
}

.tool-card__badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  margin-bottom: 0.9rem;
}

.tool-card__badge--free {
  background: color-mix(in srgb, var(--vinotinto) 14%, transparent);
  color: #6B2434;
}

/* Premium en vinotinto tenue, no en ámbar: es la marca diciendo «esto se
   compra», y comprar es una acción. El contraste medido sobre la tarjeta
   apagada es 5,4:1. */
.tool-card__badge--premium {
  background: color-mix(in srgb, var(--vinotinto) 20%, transparent);
  color: #5E1F2E;
}

/* Neutra a propósito: «muy pronto» no es una parada ni una acción, así que no
   toma ningún color del sistema. */
.tool-card__badge--pronto {
  background: var(--ground-sunk);
  color: var(--ink-soft);
}

.tool-card__category {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.tool-card__title {
  margin-bottom: 0.7rem;
}

.tool-card__problem {
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
  font-variation-settings: 'wdth' 100, 'wght' 550;
}

.tool-card__benefit {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.tool-card__type {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  padding-top: 0.85rem;
  margin-bottom: 1.1rem;
  border-top: 1px solid var(--rule);
  width: 100%;
}

.tool-card__price {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 96, 'wght' 700;
  margin-bottom: 0.9rem;
}

.tool-card__cta {
  margin-top: auto;
}

/* ─── Historia ───────────────────────────────────────────────── */
.historia {
  padding-block: var(--section-y);
  background: var(--ink-deep);
  color: var(--on-dark);
}

/* El título y la cita comparten la primera fila —los dos son cortos— y el
   texto ocupa debajo el ancho completo, repartido en dos columnas de
   lectura. Antes el texto iba en una columna estrecha a la izquierda y la
   cita sola a la derecha: la sección medía más de 1.200 px de alto y los dos
   tercios inferiores de la derecha quedaban vacíos. */
.historia__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.historia__header { margin-bottom: 0; }

.historia__text {
  grid-column: 1 / -1;
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

/* Un párrafo partido entre dos columnas se lee mal, y una lista o una cita
   partidas se leen peor. */
.historia__text > * {
  break-inside: avoid;
  margin-bottom: 1.1rem;
}

.historia__text > *:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .historia__text { columns: 1; }
}

.historia__paragraph {
  color: var(--on-dark-soft);
  font-size: 1rem;
}

.historia__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--on-dark-soft);
}

.historia__list li::marker { color: var(--vinotinto-claro); }

.historia__paragraph strong { color: var(--on-dark); }

.historia__paragraph--highlight {
  padding-left: 1.35rem;
  border-left: 2px solid var(--vinotinto-claro);
  color: var(--on-dark);
  /* En dos columnas puede caer justo debajo de la lista, y sin aire propio
     el filo vinotinto parece una viñeta más. */
  margin-top: 1.6rem;
}

.historia__quote-card {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-surface);
  background: var(--ink-deeper);
}

.historia__quote {
  margin: 0;
}

.historia__quote p {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 108, 'wght' 700;
  color: var(--on-dark);
}

.historia__quote-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--ambar),
    var(--cobre),
    var(--petroleo)
  );
}

/* ─── Mentoría ───────────────────────────────────────────────── */
.mentoria {
  padding-block: var(--section-y);
}

.mentoria__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.mentoria__block-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.mentoria__block-title svg {
  color: var(--cobre);
  flex-shrink: 0;
}

.mentoria__block:nth-child(2) .mentoria__block-title svg {
  color: var(--petroleo);
}

.mentoria__item {
  border-bottom: 1px solid var(--rule);
}

.mentoria__question {
  padding: 1rem 2rem 1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: 0.9688rem;
  font-variation-settings: 'wdth' 100, 'wght' 550;
}

.mentoria__question::-webkit-details-marker {
  display: none;
}

/* A plus that becomes a minus — motion that reports what changed */
.mentoria__question::after,
.mentoria__question::before {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  background: var(--ink-soft);
  transition: transform var(--fast) var(--ease);
}

.mentoria__question::before {
  width: 13px;
  height: 1.5px;
  margin-top: -0.75px;
}

.mentoria__question::after {
  width: 1.5px;
  height: 13px;
  margin-top: -6.5px;
  right: 0.72rem;
}

.mentoria__item[open] .mentoria__question::after {
  transform: rotate(90deg);
}

.mentoria__answer {
  padding: 0 2rem 1.15rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.mentoria__answer strong {
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.mentoria__cta-wrapper {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ─── Talleres ───────────────────────────────────────────────── */
.talleres {
  padding-block: var(--section-y);
  background: var(--ground-alt);
}

.talleres__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Deliberately a different object from a tool card: outlined, no
   fill, category carried by a top rule rather than a left edge. */
.taller-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--rule);
  border-top: 5px solid var(--petroleo);
  border-radius: var(--r-card);
  background: var(--ground-raised);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.taller-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(16, 31, 34, 0.3);
}

/* El filo dice de qué área es el taller, no en qué posición está. Antes
   rotaban por nth-child, así que el taller de Finanzas salía en petróleo.
   Dos talleres comparten el índigo porque los dos son habilidades: eso es
   correcto, el color nombra el área y no adorna la tarjeta. */
.taller-card--finanzas      { border-top-color: var(--verde); }
.taller-card--empleabilidad  { border-top-color: var(--petroleo); }
.taller-card--mentoria       { border-top-color: var(--cobre); }
.taller-card--bienestar      { border-top-color: var(--ciruela); }
.taller-card--habilidades    { border-top-color: var(--indigo); }
.taller-card--talleres       { border-top-color: var(--ambar); }

.taller-card__header {
  margin-bottom: 0.75rem;
}

.taller-card__category {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.taller-card__title {
  margin-bottom: 0.6rem;
}

.taller-card__desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.taller-card__meta {
  display: grid;
  gap: 0.7rem;
  width: 100%;
  padding: 1.1rem 0;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.taller-card__detail {
  display: grid;
  gap: 0.1rem;
}

.taller-card__detail-label {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.taller-card__detail-value {
  font-size: 0.875rem;
}

.taller-card__cta {
  margin-top: auto;
}

/* ─── Contacto ───────────────────────────────────────────────── */
.contacto {
  padding-block: var(--section-y);
  background: var(--ink-deeper);
  color: var(--on-dark);
}

/* Misma regla que el titular del hero: los dos renglones son la MISMA letra,
   el mismo grosor y el mismo ancho, y sólo cambian de tamaño. Antes iban a
   wdth 88/wght 400 contra wdth 118/wght 800 — en una fuente variable esa
   distancia se lee como dos tipografías distintas, no como una jerarquía. */
.contacto__title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  font-variation-settings: 'wdth' 108, 'wght' 800;
  color: var(--on-dark);
}

.contacto__line--1 {
  display: block;
  font-size: 0.62em;
}

.contacto__line--2 {
  display: block;
}

.contacto__subtitle {
  max-width: 48ch;
  color: var(--on-dark-soft);
}

/* Dos columnas: a la izquierda los canales directos, a la derecha el
   formulario. El formulario va segundo porque WhatsApp es más rápido para
   quien ya decidió escribir; el formulario es para quien no. */
.contacto__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  /* `start`, y el titular vive DENTRO de esta columna. Mientras el titular
     estuvo encima del grid, la izquierda eran dos elementos cortos contra una
     tarjeta alta: centrarlos dejaba el botón de WhatsApp flotando a media
     altura, muy por debajo del texto al que responde. */
  align-items: start;
}

.contacto__subtitle {
  margin-bottom: 2.5rem;
}

/* La tarjeta es más alta que el texto de al lado; sin esto el borde superior
   del formulario queda por debajo del titular. */
.contacto__form-card {
  margin-top: 0.35rem;
}

/* Tarjeta clara sobre el petróleo. Así los `.form-*` de la hoja funcionan sin
   una sola variante para oscuro: están diseñados para fondo claro, y
   duplicarlos para dos fondos es la forma de que uno se quede atrás. */
.contacto__form-card {
  padding: 1.75rem;
  background: var(--ground-raised);
  border-radius: var(--r-card);
  color: var(--ink);
}

.contacto__form-title {
  font-size: 1.125rem;
  font-variation-settings: 'wdth' 104, 'wght' 700;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.contacto__form-desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

/* Estado del envío. `role="status"` en el HTML lo anuncia a un lector de
   pantalla; aquí sólo se le da color. */
.form-aviso {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.form-aviso--exito {
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--verde) 10%, var(--ground-raised));
  border-left: 3px solid var(--verde);
  border-radius: var(--r-surface);
  color: var(--ink);
}

.form-aviso--error {
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--vinotinto) 8%, var(--ground-raised));
  border-left: 3px solid var(--vinotinto);
  border-radius: var(--r-surface);
  color: var(--ink);
}

/* El espacio entre campos lo pone el formulario, no el campo: `.form-group`
   sólo tiene `gap` interno entre etiqueta, campo y error. Sin esta regla los
   grupos quedaban pegados y cada etiqueta parecía pertenecer al campo de
   arriba. Mismo valor que `.modal__form`, que es el otro formulario del
   sitio: una sola medida de respiración para los dos. */
.contacto__form {
  display: grid;
  gap: 1.1rem;
}

/* El consentimiento necesita más aire que un campo: es la última cosa que se
   lee antes de pulsar, y pegado al botón se convierte en letra pequeña. */
.contacto__form .form-group--checkbox {
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}

.contacto__textarea {
  min-height: 5.5rem;
  resize: vertical;
}

@media (max-width: 900px) {
  .contacto__layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.contacto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.contacto__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}

.contacto__channel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}

.contacto__channel svg {
  color: var(--on-dark);
  flex-shrink: 0;
}

.contacto__channel a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.contacto__channel a:hover {
  color: var(--on-dark);
  border-bottom-color: var(--on-dark);
}

/* ─── Legal pages ────────────────────────────────────────────────
   Long-form reading: one narrow measure, generous leading, and the
   section rules doing the structural work.
   ─────────────────────────────────────────────────────────────── */
.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y);
}

.legal__inner {
  max-width: 46rem;
}

.legal__eyebrow {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-faint);
  text-decoration: none;
}

.legal__eyebrow:hover {
  color: var(--ink);
}

.legal__title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  margin-bottom: 0.75rem;
}

.legal__meta {
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.legal__toc {
  margin: 0 0 2.75rem;
  padding: 1.25rem 1.5rem;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  background: var(--ground-raised);
  border-left: 3px solid var(--petroleo);
  border-radius: var(--r-surface);
}

.legal__toc a {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.legal__toc a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__section {
  margin-bottom: 2.5rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.legal__section h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-bottom: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.legal__section h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

.legal__section p,
.legal__section li {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.legal__section p {
  margin-bottom: 0.9rem;
}

.legal__section ul,
.legal__section ol {
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
}

.legal__section strong {
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.legal__section a {
  color: var(--petroleo);
  text-underline-offset: 2px;
}

/* Anything the owner still has to fill in, made impossible to miss. */
.legal__todo {
  background: color-mix(in srgb, var(--ambar) 18%, transparent);
  border-bottom: 2px solid var(--ambar);
  padding: 0.05em 0.3em;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 650;
}

.legal__callout {
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.75rem;
  background: var(--ground-raised);
  border-left: 3px solid var(--vinotinto);
  border-radius: var(--r-surface);
}

.legal__callout p:last-child {
  margin-bottom: 0;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--on-dark-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid var(--rule-dark);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}

/* Sobre fondo oscuro el logo va en el claro del área, no en su tono pleno */
.footer__logo-img {
  --logo-src: url('/assets/templa-horizontal-claro.svg');
  --logo-color: var(--on-dark);
  height: 30px;
  aspect-ratio: 353.5 / 102;
  margin-bottom: 0.85rem;
}

.footer__tagline {
  font-size: 0.9375rem;
  max-width: 30ch;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer__col-title {
  color: var(--on-dark);
  margin-bottom: 0.85rem;
}

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.footer__link {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--on-dark-soft);
  transition: color var(--fast) var(--ease);
}

.footer__link:hover {
  color: var(--on-dark);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
}

.footer__copy {
  font-size: 0.875rem;
  color: var(--on-dark-faint);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer__legal-link {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--on-dark-faint);
}

.footer__legal-link:hover {
  color: var(--on-dark);
}

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--ink-deeper) 78%, transparent);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay--visible {
  opacity: 1;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 34rem;
  background: var(--ground-raised);
  border-radius: var(--r-surface);
  border-top: 3px solid var(--vinotinto);
  box-shadow: 0 24px 60px rgba(18, 20, 23, 0.35);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

.modal__close:hover {
  background: var(--ground-sunk);
  color: var(--ink);
}

.modal__header {
  margin-bottom: 1.5rem;
  padding-right: 2.5rem;
}

.modal__badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  background: color-mix(in srgb, var(--vinotinto) 14%, transparent);
  color: #6B2434;
}

.modal__title {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-variation-settings: 'wdth' 106, 'wght' 700;
  margin-bottom: 0.4rem;
}

.modal__tool-name {
  font-size: 0.9375rem;
  color: var(--vinotinto);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  margin-bottom: 0.5rem;
}

.modal__tool-name:empty {
  display: none;
}

.modal__desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.modal__form {
  display: grid;
  gap: 1.1rem;
}

.modal__submit {
  margin-top: 0.35rem;
}

.modal__body--success,
.modal__body--error {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}

.modal__body[hidden] {
  display: none;
}

.modal__success-icon {
  color: var(--ok);
  margin-bottom: 0.35rem;
}

.modal__error-icon {
  color: var(--danger);
  margin-bottom: 0.35rem;
}

.modal__success-title,
.modal__error-title {
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 104, 'wght' 700;
}

.modal__success-desc,
.modal__error-desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 0.9rem;
}

.modal__success-close {
  margin-top: 0.35rem;
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-group {
  display: grid;
  gap: 0.35rem;
}

.form-label {
  font-size: 0.875rem;
  font-variation-settings: 'wdth' 100, 'wght' 550;
}

.form-required {
  color: var(--danger);
}

.form-optional {
  color: var(--ink-faint);
  font-variation-settings: 'wdth' 100, 'wght' 400;
}

.form-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--ground-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-surface);
  transition: border-color var(--fast) var(--ease);
}

.form-input::placeholder {
  color: var(--ink-faint);
}

.form-input:focus {
  border-color: var(--petroleo);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petroleo) 18%, transparent);
}

.form-input--error {
  border-color: var(--danger);
  background: var(--danger-ground);
}

.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.form-error {
  font-size: 0.8125rem;
  color: var(--danger);
}

.form-error:empty {
  display: none;
}

.form-group--checkbox {
  gap: 0.4rem;
}

.form-checkbox-label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  cursor: pointer;
}

.form-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.form-checkbox-custom {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  background: var(--ground-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.form-checkbox:checked + .form-checkbox-custom {
  background: var(--vinotinto);
  border-color: var(--vinotinto);
}

.form-checkbox:checked + .form-checkbox-custom::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #F7F2EA;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.form-checkbox:focus-visible + .form-checkbox-custom {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}

.form-checkbox-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.form-privacy-link {
  color: var(--petroleo);
  text-underline-offset: 2px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ruta-panel {
    max-width: 34rem;
  }

  .pilares__grid,
  .herramientas__grid,
  .talleres__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asesoria__layout,
  .historia__layout {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-h: 60px;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* `absolute` contra la barra, y NO `fixed` contra la pantalla.
     `.navbar` lleva `backdrop-filter`, y un elemento con filtro se convierte
     en el bloque contenedor de sus descendientes `position: fixed`: el panel
     resolvía su `inset` contra la barra de 60 px en vez de contra la
     ventana, así que medía 65 px de alto con scroll interno y sólo asomaba
     «Servicios». Se veía como un menú roto, no como un menú con scroll.

     La altura se fija a mano porque ahora `bottom: 0` sería el borde de la
     barra. `dvh` y no `vh`: en el móvil la barra del navegador aparece y
     desaparece, y `vh` cuenta la pantalla completa, dejando el último enlace
     debajo de ella. La línea `vh` queda antes como respaldo para navegadores
     sin `dvh`. */
  .navbar__nav {
    position: absolute;
    top: 100%;
    left: var(--spine-w);
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    display: none;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--ground);
    border-top: 1px solid var(--rule);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navbar__nav--open {
    display: block;
  }

  .navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar__links li {
    border-bottom: 1px solid var(--rule);
  }

  /* Estas tres van SCOPEADAS a `.navbar__links`: son el panel desplegable del
     menú móvil, no cualquier enlace del encabezado. Sin el scope alcanzaban
     también al CTA de las páginas de herramientas, que cuelga directo de
     `.navbar__inner` — y ahí `display:block` + `margin-top:1.25rem` lo
     convertían en un bloque desplazado que se montaba sobre la pregunta. */
  .navbar__links .navbar__link {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.0625rem;
  }

  .navbar__links .navbar__link--active::after {
    display: none;
  }

  .navbar__links .navbar__link--cta {
    margin-top: 1.25rem;
    text-align: center;
    border-color: var(--ink);
  }

  .navbar__links li:last-child {
    border-bottom: none;
  }

  .mentoria__grid {
    grid-template-columns: 1fr;
  }

  /* En pantalla estrecha la letra se estrecha, pero TODOS los renglones a la
     vez: estrechar sólo uno reproduce el efecto de dos tipografías. */
  .hero__line {
    font-variation-settings: 'wdth' 100, 'wght' 800;
  }

  .contacto__title {
    font-variation-settings: 'wdth' 104, 'wght' 800;
  }
}

@media (max-width: 620px) {
  .pilares__grid,
  .herramientas__grid,
  .talleres__grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .temper-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.9rem;
  }

  .hero__ctas .btn,
  .contacto__actions .btn {
    flex: 1 1 100%;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .spine__heat {
    will-change: auto;
  }
}