/* ===== /metodo — solo lo específico de esta página ===== */

.metodo-hero { padding-top: var(--lbs-e7); padding-bottom: var(--lbs-e6); }
@media (min-width: 1024px) { .metodo-hero { padding-top: var(--lbs-e9); } }

/* El vídeo no lleva padding de sección propio: va pegado al hero,
   como continuación del titular, no como bloque aparte. */
.metodo-video-seccion { padding-bottom: var(--lbs-seccion); }

/* Proceso de cuatro pasos */

/* Tabla de gestión de banca.
   En móvil la tabla real se conserva, pero con desplazamiento propio:
   nunca debe forzar scroll horizontal a toda la página. */
.metodo-banca {
  padding: var(--lbs-e5);
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-l);
  background: var(--lbs-panel);
  overflow-x: auto;
}
.metodo-tabla {
  width: 100%;
  /* El ancho real lo impone el CONTENIDO, no este mínimo: la tabla pide
     313 px por sus tres columnas más 16 px de padding a cada lado. Bajar
     este valor no cambia nada; para que entrara en 310 habría que
     recortar el padding lateral en pantallas estrechas. */
  min-width: 300px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.metodo-tabla th,
.metodo-tabla td {
  padding: var(--lbs-e3) var(--lbs-e4);
  text-align: left;
  border-bottom: 1px solid var(--lbs-linea);
}
.metodo-tabla th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  vertical-align: bottom;
  text-transform: uppercase;
  color: var(--lbs-texto-3);
}
.metodo-tabla td { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); }
.metodo-tabla td:first-child { color: var(--lbs-texto); font-weight: 650; }
.metodo-tabla tbody tr:last-child td { border-bottom: 0; }

.metodo-pendiente-linea {
  margin-top: var(--lbs-e2);
  color: var(--lbs-dato);
}

/* Bloque de precio: qué incluye + tarjeta */
.metodo-precio {
  display: grid;
  gap: var(--lbs-e5);
  max-width: var(--lbs-ancho-medio);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .metodo-precio {
    grid-template-columns: 1fr 1fr;
    gap: var(--lbs-e7);
    align-items: center;
  }
}
.metodo-precio__tarjeta { text-align: center; padding: var(--lbs-e6) var(--lbs-e5); }
.metodo-precio__cta { margin-block: var(--lbs-e5) var(--lbs-e4); }

/* Cierre: acción principal y salida secundaria, con jerarquía clara. */
.metodo-cierre {
  margin-top: var(--lbs-e6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lbs-e4);
}

/* ===== F4B ===== */

/* El resumen de valor va pegado al vídeo, como remate, no como sección. */
.metodo-resumen-seccion { padding-bottom: var(--lbs-seccion); }

/* En «el problema» los iconos marcan carencias: van en gris, no en oro.
   El oro se reserva para lo que sí aporta. */
.metodo-problema .lbs-compacta svg { color: var(--lbs-texto-3); }

/* El proceso ya no son tarjetas: usa .lbs-proceso del sistema.
   Las reglas de compactación de F4B quedaban huérfanas y se retiran. */

/* ===== Registro y trazabilidad =====
   Un documento, no una tabla de resultados. Las cabeceras se leen; el
   contenido no, y eso es intencionado: la pieza afirma que existe un
   registro, no qué pone en él. Está construida solo con CSS, sin
   ninguna imagen nueva. */
.registro { margin: 0; }

.registro__doc {
  border: 1px solid var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-l);
  background: var(--lbs-panel);
  box-shadow: var(--lbs-sombra);
  overflow: hidden;
}

/* Barra de documento: lo que hace que se lea como archivo abierto. */
.registro__barra {
  display: flex; align-items: center; gap: var(--lbs-e3);
  padding: var(--lbs-e3) var(--lbs-e4);
  border-bottom: 1px solid var(--lbs-linea);
  background: rgba(255,255,255,.025);
}
.registro__puntos { display: inline-flex; gap: 5px; flex: none; }
.registro__puntos i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lbs-linea-fuerte);
}
.registro__nombre {
  font-size: var(--lbs-t-nota); font-weight: 650; color: var(--lbs-texto-3);
  letter-spacing: .04em;
}

/* Cinco columnas iguales, cabeceras y filas comparten la rejilla. */
.registro__cabeceras,
.registro-fila {
  display: grid;
  grid-template-columns: .65fr 1.45fr .95fr 1.2fr .78fr;
  gap: var(--lbs-e2);
  align-items: end;
  padding: 0 var(--lbs-e4);
}
.registro__cabeceras {
  padding-block: var(--lbs-e3);
  border-bottom: 1px solid var(--lbs-linea);
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lbs-texto-3);
}
/* `min-width:0` evita que una palabra larga estire su columna y empuje
   las demás fuera del documento. */
.registro__cabeceras span { min-width: 0; line-height: 1.25; }

/* El desenfoque va sobre las filas, nunca sobre las cabeceras: si se
   difuminara todo, la pieza dejaría de leerse como un registro. */
.registro__filas { filter: blur(2.6px); opacity: .5; padding-block: var(--lbs-e2); }
.registro-fila { padding-block: 9px; align-items: center; }
.registro-fila i {
  display: block; height: 7px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.14));
}
.registro-fila:nth-child(even) i { background: rgba(255,255,255,.17); }
/* Neutro a propósito: es un estado, no un desenlace favorable. */
.registro-fila i:last-child { background: rgba(255,255,255,.22); }

/* Se difumina hacia abajo: el registro continúa fuera de la pieza. */
.registro__doc { position: relative; }
.registro__doc::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(180deg, rgba(13,17,23,0), var(--lbs-panel));
  pointer-events: none;
}

.registro__pie { margin-top: var(--lbs-e4); }

.registro__accion {
  margin-top: var(--lbs-e5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--lbs-e3);
}
.registro__accion button[disabled] { opacity: .4; cursor: not-allowed; }
.registro__pendiente {
  padding: var(--lbs-e3) var(--lbs-e4);
  border: 1px dashed var(--lbs-linea-fuerte);
  border-radius: var(--lbs-r-m);
  color: var(--lbs-dato);
}
.registro__pendiente strong {
  display: block; margin-bottom: 3px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}

@media (min-width: 768px) {
  .registro__cabeceras,
  .registro-fila { gap: var(--lbs-e4); }
  .registro__cabeceras { font-size: 10px; letter-spacing: .08em; }
  .registro__accion { flex-direction: row; align-items: center; }
  .registro__pendiente { flex: 1; }
}

@media (max-width: 379.98px) {
  /* El último tope era el padding del propio contenedor: 24 px a cada
     lado dejaban 262 de hueco para una tabla que pide 289. Con 10 el
     hueco sube a 290 y la tabla entra. Solo por debajo de 380, así que
     390 y hacia arriba conservan su aire de 24. */
  .metodo-banca { padding-inline: 10px; }
}

@media (max-width: 399.98px) {
  /* A 360 px de pantalla el contenedor mide 310 y la tabla pedía 313:
     tres píxeles de desplazamiento interno, un scroll para nada. El
     ancho lo impone el contenido, no el min-width, así que lo único que
     sirve es devolver espacio. Bajar el padding lateral de 16 a 12
     recorta 24 px en total y la tabla entra. La legibilidad aguanta: la
     separación entre columnas sigue siendo mayor que el interlineado. */
  .metodo-tabla th,
  .metodo-tabla td { padding-inline: var(--lbs-e3); }

  /* Con el padding recortado el contenido solo pide 289 px, pero el
     min-width de 300 seguía forzando la tabla por encima de eso. Aquí
     manda el contenido: es lo único que puede entrar en el hueco. */
  .metodo-tabla { min-width: 0; }
}

/* Las cifras no se parten: «hasta 2 u» en dos líneas se leía como dos
   datos distintos. */
.metodo-tabla td + td { white-space: nowrap; }

@media (min-width: 768px) {
  .metodo-tabla th { font-size: var(--lbs-t-nota); letter-spacing: .06em; }
}

/* ===== Retícula de análisis =====
   Solo en la sección de los cuatro pasos, que es donde el texto habla
   de medir. Es trama de gráfico, no de campo: refuerza «análisis,
   medición, sistema» sin acercarse a la estética de casa de apuestas.

   Se probaron además luz de recinto en los heroes y una geometría de
   campo. Descartadas por dirección: la primera aportaba poco y la
   segunda no cabe en esta maquetación sin parecer un borde suelto.

   La sección es la única de la página con raíl, así que `:has()` la
   identifica sin necesidad de añadir una clase al HTML. */
.lbs-seccion:has(.lbs-proceso) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* El contenido, por encima de la trama. Sin esto un pseudoelemento
   absoluto pinta sobre el texto y lo tiñe. */
.lbs-seccion:has(.lbs-proceso) > .lbs-contenedor {
  position: relative;
  z-index: 1;
}
.lbs-seccion:has(.lbs-proceso)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.030) 0 1px, transparent 1px 68px);
  /* Se desvanece hacia los bordes: si llegara a cortarse en seco
     parecería un tramado que alguien olvidó quitar. */
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000, transparent 80%);
}

/* ===== La banca como 100 partes =====
   Cien marcas diminutas, una encendida. No es una infografía: es una
   escala, del mismo tipo que las que se dibujan al margen de un informe.
   Se genera con un degradado repetido, así que no añade ni un elemento
   al DOM ni una imagen. Decorativa: el texto de al lado ya lo dice todo. */
.banca-idea {
  display: grid;
  gap: var(--lbs-e4);
  align-items: center;
  margin-bottom: var(--lbs-e5);
}
@media (min-width: 560px) {
  .banca-idea { grid-template-columns: 1fr auto; gap: var(--lbs-e6); }
}
.banca-idea__linea { font-size: var(--lbs-t-menor); color: var(--lbs-texto-2); }
.banca-idea__linea strong { color: var(--lbs-texto); font-weight: 700; }
.banca-idea__nota {
  margin-top: var(--lbs-e2);
  font-size: var(--lbs-t-nota);
  color: var(--lbs-texto-3);
}

/* 10 × 10 puntos: cien partes exactas, de un solo gradiente. Se probó
   con cuadrados y mallas superpuestas y salía un damero, que no se lee
   como «cien partes» sino como textura. Los puntos sí. */
.banca-idea__cien {
  position: relative;
  width: 132px; height: 132px;
  flex: none;
  justify-self: start;
  background-image: radial-gradient(rgba(255,255,255,.26) 1.5px, transparent 1.6px);
  background-size: 13.2px 13.2px;
  background-position: 6.6px 6.6px;
}
/* La parte que se expone: una de las cien, en dorado. */
.banca-idea__cien::after {
  content: "";
  position: absolute;
  left: 6.6px; top: 6.6px;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--lbs-oro);
  box-shadow: 0 0 9px rgba(242,193,78,.75);
}
/* La frase que resume la regla. Se separa de las notas porque es la
   conclusión, no un matiz. */
.banca-regla {
  margin: var(--lbs-e5) 0 var(--lbs-e4);
  padding-left: var(--lbs-e4);
  border-left: 2px solid var(--lbs-oro-linea);
  font-size: var(--lbs-t-menor);
  font-weight: 650;
  color: var(--lbs-texto);
}

/* ===== La tabla en móvil =====
   Cuatro columnas no caben en un teléfono, y ninguna de las cuatro ideas
   se puede quitar. Así que por debajo de 640 la tabla deja de ser tabla:
   cada fila pasa a ser una ficha y cada dato se etiqueta con su columna
   mediante `data-etiqueta`. La información es la misma; lo que cambia es
   la forma de leerla. */
@media (max-width: 639.98px) {
  .metodo-banca { overflow-x: visible; }
  .metodo-tabla, .metodo-tabla tbody, .metodo-tabla tr, .metodo-tabla td, .metodo-tabla th {
    display: block;
    min-width: 0;
  }
  .metodo-tabla thead { display: none; }
  .metodo-tabla tr {
    padding: var(--lbs-e4) 0;
    border-bottom: 1px solid var(--lbs-linea);
  }
  .metodo-tabla tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .metodo-tabla tr:first-child { padding-top: 0; }
  .metodo-tabla th[scope="row"] {
    padding: 0 0 var(--lbs-e3);
    font-size: var(--lbs-t-menor);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--lbs-texto);
    border-bottom: 0;
  }
  .metodo-tabla td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lbs-e4);
    padding: 5px 0;
    border-bottom: 0;
    white-space: normal;
  }
  .metodo-tabla td::before {
    content: attr(data-etiqueta);
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lbs-texto-3);
  }
  .metodo-tabla td { text-align: right; }
}

/* Los nombres de fila van en <th scope="row"> para que un lector de
   pantalla sepa a qué se refiere cada dato. Visualmente, sin embargo,
   son contenido, no cabecera: heredaban las versalitas de <th> y se
   confundían con los títulos de columna. */
.metodo-tabla th[scope="row"] {
  font-size: var(--lbs-t-menor);
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lbs-texto);
  vertical-align: middle;
}
@media (min-width: 768px) {
  .metodo-tabla th[scope="row"] { font-size: var(--lbs-t-menor); letter-spacing: normal; }
}

/* ---- La regla, encima de la cuenta ----
   Tres líneas con la cifra en columna propia. Es lo que antes ocupaba
   una tabla de cuatro columnas, y no necesitaba tanto. */
.metodo-regla {
  display: grid;
  gap: var(--lbs-e3);
  margin: var(--lbs-e5) 0 var(--lbs-e5);
  padding: 0;
  list-style: none;
}
.metodo-regla li {
  display: flex;
  align-items: baseline;
  gap: var(--lbs-e3);
  font-size: var(--lbs-t-menor);
  color: var(--lbs-texto-2);
}
.metodo-regla b {
  flex: none;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--lbs-oro);
}
.metodo-regla strong { color: var(--lbs-texto); font-weight: 650; }

/* ---- Acceso al registro ----
   Ocupa el sitio del botón que se retiró. Se lee como un dato, no como
   una llamada a la acción: no hay acción que llamar todavía. */
.registro__acceso {
  margin-top: var(--lbs-e5);
  padding: var(--lbs-e4) var(--lbs-e5);
  border: 1px solid var(--lbs-linea);
  border-radius: var(--lbs-r-m);
  background: var(--lbs-panel);
  font-size: var(--lbs-t-menor);
  color: var(--lbs-texto-2);
  text-align: center;
}
.registro__acceso strong { color: var(--lbs-texto); font-weight: 650; }

/* El matiz de cada columna, en su propia línea y más apagado. Sin esto
   la cabecera se lee «1 UNIDAD1 % · HABITUAL», todo seguido. */
.metodo-tabla thead th span {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--lbs-texto-3);
  opacity: .75;
}

/* Dos avisos seguidos son dos ideas, no un párrafo de dos líneas. */
.metodo-banca .lbs-nota + .lbs-nota { margin-top: var(--lbs-e3); }
.metodo-banca table + .lbs-nota { margin-top: var(--lbs-e4); }

/* CTA al final de la banca: separado de la tarjeta lo justo para que se
   lea como la salida del bloque, no como parte de la tabla. */
.metodo-banca__cta { margin-top: var(--lbs-e6); }