/* ==========================================================================
   Landing pública de Ordulari.
   Parte de los tokens del portal (ordulari.css: Satoshi, --accent, --ink, --bg-app…) y solo
   añade lo suyo. Dos decisiones que no están en el portal:
   - El gris de texto secundario es #687089 (4,9:1); el --muted del portal (2,6:1) no se usa
     para texto aquí.
   - Una sola escala de radios: 12 los controles, 20 los bloques, 999 las pastillas. El marco
     de los móviles lleva el suyo porque imita un teléfono.
   ========================================================================== */

.lp {
  /* Los botones de acción usan el mismo naranja que el portal y la app, para que la marca
     sea una sola. Con texto blanco queda en 2,7:1, por debajo del 4,5:1 de accesibilidad:
     decisión de marca tomada a sabiendas. */
  --lp-accion: var(--action);
  --lp-accion-hover: var(--action-hover);
  --lp-texto: #1F2A4D;
  --lp-texto-2: #4E5A78;
  --lp-texto-suave: #687089;
  --lp-azul-oscuro: #4454D8;
  --lp-borde: #E2E6F0;
  --lp-borde-control: #858EA6;
  --lp-tinte: #ECEFF8;
  /* Estados y superficies con color, medidos para texto: el tono oscuro de cada par pasa
     4,5:1 sobre su fondo claro. */
  --lp-exito: #16804A;
  --lp-exito-fondo: #E4F7EC;
  --lp-aviso: #946300;
  --lp-aviso-fondo: #FDF3DF;
  --lp-error: #C8284A;
  --lp-error-texto: #9F1C38;
  --lp-error-fondo: #FDE7EC;
  --lp-violeta: #6B5CE7;
  --lp-marco: #1F2A4D;
  --lp-azul-suave-hover: #DFE3FD;
  --lp-fondo-cabecera: rgba(255, 255, 255, .94);
  --lp-halo: rgba(91, 108, 240, .14);
  --lp-radio-control: 12px;
  --lp-radio-bloque: 20px;
  --lp-sombra: 0 1px 2px rgba(31, 42, 77, .05), 0 12px 32px rgba(31, 42, 77, .08);
  --lp-sombra-alta: 0 24px 60px rgba(31, 42, 77, .18);
  --lp-curva: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--bg-app);
  color: var(--lp-texto);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp a { color: inherit; }
.lp a:hover { text-decoration: none; }
.lp img { max-width: 100%; display: block; }
.lp h1, .lp h2, .lp h3 { color: var(--lp-texto); text-wrap: balance; }
.lp p { text-wrap: pretty; }
/* El --focus del portal es un lila muy claro (1,6:1 sobre blanco): de fondo sirve, de contorno no
   se ve. Aquí el anillo va en el azul oscuro (5,2:1). */
/* Lo que pinta el navegador también lleva la marca: selección, cursor de texto y subrayados. */
.lp ::selection { background: var(--focus); color: var(--lp-texto); }
.lp input, .lp textarea { caret-color: var(--lp-azul-oscuro); }
.lp a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lp :focus-visible { outline: 3px solid var(--lp-azul-oscuro); outline-offset: 2px; border-radius: 6px; }

.lp-contenedor { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.lp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* La sombra solo cuando se ve: escondido arriba, su difuminado asomaba como una mancha gris. */
.lp-saltar { position: absolute; left: 12px; top: -48px; z-index: 30; padding: 11px 14px; border-radius: var(--lp-radio-control); background: var(--surface); }
.lp-saltar:focus { top: 12px; box-shadow: var(--lp-sombra); }
.lp-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- Botones ---------- */
.lp-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--lp-radio-control);
  font: 700 15px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms var(--lp-curva), background-color 160ms ease, border-color 160ms ease;
}
.lp-boton:active { transform: scale(.97); }
.lp-boton--accion, .lp .lp-boton--accion { background: var(--lp-accion); color: #fff; }
.lp-boton--linea, .lp .lp-boton--linea { background: var(--surface); color: var(--lp-texto); border-color: var(--lp-borde); }
.lp-boton--suave, .lp .lp-boton--suave { height: 44px; padding: 0 16px; background: var(--accent-soft); color: var(--lp-azul-oscuro); font-size: 14px; }
.lp-boton--ancho { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .lp-boton--accion:hover { background: var(--lp-accion-hover); }
  .lp-boton--linea:hover { border-color: var(--lp-borde-control); }
  .lp-boton--suave:hover { background: var(--lp-azul-suave-hover); }
}

/* ---------- Cabecera ---------- */
/* Cabecera fija arriba. Sin scroll es transparente y se funde con la portada; en cuanto la
   página se mueve pasa a blanco al instante, sin animación. */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
.lp-nav__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; visibility: hidden; }
.lp-nav[data-scrolled] .lp-nav__fondo,
.lp-nav[data-abierto] .lp-nav__fondo {
  visibility: visible;
  background-color: var(--lp-fondo-cabecera); border-bottom: 1px solid var(--lp-borde);
  box-shadow: 0 6px 24px rgba(31, 42, 77, .06);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
}
.lp-nav__fila { height: 72px; display: flex; align-items: center; gap: 28px; }
.lp-nav__marca { display: inline-flex; align-items: center; min-height: 44px; }
.lp-nav__marca img { width: 136px; height: auto; }
.lp-nav__enlaces { display: flex; gap: 26px; margin-left: auto; }
.lp-nav__enlaces a { font-size: 15px; font-weight: 500; color: var(--lp-texto-2); text-decoration: none; transition: color 150ms ease; padding-block: 12px; }
.lp-nav__acciones { display: flex; align-items: center; gap: 10px; }
.lp-nav__enlaces a.lp-nav__acceso { display: none; }
.lp-nav__menu {
  display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--lp-radio-control);
  background: transparent; color: var(--lp-texto); cursor: pointer; align-items: center; justify-content: center;
  transition: transform 160ms var(--lp-curva);
}
.lp-nav__menu:active { transform: scale(.97); }
/* Hamburguesa y aspa superpuestas: el botón enseña lo que hará al pulsarlo. El desenfoque
   funde el cruce para que se lea como un solo icono que cambia, no como dos. */
.lp-nav__ico { position: absolute; transition: opacity 180ms ease, transform 180ms var(--lp-curva), filter 180ms ease; }
.lp-nav__ico--cerrar,
.lp-nav__menu[aria-expanded="true"] .lp-nav__ico--abrir { opacity: 0; transform: scale(.9); filter: blur(2px); }
.lp-nav__menu[aria-expanded="true"] .lp-nav__ico--cerrar { opacity: 1; transform: none; filter: none; }

/* ---------- Hero ----------
   El portal es lo principal: una ventana de navegador con el panel real, que se sale por la
   derecha, y el móvil delante como complemento. */
.lp-hero { position: relative; overflow: hidden; padding-block: 128px 72px; }
/* Un halo del azul de marca detrás de las pantallas, muy suave: da profundidad sin brillo. */
.lp-hero::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 140%; z-index: 0;
  background: radial-gradient(closest-side, var(--lp-halo), transparent);
  pointer-events: none;
}
.lp-hero__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: 48px; }
.lp-hero h1 { font-size: clamp(2.1rem, 3.3vw, 2.9rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin: 0; max-width: 24ch; }
.lp-hero__sub { margin: 22px 0 0; font-size: 1.15rem; line-height: 1.6; color: var(--lp-texto-2); max-width: 44ch; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.lp-hero__visual { position: relative; height: 500px; }
.lp-navegador {
  position: absolute; left: 0; right: 0; top: 20px; margin: 0;
  border-radius: 14px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra);
}
.lp-navegador__barra { display: flex; gap: 6px; align-items: center; height: 30px; padding-inline: 14px; background: var(--lp-tinte); border-bottom: 1px solid var(--lp-borde); }
.lp-navegador__barra i { width: 9px; height: 9px; border-radius: 999px; background: var(--lp-borde-control); opacity: .45; }
.lp-navegador img { width: 100%; height: auto; }

.lp-movil {
  position: absolute; margin: 0; width: 256px; aspect-ratio: 390 / 844;
  border-radius: 40px; overflow: hidden; background: var(--lp-marco);
  border: 9px solid var(--lp-marco); box-shadow: var(--lp-sombra-alta);
}
.lp-movil img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; }
/* Rectos: girada, la letra pequeña de una captura se dibuja en diagonal y se pixela. */
.lp-hero .lp-movil--delante { width: 230px; border-width: 8px; border-radius: 36px; right: -36px; bottom: -10px; z-index: 2; }
.lp-hero .lp-movil--delante img { border-radius: 28px; }

/* ---------- Franja legal ---------- */
.lp-ley { background: var(--surface); border-block: 1px solid var(--lp-borde); }
.lp-ley__fila { display: flex; gap: 18px; align-items: flex-start; padding-block: 28px; }
.lp-ley__ico { width: 32px; height: 32px; color: var(--accent); margin-top: 2px; }
.lp-ley h2 { font-size: 1.15rem; line-height: 1.4; font-weight: 700; margin: 0; }
.lp-ley p { margin: 6px 0 0; color: var(--lp-texto-2); line-height: 1.6; max-width: 80ch; }

/* ---------- Secciones ---------- */
.lp-seccion { padding-block: 96px; }
/* Precios y preguntas van seguidas y con el mismo fondo: sin esto se sumaban 192 px de hueco. */
.lp-seccion#precios + .lp-seccion#preguntas { padding-top: 0; }
.lp-seccion--tinte { background: var(--lp-tinte); }
.lp-titulo { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 22ch; }
.lp-titulo.lp-titulo--centro, .lp-parrafo.lp-parrafo--centro { margin-inline: auto; text-align: center; }
.lp-parrafo { font-size: 1.05rem; line-height: 1.65; color: var(--lp-texto-2); margin: 0 0 28px; max-width: 58ch; }

/* ---------- El portal: rejilla con las pantallas reales ---------- */
.lp-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 40px; }
.lp-celda {
  position: relative; overflow: hidden; border-radius: var(--lp-radio-bloque);
  background: var(--surface); box-shadow: var(--lp-sombra); padding: 28px;
  display: flex; flex-direction: column;
}
.lp-celda h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.lp-celda p { margin: 0; color: var(--lp-texto-2); line-height: 1.6; max-width: 44ch; }
.lp-celda__texto { position: relative; z-index: 1; }
/* La captura va entera dentro de la tarjeta, con sus cuatro esquinas y su borde: una
   ventana del portal completa. height:auto manda sobre el atributo del <img>. */
.lp-celda__captura {
  width: 100%; height: auto; margin-top: 24px;
  border-radius: 12px; border: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra);
}
.lp-celda--cuadrante {
  grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: start;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 70%);
}
.lp-celda--cuadrante .lp-celda__texto { padding-top: 12px; }
.lp-celda--cuadrante .lp-celda__captura { margin-top: 0; }
.lp-celda--incidencias, .lp-celda--cierres, .lp-celda--mitad { grid-column: span 6; }

.lp-portal__lista { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
.lp-portal__lista li { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lp-portal__lista .lp-ico { width: 40px; height: 40px; padding: 9px; border-radius: var(--lp-radio-control); background: var(--surface); color: var(--lp-azul-oscuro); box-shadow: var(--lp-sombra); }
.lp-portal__lista h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.lp-portal__lista p { margin: 0; color: var(--lp-texto-2); line-height: 1.6; font-size: .98rem; }

/* Terminales Anviz: un argumento aparte (lo que el cliente ya tiene sigue sirviendo), en el
   tono claro del resto de la página. Se distingue por el fondo lila y el borde, no por contraste. */
.lp-anviz {
  margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: 36px 40px; border-radius: var(--lp-radio-bloque);
  background: var(--surface); box-shadow: var(--lp-sombra);
}
.lp-anviz__ico { width: 44px; height: 44px; padding: 10px; border-radius: var(--lp-radio-control); background: var(--accent-soft); color: var(--lp-azul-oscuro); margin-bottom: 16px; }
.lp-anviz h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
.lp-anviz p { margin: 0; color: var(--lp-texto-2); line-height: 1.6; max-width: 52ch; }
.lp-anviz p.lp-anviz__nota { margin-top: 14px; font-size: .95rem; }
.lp-anviz__nota a { color: var(--lp-azul-oscuro); font-weight: 700; text-decoration: underline; }
.lp-anviz__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lp-anviz__lista li { display: flex; gap: 12px; align-items: flex-start; color: var(--lp-texto); line-height: 1.5; }
.lp-anviz__lista .lp-ico { color: var(--lp-azul-oscuro); margin-top: 2px; }

/* ---------- Carrusel de formas de asignar turnos ----------
   Desplazamiento nativo con scroll-snap (se arrastra con el dedo o el trackpad), puntos y
   flechas. Cada diapositiva ocupa todo el ancho: texto a un lado y captura al otro. */
.lp-carrusel { margin-top: 40px; background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra); padding: 32px 0 28px; overflow: hidden; }
.lp-carrusel__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 36px; }
.lp-carrusel__cabecera h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.lp-carrusel__flechas { display: flex; gap: 8px; }
.lp-carrusel__flecha {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lp-borde); background: var(--surface); color: var(--lp-texto);
  transition: transform 160ms var(--lp-curva), border-color 150ms ease, opacity 150ms ease;
}
.lp-carrusel__flecha[data-anterior] .lp-ico { transform: rotate(180deg); }
.lp-carrusel__flecha:active { transform: scale(.95); }
.lp-carrusel__flecha:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .lp-carrusel__flecha:not(:disabled):hover { border-color: var(--lp-borde-control); } }
.lp-carrusel__pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 20px;
  overscroll-behavior-x: contain;
}
.lp-carrusel__pista::-webkit-scrollbar { display: none; }
.lp-carrusel__pista:focus-visible { outline-offset: -3px; }
.lp-carrusel__diapo {
  flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 5fr 7fr; gap: 36px; align-items: center;
  padding: 8px 36px;
}
.lp-carrusel__num {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--lp-azul-oscuro); font-weight: 700; font-size: 14px;
}
.lp-carrusel__texto h4 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; margin: 0 0 10px; color: var(--lp-texto); }
.lp-carrusel__texto p { margin: 0 0 16px; color: var(--lp-texto-2); line-height: 1.6; }
.lp-carrusel__texto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-carrusel__texto li { display: flex; gap: 10px; align-items: flex-start; color: var(--lp-texto-2); line-height: 1.5; }
.lp-carrusel__texto li .lp-ico { width: 18px; height: 18px; color: var(--lp-exito); margin-top: 2px; }
.lp-carrusel__captura { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra); }
.lp-carrusel__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; padding-inline: 20px; flex-wrap: wrap; }
.lp-carrusel__puntos button {
  border: 0; cursor: pointer; font: 700 13px/1 var(--font); color: var(--lp-texto-2); background: var(--lp-tinte);
  min-height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 150ms ease, color 150ms ease;
}
.lp-carrusel__puntos button[aria-current="true"] { background: var(--accent-soft); color: var(--lp-azul-oscuro); }

/* ---------- Formas de fichar ---------- */
.lp-formas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 40px; }
.lp-forma { background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra); padding: 28px; }
/* El quiosco, a media anchura con su captura debajo; a su lado, ordenador y app uno sobre
   otro, estirados para acabar a la misma altura. */
.lp-forma--quiosco { grid-column: span 6; display: flex; flex-direction: column; gap: 24px; }
.lp-formas__columna { grid-column: span 6; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.lp-forma__ico { width: 44px; height: 44px; padding: 10px; border-radius: var(--lp-radio-control); background: var(--accent-soft); color: var(--lp-azul-oscuro); margin-bottom: 16px; }
.lp-forma h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
.lp-forma p { margin: 0; color: var(--lp-texto-2); line-height: 1.6; max-width: 48ch; }
.lp-forma p a { color: var(--lp-azul-oscuro); font-weight: 700; }
.lp .lp-forma__captura { width: 100%; max-width: 230px; height: auto; align-self: center; border-radius: 16px; border: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra-alta); }

/* ---------- Seguridad y cumplimiento ---------- */
.lp-seccion--borde { background: var(--surface); border-block: 1px solid var(--lp-borde); }
/* ---------- Nueva normativa ---------- */
.lp-normativa__cabecera { max-width: 760px; margin-inline: auto; text-align: center; }
.lp-normativa__antetitulo { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-azul-oscuro); }
.lp-normativa .lp-titulo { max-width: 18ch; }
.lp-normativa .lp-parrafo { max-width: 62ch; text-wrap: balance; }
.lp-normativa .lp-titulo span { color: var(--lp-azul-oscuro); }
.lp-normativa__lista { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Icono, título y texto en filas compartidas (subgrid): los textos arrancan a la misma
   altura aunque un título ocupe una línea y otro dos. */
.lp-normativa__lista li {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; text-align: center; row-gap: 10px; padding: 28px 22px;
  background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra);
}
.lp-normativa__ico { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--lp-tinte); color: var(--lp-azul-oscuro); margin-bottom: 4px; }
.lp-normativa__ico .lp-ico { width: 24px; height: 24px; }
.lp-normativa__lista h3 { margin: 0; align-self: center; font-size: 1.05rem; line-height: 1.3; color: var(--lp-texto); }
.lp-normativa__lista p { margin: 0; align-self: start; font-size: 14.5px; line-height: 1.55; color: var(--lp-texto-2); }
.lp-normativa__accion { margin: 36px 0 0; text-align: center; }
@media (max-width: 1024px) { .lp-normativa__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lp-normativa__lista { grid-template-columns: 1fr; margin-top: 32px; } }

.lp-seguridad { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.lp-seguridad__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
.lp-seguridad__lista li { display: flex; flex-direction: column; gap: 14px; }
.lp-seguridad__lista .lp-ico { width: 40px; height: 40px; padding: 9px; border-radius: var(--lp-radio-control); background: var(--accent-soft); color: var(--lp-azul-oscuro); }
.lp-seguridad__lista h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.lp-seguridad__lista p { margin: 0; color: var(--lp-texto-2); line-height: 1.6; font-size: .98rem; }

/* ---------- La app: el complemento ---------- */
.lp-app { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.lp-app__visual { order: -1; }
.lp-app__lista { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.lp-app__lista li { display: flex; gap: 12px; align-items: flex-start; color: var(--lp-texto-2); line-height: 1.55; }
.lp-app__lista .lp-ico { color: var(--lp-azul-oscuro); margin-top: 2px; }
.lp-app__visual { position: relative; height: 600px; }
.lp-movil--app-atras { width: 255px; left: 0; top: 56px; }
.lp-movil--app-delante { width: 270px; right: 0; top: 0; z-index: 2; }
.lp-tiendas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lp-tiendas img { height: 50px; width: auto; }
.lp-tiendas a { border-radius: 10px; transition: transform 160ms var(--lp-curva); }
.lp-tiendas a:active { transform: scale(.97); }
/* Todavía no se puede pulsar: apagado y en gris, con el aviso encima, para que no parezca un botón. */
.lp-tienda--pronto { position: relative; display: inline-block; }
.lp-tienda--pronto img { opacity: .45; filter: grayscale(1); }
.lp-tienda--pronto::after {
  content: "Muy pronto"; position: absolute; top: -9px; right: -6px; padding: 3px 8px; border-radius: 999px;
  font: 700 11px/1.2 var(--font); background: var(--accent-soft); color: var(--lp-azul-oscuro); box-shadow: var(--lp-sombra);
}
.lp-tiendas__nota { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--lp-texto-2); }

/* ---------- Precios ---------- */
/* Anual o mensual: dos radios y :has(), sin JavaScript. */
.lp-tarifas { margin-top: 40px; }
.lp-pago { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px; border: 0; border-radius: 999px; background: var(--lp-tinte); }
.lp-pago input { position: absolute; opacity: 0; pointer-events: none; }
.lp-pago label {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 15px; color: var(--lp-texto-2); transition: background-color .18s ease, color .18s ease;
}
.lp-pago input:checked + label { background: var(--surface); color: var(--lp-texto); box-shadow: var(--lp-sombra); }
.lp-pago input:focus-visible + label { outline: 2px solid var(--lp-azul-oscuro); outline-offset: 2px; }
.lp-pago__ahorro { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--lp-exito-fondo); color: var(--lp-exito); }
.lp-solo-mensual { display: none; }
.lp-tarifas:has(#pago-mensual:checked) .lp-solo-mensual { display: block; }
.lp-tarifas:has(#pago-mensual:checked) .lp-solo-anual { display: none; }

.lp-precios {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra); overflow: hidden;
}
.lp-precio { padding: 28px 26px; border-left: 1px solid var(--lp-borde); border-top: 1px solid var(--lp-borde); }
.lp-precio:nth-child(3n + 1) { border-left: 0; }
.lp-precio:nth-child(-n + 3) { border-top: 0; }
/* Más de 50: una franja a todo el ancho bajo las tarifas, no una tarjeta más. */
.lp-precio--consulta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; background: var(--lp-tinte); }
.lp-precio--consulta > * { margin: 0 !important; }
.lp-precio--consulta .lp-precio__cifra { font-size: inherit; }
.lp-precio--consulta .lp-precio__cifra span { font-size: inherit; font-weight: 700; letter-spacing: 0; line-height: inherit; color: var(--lp-texto); }
.lp .lp-precio__enlace { display: inline-block; margin-left: auto !important; font-weight: 700; color: var(--lp-azul-oscuro); }

.lp-terminales {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; margin-top: 16px; padding: 22px 26px;
  background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra);
}
.lp-terminales p { margin: 0; }
.lp-terminales__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--lp-tinte); color: var(--lp-azul-oscuro); }
.lp-terminales__ico .lp-ico { width: 24px; height: 24px; }
.lp-terminales__titulo { font-weight: 700; color: var(--lp-texto); }
.lp-terminales__texto p:not(.lp-terminales__titulo) { margin-top: 4px; font-size: 14.5px; color: var(--lp-texto-2); max-width: 62ch; }
.lp-terminales__precio { text-align: right; font-size: 14px; color: var(--lp-texto-suave); white-space: nowrap; }
.lp-terminales__precio span { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--lp-texto); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lp-terminales { grid-template-columns: auto 1fr; align-items: start; padding: 20px; }
  .lp-terminales__precio { grid-column: 1 / -1; text-align: left; }
}

/* Qué incluye cada plan. */
.lp-plan { margin-top: 56px; }
.lp-plan__titulo { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--lp-texto); }
.lp-plan__intro { margin: 8px 0 0; color: var(--lp-texto-2); max-width: 64ch; }
.lp-plan__grupos {
  margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; padding: 28px;
  background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra);
}
.lp-plan__grupo h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-texto-suave); }
.lp-plan__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-plan__grupo li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--lp-texto); }
.lp-plan__grupo .lp-ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--lp-exito); }
@media (max-width: 1024px) { .lp-plan__grupos { grid-template-columns: repeat(2, 1fr); } }
.lp-precio__plantilla { margin: 0 0 18px; font-weight: 700; color: var(--lp-texto-2); }
.lp-precio__cifra { margin: 0; color: var(--lp-texto-suave); font-size: 15px; }
.lp-precio__cifra span { display: block; font-size: 2.4rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--lp-texto); font-variant-numeric: tabular-nums; }
.lp-precio__mes { margin: 10px 0 0; font-size: 14px; color: var(--lp-texto-suave); font-variant-numeric: tabular-nums; }
.lp-precios__pie { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.lp-incluye { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.lp-incluye li { display: flex; align-items: center; gap: 8px; color: var(--lp-texto-2); font-weight: 500; }
.lp-incluye .lp-ico { color: var(--lp-exito); width: 18px; height: 18px; }
.lp-precios__mas { margin: 0; color: var(--lp-texto-2); }
.lp-precios__mas a { color: var(--lp-azul-oscuro); font-weight: 700; }

/* ---------- Preguntas frecuentes ----------
   details/summary nativos: se abren sin JavaScript, con teclado y los lee cualquier lector. */
.lp-faq > * { max-width: 860px; }
.lp-faq__lista { margin-top: 28px; border-top: 1px solid var(--lp-borde); }
.lp-faq__item { border-bottom: 1px solid var(--lp-borde); }
.lp-faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 4px; font-weight: 700; font-size: 1.05rem; color: var(--lp-texto); border-radius: var(--lp-radio-control);
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 999px; background: var(--accent-soft); color: var(--lp-azul-oscuro); font-size: 18px; line-height: 1;
  transition: transform 200ms var(--lp-curva);
}
.lp-faq__item[open] summary::after { transform: rotate(45deg); }
.lp-faq__cuerpo { overflow: hidden; }
/* La respuesta se despliega a la vez que gira el «+», en vez de aparecer de golpe. Donde el
   navegador no conoce ::details-content, se abre sin animación, como hasta ahora. */
.lp-faq { interpolate-size: allow-keywords; }
.lp-faq__item::details-content {
  height: 0; overflow: hidden;
  transition: height 200ms var(--lp-curva), content-visibility 200ms allow-discrete;
}
.lp-faq__item[open]::details-content { height: auto; }
.lp-faq__item p { margin: 0; padding: 0 4px 22px; color: var(--lp-texto-2); line-height: 1.65; max-width: 68ch; }

/* ---------- Contacto ---------- */
.lp-contacto { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.lp-contacto__directo { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.lp-contacto__directo .lp-ico { color: var(--lp-azul-oscuro); }
.lp-contacto__directo a { color: var(--lp-azul-oscuro); }
.lp-formulario { background: var(--surface); border-radius: var(--lp-radio-bloque); box-shadow: var(--lp-sombra); padding: 32px; }
.lp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-bottom: 24px; }
/* Los campos son los del portal (.field en ordulari.css) y el desplegable, el suyo
   (ordulari-select.js): quien pide la demo ve ya cómo es la herramienta. */
.lp-campo--ancho { grid-column: 1 / -1; }
.lp-campo__opcional { font-weight: 500; color: var(--lp-texto-suave); }
.lp-campo textarea { resize: vertical; min-height: 110px; }
/* 44 px de alto, también en escritorio: más cómodo de pulsar que los 40 del portal. */
.lp .field input:not([type=checkbox]), .lp .ordsel__trigger { min-height: 44px; }
/* El borde de los campos, en el gris de control (3,3:1 sobre blanco): el --border del portal
   (1,2:1) no deja ver dónde está el campo vacío. */
.lp .field input:not([type=checkbox]):focus, .lp .field textarea:focus, .lp .ordsel.is-open .ordsel__trigger, .lp .ordsel__trigger:focus-visible { border-color: var(--lp-azul-oscuro); }
.lp-campo__error { color: var(--lp-error); }
.lp-campo__error:empty { display: none; }
.lp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--lp-texto-2); line-height: 1.5; cursor: pointer; }
.lp-check { align-items: flex-start; }
.lp-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.lp-check a { color: var(--lp-azul-oscuro); text-decoration: underline; }
.lp-captcha { margin: 4px 0 16px; min-height: 78px; }
.lp-captcha .lp-campo__error { display: block; margin-top: 6px; }
.lp-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp [hidden] { display: none !important; }
.lp-enviado { text-align: center; padding: 28px 8px; transition: opacity 300ms var(--lp-curva), transform 300ms var(--lp-curva); }
.lp-enviado .lp-ico { width: 48px; height: 48px; padding: 10px; border-radius: 999px; background: var(--lp-exito-fondo); color: var(--lp-exito); margin: 0 auto 16px; transition: opacity 300ms var(--lp-curva) 60ms, transform 300ms var(--lp-curva) 60ms; }
/* La confirmación sale una vez por cliente: entra en lugar de aparecer, con el check un
   poco después. */
@starting-style {
  .lp-enviado { opacity: 0; transform: scale(.96); }
  .lp-enviado .lp-ico { opacity: 0; transform: scale(.9); }
}
/* Mientras se envía: el botón no admite un segundo clic y dice qué está pasando. */
.lp-boton[data-enviando] { opacity: .7; cursor: progress; pointer-events: none; }
.lp-enviado h3 { font-size: 1.25rem; margin: 0 0 8px; }
.lp-enviado p { margin: 0; color: var(--lp-texto-2); }
.lp-enviado a { color: var(--lp-azul-oscuro); font-weight: 700; }
.lp-error-envio { margin-bottom: 20px; padding: 14px 16px; border-radius: var(--lp-radio-control); background: var(--lp-error-fondo); color: var(--lp-error-texto); line-height: 1.5; }
.lp-error-envio a { font-weight: 700; text-decoration: underline; }

/* ---------- Pie ---------- */
/* ---------- Volver arriba ---------- */
.lp-arriba {
  position: fixed; right: 20px; bottom: 20px; z-index: 15; width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface); color: var(--lp-azul-oscuro); border: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra);
  opacity: 0; transform: translateY(12px) scale(0.95); pointer-events: none;
  transition: opacity 200ms var(--lp-curva), transform 200ms var(--lp-curva), background-color 150ms ease;
}
.lp-arriba.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.lp-arriba .lp-ico { width: 20px; height: 20px; transform: rotate(-90deg); }
.lp-arriba:active { transform: scale(0.95); }
.lp-arriba:focus-visible { outline: 2px solid var(--lp-azul-oscuro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lp-arriba:hover { background: var(--lp-tinte); } }
@media (prefers-reduced-motion: reduce) { .lp-arriba { transition: opacity 150ms ease; transform: none; } }
@media (max-width: 640px) { .lp-arriba { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

.lp-pie { border-top: 1px solid var(--lp-borde); padding-block: 32px; }
.lp-pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.lp-pie nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.lp-pie nav a { display: inline-block; padding-block: 13px; }
.lp-pie nav a, .lp-pie p { font-size: 14px; color: var(--lp-texto-suave); text-decoration: none; margin: 0; }
.lp-pie nav a { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .lp-nav__enlaces a:hover, .lp-pie nav a:hover { color: var(--lp-texto); }
}

/* ---------- Movimiento ----------
   Entrada del hero al cargar y aparición de los bloques al llegar a ellos. Sin JavaScript,
   todo se ve desde el principio: solo se oculta cuando el script ha marcado la página. */
/* Cambio de tema: fundido corto de toda la página (View Transitions, ver landing.js). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: ease; }

@keyframes lp-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Las pantallas del hero suben con la propiedad translate, que se suma al giro que ya llevan
   en transform en lugar de pisarlo. Primero el portal, luego el móvil. */
@keyframes lp-movil-sube { from { opacity: 0; translate: 0 24px; } }
@keyframes lp-funde { from { opacity: 0; } }
.lp-entra { animation: lp-sube 700ms var(--lp-curva) both; }
.lp-navegador { animation: lp-movil-sube 800ms var(--lp-curva) 140ms both; }
.lp-hero .lp-movil--delante { animation: lp-movil-sube 800ms var(--lp-curva) 260ms both; }
.lp-js .lp-revela { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--lp-curva), transform 500ms var(--lp-curva); }
.lp-js .lp-revela.lp-visible { opacity: 1; transform: none; }
/* Los enlaces del menú llevan a cada sección con un desplazamiento suave, y la cabecera fija
   no tapa el principio de la sección. */
.lp section[id] { scroll-margin-top: 72px; }
/* Las secciones reciben el foco al llegar a ellas (landing.js), pero no pintan el anillo. */
.lp [tabindex="-1"]:focus { outline: none; }
/* Movimiento reducido no es movimiento cero: nada se desplaza, pero los bloques siguen
   apareciendo con un fundido corto, que no marea y conserva la continuidad. */
@media (prefers-reduced-motion: reduce) {
  .lp-entra, .lp-navegador, .lp-hero .lp-movil--delante { animation: lp-funde 200ms ease both; }
  .lp-js .lp-revela { transform: none; transition: opacity 200ms ease; }
  .lp-boton, .lp-tiendas a, .lp-nav__menu { transition: none; }
  /* La cabecera se anima igual: es un cambio de tamaño pequeño y se pidió que se notara. */
  .lp-nav__ico, .lp-tema__ico { transition: opacity 150ms ease; transform: none !important; filter: none !important; }
  .lp-faq__item::details-content { transition: content-visibility 150ms allow-discrete, opacity 150ms ease; }
  .lp-faq__item:not([open])::details-content { opacity: 0; }
  .lp-enviado, .lp-enviado .lp-ico { transform: none; }
}

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 1024px) {
  /* Entre tableta y escritorio no caben seis enlaces: los dos secundarios quedan para el menú. */
  .lp-nav__enlaces a.lp-nav__extra { display: none; }
  .lp-portal__lista { grid-template-columns: repeat(2, 1fr); }
  .lp-celda--cuadrante { grid-template-columns: 1fr; gap: 0; }
  .lp-celda--cuadrante .lp-celda__captura { margin-top: 24px; }
}
@media (max-width: 860px) {
  /* Siempre montado: entra en 200 ms y sale en 150, más rápido de lo que llega. visibility
     espera a que acabe el fundido para sacarlo del tabulador. */
  .lp-nav__enlaces {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--lp-borde); box-shadow: var(--lp-sombra); padding: 8px 20px 16px;
    transform-origin: top; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 150ms ease, transform 150ms var(--lp-curva), visibility 0s linear 150ms;
  }
  .lp-nav__enlaces a { padding: 12px 0; font-size: 16px; }
  .lp-nav__enlaces a.lp-nav__extra { display: block; }
  /* Dentro del menú, «Pide una demo» es la acción principal: botón naranja al final. */
  .lp-nav__enlaces a.lp-nav__demo {
    order: 1; margin-top: 12px; padding: 0 22px; min-height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--lp-radio-control); background: var(--lp-accion); color: #fff; font-weight: 700;
  }
  .lp-nav[data-abierto] .lp-nav__enlaces {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 200ms var(--lp-curva), transform 200ms var(--lp-curva), visibility 0s;
  }
  .lp-nav__menu { display: inline-flex; }
  .lp-nav__acciones { margin-left: auto; }
  .lp-hero__rejilla, .lp-app, .lp-contacto, .lp-anviz, .lp-seguridad { grid-template-columns: 1fr; }
  .lp-app__visual { order: 0; }
  .lp-seguridad { gap: 8px; }
  .lp-anviz { gap: 24px; padding: 28px 24px; }
  .lp-hero { padding-block: 104px 48px; }
  .lp-hero__visual { height: auto; aspect-ratio: 760 / 540; }
  .lp-navegador { top: 0; left: 0; right: 10%; }
  .lp-hero .lp-movil--delante { width: 30%; min-width: 120px; right: 0; bottom: 0; border-width: 5px; border-radius: 22px; }
  .lp-hero .lp-movil--delante img { border-radius: 17px; }
  .lp-celda--incidencias, .lp-celda--cierres, .lp-celda--mitad { grid-column: 1 / -1; }
  .lp-forma--quiosco, .lp-formas__columna { grid-column: 1 / -1; }
  .lp-carrusel__diapo { grid-template-columns: 1fr; gap: 20px; padding: 8px 24px; }
  .lp-carrusel__cabecera { padding-inline: 24px; }
  .lp-app__visual { height: 480px; }
  .lp-movil--app-atras { width: 200px; }
  .lp-movil--app-delante { width: 215px; }
  .lp-seccion { padding-block: 64px; }
}
@media (max-width: 640px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento > .lp-celda { grid-column: 1 / -1; }
  .lp-portal__lista, .lp-campos, .lp-seguridad__lista { grid-template-columns: 1fr; }
  /* En el móvil, 16 px en los campos: con menos, iOS amplía la página al escribir. */
  .lp .field input, .lp .field textarea, .lp .ordsel__trigger { font-size: 16px; }
  .lp-seguridad__lista li { flex-direction: row; }
  .lp-portal__lista li { flex-direction: row; }
  /* Dos columnas en el móvil: siete tarjetas apiladas se hacen eternas. */
  .lp-precios { grid-template-columns: repeat(2, 1fr); }
  .lp-precio { padding: 20px 16px; border-left: 1px solid var(--lp-borde); border-top: 1px solid var(--lp-borde); }
  .lp-precio:nth-child(2n + 1) { border-left: 0; }
  .lp-precio:nth-child(-n + 2) { border-top: 0; }
  .lp-precio__cifra span { font-size: 1.9rem; }
  .lp-precio__mes { font-size: 12.5px; }
  .lp-pago label { min-height: 44px; padding: 9px 12px; font-size: 14px; white-space: nowrap; }
  .lp-pago__ahorro { font-size: 11px; padding: 2px 6px; }
  .lp-plan__grupos { grid-template-columns: 1fr; padding: 22px 20px; gap: 22px; }
  .lp-formulario { padding: 24px 20px; }
  .lp-nav__acciones .lp-boton--suave { display: none; }
  .lp-nav__enlaces a.lp-nav__acceso { order: 0; display: block; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--lp-borde); color: var(--lp-azul-oscuro); font-weight: 700; }
  .lp-movil--app-atras { left: 0; }
  .lp-movil--app-delante { right: 0; }
}
/* Las secciones reciben el foco al llegar desde el menú; no hace falta dibujarles anillo. */
.lp section[tabindex="-1"]:focus { outline: none; }

/* ---------- Modo oscuro ----------
 Lo elige cada persona con el botón de sol y luna de la cabecera; por defecto, claro. Se
 redefinen los tokens que usa la landing (los suyos y los del portal que toma prestados);
 las capturas se quedan claras, enmarcadas como pantallas. */
.lp[data-tema="oscuro"] {
  --bg-app: #0E1222;
  --surface: #161C33;
  --accent-soft: #232A52;
  --focus: #3A4480;
  --lp-texto: #E8EBF5;
  --lp-texto-2: #B6BDD3;
  --lp-texto-suave: #959DB5;
  --lp-azul-oscuro: #A3AEFF;
  --lp-borde: #2A3150;
  --lp-borde-control: #626D99;
  --lp-tinte: #121831;
  --lp-exito: #6FD9A3;
  --lp-exito-fondo: #12301F;
  --lp-aviso: #F4C766;
  --lp-aviso-fondo: #33280F;
  --lp-error: #FF8FA6;
  --lp-error-texto: #FFB3C2;
  --lp-error-fondo: #3A1622;
  --lp-azul-suave-hover: #2C3564;
  --lp-fondo-cabecera: rgba(14, 18, 34, .94);
  --lp-halo: rgba(111, 125, 255, .18);
  --lp-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --lp-sombra-alta: 0 24px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
.lp[data-tema="oscuro"] .lp-ley__ico, .lp[data-tema="oscuro"] .lp-anviz__ico, .lp[data-tema="oscuro"] .lp-forma__ico, .lp[data-tema="oscuro"] .lp-seguridad__lista .lp-ico { color: var(--lp-azul-oscuro); }
.lp[data-tema="oscuro"] .lp-navegador__barra { background: #1B2240; }
/* Campos del formulario (sus estilos vienen del portal, con blanco fijo). */
.lp[data-tema="oscuro"] .field input, .lp[data-tema="oscuro"] .field textarea, .lp[data-tema="oscuro"] .ordsel__trigger, .lp[data-tema="oscuro"] .ordsel__panel {
  background: var(--bg-app); color: var(--lp-texto); border-color: var(--lp-borde-control);
}
.lp[data-tema="oscuro"] .field label { color: var(--lp-texto); }
.lp[data-tema="oscuro"] .ordsel__opt { color: var(--lp-texto-2); }
.lp[data-tema="oscuro"] .ordsel__opt:hover, .lp[data-tema="oscuro"] .ordsel__opt.is-hl, .lp[data-tema="oscuro"] .ordsel__opt.is-sel { background: var(--accent-soft); color: var(--lp-texto); }
.lp[data-tema="oscuro"] .ordsel.is-open .ordsel__trigger { background: var(--accent-soft); }
.lp[data-tema="oscuro"] .lp-campo__error { color: var(--lp-error); }
.lp[data-tema="oscuro"] .field input:not([type=checkbox]):focus, .lp[data-tema="oscuro"] .field textarea:focus, .lp[data-tema="oscuro"] .ordsel.is-open .ordsel__trigger { border-color: var(--lp-azul-oscuro); }
/* En oscuro la sombra no separa: #161C33 sobre el tinte #121831 es 1,04:1. Un filo de borde
   marca cada bloque. */
.lp[data-tema="oscuro"] :is(.lp-celda, .lp-forma, .lp-anviz, .lp-formulario, .lp-carrusel, .lp-precios, .lp-terminales, .lp-plan__grupos, .lp-normativa__lista li) { box-shadow: var(--lp-sombra), 0 0 0 1px var(--lp-borde); }
.lp[data-tema="oscuro"] ::selection { background: #3A4480; color: #fff; }

/* Logos por tema y el selector de tema. */
.lp .lp-logo--oscuro { display: none; }
.lp[data-tema="oscuro"] .lp-logo--claro { display: none; }
.lp[data-tema="oscuro"] .lp-logo--oscuro { display: block; }
.lp-tema {
  position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none;
  border: 1px solid var(--lp-borde); border-radius: 999px; background: var(--surface); color: var(--lp-texto); cursor: pointer;
  transition: transform 160ms var(--lp-curva), border-color 150ms ease;
}
.lp-tema:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .lp-tema:hover { border-color: var(--lp-borde-control); } }
.lp-tema__ico { position: absolute; transition: opacity 180ms ease, transform 180ms var(--lp-curva); }
.lp-tema__ico--sol, .lp[data-tema="oscuro"] .lp-tema__ico--luna { opacity: 0; transform: rotate(-30deg) scale(.8); }
.lp[data-tema="oscuro"] .lp-tema__ico--sol { opacity: 1; transform: none; }

/* Capturas por tema: en oscuro, las del portal y la app también en oscuro. */
.lp .lp-img--oscuro { display: none; }
.lp[data-tema="oscuro"] .lp-img--claro { display: none; }
.lp[data-tema="oscuro"] .lp-img--oscuro { display: block; }

/* Borde de error de los campos, al final y con más peso que el borde normal, el de foco y el
   del tema oscuro: antes, en oscuro, el desplegable con error se quedaba en gris. */
.lp .lp-campo.field :is(input:not([type=checkbox]), textarea).input-validation-error,
.lp .lp-campo.field .input-validation-error + .ordsel__trigger.ordsel__trigger { border-color: var(--lp-error); }