/* ============================================
   ORIVION — Sistema visual
   Negro azulado del logo + violeta de marca.

   Reglas de la casa, para que no vuelva a oler a plantilla:
   1. El degradado vive SOLO en el logo. En ningún otro sitio.
   2. Cero glassmorphism, cero orbes, cero glow, cero blur decorativo.
   3. El violeta es una señal (1px, un punto, un relleno), no un lavado.
   4. Esquinas casi rectas y filetes de 1px que separan contenido real,
      nunca retículas decorativas de fondo.
   5. Etiquetas y cifras en monoespaciada. Es lo que da el tono técnico.
   ============================================ */

:root {
  /* --- Fondos --- */
  --bg:        #08080D;
  --surface:   #0D0D15;
  --surface-2: #12121C;
  --surface-3: #171722;

  /* --- Líneas --- */
  --line:        #1C1C28;
  --line-strong: #2A2A3A;
  --line-violet: rgba(139, 92, 246, 0.28);

  /* --- Violeta de marca --- */
  --violet:        #8B5CF6;
  --violet-bright: #A78BFA;
  --violet-deep:   #7C3AED;
  --violet-dark:   #6D28D9;
  --violet-wash:   rgba(139, 92, 246, 0.08);

  /* --- Texto --- */
  --text-primary:   #F2F2F7;
  --text-secondary: #9A9AAE;
  --text-tertiary:  #7A7A92;
  --text-muted:     #7A7A92;   /* alias usado en páginas legales */

  /* --- Tipografía --- */
  --font-display: 'Sora', 'Inter Tight', -apple-system, sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Espaciado --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* --- Radios: casi rectos --- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-full: 9999px;

  /* --- Sombras: secas, nunca de color --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --transition-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base: 260ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;
  --container-narrow: 760px;
  --navbar-height: 76px;
}

/* --- Reset --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grano finísimo: le quita el plano digital al negro sin iluminarlo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--violet-deep);
  color: #fff;
}

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

/* --- Utilidades --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-5xl) 0;
  position: relative;
  border-top: 1px solid var(--line);
}

.mx-auto { margin-left: auto; margin-right: auto; }

/* Subrayado de precisión: una línea recta de color plano.
   Sustituye al texto con degradado, que es la marca de la casa de la IA. */
.mark {
  display: inline;
  padding-bottom: 0.08em;
  background-image: linear-gradient(var(--violet), var(--violet));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  /* Si el titular parte la palabra en dos líneas, que cada trozo lleve su
     propio subrayado en lugar de repartirse uno solo. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Etiqueta de sección: monoespaciada y numerada, como una referencia técnica */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-bright);
  margin-bottom: var(--space-lg);
}

.section-label .dot {
  width: 5px;
  height: 5px;
  background: var(--violet);
  flex-shrink: 0;
}

.section-label.mx-auto { display: flex; width: fit-content; }

/* Titulares: Sora, tracking cerrado */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

.section-subtitle {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 58ch;
}

.services-header,
.process-header,
.testimonials-header,
.principles-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.services-header .section-subtitle,
.process-header .section-subtitle,
.testimonials-header .section-subtitle,
.principles-header .section-subtitle {
  margin: 0 auto;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.navbar.scrolled { border-bottom-color: var(--line); }

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* --- Logotipo ---
   Es el archivo de marca original, recortado y con el fondo en transparencia.
   Los colores del PNG están premultiplicados sobre negro, así que se apoya
   siempre en superficies oscuras. Sobre fondo claro se vería sucio. */
.navbar-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 26px;
  width: auto;
  display: block;
}

.footer-logo .logo-img { height: 30px; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.navbar-links > a {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-secondary);
  position: relative;
  padding: 4px 0;
}

.navbar-links > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--violet);
  /* Se escala en lugar de crecer de ancho: así el subrayado no provoca
     recálculo de posiciones en cada fotograma. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.navbar-links > a:hover,
.navbar-links > a.current { color: var(--text-primary); }

.navbar-links > a:hover::after,
.navbar-links > a.current::after { transform: scaleX(1); }

/* Se cualifica con `.navbar-links > a` a propósito: esa regla tiene más
   especificidad que una clase sola, así que antes le ganaba al botón y lo
   dejaba con `padding: 4px 0` (el violeta pegado al texto) y con el peso de
   un enlace normal. Con la especificidad bien puesta no hace falta ningún
   !important. */
.navbar-links > a.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  background: var(--violet-deep);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

/* El subrayado de los enlaces no pinta nada sobre un botón relleno */
.navbar-links > a.navbar-cta::after { display: none; }

.navbar-links > a.navbar-cta:hover { background: var(--violet-dark); }

.navbar-cta svg { transition: transform var(--transition-base); }
.navbar-cta:hover svg { transform: translateX(3px); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 4px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================
   HERO
   ============================================ */
.hero {
  padding: calc(var(--navbar-height) + 5.5rem) 0 var(--space-4xl);
  position: relative;
  overflow: hidden;
}

/* Aquí había una retícula de líneas de 1px de fondo. Fuera: el campo de
   líneas tenue detrás del hero es otro tic de plantilla generada, igual que
   el degradado morado. La estructura la dan las reglas reales de la página
   (la tabla de servicios, el panel, los filetes entre secciones), que sí
   separan contenido en lugar de hacer de papel pintado. */
.hero .container { position: relative; }

.hero-layout {
  display: grid;
  grid-template-columns: 1.32fr 0.98fr;
  gap: var(--space-4xl);
  align-items: start;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xl);
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--violet);
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 7.4vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.hero-title .line-2 { display: block; }

.hero-subtitle {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-2xl);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}

/* --- Botones --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  background: var(--violet-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.btn-primary:hover { background: var(--violet-dark); }
.btn-primary svg { transition: transform var(--transition-base); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--violet);
  background: var(--violet-wash);
}

/* --- Compromisos, en lugar de métricas de escaparate --- */
.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.hero-promise {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-width: 22ch;
}

.hero-promise svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--violet);
}

.hero-promise-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.hero-promise-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ============================================
   PANEL TÉCNICO DEL HERO
   ============================================ */
.hero-panel {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.panel-head strong {
  color: var(--text-primary);
  font-weight: 500;
}

.panel-rows { padding: 0.4rem 0; }

.panel-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.72rem 1.1rem;
}

.panel-row + .panel-row { border-top: 1px solid var(--line); }

.panel-row-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--violet);
}

.panel-row-name {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.panel-row-state {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.panel-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.panel-foot strong {
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--violet-bright);
  font-weight: 500;
}

/* ============================================
   SERVICIOS
   ============================================ */
/* Bordes en las tarjetas y no en el contenedor: así las celdas que sobran
   en la última fila no se pintan de color. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-card {
  padding: var(--space-xl);
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition-base);
}

.service-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.service-card:hover { background: var(--surface); }
.service-card:hover::after { transform: scaleX(1); }

.service-icon {
  width: 28px;
  height: 28px;
  color: var(--violet);
  margin-bottom: var(--space-lg);
}

.service-icon svg { width: 100%; height: 100%; }

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.service-card p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* ============================================
   NOSOTROS
   ============================================ */
.about { background: var(--surface); }

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4xl);
  align-items: start;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.about-feature {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.about-feature-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--violet);
}

.about-feature-icon svg { width: 100%; height: 100%; }

.about-feature h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.about-feature p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.stat-card {
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--violet-bright);
  margin-bottom: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.about-stats-note {
  grid-column: 1 / -1;
  padding: var(--space-md) var(--space-lg);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* ============================================
   ESTÁNDARES: LO QUE SÍ / LO QUE NO
   ============================================ */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  max-width: 980px;
  margin: 0 auto;
}

.principle-col h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--violet);
  margin-bottom: var(--space-lg);
}

.principle-col.negative h3 {
  color: var(--text-tertiary);
  border-bottom-color: var(--line-strong);
}

.principle-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9688rem;
  line-height: 1.58;
  color: var(--text-secondary);
}

.principle-list li::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 5px;
  background-color: var(--violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.principle-col.negative .principle-list li::before {
  background-color: var(--text-tertiary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.principle-list li:last-child { border-bottom: none; }

/* ============================================
   EQUIPO  (listo para fotos reales)
   ============================================ */
.team { background: var(--surface); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.team-member img,
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--transition-base);
  margin-bottom: var(--space-md);
}

.team-member:hover img { filter: grayscale(0); }

.team-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ============================================
   PROCESO
   ============================================ */
.process { background: var(--surface); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line-strong);
}

.process-step {
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px solid var(--line-strong);
  position: relative;
}

.process-step:first-child { padding-left: 0; }
.process-step:last-child { border-right: none; }

/* Cifras en contorno: presencia sin peso */
.process-step-number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--violet);
  margin-bottom: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.process-step p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* ============================================
   TESTIMONIOS
   ============================================ */
.testimonials-wrapper {
  overflow: hidden;
  margin: 0 -2px;
  padding: 2px;
}

.testimonials-track {
  display: flex;
  gap: var(--space-lg);
  transition: transform var(--transition-slow);
}

.testimonial-card {
  flex: 0 0 calc((100% - var(--space-lg) * 2) / 3);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  color: var(--violet);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-md);
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  flex: 1;
  margin-bottom: var(--space-lg);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--line-violet);
  border-radius: var(--radius-sm);
  background: var(--violet-wash);
  color: var(--violet-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.testimonial-name {
  font-family: var(--font-display);
  font-size: 0.9688rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.testimonial-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.testimonial-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.testimonial-btn:hover:not(:disabled) {
  border-color: var(--violet);
  background: var(--violet-wash);
}

.testimonial-dots { display: flex; gap: 0.45rem; }

/* El punto ocupa siempre 22 px y lo que se estira es la barra de dentro.
   Así al pasar de punto a barra no se mueven los hermanos de al lado. */
.testimonial-dot {
  width: 22px;
  height: 6px;
  cursor: pointer;
  display: block;
}

.testimonial-dot::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--line-strong);
  transform: scaleX(0.273);
  transition: transform var(--transition-base), background var(--transition-fast);
}

.testimonial-dot.active::before {
  background: var(--violet);
  transform: scaleX(1);
}

/* ============================================
   CONTACTO
   ============================================ */
.cta-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--violet);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 5vw, 3.75rem);
  max-width: 920px;
  margin: 0 auto;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  max-width: 24ch;
}

.cta-subtitle {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 54ch;
  margin-bottom: var(--space-2xl);
}

/* --- Formulario --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-group { position: relative; }

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1.4rem 1rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-group input:hover,
.form-group textarea:hover { border-color: #38384A; }

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--violet);
}

.form-group label {
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  font-size: 1rem;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: transform var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
  transform-origin: left top;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  transform: translateY(-0.72rem) scale(0.7);
  color: var(--violet-bright);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Consentimiento e información básica --- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
}

.form-consent input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.form-consent input:hover { border-color: var(--violet); }

.form-consent input:checked {
  background: var(--violet-deep);
  border-color: var(--violet-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}

.form-consent a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent a:hover { color: var(--violet-bright); }

.form-info {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
}

.form-info summary {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
}

.form-info summary:hover { color: var(--violet-bright); }

.form-info dl {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.45rem 1rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.form-info dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-bright);
  padding-top: 0.15rem;
}

.form-info dd { color: var(--text-secondary); }

.form-info a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.form-legal {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-tertiary);
  max-width: 40ch;
}

.form-legal a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-legal a:hover { color: var(--violet-bright); }

.form-status {
  font-size: 0.9375rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  display: none;
}

.form-status.visible { display: block; }

.form-status.success {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #86EFAC;
}

.form-status.error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.32);
  color: #FCA5A5;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--line);
}

.footer-logo { margin-bottom: var(--space-md); }

.footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 36ch;
  margin-bottom: var(--space-lg);
}

.footer-socials { display: flex; gap: 0.5rem; }

.footer-social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.footer-social svg { width: 16px; height: 16px; }

.footer-social:hover {
  color: var(--violet-bright);
  border-color: var(--violet);
  background: var(--violet-wash);
}

.footer-column h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.footer-column a,
.footer-column span {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
}

.footer-column a:hover { color: var(--violet-bright); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-bottom-links a:hover { color: var(--violet-bright); }

/* ============================================
   BANNER DE COOKIES
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9995;
  background: var(--surface-2);
  border-top: 1px solid var(--violet);
  padding: var(--space-lg);
  transform: translateY(110%);
  transition: transform var(--transition-slow);
}

.cookie-banner.visible { transform: translateY(0); }

.cookie-banner-content {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cookie-banner-text { max-width: 64ch; }

.cookie-banner-text p:first-child {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-bright);
  margin-bottom: 0.3rem;
}

.cookie-banner-text p {
  font-size: 0.875rem;
  line-height: 1.58;
  color: var(--text-secondary);
}

.cookie-banner-text a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-btn-reject,
.cookie-btn-accept {
  padding: 0.65rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cookie-btn-reject {
  border: 1px solid var(--line-strong);
  color: var(--text-primary);
}

.cookie-btn-reject:hover { border-color: var(--text-secondary); }

.cookie-btn-accept {
  background: var(--violet-deep);
  color: #fff;
}

.cookie-btn-accept:hover { background: var(--violet-dark); }

/* ============================================
   PÁGINAS LEGALES
   ============================================ */
.legal-page {
  padding: calc(var(--navbar-height) + 3.5rem) 0 var(--space-4xl);
  min-height: 70vh;
}

.legal-page .container { max-width: 800px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.legal-back:hover { color: var(--violet-bright); }

.legal-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-2xl);
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: var(--space-2xl) 0 var(--space-md);
}

.legal-page h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-sm);
}

.legal-page p,
.legal-page li {
  color: var(--text-secondary);
  line-height: 1.78;
  margin-bottom: var(--space-md);
}

.legal-page strong { color: var(--text-primary); font-weight: 500; }

.legal-page ul {
  padding-left: 1.3rem;
  margin-bottom: var(--space-lg);
  list-style: disc;
}

.legal-page li { margin-bottom: 0.4rem; }

.legal-page a {
  color: var(--violet-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page a:hover { color: var(--violet); }

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.9375rem;
}

.legal-page th,
.legal-page td {
  border: 1px solid var(--line);
  padding: 0.75rem 1rem;
  text-align: left;
  color: var(--text-secondary);
}

.legal-page th {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================
   REVELADO AL SCROLL (discreto)
   Solo se oculta si el JS ha arrancado (clase .js en <html>).
   Sin JS la web se lee entera, que es lo importante.
   ============================================ */
.js .reveal,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .reveal { transform: translateY(16px); }
.js .reveal-left { transform: translateX(-16px); }
.js .reveal-right { transform: translateX(16px); }
.js .reveal-scale { transform: translateY(12px); }

.js .reveal.active,
.js .reveal-left.active,
.js .reveal-right.active,
.js .reveal-scale.active {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .hero-panel { max-width: 540px; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .testimonial-card { flex: 0 0 calc((100% - var(--space-lg)) / 2); }

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

  .process-step {
    border-right: none;
    border-bottom: 1px solid var(--line-strong);
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --space-4xl: 4rem;
    --space-5xl: 4.5rem;
  }

  body::before { display: none; } /* el grano no aporta en móvil y cuesta */

  .menu-toggle { display: flex; }

  .navbar-links {
    position: fixed;
    inset: var(--navbar-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--space-md) var(--space-lg) var(--space-xl);
    transform: translateY(-130%);
    transition: transform var(--transition-base);
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }

  .navbar-links.open { transform: translateY(0); }

  .navbar-links > a {
    padding: 0.9rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }

  .navbar-links > a::after { display: none; }

  .navbar-links > a.navbar-cta {
    justify-content: center;
    padding: 0.95rem 1.3rem;
    margin-top: var(--space-lg);
    border-bottom: none;
  }

  .hero { padding-top: calc(var(--navbar-height) + 2.5rem); }
  .hero-promises { gap: var(--space-lg); }
  .hero-promise { max-width: none; flex: 1 1 100%; }

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

  .about-stats { grid-template-columns: 1fr 1fr; }

  .principles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .testimonial-card { flex: 0 0 100%; }

  .form-row { grid-template-columns: 1fr; }

  .form-info dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .form-info dd { margin-bottom: 0.6rem; }

  .form-footer { flex-direction: column; align-items: stretch; }
  .form-footer .btn-primary { justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

  .cookie-banner-content { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions > * { flex: 1; }
}

@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions > a { justify-content: center; }
  .panel-row { grid-template-columns: auto 1fr; }
  .panel-row-state { grid-column: 2; }
}

/* --- Respetar preferencia de menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* --- Impresión --- */
@media print {
  body::before,
  .navbar,
  .cookie-banner,
  .testimonials-controls { display: none; }

  body { background: #fff; color: #000; }
}