/* ==========================================================================
   NV Group — css/landing.css
   La portada de NV Group (index.php). Hoja propia y entera: no carga la de
   NV Studio a propósito, para que no parezcan la misma plantilla (pedido de
   Nico, 29-10). Comparte con la familia lo de fondo: Onyx, el azul de Apple,
   el aluminio, el vidrio y la letra de Apple (la del sistema). Lo propio:
   toda oscura, la barra con la lente, la luz de la portada, el «quiénes
   somos» de a renglones, las cifras con su dibujo, las dos sedes en cards, la
   historia de costado y el formulario formal en una caja de vidrio. Las
   clases empiezan con «lp-»; las del formulario (campo, elegir, form__…) son
   las mismas de NV Studio, porque las usa js/formulario.js.
   ========================================================================== */

:root {
  --onyx: #0d0e10;
  --negro: #070708;
  --texto: #f5f5f7;
  --texto-2: rgba(245, 245, 247, 0.68);
  --texto-3: #86868b;
  --linea: rgba(255, 255, 255, 0.12);
  --linea-suave: rgba(255, 255, 255, 0.06);
  --azul: #0071e3;
  --azul-hover: #0077ed;
  --azul-claro: #2997ff;
  --rojo: #ff6961;
  --letra: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --resorte: cubic-bezier(0.3, 1.35, 0.4, 1);
  --ancho: 1200px;
  --icono: clamp(112px, 12vw, 156px);
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--onyx);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lp-sin-scroll { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 6px; }

.lp-saltar { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--azul); color: #fff; }
.lp-saltar:focus { top: 12px; }
.lp-caja { width: min(var(--ancho), 100% - 48px); margin-inline: auto; }
.lp-ic { width: 18px; height: 18px; flex: none; }

/* La etiqueta de cada sección, como en apple.com: corta, gris y en negrita */
.lp-rotulo { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.015em; color: var(--texto-3); }
.lp-titulo { margin-top: 8px; font-size: clamp(44px, 6.4vw, 88px); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; }
.lp-bajada { max-width: 34em; margin-top: 20px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; letter-spacing: -0.02em; color: var(--texto-2); }
.lp-seccion { padding-block: clamp(100px, 14vw, 180px); border-top: 1px solid var(--linea-suave); }

/* El botón de vidrio: el mismo «Enviar» del formulario de NV Studio (pedido
   de Nico para el «Hablemos» de la portada). Sobre la luz de la portada, el
   desenfoque deja ver el azul que se mueve atrás. */
.lp-vidrio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s var(--curva);
}
.lp-vidrio:hover { background: rgba(255, 255, 255, 0.17); }
.lp-vidrio:active { transform: scale(0.97); }
.lp-vidrio[disabled] { opacity: 0.6; cursor: default; transform: none; }
.lp-vidrio--grande { min-height: 52px; padding: 13px 30px; font-size: 17px; }
.lp-vidrio--ancho { width: 100%; min-height: 50px; }

/* --- Barra: el logo, la lente de las secciones y «Contactanos» ------------ */
.lp-barra { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s; }
.lp-barra--fondo { background-color: rgba(13, 14, 16, 0.68); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
.lp-barra--menu { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lp-barra__fila { display: flex; align-items: center; gap: 20px; width: min(var(--ancho), 100% - 48px); height: 64px; margin-inline: auto; }
.lp-barra__marca img { width: auto; height: 33px; }
.lp-nav { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; }
.lp-nav a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 980px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--texto-2); transition: color 0.25s; }
.lp-nav a:hover,
.lp-nav a.lp-nav__actual { color: var(--texto); }
/* La lente: un vidrio que se corre (con un poco de rebote) hasta la sección */
.lp-nav__lente {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--lw, 0px);
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  opacity: var(--lo, 0);
  transform: translateX(var(--lx, 0px));
  transition: transform 0.6s var(--resorte), width 0.6s var(--resorte), opacity 0.3s;
  pointer-events: none;
}
.lp-barra__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 980px;
  background: var(--azul);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.2s, transform 0.15s;
}
.lp-barra__cta:hover { background-color: var(--azul-hover); }
.lp-barra__cta:active { transform: scale(0.96); }
/* El «Menú» del celular: un «+» que gira y se vuelve «×» */
.lp-barra__menu {
  display: none;
  align-items: center;
  gap: 12px;
  height: 38px;
  margin-left: auto;
  padding: 0 6px 0 16px;
  border: 1px solid var(--linea);
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
}
.lp-barra__menu i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--texto); }
.lp-barra__menu i::before,
.lp-barra__menu i::after { content: ""; position: absolute; top: 50%; left: 7.5px; right: 7.5px; height: 1.6px; margin-top: -0.8px; border-radius: 1px; background: var(--onyx); transition: transform 0.4s var(--curva); }
.lp-barra__menu i::after { transform: rotate(90deg); }
.lp-barra__menu[aria-expanded="true"] i::before { transform: rotate(45deg); }
.lp-barra__menu[aria-expanded="true"] i::after { transform: rotate(135deg); }
/* La línea de avance: cuánto falta de la página */
.lp-progreso { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--azul-claro); transform: scaleX(var(--avance, 0)); transform-origin: 0 50%; opacity: 0.9; }

/* El menú a pantalla completa (celular) */
.lp-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 104px 24px 32px;
  background: rgba(7, 7, 8, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}
.lp-menu[hidden] { display: none; }
.lp-menu--abierto { opacity: 1; }
.lp-menu nav { margin-block: auto; }
.lp-menu__lista { display: grid; gap: 6px; }
.lp-menu__lista a { font-size: clamp(38px, 10vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -0.045em; color: var(--texto-2); transition: color 0.25s; }
.lp-menu__lista a:hover,
.lp-menu__lista a:focus-visible { color: var(--texto); }
.lp-menu__lista li,
.lp-menu__pie { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--curva), transform 0.6s var(--curva); transition-delay: calc(var(--n) * 55ms + 80ms); }
.lp-menu--abierto .lp-menu__lista li,
.lp-menu--abierto .lp-menu__pie { opacity: 1; transform: none; }
.lp-menu__pie { padding-top: 22px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-3); }

/* --- Portada: la luz que fluye y quiénes somos ---------------------------- */
.lp-portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 140px 0 clamp(72px, 12vh, 128px);
  overflow: hidden;
  isolation: isolate;
}
.lp-aurora { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 2.2s var(--curva); }
.lp-aurora.lista { opacity: 1; }
/* Sin WebGL: un brillo azul quieto, para que la portada no quede plana */
.lp-portada--sin-luz { background: radial-gradient(80% 70% at 72% 30%, rgba(0, 113, 227, 0.32), rgba(13, 14, 16, 0) 70%); }
/* Abajo a la izquierda, donde va el texto, la luz se apaga */
.lp-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(105% 80% at 0% 100%, rgba(13, 14, 16, 0.92) 0%, rgba(13, 14, 16, 0.55) 42%, rgba(13, 14, 16, 0) 72%);
  pointer-events: none;
}
.lp-portada__titulo { margin-top: 16px; font-size: clamp(54px, 9vw, 132px); font-weight: 600; line-height: 0.95; letter-spacing: -0.055em; }
.lp-portada__titulo span { display: block; }
/* La segunda línea, en aluminio: blanco arriba que se apaga abajo */
.lp-portada__titulo span:last-child {
  background: linear-gradient(180deg, #eef0f2 0%, #a3a9b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-portada__bajada { max-width: 46em; margin-top: 30px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; letter-spacing: -0.02em; color: var(--texto-2); }
.lp-portada__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 38px; }
.lp-enlace { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; color: var(--azul-claro); }
.lp-enlace .lp-ic { transition: transform 0.3s var(--curva); }
.lp-enlace:hover .lp-ic { transform: translateX(4px); }
/* La ruedita del mouse que invita a bajar */
.lp-bajar { position: absolute; bottom: 30px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 14px; }
.lp-bajar span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: lp-rueda 1.9s var(--curva) infinite; }
@keyframes lp-rueda {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* Entrada de la portada, de a una pieza */
.lp-entra { opacity: 0; transform: translateY(28px); filter: blur(8px); animation: lp-entrar 1.2s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 140ms + 250ms); }
html:not(.js) .lp-entra { opacity: 1; transform: none; filter: none; animation: none; }
@keyframes lp-entrar { to { opacity: 1; transform: none; filter: blur(0); } }

/* Lo que aparece al bajar */
.js [data-aparecer] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--curva), transform 1.1s var(--curva); transition-delay: calc(var(--i, 0) * 100ms); }
.js [data-aparecer].lp-visible { opacity: 1; transform: none; }

/* --- Los íconos tipo Ajustes del iPhone ----------------------------------
   El dibujo en blanco sobre un cuadrado redondeado con degradé y un brillo
   arriba (landing_ios() en inc/landing.php): gris Apple todos, salvo el de los
   asesores, verde o rojo según el horario. Los de nuestras marcas son su
   ícono de aluminio (lp-ios--marca). */
.lp-ios {
  --t: 34px;
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 6px 14px -4px rgba(0, 0, 0, 0.55);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--t);
  height: var(--t);
  overflow: hidden;
  border-radius: 23%;
  background: linear-gradient(180deg, var(--c1, #a1a1a6), var(--c2, #6e6e73));
  box-shadow: var(--sombra);
  color: #fff;
}
.lp-ios::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.lp-ios svg { position: relative; width: 60%; height: 60%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.lp-ios--verde { --c1: #4cd870; --c2: #29b04c; }
.lp-ios--rojo { --c1: #ff6158; --c2: #e3291e; }
.lp-ios--gris { --c1: #a1a1a6; --c2: #6e6e73; }
.lp-ios--marca { background: none; }
.lp-ios--marca::after { display: none; }
.lp-ios--marca img { width: 100%; height: 100%; }

/* --- Quiénes somos: el titular, los pilares, el cierre y las cifras -------- */
.lp-nosotros__titulo { max-width: 17em; margin-top: 18px; font-size: clamp(36px, 5vw, 68px); font-weight: 600; line-height: 1.06; letter-spacing: -0.045em; }
/* Cada palabra detrás de una línea invisible (js/landing.js le pone a cada una
   su renglón en --r): al llegar, los renglones suben de a uno */
.js [data-renglones] .lp-pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js [data-renglones] .lp-pal > span { display: inline-block; opacity: 0; transform: translateY(105%); transition: transform 1.1s var(--curva), opacity 0.9s var(--curva); transition-delay: calc(var(--r, 0) * 110ms); }
.js [data-renglones].lp-leido .lp-pal > span { opacity: 1; transform: none; }
/* Los tres pilares: el ícono, el rótulo y la frase, con una línea arriba que
   se pone azul y el ícono que se levanta al pasar el mouse */
.lp-pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); }
.lp-pilar { padding-top: 28px; border-top: 1px solid var(--linea); transition: border-color 0.4s; }
.lp-pilar:hover { border-top-color: var(--azul-claro); }
/* El ícono de metal cepillado: se levanta con el mouse */
.lp-pilar__icono { display: block; width: 56px; height: 56px; border-radius: 22.5%; box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.85); transition: transform 0.55s var(--resorte), box-shadow 0.4s; }
/* La placa es una imagen (el aluminio de los íconos de las marcas, sin
   dibujo) y el dibujo grabado va encima, en vector (landing_pilar_icono()).
   Se mueve solo mientras los pilares están a la vista (lp-anda, js/landing.js) */
.lp-metal { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 22.5%; background: url("../img/pilares/placa.webp") center / cover; }
.lp-metal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* (con más peso que el «animation» de cada pieza, que si no lo vuelve a prender) */
.lp-pilares .lp-metal * { animation-play-state: paused; }
.lp-pilares.lp-anda .lp-metal * { animation-play-state: running; }
/* El barco quieto y las olas que corren (una más lenta, para que tenga fondo) */
.lp-ola { animation: lp-ola 2.6s linear infinite; }
.lp-ola--lenta { animation-duration: 3.8s; }
@keyframes lp-ola { to { transform: translateX(-6px); } }
/* Los «<» y «>» se abren hacia afuera y vuelven, sin acercarse nunca a la
   «/», que parpadea como el cursor de quien está escribiendo */
.lp-cod { animation: lp-cod-izq 2.2s ease-in-out infinite; }
.lp-cod--der { animation-name: lp-cod-der; }
@keyframes lp-cod-izq { 0%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(-1.4px); } }
@keyframes lp-cod-der { 0%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(1.4px); } }
.lp-cod-barra { animation: lp-cursor 1.1s steps(1, end) infinite; }
@keyframes lp-cursor { 50% { opacity: 0.35; } }
/* Los tres puntitos suben de a uno, como cuando alguien está escribiendo */
.lp-punto { transform-box: fill-box; transform-origin: center; animation: lp-tipeo 1.3s ease-in-out infinite; }
.lp-punto:nth-child(2) { animation-delay: 0.16s; }
.lp-punto:nth-child(3) { animation-delay: 0.32s; }
@keyframes lp-tipeo { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-1.3px); opacity: 1; } }
.lp-pilar:hover .lp-pilar__icono { transform: translateY(-6px) rotate(-5deg); box-shadow: 0 24px 34px -14px rgba(0, 0, 0, 0.95); }
.lp-pilar__rotulo { display: block; margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--azul-claro); }
.lp-pilar__texto { margin-top: 8px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 600; line-height: 1.22; letter-spacing: -0.03em; }
/* El cierre: la primera mitad en el azul de Apple (el que usa sobre fondo
   oscuro), la segunda en blanco */
.lp-nosotros__cierre { max-width: 25em; margin-top: clamp(56px, 7vw, 96px); font-size: clamp(24px, 2.7vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: -0.035em; color: var(--azul-claro); }
.lp-nosotros__cierre span { color: var(--texto); }

.lp-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(64px, 9vw, 112px); }
/* Cada cifra en vidrio, con una luz azul que da vueltas por el borde y otra
   que sigue al mouse */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lp-cifra {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.035);
  isolation: isolate;
  transition: transform 0.55s var(--resorte), background-color 0.4s;
}
/* Con el mouse encima la cifra se levanta, se aclara y vuelve a arrancar (el
   número rueda y el dibujo se arma de nuevo: js/landing.js) */
.lp-cifra:hover { transform: translateY(-6px); background-color: rgba(255, 255, 255, 0.06); }
.lp-reinicio * { transition: none !important; animation: none !important; }
.lp-cifra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--giro), rgba(41, 151, 255, 0) 0deg, rgba(41, 151, 255, 0.95) 50deg, rgba(41, 151, 255, 0) 110deg, rgba(255, 255, 255, 0.1) 200deg, rgba(41, 151, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lp-girar 7s linear infinite;
  animation-delay: calc(var(--i, 0) * -2.3s);
}
.lp-cifra::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(41, 151, 255, 0.16), rgba(41, 151, 255, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.lp-cifra:hover::after { opacity: 1; }
@keyframes lp-girar { to { --giro: 360deg; } }
/* El número rueda como un contador (js/landing.js arma un rodillo por dígito) */
.lp-cifra__numero { display: inline-flex; font-size: clamp(60px, 6.6vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.lp-rodillo { display: inline-block; height: 1em; overflow: hidden; }
/* La tira tiene 0-9 dos veces (20 dígitos): cada uno es el 5 % de su alto */
.lp-rodillo > span { display: block; transform: translateY(calc(var(--d, 0) * -5%)); transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--retraso, 0s); }
.lp-rodillo > span > span { display: block; height: 1em; }
.lp-cifra__rotulo { display: block; max-width: 15em; margin-top: 16px; font-size: 17px; line-height: 1.4; color: var(--texto-2); }

/* El dibujo de cada cifra, abajo de todo. Se arma cuando la cifra está bien a
   la vista (lp-anima, js/landing.js) */
.lp-dibujo { display: block; width: 100%; height: auto; margin-top: auto; padding-top: 30px; overflow: visible; }
.lp-dibujo text { fill: var(--texto-3); font-family: var(--letra); font-size: 11px; font-weight: 600; letter-spacing: 0; }
/* Los años: la línea se llena y cada año se prende al pasar; el de hoy late */
.lp-anios__base { stroke: rgba(255, 255, 255, 0.14); stroke-width: 2; stroke-linecap: round; }
.lp-anios__lleno { stroke: var(--azul-claro); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(41, 151, 255, 0.8)); transition: stroke-dashoffset 1.6s linear 0.3s; }
.lp-anios__marca { fill: var(--onyx); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; transition-delay: calc(0.3s + 1.6s * var(--k) / (var(--n) - 1)); }
.lp-anios__marca--hoy { stroke-width: 2; }
.lp-anima .lp-anios__lleno { stroke-dashoffset: 0; }
.lp-anima .lp-anios__marca { fill: var(--azul-claro); stroke: var(--azul-claro); }
.lp-anima .lp-anios__marca--hoy { fill: #fff; }
.lp-halo { fill: none; stroke: var(--azul-claro); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-anima .lp-halo { animation: lp-latido 2.2s 2.1s infinite; }
/* Con el mouse sobre la línea, se agranda el año más cercano y aparece arriba */
.lp-anios__marca { transform-box: fill-box; transform-origin: center; }
.lp-anios__marca.lp-foco { transform: scale(1.7); fill: #fff; transition: transform 0.25s var(--resorte), fill 0.2s; }
.lp-anios__etiqueta { fill: #fff; font-size: 12px; opacity: 0; transition: opacity 0.2s; }
.lp-recorre .lp-anios__etiqueta { opacity: 1; }
.lp-recorre .lp-anios__marca { transition: transform 0.25s var(--resorte), fill 0.2s; }
/* Las banderas se mueven solas al pasarles el mouse */
.lp-paises__pais img { transition: transform 0.5s var(--resorte); }
.lp-paises__pais:hover img { transform: scale(1.14) rotate(-8deg); }
@keyframes lp-latido { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
/* Los países: las dos banderas aparecen con un rebote y un arco las une */
.lp-paises { display: flex; align-items: flex-end; }
.lp-paises__pais { display: grid; justify-items: center; gap: 8px; opacity: 0; transform: scale(0.5); transition: transform 0.8s var(--resorte), opacity 0.5s; transition-delay: calc(0.3s + var(--k) * 0.9s); }
.lp-paises__pais img { width: 44px; height: 44px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.lp-paises__pais small { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.lp-paises__arco { flex: 1; min-width: 0; height: auto; margin: 0 10px 34px; overflow: visible; }
.lp-paises__arco path { fill: none; stroke: var(--azul-claro); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(41, 151, 255, 0.8)); transition: stroke-dashoffset 0.9s var(--curva) 0.75s; }
.lp-paises__arco circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px rgba(41, 151, 255, 1)); transition: opacity 0.4s 1.6s; }
.lp-anima .lp-paises__pais { opacity: 1; transform: none; }
.lp-anima .lp-paises__arco path { stroke-dashoffset: 0; }
.lp-anima .lp-paises__arco circle { opacity: 1; }
/* Lo demás: una curva que crece y un punto que late en la punta */
.lp-curva__linea { fill: none; stroke: var(--azul-claro); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(41, 151, 255, 0.7)); transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.3s; }
.lp-curva__area { opacity: 0; transition: opacity 1.2s 1.1s; }
.lp-curva__punto { fill: #fff; opacity: 0; transition: opacity 0.3s 1.95s; }
.lp-curva__aro { fill: none; stroke: var(--azul-claro); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-anima .lp-curva__linea { stroke-dashoffset: 0; }
.lp-anima .lp-curva__area,
.lp-anima .lp-curva__punto { opacity: 1; }
.lp-anima .lp-curva__aro { animation: lp-latido 2.2s 2.1s infinite; }

/* --- Presencia regional: las dos sedes en cards ----------------------------- */
.lp-presencia { position: relative; border-top: 1px solid var(--linea-suave); }
.lp-presencia__pista { height: 260vh; }
.lp-presencia__escena { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding-top: clamp(84px, 10vh, 120px); overflow: hidden; }
.lp-presencia__cabeza { text-align: center; }
.lp-presencia__cabeza .lp-bajada { margin-inline: auto; }
.lp-orillas { position: relative; flex: 1; width: min(var(--ancho), 100% - 48px); margin: clamp(28px, 4vh, 48px) auto 0; }
.lp-orilla {
  --abre: min(29vw, 410px);
  position: absolute;
  top: 0;
  left: 50%;
  width: min(380px, 30vw);
  margin-left: calc(min(380px, 30vw) / -2);
  transform: translateX(calc(var(--sep, 0) * var(--lado) * var(--abre))) rotate(calc((1 - var(--sep, 0)) * var(--lado) * -4deg)) scale(calc(0.88 + var(--sep, 0) * 0.12));
  will-change: transform;
}
/* La de la izquierda es la del país del dominio (va primera en el HTML) */
.lp-orilla--izq { --lado: -1; z-index: 2; }
.lp-orilla--der { --lado: 1; z-index: 1; }
/* La card, como las de NV Studio pero en oscuro: la foto arriba con la ciudad
   y su bandera, abajo el país y el domicilio */
.lp-orilla__card {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #1b1c20, #141518);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
.lp-orilla__foto { position: relative; aspect-ratio: 16 / 10.5; max-height: 30vh; width: 100%; overflow: hidden; background: #1a1b1f; }
.lp-orilla__foto > img { width: 100%; height: 100%; object-fit: cover; }
.lp-orilla__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62)); }
.lp-orilla__ciudad { position: absolute; left: 20px; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; color: #fff; }
.lp-bandera { width: 40px; height: 40px; flex: none; border-radius: 50%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); }
.lp-orilla__ciudad h3 { display: grid; }
.lp-orilla__ciudad b { font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.lp-orilla__ciudad small { margin-top: 2px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 0.8; }
.lp-orilla__cuerpo { display: grid; gap: 8px; padding: 18px 22px 22px; opacity: var(--info, 0); transform: translateY(calc((1 - var(--info, 0)) * 12px)); }
.lp-orilla__pais { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--azul-claro); }
.lp-orilla__domicilio { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.lp-orilla__domicilio .lp-ic { width: 16px; height: 16px; margin-top: 3px; color: var(--texto-3); }
/* El arco de luz entre las dos sedes y el punto que viaja por él */
.lp-rio { position: absolute; top: 4%; left: 50%; width: min(30vw, 420px); height: auto; margin-left: calc(min(30vw, 420px) / -2); overflow: visible; }
.lp-rio__arco { fill: none; stroke: var(--azul-claro); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--arco, 0)); filter: drop-shadow(0 0 6px rgba(41, 151, 255, 0.7)); }
.lp-rio__luz { fill: #fff; filter: drop-shadow(0 0 8px rgba(41, 151, 255, 1)); opacity: 0; transition: opacity 0.6s; }
.lp-presencia--unida .lp-rio__luz { opacity: 1; }
.lp-presencia__dato {
  position: absolute;
  top: calc(4% + min(30vw, 420px) * 0.36);
  left: 50%;
  width: min(24vw, 300px);
  margin-left: calc(min(24vw, 300px) / -2);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  color: var(--texto-2);
  opacity: var(--info, 0);
}

/* --- Marcas: los íconos de aluminio sobre un estante de vidrio ----------- */
.lp-estante { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(64px, 8vw, 104px); }
.lp-estante::before {
  content: "";
  position: absolute;
  top: var(--icono);
  left: -3%;
  right: -3%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24) 18%, rgba(255, 255, 255, 0.24) 82%, rgba(255, 255, 255, 0));
}
.lp-marca__caja { display: grid; justify-items: start; }
.lp-marca__icono {
  position: relative;
  display: block;
  width: var(--icono);
  aspect-ratio: 1;
  border-radius: 22.5%;
  box-shadow: 0 34px 50px -26px rgba(0, 0, 0, 0.9);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sube, 0px));
  transition: transform 0.6s var(--resorte), box-shadow 0.5s var(--curva);
}
.lp-marca__icono img { width: 100%; height: 100%; }
/* Las tres siempre encendidas (pedido de Nico); con el mouse, la del mouse se
   eleva: sube, la sombra se abre y el reflejo se aleja */
.lp-marca:hover .lp-marca__icono,
.lp-marca:focus-within .lp-marca__icono { --sube: -16px; box-shadow: 0 52px 60px -28px rgba(0, 0, 0, 0.95); }
.lp-marca__luz { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--lx, 30%) var(--ly, 18%), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.lp-marca:hover .lp-marca__luz { opacity: 1; }
.lp-marca__reflejo { display: block; width: var(--icono); height: calc(var(--icono) * 0.34); overflow: hidden; border-radius: 0 0 22.5% 22.5% / 0 0 60% 60%; opacity: 0.2; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); pointer-events: none; transition: opacity 0.5s, transform 0.6s var(--resorte); }
.lp-marca:hover .lp-marca__reflejo { opacity: 0.1; transform: translateY(8px); }
.lp-marca__reflejo img { width: 100%; transform: scaleY(-1); }
.lp-marca__rel { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--azul-claro); }
.lp-marca__nombre { margin-top: 6px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.lp-marca__tipo { margin-top: 2px; font-size: 17px; color: var(--texto-2); }
.lp-marca__texto { max-width: 24em; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--texto-3); }
.lp-marca__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; color: var(--azul-claro); }
.lp-marca__ir .lp-ic { width: 16px; height: 16px; transition: transform 0.3s var(--curva); }
.lp-marca:hover .lp-marca__ir .lp-ic { transform: translate(2px, -2px); }

/* --- Historia: avanza de costado al bajar ------------------------------------ */
.lp-historia { position: relative; border-top: 1px solid var(--linea-suave); }
.lp-historia__pista { height: calc(var(--hitos, 6) * 55vh + 100vh); }
.lp-historia__escena { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding-top: clamp(92px, 11vh, 132px); overflow: hidden; }
/* El año grande del fondo: cambia con el hito encendido */
.lp-historia__anio {
  position: absolute;
  right: -1vw;
  bottom: -5vh;
  font-size: clamp(170px, 27vw, 400px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  transition: opacity 0.35s, transform 0.5s var(--curva);
}
.lp-historia__anio.lp-cambia { opacity: 0; transform: translateY(24px); }
.lp-historia__riel { position: relative; flex: 1; display: flex; align-items: center; }
.lp-hitos {
  position: relative;
  display: flex;
  width: max-content;
  gap: clamp(40px, 5vw, 84px);
  padding-left: max(24px, calc((100vw - var(--ancho)) / 2));
  padding-right: 45vw;
  transform: translateX(calc(var(--corre, 0) * -1px));
  will-change: transform;
}
/* La línea de los hitos y lo que ya se recorrió, en azul */
.lp-hitos::before,
.lp-hitos::after { content: ""; position: absolute; top: 7px; left: max(24px, calc((100vw - var(--ancho)) / 2)); height: 1px; }
.lp-hitos::before { right: 45vw; background: var(--linea); }
.lp-hitos::after { width: calc(var(--lleno, 0) * 1px); background: var(--azul-claro); box-shadow: 0 0 12px rgba(41, 151, 255, 0.8); }
.lp-hito { position: relative; flex: 0 0 clamp(260px, 23vw, 330px); padding-top: 38px; opacity: 0.38; transition: opacity 0.5s, transform 0.6s var(--curva); }
.lp-hito--visto { opacity: 0.5; }
.lp-hito.lp-hito--activo { opacity: 1; transform: translateY(-6px); }
.lp-hito__punto { position: absolute; top: 0; left: 0; z-index: 1; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: var(--onyx); transition: all 0.4s; }
.lp-hito--visto .lp-hito__punto,
.lp-hito--activo .lp-hito__punto { border-color: var(--azul-claro); background: var(--azul-claro); }
.lp-hito--activo .lp-hito__punto { box-shadow: 0 0 0 7px rgba(41, 151, 255, 0.18), 0 0 26px rgba(41, 151, 255, 0.8); }
.lp-hito__anio { font-size: 15px; font-weight: 600; color: var(--azul-claro); font-variant-numeric: tabular-nums; }
.lp-hito__icono { display: block; width: 64px; height: 64px; margin-top: 18px; overflow: hidden; border-radius: 22.5%; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.9); }
.lp-hito__icono img { width: 100%; height: 100%; }
.lp-hito__titulo { margin-top: 18px; font-size: clamp(22px, 2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.lp-hito__texto { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.lp-hito__lugar { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--texto-3); }

/* --- Contacto: el formulario formal ------------------------------------------ */
.lp-contacto__grilla { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.lp-contacto__cabeza { position: sticky; top: 112px; }
.lp-contacto__puntos { display: grid; gap: 16px; margin-top: 40px; }
.lp-contacto__puntos li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--texto-2); }
.lp-contacto__puntos .lp-ios { --t: 36px; }
/* «Asesores en línea»: el ícono verde late, como algo que está prendido */
.lp-estado--en-linea .lp-ios { animation: lp-pulso 2.2s var(--curva) infinite; }
.lp-estado--en-linea span { color: var(--texto); }
@keyframes lp-pulso {
  0%   { box-shadow: var(--sombra), 0 0 0 0 rgba(52, 199, 89, 0.55); }
  100% { box-shadow: var(--sombra), 0 0 0 11px rgba(52, 199, 89, 0); }
}

/* La caja de vidrio, con la línea de arriba que se llena a medida que se
   completa lo obligatorio (--completo, js/landing.js) */
.lp-form {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px rgba(0, 0, 0, 0.38);
}
.lp-form__avance { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); box-shadow: 0 0 14px rgba(41, 151, 255, 0.8); transform: scaleX(var(--completo, 0)); transform-origin: 0 50%; transition: transform 0.6s var(--curva); }
.lp-form__legal { font-size: 13px; line-height: 1.45; color: var(--texto-3); }
.lp-form__legal a { color: var(--azul-claro); white-space: nowrap; }
.lp-form__legal a:hover { text-decoration: underline; }

/* Los campos: los mismos de NV Studio (rótulo arriba, caja oscura con borde) */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.campo { display: grid; gap: 7px; min-width: 0; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo label,
.elegir__rotulo { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.72); }
.campo input,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 17px;
  letter-spacing: -0.015em;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-height: 136px; resize: vertical; line-height: 1.45; }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(255, 255, 255, 0.36); }
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--azul-claro); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.24); }
.campo--error input,
.campo--error textarea { border-color: #ff8a80; }
.campo__error { font-size: 13px; color: #ffb4ab; }
.campo__error:empty { display: none; }
.campo--trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__aviso { display: none; grid-column: 1 / -1; padding: 12px 15px; border-radius: 13px; font-size: 15px; }
.form__aviso.visible { display: block; }
.form__aviso--ok { background: rgba(48, 209, 88, 0.16); color: #c3f5cf; }
.form__aviso--mal { background: rgba(255, 105, 97, 0.16); color: #ffcdc8; }
.form__pie { grid-column: 1 / -1; display: grid; gap: 16px; margin-top: 6px; }

/* El motivo: el elegidor de NV Studio. Cerrado parece un campo más, con lo
   elegido en pastillitas; abierto, las opciones con su ícono, como una lista
   de iOS en oscuro, y se tildan varias. Sin JavaScript las opciones se ven
   siempre y el botón de arriba no aparece. */
.elegir__boton {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 8px 46px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.elegir__boton:hover { background: rgba(255, 255, 255, 0.09); }
.elegir--abierto .elegir__boton { border-color: var(--azul-claro); background: rgba(255, 255, 255, 0.1); }
.elegir__boton:focus-visible { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.24); }
.campo--error .elegir__boton { border-color: #ff8a80; }
.elegir__resumen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.elegir__vacio { padding-left: 6px; font-size: 17px; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.36); }
.elegir__pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px 4px 5px;
  border-radius: 980px;
  background: rgba(41, 151, 255, 0.22);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.elegir__pastilla .lp-ios { --t: 21px; border-radius: 6px; box-shadow: none; }
.elegir__flecha {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.35s var(--curva);
}
.elegir--abierto .elegir__flecha { transform: rotate(180deg); }
html:not(.js) .elegir__boton,
html:not(.js) .elegir__listo { display: none; }
/* Se abre empujando lo de abajo, de a poco */
.js .elegir__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--curva), opacity 0.25s, visibility 0s 0.45s;
}
.js .elegir--abierto .elegir__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.45s var(--curva), opacity 0.3s 0.05s, visibility 0s;
}
.elegir__adentro { min-height: 0; overflow: hidden; }
.elegir__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 6px 3px 3px; }
.elegir .elegir__opcion {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s var(--curva);
}
.elegir .elegir__opcion:hover { background: rgba(255, 255, 255, 0.08); }
.elegir .elegir__opcion:active { transform: scale(0.98); }
/* La casilla de verdad: invisible, pero es la que se tilda, se manda y se recorre con el teclado */
.elegir .elegir__opcion input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.elegir__icono { display: grid; place-items: center; width: 34px; height: 34px; }
.elegir__tilde { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); color: transparent; transition: background 0.2s, box-shadow 0.2s, color 0.2s; }
.elegir__tilde .lp-ic { width: 14px; height: 14px; stroke-width: 2.6; }
/* Elegida: teñida de azul, como lo seleccionado en iOS */
.elegir .elegir__opcion:has(input:checked) { background: rgba(41, 151, 255, 0.16); box-shadow: inset 0 0 0 1.5px var(--azul-claro); }
.elegir__opcion:has(input:checked) .elegir__tilde { background: var(--azul); box-shadow: none; color: #fff; }
.elegir .elegir__opcion:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--azul-claro), 0 0 0 4px rgba(41, 151, 255, 0.24); }
.elegir__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 3px 4px; }
.elegir__cuenta { font-size: 13px; color: rgba(255, 255, 255, 0.56); }
.elegir__listo { min-height: 34px; padding: 6px 18px; border-radius: 980px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; transition: background 0.2s, transform 0.15s var(--curva); }
.elegir__listo:hover { background: var(--azul-hover); }
.elegir__listo:active { transform: scale(0.96); }

/* Recibido: el tilde se dibuja solo */
.enviado { display: none; }
.contacto__caja.enviado-ok .form { display: none; }
.contacto__caja.enviado-ok .enviado { display: grid; justify-items: start; gap: 12px; padding: 12px 0; animation: lp-entrar 0.9s var(--curva) both; }
.contacto__caja.enviado-ok .lp-form__avance { transform: scaleX(1); }
.enviado__circulo { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 10px; border-radius: 50%; background: var(--azul); color: #fff; box-shadow: 0 16px 44px rgba(0, 113, 227, 0.45); }
.enviado__circulo svg { width: 40px; height: 40px; }
.enviado__circulo path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: lp-tilde 0.7s 0.35s var(--curva) forwards; }
@keyframes lp-tilde { to { stroke-dashoffset: 0; } }
.enviado__titulo { font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.04em; }
.enviado__texto { font-size: 19px; color: var(--texto-2); }

/* --- Pie ------------------------------------------------------------------ */
.lp-pie { padding: 28px 0 36px; border-top: 1px solid var(--linea-suave); font-size: 13px; color: var(--texto-3); }
.lp-pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
/* Las dos banderas, a la derecha: la del dominio marcada, la otra lleva al otro */
.lp-pie__paises { display: flex; align-items: center; gap: 12px; }
.lp-pie__pais { display: block; width: 26px; height: 26px; border-radius: 50%; opacity: 0.5; transition: opacity 0.25s, transform 0.35s var(--resorte), box-shadow 0.25s; }
.lp-pie__pais img { width: 100%; height: 100%; }
.lp-pie__pais:hover,
.lp-pie__pais:focus-visible { opacity: 1; transform: scale(1.12); }
.lp-pie__pais--actual { opacity: 1; box-shadow: 0 0 0 2px var(--onyx), 0 0 0 3.5px rgba(245, 245, 247, 0.75); }

/* --- Sin JavaScript: las sedes separadas y la historia se recorre a mano --- */
html:not(.js) .lp-presencia { --sep: 1; --arco: 1; --info: 1; }
html:not(.js) .lp-historia__pista { height: auto; }
html:not(.js) .lp-historia__escena { position: static; height: auto; padding-bottom: 80px; }
html:not(.js) .lp-historia__riel { overflow-x: auto; padding-bottom: 24px; }
html:not(.js) .lp-hito { opacity: 1; }

/* --- Tablet y celular ------------------------------------------------------ */
@media (max-width: 900px) {
  .lp-nav,
  .lp-barra__cta { display: none; }
  .lp-barra__menu { display: inline-flex; }
  .lp-bajar { display: none; }
  .lp-cifras { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-pilares { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-pilar { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 22px 0; }
  .lp-pilar__icono { grid-row: 1 / span 2; }
  .lp-pilar__rotulo { margin-top: 2px; }

  /* Las sedes, una debajo de la otra y sin escena quieta */
  .lp-presencia__pista { height: auto; }
  .lp-presencia__escena { position: static; height: auto; padding: clamp(96px, 14vw, 140px) 0; overflow: visible; }
  .lp-orillas { display: grid; gap: 24px; margin-top: 48px; }
  .lp-orilla { position: static; width: auto; margin: 0; transform: none; }
  .lp-orilla__foto { max-height: none; }
  .lp-orilla__cuerpo { opacity: 1; transform: none; }
  .lp-rio { display: none; }
  .lp-presencia__dato { position: static; width: auto; margin: 4px 0 0; opacity: 1; text-align: left; }

  .lp-estante { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .lp-estante::before { display: none; }
  .lp-marca__caja { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .lp-marca__icono { --icono: 96px; grid-row: 1 / span 6; }
  .lp-marca__reflejo { display: none; }
  .lp-marca__rel { margin-top: 2px; }

  /* La historia, en lista, con la línea al costado */
  .lp-historia__pista { height: auto; }
  .lp-historia__escena { position: static; height: auto; padding: clamp(96px, 14vw, 140px) 0; overflow: visible; }
  .lp-historia__anio { display: none; }
  .lp-historia__riel { display: block; margin-top: 48px; }
  .lp-hitos { flex-direction: column; gap: 44px; width: min(var(--ancho), 100% - 48px); margin-inline: auto; padding: 0 0 0 36px; transform: none; }
  .lp-hitos::before,
  .lp-hitos::after { top: 6px; left: 7px; width: 1px; }
  .lp-hitos::before { right: auto; bottom: 0; }
  .lp-hitos::after { height: calc(var(--lleno, 0) * 1px); }
  .lp-hito { flex: none; padding-top: 0; opacity: 0.45; }
  .lp-hito__punto { left: -36px; }
  .lp-hito.lp-hito--activo { transform: none; }

  .lp-contacto__grilla { grid-template-columns: minmax(0, 1fr); }
  .lp-contacto__cabeza { position: static; }
  .lp-contacto__puntos { margin-top: 28px; }
}
@media (max-width: 640px) {
  .lp-caja,
  .lp-barra__fila { width: calc(100% - 40px); }
  .lp-barra__fila { height: 58px; }
  .lp-barra__marca img { height: 28px; }
  .lp-portada { padding-top: 120px; }
  .lp-marca__caja { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
  .lp-marca__icono { --icono: 76px; }
  .lp-hitos { width: calc(100% - 40px); }
  .lp-form { padding: 22px 18px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .elegir__grilla { grid-template-columns: minmax(0, 1fr); }
}

/* --- Con «reducir movimiento»: quieto -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-entra { opacity: 1; transform: none; filter: none; animation: none; }
  .js [data-aparecer] { opacity: 1; transform: none; transition: none; }
  .lp-cifra::before,
  .lp-bajar span,
  .lp-anima .lp-halo,
  .lp-anima .lp-curva__aro,
  .lp-estado--en-linea .lp-ios,
  .lp-metal * { animation: none; }
  .js [data-renglones] .lp-pal > span { opacity: 1; transform: none; transition: none; }
  .lp-cifra:hover,
  .lp-pilar:hover .lp-pilar__icono,
  .lp-paises__pais:hover img { transform: none; }
  .lp-rodillo > span,
  .lp-anios__lleno,
  .lp-anios__marca,
  .lp-paises__pais,
  .lp-paises__arco path,
  .lp-paises__arco circle,
  .lp-curva__linea,
  .lp-curva__area,
  .lp-curva__punto,
  .lp-marca__icono,
  .lp-nav__lente,
  .lp-form__avance,
  .lp-menu,
  .lp-menu__lista li,
  .lp-menu__pie,
  .js .elegir__panel,
  .elegir__flecha { transition: none !important; }
}

/* --- Con «reducir transparencia»: superficies sólidas --------------------- */
@media (prefers-reduced-transparency: reduce) {
  .lp-barra--fondo { background-color: var(--onyx); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-menu { background: var(--negro); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-nav__lente { background: #2a2b30; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-vidrio { background-color: #26272b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-form { background: #1c1d21; -webkit-backdrop-filter: none; backdrop-filter: none; }
}