/* ============================================================
   AvantiFlow — Estilos globales
   1.  Tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Fondo global
   5.  Componentes base
   6.  Header (isla central con glassmorphism)
   7.  Hero de portada
   8.  Cabecera de páginas interiores
   9.  Barra de integraciones
   10. Problema / valor
   11. Servicios
   12. Proceso
   13. Resultados
   14. CTA final y formulario
   15. Footer
   16. Animaciones de scroll
   17. Responsive
   ============================================================ */

/* ------------------------------------------------------------
   0. Tipografía incrustada (Inter, licencia SIL OFL)
   Se sirve desde nuestro propio dominio: sin peticiones a
   terceros y misma tipografía en Mac, Windows y Android.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-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 var";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  /* Marca */
  --blue: #378add;
  --blue-bright: #4f9dee;
  --blue-deep: #2563eb;
  --violet: #8b5cf6;
  --violet-soft: #9b7bf0;
  --gradient: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 42%, #6366f1 74%, var(--violet-soft) 100%);

  /* Superficies */
  --bg: #12141c;
  --bg-deep: #0c0e14;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Texto */
  --text: #f4f6fb;
  --text-muted: rgba(244, 246, 251, 0.66);
  --text-faint: rgba(244, 246, 251, 0.42);

  /* Tipografía */
  --font: "Inter var", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala fluida */
  --fs-display: clamp(2.5rem, 5.6vw, 4.15rem);
  --fs-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(2rem, 3.8vw, 3rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(1.0625rem, 1.45vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Espaciado y forma */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --header-h: 96px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.22s var(--ease);
  --t-med: 0.4s var(--ease);

  /* Glass */
  --glass-blur: saturate(150%) blur(14px);
  --shadow-soft: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 18px 44px -18px rgba(55, 138, 221, 0.55);
}

/* ------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Suavizado solo en los saltos a anclas: lo resuelve el navegador,
   no el hilo principal. El scroll con rueda queda nativo. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* respaldo para navegadores antiguos */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}

button, input, textarea { font: inherit; color: inherit; }

::selection { background: rgba(55, 138, 221, 0.35); }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visible para lectores de pantalla, invisible en pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section__head {
  max-width: 760px;
  margin-bottom: clamp(2.75rem, 5vw, 4.25rem);
}
.section__head--center { margin-inline: auto; text-align: center; }

.section__title { font-size: var(--fs-h2); margin-bottom: 1.25rem; }

.section__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 62ch;
}
.section__head--center .section__lead { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------
   4. Fondo global
   ------------------------------------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, #1a2033 0%, var(--bg) 46%, var(--bg-deep) 100%);
  pointer-events: none;
}

.bg__grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 0%, transparent 78%);
  opacity: 0.6;
}

.bg__orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.85;
}

.bg__orb--blue {
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  top: -22vw;
  left: -12vw;
  background: radial-gradient(circle, rgba(55, 138, 221, 0.5) 0%, transparent 68%);
}

.bg__orb--violet {
  width: 54vw;
  height: 54vw;
  max-width: 820px;
  max-height: 820px;
  top: 26vw;
  right: -16vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.38) 0%, transparent 68%);
}

.bg__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   5. Componentes base
   ------------------------------------------------------------ */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-med),
              background-color var(--t-fast), border-color var(--t-fast);
}

.btn--primary {
  background: var(--gradient);
  background-size: 160% 100%;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 22px 52px -16px rgba(99, 102, 241, 0.7);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}
.btn--ghost svg { transition: transform var(--t-fast); }
.btn--ghost:hover svg { transform: translateX(3px); }

.btn--sm { --btn-py: 0.6rem; --btn-px: 1.15rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--blue-bright);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
  transition: transform var(--t-med);
}
.logo:hover .logo__mark { transform: translateY(-2px) scale(1.05); }

.logo__word {
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.028em;
}
.logo__word-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------
   6. Header — isla centrada con glassmorphism
   ------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 1.1rem var(--gutter);
  pointer-events: none;
  transition: padding var(--t-med);
}
.header.is-scrolled { padding-top: 0.6rem; }

.header__bar {
  position: relative; /* ancla del menú desplegable en móvil */
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(170%) blur(10px);
  -webkit-backdrop-filter: saturate(170%) blur(10px);
  box-shadow:
    0 20px 44px -24px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.header.is-scrolled .header__bar {
  background: rgba(18, 20, 28, 0.74);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 50px -26px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header__divider {
  width: 1px;
  height: 22px;
  margin-inline: 0.25rem;
  background: var(--border-strong);
  flex: none;
}

.nav__list { display: flex; align-items: center; gap: 0.15rem; }

.nav__link {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 100px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }

.nav__link.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 15px;
  height: 1.5px;
  margin: 3.5px auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------
   7. Hero de portada
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(9rem, 17vw, 13rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  text-align: center;
}

/* Imagen de fondo del hero.
   mix-blend-mode: screen hace que el negro del archivo desaparezca y solo
   quede el trazo de luz, así funde con el fondo sin costura visible.
   La máscara la desvanece por arriba y por abajo. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  mix-blend-mode: screen;
  opacity: 0.78;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 97%);
}

/* Velo oscuro sobre la zona del titular, para que el trazo de luz
   nunca reste contraste al texto. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 46% at 50% 33%, rgba(18, 20, 28, 0.8), transparent 74%);
}

.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  max-width: 20ch;
  margin-bottom: 1.6rem;
}

.hero__subtitle {
  max-width: 60ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 2.2rem;
}

.hero__tagline {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.hero__panel {
  width: 100%;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r-xl);
}

/* Diagrama de flujo */
.flowchart { display: flex; align-items: stretch; justify-content: center; gap: 0.5rem; }

.flowchart__node {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform var(--t-med), border-color var(--t-med), background-color var(--t-med);
}
.flowchart__node:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.flowchart__node--core {
  border-color: rgba(99, 102, 241, 0.4);
  background: linear-gradient(180deg, rgba(55, 138, 221, 0.14), rgba(139, 92, 246, 0.08));
  box-shadow: 0 0 44px -12px rgba(99, 102, 241, 0.55);
}

.flowchart__icon {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.35rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flowchart__label { font-size: var(--fs-sm); font-weight: 500; }
.flowchart__sub { font-size: var(--fs-xs); color: var(--text-faint); }

.flowchart__link {
  align-self: center;
  flex: 0 1 70px;
  height: 1px;
  position: relative;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.flowchart__link i {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 12px var(--blue-bright);
  animation: flowDot 2.6s var(--ease) infinite;
}
.flowchart__link:nth-of-type(4) i { animation-delay: 1.3s; }

@keyframes flowDot {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ------------------------------------------------------------
   8. Cabecera de páginas interiores
   ------------------------------------------------------------ */
.page-hero {
  padding-top: clamp(8.5rem, 15vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.page-hero__title {
  font-size: var(--fs-h1);
  max-width: 20ch;
  margin: 0 auto 1.35rem;
}

.page-hero__lead {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

/* ------------------------------------------------------------
   9. Barra de integraciones
   ------------------------------------------------------------ */
.logos-bar {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.logos-bar__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}

.logos-bar__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.4rem; }
.logos-bar__list li {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.75;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.logos-bar__list li:hover { opacity: 1; color: var(--text); }

/* ------------------------------------------------------------
   10. Problema / valor
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

.pain-list {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pain-list--good { border-color: rgba(99, 102, 241, 0.28); }

.pain-list__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; color: var(--text-faint); }
.pain-list--good .pain-list__title {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pain-list li {
  position: relative;
  padding-left: 1.9rem;
  padding-block: 0.65rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.pain-list li:first-child { border-top: 0; padding-top: 0; }

.pain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}
.pain-list li:first-child::before { top: 0.6rem; }

.pain-list--good li { color: var(--text); }
.pain-list--good li::before {
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.5) inset;
}

/* Diferenciadores */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pillar { padding: clamp(1.6rem, 2.6vw, 2.1rem); }
.pillar__num {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillar__title { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.pillar__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.62; }

/* ------------------------------------------------------------
   11. Servicios
   ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  overflow: hidden;
  transition: transform var(--t-med), border-color var(--t-med);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 102, 241, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.card:hover::after { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.35rem;
  border-radius: 14px;
  color: var(--blue-bright);
  background: linear-gradient(150deg, rgba(55, 138, 221, 0.2), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.card__icon svg { width: 22px; height: 22px; }

.card__title { font-size: var(--fs-h3); margin-bottom: 0.75rem; }

.card__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.62;
  margin-bottom: 1.5rem;
}

.card__list {
  margin-bottom: 1.5rem;
  display: grid;
  gap: 0.55rem;
}
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 4.5px;
  border-left: 1.5px solid var(--blue-bright);
  border-bottom: 1.5px solid var(--blue-bright);
  transform: rotate(-45deg);
}

.card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.card__meta li {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 100px;
}

/* ------------------------------------------------------------
   12. Proceso
   ------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.step { position: relative; padding-top: 2.25rem; border-top: 1px solid var(--border); }

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.step.is-visible::before { transform: scaleX(1); }

.step__num {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step__title { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.step__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.62; margin-bottom: 1.1rem; }

.step__time {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 100px;
}

/* Preguntas frecuentes */
.faq { display: grid; gap: 0.75rem; max-width: 820px; }
.faq__item { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.faq__q { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.faq__a { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.62; }

/* ------------------------------------------------------------
   13. Resultados
   ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

.stat {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  text-align: center;
  transition: transform var(--t-med), border-color var(--t-med);
}
.stat:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.stat__value {
  display: block;
  font-size: clamp(2.25rem, 4.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }

.stats__note {
  margin-top: 1.25rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  transition: transform var(--t-med), border-color var(--t-med);
}
.quote:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.quote blockquote { margin: 0; font-size: var(--fs-sm); line-height: 1.68; color: var(--text-muted); }
.quote blockquote::before {
  content: "“";
  display: block;
  font-size: 2.6rem;
  line-height: 0.6;
  margin-bottom: 0.9rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(55, 138, 221, 0.28), rgba(139, 92, 246, 0.2));
  border: 1px solid var(--border);
  color: var(--text-faint);
}

.quote figcaption strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
.quote figcaption em { display: block; font-size: var(--fs-xs); font-style: normal; color: var(--text-faint); }

/* ------------------------------------------------------------
   14. CTA final y formulario
   ------------------------------------------------------------ */
.cta-band {
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(55, 138, 221, 0.16), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band__title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: 1rem; }
.cta-band__text {
  max-width: 56ch;
  margin: 0 auto 2rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }

.cta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, rgba(55, 138, 221, 0.16), transparent 62%);
  pointer-events: none;
}

.cta__copy { position: relative; }
.cta__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.1rem; }
.cta__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; margin-bottom: 1.75rem; }

.cta__points li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cta__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--blue-bright);
  border-bottom: 1.5px solid var(--blue-bright);
  transform: rotate(-45deg);
}

.cta__aside {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cta__aside a { color: var(--blue-bright); }

.form { position: relative; display: flex; flex-direction: column; gap: 1rem; }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.field__optional { color: var(--text-faint); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}

.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--bg-deep); color: var(--text); }

.field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(244, 246, 251, 0.3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(55, 138, 221, 0.6);
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.16);
}

.field.has-error input,
.field.has-error textarea { border-color: rgba(248, 113, 113, 0.65); }

.field__error {
  font-size: 0.75rem;
  color: #f8a3a3;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.field.has-error .field__error { opacity: 1; }

.field--check { gap: 0.35rem; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox__box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.checkbox input:checked + .checkbox__box { background: var(--gradient); border-color: transparent; }
.checkbox input:checked + .checkbox__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.checkbox a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }

.form__status {
  min-height: 1.2em;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}
.form__status.is-ok { color: #86e2b4; }
.form__status.is-error { color: #f8a3a3; }

/* ------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------ */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid var(--border);
  background: rgba(12, 14, 20, 0.92);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
}

.footer__brand .logo { margin-bottom: 1rem; }

.footer__tagline {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.footer__desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 34ch; line-height: 1.6; }

.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; }

.footer__col h3 {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}

.footer__col li { margin-bottom: 0.65rem; }
.footer__col a { font-size: var(--fs-sm); color: var(--text-muted); }
.footer__col a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.social { display: flex; gap: 0.5rem; }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast),
              background-color var(--t-fast), transform var(--t-fast);
}
.social a:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.social svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------
   16. Animaciones de scroll
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--delay, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   17. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1020px) {
  .nav__link { padding-inline: 0.65rem; font-size: var(--fs-xs); }
}

@media (max-width: 980px) {
  .cta { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 78px; }

  .header { padding-inline: var(--gutter); }
  .header__bar { width: 100%; justify-content: space-between; padding-right: 0.45rem; }
  .header__divider, .header__cta { display: none; }
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    padding: 0.5rem;
    border-radius: var(--r-lg);
    background: rgba(18, 20, 28, 0.9);
    border: 1px solid var(--border-strong);
    backdrop-filter: saturate(170%) blur(10px);
    -webkit-backdrop-filter: saturate(170%) blur(10px);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav__link { padding: 0.85rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }

  .flowchart { flex-direction: column; }
  .flowchart__link {
    width: 1px;
    height: 34px;
    flex: none;
    background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
  }
  .flowchart__link i { display: none; }

  .hide-mobile { display: none; }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .hero__actions, .page-hero__actions, .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero__actions .btn, .page-hero__actions .btn, .cta-band__actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .step::before { transform: scaleX(1); }
}

/* ============================================================
   18. Mockups de producto (chat y escenario de automatización)
   Bloque autónomo: incluye sus propias reglas responsive.
   ============================================================ */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.showcase + .showcase { margin-top: clamp(3.5rem, 7vw, 6rem); }

.showcase__title { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.showcase__text {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.showcase__list { display: grid; gap: 0.7rem; }
.showcase__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.showcase__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--blue-bright);
  border-bottom: 1.5px solid var(--blue-bright);
  transform: rotate(-45deg);
}

/* ---------- Mockup de conversación ---------- */
.chat {
  padding: 1.1rem;
  border-radius: var(--r-xl);
  max-width: 440px;
  margin-inline: auto;
  width: 100%;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

.chat__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.chat__name { display: block; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
.chat__status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}
.chat__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}

.chat__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 0.5rem 0.5rem;
}

.msg {
  max-width: 82%;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.msg--in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}

.msg--out {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 92, 246, 0.85));
  border-bottom-right-radius: 5px;
  color: #fff;
}

.msg__time {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.65rem;
  opacity: 0.6;
  text-align: right;
}

.chat__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
}
.chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: typing 1.4s var(--ease) infinite;
}
.chat__typing i:nth-child(2) { animation-delay: 0.2s; }
.chat__typing i:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.chat__note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.9rem 0.5rem 0.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed rgba(99, 102, 241, 0.4);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(99, 102, 241, 0.06);
}
.chat__note strong { color: var(--text); font-weight: 500; }

/* ---------- Mockup de escenario de automatización ---------- */
.scenario {
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border-radius: var(--r-xl);
  display: grid;
  gap: 0.55rem;
}

.node {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.node__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}

.node__label { display: block; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
.node__sub { display: block; font-size: 0.75rem; color: var(--text-faint); }

.node--ai {
  border-color: rgba(99, 102, 241, 0.45);
  background: linear-gradient(120deg, rgba(55, 138, 221, 0.14), rgba(139, 92, 246, 0.1));
  box-shadow: 0 0 34px -14px rgba(99, 102, 241, 0.7);
}
.node--ai .node__icon {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
}

.node__tag {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 100px;
  white-space: nowrap;
}

.connector {
  height: 18px;
  margin-left: 1.6rem;
  border-left: 1px dashed var(--border-strong);
}

.branch {
  display: grid;
  gap: 0.55rem;
  margin-left: 1.6rem;
  padding-left: 1.4rem;
  border-left: 1px dashed var(--border-strong);
}
.branch .node { position: relative; }
.branch .node::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 50%;
  width: 1.4rem;
  height: 1px;
  border-top: 1px dashed var(--border-strong);
}

.branch__label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: -0.2rem;
}

.showcase--reverse .showcase__copy { order: 2; }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase--reverse .showcase__copy { order: 0; }
}

/* ---------- Marco para capturas de producto ---------- */
.shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
  background: var(--bg-deep);
}
.shot img { width: 100%; height: auto; display: block; }

/* El pantallazo del móvil no debe dominar la composición */
.shot--phone {
  max-width: 300px;
  margin-inline: auto;
  border-radius: 30px;
}

/* ============================================================
   19. Páginas legales (texto largo)
   ============================================================ */
.legal { max-width: 78ch; margin-inline: auto; }
.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: var(--fs-h3); margin-top: 1.75rem; margin-bottom: 0.6rem; }
.legal p, .legal li { color: var(--text-muted); line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.25rem; display: grid; gap: 0.5rem; }
.legal ul li { position: relative; padding-left: 1.4rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}
.legal a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--text); font-weight: 500; }
.legal__meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--border);
}
.legal__pending {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  background: rgba(248, 113, 113, 0.14);
  border: 1px dashed rgba(248, 113, 113, 0.5);
  color: #f8a3a3;
  font-size: 0.85em;
}
.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}
.legal__table th, .legal__table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}
.legal__table th { color: var(--text); font-weight: 500; background: rgba(255, 255, 255, 0.03); }

/* ============================================================
   20. Rendimiento

   El desenfoque de fondo (backdrop-filter) es caro, sobre todo
   en Windows. Lo reservamos para las piezas grandes y señaladas
   (cabecera, panel del hero, bloques de CTA) y lo quitamos de
   las tarjetas pequeñas, que son muchas por página. A cambio
   llevan un fondo algo más sólido y se ven prácticamente igual.
   ============================================================ */
.card, .quote, .stat, .faq__item, .pillar, .shot {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.045);
}
.shot { background: var(--bg-deep); }

/* Aísla el repintado de las tarjetas al pasar el cursor */
.card { contain: paint; }

/* ============================================================
   21. Modo ligero  —  añade ?ligero=1 a la URL

   Desactiva de golpe todos los efectos que cuestan GPU. Sirve
   para comprobar en un equipo concreto si el scroll pesado viene
   de aquí: si con ?ligero=1 va fino y sin el parámetro no, el
   culpable está en esta lista.
   ============================================================ */
html.modo-ligero .bg__noise,
html.modo-ligero .bg__grid,
html.modo-ligero .bg__orb { display: none; }

html.modo-ligero .glass,
html.modo-ligero .post-item,
html.modo-ligero .lead-post,
html.modo-ligero .lead-post__badge,
html.modo-ligero .blog-toolbar,
html.modo-ligero .aside-card,
html.modo-ligero .header__bar,
html.modo-ligero .footer,
html.modo-ligero .btn--ghost,
html.modo-ligero .nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(24, 27, 38, 0.92);
}

html.modo-ligero .hero__bg img {
  mix-blend-mode: normal;
  opacity: 0.55;
}

html.modo-ligero .card::after,
html.modo-ligero .post-item::after,
html.modo-ligero .lead-post::after { display: none; }

/* La barra de filtros deja de perseguir al lector: pegarla obliga
   a recomponer capas en cada fotograma del scroll. */
html.modo-ligero .blog-toolbar { position: static; }

/* ============================================================
   22. Coste por fotograma durante el scroll

   backdrop-filter obliga al navegador a volver a muestrear lo
   que hay detrás en CADA fotograma. En una cabecera fija eso
   ocurre durante todo el scroll. Al desplazarse, el fondo de la
   isla ya es casi opaco, así que el desenfoque no se aprecia:
   lo mantenemos solo arriba del todo, sobre el hero, que es
   donde el efecto cristal sí se ve.
   ============================================================ */
.header.is-scrolled .header__bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(18, 20, 28, 0.94);
}

/* Aviso temporal en páginas legales mientras faltan datos registrales */
.legal__actualizando {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
}

/* ============================================================
   23. Blog

   Dos piezas: el índice (/blog) con una rejilla de tarjetas y
   el artículo (/blog/...) con una columna de texto estrecha.
   Las tarjetas reutilizan el patrón de .card, así que heredan
   el ahorro de backdrop-filter de la sección 20.
   ============================================================ */

/* --- Índice: cabecera editorial --------------------------- */
.blog-head { padding-top: clamp(8rem, 14vw, 10.5rem); padding-bottom: 0; }

.blog-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}
.blog-head__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gradient);
  flex: none;
}

.blog-head__title {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: 1.4rem;
}
.blog-head__lead {
  max-width: 54ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Tres datos sueltos bajo la entradilla: dan idea del tamaño del
   archivo sin obligar a bajar a contarlo. */
.blog-head__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.75rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.blog-head__stats li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.blog-head__stats strong {
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.blog-head__stats li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
}

.blog-head__rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
}

/* La cabecera ya deja aire con su línea divisoria: la sección de
   artículos arranca antes para que no quede un hueco muerto. */
.section--posts { padding-top: clamp(2rem, 3.4vw, 3rem); }

/* --- Barra de búsqueda y filtro ---------------------------- */
/* Panel de cristal que agrupa buscador, categorías y recuento.
   Se queda en su sitio: al fijarla durante el scroll pisaba el
   artículo destacado y las primeras tarjetas. */
.blog-toolbar {
  display: grid;
  gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.15rem);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(18, 20, 28, 0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.blog-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  /* Sin esto, un hijo que no parte fija el ancho del contenedor
     y desborda la página en pantallas estrechas */
  min-width: 0;
}

/* Buscador */
.blog-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}
.blog-search__icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.blog-search input {
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 2.6rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.blog-search input::placeholder { color: rgba(244, 246, 251, 0.32); }
.blog-search input:focus {
  outline: none;
  border-color: rgba(79, 157, 238, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.blog-search input:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
/* La X nativa de Safari/Chrome se sustituye por nuestro botón */
.blog-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.blog-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.blog-search__clear svg { width: 13px; height: 13px; }
.blog-search__clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.blog-search__clear[hidden] { display: none; }

/* Recuento de resultados */
.blog-count {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}
.blog-count strong { color: var(--text); font-weight: 500; }

/* --- Filtro de categorías --------------------------------- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.fchip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.fchip span { font-size: 0.72em; color: var(--text-faint); }
.fchip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.fchip.is-on {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.fchip.is-on span { color: rgba(255, 255, 255, 0.75); }

/* En móvil las categorías se deslizan en una sola fila en lugar
   de apilarse y comerse media pantalla. */
@media (max-width: 620px) {
  .blog-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(clamp(0.9rem, 1.8vw, 1.15rem) * -1);
    padding-inline: clamp(0.9rem, 1.8vw, 1.15rem);
    scroll-snap-type: x proximity;
  }
  .blog-filter::-webkit-scrollbar { display: none; }
  .fchip { scroll-snap-align: start; }
}

.blog-empty {
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
}
.blog-empty__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}
.blog-empty__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0 auto 1.4rem;
}

/* --- Fila de etiqueta y fecha, común a destacado y tarjeta -- */
.pmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
}
.pmeta__cat {
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(79, 157, 238, 0.32);
  border-radius: 100px;
  background: rgba(55, 138, 221, 0.12);
  color: var(--blue-bright);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pmeta__date { font-size: var(--fs-xs); color: var(--text-faint); }

/* --- Destacado -------------------------------------------- */
.lead-post {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  color: inherit;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.lead-post:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 64px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lead-post[hidden] { display: none; }

.lead-post__media { position: relative; overflow: hidden; background: var(--bg-deep); }
.lead-post__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Mismo encuadre que las ilustraciones: si se pide 16/10 el
     recorte se come el aire lateral que necesita el icono */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.lead-post:hover .lead-post__media img { transform: scale(1.03); }

/* Distintivo sobre la imagen del destacado */
.lead-post__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  background: rgba(12, 14, 20, 0.62);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.lead-post__badge svg { width: 12px; height: 12px; color: var(--blue-bright); }

.lead-post__body { padding: clamp(1.5rem, 3vw, 2.75rem); align-self: center; }
.lead-post__title {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.lead-post__ex {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.68;
  max-width: 52ch;
  margin-bottom: 1.4rem;
}

.readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-bright);
}
.readmore svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.lead-post:hover .readmore svg,
.post-item:hover .readmore svg { transform: translateX(5px); }

@media (min-width: 900px) {
  .lead-post { grid-template-columns: 1.05fr 1fr; }
  .lead-post__media img { height: 100%; aspect-ratio: auto; min-height: 380px; }
}

/* --- Estructura del índice: columna principal + barra lateral --- */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 1040px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr) 306px; }
}

.blog-main { min-width: 0; }

/* Subtítulo que separa el destacado del resto del archivo. Va a
   ancho completo, fuera de .blog-layout, para que la rejilla y la
   barra lateral arranquen a la misma altura. */
.blog-main__label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 1.25rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.blog-main__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
/* display:flex gana al hidden del navegador si no se dice esto */
.blog-main__label[hidden] { display: none; }

/* --- Rejilla de artículos --------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
  align-items: start;
}

.post-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  color: inherit;
  transition: transform var(--t-med), border-color var(--t-fast), box-shadow var(--t-med);
}
.post-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 62px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.post-item[hidden] { display: none; }
.post-item:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

.post-item__media { overflow: hidden; background: var(--bg-deep); }
.post-item__media img {
  display: block;
  width: 100%;
  /* Sin esto, el atributo height="450" del <img> fija la altura y
     anula el aspect-ratio */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.post-item:hover .post-item__media img { transform: scale(1.045); }

.post-item__body { padding: clamp(1.25rem, 2.2vw, 1.6rem); }

.post-item__title {
  font-size: 1.075rem;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.6rem;
  transition: color var(--t-fast);
}
.post-item:hover .post-item__title { color: #fff; }

.post-item__ex {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Brillo que sigue al cursor, el mismo de .card. Las coordenadas
   las escribe main.js; sin JavaScript la tarjeta se queda quieta
   y no pierde nada. */
.post-item::after,
.lead-post::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 102, 241, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.post-item:hover::after,
.lead-post:hover::after { opacity: 1; }

.post-item, .lead-post { position: relative; }
.lead-post__media, .post-item__media { position: relative; }

/* --- Cargar más ------------------------------------------- */
/* El HTML trae los diez artículos, así que Google los ve todos.
   Esto solo decide cuántos se muestran de entrada. */
.blog-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.blog-more[hidden] { display: none; }

/* --- Barra lateral ---------------------------------------- */
.blog-aside {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  min-width: 0;
}

/* La columna se queda en su sitio y baja con la página, igual
   que la barra de filtros. */

/* Debajo de 1040px la barra pasa a ser una fila de bloques */
@media (max-width: 1039px) and (min-width: 700px) {
  .blog-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside-card--cta { grid-column: 1 / -1; }
}

.aside-card {
  position: relative;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.aside-card__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aside-card__title svg { width: 14px; height: 14px; color: var(--blue-bright); flex: none; }

/* Lista de categorías */
.aside-cats { display: grid; gap: 0.15rem; }
.aside-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.aside-cats button:hover { color: var(--text); background: var(--surface-hover); }
.aside-cats button.is-on { color: var(--text); background: rgba(55, 138, 221, 0.12); }
.aside-cats em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.aside-cats button.is-on em { color: var(--blue-bright); }

/* Artículos recomendados */
.aside-picks { display: grid; gap: 0.9rem; }
.aside-picks a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  transition: color var(--t-fast);
}
.aside-picks a:hover { color: var(--text); }
.aside-picks span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(79, 157, 238, 0.3);
  background: rgba(55, 138, 221, 0.12);
  color: var(--blue-bright);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* Bloque de llamada a la acción */
.aside-card--cta::before {
  content: "";
  position: absolute;
  top: -70%;
  left: 50%;
  width: 130%;
  height: 180%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 62%);
  pointer-events: none;
}
.aside-card--cta > * { position: relative; }
.aside-cta__title {
  font-size: 1.075rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}
.aside-cta__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.aside-cta__note {
  margin-top: 0.85rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}


/* Portada del artículo, algo más ancha que la columna de texto */
.post-cover {
  max-width: 860px;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.post-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Artículo ------------------------------------------- */
.post-hero { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.post-hero__title { max-width: 24ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--text-faint); }
.breadcrumb li { display: inline-flex; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Cuerpo del artículo: parte del estilo de .legal y añade
   sumario, destacados y bloques de ejemplo. */
.post { max-width: 72ch; margin-inline: auto; }
.post > *:first-child { margin-top: 0; }
.post h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.post h3 {
  font-size: var(--fs-h3);
  margin-top: 2rem;
  margin-bottom: 0.65rem;
}
.post p, .post li { color: var(--text-muted); line-height: 1.78; }
.post p { margin-bottom: 1.15rem; }
.post ul, .post ol { margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.post ul li { position: relative; padding-left: 1.4rem; }
.post ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}
.post ol { counter-reset: paso; }
.post ol li { position: relative; padding-left: 2.1rem; counter-increment: paso; }
.post ol li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(55, 138, 221, 0.14);
  border: 1px solid rgba(79, 157, 238, 0.3);
  color: var(--blue-bright);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.post a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.post strong { color: var(--text); font-weight: 500; }

/* Sumario de contenidos */
.toc {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
}
.toc__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.85rem;
}
.toc ol { margin: 0; gap: 0.45rem; }
.toc ol li { padding-left: 1.9rem; }
.toc ol li::before { top: 0; width: 1.35rem; height: 1.35rem; }
.toc a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Idea a destacar dentro del texto */
.callout {
  padding: 1.15rem 1.4rem;
  margin: 0 0 1.75rem;
  border-left: 2px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(55, 138, 221, 0.07);
}
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: var(--fs-sm); }

/* Ejemplo de flujo paso a paso */
.flow-example {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-deep);
  font-size: var(--fs-sm);
}
.flow-example__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}
.flow-example ol { margin: 0; }
.flow-example li { color: var(--text-muted); }

/* Pie del artículo */
.post-footer {
  max-width: 72ch;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.post-footer__title {
  font-size: var(--fs-h3);
  margin-bottom: 1.1rem;
}
.post-related { display: grid; gap: 0.75rem; }
.post-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.post-related a:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}
.post-related svg { width: 15px; height: 15px; flex: none; color: var(--blue-bright); }

@media (max-width: 1100px) {
  .nav__link { padding-inline: 0.6rem; }
}

/* Enlace al índice desde el pie del artículo */
.post-footer__all { margin-top: 1.25rem; }
.post-footer__all .link-arrow svg { width: 15px; height: 15px; }