/* =========================
   FOOTER NOMILINEA
   ========================= */
   :root{
    --nl-green:#008180;
    --nl-orange:#d87625;
    --ink:#0e2b2b;
    --muted: rgba(14,43,43,.72);
    --line: rgba(0,0,0,.08);
    --soft: rgba(0,0,0,.06);
  }
  
  .nl-footer{
    background:#fff;
    border-top: 1px solid var(--line);
    padding: 54px 0 26px;
    position: relative;
  }
  
  .nlf-wrap{
    width:min(1120px, calc(100% - 40px));
    margin-inline:auto;
  }
  
  /* ===== CTA CARD (encima) ===== */
  .nlf-cta{
    margin-top: -96px; /* efecto “encima del footer” */
    margin-bottom: 26px;
  }
  
  .nlf-cta-card{
    position: relative;
    overflow: visible; /* ✅ para que los orbes se vean afuera */
    border-radius: 26px;
    padding: clamp(18px, 3.2vw, 28px);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
  
    /* ✅ sin degradado, verde nomi con transparencia */
    background: #00818122;
  }
  
  /* Copy centrado */
  .nlf-cta-copy{
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin-inline: auto;
    text-align: center; /* ✅ centrado */
  }
  
  .nlf-cta-copy h3{
    margin:0 0 10px;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
  }
  
  .nlf-cta-copy p{
    margin:0 0 14px;
    color: rgba(14,43,43,.78);
    line-height: 1.55;
    font-size: 1rem;
  }
  
  /* ✅ Botones: más chicos y en fila */
  .nlf-cta-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .nlf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    padding: 12px 20px;          /* ✅ más pequeño */
    min-width: 0;
    border-radius: 999px;
  
    text-decoration:none;
    font-weight: 700;            /* ✅ */
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
  
    transition: transform .18s ease,
                box-shadow .22s ease,
                filter .22s ease,
                background .22s ease,
                border-color .22s ease;
  
    border: 2px solid transparent;
  }
  
  .nlf-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0,0,0,.14);
    filter: saturate(1.05);
  }
  
  .nlf-btn:active{ transform: translateY(0); }
  
  /* Variantes */
  .nlf-btn-orange{
    background: var(--nl-orange);
    border-color: var(--nl-orange);
    color:#fff;
    box-shadow: 0 14px 24px rgba(216,118,37,.32);
  }
  .nlf-btn-orange:hover{
    background: var(--nl-orange);
    border-color: var(--nl-orange);
    box-shadow: 0 18px 30px rgba(216,118,37,.42);
  }
  

  /* ✅ Botón verde sólido (igual vibe hover que el naranja) */
.nlf-btn-green{
  background: var(--nl-green);
  border-color: var(--nl-green);
  color:#fff;
  box-shadow: 0 14px 24px rgba(0,129,128,.28);
}

.nlf-btn-green:hover{
  background: var(--nl-green);
  border-color: var(--nl-green);
  box-shadow: 0 18px 30px rgba(0,129,128,.38);
}

  
  /* Esferitas (afuera) */
  .nlf-cta-orbs{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index: 1;
  }
  
  .nlf-orb{
    position:absolute;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display:grid;
    place-items:center;
  
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
  
    will-change: transform;
    transform: translate3d(var(--tx,0px), var(--ty,0px), 0);
  }
  
  .nlf-orb i{
    font-size: 24px;
    color: rgba(14,43,43,.88);
  }
  
  /* ✅ 4 esquinas flotando afuera */
  .nlf-orb.o1{ left: -16px; top: -16px; }
  .nlf-orb.o2{ right: -16px; top: -16px; }
  .nlf-orb.o3{ left: -16px; bottom: -16px; }
  .nlf-orb.o4{ right: -16px; bottom: -16px; }
  
  /* ===== Footer body ===== */
  .nlf-body{
    display:grid;
    grid-template-columns: 1.1fr 1.4fr;
    gap: 28px;
    padding-top: 18px;
  }
  
  .nlf-brand{
    display:flex;
    flex-direction:column;
    align-items: center;
    text-align:center;
  }
  
  .nlf-logo{
    height: 34px;
    width:auto;
    margin-bottom: 10px;
  }
  
  .nlf-tagline{
    margin:0 0 14px;
    max-width: 420px;
    color: rgba(14,43,43,.70);
    line-height: 1.55;
    font-size: .98rem;
  }
  
  /* Social */
  .nlf-social{
    display:flex;
    gap: 10px;
    justify-content:center;
  }
  
  .nlf-social-link{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .22s ease, background .22s ease;
    text-decoration:none;
  }
  .nlf-social-link i{
    font-size: 22px;
    color: rgba(14,43,43,.86);
  }
  .nlf-social-link:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.10);
    background: rgba(0,129,128,.08);
  }
  .nlf-social-link:active{ transform: translateY(0); }
  
  /* Links */
  .nlf-links{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
    align-items:start;
    justify-items:center;
    text-align:center;
  }
  
  .nlf-col h4{
    margin:0 0 10px;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
  }
  .nlf-col a{
    display:block;
    padding: 6px 0;
    color: rgba(14,43,43,.70);
    text-decoration:none;
    transition: color .18s ease, transform .18s ease;
  }
  .nlf-col a:hover{
    color: var(--nl-green);
    transform: translateY(-1px);
  }
  
  /* Bottom */
  .nlf-bottom{
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    color: rgba(14,43,43,.62);
    font-size: .92rem;
    flex-wrap: wrap;
    text-align:center;
  }
  
  .nlf-legal{
    display:flex;
    gap: 14px;
    justify-content:center;
  }
  .nlf-legal a{
    color: rgba(14,43,43,.62);
    text-decoration:none;
    transition: color .18s ease;
  }
  .nlf-legal a:hover{ color: var(--nl-green); }
  
  /* Focus accesible */
  .nlf-btn:focus-visible,
  .nlf-social-link:focus-visible,
  .nlf-col a:focus-visible,
  .nlf-legal a:focus-visible{
    outline: 3px solid rgba(216,118,37,.40);
    outline-offset: 4px;
    border-radius: 999px;
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 992px){
    .nlf-cta{ margin-top: -84px; }
    .nlf-body{ grid-template-columns: 1fr; }
    .nlf-links{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  
  @media (max-width: 768px){
    .nl-footer{ padding: 46px 0 22px; }
    .nlf-cta{ margin-top: -70px; }
    .nlf-cta-card{ border-radius: 22px; }
  
    .nlf-orb{ width: 50px; height: 50px; }
    .nlf-orb i{ font-size: 22px; }
  
    .nlf-links{ grid-template-columns: 1fr; gap: 16px; }
  }
  
  /* ✅ 425 y abajo: NO full width, botones compactos y centrados */
@media (max-width:425px){
  .nlf-cta-actions{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* 👇 clave: quitar el width:100% que los vuelve tablones */
  .nlf-btn{
    width: auto;
    max-width: 100%;
    padding: 10px 16px;
    font-size: 15px;
    border-radius: 999px;

    /* tamaño “inteligente” que se adapta */
    min-width: clamp(210px, 70vw, 300px);
  }

  /* limpia orbes si estorban */
  .nlf-orb.o3, .nlf-orb.o4{ display:none; }
}

/* ✅ 360 y abajo: todavía más compacto */
@media (max-width:360px){
  .nlf-btn{
    padding: 9px 14px;
    font-size: 14px;
    min-width: clamp(190px, 78vw, 260px);
  }
}

/* ✅ 320 y abajo: ultra compacto sin desbordes */
@media (max-width:320px){
  .nlf-btn{
    padding: 9px 12px;
    font-size: 13.5px;
    min-width: clamp(180px, 84vw, 235px);
  }
}


/* =========================
   FIX BOTONES CTA (MOBILE)
   PÉGALO AL FINAL DEL CSS
   ========================= */

/* 425 y abajo: columna pero sin botones gigantes */
@media (max-width:425px){
  .nlf-cta-actions{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .nlf-btn{
    width: auto;
    max-width: calc(100% - 28px);   /* deja aire dentro de la card */
    padding: 10px 18px;
    font-size: 14.5px;
    line-height: 1;
    white-space: nowrap;

    /* ✅ NO min-width (eso fue lo que te rompió 320) */
    min-width: unset;
  }
}

/* 360 y abajo: un poquito más chico */
@media (max-width:360px){
  .nlf-btn{
    padding: 9px 16px;
    font-size: 14px;
    max-width: calc(100% - 24px);
  }
}

/* 320 y abajo: compacto real (sin desbordes ni “tablones”) */
@media (max-width:320px){
  .nlf-btn{
    padding: 9px 14px;
    font-size: 13.5px;
    max-width: calc(100% - 22px);
  }
}