:root {
  --color-navy-900: #061831;
  --color-navy-800: #082550;
  --color-azul-acento: #168dcc;
  --color-rojo-cetec: #e42535;
  --color-gris-texto: #718198;
  --color-fondo-claro: #f5f8fc;
  --color-borde-suave: #b9cbe0;
  --color-blanco: #ffffff;
  --color-derivado-overlay-hero: rgba(6,24,49,.72);
  --color-derivado-linea-suave: rgba(6,24,49,.10);
  --tipografia-display: Manrope;
  --tipografia-texto: Montserrat;
  --tipografia-fallback: system-ui, sans-serif;
  --tipografia-font-display: swap;
  --escala-text-base: clamp(1rem, 0.9583rem + 0.185vw, 1.125rem);
  --escala-text-display: clamp(2.4883rem, 1.7377rem + 3.336vw, 4.7401rem);
  --line-height-base: 1.6;
  --line-height-display: 1.05;
  --radio-sm: 12px;
  --radio-md: 20px;
  --radio-pill: 999px;
  --elevacion-1: 0 10px 30px rgba(9,35,75,.10);
  --elevacion-2: 0 24px 55px rgba(22,57,94,.15);
  --elevacion-3: 0 35px 90px rgba(0,0,0,.45);
  --espacio-base: 4px;
  --espacio-flow-sm: 1rem;
  --espacio-flow-md: 1.5rem;
  --espacio-flow-lg: 2.5rem;
  --espacio-section: clamp(3.5rem, 2.3333rem + 5.185vw, 7rem);
  --espacio-section-lg: clamp(5rem, 3.3333rem + 7.407vw, 10rem);
  --espacio-row: clamp(2.5rem, 2rem + 2.222vw, 4rem);
  --contenedor-page: 75rem;
  --contenedor-prose: 42rem;
  --contenedor-gutter: 1.5rem;
  --contenedor-gutter-sm: 1rem;
  --breakpoints-md: 768px;
  --breakpoints-lg: 1440px;
  --breakpoints-base-diseno: 390px;
}

/* sistema.css — parte 1: base mobile-first (390px) + tipografía.
   Consume únicamente las custom properties de tokens.css (generado por
   scripts/gen_tokens_css.py desde tokens.json, ADR-04). Ningún literal de
   color, radio, sombra o escala tipográfica se declara a mano en este
   archivo: eso es lo que enforcea REQ-PLANTILLA-1.

   Mobile-first real (REQ-PLANTILLA-2): esta es la base SIN media query,
   escrita a 390px. Los breakpoints min-width:768px y min-width:1440px, más
   los componentes compartidos (nav, botones, cards, FAQ), se agregan en la
   parte 2 (T-L0-04) como edición incremental de este mismo archivo.

   font-display:swap (tokens.json `tipografia.font_display`, ya expuesto
   como `--tipografia-font-display` por tokens.css): las tipografías se
   cargan vía Google Fonts (dominios ya habilitados en el CSP de ADR-12),
   no vía @font-face self-hosted en este CSS — el <link> con
   `&display=swap` lo emite el HTML generado en L1 leyendo ese mismo token,
   una sola fuente para ambos consumidores. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--tipografia-texto), var(--tipografia-fallback);
  font-size: var(--escala-text-base);
  line-height: var(--line-height-base);
  color: var(--color-gris-texto);
  background-color: var(--color-blanco);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--tipografia-display), var(--tipografia-fallback);
  color: var(--color-navy-900);
  line-height: var(--line-height-display);
}

h1 {
  font-size: var(--escala-text-display);
}

h2 {
  font-size: calc(var(--escala-text-base) * 1.75);
}

h3 {
  font-size: calc(var(--escala-text-base) * 1.375);
}

p {
  margin: 0;
}

/* Ritmo por flujo (patrón owl, ritmo-espaciado-web S5): cada hijo suma el
   espacio de flujo del padre en vez de márgenes fijos por elemento suelto. */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--espacio-flow-sm));
}

/* Bloque respuesta-directa (REQ-PLANTILLA-3 / ADR-06): primer bloque de
   contenido inmediatamente después del H1 en cada plantilla. */
.respuesta-directa {
  font-size: calc(var(--escala-text-base) * 1.125);
  color: var(--color-gris-texto);
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor-page);
  margin-inline: auto;
  padding-inline: var(--contenedor-gutter-sm);
}

.contenedor--prosa {
  max-width: var(--contenedor-prose);
}

section {
  padding-block: var(--espacio-section);
}

/* ==========================================================================
   Parte 2 (T-L0-04) — breakpoints min-width:768px / min-width:1440px y
   componentes compartidos (nav, botones, cards, FAQ). Mismo contrato de la
   parte 1: 0 literales de color/radio/sombra fuera de tokens.css, solo
   var(--*) para todo valor tokenizado.
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-flow-sm);
  padding-block: var(--espacio-flow-sm);
}

.nav__lista {
  display: none;
}

.nav__link {
  color: var(--color-navy-900);
  text-decoration: none;
  font-family: var(--tipografia-texto), var(--tipografia-fallback);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--espacio-base) * 2);
  padding: calc(var(--espacio-base) * 3) calc(var(--espacio-base) * 6);
  border-radius: var(--radio-pill);
  border: none;
  font-family: var(--tipografia-texto), var(--tipografia-fallback);
  font-size: var(--escala-text-base);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.boton--primario {
  background-color: var(--color-azul-acento);
  color: var(--color-blanco);
  box-shadow: var(--elevacion-1);
}

.boton--primario:hover,
.boton--primario:focus-visible {
  box-shadow: var(--elevacion-2);
}

.boton--secundario {
  background-color: transparent;
  color: var(--color-navy-900);
  border: 1px solid var(--color-borde-suave);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-flow-sm);
  padding: var(--espacio-flow-lg);
  border-radius: var(--radio-md);
  background-color: var(--color-fondo-claro);
  box-shadow: var(--elevacion-1);
}

.card__titulo {
  font-family: var(--tipografia-display), var(--tipografia-fallback);
  color: var(--color-navy-900);
}

.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-row);
}

/* FAQ con <details>/<summary> nativos (minimalismo-builder peldaño 4:
   feature nativa de la plataforma) — sin JS de acordeón a mano. */
.faq__item {
  border-bottom: 1px solid var(--color-borde-suave);
}

.faq__pregunta {
  padding-block: var(--espacio-flow-sm);
  font-family: var(--tipografia-display), var(--tipografia-fallback);
  color: var(--color-navy-900);
  cursor: pointer;
}

.faq__respuesta {
  padding-block-end: var(--espacio-flow-sm);
  color: var(--color-gris-texto);
}

@media (min-width: 768px) {
  .contenedor {
    padding-inline: var(--contenedor-gutter);
  }

  .nav__lista {
    display: flex;
    align-items: center;
    gap: var(--espacio-flow-md);
  }

  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1440px) {
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Parte 3 (T-L1-07) — home de plantel: hero, pasos, contacto/NAP, WhatsApp
   flotante. Mismo contrato de siempre: 0 literal de color fuera de
   tokens.css, solo var(--*) (ADR-04) — el overlay del hero reusa el token
   `color-derivado-overlay-hero`, nunca un rgba nuevo a mano.
   ========================================================================== */

.nav__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-flow-xs, calc(var(--espacio-base) * 2));
  text-decoration: none;
  color: var(--color-navy-900);
}

.nav__marca img {
  border-radius: var(--radio-sm);
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 32rem;
  display: flex;
  align-items: flex-end;
  color: var(--color-blanco);
}

.hero__poster,
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-derivado-overlay-hero);
  z-index: 1;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--espacio-section);
}

.hero__kicker {
  font-family: var(--tipografia-texto), var(--tipografia-fallback);
  font-size: calc(var(--escala-text-base) * 0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blanco);
}

.hero h1,
.hero .respuesta-directa,
.hero__lead {
  color: var(--color-blanco);
}

.hero__lead {
  max-width: var(--contenedor-prose);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-flow-sm);
}

/* [APPLY_INLINE: sdd-apply cetec-sitio-multiplantel-v1 correction-pass-hero-contraste]
   El CTA secundario del hero (WhatsApp, "Habla con un asesor") hereda
   `.boton--secundario` con texto navy sobre fondo transparente — legible
   sobre superficies claras (nav, sección "oferta vigente"), pero
   ilegible sobre el overlay oscuro del hero (contraste medido ~1.38:1,
   por debajo del piso 4.5:1 de ADR-08/REQ-PLANTILLA-7). Variante acotada
   al contenedor `.hero`: reusa `--color-blanco` ya declarado en
   tokens.css, 0 literal hex/rgba nuevo — contraste resultante ~12.7:1
   contra el overlay `--color-derivado-overlay-hero`. */
.hero .boton--secundario {
  color: var(--color-blanco);
  border-color: var(--color-blanco);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-flow-md);
  font-size: calc(var(--escala-text-base) * 0.9);
}

.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-row);
}

.pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio-pill);
  background-color: var(--color-azul-acento);
  color: var(--color-blanco);
  font-family: var(--tipografia-display), var(--tipografia-fallback);
}

.nap dt {
  font-family: var(--tipografia-display), var(--tipografia-fallback);
  color: var(--color-navy-900);
}

.nap dd {
  margin: 0 0 var(--espacio-flow-sm);
}

.whatsapp-flotante {
  position: fixed;
  right: var(--contenedor-gutter-sm);
  bottom: var(--contenedor-gutter-sm);
  z-index: 50;
}

/* [APPLY_INLINE: sdd-apply cetec-sitio-multiplantel-v1 fix-whatsapp-overlap]
   Hallazgo review L2 (2026-08-22): en la ficha de curso `.cta-sticky` ya
   ofrece WhatsApp en mobile; el botón flotante quedaba encima del segundo
   botón de esa barra. Patrón inverso del `@media (min-width:768px){
   .cta-sticky{display:none} }` de más abajo: se oculta en mobile solo
   cuando el propio documento trae `.cta-sticky` (ficha de curso) y vuelve a
   mostrarse en desktop, donde `.cta-sticky` ya está oculta y no hay
   superposición posible. */
.whatsapp-flotante:has(~ .cta-sticky) {
  display: none;
}

footer {
  color: var(--color-blanco);
  background-color: var(--color-navy-900);
  /* [APPLY_INLINE: sdd-apply cetec-sitio-multiplantel-v1 fix-whatsapp-overlap]
     Hallazgo review L2 (2026-08-22): en páginas de categoría el botón
     flotante de WhatsApp (fixed, z-index 50) tapaba el precio de la última
     tarjeta al final del scroll — faltaba colchón reservado después del
     footer para que el botón cayera sobre una zona vacía y no sobre
     contenido real. El footer es compartido por toda plantilla, así que
     este colchón corrige categoría y cualquier otra página con grilla al
     final sin tocar cada plantilla por separado. */
  padding-block-end: calc(var(--contenedor-gutter-sm) * 5);
}

footer img {
  border-radius: var(--radio-sm);
}

@media (min-width: 768px) {
  .pasos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Parte 4 (T-L2-05/T-L2-0x) — nav/footer compartidos, breadcrumb, ficha de
   curso (resumen, galería, tabla de oferta, CTA sticky). Mismo contrato:
   0 literal hex/rgba/radio/sombra fuera de tokens.css.
   ========================================================================== */

.footer__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-flow-sm);
  margin-block-start: var(--espacio-flow-sm);
}

.footer__lista a {
  color: var(--color-blanco);
  text-decoration: underline;
}

.breadcrumb {
  padding-block: var(--espacio-flow-sm);
}

.breadcrumb__lista {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espacio-base) * 2);
  font-size: calc(var(--escala-text-base) * 0.875);
  color: var(--color-gris-texto);
}

.breadcrumb__lista a {
  color: var(--color-gris-texto);
  text-decoration: underline;
}

.breadcrumb__lista li:not(:last-child)::after {
  content: "/";
  margin-inline-start: calc(var(--espacio-base) * 2);
  color: var(--color-borde-suave);
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-flow-sm);
  color: inherit;
  text-decoration: none;
}

.ficha__meta {
  display: grid;
  gap: var(--espacio-flow-sm);
}

.ficha__meta dt {
  font-family: var(--tipografia-display), var(--tipografia-fallback);
  color: var(--color-navy-900);
  font-size: calc(var(--escala-text-base) * 0.875);
}

.ficha__meta dd {
  margin: 0;
}

.ficha__galeria {
  grid-template-columns: repeat(2, 1fr);
}

.ficha__galeria img {
  border-radius: var(--radio-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-oferta {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
}

.tabla-oferta th,
.tabla-oferta td {
  padding: var(--espacio-flow-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-borde-suave);
}

.cta-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: var(--espacio-flow-sm);
  padding: var(--espacio-flow-sm) var(--contenedor-gutter-sm);
  background-color: var(--color-blanco);
  box-shadow: var(--elevacion-2);
}

.cta-sticky .boton {
  flex: 1;
}

@media (min-width: 768px) {
  .ficha__meta {
    grid-template-columns: repeat(3, 1fr);
  }

  .ficha__galeria {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-sticky {
    display: none;
  }

  /* [APPLY_INLINE: sdd-apply cetec-sitio-multiplantel-v1 fix-whatsapp-overlap]
     Contraparte desktop de la regla de arriba: `.cta-sticky` ya está oculta
     en este breakpoint, así que el flotante vuelve a mostrarse (mismo
     `display` que le da `.boton` por defecto). */
  .whatsapp-flotante:has(~ .cta-sticky) {
    display: inline-flex;
  }
}