/* =============================================================
   Optimizate Labs — styles.css
   Archetype 05 "Mouse-Reactive Gradient" (dark-tech 2026)
   Orden: 1 tokens · 2 reset · 3 utils · 4 tipografía · 5 componentes
          6 secciones · 7 efectos · 8 responsive · 9 reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0a0b0f;
  --bg-2:      #12141a;
  --bg-3:      #181b22;
  --ink:       #f4f5f7;
  --ink-soft:  #d6dae1;
  --mute:      #9aa1ad;
  --accent:    #5b8cff;
  --accent-2:  #8b5cf6;
  --grad-1:    #3a86ff;
  --grad-2:    #8b5cf6;
  --grad-3:    #22d3ee;
  --line:      rgba(244,245,247,0.12);
  --line-soft: rgba(244,245,247,0.07);

  --serif:  "Space Grotesk", system-ui, sans-serif; /* display */
  --sans:   "Inter", system-ui, -apple-system, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --container: 1180px;
  --pad: clamp(1.2rem, 5vw, 3rem);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r:   14px;
  --r-lg: 22px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
input, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
}
::selection { background: var(--accent); color: #06070a; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .65rem 1.1rem; border-radius: 8px;
  background: var(--accent); color: #06070a; font-weight: 600;
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Texto que solo existe para la tecnología asistiva. No se usa display:none ni
   visibility:hidden porque ambos sacan el elemento del árbol de accesibilidad y
   entonces la región activa no anuncia nada, que es justo lo que se busca. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.kicker, .section-kicker {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.accent { color: var(--accent); }

/* =============================================================
   4. Tipografía
   ============================================================= */
.hero-title {
  font-size: clamp(2.5rem, 8vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
}
.section-title {
  font-size: clamp(1.8rem, 4.4vw, 3.1rem);
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.section-lead {
  margin-top: 1.1rem;
  max-width: 56ch;
  color: var(--mute);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.01em;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
              background-color .3s var(--ease-out), border-color .3s var(--ease-out);
  will-change: transform;
}
.btn-primary {
  background: var(--accent);
  color: #06070a;
  box-shadow: 0 8px 24px -8px rgba(91,140,255,.55);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(91,140,255,.6);
}
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 100px;
  background: rgba(6,7,10,.18); color: inherit;
}
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: rgba(91,140,255,.6);
  background: rgba(91,140,255,.08);
}

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  background: #0a0b0f;
  transition: border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  border-bottom-color: rgba(244,245,247,0.07);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1rem var(--pad);
}
.brand { display: inline-flex; align-items: center; gap: .1rem; color: var(--ink); }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-mark img { height: 41px; width: auto; display: block; }
.brand-text { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; }
.brand-accent { color: var(--accent); }
.nav-links { display: none; gap: 1.7rem; }
.nav-link {
  position: relative;
  color: var(--ink-soft);
  font-size: .95rem;
  padding: .25rem 0;
  transition: color .3s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-soft);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; padding: .7rem 1.25rem; }

/* hamburger */
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
  clip-path: inset(0 0 100% 0);
  /* clip-path es SOLO visual: no saca los enlaces del orden de tabulación ni del
     árbol de accesibilidad. Con el menú cerrado, tabular desde el logo caía en
     enlaces invisibles. `visibility: hidden` sí los saca, y se difiere hasta el
     final de la transición para no cortar la animación de cierre. */
  visibility: hidden;
  transition: clip-path .6s var(--ease-soft), visibility 0s linear .6s;
}
.nav-mobile[aria-hidden="false"] {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path .6s var(--ease-soft), visibility 0s;
}
.nav-mobile-link {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink);
}
.nav-mobile-link:hover { color: var(--accent); }

.nav-mobile-close {
  position: absolute; top: 1.4rem; right: var(--pad); z-index: 1;
  width: 44px; height: 44px; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.nav-mobile-close span {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-mobile-close span:first-child { transform: translateY(1px) rotate(45deg); }
.nav-mobile-close span:last-child { transform: translateY(-1px) rotate(-45deg); }

/* --- Accordion (servicios) --- */
.accordion { margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  transition: color .3s var(--ease-out);
}
.acc-num { font-family: var(--mono); font-size: .85rem; color: var(--accent); }
.acc-title {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: -0.02em;
  transition: transform .4s var(--ease-soft);
}
.acc-trigger:hover .acc-title { transform: translateX(6px); }
.acc-trigger:hover .acc-icon { border-color: var(--accent); color: var(--accent); }
.acc-icon {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-soft), border-color .3s var(--ease-out), color .3s;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transform: translate(-50%, -50%);
}
.acc-icon::before { width: 12px; height: 1.5px; }
.acc-icon::after  { width: 1.5px; height: 12px; transition: transform .4s var(--ease-soft); }
.acc-item.is-open .acc-icon { transform: rotate(180deg); border-color: var(--accent); color: var(--accent); }
.acc-item.is-open .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc-item.is-open .acc-title { color: var(--accent); }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-soft); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-panel-inner > * { padding-right: clamp(0px, 6vw, 80px); }
.acc-summary { color: var(--ink); font-weight: 500; margin-bottom: .6rem; }
.acc-panel p { color: var(--mute); max-width: 60ch; }
.acc-panel p:last-child { padding-bottom: 1.6rem; }

/* --- Form --- */
.field { position: relative; margin-bottom: 1rem; }
.field input, .field textarea {
  width: 100%;
  padding: 1.5rem 1rem .6rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .3s var(--ease-out), background-color .3s;
  resize: vertical;
}
.field textarea { min-height: 120px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-3);
}
.field label {
  position: absolute; left: 1rem; top: 1.05rem;
  color: var(--mute); pointer-events: none;
  transition: all .22s var(--ease-out);
  font-size: .98rem;
}
.field textarea + label { top: 1.05rem; transform: none; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: .45rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.optional { text-transform: none; letter-spacing: 0; color: var(--mute); }
.btn-submit { position: relative; width: 100%; margin-top: .4rem; }
.btn-submit-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.btn-submit-spinner::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(6,7,10,.3); border-top-color: #06070a;
  animation: spin .8s linear infinite;
}
.contact-form.is-sending .btn-submit-label { opacity: 0; }
.contact-form.is-sending .btn-submit-spinner { opacity: 1; }
.form-hint { margin-top: .8rem; font-size: .82rem; color: var(--mute); }
.form-consent {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: .7rem;
  margin: .2rem 0 1rem;
  color: var(--mute);
  font-size: .82rem;
  line-height: 1.5;
}
.form-consent input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.form-consent label { color: var(--ink); cursor: pointer; }
.form-consent a { color: var(--accent); text-underline-offset: .18em; }
/* Estado del envio cuando NO se pudo entregar. Existe para no afirmar una
   recepcion que no ocurrio; por eso lleva la via alterna en el propio texto.
   El [hidden] explicito es obligatorio: si una regla de autor pusiera display,
   el atributo dejaria de ocultar (ya mordio en el panel de la entrevista). */
.form-alert { margin-top: .8rem; font-size: .82rem; color: var(--ink-soft); }
.form-alert[hidden] { display: none; }
/* Aviso en el punto de recogida: la ley pide informar AQUI, no solo en el pie. */
.form-privacy { margin-top: .5rem; font-size: .78rem; }
.form-privacy a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.form-privacy a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================
   6. Secciones
   ============================================================= */
.section {
  padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--ink-soft);
  transition: background-color .6s var(--ease-soft), color .6s var(--ease-soft);
}
.section-head { max-width: 760px; }
.section-kicker { display: inline-block; margin-bottom: 1rem; }
.section + .section { border-top: 1px solid var(--line-soft); }

/* Secciones claras: invierten la paleta vía custom properties en cascada */
.section--light {
  --bg:        #fafafa;
  --bg-2:      #ffffff;
  --bg-3:      #f1f1f3;
  --ink:       #0a0b0f;
  --ink-soft:  #2c2f37;
  --mute:      #5b6270;
  --line:      rgba(10,11,15,0.12);
  --line-soft: rgba(10,11,15,0.07);
  /* El azul de marca (#5b8cff) se diseñó contra fondo oscuro: sobre #fafafa da
     ~3.0:1 y no llega al 4.5:1 que WCAG AA exige para texto pequeño, que es
     justo el tamaño al que se usa (kickers de 12.8px, números del acordeón).
     Este azul más profundo mantiene la marca y supera el umbral. */
  --accent:    #2952c8;
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 7rem; padding-bottom: 4rem;
  overflow: hidden; isolation: isolate;
}
.hero::after {
  /* viñeta para legibilidad sobre el gradiente */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(10,11,15,.55) 100%),
    linear-gradient(180deg, rgba(10,11,15,.25) 0%, rgba(10,11,15,.55) 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}
.hero-inner { position: relative; }
.hero .kicker { display: inline-block; margin-bottom: 1.5rem; }
.hero-sub {
  margin-top: 1.6rem;
  max-width: 50ch;
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  color: var(--ink-soft);
}
.hero-typewriter-line {
  display: block;
  min-height: calc(2 * 1.02em);
}
.hero-typewriter-text {
  transition: color .35s var(--ease-out), text-shadow .35s var(--ease-out);
}
.hero-typewriter-text.is-pop { animation: typewriterPop .5s var(--ease-soft); }
.hero-typewriter-cursor {
  display: inline-block; width: .045em; height: .88em; background: currentColor;
  transition: color .35s var(--ease-out), box-shadow .35s var(--ease-out);
  animation: typewriterBlink 1s step-end infinite;
}
@keyframes typewriterPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes typewriterBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.3rem; }
.hero-actions--no-sub { margin-top: 2.8rem; }
.hero-foot { margin-top: 2rem; font-size: .92rem; color: var(--mute); max-width: 44ch; }
.hero-scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 14px;
  display: grid; justify-items: center; padding-top: 8px;
}
.hero-scroll span { width: 3px; height: 8px; border-radius: 3px; background: var(--accent); animation: scrollHint 2.2s var(--ease-soft) infinite; }
@keyframes scrollHint { 0%, 100% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } }
@media (max-width: 599px) {
  .hero-scroll { bottom: .4rem; }
}

/* --- Servicios: ya en componentes (accordion) --- */

/* --- Proceso --- */
.steps { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.step {
  position: relative;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), rgba(18,20,26,.4));
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-soft);
}
.step:hover { border-color: rgba(91,140,255,.45); transform: translateY(-4px); }
.step-num {
  font-family: var(--mono); font-size: .9rem; color: var(--accent);
  display: inline-block; margin-bottom: 1.1rem;
}
.step-title { font-size: 1.25rem; margin-bottom: .55rem; }
.step p { color: var(--mute); }

/* --- Beneficios --- */
.metrics {
  display: grid; gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.metric { background: var(--bg); padding: 2rem 1.5rem; }
.metric-value {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--ink); letter-spacing: -0.03em; line-height: 1;
}
.metric-pre { font-size: .42em; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.metric-label { margin-top: .7rem; color: var(--mute); font-size: .92rem; }
.metrics-note { margin-top: 1rem; font-size: .8rem; color: var(--mute); font-style: italic; }

.benefit-cards { display: grid; gap: 1rem; margin-top: 2.4rem; }
.benefit-card {
  padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-soft);
}
.benefit-card:hover { border-color: rgba(139,92,246,.45); transform: translateY(-4px); }
.benefit-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.benefit-card p { color: var(--mute); }

/* --- Casos de uso --- */
.testimonial-carousel { position: relative; margin-top: 2.4rem; }
.testimonial-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: .5rem; /* se anula con movimiento reducido */
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 100%; scroll-snap-align: start;
  padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); display: flex; flex-direction: column;
  transition: border-color .35s var(--ease-out);
}
.testimonial-card:hover { border-color: rgba(91,140,255,.45); }
.testimonial-mark { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--accent); margin-bottom: .2rem; }
.testimonial-quote { color: var(--ink-soft); flex: 1; }
.testimonial-foot {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: .2rem;
}
.testimonial-name { font-weight: 700; color: var(--ink); font-size: .98rem; }
.testimonial-role { color: var(--ink-soft); font-size: .88rem; }
.testimonial-sector { color: var(--mute); font-size: .82rem; font-family: var(--mono); }
.testimonial-controls { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.testimonial-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.testimonial-btn:hover { border-color: rgba(91,140,255,.5); background: var(--bg-3); }
.testimonial-btn:disabled { opacity: .35; cursor: default; }

/* --- Sobre nosotros --- */
.about-grid { display: grid; gap: 2.5rem; }
.about-aside {
  position: relative; min-height: 200px; border-radius: var(--r-lg);
  border: 1px solid rgba(244,245,247,0.12); overflow: hidden;
  display: grid; place-items: center;
  background: #12141a;
}
.about-glow {
  position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(58,134,255,.5), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(139,92,246,.4), transparent 55%);
  filter: blur(50px); animation: glowDrift 14s ease-in-out infinite;
}
@keyframes glowDrift { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(120deg); } }
.about-matrix {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .75; pointer-events: none;
}
.about-mono {
  position: relative; font-family: var(--mono); font-size: .95rem; color: #f4f5f7;
  letter-spacing: .08em; padding: .6rem 1rem; border: 1px solid rgba(244,245,247,0.12);
  border-radius: 100px; background: rgba(10,11,15,.5); white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (max-width: 599px) {
  .about-mono { font-size: .81rem; letter-spacing: .02em; padding: .5rem .8rem; }
}
.about-lead { margin-top: 1.3rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-soft); max-width: 58ch; }
.about-content p { margin-top: 1.1rem; max-width: 58ch; }
.about-points { margin-top: 1.6rem; display: grid; gap: .7rem; }
.about-points li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.about-points li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(91,140,255,.18);
}

/* --- Contacto --- */
.contact-grid { display: grid; gap: 2.5rem; }
.contact-intro { margin-top: 1.1rem; color: var(--mute); max-width: 42ch; }
.contact-email {
  display: inline-grid; gap: .3rem; margin-top: 1.8rem;
}
.contact-email-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.contact-email-value {
  position: relative; font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: -0.02em; width: fit-content;
}
.contact-email-value::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-soft);
}
.contact-email:hover .contact-email-value::after { transform: scaleX(1); transform-origin: left; }

.contact-form-wrap {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(18,20,26,.8), rgba(18,20,26,.4));
}
/* Mismo motivo que en `.contact-success` de abajo: `opacity: 0` y
   `pointer-events: none` son solo visuales. Sin `visibility: hidden` el
   formulario enviado sigue en el orden de tabulacion y en el arbol de
   accesibilidad, asi que el lector de pantalla dicta cinco campos vacios
   despues de anunciar que el mensaje ya se envio. Se difiere al final de la
   transicion para no cortarla. */
/* `inherit`, NUNCA `visible`. Este mismo formulario vive tambien dentro del
   modal, que estando cerrado es `visibility: hidden` + `opacity: 0` + `position:
   fixed; inset: 0; z-index: 300`. `visibility` se hereda, y un descendiente que
   declara `visible` se DESTAPA aunque su antepasado este oculto: la opacidad del
   antepasado lo mantiene invisible al ojo, pero vuelve a recibir los toques. Con
   eso, el formulario del modal cerrado se comia todo toque sobre casi la pantalla
   entera en movil y los enlaces del pie dejaban de abrirse. `inherit` sigue
   siendo un valor explicito, asi que la transicion diferida sigue funcionando. */
.contact-form {
  visibility: inherit;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft), visibility 0s;
}
.contact-form.is-sent {
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft),
              visibility 0s linear .5s;
}
.contact-success {
  position: absolute; inset: clamp(1.5rem, 4vw, 2.4rem);
  display: grid; align-content: center; gap: .6rem;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  /* `opacity: 0` y `pointer-events: none` son solo visuales: su enlace de correo
     seguia siendo alcanzable con tabulador estando el bloque invisible. Con
     `visibility: hidden` sale del orden de tabulacion y del arbol de
     accesibilidad; se difiere al final de la transicion para no cortarla. */
  visibility: hidden;
  transition: opacity .6s var(--ease-out) .15s, transform .6s var(--ease-soft) .15s,
              visibility 0s linear .75s;
}
.contact-success.is-visible {
  opacity: 1; pointer-events: auto; transform: none;
  visibility: visible;
  transition: opacity .6s var(--ease-out) .15s, transform .6s var(--ease-soft) .15s, visibility 0s;
}
.contact-success-mark {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(91,140,255,.15); color: var(--accent); margin-bottom: .4rem;
}
.contact-success h3 { font-size: 1.5rem; }
.contact-success p { color: var(--mute); }
.contact-success-mail { color: var(--accent); font-size: .9rem; margin-top: .4rem; text-decoration: underline; text-underline-offset: 3px; }

/* --- Modal: agenda una consultoría --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(10,11,15,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-panel {
  position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
  transform: translateY(12px) scale(.98);
  transition: transform .35s var(--ease-soft);
}
.modal-overlay.is-open .modal-panel { transform: none; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.modal-close:hover { border-color: rgba(91,140,255,.5); background: var(--bg-3); }
.modal-title { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: .6rem; }
.modal-sub { margin-top: .5rem; color: var(--accent); font-size: .9rem; }
.modal-panel .contact-form { margin-top: 1.6rem; }

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--line); padding-block: 3rem; background: var(--bg);
  position: relative; overflow: hidden; isolation: isolate;
}
.footer-inner { display: grid; gap: 1.6rem; }
.footer-brand .brand-text { font-size: 1.2rem; }
.footer-brand p { margin-top: .6rem; color: var(--mute); max-width: 40ch; font-size: .92rem; }
.footer-meta { display: grid; gap: .4rem; }
.footer-meta a { color: var(--ink); width: fit-content; border-bottom: 1px solid transparent; transition: border-color .3s; }
.footer-meta a:hover { border-bottom-color: var(--accent); }
.footer-meta p { color: var(--mute); font-size: .85rem; }
/* El area tocable llegaba a 23,4 px de alto y las dos filas quedaban a 4,8 px:
   por debajo de los 24 px que exige el criterio 2.5.8 de WCAG 2.2 AA, que es el
   nivel que declara /accesibilidad. Se gana con relleno, no con tipografia mas
   grande, para no cambiar el aspecto del pie. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.footer-legal a { color: var(--mute); font-size: .85rem; padding-block: .35rem; }
.footer-legal a:hover { color: var(--ink); }

/* =============================================================
   7. Efectos (reveal)
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Defensa: si algún reveal lleva split, nunca queda invisible */
.reveal[data-split], [data-reveal][data-split] { opacity: 1; transform: none; }

/* Stagger suave dentro de grupos */
.steps .step:nth-child(2), .benefit-card:nth-child(2), .acc-item:nth-child(2) { transition-delay: .06s; }
.steps .step:nth-child(3), .benefit-card:nth-child(3), .acc-item:nth-child(3) { transition-delay: .12s; }
.steps .step:nth-child(4), .benefit-card:nth-child(4), .acc-item:nth-child(4) { transition-delay: .18s; }
.acc-item:nth-child(5) { transition-delay: .24s; }

/* =============================================================
   8. Responsive (mobile-first → min-width)
   ============================================================= */
@media (min-width: 540px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .benefit-cards { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card { flex: 0 0 calc(50% - .5rem); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; align-items: end; }
  .footer-meta { justify-items: end; text-align: right; }
}

@media (min-width: 720px) {
  .about-grid { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
  .about-aside { min-height: 100%; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .testimonial-card { flex: 0 0 calc((100% - 2 * 1rem) / 3); }
}

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

/* =============================================================
   9. Reduced-motion — solo efectos intrusivos / loops
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll span { animation: none; opacity: 1; }
  .about-glow { animation: none; }
  /* El contenido aparece de una, sin desplazamiento ni desvanecido. El JS hace
     lo propio (initReveals y initCountUp miran `reduced`); esta regla es la red
     por si el JS no llega a ejecutarse. */
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .about-matrix { display: none; }
  /* El carrusel tiene su PROPIO scroll-behavior; resetear el de <html> no lo
     alcanza. Sin esto, los botones del carrusel seguían desplazando con
     animación con la preferencia activada. */
  .testimonial-track { scroll-behavior: auto; }
  .nav-mobile { transition: none; }
  /* Queda el hover y la apertura del acordeón: son respuesta directa a una
     acción del usuario, no movimiento que ocurra solo. */
}