/* Va en @layer components por la misma razon que cine-scoped.css: una regla
   sin capa gana a cualquier utilidad de Tailwind, y eso rompia los componentes
   heredados (colores de texto y rellenos). Aqui queda por debajo de ellas. */
@layer components {
/* =============================================================================
   Lion Fintech — capa cinematográfica
   Personalidad: metal líquido. Violeta profundo, cristal y una tarjeta virtual
   como pieza central. Space Grotesk para los titulares. Todo en .cine.
   ========================================================================== */

.cine {
  --bg: #08060F;
  --bg-2: #150F26;
  --fg: #EFEAFB;
  --fg-2: #B8ADD4;
  --fg-3: #948AB0;
  --light: #F6F4FD;
  --light-2: #E9E4F8;
  --ink: #120C1F;
  --ink-2: #453A5C;
  --ink-3: #5E5178;
  --b1: #8B5CF6;
  --b2: #5F30C9;
  --b3: #D8C7FF;
  --on-b1: #0B0616;
  --grad: linear-gradient(115deg, #5F30C9, #8B5CF6 50%, #C9B3F5);
  --veil: 8, 6, 15;

  --font-d: var(--font-space-grotesk, "Space Grotesk"), system-ui, sans-serif;
  --font-b: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-m: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 24px;
  --radius-sm: 16px;
  --maxw: 1240px;
}
.cine h1, .cine h2, .cine h3 { font-weight: 600; letter-spacing: -.03em; }

/* --- cabecera -------------------------------------------------------------- */
.ln-nav { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s; }
.ln-nav.is-stuck { background: rgba(8,6,15,.86); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: rgba(216,199,255,.16); }
.ln-nav-in { display: flex; align-items: center; gap: 1rem; height: 76px; }
.ln-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-family: var(--font-d); font-weight: 600; letter-spacing: -.02em; font-size: 1rem; color: #fff; }

/* --- héroe ----------------------------------------------------------------- */
.ln-hero { min-height: 100svh; display: flex; align-items: center; padding: 130px 0 5rem; }
.ln-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; }
.ln-hero h1 { margin-top: 1.5rem; }
.ln-hero .lead { margin-top: 1.6rem; color: #C9BFE4; }
.ln-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.3rem; }
@media (max-width: 1000px) { .ln-hero-grid { grid-template-columns: 1fr; } }

/* --- la tarjeta virtual ----------------------------------------------------- */
.ln-card { aspect-ratio: 1.586; border-radius: 22px; padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #6A34D8 0%, #8B5CF6 42%, #3D1E8C 100%);
  box-shadow: 0 46px 90px -34px rgba(139,92,246,.75);
  display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-4deg); }
.ln-card::before { content: ""; position: absolute; inset: -40%;
  background: radial-gradient(45% 45% at 30% 20%, rgba(255,255,255,.32), transparent 70%); }
.ln-card > * { position: relative; }
.ln-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.ln-card-top b { font-family: var(--font-d); font-size: 1.05rem; letter-spacing: -.02em; }
.ln-card-top span { font-family: var(--font-m); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; opacity: .75; display: block; margin-top: .3rem; }
.ln-chip { width: 44px; height: 33px; border-radius: 6px;
  background: linear-gradient(140deg, #F3D98B, #C9A24A 55%, #F6E6B0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ln-card-num { font-family: var(--font-m); font-size: clamp(.95rem, 2vw, 1.22rem);
  letter-spacing: .16em; }
.ln-card-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ln-card-bot small { font-family: var(--font-m); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .7; display: block; }
.ln-card-bot p { font-size: .84rem; margin-top: .25rem; }
.ln-brandmark { font-family: var(--font-d); font-size: 1.1rem; font-weight: 600; opacity: .95; }

/* Movimientos bajo la tarjeta: el otro lado del producto. */
.ln-moves { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(216,199,255,.18); overflow: hidden; }
.ln-move { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem;
  border-bottom: 1px solid rgba(216,199,255,.10); }
.ln-move:last-child { border-bottom: 0; }
.ln-move i { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; display: grid;
  place-items: center; background: rgba(139,92,246,.22); color: var(--b3); font-size: .8rem;
  font-style: normal; }
.ln-move b { font-size: .85rem; font-weight: 500; color: var(--fg); display: block; }
.ln-move small { font-family: var(--font-m); font-size: .68rem; color: var(--fg-3); }
.ln-move em { margin-left: auto; font-family: var(--font-m); font-size: .88rem; font-style: normal; }
.ln-in { color: #86EFAC; }
.ln-out { color: var(--fg-2); }

/* --- capacidades ----------------------------------------------------------- */
.ln-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.8vw, 1.4rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.ln-feat { background: #fff; border: 1px solid rgba(18,12,31,.08); border-radius: var(--radius-sm);
  padding: clamp(1.4rem, 2.3vw, 1.9rem); box-shadow: var(--shadow-1);
  transition: box-shadow .35s, transform .35s var(--ease); }
.ln-feat:hover { box-shadow: var(--shadow-2); }
.ln-feat-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad); }
.ln-feat-ico svg { width: 22px; height: 22px; color: #fff; }
.ln-feat h3 { font-size: 1.04rem; margin-top: 1.1rem; color: var(--ink); }
.ln-feat p { font-size: .88rem; color: var(--ink-2); margin-top: .6rem; }
@media (max-width: 1000px) { .ln-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ln-feats { grid-template-columns: 1fr; } }

/* --- Leo: la conversación -------------------------------------------------- */
.ln-leo { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ln-chat { display: grid; gap: .8rem; }
.ln-bubble { border-radius: 20px; padding: 1rem 1.25rem; font-size: .95rem; line-height: 1.55; max-width: 92%; }
.ln-ask { background: rgba(255,255,255,.07); border: 1px solid rgba(216,199,255,.2); color: var(--fg);
  justify-self: end; border-bottom-right-radius: 6px; }
.ln-answer { background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(95,48,201,.14));
  border: 1px solid rgba(216,199,255,.34); color: #EDE6FE; border-bottom-left-radius: 6px; }
.ln-leo-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-m);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--b3); }
@media (max-width: 900px) { .ln-leo { grid-template-columns: 1fr; } }

/* --- seguridad -------------------------------------------------------------- */
.ln-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.ln-sec > div { background: #fff; border: 1px solid rgba(18,12,31,.08); border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 2.4vw, 2rem); box-shadow: var(--shadow-1); }
.ln-sec svg { width: 24px; height: 24px; color: var(--b2); }
.ln-sec h3 { font-size: 1.02rem; margin-top: 1rem; color: var(--ink); }
.ln-sec p { font-size: .88rem; color: var(--ink-2); margin-top: .55rem; }
@media (max-width: 900px) { .ln-sec { grid-template-columns: 1fr; } }

/* --- precios ---------------------------------------------------------------- */
.ln-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem);
  /* `stretch` en vez de `start`: con `start` cada plan medía lo que midiera su
     lista de características y los tres quedaban con el borde inferior a distinta
     altura — 567, 581 y 613 px medidos a 1280 px, con los tres botones «Empezar»
     escalonados 45 px. `.ln-plan` ya es una columna flexible con `ul { flex: 1 }`,
     así que al estirarse las tarjetas los botones caen solos en la misma línea. */
  margin-top: clamp(2.2rem, 4vw, 3rem); align-items: stretch; }
.ln-plan { border-radius: var(--radius); padding: clamp(1.7rem, 2.6vw, 2.2rem);
  background: rgba(255,255,255,.035); border: 1px solid rgba(216,199,255,.16);
  display: flex; flex-direction: column; }
.ln-plan.is-top { background: linear-gradient(165deg, rgba(139,92,246,.24), rgba(95,48,201,.08));
  border-color: var(--b1); box-shadow: 0 40px 80px -30px rgba(139,92,246,.6); }
/* La etiqueta reserva SIEMPRE dos líneas. La del plan destacado lleva delante
   «El más contratado · », así que se partía en dos mientras las otras dos
   ocupaban una: medido a 1280 px, 32 px frente a 16, y eso bajaba 16 px el
   nombre y el precio del plan del medio respecto a los de los lados. Con la
   altura reservada, los tres nombres y los tres precios comparten línea base. */
.ln-plan-tag { font-family: var(--font-m); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); display: block; min-height: 3.24em; }
.ln-plan.is-top .ln-plan-tag { color: var(--b3); }
.ln-plan h3 { font-size: 1.4rem; margin-top: .9rem; }
.ln-plan-price { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .4rem; }
.ln-plan-price b { font-family: var(--font-d); font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.ln-plan-price span { font-family: var(--font-m); font-size: .74rem; color: var(--fg-3); }
.ln-plan-sum { font-size: .9rem; color: var(--fg-2); margin-top: 1rem; }
.ln-plan ul { list-style: none; margin-top: 1.3rem; display: grid; gap: .6rem; flex: 1; }
.ln-plan li { display: flex; gap: .6rem; font-size: .88rem; color: var(--fg-2); align-items: flex-start; }
.ln-plan li svg { width: 15px; height: 15px; color: var(--b3); flex: 0 0 auto; margin-top: .2rem; }
.ln-plan .btn { margin-top: 1.7rem; width: 100%; }
[data-billing="monthly"] [data-price="annual"], [data-billing="annual"] [data-price="monthly"] { display: none; }
@media (max-width: 940px) { .ln-plans { grid-template-columns: 1fr; } }
.ln-oneoff { margin-top: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--radius-sm);
  padding: clamp(1.4rem, 2.4vw, 1.9rem); background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.3); }
.ln-oneoff p { color: var(--fg-2); font-size: .91rem; max-width: 80ch; }
.ln-oneoff strong { color: #fff; }
.ln-fine { color: var(--fg-3); font-size: .86rem; margin-top: 1.4rem; max-width: 80ch; }
/* Botonera del apartado de cuenta personal: dos llamadas seguidas dentro del
   recuadro de aviso, que en móvil tienen que apilarse en lugar de encogerse. */
.ln-personal-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
@media (max-width: 520px) { .ln-personal-cta .btn { width: 100%; justify-content: center; } }

/* Cabecera de cada línea de producto dentro de la sección de precios. Las
   cuentas personales y las de negocio tienen su propia rejilla y su propio
   conmutador mensual/anual: este título es lo que separa una tabla de la otra. */
.ln-linea-titulo { font-family: var(--font-d); font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: #fff; letter-spacing: -.02em; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

/* --- pie ---------------------------------------------------------------------- */
.ln-foot { background: #050310; border-top: 1px solid rgba(216,199,255,.14); }
.ln-foot .foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.ln-foot h4 { font-family: var(--font-m); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; }
.ln-foot ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.ln-foot a { font-size: .88rem; color: var(--fg-2); transition: color .25s; }
.ln-foot a:hover { color: var(--b3); }
.ln-foot-brand p { color: var(--fg-3); font-size: .87rem; margin-top: 1rem; max-width: 34ch; }
.ln-foot-mark { font-family: var(--font-d); font-size: clamp(2.4rem, 13vw, 11rem); font-weight: 600;
  letter-spacing: -.05em; line-height: .84;
  background: linear-gradient(180deg, rgba(216,199,255,.20), rgba(216,199,255,0));
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-bottom: .1em; }
.ln-foot-legal { border-top: 1px solid rgba(216,199,255,.12); padding: 1.3rem 0 2.2rem;
  font-size: .8rem; color: var(--fg-3); }
@media (max-width: 860px) { .ln-foot .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ln-foot .foot-top { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .ln-foot a { min-height: 44px; display: inline-flex; align-items: center; } }

}

/* =============================================================================
   FUERA de @layer components A PROPOSITO.
   Una regla dentro de la capa pierde contra las utilidades de Tailwind, y el
   aviso de cookies lleva la utilidad `flex` (display:flex) en su raiz: dentro
   de la capa, este `display:none` no surtiria ningun efecto.

   Que arregla: en la primera visita, con el aviso de cookies en pantalla, al
   abrir el menu hamburguesa de la web publica el aviso (z-index 100) se pintaba
   POR ENCIMA del panel del menu (.cine .sheet, z-index 89). Medido con
   elementFromPoint a 360x640 y 390x844: los 7 enlaces del menu —«Precios»,
   «Iniciar sesion» y «Abrir cuenta gratis» incluidos— NO recibian su propio
   clic; se lo llevaba el aviso. Es la puerta de entrada al alta con KYC.

   El aviso no se pierde: vuelve en cuanto se cierra el menu, y sigue siendo
   obligatorio decidir antes de que se active ninguna analitica.
   ========================================================================== */
body.menu-open [data-aviso-cookies] { display: none !important; }


/* =============================================================================
   EL BOTON DEL MENU, POR ENCIMA DEL VELO DE CONSENTIMIENTO   (2026-08-23)
   -----------------------------------------------------------------------------
   El aviso de cookies de Lion NO es una banda: es un velo a pantalla completa
   (`fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm`) que bloquea la pagina
   entera hasta que se decide. Es deliberado y SE MANTIENE TAL CUAL.

   El problema medido: el velo tapaba tambien el propio boton del menu, que vive
   en `.ln-nav` (z-index 90). A 360x640 y a 390x844, en la primera visita, el
   burger NO recibia su clic -un clic real de Playwright expiraba- asi que el
   visitante no podia ni abrir el menu para navegar. La regla de abajo del todo
   (`body.menu-open [data-aviso-cookies] { display:none }`) nunca llegaba a
   aplicarse porque el menu no se podia abrir.

   La correccion, y por que es asi de estrecha:

   - `.ln-nav` sube a 101, POR ENCIMA del velo. Hay que subir la cabecera
     entera y no solo el boton: `.ln-nav` es `position: fixed` con `z-index`,
     o sea un CONTEXTO DE APILAMIENTO, y desde dentro un hijo no puede escapar
     por mucho z-index que se le ponga.
   - Como subir la cabecera entera dejaria tambien el logo por encima del velo,
     la cabecera se sube `pointer-events: none` y se devuelve el clic SOLO al
     burger. Asi el unico control accesible sobre el velo es el que abre el
     menu: el logo y el resto de la pagina SIGUEN BLOQUEADOS.
   - Solo por debajo de 1120 px, que es donde `.cine .burger` se muestra. En
     escritorio no hay burger y la cabecera se queda donde estaba. Este limite
     tiene que ir SIEMPRE con el de `cine-scoped.css`: si el burger aparece a
     una anchura en la que esta regla no aplica, el aviso de cookies vuelve a
     comerse el unico clic que abre el menu.
   - Solo mientras el velo esta en pantalla (`body:has([data-aviso-cookies])`).
     Decidido el consentimiento, el velo desaparece y la cabecera vuelve a 90.

   Los botones del aviso (Aceptar / Rechazar / Personalizar) no se tocan: viven
   en el panel, abajo o al centro, y la cabecera solo ocupa 76 px arriba.
   ========================================================================== */
@media (max-width: 1120px) {
  body:has([data-aviso-cookies]) .ln-nav { z-index: 101; pointer-events: none; }
  body:has([data-aviso-cookies]) .ln-nav .burger { pointer-events: auto; }
}