/* ==========================================================================
   Kingster — sitio.css
   Tratamiento «A · Medianoche» elegido por Juan el 2026-09-10 (negro azulado, azul eléctrico con
   brillo, cian en la palabra iluminada). Patrones del banco de plantillas: todo cuelga de una regla
   de pelo (Westend), listas de texto sin caja (Studio), filas pegadas (Ælen), capítulos con rótulo
   fijo (Carrington). Cero rejillas de tarjetas. Nada nace en opacity: 0.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --negro: #07090F;
  --negro-2: #0B0E17;
  --marino: #0A1430;
  --cobalto: #0B3DAA;
  --papel: #F3F6FB;
  --papel-2: #E7EDF7;
  --tinta: #EEF1F8;
  --tinta-2: #9AA6BF;
  --tinta-3: #7C879E;
  --tinta-clara: #0B1633;
  --tinta-clara-2: #4A5878;
  --tinta-clara-3: #6B778F;
  --azul: #2F6BFF;
  --azul-2: #4C8DFF;
  --cian: #7BE0FF;
  --azul-suave: #6FA0FF;
  --linea-oscura: rgba(255, 255, 255, .14);
  --linea-clara: rgba(11, 22, 51, .16);
  --hair: linear-gradient(90deg, #00D4FF, #2F6BFF, #8A5CFF, #2F6BFF, #00D4FF);
  --degradado: linear-gradient(135deg, #2F6BFF, #4C8DFF);
  --brillo: 0 0 0 1px rgba(120, 170, 255, .25), 0 0 28px rgba(47, 107, 255, .55);
  --sora: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  --manrope: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hover: .15s cubic-bezier(.4, 0, .2, 1);
  --entra: .3s cubic-bezier(0, 0, .2, 1);
  --seccion: clamp(72px, 9vw, 120px);
  --gutter: clamp(20px, 5vw, 64px);
  --ancho: 1200px;
  --barra: 88px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--barra);
  background: var(--negro);
  color: var(--tinta);
  font-family: var(--manrope);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-abierto { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sora); text-wrap: balance; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.saltar:focus { top: 16px; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

/* superficies: cada una define sus líneas, su rótulo y su gris */
.oscuro, .capitulo-1, .pie, .hero { --linea: var(--linea-oscura); --rotulo: var(--azul-suave); --mute: var(--tinta-2); --mute-2: var(--tinta-3); background: var(--negro); color: var(--tinta); }
.capitulo-1 { background: var(--marino); }
.claro, .capitulo-3 { --linea: var(--linea-clara); --rotulo: var(--cobalto); --mute: var(--tinta-clara-2); --mute-2: var(--tinta-clara-3); background: var(--papel); color: var(--tinta-clara); }
.capitulo-2 { --linea: rgba(255, 255, 255, .28); --rotulo: #BFD4FF; --mute: rgba(255, 255, 255, .8); --mute-2: rgba(255, 255, 255, .62); background: linear-gradient(160deg, #0E48C4, var(--cobalto) 58%, #082C7C); color: #fff; }

/* ---------- tipografía ---------- */
.eyebrow, .rotulo { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rotulo); }
.rotulo { margin-bottom: 20px; }
.titular { font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; max-width: 18ch; }
.titular.grande { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -.03em; line-height: 1.02; max-width: 16ch; }
.cuerpo { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--mute); max-width: 60ch; }
.titular + .cuerpo, .titular.grande + .cuerpo { margin-top: 22px; }
.enlace { display: inline-block; font-weight: 600; border-bottom: 1px solid var(--linea); padding-bottom: 2px; transition: color var(--hover), border-color var(--hover); }
.enlace:hover { color: var(--azul-2); border-color: var(--azul-2); }
.enlace.externo { color: var(--mute-2); font-weight: 500; margin-left: 22px; }
.claro .enlace:hover, .capitulo-3 .enlace:hover { color: var(--cobalto); border-color: var(--cobalto); }

/* ---------- botones (el brillo es la decisión de Juan: variante A) ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 15px 28px; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; will-change: transform; transition: border-color var(--hover), box-shadow var(--hover); }
.btn-p { background: var(--degradado); color: #fff; box-shadow: 0 0 34px rgba(47, 107, 255, .45); }
.btn-s { border: 1px solid rgba(255, 255, 255, .2); color: var(--tinta); }
.btn-s:hover { border-color: rgba(255, 255, 255, .5); }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- barra ---------- */
/* fija y fuera del flujo: al encogerse solo cambia ella, la página no salta (el cuerpo reserva su alto) */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--barra); padding: 0 48px;
  background: rgba(9, 12, 20, .94); color: var(--tinta);
  transition: height .45s cubic-bezier(.2, .7, .2, 1), background-color .45s;
}
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hair); background-size: 200% 100%; animation: hair 14s linear infinite; }
.barra.compacta { height: 64px; background: rgba(9, 12, 20, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@keyframes hair { to { background-position: 200% 0; } }
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sora); font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.marca .corona { width: 24px; height: 18px; color: var(--azul-2); }
.nav { display: flex; gap: 34px; position: relative; font-size: 14px; font-weight: 500; }
.nav a { padding: 6px 0; opacity: .78; transition: opacity var(--hover); }
.nav a:hover, .nav a.on { opacity: 1; }
.nav .ind { position: absolute; bottom: -2px; left: 0; height: 2px; width: 0; background: var(--hair); border-radius: 2px; pointer-events: none; }
.barra-der { justify-self: end; display: flex; align-items: center; gap: 18px; }
.idioma { font-size: 12px; font-weight: 700; letter-spacing: .12em; opacity: .7; padding: 6px 2px; transition: opacity var(--hover); }
.idioma:hover { opacity: 1; }
.cta { display: inline-flex; align-items: center; border-radius: 999px; padding: 13px 22px; font-weight: 600; font-size: 14px; white-space: nowrap; background: var(--degradado); color: #fff; box-shadow: var(--brillo); animation: respira 4s ease-in-out infinite; will-change: transform; }
@keyframes respira { 50% { box-shadow: 0 0 0 1px rgba(120, 170, 255, .4), 0 0 46px rgba(47, 107, 255, .8); } }
.menu-boton { display: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 8px 2px; }
.menu-boton .menu-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-cerrar { display: inline; }
.menu-movil { position: fixed; inset: 0; z-index: 9; background: rgba(7, 9, 15, .97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; place-content: center; text-align: center; padding: var(--barra) 24px 24px; }
.menu-movil[hidden] { display: none; }
.menu-movil a { display: block; font-family: var(--sora); font-size: 32px; font-weight: 700; letter-spacing: -.02em; padding: 12px 0; }
.menu-movil .menu-idioma { font-family: var(--manrope); font-size: 16px; font-weight: 600; color: var(--azul-suave); margin-top: 22px; }

/* ---------- hero ---------- */
/* llena la ventana en un portátil, pero con tope: en un monitor alto o vertical no se vuelve un vacío */
.hero { position: relative; overflow: clip; isolation: isolate; display: grid; place-items: center; text-align: center; min-height: min(calc(100svh - var(--barra)), 860px); padding: clamp(64px, 9vh, 120px) var(--gutter) clamp(72px, 10vh, 128px); }
.hero-glow { position: absolute; left: 50%; top: 42%; width: 900px; height: 600px; max-width: 100vw; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(47, 107, 255, .22), transparent 70%); pointer-events: none; z-index: 0; }
.hero-k { position: absolute; right: 2vw; bottom: -4vh; font: 900 clamp(360px, 82vh, 700px)/1 var(--sora); color: #1E45C8; filter: blur(20px); opacity: .72; letter-spacing: -.06em; pointer-events: none; user-select: none; z-index: 0; }
.hero-contenido { position: relative; z-index: 1; max-width: 1040px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { font-size: clamp(46px, 7.2vw, 92px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; margin-bottom: 22px; }
.hi { position: relative; background: linear-gradient(92deg, var(--azul-2), var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hi::after { content: attr(data-text); position: absolute; inset: 0; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(22px); opacity: .6; z-index: -1; }
.hero-sub { font-size: clamp(18px, 2vw, 25px); line-height: 1.4; color: var(--tinta-2); max-width: 44ch; margin: 0 auto 36px; }
.hero .acciones { justify-content: center; margin-bottom: 34px; }
.hero-trust { font-size: 13px; color: var(--tinta-3); }

/* ---------- secciones ---------- */
section, article.legal { padding-block: var(--seccion); }
.cabecera { padding-block: calc(var(--seccion) * .9) calc(var(--seccion) * .55); }
.cabecera .eyebrow { display: block; margin-bottom: 20px; }
.claro + .claro { padding-top: 0; }
.claro + .claro > .contenedor { border-top: .67px solid var(--linea); padding-top: var(--seccion); }
.que-hacemos-enlace { margin-top: 44px; }

/* listas que cuelgan de una regla de pelo (Westend) */
.lineas { display: grid; gap: 22px; margin-top: 40px; }
.lineas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.lineas li { border-left: .67px solid var(--linea); padding-left: 18px; transition: border-color var(--hover); }
.lineas li:hover { border-color: var(--rotulo); }
.lineas h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.lineas p { font-size: 16px; line-height: 1.6; color: var(--mute); max-width: 42ch; }

/* ---------- productos en bandas (Studio / Solstice) ---------- */
.productos { padding-bottom: calc(var(--seccion) * .6); }
.productos-cabecera { margin-bottom: calc(var(--seccion) * .5); }
.banda { padding-block: calc(var(--seccion) * .55); }
.banda + .banda { border-top: .67px solid var(--linea); }
.banda-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.banda:nth-of-type(even) .escena { order: -1; }
.banda h3 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 14px; }
.banda-titulo { font-family: var(--sora); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 18px; }
.banda .cuerpo { font-size: 17px; }
.banda-enlaces { margin-top: 26px; }

/* ---------- escenas de producto: dispositivos con pantallas reales ----------
   Tres capas animadas por separado para que no se pisen: .capa (profundidad al bajar), .flota
   (inclinación con el cursor) y .dispositivo (entrada). El brillo sigue al cursor por variables CSS. */
.escena { margin: 0; position: relative; aspect-ratio: 5 / 4; perspective: 1400px; }
.escena-3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.capa { position: absolute; will-change: transform; }
.capa-fondo { left: 0; top: 4%; width: 90%; }
.capa-frente { right: 0; bottom: 0; width: 30%; }
/* en el televisor el teléfono va a la IZQUIERDA: tapa la foto de la pieza, no su titular */
.escena-tv .capa-fondo { left: auto; right: 0; top: 7%; width: 92%; }
.escena-tv .capa-frente { right: auto; left: 0; width: 28%; bottom: -3%; }
.flota { will-change: transform; }
.dispositivo { position: relative; }
.cristal { position: relative; overflow: hidden; background: #0B0E17; }
.cristal img { display: block; width: 100%; height: auto; }
.brillo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); background: radial-gradient(560px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .16), transparent 46%); mix-blend-mode: screen; }
.escena:hover .brillo { opacity: 1; }
/* portátil: bisel, pantalla y base */
.laptop .cristal { border-radius: 14px 14px 4px 4px; padding: 10px 10px 12px; background: #0E1119; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 90px rgba(0, 0, 0, .32); }
.laptop .cristal img { border-radius: 6px; }
.laptop::after { content: ""; display: block; height: 14px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(#1C2130, #0E1119); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.laptop::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 18%; height: 4px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #2A3144; z-index: 1; }
/* televisor: bisel fino y pie */
.tv .cristal { border-radius: 8px; padding: 7px; background: #0E1119; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 90px rgba(0, 0, 0, .34); }
.tv .cristal img { border-radius: 3px; }
.tv::after { content: ""; display: block; width: 26%; height: 8px; margin: 10px auto 0; border-radius: 4px; background: linear-gradient(#1C2130, #0E1119); }
/* teléfono: marco y cristal, sin isla ni muesca — tapaban el encabezado de la app */
.telefono .cristal { border-radius: 12% / 5.5%; padding: 3.2%; background: #0B0E17; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 70px rgba(0, 0, 0, .4); }
.telefono .cristal img { border-radius: 9% / 4.1%; }

/* ---------- servicios teaser / cierres ---------- */
.cierre .cuerpo, .empezar .cuerpo { margin-bottom: 30px; }
.cierre .titular, .empezar .titular { margin-bottom: 0; }

/* ---------- contacto (campos subrayados, sin cajas) ---------- */
.contacto-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; position: relative; }
.campo { display: grid; gap: 8px; }
.campo-ancho { grid-column: 1 / -1; }
.campo span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.campo input, .campo textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; color: var(--tinta); font: inherit; font-size: 17px; padding: 10px 0; transition: border-color var(--hover), box-shadow var(--hover); }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--azul-2); box-shadow: 0 1px 0 var(--azul-2); }
.campo input:user-invalid, .campo textarea:user-invalid { border-bottom-color: #FF6B6B; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.formulario-pie small { font-size: 13px; color: var(--tinta-3); }
.formulario-pie small a { border-bottom: 1px solid var(--linea); }
.formulario-estado { grid-column: 1 / -1; font-size: 15px; min-height: 1.4em; color: var(--tinta-2); }
.formulario-estado.ok { color: var(--cian); }
.formulario-estado.error { color: #FF8A8A; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- pie: el último capítulo, no un bloque aparte (Quartiere) ---------- */
.pie { position: relative; padding-block: 0; }
.pie-arriba { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 72px 56px; border-top: .67px solid var(--linea); }
.pie-marca p { margin-top: 16px; color: var(--tinta-2); font-size: 15px; max-width: 28ch; }
.pie-col h4 { font-family: var(--manrope); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 18px; }
.pie-col a { display: block; font-size: 16px; color: var(--tinta-2); padding: 5px 0; transition: color var(--hover); }
.pie-col a:hover { color: var(--tinta); }
.pie-abajo { border-top: .67px solid var(--linea); padding-block: 22px 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--tinta-3); }
.pie-legal strong { color: var(--tinta-2); font-weight: 600; }
.pie::after { content: ""; display: block; height: 2px; background: var(--hair); background-size: 200% 100%; animation: hair 14s linear infinite; }

/* ---------- página de productos: capítulos con rótulo fijo (Carrington) ---------- */
.capitulo { position: relative; overflow: clip; }
.capitulo-2::before { content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.capitulo-grid { position: relative; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.capitulo-lado { position: sticky; top: 104px; }
.capitulo-lado h2 { font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 12px; }
.capitulo-para { font-size: 18px; line-height: 1.45; color: var(--mute); max-width: 26ch; margin-bottom: 28px; }
.datos div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: .67px solid var(--linea); }
.datos dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); padding-top: 3px; }
.datos dd { margin: 0; font-size: 16px; font-weight: 600; }
.datos .externo { border-bottom: 1px solid var(--linea); transition: color var(--hover); }
.datos .externo:hover { color: var(--rotulo); }
.capitulo-titulo { font-family: var(--sora); font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; max-width: 20ch; margin-bottom: 22px; }
.capitulo-cuerpo .cuerpo { margin-bottom: 36px; }
.capitulo-cuerpo .rotulo { margin-bottom: 4px; }
.capitulo-cuerpo .lineas { margin-top: 18px; margin-bottom: 64px; }
.capitulo-cuerpo .escena { max-width: 720px; }
.capitulo-cuerpo .lineas p { max-width: 62ch; }

/* ---------- página de servicios ---------- */
.prueba-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.prueba-lista li { border-top: .67px solid var(--linea); }
.prueba-lista li:last-child { border-bottom: .67px solid var(--linea); }
.prueba-lista a { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 24px; padding: 24px 0; align-items: baseline; }
.prueba-lista strong { font-family: var(--sora); font-size: 22px; font-weight: 700; letter-spacing: -.01em; transition: color var(--hover); }
.prueba-lista a:hover strong { color: var(--cian); }
.prueba-lista span { color: var(--mute); font-size: 16px; line-height: 1.5; }

.servicios-dl div { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 32px; padding: 28px 0; border-top: .67px solid var(--linea); }
.servicios-dl div:last-child { border-bottom: .67px solid var(--linea); }
.servicios-dl dt { font-family: var(--sora); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.servicios-dl dd { margin: 0; color: var(--mute); font-size: 17px; line-height: 1.6; max-width: 56ch; }

/* filas pegadas que se tapan al bajar (Ælen) */
.proceso { padding-bottom: 0; }
.proceso > .contenedor { margin-bottom: 24px; }
.pasos { position: relative; }
.paso { position: sticky; top: 64px; background: var(--negro); border-top: .67px dashed var(--linea); padding-block: 56px; min-height: clamp(260px, 38vh, 420px); }
.paso:last-child { padding-bottom: var(--seccion); }
.paso-grid { display: grid; grid-template-columns: 110px 1fr 1.4fr; gap: 40px; align-items: start; }
.paso-n { font-family: var(--sora); font-size: 24px; font-weight: 400; color: var(--rotulo); line-height: 1; padding-top: 10px; }
.paso h3 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.02em; line-height: 1.05; }
.paso p { color: var(--mute); font-size: 17px; line-height: 1.6; max-width: 48ch; }

/* ---------- legales ---------- */
.legal-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal-cabecera { position: sticky; top: 104px; }
.legal-cabecera .eyebrow { display: block; margin-bottom: 18px; }
.legal-cabecera h1 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -.03em; line-height: 1.02; margin-bottom: 18px; }
.legal-cabecera .cuerpo { font-size: 17px; margin-bottom: 22px; }
.legal-meta { font-size: 13px; line-height: 1.55; color: var(--mute-2); border-top: .67px solid var(--linea); padding-top: 14px; max-width: 40ch; }
.legal-cuerpo section { border-top: .67px solid var(--linea); padding: 28px 0; }
.legal-cuerpo section:last-child { border-bottom: .67px solid var(--linea); }
.legal-cuerpo h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.legal-cuerpo p { max-width: 65ch; font-size: 17px; line-height: 1.65; color: var(--mute); }
.legal-cuerpo p + p { margin-top: 12px; }

/* ---------- precios: filas pegadas por un pelo (Carriera), cero cajas ---------- */
.precio-producto .capitulo-cuerpo > .cuerpo { margin-bottom: 28px; }
.planes { counter-reset: plan; }
.plan { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, auto) minmax(0, 1.7fr); grid-template-areas: "nombre precio incluye" "nombre accion incluye"; gap: 6px 32px; padding: 28px 0; border-top: .67px solid var(--linea); align-items: start; }
.plan:last-child { border-bottom: .67px solid var(--linea); }
.plan-nombre { grid-area: nombre; }
.plan-nombre h3 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.plan-nombre p { font-size: 15px; line-height: 1.45; color: var(--mute); max-width: 22ch; }
.plan-precio { grid-area: precio; display: grid; grid-template-columns: auto auto; column-gap: 4px; align-items: baseline; justify-content: start; }
.plan-moneda { font-size: 15px; font-weight: 600; color: var(--mute); }
.plan-precio strong { font-family: var(--sora); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan-periodo { grid-column: 1 / -1; font-size: 13px; color: var(--mute-2); margin-top: 6px; }
.plan-accion { grid-area: accion; margin-top: 14px; font-size: 15px; }
.plan-incluye { grid-area: incluye; }
.plan-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 10px; }
.plan-incluye li { font-size: 16px; line-height: 1.5; color: var(--mute); border-left: .67px solid var(--linea); padding-left: 14px; }
.plan-incluye li + li { margin-top: 8px; }
.plan-extra { margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--mute-2); max-width: 70ch; }
.precio-notas .lineas { margin-top: 0; }
.precio-politica { margin-top: 36px; }
@media (max-width: 900px) {
  .plan { grid-template-columns: 1fr auto; grid-template-areas: "nombre precio" "incluye incluye" "accion accion"; gap: 18px 20px; }
  .plan-precio strong { font-size: 36px; }
  .plan-accion { margin-top: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .banda-grid, .capitulo-grid, .legal-grid, .contacto-grid, .prueba-grid { grid-template-columns: 1fr; }
  .banda:nth-of-type(even) .escena { order: 0; }
  /* ancho explícito: con margin auto un grid item deja de estirarse y, como la escena solo tiene hijos absolutos, colapsaba a 0×0 */
  .escena { width: min(100%, 560px); margin-inline: auto; }
  .capitulo-lado, .legal-cabecera { position: static; }
  .lineas-3 { grid-template-columns: 1fr; gap: 24px; }
  .pie-arriba { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --barra: 72px; }
  .barra { padding: 0 20px; grid-template-columns: auto 1fr; }
  .barra.compacta { height: 60px; }
  .nav { display: none; }
  .cta { display: none; }
  .menu-boton { display: inline-block; }
  .hero { min-height: auto; padding-top: 64px; padding-bottom: 88px; }
  .hero-k { font-size: 60vh; right: -10vw; bottom: -8vh; }
  .paso-grid { grid-template-columns: 1fr; gap: 12px; }
  .paso { top: 60px; min-height: auto; padding-block: 40px; }
  .servicios-dl div { grid-template-columns: 1fr; gap: 10px; }
  .prueba-lista a { grid-template-columns: 1fr; gap: 6px; }
  .formulario { grid-template-columns: 1fr; gap: 22px; }
  .pie-arriba { grid-template-columns: 1fr; gap: 32px; padding-block: 56px 40px; }
  .datos div { grid-template-columns: 80px 1fr; }
  .enlace.externo { margin-left: 0; display: block; margin-top: 10px; }
}
@media (max-width: 480px) {
  .btn { padding: 14px 22px; font-size: 14px; }
  .acciones { gap: 10px; }
  .hero h1 { font-size: clamp(38px, 11vw, 46px); }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .barra::after, .pie::after, .cta { animation: none !important; }
  .barra, .btn, .enlace, .lineas li { transition: none !important; }
  .brillo { display: none; }
}