/* ==========================================================================
   Componentes comunes de la documentación (21-10-2026): UNA definición por
   concepto, con los valores exactos de la portada de RutaCC (rutacc/css/index.css).
   Se carga al final (después de la hoja propia de cada página y antes de
   temas_paginas.css), así que manda sobre las variantes antiguas que había en
   cada documento:
     tarjeta ........ .modulo-card   ← .card .modulo .module-card .feature .beneficio
                                       .security-item .norma .resource-card .pricing-card
                                       .param-card .breakdown-card .canvas-item .testimonial
                                       .timeline-item .layer .panel .flujo-step .flow-step
     tecnología ..... .stack-item    ← .tech-card
     cifra .......... .stat-num      ← .stat-card .stat-big .kpi .stat
     etiqueta ....... .modulo-tag    ← .pill .layer-item .component
     nota ........... .story-highlight ← .notice .info-box .callout .highlight-box
     encabezado ..... .section-tag + .section-title (+ .section-sub), centrado
     texto .......... .story-body p (gris, peso 300, interlineado 1,85)
   ========================================================================== */

/* ── TEXTO (también en manuales y presentaciones, que no cargan docs_theme.css) ── */
:is(.container, .content, .infografia, .presentacion, .doc-section, .info-section, .slide) :is(p, li) {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
  text-align: left;
  overflow-wrap: break-word; /* direcciones y correos largos no ensanchan la página en celular */
}
:is(.container, .content, .infografia, .presentacion, .doc-section, .slide) :is(p, li) :is(strong, b) { color: var(--text); font-weight: 500; }
:is(.container, .content, .infografia, .presentacion, .doc-section, .slide) :is(p, li) em { color: var(--accent); font-style: normal; }
:is(.container, .content, .infografia, .presentacion, .doc-section, .slide) h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  border: 0;
  padding: 0;
}
:is(.container, .content, .infografia, .presentacion, .doc-section, .slide) h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

/* ── ENCABEZADO DE SECCIÓN (.section-header de la portada) ── */
.section-tag, .section-kicker {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-tag::after, .section-kicker::after { content: ''; flex: 1; height: 1px; background: var(--border); max-width: 60px; }
/* Secciones centradas (infografías y presentaciones): etiqueta + título + bajada, como la portada */
.section-header { text-align: center; margin: 96px 0 56px; }
.hero-doc + * .section-header:first-child, .hero-doc + .section-header, :is(.slide, .panel) > .section-header { margin-top: 0; }
.section-header .section-tag { justify-content: center; }
.section-header .section-tag::before { content: ''; flex: 1; height: 1px; background: var(--border); max-width: 60px; }
:is(.section-header, .infografia, .presentacion, .slide) :is(h2.section-title, .section-title h2),
.section-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: center;
  -webkit-text-fill-color: currentColor;
}
:is(.infografia, .presentacion, .slide, .section-header) .section-title::after,
:is(.infografia, .presentacion, .slide, .section-header) .section-title h2::after,
.section-header h2::after { content: none; display: none; }
.section-header > p:not(.section-sub) { margin: 0 auto; }
.section-header .section-sub, .section-sub { font-size: 0.95rem; color: var(--muted); max-width: 480px; margin: 0 auto; line-height: 1.6; text-align: center; font-weight: 400; }

/* ── TARJETA (.modulo-card de la portada) ── */
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .resource-card, .pricing-card,
    .param-card, .breakdown-card, .canvas-item, .testimonial, .timeline-item, .layer, .panel, .entity-card,
    .flujo-step, .flow-step, .module-grid > div, .meta-info, .toc, .conclusion-box) {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  text-align: left;
  box-shadow: none;
  transition: all 0.3s;
}
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .param-card,
    .breakdown-card, .canvas-item, .testimonial, .timeline-item, .layer, .panel, .entity-card, .flujo-step, .flow-step)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-color, var(--accent));
  transform: scaleX(0);
  transition: transform 0.3s;
}
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .param-card,
    .breakdown-card, .canvas-item, .testimonial, .timeline-item, .layer, .panel, .entity-card, .flujo-step, .flow-step):hover {
  border-color: var(--card-color, var(--accent));
  transform: translateY(-3px);
}
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .param-card,
    .breakdown-card, .canvas-item, .testimonial, .timeline-item, .layer, .panel, .entity-card, .flujo-step, .flow-step):hover::before {
  transform: scaleX(1);
}
/* Colores de la portada, en su orden, para las tarjetas que van en grupo */
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .canvas-item,
    .testimonial, .timeline-item, .layer, .flujo-step, .flow-step, .breakdown-card, .module-grid > div):nth-child(5n+1) { --card-color: #00d4ff; }
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .canvas-item,
    .testimonial, .timeline-item, .layer, .flujo-step, .flow-step, .breakdown-card, .module-grid > div):nth-child(5n+2) { --card-color: #39ff14; }
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .canvas-item,
    .testimonial, .timeline-item, .layer, .flujo-step, .flow-step, .breakdown-card, .module-grid > div):nth-child(5n+3) { --card-color: #ff6b35; }
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .canvas-item,
    .testimonial, .timeline-item, .layer, .flujo-step, .flow-step, .breakdown-card, .module-grid > div):nth-child(5n+4) { --card-color: #ffd700; }
:is(.card, .modulo, .module-card, .feature, .beneficio, .security-item, .norma, .pricing-card, .canvas-item,
    .testimonial, .timeline-item, .layer, .flujo-step, .flow-step, .breakdown-card, .module-grid > div):nth-child(5n+5) { --card-color: #a855f7; }
/* Ícono de la tarjeta (.modulo-icon) */
:is(.modulo-icon, .card-icon, .feature-icon, .beneficio-icon, .security-icon, .norma-icon, .flujo-step-icon),
:is(.card, .module-card) > .icon {
  display: block;
  font-size: 1.8rem;
  line-height: normal;
  margin: 0 0 16px;
  text-align: left;
}
/* Nombre de la tarjeta (.modulo-name): Space Mono, mayúsculas, color de la tarjeta */
:is(.modulo-name, .card-title, .beneficio-title, .norma-name, .pricing-name, .timeline-title, .layer-title, .flujo-step-name),
:is(.card, .module-card, .resource-card, .breakdown-card) > h3,
:is(.feature-text, .security-text, .canvas-item) > h4,
.panel > h2,
:is(.canvas-item) > h4,
.flow-step > strong:first-child,
.module-grid > div > b {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--card-color, var(--accent));
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
/* Descripción de la tarjeta (.modulo-desc) */
:is(.modulo-desc, .card-desc, .beneficio-desc, .norma-desc, .timeline-desc, .testimonial-text),
:is(.card, .module-card, .feature-text, .security-text) > p,
.module-grid > div > span {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  text-align: left;
}
.flow-step { font-size: 0.88rem; line-height: 1.65; color: var(--muted); }
.flow-step br { display: none; }
.flujo-step-number { display: none; }
/* Grillas de tarjetas: la de la portada (.modulos-grid) */
:is(.modulos, .module-grid, .beneficios, .seguridad-grid, .security-grid, .normas, .features, .grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

/* ── TECNOLOGÍA (.stack-item de la portada) ── */
.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 48px; }
.stack-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 18px 12px; text-align: center; transition: all 0.2s; }
.stack-item:hover { border-color: var(--accent); }
.stack-icon { font-size: 1.4rem; margin-bottom: 8px; display: block; }
.stack-name { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--muted); }

/* ── CIFRAS (.hero-stats / .stat-num de la portada): números sin caja ── */
:is(.stats, .kpis, .stats-big, .kpi-grid):has(:is(.stat-card, .stat-big, .kpi, .stat)) {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 40px 0;
  padding: 32px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
}
:is(.stat-card, .stat-big, .kpi, .stat) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: left;
  transform: none;
  flex: 0 1 auto;
  max-width: 260px;
}
:is(.stat-card, .stat-big, .kpi, .stat):hover { transform: none; border: 0; }
:is(.stat-card, .stat-big, .kpi, .stat) .stat-icon { display: none; }
:is(.stat-card, .stat-big, .kpi, .stat) :is(.stat-number, .stat-value, .kpi-value, .stat-num) {
  font-family: 'Space Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
  background: none;
}
:is(.stat-card, .stat-big, .kpi, .stat) :is(.stat-label, .kpi-label) { font-size: 0.75rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ── ETIQUETA (.modulo-tag de la portada) ── */
:is(.pill, .layer-item, .layer .component, .hero-pills span) {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: none;
}
:is(.layer-items) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.layer > .component { margin: 0 6px 6px 0; }

/* ── NOTA (.story-highlight de la portada) ── */
:is(.notice, .callout) {
  margin: 36px 0;
  padding: 20px 24px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: rgba(0, 212, 255, 0.05);
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  max-width: none;
}
:is(.notice, .callout) :is(p, li) { color: var(--text); font-weight: 400; }
.notice.warning, .callout { border-left-color: var(--warning); background: rgba(255, 215, 0, 0.05); }

/* ── FLUJOS (pasos con flechas): una sola fila de tarjetas iguales ── */
:is(.flujo, .flow) { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; margin: 0; padding: 0; }
:is(.flujo, .flow) > :is(.flujo-step, .flow-step) { flex: 1 1 0; min-width: 0; max-width: none; padding: 20px 16px; }
:is(.flujo-arrow, .flow-arrow) { flex: none; align-self: center; color: var(--accent); font-size: 1.2rem; transform: none; }
@media (max-width: 768px) {
  :is(.flujo, .flow) { flex-direction: column; }
  :is(.flujo-arrow, .flow-arrow) { transform: rotate(90deg); }
  .section-header { margin: 64px 0 40px; }
}

/* ── Ajustes de página completa (21-10-2026) ── */
/* El primer encabezado de un bloque no suma margen al del bloque (la portada solo tiene el de la sección) */
.section-header:first-child { margin-top: 0; }
/* Enlaces del texto: el acento, nunca el azul del navegador */
:is(.container, .content, .infografia, .presentacion, .doc-section, .slide) :is(p, li, .notice, .info-box, td) a:not([class]) { color: var(--accent); }
/* Grupo de tarjetas dentro de una grilla de 2 columnas: ocupa todo el ancho */
:is(.grid-2, .grid-3) > .features:only-child { grid-column: 1 / -1; }
/* Testimonios y pasos: en grilla, como las tarjetas de la portada */
.timeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; padding: 0; margin: 0; }
.timeline::before, .timeline-item::before { content: none; display: none; }
.timeline-item { margin: 0; }
.testimonial-author { margin-top: 16px; color: var(--text); font-weight: 500; font-size: 0.9rem; }
.testimonial-role { color: var(--muted); font-size: 0.75rem; }

/* ── PRESENTACIONES: cada diapositiva es una SECCIÓN de la portada (franja de borde a borde,
   alternando el fondo como #story / #stack), sin caja, sin degradado y sin número ── */
html body .presentacion { max-width: 1100px; margin: 0 auto; padding: 0 48px; display: block; gap: 0; }
html body .presentacion > .slide {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 100px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: transparent;
  text-align: left;
}
html body .presentacion > .slide:nth-of-type(odd) { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
html body .presentacion .slide-number { display: none; }
/* Diapositiva de cierre ("¡Gracias!"): como el encabezado de sección */
html body .presentacion .slide-cover { text-align: center; }
html body .presentacion .slide-cover h1 { font-family: 'Syne', sans-serif; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--text); margin: 0 0 12px; text-shadow: none; -webkit-text-fill-color: currentColor; background: none; }
html body .presentacion .slide-cover .tagline { color: var(--muted); font-size: 0.95rem; }
html body .presentacion .slide-cover :is(p, div) { text-align: center; }
/* Botones de contacto del cierre: los de la portada */
.slide .hero-ctas { justify-content: center; margin-top: 32px; }
@media (max-width: 768px) {
  html body .presentacion { padding: 0 16px; }
  html body .presentacion > .slide { padding: 64px 0; }
}