/* ============================================================
   SISTEMA VISUAL LBS — componentes
   Un solo botón, una sola tarjeta, un solo formulario,
   una sola cabecera y un solo pie para las cuatro páginas.
   ============================================================ */

/* ============ CABECERA ============
   Idéntica en las cuatro páginas. Hoy hay tres variantes distintas,
   con tres rótulos y tres subtítulos: se perciben como tres webs. */
.lbs-cabecera {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--lbs-linea);
  background: rgba(11,14,19,.82);
  backdrop-filter: blur(12px);
}
.lbs-cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lbs-e4);
  padding-block: var(--lbs-e3);
}
.lbs-marca { display: flex; align-items: center; gap: var(--lbs-e3); min-width: 0; }
.lbs-marca img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.lbs-marca__texto { min-width: 0; }
/* No debe partirse nunca en dos líneas: a 375 px, con la píldora al lado,
   el rótulo se rompía. Se aprieta el interletrado en móvil y se ensancha
   a partir de 560 px, donde ya sobra sitio. */
.lbs-marca__nombre {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--lbs-texto);
  line-height: 1.2;
  white-space: nowrap;
}
@media (min-width: 560px) {
  .lbs-marca__nombre { font-size: var(--lbs-t-menor); letter-spacing: .1em; }
}
/* El subtítulo se recorta en móvil en la página actual. Aquí,
   sencillamente, no aparece por debajo de 560 px. */
.lbs-marca__lema {
  display: none;
  font-size: var(--lbs-t-nota);
  color: var(--lbs-texto-3);
  line-height: 1.3;
}
@media (min-width: 560px) { .lbs-marca__lema { display: block; } }

.lbs-pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--lbs-e2);
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lbs-texto-2);
  white-space: nowrap;
}
@media (min-width: 560px) {
  .lbs-pildora { padding: 6px 12px; font-size: var(--lbs-t-nota); }
}
.lbs-pildora__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lbs-oro); flex: none;
}

/* ============ BOTONES ============
   Tres variantes y ninguna más. Hoy hay botones dorados idénticos que
   hacen cosas distintas: uno envía y otros solo desplazan. */
.lbs-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lbs-e2);
  min-height: 52px;              /* zona pulsable holgada */
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--lbs-r-m);
  font-family: inherit;
  font-size: var(--lbs-t-cuerpo);
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--lbs-transicion), filter var(--lbs-transicion),
              background var(--lbs-transicion), border-color var(--lbs-transicion);
}
.lbs-boton:hover { text-decoration: none; }
.lbs-boton:active { transform: translateY(1px); }
.lbs-boton--bloque { width: 100%; }

/* Primario: el único elemento dorado macizo de la página.
   Si hay dos dorados iguales, dejan de significar «esto es la acción». */
.lbs-boton--primario {
  background: linear-gradient(180deg, #f7cd62, var(--lbs-oro-hondo));
  color: #171104;
  /* Filo claro arriba: da grosor al botón en vez de dejarlo plano. */
  box-shadow: var(--lbs-filo-oro), var(--lbs-sombra-oro);
}
.lbs-boton--primario:hover { filter: brightness(1.06); }

/* Secundario: misma jerarquía visual de caja, sin el oro. */
.lbs-boton--secundario {
  background: rgba(255,255,255,.06);
  border-color: var(--lbs-linea-fuerte);
  color: var(--lbs-texto);
}
.lbs-boton--secundario:hover { background: rgba(255,255,255,.10); }

/* Terciario: enlace con afordancia, para salidas que no compiten. */
.lbs-boton--texto {
  min-height: auto;
  padding: 6px 0;
  background: none;
  color: var(--lbs-oro);
  font-weight: 600;
}
.lbs-boton--texto:hover { text-decoration: underline; }

.lbs-boton__icono { width: 18px; height: 18px; flex: none; }

/* Nota bajo el botón: reduce fricción justo donde se decide. */
.lbs-bajo-boton {
  margin-top: var(--lbs-e3);
  font-size: var(--lbs-t-nota);
  color: var(--lbs-texto-3);
}

/* ============ TARJETAS ============ */
.lbs-tarjeta {
  padding: var(--lbs-e5);
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-l);
  background: linear-gradient(180deg, var(--lbs-panel-alto), var(--lbs-panel));
  box-shadow: var(--lbs-filo);
}
.lbs-tarjeta--plana { background: rgba(255,255,255,.035); }
.lbs-tarjeta--destacada {
  border-color: var(--lbs-oro-linea);
  background: linear-gradient(180deg, var(--lbs-oro-tenue), rgba(0,0,0,.15));
}
.lbs-tarjeta__titulo { margin-bottom: var(--lbs-e3); }
.lbs-tarjeta__titulo + p { color: var(--lbs-texto-2); }

/* Numeración de proceso: sustituye a los emojis como sistema. */
.lbs-paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--lbs-e4);
  border: 1px solid var(--lbs-oro-linea);
  border-radius: 50%;
  background: var(--lbs-oro-tenue);
  color: var(--lbs-oro);
  font-size: var(--lbs-t-menor);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============ LISTAS CON ICONO ============
   Sustituye a los 12 emojis multicolor de la página actual. */
.lbs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lbs-e3); }
.lbs-lista li { display: flex; align-items: flex-start; gap: var(--lbs-e3); }
.lbs-lista__icono {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  color: var(--lbs-oro);
}
.lbs-lista--descarta .lbs-lista__icono { color: var(--lbs-texto-3); }
.lbs-lista li > span:last-child { color: var(--lbs-texto-2); }
.lbs-lista strong { color: var(--lbs-texto); font-weight: 650; }

/* ============ VÍDEO ============
   Contenedor 16:9 único. La imagen fija es el fotograma oficial del
   propio vídeo en Vimeo. El control de reproducción NO va centrado:
   centrado es exactamente lo que hoy tapa la cara de Natalia en /avip. */
.lbs-video {
  position: relative;
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-l);
  overflow: hidden;
  background: #05070a;
  box-shadow: var(--lbs-sombra);
}
.lbs-video::before { content: ""; display: block; padding-top: 56.25%; }
.lbs-video > img,
.lbs-video > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; object-fit: cover;
}
/* Posición del control de reproducción.
   Los tres vídeos tienen la cara al centro y subtítulos incrustados
   abajo, así que la esquina superior derecha es la única zona que no
   tapa ni una cosa ni la otra. Centrado —como hoy en /avip— cae
   justo encima de la cara. */
.lbs-video__play {
  position: absolute;
  z-index: 2;
  right: var(--lbs-e4);
  top: var(--lbs-e4);
  display: inline-flex;
  align-items: center;
  gap: var(--lbs-e2);
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8,10,14,.72);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: inherit;
  font-size: var(--lbs-t-menor);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--lbs-transicion);
}
.lbs-video__play:hover { background: rgba(8,10,14,.9); }
.lbs-video__play svg { width: 20px; height: 20px; flex: none; color: var(--lbs-oro); }

/* Control de sonido y de repetición.
   Vive en la misma esquina superior derecha que el botón de
   reproducción: es la única zona que no tapa ni la cara ni los
   subtítulos incrustados. Hereda el estilo de la píldora para que no
   parezca un añadido. */
.lbs-video__control { z-index: 3; }

/* Cuando el vídeo está en silencio o ha terminado, el control ES la
   acción principal de ese momento y se pinta en dorado. Con sonido
   activo vuelve a ser discreto: ya no hay nada que pedirle al usuario. */
.lbs-video__control.es-llamada {
  background: var(--lbs-oro);
  border-color: var(--lbs-oro);
  color: #1a1406;
  box-shadow: 0 4px 18px rgba(242,193,78,.28);
}
.lbs-video__control.es-llamada:hover { background: #f7cd68; }
.lbs-video__control.es-llamada svg { color: #1a1406; }

/* Velo del estado «terminado». No captura clics para que los controles
   nativos de Vimeo sigan siendo pulsables por debajo. */
.lbs-video__velo {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(4,6,9,.42);
  pointer-events: none;
}

/* El velo superior se ocultaba al aparecer el iframe, y el control se
   quedaba sin contraste sobre fotogramas claros. Se repone, pero solo
   en la esquina donde vive el control. */
.lbs-video:has(iframe) .lbs-video__control::before {
  content: "";
  position: absolute; inset: -14px -14px -14px -20px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at 70% 40%, rgba(4,6,9,.5), rgba(4,6,9,0) 72%);
  pointer-events: none;
}

@media (max-width: 479.98px) {
  /* El rótulo de contexto y el botón comparten la banda superior. Desde
     que el botón dice «Reproducir con sonido» no caben juntos en pantallas
     estrechas: a 360 px se solapan en las cuatro páginas. Gana el botón,
     que es el elemento funcional. El rótulo no se echa en falta: los tres
     vídeos van bajo un titular que ya dice de qué son. */
  .lbs-video__marca { display: none; }
}

@media (max-width: 559.98px) {
  /* En móvil el control se queda igual de visible pero más compacto,
     para no comerse el ancho del fotograma. */
  .lbs-video__play { padding: 9px 13px 9px 10px; font-size: var(--lbs-t-nota); }
  .lbs-video__play svg { width: 17px; height: 17px; }
}

/* Rótulo de contexto, arriba a la izquierda. */
/* Velo superior: garantiza contraste del rótulo y del control sobre
   cualquier fotograma, sin oscurecer la imagen entera. */
.lbs-video::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 96px;
  background: linear-gradient(180deg, rgba(4,6,9,.55), rgba(4,6,9,0));
  pointer-events: none;
}
/* El rotulo se ocultaba con un selector de hermano posterior, pero el
   iframe se anade AL FINAL, asi que el rotulo va delante y la regla no
   llegaba a aplicarse: en produccion se ve «PRESENTACION» encima del
   video mientras se reproduce. Con :has() se ancla al contenedor. */
.lbs-video:has(iframe) .lbs-video__marca,
.lbs-video:has(iframe)::after { display: none; }

.lbs-video__marca {
  position: absolute;
  z-index: 2;
  top: var(--lbs-e4); left: var(--lbs-e4);
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8,10,14,.6);
  backdrop-filter: blur(10px);
  font-size: var(--lbs-t-etiqueta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* ============ FORMULARIO ============ */
.lbs-form { display: grid; gap: var(--lbs-e4); }
.lbs-campo { display: grid; gap: var(--lbs-e2); }
.lbs-campo__etiqueta {
  font-size: var(--lbs-t-menor);
  font-weight: 650;
  color: var(--lbs-texto);
}
.lbs-campo__ayuda { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); }

/* Aviso del formulario. Nace oculto y sin texto: solo aparece cuando hay algo
   que decir, y entonces ocupa sitio y empuja, que es lo que hace que se vea.
   El color de aviso es el rosado de la marca, no un rojo de sistema. */
.lbs-form__aviso {
  margin: 0;
  padding: var(--lbs-e3) var(--lbs-e4);
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-m);
  background: rgba(255,255,255,.03);
  font-size: var(--lbs-t-menor);
  line-height: 1.5;
  color: var(--lbs-texto-2);
}
.lbs-form__aviso.es-error {
  border-color: rgba(232,180,184,.42);
  background: rgba(232,180,184,.08);
  color: var(--lbs-aviso);
}

.lbs-campo input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-m);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-family: inherit;
  font-size: var(--lbs-t-cuerpo);  /* 16px: por debajo, iOS hace zoom */
  line-height: 1.4;
  transition: border-color var(--lbs-transicion), box-shadow var(--lbs-transicion);
}
.lbs-campo input::placeholder { color: rgba(255,255,255,.34); }
.lbs-campo input:focus {
  outline: none;
  border-color: var(--lbs-oro-linea);
  box-shadow: 0 0 0 4px rgba(242,193,78,.10);
}
.lbs-campo input:user-invalid { border-color: rgba(232,180,184,.5); }

/* Casilla de consentimiento: zona pulsable de 24 px, no de 16. */
.lbs-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--lbs-e3);
  padding: var(--lbs-e4);
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-m);
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.lbs-consentimiento input {
  width: 24px; height: 24px; flex: none; margin: 0;
  accent-color: var(--lbs-oro);
  cursor: pointer;
}
.lbs-consentimiento span { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); }

/* ============ TABLA COMPARATIVA ============
   En móvil se convierte en dos tarjetas apiladas: una tabla de 3
   columnas a 375 px es ilegible. */
.lbs-comparativa { display: grid; gap: var(--lbs-e4); }
@media (min-width: 768px) {
  .lbs-comparativa { grid-template-columns: 1fr 1fr; gap: var(--lbs-e5); }
}
.lbs-comparativa__col { display: flex; flex-direction: column; }
.lbs-comparativa__cab { margin-bottom: var(--lbs-e4); }
.lbs-comparativa__cab h3 { margin-bottom: var(--lbs-e1); }

/* ============ PRECIO ============ */
.lbs-precio {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--lbs-e2);
  margin-block: var(--lbs-e4) var(--lbs-e3);
}
.lbs-precio__importe {
  font-size: clamp(38px, 9vw, 54px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lbs-precio__periodo { font-size: var(--lbs-t-lead); color: var(--lbs-texto-2); font-weight: 600; }

/* ============ BLOQUE PENDIENTE DE DATOS ============
   Se muestra en lugar de resultados o testimonios mientras no estén
   verificados. Es deliberadamente visible: sirve para evaluar la
   composición sin publicar ni una cifra sin comprobar. */
.lbs-pendiente {
  padding: var(--lbs-e6) var(--lbs-e5);
  border: 1px dashed var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-l);
  background: repeating-linear-gradient(135deg,
      rgba(255,255,255,.018) 0 10px, transparent 10px 20px);
  text-align: center;
}
.lbs-pendiente__sello {
  display: inline-block;
  margin-bottom: var(--lbs-e3);
  padding: 5px 12px;
  border: 1px solid rgba(110,168,254,.35);
  border-radius: 999px;
  background: rgba(110,168,254,.10);
  color: var(--lbs-dato);
  font-size: var(--lbs-t-etiqueta);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lbs-pendiente p { color: var(--lbs-texto-3); font-size: var(--lbs-t-menor); }
.lbs-pendiente p + p { margin-top: var(--lbs-e2); }

/* ============ FAQ ============ */
/* Las dudas frecuentes hablan el mismo idioma que los acordeones del
   área de cliente: mismo filo dorado al abrir, mismo objetivo táctil,
   misma entrada del cuerpo. Un solo componente aunque vivan en dos
   hojas distintas. */
.lbs-faq { display: grid; gap: var(--lbs-e3); }
.lbs-faq details {
  position: relative;
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-m);
  background: var(--lbs-panel);
  overflow: hidden;
  transition: border-color var(--lbs-transicion);
}
.lbs-faq details:hover { border-color: var(--lbs-linea-fuerte); }
.lbs-faq details[open] {
  border-color: var(--lbs-linea-fuerte);
  background: var(--lbs-panel-alto);
}
.lbs-faq details[open]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--lbs-oro), var(--lbs-oro-linea));
}
.lbs-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lbs-e4);
  min-height: 54px;
  padding: var(--lbs-e4) var(--lbs-e5);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: background var(--lbs-transicion);
}
.lbs-faq summary::-webkit-details-marker { display: none; }
.lbs-faq summary::marker { content: ""; }
.lbs-faq summary:hover { background: rgba(255,255,255,.035); }
.lbs-faq summary:focus-visible { outline: 2px solid var(--lbs-oro); outline-offset: -2px; }
.lbs-faq details[open] summary { border-bottom: 1px solid var(--lbs-linea); }
.lbs-faq summary::after {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--lbs-texto-3);
  border-bottom: 2px solid var(--lbs-texto-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--lbs-transicion), border-color var(--lbs-transicion);
}
.lbs-faq summary:hover::after { border-color: var(--lbs-texto-2); }
.lbs-faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--lbs-oro);
}
.lbs-faq__cuerpo {
  padding: var(--lbs-e5);
  color: var(--lbs-texto-2);
  font-size: var(--lbs-t-menor);
  animation: lbs-abrir 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes lbs-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lbs-faq details,
  .lbs-faq summary,
  .lbs-faq summary::after { transition: none; }
  .lbs-faq__cuerpo { animation: none; }
}

/* ============ TRANSICIÓN AL SIGUIENTE PASO ============
   Salida secundaria. Nunca dorada maciza: no debe competir con el
   objetivo principal de la página. */
.lbs-transicion {
  display: grid;
  gap: var(--lbs-e4);
  padding: var(--lbs-e5);
  border: 1px solid var(--lbs-linea);
  border-left: 2px solid var(--lbs-oro-linea);
  border-radius: var(--lbs-r-m);
  background: rgba(255,255,255,.028);
}
@media (min-width: 768px) {
  .lbs-transicion { grid-template-columns: 1fr auto; align-items: center; gap: var(--lbs-e5); }
}

/* ============ PIE ============ */
.lbs-pie {
  border-top: 1px solid var(--lbs-linea);
  background: var(--lbs-fondo-alt);
  padding-block: var(--lbs-e6);
}
@media (min-width: 768px) { .lbs-pie { padding-block: var(--lbs-e7); } }
.lbs-pie__interior { display: grid; gap: var(--lbs-e4); }
@media (min-width: 768px) {
  .lbs-pie__interior { grid-template-columns: 1.4fr 1fr; align-items: start; gap: var(--lbs-e8); }
}
.lbs-pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--lbs-e4); }
.lbs-pie__enlaces a, .lbs-pie__enlaces span { font-size: var(--lbs-t-menor); }
.lbs-pie__legal { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); line-height: 1.6; }

/* Marca de edad. Bloque real, no una línea perdida en gris. */
.lbs-mas18 {
  display: inline-flex;
  align-items: center;
  gap: var(--lbs-e2);
  padding: 4px 10px;
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-s);
  font-size: var(--lbs-t-nota);
  font-weight: 700;
  color: var(--lbs-texto-2);
}

/* Marcador de contenido legal pendiente. Solo existe en el prototipo:
   deja el hueco a la vista sin inventar ningún texto jurídico. */
.lbs-legal-pendiente {
  border-bottom: 1px dashed rgba(110,168,254,.45);
  color: var(--lbs-dato);
  cursor: help;
}

/* ============================================================
   F4B — componentes añadidos en el refinamiento
   ============================================================ */

/* ---- Halo de fondo del hero ----
   Un foco muy tenue detrás del titular. Da profundidad al grafito plano
   sin añadir ni una gota más de oro. Se atenúa en pantallas pequeñas,
   donde los degradados se ven sucios en paneles baratos. */
.lbs-halo { position: relative; overflow: hidden; }
.lbs-halo::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto 0;
  height: 620px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%,
              rgba(242,193,78,.075), rgba(242,193,78,0) 70%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 559px) { .lbs-halo::before { height: 380px; opacity: .7; } }

/* Retícula de análisis, debajo del halo. Líneas al 2,6 % con una máscara
   elíptica: solo se intuyen en el centro y se apagan antes del borde. Es
   el sustrato de «sala de análisis» sin una sola imagen, y no dice nada
   de apuestas. La misma idea que ya lleva el raíl de /metodo. */
.lbs-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.026) 0 1px, transparent 1px 76px);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000, transparent 78%);
}
.lbs-halo > * { position: relative; z-index: 1; }
@media (max-width: 559px) {
  /* En pantallas pequeñas la retícula se aprieta y se apaga: a 76 px de
     paso solo caben cuatro líneas y se lee como un defecto. */
  .lbs-halo::after {
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 54px),
      repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 54px);
  }
}

/* ---- Panel de acceso ----
   El formulario deja de ser «una caja con campos» y pasa a leerse como un
   panel de acceso: filete dorado superior, cabecera propia y sello. */
.lbs-panel-acceso {
  position: relative;
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-l);
  background: linear-gradient(180deg, var(--lbs-panel-alto), var(--lbs-panel));
  box-shadow: var(--lbs-filo), var(--lbs-sombra);
  overflow: hidden;
}
/* Filete superior: marca dónde está la acción de la página. */
.lbs-panel-acceso::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
      rgba(242,193,78,0), var(--lbs-oro) 22%, var(--lbs-oro) 78%, rgba(242,193,78,0));
}
.lbs-panel-acceso__cab {
  display: flex; align-items: center; gap: var(--lbs-e3);
  padding: var(--lbs-e5) var(--lbs-e5) var(--lbs-e4);
  border-bottom: 1px solid var(--lbs-linea);
}
.lbs-panel-acceso__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--lbs-oro-linea); border-radius: var(--lbs-r-s);
  background: var(--lbs-oro-tenue); color: var(--lbs-oro);
}
.lbs-panel-acceso__icono svg { width: 19px; height: 19px; }
.lbs-panel-acceso__titulo { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lbs-panel-acceso__sub { display: block; font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); margin-top: 2px; }
.lbs-panel-acceso__cuerpo { padding: var(--lbs-e5); }
@media (min-width: 768px) {
  .lbs-panel-acceso__cab    { padding: var(--lbs-e6) var(--lbs-e6) var(--lbs-e4); }
  .lbs-panel-acceso__cuerpo { padding: var(--lbs-e6); }
}

/* ---- Tira de garantías ----
   Tres hechos secos bajo el botón. Sustituye a la línea suelta de texto
   gris y da autoridad sin alargar la página. */
.lbs-tira {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--lbs-e3) var(--lbs-e5);
  padding-top: var(--lbs-e4);
  border-top: 1px solid var(--lbs-linea);
  margin-top: var(--lbs-e5);
}
.lbs-tira span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--lbs-t-nota); font-weight: 600; color: var(--lbs-texto-3);
  white-space: nowrap;
}
.lbs-tira svg { width: 14px; height: 14px; color: var(--lbs-oro); flex: none; }

/* ---- Tarjeta de valor ----
   Para «qué recibes»: numeral tenue al fondo e icono arriba. */
.lbs-valor { position: relative; overflow: hidden; }
.lbs-valor__n {
  position: absolute; top: -8px; right: 12px;
  font-size: 74px; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.05);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* Escalonado. Tres cajas idénticas en fila se leen como una sola pieza
   plana; bajando cada una un escalón, el ojo las recorre en orden. Solo
   en escritorio: en móvil ya van apiladas y esto no tendría sentido. */
@media (min-width: 1024px) {
  .lbs-rejilla--3 > .lbs-valor:nth-child(2) { transform: translateY(16px); }
  .lbs-rejilla--3 > .lbs-valor:nth-child(3) { transform: translateY(32px); }
  .lbs-rejilla--3:has(.lbs-valor) { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .lbs-rejilla--3 > .lbs-valor:nth-child(n) { transform: none; }
}
.lbs-valor__icono { width: 26px; height: 26px; color: var(--lbs-oro); margin-bottom: var(--lbs-e4); }
.lbs-valor h3 { margin-bottom: var(--lbs-e2); }

/* ---- Indicador de paso del recorrido ----
   Continuidad entre /acceso y /bienvenida: el visitante ve dónde está. */
.lbs-pasos-recorrido {
  display: flex; align-items: center; justify-content: center;
  gap: var(--lbs-e3); margin-bottom: var(--lbs-e5);
}
.lbs-pasos-recorrido span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--lbs-t-etiqueta); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lbs-texto-3);
}
.lbs-pasos-recorrido .punto { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.lbs-pasos-recorrido .es-actual { color: var(--lbs-oro); }
.lbs-pasos-recorrido .es-actual .punto { background: var(--lbs-oro); box-shadow: 0 0 0 3px var(--lbs-oro-tenue); }
.lbs-pasos-recorrido .es-hecho .punto { background: var(--lbs-oro-hondo); }
.lbs-pasos-recorrido .barra { width: 26px; height: 1px; background: var(--lbs-linea-fuerte); }

/* ---- Sello de confirmación ---- */
.lbs-sello-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: var(--lbs-e5);
  border: 1px solid var(--lbs-oro-linea); border-radius: 50%;
  background: var(--lbs-oro-tenue); color: var(--lbs-oro);
  box-shadow: 0 0 0 8px rgba(242,193,78,.045);
}
.lbs-sello-ok svg { width: 28px; height: 28px; }

/* ---- Lista compacta ----
   Sustituye a tres tarjetas cuando el contenido es corto: mismo mensaje,
   un tercio de alto. Es la palanca principal para acortar /metodo. */
.lbs-compacta {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-l);
  background: var(--lbs-panel); overflow: hidden;
  box-shadow: var(--lbs-filo);
}
.lbs-compacta > li {
  display: flex; align-items: flex-start; gap: var(--lbs-e4);
  padding: var(--lbs-e4) var(--lbs-e5);
  border-bottom: 1px solid var(--lbs-linea);
}
.lbs-compacta > li:last-child { border-bottom: 0; }
.lbs-compacta svg { width: 20px; height: 20px; flex: none; color: var(--lbs-oro); margin-top: 2px; }
.lbs-compacta strong { display: block; font-weight: 650; margin-bottom: 2px; }
.lbs-compacta p { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); }

/* ---- Resumen de valor temprano ----
   Cuatro datos secos justo bajo el hero de /metodo. Deja claro qué se
   vende antes de pedir seis pantallas de lectura. */
.lbs-resumen-valor {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-l);
  background: var(--lbs-panel); overflow: hidden;
  box-shadow: var(--lbs-filo);
}
.lbs-resumen-valor > div {
  padding: var(--lbs-e4);
  border-right: 1px solid var(--lbs-linea);
  border-bottom: 1px solid var(--lbs-linea);
  text-align: center;
}
.lbs-resumen-valor > div:nth-child(2n) { border-right: 0; }
.lbs-resumen-valor > div:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) {
  .lbs-resumen-valor { grid-template-columns: repeat(4, 1fr); }
  .lbs-resumen-valor > div { border-bottom: 0; border-right: 1px solid var(--lbs-linea); }
  .lbs-resumen-valor > div:last-child { border-right: 0; }
}
.lbs-resumen-valor dt { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); margin-bottom: 4px; }
.lbs-resumen-valor dd { margin: 0; font-size: var(--lbs-t-menor); font-weight: 700; letter-spacing: -.01em; }

/* ---- Cierre con autoridad ---- */
.lbs-cierre {
  padding: var(--lbs-e7) var(--lbs-e5);
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-l);
  background: linear-gradient(180deg, var(--lbs-panel-alto), var(--lbs-panel));
  box-shadow: var(--lbs-filo), var(--lbs-sombra);
  text-align: center;
}
@media (min-width: 768px) { .lbs-cierre { padding: var(--lbs-e8) var(--lbs-e7); } }
.lbs-cierre .lbs-boton { margin-top: var(--lbs-e6); min-width: min(100%, 320px); }

/* ============================================================
   F4C — proceso en raíl
   ============================================================

   Sustituye a las cuatro tarjetas de «Selección → Dimensión →
   Ejecución → Registro». Dos motivos:

   1. Ritmo. En F4B la segunda mitad de /acceso eran nueve tarjetas
      seguidas con el mismo tratamiento: el ojo deja de leer.
   2. Alto. Cuatro tarjetas apiladas en móvil gastan borde, relleno y
      separación cuatro veces. El raíl comparte una sola línea.

   Y además dice mejor lo que es: una secuencia, no cuatro cosas
   sueltas. La línea que une los nodos es literalmente el método.
*/
.lbs-proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.lbs-proceso > li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--lbs-e4);
  padding-bottom: var(--lbs-e5);
}
.lbs-proceso > li:last-child { padding-bottom: 0; }

/* El raíl: une el nodo con el siguiente. No se dibuja tras el último. */
.lbs-proceso > li::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--lbs-oro-linea), var(--lbs-linea));
}
.lbs-proceso > li:last-child::before { display: none; }

.lbs-proceso__nodo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px; height: 35px;
  grid-row: 1;
  border: 1px solid var(--lbs-oro-linea);
  border-radius: 50%;
  background: var(--lbs-fondo);
  color: var(--lbs-oro);
  font-size: var(--lbs-t-menor);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--lbs-fondo);
}
/* Sobre fondo alterno el nodo tiene que llevar ese fondo, o el raíl
   se ve a través del hueco. */
.lbs-seccion--alt .lbs-proceso__nodo {
  background: var(--lbs-fondo-alt);
  box-shadow: 0 0 0 4px var(--lbs-fondo-alt);
}

.lbs-proceso h3 { align-self: center; grid-row: 1; margin: 0; }
.lbs-proceso p {
  grid-column: 2;
  margin-top: var(--lbs-e2);
  font-size: var(--lbs-t-menor);
  color: var(--lbs-texto-2);
}
/* Matiz añadido al fusionar «las tres reglas»: se distingue del texto
   base con un filete, para que se lea como regla y no como coletilla. */
.lbs-proceso .regla {
  display: block;
  margin-top: var(--lbs-e3);
  padding-left: var(--lbs-e3);
  border-left: 2px solid var(--lbs-oro-linea);
  color: var(--lbs-texto);
  font-weight: 600;
}

/* En escritorio la secuencia se lee mejor en horizontal, con el raíl
   pasando por detrás de los cuatro nodos. */
@media (min-width: 1024px) {
  .lbs-proceso {
    /* El raíl se construyó para los cuatro pasos de /metodo, pero /vip
       tiene tres: fijar cuatro columnas dejaba un hueco vacío al final.
       Con auto-fit el patrón sirve para cualquier número de pasos. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--lbs-e5);
  }
  .lbs-proceso > li {
    grid-template-columns: 1fr;
    padding-bottom: 0;
    /* Sin esto, las columnas reparten su contenido a lo alto y los
       títulos dejan de alinearse entre sí. */
    align-content: start;
  }
  .lbs-proceso > li::before {
    left: 43px;
    top: 17px;
    bottom: auto;
    right: calc(var(--lbs-e5) * -1);
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--lbs-oro-linea), var(--lbs-linea));
  }
  .lbs-proceso__nodo { grid-row: auto; margin-bottom: var(--lbs-e4); }
  .lbs-proceso h3 { grid-row: auto; margin-bottom: var(--lbs-e2); }
  .lbs-proceso p { grid-column: 1; margin-top: 0; }
}

/* ============================================================
   LEGAL & PLATFORM READY — componentes
   Mismo sistema visual del funnel: nada de plantilla jurídica gris.
   ============================================================ */

/* ---- Página legal ----
   Documento largo, pensado para leerse en el móvil sin castigar la vista.
   Medida de línea corta, jerarquía clara y numeración discreta. */
.lbs-legal { padding-block: var(--lbs-e7) var(--lbs-seccion); }
.lbs-legal__cab { max-width: var(--lbs-ancho-texto); margin: 0 auto var(--lbs-e7); }
.lbs-legal__cab h1 { margin-bottom: var(--lbs-e4); }
.lbs-legal__fecha {
  display: inline-flex; align-items: center; gap: var(--lbs-e2);
  padding: 4px 11px; border: 1px solid var(--lbs-linea-fuerte); border-radius: 999px;
  font-size: var(--lbs-t-nota); color: var(--lbs-texto-3);
}

.lbs-legal__cuerpo { max-width: var(--lbs-ancho-texto); margin-inline: auto; }
.lbs-legal__cuerpo section { padding-top: var(--lbs-e6); }
.lbs-legal__cuerpo section + section { border-top: 1px solid var(--lbs-linea); margin-top: var(--lbs-e6); }
.lbs-legal__cuerpo h2 {
  font-size: clamp(18px, 3.4vw, 22px);
  margin-bottom: var(--lbs-e4);
  display: flex; align-items: baseline; gap: var(--lbs-e3);
}
/* Numeración discreta, en oro, sin cargar el titular. */
.lbs-legal__cuerpo h2 .num {
  flex: none; font-size: var(--lbs-t-menor); font-weight: 700;
  color: var(--lbs-oro); font-variant-numeric: tabular-nums;
}
.lbs-legal__cuerpo h3 { margin: var(--lbs-e5) 0 var(--lbs-e3); font-size: var(--lbs-t-h3); }
.lbs-legal__cuerpo p { color: var(--lbs-texto-2); margin-bottom: var(--lbs-e4); }
.lbs-legal__cuerpo p:last-child { margin-bottom: 0; }
.lbs-legal__cuerpo strong { color: var(--lbs-texto); font-weight: 650; }
.lbs-legal__cuerpo ul { list-style: none; margin: 0 0 var(--lbs-e4); padding: 0; display: grid; gap: var(--lbs-e3); }
.lbs-legal__cuerpo ul li {
  position: relative; padding-left: var(--lbs-e5); color: var(--lbs-texto-2);
}
.lbs-legal__cuerpo ul li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lbs-oro-linea);
}
.lbs-legal__cuerpo a { color: var(--lbs-oro); }

/* Índice de secciones, arriba del documento. */
.lbs-legal__indice {
  max-width: var(--lbs-ancho-texto); margin: 0 auto var(--lbs-e7);
  padding: var(--lbs-e5);
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-l);
  background: var(--lbs-panel); box-shadow: var(--lbs-filo);
}
.lbs-legal__indice p {
  font-size: var(--lbs-t-etiqueta); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lbs-texto-3); margin-bottom: var(--lbs-e4);
}
.lbs-legal__indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lbs-e2); }
.lbs-legal__indice a { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); text-decoration: none; }
.lbs-legal__indice a:hover { color: var(--lbs-oro); }
.lbs-legal__indice .n { color: var(--lbs-texto-3); font-variant-numeric: tabular-nums; margin-right: 8px; }

/* Ficha de identificación del titular. */
.lbs-ficha {
  margin-bottom: var(--lbs-e5);
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-m);
  background: var(--lbs-panel); overflow: hidden;
}
.lbs-ficha div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: var(--lbs-e3) var(--lbs-e4);
  border-bottom: 1px solid var(--lbs-linea);
}
@media (min-width: 560px) { .lbs-ficha div { grid-template-columns: 150px 1fr; gap: var(--lbs-e4); align-items: baseline; } }
.lbs-ficha div:last-child { border-bottom: 0; }
.lbs-ficha dt { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); }
.lbs-ficha dd { margin: 0; font-size: var(--lbs-t-menor); font-weight: 600; }

/* Aviso destacado dentro de un documento legal. */
.lbs-aviso-legal {
  padding: var(--lbs-e5);
  border: 1px solid var(--lbs-oro-linea); border-left-width: 3px;
  border-radius: var(--lbs-r-m);
  background: var(--lbs-oro-tenue);
  margin-bottom: var(--lbs-e5);
}
.lbs-aviso-legal p { color: var(--lbs-texto) !important; }
.lbs-aviso-legal p:last-child { margin-bottom: 0; }

/* Marcador de contenido pendiente de revisión jurídica.
   Deliberadamente visible: nadie debe publicar esto sin verlo. */
.lbs-pendiente-legal {
  display: block; margin: var(--lbs-e4) 0;
  padding: var(--lbs-e4);
  border: 1px dashed rgba(110,168,254,.45); border-radius: var(--lbs-r-m);
  background: rgba(110,168,254,.06);
  font-size: var(--lbs-t-menor); color: var(--lbs-texto-2);
}
.lbs-pendiente-legal b {
  display: block; margin-bottom: 4px;
  color: var(--lbs-dato); font-size: var(--lbs-t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase;
}

/* Tabla de cookies. En móvil se desplaza sola, sin arrastrar la página. */
.lbs-tabla-envoltura { position: relative; overflow-x: auto; margin-bottom: var(--lbs-e4);
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-m); background: var(--lbs-panel); }
/* Sombra al borde derecho: dice que la tabla sigue. Va pegada al
   contenido (`background-attachment: local` en la capa de relleno), así
   que desaparece sola al llegar al final del desplazamiento. */
.lbs-tabla-envoltura {
  background-image:
    linear-gradient(90deg, var(--lbs-panel), rgba(13,17,23,0)),
    linear-gradient(270deg, var(--lbs-panel), rgba(13,17,23,0)),
    linear-gradient(270deg, rgba(0,0,0,.62), rgba(0,0,0,0)),
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,0));
  background-position: left center, right center, right center, left center;
  background-size: 26px 100%, 26px 100%, 24px 100%, 24px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.lbs-tabla-aviso {
  margin: calc(var(--lbs-e4) * -1) 0 var(--lbs-e4);
  font-size: var(--lbs-t-nota); color: var(--lbs-texto-3);
}
@media (min-width: 900px) { .lbs-tabla-aviso { display: none; } }
.lbs-tabla { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--lbs-t-nota); }
.lbs-tabla th, .lbs-tabla td { padding: var(--lbs-e3) var(--lbs-e4); text-align: left;
  border-bottom: 1px solid var(--lbs-linea); vertical-align: top; }
.lbs-tabla th { font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lbs-texto-3); font-size: var(--lbs-t-etiqueta); white-space: nowrap; }
.lbs-tabla td { color: var(--lbs-texto-2); }
.lbs-tabla td:first-child { color: var(--lbs-texto); font-weight: 650;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.lbs-tabla tbody tr:last-child td { border-bottom: 0; }

/* ============ PIE GLOBAL ============
   Uno solo para las nueve páginas. Sustituye al pie anterior. */
.lbs-pie__marca { display: flex; align-items: center; gap: var(--lbs-e3); margin-bottom: var(--lbs-e3); }
.lbs-pie__marca img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.lbs-pie__marca strong { font-size: var(--lbs-t-menor); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }

.lbs-pie__aviso {
  font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); line-height: 1.5;
  max-width: 62ch; margin-bottom: var(--lbs-e3);
}
.lbs-pie__aviso strong { color: var(--lbs-texto-2); font-weight: 650; }

.lbs-pie__nav { display: flex; flex-wrap: wrap; gap: var(--lbs-e2) var(--lbs-e4); margin-bottom: var(--lbs-e3); }
.lbs-pie__nav a { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); text-decoration: none; }
.lbs-pie__nav a:hover { color: var(--lbs-oro); }
.lbs-pie__nav button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--lbs-t-menor); color: var(--lbs-texto-2);
}
.lbs-pie__nav button:hover { color: var(--lbs-oro); }

.lbs-pie__copy { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); }
.lbs-pie__id { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); line-height: 1.5; }
.lbs-pie__id a { color: var(--lbs-texto-2); }

/* ============ BANNER DE COOKIES ============
   Aceptar y rechazar con el MISMO peso visual: es un requisito, no un detalle.
   Ninguno de los dos puede quedar disimulado. */
.lbs-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  padding: var(--lbs-e4);
  background: rgba(8,10,14,.97);
  border-top: 1px solid var(--lbs-oro-linea);
  backdrop-filter: blur(14px);
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.lbs-cookies[hidden] { display: none; }
.lbs-cookies__caja { max-width: var(--lbs-ancho); margin-inline: auto; display: grid; gap: var(--lbs-e4); }
@media (min-width: 1024px) {
  .lbs-cookies__caja { grid-template-columns: 1fr auto; align-items: center; gap: var(--lbs-e6); }
}
.lbs-cookies__texto { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); line-height: 1.55; }
/* Solo el primer <strong> es el titular del aviso; los demás van en línea,
   o parten la frase en bloques sueltos. */
.lbs-cookies__texto > strong:first-child {
  display: block; color: var(--lbs-texto);
  margin-bottom: 4px; font-size: var(--lbs-t-cuerpo);
}
.lbs-cookies__texto strong { color: var(--lbs-texto); font-weight: 650; }
.lbs-cookies__texto a { color: var(--lbs-oro); }
.lbs-cookies__botones { display: grid; gap: var(--lbs-e3); grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .lbs-cookies__botones { grid-template-columns: repeat(3, auto); } }
.lbs-cookies__botones .lbs-boton { min-height: 46px; padding: 12px 18px; font-size: var(--lbs-t-menor); }
/* Aceptar y rechazar deben pesar lo mismo: mismo tamaño, misma posición y
   MISMO tratamiento visual. Si uno va en oro y el otro no, la elección deja
   de ser neutra por mucho que midan igual. */
.lbs-cookies__botones .principal {
  background: rgba(255,255,255,.07);
  border-color: var(--lbs-linea-fuerte);
  color: var(--lbs-texto);
  box-shadow: none;
}
.lbs-cookies__botones .principal:hover { background: rgba(255,255,255,.12); border-color: var(--lbs-oro-linea); }
/* «Configurar» es una tercera vía, no una de las dos opciones principales. */
.lbs-cookies__botones .config { background: none; border-color: var(--lbs-linea); color: var(--lbs-texto-2); }
/* «Configurar» ocupa la fila entera en móvil, debajo de los dos principales,
   que van uno al lado del otro con idéntico tamaño. */
.lbs-cookies__botones .config { grid-column: 1 / -1; }
@media (min-width: 560px) { .lbs-cookies__botones .config { grid-column: auto; } }

/* Panel de configuración por categorías. */
.lbs-cookies__panel { display: none; margin-top: var(--lbs-e5); padding-top: var(--lbs-e5);
  border-top: 1px solid var(--lbs-linea); }
.lbs-cookies__panel.abierto { display: block; }
.lbs-cookies__cat {
  display: flex; align-items: flex-start; gap: var(--lbs-e4);
  padding: var(--lbs-e4) 0; border-bottom: 1px solid var(--lbs-linea);
}
.lbs-cookies__cat:last-of-type { border-bottom: 0; }
.lbs-cookies__cat input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--lbs-oro); }
.lbs-cookies__cat input:disabled { opacity: .5; }
.lbs-cookies__cat strong { display: block; font-size: var(--lbs-t-menor); margin-bottom: 3px; }
.lbs-cookies__cat span { font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); line-height: 1.5; }
.lbs-cookies__cat em { font-style: normal; color: var(--lbs-oro); font-size: var(--lbs-t-nota); }

/* ============ CAPA DE PRIVACIDAD DEL FORMULARIO ============ */
.lbs-capa-privacidad {
  margin-top: var(--lbs-e4); padding: var(--lbs-e4);
  border: 1px solid var(--lbs-linea); border-radius: var(--lbs-r-m);
  background: rgba(255,255,255,.028);
  font-size: var(--lbs-t-nota); color: var(--lbs-texto-3); line-height: 1.6;
}
.lbs-capa-privacidad strong { color: var(--lbs-texto-2); font-weight: 650; }
.lbs-capa-privacidad a { color: var(--lbs-oro); }

/* ============ ACEPTACIÓN DE TÉRMINOS (/vip) ============ */
.lbs-acepto {
  display: flex; align-items: flex-start; gap: var(--lbs-e3);
  margin-block: var(--lbs-e5) var(--lbs-e4);
  padding: var(--lbs-e4);
  border: 1px solid var(--lbs-linea-fuerte); border-radius: var(--lbs-r-m);
  background: rgba(255,255,255,.03); cursor: pointer; text-align: left;
}
/* La casilla.

   `accent-color` solo pinta el estado MARCADO. Sin marcar, el navegador dibuja
   su casilla con el esquema de color de la página, y la página no declaraba
   ninguno: sobre grafito salía un cuadrado blanco macizo, que pesaba más que el
   texto que acompaña. Con `color-scheme: dark` el propio navegador la dibuja
   oscura y con filo claro.

   Se deja que la dibuje el navegador en vez de rehacerla con `appearance: none`:
   una casilla nativa ya sabe responder al teclado, al zoom y al lector de
   pantalla, y una pintada a mano hay que enseñárselo todo otra vez. */
.lbs-acepto input {
  width: 22px; height: 22px; flex: none; margin: 0;
  color-scheme: dark;
  accent-color: var(--lbs-oro);
  cursor: pointer;
}
.lbs-acepto input:focus-visible { outline: 2px solid var(--lbs-oro); outline-offset: 2px; }
.lbs-acepto span { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); line-height: 1.5; }
.lbs-acepto a { color: var(--lbs-oro); }