/* ============================================================
   ESTILOS — BIntel Group
   Depende de tokens.css (cárgalo ANTES que este archivo).
   ============================================================ */

/* — BASE — */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); line-height:var(--leading-tight); margin:0; letter-spacing:var(--tracking-tight); font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:var(--maxw-text); }

/* Oculto a la vista, pero disponible para lectores de pantalla.
   Se usa en el nombre de marca: se escribe "BIntel" (alusión a Business
   Intelligence) pero se anuncia "Bintel", para que no se deletree "B-I-ntel". */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Saltar al contenido · primer elemento enfocable de cada página.
   Fuera de pantalla hasta recibir foco; entonces baja a la vista. No se oculta
   con display:none ni visibility:hidden porque eso lo haría inenfocable, que es
   justo lo contrario de lo que se busca (WCAG 2.4.1). */
.skip-link{
  position:fixed; top:0; left:var(--space-2); z-index:100;
  transform:translateY(-120%);
  background:var(--accent-strong); color:var(--on-dark);
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
  padding:var(--space-1) var(--space-2);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  transition:transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* <picture> es el elemento que entra en el flex/grid, no el <img> de dentro.
   Sin esto, .brand__mark y .person__avatar siguen midiendo bien pero el que se
   coloca en el layout es el <picture>, que por defecto es inline y arrastra el
   espacio del renglón. Se le pasa el comportamiento de bloque del hijo. */
picture{ display:flex; flex:0 0 auto; }
/* El nombre no debe partirse entre dos renglones. */
.brandword{ white-space:nowrap; }

/* — NAV — */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper-blur);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:var(--space-4); }
/* min-height 44px: es el área táctil mínima cómoda para un dedo (WCAG 2.5.5 /
   guía de Apple). El logo mide 38px, así que sin esto el enlace de "volver al
   inicio" quedaba por debajo del umbral en móvil. */
.brand{ display:flex; align-items:center; gap:.7rem; min-height:44px; font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:-.01em; }
/* Logo: el archivo ya trae su propia caja navy con esquinas redondeadas,
   así que NO se le dibuja una caja en CSS (quedarían dos encimadas). */
.brand__mark{ width:38px; height:38px; flex:0 0 auto; }
/* Bicolor del wordmark: "BIntel" navy + "Group" azul, igual que el logo. */
.brand__name-1{ color:var(--ink); }
.brand__name-2{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:var(--space-4); }
.nav__links a{ color:var(--muted); font-weight:500; font-size:.975rem; transition:color var(--dur-fast) ease; }
.nav__links a:hover{ color:var(--ink); }
/* Página actual: aria-current="page" es la fuente de verdad (lo anuncian los
   lectores de pantalla); el color y el subrayado solo lo hacen visible. */
.nav__links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav__links a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:4px;
  background:var(--accent); border-radius:2px;
}
.nav__cta{ display:inline-flex; align-items:center; }
/* El CTA que vive dentro del menú es exclusivo de móvil (ver breakpoint). */
.nav__links .btn{ display:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.975rem;
  padding:.72rem 1.4rem; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur-fast) ease, transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
/* Lleva texto blanco encima → --accent-strong (4.58:1). Ver regla en tokens.css. */
.btn--primary{ background:var(--accent-strong); color:var(--on-dark); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
/* Botón fantasma sobre fondo navy: el borde y el texto se invierten. */
.btn--on-dark{ color:var(--on-dark); border-color:var(--on-dark-line); }
.btn--on-dark:hover{ border-color:var(--on-dark); }
.btn--light{ background:var(--surface); color:var(--navy-deep); }
.btn--light:hover{ transform:translateY(-1px); }

.nav__toggle{ display:none; }

/* — HERO — */
.hero{ padding-top:clamp(4rem,10vw,7rem); padding-bottom:clamp(3.5rem,8vw,6rem); }
/* Texto pequeño en azul sobre fondo claro → --accent-strong (4.52:1). */
.hero__eyebrow{ color:var(--accent-strong); font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:var(--space-3); }
.hero h1{ font-size:var(--text-h1); font-weight:800; max-width:16ch; margin-bottom:var(--space-4); }
/* Texto grande (>60px): el mínimo es 3:1 y el azul de marca da 3.59:1.
   Aquí SÍ se usa --accent puro — es el golpe de color de la marca. */
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero__lead{ font-size:var(--text-lg); color:var(--muted); max-width:54ch; margin-bottom:var(--space-6); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.hero__note{ margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--space-6); color:var(--muted); font-size:var(--text-sm); }
.hero__note strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:1.6rem; font-weight:700; letter-spacing:var(--tracking-tight); }

/* — SECCIÓN genérica — */
.section{ padding-block:var(--section-y); }
.section__head{ max-width:60ch; margin-bottom:var(--space-8); }
.section__kicker{ color:var(--accent-strong); font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:var(--space-2); }
/* h1 y h2 comparten tamaño: el nivel semántico lo decide la página (una sola
   h1 por documento), no la apariencia. */
.section__head h1, .section__head h2{ font-size:var(--text-h2); }
/* Párrafo de entrada bajo el título de una sección. */
.lede{ color:var(--muted); font-size:var(--text-lg); margin-top:var(--space-3); max-width:58ch; }

/* Enlace dentro de texto corrido. Subrayado discreto que se afirma al pasar:
   el color por sí solo no basta para señalar un enlace (WCAG 1.4.1). */
.link{
  color:var(--accent-strong); font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--accent-strong) 35%, transparent);
  transition:text-decoration-color var(--dur-fast) ease;
}
.link:hover{ text-decoration-color:currentColor; }

/* — ESTADO VACÍO (Casos sin publicar, 404) — */
.empty{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:clamp(2rem,5vw,var(--space-8)); max-width:64ch;
}
.empty h1, .empty h3{ font-size:var(--text-h3); margin-bottom:var(--space-2); }
.empty p{ color:var(--muted); }
.empty p + p{ margin-top:var(--space-2); }
.empty__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }

/* — OFERTA DE ENTRADA (cierre de la Home) —
   Sobre navy, como el bloque de contacto, pero alineado a la izquierda y con
   dos columnas: el texto pesa más que la lista de lo que incluye. */
.offer{
  background:var(--navy); color:var(--on-dark); border-radius:var(--radius);
  padding:clamp(2rem,5vw,var(--space-8));
  /* 1.4fr en la primera columna: con 1.2fr los dos botones no cabían a lo
     ancho y se apilaban aun habiendo espacio libre en la tarjeta. */
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); align-items:start;
}
.offer h2{ color:var(--on-dark); font-size:var(--text-h2); }
.offer .section__kicker{ color:var(--accent-soft); }
.offer__lead{ color:var(--on-dark-muted); margin-top:var(--space-3); max-width:46ch; }
.offer__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }
.offer__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-3); }
.offer__list li{ color:var(--on-dark-muted); font-size:var(--text-sm); padding-left:1.6rem; position:relative; }
/* La palomita es decorativa: se dibuja en CSS para no meter un icono por ítem. */
.offer__list li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:.6rem; height:.3rem; border-left:2px solid var(--accent-soft);
  border-bottom:2px solid var(--accent-soft); transform:rotate(-45deg);
}
.offer__note{ color:var(--on-dark-muted); font-size:var(--text-xs); margin-top:var(--space-4); max-width:58ch; }

/* — SERVICIO A DETALLE (página de Servicios) —
   Cada bloque es una unidad de decisión: para quién es, qué se entrega, en
   cuánto tiempo y con qué herramientas. */
.svc{ border-top:1px solid var(--line); padding-block:var(--space-8); }
.svc:last-of-type{ border-bottom:1px solid var(--line); }
.svc__head{ display:grid; grid-template-columns:1fr 1.3fr; gap:var(--space-6); align-items:start; }
.svc__title h1, .svc__title h2{ font-size:var(--text-h2); }
.svc__kicker{ color:var(--accent-strong); font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:var(--space-2); }
.svc__pitch{ color:var(--muted); font-size:var(--text-lg); max-width:52ch; }
.svc__for{ margin-top:var(--space-3); color:var(--ink); font-weight:500; max-width:52ch; }

/* Las tres columnas de detalle: entregables, plazo y herramientas. */
.svc__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-6);
  margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--line);
}
.svc__block h3{ font-size:.95rem; margin-bottom:var(--space-3); color:var(--ink); }
.svc__list{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.svc__list li{ color:var(--muted); font-size:var(--text-sm); padding-left:1.4rem; position:relative; }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.55rem; height:.28rem; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}
.svc__time{ color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:var(--tracking-tight); }
.svc__time-note{ color:var(--muted); font-size:var(--text-sm); margin-top:.4rem; }
.svc__tools{ display:flex; flex-wrap:wrap; gap:.5rem; }
.svc__tools span{
  font-size:.85rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); padding:.3rem .7rem; border-radius:var(--radius-pill);
}
/* Cómo se ve el resultado: cierra el bloque con el "antes / después". */
.svc__outcome{
  margin-top:var(--space-6); padding:var(--space-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:baseline;
}
.svc__outcome dt{ color:var(--muted); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.svc__outcome dd{ margin:0; color:var(--ink); max-width:58ch; }

/* — PÁGINAS LEGALES (lectura larga) —
   Las secciones son h2 porque son de primer nivel dentro del documento (saltar
   de h1 a h3 rompe la jerarquía para un lector de pantalla). El tamaño se fija
   aquí, más chico que un h2 normal: son muchos títulos seguidos en una lectura
   larga y a tamaño completo competirían con el h1 de la página. */
.legal h2{ font-size:1.2rem; margin-top:var(--space-6); margin-bottom:var(--space-2); }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--muted); }
.legal p + p{ margin-top:var(--space-2); }
.legal strong{ color:var(--ink); }

/* — CONTACTO · tarjetas por canal — */
/* — SEÑALES (el problema que el lector reconoce) —
   Va inmediatamente después del hero, así que comparte su respiración: el
   padding superior se reduce para que se lea como continuación, no como
   sección nueva. */
.signals{ padding-top:0; }
.signals__head{ max-width:52ch; margin-bottom:var(--space-6); }
.signals__head h2{ font-size:var(--text-h2); }
.signals__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);
  border-top:1px solid var(--line); padding-top:var(--space-6);
}
.signal p{ color:var(--muted); }
.signal strong{
  display:block; color:var(--ink); font-family:var(--font-display);
  font-size:1.15rem; font-weight:700; line-height:1.25;
  letter-spacing:var(--tracking-tight); margin-bottom:.6rem;
}
.signals__foot{ margin-top:var(--space-6); color:var(--ink); font-size:var(--text-lg); max-width:54ch; }
/* Señales y Servicios son un mismo hilo argumental (problema → solución):
   se recorta el espacio entre ambas para que no se lean como bloques sueltos. */
.signals + .section{ padding-top:var(--space-6); }

/* — SERVICIOS (filas con divisor) — */
.services{ border-top:1px solid var(--line); }
.service{ display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-6); padding-block:var(--space-6); border-bottom:1px solid var(--line); }
.service h3{ font-size:var(--text-h3); }
.service h3 .idx{ color:var(--accent-strong); font-size:1rem; font-weight:600; display:block; margin-bottom:.6rem; }
/* Línea corta bajo el título: llena la columna izquierda, que antes quedaba
   con un hueco grande, y dice a quién le sirve ese servicio. */
.service__who{ color:var(--muted); font-size:var(--text-sm); margin-top:var(--space-2); max-width:26ch; }
/* Tope propio: sin él, en pantallas anchas el párrafo llegaba a ~110
   caracteres por línea y costaba seguir el renglón. */
.service p{ color:var(--muted); max-width:62ch; }
.service ul{ list-style:none; padding:0; margin:var(--space-3) 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.service li{ font-size:.9rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:.35rem .8rem; border-radius:var(--radius-pill); }

/* — ENFOQUE (proceso = secuencia real) — */
.enfoque{ background:var(--navy); color:var(--on-dark); border-radius:var(--radius); padding:clamp(2rem,5vw,var(--space-8)); }
/* Sobre navy: el azul de marca se apaga (3.3:1). Se usa el azul claro
   de la paleta, que da 5.5:1 sobre navy-700. */
.enfoque .section__kicker{ color:var(--accent-soft); }
.enfoque h2{ color:var(--on-dark); font-size:var(--text-h2); }
.enfoque__lead{ color:var(--on-dark-muted); max-width:52ch; margin-top:var(--space-3); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-8); }
.step{ padding-top:var(--space-3); border-top:2px solid var(--on-dark-line); }
.step__n{ font-family:var(--font-display); font-weight:700; color:var(--accent-soft); font-size:1.05rem; margin-bottom:.5rem; }
.step h3{ font-size:1.15rem; color:var(--on-dark); margin-bottom:.4rem; }
.step p{ color:var(--on-dark-muted); font-size:var(--text-sm); }

/* — NOSOTROS — */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-8); align-items:start; }
.about p + p{ margin-top:var(--space-3); }
.about .measure{ color:var(--muted); }
.about .measure strong{ color:var(--ink); }
.about__body{ margin-top:var(--space-4); }
.about h1, .about h2{ font-size:var(--text-h2); }
.pillars{ display:grid; gap:var(--space-3); }
.pillar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4); box-shadow:var(--shadow-sm); }
.pillar h3{ font-size:1.1rem; margin-bottom:.4rem; }
.pillar p{ color:var(--muted); font-size:var(--text-sm); }

/* — CONTACTO — */
.contact{ text-align:center; background:var(--navy-deep); color:var(--on-dark); border-radius:var(--radius); padding:clamp(2.5rem,7vw,var(--space-10)); }
.contact h2{ color:var(--on-dark); font-size:clamp(2rem,4vw,3rem); max-width:18ch; margin-inline:auto; }
.contact p{ color:var(--on-dark-muted); max-width:46ch; margin:var(--space-3) auto var(--space-6); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; }

/* — FOOTER — */
.footer{ padding-block:var(--space-8) var(--space-6); border-top:1px solid var(--line); margin-top:var(--space-8); }
/* Cuatro columnas: marca (más ancha) + tres de enlaces. */
.footer__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--space-6); padding-bottom:var(--space-6);
}
.footer__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.footer__tagline{ color:var(--muted); font-size:var(--text-sm); margin-top:var(--space-2); max-width:34ch; }
.footer__col h3{ font-size:.95rem; margin-bottom:var(--space-2); }
.footer__col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
/* El color va en el <li> y no solo en el <a>: la columna mezcla enlaces con
   texto plano (la ciudad) y deben verse iguales. */
.footer__col li{ color:var(--muted); font-size:var(--text-sm); }
.footer__col a{ color:var(--muted); font-size:var(--text-sm); transition:color var(--dur-fast) ease; }
.footer__col a:hover{ color:var(--ink); }
/* Fila legal, separada por una línea fina. */
.footer__bottom{
  border-top:1px solid var(--line); padding-top:var(--space-4);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3);
  align-items:center; color:var(--muted); font-size:var(--text-xs);
}
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:var(--ink); }
/* Redes: el área táctil es de 40px aunque el icono mida 18. */
.footer__social{ display:flex; gap:var(--space-1); margin-top:var(--space-3); }
.footer__social a{
  display:inline-grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--muted);
  transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.footer__social a:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }
.footer__social svg{ width:18px; height:18px; }

/* — REVEAL (una sola entrada al cargar) — */
.reveal{ opacity:0; transform:translateY(14px); animation:rise var(--dur-slow) var(--ease) forwards; }
.reveal.d1{ animation-delay:.08s; } .reveal.d2{ animation-delay:.16s; } .reveal.d3{ animation-delay:.24s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* — QUIÉN ESTÁ DETRÁS (Nosotros) —
   En consultoría no se compra la empresa, se compra a quien tiene enfrente.
   Este bloque pone nombre y trayectoria donde antes había un "nosotros" abstracto. */
.person{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-4);
  align-items:start; padding:var(--space-6);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.person__avatar{
  width:76px; height:76px; border-radius:var(--radius-pill);
  flex:0 0 auto; object-fit:cover;
  /* El fondo de la foto es blanco y la tarjeta también: sin el borde, la
     imagen se funde con la tarjeta y no se percibe como retrato. */
  border:1px solid var(--line);
  background:var(--paper);
}
.person__name{ font-size:1.35rem; margin-bottom:.2rem; }
.person__role{ color:var(--accent-strong); font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); margin-bottom:var(--space-3); }
.person__bio{ color:var(--muted); max-width:58ch; }
.person__bio + .person__bio{ margin-top:var(--space-2); }
.person__bio strong{ color:var(--ink); }

/* — PARA QUIÉN TRABAJAMOS —
   Califica al prospecto: quien se reconoce sigue, quien no se ahorra la llamada. */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.fit__col h3{ font-size:1.1rem; margin-bottom:var(--space-3); }
.fit__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-2); }
.fit__list li{ color:var(--muted); padding-left:1.6rem; position:relative; }
.fit__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.55rem; height:.28rem; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}
/* La columna de "no encajamos" usa una cruz en vez de palomita. */
.fit__list--no li::before{
  width:.6rem; height:.6rem; border:0; top:.45em;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--muted) 44%, var(--muted) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--muted) 44%, var(--muted) 56%, transparent 56%);
  transform:none;
}

/* — CASOS —
   Un caso se lee en este orden: el reto, qué construimos, qué cambió. El
   número grande existe solo cuando hay una cifra real que sostenerlo. */
.case{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:clamp(1.5rem,4vw,var(--space-6)); margin-bottom:var(--space-4);
}
.case__meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--space-3); }
.case__tag{
  font-size:.8rem; color:var(--muted); background:var(--paper);
  border:1px solid var(--line); padding:.25rem .7rem; border-radius:var(--radius-pill);
}
.case__title{ font-size:var(--text-h3); max-width:22ch; margin-bottom:var(--space-3); }
.case__intro{ color:var(--muted); max-width:62ch; }

/* Las tres partes del caso: reto, solución, resultado. */
.case__body{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);
  margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--line);
}
.case__part h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:var(--space-2); }
.case__part p{ color:var(--ink); font-size:var(--text-sm); }
.case__part p + p{ margin-top:var(--space-2); }

/* Dato destacado: solo cuando hay una cifra verificable. */
.case__figure{
  margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:center;
}
.case__number{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,2.8rem);
  color:var(--accent); letter-spacing:var(--tracking-tight); line-height:1; white-space:nowrap;
}
.case__caption{ color:var(--muted); font-size:var(--text-sm); max-width:46ch; }
.case__stack{ margin-top:var(--space-4); display:flex; flex-wrap:wrap; gap:.4rem; }
.case__stack span{ font-size:.8rem; color:var(--muted); }
.case__stack span:not(:last-child)::after{ content:" ·"; }

/* — FORMULARIO —
   Accesible por defecto: labels reales, foco visible, errores anunciados y
   ningún estado que dependa solo del color. */
.form{ display:grid; gap:var(--space-3); max-width:56ch; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); color:var(--ink); }
.field .hint{ color:var(--muted); font-size:var(--text-xs); }
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:var(--text-base); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.7rem .9rem; width:100%;
  transition:border-color var(--dur-fast) ease;
}
.field textarea{ min-height:7rem; resize:vertical; }
.field input:hover, .field textarea:hover, .field select:hover{ border-color:var(--muted); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ border-color:var(--accent-strong); }
/* Campo con error: borde + icono + mensaje. El color por sí solo no basta
   para quien no distingue rojo (WCAG 1.4.1). */
.field[data-error] input, .field[data-error] textarea{ border-color:var(--error); border-width:2px; }
.field__error{ color:var(--error); font-size:var(--text-sm); display:none; align-items:center; gap:.35rem; }
.field[data-error] .field__error{ display:flex; }
.field__error::before{ content:"⚠"; font-size:.9em; }
.form__required{ color:var(--muted); font-size:var(--text-xs); }
/* Honeypot: invisible para personas, tentador para bots. No usa display:none
   porque algunos bots lo detectan. */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-top:var(--space-2); }
.form__status{ font-size:var(--text-sm); }
.form__status[data-state="error"]{ color:var(--error); }
.form__status[data-state="sending"]{ color:var(--muted); }
.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

/* Dos columnas: formulario y canales directos. */
.contact__layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-8); align-items:start; }
.contact__form-title{ font-size:var(--text-h3); margin-bottom:var(--space-2); }
.contact__aside h3{ font-size:1.05rem; margin-bottom:var(--space-2); }
.contact__aside p{ color:var(--muted); font-size:var(--text-sm); }
.contact__channel{ padding-block:var(--space-4); border-top:1px solid var(--line); }
.contact__channel:first-of-type{ border-top:0; padding-top:0; }
.contact__channel .btn{ margin-top:var(--space-3); }

/* — RESPONSIVE — */
@media (max-width:820px){
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:var(--space-3); border-bottom:1px solid var(--line);
    padding:var(--space-4) var(--gutter); display:none;
    /* El nav es translúcido; el panel desplegado NO debe serlo o el contenido
       de atrás se transparenta y el menú se vuelve ilegible. */
    background:var(--surface); box-shadow:var(--shadow-md);
  }
  .nav__links.open{ display:flex; }
  /* Área táctil de 44px en el menú desplegado: los enlaces medían 26px de alto
     y fallar el toque en el menú principal es de lo más frustrante en móvil.
     Se gana con padding, sin mover el diseño. */
  .nav__links a:not(.btn){ display:flex; align-items:center; min-height:44px; width:100%; }
  .nav__links{ gap:0; padding-block:var(--space-2); }
  /* En móvil manda la hamburguesa: el CTA del nav se movería fuera de pantalla.
     Se recupera dentro del menú desplegado (.nav__links .btn). */
  .nav__cta{ display:none; }
  .nav__links .btn{ display:inline-flex; width:100%; justify-content:center; margin-top:var(--space-1); }
  .nav__toggle{ display:inline-grid; place-items:center; width:44px; height:44px; background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
  .nav__toggle svg{ width:20px; height:20px; }
  .service{ grid-template-columns:1fr; gap:var(--space-3); }
  .steps{ grid-template-columns:1fr 1fr; }
  .about{ grid-template-columns:1fr; gap:var(--space-6); }
  .signals__list{ grid-template-columns:1fr; gap:var(--space-4); }
  .offer{ grid-template-columns:1fr; gap:var(--space-6); }
  .svc__head{ grid-template-columns:1fr; gap:var(--space-3); }
  .svc__grid{ grid-template-columns:1fr; gap:var(--space-4); }
  .svc__outcome{ grid-template-columns:1fr; gap:var(--space-1); }
  .person{ grid-template-columns:1fr; gap:var(--space-3); }
  .fit{ grid-template-columns:1fr; gap:var(--space-4); }
  .case__body{ grid-template-columns:1fr; gap:var(--space-4); }
  .case__figure{ grid-template-columns:1fr; gap:var(--space-2); }
  .contact__layout{ grid-template-columns:1fr; gap:var(--space-6); }
  /* Footer: la marca ocupa el ancho completo y los enlaces se reparten debajo. */
  .footer__top{ grid-template-columns:1fr 1fr; gap:var(--space-4); }
  .footer__brand-col{ grid-column:1 / -1; }
  /* Área táctil en los enlaces del footer: medían 19px de alto. Solo en móvil;
     en escritorio se navega con ratón y espaciarlos estropearía la retícula. */
  .footer__col a, .footer__bottom a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__col ul{ gap:0; }
  .footer__col li{ display:flex; align-items:center; min-height:44px; }
  /* En móvil el subrayado de página actual sobra: ya hay poco espacio. */
  .nav__links a[aria-current="page"]::after{ display:none; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .hero__note{ gap:var(--space-4); }
  /* El footer pasa a una sola columna: con dos, cada una queda tan angosta que
     los enlaces se parten en varias líneas. */
  .footer__top{ grid-template-columns:1fr; }
}

/* Pantallas muy angostas (Galaxy Fold cerrado: 280px). A este ancho ni dos
   columnas caben, y el gutter fluido se come el poco espacio disponible. */
@media (max-width:360px){
  :root{ --gutter:1rem; }
  /* Los botones ocupan el ancho: a 280px, dos en fila no caben. */
  .hero__actions .btn, .empty__actions .btn, .offer__actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ animation:none; opacity:1; transform:none; }
  *{ transition:none !important; }
}