/* ===== Proyecto Rally Drone Race · estilo del evento (negro, rojo del logo, tipografía Designer, HUD) ===== */
@font-face { font-family: 'Designer'; src: url(/assets/fuentes/Designer.otf) format('opentype'); font-display: swap; }

:root {
  --bg: #050505;
  --bg-2: #0d0d0d;
  --line: rgba(255, 255, 255, .1);
  --text: #f3f3f3;
  --muted: #9a9a9a;
  --accent: #ce3a1b;         /* rojo oficial del logo */
  --accent-2: #ff3b2a;
  --accent-ink: #fff;
  --font: 'Saira', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Designer', 'Saira', sans-serif;
  --radius: 6px;
}
body { background: var(--bg); }
body::before { /* grano de película */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
em { font-style: normal; color: var(--accent-2); }
.btn { border-radius: 4px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 13.5px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 0 28px; }
.btn.accent:hover { --glow: rgba(255, 40, 20, .6); background: var(--accent-2); }
.btn.ghost { border-radius: 4px; }
.nav-in { border-radius: 8px; background: rgba(5,5,5,.6); }
.rd-navtag { font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) { .rd-navtag { display: none; } }
.v { border-radius: 4px; }
.v-play { border-radius: 4px; font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.v-play i { border-radius: 2px; }
.v:hover .v-play { background: var(--accent); }

/* ---------- Hero ---------- */
.rd-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; padding: 120px 0 150px; }
.rd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rd-shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse at center, rgba(5,5,5,.25), rgba(5,5,5,.8) 75%),
  linear-gradient(180deg, rgba(5,5,5,.5), transparent 30%, transparent 60%, #050505),
  repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.hud { position: absolute; width: 46px; height: 46px; border: 2px solid var(--accent-2); z-index: 2; opacity: .9; }
.hud.tl { top: 92px; left: var(--gutter); border-right: 0; border-bottom: 0; }
.hud.tr { top: 92px; right: var(--gutter); border-left: 0; border-bottom: 0; }
.hud.bl { bottom: 130px; left: var(--gutter); border-right: 0; border-top: 0; }
.hud.br { bottom: 130px; right: var(--gutter); border-left: 0; border-top: 0; }
.rd-rec { position: absolute; top: 104px; left: calc(var(--gutter) + 62px); z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.8); }
.rd-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rd-hero-in { display: grid; justify-items: center; text-align: center; gap: 26px; }
.rd-logo { width: min(820px, 92%); height: auto; filter: drop-shadow(0 10px 40px rgba(0,0,0,.7)); }
.rd-sub { max-width: 600px; color: rgba(255,255,255,.82); font-size: clamp(15.5px, 1.5vw, 18px); }
.rd-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rd-cta .btn svg { width: 14px; height: 14px; }
.rd-stats { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: rgba(5,5,5,.7); backdrop-filter: blur(10px); }
.rd-stats div { padding: 20px var(--gutter); border-right: 1px solid var(--line); }
.rd-stats div:last-child { border-right: 0; }
.rd-stats b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); }
.rd-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
  .rd-stats { grid-template-columns: 1fr 1fr; }
  .rd-stats div:nth-child(2) { border-right: 0; }
  .rd-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rd-stats div { padding: 14px var(--gutter); }
  .rd-hero { padding-bottom: 210px; }
  .hud.bl, .hud.br { bottom: 190px; }
}

/* ---------- Encabezados ---------- */
.rd-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.rd-head h2 { font-size: clamp(34px, 5.4vw, 70px); }
.rd-head p { color: var(--muted); max-width: 560px; }
.rd-head.row { max-width: none; }
.rd-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); }
.flag { width: 22px; height: 14px; flex: none; background:
  conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 7.33px 7px; opacity: .9; }

/* ---------- Tarjetas ---------- */
.rd-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-bottom: 18px; }
.rd-grid .big { grid-row: span 2; }
.rd-grid.alt { grid-template-columns: 1fr 1.5fr; }
.rd-grid.alt .big { grid-column: 2; grid-row: 1 / span 2; }
.rd-card { position: relative; display: flex; flex-direction: column; gap: 14px; }
.rd-card.big .v { flex: 1; aspect-ratio: auto; min-height: 300px; }
.rd-card .v { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
.rd-card .v::before { /* esquinas HUD en cada video */
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) top left / 16px 2px,
    linear-gradient(var(--accent-2), var(--accent-2)) top left / 2px 16px,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 16px 2px,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 2px 16px;
  background-repeat: no-repeat; opacity: 0; transition: opacity .4s;
}
.rd-card:hover .v::before { opacity: 1; }
.rd-meta { display: flex; gap: 16px; align-items: flex-start; }
.num { flex: none; font-family: var(--font-display); font-size: 15px; color: #fff; background: var(--accent); padding: 5px 9px 3px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.rd-meta h3 { font-size: clamp(18px, 1.8vw, 24px); margin: 2px 0 6px; }
.rd-meta p { color: var(--muted); font-size: 14.5px; max-width: 460px; }
@media (max-width: 860px) {
  .rd-grid, .rd-grid.alt { grid-template-columns: 1fr; }
  .rd-grid .big, .rd-grid.alt .big { grid-row: auto; grid-column: auto; }
  .rd-card.big .v { aspect-ratio: 3 / 2; min-height: 0; flex: none; }
}

/* Banda de circuitos */
.rd-band { position: relative; padding-block: clamp(70px, 10vw, 120px); background: linear-gradient(180deg, #050505, #140504 50%, #050505); border-block: 1px solid rgba(206,58,27,.25); }
.rd-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(206,58,27,.05) 60px 62px); }
.rd-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
@media (max-width: 860px) { .rd-three { grid-template-columns: 1fr; } }

/* Cierre */
.rd-end { position: relative; overflow: hidden; padding-top: clamp(90px, 12vw, 150px); }
.rd-end-stripes { position: absolute; left: -10%; right: -10%; top: 40px; height: 14px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); transform: skewX(-20deg); opacity: .8; }
.rd-end-in { display: grid; justify-items: center; text-align: center; gap: 20px; padding-bottom: clamp(80px, 10vw, 130px); }
.rd-end h2 { font-size: clamp(40px, 7vw, 92px); }
.rd-end p { color: var(--muted); max-width: 540px; }