/* =========================================================
   INTELIFICA — hoja de estilos única del sitio
   Sin build, sin preprocesador: edita directamente esto.
   ========================================================= */

/* ---------- 0. Tipografías autoalojadas ----------
   Antes se pedían a Google Fonts, lo que enviaba la IP de cada visitante a sus
   servidores en toda carga de página. No ponía cookies, pero sí era una
   transferencia a un tercero que no aportaba nada a quien visita la web.
   Se sirven solo los subconjuntos latin y latin-ext, que es lo que necesita el
   español; el unicode-range de cada bloque es el que publica Google, así que el
   navegador sigue bajando únicamente el fichero que le hace falta. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin.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(/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin.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(/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-600-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700-latin.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;
}

/* ---------- 1. Variables de marca ---------- */
:root {
  /* Grafito (color principal) */
  --primary-50: #f7f7f8;
  --primary-100: #ececee;
  --primary-200: #d3d5d8;
  --primary-300: #b0b4b9;
  --primary-400: #888e95;
  --primary-500: #676d74;
  --primary-600: #4f545a;
  --primary-700: #3a3e43;
  --primary-800: #26292c;
  --primary-900: #18191b;
  --primary-950: #0e0f10;

  /* Coral (acento cálido) */
  --accent-50: #fff2ee;
  --accent-100: #ffe0d6;
  --accent-200: #ffbfa8;
  --accent-300: #ff9470;
  --accent-400: #fa6a41;
  --accent-500: #ee4d2e;
  --accent-600: #d33c1f;
  --accent-700: #ac311a;

  /* Azul (segundo acento, para no repetir el coral en dos CTA seguidos) */
  --blue-500: #2563eb;
  --blue-600: #1d4ed8;

  --ink: #1a1b1d;
  --paper: #fbfaf8;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", -apple-system, sans-serif;

  /* Escala de espaciado (base 8px) — ritmo vertical sistematizado */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;

  /* Radios — más contenidos y precisos que un único valor genérico */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius: var(--radius-md);

  /* Regla fina: el reposo de tarjetas y secciones se apoya en un borde de
     1px, no en sombra difusa — la sombra queda reservada para hover/foco
     y para el único acento con sombra propia (el CTA principal). */
  --rule: var(--primary-200);
  --rule-strong: var(--primary-300);

  --shadow-soft: 0 4px 24px rgba(24, 25, 27, 0.08);
  --shadow-hover: 0 10px 28px rgba(24, 25, 27, 0.12);
  --shadow-cta: 0 6px 20px rgba(238, 77, 46, 0.22);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --header-bg: rgba(251, 250, 248, 0.95);

  /* Superficies invertidas: bloques que ya son oscuros en modo claro (el CTA
     final y el pie). No pueden seguir la inversión de la escala o en oscuro se
     volverían claros con su texto blanco encima. */
  --invert-bg: var(--primary-700);
  --invert-bg-strong: var(--primary-900);
  --invert-icon: var(--primary-800);
  --on-invert-dim: var(--primary-200);
  --on-invert-soft: var(--primary-100);
  --on-invert-faint: var(--primary-300);
}

/* ---------------------------------------------------------------------------
   Modo oscuro
   La escala de grises se invierte en lugar de redefinir cada componente: donde
   el claro usa --primary-700 para el texto de cuerpo, aquí ese mismo token pasa
   a ser un gris claro, y el sitio entero se adapta solo. El coral de marca no
   se toca, y las sombras pasan de gris translúcido a negro, que sobre fondo
   oscuro es lo único que se ve.
--------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-50:  #0e0f10;
    --primary-100: #18191b;
    --primary-200: #26292c;
    --primary-300: #3a3e43;
    --primary-400: #4f545a;
    --primary-500: #888e95;
    --primary-600: #a8adb3;
    --primary-700: #c3c7cb;
    --primary-800: #d9dbde;
    --primary-900: #ececee;
    --primary-950: #f7f7f8;

    --ink: #f1f3f5;
    --paper: #121315;

    --rule: var(--primary-200);
    --rule-strong: var(--primary-300);

    --shadow-soft:  0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.55);
    --shadow-cta:   0 6px 20px rgba(238, 77, 46, 0.30);
    --header-bg: rgba(18, 19, 21, 0.95);

  --invert-bg: #1e2126;
  --invert-bg-strong: #16181b;
  --invert-icon: #2c3037;
  --on-invert-dim: #b9bfc6;
  --on-invert-soft: #d7dbe0;
  --on-invert-faint: #9aa1a9;

    --invert-bg: #1e2126;
    --invert-bg-strong: #16181b;
    --invert-icon: #2c3037;
    --on-invert-dim: #b9bfc6;
    --on-invert-soft: #d7dbe0;
    --on-invert-faint: #9aa1a9;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary-50:  #0e0f10;
  --primary-100: #18191b;
  --primary-200: #26292c;
  --primary-300: #3a3e43;
  --primary-400: #4f545a;
  --primary-500: #888e95;
  --primary-600: #a8adb3;
  --primary-700: #c3c7cb;
  --primary-800: #d9dbde;
  --primary-900: #ececee;
  --primary-950: #f7f7f8;

  --ink: #f1f3f5;
  --paper: #121315;

  --rule: var(--primary-200);
  --rule-strong: var(--primary-300);

  --shadow-soft:  0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-cta:   0 6px 20px rgba(238, 77, 46, 0.30);
  --header-bg: rgba(18, 19, 21, 0.95);

  --invert-bg: #1e2126;
  --invert-bg-strong: #16181b;
  --invert-icon: #2c3037;
  --on-invert-dim: #b9bfc6;
  --on-invert-soft: #d7dbe0;
  --on-invert-faint: #9aa1a9;

  color-scheme: dark;
}

html { color-scheme: light; }


/* ---------- 2. Reset básico ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.15;
  color: var(--primary-900);
}

p {
  margin: 0;
}

strong {
  font-weight: 600;
  color: var(--primary-900);
}

a {
  color: inherit;
}

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

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

/* Foco visible y deliberado en todo elemento interactivo — nada por defecto */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 3. Layout ---------- */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

@media (min-width: 640px) {
  .section {
    padding: 5rem 2rem;
  }
}

.text-center {
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-600);
}

/* Regla fina que precede cada etiqueta — motivo recurrente del sitio,
   la disciplina de grid expresada con el propio acento coral. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  background: var(--accent-500);
  flex-shrink: 0;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

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

.btn-primary {
  background: var(--accent-500);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background: var(--accent-600);
  box-shadow: 0 10px 30px rgba(238, 77, 46, 0.28);
}

.btn-blue {
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.btn-blue:hover {
  background: var(--blue-600);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.32);
}

.btn-secondary {
  background: var(--primary-50);
  color: var(--primary-800);
  border-color: var(--primary-300);
}

.btn-secondary:hover {
  background: var(--primary-50);
  box-shadow: 0 6px 20px rgba(24, 25, 27, 0.1);
}

/* Cartela "Dev" dentro de un botón. Es la misma que lleva el logotipo en
   dev.intelifica.com: quien llegue allí desde aquí reconoce la marca en vez de
   encontrarse una web distinta. El coral no cambia en modo oscuro, así que el
   blanco de encima sigue contrastando. */
.tag-dev {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff;
  background: var(--accent-500);
  padding: 0.2em 0.45em;
  border-radius: 2px;
  margin-left: 0.45em;
}

.btn-block {
  width: 100%;
}

@media (min-width: 640px) {
  .btn-block {
    width: auto;
  }
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--primary-100);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  display: flex;
  /* En columna para colgar el eslogan del logo, y centrado respecto a él en
     lugar de con un margen fijo: la anchura de la columna la marca el logo, así
     que el eslogan queda centrado bajo la marca sin números mágicos que haya
     que recalcular si el logo cambia. */
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-decoration: none;
}

.brand-tagline {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-500);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

/* En el pie el fondo es oscuro en los dos temas, así que el eslogan usa el
   color pensado para esas superficies y no el de la escala general. */
.site-footer .brand-tagline { color: var(--on-invert-faint); }

/* En pantallas estrechas la cabecera no tiene alto que gastar. */
@media (max-width: 720px) {
  .site-header .brand-tagline { display: none; }
}

.brand img {
  height: 4.5rem;
  width: auto;
  max-width: 20rem;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  align-items: center;
  /* Con el CTA fuera de la barra sobra ancho: los enlaces respiran más. */
  gap: 2.5rem;
  margin-left: auto;
  margin-right: 2rem;
}

.nav-links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-800);
  text-decoration: none;
  padding-bottom: 0.25rem;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--accent-500);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: var(--accent-600);
}

.header-cta {
  display: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0.5rem;
  color: var(--primary-900);
  cursor: pointer;
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--primary-100);
  background: var(--paper);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav .container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mobile-nav a {
  padding: 0.75rem 0.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  color: var(--primary-800);
  text-decoration: none;
}

.mobile-nav a:hover {
  background: var(--primary-50);
}

.mobile-nav .btn-primary {
  margin-top: 0.5rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .header-cta {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ---------- 6. Hero / PageHero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary-50);
}

.hero-grid {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}

/* Los hijos de un grid no se encogen por debajo de su contenido por
   defecto — sin esto, el texto largo del hero desborda el viewport en
   móvil en vez de ajustar el salto de línea. */
.hero-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 3fr 2fr;
    padding: 7rem 2rem;
  }
}

.hero h1 {
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 3rem;
  }
}

.lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--primary-700);
}

.hero p.lead {
  margin-top: 1.5rem;
  max-width: 40rem;
}

.hero-illustration {
  display: none;
}

@media (min-width: 1024px) {
  .hero-illustration {
    display: flex;
    justify-content: center;
  }
  .hero-illustration img {
    width: 100%;
    max-width: 19.5rem;
  }
}

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary-50);
  border-bottom: 1px solid var(--primary-100);
}

.page-hero .container {
  position: relative;
  max-width: 48rem;
  padding: 4rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .page-hero .container {
    padding: 5rem 2rem;
  }
}

.page-hero h1 {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .page-hero h1 {
    font-size: 2.25rem;
  }
}

.page-hero p.lead {
  margin: 1rem auto 0;
  max-width: 40rem;
}

/* ---------- 7. Decoración: formas planas y trama de puntos ---------- */
.blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.blob-primary {
  background: var(--primary-600);
  opacity: 0.15;
}

.blob-accent {
  background: var(--accent-400);
  opacity: 0.15;
}

.dot-grid {
  position: absolute;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1' fill='%23b0b4b9'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  opacity: 0.4;
}

/* ---------- 8. Animación al aparecer (scroll reveal) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in-up {
    animation: fade-in-up 0.8s ease-out both;
  }
}

/* ---------- 9. Rejillas y tarjetas ---------- */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}

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

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

/* Regla fina antes de las rejillas de tarjetas — el gesto de grid visible
   que sostiene todo el sistema, aplicado donde el contenido es una lista
   comparable de elementos. */
#ventajas .grid,
#modalidades .grid {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
}

.card {
  height: 100%;
  background: var(--primary-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-200);
}

.card .icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--accent-500);
}

.card .icon svg {
  width: 100%;
  height: 100%;
}

.service-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.service-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--invert-icon);
  color: var(--primary-50);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.service-card .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.service-card:hover .icon {
  background: var(--accent-500);
  transform: scale(1.1);
}

.service-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.service-card p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--primary-700);
}

.service-card .link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-600);
}

.service-card .link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s ease;
}

.service-card:hover .link svg {
  transform: translateX(0.25rem);
}

/* ---------- 10. Sección "por qué" / CTA ---------- */
.section-tint {
  position: relative;
  overflow: hidden;
  background: var(--primary-50);
}

.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--invert-bg);
}

.cta-section .container {
  position: relative;
  max-width: 48rem;
  padding: 4rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .cta-section .container {
    padding: 5rem 2rem;
  }
}

.cta-section h2 {
  color: #fff;
  font-size: 1.5rem;
}

@media (min-width: 640px) {
  .cta-section h2 {
    font-size: 1.875rem;
  }
}

.cta-section p {
  margin: 1rem auto 0;
  max-width: 40rem;
  color: var(--on-invert-dim);
  line-height: 1.7;
}

.cta-section strong {
  color: #fff;
}

.cta-section .btn-primary {
  margin-top: 2rem;
}

/* ---------- 11. Cómo funciona (3 pasos) ---------- */
.steps {
  position: relative;
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    border-top: 1px solid var(--rule-strong);
  }
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--invert-icon);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
}

.step p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--primary-700);
}

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--invert-bg-strong);
  color: var(--on-invert-soft);
}

.site-footer strong {
  color: #fff;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding: 3.5rem 0;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-grid h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-invert-faint);
}

.footer-grid ul {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.footer-grid a {
  color: var(--on-invert-soft);
  text-decoration: none;
}

.icon-inline {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}

.footer-grid a:hover {
  color: #fff;
}

.footer-brand p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-invert-dim);
}

.footer-bottom {
  border-top: 1px solid var(--primary-700);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.footer-bottom p {
  font-size: 0.875rem;
  color: var(--on-invert-faint);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-legal a {
  font-size: 0.875rem;
  color: var(--on-invert-faint);
  text-decoration: none;
}

.footer-legal a:hover {
  color: #fff;
}

/* ---------- 13. Formulario de contacto ---------- */
.form-card {
  border: 1px solid var(--rule);
  background: var(--primary-50);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: none;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-row.two-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-900);
  margin-bottom: 0.375rem;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--primary-200);
  border-radius: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--ink);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
  border-color: var(--primary-500);
}

.field-error {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--error, #dc2626);
}

.form-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--primary-500);
}

.form-success {
  border: 1px solid var(--primary-200);
  background: var(--primary-50);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.contact-layout {
  display: grid;
  gap: 3rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 3fr 2fr;
  }
}

.contact-side ul {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--primary-700);
}

.contact-side a {
  color: var(--accent-600);
  text-decoration: none;
}

.contact-side a:hover {
  text-decoration: underline;
}

/* ---------- 14. Precios ---------- */
.promo-banner {
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-8);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.promo-banner-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent-600);
  margin-bottom: 0.6rem;
}

.promo-banner p:not(.promo-banner-title) {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--primary-700);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--primary-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.plan.highlighted {
  border-color: var(--accent-300);
  outline: 2px solid var(--accent-300);
}

@media (min-width: 640px) {
  .plan.highlighted {
    transform: scale(1.05);
  }
}

.plan-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.plan .price {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary-900);
  font-variant-numeric: tabular-nums;
}

.plan ul {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.plan li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--primary-700);
}

.plan li svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--accent-500);
  margin-top: 0.125rem;
}

/* ---------- 15. Casos de uso ---------- */
.usecase {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* Placeholder real: hueco vacío a la espera de la foto — el <img>
   apunta ya a su ruta final, así que basta con subir el archivo con
   ese mismo nombre a /img/casos/ para que aparezca, sin tocar el HTML. */
.usecase-media {
  background: var(--primary-100);
}

.usecase-media img {
  width: 100%;
  height: auto;
  display: block;
}

.usecase-body {
  padding: var(--space-4);
}

/* ---------- 16. FAQ ---------- */
.faq-list {
  max-width: 48rem;
  margin: 0 auto;
}

.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--primary-100);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--primary-900);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--primary-500);
  transition: transform 0.2s ease;
}

.faq-item[open] summary svg {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--primary-700);
}

/* ---------- 17. Bloque de texto simple (legal, blog vacío…) ---------- */
.prose {
  max-width: 48rem;
  margin: 0 auto;
  color: var(--primary-700);
  line-height: 1.7;
}

.empty-state {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  border: 1px dashed var(--primary-200);
  border-radius: var(--radius);
  background: var(--primary-50);
  padding: 2.5rem;
}

.empty-state h2 {
  font-size: 1.125rem;
}

.empty-state p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--primary-700);
}

/* ---------- 18. Utilidades varias ---------- */
.mt-lead {
  margin-top: 1.5rem;
}

.center-col {
  max-width: 48rem;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Últimos posts del blog en portada
   Las tarjetas son enlaces completos, así que se anula el subrayado y el color
   heredados de <a> y se reproduce el gesto de .card (elevación al pasar).
--------------------------------------------------------------------------- */
.blog-section {
  padding: 4rem 0;
}

@media (min-width: 640px) {
  .blog-section { padding: 5rem 0; }
}

/* Carrusel centrado. No se limita al contenedor general de 72rem para poder
   aprovechar las pantallas anchas, pero sí tiene un tope propio para que en
   monitores muy grandes no se descuadre respecto al resto de la página.
   El relleno lateral reserva el hueco donde viven las flechas. */
.posts-carousel {
  position: relative;
  max-width: 110rem;
  margin: 0 auto;
  padding: var(--space-5) 4rem 0;
}

@media (max-width: 767px) {
  /* En móvil no hay sitio para reservar huecos: las flechas se superponen. */
  .posts-carousel { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.posts-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}

.posts-track::-webkit-scrollbar {
  display: none;
}

/* Ancho fijo por tarjeta: cuántas se ven es solo consecuencia del ancho
   disponible, no de un número de columnas decidido a mano. */
.posts-track > .post-card {
  flex: 0 0 clamp(16rem, 80vw, 22rem);
  scroll-snap-align: start;
}

.posts-nav {
  position: absolute;
  top: calc(50% + var(--space-5) / 2);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-700);
  cursor: pointer;
  box-shadow: var(--shadow-hover);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.posts-nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.posts-nav:hover:not(:disabled) {
  color: var(--accent-600);
  border-color: var(--accent-200);
}

.posts-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.posts-nav[hidden] {
  display: none;
}

.posts-nav-prev { left: 0.5rem; }
.posts-nav-next { right: 0.5rem; }

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--primary-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-200);
}

.post-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--primary-100, #f1f1f0);
}

.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}

.post-card:hover .post-card-media img {
  transform: scale(1.04);
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-4);
}

.post-card-date {
  font-size: 0.8125rem;
  color: var(--primary-500);
  margin-bottom: 0.5rem;
}

.post-card-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}

.post-card-excerpt {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--primary-700);
  margin: 0 0 1.1rem;
}

.post-card-more {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-600);
}

.post-card:hover .post-card-more {
  text-decoration: underline;
}


/* Interruptor de tema en la cabecera. Muestra el icono del tema al que se
   cambiaría, no el actual: es lo que espera la gente de un botón. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  color: var(--primary-600);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--accent-500); border-color: var(--accent-300); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }

.icon-sun { display: none; }
.icon-moon { display: block; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}


/* Logo según el tema. La versión blanca es la misma que ya se usa en el pie. */
.logo-oscuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-oscuro { display: block; }
}

/* ---------- 19. Guías descargables ---------- */
/* Tres portadas en fila. El número de folio (01/02/03) hace de índice visual:
   marca el orden de lectura sin tener que rotularlo como "paso 1". Se apoya en
   filete de 1px como el resto del sitio, no en sombra en reposo. */

.libros-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

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

.libro {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.libro-portada {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--primary-100);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.libro-portada img {
  display: block;
  width: 100%;
  height: auto;
}

.libro:hover .libro-portada {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-200);
}

.libro-folio {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-strong);
}

.libro-folio .num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-300);
}

.libro-folio .nivel {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-500);
}

.libro h3 {
  margin: var(--space-2) 0 0.35rem;
  font-size: 1.15rem;
}

.libro-sub {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  color: var(--primary-600);
}

.libro p.libro-texto {
  margin: 0;
  font-size: 0.92rem;
}

.libro-pie {
  margin-top: auto;
  padding-top: var(--space-3);
}

.libro-meta {
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--primary-500);
  font-variant-numeric: tabular-nums;
}

.libro-formatos {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-2);
}

.libro-formatos a {
  flex: 1;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.libro-formatos a:hover {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}

.libro-formatos .peso {
  font-weight: 400;
  opacity: 0.7;
}

.libros-aviso {
  max-width: 44rem;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--primary-500);
  text-align: center;
}