/* ARES Essential — MULTIPAGE Concept 02. HTML + CSS vanilla (+ site.js mínimo para el menú
   móvil, mejora progresiva), sin dependencias, sin build. CSS compartido por todas las páginas.
   Comparte identidad (paleta, tipografía, espaciado, radios) con ARES WEB definitiva
   (docs/BRAND.md, src/app/globals.css) sin reutilizar su código ni su complejidad técnica —
   valores replicados a mano, documento independiente.

   Tipografía: Geist no se usa este Concept. La app Next.js la carga vía `next/font/google`
   (autohospedada en build, sin llamada a Google en runtime); Essential no tiene build, así que esa
   vía no aplica, y cargarla desde Google Fonts en runtime introduciría una dependencia de terceros
   que el proyecto evita por defecto. La única copia local disponible en el repo son los archivos
   .woff2 que Next.js empaqueta para su propio overlay de desarrollo (node_modules/next/.../
   next-devtools/server/font/) — redistribuirlos aquí sería usar un asset interno de una herramienta
   de terceros fuera de su contexto previsto, no un recurso propio de ARES. Se usa en su lugar la
   misma pila de fuentes del sistema que la app Next.js ya declara como fallback
   (ui-sans-serif/system-ui), que en los sistemas operativos actuales (San Francisco, Segoe UI,
   Roboto) es visualmente compatible con una sans grotesca neutra como Geist. Pendiente de revisión
   humana si se prefiere resolver esto de otra forma antes de publicar. */

:root {
  /* === ARES Core palette (docs/BRAND.md) === */
  --canvas: #f4f4f2;
  --surface: #ebebe9;
  --surface-alt: #dedcdc;
  --graphite: #24242e;
  --ink: #151619;
  /* docs/BRAND.md's literal value (#6F7176) measures 4.43:1 on --canvas and 4.09:1 on --surface —
     fails WCAG AA's 4.5:1 text minimum (same pre-existing gap tracked as a known issue in ARES WEB
     definitive's own text-secondary, docs/WORKING-STATE.md). Essential must ship AA-compliant as
     delivered (brief §9), so this is darkened just enough to clear both backgrounds with margin
     (5.98:1 / 5.52:1) — same cool neutral grey, same hue direction, disclosed deviation from the
     literal brand hex for accessibility, not a stylistic change. */
  --secondary: #5c5d60;
  --hairline: rgba(21, 22, 25, 0.12);
  /* Error de formulario: rojo sobrio, AA sobre --canvas y --error-surface */
  --error: #a11d1d;
  --error-surface: #f6e9e7;
  /* Crema ámbar de los bloques de contacto (cierre de Home y banda final). AA sobre él:
     ink 14.2:1, secondary 5.2:1, accent-text 5.0:1. */
  --cream: #f1e2c8;

  /* === ARES Security palette — used only for the one dark section (Ecosistema) === */
  /* = --ink: un solo negro de marca para Ecosistema, footer y botones (2026-11-02) */
  --sec-bg: #151619;
  --sec-surface: #191a1e;
  --sec-raised: #23252a;
  --sec-cold: #f3f3f5;
  --sec-secondary: #96999f;
  --sec-hairline: rgba(243, 243, 245, 0.12);

  /* === Spacing === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  /* === Container === */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* === Type scale (docs/BRAND.md pesos 400/500/600; valores replicados de src/app/globals.css) === */
  --text-hero: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --text-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --text-body-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --text-micro: 0.75rem;

  /* === Radius — 0 por defecto (editorial, no SaaS); pill solo en botones, igual que ARES WEB === */
  --radius-pill: 999px;

  --header-h: 4.25rem;

  --ease-ares: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 180ms;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip (no hidden): hidden convierte <body> en contenedor de scroll cuando <html> tiene
     overflow:hidden (menú abierto) y la cabecera sticky se iba fuera de pantalla. */
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

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

[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[data-theme="dark"] :focus-visible,
.section-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--sec-cold);
}

/* -------------------------------------------------------------------------- */
/* Skip link                                                                   */
/* -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.875rem;
  font-weight: 500;
  transition: top var(--duration) ease;
}

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

/* -------------------------------------------------------------------------- */
/* Layout helpers                                                             */
/* -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.wrap-narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--hairline);
}

.section-alt {
  background: var(--surface);
}

/* Sección de una sola frase (enlace al otro servicio): menos aire que una sección completa */
.section-compact {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.section-dark {
  background: var(--sec-bg);
  color: var(--sec-cold);
  border-top-color: var(--sec-hairline);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}

.section-dark .kicker {
  color: var(--sec-secondary);
}

.kicker::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 400;
  max-width: 24ch;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.section-lead {
  margin-top: var(--space-md);
  max-width: 56ch;
  font-size: var(--text-body-lg);
  color: var(--secondary);
}

.section-dark .section-lead {
  color: var(--sec-secondary);
}

.wrap-narrow p + p {
  margin-top: var(--space-md);
}

.wrap-narrow p {
  max-width: 62ch;
  color: var(--secondary);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color var(--duration) var(--ease-ares), border-color var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares);
}

.btn-primary {
  background: var(--ink);
  color: var(--canvas);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--graphite);
}

.btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--ink);
  color: var(--canvas);
}

/* -------------------------------------------------------------------------- */
/* Header + navegación                                                        */
/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Sin backdrop-filter a propósito: crearía un containing block para `.site-nav`
     (position:fixed en móvil) y el panel se dimensionaría contra el header en vez del viewport.
     Fondo casi opaco en su lugar. */
  background: rgba(244, 244, 242, 0.97);
  border-bottom: 1px solid var(--hairline);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.logo-mark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.logo-divider {
  width: 1px;
  height: 1.5rem;
  background: var(--hairline);
}

.logo-descriptor {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-nav a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease-ares);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus-visible,
.site-nav a[aria-current="page"] {
  border-color: currentColor;
}

.nav-cta {
  padding: 0.6rem 1.35rem;
  font-size: 0.9rem;
}

.btn-primary[aria-current="page"] {
  background: var(--graphite);
}

/* Botón del menú móvil — <button> real con aria-expanded/aria-controls (site.js). Oculto en
   escritorio; sin JavaScript, noscript.css lo oculta y muestra la navegación en línea. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 1.4rem;
}

.nav-toggle-icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-ares), opacity var(--duration) var(--ease-ares);
}

.nav-open .nav-toggle-icon span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-open .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle-icon span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

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

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    padding: var(--space-md) var(--container-pad) var(--space-xl);
    background: var(--canvas);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* visibility (no display) — fuera del orden de tabulación y del árbol accesible cuando está
       cerrado; transición sólo de transform. */
    visibility: hidden;
    transform: translateY(-8px);
    transition: transform var(--duration) var(--ease-ares), visibility 0s linear var(--duration);
  }

  .nav-open .site-nav {
    visibility: visible;
    transform: translateY(0);
    transition: transform var(--duration) var(--ease-ares);
  }

  /* Bloquea el scroll de la página con el menú abierto. Solo en <html>: si <body> también
     tiene overflow:hidden, la cabecera sticky se desplaza con el contenido y desaparece. */
  .nav-open {
    overflow: hidden;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav li {
    border-bottom: 1px solid var(--hairline);
  }

  .site-nav a:not(.btn) {
    display: block;
    padding-block: 1.05rem;
    font-size: 1.125rem;
    font-weight: 400;
    border-bottom: 0;
  }

  .site-nav a[aria-current="page"]:not(.btn) {
    font-weight: 500;
  }

  .site-nav a[aria-current="page"]:not(.btn)::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 1px;
    margin-right: 0.6rem;
    vertical-align: middle;
    background: currentColor;
  }

  .site-nav .nav-cta-item {
    border-bottom: 0;
    padding-top: var(--space-lg);
  }

  .nav-cta {
    display: flex;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    font-size: 1rem;
  }

  .nav-direct {
    display: grid;
    gap: 0.35rem;
    margin-top: var(--space-lg);
    font-size: 0.9rem;
    color: var(--secondary);
  }
}

@media (min-width: 1100px) {
  .nav-direct {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Índice de sección (Home) — "01 — Servicios principales", etc.             */
/* Sustituye al .kicker simple en las cabeceras de sección de Home; .kicker   */
/* sigue igual en el resto del sitio (Contacto, páginas interiores).         */
/* -------------------------------------------------------------------------- */

.index {
  display: flex;
  align-items: baseline;
  margin: 0 0 1.1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}

.index-num {
  font-weight: 600;
  color: var(--ink);
}

.index-num::after {
  content: "—";
  display: inline-block;
  margin: 0 0.6rem;
  color: var(--secondary);
  opacity: 0.6;
}

.section-dark .index {
  color: var(--sec-secondary);
}

.section-dark .index-num {
  color: var(--sec-cold);
}

.section-dark .index-num::after {
  color: var(--sec-secondary);
}

/* -------------------------------------------------------------------------- */
/* Hero — composición asimétrica (Concept 04.1, aprobado)                     */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  /* Mismo ancho que el resto (.wrap, 1180px): con max-width:none, en pantallas anchas el texto
     y el rombo se separaban hasta los bordes y no se alineaban con el menú ni la franja. */
}

@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
}

.hero h1 {
  margin: 0;
  font-weight: 400;
  /* Calibrado para que cada línea ("La tecnología" / "que tu negocio" / "necesita") quepa en una
     sola línea visual en el rango de anchura de la columna de texto del Hero. */
  font-size: clamp(2.75rem, 1.85rem + 4.2vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero-line {
  display: block;
  color: var(--secondary);
}

.hero-line-strong {
  color: var(--ink);
  font-weight: 500;
}

.hero .lede {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 40ch;
  font-size: var(--text-body-lg);
  color: var(--secondary);
}

.hero .hero-actions {
  margin-top: var(--space-lg);
  align-items: center;
  gap: var(--space-md);
}

.hero .hero-actions .btn-primary,
.closing-contact .btn-primary {
  position: relative;
  font-size: 1rem;
  padding: 1rem 2.1rem 1rem 2.1rem;
  padding-right: 2.25rem;
}

.hero .hero-actions .btn-primary::after,
.closing-contact .btn-primary::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.7;
  transition: transform var(--duration) var(--ease-ares), opacity var(--duration) var(--ease-ares);
}

.hero .hero-actions .btn-primary:hover::after,
.hero .hero-actions .btn-primary:focus-visible::after,
.closing-contact .btn-primary:hover::after,
.closing-contact .btn-primary:focus-visible::after {
  transform: translate(3px, -50%);
  opacity: 1;
}

.cta-secondary {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--secondary);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: border-color var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares);
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  color: var(--ink);
  border-color: currentColor;
}

.hero-side {
  display: flex;
  justify-content: center;
}

@media (min-width: 960px) {
  .hero-side {
    justify-content: flex-end;
  }
}

/* Rombo del método: el SVG ocupa el cuadrado y los pasos (HTML) se colocan sobre sus vértices.
   Vértices del viewBox 260×260: arriba (50%, 15.4%), derecha (84.6%, 50%), abajo (50%, 84.6%),
   izquierda (15.4%, 50%). */
.hero-diagram {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1;
}

.hero-graphic {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--ink);
}

.hero-method {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.hm-step {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  /* el fondo tapa la línea del rombo que pasa por detrás de las etiquetas laterales */
  padding: 0.1rem 0.3rem;
  background: var(--canvas);
  font-weight: 500;
  white-space: nowrap;
}

.hm-num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--secondary);
}

.hm-top {
  left: 50%;
  top: 15.4%;
  transform: translate(-50%, calc(-100% - 0.6rem));
}

.hm-right {
  right: 0;
  top: 50%;
  transform: translateY(calc(-100% - 0.6rem));
}

.hm-bottom {
  left: 50%;
  top: 84.6%;
  transform: translate(-50%, 0.6rem);
}

.hm-left {
  left: 0;
  top: 50%;
  transform: translateY(calc(-100% - 0.6rem));
}

@media (max-width: 640px) {
  .hero-diagram {
    width: min(100%, 20rem);
  }

  .hero-method {
    font-size: 0.8rem;
  }
}

/* Ubicación junto al índice "00 — Inicio" */
.hero-place::before {
  content: "·";
  margin: 0 0.6rem;
}

/* -------------------------------------------------------------------------- */
/* Servicios principales                                                      */
/* -------------------------------------------------------------------------- */

/* Dos tarjetas paralelas (2026-11-02). Sustituyen a los bloques escalonados de Concept 04.1,
   que se leían como un error de alineación y dejaban la lista de capacidades descompensada. */
.services-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  transition: border-color var(--duration) var(--ease-ares);
}

/* Línea ámbar superior que crece al pasar el ratón o al enfocar el enlace */
.service-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-ares);
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--ink);
}

.service-card:hover::before,
.service-card:focus-within::before {
  transform: scaleX(1);
}

.service-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.service-num {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

.service-card h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.service-desc {
  margin: 0;
  max-width: 44ch;
  color: var(--secondary);
}

/* La lista crece para que los enlaces de las dos tarjetas queden a la misma altura */
.service-card .service-list {
  flex-grow: 1;
  align-content: start;
  gap: 0;
  margin-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}

.service-card .service-list li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.service-card .service-list li::before {
  top: calc(0.7rem + 0.75em);
  width: 0.75rem;
  background: var(--accent);
}

.service-card .text-link {
  align-self: flex-start;
  margin-top: var(--space-lg);
}

/* Toda la tarjeta es clicable: el área del enlace se extiende sobre ella */
.service-card .text-link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.service-list {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.6rem;
}

.service-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 1px;
  background: var(--secondary);
}

/* -------------------------------------------------------------------------- */
/* Cómo trabajamos — línea de tiempo (Home + Presencia Digital + Asesoría).   */
/* Una línea con un punto por paso que crece 01→04, como los vértices del     */
/* rombo del hero. La animación (línea ámbar que avanza y enciende cada paso) */
/* está en el bloque de movimiento, al final del archivo.                     */
/* -------------------------------------------------------------------------- */

.process-list {
  --track: rgba(21, 22, 25, 0.22);
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-left: 2rem;
}

/* Línea base y relleno ámbar (el relleno solo se ve con animación) */
.process-list::before,
.process-list::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.2rem;
  bottom: 0;
  width: 1px;
  background: var(--track);
}

.process-list::after {
  display: none;
  background: var(--accent);
  transform-origin: top;
}

.process-step {
  --dot: 9px;
  position: relative;
}

.process-step:nth-child(2) { --dot: 11px; }
.process-step:nth-child(3) { --dot: 13px; }
.process-step:nth-child(4) { --dot: 15px; }

.process-step::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - var(--dot) / 2);
  top: calc(1.2rem - var(--dot) / 2);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--ink);
}

.process-step:first-child::before {
  background: var(--accent);
}

.process-num {
  margin: 0 0 0.5rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

.process-step:first-child .process-num {
  color: var(--accent-text);
}

.process-step h3 {
  margin-bottom: 0.5rem;
}

.process-step p:not(.process-num) {
  color: var(--secondary);
  max-width: 30ch;
}

@media (min-width: 640px) {
  .process-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-left: 0;
    padding-top: 2.25rem;
  }

  .process-list::before,
  .process-list::after {
    left: 0;
    right: 0;
    top: 0.5rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .process-list::after {
    transform-origin: left;
  }

  .process-step::before {
    left: 0;
    top: calc(-1.75rem - var(--dot) / 2);
  }
}

/* -------------------------------------------------------------------------- */
/* Soluciones a tu medida (Home) — contraposición "lo habitual → ARES".       */
/* Lo habitual va tachado en ámbar; con scroll, el tachado se dibuja y        */
/* aparece la alternativa (bloque de movimiento, al final del archivo).       */
/* -------------------------------------------------------------------------- */

.contrast-list {
  border-top: 1px solid var(--ink);
}

.contrast-list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--hairline);
}

.contrast-no {
  grid-column: 1 / -1;
  position: relative;
  justify-self: start;
  color: var(--secondary);
}

.contrast-no::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 55%;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
}

.contrast-arrow {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent);
}

.contrast-yes {
  font-size: 1.05rem;
  font-weight: 500;
}

@media (min-width: 560px) {
  .contrast-list li {
    grid-template-columns: minmax(0, 1fr) 1.1rem minmax(0, 1.3fr);
    gap: var(--space-sm);
  }

  .contrast-no {
    grid-column: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Ecosistema ARES (única sección oscura) — franja compacta de "Próximamente" */
/* Una línea por proyecto: no debe competir con los servicios antes del cierre */
/* -------------------------------------------------------------------------- */

.eco-soon {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--sec-hairline);
  color: var(--sec-accent);
}

.eco-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--sec-hairline);
}

.eco-item {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--sec-hairline);
}

.eco-item h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sec-cold);
}

.eco-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sec-accent);
}

.eco-item:hover .eco-icon {
  transform: rotate(-8deg) scale(1.08);
}

.eco-desc {
  margin: 0.4rem 0 0;
  max-width: 40ch;
  font-size: 0.95rem;
  color: var(--sec-secondary);
}

@media (min-width: 720px) {
  .eco-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .eco-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0;
  }

  .eco-item {
    border-top: 1px solid var(--sec-hairline);
    border-bottom: 0;
  }
}

.eco-note {
  margin-top: var(--space-lg);
  font-size: 0.8rem;
  color: var(--sec-secondary);
}

/* -------------------------------------------------------------------------- */
/* Cierre de Home — Sobre ARES + Contacto como un único panel partido         */
/* No reutiliza .cta-band (la llamada final estándar, compartida con las      */
/* páginas interiores): Home ya no la usa, así que .cta-band sigue intacta.   */
/* -------------------------------------------------------------------------- */

.closing-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.closing-about {
  background: var(--canvas);
  padding-block: var(--space-section);
  border-top: 1px solid var(--hairline);
}

.closing-contact {
  background: var(--cream);
  color: var(--ink);
  padding-block: var(--space-section);
}

.closing-contact .kicker,
.closing-contact .section-lead {
  color: var(--secondary);
}

.closing-inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.closing-about p:not(.index) {
  margin-top: var(--space-md);
  max-width: 56ch;
  color: var(--secondary);
}

/* Frase de cierre de "Sobre ARES" como cita: barra ámbar a la izquierda y subrayado crema en
   "es la que encaja" (ambos se dibujan con scroll, bloque de movimiento al final). */
.closing-quote {
  position: relative;
  margin: var(--space-lg) 0 0;
  padding-left: 1.25rem;
}

.closing-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  background: var(--accent);
  transform-origin: top;
}

.closing-about .closing-quote p {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
}

.closing-quote mark {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(rgba(242, 176, 75, 0.45), rgba(242, 176, 75, 0.45));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.4em;
}

/* Copiar correo: oculto sin JavaScript; site.js lo muestra y gestiona el aviso */
.copy-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-ares);
}

.copy-mail[hidden] {
  display: none;
}

.copy-mail:hover,
.copy-mail:focus-visible {
  border-color: currentColor;
}

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

  .closing-about,
  .closing-contact {
    display: flex;
    align-items: center;
  }

  .closing-about .closing-inner {
    margin-left: auto;
    margin-right: 0;
    padding-left: clamp(2rem, 5vw, 4rem);
    padding-right: var(--container-pad);
  }

  .closing-contact .closing-inner {
    margin-left: 0;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: clamp(2rem, 5vw, 4rem);
  }
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--canvas);
  padding-block: var(--space-xl);
}

/* Pie en columnas numeradas + firma "ARES" + barra inferior (2026-11-02) */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}

.footer-identity {
  grid-column: 1 / -1;
}

.footer-mark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.footer-descriptor {
  margin-top: 0.35rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.6);
}

.footer-tagline {
  margin-top: var(--space-sm);
  max-width: 30ch;
  font-size: 0.9rem;
  color: rgba(244, 244, 242, 0.72);
}

.footer-head {
  display: flex;
  align-items: baseline;
  margin: 0 0 1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.6);
}

.footer-num {
  font-weight: 600;
  color: var(--sec-accent);
}

.footer-num::after {
  content: "—";
  margin: 0 0.5rem;
  color: rgba(244, 244, 242, 0.4);
}

/* Enlaces del pie con al menos 24px de alto (WCAG 2.5.8): el relleno sustituye parte del gap */
.footer-list {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.footer-list a {
  display: inline-block;
  padding-block: 0.15rem;
  color: rgba(244, 244, 242, 0.85);
  background: linear-gradient(var(--sec-accent), var(--sec-accent)) left bottom / 0 1px no-repeat;
  transition: color var(--duration) var(--ease-ares), background-size var(--duration-slow) var(--ease-ares);
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--canvas);
  background-size: 100% 1px;
}

.footer-sub {
  font-size: 0.825rem;
}

.footer-sub a {
  color: rgba(244, 244, 242, 0.6);
}

.footer-contact a,
.footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(244, 244, 242, 0.85);
}

.footer-icon {
  width: 1rem;
  height: 1rem;
  color: var(--sec-accent);
}

.footer-cta {
  display: inline-flex;
  margin-top: var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--sec-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: gap var(--duration) var(--ease-ares);
  gap: 0.5rem;
}

.footer-cta::after {
  content: "→";
}

.footer-cta:hover,
.footer-cta:focus-visible {
  gap: 0.8rem;
}

/* Marca de agua: "ARES" enorme detrás de las columnas, decorativa (aria-hidden) y sin ocupar
   espacio. .wrap aísla su propio apilamiento para que z-index:-1 quede detrás del contenido pero
   delante del fondo grafito del footer. */
.site-footer > .wrap {
  position: relative;
  isolation: isolate;
}

.footer-signature {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  margin: 0;
  /* el letter-spacing deja hueco tras la última letra: el padding lo compensa al centrar */
  padding-left: 0.2em;
  transform: translate(-50%, -50%);
  font-size: clamp(5.5rem, 26vw, 20rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  color: rgba(244, 244, 242, 0.045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(244, 244, 242, 0.12);
  font-size: 0.8rem;
  color: rgba(244, 244, 242, 0.6);
}

.footer-bottom .footer-legal {
  margin: 0;
}

.back-top {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 0.5rem;
  margin-left: auto;
  color: rgba(244, 244, 242, 0.85);
  transition: color var(--duration) var(--ease-ares);
}

.back-top:hover,
.back-top:focus-visible {
  color: var(--canvas);
}

.back-top:hover .footer-icon {
  transform: translateY(-3px);
}

.site-footer {
  overflow-x: clip;
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .footer-identity {
    grid-column: auto;
  }
}

/* Hasta 900px: marca arriba, Servicios y ARES en dos columnas, Contacto a todo el ancho */
@media (max-width: 899.98px) {
  .footer-grid > .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479.98px) {
  .back-top {
    margin-left: 0;
  }
}

/* ========================================================================== */
/* Concept 02 — componentes multipágina                                        */
/* ========================================================================== */

/* Enlace de texto con flecha (servicios en Home, enlaces cruzados) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: gap var(--duration) var(--ease-ares);
}

.text-link::after {
  content: "→";
  font-weight: 400;
}

.text-link:hover,
.text-link:focus-visible {
  gap: 0.8rem;
}

/* Contacto directo dentro de la llamada final */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

.cta-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--space-md);
  font-size: 0.95rem;
}

.cta-direct a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease-ares);
}

.cta-direct a:hover,
.cta-direct a:focus-visible {
  border-color: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Cabecera de página interior                                                 */
/* -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-section);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  font-size: 0.8rem;
  color: var(--secondary);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
}

.breadcrumb a {
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  border-color: currentColor;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
}

.page-hero h1 {
  max-width: 20ch;
  font-size: var(--text-hero);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.page-hero .lede {
  margin-top: var(--space-md);
  max-width: 58ch;
  font-size: var(--text-body-lg);
  color: var(--secondary);
}

/* Páginas comerciales interiores (Presencia Digital, Asesoría Tecnológica, Contacto) — Fase 3,
   extiende el lenguaje de Home Concept 04.1. .page-hero-commercial es una clase ADICIONAL junto a
   .page-hero: las páginas legales conservan solo .page-hero, sin cambios, por lo que esto nunca
   las afecta. */
.page-hero-commercial h1 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);
  line-height: 1.04;
  color: var(--secondary);
}

.page-hero-commercial .hero-actions .btn-primary {
  position: relative;
  padding-right: 2.25rem;
}

.page-hero-commercial .hero-actions .btn-primary::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.7;
  transition: transform var(--duration) var(--ease-ares), opacity var(--duration) var(--ease-ares);
}

.page-hero-commercial .hero-actions .btn-primary:hover::after,
.page-hero-commercial .hero-actions .btn-primary:focus-visible::after {
  transform: translate(3px, -50%);
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Titular fijo + contenido en dos columnas (.split, Soluciones de la home)   */
/* -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-lg);
}

/* Foto de apoyo en la cabecera de las páginas de servicio (PhotoFigure.astro): filo de 1px, esquinas rectas
   y tono ámbar suave con filtro, para que fotos de autores distintos parezcan de la misma serie. */
.photo-figure {
  margin-top: var(--space-lg);
}

.photo-frame {
  border: 1px solid var(--hairline);
  background: var(--cream);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.45) saturate(1.2) contrast(1.05) brightness(0.97);
}

.photo-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem var(--space-sm);
  padding-top: 0.6rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--secondary);
}

@media (min-width: 900px) {
  /* Limitar la altura para que la cabecera quepa en pantallas bajas */
  .photo-frame {
    aspect-ratio: 4 / 5;
    max-height: 52vh;
  }
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .split-head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
  }
}

/* -------------------------------------------------------------------------- */
/* Selector "situación → servicio" (ServiceFinder.astro, páginas de servicio, hasta 8)  */
/* Radios + CSS, sin JavaScript. Móvil: la solución se abre bajo su situación. */
/* Escritorio: situaciones a la izquierda y solución elegida a la derecha.    */
/* -------------------------------------------------------------------------- */

.finder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ink);
}

/* Radio accesible por teclado pero invisible: lo que se ve es su etiqueta */
.finder-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.finder-situation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.05rem;
  color: var(--secondary);
  cursor: pointer;
  transition: color var(--duration) var(--ease-ares);
}

.finder-situation::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-ares);
}

.finder-situation:hover {
  color: var(--ink);
}

.finder-arrow {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--secondary);
  opacity: 0.45;
  transition: opacity var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares), transform var(--duration) var(--ease-ares);
}

.finder-situation:hover .finder-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.finder-radio:checked + .finder-situation {
  color: var(--ink);
  font-weight: 500;
}

.finder-radio:checked + .finder-situation::after {
  transform: scaleX(1);
}

.finder-radio:checked + .finder-situation .finder-arrow {
  color: var(--accent);
  opacity: 1;
  transform: none;
}

.finder-radio:focus-visible + .finder-situation {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.finder-panel {
  display: none;
  padding-block: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}

.finder-radio:checked + .finder-situation + .finder-panel {
  display: block;
}

.finder-problem {
  max-width: 56ch;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
  color: var(--secondary);
}

.finder-num {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--accent-text);
}

.finder-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
}

.finder-service h3 {
  margin-bottom: 0.5rem;
  font-size: var(--text-h3);
}

.finder-service > p {
  max-width: 52ch;
  color: var(--secondary);
}

.finder-service .service-list {
  margin-top: var(--space-sm);
}

.finder-service .text-link {
  display: inline-block;
  margin-top: var(--space-md);
}

@media (min-width: 900px) {
  .finder {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(8, auto) 1fr;
    column-gap: var(--space-xl);
    border-top: 0;
  }

  .finder-situation {
    grid-column: 1;
  }

  .finder-situation:first-of-type {
    border-top: 1px solid var(--ink);
  }

  .finder-situation:nth-of-type(1) { grid-row: 1; }
  .finder-situation:nth-of-type(2) { grid-row: 2; }
  .finder-situation:nth-of-type(3) { grid-row: 3; }
  .finder-situation:nth-of-type(4) { grid-row: 4; }
  .finder-situation:nth-of-type(5) { grid-row: 5; }
  .finder-situation:nth-of-type(6) { grid-row: 6; }
  .finder-situation:nth-of-type(7) { grid-row: 7; }
  .finder-situation:nth-of-type(8) { grid-row: 8; }

  .finder-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    padding: var(--space-lg);
    border: 0;
    background: var(--surface);
  }
}

/* Cabecera de las páginas de servicio con foto a la derecha (PhotoFigure) */
@media (min-width: 900px) {
  .page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: end;
  }

  .page-hero-grid .page-hero-aside {
    margin-top: 0;
  }

  /* Más apaisada que la foto suelta: debajo va el índice de situaciones */
  .page-hero-aside .photo-frame {
    aspect-ratio: 4 / 3;
  }
}

.page-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.page-hero-aside {
  margin-top: var(--space-lg);
}

.page-hero-aside .photo-figure {
  margin-top: 0;
}

/* Índice de situaciones bajo la foto (SituationIndex.astro): atajos al selector de "Qué resolvemos" */
.situation-index {
  margin-top: var(--space-md);
}

.situation-index a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding-block: 0.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
}

.situation-index li:last-child a {
  border-bottom: 1px solid var(--hairline);
}

.situation-index-num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--accent-text);
}

.situation-index li:last-child .situation-index-text {
  color: var(--secondary);
}

.situation-index-arrow {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  transition: transform var(--duration) var(--ease-ares);
}

.situation-index a:hover .situation-index-text,
.situation-index a:focus-visible .situation-index-text {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.25em;
}

.situation-index a:hover .situation-index-arrow,
.situation-index a:focus-visible .situation-index-arrow {
  transform: translateX(3px);
}

/* Nota honesta (sin promesas de resultados) */
.honest-note {
  margin-top: var(--space-lg);
  max-width: 62ch;
  font-size: 0.875rem;
  color: var(--secondary);
}

/* -------------------------------------------------------------------------- */
/* Llamada final (todas las páginas salvo Contacto) — bloque crema            */
/* -------------------------------------------------------------------------- */

.cta-band {
  padding-block: var(--space-section);
  background: var(--cream);
  color: var(--ink);
}

.cta-band .kicker,
.cta-band .section-lead {
  color: var(--secondary);
}

.cta-band .btn-primary {
  position: relative;
  padding-right: 2.25rem;
}

.cta-band .btn-primary::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.7;
  transition: transform var(--duration) var(--ease-ares), opacity var(--duration) var(--ease-ares);
}

.cta-band .btn-primary:hover::after,
.cta-band .btn-primary:focus-visible::after {
  transform: translate(3px, -50%);
  opacity: 1;
  color: var(--sec-accent);
}

.cta-band + .site-footer,
main + .site-footer {
  border-top: 1px solid rgba(244, 244, 242, 0.12);
}

/* Enlace cruzado entre servicios */
.cross-link {
  display: grid;
  gap: var(--space-sm);
}

.cross-link p {
  color: var(--secondary);
  max-width: 56ch;
}

/* Varios enlaces en el mismo cross-link (página 404) */
.cross-link-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

@media (min-width: 720px) {
  .cross-link {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-lg);
  }
}

/* -------------------------------------------------------------------------- */
/* Contacto — formulario                                                       */
/* -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

/* Aviso: el formulario aún no envía (sin backend). Siempre visible, nunca tras interacción. */
.form-notice {
  display: grid;
  gap: 0.35rem;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--ink);
  background: var(--surface);
  font-size: 0.9rem;
}

.form-notice strong {
  font-weight: 600;
}

.form-notice a {
  border-bottom: 1px solid currentColor;
}

.contact-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--space-md);
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
}

.field-hint {
  font-weight: 400;
  color: var(--secondary);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fbfbfa;
  border: 1px solid rgba(21, 22, 25, 0.42);
  border-radius: 0;
  transition: border-color var(--duration) var(--ease-ares);
}

.field textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

.field-row {
  display: grid;
  gap: 0 var(--space-md);
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Error por campo — preparado para el backend (aria-describedby + aria-invalid) */
.field-error {
  font-size: 0.8125rem;
  color: var(--error);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
}

/* Honeypot anti-spam: fuera de pantalla, del árbol accesible y del tabulador */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy-info {
  margin-bottom: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--secondary);
}

.privacy-info summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--hairline);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.privacy-info summary::-webkit-details-marker {
  display: none;
}

.privacy-info summary::before {
  content: "+";
  width: 1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--accent-text);
}

.privacy-info[open] summary::before {
  content: "−";
}

.privacy-info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0 0 0.75rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--hairline);
}

.privacy-info dt {
  font-weight: 500;
  color: var(--ink);
}

.privacy-info dd {
  margin: 0;
}

.privacy-info a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.form-actions .btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.form-required-note {
  font-size: 0.8125rem;
  color: var(--secondary);
}

/* Formulario inactivo (fieldset[disabled]) — mismo diseño, señal clara de no disponible */
.contact-form fieldset:disabled .field input,
.contact-form fieldset:disabled .field select,
.contact-form fieldset:disabled .field textarea {
  cursor: not-allowed;
  background: var(--canvas);
  border-style: dashed;
}

.contact-form fieldset:disabled .btn {
  cursor: not-allowed;
  background: var(--surface-alt);
  color: var(--secondary);
}

/* Estados de envío — preparados y ocultos (hidden) hasta que exista backend */
.btn[aria-busy="true"] {
  cursor: progress;
  background: var(--graphite);
}

.form-status {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-left: 2px solid currentColor;
}

.form-status h3 {
  margin-bottom: 0.4rem;
}

.form-status p {
  font-size: 0.95rem;
}

.form-status-success {
  background: var(--surface);
  color: var(--ink);
}

.form-status-error {
  background: var(--error-surface);
  color: var(--error);
}

.form-status-error p {
  color: var(--ink);
}

/* Columna lateral: contacto directo */
.contact-aside {
  display: grid;
  gap: var(--space-md);
}

.contact-aside h2 {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.direct-list {
  border-top: 1px solid var(--hairline);
}

.direct-list li {
  display: grid;
  gap: 0.2rem;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}

.direct-label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.direct-list a,
.direct-value {
  font-size: 1.05rem;
  font-weight: 500;
  justify-self: start;
}

.direct-list a {
  border-bottom: 1px solid transparent;
}

.direct-list a:hover,
.direct-list a:focus-visible {
  border-color: currentColor;
}

.aside-note {
  font-size: 0.875rem;
  color: var(--secondary);
}

.contact-aside .copy-mail {
  justify-self: start;
  margin-top: 0.15rem;
}

/* En escritorio el lateral acompaña al formulario al bajar; solo en pantallas altas, porque con el
   mapa mide unos 730px y en una pantalla baja el mapa quedaría cortado hasta el final del formulario */
@media (min-width: 960px) and (min-height: 860px) {
  .contact-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
  }
}

/* Mapa de contacto: Google Maps que se carga al pulsar (site.js). Antes de cargarlo, un marco crema
   con retícula de 1px y el punto ámbar, en el lenguaje del sitio. */
.contact-map {
  margin-top: var(--space-sm);
}

.contact-map-frame {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: center;
  overflow: hidden;
}

.contact-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.6) sepia(0.2);
}

.contact-map-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  text-align: center;
}

.contact-map-pin {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}

.contact-map-place {
  font-weight: 500;
}

.contact-map-note {
  max-width: 30ch;
  font-size: 0.75rem;
  color: var(--secondary);
}

.contact-map-note a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

.contact-map figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem var(--space-sm);
  padding-top: 0.6rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--secondary);
}

.contact-map figcaption a {
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
}

.contact-map figcaption a:hover,
.contact-map figcaption a:focus-visible {
  border-color: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Páginas legales (borrador)                                                  */
/* -------------------------------------------------------------------------- */

.draft-banner {
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.85rem;
}

.draft-banner .wrap {
  padding-block: 0.75rem;
}

.draft-banner strong {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  max-width: none;
}

.prose p,
.prose li {
  color: var(--secondary);
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: var(--space-sm);
}

.prose ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.prose a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

.placeholder {
  padding: 0.05rem 0.3rem;
  background: var(--surface-alt);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* Footer — enlaces legales */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-bottom: 0.6rem;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: rgba(244, 244, 242, 0.75);
  transition: color var(--duration) var(--ease-ares);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--canvas);
}

@media (min-width: 720px) {
  .footer-legal {
    justify-content: flex-end;
  }
}

/* Ajustes tras revisión visual Concept 02 */
.contact-main > h2 {
  margin-bottom: var(--space-md);
}

.field > .field-hint {
  font-size: 0.8125rem;
}

.site-nav .nav-direct a {
  display: inline;
  justify-self: start;
  padding-block: 0.3rem;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------- */
/* Formulario activo (backend) — casilla de privacidad y resumen de errores    */
/* -------------------------------------------------------------------------- */

.field-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
}

.field-check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0.1rem 0 0;
  padding: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.field-check label {
  cursor: pointer;
}

.field-check .field-hint,
.field-check .field-error {
  grid-column: 2;
}

.field-check .field-hint {
  font-size: 0.8125rem;
}

.form-status-list {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.3rem;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: 0.9rem;
}

.form-status-list a,
.form-status-direct a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

.form-status-direct {
  margin-top: 0.6rem;
  color: var(--ink);
}

/* ========================================================================== */
/* Acento ámbar, iconos y animación (2026-11-02)                              */
/* Todo el movimiento va dentro de prefers-reduced-motion: no-preference: con */
/* el movimiento reducido se ve directamente el estado final.                 */
/* --accent (#A35A00) solo para iconos y detalles gráficos; para texto se usa */
/* --accent-text (#8F4F00), que cumple AA 4.5:1 sobre canvas, surface y       */
/* surface-alt. --sec-accent (#F2B04B) es la versión para fondos oscuros.     */
/* ========================================================================== */

:root {
  --accent: #a35a00;
  --accent-text: #8f4f00;
  --sec-accent: #f2b04b;
  --duration-slow: 700ms;
}

::selection {
  background: var(--sec-accent);
  color: var(--ink);
}

/* --- Iconos (componente Icon.astro, Lucide) --- */
.icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares);
}

/* --- Detalles de acento en índices y etiquetas --- */
.index-num {
  color: var(--accent-text);
}

.section-dark .index-num {
  color: var(--sec-accent);
}

.kicker::before {
  background: var(--accent);
  opacity: 1;
}

.section-dark .kicker::before {
  background: var(--sec-accent);
}

/* --- Navegación: subrayado ámbar que crece de izquierda a derecha --- */
.site-nav a:not(.btn) {
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat;
  transition: background-size var(--duration-slow) var(--ease-ares);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus-visible,
.site-nav a[aria-current="page"] {
  border-color: transparent;
  background-size: 100% 1px;
}

/* --- Contacto directo con icono (cabecera, cierre y banda final) --- */
.nav-direct a,
.cta-direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.direct-icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

/* --- Botones y enlaces --- */
.btn {
  transition: background-color var(--duration) var(--ease-ares), border-color var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares), transform var(--duration) var(--ease-ares);
}

.btn:active {
  transform: translateY(1px);
}

.hero .hero-actions .btn-primary:hover::after,
.hero .hero-actions .btn-primary:focus-visible::after,
.page-hero-commercial .hero-actions .btn-primary:hover::after,
.page-hero-commercial .hero-actions .btn-primary:focus-visible::after {
  color: var(--sec-accent);
}

/* En móvil "Descubre nuestros servicios" bajaba partido junto al botón: ahora salta entero */
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
}

.cta-secondary {
  white-space: nowrap;
}

.text-link {
  border-bottom-color: var(--accent);
  transition: gap var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--accent-text);
}

/* --- Servicios principales (Home) --- */
.service-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent);
}

.service-card:hover .service-icon {
  transform: translateY(-3px);
}

/* --- "Qué ofrecemos" en páginas de servicio: el icono sustituye a la raya sobre el h3 --- */

/* --- Cómo trabajamos --- */
.process-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.process-head .process-num {
  margin: 0;
}

.process-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
}

.process-step:hover .process-icon {
  transform: rotate(-8deg) scale(1.08);
}

/* --- Gráfico del hero --- */
.hg-core {
  fill: var(--accent);
}

.hg-ring {
  stroke: var(--accent);
}

/* ========================================================================== */
/* Movimiento                                                                 */
/* ========================================================================== */

@keyframes ares-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ares-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ares-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ares-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ares-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.55;
  }
}

/* Paso activo del método: el número se vuelve ámbar y su punto crece y se tiñe */
@keyframes hm-active {
  0%,
  22% {
    color: var(--accent-text);
  }
  30%,
  100% {
    color: var(--secondary);
  }
}

@keyframes hm-dot {
  0%,
  22% {
    fill: var(--accent);
    transform: scale(1.7);
  }
  30%,
  100% {
    fill: currentColor;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrada de la cabecera de cada página: titular línea a línea, luego texto y botones */
  .hero .index,
  .hero .hero-line,
  .hero .lede,
  .hero .hero-actions,
  .page-hero .breadcrumb,
  .page-hero .kicker,
  .page-hero .index,
  .page-hero h1,
  .page-hero .lede,
  .page-hero .hero-actions,
  .page-hero .photo-figure {
    animation: ares-rise var(--duration-slow) var(--ease-ares) both;
  }

  .hero .hero-line:nth-child(1),
  .page-hero .kicker,
  .page-hero .index {
    animation-delay: 80ms;
  }

  .hero .hero-line:nth-child(2),
  .page-hero h1 {
    animation-delay: 160ms;
  }

  .hero .hero-line:nth-child(3) {
    animation-delay: 240ms;
  }

  .hero .lede,
  .page-hero .lede {
    animation-delay: 360ms;
  }

  .hero .hero-actions,
  .page-hero .hero-actions {
    animation-delay: 460ms;
  }

  .page-hero .photo-figure {
    animation-delay: 300ms;
  }

  .situation-index li {
    animation: ares-rise var(--duration-slow) var(--ease-ares) both;
    animation-delay: calc(420ms + var(--i, 0) * 70ms);
  }

  .situation-index li:nth-child(2) { --i: 1; }
  .situation-index li:nth-child(3) { --i: 2; }
  .situation-index li:nth-child(4) { --i: 3; }

  /* El rombo se dibuja, aparecen los ejes, los cuatro puntos en orden y el centro respira */
  .hg-frame {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ares-draw 1.4s var(--ease-ares) 0.3s forwards;
  }

  .hg-axes,
  .hg-ring {
    animation: ares-fade 0.8s ease 1.1s both;
  }

  .hg-dot,
  .hg-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: ares-pop 0.5s var(--ease-ares) both;
  }

  .hg-dot:nth-of-type(3) { animation: ares-pop 0.5s var(--ease-ares) 1.3s both, hm-dot 8s ease 2.4s 2; }
  .hg-dot:nth-of-type(4) { animation: ares-pop 0.5s var(--ease-ares) 1.45s both, hm-dot 8s ease 4.4s 2; }
  .hg-dot:nth-of-type(5) { animation: ares-pop 0.5s var(--ease-ares) 1.6s both, hm-dot 8s ease 6.4s 2; }
  .hg-dot:nth-of-type(6) { animation: ares-pop 0.5s var(--ease-ares) 1.75s both, hm-dot 8s ease 8.4s 2; }

  .hg-core {
    animation:
      ares-pop 0.5s var(--ease-ares) 1.95s both,
      ares-breathe 3.2s ease-in-out 2.6s 3;
  }

  /* Los pasos del método aparecen tras su punto y luego se iluminan por turnos (ciclo de 8 s:
     cada paso 2 s), igual que su punto en el rombo. Dos ciclos y se detiene: el movimiento
     continuo distrae de la lectura (WCAG 2.2.2). Igual con el centro del rombo. */
  .hm-step {
    animation: ares-fade 0.6s ease both;
  }

  .hm-step:nth-child(1) { animation-delay: 1.4s; }
  .hm-step:nth-child(2) { animation-delay: 1.55s; }
  .hm-step:nth-child(3) { animation-delay: 1.7s; }
  .hm-step:nth-child(4) { animation-delay: 1.85s; }

  .hm-num {
    animation: hm-active 8s ease 2;
  }

  .hm-step:nth-child(1) .hm-num { animation-delay: 2.4s; }
  .hm-step:nth-child(2) .hm-num { animation-delay: 4.4s; }
  .hm-step:nth-child(3) .hm-num { animation-delay: 6.4s; }
  .hm-step:nth-child(4) .hm-num { animation-delay: 8.4s; }

  /* Transición suave entre páginas (navegadores con View Transitions entre documentos; el resto
     navega como siempre). La cabecera se queda quieta mientras cambia el contenido. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
  }

  .site-header {
    view-transition-name: site-header;
  }
}

/* ========================================================================== */
/* Navegación (2026-11-02)                                                    */
/* Escritorio: enlaces sin numerar (los números son de las secciones),        */
/* cabecera que se encoge al bajar y barra ámbar de progreso. Móvil: panel de */
/* tarjetas con icono y nombre, y el correo destacado al final.               */
/* ========================================================================== */

/* El icono de cada enlace solo se ve en las tarjetas del menú móvil */
.nav-icon {
  display: none;
}

/* Botón del menú: solo icono dentro de un círculo; abierto se rellena de negro y la hamburguesa
   pasa a ser una X, así siempre se ve claramente dónde cerrar. */
.nav-toggle {
  margin-right: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: background-color var(--duration) var(--ease-ares), border-color var(--duration) var(--ease-ares), color var(--duration) var(--ease-ares);
}

.nav-toggle:hover {
  border-color: var(--ink);
}

/* Con el menú abierto la cabecera es opaca: el 3 % de transparencia dejaba ver el texto de debajo */
.nav-open .site-header {
  background: var(--canvas);
}

.nav-open .nav-toggle {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}

.nav-toggle-icon {
  width: 1.1rem;
}

.read-progress {
  display: none;
}

@media (min-width: 1100px) {
  .site-nav ul {
    gap: 1.4rem;
  }
}

@media (max-width: 1099.98px) {
  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .site-nav li {
    border-bottom: 0;
  }

  /* Con un número impar de enlaces, el último ocupa las dos columnas */
  .site-nav li:not(.nav-cta-item):nth-child(odd):nth-last-child(2) {
    grid-column: 1 / -1;
  }

  .site-nav .nav-cta-item {
    grid-column: 1 / -1;
    padding-top: 0.5rem;
  }

  .site-nav a.nav-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 1.5rem 0.5rem;
    height: 100%;
    min-height: 7rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    transition: border-color var(--duration) var(--ease-ares), background-color var(--duration) var(--ease-ares);
  }

  .site-nav a.nav-link:hover,
  .site-nav a.nav-link:focus-visible {
    border-color: var(--ink);
    background: var(--canvas);
  }

  .site-nav a.nav-link[aria-current="page"] {
    border-color: var(--ink);
    background: var(--surface);
  }

  .site-nav a.nav-link[aria-current="page"]::before {
    display: none;
  }

  .nav-icon {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
  }

  .nav-label {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
  }

  .nav-link:hover .nav-icon {
    transform: translateY(-2px);
  }

  .nav-direct {
    gap: 0.5rem;
    margin-top: var(--space-md);
    padding: 1.25rem;
    background: var(--surface);
    color: var(--secondary);
  }

  .nav-direct-label {
    margin: 0 0 0.25rem;
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* .site-nav a:not(.btn) (menú antiguo) les daba display:block y relleno de fila de menú */
  .site-nav .nav-direct a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.2rem;
    font-size: 0.95rem;
    font-weight: 400;
  }

  .site-nav .nav-direct a.nav-mail {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .nav-mail .direct-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@keyframes ares-progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes ares-shrink {
  to {
    min-height: 3.4rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Las tarjetas del menú móvil entran escalonadas al abrirlo */
  @media (max-width: 1099.98px) {
    .nav-open .site-nav li,
    .nav-open .nav-direct {
      animation: ares-rise 0.45s var(--ease-ares) both;
    }

    .nav-open .site-nav li:nth-child(2) { animation-delay: 40ms; }
    .nav-open .site-nav li:nth-child(3) { animation-delay: 80ms; }
    .nav-open .site-nav li:nth-child(4) { animation-delay: 120ms; }
    .nav-open .site-nav li:nth-child(5) { animation-delay: 160ms; }
    .nav-open .site-nav li:nth-child(6) { animation-delay: 200ms; }
    .nav-open .nav-direct { animation-delay: 240ms; }
  }

  /* Barra de progreso de lectura y cabecera que se encoge, ligadas al scroll (solo CSS) */
  @supports (animation-timeline: scroll()) {
    .read-progress {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: ares-progress linear both;
      animation-timeline: scroll(root);
    }

    .nav-open .read-progress {
      opacity: 0;
    }

    @media (min-width: 1100px) {
      .header-row {
        animation: ares-shrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0 160px;
      }
    }
  }
}

/* Aparición al hacer scroll, solo con CSS (scroll-driven animations). En navegadores sin soporte
   el contenido está visible desde el principio, sin JavaScript. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section h2,
    .section .section-lead,
    .service-card,
    .eco-item,
    .closing-inner,
    .cta-band .wrap > *,
    .cross-link {
      animation: ares-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Cómo trabajamos: la línea ámbar avanza con el scroll y, al llegar a cada punto, el paso se
   enciende (punto y número en ámbar) y sube a su sitio. Sin soporte o con movimiento reducido se
   ve el estado estático: línea gris con el 01 en ámbar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process-list {
      view-timeline-name: --process;
    }

    .process-list::after {
      display: block;
      animation: process-fill-y linear both;
      animation-timeline: --process;
      animation-range: cover 15% cover 60%;
    }

    .process-step,
    .process-step::before,
    .process-step .process-num {
      animation-timeline: view();
      animation-range: entry 80% cover 40%;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .process-step { animation-name: process-step-in; }
    .process-step::before { animation-name: process-dot-on; }
    .process-step .process-num { animation-name: process-num-on; }

    @media (min-width: 640px) {
      .process-list::after {
        animation-name: process-fill-x;
        animation-range: cover 20% cover 55%;
      }

      /* En fila todos los pasos entran a la vez: cada uno se enciende cuando la línea llega a él */
      .process-step,
      .process-step::before,
      .process-step .process-num {
        animation-timeline: --process;
        animation-range: cover var(--on) cover calc(var(--on) + 7%);
      }

      .process-step:nth-child(1) { --on: 18%; }
      .process-step:nth-child(2) { --on: 29%; }
      .process-step:nth-child(3) { --on: 38%; }
      .process-step:nth-child(4) { --on: 47%; }
    }
  }
}

@keyframes process-fill-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes process-fill-y {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes process-step-in {
  from { opacity: 0.35; translate: 0 0.5rem; }
  to { opacity: 1; translate: none; }
}

@keyframes process-dot-on {
  from { background: var(--ink); scale: 0.6; }
  to { background: var(--accent); scale: 1; }
}

@keyframes process-num-on {
  from { color: var(--ink); }
  to { color: var(--accent-text); }
}

/* Soluciones a tu medida: el tachado ámbar se dibuja sobre "lo habitual" y después aparecen la
   flecha y la alternativa. Cada fila con su propio view(), así que entran escalonadas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .contrast-no::after,
    .contrast-arrow,
    .contrast-yes {
      animation-timeline: view();
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .contrast-no::after {
      animation-name: contrast-strike;
      animation-range: entry 90% cover 35%;
    }

    .contrast-arrow,
    .contrast-yes {
      animation-name: contrast-in;
      animation-range: cover 30% cover 45%;
    }
  }
}

@keyframes contrast-strike {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

/* Cierre: la barra de la cita baja y después se subraya "es la que encaja". */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closing-quote::before,
    .closing-quote mark {
      animation-timeline: view();
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .closing-quote::before {
      animation-name: quote-bar;
      animation-range: entry 80% cover 35%;
    }

    .closing-quote mark {
      animation-name: quote-mark;
      animation-range: cover 30% cover 50%;
    }
  }
}

@keyframes quote-bar {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes quote-mark {
  from { background-size: 0% 0.4em; }
  to { background-size: 100% 0.4em; }
}

/* Selector de servicios: la solución elegida entra subiendo, como el resto de bloques. */
@media (prefers-reduced-motion: no-preference) {
  .finder-radio:checked + .finder-situation + .finder-panel {
    animation: ares-rise var(--duration-slow) var(--ease-ares) both;
  }
}

@keyframes contrast-in {
  from { opacity: 0; translate: -0.4rem 0; }
  to { opacity: 1; translate: none; }
}