/* Reset y tipografía básica */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#88afd8;
  --accent2:#4b6fa5;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card-bg:linear-gradient(135deg,#fff 60%,#e3eaf3 100%);
  --panel-bg:linear-gradient(135deg,#fff 60%,#dbe7f6 100%);
  --shadow:0 4px 24px rgba(136,175,216,0.08),0 1.5px 6px rgba(75,111,165,0.08);
}
html {
  scroll-behavior: smooth;
}
body{
  font-family:'Poppins',Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#0f172a;
  background:var(--bg);
  line-height:1.5;
  font-size:1.1rem;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,#88afd8 0%,#4b6fa5 100%);box-shadow:var(--shadow);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1.2rem}
.brand{font-weight:900;font-size:1.5rem;color:#fff;text-shadow:0 2px 8px #88afd880;letter-spacing:2px;}
.main-nav a{margin-left:1rem;color:#fff;text-decoration:none;font-weight:500;transition:.2s}
.main-nav a:hover{color:#4b6fa5;text-shadow:0 2px 8px #4b6fa580;}
.cta{background:var(--accent2);color:#fff;border:0;padding:.6rem 1.2rem;border-radius:12px;font-size:1rem;font-weight:700;box-shadow:0 2px 8px #4b6fa580;transition:.2s;cursor:pointer;}
.cta:hover{background:#fff;color:var(--accent2);box-shadow:0 4px 16px #4b6fa580;}
.hero{
  padding:4rem 0;
  background: linear-gradient(120deg,#88afd8 0%,#4b6fa5 100%);
  position: relative;
  color:#fff;
  text-align:center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  right: -20%;
  bottom: -10%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200,100 C230,90 260,110 280,140 C300,170 310,200 315,230 C320,260 325,290 315,320 C305,350 295,380 285,410 C275,440 265,470 245,490 C225,510 205,520 185,540 C165,560 145,580 125,600 C105,620 85,630 65,610 C45,590 35,570 25,540 C15,510 5,480 15,450 C25,420 35,390 45,360 C55,330 65,300 85,280 C105,260 125,250 145,230 C165,210 185,190 165,170 C145,150 125,130 145,120 C165,110 185,104 200,100' fill='rgba(255,255,255,0.1)' stroke='white' stroke-width='8'/%3E%3Ccircle cx='280' cy='140' r='15' fill='%23ff2ae0'/%3E%3Ccircle cx='315' cy='320' r='15' fill='%2300e0ff'/%3E%3Ccircle cx='185' cy='400' r='15' fill='%23ff2ae0'/%3E%3Ccircle cx='225' cy='540' r='15' fill='%2300e0ff'/%3E%3Ccircle cx='45' cy='360' r='15' fill='%23ff2ae0'/%3E%3Ctext x='290' y='130' fill='white' font-size='18' font-weight='bold'>Bogotá%3C/text%3E%3Ctext x='325' y='310' fill='white' font-size='18' font-weight='bold'>Medellín%3C/text%3E%3Ctext x='55' y='350' fill='white' font-size='18' font-weight='bold'>Cali%3C/text%3E%3Ctext x='235' y='530' fill='white' font-size='18' font-weight='bold'>B/quilla%3C/text%3E%3C/svg%3E");
  background-size: 30% auto;
  background-position: 65% center;
  background-repeat: no-repeat;
  opacity: 0.70;
  z-index: 0;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
  animation: mapPulse 4s ease-in-out infinite;
}

@keyframes mapPulse {
  0% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
  100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }}
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1{font-size:2.5rem;margin-bottom:.7rem;font-weight:900;letter-spacing:1px;}
.hero p{color:#f0f0f0;margin-bottom:1.2rem;font-size:1.2rem;}
.hero-actions .btn{
  display:inline-block;
  margin-right:.7rem;
  padding:.8rem 1.4rem;
  border-radius:16px;
  text-decoration:none;
  font-size:1.1rem;
  font-weight:700;
  box-shadow:0 2px 8px #88afd880;
  transition: all .3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn.primary{
  background:var(--accent2);
  color:#fff;
}
.btn.primary:hover{
  background:#fff;
  color:var(--accent2);
  box-shadow:0 4px 20px rgba(75,111,165,0.4);
  transform: translateY(-2px);
}
.btn.outline{
  border:2px solid #fff;
  color:#fff;
  background:transparent;
}
.btn.outline:hover{
  background:#fff;
  color:var(--accent);
  transform: translateY(-2px);
  box-shadow:0 4px 20px rgba(75,111,165,0.4);
}
.features{padding:2.5rem 0;}
.features h2{margin-bottom:1.2rem;font-size:2rem;color:var(--accent2);font-weight:800;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;}
.card{background:var(--card-bg);padding:1.2rem 1rem 1.2rem 1.2rem;border-radius:18px;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:.8rem;transition:.2s;position:relative;overflow:hidden;}
.card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 32px #88afd840;}
.icon-gradient {
  background: linear-gradient(120deg, #00e0ff, #ff2ae0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px #88afd880);
}
.card i {
  font-size: 2rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), filter .18s;
  transform-origin: center center;
}
/* SVG icons inside cards (fallbacks) */
.card svg.card-icon{
  width:36px;height:36px;flex-shrink:0;display:block;filter:drop-shadow(0 2px 8px #88afd880);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), filter .18s;
  transform-origin: center center;
}

/* Efecto hover: escala ligera en el icono cuando se pasa el ratón sobre el card */
.card:hover i,
.card:hover svg.card-icon{
  transform: scale(1.12);
  filter: drop-shadow(0 6px 18px rgba(136,175,216,0.18));
}
/* Accesibilidad: oculto visualmente pero disponible para lectores de pantalla */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
.card h3{font-size:1.2rem;font-weight:700;color:var(--accent2);margin-bottom:.3rem;}
.card p{color:var(--muted);font-size:1rem;}
.consola{padding:2.5rem 0;}
.consola h2{font-size:2rem;color:var(--accent2);font-weight:800;margin-bottom:1.2rem;}
.consola-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.panel{background:var(--panel-bg);padding:1.2rem;border-radius:18px;box-shadow:var(--shadow);transition:.2s;}
.panel h3{margin-bottom:.9rem;font-size:1.1rem;color:var(--accent);font-weight:700;}
.panel-stats{display:flex;gap:1.2rem;margin-top:1rem;}
.panel-stats div{background:#fff;padding:.7rem 1rem;border-radius:12px;text-align:center;box-shadow:0 2px 8px #88afd820;transition:.2s;}
.panel-stats div:hover{background:var(--accent);color:#fff;transform:scale(1.08);}
.events-table{width:100%;border-collapse:collapse;margin-top:.7rem;box-shadow:0 2px 8px #88afd820;}
.events-table th, .events-table td{padding:.7rem;border-bottom:1px solid #e3eaf3;text-align:left;font-size:1rem;transition:.2s;}
.events-table tr:hover{background:#e3eaf3;}
#search{width:100%;padding:.7rem;border-radius:12px;border:2px solid #88afd8;margin-bottom:.7rem;font-size:1rem;}
.site-footer{margin-top:2.5rem;padding:1.2rem 0;background:linear-gradient(90deg,#88afd8 0%,#4b6fa5 100%);color:#fff;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;}
.footer-links a{color:#fff;margin-left:1rem;text-decoration:none;transition:.2s;}
.footer-links a:hover{color:#4b6fa5;}
@media(max-width:800px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .consola-grid{grid-template-columns:1fr}
  .features h2,.consola h2{font-size:1.5rem;}
}
@media(max-width:500px){
  .brand{font-size:1.1rem;}
  .hero h1{font-size:1.3rem;}
  .features h2,.consola h2{font-size:1.1rem;}
}
.fade-in{animation:fadeIn .7s cubic-bezier(.4,0,.2,1);}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}