/* ==========================================================
   FINAL LAYOUT FIXES - Nanas Seguras
   Controls only: homepage districts, district process blocks,
   mobile bottom menu safety. Loaded last to avoid old CSS conflicts.
   ========================================================== */

:root{
  --ns-blue:#03045e;
  --ns-pink:#ffafcc;
  --ns-yellow:#ffd166;
  --ns-line:rgba(3,4,94,.10);
  --ns-shadow:0 18px 42px rgba(3,4,94,.08);
  --ns-menu-h:92px;
}

/* ---------------- HOME: DISTRITOS ---------------- */
body #distritos.districts-section,
body section#distritos.districts-section{
  background:#fff !important;
  padding:72px 24px 64px !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
}

body #distritos.districts-section::before,
body #distritos.districts-section::after{
  display:none !important;
  content:none !important;
}

body #distritos .section-heading{
  max-width:820px !important;
  margin:0 auto 34px !important;
  text-align:center !important;
}

body #distritos .section-heading h2{
  margin:0 !important;
  color:var(--ns-blue) !important;
  font-size:clamp(32px,4.4vw,56px) !important;
  line-height:1.06 !important;
  letter-spacing:-.04em !important;
}

body #distritos .district-intro{
  max-width:780px !important;
  margin:12px auto 0 !important;
  color:#25446b !important;
  font-size:clamp(15px,1.1vw,18px) !important;
  line-height:1.62 !important;
}

body #distritos .district-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:22px !important;
  width:min(100%,1180px) !important;
  max-width:1180px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:visible !important;
}

body #distritos .district-card,
body #distritos .district-grid > article{
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  padding:28px 22px 22px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:13px !important;
  border:1px solid var(--ns-line) !important;
  border-radius:22px !important;
  background:#fff !important;
  color:var(--ns-blue) !important;
  text-align:center !important;
  box-shadow:var(--ns-shadow) !important;
  transform:none !important;
}

body #distritos .district-card::before,
body #distritos .district-card::after{
  display:none !important;
  content:none !important;
}

body #distritos .district-hidden{
  display:none !important;
}

body #distritos .district-icon{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,175,204,.16) !important;
  border:0 !important;
  box-shadow:0 12px 26px rgba(255,175,204,.18) !important;
  margin:0 0 6px !important;
}

body #distritos .district-icon svg{
  width:34px !important;
  height:34px !important;
  color:#ff5a99 !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.15 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

body #distritos .district-card h3{
  margin:0 !important;
  color:var(--ns-blue) !important;
  font-size:20px !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
}

body #distritos .district-card p{
  margin:0 !important;
  color:#25446b !important;
  font-size:15px !important;
  line-height:1.46 !important;
  flex:1 1 auto !important;
}

body #distritos .district-link{
  width:100% !important;
  min-height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:auto !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:14px !important;
  background:var(--ns-pink) !important;
  color:var(--ns-blue) !important;
  font-weight:850 !important;
  text-decoration:none !important;
  box-shadow:0 10px 20px rgba(255,175,204,.22) !important;
}

body #distritos .district-actions{
  width:min(100%,760px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin:32px auto 0 !important;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
}

body #distritos .btn-district-toggle,
body #distritos .btn-district-contact{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:52px !important;
  min-width:210px !important;
  padding:0 26px !important;
  border-radius:14px !important;
  font-weight:850 !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
  line-height:1 !important;
}

body #distritos .btn-district-toggle{
  background:var(--ns-pink) !important;
  color:var(--ns-blue) !important;
  border:0 !important;
  box-shadow:0 12px 24px rgba(255,175,204,.25) !important;
}

body #distritos .btn-district-contact{
  background:#25D366 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 12px 24px rgba(37,211,102,.22) !important;
}

body #distritos .btn-district-contact .wa-icon{
  width:22px !important;
  height:22px !important;
  fill:currentColor !important;
}

/* ---------------- DISTRITO PAGES: PROCESS BLOCK ---------------- */
body.district-page .process-wrap{
  background:var(--ns-yellow) !important;
  padding:72px 24px 86px !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 !important;
  position:relative !important;
}

body.district-page .process-wrap::before,
body.district-page .process-wrap::after{
  display:none !important;
  content:none !important;
}

body.district-page .process-wrap .section-heading{
  margin:0 auto 36px !important;
  text-align:center !important;
  max-width:900px !important;
}

body.district-page .process-wrap .section-heading h2{
  margin:0 !important;
  color:var(--ns-blue) !important;
  font-size:clamp(30px,4vw,48px) !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
}

body.district-page .process-grid{
  width:min(100%,1180px) !important;
  max-width:1180px !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:visible !important;
}

body.district-page .process-card{
  min-height:148px !important;
  height:auto !important;
  padding:26px 18px 22px !important;
  border:0 !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 16px 32px rgba(3,4,94,.08) !important;
  text-align:center !important;
  position:relative !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

body.district-page .process-card span{
  position:static !important;
  transform:none !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 0 12px !important;
  border:4px solid #fff !important;
  border-radius:999px !important;
  background:#b9e4f5 !important;
  color:var(--ns-blue) !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(3,4,94,.10) !important;
}

body.district-page .process-card h3{
  margin:0 0 8px !important;
  color:var(--ns-blue) !important;
  font-size:18px !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}

body.district-page .process-card p{
  margin:0 !important;
  color:#25446b !important;
  font-size:14px !important;
  line-height:1.38 !important;
}

/* Hide any old floating badge that can collide with mobile menu */
body.district-page .district-badge,
body.district-page .service-available-badge,
body.district-page .floating-district-badge,
body.district-page [class*="available"],
body.district-page [class*="disponible"]{
  display:none !important;
}

/* ---------------- MOBILE MENU SAFETY ---------------- */
@media (max-width: 767px){
  body{
    padding-bottom:calc(var(--ns-menu-h) + env(safe-area-inset-bottom,0px)) !important;
  }

  body .bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2147483647 !important;
    background:#fff !important;
    border-radius:22px 22px 0 0 !important;
    box-shadow:0 -10px 30px rgba(3,4,94,.14) !important;
    transform:none !important;
    opacity:1 !important;
  }

  body #distritos.districts-section,
  body section#distritos.districts-section{
    padding:52px 18px 44px !important;
  }

  body #distritos .section-heading{
    margin-bottom:26px !important;
  }

  body #distritos .section-heading h2{
    font-size:clamp(30px,8vw,42px) !important;
  }

  body #distritos .district-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    max-width:680px !important;
  }

  body #distritos .district-card,
  body #distritos .district-grid > article{
    width:auto !important;
    flex:none !important;
    min-height:0 !important;
    padding:22px 12px 14px !important;
    border-radius:18px !important;
    gap:10px !important;
  }

  body #distritos .district-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
  }

  body #distritos .district-icon svg{
    width:28px !important;
    height:28px !important;
  }

  body #distritos .district-card h3{
    font-size:18px !important;
  }

  body #distritos .district-card p{
    font-size:14px !important;
    line-height:1.35 !important;
  }

  body #distritos .district-link{
    min-height:44px !important;
    border-radius:13px !important;
    font-size:14px !important;
  }

  body #distritos .district-actions{
    flex-direction:column !important;
    gap:12px !important;
    margin-top:24px !important;
  }

  body #distritos .btn-district-toggle,
  body #distritos .btn-district-contact{
    width:100% !important;
    max-width:520px !important;
  }

  body.district-page .process-wrap{
    padding:52px 18px calc(108px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.district-page .process-wrap .section-heading{
    margin-bottom:26px !important;
  }

  body.district-page .process-wrap .section-heading h2{
    font-size:clamp(28px,8vw,42px) !important;
  }

  body.district-page .process-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
  }

  body.district-page .process-card{
    min-height:166px !important;
    padding:20px 12px 18px !important;
    border-radius:18px !important;
  }

  body.district-page .process-card span{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    margin:0 0 10px !important;
  }

  body.district-page .process-card h3{
    font-size:clamp(17px,4.2vw,21px) !important;
  }

  body.district-page .process-card p{
    font-size:clamp(13px,3.5vw,16px) !important;
  }
}

@media (max-width: 374px){
  body #distritos .district-grid{
    grid-template-columns:1fr !important;
    max-width:340px !important;
  }

  body.district-page .process-grid{
    grid-template-columns:1fr !important;
    max-width:340px !important;
  }
}

@media (min-width:768px) and (max-width:1023px){
  body #distritos .district-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    max-width:880px !important;
  }

  body #distritos .district-card,
  body #distritos .district-grid > article{
    width:auto !important;
    flex:none !important;
  }

  body.district-page .process-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* =========================================================
   FIX FINAL MENÚ APP SOBRE FOOTER - 2026-06-09
   Este archivo carga al final, por eso refuerza que el footer nunca
   tape el menú inferior móvil.
   ========================================================= */
@media (max-width: 767px){
  body footer.footer-redesign,
  body .footer-redesign,
  body footer.footer-redesign.site-footer{
    z-index:1 !important;
    isolation:auto !important;
    overflow:visible !important;
    padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body .bottom-nav,
  body footer.footer-redesign .bottom-nav,
  body .footer-redesign .bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    z-index:2147483647 !important;
    transform:translateZ(0) !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}