/* =========================================
   Reset Básico y Estilos Globales
   =
======================================== */

/* =========================
   1. VARIABLES DE COLOR
========================= */
:root {
  /* Brand */
  --brand-1: #ff2689;
  /* primary */
  --brand-2: #fe6bb0;
  /* secondary */
  --brand-3: #ff5b82;
  /* accent */

  /* Neutrals */
  --ink: #0b123a;
  /* texto principal */
  --bg: #ffffff;
  /* fondo */
  --surface: #ffffff;
  /* cards */
  --border: rgba(11, 18, 58, .12);
  --border-rosado: #f3a7c9;
  --muted: rgba(11, 18, 58, .68);

  /* Soft tints */
  --brand-soft: rgba(255, 38, 137, .10);
  --brand-soft-2: rgba(254, 107, 176, .12);

  /* Gradients */
  /* Degradado basado en el color de logo */
  --brand-degradado:
    linear-gradient(135deg, #ff5b82 3%, #ff4da3 45%, #ffa3cf 85%, #ff2689 100%);
  /* Shadows */
  --shadow-sm: 0 10px 34px rgba(11, 18, 58, .08);
  --shadow-md: 0 18px 60px rgba(11, 18, 58, .10);
  --shadow-brand: 0 28px 90px rgba(255, 38, 137, .18), 0 18px 60px rgba(11, 18, 58, .10);

  /* Radius */
  --r-12: 12px;
  --r-16: 16px;
  --r-18: 18px;
  --r-22: 22px;
  --r-pill: 999px;

  /* Compatibility aliases (para no romper tu CSS actual) */
  --color-logo: var(--brand-1);
  --color-text: var(--ink);
  --color-bg: var(--bg);
  --color-card-bg: var(--surface);
  --color-border: var(--border);
  --color-white: #fff;
  --color-black: #000;

  --bc-pink: var(--brand-1);
  --bc-pink2: var(--brand-2);
  --bc-pink3: var(--brand-3);
  --bc-text: var(--ink);
  --bc-muted: var(--muted);
  --bc-border: var(--border);
  --bc-card: var(--surface);
  --bc-shadow: var(--shadow-md);

  --brand-gradient: var(--gradient-brand);
  --hover-light: rgba(11, 18, 58, .06);
  /* para .btn-dark:hover */
}










/* CONTENEDOR DEL FONDO */
.seccion-dots {
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
  background: linear-gradient(180deg,
      #ffffff 0%,
      #fffdfe 40%,
      #ffffff 100%);
}

/* CONTENIDO ENCIMA DE LOS DOTS */
.dots-content {
  position: relative;
  z-index: 2;
}

/* DOT BASE */
.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: #f09dc9;
  /* ROSADO PRINCIPAL */

  opacity: 0.65;
  filter: blur(1px);

  animation: floatDot 5s ease-in-out infinite alternate;
  pointer-events: none;
}

/* VARIACIONES DE DOTS (posiciones + colores + animaciones) */
.dot:nth-child(1) {
  top: 8%;
  left: 52%;
  background: #ffa3cf;
  animation-duration: 20s;
}

.dot:nth-child(2) {
  top: 15%;
  left: 78%;
  background: #ff4da3;
  animation-duration: 18s;
}

.dot:nth-child(3) {
  top: 30%;
  left: 45%;
  background: #ff2689;
  animation-duration: 19s;
}

.dot:nth-child(4) {
  top: 48%;
  left: 18%;
  background: #ffa3cf;
  animation-duration: 22s;
}

.dot:nth-child(5) {
  top: 62%;
  left: 82%;
  background: #ff4da3;
  animation-duration: 17s;
}

.dot:nth-child(6) {
  top: 74%;
  left: 30%;
  background: #ff2689;
  animation-duration: 16s;
}

.dot:nth-child(7) {
  top: 40%;
  left: 90%;
  background: #ffa3cf;
  animation-duration: 22s;
}

.dot:nth-child(8) {
  top: 12%;
  left: 18%;
  background: #ff4da3;
  animation-duration: 19s;
}

.dot:nth-child(9) {
  top: 38%;
  left: 5%;
  background: #ffa3cf;
  animation-duration: 21s;
}

.dot:nth-child(10) {
  top: 5%;
  left: 50%;
  background: #ff2689;
  animation-duration: 15s;
}

/* ANIMACIÓN SUAVE */
@keyframes floatDot {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.45;
  }

  50% {
    transform: translate3d(60px, -80px, 0);
    opacity: 0.9;
  }

  100% {
    transform: translate3d(-60px, 80px, 0);
    opacity: 0.55;
  }
}



/* ============================
   ⭐ Estrellas animadas
   ============================ */

/* Sección base */
.Seccion--stars {
  position: relative;
  overflow: hidden;
}

/* Estrellas base */
.stars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 400px 400px;
  z-index: 1;
}

/* Contenido encima */
.Seccion--stars .seccion-inner {
  position: relative;
  z-index: 2;
}

/* Estrellas pequeñas → movimiento diagonal ↗ (arriba a la derecha) */
.stars-small {
  opacity: 0.7;
  background-image:
    radial-gradient(4px 4px at 20px 30px, rgba(248, 108, 222, 0.8) 50%, transparent 51%),
    radial-gradient(6px 6px at 80px 120px, rgba(246, 185, 243, 0.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 220px 200px, rgba(117, 3, 111, 0.7) 50%, transparent 51%);
  animation: moveDiagUpRight 15s linear infinite;
}

/* Estrellas medianas → movimiento diagonal ↙ (abajo a la izquierda) */
.stars-medium {
  opacity: 0.8;
  background-image:
    radial-gradient(3px 3px at 60px 50px, rgba(189, 9, 138, 0.85) 50%, transparent 51%),
    radial-gradient(3px 3px at 180px 160px, rgba(198, 30, 195, 0.95) 50%, transparent 51%);
  animation: moveDiagDownLeft 25s linear infinite;
}

/* Estrellas grandes → movimiento horizontal → (izquierda a derecha) */
.stars-big {
  opacity: 0.9;
  background-image:
    radial-gradient(5px 5px at -100px 90px, rgba(159, 6, 146, 0.9) 50%, transparent 51%),
    radial-gradient(4.5px 4.5px at 260px 210px, rgb(88, 29, 89) 50%, transparent 51%);
  animation: moveHorizontal 30s linear infinite;
}

/* Animaciones */

/* ↗ Arriba a la derecha */
@keyframes moveDiagUpRight {
  0% {
    transform: translate(10px, 30px);
  }

  100% {
    transform: translate(50px, 150px);
  }
}

/* ↙ Abajo a la izquierda */
@keyframes moveDiagDownLeft {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(80px, -80px);
  }
}

/* → Derecha */
@keyframes moveHorizontal {
  0% {
    transform: translateX(60px);
  }

  100% {
    transform: translateX(100px);
  }
}

/* =========================
      BOTONES
========================= */
.btn-dark {
  background: var(--color-text);
  color: var(--color-white);
  /* texto */
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: 0.2s ease;
  font-weight: 400;
  font-size: 16px;
}

.btn-dark:hover {
  background: var(--color-logo);
  color: var(--color-white);
  border-color: var(--brand-1);
  box-shadow: 0 18px 38px rgba(255, 38, 137, 0.35);
  border-style: solid;
  border-width: 1px;
}


.btn-white {
  background: var(--color-white);
  color: var(--ink);
  /* texto */
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: 0.2s ease;
  font-weight: 400;
  font-size: 16px;
  gap: 8px;
}

.btn-white:hover {
  background: var(--color-white);
  color: var(--ink);
  border-color: var(--brand-1);
  box-shadow: 0 18px 38px rgba(255, 38, 137, 0.35);
  border-style: solid;
  border-width: 1px;
}

.btn-pink {
  background: var(--brand-1);
  color: var(--bg);
  /* texto */
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: 0.2s ease;
  font-weight: 400;
  font-size: 14px;
}

.btn-pink:hover {
  transform: translateY(-2px);
  background: linear-gradient(120deg, #ff2689, #ff5b82, #ffa3cf, #ff2689);
  box-shadow: 0 18px 38px rgba(255, 38, 137, 0.35);

  /* color texto */
}



/* BOTÓN SECUNDARIO */
.btn-funciona {
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--bc-pink);
  color: var(--bc-pink);
  font-weight: 400;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.btn-funciona:hover {
  background: rgba(255, 38, 137, 0.08);
}

.btn-compra-white {
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-rosado);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}

.btn-compra-white:hover {
  border: 1px solid var(--color-logo);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11, 18, 58, .10);
}


.btn-compra-rosado {
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-rosado);
  background: var(--brand-degradado);
  color: var(--bg);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}

.btn-compra-pink:hover {
  border: 1px solid var(--color-logo);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(154, 154, 157, 0.1);
}




/* TARJETA BASE */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 24px 22px;
  color: var(--color-text);
  transition: 0.2s ease;
  position: relative;
}

/* Hover moderno */
.card:hover {
  border-color: none;
  box-shadow: var(--color-border);
  transform: translateY(-1px);
}

.card-icon {
  width: 64px;
  height: 64px;
  background: #f5e6f3;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 24px;
}

.card-title {
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.25;
  padding-left: 4px;
  text-align: left;
}

.card-text p {
  line-height: 1.6;
  color: var(--color-text);
  max-width: 340px;
  text-align: left;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}


/* BADGE ARRIBA IZQUIERDA */
.badge-top {
  position: absolute;
  top: 14px;
  left: 18px;

  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;

  background: #ffe4f3;
  color: var(--color-logo);
  border-radius: 999px;
  border: 1px solid #d5d7da;
}

/* =========================
   2. RESET / BASE
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: "roboto", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}


/* =========================
   3. TIPOGRAFÍA SAAS MODERNO
========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "roboto", system-ui, sans-serif;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
}

/* H1 – título principal / encabezado */
h1,
.heading-hero {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: 16px;
}

/* Fuerza la visibilidad de los encabezados */


/* Ajuste para H2 */
h2 {
  font-size: 26px;
  font-weight: 300;
  /* Cámbialo de 300 a 600 para que tenga peso visual */
  line-height: 1.9;
  margin-bottom: 20px;
  
  
}

/* Ajuste para H3 (Títulos de tarjetas) */
h3 {
  font-size: 20px;
  font-weight: 300;
  /* Un peso de 340 es casi invisible en algunas pantallas */
  
}

/* Párrafos */
p {
  font-size: 19px;
  font-weight: 390;
  color: var(--bc-muted);
  margin: 0 0 0.9em;
}

/* Texto pequeño */
small,
.text-small {
  font-size: 13px;
  color: rgba(11, 18, 58, 0.6);
}



/* Eyebrow / mini título encima de H1 */
.eyebrow {
  display: inline-block;
  margin-top: auto;
  margin-bottom: 30px;
  /* se ajusta al texto */
  padding: 7px 22px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* lo centra */
}

.heading-hero {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: 16px;
}


/* Texto atenuado */
.text-muted {
  color: rgba(11, 18, 58, 0.6);
}

/* Texto destacado en rosa */
.text-destacado {
  color: var(--color-logo);
  font-weight: 500;
}

/* Links inline estilo SaaS */
.link-inline {
  color: var(--color-logo);
  font-weight: 300;
  text-decoration: underline;
}

.link-inline:hover {
  animation: pulse 1s infinite;
  text-decoration: underline;
}

/* Badge / chip */
.badge {
  display: inline-flex;
  align-items: left;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: #ffe4f2;
  color: var(--color-logo);
}



/* =========================
   HEADER (sticky real + container)
========================= */
/* Evita salto cuando el header se inyecta por fetch */
#header-placeholder {
  min-height: 88px; /* ajusta al alto real de tu header desktop */
}

@media (max-width: 900px) {
  #header-placeholder {
    min-height: 76px; /* ajusta al alto real en móvil */
  }
}

main, .hero-section {
  margin-top: 0;
}


.main-header{
  padding: 20px 0px;
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: var(--color-bg);
}

/* inner para max-width (NO el header) */
.header-inner{
  max-width: 1300px;
  margin: 0 auto;
  padding: 12px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Logo */
.logo-container{
  display: flex;
  align-items: center;
}

.logo{
  height: 32px;
  width: auto;
  display: block;
}

/* =========================
   HAMBURGER
========================= */

.hamburger-menu{
  display: none; /* ✅ desktop: oculto */
  width: 40px;
  height: 40px;
  border: 1px solid rgba(11,18,58,.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;

  flex: 0 0 auto;
}

.hamburger-menu span{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text);
}

/* =========================
   NAV OVERLAY (DESKTOP BASE)
========================= */

.nav-overlay{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex: 1;
}

/* Logo overlay (solo móvil) */
.overlay-logo{
  display: none;
  height: 28px;
  width: auto;
}

/* Botón cerrar (solo móvil) */
.overlay-close{
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(213,215,218,.8);
  background: #fff;
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;
}

/* =========================
   NAV PRINCIPAL
========================= */

.main-nav > ul{
  list-style: none;
  display: flex;
  gap: 35px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-nav a,
.main-nav .nav-dropdown-btn{
  font-size: 16px;
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  transition: background-color .25s ease, color .25s ease;
  text-decoration: none;
}

.main-nav .nav-dropdown-btn{
  border: 0;
  cursor: pointer;
  font: inherit;
}

.main-nav a:hover,
.main-nav .nav-dropdown-btn:hover{
  color: var(--color-black);
  background-color: #f7f7f7;
}

/* =========================
   DROPDOWN (desktop)
========================= */

.nav-dropdown{ position: relative; }

.nav-dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 240px;

  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px;

  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 4px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  transition:
    opacity 140ms ease,
    transform 160ms ease,
    visibility 0ms linear 160ms;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 140ms ease,
    transform 160ms ease,
    visibility 0ms;
}

.arrow{
width: 6px;
height: 6px;
color: var(--color-text);
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
  margin-left: 6px;
  margin-top: -2px;
  opacity: .7;
}

.nav-dropdown.open .arrow{
  transform: rotate(-135deg);
}

/* =========================
   DROPDOWN RICH (Solutions)
========================= */

.nav-dropdown-menu.nav-dropdown-rich{
  width: 440px; /* desktop */
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.nav-dropdown-menu.nav-dropdown-rich li{
  list-style: none;
}


.dropdown-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
  color: inherit;
}

.dropdown-item:hover{
  background: #f7f7f7;
}

/* ✅ ICONO alineado */
.dropdown-item i{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
  font-size: 16px;
  margin-top: 2px;
  margin-right: 12px;
}

.dropdown-text{
  display: flex;
  flex-direction: column;

  gap: 4px;
  text-align: left;

}

.dropdown-title{
  font-size: 15px;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.2;
}

.dropdown-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.4;
}

/* =========================
   ACCIONES
========================= */

.header-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-btn{
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px 22px;
  border: 1px solid var(--color-border);
  gap: 4px;
  color: var(--color-text);
  text-decoration: none;
  background: #fff;
}

.login-btn:hover{
  border-color: var(--color-text);
}

.btn-signup{
  font-size: 16px;
  color: var(--color-bg);
  border-radius: 8px;
  padding: 6px 22px;
  text-decoration: none;
  background: linear-gradient(135deg,
    #ff5b82 15%,
    #ff4da3 35%,
    #f7bcd9 65%,
    #ff2689 100%);
  background-size: 300% 300%;
  animation: moverColor 4s ease infinite;
}

@keyframes moverColor{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* =========================
   IDIOMA (fix right)
========================= */

.lang-dropdown{ position: relative; }

.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
}

.lang-dropdown-menu{
  position: absolute;
  right:-10px; /* ✅ antes estaba "10" sin px */
  top: 110%;
  min-width: 100px;
  background: var(--color-bg);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  list-style: none;
  padding: 8px 0;
  display: none;
  z-index: 900;
  margin: 0;
}

.lang-dropdown-menu li a{
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.lang-dropdown-menu li a:hover{
  background: rgba(239,239,239,.6);
}

.lang-dropdown.open .lang-dropdown-menu{
  display: block;
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */

@media (max-width: 900px){

  /* ✅ mostrar hamburger */
  .hamburger-menu{ display: flex; }

  /* ✅ overlay cerrado NO debe tapar clicks */
  .nav-overlay{
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding: 18px 20px 24px;
    transform: translateX(100%);
    transition: transform .25s ease-out;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    pointer-events: none;  /* ✅ clave */
    visibility: hidden;    /* ✅ clave */
  }

  .nav-overlay.open{
    transform: translateX(0);
    pointer-events: auto;  /* ✅ clave */
    visibility: visible;   /* ✅ clave */
  }

  .overlay-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .overlay-logo{
    display: block;
    margin-top: 54px;
    margin-bottom: 18px;
  }

  .main-nav{
    width: 100%;
  }

  .main-nav > ul{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px 0;
  }

  .main-nav a,
  .main-nav .nav-dropdown-btn{
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    justify-content: space-between;
    font-size: 18px;
  }

  /* ✅ DROPDOWN Solutions en mobile (alineado + dentro del flujo) */
  .nav-dropdown-menu.nav-dropdown-rich{
    position: static;
    width: 100%;
    margin-top: 6px;

    box-shadow: none;
    border: 1px solid rgba(11,18,58,.10);
    border-radius: 14px;
    padding: 8px;

    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;

    display: none; /* control por .open */
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
  }

  .dropdown-item{
    width: 100%;
    padding: 12px;
    gap: 10px;
  }

  .dropdown-item i{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 15px;
    margin-top: 1px;
  }

  .header-actions{
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .btn-signup,
  .login-btn,
  .lang-switch{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================
   DESKTOP
========================= */
@media (min-width: 901px){
  .hamburger-menu{ display: none; }
}






/* =========================
   9. MAIN Y FOOTER BÁSICOS
========================= */
main {
  padding: 0 20px 40px;
  max-width: 1300px;
  margin: 0 auto;

}

footer {
  padding: 16px 20px;
  text-align: left;

}





.encabezado-principal-pill {
  align-items: center;
}


.imagen-dashboard {
  position: absolute;
  inset: 8% 8% auto 8%;
  height: 70%;
  border-radius: 40px;
  opacity: 0.5;
  filter: blur(10px);
  z-index: 0;
}

.imagen-tarjeta {
  position: relative;
  margin-top: 40px;
  z-index: 1;
  border-radius: 16px;
  background: var(--color-card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  margin-bottom: 80px;
}

.imagen-tarjeta img {
  width: 100%;
  display: block;
}






/* =========================
  EYEBROW,TITULO, SUBTITULO
========================= */





.seccion-area {
  padding: 60px 20px 80px;
  background: linear-gradient(180deg,
      #ffffff 0%,
      #fdf5fa 40%,
      #ffffff 100%);
}

.seccion {
  max-width: 1300px;

}

.seccion-inner {

  max-width: 1300px;
  margin: 20px auto;

  text-align: center;
}


.seccion-titulo {

  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text);
  margin-top: 40px;
  margin-bottom: 26px;
}

/* Subtítulo */
.seccion-subtitulo {
  max-width: 1000px;
  margin: 0 auto 50px;
  font-size: 20px;
  color: var(--bc-muted);
 
  

}

.card {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #ffffff;
  transition: all .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255, 38, 137, 0.18);
  border-color: var(--color-logo);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 38, 137, 0.10);
  border: 1px solid rgba(255, 38, 137, 0.18);
  flex: 0 0 auto;
}

.card-icon i {
  font-size: 28px;
  color: var(--color-logo);
  /* color de tu marca */
}

.card-text {
  color: var(--ink);
}




/* RESPONSIVE — AUTOMÁTICO */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.seccion-tarjetas {
  margin-bottom: 20px;
}



/* ===== Bancos (carrusel) ===== */
.bank-logos {
  background: var(--color-bg);
  text-align: center;
}

.bank-logos .seccion-bank-logos {
  max-width: 1300px;
  margin-top: 10px;
  margin-bottom: 10px;

  text-align: center;
}

.bank-logos .seccion-subtitulo {
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
}

.bank-logos__note {
  margin-top: 10px;
  margin-bottom: 10px;
}

.bank-logos__wrap {
  margin-top: 8px;

  padding: 18px 14px;
  overflow: hidden;
  position: relative;
}

.logo-row {
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
}

.logo-track {
  display: flex;
  gap: 18px;
  align-items: center;
  width: max-content;
  will-change: transform;
}

.logo-slide {
  width: 150px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(11, 18, 58, .10);
}

.logo-slide img {
  max-height: 84px;
  max-width: 120px;
  width: auto;
  height: auto;
  opacity: .92;
}

@keyframes trackLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-40%);
  }
}

.track-left {
  animation: trackLeft 26s linear infinite;
}

.bank-logos__wrap:before,
.bank-logos__wrap:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  pointer-events: none;
  z-index: 2;
}

.bank-logos__wrap:before {
  left: 0;
  background: linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0));
}

.bank-logos__wrap:after {
  right: 0;
  background: linear-gradient(to left, var(--surface), rgba(255, 255, 255, 0));
}

.bank-logos__note {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(11, 18, 58, .62);
}
















/* ============================
   FAQ SECTION (FIXED)
============================ */

/* Wrapper de la sección: mismo ancho que tus otras secciones */
.faq-section {
  max-width: 1300px;
  /* ✅ usa el mismo ancho global */
  margin: 0 auto;
  padding: 90px 20px;
  /* ✅ padding lateral para mobile */
  display: flex;
  gap: 48px;
  align-items: flex-start;
  /* ✅ alinea arriba (no "left") */
}

/* Columna izquierda */
.faq-left {
  flex: 1;
  max-width: 520px;
  /* ✅ controla el ancho del texto */
}

/* Eyebrow (usa la clase que tienes en el HTML: .eyebrow) */
.faq-left .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Título y descripción */
.faq-title {
  margin: 0 0 12px 0;
  line-height: 1.05;
}

.faq-subtitle {
  max-width: 420px;
  margin: 0 0 28px 0;
}

/* Botón (ya tienes btn-dark, esto solo asegura tamaño estable) */
.faq-left .btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Columna derecha (acordeón) */
.faq-accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cards del acordeón */
.faq-item {
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid rgba(213, 215, 218, 0.9);
  overflow: hidden;
}

/* Botón pregunta */
.faq-question {
  width: 100%;
  padding: 20px 22px;
  border: none;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* ✅ centra título y + */
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

/* Evita márgenes raros en el h3 */
.faq-question h3 {
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);

  margin: 0;

}

/* Toggle + / - */
.faq-question .toggle {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex: 0 0 auto;
}

.faq-item .faq-question .toggle::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
}

.faq-item.active .faq-question .toggle::before {
  content: "−";
}

/* Respuesta */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.faq-item.active .faq-answer {
  max-height: 240px;
  /* ✅ sube si tu texto es más largo */
  padding: 0 22px 18px 22px;
}

.faq-answer p {
  margin: 10px 0 0 0;
  color: rgba(11, 18, 58, 0.75);
  font-size: 17px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 900px) {
  .faq-section {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  .faq-left {
    max-width: 100%;
  }
}








/* -------- Clientes Reviews-------- */




.bc-reviews {
  max-width: 1300px;
  margin: 0 auto;
  padding: 60px 18px;
  background: var(--color-bg);
  overflow: hidden;
}

.bc-reviews__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.bc-reviews__stage {
  margin-top: 18px;
  position: relative;
  padding: 10px 0 0;
}

/* track en 3D */
.bc-reviews__track {
  position: relative;
  height: 420px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

/* Cards base */
.bc-review {
  position: absolute;
  width: min(420px, 92%);
  max-width: 420px;
  background: var(--surface);
  border: 1px solid rgba(11, 18, 58, .12);
  border-radius: 18px;

  padding: 20px 20px;
  text-align: center;
  opacity: .65;
  transform-origin: center;
  transition:
    transform 600ms cubic-bezier(.2, .8, .2, 1),
    opacity 600ms cubic-bezier(.2, .8, .2, 1),
    filter 600ms cubic-bezier(.2, .8, .2, 1);
  filter: blur(.2px);
}

/* Layout tipo screenshot */
.bc-review--left {
  transform: translateX(-420px) rotate(-10deg) scale(.95);
}

.bc-review--right {
  transform: translateX(420px) rotate(10deg) scale(.95);
}

.bc-review--active {
  transform: translateX(0) rotate(0deg) scale(1);
  opacity: 1;
  filter: none;
  z-index: 2;
  border-color: var(--border);
}

/* Avatar */
.bc-review__avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  margin: 0 auto 10px;
  border: 1px solid var(--border);
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  color: rgba(11, 18, 58, .75);
}

.bc-review__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text */
.bc-review__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.bc-review__role {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(11, 18, 58, .62);
  font-weight: 300;
}

.bc-review__rating {
  margin: 14px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bc-stars {
  display: flex;
  gap: 4px;
  color: #f6b01e;
  /* estrellas estilo screenshot */
  font-size: 14px;
}

.bc-score {
  font-size: 14px;
  color: rgba(11, 18, 58, .70);
  font-weight: 400;
}

.bc-review__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(11, 18, 58, .82);
  font-weight: 300;
  padding: 0 6px;
}


/* Dots */
.bc-reviews__dots {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.bc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 58, .12);
  background: rgba(11, 18, 58, .12);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.bc-dot.is-active {
  text-decoration: none;

}

.bc-dot:hover {
  background-color: #010815;
}

.bc-reviews__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* Responsive: reduce separación lateral */
@media (max-width: 980px) {
  .bc-reviews__track {
    height: 440px;
  }

  .bc-review--left {
    transform: translateX(-260px) rotate(-10deg) scale(.95);
  }

  .bc-review--right {
    transform: translateX(260px) rotate(10deg) scale(.95);
  }
}

@media (max-width: 560px) {
  .bc-reviews__track {
    height: 480px;
  }

  .bc-review--left {
    transform: translateX(-140px) rotate(-9deg) scale(.93);
  }

  .bc-review--right {
    transform: translateX(140px) rotate(9deg) scale(.93);
  }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .bc-review {
    transition: none;
  }
}

@media (max-width: 560px) {
  .bc-reviews {
    padding: 44px 14px;
  }

  .bc-reviews__track {
    height: auto;
    /* ✅ que no fuerce altura rara */
    min-height: 340px;
    padding-bottom: 10px;
  }

  /* Cards grandes y legibles */
  .bc-review {
    width: 92%;
    max-width: 420px;
    padding: 18px 16px;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) scale(.98);
    /* base */
    filter: none;
  }

  /* Solo la activa visible */
  .bc-review--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }

  /* Oculta laterales en móvil (se ven mal) */
  .bc-review--left,
  .bc-review--right {
    opacity: 0;
    transform: translateX(0) scale(.98);
  }

  /* Ajustes tipografía para que no se rompa feo */
  .bc-review__quote {
    font-size: 15px;
    line-height: 1.6;
    padding: 0 2px;
  }

  .bc-review__name {
    font-size: 17px;
  }

  .bc-review__role {
    font-size: 12.5px;
  }

  .bc-reviews__dots {
    margin-top: 14px;
    gap: 12px;
  }
}







/* =========================
   FOOTER STYLES
========================= */
/* =========================
   FOOTER
========================= */
.site-footer {
  padding: 80px 20px 34px;
  color: #fff;
  background: linear-gradient(290deg, #220d24, #06091e, #37123b, #05021c, #030722);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  overflow: hidden;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* IMPORTANTE: limita estilos SOLO al footer */
.site-footer p,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: rgba(255, 255, 255, .72);
}

.footer-container {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 44px;
  align-items: start;
}

/* Brand */
.footer-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.footer-desc {
  margin: 14px 0 18px;
  max-width: 320px;
  line-height: 1.6;
  font-size: 14px;
}

/* Social */
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #fff;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.social-icon:hover {
  background: var(--color-logo);
  border-color: rgba(206, 12, 99, 0.35);
  transform: translateY(-2px);
}

/* Column */
.footer-title {
  color: #fff;
  font-weight: 500;
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, .70);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
  display: inline-flex;
}

.footer-links a:hover {
  color: #ff2689;
  transform: translateX(3px);
}

/* Newsletter Section */
.footer-news {
  display: flex;
  flex-direction: column;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  /* Cambiado a columna para que el checkbox vaya abajo */
  gap: 12px;
}

.input-group {
  display: flex;
  gap: 8px;
}

.newsletter-input {
  flex: 1;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
}

.newsletter-input:focus {
  border-color: #ff2689;
  background: rgba(255, 255, 255, 0.1);
}

.btn-subscribe {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: #ff2689;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.btn-subscribe:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.footer-note {
  font-size: 14px;
}

/* Checkbox de Términos */
.terms-check {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  margin-top: 8px;
}

.terms-check input {
  display: none;
}

.checkmark {
  min-width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.terms-check input:checked+.checkmark {
  background: #ff2689;
  border-color: #ff2689;
}

.terms-check input:checked+.checkmark::after {
  content: "✓";
  color: white;
  font-size: 10px;
}

.terms-text a {
  text-decoration: underline;
}

.terms-text a:hover {
  color: #ff2689;
}

/* Mensaje de éxito (Corregido) */
.newsletter-msg {
  display: none;
  /* Oculto por defecto */
  margin-top: 15px;
  font-size: 13px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.legal-links {
  display: flex;
  gap: 20px;
}

.legal-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.legal-links a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand,
  .footer-news {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-news {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}




.card-glow {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: #ffffff;
  color: #fff;
  overflow: hidden;
}

/* Mancha/glow detrás */
.card-glow::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top, #ff4da3 0%, transparent 80%);
  opacity: 0.6;
  z-index: 0;
}

/* Contenido por encima del glow */
.card-glow>* {
  position: relative;
  z-index: 1;
}





/* ===================================
            PAGINA CONTACTO 
======================================*/
.seccion-inner {
  margin-top: 80px;




}

/* CONTENEDOR GENERAL */
/* ====== LAYOUT GENERAL CONTACTO ====== */
.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-left {
  flex: 1;
}

.contact-right {
  flex: 1;
}

/* Títulos y textos */
.contact-left .eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.contact-left h1 {

  color: var(--ink);
  margin-bottom: 10px;
}

.contact-left p {
  max-width: 480px;
  color: var(--color-text);
  line-height: 1.6;
}

/* ====== FORM BOX CON BORDE DEGRADADO ====== */
.form-box {
  padding: 2px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border);
  /* grosor del borde degradado */
  border-radius: 18px;
}

.form-box-inner {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px 26px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

/* Texto dentro del formulario */
.form-title {
  margin: 0 0 4px;

  color: var(--ink);
}

.form-subtitle {
  margin: 0 0 20px;

  color: #6b7280;
}

/* ====== CAMPOS DEL FORMULARIO ====== */
.contact-form .form-group {
  margin-bottom: 16px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 200;


  outline: none;
  transition: border 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.contact-form textarea {
  height: 130px;
  resize: none;
}

/* Focus normal */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff2689;
  box-shadow: 0 0 0 2px rgba(255, 38, 137, 0.18);
}

/* Campo con error */
.contact-form input.has-error,
.contact-form textarea.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16);
  background-color: #fef2f2;
}

/* Mensaje de error debajo de cada campo */
.error-message {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b91c1c;
  min-height: 15px;
}

/* Mensaje general del formulario */
.form-message {
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.4;
  display: none;
  padding: 8px 10px;
  border-radius: 8px;
}

.form-message.success {
  display: block;
  background-color: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.form-message.error {
  display: block;
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Botón */
.btn-submit {
  width: 100%;
  padding: 14px;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(290deg, #0b123a, #0b0f31, #666567, #0d054d, #030722);
  background-size: 300% 300%;

  animation: moverColor 8s ease infinite;
}


@keyframes moverColor {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.btn-submit:hover {

  transition: all .25s ease;
  transform: translateY(-2px);
  box-shadow: 10px 12px 24px rgba(0, 0, 0, 0.06);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px) {
  .contact {
    flex-direction: column;
    gap: 30px;
    padding: 60px 16px;
  }

  .contact-left,
  .contact-right {
    flex: 1;
    width: 100%;

  }
}








/* SECTION WRAP */
.bc-security {
  padding: 80px 20px;
  background: #ffffff;
  color: var(--ink);
}



.bc-security__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 46px;
  align-items: start;
}

/* LEFT CARDS */
.bc-security__left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sec-card {
  display: flex;
  gap: 16px;
  padding: 18px 18px;
  border-radius: 18px;
  background: var(--bc-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 50px rgba(251, 226, 247, 0.35);
  backdrop-filter: blur(10px);
}

.sec-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background:
    --brand-gradient(circle at 30% 30%, rgba(255, 38, 137, 0.35), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 38, 137, 0.22);
  color: var(--bc-pink-3);
  flex: 0 0 auto;
}

.sec-card__icon i {
  font-size: 18px;
}

.sec-card__body h3 {
  margin: 0 0 6px;
  font-size: 18px;


  letter-spacing: -0.02em;
  color: var(--bc-text);
}

.sec-card__body p {
  margin: 0;
 
  line-height: 1.5;
 
  max-width: 520px;
}

/* RIGHT PANEL */
.sec-panel {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 38, 137, 0.14);
  box-shadow:
    0 28px 80px rgba(251, 202, 245, 0.55),
    0 0 0 1px rgba(251, 237, 248, 0.06) inset;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

/* subtle glow inside */
.sec-panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 25%, rgba(255, 38, 137, 0.18), transparent 55%);
  pointer-events: none;
}

.sec-panel__head {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}

.sec-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-panel__title i {
  color: var(--bc-pink-3);
}

.sec-panel__title h3 {
  margin: 0;
  letter-spacing: -0.02em;
}

.sec-panel__block {
  position: relative;
  z-index: 1;
  padding: 12px 0 6px;
}

.sec-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sec-panel__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 14px;
}

.mini-ic {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--bc-pink-3);
}

.badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--color-text)
}

.badge--pink {
  background: rgba(255, 38, 137, 0.16);
  border-color: rgba(255, 38, 137, 0.28);
  color: rgba(255, 220, 238, 0.95);
}

.badge--soft {
  background: rgba(255, 243, 249, 0.12);
  border-color: rgba(255, 245, 250, 0.22);
  color: rgba(255, 240, 248, 0.92);
}

.bars {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(120, 140, 175, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(243, 243, 243, 0.25);
}

.bar.w-92 {
  width: 92%;
}

.bar.w-78 {
  width: 78%;
}

.bar.w-56 {
  width: 56%;
}

.bar.w-88 {
  width: 88%;
}

.bar.w-64 {
  width: 64%;
}

.bar.w-70 {
  width: 70%;
}

.sec-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 16px 0;
  position: relative;
  z-index: 1;
}

.panel-box {
  height: 90px;
  border-radius: 16px;
  background: rgba(220, 230, 247, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .bc-security__inner {
    grid-template-columns: 1fr;
  }
}




/* COMO FUNCIONA */

/* =========================
   TIMELINE (COMPACTA)
========================= */

.bc-timeline {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bc-bg);
  padding: 48px 32px;
  /* ⬅ más pequeño */
  color: var(--bc-text);
}

.bc-timeline-wrap {
  margin: 0 auto;
}

/* Head (si lo usas) */
.bc-timeline-head {
  text-align: left;
  margin-bottom: 28px;
  /* ⬅ menos espacio */
}

.bc-timeline-head h2 {
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.bc-timeline-head p {
  margin: 0;
  max-width: 720px;
  color: rgba(11, 18, 58, .72);
  line-height: 1.55;
  font-size: 15px;
}

/* =========================
   STEP LAYOUT
========================= */

.bc-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  /* ⬅ más angosto */
  gap: 14px;
  /* ⬅ menos gap */
  padding: 12px 0;
  /* ⬅ menos alto */
}

/* Línea vertical */
.bc-step::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
      rgba(255, 38, 137, 0),
      rgba(255, 38, 137, .28),
      rgba(11, 18, 58, .08),
      rgba(255, 38, 137, 0));
}

.bc-step:last-child::before {
  bottom: 22px;
}

.bc-step-dot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  /* ⬅ menos */
}

.bc-step-num {
  width: 36px;
  /* ⬅ más pequeño */
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-pink3));
  box-shadow: 0 10px 22px rgba(255, 38, 137, .18);
  border: 1px solid rgba(255, 38, 137, .18);
}

/* =========================
   CARD
========================= */

.bc-step-card {
  background: var(--bc-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  /* ⬅ un poco menor */
  box-shadow: var(--bc-shadow);
  overflow: hidden;
}

.bc-step-top {
  display: flex;
  gap: 12px;
  padding: 14px 16px 8px;
  /* ⬅ menos padding */
  align-items: flex-start;
}

.bc-step-icon {
  width: 38px;
  /* ⬅ más pequeño */
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 38, 137, .10);
  border: 1px solid rgba(255, 38, 137, .18);
  color: var(--bc-pink);
  flex: 0 0 auto;
  font-size: 16px;
}

.bc-step-title h3 {
  text-align: left;

  margin: 0 0 4px;
  font-size: 16px;
  /* ⬅ más compacto */
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bc-step-title p {
  margin: 0;
  font-size: 14px;
  /* ⬅ más compacto */
  color: var(--bc-muted);
  line-height: 1.45;
}

/* Media */
.bc-step-media {
  padding: 12px 16px;
  /* ⬅ menos padding */
  border-top: 1px solid rgba(213, 215, 218, .7);
  background: linear-gradient(180deg, #fff, #fbfbfe);
}

/* =========================
   PASO 1 (UPLOAD)
========================= */

.bc-media-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1.5px dashed rgba(255, 38, 137, .40);
  background: rgba(255, 38, 137, .05);
}

.bc-media-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(11, 18, 58, .10);
  color: var(--bc-pink);
  box-shadow: 0 8px 18px rgba(11, 18, 58, .06);
}

.bc-media-text {
  text-align: left;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bc-media-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.bc-media-text span {
  color: var(--bc-muted);
  font-size: 12px;
}

.bc-media-btn {
  margin-left: auto;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-pink3));
  box-shadow: 0 10px 18px rgba(255, 38, 137, .14);
}

.bc-media-badges {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pills */
.bc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 9px;
  /* ⬅ más pequeño */
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bc-soft);
  border: 1px solid var(--bc-border);
  color: var(--ink);
}

/* =========================
   PASO 2 (CHART)
========================= */

.bc-chart {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(213, 215, 218, .7);
  padding: 12px;
}

.bc-chart-head {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.bc-chip {
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(213, 215, 218, .7);
  background: var(--bc-soft);
  color: rgba(11, 18, 58, .75);
}

.bc-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bc-bar {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  /* ⬅ compacto + precio al final */
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(11, 18, 58, .85);
}

.bc-bar i {
  height: 10px;
  /* ⬅ barra más fina */
  border-radius: 999px;
  background: var(--color-logo);
  display: block;
  box-shadow: 0 8px 16px rgba(255, 60, 38, .12);
}

.bc-bar-amount {
  text-align: right;
  font-weight: 400;
  color: var(--color-text);
  font-size: 13px;
  white-space: nowrap;
}

/* =========================
   PASO 3 (TABLA MINI)
========================= */

.bc-table {
  border-radius: 16px;
  background: vard;
  border: 1px solid rgba(213, 215, 218, .7);
  overflow: hidden;
}

.bc-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 110px 160px 180px 64px;
  /* ⬅ versión app */
  gap: 10px;
  padding: 10px 12px;
  /* ⬅ menos alto */
  border-top: 1px solid rgba(213, 215, 218, .7);
  font-size: 12.5px;
  align-items: center;
}

.bc-row-head {
  background: rgba(242, 241, 241, 0.7);
  border-top: 0;
  font-weight: 700;
  color: rgba(11, 18, 58, .75);
}

.bc-muted-cell {
  color: rgba(11, 18, 58, .55);
}

.bc-money {
  font-weight: 600;
  color: rgba(11, 18, 58, .85);
}

.bc-dd {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--bc-border);
  color: rgba(11, 18, 58, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-actions {
  display: flex;
  justify-content: flex-end;
}

.bc-actions-col {
  text-align: right;
}

.bc-icon-btn {
  border: 1px solid rgba(213, 215, 218, .8);
  background: #fff;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s ease;
}

.bc-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 18px rgba(11, 18, 58, .08);
  border-color: rgba(255, 38, 137, .35);
}

.bc-row-actions {
  padding: 10px 12px 12px;
  display: flex;
  justify-content: flex-end;
  background: #fff;
  border-top: 1px solid rgba(213, 215, 218, .7);
}

/* =========================
   PASO 4 (EXPORT)
========================= */

.bc-export {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bc-export-card {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 12px;
  /* ⬅ más pequeño */
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 18px rgba(11, 18, 58, .06);
}

.bc-export-card i {
  font-size: 20px;
  color: var(--bc-pink);
}

.bc-export-card strong {
  font-size: 14px;
  font-weight: 600;
}

.bc-export-card span {
  color: var(--bc-muted);
  font-size: 12px;
  line-height: 1.4;
}

.bc-export-card button {
  margin-top: 6px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-pink3));
}

.bc-export-card button.is-soft {
  background: rgba(11, 18, 58, .08);
  color: var(--bc-navy);
  border: 1px solid rgba(11, 18, 58, .12);
}

/* =========================
   RESPONSIVE
========================= */


/* =========================
   MOBILE FIXES (Timeline + Pills)
   Pega al final del CSS
========================= */
@media (max-width: 600px) {

  /* Más aire en el timeline en móvil */
  .bc-timeline {
    padding: 28px 14px;
  }

  .bc-step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }

  .bc-step::before {
    left: 21px;
  }

  .bc-step-num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .bc-step-card {
    border-radius: 16px;
  }

  .bc-step-top {
    padding: 14px 14px 10px;
    gap: 10px;
  }

  .bc-step-media {
    padding: 12px 14px;
  }

  /* ===== PASO 1: Upload hero en vertical ===== */
  .bc-media-hero {
    display: grid;
    grid-template-columns: 1fr;
    /* ✅ en columna */
    gap: 10px;
    padding: 12px;
    align-items: start;
  }

  .bc-media-icon {
    width: 42px;
    height: 42px;
  }

  .bc-media-text {
    min-width: 0;
  }

  /* Evita que el texto se parta raro */
  .bc-media-text strong {
    font-size: 14px;
    line-height: 1.25;
  }

  .bc-media-text span {
    font-size: 12.5px;
    line-height: 1.45;
    word-break: normal;
    /* ✅ importante */
    overflow-wrap: anywhere;
    /* ✅ corta solo cuando toca */
  }

  /* Botón full width */
  .bc-media-btn {
    width: 100%;
    justify-self: stretch;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* ===== Pills: se ven mejor en grid ===== */
  .bc-media-badges {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* ✅ 2 columnas */
    gap: 10px;
  }

  .bc-pill {
    margin-top: 0;
    /* tú tenías margin-top:16px en .bc-pill */
    width: 100%;
    justify-content: center;
    /* ✅ centrado */
    text-align: center;
    padding: 9px 10px;
    /* más “pill-like” */
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    /* no se parte feo */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pantallas muy pequeñas: 1 columna */
  @media (max-width: 360px) {
    .bc-media-badges {
      grid-template-columns: 1fr;
    }

    .bc-pill {
      white-space: normal;
    }
  }

  /* ===== PASO 2: chart compacto ===== */
  .bc-chart {
    padding: 12px;
    border-radius: 14px;
  }

  .bc-chart-head {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .bc-bar {
    grid-template-columns: 1fr 1.2fr auto;
    /* label | bar | $ */
    gap: 8px;
  }

  .bc-bar-amount {
    font-size: 12.5px;
  }

  /* ===== PASO 3: tabla -> cards en móvil ===== */
  .bc-row-head {
    display: none;
  }

  /* oculta header */

  .bc-row.bc-row-app {
    grid-template-columns: 1fr;
    /* apila */
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid rgba(213, 215, 218, .7);
  }

  /* Cada "celda" se ve como fila label/value (sin tocar el HTML) */
  .bc-row.bc-row-app>span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  /* Ajuste para dropdowns y botón acción */
  .bc-dd {
    width: 100%;
  }

  .bc-actions {
    justify-content: flex-end;
  }

  /* Si quieres: mini etiqueta visual con pseudo-labels (opcional)
     NOTA: esto requiere que envuelvas cada campo con data-label o HTML extra.
     Como ahora no lo tienes, lo dejamos sin pseudo-labels.
  */
}




/* SECTION BANNER*/



.bc-saas-cta {
  padding: 54px 18px;
  background: #fff;
}

/* BACKGROUND (grid + glow SaaS) */
.bc-saas-bg {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--bc-border);
  background: #fff;
}

/* grid suave */
.bc-saas-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 18, 58, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 58, .05) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .35;
  pointer-events: none;
}

/* glow */
.bc-saas-bg::after {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 38, 137, .18) 0%, transparent 50%),
    radial-gradient(circle at 82% 65%, rgba(255, 96, 173, .14) 0%, transparent 55%);
  filter: blur(10px);
  pointer-events: none;
}

/* CARD */
.bc-saas-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;

  padding: 44px 44px;
  border-radius: 30px;

  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);

  box-shadow:
    0 26px 70px var(--bc-shadow1),
    0 10px 24px var(--bc-shadow2);
}

/* LEFT */
.bc-saas-left h2 {
  margin: 12px 0 12px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.bc-saas-left p {
  margin: 0;
  max-width: 640px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

/* BADGE */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 38, 137, .22);
  background: rgba(255, 38, 137, .07);
  color: rgba(11, 18, 58, .75);
  font-size: 13px;
}

.bc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bc-pink-), var(--bc-pink3));
  box-shadow: 0 0 0 6px rgba(255, 38, 137, .12);
}

/* BUTTONS */
.bc-saas-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.bc-btn {
  margin-top: 14px;
  align-items: left;

}



/* POINTS */
.bc-saas-points {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  color: rgba(11, 18, 58, .65);
  font-size: 13px;
}

.bc-saas-points i {
  color: var(--bc-pink);
  margin-right: 6px;
}

/* RIGHT PANEL */
.bc-saas-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-mini-panel {
  width: 100%;
  max-width: 420px;
  border-radius: 22px;
  border: 1px solid rgba(11, 18, 58, .10);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 60px rgba(11, 18, 58, .12);
  padding: 18px;
}

.bc-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bc-mini-title {
  font-weight: 700;
  color: var(--bc-navy);
  font-size: 14px;
}


.bc-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ✅ precio al final + barra */
.bc-mini-row {
  display: grid;
  grid-template-columns: 92px 66px 1fr;
  /* label | $ | bar */
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(11, 18, 58, .78);
}

.bc-mini-label {
  font-weight: 600;
}

.bc-mini-amt {
  text-align: right;
  font-weight: 700;
  color: rgba(11, 18, 58, .82);
}

.bc-mini-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(11, 18, 58, .06);
  overflow: hidden;
  position: relative;
}

.bc-mini-bar i {
  height: 100%;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bc-pink), var(--bc-pink3));
  box-shadow: 0 10px 18px rgba(255, 38, 137, .16);
}

.bc-mini-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 18, 58, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bc-mini-note {
  font-size: 12px;
  color: rgba(11, 18, 58, .65);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-mini-note i {
  color: var(--bc-pink);
}

.bc-mini-btn {
  border: 1px solid rgba(11, 18, 58, .14);
  background: #fff;
  color: var(--bc-navy);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.bc-mini-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(11, 18, 58, .10);
}

/* FLOAT CHIPS */
.bc-float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 12px;
  font-weight: 700;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(11, 18, 58, .12);
  box-shadow: 0 16px 34px rgba(11, 18, 58, .12);
  color: rgba(11, 18, 58, .85);
}

.bc-float-chip i {
  color: var(--bc-pink);
}

.bc-chip-1 {
  top: -12px;
  left: 10px;
}

.bc-chip-2 {
  bottom: -14px;
  right: 14px;
}

/* RESPONSIVE */
/* =========================
   MOBILE: pills/points better layout
========================= */
@media (max-width: 520px) {

  /* en mobile, que el layout no se “apriete” */
  .bc-saas-card {
    padding: 22px 16px;
    gap: 18px;
  }

  /* cambia pills a grid */
  .bc-saas-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columnas */
    gap: 5px;
    margin-top: 14px;
    font-size: 13px;

  }

  /* cada pill */
  .bc-saas-points>* {
    display: flex;
    align-items: center;
    justify-content: center;
    /* centrado */
    gap: 8px;


    padding: 10px 12px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(11, 18, 58, .12);
    box-shadow: 0 10px 22px rgba(11, 18, 58, .08);

    text-align: center;
    line-height: 1.2;
  }

  .bc-saas-points i {
    margin-right: 0;
    text-align: center;
    /* quita el margen viejo */
  }

  /* primer pill ocupa toda la fila (como en tu captura) */
  .bc-saas-points>*:first-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
    /* opcional: alinear a la izquierda */
  }
}


/* RESPONSIVE */
@media (max-width: 980px) {
  .bc-saas-card {
    grid-template-columns: 1fr;
    padding: 26px 18px;
  }

  .bc-saas-left h2 {
    font-size: 32px;
  }

  .bc-mini-panel {
    max-width: 520px;
  }

  .bc-chip-1,
  .bc-chip-2 {
    display: none;
  }
}








/* =========================
   QUIÉNES LO UTILIZAN
   Usa tus variables y tu estilo SaaS
========================= */

.usuarios {
  background: var(--color-bg);
  padding-bottom: 90px;

}

.seccion__inner {
  max-width: 1300px;
  margin: 0 auto;
}


/* Grid */
.usuarios__grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  /* igual a tu card-grid */
}

/* Card (apoya tu .card) */
.usuarios__card {
  padding: 24px 30px;
  background: var(--color-card-bg);
  border: 1px solid var(--bc-border);
  border-radius: 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover moderno (más real que el box-shadow: var(--color-border);) */
.usuarios__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255, 38, 137, 0.18);
  border-color: var(--color-logo);
}

/* Header interno */
.usuarios__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

/* Icono con borde + fondo rosado suave */
.usuarios__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 38, 137, 0.10);
  border: 1px solid rgba(255, 38, 137, 0.18);
  flex: 0 0 auto;
}

.usuarios__icon i {
  font-size: 20px;
  color: var(--color-logo);
}

/* Titulos / descripción */
.usuarios__cardTitle {
  margin: 10px 0 0px 0;
  color: var(--color-text);
  font-weight: 390;
  font-size: 23px;


  display: flex;
  align-items: center;
  gap: 10px;
}


.usuarios__cardDesc {
  margin: 0;
font-size: 18px;

  color: var(--ink);
  text-align: left;
  /* 👈 fuerza alineación a la izquierda */
  line-height: 1.5;
}



/* Lista de ventajas */
.usuarios__list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 18px 0 0 0;
  display: grid;
  gap: 10px;
}

.usuarios__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
}

.usuarios__list li i {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink);
}

/* Footer (Leer más) */
.usuarios__footer {
  margin-top: auto;
  /* ✅ empuja al fondo */
  padding-top: 16px;
}

.usuarios__more {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 16px;
  text-decoration: none;
  opacity: .9;
}

.usuarios__more i {
  color: var(--color-text);
  transition: transform .18s ease;
}

.usuarios__more:hover {
  color: var(--color-logo);
  opacity: 1;
  text-decoration: groove;
}

.usuarios__more:hover i {
  color: var(--color-logo);
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 900px) {
  .usuarios__grid {
    grid-template-columns: 1fr;
  }

  .usuarios__card {
    min-height: auto;
  }
}



















.tarjetas-pricing {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:
    #fff;
  color: var(--ink);
  padding: 16px;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: auto;
}

.tarjetas-pricing2__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.bc-pricing2__title h2 {
  margin: 0;
  font-size: 50px;
  font-weight: 300;
  letter-spacing: -.4px;
}

.tarjetas-pricing2__title p {
  margin: 6px 0 0;
  color: var(--bc-mute);
  line-height: 2.5;
  max-width: 70ch;
}

/* Toggle centrado */
.tarjetas-toggle {
  position: relative;
  width: fit-content;
  margin: 30px auto;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 20px rgba(11, 18, 58, .06);
}


.tarjetas-toggle__btn {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: rgba(11, 18, 58, .85);
  white-space: nowrap;
}

.tarjetas-toggle__pill {
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  color: var(--bg);
  background: var(--brand-degradado);
  opacity: .8;
}

.tarjetas-toggle__glider {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 0;
  /* importante: el JS lo setea */
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 38, 137, .20), rgba(247, 157, 200, 0.12));
  border: 1px solid rgba(179, 152, 164, 0.28);
  box-shadow: 0 12px 28px rgba(255, 38, 137, .12);
  transition: transform .18s ease, width .18s ease;
  /* 👈 agrega width */
}


/* grid 4 */
.tarjetas-grid4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tarjetas-card2 {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--bc-border);
  background: var(--color-white);
  backdrop-filter: blur(10px);
  padding: 16px;

  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.tarjetas-card2:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255, 38, 137, 0.18);
  border-color: var(--color-logo);
}



.tarjetas-card2__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  margin-top: 20px;
}

.tarjetas-card2__plan {
  font-weight: 400;
  letter-spacing: -.2px;
  font-size: 17px;
}

.tarjetas-card2__tag {
  font-size: 10px;
  font-weight: 400;
  color: rgba(11, 18, 58, .72);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 58, .10);
  background: rgba(255, 255, 255, .65);
}

/* Price */
.tarjetas-card2__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 12px;
}

.tarjetas-cur {
  font-weight: 1000;
  color: rgba(11, 18, 58, .75);
}

.tarjetas-amt {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1px;
}

.tarjetas-unit {
  font-size: 12.5px;
  color: var(--bc-mute);
  font-weight: 400;
}

.tarjetas-card2__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.tarjetas-kpi {
  border: 1px solid rgba(11, 18, 58, .10);
  background: rgba(255, 255, 255, .65);
  border-radius: 14px;
  padding: 10px 10px;
}

.tarjetas-kpi__value {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.2px;
}

.tarjetas-kpi__label {
  font-size: 13px;
  font-weight: 300;
  color: var(--bc-mute);
}

/* valor tokens */
.tarjetas-kpi__value.tarjetas-tokens {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.2px;
}

/* label tokens */
.tarjetas-kpi__label.tarjetas-tokens-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--bc-mute);
}


.tarjetas-save {
  position: absolute;
  top: 94px;
  right: 14px;
  display: none;
  /* por defecto oculto */
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-logo);

  white-space: nowrap;
  letter-spacing: -.1px;
}

/* Buttons */

.tarjetas-card2 a{
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* -------------- */

.tarjetas-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 18px 0 0 0;
  display: grid;
  gap: 10px;
}

.tarjetas-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
}

.tarjetas-list li i {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink);
}



/* Featured */
.tarjetas-card2--featured {
  border-color: rgba(248, 226, 236, 0.32);
  box-shadow: 0 28px 90px rgba(255, 238, 245, 0.14), 0 18px 60px rgba(11, 18, 58, .10);
}

.tarjetas-card2__shine {
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(255, 38, 137, .22), transparent 65%),
    radial-gradient(500px 220px at 90% 15%, rgba(254, 107, 176, .18), transparent 65%);
  pointer-events: none;
}

.tarjetas-badge2 {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background: var(--color-logo);
  box-shadow: 0 12px 30px rgba(255, 38, 137, .22);
}

.tarjetas-mini {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--bc-mute);
  font-weight: 350;
}

.lp-hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tarjetas-bc-pill {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;

}

.pricing-note {
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 1100px) {
  .tarjetas-grid4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tarjetas-grid4 {
    grid-template-columns: 1fr;
  }
}











/* SECTION COMPRA TOKENS */
.tarjetas-token-shop {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--color-white);
  color: var(--color-text);
  padding: 34px 26px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}


.tarjetas-token-shop__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tarjetas-token-shop__head h3 {
  margin: 0;
  color: var(--bc-text);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -.4px;
}

.tarjetas-token-shop__head p {
  margin: 6px 0 0;
  color: var(--bc-mute);
  line-height: 1.8;
  max-width: 70ch;
  font-weight: 300;
}

.tarjetas-token6__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 10px 26px rgba(11, 18, 58, .06);
  color: rgba(11, 18, 58, .78);
  font-weight: 300;
  font-size: 13px;
}

.tarjetas-token6-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
  box-shadow: 0 0 0 6px rgba(255, 38, 137, .10);
}

.tarjetas-token-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* CARD */
.tarjetas-token-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  padding: 16px;
  box-shadow: 0 10px 34px rgba(11, 18, 58, .08);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  backdrop-filter: blur(10px);
}

.tarjetas-token-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bc-shadow);
  border-color: rgba(255, 38, 137, .22);
}

/* card soft pattern per-card */
.tarjetas-token-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(220px 110px at 20% 0%, rgba(255, 38, 137, .12), transparent 60%),
    radial-gradient(240px 120px at 85% 10%, rgba(254, 107, 176, .10), transparent 62%);
}

/* top */
.tarjetas-token-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* coin base */
.tarjetas-coin {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  box-shadow: 0 14px 26px rgba(11, 18, 58, .10);
  overflow: hidden;
}

/* coin "metal ring" */
.tarjetas-coin__ring {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(11, 18, 58, .08);
  opacity: .9;
}

/* coin shine */
.tarjetas-coin__shine {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 45%);
  transform: rotate(25deg);
  opacity: .7;
}

/* BC logo */
.tarjetas-coin__logo {
  position: relative;
  font-weight: 300;
  letter-spacing: -.5px;
  font-size: 10px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

/* COIN THEMES (6 different) */
.tarjetas-coin--a {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

.tarjetas-coin--b {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

.tarjetas-coin--c {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

.tarjetas-coin--d {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

.tarjetas-coin--e {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

.tarjetas-coin--f {
  background: linear-gradient(135deg, #fe6bb0, #ff2689, #fae4fc);
}

/* Meta */
.tarjetas-token-card__meta {
  flex: 1;
  min-width: 0;
}

.tarjetas-token-card__title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.2px;
}

.tarjetas-token-card__subtitle {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 300;
  color: var(--bc-mute);
}

.tarjetas-token-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .90);
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Price */
.tarjetas-token-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 18, 58, .08);
  position: relative;
}

.tarjetas-token-card__from {
  padding-left: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-1);
}

.tarjetas-token-card__amount {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1px;
}

.tarjetas-cur {
  font-size: 18px;
  font-weight: 400;
  color: rgba(11, 18, 58, .75);
  margin-right: 4px;
}

.tarjetas-per {
  font-size: 12px;
  font-weight: 300;
  color: var(--bc-mute);
  margin-left: 6px;
}




/* Featured */
.tarjetas-token-card--featured {
  border-color: rgba(255, 38, 137, .22);
  box-shadow: 0 28px 90px rgba(255, 238, 245, 0.28), 0 18px 60px rgba(11, 18, 58, .10);
}

.tarjetas-token-card__glow {
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(255, 38, 137, .22), transparent 62%),
    radial-gradient(520px 240px at 90% 10%, rgba(254, 107, 176, .16), transparent 65%);
  pointer-events: none;
}

.tarjetas-token-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: var(--bc-mute);
}

.tarjetas-token-note i {
  margin-right: 6px;
  color: var(--bc-pink);
}

.tarjetas-compra-note {
  padding: 12px;

}

/* Responsive */
@media (max-width: 980px) {
  .tarjetas-token-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tarjetas-token-grid {
    grid-template-columns: 1fr;
  }

  .tarjetas-token-shop__head h2 {
    font-size: 36px;
  }
}







/* ===============================
   SECTION STORAGE
================================ */
.storage-section {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 26px;
  background: #fff;
  color: var(--ink);
}


.storage-section_head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.storage-section__head h3 {
  margin: 0;
  color: var(--bc-text);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -.4px;
}

.storage-section_head p {
  margin: 6px 0 0;
  color: var(--bc-mute);
  line-height: 1.8;
  max-width: 70ch;
  font-weight: 300;
}

.tarjetas-token6__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 10px 26px rgba(11, 18, 58, .06);
  color: rgba(11, 18, 58, .78);
  font-weight: 300;
  font-size: 13px;
}

.storage-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* CARD */
.storage-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  padding: 16px;
  box-shadow: 0 10px 34px rgba(11, 18, 58, .08);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  backdrop-filter: blur(10px);
}

.storage-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bc-shadow);
  border-color: rgba(255, 38, 137, .22);
}

/* card soft pattern per-card */
.storage-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(220px 110px at 20% 0%, rgba(255, 38, 137, .12), transparent 60%),
    radial-gradient(240px 120px at 85% 10%, rgba(254, 107, 176, .10), transparent 62%);
}

/* top */
.storage-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.storage__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 38, 137, 0.10);
  border: 1px solid rgba(255, 38, 137, 0.18);
  flex: 0 0 auto;
}

.storage__icon i {
  font-size: 28px;
  color: var(--color-logo);
}

.storage-card__meta {
  flex: 1;
  min-width: 0;
}

.storage-card__title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.2px;
}

.storage-card__subtitle {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 300;
  color: var(--bc-mute);
}

.storage-card__pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .90);
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Price */
.storage-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 18, 58, .08);
  position: relative;
}

.storage-card__from {
  padding-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-1);
}

.storage-card__amount {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1px;
}

.storage-card__cur {
  font-size: 18px;
  font-weight: 400;
  color: rgba(11, 18, 58, .75);
  margin-right: 4px;
}

.storage-card__per {
  font-size: 14px;
  font-weight: 300;
  color: var(--bc-mute);
  margin-left: 6px;
}


/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1100px) {
  .storage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .storage-grid {
    grid-template-columns: 1fr;
  }

  .storage-heading {
    font-size: 36px;
  }
}



.seguridad {
  background: var(--color-bg);
  padding: 100px 100px;
}

.seguridad__container {
  max-width: 1300px;
  margin: 0 auto;
}



/* Layout */
.seguridad__layout {
  display: grid;
  grid-template-columns: 2.1fr 0.9fr;
  gap: 60px;
  align-items: left;
}

/* Cards */
.seguridad__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.seguridad__card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 26px 24px;
  transition: .25s ease;
}

.seguridad__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255, 38, 137, 0.18);
  border-color: var(--color-logo);
}

/* Header interno de la tarjeta */
.seguridad__cardHead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* Icono */
.seguridad__icon {
  width: 46px;
  height: 46px;
  background: #ffe4f2;
  border-radius: 12px;
  border: 1px solid rgba(255, 38, 137, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-logo);
  font-size: 20px;
  flex-shrink: 0;
}

/* Título */
.seguridad__card h3 {
  color: var(--color-text);

  margin: 0;
  line-height: 1.2;
}

/* Descripción debajo */
.seguridad__card p {
  font-size: 16px;
  color: var(--color-text);
  text-align: left;
  line-height: 1.6;
  margin: 0;
}


/* Documento */
.seguridad__preview {
  display: flex;
  justify-content: center;
}

.documento {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  padding: 22px;
  box-shadow: 0 30px 60px rgba(11, 18, 58, 0.08);
}

.documento__header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 18px;
}

.documento__header i {
  color: var(--color-logo);
  font-size: 22px;
}

.documento__content {
  background: #f7f8fb;
  border-radius: 14px;
  padding: 16px;
}

.doc-row {
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  margin-bottom: 10px;
}

.doc-row.short {
  width: 60%;
}

.doc-amounts {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  margin: 14px 0;
}

.doc-amounts .out {
  color: var(--color-logo);
}

.doc-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--bc-pink-3);
}

.documento__footer {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(11, 18, 58, 0.6);
}

/* Responsive */
@media (max-width: 900px) {
  .seguridad__layout {
    grid-template-columns: 1fr;
  }

  .seguridad__cards {
    grid-template-columns: 1fr;
  }
}



/* =========================
   HERO SaaS (Home)
========================= */
.bc-hero {
  background: var(--color-bg);
  padding: 88px 20px 70px;
  overflow: hidden;
}

.bc-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow */
.bc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(11, 18, 58, .78);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bc-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-logo);
  box-shadow: 0 0 0 4px rgba(255, 38, 137, .12);
}

/* Title / Subtitle */
.bc-hero__title {
  margin: 18px auto 12px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.bc-hero__subtitle {
  margin: 0 auto;
  max-width: 760px;
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.55;
}

/* Actions */
.bc-hero__actions {
  margin-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.bc-hero__btn {
  margin-top: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bc-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text);
  opacity: .85;
}

.bc-hero__link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Pills */
.bc-hero__pills {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bc-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(213, 215, 218, .9);
  background: #fff;
  font-size: 12px;
  color: rgba(11, 18, 58, .72);
  box-shadow: 0 10px 24px rgba(11, 18, 58, .05);
}

.bc-hero__pill i {
  color: var(--color-logo);
}

/* Preview */
.bc-hero__preview {
  position: relative;
  margin: 40px auto 0;
  max-width: 980px;
}

/* Glow suave */
.bc-hero__glow {
  position: absolute;
  inset: -60px -40px auto -40px;
  height: 460px;
  background: radial-gradient(circle at 50% 40%,
      rgba(255, 38, 137, .20),
      rgba(255, 38, 137, .08) 45%,
      rgba(255, 255, 255, 0) 70%);
  filter: blur(12px);
  pointer-events: none;
}

/* Marco tipo “card” */
.bc-hero__frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 30px 30px rgba(11, 18, 58, 0.08);
}


.bc-hero__frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Chips flotantes */
.bc-hero__chip {
  position: absolute;
  top: 18px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(213, 215, 218, .9);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(11, 18, 58, .10);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(11, 18, 58, .78);
}

.bc-hero__chip i {
  color: var(--color-logo);
}

.bc-hero__chip--left {
  left: -34px;
}

.bc-hero__chip--right {
  right: -34px;
}

/* Responsive */
@media (max-width: 900px) {
  .bc-hero {
    padding: 70px 18px 56px;
  }

  .bc-hero__frame {
    padding: 12px;
  }

  .bc-hero__chip {
    display: none;
    /* en móvil se limpia */
  }
}





/* =========================
   CONTADORES
========================= */

/* SECCION HERRAMINETAS TAEJETAS*/
.herramientas-grid {
  display: grid;
  max-width: 1240px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 2fr);
  gap: 24px;
}


/* Estilo base de todas las tarjetas */


/* Tarjetas de abajo (ocupan 2 columnas cada una) */
.card-small {
  grid-column: span;
  padding: 24px;
  border-radius: 20px;
  background: #fefefe;
  border: 1px solid var(--color-border);



}

/* Tipografía */
.card h3 {
  font-size: 24px;
  font-weight: 400px;
  margin: 0 0 12px 0;
  color: var(--color-text);
  display: flex;
  align-items: left;
  text-align: left;
  gap: 10px;
}

.card p {
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  display: flex;
  align-items: center;
  text-align: left;
  gap: 10px;
}



/* Contenedor de Imagen/Ilustración */
.image-box {
  background: #ffff;
  border-radius: 18px;
  overflow: hidden;
  margin-top: auto;
  border: 1px solid #eef2f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* Iconos de abajo (simulados) */
.icon-box {
  width: 45px;
  height: 45px;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  border: 1px solid #e2e8f0;
}

/* Responsivo: En celulares se pone uno debajo de otro */
@media (max-width: 900px) {

  .card-large-left,
  .card-large-right,
  .card-small {
    grid-column: span 6;
  }
}




/* HERO 2 COLUMNAS */
.bc-hero {
  background: var(--color-bg);
  padding: 88px 20px 70px;
  overflow: hidden;
}

.bc-hero__inner {
  max-width: 1300px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  /* izquierda un poco más ancha */
  align-items: center;
  gap: 42px;

  text-align: left;
  /* ✅ clave */
}

/* IZQUIERDA */
.bc-hero__content {
  max-width: 620px;
}

.bc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(11, 18, 58, .78);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: fit-content;
}

.bc-hero__title {
  margin: 18px 0 12px;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.bc-hero__subtitle {
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  font-weight: 300;
  color: rgba(11, 18, 58, .72);
  line-height: 1.55;
}

/* Acciones */
.bc-hero__actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
  /* ✅ ahora a la izquierda */
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bc-hero__btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pills */
.bc-hero__pills {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
  /* ✅ ahora a la izquierda */
  gap: 10px;
  flex-wrap: wrap;
}

.bc-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(213, 215, 218, .9);
  background: #fff;
  font-size: 12px;
  color: rgba(11, 18, 58, .72);
  box-shadow: 0 10px 24px rgba(11, 18, 58, .05);
}

/* DERECHA: Preview */
.bc-hero__preview {
  position: relative;
  margin: 0;
  /* ✅ ya no centrado */
  max-width: 590px;
  justify-self: end;
}

.bc-hero__glow {
  position: absolute;
  inset: -60px -40px auto -40px;
  height: 460px;
  background: radial-gradient(circle at 50% 40%,
      rgba(255, 38, 137, .20),
      rgba(255, 38, 137, .08) 45%,
      rgba(255, 255, 255, 0) 70%);
  filter: blur(12px);
  pointer-events: none;
}

.bc-hero__frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 30px 30px rgba(11, 18, 58, 0.08);
}

.bc-hero__frame img {

  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Chips */
.bc-hero__chip {
  position: absolute;
  top: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(213, 215, 218, .9);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(11, 18, 58, .10);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(11, 18, 58, .78);
}

.bc-hero__chip i {
  color: var(--color-logo);
}

.bc-hero__chip--left {
  left: -64px;
}

.bc-hero__chip--right {
  right: -20px;
}

/* Responsive */
@media (max-width: 900px) {
  .bc-hero {
    padding: 70px 18px 56px;
  }

  .bc-hero__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .bc-hero__preview {
    justify-self: start;
    max-width: 100%;
  }

  .bc-hero__frame {
    padding: 12px;
  }

  .bc-hero__chip {
    display: none;
  }
}



.bc-benefits {
  padding: 40px 20px;
  background: var(--color-bg);
}

.bc-benefits__grid {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Tarjeta */
.bc-benefit-card {
  background: var(--color-card-bg);
  border: 1px solid rgba(213, 215, 218, .9);
  border-radius: 22px;
  padding: 26px 24px;

  box-shadow: 0 18px 40px rgba(11, 18, 58, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bc-benefit-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 38, 137, .25);
  box-shadow: 0 26px 60px rgba(11, 18, 58, .10);
}

/* Título con icono */
.bc-benefit-card__title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 26px;
  font-weight: 340;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.bc-benefit-card__title i {
  font-size: 20px;
  color: var(--color-text);
  opacity: .9;
}

/* Descripción */
.bc-benefit-card__desc {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(11, 18, 58, .75);
}

/* Responsive */
@media (max-width: 1100px) {
  .bc-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bc-benefits__grid {
    grid-template-columns: 1fr;
  }

  .bc-benefit-card__title {
    font-size: 22px;
  }

  .bc-benefit-card__desc {
    font-size: 16px;
  }
}





.legal-page {
  padding: 70px 18px 90px;
  background: var(--color-bg);
  color: var(--ink);
}

.legal-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.legal-hero {
  margin-bottom: 22px;
}

.legal-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: rgba(11, 18, 58, .72);
  font-size: 13px;
  font-weight: 300;
}

.legal-badge i {
  color: var(--color-logo);
}

.legal-card {
  padding: 10px 18px;
  margin-top: 4px;
}

.legal-card h2 {
  margin-bottom: 8px;
}

.legal-card p {
  font-size: 16px;
  margin-bottom: 10px;
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.legal-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(11, 18, 58, 0.82);
  font-weight: 300;
  line-height: 1.7;
  font-size: 16px;
}

.legal-list li i {
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
}

.legal-callout {
  margin-top: 14px;
  border: 1px solid rgba(255, 38, 137, .22);
  background: var(--brand-soft);
  border-radius: var(--r-12);
  padding: 14px 14px;
}

.legal-callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 400;
}

.legal-callout p {
  margin: 0;
  color: rgba(11, 18, 58, 0.82);
}

.legal-kv {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.legal-kv .k {
  color: rgba(11, 18, 58, .65);
  font-size: 14px;
  font-weight: 400;
}

.legal-kv .v {
  color: rgba(11, 18, 58, .85);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

.legal-contact {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: left;
  justify-content: space-between;
}

.legal-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
}

.legal-contact a i {
  color: var(--color-logo);
}

.legal-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}


@media (max-width: 900px) {
  .legal-page {
    padding: 56px 16px 80px;
  }

  .legal-kv {
    grid-template-columns: 1fr;
  }
}





/* ===== 
Promo Modal 2026 (BankClasifAI) 
===== */
.bc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11, 18, 58, .55);
  backdrop-filter: blur(6px);
  padding: 18px;
  align-items: center;
  justify-content: center;
}

.bc-modal.is-open {
  display: flex;
}

.bc-modal__content {
  width: 100%;
  max-width: 500px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-22);
  box-shadow: var(--shadow-md);
  padding: 45px 30px 45px;
  position: relative;
  overflow: hidden;
}

.bc-modal__content::before {
  content: "";
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255, 190, 219, 0.18), transparent 55%),
    radial-gradient(900px 420px at 85% 35%, rgba(251, 164, 204, 0.16), transparent 55%);
  pointer-events: none;
}

.bc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bc-modal__close i {
  color: rgba(11, 18, 58, .75);
}

.bc-modal__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 38, 137, .22);
  background: var(--brand-soft);
  color: rgba(11, 18, 58, .78);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
}

.bc-modal__badge i {
  color: var(--color-logo);
}

.bc-modal__title {
  
  position: relative;
  text-align: center;
  z-index: 1;
  margin: 0 0 10px;
  padding-bottom: 20px;
}

.bc-modal__title h3{
  font-size: 29px;
}


.bc-modal__subtitle {
  position: relative;
  text-align: center;
  z-index: 1;
  margin: 0 0 14px;
  color: rgba(11, 18, 58, .82);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
}


.bc-modal__note {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(11, 18, 58, .62);
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 520px) {
  .bc-modal__content {
    padding: 18px 16px 16px;
  }

  .bc-modal__actions a {
    width: 100%;
    justify-content: center;
  }
}



/* =========================
       FAQ Pagina compla
    ========================= */
.faq {
  padding: 90px 20px;
  background: var(--color-bg);
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq-header {
  text-align: center;
  margin-bottom: 50px;
}

.faq-header h1 {
  font-size: 38px;
  margin-bottom: 14px;
}

.faq-header p {
  color: rgba(11, 18, 58, .7);
  max-width: 700px;
  margin: 0 auto;
}

.faq-group {
  margin-bottom: 40px;
}

.faq-group h2 {
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--ink);
}

details.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: box-shadow .2s ease;
}

details.faq-item[open] {
  box-shadow: var(--shadow-sm);
}

summary {
  cursor: pointer;
  font-weight: 400;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  transition: transform .2s ease;
}

details[open] summary::after {
  content: "–";
}

.faq-content {
  margin-top: 12px;
  color: rgba(11, 18, 58, .75);
  line-height: 1.65;
  font-size: 16px;
  font-weight: 390;
}

.faq-note {
  margin-top: 50px;
  padding: 20px;
  border-radius: 16px;
  background: var(--brand-soft);
  border: 1px solid rgba(255, 38, 137, .25);
  text-align: center;
}

.faq-note a {
  color: var(--color-logo);
  font-weight: 500;
}




/* Contenedor del widget (ajusta el selector a tu widget real) */
#ai-chat {
  width: 380px;
  height: 680px;
  border-radius: 18px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;

}

/* Header */
#ai-header{
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid var(--bc-border);
}

#ai-title{
  color: var(--bc-text);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Área de mensajes */
#ai-messages{
  padding: 14px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Burbujas */
.msg{
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.35;
  font-size: 14px;
  border: 1px solid var(--bc-border);
}

.msg.user{
  align-self: flex-end;
  background: color-mix(in srgb, var(--bc-primary) 20%, var(--bc-surface));
  color: var(--bc-text);
}

.msg.bot{
  align-self: flex-start;
  background: rgba(255,255,255,.04);
  color: var(--bc-text);
}

/* Quick replies tipo “chips” como la captura */
.quick-replies{
  padding: 0 14px 10px 14px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.quick-reply{
  border: 1px solid var(--bc-border);
  background: rgba(255,255,255,.03);
  color: var(--bc-text);
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.quick-reply:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}

/* Footer input */
#ai-form{
  padding: 12px 14px;
  display:flex;
  gap:10px;
  border-top: 1px solid var(--bc-border);
  background: rgba(255,255,255,.02);
}

#ai-input{
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: rgba(255,255,255,.03);
  color: var(--bc-text);
  padding: 12px 14px;
  outline: none;
}

#ai-input::placeholder{ color: var(--bc-muted); }

#ai-form button{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--bc-primary);
  color: #061018;
  font-weight: 800;
  cursor: pointer;
}

/* Botón “hablar con asesor” (si lo tienes en el header) */
#humanBtn{
  border: 1px solid var(--bc-border);
  background: rgba(255,255,255,.03);
  color: var(--bc-text);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
#humanBtn:hover{ background: rgba(255,255,255,.06); }



/* Botón flotante (FAB) */
#chatFab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: linear-gradient(135deg,var(--bc-primary),var(--bc-primary-2));
  color: var(--bc-text);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  z-index: 999999;
}

/* Panel flotante del chat */
#ai-chat{
  position: fixed;
  right: 22px;
  bottom: 92px; /* arriba del botón */
  width: 380px;
  height: 680px;
  z-index: 999999;
  transform-origin: bottom right;
  transition: transform .12s ease, opacity .12s ease, visibility .12s ease;
}

/* Abierto/cerrado */
#ai-chat.closed{
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
  pointer-events: none;
}

#ai-chat.open{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* botón de cerrar */
#chatClose{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--bc-border);
  background: rgba(255,255,255,.03);
  color: var(--bc-text);
  cursor: pointer;
}
#chatClose:hover{ background: rgba(255,255,255,.06); }

/* Responsive */
@media (max-width: 430px){
  #ai-chat{
    right: 12px;
    left: 12px;
    width: auto;
    height: 70vh;
    bottom: 88px;
  }
  #chatFab{ right: 12px; bottom: 12px; }
}









/* ============================
   REFERRALS SECTION (Dashboard)
============================ */
.referrals {
  padding: 26px;
}

.referrals__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.referrals__eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 25, 40, 0.55);
  margin: 0 0 8px;
}

.referrals__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
  color: #10162f;
}

.referrals__subtitle {
  margin: 0;
  max-width: 820px;
  color: rgba(16, 22, 47, 0.75);
}

.referrals__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 38, 137, 0.07);
  border: 1px solid rgba(255, 38, 137, 0.18);
  color: rgba(16, 22, 47, 0.85);
  white-space: nowrap;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.dot--green { background: #2bd27c; }
.dot--amber { background: #f5b942; }
.dot--pink  { background: #ff2689; }

.referrals__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
}

.referrals__left,
.referrals__right {
  display: grid;
  gap: 18px;
}

/* Cards */
.card {
  background: #ffffff;
  border: 1px solid rgba(16, 22, 47, 0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(16, 22, 47, 0.06);
}

.card__top {
  margin-bottom: 14px;
}

.card__title {
  margin: 0 0 6px;
  font-size: 16px;
  color: #10162f;
}

.card__desc {
  margin: 0;
  color: rgba(16, 22, 47, 0.65);
  font-size: 13px;
}

.divider {
  height: 1px;
  background: rgba(16, 22, 47, 0.10);
  margin: 16px 0;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge--pink {
  background: rgba(255, 38, 137, 0.10);
  border-color: rgba(255, 38, 137, 0.20);
  color: #ff2689;
}
.badge--blue {
  background: rgba(60, 120, 255, 0.10);
  border-color: rgba(60, 120, 255, 0.20);
  color: #3c78ff;
}

.muted {
  color: rgba(16, 22, 47, 0.60);
}

/* Link blocks */
.link-block {
  display: grid;
  gap: 10px;
}

.link-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.link-block__meta {
  font-size: 13px;
  color: rgba(16, 22, 47, 0.75);
}

.link-block__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.ref-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(16, 22, 47, 0.12);
  background: rgba(16, 22, 47, 0.03);
  color: #10162f;
  font-size: 13px;
  outline: none;
}

.link-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.helper {
  margin: 0;
  font-size: 12px;
  color: rgba(16, 22, 47, 0.60);
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(16, 22, 47, 0.03);
  border: 1px solid rgba(16, 22, 47, 0.08);
}

.step__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 38, 137, 0.10);
  border: 1px solid rgba(255, 38, 137, 0.18);
  color: #ff2689;
}

.step__body h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #10162f;
}

.step__body p {
  margin: 0;
  font-size: 13px;
  color: rgba(16, 22, 47, 0.70);
}

.tips {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.tips__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(16, 22, 47, 0.75);
  font-size: 13px;
}
.tips__item i {
  margin-top: 2px;
  color: rgba(255, 38, 137, 0.9);
}

/* Balance card */
.balance__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.balance__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}
.balance__amount .currency {
  font-size: 16px;
  color: rgba(16, 22, 47, 0.65);
}
.balance__amount #refBalance {
  font-size: 32px;
  font-weight: 800;
  color: #10162f;
}

.balance__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(16, 22, 47, 0.03);
  border: 1px solid rgba(16, 22, 47, 0.10);
  color: rgba(16, 22, 47, 0.85);
  white-space: nowrap;
}

.balance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.mini {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(16, 22, 47, 0.08);
  background: rgba(16, 22, 47, 0.02);
}

.mini__label {
  margin: 0;
  font-size: 12px;
  color: rgba(16, 22, 47, 0.60);
}

.mini__value {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #10162f;
}

/* Connect + Withdraw */
.connect {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.connect__info {
  min-width: 220px;
}

.connect__info h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #10162f;
}

.withdraw {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

/* Notes */
.notes {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(16, 22, 47, 0.75);
  font-size: 13px;
}
.notes li { margin-bottom: 8px; }

/* Buttons */
.btn {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16, 22, 47, 0.10);
}

.btn--primary {
  background: linear-gradient(90deg, #ff2689, #ff6bb7);
  color: #fff;
}

.btn--secondary {
  background: rgba(16, 22, 47, 0.06);
  color: #10162f;
  border: 1px solid rgba(16, 22, 47, 0.12);
}

.btn--dark {
  background: #10162f;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border: 1px solid rgba(16, 22, 47, 0.12);
  color: rgba(16, 22, 47, 0.85);
}

.btn--success {
  background: rgba(43, 210, 124, 0.12);
  border: 1px solid rgba(43, 210, 124, 0.22);
  color: #1a7a49;
}

.is-hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 980px) {
  .referrals__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .referrals__grid {
    grid-template-columns: 1fr;
  }
  .balance__grid {
    grid-template-columns: 1fr;
  }
  .link-block__row {
    grid-template-columns: 1fr;
  }
}