/* ============================================================
   FARMASOFT — hoja de estilos
   Paleta: navy + azul/verde corporativo, acentos teal del logo
   ============================================================ */
:root{
  --navy:#093459;
  --navy-2:#0a1a3a;
  --azul:#0B4EA2;
  --azul-osc:#0A2E63;
  --verde:#2DB84D;
  --verde-osc:#239b40;
  --teal:#16b8c7;
  --gris:#F4F7FC;          /* gris casi blanco para alternar secciones */
  --linea:#E6ECF4;
  --texto:#172435;
  --suave:#5b6c84;
  --wsp:#25D366;
}

body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--texto);overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Sora',sans-serif;letter-spacing:-.02em}
.lic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}

.text-azul-osc{color:var(--azul-osc)!important}
.text-suave{color:var(--suave)!important}
.bg-gris{background:var(--gris)!important}

.section{padding:5.5rem 0;position:relative}
.section.bg-gris{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.lead-sub{color:var(--suave);font-size:1.08rem}

/* encabezado de seccion estilo editorial */
.sec-kicker{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.sec-kicker .num{font-family:'Sora';font-weight:800;font-size:.85rem;color:var(--verde)}
.sec-kicker .ln{height:1px;width:42px;background:var(--verde);opacity:.5}
.sec-kicker .tx{font-family:'Sora';font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul)}
.sec-title{font-weight:800;font-size:clamp(1.7rem,3.1vw,2.45rem);color:var(--azul-osc);line-height:1.13}

/* ---------- BOTONES ---------- */
.btn-fs{background:var(--verde);color:#fff;font-weight:600;border-radius:50rem;padding:.72rem 1.7rem;border:none}
.btn-fs:hover,.btn-fs:focus{background:var(--verde-osc);color:#fff}
.btn-fs-outline{border:2px solid #c9dcf2;color:var(--azul);font-weight:600;border-radius:50rem;padding:.66rem 1.6rem;background:#fff}
.btn-fs-outline:hover{border-color:var(--azul);color:var(--azul);background:#f4f8ff}
.btn-fs-light{background:#fff;color:var(--azul-osc);font-weight:600;border-radius:50rem;padding:.72rem 1.7rem;border:none}
.btn-fs-light:hover{background:#eef3fb;color:var(--azul-osc)}

/* ---------- NAVBAR (oscuro) ---------- */
.navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.navbar .navbar-brand img{height: 60px;width:auto}
.navbar .nav-link{font-weight:500;color:var(--suave)}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--azul)}
.navbar .navbar-toggler{border-color:var(--linea)}
.navbar .navbar-toggler-icon{filter:none}
section[id]{scroll-margin-top:84px;}

/* ---------- HERO / SLIDER ---------- */
.hero-carousel{/* margin-top:71px; */background:var(--navy)}
.hero-carousel img{width:100%;height:auto;display:block}
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next{width:6%;opacity:.8}
.hero-carousel .carousel-control-prev:hover,.hero-carousel .carousel-control-next:hover{opacity:1}
.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon{
  background-color:rgba(11,78,162,.65);border-radius:50%;padding:20px;background-size:40% 40%}
.hero-carousel .carousel-indicators [data-bs-target]{width:28px;height:4px;border-radius:4px}

/* ---------- PARALLAX STATS ---------- */
.parallax{position:relative;isolation:isolate;color:#fff;padding:5rem 0;overflow:hidden}
.parallax::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/banner-03.jpg") center/cover fixed;}
.parallax::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,12,36,.86)}
.stat .n{font-family:'Sora';font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:#fff}
.stat .n span{color:var(--verde)}
.stat .l{color:#b9c8de;font-size:.95rem;margin-top:.35rem}
.stat .bar{width:38px;height:3px;background:var(--verde);border-radius:3px;margin:0 auto .9rem}

/* ---------- MODULOS ---------- */
.mod-card{background:#fff;border-radius:16px;border:1px solid var(--linea);height:100%;
  border-left:3px solid transparent;transition:transform .2s,border-color .2s,box-shadow .2s}
.mod-card:hover{transform:translateY(-4px);border-left-color:var(--verde);box-shadow:0 14px 34px rgba(10,46,99,.1)}
.fs-ico-solid{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;
  background:var(--azul);color:#fff;flex:0 0 auto}
.mod-num{font-family:'Sora';font-weight:800;color:var(--linea);font-size:1.5rem;line-height:1}
.mod-list{list-style:none;padding:0;margin:0}
.mod-list li{position:relative;padding-left:20px;color:var(--suave);font-size:.92rem;margin:.4rem 0}
.mod-list li::before{content:"";position:absolute;left:0;top:.55rem;width:7px;height:7px;border-radius:50%;background:var(--verde)}

/* ---------- VERSIONES ---------- */
.ver{background:#fff;border:1px solid var(--linea);border-radius:20px;height:100%;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s}
.ver:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(10,46,99,.14)}
.ver.feat{background:var(--navy);border-color:var(--navy);color:#fff}
.ver.feat .ver-sub,.ver.feat .ver-li{color:#b9c8de}
.ver-sub{color:var(--suave);font-size:.92rem;min-height:42px}
.ver-cap{font-family:'Sora';font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--verde)}
.ver-list{list-style:none;padding:0;margin:0;flex:1}
.ver-li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;margin:.55rem 0}
.ver-li .lic{color:var(--verde);margin-top:.15rem}
.ver.feat .ver-li .lic{color:#7ee29a}
.ver-tag-wrap{min-height:26px}
.ver-badge{background:var(--verde);color:#fff;font-family:'Sora';font-weight:700;font-size:.68rem;
  letter-spacing:.05em;padding:.3rem .7rem;border-radius:50rem}

/* ---------- BENEFICIOS ---------- */
.benefit-row{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--linea)}
.benefit-row:last-child{border-bottom:none}
.benefit-row .bn{font-family:'Sora';font-weight:800;font-size:1.1rem;color:var(--verde);min-width:34px}
.benefit-row h4{font-family:'Sora';font-weight:700;font-size:1.05rem;color:var(--azul-osc);margin-bottom:.15rem}
.benefit-row p{color:var(--suave);margin:0;font-size:.95rem}

/* ---------- FAQ ---------- */
.faq .accordion-item{border:1px solid var(--linea);border-radius:14px!important;margin-bottom:.8rem;overflow:hidden}
.faq .accordion-button{font-family:'Sora';font-weight:600;color:var(--azul-osc);background:#fff;padding:1.1rem 1.3rem}
.faq .accordion-button:not(.collapsed){color:var(--azul);background:#f4f8ff;box-shadow:none}
.faq .accordion-button:focus{box-shadow:none;border-color:var(--linea)}
.faq .accordion-body{color:var(--suave);padding:0 1.3rem 1.2rem}

/* ---------- CTA FINAL ---------- */
.cta-final{background:var(--navy);border-radius:24px;color:#fff;overflow:hidden}
.cta-final h2{font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem)}
.cta-min{list-style:none;padding:0}
.cta-min li{display:flex;align-items:center;gap:.65rem;margin:.55rem 0;color:#cfe0f4}
.cta-min li .lic{color:#7ee29a}
.form-box{background:#fff;border-radius:18px;color:var(--texto)}
.form-box .form-control,.form-box .form-select{border:1.5px solid var(--linea);border-radius:10px;padding:.62rem .8rem;background:#fcfdff}
.form-box .form-control:focus,.form-box .form-select:focus{border-color:var(--azul);box-shadow:0 0 0 .2rem rgba(11,78,162,.15)}
.form-box label{font-family:'Sora';font-weight:600;font-size:.78rem;color:var(--texto)}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:#9fb4d2}
footer h6{font-family:'Sora';font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}
footer a{color:#9fb4d2;text-decoration:none}
footer a:hover{color:var(--verde)}
footer .ftcontact{display:flex;align-items:center;gap:.6rem}
footer .ftcontact .lic{color:var(--verde)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wsp-float{position:fixed;right:22px;bottom:22px;z-index:1080;width:60px;height:60px;border-radius:50%;
  background:var(--wsp);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .2s ease}
.wsp-float:hover{transform:scale(1.08);color:#fff}
.wsp-float svg{width:32px;height:32px;fill:#fff}
.wsp-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wsp);
  animation:wsp-pulse 2.2s ease-out infinite}
@keyframes wsp-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:767px){
  .section{padding:3.6rem 0}
  .parallax::before{background-attachment:scroll}
  .wsp-float{width:54px;height:54px;right:16px;bottom:16px}
  .wsp-float svg{width:28px;height:28px}
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 0 !important;
}
}

/* ---------- FCARD (por qué) ---------- */
.fcard{background:#fff;border:1px solid var(--linea);border-radius:16px;
  transition:transform .2s ease,box-shadow .2s ease}
.fcard:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,78,162,.1)}
.fcard-ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  font-size:1.4rem;background:rgba(11,78,162,.08);color:var(--azul)}
.fcard-h{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:var(--azul-osc);margin:.5rem 0 .25rem}
.fcard-p{color:var(--suave);font-size:.9rem;margin:0}
.fcard--cta{background:var(--navy);border-color:var(--navy);display:flex;flex-direction:column;justify-content:space-between}
.fcard--cta .fcard-quote{color:#cfe0f4;font-size:1.05rem;font-style:italic;font-family:'Sora',sans-serif;font-weight:600;line-height:1.45}

/* ---------- VER icon ---------- */
.ver-icon{opacity:.85}

/* ---------- INTEGRATION CHIPS ---------- */
.integ-chip{display:flex;align-items:center;background:var(--gris);border-radius:10px;
  padding:.6rem .9rem;font-size:.88rem;font-weight:600;color:var(--azul-osc);height:100%}
.integ-chip .lic{color:var(--verde);flex:none}

/* ---------- DIFCARD ---------- */
.difcard{background:#fff;border:1px solid var(--linea);border-radius:14px;
  transition:transform .2s,box-shadow .2s}
.difcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(11,78,162,.09)}
.difcard-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-size:1.25rem;background:rgba(45,184,77,.12);color:var(--verde)}
.difcard-h{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;color:var(--azul-osc);margin:.5rem 0 .2rem}
.difcard-p{color:var(--suave);font-size:.88rem;margin:0}

/* ---------- SERV LIST ---------- */
.serv-list{display:flex;flex-direction:column;gap:.5rem}
.serv-item{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.95rem;color:var(--texto)}
.serv-item .lic{color:var(--verde);flex:none}

/* ---------- MODAL PILLS ---------- */
.modal-pill{border-radius:14px}
.modal-lic-pill{background:#fff;border:1px solid var(--linea)}
.modal-saas-pill{background:var(--navy)}

/* ---------- HERO RESPONSIVE (antes estaba en un <style> dentro de index.html) ---------- */
/* =========================================================
   FIX RESPONSIVE HERO / SLIDER
   Corrige el banner en desktop, tablet y celular.
   Importante: se eliminó el margin-top:-100px que rompía el slider.
========================================================= */

.hero-carousel {
  position: relative;
  width: 100%;
  padding-top: 82px;
  background: #071a35;
  overflow: hidden;
}

.hero-carousel .carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-carousel picture {
  width: 100%;
}

.hero-carousel .carousel-inner {
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
}

.hero-carousel .carousel-item {
  background: #071a35;
}

.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Desktop */
@media (min-width: 992px) {
  .hero-carousel {
    padding-top: 88px;
  }

  .hero-banner-img {
    min-height: 520px;
    max-height: 1000px;
  }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-carousel {
    padding-top: 76px;
  }

  .hero-banner-img {
    width: 100%;
    height: auto;
    min-height: auto;
    object-fit: contain;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 8%;
  }
}

/* Celular */
@media (max-width: 575.98px) {
  .hero-carousel {
    padding-top: 70px;
  }

  .hero-banner-img {
    width: 100%;
    height: auto;
    min-height: auto;
    object-fit: contain;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 12%;
  }

  .hero-carousel .carousel-indicators {
    margin-bottom: .5rem;
  }

  .section {
    padding: 58px 0;
  }

  .sec-title {
    font-size: clamp(1.85rem, 9vw, 2.45rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .lead-sub {
    font-size: .98rem;
    line-height: 1.6;
  }
}