/* ============================================================================
   SECCIONES — composición de cada bloque de la página.
   ========================================================================= */

/* ============================================================================
   BARRA SUPERIOR
   ========================================================================= */
.barra {
  position: sticky;
  top: 0;
  z-index: var(--plano-barra);
  background: transparent;
  transition: background var(--dur-media) var(--curva-suave),
              border-color var(--dur-media) var(--curva-suave);
  border-bottom: var(--trazo) solid transparent;
}
.barra.es-desplazada {
  background: var(--color-velo);
  border-bottom-color: var(--color-borde);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
}
.barra__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alto-barra);
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.logo { display: inline-flex; align-items: center; }
.logo img { width: 8.25rem; height: auto; }

.barra__enlaces { display: none; gap: var(--esp-1); }
.barra__enlaces a {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  color: var(--color-texto-debil);
  font-size: var(--txt-200);
  text-decoration: none;
  /* Zona de pulsación cómoda: un enlace de texto de una línea no es un botón. */
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}
.barra__enlaces a:hover { color: var(--color-texto-fuerte); background: var(--color-superficie); }
.barra__enlaces a[aria-current="true"] { color: var(--color-texto-fuerte); }

.barra__acciones { display: flex; align-items: center; gap: var(--esp-3); }
.barra__acciones .boton { display: none; }

.hamburguesa {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto-fuerte);
}
.hamburguesa span,
.hamburguesa span::before,
.hamburguesa span::after {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-media) var(--curva), opacity var(--dur-rapida) linear;
}
.hamburguesa span::before { transform: translateY(-0.3125rem); }
.hamburguesa span::after  { transform: translateY(0.3125rem); }
.barra.menu-abierto .hamburguesa span { background: transparent; }
.barra.menu-abierto .hamburguesa span::before { transform: rotate(45deg); }
.barra.menu-abierto .hamburguesa span::after  { transform: rotate(-45deg); }

/* --- Menú móvil: panel OPACO a pantalla completa. El fallo del archivo
   original era un panel translúcido con el héroe leyéndose por debajo. ---- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--plano-menu);
  display: flex;
  flex-direction: column;
  padding: var(--esp-4) var(--gutter) max(var(--esp-8), env(safe-area-inset-bottom));
  background: var(--color-lienzo);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alto-barra);
  margin-bottom: var(--esp-6);
}
.menu__cerrar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto-fuerte);
}
.menu__enlaces { display: flex; flex-direction: column; }
.menu__enlaces a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--esp-3) 0;
  border-bottom: var(--trazo) solid var(--color-regla);
  color: var(--color-texto-fuerte);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-400);
  font-weight: var(--peso-semi);
  text-decoration: none;
}
.menu__pie { margin-top: auto; padding-top: var(--esp-8); }
.menu__nota {
  margin-top: var(--esp-4);
  font-size: var(--txt-200);
  color: var(--color-texto-debil);
  text-align: center;
}

/* ============================================================================
   HÉROE
   ========================================================================= */
.heroe { padding-top: var(--esp-10); padding-bottom: var(--ritmo-seccion); }
.heroe__rejilla {
  display: grid;
  gap: var(--esp-12);
  align-items: center;
}
.heroe h1 { margin-block: var(--esp-5); }
.heroe__entradilla { max-width: var(--medida-lectura); }
.heroe__entradilla p { color: var(--color-texto); }
.heroe__acciones { margin-top: var(--esp-8); display: flex; flex-direction: column; gap: var(--esp-4); align-items: flex-start; }
.heroe__nota {
  font-size: var(--txt-200);
  color: var(--color-texto-debil);
  line-height: var(--alto-compacto);
}
.heroe__nota b { color: var(--color-acento-2-texto); font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }

.heroe__visual { padding: var(--esp-3); }
.heroe__visual-etq {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
  padding-inline: var(--esp-2);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}

/* ============================================================================
   SEÑALES — lo que llega al equipo
   ========================================================================= */
.mensajes { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.mensaje { padding: var(--esp-5); }
.mensaje__rol {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}
.avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--trazo) solid var(--color-acento-borde);
  background: var(--color-acento);
  color: var(--color-texto-sobre-acento);
  font-size: var(--txt-100);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  flex: none;
}
.mensaje p { color: var(--color-texto-fuerte); }

/* ============================================================================
   PROBLEMA
   ========================================================================= */
.problema__rejilla {
  display: grid;
  gap: var(--esp-12);
  align-items: start;
}
.problema__lista { display: grid; gap: var(--esp-3); }
.problema__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
  padding: var(--esp-4);
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
}
.problema__item .icono { color: var(--color-peligro); margin-top: 0.15em; }
.problema__item p { font-size: var(--txt-200); }

/* Cadena de flujo: envuelve en pantallas estrechas en vez de desbordar. */
.flujo { margin-block: var(--esp-12); }
.flujo__etq {
  margin-bottom: var(--esp-4);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}
.flujo__cadena {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}
.flujo__nodo {
  padding: var(--esp-2) var(--esp-4);
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  color: var(--color-texto-fuerte);
  white-space: nowrap;
}
.flujo__nodo--final {
  border-color: var(--color-peligro);
  background: var(--color-peligro-tenue);
  color: var(--color-texto-fuerte);
}
.flujo__flecha { color: var(--color-texto-debil); display: inline-flex; }
.flujo__flecha svg { width: 1.375rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================================
   RESPALDO
   ========================================================================= */
.respaldo__rejilla { display: grid; gap: var(--esp-12); align-items: start; }
.respaldo__cifras { display: grid; gap: var(--esp-4); }
.cifra-bloque { padding: var(--esp-5); display: grid; gap: var(--esp-2); }
.cifra-bloque__num {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-700);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.cifra-bloque__etq { font-size: var(--txt-200); color: var(--color-texto-debil); }
.cifra-bloque--icono { grid-template-columns: auto 1fr; align-items: center; gap: var(--esp-4); }

.logos { margin-top: var(--esp-16); }
.logos__etq {
  margin-bottom: var(--esp-4);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}
.logos__fila { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.logo-hueco {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 3.25rem;
  border: var(--trazo) dashed var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto-debil);
}
.logo-hueco svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.logos__nota { margin-top: var(--esp-3); font-size: var(--txt-200); color: var(--color-texto-debil); }

.testimonios { margin-top: var(--esp-20); }
.testimonios__rejilla {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--esp-8);
}

/* ============================================================================
   APLICACIÓN SEMANAL (riel numerado)
   ========================================================================= */
.aplica__rejilla { display: grid; gap: var(--esp-12); align-items: start; }
.riel { display: grid; gap: var(--esp-5); position: relative; }
.riel__item { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-4); align-items: start; }
.riel__nodo {
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-sobre-acento);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  font-weight: var(--peso-fuerte);
  flex: none;
}
.riel__item h3 { font-size: var(--txt-300); font-weight: var(--peso-semi); }
.riel__item p { font-size: var(--txt-200); color: var(--color-texto-debil); margin-top: var(--esp-1); }

/* ============================================================================
   PILARES / MICROCERTIFICACIONES
   ========================================================================= */
.pilares { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.pilar { padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-3); }
.pilar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.pilar__num {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-600);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.pilar__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: var(--radio-sm);
  border: var(--trazo) solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-acento-claro);
}
.pilar__semana {
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}
.pilar h3 { font-size: var(--txt-400); }
.pilar p { font-size: var(--txt-200); color: var(--color-texto-debil); }
.pilar__micro {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-4);
  border-top: var(--trazo) solid var(--color-regla);
  font-size: var(--txt-200);
  color: var(--color-acento-2-texto);
}
.pilares__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  margin-top: var(--esp-10);
}
.pilares__resumen { font-family: var(--fuente-dato); font-size: var(--txt-200); color: var(--color-texto-debil); }
.pilares__resumen strong { color: var(--color-texto-fuerte); }

/* ============================================================================
   MOTOR DE IA
   El anillo decorativo con nodos en posiciones absolutas solo existe desde
   tableta: en móvil es una lista ordenada, que es lo que de verdad comunica
   la secuencia.
   ========================================================================= */
.motor__pasos { display: grid; gap: var(--esp-3); counter-reset: paso; }
.motor__paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: start;
  padding: var(--esp-4);
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
}
.motor__num {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-sobre-acento);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  font-weight: var(--peso-fuerte);
}
.motor__paso h3 { font-size: var(--txt-300); font-weight: var(--peso-semi); }
.motor__paso p { font-size: var(--txt-200); color: var(--color-texto-debil); margin-top: var(--esp-1); }

.agentes { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin-top: var(--esp-8); }
.agente { padding: var(--esp-6); display: grid; gap: var(--esp-3); }
.agente__top { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.agente__icono {
  display: grid; place-items: center;
  width: 2.75rem; aspect-ratio: 1;
  border-radius: var(--radio-sm);
  border: var(--trazo) solid var(--color-acento-borde);
  background: var(--color-acento-tenue);
  color: var(--color-acento-claro);
}
.agente__estado {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-family: var(--fuente-dato); font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato); text-transform: uppercase;
  color: var(--color-exito);
}
.agente h3 { font-size: var(--txt-400); }
.agente p { font-size: var(--txt-200); color: var(--color-texto-debil); }
.agente__salida {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
  border: var(--trazo) solid var(--color-borde);
  background: var(--color-lienzo-alt);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  color: var(--color-texto-dato);
  overflow-wrap: anywhere;
}
.motor__cierre { margin-top: var(--esp-8); padding: var(--esp-6); text-align: center; }
.motor__cierre p { font-family: var(--fuente-titulo); font-size: var(--txt-400); color: var(--color-texto-fuerte); line-height: var(--alto-subtitulo); }

/* ============================================================================
   SEMANA TIPO
   ========================================================================= */
.semana { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.semana__tarjeta { padding: var(--esp-5); display: grid; gap: var(--esp-2); }
.semana__top { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-2); }
.semana__icono {
  display: grid; place-items: center;
  width: 2.25rem; aspect-ratio: 1;
  border-radius: var(--radio-sm);
  border: var(--trazo) solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-acento-claro);
}
.semana__idx { font-family: var(--fuente-dato); font-size: var(--txt-100); color: var(--color-texto-dato); letter-spacing: var(--espaciado-letra-dato); }
.semana__tarjeta h3 { font-size: var(--txt-300); font-weight: var(--peso-semi); }
.semana__tarjeta p { font-size: var(--txt-200); color: var(--color-texto-debil); }

/* ============================================================================
   INCLUYE
   ========================================================================= */
.incluye__panel { padding: clamp(var(--esp-6), 4vw, var(--esp-12)); }
.incluye__recibes {
  margin-bottom: var(--esp-5);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-acento-2-texto);
}
.comprobados--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.incluye__pie { margin-top: var(--esp-10); }

/* ============================================================================
   ROADMAP
   ========================================================================= */
.roadmap__panel { padding: clamp(var(--esp-5), 3vw, var(--esp-8)); }
.roadmap__panel-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.roadmap__panel-semanas { font-family: var(--fuente-dato); font-size: var(--txt-100); letter-spacing: var(--espaciado-letra-dato); color: var(--color-texto-dato); }
.roadmap__desc { color: var(--color-texto-debil); font-size: var(--txt-200); }
.roadmap__modulos { display: grid; gap: var(--esp-2); margin-top: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.roadmap__modulo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: center;
  padding: var(--esp-3) var(--esp-4);
  border: var(--trazo) solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  font-size: var(--txt-200);
}
.roadmap__modulo .num {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-100);
  color: var(--color-acento-claro);
  font-weight: var(--peso-fuerte);
}
.roadmap__checkpoint {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
  padding: var(--esp-2) var(--esp-4);
  border: var(--trazo) solid var(--color-acento-2-borde);
  border-radius: var(--radio-pildora);
  background: var(--color-acento-2-tenue);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-acento-2-texto);
}
.roadmap__resultado { margin-top: var(--esp-8); padding: clamp(var(--esp-6), 4vw, var(--esp-12)); text-align: center; display: grid; justify-items: center; gap: var(--esp-4); }
.insignia {
  display: grid; place-items: center;
  width: 4rem; aspect-ratio: 1;
  border-radius: 50%;
  border: var(--trazo) solid var(--color-acento-2-borde);
  background: var(--color-acento-2-tenue);
  color: var(--color-acento-2-texto);
}
.roadmap__resultado p { max-width: var(--medida-corta); color: var(--color-texto-debil); }

/* ============================================================================
   INVERSIÓN
   ========================================================================= */
.inversion__rejilla { display: grid; gap: var(--esp-8); align-items: start; }

.precio { padding: clamp(var(--esp-5), 4vw, var(--esp-10)); display: grid; gap: var(--esp-5); }
.precio__anterior {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-300);
  color: var(--color-texto-debil);
  text-decoration: line-through;
}
.precio__etq { font-size: var(--txt-200); color: var(--color-texto-debil); }
.precio__monto {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  /* Se ajusta al ancho disponible: en 390px el original se salía de pantalla
     y el precio se leía «$21,900 MX». */
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: var(--peso-negro);
  line-height: 1;
  overflow-wrap: anywhere;
}
.precio__nota { font-size: var(--txt-200); color: var(--color-texto-debil); }
.precio__cuenta-etq {
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
  margin-bottom: var(--esp-3);
}
.precio__acciones { display: grid; gap: var(--esp-3); }
.precio__hechos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.precio__hechos .chip { font-size: var(--txt-100); font-family: var(--fuente-dato); }

.producto { position: relative; border-radius: var(--radio-lg); overflow: hidden; border: var(--trazo) solid var(--color-borde); }
.producto img { width: 100%; height: auto; }
.producto__etq {
  position: absolute;
  left: var(--esp-4);
  bottom: var(--esp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pildora);
  background: var(--color-velo-medio-fuerte);
  border: var(--trazo) solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-sobre-medio);
}

/* ============================================================================
   CUPO
   ========================================================================= */
.cupo__panel { padding: clamp(var(--esp-6), 4vw, var(--esp-12)); display: grid; gap: var(--esp-5); justify-items: start; }
.cupo__barra {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radio-pildora);
  background: var(--color-superficie-alta);
  overflow: hidden;
}
.cupo__barra-relleno {
  height: 100%;
  width: var(--cupo-porcentaje, 14%);
  border-radius: var(--radio-pildora);
  background: linear-gradient(90deg, var(--color-acento), var(--color-acento-2));
}
.cupo__etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3);
  width: 100%;
  font-size: var(--txt-200);
  color: var(--color-texto-debil);
}
.cupo__etiquetas strong { font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }
.cupo__meta { display: grid; gap: var(--esp-2); font-size: var(--txt-200); color: var(--color-texto-debil); }

/* ============================================================================
   CIERRE
   ========================================================================= */
.cierre { text-align: center; }
.cierre__frase { display: grid; gap: var(--esp-3); max-width: var(--medida-lectura); margin-inline: auto; }
.cierre__frase .l1 { font-family: var(--fuente-titulo); font-size: var(--txt-500); color: var(--color-texto-debil); }
.cierre__frase .l2 { font-family: var(--fuente-titulo); font-size: var(--txt-700); font-weight: var(--peso-fuerte); line-height: var(--alto-titulo); }
.cierre__cuerpo { max-width: var(--medida-lectura); margin: var(--esp-8) auto 0; }
.cierre__resumen {
  max-width: 34rem;
  margin: var(--esp-12) auto 0;
  padding: clamp(var(--esp-5), 4vw, var(--esp-8));
  display: grid;
  gap: var(--esp-3);
  text-align: left;
}
.cierre__linea {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-4);
  align-items: baseline;
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo) solid var(--color-regla);
  font-size: var(--txt-200);
}
.cierre__linea .k { color: var(--color-texto-debil); }
.cierre__linea .v { color: var(--color-texto-fuerte); font-weight: var(--peso-semi); text-align: right; }
.cierre__resumen .boton { margin-top: var(--esp-4); }

/* ============================================================================
   PIE
   ========================================================================= */
.pie {
  position: relative;
  z-index: var(--plano-contenido);
  padding-block: var(--esp-12);
  border-top: var(--trazo) solid var(--color-borde);
}
.pie__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-6);
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  color: var(--color-texto-debil);
  font-size: var(--txt-200);
  text-decoration: none;
}
.pie__enlaces a:hover { color: var(--color-texto-fuerte); background: var(--color-superficie); }
.pie__legal {
  margin-top: var(--esp-8);
  padding-top: var(--esp-6);
  border-top: var(--trazo) solid var(--color-regla);
  font-size: var(--txt-200);
  color: var(--color-texto-debil);
}

/* ============================================================================
   PUNTOS DE CORTE
   Se prueba en ancho de móvil primero; estos son ensanchamientos, no
   reparaciones.
   ========================================================================= */

/* ≥ 48rem (768px) — tableta */
@media (min-width: 48rem) {
  .testimonios__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heroe__acciones { flex-direction: row; align-items: center; gap: var(--esp-6); }
  .cierre__resumen { text-align: left; }
  .respaldo__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra-bloque--icono { grid-column: 1 / -1; }
  .cuenta__num { font-size: var(--txt-500); }
}

/* ≥ 62rem (992px) — escritorio */
@media (min-width: 62rem) {
  .barra__enlaces { display: flex; }
  .barra__acciones .boton { display: inline-flex; }
  .hamburguesa { display: none; }
  .menu { display: none !important; }

  .heroe__rejilla     { grid-template-columns: 1.05fr 0.95fr; }
  .problema__rejilla  { grid-template-columns: 1fr 1fr; }
  .respaldo__rejilla  { grid-template-columns: 1.15fr 0.85fr; }
  .respaldo__cifras   { grid-template-columns: minmax(0, 1fr); }
  .cifra-bloque--icono{ grid-column: auto; }
  .aplica__rejilla    { grid-template-columns: 0.9fr 1.1fr; }
  .inversion__rejilla { grid-template-columns: 1fr 1fr; align-items: center; }

  /* La barra anclada inferior es una ayuda de móvil: en escritorio el CTA de
     la barra superior siempre está a la vista y duplicarlo es ruido. */
  .anclada { display: none; }
  .tiene-anclada { padding-bottom: 0; }

  .motor__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonios__rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}