/* ==========================================================================
   David Quiroga Consulting — sistema de diseño
   Paleta y motivos gráficos tomados de la papelería institucional del cliente.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Verdes de marca, muestreados de los diseños impresos */
  --verde-950: #00332a;
  --verde-900: #004a3c;
  --verde-800: #006752;   /* primario institucional */
  --verde-700: #007a55;
  --verde-600: #009a4d;
  --verde-500: #00ba46;   /* verde brillante del logotipo */
  --lima-600:  #4a9a2a;
  --lima-500:  #55ae30;
  --menta-400: #80dda3;
  --menta-200: #c0eed1;
  --menta-100: #ddf5e6;
  --menta-50:  #f1faf4;

  --tinta:        #10241f;
  --tinta-media:  #3f5a53;
  --tinta-suave:  #6b8880;
  --linea:        #dfe9e5;
  --blanco:       #ffffff;
  --hueso:        #f7faf8;

  /* Saira semiexpandida repite el trazo del logotipo. Verdana, la reserva
     mientras carga, es la de sistema con el ancho más parecido. */
  --fuente-titulo: "Saira", "Verdana", system-ui, sans-serif;
  --fuente-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* El contenido conserva su ancho máximo; títulos y espacios se adaptan
     al espacio disponible en ambos ejes, sin cambiar el zoom del navegador. */
  --ancho: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radio: 14px;
  --radio-hoja: 120px 24px 120px 24px;
  --radio-hoja-alt: 24px 120px 24px 120px;

  --sombra-sm: 0 2px 8px rgba(16, 36, 31, .06);
  --sombra:    0 12px 34px rgba(16, 36, 31, .10);
  --sombra-lg: 0 28px 60px rgba(16, 36, 31, .16);

  /* Alto real de la cabecera desplegada: franja de contacto + barra principal.
     Lo usan el hero, las cabeceras de página y el desplazamiento a anclas. */
  --cabecera: 134px;
  --transicion: .35s cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------- 2. Reinicio */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Evita que la cabecera fija tape el destino de los enlaces con ancla. */
  scroll-padding-top: calc(var(--cabecera) + 1rem);
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinta-media);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--verde-700); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--verde-500); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

/* Evita el recuadro nativo al tocar enlaces en Chrome/Safari móvil.
   El foco de teclado conserva su contorno y el texto del sitio se puede copiar. */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
.cabecera__logo, .cabecera__logo img, .boton, button, .wa-flotante {
  -webkit-user-select: none;
  user-select: none;
}
.cabecera__logo img { -webkit-user-drag: none; }

:focus-visible {
  outline: 3px solid var(--verde-500);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  color: var(--verde-800);
  /* 1.16 deja aire suficiente para las tildes y la Ñ sin perder impacto. */
  line-height: 1.16;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}

/* Los mínimos (solo rigen en teléfonos) son contenidos porque Saira es ancha:
   un título largo de servicio no pasa de tres líneas en 375 px. */
h1 { font-size: clamp(2.1rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Titular a dos pesos, como en la papelería: "SERVICIOS DE **CONSULTORÍA**" */
.t-fino { font-weight: 300; }
.t-fuerte { font-weight: 700; }
.t-claro { color: var(--verde-500); }

/* ------------------------------------------------------------ 3. Estructura */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ritmo vertical: 72 px por lado en escritorio (48 en teléfonos). Entre el
   contenido de dos secciones quedan ~150 px; con 120 por lado el sitio se
   leía como bloques sueltos. */
.seccion { padding: clamp(3rem, 5.5vw, 4.5rem) 0; position: relative; }
.seccion--menta { background: var(--menta-50); }
.seccion--hueso { background: var(--hueso); }
.seccion--oscura {
  background:
    radial-gradient(38% 130% at 12% 50%, rgba(0, 186, 70, .16), transparent 62%),
    radial-gradient(38% 130% at 88% 50%, rgba(128, 221, 163, .10), transparent 62%),
    var(--verde-900);
  color: rgba(255, 255, 255, .82);
}
.seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }
.seccion--ajustada { padding-block: clamp(2rem, 4vw, 3rem); }

.rejilla { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.rejilla > *, .hero__contenido > * { min-width: 0; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--partida { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
/* Con un texto mucho más alto que la foto, centrarla deja un hueco encima:
   se alinea arriba, junto al título. */
.rejilla--arriba { align-items: start; }
/* Contenido con columna lateral (fichas de servicio y de curso, contacto).
   La lateral no baja de 22rem: es lo que necesitan sus botones para leerse
   en una línea en laptops angostas. */
.rejilla--lateral { grid-template-columns: minmax(0, 1.6fr) minmax(22rem, .9fr); align-items: start; gap: clamp(2rem, 4vw, 3.5rem); }
.rejilla--contacto { grid-template-columns: 1.35fr .85fr; align-items: start; gap: clamp(2rem, 4vw, 4rem); }

/* Superficie de las bandas verdes.
   Un grano finísimo sobre el degradado: da profundidad, evita el bandeado que
   producen los degradados oscuros en pantallas de 8 bits y no dibuja ningún
   patrón reconocible. Cada sección aporta además sus propios halos de luz. */
.superficie { position: relative; }
.superficie::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- 4. Encabezado de sección */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde-600);
  margin-bottom: 1rem;
}
.etiqueta::before {
  content: "";
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, var(--verde-500), var(--menta-400));
  border-radius: 2px;
}
.seccion--oscura .etiqueta { color: var(--menta-400); }

/* Los tres puntos que rematan los títulos en los impresos */
.puntos { display: flex; gap: .35rem; margin-top: 1.1rem; }
.puntos span { width: 7px; height: 7px; border-radius: 50%; background: var(--menta-400); }
.puntos span:nth-child(2) { background: var(--verde-500); }
.puntos span:nth-child(3) { background: var(--verde-800); width: 34px; border-radius: 4px; }
.seccion--oscura .puntos span:nth-child(3) { background: var(--menta-200); }

.encabezado-seccion { max-width: 46rem; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.encabezado-seccion.centrado { margin-inline: auto; text-align: center; }
.encabezado-seccion.centrado .puntos { justify-content: center; }
.encabezado-seccion p { font-size: 1.1rem; }

/* -------------------------------------------------------------- 5. Botones */
.boton {
  --fondo: var(--verde-800);
  --texto: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  text-align: center;
  gap: .65rem;
  padding: 1rem 1.9rem;
  border: 2px solid var(--fondo);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Sin sombras: el botón se distingue por color y borde, no por relieve. */
  transition: transform var(--transicion), background-color var(--transicion),
              color var(--transicion), border-color var(--transicion);
}
/* La respuesta al pasar el cursor es el desplazamiento y un tono más profundo;
   las variantes que definen su propio fondo en :hover mandan sobre esto. */
.boton:hover {
  color: #fff;
  transform: translateY(-3px);
  --fondo: var(--verde-700);
}
.boton svg { width: 18px; height: 18px; flex: none; }

.boton--verde { --fondo: var(--verde-500); }
.boton--verde:hover { --fondo: var(--verde-600); }

.boton--linea {
  background: transparent;
  border-color: currentColor;
  color: var(--verde-800);
}
.boton--linea:hover { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

.boton--claro { background: #fff; border-color: #fff; color: var(--verde-800); }
.boton--claro:hover { background: var(--menta-200); border-color: var(--menta-200); color: var(--verde-900); }

.boton--fantasma-claro { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.boton--fantasma-claro:hover { background: #fff; border-color: #fff; color: var(--verde-800); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--verde-700);
}
.enlace-flecha svg { width: 16px; transition: transform var(--transicion); }
.enlace-flecha:hover svg { transform: translateX(5px); }

/* ------------------------------------------------------------ 6. Cabecera
   Dos niveles: una franja fina de contacto y la barra principal. Al hacer
   scroll la franja se pliega y la barra se compacta.
   La barra es siempre blanca y toma los colores del logotipo original: su
   texto verde oscuro (#006752) en el menú y la franja, y el verde brillante
   de la órbita en los acentos.                                               */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--blanco);
  transition: box-shadow var(--transicion);
}

/* --- Franja superior de contacto ------------------------------------- */
.cabecera__superior {
  background: var(--verde-800);
  font-size: .875rem;
  overflow: hidden;
  max-height: 56px;
  transition: max-height var(--transicion), opacity var(--transicion);
}
.cabecera__superior > .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .55rem;
}
.cabecera__datos { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.cabecera__datos li { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
.cabecera__datos svg { width: 16px; height: 16px; color: var(--menta-400); flex: none; }
.cabecera__datos a, .cabecera__datos span { color: rgba(255, 255, 255, .85); }
.cabecera__datos a:hover { color: #fff; }

.cabecera__redes { display: flex; gap: .3rem; }
.cabecera__redes a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, .72);
  transition: background-color var(--transicion), color var(--transicion);
}
.cabecera__redes a:hover { background: var(--verde-500); color: #fff; }
.cabecera__redes svg { width: 15px; height: 15px; }

/* --- Barra principal -------------------------------------------------- */
/* Logo, menú y botón comparten una sola línea desde 981 px. Entre 981 y
   1240 px (laptops con Windows al 125 %) sus medidas se reducen de forma
   continua: los clamp() valen el mínimo en 981 y el máximo en 1240. */
.cabecera__principal {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 8.2vw - 4rem, 2rem);
  padding-block: .95rem;
  transition: padding var(--transicion);
}
.cabecera__logo { margin-right: auto; display: block; flex: none; }
/* Versión horizontal del logotipo (5,5:1): a 48 px de alto mide ~263 px de
   ancho, que es la presencia que necesita una cabecera. La apilada del
   original se quedaba en 100 px y el texto resultaba ilegible. */
.cabecera__logo img { height: clamp(38px, 3.86vw, 48px); width: auto; transition: height var(--transicion); }

/* --- Estado fijado: barra compacta con sombra ------------------------- */
.cabecera.fija { box-shadow: 0 6px 26px rgba(16, 36, 31, .09); }
.cabecera.fija .cabecera__superior { max-height: 0; opacity: 0; }
.cabecera.fija .cabecera__principal { padding-block: .55rem; }
.cabecera.fija .cabecera__logo img { height: clamp(34px, 11.3px + 2.32vw, 40px); }

/* --- Navegación ------------------------------------------------------- */
.menu { display: flex; align-items: center; gap: clamp(.875rem, 4.63vw - 1.965rem, 1.75rem); list-style: none; }
.menu a {
  position: relative;
  display: block;
  font-family: var(--fuente-titulo);
  font-size: clamp(.925rem, .357rem + .927vw, 1.075rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--verde-800);
  padding: .5rem .1rem;
  white-space: nowrap;
}
.menu a:hover { color: var(--verde-600); }
.menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  border-radius: 2px;
  background: var(--verde-500);
  transition: width var(--transicion);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { width: 100%; }

.cabecera__acciones { display: flex; align-items: center; gap: 1rem; flex: none; }
.cabecera__acciones .boton {
  padding: .82rem clamp(1.1rem, 3.09vw - .795rem, 1.6rem);
  font-size: clamp(.8rem, .42rem + .62vw, .9rem);
}

/* Botón de menú (móvil): tres líneas blancas centradas con exactitud sobre el
   verde del logotipo; al abrir el menú se cruzan en una X. */
.hamburguesa {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--verde-800);
  box-shadow: 0 4px 12px rgba(0, 103, 82, .22);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transicion), box-shadow var(--transicion), transform .15s ease;
}
/* El aclarado es solo para ratón: en el teléfono el :hover queda "pegado"
   después de tocar y el botón no volvería a su verde. */
@media (hover: hover) {
  .hamburguesa:hover { background: var(--verde-600); }
}
.hamburguesa:active { transform: scale(.94); }
.hamburguesa span {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 2px;
  margin: -1px 0 0 -10px;
  border-radius: 2px;
  background: var(--blanco);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa span:nth-child(1) { transform: translateY(-6px); }
.hamburguesa span:nth-child(3) { transform: translateY(6px); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--verde-900);
  padding: calc(var(--cabecera) + 1.5rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transicion), visibility var(--transicion);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.menu-movil.abierto {
  transform: none;
  visibility: visible;
  transition: transform var(--transicion), visibility 0s;
}
.menu-movil a {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  color: #fff;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* El botón es un enlace más del panel: recupera aquí su borde, relleno y
   tamaño, que la regla de los enlaces de arriba le quitaba. */
.menu-movil .boton {
  margin-top: 1.5rem;
  align-self: flex-start;
  padding: .9rem 1.6rem;
  border: 2px solid var(--fondo);
  font-size: .95rem;
}
.menu-movil__datos {
  list-style: none;
  display: grid;
  gap: .9rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .95rem;
}
.menu-movil__datos li { display: flex; align-items: center; gap: .7rem; }
.menu-movil__datos svg { width: 18px; color: var(--verde-500); flex: none; }
.menu-movil__datos a { color: rgba(255, 255, 255, .8); border: 0; padding: 0; font-family: var(--fuente-texto); font-size: .95rem; }
body.sin-scroll { overflow: hidden; }

/* ---------------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  /* Color de respaldo por si la fotografía de fondo no carga o se quita. */
  background:
    radial-gradient(48% 60% at 8% 4%, rgba(0, 186, 70, .16), transparent 62%),
    radial-gradient(44% 58% at 96% 96%, rgba(128, 221, 163, .10), transparent 64%),
    radial-gradient(120% 130% at 78% 8%, var(--verde-700) 0%, var(--verde-900) 55%, var(--verde-950) 100%);
  color: rgba(255, 255, 255, .86);
  padding: calc(var(--cabecera) + clamp(2.5rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Fotografía de fondo bajo un velo verde: aporta contexto y profundidad sin
   robarle legibilidad al texto, que va sobre la zona más opaca (izquierda). */
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 34%;
}
/* Dos capas: un velo base suave, para que la fotografía se lea en toda la
   franja, y un refuerzo local bajo la columna de texto. Medido: el texto
   blanco nunca baja de 7:1 de contraste sobre la foto compuesta. */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 58% at 6% 2%, rgba(0, 186, 70, .15), transparent 60%),
    linear-gradient(90deg,
      rgba(0, 40, 33, .70) 0%,
      rgba(0, 40, 33, .66) 44%,
      rgba(0, 40, 33, .50) 54%,
      rgba(0, 40, 33, .16) 66%,
      transparent 76%),
    linear-gradient(100deg,
      rgba(0, 45, 37, .56) 0%,
      rgba(0, 54, 44, .46) 30%,
      rgba(0, 72, 58, .24) 62%,
      rgba(0, 48, 39, .34) 100%);
}
.hero__contenido { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Con Saira, 42 px es el tope para que cada parte del titular quepa en una
   línea de la columna; el vw la acompaña cuando se angosta (medido de 981 a
   1366 px de ancho). */
.hero h1 {
  color: #fff;
  margin-bottom: 1.2rem;
  font-size: clamp(2rem, 3.35vw, 2.65rem);
  text-wrap: balance;
}
.hero h1 .t-fino { display: block; }
/* Sobre fotografía el texto secundario necesita más luz que sobre verde liso:
   con estos valores ninguna zona baja de 4,5:1 (ver contraste_hero.py). */
.hero .etiqueta { color: var(--menta-200); }
.hero__lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 34rem; color: rgba(255, 255, 255, .88); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* Cuatro avales en una rejilla de 2 × 2 con las columnas alineadas; si la
   columna del hero se angosta, el texto de cada aval se parte. */
.hero__avales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1.2rem 2.2rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.aval { display: flex; align-items: center; gap: .7rem; max-width: 16.5rem; }
.aval svg { width: 26px; height: 26px; color: var(--verde-500); flex: none; }
.aval span { font-size: .88rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.aval strong { display: block; color: #fff; font-weight: 600; }

/* Figura con la forma de hoja de la marca */
.hero__figura { position: relative; }
.figura-hoja {
  border-radius: var(--radio-hoja);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 5;
}
.figura-hoja img { width: 100%; height: 100%; object-fit: cover; }

/* Meta BHAG sobre la foto del hero: la cifra en grande y una línea corta;
   la sigla va montada sobre el borde superior. */
.tarjeta-flotante {
  position: absolute;
  left: -1.5rem; bottom: 2rem;
  background: #fff;
  color: var(--tinta);
  border-radius: 18px;
  padding: 1.35rem 1.4rem 1.15rem;
  box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: .95rem;
  max-width: 18rem;
}
.tarjeta-flotante .cifra {
  font-family: var(--fuente-titulo);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--verde-500);
  line-height: 1;
}
.tarjeta-flotante p { font-size: .82rem; line-height: 1.35; color: var(--tinta-media); margin: 0; }
.tarjeta-flotante__sigla {
  position: absolute;
  top: 0; left: 1.4rem;
  transform: translateY(-50%);
  padding: .32rem .85rem;
  border-radius: 999px;
  background: var(--verde-800);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
}

/* ------------------------------------------------------- 8. Franja normas */
.franja-normas { background: var(--verde-800); padding: 1.6rem 0; }
/* Nueve rubros (normas ISO y líneas de estrategia): con este espaciado quedan
   en tres filas centradas en escritorio. */
.franja-normas ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem clamp(1.25rem, 2.2vw, 1.75rem);
  list-style: none;
}
.franja-normas li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(.9rem, 1.25vw, 1.05rem);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .92);
}
.franja-normas li svg { width: 20px; color: var(--menta-400); flex: none; }

/* ------------------------------- 8b. Recursos gráficos de la marca -------
   Tomados de las piezas gráficas del cliente: foto circular con anillo,
   píldoras con insignia de verificación, barras con punta de flecha y
   tramas de puntos.                                                        */

/* --- Foto circular con anillo verde y borde blanco -------------------- */
.foto-circular {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}
.foto-circular::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    var(--verde-500) 0deg, var(--verde-800) 130deg,
    var(--menta-400) 250deg, var(--verde-500) 360deg);
  z-index: -1;
}
.foto-circular img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 11px solid var(--blanco);
}
.seccion--menta .foto-circular img { border-color: var(--menta-50); }
.seccion--oscura .foto-circular img { border-color: var(--verde-900); }

/* Sello de certificación que acompaña a la foto: anillo blanco, fondo con
   profundidad, aro punteado interior (gesto de estampilla oficial) y
   jerarquía dato grande → filete → descripción en versalitas. */
.foto-circular__sello {
  position: absolute;
  right: -.5rem; bottom: 1.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 142px; height: 142px;
  padding: 1.1rem;
  border-radius: 50%;
  border: 4px solid var(--blanco);
  background:
    radial-gradient(120% 120% at 28% 16%, rgba(0, 186, 70, .38), transparent 58%),
    linear-gradient(160deg, var(--verde-800) 0%, var(--verde-950) 100%);
  color: #fff;
  box-shadow: var(--sombra);
}
.foto-circular__sello::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .38);
  pointer-events: none;
}
.foto-circular__sello strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
}
.foto-circular__sello strong::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  margin: .4rem auto;
  border-radius: 1px;
  background: var(--verde-500);
}
.foto-circular__sello span {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--menta-200);
}

/* --- Píldoras con insignia de verificación ---------------------------- */
.lista-pastillas { list-style: none; display: grid; gap: 1rem; }
.lista-pastillas li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: .95rem 1.8rem .95rem 4.4rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16, 36, 31, .09);
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--verde-800);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.lista-pastillas li:hover { transform: translateX(6px); box-shadow: var(--sombra); }
.lista-pastillas li::before {
  content: "";
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006752' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 30px no-repeat;
  box-shadow: 0 4px 14px rgba(16, 36, 31, .13);
}
.lista-pastillas strong { font-weight: 700; }
.lista-pastillas a { flex: 1; color: inherit; }
.lista-pastillas a:hover { color: var(--verde-600); }

/* --- Entregables: tarjetas con hexágono de color ------------------------ */
/* Tarjetas blancas con el número en un hexágono (el motivo de los íconos de
   servicio). Los tonos del logo se alternan en ciclo: verde oscuro, verde
   brillante y lima, en el hexágono y en el filete inferior. */
.entregables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Dos columnas si cada tarjeta puede medir 19rem; si no, una sola (así
     ningún entregable pasa de tres líneas). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc(50% - .375rem))), 1fr));
  gap: .75rem;
}
.entregables li {
  --tono: var(--verde-800);
  --tono-claro: var(--verde-600);
  --tinta-num: var(--blanco);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.1rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-bottom: 3px solid var(--tono);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
/* Sobre el verde brillante y el lima el número blanco no llega a 4,5:1 de
   contraste: ahí va en verde oscuro. */
.entregables li:nth-child(3n+2) {
  --tono: var(--verde-500);
  --tono-claro: color-mix(in srgb, var(--verde-500) 78%, #fff);
  --tinta-num: var(--verde-950);
}
.entregables li:nth-child(3n) {
  --tono: var(--lima-500);
  --tono-claro: color-mix(in srgb, var(--lima-500) 78%, #fff);
  --tinta-num: var(--verde-950);
}
/* Con un número impar de entregables, el último ocupa la fila entera. */
.entregables li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.entregables__num {
  flex: none;
  width: 46px; height: 51px;
  display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(150deg, var(--tono-claro), var(--tono));
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta-num);
}
.entregables__texto { color: var(--tinta); font-weight: 500; line-height: 1.45; }

/* --- Trama de puntos --------------------------------------------------- */
.trama-puntos {
  position: absolute;
  width: 132px; height: 96px;
  color: var(--menta-400);
  background-image: radial-gradient(currentColor 2.2px, transparent 2.3px);
  background-size: 24px 24px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.seccion--oscura .trama-puntos { color: rgba(255, 255, 255, .5); opacity: .35; }

/* ------------------------------------------------- 9. Insignia hexagonal */
.hexagono {
  width: 62px; height: 68px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--verde-600), var(--verde-800));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex: none;
  transition: transform var(--transicion);
}
.hexagono svg { width: 28px; height: 28px; color: #fff; }
.hexagono--claro { background: linear-gradient(150deg, var(--menta-200), var(--menta-400)); }
.hexagono--claro svg { color: var(--verde-800); }

/* ---------------------------------------------------- 10. Tarjeta servicio */
.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  overflow: hidden;
  height: 100%;
}
.tarjeta::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--menta-50);
  transition: transform var(--transicion);
  z-index: 0;
}
.tarjeta > * { position: relative; z-index: 1; }
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
  border-color: var(--menta-400);
}
.tarjeta:hover::after { transform: scale(1.5); }
.tarjeta:hover .hexagono { transform: rotate(-6deg) scale(1.05); }

.tarjeta__norma {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-700);
  background: var(--menta-100);
  border-radius: 999px;
  padding: .3rem .85rem;
}
/* Visión, Misión y BHAG: contenido centrado, a pedido del cliente. */
.tarjeta--centrada { align-items: center; text-align: center; }
.tarjeta--centrada .tarjeta__norma { align-self: center; }
.tarjeta h3 { margin: 0; font-size: 1.28rem; }
.tarjeta h3 a { color: inherit; }
.tarjeta h3 a:hover { color: var(--verde-600); }
.tarjeta p { font-size: .96rem; margin: 0; }
.tarjeta .enlace-flecha { margin-top: auto; padding-top: .4rem; }

/* Tarjeta oscura para contraste dentro de la grilla */
.tarjeta--oscura {
  background: linear-gradient(155deg, var(--verde-800), var(--verde-950));
  border-color: transparent;
  color: rgba(255, 255, 255, .8);
}
.tarjeta--oscura h3 { color: #fff; }
.tarjeta--oscura::after { background: rgba(255, 255, 255, .06); }
.tarjeta--oscura .tarjeta__norma { background: rgba(255, 255, 255, .14); color: var(--menta-200); }
.tarjeta--oscura .enlace-flecha { color: var(--menta-400); }
.tarjeta--oscura .hexagono { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------- 11. Listado numerado */
.lista-numerada { list-style: none; display: grid; gap: .85rem; }
.lista-numerada li {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.lista-numerada li:hover { transform: translateX(6px); border-color: var(--menta-400); box-shadow: var(--sombra-sm); }
.lista-numerada .num {
  font-family: var(--fuente-titulo);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--menta-400);
  min-width: 2.1rem;
}
.lista-numerada strong { display: block; color: var(--verde-800); font-family: var(--fuente-titulo); font-weight: 500; font-size: 1.05rem; }
.lista-numerada span { font-size: .93rem; }

/* ----------------------------------------------------- 12. Metodología */
.metodologia { scroll-margin-top: 5rem; position: relative; background: #f2f7f5; isolation: isolate; }
.metodologia::before {
  content: ""; position: absolute; inset: 45% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 105, 80, .14) .8px, transparent 1px) 0 0 / 22px 22px;
  mask-image: linear-gradient(transparent, #000);
}
.metodologia .encabezado-seccion { margin-bottom: 3rem; }
.metodologia h2 { font-weight: 700; line-height: 1.15; }
.pasos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem; padding: 0; margin: 0; list-style: none;
}
.paso { position: relative; min-width: 0; text-align: center; display: grid; grid-template-rows: auto 1fr; }
.paso__cabecera { position: relative; width: 112px; height: 112px; margin: 0 auto 1.8rem; z-index: 1; }
.paso__icono {
  width: 100%; height: 100%; display: grid; place-items: center;
  border: 8px solid #fff; border-radius: 50%; color: #fff; background: var(--verde-700);
  transition: background .25s ease, box-shadow .25s ease;
}
.paso__icono svg { width: 34px; height: 34px; }
.paso__num {
  position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 2px solid var(--verde-700); border-radius: 50%; background: #fff;
  font-family: var(--fuente-titulo); font-size: .8rem; font-weight: 700; color: var(--verde-900);
}
.paso__conexion {
  position: absolute; left: calc(50% + 64px); top: 55px;
  width: calc(100% + 1.5rem - 128px); height: 2px;
  background: repeating-linear-gradient(90deg, #91cbb8 0 7px, transparent 7px 14px);
  pointer-events: none;
}
.paso__conexion::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-left: 7px solid #91cbb8; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.paso__contenido {
  align-self: stretch;
  position: relative; padding: 1.45rem 1.25rem; background: #fff; border-radius: 22px;
  box-shadow: 0 12px 24px rgba(0, 65, 49, .055);
}
.paso__contenido::before {
  content: ""; position: absolute; top: -8px; left: calc(50% - 8px);
  width: 16px; height: 16px; transform: rotate(45deg); background: #fff;
}
.paso h3 { font-size: 1.12rem; margin-bottom: .55rem; line-height: 1.3; }
.paso p { font-size: .93rem; margin: 0; line-height: 1.75; }
@media (hover: hover) {
  .paso:hover .paso__icono { background: var(--verde-800); box-shadow: 0 0 0 3px rgba(0, 105, 80, .18); }
}
/* Animacion breve del recorrido al entrar en pantalla. */
.pasos.en-vista .paso__icono { animation: paso-destacado 1.4s ease-in-out; }
.pasos.en-vista .paso:nth-child(2) .paso__icono { animation-delay: .5s; }
.pasos.en-vista .paso:nth-child(3) .paso__icono { animation-delay: 1s; }
.pasos.en-vista .paso:nth-child(4) .paso__icono { animation-delay: 1.5s; }
.pasos.en-vista .paso__conexion { animation: paso-recorrido 3s linear; }
@keyframes paso-recorrido { to { background-position: 56px 0; } }
@keyframes paso-destacado { 50% { box-shadow: 0 0 0 4px rgba(0, 105, 80, .2); background: var(--verde-800); } }

/* --------------------------------------------------------- 13. Cifras */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.cifra-item { text-align: center; }
.cifra-item .valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.6rem, 5.5vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--verde-500);
  display: block;
}
.cifra-item .rotulo {
  display: block;
  margin-top: .6rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
}

/* -------------------------------------------------------- 14. Perfil */
.perfil__figura { position: relative; }
/* Pie del retrato (Nosotros): etiqueta entre dos rayas, como "— CONSULTING —"
   en el logotipo, y el nombre y cargo centrados bajo la foto. */
.perfil__pie { margin-top: 2rem; text-align: center; }
.perfil__pie .etiqueta::after {
  content: "";
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, var(--menta-400), var(--verde-500));
  border-radius: 2px;
}
.perfil__pie h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .45rem; text-wrap: balance; }
.perfil__cargo { font-size: 1.1rem; color: var(--verde-700); }

/* --------------------------------------------------- 15. Capacitaciones */
.tarjeta-curso {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  height: 100%;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-curso:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.tarjeta-curso[hidden] { display: none; }
.tarjeta-curso__imagen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--menta-100); }
.tarjeta-curso__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tarjeta-curso:hover .tarjeta-curso__imagen img { transform: scale(1.06); }
.tarjeta-curso__cuerpo { padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.tarjeta-curso h3 { font-size: 1.18rem; margin: 0; }
.tarjeta-curso h3 a { color: inherit; }
.tarjeta-curso p { font-size: .94rem; margin: 0; }
.tarjeta-curso .enlace-flecha { margin-top: auto; }

.insignia {
  position: absolute; top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .95);
  color: var(--verde-800);
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
  box-shadow: var(--sombra-sm);
}
.insignia--presencial { background: var(--verde-800); color: #fff; }
.insignia--virtual { background: var(--verde-500); color: #fff; }
.insignia--in-company { background: var(--lima-500); color: #fff; }

.meta-curso { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; color: var(--tinta-suave); }
.meta-curso span { display: inline-flex; align-items: center; gap: .4rem; }
.meta-curso svg { width: 15px; color: var(--verde-600); }

/* Filtros de modalidad */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.filtro {
  min-height: 44px;
  border: 1px solid var(--linea);
  background: #fff;
  border-radius: 999px;
  padding: .55rem 1.25rem;
  font-family: var(--fuente-titulo);
  font-size: .88rem;
  letter-spacing: .05em;
  color: var(--tinta-media);
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--menta-400); color: var(--verde-800); }
.filtro.activo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

/* -------------------------------------------- 15b. Logotipos de clientes */
.logos-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
}
.logos-clientes li { display: grid; place-items: center; }
.logos-clientes img {
  /* Altura fija (no max-height) para reservar el espacio antes de que la
     carga diferida traiga la imagen y evitar el salto de maquetación. */
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity var(--transicion), filter var(--transicion);
}
.logos-clientes li:hover img { opacity: 1; filter: none; }

/* ------------------------------------------------------- 16. Banda CTA */
.banda-cta {
  position: relative;
  background:
    linear-gradient(110deg, rgba(0, 186, 70, .06), transparent 55%),
    linear-gradient(115deg, var(--verde-950) 0%, var(--verde-900) 55%, var(--verde-800) 100%);
  color: rgba(255, 255, 255, .85);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.banda-cta__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem;
  position: relative; z-index: 1;
}
.banda-cta h2 { color: #fff; margin-bottom: .85rem; max-width: 24ch; text-wrap: balance; }
.banda-cta .etiqueta { color: var(--menta-200); }
.banda-cta p { max-width: 54ch; margin-bottom: 0; text-wrap: pretty; }
.banda-cta__interior > div { min-width: 0; }
.banda-cta__interior > div:first-child { flex: 1; }
.banda-cta__acciones { display: flex; flex-wrap: wrap; gap: 1rem; flex-shrink: 0; }
.banda-cta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--verde-500), var(--menta-400) 40%, transparent 90%);
  pointer-events: none;
}

/* -------------------------------------------------------- 17. Formulario */
.formulario { display: grid; gap: 1.15rem; }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-family: var(--fuente-titulo);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-800);
}
.campo .obligatorio { color: var(--verde-500); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  padding: .85rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde-500);
  box-shadow: 0 0 0 4px rgba(0, 186, 70, .13);
}
.campo--error input, .campo--error select, .campo--error textarea { border-color: #d3453f; }
.campo .error { font-size: .84rem; color: #d3453f; }
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

.aviso {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-size: .95rem;
  margin-bottom: 1.6rem;
}
.aviso svg { width: 22px; flex: none; margin-top: .15rem; }
.aviso--ok { background: var(--menta-100); color: var(--verde-900); }
.aviso--error { background: #fdecec; color: #a52b26; }

/* Panel de contacto lateral */
.datos-contacto { list-style: none; display: grid; gap: 1.4rem; }
.datos-contacto li { display: flex; gap: 1rem; align-items: flex-start; }
.datos-contacto li > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.datos-contacto .hexagono { flex-shrink: 0; }
.datos-contacto .hexagono { width: 46px; height: 50px; }
.datos-contacto .hexagono svg { width: 20px; }
.datos-contacto strong { display: block; font-family: var(--fuente-titulo); color: var(--verde-800); font-size: 1rem; }
.datos-contacto a, .datos-contacto span { font-size: .96rem; color: var(--tinta-media); }
.datos-contacto a:hover { color: var(--verde-500); }

/* -------------------------------------------------------------- 18. Pie */
.pie {
  background:
    radial-gradient(42% 90% at 3% 0%, rgba(0, 186, 70, .13), transparent 60%),
    var(--verde-950);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(3rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }
.pie h4 {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
  font-weight: 500;
}
.pie ul { list-style: none; display: grid; gap: .7rem; }
.pie a { color: rgba(255, 255, 255, .68); font-size: .94rem; }
.pie a:hover { color: var(--verde-500); }
/* Logotipo entero en blanco (órbita, texto y líneas): sobre el verde del pie
   no se mezclan los colores del original. */
.pie__logo { height: 100px; width: auto; margin-bottom: 1.4rem; }
.pie__lema { font-size: .95rem; max-width: 26rem; }

.redes { display: flex; gap: .7rem; margin-top: 1.6rem; }
.redes a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transition: background-color var(--transicion), transform var(--transicion);
}
.redes a:hover { background: var(--verde-500); transform: translateY(-3px); color: #fff; }
.redes svg { width: 19px; height: 19px; }

.pie__base {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.5rem 0 5.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  justify-content: space-between;
  font-size: .85rem;
}

/* ------------------------------------------------------ 19. WhatsApp */
.wa-flotante {
  position: fixed;
  right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  padding: 0;
  transition: transform var(--transicion), background-color var(--transicion);
}
.wa-flotante:hover { transform: translateY(-4px) scale(1.02); color: #fff; background: #1fbb59; }
.wa-flotante svg { width: 26px; height: 26px; flex: none; }
.wa-flotante::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* -------------------------------------------------- 20. Cabecera interna */
.cabecera-pagina {
  position: relative;
  background:
    linear-gradient(110deg, rgba(0, 186, 70, .06), transparent 55%),
    linear-gradient(115deg, var(--verde-950) 0%, var(--verde-900) 55%, var(--verde-800) 100%);
  color: rgba(255, 255, 255, .86);
  /* La cabecera es fija (fuera del flujo), así que la banda debe reservar su
     alto para que las migas no queden ocultas debajo. */
  padding: calc(var(--cabecera) + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(2.5rem, 4.5vw, 3.5rem);
  overflow: hidden;
}
.cabecera-pagina::before {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--verde-500), var(--menta-400) 40%, transparent 90%);
  pointer-events: none;
}
.cabecera-pagina h1 {
  color: #fff;
  max-width: 28ch;
  margin-bottom: 1rem;
  font-size: clamp(1.85rem, min(3.5vw, 5.6svh), 3.25rem);
  line-height: 1.16;
  text-wrap: balance;
}
.cabecera-pagina .etiqueta { color: var(--menta-200); margin-bottom: .8rem; }
.cabecera-pagina p { max-width: 62ch; font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.65; margin-bottom: 0; text-wrap: pretty; }
.cabecera-pagina .migas { padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.migas { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; margin-bottom: 1.2rem; list-style: none; }
.migas a { color: var(--menta-200); }
.migas li + li::before { content: "/"; margin-right: .5rem; color: rgba(255, 255, 255, .35); }

/* ---------------------------------------------- 21. Contenido enriquecido */
.politica { background: #f2f7f5; scroll-margin-top: 6rem; }
.politica__rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.politica__presentacion { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--verde-900); border-radius: 24px; color: #e2f2ec; }
.politica__icono { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; color: var(--menta-200); }
.politica__icono svg { width: 28px; height: 28px; }
.politica__presentacion .etiqueta { color: var(--menta-200); font-size: .7rem; letter-spacing: .15em; }
.politica__presentacion h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.2; margin: .9rem 0 1.1rem; text-wrap: balance; }
.politica__presentacion p { font-size: .97rem; line-height: 1.7; margin: 0; }
.politica__enlace { display: inline-flex; align-items: center; gap: .8rem; color: #fff; font-size: .9rem; font-weight: 600; margin-top: 1.6rem; padding-block: .7rem; border-bottom: 1px solid rgba(255,255,255,.4); }
.politica__enlace svg { width: 18px; height: 18px; flex: none; }
.politica__enlace:hover { color: var(--menta-200); }
.politica__contenido.prosa ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 2rem; margin: 0; list-style: none; counter-reset: compromiso; }
.politica__contenido.prosa li { position: relative; min-width: 0; padding: 2.6rem 0 1.4rem; border-bottom: 1px solid rgba(0, 103, 82, .18); font-size: .94rem; line-height: 1.7; counter-increment: compromiso; }
.politica__contenido.prosa li::before { content: counter(compromiso, decimal-leading-zero); position: absolute; top: 0; left: 0; color: var(--verde-700); font-family: var(--fuente-titulo); font-size: .85rem; font-weight: 600; }
.politica__contenido.prosa li strong { display: block; color: var(--verde-900); font-family: var(--fuente-titulo); font-size: 1.12rem; line-height: 1.3; margin-bottom: .55rem; }
@media (max-width: 980px) {
  .politica__rejilla { grid-template-columns: 1fr; }
  .politica__presentacion h2 { max-width: 22ch; }
  .politica__presentacion p { max-width: 60ch; }
}
@media (max-width: 540px) {
  .politica__contenido.prosa ol { grid-template-columns: 1fr; gap: 1.2rem; }
  .politica__contenido.prosa li { padding-top: 2rem; padding-bottom: 1.2rem; }
}
.prosa { font-size: 1.06rem; }
.titulo-detalle { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.prosa h3 { margin-top: 2.2rem; font-size: 1.35rem; }
.prosa ul, .prosa ol { margin: 0 0 1.2em 1.2em; display: grid; gap: .5rem; }
.prosa ol { list-style: decimal; }
.prosa ul { list-style: disc; }
.prosa li::marker { color: var(--verde-500); }
.prosa strong { color: var(--verde-800); }

.caja-lateral {
  background: var(--menta-50);
  border: 1px solid var(--menta-200);
  border-radius: var(--radio);
  padding: 1.7rem;
  position: sticky;
  top: calc(var(--cabecera) + 1rem);
}
.caja-lateral h3 { font-size: 1.15rem; }
.caja-lateral .boton { padding-inline: 1rem; font-size: .9rem; letter-spacing: .03em; }

/* ----------------------------------------------------- 22. Animaciones
   El contenido se muestra siempre: no hay aparición progresiva al hacer
   scroll. La metodología añade un recorrido decorativo breve. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ----------------------------------------------------- 23. Adaptativo */
@media (max-width: 1080px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso:nth-child(2) .paso__conexion { display: none; }
}

@media (max-width: 1180px) {
  .cabecera__datos li:last-child { display: none; }   /* se oculta el 2.º teléfono */
}

/* Laptops con escalado de Windows (~1000-1100 px efectivos): las tarjetas
   pasan a dos columnas antes de quedar angostas. */
@media (max-width: 1100px) {
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Escalado fluido de escritorio: también cubre 1280 × 720 y 1366 × 768.
   svh contempla la altura útil del navegador. Los mínimos en rem preservan
   la lectura; el contenido puede crecer y desplazarse si necesita más alto. */
@media (min-width: 981px) {
  .menu-movil { display: none; }
  :root {
    --barra-contacto: clamp(2.5rem, 5.5svh, 3rem);
    --barra-principal: clamp(4.25rem, 9.5svh, 5.375rem);
    --cabecera: calc(var(--barra-contacto) + var(--barra-principal));
    --espacio-seccion: clamp(2.75rem, min(5vw, 7svh), 4.5rem);
  }

  .cabecera__superior > .contenedor { min-height: var(--barra-contacto); padding-block: .25rem; }
  .cabecera__principal {
    min-height: var(--barra-principal);
    padding-block: .5rem;
    gap: clamp(.875rem, 3vw - 1.25rem, 2rem);
  }
  .cabecera__logo img { height: clamp(36px, min(3.35vw, 6svh), 48px); }
  .menu { gap: clamp(.75rem, 3.5vw - 1.4rem, 1.75rem); }
  .menu a { font-size: clamp(.925rem, 1.2vw, 1.075rem); }
  .cabecera__acciones .boton {
    padding: .65rem clamp(1rem, 1.75vw, 1.6rem);
    font-size: clamp(.8rem, 1vw, .9rem);
    white-space: nowrap;
  }
  .cabecera.fija .cabecera__principal { min-height: 4rem; }

  h1 { font-size: clamp(2.1rem, min(4.6vw, 6.6svh), 4.1rem); }
  h2 { font-size: clamp(1.7rem, min(3.2vw, 5svh), 2.9rem); }
  .seccion { padding-block: var(--espacio-seccion); }
  .seccion--ajustada { padding-block: clamp(2rem, min(4vw, 5svh), 3rem); }
  .encabezado-seccion { margin-bottom: clamp(1.75rem, min(3vw, 4svh), 2.75rem); }
  .boton { padding: clamp(.75rem, 1.5svh, 1rem) clamp(1.25rem, 2vw, 1.9rem); }
  .tarjeta { padding: clamp(1.5rem, min(2.6vw, 4svh), 2.2rem); }
  .banda-cta { padding-block: clamp(2.5rem, min(5vw, 6svh), 4rem); }

  .hero {
    padding-top: calc(var(--cabecera) + clamp(1.5rem, 8svh - 2rem, 4rem));
    padding-bottom: clamp(2rem, 8svh - 1.5rem, 5rem);
  }
  .hero__contenido { gap: clamp(2rem, 4vw, 4rem); }
  .hero .etiqueta { margin-bottom: clamp(.65rem, 1.5svh, 1rem); }
  .hero h1 {
    font-size: clamp(2rem, min(3vw, 5svh), 2.65rem);
    margin-bottom: clamp(.85rem, 2svh, 1.2rem);
  }
  .hero__lead { font-size: clamp(1.05rem, min(1.4vw, 2.4svh), 1.22rem); line-height: 1.6; }
  .hero__acciones { margin-top: clamp(1.25rem, 3svh, 2.2rem); gap: .85rem; }
  .hero__avales {
    margin-top: clamp(1.25rem, 5svh - .75rem, 3rem);
    padding-top: clamp(1rem, 4svh - .75rem, 2rem);
    gap: clamp(.75rem, 2svh - .25rem, 1.2rem) clamp(1rem, 2vw, 2.2rem);
  }
  .hero__figura { min-width: 0; }
  .hero__figura .figura-hoja {
    width: min(100%, clamp(16rem, 49svh, 25rem));
    margin: 0 0 0 auto;
  }
  .hero__figura .tarjeta-flotante { left: auto; right: 1rem; bottom: 1.5rem; }

  .cabecera-pagina {
    padding-top: calc(var(--cabecera) + clamp(1.25rem, min(3vw, 4svh), 2.5rem));
    padding-bottom: clamp(2rem, min(4vw, 5svh), 3.5rem);
  }
  .migas { margin-bottom: clamp(.75rem, 2svh, 1.2rem); }
}

/* Una ficha larga debe poder recorrerse completa en laptops bajas. */
@media (min-width: 981px) and (max-height: 800px) {
  .caja-lateral { position: static; }
}

@media (max-width: 980px) {
  :root { --cabecera: 74px; --radio-hoja: 90px 20px 90px 20px; --radio-hoja-alt: 20px 90px 20px 90px; }
  .cabecera__superior { display: none; }              /* el contacto vive en el menú móvil */
  .cabecera__principal { padding-block: .6rem; gap: .75rem; }
  .cabecera__principal > nav { display: none; }
  .cabecera__logo { min-width: 0; flex-shrink: 1; }
  .cabecera__logo img { height: 38px; }
  .cabecera.fija .cabecera__logo img { height: 34px; }
  .menu, .cabecera__acciones .boton { display: none; }
  .hamburguesa { display: grid; }
  .hero__contenido, .rejilla--partida { grid-template-columns: minmax(0, 1fr); }
  /* minmax(0, …): sin él, el ancho mínimo del contenido (correos, botones)
     ensancha la columna y la página se desplaza de lado en 320 px. */
  .rejilla--lateral, .rejilla--contacto { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: calc(var(--cabecera) + 1.75rem); padding-bottom: 3rem; }
  .hero__contenido { gap: 2.5rem; }
  .hero__fondo::after { background: linear-gradient(110deg, rgba(0, 40, 33, .92), rgba(0, 40, 33, .78)); }
  .hero__lead { max-width: 42rem; font-size: 1.05rem; line-height: 1.6; }
  .hero__acciones { margin-top: 1.5rem; }
  .hero__avales { margin-top: 2rem; padding-top: 1.5rem; }
  .hero__figura { width: 100%; max-width: 460px; margin-inline: auto; }
  .hero__figura .figura-hoja { margin: 0; aspect-ratio: 4 / 3; }
  .hero__figura .tarjeta-flotante { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .cifras { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .caja-lateral { position: static; }
  .banda-cta__interior { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .metodologia .encabezado-seccion { margin-bottom: 2rem; }
  .pasos { grid-template-columns: 1fr; gap: 1.5rem; }
  .paso { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: 1fr; gap: 1rem; align-items: start; text-align: left; }
  .paso__cabecera { width: 80px; height: 80px; margin: .6rem 0 0; }
  .paso__icono { border-width: 5px; }
  .paso__icono svg { width: 27px; height: 27px; }
  .paso__num { width: 28px; height: 28px; font-size: .7rem; left: -4px; }
  .paso__contenido { padding: 1.15rem; border-radius: 18px; }
  .paso__contenido::before { left: -7px; top: 42px; width: 14px; height: 14px; }
  .paso__conexion, .paso:nth-child(2) .paso__conexion {
    display: block; left: 39px; top: 96px; bottom: -1.5rem; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, #91cbb8 0 7px, transparent 7px 14px);
  }
  .paso__conexion::after { right: -4px; top: auto; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #91cbb8; border-bottom: 0; }
  .pasos.en-vista .paso__conexion { animation: none; }
  body { font-size: 1rem; }
  .banda-cta__acciones { display: grid; width: 100%; gap: .75rem; }
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .campo--doble { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(1.8rem, 7.8vw, 2.5rem); }
  .hero .etiqueta { font-size: .75rem; letter-spacing: .15em; }
  .hero__lead { font-size: 1rem; }
  .hero__acciones { gap: .75rem; }
  .hero__acciones .boton { width: 100%; padding-block: .8rem; }
  .hero__avales { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hero__figura .figura-hoja { aspect-ratio: 1; }
  .hero__figura .tarjeta-flotante { padding: 1.1rem 1rem .9rem; gap: .65rem; }
  .hero__figura .tarjeta-flotante .cifra { font-size: 1.8rem; }
  .cabecera-pagina h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .menu-movil__datos a, .pie a { overflow-wrap: anywhere; }
  /* La franja pasa a lista: nueve rubros centrados de a uno quedaban dispares. */
  .franja-normas ul { flex-direction: column; align-items: flex-start; gap: .55rem; width: fit-content; margin-inline: auto; }
  /* Botones más compactos: con la tipografía de títulos las etiquetas largas
     ("Ver todas las capacitaciones") se partían en dos líneas. */
  .boton { padding-inline: 1.25rem; font-size: .875rem; letter-spacing: .03em; }
  .caja-lateral { padding: 1.25rem 1rem; }
  .caja-lateral .boton { font-size: .85rem; }
  .wa-flotante { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .cifras { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .boton:hover, .tarjeta:hover, .tarjeta-curso:hover, .lista-pastillas li:hover { transform: none; }
  .cabecera__logo:active, .boton:active, button:active, .wa-flotante:active { opacity: .8; }
}

/* ------------------------------------------------------- 24. Impresión */
@media print {
  .cabecera, .wa-flotante, .banda-cta, .pie, .menu-movil { display: none !important; }
  body { color: #000; }
}

/* Componentes de las vistas y utilidades de presentación. */
.detalle-imagen { aspect-ratio: 16/9; margin: 0 0 2.5rem; }
.detalle-resumen { font-size: 1.18rem; color: var(--verde-800); font-weight: 500; }
.separacion-seccion { margin-top: 2.5rem; }
.separacion-lista { margin-top: 1.4rem; }
.detalle-icono { margin-bottom: 1rem; }
.texto-apoyo { font-size: .98rem; }
.detalle-acciones { display: grid; gap: .7rem; margin-top: 1.4rem; }
.separacion-amplia { margin-top: 2rem; }
.texto-atenuado { opacity: .6; }
.seccion-enlace { margin-top: 2.5rem; text-align: center; }
.trama-puntos--perfil { left: -1rem; top: -.5rem; }
.perfil-subtitulo { font-size: 1.1rem; color: var(--verde-700); }
.etiqueta--centrada { justify-content: center; width: 100%; display: flex; }
.sin-margen { margin: 0; }
.testimonio-firma { margin-top: auto; }
.testimonio-nombre { display: block; color: var(--verde-800); font-family: var(--fuente-titulo); }
.testimonio-cargo { font-size: .9rem; }
.separacion-corta { margin-top: 1rem; }
.detalle-datos { margin-top: 1.2rem; }
.curso-acciones { display: grid; gap: .7rem; margin-top: 1.8rem; }
.contacto-indicaciones { margin-bottom: 2rem; }
.campo-obligatorio { color: var(--verde-500); }
.contacto-whatsapp { width: 100%; margin: 1.2rem 0 1.8rem; }
.programas-destacados { margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.perfil-nivel { color: var(--verde-700); font-weight: 500; }