/*
Theme Name:  OpLensBi
Author:      OpLensBi
Description: Tema a medida para OpLensBi — consultora de analítica de datos y mejora operacional para pymes de Latinoamérica. Sin page builder.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     Proprietary
Text Domain: oplensbi
*/

/* ============================================================
   TIPOGRAFÍA — self-hosted (Inter + IBM Plex Mono, subset latin)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DESIGN TOKENS — nunca hardcodear estos valores por página
   ============================================================ */
:root {
  /* ── Fondos ─────────────────────────────────────────────── */
  --color-fondo:         #FFFFFF;   /* fondo de página y componentes */
  --color-fondo-sutil:   #F7F9F9;   /* Neutral 50 — secciones con fondo alternado */

  /* ── Texto ──────────────────────────────────────────────── */
  --color-grafito:       #121A1A;   /* texto principal / titulares — NUNCA fondo */
  --color-texto-sec:     #54605F;   /* Neutral 600 Pizarra — texto secundario */
  --color-texto-ter:     #9BA5A5;   /* Neutral 400 Acero — terciario / placeholder */
  --color-blanco:        #FFFFFF;   /* texto sobre fondos de acento (botones) */

  /* ── Bordes y separadores ───────────────────────────────── */
  --color-borde:         #E1E6E6;   /* Neutral 200 Ceniza — bordes y dividers */

  /* ── Acento ─────────────────────────────────────────────── */
  --color-turquesa:      #0B7A77;   /* solo texto, filetes finos, estado activo */
  --color-turquesa-hover:#0D9490;   /* hover de turquesa */

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.5rem;     /* 56px */

  /* H1 de hero — valor canónico de Inicio, referencia para las 7 páginas.
     Escalado -22% respecto al original clamp(2.5rem, 3.7vw, 3.45rem)
     (40px → 55px): los tres números multiplicados por el mismo factor
     0.78 para conservar la curva de interpolación (mismo ancho de
     viewport en el que el clamp toca el mínimo y el máximo). */
  --hero-title-size: clamp(1.95rem, 2.89vw, 2.69rem); /* 31px → 43px */

  /* H2 de sección — mismo valor en 6 páginas (Legal queda aparte,
     ya era distinto). Escalado -22% igual que el H1, mismo criterio
     de multiplicar los tres números por 0.78. Original:
     clamp(2.1875rem, 4vw, 3.75rem) (35px → 60px). */
  --section-title-size: clamp(1.706rem, 3.12vw, 2.925rem); /* 27px → 47px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* ── Espaciado (escala 4px) ─────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Espaciado entre secciones (compartido por las páginas de
     servicio/contenido — diagnostico.css, dashboard.css,
     metodologia.css, contacto.css, inicio.css, casos.css). Cada
     archivo define su propia variable local (--diag-section-y, etc.)
     apuntando a esta, para no tener que tocar cada uso individual. ── */
  --section-y:        80px;
  --section-y-mobile: 60px;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:       1200px;
  --max-width-texto: 720px;
  --gutter:          var(--space-6);

  /* ── Bordes ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Transiciones ───────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-grafito);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}
button { cursor: pointer; }

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-grafito);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }

p { line-height: var(--leading-normal); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-turquesa);
}

/* ============================================================
   LAYOUT UTILITARIOS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--texto { max-width: var(--max-width-texto); }

/* ============================================================
   COMPONENTES GLOBALES
   ============================================================ */

/* CTA principal */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-turquesa);
  color: var(--color-blanco);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-color: var(--color-turquesa-hover);
  transform: translateY(-1px);
}

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

/* CTA secundario (outline) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--color-grafito);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), color var(--transition-base);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--color-turquesa);
  color: var(--color-turquesa);
}

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--color-turquesa);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Separador */
.divider {
  border: none;
  border-top: 1px solid var(--color-borde);
  margin-block: var(--space-16);
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  /* Por encima de .cx-index (250, filtro sticky de Casos de Éxito) — el
     header debe quedar siempre visible sobre cualquier otro elemento
     sticky del sitio. Auditado: ningún otro z-index del tema cae entre
     100 y 250, así que subir este valor no reordena nada más. */
  z-index: 300;
  background-color: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
  padding-block: var(--space-4);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

/* Header adaptativo — activado por JS (main.js) vía IntersectionObserver
   sobre [data-header-theme="dark"], no por página: la sección que esté
   detrás del header en cada momento del scroll decide el tema. */
.site-header--dark {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

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

.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  width: 134px;
  height: 32px;
}

/* assets/img/logo-oplensbi.svg y logo-oplensbi-claro.svg (archivos fuente
   entregados) son imágenes rasterizadas con máscara/filtros envueltas en
   SVG, con ~63% de lienzo transparente alrededor de la marca real
   (viewBox 4:3, contenido visible ≈4.2:1) — al escalarlas en vivo a
   tamaño de header, el downscale del PNG enmascarado recorta visualmente
   el borde derecho del wordmark (confirmado con renders de prueba).
   assets/img/logo-oplensbi-header.png y logo-oplensbi-claro-header.png
   son derivados pre-recortados y compuestos (vía Pillow, sin
   dependencias de build) que evitan ese bug — no editar los .svg fuente,
   regenerar los .png derivados si el diseñador entrega archivos nuevos.

   Las dos variantes (oscura/clara) se superponen en el mismo lugar
   (position: absolute) y hacen crossfade por opacity — evita el salto
   de layout que tendría alternar el src de una sola <img>, y con box
   fijo de 134×32 en .site-logo no hay reflow al cambiar de tema. */
.site-logo__img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity var(--transition-base);
}

.site-logo__img--light {
  opacity: 0;
}

.site-header--dark .site-logo__img--dark {
  opacity: 0;
}

.site-header--dark .site-logo__img--light {
  opacity: 1;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-primary a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-texto-sec);
  transition: color var(--transition-fast);
}

.nav-primary a:hover,
.nav-primary a:focus-visible,
.nav-primary a[aria-current="page"] {
  color: var(--color-grafito);
}

/* Tema oscuro del nav — #c7d0cf ya es el tono de texto secundario usado
   sobre fondo oscuro en .inicio-footer (no un valor nuevo). Contraste
   verificado contra los 3 fondos oscuros reales del sitio (#121A1A,
   #0f1717, #101717): 11.2–11.6:1, muy por encima del mínimo AA (4.5:1).
   El anillo de :focus-visible global (outline turquesa, style.css) ya
   pasa 3:1+ contra esos mismos fondos — no necesita variante propia. */
.site-header--dark .nav-primary a,
.site-header--dark .nav-servicios__toggle {
  color: #c7d0cf;
}

.site-header--dark .nav-primary a:hover,
.site-header--dark .nav-primary a:focus-visible,
.site-header--dark .nav-primary a[aria-current="page"],
.site-header--dark .nav-servicios__toggle:hover,
.site-header--dark .nav-servicios__toggle:focus-visible {
  color: var(--color-blanco);
}

/* El dropdown de Servicios/Empresa (.nav-submenu) SIEMPRE mantiene fondo
   blanco y texto oscuro, sin variante propia para modo oscuro del
   header — es un panel flotante transitorio (se abre por hover/clic),
   no necesita adaptarse a la sección de scroll. Sin este reset, la
   regla de arriba (misma especificidad, .nav-submenu está anidado
   dentro de .nav-primary) pintaría #c7d0cf sobre el fondo blanco fijo
   de .nav-submenu — contraste real verificado: 1.57:1 (necesita 4.5:1),
   casi invisible. Va después en el CSS para ganar el empate de
   especificidad. */
.site-header--dark .nav-submenu a {
  color: var(--color-texto-sec);
}

.site-header--dark .nav-submenu a:hover,
.site-header--dark .nav-submenu a:focus-visible {
  color: var(--color-grafito);
  background-color: var(--color-borde);
}

/* El CTA del header (.btn-cta) es un <a> dentro de .nav-primary, así que
   hereda las reglas de arriba (color: var(--color-texto-sec), y grafito en
   hover) con más especificidad que .btn-cta { color: var(--color-blanco) }
   — el texto queda gris apagado sobre fondo turquesa en vez de blanco
   sólido. Se restaura el blanco explícitamente, en todos sus estados,
   incluido el overlay mobile de .nav-primary. */
.nav-primary a.btn-cta,
.nav-primary a.btn-cta:hover,
.nav-primary a.btn-cta:focus-visible,
.nav-primary a.btn-cta[aria-current="page"] {
  color: var(--color-blanco);
}

/* El turquesa sólido pasa el mínimo de contraste no-textual (3:1) contra
   los 3 fondos oscuros reales, pero por un margen ajustado (3.42–3.52:1)
   — y el header transparente puede quedar sobre el degradado variable de
   .inicio-hero, no solo un color plano. Un borde blanco sutil da un
   límite duro que no depende de esa variación tonal. */
.site-header--dark .nav-primary a.btn-cta {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Menú hamburguesa (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  padding: var(--space-1);
}

.nav-toggle span {
  display: block;
  height: 2px;
  background-color: var(--color-grafito);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-primary {
    display: none;
    position: fixed;
    inset: 0;
    top: 61px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    background-color: var(--color-fondo);
    padding: var(--space-8) var(--gutter);
    border-top: 1px solid var(--color-borde);
    overflow-y: auto;
  }

  .nav-primary.is-open { display: flex; }

  .nav-primary a {
    font-size: var(--text-lg);
    color: var(--color-grafito);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Submenú "Servicios" (todas las páginas salvo Inicio) */
.nav-servicios {
  position: relative;
}

.nav-servicios__toggle {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-texto-sec);
  transition: color var(--transition-fast);
}

.nav-servicios__toggle:hover,
.nav-servicios__toggle:focus-visible {
  color: var(--color-grafito);
}

.nav-submenu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm);
  padding: calc(var(--space-3) + var(--space-2)) var(--space-2) var(--space-2);
  z-index: 10;
}

.nav-servicios:hover .nav-submenu,
.nav-servicios.is-open .nav-submenu {
  display: flex;
}

.nav-submenu a {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-texto-sec);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  color: var(--color-grafito);
  background-color: var(--color-borde);
}

@media (max-width: 768px) {
  .nav-servicios__toggle {
    font-size: var(--text-lg);
    color: var(--color-grafito);
  }

  .nav-submenu {
    display: flex;
    position: static;
    min-width: auto;
    border: none;
    padding: var(--space-2) 0 0 var(--space-4);
  }

  .nav-submenu a {
    padding-block: var(--space-2);
    white-space: normal;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-borde);
  padding-block: var(--space-12);
  margin-top: var(--space-32);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.footer-copy {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  transition: color var(--transition-fast);
}

.footer-nav a:hover { color: var(--color-grafito); }

.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-borde);
}

.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-legal-nav a {
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.footer-legal-nav a:hover { color: var(--color-grafito); }

.footer-legal-nav span[aria-disabled="true"] {
  font-size: var(--text-xs);
  color: var(--color-texto-ter);
  cursor: not-allowed;
}

/* ============================================================
   UTILIDADES DE ACCESIBILIDAD
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: fixed;
  top: -9999px;
  left: var(--space-4);
  background-color: var(--color-turquesa);
  color: var(--color-blanco);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-4); }

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ============================================================
   HERO — INICIO
   ============================================================ */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-borde);
  padding-block: var(--space-20);
}

.hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 800px;
}

.hero .eyebrow  { animation: fadeUp 0.5s ease both; }

.hero__titular {
  font-size: clamp(var(--text-4xl), 7vw, var(--text-5xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  animation: fadeUp 0.5s 0.1s ease both;
}

.hero__bajada {
  font-size: var(--text-lg);
  color: var(--color-texto-sec);
  max-width: 560px;
  line-height: var(--leading-snug);
  animation: fadeUp 0.5s 0.2s ease both;
}

.hero__cta {
  animation: fadeUp 0.5s 0.3s ease both;
  align-self: flex-start;
}

/* ============================================================
   SERVICIOS — INICIO
   ============================================================ */
.servicios {
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-borde);
}

.servicios__heading {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  margin-bottom: var(--space-8);
  font-weight: var(--weight-regular);
}

.servicios__intro {
  font-size: var(--text-lg);
  color: var(--color-texto-sec);
  max-width: var(--max-width-texto);
  margin-bottom: var(--space-12);
  line-height: var(--leading-snug);
}

.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-borde);
  border: 1px solid var(--color-borde);
}

@media (min-width: 768px) {
  .servicios__grid { grid-template-columns: 1fr 1fr; }
}

.servicio-card {
  background-color: var(--color-fondo);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background-color var(--transition-base);
}

.servicio-card:hover { background-color: var(--color-fondo-sutil); }

.servicio-card .eyebrow { margin-bottom: calc(var(--space-2) * -1); }

.servicio-card__titulo {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.servicio-card__desc {
  color: var(--color-texto-sec);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  flex: 1;
}

.servicio-card__link { align-self: flex-start; margin-top: var(--space-2); }

.servicio-card__numero {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-medium);
  color: var(--color-turquesa);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: calc(var(--space-2) * -1);
}

/* ============================================================
   MARCO CM — INICIO
   ============================================================ */
.marco-cm {
  border-bottom: 1px solid var(--color-borde);
  padding-block: var(--space-24);
  background-color: var(--color-fondo-sutil);
}

.marco-cm .eyebrow { display: block; margin-bottom: var(--space-4); }

.marco-cm__titular {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.marco-cm__subtitulo {
  color: var(--color-texto-sec);
  font-size: var(--text-lg);
  margin-bottom: var(--space-12);
}

.marco-cm__fases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .marco-cm__fases {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }
}

.marco-cm__fase {
  border-top: 2px solid var(--color-turquesa);
  padding-top: var(--space-6);
}

.marco-cm__fase-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-turquesa);
  display: block;
  margin-bottom: var(--space-3);
}

.marco-cm__fase-nombre {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.marco-cm__fase-desc {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  line-height: var(--leading-normal);
}

.marco-cm__conector {
  display: none;
  align-items: flex-start;
  padding-top: calc(var(--space-6) + 6px);
  color: var(--color-borde);
  font-size: var(--text-2xl);
  user-select: none;
}

@media (min-width: 768px) { .marco-cm__conector { display: flex; } }

/* ============================================================
   PAGE HERO — PÁGINAS INTERIORES
   ============================================================ */
.page-hero {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-borde);
}

.page-hero .eyebrow { display: block; margin-bottom: var(--space-4); }

.page-hero__titular {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  max-width: 760px;
}

.page-hero__bajada {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-texto-sec);
  max-width: 560px;
  line-height: var(--leading-snug);
}

/* ============================================================
   OBJETIVO DEL SERVICIO
   ============================================================ */
.seccion-objetivo {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-borde);
}

.seccion-objetivo h2 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-6);
}

.contenido-wysiwyg {
  max-width: var(--max-width-texto);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.contenido-wysiwyg p + p { margin-top: var(--space-4); }

/* ============================================================
   ALCANCE SÍ / NO
   ============================================================ */
.alcance {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-borde);
}

.alcance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .alcance__grid { grid-template-columns: 1fr 1fr; }
}

.alcance__col-titulo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto-sec);
}

.alcance__col--si .alcance__col-titulo {
  color: var(--color-turquesa);
  border-bottom-color: var(--color-turquesa);
}

.alcance__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.alcance__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.alcance__item::before {
  content: '—';
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
  flex-shrink: 0;
}

.alcance__col--si .alcance__item::before {
  content: '+';
  color: var(--color-turquesa);
}

/* ============================================================
   PAQUETES
   ============================================================ */
.paquetes {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-borde);
}

.paquetes__heading {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-8);
}

.paquetes__lista { display: flex; flex-direction: column; }

.paquete {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-borde);
}

.paquete:last-child { border-bottom: 1px solid var(--color-borde); }

@media (min-width: 640px) {
  .paquete {
    grid-template-columns: 180px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.paquete__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.paquete__nombre { display: block; }

.paquete__plazo {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-turquesa);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.paquete__alcance {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}

.paquete__entregable {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  line-height: var(--leading-snug);
}

.paquete__entregable-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-sec);
  margin-right: var(--space-2);
}

.paquete__precio {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-grafito);
  white-space: nowrap;
}

.paquete__soporte {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  line-height: var(--leading-snug);
}

.paquete__soporte-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-sec);
  margin-right: var(--space-2);
}

.paquetes__nota {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
  letter-spacing: 0.04em;
}

.paquete__badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-blanco);
  background-color: var(--color-turquesa);
  border-radius: 2px;
}

.paquete--destacado {
  border-left: 2px solid var(--color-turquesa);
  margin-left: calc(var(--space-4) * -1);
  padding-left: var(--space-4);
}

.hero-anchor {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-borde);
}

.cta-alcance {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-borde);
}

/* ============================================================
   EXTRAS / SERVICIOS ADICIONALES
   ============================================================ */
.extras {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-borde);
}

.extras__heading {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-3);
}

.extras__aclaracion {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-8);
}

.extras-lista { display: flex; flex-direction: column; }

.extras-lista li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-borde);
}

.extras-lista li:last-child { border-bottom: 1px solid var(--color-borde); }

@media (min-width: 640px) {
  .extras-lista li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-6);
  }
}

.extra__nombre {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  min-width: 200px;
  flex-shrink: 0;
}

.extra__desc {
  font-size: var(--text-sm);
  color: var(--color-texto-sec);
  flex: 1;
  line-height: var(--leading-snug);
  margin: 0;
}

.extra__valor {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-turquesa);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { padding-block: var(--space-16); }

.cta-band .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .cta-band .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-band__texto {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  max-width: 480px;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.cta-band__texto--tres-lineas {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  max-width: 640px;
  letter-spacing: -0.03em;
}

/* ============================================================
   CALLOUT ENTREGABLE — DASHBOARD
   ============================================================ */
.callout-entregable {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-borde);
  background-color: var(--color-fondo-sutil);
}

.callout-entregable p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-turquesa);
  letter-spacing: 0.02em;
}

/* ============================================================
   KPIS DE EJEMPLO — DASHBOARD
   ============================================================ */
.kpis-ejemplo {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-borde);
}

.kpis-ejemplo h2 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-8);
}

.kpis-lista { display: flex; flex-direction: column; }

.kpis-lista li {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--text-base);
}

.kpis-lista li:last-child { border-bottom: 1px solid var(--color-borde); }

.kpi-industria {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 110px;
  flex-shrink: 0;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-layout {
  padding-block: var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 900px) {
  .contacto-layout {
    grid-template-columns: 360px 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.proceso-calificacion h2 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-8);
}

.pasos-lista { display: flex; flex-direction: column; }

.paso {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-borde);
  align-items: baseline;
}

.paso:last-child { border-bottom: 1px solid var(--color-borde); }

.paso__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-turquesa);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 2.5ch;
}

.paso p {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-texto-sec);
  margin: 0;
}

.contacto-cta-intro {
  font-size: var(--text-base);
  color: var(--color-texto-sec);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-8);
}

.contacto-cta-btn {
  width: 100%;
  justify-content: center;
  gap: var(--space-3);
}

.contacto-cta-nota {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-texto-sec);
  font-family: var(--font-mono);
  text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 899px) {
  .contacto-cta-wrap { order: -1; }
}

/* ============================================================
   RESPONSIVE — CORRECCIONES ESPECÍFICAS
   ============================================================ */

/* Gutter más estrecho en pantallas muy pequeñas */
@media (max-width: 400px) {
  :root { --gutter: var(--space-4); }
}

/* Touch targets mínimos (44px) */
.nav-toggle {
  min-width:  44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.btn-outline {
  min-height: 44px;
  align-items: center;
}

/* Hero — no bloquea el contenido en landscape mobile */
@media (max-height: 600px) {
  .hero {
    min-height: auto;
    padding-block: var(--space-16);
  }
}

/* Tarjeta de servicio — menos padding interno en móvil pequeño */
@media (max-width: 480px) {
  .servicio-card { padding: var(--space-6); }
}

/* KPIs — apila industria y nombre en pantallas muy estrechas */
@media (max-width: 480px) {
  .kpis-lista li { flex-direction: column; gap: var(--space-1); }
  .kpi-industria { min-width: auto; }
}

/* ============================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   Clase aplicada por JS vía IntersectionObserver.
   Si prefers-reduced-motion está activo los elementos
   son visibles desde el inicio (JS no añade la clase oculta).
   ============================================================ */
.anim-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.anim-on-scroll:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .anim-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   FEEDBACK CTA CONTACTO
   Estado temporal mientras se abre la pestaña nueva.
   ============================================================ */
.btn-cta[data-loading] {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}

.btn-cta[data-loading]::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
  vertical-align: middle;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn-cta[data-loading]::after { animation: none; }
}