:root{
  --vl-red:#E10600;
  --vl-red-dark:#B20000;
  --vl-black:#0f0f10;
  --vl-gray:#2a2a2e;
  --vl-white:#ffffff;
  --vl-off:#f7f7f8;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--vl-black);
  background:var(--vl-white);
}
a{color:var(--vl-red);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eee;
}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--vl-black)}
.brand .logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--vl-red),var(--vl-red-dark));display:inline-block}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{padding:.5rem .75rem;border-radius:10px;color:var(--vl-black);font-weight:600}
.nav-links a.cta{background:var(--vl-red);color:#fff}
.menu-btn{display:none}

@media (max-width:900px){
  .nav-links{display:none}
  .menu-btn{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem .75rem;border:1px solid #ddd;border-radius:10px;background:#fff
  }
  .mobile-menu{
    position:absolute;left:0;right:0;top:64px;
    background:#fff;border-bottom:1px solid #eee;z-index:60;
  }
}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:110px 0 140px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url('/assets/img/ciudad.png') center/cover no-repeat;
}
.hero__body{position:relative;z-index:2}

.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.05;margin:0 0 .6rem}
.hero p{font-size:clamp(16px,2.4vw,20px);opacity:.95;max-width:760px}
.hero .cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:2px solid transparent}
.btn.primary{background:var(--vl-red);color:#fff;border-color:var(--vl-red)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}

/* SECTION */
.section{padding:64px 0;border-top:1px solid #f0f0f0}
.section.dark{background:var(--vl-black);color:#fefefe}
.section.alt{background:var(--vl-off)}
.section h2{font-size:clamp(26px,3.2vw,36px);margin:0 0 14px}
.section p.lead{font-size:18px;opacity:.9;max-width:900px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.card h3{margin:.2rem 0 .25rem}
.card p{opacity:.85}

@media (max-width:900px){.grid-3{grid-template-columns:1fr}}

.footer{padding:26px 0;background:#0d0d0e;color:#cfcfd6}
.footer a{color:#ddd}
.footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.footer small{opacity:.7}
@media (max-width:900px){.footer .grid{grid-template-columns:1fr}}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{background:#111;color:#fff;border:1px solid #222;padding:6px 10px;border-radius:999px;font-size:12px}
.badge.red{background:var(--vl-red)}

.page-hero{padding:56px 0;background:linear-gradient(120deg,#111,#1b1b1d);color:#fff}
.breadcrumbs{font-size:13px;opacity:.85;margin-bottom:6px}
.kicker{color:var(--vl-red);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
blockquote{border-left:4px solid var(--vl-red);padding-left:12px;margin-left:0;color:#333}

/* ========== TICKERS ========== */
.ticker{
  position:absolute;left:0;right:0;height:48px;overflow:hidden;z-index:3;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  pointer-events:none;
}
.ticker.top{top:0;background:linear-gradient(#9c0d0d,#820a0a);}
.ticker.bottom{bottom:0;background:linear-gradient(#161616,#111);}

.ticker__track{display:flex;white-space:nowrap;will-change:transform;gap:0;}
.ticker__content{
  display:flex;align-items:center;justify-content:center;gap:24px;padding:0 16px;
  flex:0 0 100%;
}

/* CHIP base (negra) */
.chip{
  background:#111;color:#fff;border:1px solid #222;
  padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;
}
.chip--red{background:var(--vl-red);border-color:var(--vl-red-dark);}

/* Cinta roja: solo texto blanco */
.ticker.top .chip{
  background:transparent!important;
  border:0!important;
  color:#fff!important;
  padding:0 18px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.ticker.top .dot{color:#fff;opacity:.45;font-weight:900;}

/* Animaciones (CSS simple, opcional si usas JS loop) */
.ticker__left{animation:scroll-left 22s linear infinite;}
.ticker__right{animation:scroll-right 22s linear infinite;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes scroll-right{from{transform:translateX(-100%);}to{transform:translateX(0);}}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  .ticker__left,.ticker__right{animation-play-state:paused;}
}

/* Responsive */
@media (max-width:900px){
  .ticker{height:42px;}
  .ticker.top{top:0;}
  .chip{font-size:13px;padding:7px 12px;}
}

/* Ocultar menú móvil por defecto */
.mobile-menu{display:none;}
.mobile-menu a{
  display:block;padding:14px 20px;border-top:1px dashed #eee;color:var(--vl-black);
}