/*---ESTRUCTURA DE LAPAGINAS ---*/

/* ============================================
   VARIABLES GLOBALES
   ============================================ */

:root {
  /* Paleta de marca */
  --color-primary:       #7E001B;
  --color-primary-dark:  #5a0013;
  --color-primary-light: #b92a25;
  --color-accent:        #48c0b9;
  --color-dark:          #2d3e50;
  --color-dark-deep:     #1a2b3c;

  /* Superficies */
  --color-surface-light: #f8fafc;
  --color-surface-mid:   #dbe2e8;
  --color-surface-dark:  #666666;

  /* Texto */
  --color-text-on-dark:  #ffffff;
  --color-text-body:     #64748b;
  --color-text-heading:  #0f172a;
  --color-text-muted:    #94a3b8;

  /* Bordes */
  --color-border-light:  #e2e8f0;
  --color-border-mid:    #cbd5e1;

  /* Estados de formulario */
  --color-error:         #dc2626;
  --color-error-bg:      #fef2f2;
  --color-success:       #16a34a;
  --color-success-bg:    #f0fdf4;

  /* Tipografía */
  --font-primary: 'Inter', sans-serif;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  2rem;      /* 32px */
  --font-size-4xl:  2.5rem;    /* 40px */
  --font-size-5xl:  3.5rem;    /* 56px */

  /* Espaciado */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Radios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   15px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.12);

  /* Transiciones */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;

  /* Layout */
  --container-max:   1200px;
  --navbar-height:   80px;
  --glass-white:     rgba(255, 255, 255, 0.15);
}


/* ============================================
   RESET Y BASE
   ============================================ */

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

html {
  scroll-behavior: smooth;
  /* Reserva espacio para que el scroll no salte
     por encima del navbar sticky */
  scroll-padding-top: var(--navbar-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  /* Evita scroll horizontal accidental */
  overflow-x: hidden;
}

/* Bloquea scroll de fondo cuando el menú mobile está abierto */
body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font-primary);
  cursor: pointer;
  border: none;
  background: none;
}

/* Elimina animaciones para quienes las tienen desactivadas */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}


/* ============================================
   UTILIDADES GLOBALES
   ============================================ */

/* Visible solo para lectores de pantalla —
   usado en labels ocultos visualmente         */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* Focus visible consistente en todos
   los elementos interactivos                  */
:focus-visible {
  outline:        3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Quita el outline en clicks de ratón
   pero lo mantiene para teclado               */
:focus:not(:focus-visible) {
  outline: none;
}

/* Contenedor centrado reutilizable */
.container {
  max-width:    var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--space-5);
  padding-right: var(--space-5);
  width:        100%;
}

/* ============================================
   SKIP LINK — accesibilidad teclado
   ============================================ */

.skip-link {
  position:         absolute;
  top:              var(--space-4);
  left:             var(--space-4);
  z-index:          9999;
  padding:          var(--space-3) var(--space-6);
  background:       var(--color-dark);
  color:            var(--color-text-on-dark);
  font-size:        var(--font-size-sm);
  font-weight:      600;
  border-radius:    var(--radius-md);
  text-decoration:  none;
  /* Oculto visualmente hasta recibir foco */
  transform:        translateY(-120%);
  transition:       transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  position:         sticky;
  top:              0;
  z-index:          1000;
  background-color: var(--color-primary-light);
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.15);
  height:           var(--navbar-height);
}

/* Contenedor interno del navbar —
   gestiona el layout horizontal           */
.navbar-inner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--space-6);
  max-width:        var(--container-max);
  margin:           0 auto;
  padding:          0 var(--space-5);
  height:           100%;
}

/* Link activo en el navbar de esta página */
#nav-menu a[aria-current="true"] {
  opacity:    1;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
}

/* ── Logo ──────────────────────────────── */

.logo-wrapper {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  flex-shrink: 0;
}

.logo-link {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
}

.main-logo {
  height:     60px;
  width:      auto;
  display:    block;
  transition: transform var(--transition-base);
}

.main-logo:hover {
  transform: scale(1.04);
}

.logo-text-group {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  border-left:    1px solid rgba(255, 255, 255, 0.3);
  padding-left:   var(--space-4);
  gap:            var(--space-1);
}

/* Renombrado desde .brand-name para
   evitar colisión con .card-brand       */
.brand-tagline {
  font-size:      var(--font-size-sm);
  font-weight:    800;
  line-height:    1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color:          var(--color-text-on-dark);
  white-space:    nowrap;
}

.brand-slogan {
  font-size:   var(--font-size-xs);
  font-weight: 400;
  opacity:     0.85;
  white-space: nowrap;
  color:       var(--color-text-on-dark);
}

/* ── Links de navegación ───────────────── */

.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  /* Ocupa el espacio disponible
     para empujar el CTA a la derecha    */
  flex:        1;
  justify-content: center;
}

.nav-links a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
  font-size:       var(--font-size-sm);
  font-weight:     500;
  opacity:         0.9;
  padding:         var(--space-2) var(--space-3);
  border-radius:   var(--radius-md);
  transition:      background var(--transition-fast),
                   opacity    var(--transition-fast);
  white-space:     nowrap;
}

.nav-links a:hover {
  opacity:    1;
  background: rgba(255, 255, 255, 0.12);
}

/* Link activo — indica la sección actual */
.nav-links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.2);
  opacity:    1;
}

/* ── Botón de descarga (desktop) ────────── */

.btn-download {
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-2) var(--space-5);
  background:       var(--color-dark);
  color:            var(--color-text-on-dark);
  font-size:        var(--font-size-xs);
  font-weight:      600;
  border-radius:    var(--radius-md);
  text-decoration:  none;
  white-space:      nowrap;
  flex-shrink:      0;
  transition:       background var(--transition-base),
                    transform  var(--transition-fast);
}

.btn-download:hover {
  background: var(--color-dark-deep);
  transform:  translateY(-1px);
}

.btn-download svg {
  flex-shrink: 0;
}

/* ── Botón hamburguesa (mobile) ─────────── */

.nav-toggle {
  display:          none; /* Oculto en desktop */
  flex-direction:   column;
  justify-content:  center;
  align-items:      center;
  gap:              5px;
  width:            44px;  /* Mínimo táctil recomendado */
  height:           44px;  /* por WCAG: 44x44px         */
  padding:          var(--space-2);
  background:       transparent;
  border:           none;
  border-radius:    var(--radius-md);
  cursor:           pointer;
  flex-shrink:      0;
  transition:       background var(--transition-fast);
  /* Necesario para que el z-index funcione
     sobre el menú desplegado              */
  position:         relative;
  z-index:          1001;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Cada línea del ícono hamburguesa */
.hamburger-bar {
  display:          block;
  width:            22px;
  height:           2px;
  background-color: var(--color-text-on-dark);
  border-radius:    var(--radius-full);
  transition:       transform  var(--transition-base),
                    opacity    var(--transition-fast),
                    width      var(--transition-base);
  transform-origin: center;
}

/* ── Animación hamburguesa → X ──────────── */

/* Primera línea: rota +45° */
.nav-toggle.is-active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

/* Segunda línea: desaparece */
.nav-toggle.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
  width:   0;
}

/* Tercera línea: rota -45° */
.nav-toggle.is-active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================
   MENÚ MOBILE — desplegable
   ============================================ */

/* Solo se activa en mobile (ver @media al final)
   Aquí definimos el estado base y el abierto   */

@media (max-width: 768px) {

  /* Oculta los elementos de desktop */
  .nav-links {
    /* Estado cerrado: fuera del viewport */
    position:         fixed;
    top:              var(--navbar-height);
    left:             0;
    right:            0;
    bottom:           0;
    background:       var(--color-primary);
    flex-direction:   column;
    justify-content:  flex-start;
    align-items:      stretch;
    padding:          var(--space-8) var(--space-5);
    gap:              var(--space-2);
    overflow-y:       auto;

    /* Oculto y desplazado hacia arriba */
    transform:        translateY(-8px);
    opacity:          0;
    pointer-events:   none;
    visibility:       hidden;
    transition:       transform  var(--transition-base),
                      opacity    var(--transition-base),
                      visibility var(--transition-base);
  }

  /* Estado abierto — activado por JS */
  .nav-links.is-open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
    visibility:     visible;
  }

  .nav-links a {
    font-size:     var(--font-size-lg);
    font-weight:   600;
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity:       1;
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* Muestra el botón hamburguesa en mobile */
  .nav-toggle {
    display: flex;
  }

  /* Oculta el botón de descarga en mobile
     para no saturar la barra              */
  .btn-download {
    display: none;
  }

  /* Logo más pequeño en mobile */
  .main-logo {
    height: 40px;
  }

  /* Oculta el texto del logo en pantallas
     muy pequeñas para dar aire al navbar  */
  @media (max-width: 380px) {
    .logo-text-group {
      display: none;
    }
  }
}

/* --- SECCION DE CONTENIDO ---*/

/* ============================================
   HERO
   ============================================ */

.hero {
  text-align: center;
  padding:    var(--space-24) var(--space-5) var(--space-16);
  background-color: var(--color-primary);
}

/* ── Badge superior ────────────────────── */

.hero-badge {
  display:          inline-block;
  background:       var(--glass-white);
  backdrop-filter:  blur(4px);
  padding:          var(--space-2) var(--space-5);
  border-radius:    var(--radius-full);
  font-size:        var(--font-size-xs);
  font-weight:      500;
  letter-spacing:   0.03em;
  margin-bottom:    var(--space-8);
  color:            var(--color-text-on-dark);
  /* Evita que el texto se desborde
     en pantallas pequeñas              */
  max-width:        90vw;
}

/* ── Titular principal ─────────────────── */

h1 {
  font-size:     clamp(2.2rem, 6vw, 4rem);
  font-weight:   800;
  line-height:   1.1;
  margin-bottom: var(--space-6);
  color:         var(--color-text-on-dark);
  /* clamp() reemplaza los media queries
     para el tamaño del h1 — se adapta
     fluidamente entre 2.2rem y 4rem     */
}

.text-accent {
  color: var(--color-accent);
}

.text-underline {
  border-bottom: 4px solid var(--color-accent);
  padding-bottom: var(--space-1);
  display:        inline-block;
  line-height:    1.2;
}

/* ── Descripción ───────────────────────── */

.hero-description {
  font-size:     var(--font-size-lg);
  opacity:       0.85;
  max-width:     600px;
  margin:        0 auto var(--space-10);
  line-height:   1.7;
  /* Elimina el <br> visual en favor
     de max-width fluido                */
}

/* ── Botones de acción ─────────────────── */

.hero-actions {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             var(--space-5);
  margin-bottom:   var(--space-12);
  flex-wrap:       wrap;
}

.btn-primary {
  display:          inline-flex;
  align-items:      center;
  background:       var(--color-dark);
  color:            var(--color-text-on-dark);
  padding:          var(--space-4) var(--space-8);
  border-radius:    var(--radius-md);
  font-size:        var(--font-size-base);
  font-weight:      700;
  text-decoration:  none;
  transition:       background   var(--transition-base),
                    transform    var(--transition-fast),
                    box-shadow   var(--transition-base);
  box-shadow:       var(--shadow-md);
}

.btn-primary:hover {
  background:  var(--color-dark-deep);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-lg);
}

.btn-primary:active {
  transform:   translateY(0);
  box-shadow:  var(--shadow-sm);
}

.btn-secondary {
  display:          inline-flex;
  align-items:      center;
  background:       rgba(255, 255, 255, 0.92);
  color:            var(--color-dark);
  padding:          var(--space-4) var(--space-8);
  border-radius:    var(--radius-md);
  font-size:        var(--font-size-base);
  font-weight:      700;
  text-decoration:  none;
  transition:       background   var(--transition-base),
                    transform    var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 1);
  transform:  translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
}


/* ============================================
   TRUST BAR — sectores atendidos
   ============================================ */

.trust-bar {
  margin-bottom:  var(--space-12);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}

.trust-label {
  font-size:      var(--font-size-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity:        0.6;
  color:          var(--color-text-on-dark);
}

.trust-list {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-3);
  list-style:      none;
  padding:         0;
}

.trust-list li {
  font-size:        var(--font-size-xs);
  font-weight:      600;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
  color:            var(--color-text-on-dark);
  background:       var(--glass-white);
  padding:          var(--space-2) var(--space-4);
  border-radius:    var(--radius-full);
  /* Borde sutil que da definición
     sobre el fondo rojo                */
  border:           1px solid rgba(255, 255, 255, 0.2);
  transition:       background var(--transition-fast),
                    border     var(--transition-fast);
}

.trust-list li:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}


/* ============================================
   STAT CARDS — métricas del hero
   ============================================ */

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   var(--space-5);
  max-width:             1100px;
  margin:                0 auto;
}

.stat-card {
  background:    var(--glass-white);
  padding:       var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  text-align:    left;
  /* Borde sutil para definición */
  border:        1px solid rgba(255, 255, 255, 0.1);
  transition:    transform    var(--transition-base),
                 background   var(--transition-base);
}

.stat-card:hover {
  transform:  translateY(-4px);
  background: rgba(255, 255, 255, 0.22);
}

/* Número o sigla grande */
.stat-number {
  font-size:     clamp(1.8rem, 4vw, 2.5rem);
  font-weight:   800;
  line-height:   1;
  margin-bottom: var(--space-1);
  color:         var(--color-text-on-dark);
  /* sup del copyright GENCIM */
}

.stat-number sup {
  font-size:      0.45em;
  vertical-align: super;
  opacity:        0.7;
}

/* Etiqueta de unidad — "Años", "Organizaciones" */
.stat-unit {
  font-size:      var(--font-size-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--color-accent);
  margin-bottom:  var(--space-2);
}

/* Descripción secundaria */
.stat-desc {
  font-size:   var(--font-size-xs);
  opacity:     0.75;
  line-height: 1.5;
  color:       var(--color-text-on-dark);
}

/* ── Variante GENCIM — diferenciador propio ── */

.stat-card--highlight {
  background:  var(--color-dark);
  border-color: var(--color-accent);
  border-width: 1px;
  position:     relative;
  overflow:     hidden;
}

/* Acento decorativo superior */
.stat-card--highlight::before {
  content:          '';
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           3px;
  background:       var(--color-accent);
  border-radius:    var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card--highlight:hover {
  background:  var(--color-dark-deep);
  transform:   translateY(-4px);
}

.stat-card--highlight .stat-number {
  color: var(--color-accent);
}

.stat-card--highlight .stat-unit {
  color: var(--color-text-on-dark);
  opacity: 0.9;
}

.stat-card--highlight .stat-desc {
  opacity: 0.8;
}

/* ============================================
   SECCIÓN INICIATIVAS
   ============================================ */

.initiatives-section {
  background-color: var(--color-surface-mid);
  padding:          var(--space-24) var(--space-5);
  color:            var(--color-text-heading);
  text-align:       center;
}

/* ── Encabezado de sección — compartido ─── */

.section-header {
  margin-bottom: var(--space-16);
  text-align:    center;
}

.section-header .subtitle {
  display:        block;
  font-size:      var(--font-size-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-body);
  margin-bottom:  var(--space-3);
}

.section-header h2 {
  font-size:     var(--font-size-4xl);
  font-weight:   800;
  color:         var(--color-text-heading);
  margin-bottom: var(--space-5);
  line-height:   1.15;
}

.section-header p {
  max-width:   600px;
  margin:      0 auto;
  color:       var(--color-text-body);
  line-height: 1.7;
}

/* ── Grid de tarjetas ──────────────────── */

.initiatives-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--space-6);
  max-width:             var(--container-max);
  margin:                0 auto;
}

/* ── Tarjeta individual ────────────────── */

.initiative-card {
  background:     white;
  padding:        var(--space-10) var(--space-8);
  border-radius:  var(--radius-xl);
  text-align:     left;
  box-shadow:     var(--shadow-lg);
  transition:     transform    var(--transition-base),
                  box-shadow   var(--transition-base);
  display:        flex;
  flex-direction: column;
  /* Borde inferior de acento invisible
     que se revela en hover              */
  border-bottom:  3px solid transparent;
}

.initiative-card:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow-xl);
  border-bottom-color: var(--color-accent);
}

/* ── Cabecera de tarjeta ───────────────── */

.card-head {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  margin-bottom: var(--space-5);
}

/* Contenedor del logo de cada iniciativa */
.icon-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-lg);
  background:      var(--color-surface-mid);
  padding:         var(--space-2);
  flex-shrink:     0;
  overflow:        hidden;
  transition:      background var(--transition-base);
}

.initiative-card:hover .icon-box {
  background: var(--color-surface-light);
}

/* Imagen del logo dentro del icon-box */
.card-brand-img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
  /* Estado inicial: escala de grises    */
  filter:      grayscale(100%);
  opacity:     0.65;
  transition:  filter   var(--transition-slow),
               opacity  var(--transition-slow),
               transform var(--transition-base);
}

/* Al pasar el mouse sobre la tarjeta:
   color completo y ligero zoom          */
.initiative-card:hover .card-brand-img {
  filter:    grayscale(0%);
  opacity:   1;
  transform: scale(1.08);
}

/* Nombre de la iniciativa — renombrado
   desde .brand-name para evitar colisión
   con el navbar                          */
.card-brand {
  font-size:      var(--font-size-sm);
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-text-heading);
}

/* ── Contenido de tarjeta ──────────────── */

.initiative-card h3 {
  font-size:     var(--font-size-xl);
  font-weight:   700;
  color:         var(--color-text-heading);
  margin-bottom: var(--space-4);
  line-height:   1.25;
}

.initiative-card p {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-body);
  line-height: 1.7;
  /* flex-grow empuja el link al fondo
     de la tarjeta independientemente
     de la longitud del texto            */
  flex-grow:   1;
  margin-bottom: var(--space-8);
}

/* ── Link de acción ────────────────────── */

.card-link {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  color:           var(--color-text-heading);
  font-size:       var(--font-size-sm);
  font-weight:     700;
  text-decoration: none;
  border-top:      1px solid var(--color-border-light);
  padding-top:     var(--space-5);
  transition:      color       var(--transition-fast),
                   border-color var(--transition-fast);
}

.card-link:hover {
  color:        var(--color-primary);
  border-color: var(--color-primary-light);
}

/* La flecha se mueve hacia la derecha
   al hacer hover en el link             */
.card-link span {
  transition:  transform var(--transition-base);
  display:     inline-block;
}

.card-link:hover span {
  transform: translateX(5px);
}


/* ============================================
   SECCIÓN ¿POR QUÉ ELEGIRNOS?
   ============================================ */

.why-choose-us {
  padding:          var(--space-24) var(--space-5);
  background-color: var(--color-surface-light);
  background-image: radial-gradient(var(--color-border-mid) 1px, transparent 1px);
  background-size:  20px 20px;
  color:            var(--color-text-heading);
  text-align:       center;
}

/* ── Grid de características ───────────── */

.features-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   var(--space-8);
  max-width:             var(--container-max);
  margin:                0 auto;
}

/* ── Tarjeta de característica ─────────── */

.feature-card {
  background:    white;
  padding:       var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  text-align:    left;
  border:        1px solid var(--color-border-light);
  box-shadow:    var(--shadow-sm);
  transition:    transform    var(--transition-base),
                 box-shadow   var(--transition-base),
                 border-color var(--transition-base);
}

.feature-card:hover {
  transform:    translateY(-8px);
  box-shadow:   var(--shadow-xl);
  border-color: var(--color-border-mid);
}

/* Contenedor del ícono SVG */
.icon-wrapper {
  background:    var(--color-dark);
  width:         52px;
  height:        52px;
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         white;
  margin-bottom: var(--space-6);
  flex-shrink:   0;
  transition:    background var(--transition-base);
}

.feature-card:hover .icon-wrapper {
  background: var(--color-primary);
}

.feature-card h3 {
  font-size:     var(--font-size-xl);
  font-weight:   700;
  color:         var(--color-text-heading);
  margin-bottom: var(--space-4);
  line-height:   1.35;
}

.feature-card p {
  color:       var(--color-text-body);
  font-size:   var(--font-size-base);
  line-height: 1.7;
  margin:      0;
}

/* ============================================
   SECCIÓN LEAD MAGNET — descarga de guía
   ============================================ */

.lead-magnet {
  background-color: var(--color-primary);
  padding:          var(--space-24) var(--space-5);
  color:            var(--color-text-on-dark);
}

.lead-container {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-16);
  max-width:   var(--container-max);
  margin:      0 auto;
}

/* ============================================
   COLUMNA IZQUIERDA — contenido
   ============================================ */

.lead-content {
  flex: 1;
  /* Añade espacio superior para alinear
     visualmente con el formulario        */
  padding-top: var(--space-4);
}

/* ── Badge premium ─────────────────────── */

.badge-premium {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  background:    var(--glass-white);
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  font-weight:   600;
  margin-bottom: var(--space-6);
  border:        1px solid rgba(255, 255, 255, 0.2);
  color:         var(--color-text-on-dark);
}

.badge-premium svg {
  flex-shrink: 0;
  opacity:     0.9;
}

/* ── Titular de la sección ─────────────── */

.lead-content h2 {
  font-size:     clamp(1.8rem, 4vw, 3rem);
  font-weight:   800;
  line-height:   1.15;
  margin-bottom: var(--space-5);
  color:         var(--color-text-on-dark);
}

.text-highlight {
  color: var(--color-dark);
  /* Fondo claro detrás del texto
     para que resalte sobre el rojo      */
  background:      rgba(255, 255, 255, 0.15);
  padding:         0 var(--space-2);
  border-radius:   var(--radius-sm);
}

.lead-content > p {
  font-size:   var(--font-size-base);
  opacity:     0.85;
  line-height: 1.7;
  max-width:   480px;
}

/* ── Lista de beneficios ───────────────── */

.benefit-list {
  list-style:  none;
  padding:     0;
  margin-top:  var(--space-8);
}

.benefit-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  margin-bottom: var(--space-4);
  font-size:     var(--font-size-base);
  opacity:       0.92;
  line-height:   1.5;
}

.check-icon {
  color:       var(--color-accent);
  font-weight: 700;
  font-size:   var(--font-size-lg);
  /* Alinea el check con la primera
     línea del texto                     */
  line-height: 1.3;
  flex-shrink: 0;
}


/* ============================================
   COLUMNA DERECHA — formulario
   ============================================ */

.lead-form-container {
  flex:          0 0 440px;
  background:    white;
  padding:       var(--space-10) var(--space-10);
  border-radius: var(--radius-xl);
  color:         var(--color-text-heading);
  box-shadow:    var(--shadow-xl);
}

.lead-form-container h3 {
  font-size:     var(--font-size-2xl);
  font-weight:   700;
  margin-bottom: var(--space-2);
  color:         var(--color-text-heading);
}

.lead-form-container > p {
  color:         var(--color-text-body);
  font-size:     var(--font-size-sm);
  margin-bottom: var(--space-8);
  line-height:   1.5;
}

/* ── Grupos de campos ──────────────────── */

.form-group {
  margin-bottom: var(--space-4);
}

/* Label visible sobre cada campo */
.form-group label {
  display:       block;
  font-size:     var(--font-size-xs);
  font-weight:   600;
  color:         var(--color-text-heading);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

/* El asterisco de obligatorio */
.form-group label span {
  color:       var(--color-error);
  margin-left: var(--space-1);
}

/* ── Campos de entrada ─────────────────── */

.download-form input,
.download-form select {
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  border-radius:    var(--radius-md);
  border:           1.5px solid var(--color-border-light);
  background-color: var(--color-surface-light);
  font-family:      var(--font-primary);
  font-size:        var(--font-size-base);
  color:            var(--color-text-heading);
  transition:       border-color var(--transition-fast),
                    box-shadow   var(--transition-fast),
                    background   var(--transition-fast);
  /* Evita que el select tenga
     apariencia nativa en iOS            */
  -webkit-appearance: none;
  appearance:         none;
}

.download-form input:hover,
.download-form select:hover {
  border-color: var(--color-border-mid);
}

.download-form input:focus,
.download-form select:focus {
  outline:      none;
  border-color: var(--color-dark);
  background:   white;
  box-shadow:   0 0 0 3px rgba(45, 62, 80, 0.12);
}

/* Placeholder */
.download-form input::placeholder {
  color:   var(--color-text-muted);
  opacity: 1;
}

/* ── Estado de error en campos ─────────── */

/* El campo mismo cuando tiene error */
.download-form input.input-error,
.download-form select.input-error {
  border-color: var(--color-error);
  background:   var(--color-error-bg);
}

.download-form input.input-error:focus,
.download-form select.input-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Mensaje de error debajo del campo */
.field-error {
  display:     block;
  font-size:   var(--font-size-xs);
  color:       var(--color-error);
  margin-top:  var(--space-2);
  font-weight: 500;
  /* Reserva altura aunque esté vacío
     para evitar saltos de layout        */
  min-height:  1rem;
  line-height: 1;
}

/* ── Checkbox de privacidad ────────────── */

.form-group--check {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   flex-start;
  gap:           var(--space-3);
  margin-top:    var(--space-2);
}

.form-group--check input[type="checkbox"] {
  /* Tamaño mínimo táctil */
  width:      20px;
  height:     20px;
  min-width:  20px;
  margin-top: 2px;
  cursor:     pointer;
  accent-color: var(--color-primary);
  /* Quita los estilos heredados
     del reset general                   */
  border:     none;
  background: none;
  box-shadow: none;
}

.form-group--check label {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-body);
  line-height: 1.5;
  cursor:      pointer;
  font-weight: 500;
  margin-bottom: 0;
  flex: 1;
}

.form-group--check label a {
  color:           var(--color-primary);
  text-decoration: underline;
  font-weight:     700;
  transition:      color var(--transition-fast);
}

.form-group--check label a:hover {
  color: var(--color-primary-dark);
}

/* El span de error del checkbox
   va debajo del grupo completo          */
.form-group--check .field-error {
  width: 100%;
  margin-left: 0;
}

/* ── Botón de envío ────────────────────── */

.btn-submit {
  width:            100%;
  background:       var(--color-dark);
  color:            white;
  padding:          var(--space-4) var(--space-6);
  border:           none;
  border-radius:    var(--radius-md);
  font-size:        var(--font-size-base);
  font-weight:      700;
  cursor:           pointer;
  display:          flex;
  justify-content:  center;
  align-items:      center;
  gap:              var(--space-3);
  margin-top:       var(--space-5);
  transition:       background  var(--transition-base),
                    transform   var(--transition-fast),
                    box-shadow  var(--transition-base);
  min-height:       52px;
}

.btn-submit:hover:not(:disabled) {
  background:  var(--color-dark-deep);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-md);
}

.btn-submit:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: none;
}

/* Estado deshabilitado durante envío */
.btn-submit:disabled {
  opacity: 0.7;
  cursor:  not-allowed;
  transform: none;
}

/* Texto del botón en estado normal */
.btn-submit__text {
  pointer-events: none;
}

/* Texto del botón en estado cargando */
.btn-submit__loading {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  pointer-events: none;
}

/* Spinner animado para el estado cargando */
.btn-submit__loading::before {
  content:       '';
  display:       inline-block;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation:     spin 0.7s linear infinite;
  flex-shrink:   0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Nota de privacidad ────────────────── */

.form-privacy {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
  line-height: 1.5;
}

/* ── Estado de éxito post-envío ─────────── */

.form-success {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        var(--space-10) var(--space-6);
  gap:            var(--space-4);
}

.form-success svg {
  color:       var(--color-success);
  flex-shrink: 0;
}

.form-success h4 {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-text-heading);
  line-height: 1.3;
}

.form-success p {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-body);
  line-height: 1.6;
  max-width:   320px;
}

/* ── Botón de descarga PDF ─────────────── */

.btn-download-pdf {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  background:      var(--color-primary);
  color:           #ffffff;
  padding:         var(--space-4) var(--space-8);
  border-radius:   var(--radius-md);
  font-size:       var(--font-size-base);
  font-weight:     700;
  text-decoration: none;
  margin-top:      var(--space-4);
  transition:      background var(--transition-base),
                   transform  var(--transition-fast),
                   box-shadow var(--transition-base);
  box-shadow:      0 4px 14px rgba(126, 0, 27, 0.35);
  animation:       pulseDownload 2s ease-in-out infinite;
}

.btn-download-pdf:hover {
  background:  var(--color-primary-dark);
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(126, 0, 27, 0.45);
}

.btn-download-pdf:active {
  transform:  translateY(0);
  box-shadow: 0 2px 8px rgba(126, 0, 27, 0.3);
}

.btn-download-pdf svg {
  color:       #ffffff;
  flex-shrink: 0;
}

@keyframes pulseDownload {
  0%, 100% { box-shadow: 0 4px 14px rgba(126, 0, 27, 0.35); }
  50%      { box-shadow: 0 4px 24px rgba(126, 0, 27, 0.55); }
}

/* ── Checkbox de privacidad — destacado ── */

.form-group--check {
  background:    rgba(126, 0, 27, 0.06);
  border:        2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  transition:    background var(--transition-base),
                 border-color var(--transition-base);
}

.form-group--check:has(input:checked) {
  background:   var(--color-success-bg);
  border-color: var(--color-success);
}

.form-group--check input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.form-group--check:has(input:checked) input[type="checkbox"] {
  accent-color: var(--color-success);
}

/* El atributo HTML [hidden] oculta el
   elemento — nos aseguramos de que CSS
   no lo sobreescriba con display:flex   */
[hidden] {
  display: none !important;
}

/* Responsivo */
@media (max-width: 992px) {
    .lead-container { flex-direction: column; text-align: center; }
    .lead-form-container { flex: 1 1 100%; width: 100%; }
    .benefit-list li { justify-content: center; }
}

/* ============================================
   SECCIÓN CONTACTO — CTA independiente
   ============================================ */

#contacto {
  background-color: var(--color-primary);
  border-top:       1px solid rgba(255, 255, 255, 0.1);
}

.footer-cta {
  padding: var(--space-16) 0;
}

.cta-flex {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-8);
}

.cta-text h2 {
  font-size:   clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin:      0;
  color:       var(--color-text-on-dark);
  line-height: 1.2;
}

.cta-text p {
  opacity:    0.8;
  margin-top: var(--space-3);
  font-size:  var(--font-size-base);
  color:      var(--color-text-on-dark);
}

.btn-cta-footer {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  background:       var(--color-dark);
  color:            var(--color-text-on-dark);
  /* Padding simétrico corregido —
     antes era 30px 30px por error       */
  padding:          var(--space-4) var(--space-8);
  border-radius:    var(--radius-md);
  font-size:        var(--font-size-base);
  font-weight:      600;
  text-decoration:  none;
  white-space:      nowrap;
  flex-shrink:      0;
  transition:       background  var(--transition-base),
                    transform   var(--transition-fast);
}

.btn-cta-footer:hover {
  background: var(--color-dark-deep);
  transform:  translateY(-2px);
}


/* ============================================
   FOOTER PRINCIPAL
   ============================================ */

.main-footer {
  background-color: var(--color-surface-dark);
  color:            var(--color-text-on-dark);
}

/* ── Grid de columnas ──────────────────── */

.footer-grid {
  display:               grid;
  /* 3 columnas: branding más ancho,
     nav de iniciativas, contacto         */
  grid-template-columns: 1.8fr 1.2fr 1.2fr;
  gap:                   var(--space-12);
  padding:               var(--space-16) 0;
  border-bottom:         1px solid rgba(255, 255, 255, 0.1);
}

/* ── Columna de branding ───────────────── */

.footer-col--brand p {
  font-size:   var(--font-size-sm);
  opacity:     0.75;
  line-height: 1.7;
  max-width:   280px;
  margin-top:  var(--space-4);
}

.footer-logo {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-bottom: var(--space-2);
}

.logo-icon {
  background:    var(--color-dark);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight:   700;
  font-size:     var(--font-size-sm);
  white-space:   nowrap;
}

.footer-logo strong {
  display:     block;
  font-size:   var(--font-size-sm);
  font-weight: 700;
}

.footer-logo small {
  font-size: var(--font-size-xs);
  opacity:   0.7;
}

/* ── Redes sociales ────────────────────── */

.social-links {
  display:    flex;
  gap:        var(--space-3);
  margin-top: var(--space-5);
}

.social-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  background:      rgba(255, 255, 255, 0.1);
  border-radius:   var(--radius-full);
  color:           var(--color-text-on-dark);
  text-decoration: none;
  border:          1px solid rgba(255, 255, 255, 0.15);
  transition:      background    var(--transition-base),
                   border-color  var(--transition-base),
                   transform     var(--transition-fast);
}

.social-icon:hover {
  background:   rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform:    translateY(-2px);
}

.social-icon svg {
  /* Los SVG de LinkedIn e Instagram
     heredan el color del enlace         */
  width:  18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Columnas de navegación ────────────── */

.footer-col {
  display:        flex;
  flex-direction: column;
}

/* h3 renombrado desde h4 —
   jerarquía correcta h1→h2→h3          */
.footer-col__title {
  font-size:      var(--font-size-base);
  font-weight:    700;
  margin-bottom:  var(--space-5);
  color:          var(--color-text-on-dark);
  position:       relative;
  padding-bottom: var(--space-3);
}

/* Línea de acento bajo el título */
.footer-col__title::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            32px;
  height:           2px;
  background:       var(--color-accent);
  border-radius:    var(--radius-full);
}

.footer-col ul {
  list-style: none;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}

.footer-col ul li a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
  font-size:       var(--font-size-sm);
  opacity:         0.7;
  transition:      opacity    var(--transition-fast),
                   transform  var(--transition-fast);
  display:         inline-flex;
  align-items:     center;
}

.footer-col ul li a:hover {
  opacity:   1;
  transform: translateX(4px);
}

/* ── Información de contacto ───────────── */

/* <address> resetea el font-style
   italic que aplica por defecto          */
address {
  font-style: normal;
}

.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.contact-info li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--font-size-sm);
  opacity:     0.85;
  line-height: 1.4;
}

.contact-info li span {
  flex-shrink: 0;
  font-size:   var(--font-size-base);
  /* Alinea el emoji con la primera
     línea del texto                     */
  margin-top:  1px;
}

/* Links de tel: y mailto: */
.contact-info a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
  transition:      opacity var(--transition-fast);
}

.contact-info a:hover {
  opacity:         1;
  text-decoration: underline;
}


/* ============================================
   ZONA DE CONVERSIÓN — colaboración + newsletter
   ============================================ */

.footer-conversion-area {
  background-color: rgba(0, 0, 0, 0.15);
  padding:          var(--space-16) 0;
  border-bottom:    1px solid rgba(255, 255, 255, 0.08);
}

/* Contenedor interno que alinea las
   dos tarjetas lado a lado              */
.conversion-inner {
  display:         flex;
  gap:             var(--space-8);
  align-items:     stretch;
  justify-content: center;
  flex-wrap:       wrap;
}

/* ── Tarjeta de colaboración ───────────── */

.collab-card {
  background:    var(--color-primary);
  color:         white;
  padding:       var(--space-8);
  border-radius: var(--radius-xl);
  flex:          1;
  min-width:     280px;
  max-width:     440px;
  display:       flex;
  align-items:   center;
  position:      relative;
  overflow:      hidden;
  border:        1px solid rgba(255, 255, 255, 0.1);
  transition:    transform    var(--transition-base),
                 box-shadow   var(--transition-base);
}

/* Acento decorativo de fondo */
.collab-card::before {
  content:       '';
  position:      absolute;
  top:           -40px;
  right:         -40px;
  width:         120px;
  height:        120px;
  background:    rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.collab-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 15px 30px rgba(126, 0, 27, 0.35);
}

.collab-content {
  position: relative;
  z-index:  1;
}

.collab-tag {
  display:        inline-block;
  background:     rgba(255, 255, 255, 0.2);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  font-size:      var(--font-size-xs);
  font-weight:    700;
  letter-spacing: 0.08em;
  margin-bottom:  var(--space-4);
}

.collab-card h3 {
  font-size:     var(--font-size-xl);
  font-weight:   700;
  margin-bottom: var(--space-3);
  color:         white;
  line-height:   1.3;
}

.collab-card p {
  font-size:     var(--font-size-sm);
  opacity:       0.85;
  margin-bottom: var(--space-5);
  line-height:   1.6;
}

.btn-collab {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  background:      white;
  color:           var(--color-primary);
  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius-md);
  font-weight:     700;
  font-size:       var(--font-size-sm);
  text-decoration: none;
  transition:      background  var(--transition-fast),
                   transform   var(--transition-fast),
                   padding     var(--transition-base);
}

.btn-collab:hover {
  background:     #f8f8f8;
  transform:      translateX(3px);
}

/* ── Newsletter ────────────────────────── */

.newsletter-wrapper {
  flex:      1;
  min-width: 280px;
  max-width: 440px;
  display:   flex;
  flex-direction: column;
  justify-content: center;
  gap:       var(--space-4);
}

.newsletter-title {
  font-size:   var(--font-size-base);
  font-weight: 600;
  color:       var(--color-text-on-dark);
  opacity:     0.9;
}

/* Row de input + botón */
.newsletter-input-row {
  display:       flex;
  background:    rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  border:        1px solid rgba(255, 255, 255, 0.15);
  overflow:      hidden;
  transition:    border-color var(--transition-fast),
                 box-shadow   var(--transition-fast);
}

.newsletter-input-row:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:   0 0 0 3px rgba(72, 192, 185, 0.2);
}

.newsletter-input-row input {
  background:  transparent;
  border:      none;
  padding:     var(--space-3) var(--space-4);
  color:       var(--color-text-on-dark);
  font-family: var(--font-primary);
  font-size:   var(--font-size-sm);
  flex:        1;
  outline:     none;
  min-width:   0;
}

.newsletter-input-row input::placeholder {
  color:   rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.newsletter-input-row button {
  background:    var(--color-dark);
  color:         white;
  border:        none;
  padding:       var(--space-3) var(--space-5);
  font-size:     var(--font-size-base);
  font-weight:   700;
  cursor:        pointer;
  transition:    background var(--transition-fast);
  white-space:   nowrap;
  flex-shrink:   0;
}

.newsletter-input-row button:hover {
  background: var(--color-dark-deep);
}

/* Checkbox de privacidad del newsletter */
.privacy-check {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2);
  margin-top:  var(--space-1);
}

.privacy-check input[type="checkbox"] {
  width:      16px;
  height:     16px;
  min-width:  16px;
  margin-top: 2px;
  cursor:     pointer;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.privacy-check label {
  font-size:   var(--font-size-xs);
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  cursor:      pointer;
}

.privacy-check label a {
  color:           var(--color-accent);
  text-decoration: underline;
  transition:      color var(--transition-fast);
}

.privacy-check label a:hover {
  color: white;
}


/* ============================================
   BARRA INFERIOR DEL FOOTER
   ============================================ */

.footer-bottom {
  background-color: rgba(0, 0, 0, 0.35);
  padding:          var(--space-4) 0;
}

.bottom-flex {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

.footer-bottom p,
.footer-bottom small {
  font-size: var(--font-size-xs);
  opacity:   0.6;
  color:     var(--color-text-on-dark);
}

.footer-bottom nav {
  display: flex;
  gap:     var(--space-5);
}

.footer-bottom nav a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
  font-size:       var(--font-size-xs);
  opacity:         0.6;
  transition:      opacity var(--transition-fast);
}

.footer-bottom nav a:hover {
  opacity:         1;
  text-decoration: underline;
}

/* Responsivo */
@media (max-width: 768px) {
    .cta-flex { flex-direction: column; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-logo, .social-links { justify-content: center; }
}

html {
    scroll-behavior: smooth;
}

/* ============================================
   SECCIÓN BLOG
   ============================================ */

.blog-section {
  padding:          var(--space-24) var(--space-5);
  background-color: var(--color-surface-light);
}

/* ── Encabezado del blog ───────────────── */

.blog-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-bottom:   var(--space-12);
  gap:             var(--space-8);
}

.blog-header .header-text .subtitle {
  display:        block;
  font-size:      var(--font-size-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-body);
  margin-bottom:  var(--space-3);
}

.blog-header h2 {
  font-size:   clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color:       var(--color-text-heading);
  margin:      var(--space-2) 0 var(--space-3);
  line-height: 1.15;
}

.blog-header p {
  color:     var(--color-text-body);
  max-width: 480px;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.btn-all-posts {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-6);
  border:           1px solid var(--color-border-light);
  border-radius:    var(--radius-md);
  background:       white;
  color:            var(--color-text-heading);
  font-size:        var(--font-size-sm);
  font-weight:      600;
  text-decoration:  none;
  white-space:      nowrap;
  flex-shrink:      0;
  transition:       background    var(--transition-fast),
                    border-color  var(--transition-fast),
                    transform     var(--transition-fast);
}

.btn-all-posts:hover {
  background:   var(--color-surface-light);
  border-color: var(--color-border-mid);
  transform:    translateY(-1px);
}

/* ── Grid de cards ─────────────────────── */

.blog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:                   var(--space-8);
}

/* ── Card individual ───────────────────── */

.blog-card {
  background:    white;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  border:        1px solid var(--color-border-light);
  box-shadow:    var(--shadow-sm);
  transition:    transform    var(--transition-base),
                 box-shadow   var(--transition-base),
                 border-color var(--transition-base);
  display:       flex;
  flex-direction: column;
}

.blog-card:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow-xl);
  border-color: var(--color-border-mid);
}

/* ── Imagen de la card ─────────────────── */

.card-image {
  position:   relative;
  height:     220px;
  overflow:   hidden;
  flex-shrink: 0;
}

.card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .card-image img {
  transform: scale(1.04);
}

/* Etiqueta de categoría sobre la imagen */
.category-tag {
  position:        absolute;
  bottom:          var(--space-4);
  left:            var(--space-4);
  background:      rgba(15, 23, 42, 0.75);
  color:           white;
  padding:         var(--space-1) var(--space-3);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     600;
  backdrop-filter: blur(4px);
  letter-spacing:  0.03em;
}

/* ── Contenido de la card ──────────────── */

.card-content {
  padding:        var(--space-8);
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.reading-time {
  font-size:     var(--font-size-xs);
  color:         var(--color-text-body);
  display:       block;
  margin-bottom: var(--space-3);
  font-weight:   500;
}

.blog-card h3 {
  font-size:     var(--font-size-xl);
  font-weight:   700;
  color:         var(--color-text-heading);
  margin-bottom: var(--space-4);
  line-height:   1.3;
  /* Limita el título a 3 líneas
     con puntos suspensivos              */
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.blog-card p {
  color:         var(--color-text-body);
  font-size:     var(--font-size-sm);
  line-height:   1.7;
  margin-bottom: var(--space-6);
  flex-grow:     1;
  /* Limita el resumen a 3 líneas */
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ── Link de la card ───────────────────── */

.card-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  color:           var(--color-dark);
  font-weight:     700;
  font-size:       var(--font-size-sm);
  text-decoration: none;
  margin-top:      auto;
  transition:      color var(--transition-fast);
}

.card-cta span {
  display:    inline-block;
  transition: transform var(--transition-base);
}

.card-cta:hover {
  color: var(--color-primary);
}

.card-cta:hover span {
  transform: translateX(4px);
}

/* Link en el título de la card */
.title-link {
  text-decoration: none;
  color:           inherit;
  transition:      color var(--transition-fast);
}

.title-link:hover {
  color: var(--color-primary);
}


/* ============================================
   SKELETON LOADER — estado de carga del blog
   ============================================ */

/* ── Tarjeta skeleton ─────────────────── */
.skeleton-card {
  background:     white;
  border-radius:  var(--radius-xl);
  overflow:       hidden;
  border:         1px solid var(--color-border-light);
  box-shadow:     var(--shadow-sm);
}

/* Bloque que simula la imagen */
.skeleton-image {
  width:      100%;
  height:     220px;
  background: var(--color-border-light);
}

/* Contenedor de líneas de texto */
.skeleton-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap:     var(--space-3);
}

/* Línea de texto falsa */
.skeleton-text {
  height:        14px;
  border-radius: var(--radius-sm);
  background:    var(--color-border-light);
}

/* Línea corta — simula la etiqueta */
.skeleton-text.short {
  width: 35%;
  height: 12px;
}

/* ── Tiempo de lectura / fecha ─────────── */
.reading-time-skeleton {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--font-size-xs);
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-2);
}

/* ── Animación de pulso ────────────────── */

/* Solo se activa si el usuario NO tiene
   reducción de movimiento habilitada    */
@media (prefers-reduced-motion: no-preference) {
  .pulse {
    animation: pulse-animation 1.6s ease-in-out infinite;
  }
}

@keyframes pulse-animation {
  0%   { background-color: var(--color-border-light); }
  50%  { background-color: var(--color-surface-light); }
  100% { background-color: var(--color-border-light); }
}


/* ============================================
   ACCESIBILIDAD GLOBAL
   ============================================ */

/* ── Focus visible mejorado ────────────── */

/* Elementos interactivos en secciones
   con fondo claro                       */
.why-choose-us :focus-visible,
.initiatives-section :focus-visible,
.blog-section :focus-visible,
.lead-form-container :focus-visible {
  outline:        3px solid var(--color-dark);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Elementos interactivos en secciones
   con fondo oscuro o rojo              */
.hero :focus-visible,
.lead-magnet :focus-visible,
.main-footer :focus-visible,
#contacto :focus-visible,
.navbar :focus-visible {
  outline:        3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ── Contraste elevado ─────────────────── */

/* Para usuarios con prefers-contrast: more
   se elevan los bordes y se oscurecen
   los textos secundarios               */
@media (prefers-contrast: more) {
  :root {
    --color-text-body:   #1e293b;
    --color-text-muted:  #334155;
    --color-border-light: #94a3b8;
    --color-border-mid:   #64748b;
  }

  .nav-links a,
  .footer-col ul li a,
  .contact-info li {
    opacity: 1;
  }

  .stat-card,
  .hero-badge,
  .trust-list li {
    border-color: rgba(255, 255, 255, 0.5);
  }

  .initiative-card,
  .feature-card,
  .blog-card {
    border-width: 2px;
  }
}

/* ── Reducción de movimiento ───────────── */

/* Complementa el reset global del
   Bloque 1 con casos específicos       */
@media (prefers-reduced-motion: reduce) {

  /* Desactiva la animación de logos
     en escala de grises                */
  .card-brand-img {
    filter:     grayscale(0%);
    opacity:    1;
    transition: none;
  }

  /* Desactiva el zoom de imagen
     en las cards del blog              */
  .blog-card:hover .card-image img {
    transform: none;
  }

  /* Desactiva el translateY en hover
     de todas las tarjetas              */
  .initiative-card:hover,
  .feature-card:hover,
  .blog-card:hover,
  .stat-card:hover,
  .collab-card:hover {
    transform: none;
  }

  /* Desactiva el spinner —
     muestra solo el texto              */
  .btn-submit__loading::before {
    animation: none;
    display:   none;
  }

  /* Desactiva la animación
     del menú hamburguesa               */
  .hamburger-bar {
    transition: none;
  }
}

/* ── Modo de alto contraste de Windows ── */

/* Windows High Contrast Mode usa una
   paleta de sistema que ignora colores
   personalizados. Estos ajustes
   garantizan que el sitio siga siendo
   usable en ese modo                   */
@media (forced-colors: active) {

  .btn-primary,
  .btn-secondary,
  .btn-cta-footer,
  .btn-submit,
  .btn-collab,
  .btn-download {
    border: 2px solid ButtonText;
  }

  .stat-card,
  .initiative-card,
  .feature-card,
  .blog-card {
    border: 1px solid CanvasText;
  }

  .hamburger-bar {
    background-color: ButtonText;
  }

  .text-accent,
  .stat-unit,
  .check-icon {
    color: Highlight;
  }
}


/* --- Sección de Contacto --- */
.contact-section {
    padding: 100px 0;
    background-color: #f1f5f9; /* Gris muy suave */
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.contact-info-side h2 {
    font-size: 2.5rem;
    color: #0f172a;
    margin-bottom: 20px;
}

.contact-details {
    margin-top: 40px;
}

.detail-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.detail-icon {
    width: 45px;
    height: 45px;
    background: grey;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Estilos del Formulario */
.contact-form-side {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0B2140;
    margin-bottom: 8px;
}

.pro-form input,
.pro-form select,
.pro-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #f8fafc;
    transition: all 0.3s;
}

.pro-form input:focus,
.pro-form textarea:focus {
    outline: none;
    border-color: #2d3e50;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(45, 62, 80, 0.1);
}

.btn-submit-form {
    width: 100%;
    background-color: #2d3e50;
    color: white;
    padding: 16px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-submit-form:hover {
    background-color: #1a2b3c;
}

/* Responsivo */
@media (max-width: 900px) {
    .contact-container { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE — todos los breakpoints
   Orden: de mayor a menor (desktop-first)

   1024px — Tablet landscape
    768px — Tablet portrait / mobile grande
    480px — Mobile estándar
    380px — Mobile pequeño
   ============================================ */


/* ─────────────────────────────────────────────
   1024px — Tablet landscape
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {

  /* ── Hero ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Lead magnet ── */
  .lead-container {
    flex-direction: column;
    gap:            var(--space-12);
  }

  .lead-content {
    /* Centra el contenido cuando
       está apilado verticalmente        */
    text-align:  center;
    padding-top: 0;
  }

  .lead-content h2 {
    max-width: 560px;
    margin:    0 auto var(--space-5);
  }

  .lead-content > p {
    max-width: 480px;
    margin:    0 auto;
  }

  .benefit-list {
    /* Centra la lista de beneficios     */
    display:         flex;
    flex-direction:  column;
    align-items:     center;
  }

  .benefit-list li {
    max-width: 400px;
  }

  .lead-form-container {
    /* Ocupa el ancho completo
       cuando está apilado               */
    flex:      unset;
    width:     100%;
    max-width: 560px;
    margin:    0 auto;
  }

  /* ── Footer grid ── */
  .footer-grid {
    /* En tablet: 2 columnas
       branding ocupa las dos            */
    grid-template-columns: 1fr 1fr;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }

  .footer-col--brand p {
    max-width: 100%;
  }

  /* ── CTA de contacto ── */
  .cta-flex {
    flex-direction: column;
    text-align:     center;
    gap:            var(--space-6);
  }

  .cta-text h2 {
    font-size: var(--font-size-3xl);
  }
}


/* ─────────────────────────────────────────────
   768px — Tablet portrait / mobile grande
   ───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Espaciado general de secciones ── */
  .hero,
  .why-choose-us,
  .initiatives-section,
  .blog-section,
  .lead-magnet {
    padding-top:    var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* ── Encabezados de sección ── */
  .section-header h2,
  .blog-header h2 {
    font-size: var(--font-size-3xl);
  }

  /* ── Hero ── */
  .hero-description {
    font-size: var(--font-size-base);
  }

  .hero-actions {
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-4);
  }

  .btn-primary,
  .btn-secondary {
    width:      100%;
    max-width:  320px;
    justify-content: center;
  }

  .trust-list {
    gap: var(--space-2);
  }

  /* ── Stats ── */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-4);
  }

  .stat-card {
    padding: var(--space-6) var(--space-5);
  }

  /* ── Iniciativas ── */
  .initiatives-grid {
    grid-template-columns: 1fr;
    max-width:             480px;
    margin:                0 auto;
  }

  /* ── ¿Por qué elegirnos? ── */
  .features-grid {
    grid-template-columns: 1fr;
    max-width:             480px;
    margin:                0 auto;
  }

  /* ── Blog ── */
  .blog-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-5);
    margin-bottom:  var(--space-8);
  }

  .blog-grid {
    grid-template-columns: 1fr;
    max-width:             480px;
    margin:                0 auto;
  }

  /* ── Zona de conversión footer ── */
  .conversion-inner {
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
  }

  .collab-card,
  .newsletter-wrapper {
    max-width: 100%;
    width:     100%;
  }

  /* ── Footer grid ── */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
    padding:               var(--space-10) 0;
  }

  .footer-col--brand {
    grid-column: auto;
  }

  .footer-col--brand p {
    max-width: 100%;
  }

  /* ── Footer bottom ── */
  .bottom-flex {
    flex-direction: column;
    text-align:     center;
    gap:            var(--space-3);
  }
}

  /* Reporte en mobile: apila columnas */
  .report-body {
    flex-direction: column;
  }

  .report-chart-col {
    width:    100%;
    flex:     none;
  }

  .report-chart {
    height: 220px;
  }

  .diagno-result {
    padding: 16px 14px;
  }

  .report-score {
    flex-direction: row;
    flex-wrap:      wrap;
  }

  .report-score__value {
    font-size: 28px;
  }

  .report-name {
    font-size: 18px;
  }
}

/* ─────────────────────────────────────────────
   480px — Mobile estándar
   ───────────────────────────────────────────── */

@media (max-width: 480px) {

  /* ── Container con menos padding ── */
  .container {
    padding-left:  var(--space-4);
    padding-right: var(--space-4);
  }

  /* ── Navbar ── */
  .navbar {
    height: 64px;
  }

  /* Actualiza la variable para que el
     scroll-padding-top siga correcto   */
  :root {
    --navbar-height: 64px;
  }

  .main-logo {
    height: 36px;
  }

  /* ── Hero ── */
  .hero {
    padding-top:    var(--space-12);
    padding-bottom: var(--space-12);
  }

  .hero-badge {
    font-size: 0.65rem;
    padding:   var(--space-2) var(--space-3);
  }

  /* ── Stats: 1 columna en mobile ── */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: var(--font-size-4xl);
  }

  /* ── Iniciativas ── */
  .initiative-card {
    padding: var(--space-6);
  }

  /* ── Formulario de descarga ── */
  .lead-form-container {
    padding: var(--space-6);
  }

  .lead-form-container h3 {
    font-size: var(--font-size-xl);
  }

  /* ── Encabezados de sección ── */
  .section-header h2,
  .blog-header h2 {
    font-size: var(--font-size-2xl);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  /* ── Blog header apilado ── */
  .blog-header {
    gap: var(--space-4);
  }

  .btn-all-posts {
    width: 100%;
    justify-content: center;
  }

  /* ── Feature cards ── */
  .feature-card {
    padding: var(--space-6);
  }

  /* ── Footer ── */
  .footer-cta {
    padding: var(--space-10) 0;
  }

  .collab-card {
    padding: var(--space-6);
  }

  .collab-card h3 {
    font-size: var(--font-size-lg);
  }

  /* ── Social icons más espaciados
     para targets táctiles              */
  .social-links {
    gap: var(--space-4);
  }

  .social-icon {
    width:  44px;
    height: 44px;
  }
}


/* ─────────────────────────────────────────────
   380px — Mobile pequeño (iPhone SE, Galaxy A)
   ───────────────────────────────────────────── */

@media (max-width: 380px) {

  /* ── Oculta el texto del logo
     para dar aire al navbar            */
  .logo-text-group {
    display: none;
  }

  /* ── Trust bar en columna ── */
  .trust-list {
    flex-direction: column;
    align-items:    center;
  }

  /* ── Stats en columna ── */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* ── Botones a ancho completo ── */
  .btn-primary,
  .btn-secondary,
  .btn-cta-footer {
    width:           100%;
    justify-content: center;
    text-align:      center;
  }

  /* ── Newsletter input row
     se apila verticalmente             */
  .newsletter-input-row {
    flex-direction: column;
    border-radius:  var(--radius-md);
  }

  .newsletter-input-row input {
    padding:     var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .newsletter-input-row button {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding:       var(--space-3);
    width:         100%;
  }
}


/* ─────────────────────────────────────────────
   Print — optimización para impresión
   ───────────────────────────────────────────── */

@media print {

  /* Oculta elementos no relevantes
     para impresión                     */
  .navbar,
  .hero-actions,
  .trust-bar,
  .lead-magnet,
  .footer-conversion-area,
  .footer-bottom,
  .skip-link,
  .nav-toggle,
  .btn-download,
  .btn-all-posts {
    display: none !important;
  }

  /* Ajusta colores para impresión
     en blanco y negro                  */
  body {
    background: white;
    color:      black;
  }

  .hero,
  .why-choose-us,
  .initiatives-section,
  .blog-section {
    padding:    var(--space-8) 0;
    background: white;
    color:      black;
  }

  .stat-card,
  .initiative-card,
  .feature-card {
    box-shadow: none;
    border:     1px solid #ccc;
  }

  /* Muestra las URLs de los links
     al imprimir                        */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #666;
  }

  /* No muestra URLs en links internos
     ni en botones                      */
  a[href^="#"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after,
  .btn-primary::after,
  .btn-secondary::after {
    content: '';
  }
}

/* ─────────────────────────────────────────────
   PRINT  DE REPORTE  — reporte del diagnostico
   ───────────────────────────────────────────── */
   /* ══════════════════════════════════════════
      REPORTE — formato carta 8.5 × 11 in
      816 × 1056 px a 96 dpi
      Margen html2pdf: 0.3in = 28.8px c/lado
      Área útil: 758 × 998 px
      ══════════════════════════════════════════ */

   /* Contenedor que simula la hoja carta */
   .diagno-result {
     width:       100%;
     min-height:  998px;
     margin:      0 auto;
     padding:     24px 20px 20px;
     background:  white;
     font-family: 'Inter', sans-serif;
     font-size:   13px;
     color:       #1e293b;
     line-height: 1.5;
     /* Evita que html2pdf corte el contenido */
     page-break-inside: avoid;
   }

   /* ── Encabezado ── */
   .report-header {
     display:         flex;
     justify-content: space-between;
     align-items:     flex-start;
     border-bottom:   2.5px solid #7E001B;
     padding-bottom:  12px;
     margin-bottom:   16px;
   }

   .report-header__brand {
     display:        flex;
     flex-direction: column;
     gap:            2px;
   }

   .report-brand-name {
     font-size:      20px;
     font-weight:    800;
     color:          #7E001B;
     letter-spacing: -0.02em;
     line-height:    1;
   }

   .report-brand-tagline {
     font-size:      9px;
     font-weight:    500;
     color:          #64748b;
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }

   .report-header__meta {
     text-align: right;
   }

   .report-header__meta strong {
     display:     block;
     font-size:   11px;
     font-weight: 700;
     color:       #7E001B;
     letter-spacing: 0.05em;
   }

   .report-header__meta small {
     font-size: 10px;
     color:     #94a3b8;
   }

   /* ── Nombre del cliente ── */
   .report-name {
     text-align:    center;
     font-size:     22px;
     font-weight:   800;
     color:         #0f172a;
     margin:        14px 0 4px;
     line-height:   1.2;
   }

   .report-subtitle {
     text-align:    center;
     font-size:     11px;
     color:         #64748b;
     margin-bottom: 14px;
     font-weight:   500;
   }

   /* ── Sección de dos columnas: radar + datos ── */
   .report-body {
     display: flex;
     gap:     20px;
     align-items: flex-start;
     margin-bottom: 14px;
     /* En pantallas anchas: lado a lado
     En pantallas angostas: apilado    */
     flex-wrap:   wrap;
   }

   /* Columna izquierda — radar */
   .report-chart-col {
     flex:       0 0 260px;
     width:      260px;
     /* En mobile se expande al ancho completo */
     min-width: 0;
   }

   .report-chart {
     width:    100%;
     height:   240px;
     position: relative;
   }

   .report-chart canvas {
     display: block;
     width:   100% !important;
     height:  100% !important;
   }

   /* Columna derecha — datos del diagnóstico */
   .report-data-col {
     flex: 1;
     min-width: 220px;  /* no se aplasta demasiado */
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding-top: 8px;
   }

   /* ── Score destacado ── */
   .report-score {
     background:    #f8fafc;
     border:        1px solid #e2e8f0;
     border-left:   4px solid #7E001B;
     padding:       12px 16px;
     border-radius: 8px;
     display:       flex;
     align-items:   center;
     justify-content: space-between;
     gap:           8px;
   }

   .report-score__label {
     font-size:   11px;
     font-weight: 600;
     color:       #334155;
     line-height: 1.3;
     max-width:   120px;
   }

   .report-score__value {
     font-size:   36px;
     font-weight: 800;
     color:       #008D96;
     line-height: 1;
     white-space: nowrap;
   }

   /* ── Badge de nivel ── */
   .report-badge {
     display:        block;
     text-align:     center;
     padding:        8px 14px;
     border-radius:  50px;
     font-weight:    700;
     font-size:      11px;
     letter-spacing: 0.04em;
     width:          100%;
   }

   .report-badge--critical { background: #FDEDEC; color: #C0392B; }
   .report-badge--standard { background: #FEF9E7; color: #9A7D0A; }
   .report-badge--advanced { background: #EBF5FB; color: #1A5276; }
   .report-badge--leader   { background: #E8F8F5; color: #16A085; }

   /* ── Tabla de ejes ── */
   .report-axes-table {
     width:           100%;
     border-collapse: collapse;
     font-size:       11px;
   }

   .report-axes-table th {
     text-align:   left;
     font-weight:  600;
     color:        #64748b;
     font-size:    10px;
     padding:      4px 6px;
     border-bottom: 1px solid #e2e8f0;
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }

   .report-axes-table td {
     padding:      5px 6px;
     border-bottom: 1px solid #f1f5f9;
     color:        #334155;
     vertical-align: middle;
   }

   .report-axes-table td:last-child {
     text-align:  right;
     font-weight: 700;
     color:       #008D96;
     white-space: nowrap;
   }

   /* Barra de progreso mini en la tabla */
   .axis-bar-track {
     width:         80px;
     height:        6px;
     background:    #e2e8f0;
     border-radius: 3px;
     overflow:      hidden;
     display:       inline-block;
     vertical-align: middle;
     margin-right:  6px;
   }

   .axis-bar-fill {
     height:        100%;
     background:    #7E001B;
     border-radius: 3px;
   }

   /* ── Hoja de ruta ── */
   .report-roadmap {
     background:    #f8fafc;
     border:        1px solid #e2e8f0;
     border-radius: 8px;
     padding:       14px 16px;
     font-size:     12px;
     color:         #475569;
     line-height:   1.65;
   }

   .report-roadmap strong {
     display:       block;
     font-size:     13px;
     font-weight:   700;
     color:         #0f172a;
     margin-bottom: 6px;
   }

   /* ── Footer del reporte ── */
   .report-footer {
     margin-top:    12px;
     padding-top:   10px;
     border-top:    1px solid #e2e8f0;
     text-align:    center;
     font-size:     9px;
     color:         #94a3b8;
     line-height:   1.6;
   }

   .report-footer strong {
     color: #64748b;
   }

   /* Las acciones nunca generan espacio en el PDF */
   @media print {
     .report-actions,
     .diagno-progress,
     .diagno-nav,
     .navbar,
     .skip-link {
       display: none !important;
       height:  0 !important;
       margin:  0 !important;
       padding: 0 !important;
     }
   }

   /* ── Acciones — NO van al PDF ── */
   .report-actions {
     display:        flex;
     flex-direction: column;
     align-items:    center;
     gap:            var(--space-4);
     margin-top:     var(--space-8);
     padding-top:    var(--space-8);
     border-top:     1px solid var(--color-border-light);
   }

   .report-actions p {
     font-size:   var(--font-size-sm);
     color:       var(--color-text-body);
     text-align:  center;
     max-width:   400px;
     line-height: 1.5;
   }