/* =========================================================
   NECORA Landing — 99-tail-safe.css
   SAFE TAIL OVERRIDES / PERF / MOBILE STABILITY v31.2
   =========================================================
   ✅ Conserva app-shell / 2 capas en desktop
   ✅ Conserva footer reveal real
   ✅ Corrige content-visibility conflictivo
   ✅ Mejora estabilidad móvil sin romper diseño
   ✅ Hero/mobile fixes
   ✅ Social / SVG icon fixes
   ========================================================= */

/* =========================================================
   25.0) SAFE OPT PATCH (NO BREAK)
   ========================================================= */

/* -----------------------------------------
   1) FIX: clamp invertido
------------------------------------------ */
@media (max-width: 859px){
  .nl-heroMin__mobileDock{
    bottom: calc(clamp(58px, 4.4vh, 103px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@supports (height: 100svh){
  @media (max-width: 859px){
    .nl-heroMin__mobileDock{
      bottom: calc(clamp(58px, 4.4svh, 103px) + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}

/* -----------------------------------------
   2) Fondo global estable
   - NO toca el app-shell elevado
------------------------------------------ */
html{
  background: radial-gradient(1200px 700px at 50% -10%, var(--nl-pageBg2), var(--nl-pageBg)) !important;
}

body{
  background: transparent !important;
}

/* -----------------------------------------
   3) Perf: content-visibility (SAFE)
   - Quitamos .nl-logoBand
   - Evitamos mobile
   - Usamos intrinsic-size menos agresivo
------------------------------------------ */
@supports (content-visibility: auto){
  @media (min-width: 860px){
    #reviews{
      content-visibility: auto;
      contain-intrinsic-size: 820px;
    }

    #preguntas{
      content-visibility: auto;
      contain-intrinsic-size: 520px;
    }

    #ubicacion{
      content-visibility: auto;
      contain-intrinsic-size: 760px;
    }

    .nl-stepsWave{
      content-visibility: auto;
      contain-intrinsic-size: 920px;
    }
  }
}

/* Blindaje explícito para la banda de logos */
.nl-logoBand{
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* -----------------------------------------
   4) Motion safety
------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html:focus-within{
    scroll-behavior: auto;
  }

  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .nl-marquee__inner{
    animation: none !important;
  }

  #footer-cta{
    transition: none !important;
    transform: none !important;
  }
}

/* -----------------------------------------
   5) Touch polish
------------------------------------------ */
@media (max-width: 859px){
  :where(a, button, [role="button"], .nl-btn){
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Mantén smooth solo fuera de mobile para no pelear con el scroll */
@media (min-width: 860px) and (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior: smooth;
  }
}

/* -----------------------------------------
   6) Backdrop-filter micro-optimización
   - sin romper el premium look
------------------------------------------ */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nl-island,
  .nl-appNav,
  .nl-rail__icon,
  .nl-heroMin__mIcon{
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  @media (max-width: 859px){
    .nl-island,
    .nl-appNav{
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .nl-rail__icon,
    .nl-heroMin__mIcon{
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}

/* -----------------------------------------
   7) Scrollbars / carousel polish
------------------------------------------ */
.nl-carousel__track{
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.nl-marquee{
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* -----------------------------------------
   8) Dots: asegura position context
------------------------------------------ */
.nl-dot{
  position: relative;
}

/* -----------------------------------------
   9) Rail right: transición estable
------------------------------------------ */
@media (min-width: 860px){
  .nl-rail--right{
    will-change: transform, opacity;
  }
}

/* -----------------------------------------
   10) Evita conflictos de overflow-x
   - NO tocamos overflow del shell principal
   - para no romper el efecto elevado / layered
------------------------------------------ */
#necora-landing,
.nl-container,
.nl-section{
  max-width: 100%;
}

html,
body{
  overflow-x: clip;
}

/* -----------------------------------------
   11) Evita layout shift en imágenes
------------------------------------------ */
img{
  display: block;
  height: auto;
}

/* -----------------------------------------
   12) Hero / shell stability
   - sin matar el look "alzado"
------------------------------------------ */
.nl-heroFrame,
.nl-heroFrame__frame,
.nl-heroMin__frame,
#necora-landing.nl{
  transform: translateZ(0);
  backface-visibility: hidden;
}

.nl-heroMin__bg,
.nl-heroMin__bg::after{
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 859px){
  .nl-heroMin__bg{
    background-attachment: scroll !important;
  }
}

/* =========================================================
   25.1) FOOTER REVEAL — BLINDAJE
   - conserva reveal
   - conserva app-shell recortado
   - mejora composición y estabilidad
   ========================================================= */
#footer-cta,
#footer-cta .nl-footerCta--pro,
.nl-footerSpace.nl-footerSentinel{
  transform: translateZ(0);
  backface-visibility: hidden;
}

#footer-cta{
  will-change: transform, opacity;
  contain: paint;
}

#footer-cta .nl-footerCta--pro{
  contain: layout paint style;
}

body.nl-footerReveal-on #necora-landing.nl{
  will-change: clip-path;
}

body.nl-footerReveal-on .nl-appNav{
  will-change: transform, opacity;
}

/* móvil: seguimos con reveal, pero lo hacemos más estable */
@media (max-width: 1023px){
  #footer-cta{
    transform: translate3d(0, 0, 0);
    isolation: isolate;
  }

  #footer-cta .nl-footerCta--pro{
    box-shadow:
      0 18px 46px rgba(2,6,23,.18),
      0 10px 26px rgba(2,6,23,.12) !important;
  }

  body.nl-footerReveal-on #necora-landing.nl{
    transform: translateZ(0);
  }
}

/* tiny mobile: menos peso visual, mismo reveal */
@media (max-width: 420px){
  #footer-cta .nl-footerCta--pro{
    box-shadow:
      0 14px 34px rgba(2,6,23,.16),
      0 8px 20px rgba(2,6,23,.10) !important;
  }
}

/* =========================================================
   25.2) HERO / RAIL ICONS — FIX REAL (Instagram + SVG)
   Solo corrige iconos, sin sobrecargar nada
   ========================================================= */

/* Base: que los SVG no se rellenen por default */
.nl-rail__icon svg *,
.nl-heroMin__mIcon svg *{
  fill: none !important;
  stroke: currentColor !important;
  vector-effect: non-scaling-stroke;
}

/* Facebook sí va relleno */
.nl-rail__icon[aria-label="Facebook"] svg *,
.nl-heroMin__mIcon[aria-label="Facebook"] svg *{
  fill: currentColor !important;
  stroke: none !important;
}

/* TikTok: limpio y nítido */
.nl-rail__icon[aria-label="TikTok"] svg,
.nl-heroMin__mIcon[aria-label="TikTok"] svg{
  width: 20px !important;
  height: 20px !important;
}

.nl-rail__icon[aria-label="TikTok"] svg *,
.nl-heroMin__mIcon[aria-label="TikTok"] svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Instagram: más reconocible */
.nl-rail__icon[aria-label="Instagram"] svg,
.nl-heroMin__mIcon[aria-label="Instagram"] svg{
  width: 22px !important;
  height: 22px !important;
}

.nl-rail__icon[aria-label="Instagram"] svg path,
.nl-heroMin__mIcon[aria-label="Instagram"] svg path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Desktop rail */
.nl-rail__icon[aria-label="Instagram"]{
  color: rgba(255,255,255,.98) !important;
}

/* Mobile dock */
.nl-heroMin__mIcon[aria-label="Instagram"]{
  color: rgba(255,255,255,.98) !important;
}

/* Un poco más de presencia visual en mobile */
.nl-heroMin__mIcon[aria-label="Instagram"],
.nl-heroMin__mIcon[aria-label="Facebook"],
.nl-heroMin__mIcon[aria-label="TikTok"]{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover/focus sutil */
@media (hover:hover){
  .nl-rail__icon[aria-label="Instagram"]:hover,
  .nl-heroMin__mIcon[aria-label="Instagram"]:hover{
    transform: translateY(-2px) scale(1.04);
  }
}

/* Focus visible más claro */
.nl-rail__icon:focus-visible,
.nl-heroMin__mIcon:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(20,150,212,.18),
    0 8px 24px rgba(0,0,0,.18) !important;
}