/* =========================================================
   /bariatra-cdmx/zonas/alcaldias.css
   Estilos compartidos para landings por alcaldía (CDMX)
   ========================================================= */

:root{
  --brand:#003366;
  --ink:#0f172a;
  --muted:#1f2937;
  --line:rgba(0,0,0,.10);
  --card:#fff;
  --cardTop:rgba(0,51,102,.16);

  /* Links card (tarjeta final) */
  --linksLine:rgba(255,255,255,.14);
  --linksChip:rgba(255,255,255,.12);
  --linksItemBg:rgba(255,255,255,.10);
  --linksItemLine:rgba(255,255,255,.14);
  --linksText:#fff;

  /* Cards principales (fondo tenue) */
  --softBg:#f6f7f9;
  --softTitleBg:rgba(0,0,0,.05);
  --softTitleLine:rgba(0,0,0,.10);
  --softItemBg:rgba(255,255,255,.70);
  --softItemLine:rgba(0,0,0,.08);
  --softDot:rgba(0,51,102,.35);
  --softDotHalo:rgba(0,51,102,.10);
}

.zona-hero,.zona-wrap,.zona-card,.zona-breadcrumb{
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* Wrapper */
.zona-wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* Breadcrumb */
.zona-breadcrumb{
  max-width:1100px; margin:10px auto 0; padding:0 16px;
  font-size:.95rem; line-height:1.35;
}
.zona-breadcrumb a{ color:#1a3c77; text-decoration:none; font-weight:700; }
.zona-breadcrumb a:hover{ text-decoration:underline; }
.zona-breadcrumb span{ margin:0 6px; }

/* Hero */
.zona-hero{
  max-width:1100px; margin:16px auto 8px; padding:18px 16px;
  border:1px solid rgba(0,51,102,.10);
  border-top:3px solid rgba(0,51,102,.18);
  border-radius:16px;
  background:rgba(248,250,252,.95);
  box-shadow:0 12px 30px rgba(0,0,0,.10),0 1px 0 rgba(255,255,255,.8) inset;
  box-sizing:border-box;
}
.zona-hero h1{ margin:0 0 8px; line-height:1.15; text-align:center; }
.zona-sub{
  margin:0 auto 12px; max-width:56rem;
  text-align:center; line-height:1.45; color:var(--muted);
}

/* CTA */
.zona-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.zona-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:800;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.zona-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.10); text-decoration:underline; }
.zona-btn.primary{ background:var(--brand); color:#fff; border-color:transparent; }
.zona-btn.primary:hover{ text-decoration:none; }
.zona-btn img{ width:22px; height:22px; display:block; }

/* Grid */
.zona-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:14px auto 18px;
}

/* Card base */
.zona-card{
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--cardTop);
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  box-sizing:border-box;
  text-align:left;
}
.zona-card h2{
  margin:0 0 10px;
  font-size:1.18rem;
  line-height:1.25;
  color:var(--brand);
  letter-spacing:.2px;
}
.zona-card p{
  margin:0 0 12px;
  font-size:1.02rem;
  line-height:1.65;
  color:var(--muted);
}
.zona-card ul{ margin:10px 0 0; padding-left:20px; }
.zona-card li{ margin:10px 0; line-height:1.55; }
.zona-actions{ margin:10px 0 0; }

/* =========================================================
   Cards principales (3 de arriba): título centrado + bullets pro
   ========================================================= */
.zona-grid .zona-card{ background:var(--softBg); }
.zona-grid .zona-card h2{
  display:table;
  margin:0 auto 14px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--softTitleBg);
  border:1px solid var(--softTitleLine);
  color:var(--brand);
  text-align:center;
  font-weight:900;
}
.zona-grid .zona-card p{ color:var(--ink); line-height:1.7; }
.zona-grid .zona-card ul{
  list-style:none;
  padding-left:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.zona-grid .zona-card li{
  margin:0;
  padding:10px 12px 10px 44px;
  background:var(--softItemBg);
  border:1px solid var(--softItemLine);
  border-radius:12px;
  position:relative;
}
.zona-grid .zona-card li::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--softDot);
  box-shadow:0 0 0 4px var(--softDotHalo);
}

/* =========================================================
   Tarjeta final: "También te puede interesar" (fondo imagen)
   ========================================================= */
.zona-card--links{
  margin-bottom:34px;
  position:relative;
  overflow:hidden;
  color:var(--linksText);
  border-color:var(--linksLine);
  border-top-color:rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.zona-card--links::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/bariatra-cdmx/zonas/img/bg-links.jpg") center/cover no-repeat;
  transform:scale(1.06);
  filter:blur(2px) brightness(.60);
  z-index:0;
}
.zona-card--links::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52));
  z-index:0;
}
.zona-card--links > *{ position:relative; z-index:1; }

/* FIX: <p> dentro de .zona-card--links (contraste + centrado + cápsula) */
.zona-card--links p,
.zona-card--links p strong,
.zona-card--links p em{
  color:var(--linksText);
}
.zona-card--links > p{
  display:table;              /* centra la cápsula en móvil/desktop */
  margin:0 auto 12px;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
}

/* Título en recuadro centrado */
.zona-card--links > h2{
  display:table;
  margin:0 auto 14px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--linksChip);
  border:1px solid rgba(255,255,255,.16);
  color:var(--linksText);
  font-size:1.05rem;
  text-align:center;
}

/* Lista tipo “items” */
.zona-card--links > ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.zona-card--links > ul > li{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:14px;
  border-radius:16px;
  background:var(--linksItemBg);
  border:1px solid var(--linksItemLine);
  backdrop-filter:blur(2px);
}
.zona-card--links > ul > li::before{
  content:"";
  width:12px; height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  flex:0 0 12px;
}

/* Links siempre blancos (incluye visited) */
.zona-card--links a,
.zona-card--links a:visited{
  color:var(--linksText);
  text-decoration:none;
  font-weight:900;
}
.zona-card--links a:hover{
  color:var(--linksText);
  text-decoration:underline;
}

/* Hover (solo dispositivos con hover) */
@media (hover:hover){
  .zona-card{ transition:transform .18s ease, box-shadow .18s ease; }
  .zona-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
  .zona-card--links:hover{ box-shadow:0 18px 46px rgba(0,0,0,.28); }
}

/* Mapa */
.zona-map{ width:100%; height:360px; border:0; border-radius:14px; display:block; }

/* Responsive */
@media (max-width:640px){
  .zona-hero{ margin:10px 10px 8px; padding:16px 14px; }
  .zona-wrap{ padding:0 10px; }
  .zona-card{ padding:16px; }
  .zona-map{ height:320px; }
  .zona-card--links{ margin-bottom:26px; }
  .zona-grid .zona-card li{ padding-left:40px; }
}
@media (min-width:641px) and (max-width:768px){
  .zona-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .zona-hero{ margin-bottom:14px; }
}

/* ===== Bajar SOLO el menú desktop (escritorio) para que no se cruce con iconos flotantes ===== */
@media (min-width:1024px){
  header .desktop-menu{ margin-top:62px; }
}

/* =========================================================
   Listas tipo “botón” (base compartida)
   ========================================================= */
.zona-btnlist{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.zona-card .zona-btnlist{
  margin-left:0;
  margin-right:0;
  max-width:100%;
  padding-left:0;
}
.zona-btnlist > li{
  position:relative;
  padding:12px 14px 12px 46px;
  border-radius:14px;
  font-size:16px;
  line-height:1.25;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  max-width:100%;
  box-sizing:border-box;
}
.zona-btnlist > li::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(0,51,102,.12);
  border:3px solid rgba(0,51,102,.18);
}
@media (max-width:520px){
  .zona-btnlist{ gap:8px; }
  .zona-btnlist > li{
    padding:11px 12px 11px 42px;
    font-size:15px;
    border-radius:12px;
  }
  .zona-btnlist > li::before{
    left:12px;
    width:16px;
    height:16px;
    border-width:3px;
  }
}

/* =========================================================
   CSS exclusivo Bariatra CDMX (depende de #hero-bariatra-cdmx)
   ========================================================= */

/* HERO: bullets simples a la izquierda */
#hero-bariatra-cdmx .zona-sub--bullets{
  list-style:disc;
  padding-left:1.2em;
  margin:0.9em auto 0;
  max-width:62ch;
  text-align:left;
  line-height:1.5;
}
#hero-bariatra-cdmx .zona-sub--bullets li{ margin:0.35em 0; }
#hero-bariatra-cdmx .zona-sub--bullets strong{ font-weight:700; }
#hero-bariatra-cdmx .zona-sub--bullets em{ font-style:normal; }

/* .zona-btnlist (solo en esta landing): convertir a “bullet PRO” (círculo + halo) */
#hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist{
  list-style:none;
  padding-left:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
#hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist > li{
  position:relative;
  margin:0;
  padding:0 0 0 34px;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  line-height:1.55;
  box-sizing:border-box;
}
#hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist > li::before{
  content:"";
  position:absolute;
  left:10px;
  top:0.95em;
  transform:translateY(-50%);
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--softDot);
  box-shadow:0 0 0 4px var(--softDotHalo);
}
@media (max-width:520px){
  #hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist{ gap:8px; }
  #hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist > li{ padding-left:32px; }
  #hero-bariatra-cdmx ~ .zona-wrap .zona-btnlist > li::before{
    left:9px;
    width:11px;
    height:11px;
  }
}

/* CTA fuera del hero (solo Bariatra CDMX) */
#hero-bariatra-cdmx + .zona-cta--outside{
  max-width:1100px;
  margin:10px auto 8px;
  padding:0 16px;
  justify-content:center;
}