/* =============================================================
   TEINE STUDIO — hoja de estilo unica
   Arquetipo: gradiente reactivo al raton (fondo casi negro,
   tipografia grande, un solo acento incandescente).

   Secciones:
     1. Fichas de color y medidas
     2. Reinicio y base
     3. Utilidades
     4. Tipografia
     5. Componentes
     6. Secciones de la pagina
     7. Efectos
     8. Responsive
     9. Movimiento reducido (solo lo molesto)
   ============================================================= */

/* =============================================================
   1. Fichas de color y medidas
   ============================================================= */
:root {
  /* Fondos — azul noche muy oscuro, no negro puro */
  --bg: #05070d;
  --bg-brasa: #070a12;
  --bg-2: #0a0e18;
  --bg-3: #0f1522;
  --bg-4: #161e2e;

  /* Texto */
  --ink: #e9eff9;
  --ink-2: #bfcade;
  --mute: #8291ab;
  --dim: #717f99; /* subido el 04-10-2026: el anterior (#55627a) daba 3,27 de contraste */

  /* Acento principal: azul electrico. Es el color de los detalles. */
  --accent: #2f6bff;
  --accent-claro: #6ea4ff;
  --accent-texto: #6ea4ff; /* el azul SOLO para texto: #2f6bff se queda en 4,48 y no llega */
  --accent-2: #22d3ee; /* cian, para lo que tiene que cantar */
  --accent-ink: #04060c;

  /* La brasa del nombre (teine = fuego) se queda de rescoldo:
     solo el boton principal y algun detalle suelto. */
  --brasa: #ff5b29;
  --brasa-2: #ff8a3d;

  /* Paradas del gradiente reactivo */
  --g1: #1e3aff;
  --g2: #12a6d8;
  --g3: #5b2bc9;
  --g4: #d1421a;

  /* Lineas */
  --line: rgba(110, 164, 255, 0.14);
  --line-2: rgba(110, 164, 255, 0.28);

  /* Tipografias */
  --display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --reloj: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Medidas */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ancho: 1360px;
  --ancho-texto: 68ch;
  --nav-h: 76px;

  /* Curvas */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Posicion del raton (la pone el JS) */
  --mx: 50%;
  --my: 40%;
}

@property --borde-angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* El fondo del documento cambia de tono segun la seccion */
html {
  background: var(--bg);
  transition: background-color 1.1s var(--ease-soft);
}
html[data-tono-activo="brasa"] {
  background: var(--bg-brasa);
}
html[data-tono-activo="oscuro"] {
  background: var(--bg);
}

/* =============================================================
   2. Reinicio y base
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

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

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
}

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

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

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

/* =============================================================
   3. Utilidades
   ============================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 6px;
  font-weight: 500;
}
.skip-link:focus {
  top: 1rem;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =============================================================
   4. Tipografia
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kicker-num {
  color: var(--dim);
}
.kicker-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(47, 107, 255, 0.6);
  animation: latido 2.6s var(--ease-soft) infinite;
}
@keyframes latido {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 107, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(47, 107, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 107, 255, 0);
  }
}

.titulo-grande {
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 26ch;
}
.titulo-grande em {
  font-style: normal;
  background-image: linear-gradient(100deg, var(--accent-claro), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.seccion-entradilla {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
  font-weight: 300;
}

.nota-pie {
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
}

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

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}
.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.85rem;
}

.btn-primary {
  background: var(--brasa);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(255, 91, 41, 0.55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(255, 91, 41, 0.7);
  background: var(--brasa-2);
}

/* El secundario, azul y con el borde marcado */
.btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: var(--accent-2);
}

/* --- Navegacion --- */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition:
    background-color 0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.brand-mark {
  width: 20px;
  height: 20px;
  color: var(--accent-texto);
  transition: transform 0.7s var(--ease-out);
}
.brand:hover .brand-mark {
  transform: rotate(90deg) scale(1.15);
}
.brand-word {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-word-dim {
  color: var(--dim);
  font-weight: 300;
  margin-left: 0.3em;
}

.nav-links {
  display: none;
  gap: 1.9rem;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--mute);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.3s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}
.nav-links a.is-active {
  color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.nav-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --- Menu de movil --- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-soft);
}
.menu-movil[aria-hidden="false"] {
  clip-path: inset(0 0 0 0);
}
.menu-movil nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.menu-movil nav a {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height: 1.22;
  color: var(--ink);
  transition: color 0.3s var(--ease-out);
}
.menu-movil nav a:hover {
  color: var(--accent-2);
}
.menu-movil-pie {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

/* --- Puntos laterales --- */
.side-dots {
  position: fixed;
  top: 50%;
  right: 1.4rem;
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(-50%);
}
.side-dots a {
  width: 20px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.side-dots a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(247, 243, 238, 0.24);
  transition:
    width 0.4s var(--ease-out),
    height 0.4s var(--ease-out),
    background-color 0.4s var(--ease-out);
}
.side-dots a.is-active::after {
  width: 11px;
  height: 11px;
  background: var(--accent);
}
.side-dots a::before {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}
.side-dots a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* --- Barra de progreso --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: rgba(247, 243, 238, 0.07);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform 0.08s linear;
}

/* --- Portada de carga --- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition:
    opacity 0.9s var(--ease-out),
    clip-path 1.1s var(--ease-soft);
  /* Red de seguridad: se va sola a los 4,5 s aunque el JS falle */
  animation: splashSeguro 0.01s 4.5s forwards;
}
.splash.is-out {
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
@keyframes splashSeguro {
  to {
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
  }
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.splash-mark {
  width: 34px;
  height: 34px;
  color: var(--accent-texto);
  animation: chispa 2.2s var(--ease-soft) infinite;
}
@keyframes chispa {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: rotate(90deg) scale(1.25);
    opacity: 1;
  }
}
.splash-word {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--mute);
}
.splash-line {
  width: 120px;
  height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.splash-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: cargando 2.4s var(--ease-soft) forwards;
}
@keyframes cargando {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* =============================================================
   6. Secciones de la pagina
   ============================================================= */
.seccion {
  position: relative;
  padding-block: clamp(5rem, 11vw, 10rem);
}
.seccion-cabecera {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.seccion-cabecera-ancha {
  max-width: 76ch;
}

/* --- 01 PORTADA --- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 2.5rem) 5rem;
  overflow: hidden;
}
.hero-gradient {
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(circle 620px at var(--mx) var(--my), var(--g1) 0%, transparent 70%),
    radial-gradient(
      circle 820px at calc(var(--mx) + 12%) calc(var(--my) - 14%),
      var(--g2) 0%,
      transparent 68%
    ),
    radial-gradient(
      circle 740px at calc(var(--mx) - 16%) calc(var(--my) + 16%),
      var(--g4) 0%,
      transparent 66%
    ),
    radial-gradient(circle 560px at 82% 88%, var(--g3) 0%, transparent 72%);
  opacity: 0.34;
}
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-rejilla {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 10%, transparent 75%);
  opacity: 0.6;
}
.hero-inner {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(2.9rem, 9vw, 8.2rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
  max-width: 15ch;
}
.hero-title em {
  font-style: normal;
  position: relative;
  background-image: linear-gradient(100deg, var(--accent-claro) 0%, var(--accent-2) 55%, var(--accent-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
}
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.hero-bajar {
  position: absolute;
  left: var(--gutter);
  bottom: 1.8rem;
  display: none;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-bajar-linea {
  width: 52px;
  height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.hero-bajar-linea::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: barrido 2.6s var(--ease-soft) infinite;
}
@keyframes barrido {
  0% {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  45% {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
  55% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

/* --- 03 PROBLEMA --- */
.problema-lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.problema-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.5s var(--ease-out);
}
.problema-fila:hover {
  background: rgba(47, 107, 255, 0.035);
}
.problema-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--accent-texto);
  padding-top: 0.45rem;
}
.problema-cuerpo h3 {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 2.35rem);
  line-height: 1.08;
  margin-bottom: 0.6rem;
}
.problema-cuerpo p {
  color: var(--mute);
  max-width: 52ch;
}

/* --- 04 LAS DOS VIAS --- */
.vias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
.via {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.7rem, 3.4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  overflow: hidden;
  transition:
    border-color 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.via:hover {
  border-color: rgba(47, 107, 255, 0.45);
  background: var(--bg-3);
}
.via-etiqueta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-texto);
}
.via-titulo {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
}
.via-titulo em {
  font-style: normal;
  background-image: linear-gradient(100deg, var(--accent-claro), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.via-texto {
  color: var(--mute);
  max-width: 44ch;
}
.via-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.via-items li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.via-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}
.via-flecha {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.5s var(--ease-out);
}
.via:hover .via-flecha {
  transform: translateX(8px);
  color: var(--accent-2);
}

/* --- 05 BLOQUES DE DOS --- */
.bloques-dos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
.bloque {
  position: relative;
  isolation: isolate;
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  transition: border-color 0.5s var(--ease-out);
}
.bloque:hover {
  border-color: var(--line-2);
}
.bloque-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.bloque h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 0.9rem;
}
.bloque > p {
  color: var(--mute);
  margin-bottom: 1.4rem;
  max-width: 46ch;
}

.lista-marcas {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.lista-marcas li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.lista-marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* --- 06 AEO --- */
.chat-demo {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 820px;
}
.chat-aviso {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.6rem;
}
.chat-hilo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.chat-burbuja {
  padding: 1.1rem 1.3rem;
  border-radius: 5px;
  max-width: 92%;
}
.chat-quien {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.chat-pregunta {
  background: var(--bg-3);
  border: 1px solid var(--line);
  align-self: flex-start;
}
.chat-respuesta {
  background: rgba(47, 107, 255, 0.07);
  border: 1px solid rgba(47, 107, 255, 0.28);
  align-self: flex-end;
}
.chat-burbuja p {
  font-size: 0.98rem;
  line-height: 1.5;
}
.chat-respuesta mark {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.05em 0.3em;
  border-radius: 4px;
  font-weight: 500;
}
.chat-medida {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.chat-medida-dato {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-medida-etq {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.chat-medida-dato strong {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  font-weight: 400;
}
.chat-medida-si {
  color: var(--accent-2);
}
.chat-medida-no {
  color: var(--dim);
}

.aeo-notas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.aeo-notas h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
}
.aeo-notas p {
  color: var(--mute);
  max-width: 48ch;
}

/* --- 07 EL METODO --- */
.pasos {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: paso;
}
.paso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--line);
}
.paso:last-child {
  border-bottom: 1px solid var(--line);
}
.paso-num span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-texto);
  transition:
    border-color 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out),
    color 0.5s var(--ease-out);
}
.paso:hover .paso-num span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.paso-cuerpo h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  margin-bottom: 0.7rem;
}
.paso-cuerpo p {
  color: var(--mute);
  max-width: 54ch;
}
.paso-entrega {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-2) !important;
}

/* --- 08 HERRAMIENTAS --- */
.tabla-herramientas {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.th-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease-out);
}
.th-fila:last-child {
  border-bottom: 0;
}
.th-fila:not(.th-cabecera):hover {
  background: rgba(47, 107, 255, 0.05);
}
.th-cabecera {
  background: var(--bg-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.64rem;
  color: var(--dim);
}
.th-fila > span:first-child {
  color: var(--ink);
}
.th-fila > span:nth-child(2) {
  color: var(--mute);
}
.th-fila > span:nth-child(3) {
  color: var(--accent-texto);
}

/* --- 09 COMPARADOR ANTES / DESPUES --- */
.comparador {
  max-width: 980px;
}
.comparador-caja {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  --corte: 50%;
}
.comparador-lado {
  position: absolute;
  inset: 0;
}
.comparador-despues {
  clip-path: inset(0 0 0 var(--corte));
}
.comparador-etq {
  position: absolute;
  top: 1rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(5, 7, 13, 0.75);
  backdrop-filter: blur(6px);
}
.comparador-antes .comparador-etq {
  left: 1rem;
  color: var(--mute);
}
.comparador-despues .comparador-etq {
  right: 1rem;
  color: var(--accent-texto);
}
.marco-vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.comparador-despues .marco-vacio {
  background-color: rgba(47, 107, 255, 0.06);
}
.marco-vacio span {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--mute);
}
.marco-vacio small {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--dim);
}
.comparador-tirador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  width: 2px;
  background: var(--accent);
  z-index: 4;
  pointer-events: none;
}
.comparador-tirador::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.18);
}
.comparador input[type="range"] {
  width: 100%;
  margin-top: 1.2rem;
  accent-color: var(--accent);
}

/* --- 10 TRABAJOS --- */
.trabajos {
  border-top: 1px solid var(--line);
}
.trabajo {
  border-bottom: 1px solid var(--line);
}
.trabajo-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nombre flecha"
    "tipo tipo"
    "que que";
  gap: 0.35rem 1rem;
  align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
  transition: padding-inline 0.55s var(--ease-out);
}
.trabajo-fila::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  background: rgba(47, 107, 255, 0.05);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.trabajo-fila:hover::before {
  opacity: 1;
}
.trabajo-fila:hover {
  padding-inline: 1rem;
}
.trabajo-ano {
  display: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}
.trabajo-nombre {
  grid-area: nombre;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  transition: color 0.4s var(--ease-out);
}
.trabajo-fila:hover .trabajo-nombre {
  color: var(--accent-2);
}
.trabajo-tipo {
  grid-area: tipo;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-texto);
}
.trabajo-que {
  grid-area: que;
  font-size: 0.92rem;
  color: var(--mute);
}
.trabajo-flecha {
  grid-area: flecha;
  font-size: 1.3rem;
  color: var(--dim);
  transition:
    transform 0.5s var(--ease-out),
    color 0.4s var(--ease-out);
}
.trabajo-fila:hover .trabajo-flecha {
  transform: translateX(10px);
  color: var(--accent-texto);
}

/* --- 11 INFORME --- */
.informe-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.informe-texto {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.informe-muestra {
  position: relative;
}
.informe-hoja {
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--bg-3);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.76rem;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.informe-hoja-cab {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.informe-hoja-fecha {
  color: var(--accent-texto);
}
.informe-hoja-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.informe-hoja-fila .sube {
  color: #4ade80;
}
.informe-hoja-fila .igual {
  color: var(--mute);
}
.informe-hoja-pie {
  padding: 0.85rem 1.1rem;
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- 12 AUTOMATIZACIONES --- */
.auto-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.auto-tarjeta {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition:
    border-color 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out);
}
.auto-tarjeta:hover {
  border-color: rgba(47, 107, 255, 0.4);
  background: var(--bg-3);
}
.auto-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--accent-texto);
}
.auto-tarjeta h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}
.auto-tarjeta p {
  color: var(--mute);
  font-size: 0.95rem;
}

/* --- 13 APPS --- */
.caso {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
}
.caso-texto {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.caso-etq {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-texto);
}
.caso-texto h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.05;
}
.caso-texto > p {
  color: var(--mute);
  max-width: 48ch;
}
.caso-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.movil {
  width: min(300px, 80vw);
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background: var(--bg-4);
  box-shadow: 0 50px 100px -45px rgba(0, 0, 0, 0.9);
}
.movil-pantalla {
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  padding-bottom: 0.4rem;
}
.movil-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
}
.movil-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.movil-fila {
  display: grid;
  grid-template-columns: 26px 1fr 54px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.movil-ini {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-4);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--mute);
}
.movil-nom {
  font-size: 0.82rem;
  color: var(--ink-2);
}
.movil-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-4);
  overflow: hidden;
}
.movil-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.movil-pie {
  padding: 0.9rem 1rem 0.3rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.caso-aviso {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.apps-otras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.apps-otras h4 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.apps-otras p {
  color: var(--mute);
  font-size: 0.95rem;
}

/* --- 14 REGLAS --- */
.reglas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.regla {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.regla:last-child {
  border-bottom: 1px solid var(--line);
}
.regla-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--accent-texto);
}
.regla h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
}
.regla p {
  color: var(--mute);
  max-width: 50ch;
}

/* --- 15 FAQ --- */
.faq {
  border-top: 1px solid var(--line);
  max-width: 900px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.7rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  transition: color 0.35s var(--ease-out);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--accent-2);
}
.faq-mas {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-mas::before,
.faq-mas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transition: transform 0.45s var(--ease-out);
}
.faq-mas::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-mas::after {
  transform: rotate(0deg);
}
.faq-cuerpo {
  padding-bottom: 1.6rem;
  max-width: 60ch;
}
.faq-cuerpo p {
  color: var(--mute);
}

/* --- 16 CONTACTO --- */
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.contacto-directo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.email-gigante {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  word-break: break-word;
  position: relative;
}
.email-gigante-texto {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition:
    background-size 0.7s var(--ease-out),
    color 0.4s var(--ease-out);
  padding-bottom: 0.1em;
}
.email-gigante:hover .email-gigante-texto {
  background-size: 100% 1px;
  color: var(--accent-2);
}
.contacto-otros {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.contacto-otros a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: color 0.35s var(--ease-out);
}
.contacto-otros a:hover {
  color: var(--accent-2);
}
.contacto-etq {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.contacto-val {
  font-size: 1.05rem;
}

.contacto-form-caja {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  min-height: 420px;
}
.contacto-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-soft);
}
.contacto-form.is-sent {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.campo {
  position: relative;
}
.campo-ancho {
  grid-column: 1 / -1;
}
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 1.5rem 0.9rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition:
    border-color 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out);
}
.campo textarea {
  resize: vertical;
  min-height: 110px;
}
.campo select {
  appearance: none;
  padding-top: 1.5rem;
  cursor: pointer;
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3);
}
.campo label {
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  transition:
    top 0.3s var(--ease-out),
    font-size 0.3s var(--ease-out),
    letter-spacing 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}
.campo input:focus + label,
.campo textarea:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:not(:placeholder-shown) + label,
.campo label.label-fija {
  top: 0.45rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-texto);
}
.campo textarea + label {
  top: 1.05rem;
}

.form-acciones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
}
.btn-enviar {
  position: relative;
  min-width: 150px;
}
.form-correo {
  color: var(--mute);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition:
    color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}
.form-correo:hover,
.form-correo:focus-visible {
  color: var(--accent-texto);
  border-color: var(--accent);
}

.form-nota {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--dim);
  border-left: 2px solid var(--accent);
  padding-left: 0.8rem;
}
.form-nota a {
  color: var(--accent-texto);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.form-nota a:hover,
.form-nota a:focus-visible {
  border-color: currentColor;
}

.contacto-ok {
  position: absolute;
  left: clamp(1.4rem, 3vw, 2.2rem);
  right: clamp(1.4rem, 3vw, 2.2rem);
  top: 50%;
  transform: translateY(-40%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.8s var(--ease-out) 0.25s,
    transform 0.9s var(--ease-soft) 0.25s;
}
.contacto-ok.is-visible {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
.contacto-ok h3 {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--accent-2);
  margin-bottom: 0.6rem;
}
.contacto-ok p {
  color: var(--mute);
}
.contacto-ok-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* --- PIE --- */
.pie {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--bg-2);
}
.pie-arriba {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.brand-pie .brand-mark {
  width: 26px;
  height: 26px;
}
.brand-pie .brand-word {
  font-size: 1.2rem;
}
.pie-lema {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  max-width: 24ch;
}
.pie-columnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.pie-columnas > div {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pie-columnas h4 {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.3rem;
}
.pie-columnas a {
  font-size: 0.92rem;
  color: var(--mute);
  transition: color 0.3s var(--ease-out);
  word-break: break-word;
}
.pie-columnas a:hover {
  color: var(--accent-2);
}
.pie-abajo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.pie-legal {
  display: flex;
  gap: 1.2rem;
}
.pie-legal a:hover {
  color: var(--accent-2);
}

/* =============================================================
   7. Efectos
   ============================================================= */

/* Aparicion al bajar */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.85s var(--ease-soft),
    transform 0.85s var(--ease-soft);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Defensa obligatoria: si un elemento lleva reveal Y split, que se vea */
[data-reveal][data-split] {
  opacity: 1;
  transform: none;
}

/* Letras / palabras partidas */
.split-char,
.split-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Inclinacion 3D */
[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
}
[data-tilt].is-tilting {
  transition: transform 0.12s linear;
}

/* Halo que sigue al cursor */
[data-halo]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--hx, 50%) var(--hy, 50%),
    rgba(47, 107, 255, 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
[data-halo]:hover::before {
  opacity: 1;
}

/* Marcas de la cuadricula en las secciones */
.seccion::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  pointer-events: none;
}
.hero::before {
  display: none;
}

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .pie-columnas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 720px) {
  .problema-fila {
    grid-template-columns: 70px 1fr;
    gap: 1.5rem;
  }
  .paso {
    grid-template-columns: 70px 1fr;
    gap: 1.8rem;
  }
  .bloques-dos,
  .vias {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem;
  }
  .aeo-notas {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }
  .auto-rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
  .apps-otras {
    grid-template-columns: repeat(3, 1fr);
  }
  .th-fila {
    grid-template-columns: 1.1fr 1.4fr 0.6fr;
    gap: 1rem;
  }
  .trabajo-fila {
    grid-template-columns: 80px minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) 40px;
    grid-template-areas: "ano nombre tipo que flecha";
    gap: 1.5rem;
  }
  .trabajo-ano {
    display: block;
    grid-area: ano;
  }
  .contacto-form {
    grid-template-columns: repeat(2, 1fr);
  }
  .pie-columnas {
    grid-template-columns: repeat(4, 1fr);
  }
  .pie-arriba {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .hero-bajar {
    display: flex;
  }
  .reglas {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
  .regla:nth-child(2) {
    border-top: 1px solid var(--line);
  }
  .regla:nth-child(3) {
    border-bottom: 0;
  }
}

@media (min-width: 960px) {
  .nav-links {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .auto-rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
  .informe-rejilla {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
  }
  .caso {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .contacto-rejilla {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

@media (min-width: 1280px) {
  .side-dots {
    display: flex;
  }
  .seccion {
    padding-block: clamp(6rem, 10vw, 11rem);
  }
}

/* =============================================================
   9. Movimiento reducido
   OJO: Windows lo trae activado en muchos equipos. Aqui solo se
   apaga lo que de verdad molesta; los micro-efectos se quedan.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .kicker-punto,
  .splash-mark,
  .hero-bajar-linea::after {
    animation: none;
  }
}

/* =============================================================
   10. Capa futurista
   Se anade al final a proposito: estas reglas pisan a las de
   arriba. Son los detalles que le dan el aire tecnico — esquinas
   marcadas, numeros entre corchetes y una trama finisima.
   ============================================================= */

/* --- Esquinas marcadas en las tarjetas (tipo visor) --- */
.via,
.bloque,
.auto-tarjeta,
.chat-demo,
.tabla-herramientas,
.comparador-caja,
.contacto-form-caja,
.informe-hoja {
  position: relative;
}
.via::after,
.bloque::after,
.auto-tarjeta::after,
.chat-demo::after,
.tabla-herramientas::after,
.comparador-caja::after,
.contacto-form-caja::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.45s var(--ease-out);
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 13px 1px no-repeat;
}
.via:hover::after,
.bloque:hover::after,
.auto-tarjeta:hover::after,
.contacto-form-caja:focus-within::after {
  opacity: 1;
}

/* --- Numeros entre corchetes --- */

/* --- Trama de lineas finisima sobre todo (muy sutil) --- */

/* --- Titulos: peso medio, nada de aire de revista --- */
.problema-cuerpo h3,
.paso-cuerpo h3,
.bloque h3,
.auto-tarjeta h3,
.regla h3,
.caso-texto h3,
.aeo-notas h3,
.apps-otras h4,
.via-titulo,
.trabajo-nombre,
.faq-item summary,
.pie-lema,
.email-gigante,
.contacto-ok h3,
.menu-movil nav a {
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* --- La raya de debajo de la navegacion, azul cuando baja --- */
.nav.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 0 var(--line-2);
}

/* --- La chispa de la marca, en azul con nucleo cian --- */
.brand-mark {
  color: var(--accent-texto);
  filter: drop-shadow(0 0 7px rgba(47, 107, 255, 0.55));
}
.splash-mark {
  color: var(--accent-texto);
  filter: drop-shadow(0 0 14px rgba(47, 107, 255, 0.6));
}

/* --- El punto que late, cian --- */
.kicker-punto {
  background: var(--accent-2);
}

/* --- Listas: el rombo pasa a corchete angular --- */
.lista-marcas li::before {
  border-color: var(--accent-2);
}
.paso-entrega {
  color: var(--accent-2) !important;
}

/* =============================================================
   11. Rejilla de fondo y reloj
   ============================================================= */

/* --- Rejilla tecnica detras de TODA la pagina --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(to right, rgba(110, 164, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110, 164, 255, 0.025) 1px, transparent 1px);
  background-size: 136px 136px;
  mask-image: linear-gradient(to bottom, black, black);
}

/* --- Panel de estado, abajo a la derecha --- */
.hud {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 85;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--reloj);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  pointer-events: none;
}
.hud-fila {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
}
.hud-etq {
  color: var(--dim);
}
.hud-val {
  color: var(--accent-claro);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1280px) {
  .hud {
    display: flex;
  }
}


/* --- El metodo: nodos unidos por una linea --- */
.pasos {
  position: relative;
}
.paso {
  position: relative;
}
.paso-num {
  position: relative;
}
.paso-num span {
  position: relative;
  z-index: 2;
  background: var(--bg);
}
.paso:hover .paso-num span {
  background: var(--accent);
}
@media (min-width: 720px) {
  .paso-num::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 46px;
    bottom: calc(-1 * clamp(2rem, 4vw, 3.2rem) - 46px);
    width: 1px;
    background: linear-gradient(to bottom, var(--line-2), transparent);
    z-index: 1;
  }
  .paso:last-child .paso-num::before {
    display: none;
  }
}

/* --- Puntos laterales: con su marca de regla --- */
.side-dots::before {
  content: "";
  position: absolute;
  right: 7px;
  top: -14px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
}

/* --- Botones: relleno que entra desde abajo --- */
.btn-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.btn-ghost:hover::before {
  transform: translateY(0);
}

/* --- Entradilla de seccion: barra lateral azul --- */
.seccion-cabecera .kicker-num {
  position: relative;
  padding-left: 0.9rem;
}
.seccion-cabecera .kicker-num::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 11px;
  background: var(--accent-2);
}

/* --- Los titulos entran recortados, no solo subiendo --- */
.titulo-grande[data-reveal] {
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.85s var(--ease-soft),
    transform 0.85s var(--ease-soft),
    clip-path 1.05s var(--ease-soft);
}
.titulo-grande[data-reveal].is-revealed {
  clip-path: inset(0 0 -10% 0);
}

/* =============================================================
   13. Contraste
   Medido sobre el fondo real (#05070D). El minimo es 4,5.
   El azul profundo (#2F6BFF) se queda en 4,48: vale para
   rellenos, bordes y resplandores, NO para texto.
   ============================================================= */
.brand-mark,
.splash-mark {
  color: var(--accent); /* iconos, no texto: aqui manda el azul profundo */
}
@keyframes desfileInv {
  from {
    transform: translate3d(var(--desfile, -50%), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* --- Texto partido: cada trozo entra con su retraso --- */
.split-char,
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 26ms);
}
[data-split].is-partido-dentro .split-char,
[data-split].is-partido-dentro .split-word {
  opacity: 1;
  transform: none;
}
/* Las palabras van mas espaciadas que las letras */
[data-split="words"] .split-word,
[data-split="lines"] .split-word {
  transition-delay: calc(var(--i, 0) * 45ms);
}

/* --- La portada se mueve con transform desde el JS --- */
.hero-inner,
.hero-gradient {
  will-change: transform;
}

/* =============================================================
   PAGINAS LEGALES (aviso-legal.html y privacidad.html)
   Texto largo y poco mas: ni rejillas ni adornos.
   ============================================================= */
.legal {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
.legal-volver {
  display: inline-block;
  margin-bottom: 2.4rem;
  color: var(--mute);
  font-size: 0.86rem;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.legal-volver:hover,
.legal-volver:focus-visible {
  color: var(--accent-texto);
}
.legal h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 0.9rem;
}
.legal-fecha {
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 2.6rem 0 0.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.legal p,
.legal li {
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.legal ul {
  list-style: none;
  padding-left: 1.2rem;
}
.legal li {
  position: relative;
}
.legal li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.7em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}
.legal strong {
  color: var(--ink);
  font-weight: 500;
}
.legal a {
  color: var(--accent-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.legal a:hover,
.legal a:focus-visible {
  border-color: currentColor;
}
.legal-pendiente {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 0.9rem;
  color: var(--dim);
  font-size: 0.86rem;
}
.legal-pie {
  margin-top: 3.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.82rem;
}

/* =============================================================
   14. AEO: definicion, comparativa SEO/AEO y motores de respuesta
   Añadido el 09-10-2026 al reenfocar la web al AEO.
   Va al final a proposito: estas clases son nuevas y no las
   pisa nadie.
   ============================================================= */

/* --- La definicion. Es el bloque mas citable de la pagina:
       tipografia grande, una sola idea y una barra de acento. --- */
.definicion {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3.4rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(47, 107, 255, 0.1), transparent 62%),
    var(--bg-2);
  transition: border-color 0.5s var(--ease-out);
}
.definicion:hover {
  border-color: var(--line-2);
  border-left-color: var(--accent-2);
}
.definicion-etq {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1.1rem;
}
.definicion blockquote p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 44ch;
}
.definicion blockquote strong {
  font-weight: 500;
  color: var(--accent-texto);
}
.definicion blockquote i,
.definicion figcaption i {
  font-style: italic;
}
.definicion figcaption {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--mute);
  max-width: 52ch;
}

/* --- La comparativa SEO / AEO. Reutiliza .th-fila, que es
       global, y solo cambia el reparto de columnas. --- */
.comparativa-aeo {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  font-size: 0.86rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.comparativa-aeo .th-que {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim) !important;
}
.comparativa-aeo .th-fila > span:nth-child(3) {
  color: var(--accent-texto);
}
@media (min-width: 720px) {
  .comparativa-aeo .th-fila {
    grid-template-columns: 0.72fr 1fr 1fr;
    gap: 1.4rem;
    align-items: baseline;
  }
}

/* --- Un subtitulo dentro de una seccion --- */
.sub-titulo {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  margin: clamp(2.8rem, 5vw, 4rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

/* --- Lista de lo que NO vale: la marca pasa a una raya --- */
.lista-marcas-no li {
  color: var(--mute);
}
.lista-marcas-no li::before {
  width: 9px;
  height: 1px;
  border: 0;
  background: var(--dim);
  transform: none;
  top: 0.78em;
}

/* --- Los motores de respuesta --- */
.motores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.motor {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  transition:
    border-color 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.motor:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}
/* La chispa de la marca, en pequeño, como senal de "aqui se pregunta" */
.motor-marca {
  width: 15px;
  height: 15px;
  background: var(--accent);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-out);
}
.motor:hover .motor-marca {
  opacity: 1;
  background: var(--accent-2);
}
.motor-nombre {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.1;
}
.motor-nota {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mute);
}
.motor-nota em {
  font-style: normal;
  color: var(--ink-2);
}
.motor-estado {
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.3rem 0.55rem;
}
.motor-estado-si {
  color: var(--accent-2);
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.06);
}

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

/* --- Esquinas marcadas, igual que el resto de tarjetas.
       Se copia el fondo de .via::after a proposito: esa regla
       esta en la capa futurista y no alcanza a estas clases. --- */
.motor::after,
.definicion::after,
.comparativa-aeo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.45s var(--ease-out);
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 1px 13px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 13px 1px no-repeat;
}
.comparativa-aeo {
  position: relative;
  isolation: isolate;
}
.motor:hover::after,
.definicion:hover::after {
  opacity: 1;
}

/* --- Los trozos de codigo que salen en el texto (llms.txt,
       schema.org). Tipografia del reloj: aqui SI es una cadena
       literal que se escribe tal cual. --- */
code {
  font-family: var(--reloj);
  font-size: 0.86em;
  color: var(--accent-texto);
  background: rgba(47, 107, 255, 0.09);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.08em 0.34em;
}
.th-fila code,
.paso-cuerpo code,
.auto-tarjeta code {
  font-size: 0.82em;
}

/* =============================================================
   15. La portada: la marca en grande
   Pedido el 11-10-2026: "TEINE en grande, grande, grande", y
   debajo quien es. El reclamo baja al segundo renglon.
   OJO: la palabra se parte en letras (data-split), asi que
   NO puede llevar background-clip: text — el recorte no cruza
   un hijo con transform y la palabra se quedaria invisible.
   ============================================================= */
.hero-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-bottom: clamp(0.4rem, 1vw, 0.8rem);
}

/* El resplandor de detras. Es un gradiente, no un filtro:
   un blur aqui costaria un repintado por cuadro (04-10-2026). */
.hero-marca::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: -30%;
  bottom: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 62% at 32% 48%,
    rgba(47, 107, 255, 0.3) 0%,
    rgba(34, 211, 238, 0.12) 42%,
    transparent 72%
  );
}

.hero-marca-palabra {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 35vw, 31rem);
  line-height: 0.74;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 90px rgba(47, 107, 255, 0.4);
  /* La E final deja un hueco de tracking a la derecha: se compensa
     para que la palabra quede a ras del margen izquierdo. */
  margin-left: -0.012em;
}

/* La linea de debajo: quien es y donde trabaja. */
.hero-marca-bajo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: clamp(0.76rem, 1.25vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.hero-marca-raya {
  flex: 0 0 auto;
  width: clamp(28px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, var(--accent-2), rgba(34, 211, 238, 0.15));
}

/* El reclamo, ahora en segundo renglon. El <em> va entero:
   si se partiera en letras perderia el degradado. */
.hero-lema {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.6vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--ink);
  max-width: 18ch;
}
.hero-lema em {
  font-style: normal;
  background-image: linear-gradient(
    100deg,
    var(--accent-claro) 0%,
    var(--accent-2) 55%,
    var(--accent-claro) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Con la marca tan alta, la portada necesita respirar y NO
   puede recortar: .hero lleva overflow: hidden. El relleno de
   arriba baja de 2,5rem a 1rem para que los botones entren en
   una pantalla de 900 px de alto. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  padding-block: calc(var(--nav-h) + 1rem) 4rem;
}
.hero-inner {
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
}
.hero-sub {
  max-width: 44ch;
}

/* En el movil la linea cabe en dos renglones: la raya se quita
   para que el texto arranque a ras del margen, como todo lo demas. */
@media (max-width: 719px) {
  .hero-marca-bajo {
    align-items: flex-start;
    letter-spacing: 0.13em;
    line-height: 1.5;
  }
  .hero-marca-raya {
    display: none;
  }
}

/* Movimiento reducido: la palabra entra igual, sin escalonar. */
@media (prefers-reduced-motion: reduce) {
  .hero-marca-palabra .split-char {
    transition-delay: 0s !important;
  }
}

/* La entradilla de la portada: 47ch son tres renglones a 1440.
   A 44ch se iba a cuatro y empujaba los botones fuera. */
.hero-sub {
  max-width: 47ch;
}

/* El «Sigue» de abajo a la izquierda se cruzaba con los botones
   ahora que la marca ocupa media portada. Solo se enseña si la
   pantalla tiene alto de sobra. */
@media (max-height: 1010px) {
  .hero-bajar {
    display: none !important;
  }
}

/* Portatil bajito (1366x768 y parecidos): la marca se encoge un
   poco para que el boton principal no se vaya debajo del borde. */
@media (min-width: 720px) and (max-height: 820px) {
  .hero-marca-palabra {
    font-size: clamp(2.6rem, 29vw, 23.5rem);
  }
}

/* =============================================================
   16. La portada, mas explosiva (11-10-2026)
   Tres cosas, todas baratas: el degradado que recorre la palabra
   entera, un fogonazo de luz al entrar y las letras llegando con
   mas fuerza. Nada de filtros ni de bucles nuevos.
   ============================================================= */

/* --- El degradado continuo de la T a la E ---
   La clase .es-degradado la pone el JS DESPUES de repartir el
   degradado letra por letra. Si el JS no llega, la palabra se
   queda en blanco y se ve perfectamente: es la red de seguridad. */
.hero-marca-palabra.es-degradado .split-char,
.hero-marca-palabra.es-degradado .split-word {
  background-image: linear-gradient(
    102deg,
    #ffffff 0%,
    var(--accent-claro) 26%,
    var(--accent-2) 52%,
    var(--accent-claro) 74%,
    #ffffff 100%
  );
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Las letras entran con mas fuerza ---
   Mas recorrido, un pelin de escala y el escalonado mas lento
   (70 ms por letra en vez de 26), que con cinco letras enormes
   se lee como un golpe y no como un goteo. */
.hero-marca-palabra .split-char {
  transform: translateY(0.46em) scale(0.9);
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s var(--ease-out),
    transform 1.05s var(--ease-bounce);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.hero-marca-palabra.is-partido-dentro .split-char,
[data-split].is-partido-dentro .hero-marca-palabra .split-char {
  transform: none;
}

/* --- El fogonazo ---
   Un gradiente que crece y se apaga UNA vez. Solo mueve transform
   y opacity, asi que lo pinta la tarjeta grafica y no cuesta nada.
   Va detras de la palabra (z-index negativo, como el resplandor). */
.hero-marca::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 92%;
  height: 170%;
  z-index: -1;
  pointer-events: none;
  translate: -50% -50%;
  transform: scale(0.35);
  opacity: 0;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(110, 164, 255, 0.45) 26%,
    rgba(34, 211, 238, 0.22) 52%,
    transparent 74%
  );
  animation: fogonazoMarca 1.5s var(--ease-out) 0.45s 1 both;
}
@keyframes fogonazoMarca {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* --- Al pasar el raton por encima, la luz cruza la palabra ---
   Solo corre mientras el raton esta encima: fuera de ahi no hay
   ninguna animacion viva en la portada. */
.hero-marca-palabra.es-degradado:hover .split-char,
.hero-marca-palabra.es-degradado:hover .split-word {
  animation: brilloMarca 1.5s var(--ease-soft) 1;
}
@keyframes brilloMarca {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.45);
  }
  100% {
    filter: brightness(1);
  }
}

/* --- El gradiente del fondo, un punto mas vivo ---
   Con la marca encima se comia el color. No cuesta nada: es el
   mismo gradiente de siempre, solo sube la opacidad. */
.hero-gradient {
  opacity: 0.42;
}

/* --- Movimiento reducido: fuera el fogonazo y el brillo.
       Las letras entran, pero de golpe. --- */
@media (prefers-reduced-motion: reduce) {
  .hero-marca::after {
    animation: none;
    opacity: 0;
  }
  .hero-marca-palabra.es-degradado:hover .split-char,
  .hero-marca-palabra.es-degradado:hover .split-word {
    animation: none;
  }
  .hero-marca-palabra .split-char {
    transition-delay: 0s !important;
    transform: none;
  }
}

/* =============================================================
   17. La portada, clara (11-10-2026)
   Pedido: "que ponga Teine, agencia de AEO, España e
   internacional, y ya esta". El reclamo y la explicacion se van
   a la seccion 01 — El problema.
   Y la marca baja de tamano: a 35vw son 504 px en un monitor de
   1440 y se comia la pantalla. A 20vw son 288 px: sigue mandando
   sin quedar desproporcionada.
   OJO: estas reglas van AL FINAL a proposito. Las de arriba
   (incluidas las de dentro de una consulta de medios) son igual
   de especificas, y gana la que va despues.
   ============================================================= */
.hero-marca-palabra {
  font-size: clamp(3.4rem, 20vw, 17rem);
  line-height: 0.8;
}

/* Sin el reclamo ni la entradilla, la portada tiene aire de
   sobra: el bloque se centra y la linea de debajo respira. */
.hero-inner {
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.hero-marca {
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  margin-bottom: clamp(0.6rem, 1.4vw, 1.2rem);
}
.hero-marca-bajo {
  letter-spacing: 0.24em;
}

/* El resplandor seguia la caja de antes, que era el doble de
   alta: ahora se cine a la palabra. */
.hero-marca::before {
  left: -10%;
  right: -10%;
  top: -45%;
  bottom: -25%;
}

/* Portatil bajito: con la marca ya recogida no hace falta
   encogerla tanto como antes. */
@media (min-width: 720px) and (max-height: 820px) {
  .hero-marca-palabra {
    font-size: clamp(3.4rem, 17vw, 13rem);
  }
}

/* El «Sigue» de abajo vuelve: la portada ya no llega hasta el
   borde, asi que no se cruza con los botones. Solo se esconde
   en pantallas de verdad bajitas. */
.hero-bajar {
  /* El !important es obligado: mas arriba hay un display: none
     !important dentro de una consulta de medios (max-height:
     1010px) y sin el gana aquel. */
  display: flex !important;
}
@media (max-height: 660px) {
  .hero-bajar {
    display: none !important;
  }
}

/* =============================================================
   18. El fondo de la portada (11-10-2026)
   No le gustaba el anterior: cuatro manchas de color siguiendo
   al raton (azul, cian, morado y un naranja) sobre una rejilla.
   Se veia sucio y con pinta de pantalla de ordenador.
   Ahora: un solo degradado de azul noche, de arriba a abajo y
   en diagonal, con un resplandor frio naciendo por debajo de la
   marca. Sin rejilla, sin naranja y sin nada que persiga al
   raton. Solo la portada: el resto de secciones no se tocan.
   ============================================================= */
.hero {
  background:
    radial-gradient(ellipse 120% 95% at 50% 118%, rgba(34, 211, 238, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 22% 18%, rgba(47, 107, 255, 0.16) 0%, transparent 65%),
    linear-gradient(168deg, #060a14 0%, #0a1226 38%, #0d1b3a 64%, #06091a 100%);
}

/* Fuera las manchas del raton y la rejilla. Se dejan los nodos
   en el HTML (los usa main.js) y se apagan por CSS. */
.hero-gradient,
.hero-rejilla {
  opacity: 0 !important;
}

/* El grano se queda, pero de puntillas: es lo que evita que el
   degradado salga a bandas en pantallas de 8 bits. */
.hero-grain {
  opacity: 0.1;
}

/* El halo de detras de la palabra, mas suave: con el fondo nuevo
   el de antes hacia un borron azul en medio. */
.hero-marca::before {
  background: radial-gradient(
    ellipse 62% 70% at 36% 52%,
    rgba(110, 164, 255, 0.16) 0%,
    rgba(34, 211, 238, 0.07) 45%,
    transparent 74%
  );
}

/* =============================================================
   19. LA FIRMA DEL BLOQUE DE CONTACTO  (12-10-2026)
   Lo que queda del repaso de 'que no parezca IA de un crio': el
   telefono delante del correo en Hablemos. La seccion 'Quien esta
   detras' que tenia este bloque la mando quitar el mismo dia y su
   CSS se fue con ella (estaba en guardado/seccion-quien.html).
   ============================================================= */

/* La firma del bloque de contacto, debajo del telefono gigante. */
.contacto-firma {
  margin: -0.8rem 0 0;
  max-width: 44ch;
  color: var(--mute);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* =============================================================
   20. MAS FORMAL  (12-10-2026)

   Lo pidio asi: «que se vea mas formal». No es un rediseno ni se
   toca la portada —esa es la que ajusto el 11-10— : es quitarle a
   la pagina los tics que la hacen parecer una plantilla moderna
   en vez de una agencia.

   Las ocho cosas, por orden de lo que mas se nota:
     1. El enfasis de los titulares deja de ser degradado neon.
     2. Los titulares de seccion, un tercio mas pequenos.
     3. El texto secundario se lee mejor (contraste medido abajo).
     4. Las cosas entran a la mitad de tiempo y moviendose menos.
     5. Fuera la inclinacion 3D de las dieciseis tarjetas.
     6. Fuera los parpadeos que no paran nunca.
     7. La portada de carga se quita antes.
     8. Menos aire muerto entre secciones.

   Va al final a proposito: las reglas de arriba son igual de
   especificas y gana la que va despues. Para deshacerlo entero,
   se borra este bloque y la web vuelve a como estaba.
   ============================================================= */

/* --- 1) El enfasis de los titulares, azul liso ---------------
   Trece titulares con media frase en degradado azul→cian era lo
   que mas cara de «hecho con una IA» le daba a la pagina. El
   degradado se queda donde es la marca: TEINE en la portada y la
   tarjeta del enlace de WhatsApp. En los titulos, azul liso. */
.titulo-grande em {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent-texto);
}

/* --- 2) Titulares de seccion mas contenidos ------------------
   Estaban en 70 px a 1440 y se comian la pantalla: el contenido
   de verdad quedaba por debajo del borde. Ahora 53 px, con el
   interletraje menos apretado (-0.04 era de cartel). */
.titulo-grande {
  font-size: clamp(1.8rem, 4vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 24ch;
}

/* --- 3) El texto secundario, legible -------------------------
   Medido sobre el fondo real (#05070D), como la seccion 13:
     --mute  #94A2B8 → 7,8 de contraste (antes 6,3)
     --dim   #8795AE → 6,7 de contraste (antes 5,0)
   Un parrafo largo en gris flojo y peso 300 se lee como un
   adorno. Las entradillas suben a peso 400. */
:root {
  --mute: #94a2b8;
  --dim: #8795ae;
}
.seccion-entradilla {
  font-weight: 400;
}

/* --- 4) Las entradas, mas cortas -----------------------------
   0,85 s y 38 px de recorrido es lo que hace que la pagina
   parezca que «se va montando». A 0,5 s y 16 px el contenido ya
   esta ahi y el movimiento solo acompana. */
[data-reveal] {
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease-soft),
    transform 0.5s var(--ease-soft);
}
.titulo-grande[data-reveal] {
  transition:
    opacity 0.5s var(--ease-soft),
    transform 0.5s var(--ease-soft),
    clip-path 0.6s var(--ease-soft);
}

/* --- 5) Fuera la inclinacion 3D ------------------------------
   Dieciseis tarjetas que se inclinaban al pasar el raton. En las
   «Decisiones de diseno» ya estaba escrito que lo unico que sigue
   al raton es el gradiente de la portada y el halo suave de las
   tarjetas: el 3D era un resto. El halo se queda. */
[data-tilt],
[data-tilt].is-tilting {
  transform: none;
}

/* --- 6) Nada que parpadee sin parar --------------------------
   El punto del kicker latia cada 2,6 s en cada seccion y la
   chispa de la portada de carga giraba sin parar. Un sitio serio
   no tiene nada moviendose cuando no pasa nada. */
.kicker-punto {
  animation: none;
  box-shadow: none;
}
.splash-mark {
  animation: none;
}

/* La barra de progreso de arriba, azul liso en vez de
   degradado azul→cian. */
.scroll-progress span {
  background: var(--accent);
}

/* --- 7) La portada de carga se va antes ----------------------
   Lo primero que ve quien abre el enlace desde WhatsApp. Sigue
   tapando el salto de las tipografias, pero en medio segundo en
   vez de en segundo y medio. El retardo del JS esta en
   `initSplash` (main.js). */
.splash {
  transition:
    opacity 0.45s var(--ease-out),
    clip-path 0.5s var(--ease-soft);
}

/* --- 8) Menos aire muerto ------------------------------------
   160 px arriba y abajo de cada seccion dejaban pantallas casi
   vacias al bajar. Con 120 px la pagina pasa de 21.000 px de
   alto a unos 19.000 y se lee seguida. */
.seccion {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

/* --- 9) El texto, con cuerpo ---------------------------------
   El `body` iba a peso 300 y de ahi heredaba casi todo. Una
   pagina entera en letra fina sobre fondo oscuro se lee peor y
   es, ella sola, media pinta de plantilla de diseno. A 400 el
   texto tiene cuerpo; lo que llevaba peso propio (500 y 600:
   titulos, menu, botones) no se entera. */
body {
  font-weight: 400;
}
/* La segunda palabra del logotipo sigue fina a proposito. */
.brand-word-dim {
  font-weight: 300;
}

/* =============================================================
   21. «CON QUIEN TRABAJAMOS»: TRES TARJETAS  (12-10-2026)

   Entro la de **negocios online** —los que no tienen local ni
   zona: entrenadores y preparadores fisicos online,
   nutricionistas, psicologos, academias, consultores—, que es lo
   que pidio. Y «entrenadores» salio de la tarjeta general, que
   ahora tienen la suya.

   La rejilla ponia dos columnas desde 720 px. Con tres tarjetas,
   la ultima se quedaba coja a media fila: hasta que caben tres de
   verdad (1040 px), se lleva la fila entera.
   ============================================================= */
@media (min-width: 720px) {
  .vias > :last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1040px) {
  .vias {
    grid-template-columns: repeat(3, 1fr);
  }
  .vias > :last-child {
    grid-column: auto;
  }
  /* A tres columnas la tarjeta mide 391 px: con el titulo a 48 px,
     «Cualquier negocio al que se llega preguntando» se comia cinco
     renglones y un tercio de la tarjeta. */
  .via-titulo {
    font-size: 2.1rem;
    letter-spacing: -0.02em;
  }
}

/* =============================================================
   22. «COMPRUEBALO TU MISMO»: LA HERRAMIENTA  (16-10-2026)
   Formulario a la izquierda, las seis preguntas a la derecha, y
   debajo la tabla de lo que se midio. Esquinas de 3-4 px y nada
   que parezca un panel de control: formal, no interfaz.
   Va al final a proposito, despues de la 20 («mas formal»), que
   es igual de especifica y gana la que va despues.
   ============================================================= */

.seccion-prueba .seccion-cabecera {
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.prueba-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .prueba-rejilla {
    grid-template-columns: minmax(300px, 0.78fr) 1.22fr;
  }
  /* El formulario se queda a la vista mientras se leen las seis. */
  .prueba-form {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
  }
}

/* --- El formulario --- */
.prueba-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line);
  border-radius: 4px;
}
.prueba-form .btn {
  width: 100%;
  margin-top: 0.3rem;
}
.prueba-form .form-nota {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--dim);
}
.prueba-form.falta-zona .campo:first-child input {
  border-color: rgba(255, 91, 41, 0.5);
}

/* --- La salida: el hueco de antes de pedirlas --- */
.prueba-salida {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-brasa);
  padding: clamp(1.3rem, 2.4vw, 2rem);
}
.prueba-vacio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 220px;
  max-width: 34ch;
}
.prueba-vacio p {
  margin: 0;
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.6;
}
.prueba-vacio-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-texto);
  opacity: 0.35;
}

/* --- Las seis preguntas --- */
.prueba-cab {
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.prueba-cab .sub-titulo {
  margin: 0 0 0.35rem;
}
.prueba-cab .nota-pie {
  margin: 0;
  max-width: 52ch;
}

.prueba-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prueba-item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  grid-template-areas:
    "num texto"
    ".   acciones";
  gap: 0.35rem 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.prueba-item:last-child {
  border-bottom: 0;
}
.prueba-num {
  grid-area: num;
  margin: 0;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-texto);
  padding-top: 0.15rem;
}
.prueba-texto {
  grid-area: texto;
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.prueba-acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.prueba-motor,
.prueba-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out);
}
.prueba-motor:hover,
.prueba-motor:focus-visible,
.prueba-copiar:hover,
.prueba-copiar:focus-visible {
  border-color: var(--accent);
  color: var(--accent-texto);
  background: rgba(47, 107, 255, 0.08);
}
.prueba-copiar {
  border-style: dashed;
  color: var(--mute);
}
.prueba-copiar.es-copiada {
  border-style: solid;
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* --- Que mirar + el cierre --- */
.prueba-mirar {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--bg-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
}
.prueba-mirar-tit {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.prueba-mirar ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}
.prueba-mirar li {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.prueba-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.prueba-pie-nota {
  flex: 1 1 15ch;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- Lo que nos salio al medirlo --- */
.prueba-medido {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.prueba-medido-cab {
  margin-bottom: 1.1rem;
}
.prueba-medido-cab .sub-titulo {
  margin: 0 0 0.3rem;
}
.prueba-medido-cab .nota-pie {
  margin: 0;
}
.prueba-tabla {
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.prueba-tabla .th-fila > span:nth-child(3) {
  font-family: var(--display);
  font-weight: 500;
}
@media (min-width: 760px) {
  .prueba-tabla .th-fila {
    grid-template-columns: minmax(150px, 0.8fr) 1.6fr 4rem;
    gap: 1rem;
    align-items: baseline;
  }
  .prueba-tabla .th-fila > span:nth-child(3) {
    text-align: right;
  }
}
.prueba-medido-pie {
  margin: 1.1rem 0 0;
  max-width: 76ch;
  color: var(--mute);
  font-size: 0.94rem;
  line-height: 1.65;
}
.prueba-medido-pie q {
  color: var(--ink-2);
  font-style: normal;
}

@media (max-width: 480px) {
  .prueba-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "texto"
      "acciones";
    gap: 0.2rem;
  }
  .prueba-acciones {
    gap: 0.35rem;
  }
}