/* =========================
   BASE
   ========================= */
   *{
    padding:0;
    margin:0;
    font-family:"Poppins", serif;
    font-weight:400;
    font-style:normal;
    box-sizing:border-box;
  }
  
  body{
    padding-top:1px;
  }
  
  /* =========================
     VARIABLES
     ========================= */
  :root{
    --nl-green:#008180;
    --nl-orange:#d87625;
    --nl-ink:#1f2b2b;
    --nl-muted:#667575;
    --nl-line: rgba(0,0,0,.08);
    --nl-shadow: 0 14px 40px rgba(0,0,0,.18);
  }
  
  /* =========================
     NAVBAR
     ========================= */
  header{
    position:relative;
    z-index:999;
  }
  
  nav.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    background-color:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
  }
  
  nav .container{
    padding:5px 0px;
  }
  
  .navbar img{
    width:160px;
  }
  
  .custom-navbar{
    position:sticky;
    top:0;
    width:100%;
    z-index:9999;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
  }
  
  /* Espaciador opcional */
  .navbar-space{
    height:80px;
  }
  
  /* Efecto cuando scrollea (si usas <header>) */
  .scrolled .custom-navbar{
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    transition:all 0.3s ease-in-out;
  }
  
  .navbar-nav .nav-item{
    margin-left:25px;
  }
  
  .navbar-nav .nav-item a{
    color:var(--nl-green);
  }
  
  /* =========================
     NAVBAR MOBILE – NO PEGADO AL BORDE
     ========================= */
  @media (max-width: 991.98px){
    nav.navbar .container{
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  
    .navbar-brand{
      margin-right: 10px;
    }
  
    .nl-burger{
      margin-left: 10px;
    }
  }
  
  @media (max-width: 360px){
    nav.navbar .container{
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }
  
  /* =========================
     HOVER / ACTIVE UNDERLINE
     ========================= */
  .animado .nav-link{
    position:relative;
    display:inline-block;
    color:#000;
    transition:color 0.3s ease;
  }
  
  .animado .nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:5px;
    background-color:var(--nl-green);
    transition:width 0.3s ease;
  }
  
  .animado .nav-link:hover::after{
    width:50%;
  }
  
  .animado .nav-link.active::after{
    width:100%;
  }
  
  .animado .nav-link.active{
    color:var(--nl-green) !important;
  }
  
  /* =========================
     BOTÓN "PRUEBA 15 DÍAS"
     ========================= */
  .btn-contacto a{
    color:var(--nl-orange) !important;
  }
  
  .btn-contacto{
    display:inline-block;
    text-decoration:none;
    border:2px solid var(--nl-orange);
    color:var(--nl-orange);
    border-radius:10px;
    padding:2px 5px;
    font-weight:600;
    transition:all 0.2s ease;
    position:relative;
    overflow:hidden;
    z-index:1;
    background-color:#fff;
    font-size:13px;
  }
  
  .btn-contacto::before{
    content:"";
    position:absolute;
    width:0%;
    height:100%;
    top:0;
    left:0;
    background-color:var(--nl-orange);
    z-index:-1;
    transition:width 0.4s ease;
  }
  
  .btn-contacto:hover::before{
    width:100%;
  }
  
  .btn-contacto:hover{
    color:#fff;
    box-shadow:0 6px 12px rgba(129, 52, 0, 0.3);
    border-color:var(--nl-orange);
  }
  
  .btn-contacto a:hover{
    color:#fff !important;
  }
  
  /* =========================
     DIVIDER
     ========================= */
  .nav-item.divider{
    display:flex;
    align-items:center;
    margin-inline-start:45px;
  }
  
  .nav-item.divider::before{
    content:"";
    display:inline-block;
    width:1px;
    height:30px;
    background-color:var(--nl-green);
  }
  
  /* =========================
     INICIAR SESIÓN (hover reveal)
     ========================= */
  .nav-item.inicio .nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--nl-green);
    font-size:15px;
    font-weight:500;
    transition:all 0.3s ease;
  }
  
  .nav-item.inicio i{
    font-size:25px;
    transition:transform 0.3s ease, color 0.3s ease;
  }
  
  .nav-item.inicio .texto-login{
    max-width:0;
    opacity:0;
    overflow:hidden;
    white-space:nowrap;
    transition:all 0.6s ease;
    color:var(--nl-green);
  }
  
  .nav-item.inicio:hover .texto-login{
    max-width:150px;
    opacity:1;
    margin-left:6px;
  }
  
  .nav-item.inicio:hover i{
    color:var(--nl-orange);
    transform:scale(1.1);
  }
  
  .nav-item.inicio:hover .nav-link{
    color:var(--nl-orange);
  }
  
  /* =========================
     DROPDOWNS (DESKTOP)
     ========================= */
  .dropdown{
    z-index:10;
  }
  
  nav ul li .dropdown{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    display:none;
    justify-content:center;
    padding:40px 60px;
    background-color:#fff;
    box-shadow:0 8px 25px rgba(0, 0, 0, 0.08);
    border-radius:0 0 16px 16px;
    opacity:0;
    transform:translateY(-20px) scale(0.98);
    transition:all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events:none;
  }
  
  nav ul li.has-dropdown.open .dropdown{
    display:flex;
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  
  /* Grid interno de Productos */
  .dropdown-container{
    display:grid;
    grid-template-columns:20% 50% 30%;
    gap:30px;
    width:100%;
    max-width:1200px;
    align-items:center;
  }
  
  /* Sidebar */
  .dropdown-sidebar{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .dropdown-sidebar button{
    background:none;
    border:none;
    text-align:left;
    padding:10px 15px;
    font-size:15px;
    color:#333;
    cursor:pointer;
    border-radius:6px;
    transition:all 0.3s ease;
  }
  
  .dropdown-sidebar .nomilinea-btn:hover,
  .dropdown-sidebar .nomilinea-btn.active{
    background-color:#eaf7f7;
    color:var(--nl-green);
    font-weight:600;
  }
  
  .dropdown-sidebar .contalinea-btn:hover,
  .dropdown-sidebar .contalinea-btn.active{
    background-color:#0078c5;
    color:#fff;
    font-weight:600;
  }
  
  .dropdown-sidebar .factulinea-btn:hover,
  .dropdown-sidebar .factulinea-btn.active{
    background-color:#0078c5;
    color:#fff;
    font-weight:600;
  }
  
  .dropdown-sidebar button:hover,
  .dropdown-sidebar button.active{
    transform:translateX(5px);
  }
  
  /* Contenido central */
  .dropdown-main{
    position:relative;
  }
  
  .dropdown-content{
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    pointer-events:none;
  }
  
  .dropdown-content.active{
    position:relative;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  
  .dropdown-content img{
    width:100%;
    max-width:110px;
    margin-bottom:15px;
    transition:transform 0.4s ease;
  }
  
  /* ✅ ANTES: .dropdown-content h4 */
  .dropdown-content .dd-title{
    color:var(--nl-green);
    margin-bottom:6px;
    font-weight:600;
    font-size:18px;
  }
  
  .dropdown-content p{
    color:#555;
    font-size:14px;
    line-height:1.5;
    margin-bottom:10px;
  }
  
  /* CTA minimalista */
  .dropdown-content .dropdown-cta{
    margin-top:4px;
  }
  
  .dropdown-content .btn-cta-contrata{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:none;
    background:none;
    font-size:14px;
    font-weight:500;
    color:var(--nl-green);
    cursor:pointer;
    text-decoration:none;
    transition:color 0.25s ease, transform 0.25s ease;
  }
  
  .dropdown-content .btn-cta-contrata::after{
    content:"→";
    font-size:14px;
    transition:transform 0.25s ease;
  }
  
  .dropdown-content .btn-cta-contrata:hover{
    color:var(--nl-orange);
    transform:translateX(6px);
  }
  
  .dropdown-content .btn-cta-contrata:hover::after{
    transform:translateX(2px);
  }
  
  /* Bullets derecha */
  .dropdown-links ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  
  .dropdown-links li{
    margin-bottom:10px;
    color:var(--nl-green);
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    transition:all 0.3s ease;
  }
  
  .dropdown-links i{
    font-size:18px;
  }
  
  .dropdown-links li:hover{
    color:var(--nl-orange);
    transform:translateX(6px);
  }
  
  /* =========================
     DROPDOWN: RECURSOS
     ========================= */
  .nav-resources{
    width:100%;
    max-width:980px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  
  /* ✅ ANTES: .nav-resources-head h3 */
  .nav-resources-head .nav-resources-title{
    font-size:1.4rem;
    font-weight:600;
    color:var(--nl-green);
    margin-bottom:6px;
  }
  
  .nav-resources-head p{
    font-size:0.95rem;
    color:#555;
    margin:0;
  }
  
  .nav-resources-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:40px;
    row-gap:24px;
  }
  
  .nav-res-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    text-decoration:none;
    padding:10px 8px;
    border-radius:12px;
    transition:all 0.25s ease;
    background-color:transparent;
  }
  
  .nav-res-item:hover{
    background-color:#f7faf9;
    transform:translateY(-2px);
  }
  
  /* ✅ ANTES: .nav-res-item:hover .nav-res-body h4 */
  .nav-res-item:hover .nav-res-body .nav-res-title{
    color:var(--nl-orange);
  }
  
  .nav-res-icon{
    width:40px;
    height:40px;
    border-radius:999px;
    background-color:rgba(216, 118, 37, 0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--nl-orange);
    font-size:1.4rem;
  }
  
  /* ✅ ANTES: .nav-res-body h4 */
  .nav-res-body .nav-res-title{
    margin:0 0 4px;
    font-size:1rem;
    font-weight:600;
    color:var(--nl-green);
  }
  
  .nav-res-body p{
    margin:0;
    font-size:0.9rem;
    line-height:1.4;
    color:#666;
  }
  
  @media (max-width: 360px){
    .nav-resources{ gap:18px; padding-inline:4px; }
    .nav-resources-head .nav-resources-title{ font-size:1.08rem; line-height:1.2; }
    .nav-resources-head p{ font-size:0.83rem; line-height:1.35; }
    .nav-resources-grid{ grid-template-columns:1fr; row-gap:14px; }
    .nav-res-icon{ width:38px; height:38px; font-size:1.25rem; }
    .nav-res-body .nav-res-title{ font-size:0.93rem; margin-bottom:2px; }
    .nav-res-body p{ font-size:0.82rem; line-height:1.35; }
    .nav-res-item{ gap:12px; padding:8px 2px; }
  }
  
  @media (max-width: 992px){
    .nav-resources-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      column-gap:24px;
    }
    nav ul li.has-dropdown .dropdown{
      padding:28px 20px;
    }
  }
  
  @media (max-width: 576px){
    .nav-resources-grid{
      grid-template-columns:1fr;
      row-gap:18px;
    }
    .nav-resources-head .nav-resources-title{ font-size:1.2rem; }
    .nav-resources-head p{ font-size:0.9rem; }
    .nav-res-item{ padding:8px 4px; }
    nav ul li.has-dropdown .dropdown{
      padding:22px 14px;
    }
  }
  
  /* =========================
     DROPDOWN: NOSOTROS
     ========================= */
  .has-dropdown-about .dropdown-about{
    padding:24px 32px;
  }
  
  .nl-about-inner{
    width:100%;
    max-width:1120px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  
  .nl-about-head{
    border-radius:18px;
    padding:16px 22px;
    background-color:#fff;
  }
  
  .nl-about-head-main{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
  }
  
  /* ✅ ANTES: .nl-about-head h3 */
  .nl-about-head .nl-about-head-title{
    margin:0;
    font-size:1.4rem;
    font-weight:600;
    color:var(--nl-green);
  }
  
  .nl-about-head p{
    margin:0;
    font-size:0.95rem;
    color:#4a4f57;
  }
  
  .nl-about-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:32px;
  }
  
  .nl-about-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    text-decoration:none;
    padding:10px 4px;
    border-radius:14px;
    transition:all 0.25s ease;
  }
  
  .nl-about-item:hover{
    background-color:#f7fafb;
    transform:translateY(-2px);
  }
  
  .nl-about-icon{
    width:44px;
    height:44px;
    border-radius:999px;
    background-color:#ffe9d7;
    color:var(--nl-orange);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:1.4rem;
  }
  
  /* ✅ ANTES: .nl-about-copy h4 */
  .nl-about-copy .nl-about-title{
    margin:0 0 4px;
    font-size:1rem;
    font-weight:600;
    color:var(--nl-green);
  }
  
  .nl-about-copy p{
    margin:0;
    font-size:0.9rem;
    color:#4a4f57;
    line-height:1.5;
  }
  
  /* ✅ ANTES: .nl-about-item:hover .nl-about-copy h4 */
  .nl-about-item:hover .nl-about-copy .nl-about-title{
    color:var(--nl-orange);
  }
  
  @media (max-width: 992px){
    .nl-about-grid{ gap:20px; }
    .nl-about-head{ padding:14px 18px; }
    .nl-about-head .nl-about-head-title{ font-size:1.15rem; }
  }
  
  @media (max-width: 768px){
    .has-dropdown-about .dropdown-about{ padding:18px 16px; }
    .nl-about-inner{ gap:18px; }
    .nl-about-grid{ grid-template-columns:1fr; gap:16px; }
    .nl-about-item{ padding:10px 8px; }
  }
  
  @media (max-width: 480px){
    .nl-about-head{ padding:12px 14px; }
    .nl-about-head-main{ align-items:flex-start; }
    .nl-about-head .nl-about-head-title{ font-size:1.05rem; }
    .nl-about-head p{ font-size:0.88rem; }
    .nl-about-icon{ width:40px; height:40px; font-size:1.25rem; }
    .nl-about-copy .nl-about-title{ font-size:0.95rem; }
    .nl-about-copy p{ font-size:0.85rem; }
  }
  
  /* =========================
     RESPONSIVE DROPDOWN BASE
     ========================= */
  @media (max-width: 992px){
    nav ul li .dropdown{
      padding:24px 18px;
    }
    .dropdown-container{
      grid-template-columns:1fr;
      gap:20px;
    }
    .dropdown-main{ order:1; }
    .dropdown-links{ order:2; }
    .dropdown-content{ position:relative; }
  }
  
  /* =========================
     MOBILE NAV OVERLAY — NOMILINEA
     ========================= */
  
  /* Burger */
  .nl-burger{
    display:none;
    width:44px;
    height:44px;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    border-radius:14px;
    place-items:center;
    padding:0;
    position:relative;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .nl-burger:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,.10);
    border-color:rgba(0,129,128,.22);
  }
  
  .nl-burger i{
    font-size:28px;
    color:#3f4c4c;
  }
  
  /* Overlay */
  .nl-mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.28);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:2147483000;
  }
  
  /* Panel */
  .nl-mobile-panel{
    position:absolute;
    top:0;
    right:0;
    width:min(520px, 100%);
    height:100dvh;
    background:#fff;
    box-shadow:var(--nl-shadow);
    transform:translateX(18px);
    opacity:0;
    transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
    display:flex;
    flex-direction:column;
  }
  
  /* Abierto */
  body.nl-lock .nl-mobile-overlay{
    opacity:1;
    pointer-events:auto;
  }
  
  body.nl-lock .nl-mobile-panel{
    transform:translateX(0);
    opacity:1;
  }
  
  /* Header panel */
  .nl-mhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px;
    border-bottom:1px solid var(--nl-line);
  }
  
  .nl-mbrand img{
    height:28px;
    width:auto;
    display:block;
  }
  
  .nl-close{
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    display:grid;
    place-items:center;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  
  .nl-close i{
    font-size:26px;
    color:#4c5a5a;
  }
  
  .nl-close:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,.10);
  }
  
  /* Views */
  .nl-mview{
    display:none;
    padding:12px 14px 14px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }
  
  .nl-mview.is-active{
    display:block;
  }
  
  /* Lista */
  .nl-mlist{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .nl-mitem{
    width:100%;
    text-decoration:none;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    color:var(--nl-green);
    padding:16px 14px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:14px;
    transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  
  .nl-mitem i{
    font-size:22px;
    color:var(--nl-green);
  }
  
  .nl-mitem:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(0,0,0,.10);
    border-color:rgba(0,129,128,.20);
    background: rgba(0,129,128,.06);
  }
  
  .nl-mitem:active{
    background: rgba(0,129,128,.10);
  }
  
  /* Lock scroll */
  body.nl-lock{
    overflow:hidden !important;
    height:100dvh;
  }
  
  /* Solo mobile: mostrar burger y esconder desktop nav */
  @media (max-width: 991.98px){
    .nl-burger{ display:grid; }
    .custom-navbar .navbar-collapse{ display:none !important; }
  }
  
  /* =========================
     MOBILE MENU – CTA BUTTONS
     ========================= */
  .nl-mcta{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  
  .nl-mcta .nl-mbtn{
    width:100%;
    max-width:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 18px;
    border-radius:18px;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    letter-spacing:.02em;
    transition:transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
  }
  
  .nl-mcta .nl-mbtn-solid{
    background: var(--nl-green);
    color:#fff;
    border:none;
    box-shadow: 0 10px 22px rgba(0,129,128,.25);
  }
  
  .nl-mcta .nl-mbtn-solid:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,129,128,.35);
  }
  
  .nl-mcta .nl-mbtn-outline{
    background:#fff;
    color:#d87625;
    border:2px solid #d87625;
  }
  
  .nl-mcta .nl-mbtn-outline:hover{
    background: rgba(216, 118, 37, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(216, 118, 37, .25);
  }
  
  .nl-mcta .nl-mbtn i{
    font-size:18px;
  }
  
  @media (max-width: 360px){
    .nl-mcta .nl-mbtn{
      max-width:100%;
      font-size:14px;
      border-radius:16px;
    }
  }
  
  /* =========================
     MOBILE – PRODUCTOS (LOGOS)
     ========================= */
  .nl-product-card img,
  .nl-mitem-brand img{
    max-height:26px;
    width:auto;
    max-width:100%;
    object-fit:contain;
  }
  
  .nl-product-card{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .nl-mitem-brand{
    align-items:center;
    padding:14px 16px;
  }
  
  .nl-brandrow{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  /* =========================
     MOBILE – PRODUCTOS INTRO CARD
     ========================= */
  .nl-products-intro{
    margin:8px 0 16px;
  }
  
  .nl-products-intro-card{
    background:#fff;
    border-radius:18px;
    padding:14px 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
  }
  
  .nl-products-intro-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
  }
  
  /* ✅ ANTES: .nl-products-intro-head h4 */
  .nl-products-intro-head .nl-products-intro-title{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:var(--nl-green);
    letter-spacing:.02em;
  }
  
  .nl-products-intro-head i{
    font-size:20px;
    color:var(--nl-orange);
  }
  
  .nl-products-intro-card p{
    margin:0;
    font-size:13px;
    line-height:1.45;
    color:#6a7777;
  }
  
  @media (max-width: 360px){
    .nl-products-intro-card{ padding:12px 14px; }
    .nl-products-intro-head .nl-products-intro-title{ font-size:14px; }
    .nl-products-intro-card p{ font-size:12.5px; }
  }
  
  /* =========================
     MOBILE – BACK BUTTON
     ========================= */
  .nl-msubhead{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  
  .nl-back{
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    display:grid;
    place-items:center;
    transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  }
  
  .nl-back i{
    font-size:22px;
    color:var(--nl-green);
  }
  
  .nl-back:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    border-color: rgba(0,129,128,.25);
  }
  
  /* ✅ ANTES: .nl-msubhead h3 */
  .nl-msubhead .nl-msubhead-title{
    font-size:22px;
    color: var(--nl-green);
  }
  
  /* =========================
     PRODUCT VIEW (Nomilinea)
     ========================= */
  .nl-product-card--simple{
    border:none;
    border-radius:22px;
    overflow:visible;
    background:transparent;
  }
  
  .nl-product-hero{
    display:block;
    text-decoration:none;
    border:none;
    border-radius:18px;
    padding:16px 16px;
    margin:6px 0 16px;
    background:#fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
  }
  
  .nl-product-hero-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  
  .nl-product-hero-logo{
    height:28px;
    width:auto;
    display:block;
  }
  
  .nl-product-hero i{
    font-size:24px;
    color:var(--nl-orange);
  }
  
  .nl-product-hero-desc{
    margin:0;
    color:#8a9393;
    line-height:1.45;
    font-size:14px;
  }
  
  .nl-feature-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:2px 0 0;
  }
  
  .nl-feature-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    text-decoration:none;
    background:#fff;
    border:none;
    border-radius:18px;
    padding:14px 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    transition: transform .14s ease, box-shadow .18s ease;
  }
  
  .nl-feature-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  
  .nl-feature-title{
    color:var(--nl-green);
    font-weight:600;
    font-size:18px;
    line-height:1.15;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .nl-feature-ico{
    width:48px;
    height:48px;
    border-radius:16px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }
  
  .nl-feature-ico i{
    font-size:24px;
    color:var(--nl-orange);
  }
  
  .nl-feature-item .nl-feature-chevron{
    font-size:24px;
    color:#7b8787;
    flex-shrink:0;
  }
  
  .nl-feature-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 46px rgba(0,0,0,.12);
  }
  
  /* CTA secundario: Ver más */
  .nl-feature-more{
    display:flex;
    justify-content:center;
    padding:22px 0 8px;
  }
  
  .nl-more-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 22px;
    border-radius:18px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    text-decoration:none;
    color:#fff;
    background: rgba(0,129,128,.85);
    border:none;
    box-shadow: 0 14px 40px rgba(0,129,128,.35);
    transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease;
  }
  
  .nl-more-btn i{
    font-size:20px;
    color:#fff;
  }
  
  .nl-more-btn:hover{
    transform: translateY(-2px);
    background: rgba(0,129,128,1);
    box-shadow: 0 22px 56px rgba(0,129,128,.45);
    color:#fff;
  }
  
  .nl-more-btn:active{
    transform: translateY(0);
    box-shadow: 0 10px 26px rgba(0,129,128,.30);
  }
  
  @media (max-width: 360px){
    .nl-feature-title{ font-size:16px; }
    .nl-feature-ico{ width:46px; height:46px; border-radius:14px; }
    .nl-product-hero-desc{ font-size:13px; }
    .nl-more-btn{
      width:100%;
      justify-content:center;
      font-size:14px;
      border-radius:16px;
    }
  }
  
  /* =========================
     BACK BUTTON – COMPACT (Nomilinea)
     ========================= */
  .nl-back-wide{
    width:44px;
    height:44px;
    margin:6px 0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:none;
    border-radius:14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    cursor:pointer;
    transition:all .22s ease;
    align-self:flex-start;
  }
  
  .nl-back-wide i{
    font-size:26px;
    color:var(--nl-green);
  }
  
  .nl-back-wide:hover{
    transform:translateX(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
  }
  
  @media (max-width: 360px){
    .nl-back-wide{
      width:40px;
      height:40px;
      border-radius:12px;
    }
    .nl-back-wide i{
      font-size:24px;
    }
  }
  
  /* =========================
     MOBILE VIEW: RESOURCES + ABOUT (cards)
     ========================= */
  .nl-msection{
    padding-top:6px;
  }
  
  .nl-mdesc{
    margin:6px 2px 14px;
    color:#5c6a6a;
    font-size:13px;
    line-height:1.45;
  }
  
  .nl-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  .nl-card{
    width:100%;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
  }
  
  .nl-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.10);
    border-color: rgba(0,129,128,.22);
  }
  
  .nl-card-ico{
    width:46px;
    height:46px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.06);
    flex-shrink:0;
  }
  
  .nl-card-ico i{
    font-size:22px;
    color:var(--nl-orange);
  }
  
  .nl-card-body{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  
  .nl-card-body strong{
    color:var(--nl-green);
    font-weight:600;
    letter-spacing:.02em;
    font-size:14px;
    line-height:1.15;
  }
  
  .nl-card-body small{
    color:#6a7777;
    font-size:12.5px;
    line-height:1.35;
  }
  
  .nl-card > i{
    margin-left:auto;
    font-size:22px;
    color:#6a7777;
  }
  
  .nl-card:active{
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  
  .nl-mdesc-tight{
    font-size:12.8px;
    line-height:1.45;
    margin-bottom:12px;
  }
  
  .nl-card-about .nl-card-ico{
    background:#fff;
    box-shadow: 0 12px 26px rgba(0,0,0,.10);
  }
  
  /* ================================
     MOBILE CAROUSEL (Hero cards)
     ================================ */
  
  /* Default desktop sigue igual: grid de 3 columnas */
  .hero-carousel .hero-track{
    display: contents; /* en desktop dejamos que tu grid mande */
  }
  
  /* Dots hidden en desktop */
  .hero-dots{
    display: none;
  }
  
  /* ✅ MOBILE: carrusel */
  @media (max-width: 992px){
  
    /* 🔥 separa cards del texto (como tu imagen 2) */
    .hero-cards{
      margin-top: 26px;
      padding-top: 10px;
    }
  
    /* carrusel wrapper */
    .hero-carousel{
      position: relative;
    }
  
    /* el track ahora sí es carrusel */
    .hero-carousel .hero-track{
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 16px 8px 10px;
      scrollbar-width: none;
    }
    .hero-carousel .hero-track::-webkit-scrollbar{
      display: none;
    }
  
    /* cada card es “slide” */
    .hero-carousel .hero-card{
      flex: 0 0 86%;
      max-width: 86%;
      scroll-snap-align: center;
      opacity: 1;
      transform: none !important;
      transition: box-shadow .22s ease, transform .22s ease;
    }
  
    .hero-card-left,
    .hero-card-right,
    .hero-card-center{
      transform: none !important;
    }
  
    .hero-carousel .hero-card:hover{
      transform: translateY(-2px);
    }
  
    .hero-card-vertical .hero-card-body{
      min-height: 320px;
      padding: 120px 20px 24px;
    }
    .hero-card-horizontal .hero-card-body{
      min-height: 300px;
      padding: 132px 20px 24px;
    }
  
    .hero-card-media{
      top: -68px;
      width: min(210px, 68%);
    }
    .hero-card-media-wide{
      top: -92px;
      width: min(720px, 96%);
    }
    .hero-card-img-wide{
      max-height: 240px;
    }
  
    /* ✅ Dots visibles solo en mobile */
    .hero-dots{
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 12px 0 0;
    }
    .hero-dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 0;
      background: rgba(0,129,128,.22);
      transition: transform .18s ease, background-color .18s ease, width .18s ease;
      cursor: pointer;
    }
    .hero-dot.is-active{
      background: rgba(0,129,128,.75);
      width: 20px;
      transform: translateY(-1px);
    }
  }
  
  /* Accesibilidad: reduce motion */
  @media (prefers-reduced-motion: reduce){
    .hero-carousel .hero-track{
      scroll-behavior: auto !important;
    }
  }
  
  @media (max-width: 992px){
    .hero-carousel{ overflow: visible; }
  
    .hero-carousel .hero-track{
      overflow-y: visible;
      padding-top: 86px;
      padding-bottom: 18px;
    }
  
    .hero-carousel .hero-card{ height: auto; }
  
    .hero-cards{ margin-top: 34px; }
  }
  
  @media (max-width: 992px){
    .hero-carousel .hero-card .hero-card-media{
      top: -78px !important;
      width: min(220px, 68%) !important;
      transform: translateX(-50%) !important;
    }
  
    .hero-carousel .hero-card .hero-card-media-wide{
      top: -78px !important;
      width: min(520px, 92%) !important;
      transform: translateX(-50%) !important;
    }
  
    .hero-carousel .hero-card .hero-card-body{
      padding-top: 130px !important;
      min-height: 330px !important;
    }
  
    .hero-carousel .hero-card .hero-card-img-wide{
      max-height: 230px !important;
      width: 100%;
      object-fit: contain;
    }
  
    .hero-card-right .hero-card-media{
      top: -78px !important;
      width: min(220px, 68%) !important;
      transform: translateX(-50%) !important;
    }
  }
  
  @media (max-width: 360px){
    .hero-carousel .hero-track{ padding-top: 74px; }
  
    .hero-carousel .hero-card .hero-card-body{
      padding-top: 118px !important;
      min-height: 300px !important;
    }
  
    .hero-carousel .hero-card-center .hero-card-media-wide{
      top: -72px !important;
      width: min(520px, 92%) !important;
    }
    .hero-carousel .hero-card-center .hero-card-img-wide{
      max-height: 210px !important;
    }
  
    .hero-carousel .hero-card-right .hero-card-media{
      top: -68px !important;
      width: min(170px, 56%) !important;
      transform: translateX(-50%) !important;
    }
    .hero-carousel .hero-card-right .hero-card-img{
      max-height: 210px !important;
      object-fit: contain;
    }
  }
  
  @media (max-width: 320px){
    .hero-carousel .hero-card .hero-card-body{
      padding-top: 112px !important;
      min-height: 290px !important;
    }
  
    .hero-carousel .hero-card-right .hero-card-media{
      width: min(155px, 54%) !important;
      top: -64px !important;
    }
  
    .hero-carousel .hero-card-right .hero-card-img{
      max-height: 190px !important;
    }
  
    .hero-carousel .hero-card-center .hero-card-img-wide{
      max-height: 195px !important;
    }
  }
  
  /* =========================
     ORBS: en pantallas chicas estorban
     ========================= */
  @media (max-width: 360px){
    .hero-orbs .orb{ display:none; }
    .hero-orbs .orb-1,
    .hero-orbs .orb-5,
    .hero-orbs .orb-6{
      display:grid;
    }
  
    .hero-orbs .orb-1{ left: 8%; top: 16%; }
    .hero-orbs .orb-5{ right: 8%; top: 18%; }
    .hero-orbs .orb-6{ right: 10%; top: 34%; }
  }
  
  @media (max-width: 320px){
    .hero-orbs .orb{ display:none; }
    .hero-orbs .orb-1,
    .hero-orbs .orb-5{
      display:grid;
    }
  
    .hero-orbs .orb-1{ left: 6%; top: 18%; }
    .hero-orbs .orb-5{ right: 6%; top: 10%; }
  }
  
  /* ============================================================
     ORBS HARD OVERRIDE (<= 425px) - SOLO 3
     ============================================================ */
  @media (max-width: 425px){
    .hero-home .hero-orbs .orb{
      display: none !important;
    }
  
    .hero-home .hero-orbs .orb-1,
    .hero-home .hero-orbs .orb-5,
    .hero-home .hero-orbs .orb-6{
      display: grid !important;
    }
  
    .hero-home .hero-orbs .orb-1{ left: 10%; top: 46%; }
    .hero-home .hero-orbs .orb-5{ right: 10%; top: 48%; }
    .hero-home .hero-orbs .orb-6{ right: 16%; top: 62%; }
  }
  
  /* ============================================================
     ✅ FIX LAYOUT: HERO + SECCIÓN NÚMEROS
     Evita que "Nuestros números" se suba encima del hero/cards
     ============================================================ */
  .hero-home{
    padding-bottom: 120px; /* ✅ deja piso para las cards y antes de números */
  }
  
  .hero-cards{
    margin-bottom: 44px;   /* ✅ gap antes de la siguiente sección */
  }
  
  /* =========================
     NUESTROS NÚMEROS (Nomilinea)
     ========================= */
  .nl-numbers{
    background:#fff;
    padding: 80px 0 120px;  /* ✅ aire arriba/abajo */
    margin-top: 0;          /* ✅ NO overlap */
    position: relative;
    z-index: 1;
    scroll-margin-top: 110px; /* navbar sticky al ir a #numeros */
  }
  
  .nln-container{
    max-width: min(1200px, 92vw);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 28px);
  }
  
  /* Head */
  .nln-head{
    text-align:center;
    margin-bottom: clamp(28px, 6vw, 56px);
  }
  
  .nln-head h2{
    font-weight: 800;
    color: var(--nl-green);
    font-size: clamp(36px, 5vw, 50px);
    line-height: 1.08;
    margin: 0 0 10px;
  }
  
  .nln-head p{
    margin: 0;
    color: var(--nl-muted);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.45;
  }
  
  /* Grid */
  .nln-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: clamp(14px, 2.4vw, 24px);
  }
  
  /* Responsive */
  @media (max-width: 1100px){
    .nln-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 992px){
    .nln-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .nln-grid{ grid-template-columns: 1fr; }
  }
  
  /* Card */
  .nln-card{
    background:#fff;
    border-radius: 18px;
    padding: clamp(20px, 4vw, 28px);
    box-shadow: 0 14px 36px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.06);
    text-align:center;
  
    opacity: 0;
    transform: translateY(14px) scale(.98);
  
    transition:
      transform .45s cubic-bezier(.18,.88,.34,1.1),
      opacity .45s ease,
      box-shadow .25s ease;
    will-change: transform, opacity;
  }
  
  .nln-card:hover{
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 22px 60px rgba(0,0,0,.12);
  }
  
  /* Reveal state */
  .nln-card.is-in{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* Value + label */
  .nln-value{
    color: var(--nl-orange);
    font-weight: 900;
    letter-spacing: .5px;
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  
  .nln-label{
    color: var(--nl-ink);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.3;
  }
  
  /* Reveal head */
  .nln-head .reveal{
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transition:
      opacity .55s ease,
      transform .55s cubic-bezier(.18,.88,.34,1.13);
    will-change: opacity, transform;
    transition-delay: var(--d, 0ms);
  }
  
  .nln-head .reveal.in{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .nln-card,
    .nln-head .reveal{
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }
  
  /* =========================================
   FIX ESPACIO ENTRE HERO Y NÚMEROS (MOBILE)
   ========================================= */
  @media (max-width: 992px){
  
    /* el hero estaba dejando demasiado piso */
    .hero-home{
      padding-bottom: 28px !important; /* antes 120 */
    }
  
    /* aire normal entre el carrusel y la siguiente sección */
    .hero-cards{
      margin-bottom: 16px !important;  /* antes 44 */
      margin-top: 18px !important;
    }
  
    /* la sección de números estaba arrancando muy abajo */
    .nl-numbers{
      padding-top: 34px !important;    /* antes 80 */
      padding-bottom: 70px !important; /* ajusta si quieres */
    }
  }
  
  /* extra tight (320-360) */
  @media (max-width: 360px){
    .hero-home{ padding-bottom: 18px !important; }
    .hero-cards{ margin-bottom: 12px !important; }
    .nl-numbers{ padding-top: 26px !important; }
  }