:root{
  --bg:#000000;
  --text:#ffffff;
  --muted:#b9b9b9;
  --brand:#ffffff;
  --o1:#ea5b0c;
  --o2:#ff8f00;
  --o3:#ffa000;
  --o4:#ffb300;
  --o6:#c87435;
  --shadow: 0 12px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.3);
  --radius: 18px;
}

*{box-sizing:border-box}
body {
  margin:0;
  background: url('../img/fondo.png') center/cover no-repeat fixed;
  color:var(--text);
}

a {
  text-decoration: none;
  color: inherit;
 }
.map-bg{position:fixed; inset:0; pointer-events:none; opacity:.07; background:url('../img/mapa.png') center/cover;}
.container{max-width:950px; margin:0 auto; padding:48px 24px; position:relative; z-index:1}

header{margin-bottom:28px}
.logo{max-width:460px}
.sit{font-weight:800; font-size:42px}
.sit b{color:var(--brand)}
.tag{font-weight:600; font-size:12px; color:var(--muted)}
.lead{max-width:450px; font-size:12px; font-family:Helvetica, Arial, 'sans-serif'; color:#ffffff}

.grid{display:grid; gap:22px; margin:28px 0}
@media(min-width:1080px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:720px) and (max-width:1079px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:719px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{position:relative; border-radius:5px; padding:22px 18px 20px; background:linear-gradient(165deg, var(--o2), var(--o1)); box-shadow:var(--shadow); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .18s ease, box-shadow .18s ease; cursor:pointer}
.card.alt{background:linear-gradient(165deg, var(--o3), var(--o4))}
.card.toast{background:linear-gradient(165deg, var(--o6), #b05f2d)}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.45), 0 6px 12px rgba(0,0,0,.35)}

.icon{position:absolute; top:10px; left:0px; width:auto; height:auto; object-fit:contain}

.label small{display:block; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:24px; font-weight:800; color:#ffffff; line-height: 80%; }
.label b{display:block;  font-family: 'Roboto Condensed', Arial, sans-serif; font-size:15px; font-weight:100; margin-top:2px; color:#D5D5D5;}

.muted-block{max-width:520px; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:12px; color:#ffffff}

footer{display:flex; justify-content:center; align-items:center; flex-direction:column; gap:6px; margin-top:15px}
.brand-mark{width:82px; height:82px; background:url('../img/concon-logo.svg') center/contain no-repeat; filter:invert(1)}
.logoconcon{max-width:160px}