/* ============================================================================
   LANDING EMPRENDEDOR PRO
   Archivo: assets/css/landing-emprendedor.css
   Diseño responsive + Bootstrap 5
   ============================================================================ */

:root{
  --brand:#0f766e;
  --brand-2:#14b8a6;
  --brand-3:#0ea5e9;
  --navy:#0f2742;
  --navy-2:#132f4c;
  --ink:#102033;
  --muted:#64748b;
  --soft:#f4f8fb;
  --soft-2:#eef7f6;
  --white:#ffffff;
  --line:rgba(15,39,66,.10);
  --shadow:0 18px 45px rgba(15,39,66,.10);
  --shadow-2:0 28px 70px rgba(15,39,66,.16);
  --radius:24px;
  --radius-sm:16px;
  --container:1140px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(20,184,166,.13), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(14,165,233,.12), transparent 28%),
    linear-gradient(180deg,#f8fbfc 0%,#f4f8fb 38%,#ffffff 100%);
  overflow-x:hidden;
}

img{
  max-width:100%;
}

a{
  text-decoration:none;
}

/* ============================================================================
   NAVBAR
============================================================================ */

.navbar{
  min-height:78px;
  padding:14px 0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(15,39,66,.08);
  box-shadow:0 8px 28px rgba(15,39,66,.06);
}

.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--navy) !important;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.navbar-brand i{
  color:var(--brand);
}

.navbar-brand span{
  color:var(--brand-2);
}

.navbar .nav-link{
  color:#425466;
  font-size:.94rem;
  font-weight:650;
  padding:10px 12px !important;
  border-radius:999px;
  transition:all .22s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:var(--brand);
  background:rgba(20,184,166,.09);
}

.navbar-toggler{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(15,118,110,.08);
  box-shadow:none !important;
}

.navbar-toggler:focus{
  box-shadow:0 0 0 .22rem rgba(20,184,166,.18) !important;
}

/* ============================================================================
   BOTONES
============================================================================ */

.btn{
  border-radius:999px;
  font-weight:750;
  padding:12px 20px;
  letter-spacing:-.01em;
}

.btn-sm{
  padding:9px 15px;
  font-size:.9rem;
}

.btn-main{
  color:#fff !important;
  border:0 !important;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 14px 30px rgba(15,118,110,.24);
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.btn-main:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
  box-shadow:0 18px 42px rgba(15,118,110,.30);
}

.btn-soft{
  color:var(--navy) !important;
  border:1px solid rgba(15,39,66,.12) !important;
  background:rgba(255,255,255,.74);
  box-shadow:0 12px 26px rgba(15,39,66,.07);
  transition:all .24s ease;
}

.btn-soft:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(20,184,166,.32) !important;
  box-shadow:0 18px 42px rgba(15,39,66,.12);
}

/* ============================================================================
   HERO
============================================================================ */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:132px 0 86px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-22% -10% auto auto;
  width:620px;
  height:620px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(20,184,166,.18), transparent 64%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  left:-180px;
  bottom:-230px;
  width:540px;
  height:540px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(14,165,233,.15), transparent 68%);
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:2;
}

.eyebrow{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  padding:9px 14px;
  border:1px solid rgba(15,118,110,.16);
  border-radius:999px;
  color:var(--brand);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(15,39,66,.06);
  font-size:.86rem;
  font-weight:760;
}

.hero h1{
  max-width:680px;
  margin:0;
  color:var(--navy);
  font-size:clamp(2.45rem, 5.4vw, 4.85rem);
  line-height:.98;
  letter-spacing:-.065em;
  font-weight:850;
}

.gradient-text{
  display:block;
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  max-width:620px;
  margin:24px 0 0;
  color:#526579;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.75;
  font-weight:450;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  color:#334155;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,39,66,.09);
  border-radius:999px;
  box-shadow:0 10px 22px rgba(15,39,66,.06);
  font-size:.9rem;
  font-weight:680;
}

/* Imagen derecha del hero */
.hero-image-wrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
}

.hero-system-image{
  position:relative;
  z-index:2;
  width:min(100%, 640px);
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 30px 52px rgba(15,39,66,.18));
  transform:translateY(0) rotate(.2deg);
  transition:transform .35s ease, filter .35s ease;
}

.hero-system-image:hover{
  transform:translateY(-7px) rotate(0deg);
  filter:drop-shadow(0 38px 70px rgba(15,39,66,.24));
}

.hero-image-glow{
  position:absolute;
  z-index:1;
  width:78%;
  height:58%;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(20,184,166,.22), transparent 64%),
    radial-gradient(circle, rgba(14,165,233,.15), transparent 72%);
  filter:blur(28px);
  opacity:.9;
  pointer-events:none;
}

/* ============================================================================
   SECCIONES GENERALES
============================================================================ */

.section{
  position:relative;
  padding:92px 0;
}

.bg-white{
  background:rgba(255,255,255,.72) !important;
}

.section-title{
  max-width:760px;
  margin:0 auto 44px;
  text-align:center;
}

.section-title.text-start{
  text-align:left;
}

.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--brand);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.section-title h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem, 3.3vw, 3rem);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:850;
}

.section-title p{
  margin:16px 0 0;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.72;
}

/* ============================================================================
   CARDS
============================================================================ */

.problem-card,
.feature-card,
.benefit-card,
.flow-card,
.module-panel,
.cta-box{
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.problem-card,
.feature-card,
.benefit-card,
.flow-card{
  height:100%;
  padding:26px;
  border-radius:var(--radius);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.problem-card:hover,
.feature-card:hover,
.benefit-card:hover,
.flow-card:hover{
  transform:translateY(-5px);
  border-color:rgba(20,184,166,.25);
  box-shadow:var(--shadow-2);
}

.icon-box{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:17px;
  color:var(--brand);
  background:linear-gradient(135deg, rgba(20,184,166,.13), rgba(14,165,233,.10));
  border:1px solid rgba(20,184,166,.12);
  font-size:1.38rem;
}

.problem-card h3,
.feature-card h3,
.benefit-card h3,
.flow-card h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:1.08rem;
  font-weight:810;
  letter-spacing:-.025em;
}

.problem-card p,
.feature-card p,
.benefit-card p,
.flow-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:.96rem;
}

.problem-section{
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(238,247,246,.62));
}

/* ============================================================================
   MÓDULOS
============================================================================ */

.module-panel{
  padding:18px;
  border-radius:28px;
}

.module-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:19px 18px;
  border-radius:20px;
  transition:background .22s ease, transform .22s ease;
}

.module-row:not(:last-child){
  border-bottom:1px solid rgba(15,39,66,.08);
}

.module-row:hover{
  background:rgba(20,184,166,.06);
  transform:translateX(3px);
}

.module-row i{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:var(--brand);
  background:rgba(20,184,166,.10);
  font-size:1.22rem;
}

.module-row strong{
  display:block;
  color:var(--navy);
  font-size:1rem;
  font-weight:810;
  margin-bottom:4px;
}

.module-row span{
  display:block;
  color:var(--muted);
  line-height:1.55;
  font-size:.95rem;
}

/* ============================================================================
   FLUJO
============================================================================ */

.flow-card{
  position:relative;
  overflow:hidden;
}

.flow-card::after{
  content:"";
  position:absolute;
  top:-60px;
  right:-60px;
  width:130px;
  height:130px;
  border-radius:999px;
  background:rgba(20,184,166,.08);
}

.flow-number{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 25px rgba(15,118,110,.22);
  font-weight:850;
}

/* ============================================================================
   CTA + FOOTER
============================================================================ */

.cta-section{
  padding:90px 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(20,184,166,.18), transparent 34%),
    linear-gradient(135deg,var(--navy),#103b52 55%,#0f766e 120%);
}

.cta-box{
  position:relative;
  overflow:hidden;
  padding:clamp(30px, 6vw, 58px);
  border-radius:34px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}

.cta-box::after{
  content:"";
  position:absolute;
  right:-140px;
  top:-140px;
  width:340px;
  height:340px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}

.cta-box h2{
  position:relative;
  z-index:2;
  max-width:780px;
  margin:0;
  font-size:clamp(2rem, 3.8vw, 3.35rem);
  line-height:1.04;
  letter-spacing:-.05em;
  font-weight:850;
}

.cta-box p{
  position:relative;
  z-index:2;
  max-width:780px;
  margin:18px 0 28px;
  color:rgba(255,255,255,.82);
  line-height:1.72;
  font-size:1.05rem;
}

.cta-box .d-flex{
  position:relative;
  z-index:2;
}

.footer{
  padding:28px 0;
  color:#5b6b7d;
  background:#fff;
  border-top:1px solid rgba(15,39,66,.08);
  font-size:.94rem;
}

.footer strong{
  color:var(--navy);
}

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:2000;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff !important;
  background:#25d366;
  box-shadow:0 18px 38px rgba(37,211,102,.35);
  font-size:1.65rem;
  transition:transform .24s ease, box-shadow .24s ease;
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 22px 48px rgba(37,211,102,.45);
}

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

@media (max-width: 1199.98px){
  .hero-system-image{
    width:min(100%, 590px);
  }
}

@media (max-width: 991.98px){
  html{
    scroll-padding-top:82px;
  }

  .navbar{
    min-height:70px;
    padding:10px 0;
  }

  .navbar-collapse{
    margin-top:12px;
    padding:14px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(15,39,66,.08);
    box-shadow:0 18px 45px rgba(15,39,66,.10);
  }

  .navbar-nav{
    align-items:stretch !important;
  }

  .navbar .nav-link{
    border-radius:14px;
    padding:12px 14px !important;
  }

  .navbar .btn-main{
    width:100%;
    margin-top:6px;
  }

  .hero{
    min-height:auto;
    padding:112px 0 68px;
    text-align:center;
  }

  .hero h1,
  .hero p{
    margin-left:auto;
    margin-right:auto;
  }

  .eyebrow,
  .hero-actions,
  .trust-row{
    justify-content:center;
  }

  .hero-image-wrap{
    margin-top:6px;
  }

  .hero-system-image{
    width:min(100%, 620px);
  }

  .section{
    padding:74px 0;
  }

  .section-title.text-start{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .module-panel{
    margin-top:4px;
  }
}

@media (max-width: 767.98px){
  .hero{
    padding:104px 0 58px;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trust-row{
    gap:8px;
  }

  .trust-pill{
    width:100%;
    justify-content:center;
  }

  .section{
    padding:62px 0;
  }

  .section-title{
    margin-bottom:32px;
  }

  .problem-card,
  .feature-card,
  .benefit-card,
  .flow-card{
    padding:22px;
  }

  .module-row{
    padding:16px 14px;
  }

  .cta-section{
    padding:64px 0;
  }

  .footer{
    text-align:center;
  }

  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
    font-size:1.5rem;
  }
}

@media (max-width: 575.98px){
  .container{
    padding-left:18px;
    padding-right:18px;
  }

  .navbar-brand{
    font-size:1rem;
  }

  .hero h1{
    letter-spacing:-.052em;
  }

  .hero p,
  .section-title p,
  .cta-box p{
    font-size:.98rem;
  }

  .eyebrow{
    width:100%;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }

  .hero-system-image{
    width:112%;
    max-width:none;
    margin-left:-6%;
    margin-right:-6%;
  }

  .hero-image-glow{
    width:92%;
    height:46%;
  }

  .module-row{
    gap:12px;
  }

  .module-row i{
    flex-basis:42px;
    width:42px;
    height:42px;
    border-radius:14px;
  }

  .cta-box{
    border-radius:26px;
  }

  .cta-box .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}