/* ============================================================
     Alcaldía de Chacao — Home
     HTML estático y editable. Sin frameworks ni runtime.
     Colores de marca:
       --azul-marino : #08213D
       --azul        : #0057A8
       --azul-oscuro : #003E7A
       --rojo        : #C8102E   (emergencias / 911)
       --verde       : #3DDC97
     ============================================================ */
  :root{
    --marino:#08213D; --marino-900:#061527;
    --azul:#0057A8; --azul-700:#00457F; --azul-800:#003E7A;
    --rojo:#C8102E; --rojo-700:#A50D26;
    --verde:#3DDC97;
    --texto:#12233B; --gris:#5A6B80; --linea:#E4EAF2;
    --wrap:1240px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Public Sans',system-ui,sans-serif;
    color:var(--texto); background:#FFFFFF;
    -webkit-font-smoothing:antialiased;
    max-width:100%; overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Archivo',sans-serif;margin:0}
  a{color:var(--azul);text-decoration:none}
  a:hover{color:var(--azul-800)}
  button{font-family:inherit}
  ::selection{background:var(--azul);color:#fff}

  .wrap{max-width:var(--wrap);margin:0 auto}

  @keyframes cc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes cc-pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* ---- estados hover ---- */
  .navlink:hover{background:#EEF4FB;color:var(--azul)}
  .icon-btn:hover{border-color:var(--azul);color:var(--azul)}
  .btn-911:hover{background:var(--rojo-700)}
  .chip:hover{background:rgba(255,255,255,.16)}
  .task:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(11,37,69,.45);border-color:#BCD3EC}
  .btn-primary:hover{background:var(--azul-700)}
  .btn-ghost:hover{border-color:var(--azul)}
  .card-link:hover{border-color:#BCD3EC}
  .btn-white:hover{background:#EAF1F9}
  .footlink:hover{color:#fff}
  .redecard:hover{border-color:var(--azul)}
  .media-hover:hover{filter:brightness(.97)}

  .navlink{
    font-weight:600;font-size:15px;color:#243B57;padding:9px 14px;border-radius:8px
  }
  .mobile-link{
    font-weight:600;font-size:16px;color:#243B57;padding:13px 10px;border-radius:8px;border-bottom:1px solid #F1F5F9
  }
  .chip.herochip{
    font-size:13px;font-weight:600;color:#DCE7F3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:100px;
  }
  .task{
    background:#fff;border:1px solid #E7EDF4;border-radius:15px;padding:20px 16px;display:flex;flex-direction:column;gap:13px;box-shadow:0 10px 30px -18px rgba(11,37,69,.4);transition:transform .18s,box-shadow .18s,border-color .18s
  }
  .task-icon{
    width:46px;height:46px;border-radius:12px;background:#EEF4FB;color:var(--azul);display:flex;align-items:center;justify-content:center;
  }
  .task-text-block{
    display:flex;flex-direction:column;gap:3px
  }
  .task-text-title{
    font-family:'Archivo';font-weight:700;font-size:15.5px;color:var(--texto);line-height:1.2
  }
  .task-text-subtitle{
    font-size:12.5px;color:#6A7B90;line-height:1.35
  }
  .counter-box{
    background:#fff;border:1px solid #E1EAF4;border-radius:14px;padding:18px 20px;
  }
  .counter-box-text{
    font-size:13px;color:var(--gris);margin-top:3px;line-height:1.35;
  }
  .contador-salud{
    font-family:'Archivo';font-weight:800;font-size:32px;letter-spacing:-.02em;color:var(--azul);
  }
  /* ---- responsive ---- */
  .hmb{display:none}
  @media (max-width:900px){
    .mainnav{display:none !important}
    .hmb{display:flex !important}
    .col2{grid-template-columns:1fr !important;gap:32px !important}
    .g6{grid-template-columns:repeat(3,1fr) !important}
    .g3{grid-template-columns:1fr !important}
    .disc{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important}
    .disc>a{grid-column:auto !important;grid-row:auto !important;min-height:190px}
    .g-foot{grid-template-columns:1fr 1fr !important}
    .hero-h1{font-size:40px !important}
    .hero-in{padding:54px 22px 120px !important}
    .pad{padding-left:22px !important;padding-right:22px !important}
    .hd{padding:12px 16px !important;gap:12px !important}
    .btn-911{padding:11px 13px !important;font-size:13px !important}
  }
  @media (max-width:560px){
    .g6{grid-template-columns:1fr 1fr !important}
    .disc{grid-template-columns:1fr !important}
    .g-foot{grid-template-columns:1fr !important}
    .hero-h1{font-size:31px !important}
    .redes-posts{grid-template-columns:1fr 1fr !important}
    .util-bar{display:none !important}
    .hero-search{flex-wrap:wrap;padding:10px 10px 10px 16px !important}
    .hero-search input{flex:1 1 120px;min-width:0}
    .hero-search button{flex:1 1 100%}
  }