/* =========================================================
   NECORA Landing — 21-footer.css
   FOOTER CTA + FOOTER REVEAL — ULTRA PRO / STABLE v34.3
   =========================================================
   ✅ Reveal real en desktop y móvil
   ✅ Integrado con landing.js (footer reveal patch)
   ✅ Móvil compacto y preciso
   ✅ Sin reglas de altura conflictivas
   ✅ Conserva app-shell premium
   ✅ CTA premium desktop/mobile
   ✅ Alineado con footer-cta.php actual
   ========================================================= */

/* ---------------------------------------------------------
   0) TOKENS
--------------------------------------------------------- */
:root{
  --nl-footerOverlap: 6px;
  --nl-footerPadB: 18px;

  --nl-footerRadius: 22px;
  --nl-footerRadiusMob: 18px;

  --nl-footerBorder: rgba(20,30,45,.12);
  --nl-footerBorderSoft: rgba(15,23,42,.10);

  --nl-footerBg: rgba(248,250,252,.96);
  --nl-footerBg2: rgba(236,243,248,.92);

  --nl-footerText: rgba(12,18,28,.92);
  --nl-footerMuted: rgba(12,18,28,.62);
  --nl-footerSoft: rgba(12,18,28,.52);
  --nl-footerAccent: rgba(0,161,223,.95);

  --nl-footerShadow:
    0 12px 28px rgba(10,20,35,.14),
    0 2px 0 rgba(255,255,255,.55) inset;

  --nl-footerShadowMob:
    0 14px 34px rgba(2,6,23,.16),
    0 8px 20px rgba(2,6,23,.10);

  /* fallback seguro; JS lo sobreescribe */
  --nl-footerRevealH: 260px;
  --nl-footerPanelH: 184px;
  --nl-footerTriggerShrink: 140px;
}

/* ---------------------------------------------------------
   1) REVEAL WRAPPER
--------------------------------------------------------- */
#footer-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  height: var(--nl-footerRevealH);
  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding:
    0
    0
    calc(var(--nl-footerPadB) + env(safe-area-inset-bottom, 0px));

  opacity: 0;
  transform: translate3d(0,18px,0);
  transition:
    opacity .22s ease,
    transform .22s ease;

  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  isolation: isolate;
  contain: paint;
}

body.nl-footerReveal-on #footer-cta{
  opacity: 1;
  transform: translate3d(0,0,0);
  pointer-events: auto;
}

.nl-footerSpace.nl-footerSentinel{
  width: 100%;
  height: var(--nl-footerRevealH);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   2) ALINEACIÓN REAL
--------------------------------------------------------- */
#footer-cta .nl-container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(18px, 2.2vw, 28px);
  padding-right: clamp(18px, 2.2vw, 28px);
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------
   3) STACKING / REVEAL SHELL
--------------------------------------------------------- */
.nl-heroFrame{
  position: relative;
  z-index: 3;
}

#necora-landing.nl{
  position: relative;
  z-index: 4;
}

#necora-landing.nl::before{
  pointer-events: none !important;
}

/* Desktop: conserva recorte premium del app-shell */
@media (min-width: 1024px){
  body.nl-footerReveal-on #necora-landing.nl{
    clip-path: inset(
      0 0 calc(var(--nl-footerRevealH) - var(--nl-footerOverlap)) 0
      round var(--nl-appRadius)
    );
  }

  body.nl-footerReveal-on #necora-landing.nl::before{
    bottom: calc(var(--nl-footerRevealH) - var(--nl-footerOverlap)) !important;
    box-shadow: none !important;
  }
}

/* Mobile: reveal real + recorte preciso */
@media (max-width: 1023px){
  body.nl-footerReveal-on #necora-landing.nl{
    clip-path: inset(
      0 0 calc(var(--nl-footerRevealH) - 2px) 0
      round 0px
    ) !important;
  }

  body.nl-footerReveal-on #necora-landing.nl::before{
    bottom: calc(var(--nl-footerRevealH) - 2px) !important;
    box-shadow: none !important;
  }
}

body.nl-footerReveal-on .nl-appNav{
  transform: translate3d(0,140%,0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce){
  #footer-cta{
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   4) FOOTER CARD
--------------------------------------------------------- */
#footer-cta .nl-footerCta--pro{
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--nl-footerRadius);
  border: 1px solid var(--nl-footerBorder);
  background: linear-gradient(180deg, var(--nl-footerBg), var(--nl-footerBg2));
  box-shadow: var(--nl-footerShadow);
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint style;
}

#footer-cta .nl-footerCta--pro::before{
  display: none !important;
}

@media (min-width: 1024px){
  #footer-cta .nl-footerCta--pro{
    border-radius: 24px;
  }
}

/* ---------------------------------------------------------
   5) INNER LAYOUT
--------------------------------------------------------- */
#footer-cta .nl-footerCta__inner{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 16px 18px 16px;
}

@media (min-width: 860px){
  #footer-cta .nl-footerCta__inner{
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    gap: 18px;
    padding: 18px 20px 18px;
  }
}

/* ---------------------------------------------------------
   6) COPY / TYPOGRAPHY
--------------------------------------------------------- */
#footer-cta .nl-footerCta__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(12,18,28,.54);
}

#footer-cta #nl-footer-title,
#footer-cta .nl-h2{
  margin: 0 0 6px;
  color: var(--nl-footerText);
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.06;
  font-size: clamp(26px, 3.1vw, 40px);
}

#footer-cta .nl-sub{
  margin: 0;
  color: var(--nl-footerMuted);
  font-size: 15px;
  line-height: 1.45;
}

#footer-cta .nl-footerCta__body{
  margin: 10px 0 0;
  max-width: 56ch;
  color: rgba(12,18,28,.74);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   7) QUICK CHIPS
--------------------------------------------------------- */
#footer-cta .nl-footerCta__quick{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

#footer-cta .nl-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,30,45,.12);
  background: rgba(255,255,255,.86);
  color: rgba(12,18,28,.90);
  text-decoration: none;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(10,20,35,.10);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

#footer-cta .nl-chip__muted{
  margin-left: 6px;
  color: rgba(12,18,28,.56);
  font-weight: 800;
  font-size: 12px;
}

@media (hover:hover){
  #footer-cta .nl-chip:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.94);
    border-color: rgba(0,161,223,.22);
    box-shadow: 0 14px 30px rgba(10,20,35,.12);
  }
}

/* ---------------------------------------------------------
   8) ACTIONS
--------------------------------------------------------- */
#footer-cta .nl-footerCta__actions .nl-btn{
  font-weight: 950;
}

#footer-cta .nl-btn--primary{
  box-shadow:
    0 14px 34px rgba(0,120,200,.22),
    0 2px 0 rgba(255,255,255,.28) inset;
}

#footer-cta .nl-btn--ghost{
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(20,30,45,.12);
}

#footer-cta .nl-footerCta__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(12,18,28,.56);
  font-weight: 700;
}

/* ---------------------------------------------------------
   9) BOTTOM BAR
--------------------------------------------------------- */
#footer-cta .nl-footerCta__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(20,30,45,.10);
  color: rgba(12,18,28,.58);
  font-size: 12px;
  font-weight: 700;
  overflow: visible;
}

#footer-cta .nl-footerCta__copy{
  min-width: 0;
}

#footer-cta .nl-footerCta__credit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(12,18,28,.66);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   10) NECORA CREDIT LINK
--------------------------------------------------------- */
#footer-cta .nl-footerCta__credit a,
#footer-cta .nl-footerCta__creditLink{
  color: #1473ff !important;
  font-weight: 950;
  letter-spacing: .02em;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(20,115,255,.28) !important;
  padding: 2px 6px;
  border-radius: 999px;
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    opacity .15s ease;
}

@media (hover:hover){
  #footer-cta .nl-footerCta__credit a:hover,
  #footer-cta .nl-footerCta__creditLink:hover{
    transform: translateY(-1px);
    background: rgba(20,115,255,.08);
    border-bottom-color: rgba(20,115,255,.60) !important;
  }
}

#footer-cta .nl-footerCta__credit a:focus-visible,
#footer-cta .nl-footerCta__creditLink:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(20,115,255,.18) !important;
}

/* ---------------------------------------------------------
   11) FOCUS A11Y GENERAL
--------------------------------------------------------- */
#footer-cta a:focus-visible,
#footer-cta .nl-chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,161,223,.18);
  border-color: rgba(0,161,223,.32);
}

/* ---------------------------------------------------------
   12) MOBILE / TABLET
--------------------------------------------------------- */
@media (max-width: 1023px){
  :root{
    --nl-footerOverlap: 4px;
    --nl-footerPanelH: 184px;
  }

  /* IMPORTANTE:
     no forzamos height con cálculos duros;
     el JS manda revealH real */
  #footer-cta{
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(0,12px,0);
  }

  body.nl-footerReveal-on #footer-cta{
    transform: translate3d(0,0,0);
  }

  .nl-footerSpace.nl-footerSentinel{
    height: var(--nl-footerRevealH) !important;
  }

  #footer-cta .nl-container{
    max-width: none;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #footer-cta .nl-footerCta--pro{
    background: rgba(248,250,252,.99) !important;
    border-radius: var(--nl-footerRadiusMob) !important;
    border: 1px solid var(--nl-footerBorderSoft) !important;
    box-shadow: var(--nl-footerShadowMob) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
  }

  #footer-cta .nl-footerCta__inner{
    padding: 12px 12px 10px !important;
    gap: 8px !important;
  }

  #footer-cta .nl-footerCta__kicker{
    margin: 0 0 4px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    opacity: .78 !important;
  }

  #footer-cta #nl-footer-title,
  #footer-cta .nl-h2{
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.06 !important;
    letter-spacing: -.025em !important;
  }

  #footer-cta .nl-sub{
    margin-top: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    opacity: .84 !important;
  }

  #footer-cta .nl-footerCta__body{
    margin-top: 6px !important;
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    opacity: .88 !important;
  }

  /* Chips más limpios: scroll horizontal */
  #footer-cta .nl-footerCta__quick{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #footer-cta .nl-footerCta__quick::-webkit-scrollbar{
    display: none;
  }

  #footer-cta .nl-chip{
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    box-shadow: 0 6px 14px rgba(10,20,35,.08) !important;
  }

  /* El teléfono largo ensucia mucho en móvil */
  #footer-cta .nl-chip__muted{
    display: none !important;
  }

  #footer-cta .nl-footerCta__actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  #footer-cta .nl-footerCta__actions .nl-btn,
  #footer-cta .nl-footerCta__actions a{
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
  }

  #footer-cta .nl-footerCta__actions .nl-btn--primary,
  #footer-cta .nl-footerCta__actions a.is-primary{
    box-shadow:
      0 10px 22px rgba(0,161,223,.20),
      0 6px 14px rgba(2,6,23,.08) !important;
  }

  #footer-cta .nl-footerCta__note{
    margin-top: 8px !important;
    font-size: 11.5px !important;
  }

  #footer-cta .nl-footerCta__bottom{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(15,23,42,.08) !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    opacity: .88 !important;
  }

  #footer-cta .nl-footerCta__bottom > *{
    min-width: 0;
  }

  #footer-cta .nl-footerCta__credit{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #footer-cta .nl-footerCta__copy{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #footer-cta,
  #footer-cta *{
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------------------------------------------------------
   13) SMALL MOBILE REFINEMENTS
--------------------------------------------------------- */
@media (max-width: 560px){
  :root{
    --nl-footerPanelH: 176px;
  }
}

@media (max-width: 420px){
  :root{
    --nl-footerPanelH: 170px;
  }

  #footer-cta .nl-container{
    padding-left: 10px;
    padding-right: 10px;
  }

  #footer-cta .nl-footerCta--pro{
    border-radius: 16px !important;
  }

  #footer-cta .nl-footerCta__inner{
    padding: 11px 11px 9px !important;
  }

  #footer-cta #nl-footer-title,
  #footer-cta .nl-h2{
    font-size: 17px !important;
  }

  #footer-cta .nl-sub,
  #footer-cta .nl-footerCta__body{
    font-size: 12px !important;
  }

  #footer-cta .nl-chip{
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  #footer-cta .nl-footerCta__actions .nl-btn,
  #footer-cta .nl-footerCta__actions a{
    min-height: 42px !important;
  }
}

/* ---------------------------------------------------------
   14) TINY DEVICES
--------------------------------------------------------- */
@media (max-width: 340px){
  :root{
    --nl-footerPanelH: 164px;
  }

  #footer-cta #nl-footer-title,
  #footer-cta .nl-h2{
    font-size: 18px !important;
  }

  #footer-cta .nl-sub,
  #footer-cta .nl-footerCta__body{
    font-size: 12px !important;
  }

  #footer-cta .nl-footerCta__actions .nl-btn,
  #footer-cta .nl-footerCta__actions a{
    min-height: 44px !important;
  }
}