/*
* Archivo styles.css
*/
:root{
  --brand-700:#c949d0;
  --brand-600:#c949d0;
  --brand-500:#c949d0;
  --brand-100:#c949d0;
  --nav-h:64px;
  --gutter:clamp(16px,4vw,24px);
}
@media (max-width:991.98px){ :root{ --nav-h:56px } }

*{ box-sizing:border-box }

html,body{ max-width:100%; overflow-x:hidden; scroll-behavior:smooth }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
}

/* imágenes responsivas */
img,video,svg{ max-width:100%; height:auto; display:block }

/* contenedores con safe-areas */
.container,.container-fluid{
  width:100%;  margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

/* evita usar 100vw */
.navbar,.hero{ width:100%; max-width:100% }

/* ===== Navbar genérica (Bootstrap o similar) ===== */
.navbar{
  padding-top:env(safe-area-inset-top);
  background:transparent;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.navbar .container{
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
}
.navbar .btn-brand{
  --bs-btn-bg:var(--brand-600);
  --bs-btn-border-color:var(--brand-600);
  --bs-btn-hover-bg:var(--brand-700);
  --bs-btn-hover-border-color:var(--brand-700);
}

/* ===== Navbar propia ===== */
.cfm-navbar{
  backdrop-filter:saturate(140%) blur(8px);
  background:
    radial-gradient(1200px 600px at 20% -40%, rgba(128,77,255,.22), transparent 60%),
    radial-gradient(900px 400px at 80% -20%, rgba(111,61,255,.18), transparent 60%),
    #000;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cfm-nav-inner{
  max-width:1200px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 14px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:12px;
}
.cfm-brand{ color:#fff; font-weight:800; text-decoration:none; white-space:nowrap }
.cfm-nav-center{
  list-style:none; margin:0; padding:0; display:flex; gap:22px; justify-content:center; align-items:center;
}
.cfm-nav-center a{
  color:#ddd; text-decoration:none; font-weight:600; padding:8px 6px; border-radius:10px;
  transition:color .15s ease, background .15s ease;
}
.cfm-nav-center a:hover{ color:#fff; background:rgba(128,77,255,.12) }
.cfm-cta{
  justify-self:end; background:var(--brand-500); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:12px; font-weight:700; box-shadow:0 6px 18px rgba(128,77,255,.15);
  transition:background .15s ease, transform .1s ease;
}
.cfm-cta:hover{ background:var(--brand-600); transform:translateY(-1px) }
.cfm-navbar.scrolled{
  background:#140628 !important; /* fijo */
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cfm-navbar{
  background:#140628 !important;
}

@media (max-width:960px){
  .cfm-nav-inner{ grid-template-columns:1fr auto auto }
  .cfm-nav-center{ display:none }
}

/* ===== Hero ===== */
.hero{
  min-height:calc(100dvh - var(--nav-h));
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top));
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(128,77,255,.35), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(93,43,255,.35), transparent 60%),
    linear-gradient(180deg,#0b0b12 0%, #141428 100%);
}
@media (max-width:991.98px){ .hero{ min-height:72vh } }
.hero .hero-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:#fff;
}

/* ===== Secciones y utilidades ===== */
.py-6{ padding-top:4.5rem; padding-bottom:4.5rem }
.stat{ background:#fff; border:1px solid #f0f0f0; border-radius:1rem; padding:1rem }
.card{ border:1px solid #ececf2 }
.card.portfolio img{ aspect-ratio:16/10; object-fit:cover }
.card:hover{ transform:translateY(-2px); transition:.2s ease; box-shadow:0 10px 24px rgba(0,0,0,.08) }
.bg-brand-soft{ background:var(--brand-100) }
.text-brand{ color:var(--brand-700) }
.avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover }
.btn-brand{ background:var(--brand-600); color:#fff; border-color:var(--brand-600) }
.btn-brand:hover{ background:var(--brand-700); border-color:var(--brand-700); color:#fff }
.text-white-50{ color:rgba(255,255,255,.72)!important }
strong.strong-brand{ color:var(--brand-600) }

/* Bootstrap grid ajuste opcional */
.row{ margin-left:0; margin-right:0 }

/* ======= Menú desplegable ======= */

    /* Barra */
    .cfm-navbar{
      position:fixed !important;
      top:0; left:0; right:0;
      z-index:1000;
      width:100%;
    }
    html{ scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top)); }

/* Layout interno */
.cfm-nav-inner{
  max-width:1200px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 14px;
  display:grid; align-items:center; column-gap:12px;
  grid-template-columns:auto 1fr auto; /* brand | espacio | acciones */
}
.cfm-brand{ color:#fff; font-weight:800; text-decoration:none; white-space:nowrap }

/* Menú centrado (solo desktop) */
.cfm-nav-center{
  list-style:none; margin:0; padding:0;
  display:flex; gap:22px; justify-content:center; align-items:center;
  grid-column:2; justify-self:right;
}
.cfm-nav-center a{
  color:#ddd; text-decoration:none; font-weight:600; padding:8px 6px; border-radius:10px;
  transition:color .15s ease, background .15s ease;
}
.cfm-nav-center a:hover{ color:#fff; background:rgba(128,77,255,.12) }
@media (max-width:960px){ .cfm-nav-center{ display:none !important; } }

/* Botón hamburguesa */
.cfm-burger{
  width:40px; height:40px; border:0; background:transparent; color:#fff;
  display:none; place-items:center; justify-self:end; z-index:1001; position:relative;
}
.cfm-burger span{
  width:22px; height:2px; background:currentColor; margin:4px 0; display:block;
  transition:transform .2s ease, opacity .2s ease;
}
.cfm-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.cfm-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.cfm-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:960px){ .cfm-burger{ display:inline-grid !important; } }
@media (min-width:961px){ .cfm-burger{ display:none !important; } }

/* Panel móvil deslizante */
.cfm-mobile{
  position:fixed; left:0; right:0; top:0; z-index:999;
  padding: calc(env(safe-area-inset-top) + var(--nav-h)) 20px 20px;
  background:#0b0b12; color:#fff;
  transform:translateY(-100%); transition:transform .25s ease;
}
.cfm-mobile.open{ transform:translateY(0); }
.cfm-mobile ul{ list-style:none; margin:0; padding:0; }
.cfm-mobile li{ border-bottom:1px solid rgba(255,255,255,.08); }
.cfm-mobile a{ display:block; padding:14px 2px; color:#fff; text-decoration:none; font-weight:600; }

/* Overlay */
.cfm-overlay{
  position:fixed; inset:0; z-index:998;
  background:rgba(0,0,0,.35); opacity:0; transition:opacity .25s ease;
}
.cfm-overlay.show{ opacity:1; }

/* =========================
   LOGO NAVBAR (más grande)
   ========================= */

/* El <a class="brand-logo"> no debe limitar el tamaño */
.cfm-navbar a.brand-logo{
  width:auto;
  display:flex;
  align-items:center;
  text-decoration:none;
}

/* El <img class="img-fluid brand-logo"> se controla por ALTURA (recomendado) */
.cfm-navbar img.brand-logo{
  height:44px;      /* AJUSTA aquí (ej. 48, 52) */
  width:auto;
  max-width:none;   /* evita que Bootstrap lo limite */
}

/* En escritorio un poco más grande */
@media (min-width:992px){
  .cfm-navbar img.brand-logo{
    height:52px;
  }
}

/* En pantallas muy chicas, baja un poco para que no choque con el menú */
@media (max-width:420px){
  .cfm-navbar img.brand-logo{
    height:40px;
  }
}


/* =========================
   EXTENSIÓN UI MODERNA v2
   ========================= */

.cfm-body{ background:#fff; }

/* Sección oscura para propuesta */
.cfm-section-dark{
  background:
    radial-gradient(1200px 600px at 20% -40%, rgba(128,77,255,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(201,73,208,.18), transparent 60%),
    linear-gradient(180deg,#0b0b12 0%, #141428 100%);
}

/* Hero v2 */
.hero-v2{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(128,77,255,.35), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(201,73,208,.22), transparent 60%),
    linear-gradient(180deg,#07070c 0%, #141428 100%);
}

.cfm-pill{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:700; font-size:.9rem;
}
.cfm-pill-soft{
  background:rgba(128,77,255,.10);
  border-color:rgba(128,77,255,.22);
}

.cfm-metric{
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:14px 14px;
}
.cfm-metric-kpi{ color:#fff; font-weight:800; }
.cfm-metric-txt{ color:rgba(255,255,255,.72); font-size:.9rem; }

.cfm-hero-card{
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  padding:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
}
.cfm-hero-card-head{ display:flex; justify-content:space-between; align-items:center; }
.cfm-badge-icon{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(128,77,255,.18);
  border:1px solid rgba(128,77,255,.28);
  color:#fff;
}
.cfm-checklist{ list-style:none; padding:0; margin:0; }
.cfm-checklist li{
  display:flex; align-items:flex-start; gap:10px;
  color:rgba(255,255,255,.80);
  padding:8px 0;
}
.cfm-checklist i{ color:var(--brand-600); margin-top:2px; }
.cfm-hr{ border-color:rgba(255,255,255,.10); }

.cfm-trust-row{
  display:flex; flex-wrap:wrap; gap:12px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:16px;
}
.cfm-trust-item{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.75);
  font-weight:600;
}
.cfm-trust-item i{ color:var(--brand-600); }

/* Propuesta: split card */
.cfm-split-card{
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns: .9fr 1.1fr;

}
@media (max-width:991.98px){
  .cfm-split-card{ grid-template-columns:1fr; }
}
.cfm-split-left{ padding:22px; }
.cfm-split-right{ padding:22px; border-left:1px solid rgba(255,255,255,.10); }
@media (max-width:991.98px){
  .cfm-split-right{ border-left:0; border-top:1px solid rgba(255,255,255,.10); }
}

/* Mini cards */
.cfm-mini-cards{ display:grid; gap:12px; }
.cfm-mini-card{
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:14px 14px;
  display:flex; align-items:flex-start; gap:12px;
}
.cfm-mini-ic{
  width:42px; height:42px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(201,73,208,.14);
  border:1px solid rgba(201,73,208,.24);
  color:#fff;
}

/* Steps */
.cfm-step .card-body{ position:relative; }
.cfm-step-n{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(128,77,255,.12);
  border:1px solid rgba(128,77,255,.20);
  color:var(--brand-700);
  font-weight:900;
  margin-bottom:14px;
}

/* Advisor card */
.cfm-advisor{ border:1px solid #ececf2; border-radius:18px; }
.cfm-tags{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.cfm-tag{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ececf2;
  background:#fff;
  font-size:.85rem;
  color:#444;
}
.cfm-product{ border-radius:18px; }
.cfm-risk{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #ececf2;
  background:#fff;
  font-weight:700;
  color:#444;
  white-space:nowrap;
}

/* Contact card */
.cfm-contact-card{
  border:1px solid #ececf2;
  border-radius:18px;
  padding:16px;
  background:#fff;
}
.cfm-contact-row{
  display:flex; align-items:center; gap:10px;
  color:#333;
  padding:6px 0;
}
.cfm-contact-row i{ color:var(--brand-700); }

/* =========================
   CHAT WIDGET
   ========================= */
.cfm-chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px; height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, var(--brand-600), #7b1fa2);
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 18px 46px rgba(0,0,0,.25);
  z-index:1200;
}
.cfm-chat-fab i{ font-size:1.3rem; }

.cfm-chat{
  position:fixed;
  right:18px;
  bottom:86px;
  width:min(420px, calc(100vw - 36px));
  height: min(640px, calc(100vh - 140px));
  background:#0b0b12;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  z-index:1200;

  display:none;
}
.cfm-chat.open{ display:flex; flex-direction:column; }

.cfm-chat-header{
  padding:14px 14px;
  background:
    radial-gradient(800px 250px at 20% 0%, rgba(128,77,255,.25), transparent 60%),
    #0b0b12;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between;
}
.cfm-chat-dot{
  width:10px; height:10px; border-radius:999px;
  background: #3ddc97;
  box-shadow:0 0 0 6px rgba(61,220,151,.15);
}
.cfm-chat-title{ color:#fff; font-weight:900; line-height:1.1; }
.cfm-chat-sub{ color:rgba(255,255,255,.65); font-size:.85rem; }
.cfm-chat-close{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  display:grid; place-items:center;
}

.cfm-chat-body{
  padding:14px;
  overflow:auto;
  flex:1;
}
.cfm-chat-msg{ display:flex; margin:10px 0; }
.cfm-chat-msg .bubble{
  max-width:86%;
  padding:12px 12px;
  border-radius:16px;
  font-size:.95rem;
  line-height:1.35;
}
.cfm-chat-msg.bot{ justify-content:flex-start; }
.cfm-chat-msg.bot .bubble{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
}
.cfm-chat-msg.user{ justify-content:flex-end; }
.cfm-chat-msg.user .bubble{
  background:rgba(201,73,208,.18);
  border:1px solid rgba(201,73,208,.26);
  color:#fff;
}

.cfm-chat-quick{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:12px 0 0;
}
.cfm-chat-quick .q{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
}

.cfm-chat-lead{
  margin-top:16px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
.cfm-chat-lead-title{ color:#fff; font-weight:900; }
.cfm-chat-lead-sub{ color:rgba(255,255,255,.65); font-size:.85rem; margin-bottom:10px; }
.cfm-chat-form .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.cfm-chat-form .form-control::placeholder{ color:rgba(255,255,255,.55); }

.cfm-chat-footer{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:#0b0b12;
}
.cfm-chat-footer .form-control{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.cfm-chat-footer .form-control::placeholder{ color:rgba(255,255,255,.55); }
.cfm-chat-note{
  margin-top:8px;
  color:rgba(255,255,255,.55);
  font-size:.78rem;
}