/* ═══════════════════════════════════════════════════════════════
   Viktor López de Paco · hoja de estilos única (seis páginas)

   Sistema
   - Tipografía: Geist (texto y titulares) y Geist Mono (cifras y fechas).
   - Color: oscuro por defecto, con interruptor a un tema claro que no es
     blanco. Un único acento cobalto; los brillos del fondo son del mismo tono.
   - Radios: tarjetas 16px, imágenes interiores y campos 10px, botones en píldora.
   - Movimiento: solo transform y opacity (más block-size en las preguntas);
     curvas propias; cada animación tiene un motivo apuntado al lado.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/geist-mono.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}

/* ── tema oscuro (por defecto) ── */
:root {
  --fondo: #0b0d12;
  --fondo-2: #0f1218;
  --superficie: #141821;
  --superficie-2: #1a1f2a;
  --texto: #eef0f4;
  --texto-2: #a3abb9;
  --borde: #222835;
  --borde-fuerte: #323a4b;
  --acento: #7f9cff;
  --acento-2: #5b7cff;
  --acento-suave: rgb(127 156 255 / 0.12);
  --sobre-acento: #0a0c12;
  --brillo: rgb(91 124 255 / 0.32);
  --rejilla: rgb(255 255 255 / 0.035);
  --exito: #4ad17e;
  --error: #ff7b72;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 30px -14px rgb(0 0 0 / 0.7);
  --sombra-alta: 0 2px 6px rgb(0 0 0 / 0.35), 0 30px 60px -24px rgb(0 0 0 / 0.85);

  --letra: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --en-pantalla: cubic-bezier(0.77, 0, 0.175, 1);
  --r-tarjeta: 16px;
  --r-interior: 10px;
  --cabecera: 68px;

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* ── tema claro: gris azulado, nunca blanco puro ── */
[data-tema='claro'] {
  --fondo: #e7eaf0;
  --fondo-2: #dfe3ea;
  --superficie: #f3f5f8;
  --superficie-2: #eceff4;
  --texto: #12151b;
  --texto-2: #4b5260;
  --borde: #d0d5de;
  --borde-fuerte: #b8c0cd;
  --acento: #2a4fd6;
  --acento-2: #3d61e6;
  --acento-suave: rgb(42 79 214 / 0.1);
  --sobre-acento: #f6f7fa;
  --brillo: rgb(61 97 230 / 0.2);
  --rejilla: rgb(20 30 60 / 0.05);
  --exito: #157a39;
  --error: #b9302a;
  --sombra: 0 1px 2px rgb(20 30 60 / 0.06), 0 10px 26px -14px rgb(20 30 60 / 0.22);
  --sombra-alta: 0 2px 6px rgb(20 30 60 / 0.07), 0 28px 56px -24px rgb(20 30 60 / 0.35);
  color-scheme: light;
}

/* ═══════════ BASE ═══════════ */

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

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

body {
  position: relative;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
  transition: background-color 300ms ease, color 300ms ease;
}

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

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

button,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--acento);
  color: var(--sobre-acento);
}

.i {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex-shrink: 0;
}

.contenedor {
  position: relative;
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .contenedor {
    padding-inline: 32px;
  }
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--texto);
  color: var(--fondo);
  font-weight: 500;
}

.saltar:focus {
  top: 12px;
}

/* Rejilla fina de fondo con un brillo arriba: da textura y profundidad sin
   ensuciar. Fija y sin eventos de puntero: no cuesta nada al hacer scroll. */
.fondo-rejilla {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--brillo), transparent 70%),
    linear-gradient(var(--rejilla) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* Barra de lectura arriba: dice cuánto queda. Solo CSS (sin escuchar el
   scroll); donde el navegador no lo soporta, simplemente no aparece. */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 2px;
  background: linear-gradient(90deg, var(--acento-2), var(--acento));
  transform: scaleX(0);
  transform-origin: left;
}

@supports (animation-timeline: scroll()) {
  .progreso {
    animation: progreso linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes progreso {
  to {
    transform: scaleX(1);
  }
}

/* ═══════════ TRANSICIÓN ENTRE PÁGINAS ═══════════
   Continuidad: la cabecera se queda quieta y el contenido cambia con un
   desplazamiento corto, en vez de un pantallazo en blanco. */
@view-transition {
  navigation: auto;
}

.cabecera {
  view-transition-name: cabecera;
}

::view-transition-old(root) {
  animation: vt-sale 200ms var(--salida) both;
}

::view-transition-new(root) {
  animation: vt-entra 420ms var(--salida) both;
}

@keyframes vt-sale {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes vt-entra {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ═══════════ BOTONES Y ENLACES ═══════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    transform 160ms var(--salida),
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.btn-grande {
  min-height: 56px;
  padding: 0 30px;
  font-size: 1.05rem;
}

.btn-primario {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 6px 20px -8px var(--brillo);
}

.btn-secundario {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primario:hover {
    background: color-mix(in oklab, var(--acento) 85%, var(--texto));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 28px -8px var(--brillo);
  }

  .btn-secundario:hover {
    box-shadow: inset 0 0 0 1px var(--texto-2);
  }
}

.btn-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.25rem;
  color: var(--texto-2);
  transition: transform 160ms var(--salida), background-color 200ms ease, color 200ms ease;
}

.btn-icono:active {
  transform: scale(0.93);
}

@media (hover: hover) and (pointer: fine) {
  .btn-icono:hover {
    background: var(--superficie);
    color: var(--texto);
  }
}

/* el interruptor enseña el tema al que vas a cambiar */
.tema-luna,
[data-tema='claro'] .tema-sol {
  display: none;
}

[data-tema='claro'] .tema-luna {
  display: block;
}

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
  color: var(--acento);
}

.enlace .i {
  transition: transform 220ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
  .enlace:hover .i {
    transform: translateX(3px);
  }
}

.enlace-texto {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace-sutil {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-2);
}

/* ═══════════ PANTALLA DE CARGA ═══════════
   Solo CSS: se retira sola aunque falle el JavaScript. Una vez por sesión. */

.carga {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  gap: 28px;
  padding: 0 max(24px, 8vw);
  background: var(--fondo);
  animation: carga-sale 650ms var(--en-pantalla) 1100ms forwards;
}

.carga-marca {
  display: grid;
  gap: 6px;
}

.carga-linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.carga-linea > span {
  display: block;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  transform: translateY(105%);
  animation: sube 700ms var(--salida) 120ms forwards;
}

.carga-sub > span {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto-2);
  animation-delay: 220ms;
}

.carga-barra {
  width: min(320px, 60vw);
  height: 2px;
  background: var(--borde);
  overflow: hidden;
  border-radius: 2px;
}

.carga-barra span {
  display: block;
  height: 100%;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  animation: llena 900ms var(--en-pantalla) 150ms forwards;
}

@keyframes sube {
  to {
    transform: translateY(0);
  }
}

@keyframes llena {
  to {
    transform: scaleX(1);
  }
}

@keyframes carga-sale {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

.sin-carga .carga {
  display: none;
}

/* ═══════════ CABECERA ═══════════ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--cabecera);
  background: color-mix(in oklab, var(--fondo) 78%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.cabecera.con-borde {
  border-bottom-color: var(--borde);
}

@media (prefers-reduced-transparency: reduce) {
  .cabecera {
    background: var(--fondo);
    backdrop-filter: none;
  }
}

.cabecera-in {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .cabecera-in {
    padding-inline: 32px;
  }
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
}

.marca-mono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: var(--sobre-acento);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.marca-texto {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.nav {
  position: relative;
  display: none;
  gap: 2px;
  margin-right: 8px;
}

.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.93rem;
  color: var(--texto-2);
  transition: color 200ms ease;
}

.nav a[aria-current='page'],
.nav a:hover {
  color: var(--texto);
}

/* Subrayado que viaja al enlace bajo el ratón y vuelve a la página actual:
   orienta sin necesidad de leer. */
.nav-indicador {
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 2px;
  width: var(--ancho, 0);
  border-radius: 2px;
  background: var(--acento);
  transform: translateX(var(--x, 0));
  opacity: var(--visible, 0);
  transition:
    transform 280ms var(--salida),
    width 280ms var(--salida),
    opacity 200ms ease;
}

.nav-cta {
  display: none;
}

@media (min-width: 1060px) {
  .nav,
  .nav-cta {
    display: inline-flex;
  }

  .btn-menu {
    display: none;
  }
}

/* ── menú móvil: <dialog> nativo (atrapa el foco y se cierra con Esc) ── */
.menu {
  position: fixed;
  inset: 0 0 auto auto;
  width: min(100%, 420px);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 14px 20px max(24px, env(safe-area-inset-bottom));
  border: 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
  display: none;
  flex-direction: column;
  transform: translateX(100%);
  transition:
    transform 320ms var(--salida),
    display 320ms allow-discrete,
    overlay 320ms allow-discrete;
}

.menu[open] {
  display: flex;
  transform: translateX(0);
}

@starting-style {
  .menu[open] {
    transform: translateX(100%);
  }
}

.menu::backdrop {
  background: rgb(5 7 12 / 0);
  transition:
    background-color 320ms ease,
    display 320ms allow-discrete,
    overlay 320ms allow-discrete;
}

.menu[open]::backdrop {
  background: rgb(5 7 12 / 0.6);
}

@starting-style {
  .menu[open]::backdrop {
    background: rgb(5 7 12 / 0);
  }
}

.menu-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.menu-nav a {
  display: flex;
  align-items: center;
  min-height: 58px;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--borde);
  opacity: 0;
  transform: translateX(16px);
}

/* los enlaces entran escalonados: el ojo baja por la lista en orden */
.menu[open] .menu-nav a {
  animation: menu-entra 380ms var(--salida) forwards;
}

.menu-nav a:nth-child(2) { animation-delay: 40ms; }
.menu-nav a:nth-child(3) { animation-delay: 80ms; }
.menu-nav a:nth-child(4) { animation-delay: 120ms; }
.menu-nav a:nth-child(5) { animation-delay: 160ms; }
.menu-nav a:nth-child(6) { animation-delay: 200ms; }

@keyframes menu-entra {
  to {
    opacity: 1;
    transform: none;
  }
}

.menu-nav a[aria-current='page'] {
  color: var(--acento);
}

.menu-pie {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

/* ═══════════ ENTRADAS AL CARGAR ═══════════ */

.js .entra {
  opacity: 0;
  transform: translateY(16px);
  animation: aparece 700ms var(--salida) forwards;
  animation-delay: calc(1250ms + var(--n, 0) * 70ms);
}

.js.sin-carga .entra {
  animation-delay: calc(60ms + var(--n, 0) * 70ms);
}

@keyframes aparece {
  to {
    opacity: 1;
    transform: none;
  }
}

/* titular palabra a palabra: cada una sube desde detrás de su propia línea */
.titular-palabras .p {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.titular-palabras .p > span {
  display: inline-block;
}

.js .titular-palabras .p > span {
  transform: translateY(108%);
  animation: sube 850ms var(--salida) forwards;
  animation-delay: calc(1250ms + var(--n, 0) * 65ms);
}

.js.sin-carga .titular-palabras .p > span {
  animation-delay: calc(60ms + var(--n, 0) * 65ms);
}

/* ── revelado al entrar en pantalla ──
   Solo opacidad y desplazamiento. Nunca clip-path ni overflow oculto en el
   padre: vuelven el elemento invisible para el IntersectionObserver. */
.js .revela {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms var(--salida),
    transform 700ms var(--salida);
  transition-delay: var(--retraso, 0ms);
}

.js .revela.visible {
  opacity: 1;
  transform: none;
}

/* ═══════════ AURORA ═══════════
   Brillos que se desplazan muy despacio detrás de los titulares: dan vida
   al primer vistazo sin competir con el texto. */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brillo), transparent 65%);
  animation: deriva 22s ease-in-out infinite alternate;
}

.aurora span:nth-child(1) {
  top: -24vmax;
  left: -10vmax;
}

.aurora span:nth-child(2) {
  top: -14vmax;
  right: -16vmax;
  animation-duration: 28s;
  animation-direction: alternate-reverse;
  opacity: 0.8;
}

.aurora span:nth-child(3) {
  bottom: -30vmax;
  left: 30%;
  animation-duration: 34s;
  opacity: 0.55;
}

.aurora-suave span {
  opacity: 0.7;
}

@keyframes deriva {
  to {
    transform: translate3d(8vmax, 6vmax, 0) scale(1.15);
  }
}

/* ═══════════ HERO ═══════════ */

.hero {
  position: relative;
  isolation: isolate;
  padding: 40px 0 56px;
}

@media (min-width: 1024px) {
  .hero {
    padding: 56px 0 72px;
  }
}

.hero-rejilla {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-rejilla {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
  }
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-2);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

.hero h1 .acento span {
  background: linear-gradient(100deg, var(--acento), var(--acento-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: 22px;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: var(--texto-2);
  max-width: 46ch;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-visual {
  position: relative;
  padding: 0 0 16% 6%;
}

.navegador {
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-alta);
}

.navegador-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-2);
}

.navegador-barra::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borde-fuerte);
  box-shadow: 13px 0 0 var(--borde-fuerte), 26px 0 0 var(--borde-fuerte);
  margin-right: 30px;
}

.navegador img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.navegador-b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
}

.hero-chapa {
  position: absolute;
  right: -2%;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-tarjeta);
  background: color-mix(in oklab, var(--superficie) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra);
  font-size: 0.85rem;
}

.hero-chapa .i {
  font-size: 1.4rem;
  color: var(--acento);
}

.hero-chapa strong {
  display: block;
  font-weight: 600;
}

.hero-chapa span {
  color: var(--texto-2);
}

/* las capturas flotan con ritmos distintos: profundidad, no adorno */
.flota {
  animation: flota 7s ease-in-out infinite alternate;
}

.flota-lenta {
  animation-duration: 9s;
  animation-delay: -3s;
}

.flota-rapida {
  animation-duration: 5s;
  animation-delay: -1s;
}

@keyframes flota {
  to {
    transform: translateY(-10px);
  }
}

@media (max-width: 1023px) {
  .hero-visual {
    padding: 0 0 18% 4%;
  }

  .hero-chapa {
    right: 0;
  }
}

/* ═══════════ CIFRAS ═══════════ */

.cifras {
  border-block: 1px solid var(--borde);
  background: color-mix(in oklab, var(--fondo-2) 70%, transparent);
}

.cifras-rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .cifras-rejilla {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cifra {
  padding: 24px 16px 24px 0;
}

.cifra:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--borde);
}

@media (max-width: 899px) {
  .cifra:nth-child(-n + 2) {
    border-bottom: 1px solid var(--borde);
  }
}

@media (min-width: 900px) {
  .cifra {
    padding: 30px 24px;
  }

  .cifra + .cifra {
    border-left: 1px solid var(--borde);
  }

  .cifra:first-child {
    padding-left: 0;
  }
}

.cifra-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.cifra strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cifra-num span {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--acento);
}

.cifra > p:last-child {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--texto-2);
  max-width: 26ch;
}

/* ═══════════ CINTA DE TECNOLOGÍAS ═══════════
   La única cinta de la web: enseña de un vistazo la amplitud del oficio. */
.cinta {
  overflow: hidden;
  padding: 18px 0;
  border-bottom: 1px solid var(--borde);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.cinta-pista {
  display: flex;
  width: max-content;
  animation: cinta 46s linear infinite;
}

.cinta:hover .cinta-pista {
  animation-play-state: paused;
}

.cinta ul {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}

.cinta li {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 0.9rem;
  color: var(--texto-2);
  white-space: nowrap;
}

@keyframes cinta {
  to {
    transform: translateX(-50%);
  }
}

/* ═══════════ SECCIONES ═══════════ */

.seccion {
  position: relative;
  padding: 64px 0;
}

@media (min-width: 1024px) {
  .seccion {
    padding: 88px 0;
  }
}

.seccion-compacta {
  padding-top: 32px;
}

@media (min-width: 1024px) {
  .seccion-compacta {
    padding-top: 40px;
  }
}

.seccion-banda {
  background: var(--fondo-2);
  border-block: 1px solid var(--borde);
}

.cab-seccion {
  max-width: 680px;
  margin-bottom: 36px;
}

.cab-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: none;
}

.cab-fila > div {
  max-width: 640px;
}

.seccion h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.cab-seccion p,
.por-que-texto > p {
  margin-top: 12px;
  color: var(--texto-2);
  font-size: 1.06rem;
}

.parrafo-2 {
  margin-top: 14px;
  color: var(--texto-2);
}

/* ═══════════ TARJETAS CON FOCO DE LUZ ═══════════
   Un brillo sigue al ratón dentro de la tarjeta: indica qué está bajo el
   cursor y que es pulsable. Solo con ratón; en táctil no existe. */
.foco {
  position: relative;
  isolation: isolate;
}

.foco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--acento-suave), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.foco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--acento), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .foco:hover::before,
  .foco:hover::after {
    opacity: 1;
  }
}

/* Parallax de imágenes ligado al scroll: la captura se mueve dentro de su
   marco más despacio que la página. Sin JavaScript; si el navegador no lo
   soporta, la imagen queda quieta. */
.paralaje {
  overflow: hidden;
}

@supports (animation-timeline: view()) {
  .paralaje img {
    animation: paralaje linear both;
    animation-timeline: view();
  }
}

@keyframes paralaje {
  from {
    transform: translateY(-4%) scale(1.1);
  }
  to {
    transform: translateY(4%) scale(1.1);
  }
}

/* ═══════════ BENTO DE SERVICIOS ═══════════ */

.bento {
  display: grid;
  gap: 14px;
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      'web web google'
      'web web equipo'
      'red soporte soporte';
  }

  .celda-web { grid-area: web; }
  .bento > :nth-child(2) { grid-area: google; }
  .bento > :nth-child(3) { grid-area: equipo; }
  .bento > :nth-child(4) { grid-area: red; }
  .celda-acento { grid-area: soporte; }
}

.celda {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.celda h3 {
  font-size: 1.2rem;
}

.celda p {
  color: var(--texto-2);
  font-size: 0.97rem;
}

.celda-icono {
  font-size: 1.6rem;
  color: var(--acento);
  margin-bottom: 4px;
}

.celda-mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--acento);
}

.celda-mas .i,
.tt-texto h3 .i {
  transition: transform 220ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
  .celda:hover .celda-mas .i {
    transform: translateX(3px);
  }
}

.celda-web {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.celda-web .celda-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 22px;
}

.celda-web h3 {
  font-size: 1.5rem;
}

.celda-img {
  margin: auto 26px 0;
  border-radius: var(--r-interior) var(--r-interior) 0 0;
  box-shadow: inset 0 0 0 1px var(--borde);
}

.celda-img img {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  object-position: top;
}

.celda-acento {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--acento-suave), transparent 60%),
    var(--superficie-2);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.etiquetas li {
  font-size: 0.82rem;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--borde);
  color: var(--texto-2);
}

/* ═══════════ TRABAJOS (inicio) ═══════════ */

.tarjetas-trabajo {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .tarjetas-trabajo {
    grid-template-columns: 1fr 1fr;
  }
}

.tarjeta-trabajo {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  overflow: hidden;
}

.tt-img img {
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  object-position: top;
}

.tt-texto {
  padding: 22px 24px 26px;
}

.tt-tipo {
  font-size: 0.9rem;
  color: var(--acento);
}

.tt-texto h3 {
  margin-top: 4px;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.tt-texto p:last-child {
  margin-top: 8px;
  color: var(--texto-2);
}

/* ═══════════ POR QUÉ TRABAJAR CONMIGO ═══════════ */

.por-que {
  display: grid;
  gap: 36px;
}

@media (min-width: 1024px) {
  .por-que {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
  }
}

.por-que-texto .enlace {
  margin-top: 10px;
}

.compromisos {
  display: grid;
  gap: 12px;
}

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

.compromisos li {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.compromisos .i {
  font-size: 1.5rem;
  color: var(--acento);
  margin-top: 2px;
}

.compromisos h3 {
  font-size: 1.05rem;
}

.compromisos p {
  margin-top: 4px;
  font-size: 0.94rem;
  color: var(--texto-2);
}

.compromisos-2 {
  margin-top: 22px;
}

/* ═══════════ PROCESO (resumen del inicio) ═══════════ */

.pasos {
  position: relative;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-top: 30px;
  }

  .pasos::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--borde-fuerte);
  }
}

.paso {
  position: relative;
  padding-left: 28px;
}

@media (min-width: 900px) {
  .paso {
    padding-left: 0;
  }
}

.paso::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fondo-2);
  box-shadow: inset 0 0 0 2px var(--acento);
  transition: background-color 400ms ease 300ms;
}

.paso.visible::before {
  background: var(--acento);
}

@media (min-width: 900px) {
  .paso::before {
    top: -30px;
  }
}

@media (max-width: 899px) {
  .paso:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 26px;
    bottom: -24px;
    width: 1px;
    background: var(--borde-fuerte);
  }
}

.paso h3 {
  font-size: 1.12rem;
}

.paso p {
  margin-top: 6px;
  color: var(--texto-2);
  font-size: 0.96rem;
}

/* ═══════════ BANDA FINAL DE CONTACTO ═══════════ */

.banda-cta {
  padding: 24px 0 72px;
}

.seccion-banda + .banda-cta {
  padding-top: 64px;
}

.banda-in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 40px 28px;
  border-radius: 22px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-alta);
}

@media (min-width: 900px) {
  .banda-in {
    grid-template-columns: 1fr auto;
    padding: 52px 56px;
  }
}

.aurora-banda span {
  width: 36vmax;
  height: 36vmax;
}

.banda-texto h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  letter-spacing: -0.035em;
}

.banda-texto p {
  margin-top: 10px;
  color: var(--texto-2);
  font-size: 1.06rem;
  max-width: 48ch;
}

.banda-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

/* ═══════════ CABECERA DE LAS PÁGINAS INTERIORES ═══════════ */

.cab-pagina {
  position: relative;
  isolation: isolate;
  padding: 36px 0 24px;
}

@media (min-width: 1024px) {
  .cab-pagina {
    padding: 52px 0 28px;
  }
}

.miga {
  display: flex;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--texto-2);
  margin-bottom: 18px;
}

.miga a {
  color: var(--acento);
}

.cab-pagina h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 18ch;
}

.cab-pagina-intro {
  margin-top: 18px;
  max-width: 64ch;
  font-size: clamp(1.04rem, 1.4vw, 1.16rem);
  color: var(--texto-2);
}

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.indice a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 0.93rem;
  transition: box-shadow 200ms ease, transform 160ms var(--salida);
}

.indice a:active {
  transform: scale(0.97);
}

.indice .i {
  color: var(--acento);
}

@media (hover: hover) and (pointer: fine) {
  .indice a:hover {
    box-shadow: inset 0 0 0 1px var(--acento);
  }
}

/* ═══════════ SERVICIOS (página) ═══════════ */

.servicios-lista {
  display: grid;
  gap: 18px;
}

.servicio {
  display: grid;
  gap: 24px;
  padding: 26px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  scroll-margin-top: calc(var(--cabecera) + 16px);
}

@media (min-width: 1024px) {
  .servicio {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    padding: 40px;
  }
}

.servicio-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.servicio h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}

.servicio-lead {
  margin-top: 12px;
  font-size: 1.1rem;
}

.servicio-cab > p:not(.servicio-lead) {
  margin-top: 12px;
  color: var(--texto-2);
}

.servicio-cab > .servicio-ideal {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-interior);
  background: var(--acento-suave);
  color: var(--texto);
  font-size: 0.97rem;
}

.servicio-ideal strong {
  color: var(--acento);
}

.servicio-lado {
  padding: 24px;
  border-radius: var(--r-interior);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--borde);
  align-self: start;
  overflow: hidden;
}

.servicio-lado h3 {
  font-size: 1.05rem;
}

.servicio-img {
  margin: -24px -24px 20px;
}

.servicio-img img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: top;
}

.nota {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--texto-2);
}

.lista-check {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lista-check li {
  display: flex;
  gap: 10px;
  font-size: 0.97rem;
}

.lista-check .i {
  margin-top: 0.22em;
  color: var(--acento);
}

.lista-grande {
  margin-top: 22px;
}

.lista-grande li {
  padding: 14px 16px;
  border-radius: var(--r-interior);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

/* ── preguntas frecuentes ── */
.faq-rejilla {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .faq-rejilla {
    grid-template-columns: 4fr 7fr;
    gap: 64px;
    align-items: start;
  }
}

.faq-intro {
  margin-top: 12px;
  color: var(--texto-2);
}

.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 0 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq summary .i {
  color: var(--texto-2);
  transition: transform 260ms var(--salida);
}

.faq details[open] summary .i {
  transform: rotate(180deg);
  color: var(--acento);
}

/* la respuesta se despliega en vez de aparecer de golpe */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 320ms var(--salida),
    content-visibility 320ms allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

.faq-cuerpo {
  padding: 0 22px 20px;
  color: var(--texto-2);
}

/* ═══════════ TRABAJOS (página) ═══════════ */

.estudio {
  scroll-margin-top: calc(var(--cabecera) + 16px);
}

.estudio + .estudio {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--borde);
}

.estudio-portada {
  display: block;
  border-radius: var(--r-tarjeta);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-alta);
}

.estudio-portada img {
  width: 100%;
  aspect-ratio: 16 / 7.5;
  object-fit: cover;
  object-position: top;
}

.estudio-cuerpo {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

@media (min-width: 1024px) {
  .estudio-cuerpo {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    margin-top: 40px;
  }
}

.estudio-principal h2 {
  margin-top: 6px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.estudio-principal h3 {
  margin-top: 26px;
  font-size: 1.1rem;
}

.estudio-principal p:not(.tt-tipo) {
  margin-top: 10px;
  color: var(--texto-2);
}

.estudio-ficha {
  padding: 24px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  align-self: start;
}

.estudio-ficha dl {
  display: grid;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}

.estudio-ficha dl div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: 0.95rem;
}

.estudio-ficha dt {
  color: var(--texto-2);
}

.estudio-ficha h3 {
  font-size: 1.02rem;
}

.estudio-ficha .btn {
  margin-top: 22px;
  width: 100%;
}

.galeria {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

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

.galeria figure {
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.galeria img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.galeria figcaption {
  position: relative;
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--texto-2);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}

/* ═══════════ PROCESO (página) ═══════════ */

.etapas {
  position: relative;
  display: grid;
  gap: 18px;
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .etapa {
    grid-template-columns: 64px 1fr;
    gap: 28px;
  }
}

/* la línea entre etapas se dibuja al aparecer cada una: progreso visible */
.etapa:not(:last-child)::before,
.etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 60px;
  bottom: -14px;
  width: 2px;
  border-radius: 2px;
  background: var(--borde);
}

.etapa:not(:last-child)::after {
  background: var(--acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--salida) 300ms;
}

@media (min-width: 768px) {
  .etapa:not(:last-child)::before,
  .etapa:not(:last-child)::after {
    left: 31px;
    top: 72px;
  }
}

.etapa.visible::after {
  transform: scaleY(1);
}

.etapa-marca {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  color: var(--acento);
  font-size: 1.5rem;
  transition: background-color 400ms ease 200ms, color 400ms ease 200ms;
}

@media (min-width: 768px) {
  .etapa-marca {
    width: 64px;
    height: 64px;
    font-size: 1.7rem;
  }
}

.etapa.visible .etapa-marca {
  background: var(--acento);
  color: var(--sobre-acento);
}

.etapa-texto {
  padding: 24px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

@media (min-width: 768px) {
  .etapa-texto {
    padding: 30px 34px;
  }
}

.etapa-texto h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.etapa-lead {
  margin-top: 4px;
  color: var(--acento);
  font-weight: 500;
}

.etapa-texto > p:not(.etapa-lead) {
  margin-top: 12px;
  color: var(--texto-2);
}

.etapa-recibes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 0.95rem;
}

.etapa-recibes h3 {
  font-size: 0.95rem;
  color: var(--texto-2);
  font-weight: 500;
  letter-spacing: 0;
}

.dos-columnas {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .dos-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.dos-columnas-texto h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* ═══════════ SOBRE MÍ ═══════════ */

.sobre-cab {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .sobre-cab {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: end;
  }
}

.ficha-datos {
  display: grid;
  padding: 8px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra);
}

.ficha-datos div {
  padding: 14px 16px;
}

.ficha-datos div + div {
  border-top: 1px solid var(--borde);
}

.ficha-datos dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--texto-2);
}

.ficha-datos dt .i {
  color: var(--acento);
}

.ficha-datos dd {
  margin-top: 4px;
  font-size: 0.98rem;
}

.trayectoria {
  display: grid;
  gap: 16px;
}

.trayectoria > li {
  display: grid;
  gap: 8px 32px;
  padding: 26px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

@media (min-width: 900px) {
  .trayectoria > li {
    grid-template-columns: 200px 1fr;
    padding: 32px;
  }
}

.tr-fecha {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--texto-2);
}

.tr-cuerpo h3 {
  font-size: 1.25rem;
}

.tr-lugar {
  margin-top: 4px;
  color: var(--acento);
  font-size: 0.95rem;
}

.tr-cuerpo ul {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .tr-cuerpo ul {
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
  }
}

.tr-cuerpo li {
  position: relative;
  padding-left: 18px;
  color: var(--texto-2);
  font-size: 0.97rem;
}

.tr-cuerpo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--acento-suave);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.formacion {
  display: grid;
  gap: 16px;
}

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

.tarjeta-formacion {
  padding: 28px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.tarjeta-formacion > .i {
  font-size: 1.8rem;
  color: var(--acento);
  margin-bottom: 14px;
}

.tarjeta-formacion h3 {
  margin-top: 6px;
  font-size: 1.25rem;
}

.tarjeta-formacion > p:last-child {
  margin-top: 12px;
  color: var(--texto-2);
}

.competencias {
  display: grid;
  gap: 14px;
}

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

@media (min-width: 1024px) {
  .competencias {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grupo {
  padding: 22px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.grupo h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.grupo h3 .i {
  color: var(--acento);
  font-size: 1.25rem;
}

/* ═══════════ CONTACTO ═══════════ */

.contacto-rejilla {
  display: grid;
  gap: 18px;
}

@media (min-width: 1024px) {
  .contacto-rejilla {
    grid-template-columns: 7fr 5fr;
    gap: 24px;
    align-items: start;
  }
}

.formulario {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra);
  scroll-margin-top: calc(var(--cabecera) + 16px);
}

@media (min-width: 768px) {
  .formulario {
    padding: 36px;
  }
}

.formulario-fila {
  display: grid;
  gap: 18px;
}

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

.campo {
  display: grid;
  gap: 8px;
  align-content: start;
}

.campo label {
  font-size: 0.93rem;
  font-weight: 500;
}

.opcional {
  font-weight: 400;
  color: var(--texto-2);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-interior);
  background-color: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 1rem; /* 16px: iOS no hace zoom al enfocar */
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  transition: box-shadow 160ms ease;
  resize: vertical;
}

.campo select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--acento);
}

.campo [aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px var(--error);
}

.campo-ayuda {
  font-size: 0.86rem;
  color: var(--texto-2);
}

.campo-error {
  font-size: 0.88rem;
  color: var(--error);
}

.btn-enviar {
  justify-self: start;
}

.btn-enviar[aria-busy='true'] {
  opacity: 0.7;
  pointer-events: none;
}

.formulario-aviso {
  font-size: 0.95rem;
  min-height: 1.5em;
}

.formulario-aviso.ok {
  color: var(--exito);
}

.formulario-aviso.mal {
  color: var(--error);
}

.formulario-aviso a {
  text-decoration: underline;
}

.contacto-lado {
  display: grid;
  gap: 18px;
}

.tarjeta-contacto {
  padding: 26px;
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.tarjeta-contacto h2 {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.directo {
  display: grid;
  margin-top: 12px;
}

.directo li a,
.directo-fijo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  overflow-wrap: anywhere;
}

.directo li:last-child a,
.directo li:last-child .directo-fijo {
  border-bottom: 0;
}

.directo .i {
  font-size: 1.3rem;
  color: var(--acento);
}

.directo strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--texto-2);
}

@media (hover: hover) and (pointer: fine) {
  .directo li a {
    transition: color 200ms ease;
  }

  .directo li a:hover {
    color: var(--acento);
  }
}

.despues {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  counter-reset: despues;
}

.despues li {
  position: relative;
  padding-left: 40px;
  color: var(--texto-2);
  font-size: 0.95rem;
  counter-increment: despues;
}

.despues li::before {
  content: counter(despues);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--acento-suave);
  color: var(--acento);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.despues strong {
  display: block;
  color: var(--texto);
  font-weight: 600;
}

/* ═══════════ PIE ═══════════ */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--exito);
}

/* único punto de color: es un estado real, y late despacio para decirlo */
.estado-punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exito);
  flex-shrink: 0;
}

.estado-punto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--exito);
  animation: latido 2.4s ease-out infinite;
}

@keyframes latido {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-2);
}

.pie-rejilla {
  display: grid;
  gap: 32px;
  padding-block: 48px 32px;
}

@media (min-width: 900px) {
  .pie-rejilla {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }
}

.pie-marca p:not(.estado) {
  margin: 14px 0;
  color: var(--texto-2);
  font-size: 0.95rem;
  max-width: 42ch;
}

.pie-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pie-col h2 {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.pie-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--texto-2);
  font-size: 0.95rem;
}

@media (hover: hover) and (pointer: fine) {
  .pie-col a:hover,
  .enlace-sutil:hover {
    color: var(--texto);
  }
}

.pie-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 12px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  font-size: 0.9rem;
  color: var(--texto-2);
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════
   Menos movimiento, no cero: se quitan desplazamientos, derivas y la pantalla
   de carga; se conservan cambios de color y opacidad que ayudan a entender. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .carga {
    display: none;
  }

  .js .entra,
  .js .revela,
  .js .titular-palabras .p > span {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .aurora span,
  .flota,
  .cinta-pista,
  .estado-punto::after,
  .paralaje img,
  .progreso {
    animation: none !important;
  }

  .progreso {
    display: none;
  }

  .menu-nav a {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .menu,
  .menu::backdrop,
  .faq details::details-content {
    transition-duration: 0ms;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}