/* =====================================================================
   PÉPTIDOS 360 — HOJA DE ESTILOS
   ---------------------------------------------------------------------
   Este archivo contiene TODO el sistema de diseño del sitio.
   Es el equivalente a la pestaña Assets → Styles de Framer.

   Si quieres cambiar un color en todo el sitio, cámbialo SOLO en la
   sección 1 (variables). Nunca escribas un color suelto (#0F5132)
   en otra parte del archivo.

   Índice
     0. Tipografías (archivos de fuente)
     1. Variables: colores, tipografía, espaciado
     2. Base del documento
     3. Estilos de texto (H1, H2, H3, Cuerpo grande, Cuerpo, Caption, Etiqueta)
     4. Secciones y contenedores
     5. Botones
     6. Componente: Navegación
     7. Componente: Bloque CTA
     8. Componente: Pie de página
     9. Secciones de Home
    10. Secciones de Reporte clínico
    11. Secciones de Formación
    12. Página de Gracias
    13. Muestra del reporte e instrucciones de pago
    14. Páginas legales
   ===================================================================== */


/* =====================================================================
   0. TIPOGRAFÍAS
   Alojadas en el propio sitio (carpeta assets/fonts), no en Google.
   Licencia SIL Open Font License: se pueden usar y redistribuir.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2-variations"),
       url("../fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader.woff2") format("woff2-variations"),
       url("../fonts/newsreader.woff2") format("woff2");
}


/* =====================================================================
   1. VARIABLES
   ===================================================================== */

:root {
  /* --- Paleta base (mismos nombres que en Framer) --- */
  --base:              #FAF8F4;  /* Fondo de página claro */
  --superficie:        #FFFFFF;  /* Tarjetas, franjas */
  --tinta:             #14181D;  /* Titulares y texto principal */
  --tinta-suave:       #5A6470;  /* Texto secundario */
  --acento:            #0F5132;  /* Botones, enlaces, etiquetas */
  --acento-hover:      #0A3D26;
  --borde:             #E7E1D7;  /* Líneas y separadores */

  --oscuro-base:       #0D1B2A;  /* Fondo de sección oscura y del pie */
  --oscuro-superficie: #132538;  /* Bloque CTA */
  --oscuro-tinta:      #F2F6FA;  /* Titulares sobre oscuro */
  --oscuro-suave:      #8FA3B8;  /* Texto secundario sobre oscuro */
  --oscuro-acento:     #7DD3FC;  /* Acentos sobre oscuro */
  --oscuro-borde:      #22354A;  /* Líneas sobre oscuro */

  /* --- Semáforo clínico (solo sobre fondo claro; no usar en párrafos) --- */
  --semaforo-rojo:     #A8322A;
  --semaforo-naranja:  #C2681C;
  --semaforo-amarillo: #A8891C;
  /* El verde del semáforo es --acento. No se crea un cuarto color. */

  /* --- Tipografía --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Espaciado --- */
  --contenedor: 1120px;      /* ancho máximo del contenido */
  --seccion-y:  120px;       /* padding vertical de sección (Desktop) */
  --seccion-x:  32px;        /* padding lateral */
  --nav-alto:   72px;
  --radio-boton:  8px;
  --radio-tarjeta: 12px;
}

/* Tablet: 810 a 1199 px */
@media (max-width: 1199px) {
  :root { --seccion-y: 96px; }
}

/* S (móvil): 0 a 809 px */
@media (max-width: 809px) {
  :root { --seccion-y: 64px; --seccion-x: 20px; }
}


/* =====================================================================
   2. BASE DEL DOCUMENTO
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-alto) + 16px);
}

body {
  margin: 0;
  background: var(--base);
  font-family: var(--sans);
  font-size: 1.0625rem;           /* 17px = Cuerpo */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Colores de contexto. Las secciones oscuras los reemplazan (ver .tema-oscuro).
     Así un mismo texto se ve bien en fondo claro y en fondo oscuro, y es
     imposible poner el verde Acento sobre fondo oscuro por error. */
  --c-titulo:  var(--tinta);
  --c-texto:   var(--tinta-suave);
  --c-acento:  var(--acento);
  --c-linea:   var(--borde);
  --c-tarjeta: var(--base);
  color: var(--c-texto);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto-contenido {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--tinta);
  color: var(--base);
  border-radius: var(--radio-boton);
  font-size: 0.875rem;
  text-decoration: none;
}
.salto-contenido:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* =====================================================================
   3. ESTILOS DE TEXTO
   ---------------------------------------------------------------------
   Equivalen uno a uno a los 7 text styles de Framer.
   Serif (Newsreader) solo en H1 y H2. Todo lo demás en Inter.
   ===================================================================== */

.h1 {                                   /* Framer: H1 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 4rem;                      /* 64px */
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-titulo);
  text-wrap: balance;
}

.h2 {                                   /* Framer: H2 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.75rem;                   /* 44px */
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--c-titulo);
  text-wrap: balance;
}

.h3 {                                   /* Framer: H3 */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.625rem;                  /* 26px */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-titulo);
}

.cuerpo-grande {                        /* Framer: Cuerpo grande */
  font-size: 1.25rem;                   /* 20px */
  line-height: 1.65;
  color: var(--c-texto);
  text-wrap: pretty;
}

.cuerpo {                               /* Framer: Cuerpo */
  font-size: 1.0625rem;                 /* 17px */
  line-height: 1.7;
  color: var(--c-texto);
  text-wrap: pretty;
}

.caption {                              /* Framer: Caption */
  font-size: 0.875rem;                  /* 14px */
  line-height: 1.6;
  color: var(--c-texto);
}

.etiqueta {                             /* Framer: Etiqueta */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;                   /* 12px */
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: var(--c-acento);
}

/* Números grandes (fuera de los text styles, igual que en Framer) */
.numero {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  color: var(--c-acento);
}
.numero--40 { font-size: 2.5rem; }      /* números de sección: 01, 02, 03 */
.numero--32 { font-size: 2rem; }        /* cifras de la franja Confianza */

/* Tamaños en móvil (S). Cuerpo, Caption y Etiqueta no cambian. */
@media (max-width: 809px) {
  .h1            { font-size: 2.375rem; }   /* 38px */
  .h2            { font-size: 1.875rem; }   /* 30px */
  .h3            { font-size: 1.3125rem; }  /* 21px */
  .cuerpo-grande { font-size: 1.0625rem; }  /* 17px */
}


/* =====================================================================
   4. SECCIONES Y CONTENEDORES
   ===================================================================== */

.seccion {
  padding: var(--seccion-y) var(--seccion-x);
}

.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
}

/* Fondos — mismos nombres que los color styles de Framer */
.fondo-base        { background: var(--base); }
.fondo-superficie  { background: var(--superficie); }
.fondo-oscuro-base        { background: var(--oscuro-base); }
.fondo-oscuro-superficie  { background: var(--oscuro-superficie); }

/* Toda sección con fondo oscuro lleva también la clase .tema-oscuro.
   Esto cambia automáticamente títulos, textos, acentos y líneas
   a sus versiones para fondo oscuro. */
.tema-oscuro {
  --c-titulo:  var(--oscuro-tinta);
  --c-texto:   var(--oscuro-suave);
  --c-acento:  var(--oscuro-acento);
  --c-linea:   var(--oscuro-borde);
  --c-tarjeta: var(--oscuro-superficie);
  color: var(--c-texto);
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Encabezado de sección: Etiqueta → H2 → párrafo introductorio */
.encabezado .etiqueta { margin-bottom: 16px; }
.encabezado .cuerpo-grande { margin-top: 20px; }
.encabezado { margin-bottom: 56px; }

.divisoria {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--c-linea);
}

/* Lista con viñetas de punto */
.vinetas { display: grid; gap: 12px; }
.vinetas li {
  position: relative;
  padding-left: 17px;                   /* punto de 5px + 12px de separación */
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-titulo);
}
.vinetas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin-top: calc((1.6em - 5px) / 2);
  border-radius: 50%;
  background: var(--c-acento);
}
.vinetas strong { font-weight: 500; color: var(--tinta); }

/* Ancho máximo de bloques de texto */
.max-620 { max-width: 620px; }
.max-700 { max-width: 700px; }
.max-720 { max-width: 720px; }
.max-780 { max-width: 780px; }
.max-800 { max-width: 800px; }


/* =====================================================================
   5. BOTONES
   ===================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

/* Fondo claro */
.boton--primario {
  background: var(--acento);
  color: var(--base);
}
.boton--primario:hover { background: var(--acento-hover); }

.boton--secundario {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.boton--secundario:hover {
  background: var(--tinta);
  color: var(--base);
}

/* Fondo oscuro */
.tema-oscuro .boton--primario {
  background: var(--oscuro-acento);
  color: var(--oscuro-base);
}
.tema-oscuro .boton--primario:hover { background: var(--oscuro-acento); opacity: .88; }

.tema-oscuro .boton--secundario {
  background: transparent;
  border-color: var(--oscuro-borde);
  color: var(--oscuro-tinta);
}
.tema-oscuro .boton--secundario:hover {
  background: transparent;
  border-color: var(--oscuro-acento);
  color: var(--oscuro-tinta);
}

/* Variante de ancho completo, usada dentro de tarjetas */
.boton--bloque {
  display: flex;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.9375rem;                 /* 15px */
}

/* Fila de botones */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 809px) {
  .acciones { flex-direction: column; gap: 12px; }
  .acciones .boton { width: 100%; }
}


/* =====================================================================
   6. COMPONENTE: NAVEGACIÓN
   ===================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--base);
  border-bottom: 1px solid var(--borde);
}

.nav__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-alto);
  max-width: calc(var(--contenedor) + 2 * var(--seccion-x));
  margin-inline: auto;
  padding-inline: var(--seccion-x);
}

.marca {
  font-family: var(--serif);
  font-size: 1.25rem;                   /* 20px */
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.marca span { color: var(--acento); }

.nav__enlaces {
  display: flex;
  gap: 28px;
}
.nav__enlaces a {
  font-size: 0.875rem;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .2s ease;
}
.nav__enlaces a:hover,
.nav__enlaces a[aria-current="page"] { color: var(--tinta); }

.nav__contacto {
  padding: 12px 20px;
  font-size: 0.875rem;
}

.nav__menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.nav__menu-boton .icono-cerrar { display: none; }
.nav__menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.nav__menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

.menu-movil {
  border-top: 1px solid var(--borde);
  background: var(--base);
  padding: 8px var(--seccion-x) 24px;
}
.menu-movil[hidden] { display: none; }
.menu-movil ul { display: grid; }
.menu-movil li a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 1.0625rem;
  color: var(--tinta);
  text-decoration: none;
}
.menu-movil .boton { margin-top: 24px; }

@media (max-width: 809px) {
  .nav__enlaces,
  .nav__contacto { display: none; }
  .nav__menu-boton { display: inline-flex; }
}
@media (min-width: 810px) {
  .menu-movil { display: none !important; }
}


/* =====================================================================
   7. COMPONENTE: BLOQUE CTA
   ===================================================================== */

.cta {
  padding: 96px var(--seccion-x);
  text-align: center;
}
.cta .contenedor { max-width: 780px; }
.cta .cuerpo-grande {
  max-width: 620px;
  margin: 20px auto 0;
}
.cta .acciones {
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 1199px) { .cta { padding-block: 80px; } }
@media (max-width: 809px)  { .cta { padding-block: 56px; } }


/* =====================================================================
   8. COMPONENTE: PIE DE PÁGINA
   ===================================================================== */

.pie {
  padding: 80px var(--seccion-x);
}

.pie__columnas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}

.pie .marca { color: var(--oscuro-tinta); }
.pie .marca span { color: var(--oscuro-acento); }

.pie__lema {
  max-width: 340px;
  margin-top: 16px;
}

.pie__titulo {
  margin-bottom: 16px;
  color: var(--oscuro-suave);
}

.pie__lista { display: grid; gap: 10px; }
.pie__lista a {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--oscuro-tinta);
  text-decoration: none;
  transition: color .2s ease;
}
.pie__lista a:hover { color: var(--oscuro-acento); }

.pie__legal {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--oscuro-borde);
}
.pie__legal .caption + .caption { margin-top: 16px; }

/* Tablet: la marca ocupa la fila de arriba, las tres columnas debajo */
@media (max-width: 1199px) {
  .pie__columnas { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  .pie__columnas > :first-child { grid-column: 1 / -1; }
}
/* S: todo apilado */
@media (max-width: 809px) {
  .pie { padding-block: 64px; }
  .pie__columnas { grid-template-columns: 1fr; }
}


/* =====================================================================
   9. SECCIONES DE HOME
   ===================================================================== */

/* --- Hero --- */
.hero .etiqueta     { margin-bottom: 20px; }
.hero .cuerpo-grande { margin-top: 24px; }
.hero .acciones     { margin-top: 40px; }

/* --- Bifurcación: dos tarjetas con el cierre anclado al fondo --- */
.tarjetas-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;      /* = Distribute: Space Between en Framer */
  padding: 40px;
  background: var(--c-tarjeta);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-tarjeta);
}
.tarjeta .cuerpo { margin-top: 12px; }
.tarjeta .vinetas { margin-top: 24px; }
.tarjeta__cierre { margin-top: 32px; }
.tarjeta__precio {
  margin: 24px 0 20px;
  color: var(--acento);
}

@media (max-width: 809px) {
  .tarjetas-2 { grid-template-columns: 1fr; gap: 16px; }
  .tarjeta { padding: 28px; }
}

/* --- Problema --- */
.problema { padding-bottom: 72px; }

.columnas-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.paso .h3     { margin-top: 16px; }
.paso .cuerpo { margin-top: 10px; }

.cierre-seccion {
  margin-top: 56px;
}
.cierre-seccion .cuerpo-grande {
  margin-top: 32px;
  color: var(--c-titulo);
}

@media (max-width: 1199px) {
  .problema { padding-bottom: 56px; }
  .columnas-3 { gap: 32px; }
}
@media (max-width: 809px) {
  .problema { padding-bottom: 40px; }
  .columnas-3 { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Equipo: dos perfiles separados por una línea vertical --- */
.perfiles {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
}
.perfiles__divisor { background: var(--c-linea); }
.perfil .caption { margin-top: 8px; color: var(--c-acento); }
.perfil .cuerpo  { margin-top: 16px; }

@media (max-width: 1199px) {
  .perfiles { gap: 20px; }
}
@media (max-width: 809px) {
  .perfiles { grid-template-columns: 1fr; gap: 40px; }
  .perfiles__divisor { height: 1px; }
}

/* --- Confianza: franja compacta de cuatro señales --- */
.confianza {
  padding-block: 64px;
  border-block: 1px solid var(--borde);
}
.senales {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.senal .caption { margin-top: 8px; }

@media (max-width: 809px) {
  .confianza { padding-block: 48px; }
  .senales { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}


/* =====================================================================
   10. SECCIONES DE REPORTE CLÍNICO
   ===================================================================== */

/* --- Hero: línea de entrega debajo de los botones --- */
.hero__nota { margin-top: 28px; }

/* Encabezado sin párrafo introductorio: menos aire antes del contenido */
.encabezado--corto { margin-bottom: 48px; }

/* --- Qué recibes: retícula de diez entregables --- */
.reticula-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.entregable {
  display: flex;
  flex-direction: column;
  justify-content: center;            /* = Distribute: Center en Framer */
  padding: 28px;
  background: var(--base);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.entregable .cuerpo  { margin-top: 10px; }
.entregable .etiqueta { margin-bottom: 12px; }

.entregable--destacado { border: 2px solid var(--acento); }

@media (max-width: 809px) {
  .reticula-2 { grid-template-columns: 1fr; gap: 16px; }
  .entregable { padding: 24px; }
}

/* --- Metodología: cinco filas numeradas --- */
.etapas > li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding-block: 24px;
  border-bottom: 1px solid var(--c-linea);
}
.etapas > li:first-child { padding-top: 0; }
.etapas > li:last-child  { padding-bottom: 0; border-bottom: 0; }
.etapas .cuerpo { margin-top: 8px; max-width: 700px; }

@media (max-width: 809px) {
  .etapas > li { grid-template-columns: 1fr; gap: 12px; padding-block: 16px; }
}

/* --- El semáforo: cuatro zonas --- */
.zonas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.zona {
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.zona__barra { height: 6px; background: var(--zona); }
.zona__contenido { padding: 24px; }
.zona__titulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* El punto se alinea con la primera línea del título, aunque el título ocupe dos */
.zona__titulo::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: calc((1.25em - 10px) / 2);
  border-radius: 50%;
  background: var(--zona);
}
.zona .cuerpo { margin-top: 10px; }

/* El color solo va en la barra y en el punto. Ningún texto sobre color. */
.zona--rojo     { --zona: var(--semaforo-rojo); }
.zona--naranja  { --zona: var(--semaforo-naranja); }
.zona--amarillo { --zona: var(--semaforo-amarillo); }
.zona--verde    { --zona: var(--acento); }

@media (max-width: 1199px) {
  .zonas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  .zonas { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Tus análisis de sangre: nota al pie de la sección --- */
.nota-seccion { margin-top: 32px; }

/* --- Precio --- */
.precio {
  max-width: 720px;
  padding: 48px;
  background: var(--superficie);
  border: 2px solid var(--c-acento);
  border-radius: var(--radio-tarjeta);
}
.tema-oscuro .precio { background: var(--oscuro-superficie); }
.precio__cifra {
  margin-top: 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.5rem;                  /* 56px */
  line-height: 1;
  color: var(--c-acento);
}
.precio .cuerpo { margin-top: 16px; }
.precio__contexto { margin-top: 10px; }
.precio__contexto + .cuerpo { margin-top: 20px; }
.precio .boton  { margin-top: 32px; padding-block: 16px; font-size: 1rem; }

.no-incluye { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--borde); }
.no-incluye .cuerpo { margin-top: 12px; max-width: 700px; }

.complementos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin-top: 32px;
}
.complemento {
  padding: 28px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.complemento__precio {
  margin-top: 8px;
  font-weight: 500;
  font-size: 1.25rem;                 /* 20px */
  line-height: 1.3;
  color: var(--acento);
}
.complemento .caption { margin-top: 12px; }

@media (max-width: 1199px) {
  .precio { padding: 40px; }
}
@media (max-width: 809px) {
  .precio { padding: 28px; }
  .precio__cifra { font-size: 2.5rem; }   /* 40px */
  .complementos { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Preguntas frecuentes: acordeón --- */
/* Usa <details>, que abre y cierra sin JavaScript. */
.contenedor--estrecho { max-width: 780px; }

.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon details:last-child { border-bottom: 0; }

.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.125rem;                /* 18px */
  line-height: 1.4;
  color: var(--tinta);
}
.acordeon summary::-webkit-details-marker { display: none; }

/* Ícono de más / menos */
.acordeon summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--acento), var(--acento)) center / 16px 1.5px no-repeat,
    linear-gradient(var(--acento), var(--acento)) center / 1.5px 16px no-repeat;
  transition: transform .2s ease;
}
.acordeon details[open] summary::after {
  background: linear-gradient(var(--acento), var(--acento)) center / 16px 1.5px no-repeat;
}

.acordeon .cuerpo { padding-bottom: 20px; }

@media (max-width: 809px) {
  .acordeon summary { font-size: 1rem; }
}

/* --- Confidencialidad: franja compacta de dos columnas --- */
.franja-legal {
  padding-block: 64px;
  border-block: 1px solid var(--borde);
}
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.dos-columnas .h3     { margin-top: 12px; }
.dos-columnas .cuerpo { margin-top: 10px; }

@media (max-width: 1199px) {
  .dos-columnas { gap: 40px; }
}
@media (max-width: 809px) {
  .franja-legal { padding-block: 48px; }
  .dos-columnas { grid-template-columns: 1fr; }
}


/* =====================================================================
   11. SECCIONES DE FORMACIÓN
   ===================================================================== */

.max-760 { max-width: 760px; }
.max-860 { max-width: 860px; }

/* --- Cuatro elementos numerados en retícula de 2 × 2 --- */
.columnas-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 809px) {
  .columnas-2 { grid-template-columns: 1fr; }
}

/* --- Viñetas a tamaño Cuerpo (Qué incluye) --- */
.vinetas--cuerpo { gap: 14px; }
.vinetas--cuerpo li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-texto);
}
.vinetas--cuerpo li::before { margin-top: calc((1.7em - 5px) / 2); }
.tarjeta .h3 + .vinetas { margin-top: 24px; }

/* --- Los 11 módulos --- */
.modulos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.modulo {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
/* Si el último módulo queda solo en su fila, ocupa las dos columnas */
.modulo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.modulo .numero { font-size: 1.75rem; padding-top: 2px; }   /* 28px */
.modulo .caption { margin-top: 6px; }

@media (max-width: 809px) {
  .modulos { grid-template-columns: 1fr; gap: 16px; }
  .modulo { padding: 20px; gap: 16px; grid-template-columns: 40px 1fr; }
}

/* --- Cuatro tarjetas pequeñas (Contenido evolutivo) --- */
.reticula-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tarjeta-mini {
  padding: 24px;
  background: var(--c-tarjeta);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-tarjeta);
}
.tarjeta-mini .h3      { margin-top: 12px; }
.tarjeta-mini .caption { margin-top: 10px; }

@media (max-width: 1199px) {
  .reticula-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  .reticula-4 { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Comparativa de precios ---
   En Desktop y Tablet es una tabla. En teléfono, cada programa
   se convierte en una tarjeta, sin repetir el contenido en el HTML. */
.comparativa {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.comparativa th,
.comparativa td {
  padding: 16px;
  border-bottom: 1px solid var(--c-linea);
  vertical-align: top;
}
.comparativa thead th {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-texto);
}
.comparativa tbody th,
.comparativa tbody td {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--c-texto);
}
.comparativa tbody th { color: var(--c-titulo); }
.comparativa col:nth-child(1) { width: 30%; }
.comparativa col:nth-child(2) { width: 20%; }
.comparativa col:nth-child(3) { width: 18%; }
.comparativa col:nth-child(4) { width: 18%; }
.comparativa col:nth-child(5) { width: 14%; }

/* Fila de Péptidos 360 */
.comparativa tbody tr:nth-last-child(2) > * { border-bottom-color: transparent; }
.comparativa__propia > * {
  background: var(--oscuro-base);
  border-top: 1px solid var(--oscuro-acento);
  border-bottom: 1px solid var(--oscuro-acento) !important;
  font-weight: 500 !important;
  color: var(--oscuro-tinta) !important;
}
.comparativa__propia > :first-child {
  border-left: 1px solid var(--oscuro-acento);
  border-radius: 8px 0 0 8px;
}
.comparativa__propia > :last-child {
  border-right: 1px solid var(--oscuro-acento);
  border-radius: 0 8px 8px 0;
}

.comparativa-nota { margin-top: 24px; }
.comparativa-puente { margin-top: 40px; color: var(--c-titulo); }

@media (max-width: 1199px) {
  .comparativa th, .comparativa td { padding: 12px; }
}

@media (max-width: 809px) {
  .comparativa,
  .comparativa tbody,
  .comparativa tr,
  .comparativa th,
  .comparativa td { display: block; width: auto; }
  .comparativa thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
  }
  .comparativa colgroup { display: none; }

  .comparativa tbody { display: grid; gap: 16px; }
  .comparativa tbody tr {
    padding: 20px;
    background: var(--oscuro-base);
    border: 1px solid var(--c-linea);
    border-radius: var(--radio-tarjeta);
  }
  .comparativa tbody th,
  .comparativa tbody td,
  .comparativa__propia > *,
  .comparativa__propia > :first-child,
  .comparativa__propia > :last-child {
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
  }
  .comparativa tbody th {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 1.3125rem;           /* H3 en S */
    line-height: 1.25;
  }
  .comparativa tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 5px;
    font-size: 0.875rem;
    color: var(--c-titulo);
    text-align: right;
  }
  .comparativa tbody td::before {
    content: attr(data-etiqueta);
    color: var(--c-texto);
    text-align: left;
  }
  .comparativa__propia { border-color: var(--oscuro-acento) !important; }
  .comparativa__propia > * { font-weight: 400 !important; }
  .comparativa__propia > th { font-weight: 500 !important; }
}

/* --- Bloque centrado reutilizado (Contenido gratuito) --- */
.cta .etiqueta { margin-bottom: 16px; }

/* --- Precio y acceso: los tres pasos debajo de la tarjeta --- */
.pasos-acceso { margin-top: 56px; }


/* =====================================================================
   12. PÁGINA DE GRACIAS
   ===================================================================== */

.gracias .pasos-acceso { margin-top: 56px; }
.gracias .acciones { margin-top: 48px; }
.gracias .nota-seccion { margin-top: 32px; }


/* =====================================================================
   13. MUESTRA DEL REPORTE E INSTRUCCIONES DE PAGO
   ===================================================================== */

.muestras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.muestra { margin: 0; }
.muestra__marco {
  display: block;
  overflow: hidden;
  background: #FFFFFF;                 /* las páginas del reporte son blancas */
  border: 1px solid var(--c-linea);
  border-radius: var(--radio-tarjeta);
  transition: border-color .2s ease;
}
.muestra__marco:hover { border-color: var(--c-acento); }
.muestra__marco img { width: 100%; height: auto; }
.muestra .caption { margin-top: 12px; }
.muestra__acciones { margin-top: 40px; }

@media (max-width: 809px) {
  .muestras { grid-template-columns: 1fr; gap: 28px; }
}

/* Pasos para pagar en el link de negocio */
.pago-pasos {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  counter-reset: paso;
}
.pago-pasos li {
  position: relative;
  min-height: 24px;
  padding-left: 36px;
  font-size: 0.9375rem;                /* 15px */
  line-height: 1.6;
  color: var(--c-texto);
  counter-increment: paso;
}
.pago-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--c-acento);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-acento);
}
.pago-pasos strong { font-weight: 500; color: var(--c-titulo); }
.pago-pasos a {
  color: var(--c-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pago-metodos { margin-top: 12px; text-align: center; }


/* =====================================================================
   14. PÁGINAS LEGALES
   ===================================================================== */

.legal .etiqueta   { margin-bottom: 16px; }
.legal .legal__fecha { margin-top: 16px; }
.legal__cuerpo { margin-top: 48px; }
.legal__cuerpo h2 {
  margin-top: 40px;
  font-weight: 500;
  font-size: 1.25rem;                  /* 20px */
  line-height: 1.35;
  color: var(--tinta);
}
.legal__cuerpo h2:first-child { margin-top: 0; }
.legal__cuerpo h3 {
  margin-top: 20px;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta);
}
.legal__cuerpo p,
.legal__cuerpo ul { margin-top: 12px; }
.legal__cuerpo .vinetas li { font-size: 1.0625rem; line-height: 1.7; color: var(--tinta-suave); }
.legal__cuerpo .vinetas li::before { margin-top: calc((1.7em - 5px) / 2); }
.legal__cuerpo a { color: var(--acento); text-underline-offset: 3px; }

/* Dato todavía sin llenar en config.php */
.pendiente {
  padding: 1px 6px;
  border-radius: 4px;
  background: #FCE7B2;
  color: var(--tinta);
}