:root {
  --rojo: #b00020;
  --rojo-profundo: #5d0011;
  --rojo-vivo: #e1082d;
  --dorado: #d4af37;
  --dorado-suave: #f5d879;
  --negro: #101010;
  --marfil: #fff8ef;
  --texto: #251b1b;
  --sombra: 0 24px 80px rgba(0,0,0,.22);
  --radio: 28px;
  --max: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--marfil); color: var(--texto); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.topbar { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(calc(100% - 28px), var(--max)); display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(18, 8, 10, .58); backdrop-filter: blur(18px); color: white; box-shadow: 0 15px 55px rgba(0,0,0,.22); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: -.04em; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, var(--dorado-suave), var(--dorado) 44%, #9b6c08 100%); color: var(--rojo-profundo); font-size: 15px; font-weight: 1000; box-shadow: 0 0 0 5px rgba(212,175,55,.16); }
nav { display: flex; gap: 4px; font-size: 13px; font-weight: 700; }
nav a { padding: 10px 13px; border-radius: 999px; color: rgba(255,255,255,.88); }
nav a:hover { background: rgba(255,255,255,.15); color: white; }
.menu-btn { display:none; border:0; background:rgba(255,255,255,.14); color:#fff; border-radius:999px; width:42px; height:42px; font-size:21px; }
.hero { min-height: 100vh; position: relative; display: grid; align-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 20% 20%, rgba(245,216,121,.22), transparent 26%), radial-gradient(circle at 80% 30%, rgba(225,8,45,.34), transparent 34%), linear-gradient(135deg, #210006 0%, #790015 52%, #120104 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.08) 45%, transparent 46% 100%), linear-gradient(60deg, transparent 0 48%, rgba(212,175,55,.18) 49%, transparent 50% 100%); background-size: 180px 180px; mask-image: linear-gradient(to bottom, black 0 70%, transparent 100%); opacity: .45; animation: drift 18s linear infinite; }
@keyframes drift { to { transform: translate3d(-180px, 180px, 0); } }
.orb { position: absolute; border-radius: 999px; filter: blur(3px); opacity: .75; animation: float 8s ease-in-out infinite alternate; }
.orb.one { width: 220px; height: 220px; right: 12%; top: 18%; background: rgba(212,175,55,.22); }
.orb.two { width: 360px; height: 360px; left: -90px; bottom: -80px; background: rgba(255,255,255,.08); animation-delay: -2s; }
@keyframes float { to { transform: translateY(34px) scale(1.04); } }
.hero-inner { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; position: relative; z-index: 2; padding-top: 90px; display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(245,216,121,.48); background: rgba(0,0,0,.18); color: var(--dorado-suave); border-radius: 999px; padding: 9px 14px; font-weight: 800; font-size: 13px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(44px, 7vw, 88px); line-height: .9; letter-spacing: -.075em; max-width: 820px; text-wrap: balance; }
.gold { color: var(--dorado-suave); }
.hero p { margin-top: 24px; font-size: clamp(18px, 2vw, 24px); line-height: 1.45; max-width: 720px; color: rgba(255,255,255,.86); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 900; border: 1px solid rgba(255,255,255,.2); transition: .22s ease; }
.btn.primary { background: var(--dorado); color: #250b00; box-shadow: 0 15px 35px rgba(212,175,55,.28); }
.btn.secondary { background: rgba(255,255,255,.1); color: white; backdrop-filter: blur(10px); }
.btn:hover { transform: translateY(-3px); }
.hero-card { position: relative; border-radius: 36px; padding: 24px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(16px); box-shadow: var(--sombra); }
.shield-placeholder { aspect-ratio: 1 / 1.04; border-radius: 30px; display: grid; place-items: center; text-align: center; padding: 34px; background: radial-gradient(circle at 50% 26%, rgba(245,216,121,.42), transparent 25%), linear-gradient(145deg, rgba(176,0,32,.94), rgba(34,0,8,.96)); border: 1px solid rgba(245,216,121,.35); overflow: hidden; position: relative; }
.shield-placeholder::before { content: "241"; position: absolute; font-size: 170px; font-weight: 1000; letter-spacing: -.08em; color: rgba(255,255,255,.055); transform: rotate(-8deg); }
.logo-text { position: relative; z-index: 1; }
.logo-text strong { display: block; font-size: clamp(42px, 7vw, 76px); letter-spacing: -.08em; color: white; }
.logo-text span { color: var(--dorado-suave); font-weight: 900; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; }
section { padding: 96px 18px; position: relative; }
.container { width: min(100%, var(--max)); margin: 0 auto; }
.section-title { display: grid; grid-template-columns: .82fr 1fr; gap: 34px; align-items: end; margin-bottom: 34px; }
.section-title h2 { font-size: clamp(34px, 5vw, 62px); line-height: .95; letter-spacing: -.065em; color: var(--rojo-profundo); }
.section-title p { font-size: 18px; line-height: 1.6; color: #5e5050; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { border-radius: 26px; padding: 26px; min-height: 170px; background: white; box-shadow: 0 18px 50px rgba(74, 30, 30, .08); border: 1px solid rgba(93,0,17,.08); }
.stat b { display: block; font-size: 46px; letter-spacing: -.07em; color: var(--rojo); }
.stat span { color: #6c5b5b; font-weight: 750; line-height: 1.35; display: block; margin-top: 8px; }
.dark-band { background: #111; color: white; overflow: hidden; }
.dark-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(176,0,32,.45), transparent 28%), radial-gradient(circle at 88% 70%, rgba(212,175,55,.24), transparent 27%); }
.dark-band .container { position: relative; z-index: 1; }
.dark-band .section-title h2 { color: white; }
.dark-band .section-title p { color: rgba(255,255,255,.72); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { border-radius: var(--radio); padding: 28px; min-height: 270px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,.18); display: flex; flex-direction: column; justify-content: space-between; }
.icon { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg, var(--dorado), #fff0a8); color: var(--rojo-profundo); font-size: 26px; font-weight: 1000; }
.card h3 { font-size: 26px; letter-spacing: -.04em; margin-top: 28px; }
.card p { color: rgba(255,255,255,.7); line-height: 1.55; margin-top: 12px; }
.timeline { display: grid; gap: 18px; }
.time-item { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 20px; border-radius: 28px; background: white; box-shadow: 0 18px 50px rgba(74,30,30,.08); border: 1px solid rgba(176,0,32,.08); }
.year { display: grid; place-items: center; border-radius: 22px; min-height: 132px; background: linear-gradient(135deg, var(--rojo), var(--rojo-profundo)); color: var(--dorado-suave); font-size: 42px; font-weight: 1000; letter-spacing: -.06em; }
.time-item h3 { font-size: 28px; color: var(--rojo-profundo); margin-bottom: 8px; letter-spacing: -.04em; }
.time-item p { color: #625050; line-height: 1.65; }
.gallery-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-auto-rows: 230px; gap: 16px; }
.photo { position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(135deg, rgba(176,0,32,.94), rgba(212,175,55,.72)); box-shadow: 0 18px 50px rgba(74,30,30,.14); isolation: isolate; }
.photo:nth-child(1) { grid-row: span 2; }
.photo::before { content: "Foto / video\A reemplazable"; white-space: pre; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.9); font-weight: 1000; letter-spacing: -.03em; font-size: 24px; background: linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.08)), repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); }
.photo span { position: absolute; left: 18px; bottom: 18px; z-index: 1; padding: 9px 12px; border-radius: 999px; background: rgba(0,0,0,.32); color: white; backdrop-filter: blur(10px); font-size: 13px; font-weight: 800; }
.video-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-card { border-radius: 28px; overflow: hidden; background: white; box-shadow: 0 18px 50px rgba(74,30,30,.1); }
.video-thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; color: white; font-size: 44px; background: linear-gradient(135deg, #1a0105, var(--rojo)); }
.video-card div:last-child { padding: 20px; }
.video-card h3 { font-size: 21px; color: var(--rojo-profundo); letter-spacing: -.04em; }
.video-card p { color: #685858; margin-top: 8px; line-height: 1.45; }
.chart-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: stretch; }
.quote-box, .bars-box { border-radius: 32px; padding: 32px; background: white; box-shadow: 0 18px 50px rgba(74,30,30,.09); }
.quote-box { background: linear-gradient(145deg, var(--rojo-profundo), var(--rojo)); color: white; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; }
.quote-box h3 { font-size: 34px; letter-spacing: -.055em; line-height: 1; }
.quote-box p { color: rgba(255,255,255,.76); line-height: 1.6; margin-top: 16px; }
.bar { margin: 20px 0; }
.bar label { display: flex; justify-content: space-between; font-weight: 850; color: var(--rojo-profundo); margin-bottom: 8px; }
.track { height: 16px; border-radius: 999px; background: #eee2d8; overflow: hidden; }
.fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rojo), var(--dorado)); }
.final-cta { min-height: 78vh; display: grid; place-items: center; text-align: center; color: white; background: radial-gradient(circle at 50% 20%, rgba(245,216,121,.22), transparent 30%), linear-gradient(135deg, #120104, #650012 55%, #1b0106); overflow: hidden; }
.final-cta h2 { font-size: clamp(42px, 7vw, 86px); line-height: .92; letter-spacing: -.075em; max-width: 920px; margin: 0 auto; }
.final-cta p { max-width: 760px; margin: 24px auto 0; color: rgba(255,255,255,.8); font-size: 20px; line-height: 1.55; }
footer { padding: 32px 18px; background: #0c0c0c; color: rgba(255,255,255,.72); font-size: 14px; }
footer .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.reveal { opacity: 0; transform: translateY(24px); transition: .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { nav { display: none; } nav.open { display:flex; position:absolute; left:10px; right:10px; top:72px; background:rgba(18,8,10,.94); border-radius:24px; padding:12px; flex-direction:column; } .menu-btn { display:block; } .hero-inner, .section-title, .chart-wrap { grid-template-columns: 1fr; } .stats, .cards, .video-row { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr 1fr; } .time-item { grid-template-columns: 1fr; } .year { min-height: 90px; } }
@media (max-width: 620px) { .topbar { top: 10px; } .hero-inner { padding-top: 116px; } .stats, .cards, .video-row, .gallery-grid { grid-template-columns: 1fr; } .photo:nth-child(1) { grid-row: span 1; } section { padding: 72px 16px; } .stat, .card, .quote-box, .bars-box { padding: 24px; } }