@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --pt-ink: #0f172a;
  --pt-forest: #1e293b;
  --pt-paper: #f8fafc;
  --pt-panel: #ffffff;
  --pt-amber: #ffae42;
  --pt-orange: #d9480f;
  --pt-muted: #58677b;
  --pt-line: rgba(15,23,42,.16);
  --pt-mono: 'IBM Plex Mono', monospace;
  --pt-sans: 'DM Sans', sans-serif;
  --pt-display: 'Barlow Condensed', sans-serif;
}
html[data-theme="dark"] {
  --pt-ink: #f8fafc; --pt-paper: #151e2d; --pt-panel: #1d293a; --pt-muted: #cbd5e1;
  --pt-line: rgba(248,250,252,.17);
}
html[data-theme="dark"] body:not(:has(#video-container)) { color: var(--pt-ink) !important; }
html[data-theme="dark"] .site-nav, html[data-theme="dark"] body:not(:has(#video-container)) .card,
html[data-theme="dark"] body:not(:has(#video-container)) .item { background: var(--pt-panel); }
html[data-theme="dark"] .site-brand, html[data-theme="dark"] .site-nav-links a,
html[data-theme="dark"] body:not(:has(#video-container)) section h2,
html[data-theme="dark"] body:not(:has(#video-container)) .card h3,
html[data-theme="dark"] body:not(:has(#video-container)) .item h3,
html[data-theme="dark"] .home-hero h1 { color: var(--pt-ink); }
html[data-theme="dark"] .home-hero p, html[data-theme="dark"] body:not(:has(#video-container)) .card p,
html[data-theme="dark"] body:not(:has(#video-container)) .item p,
html[data-theme="dark"] .eyebrow { color: #cbd5e1; }
html[data-theme="dark"] body:not(:has(#video-container)) .contact input,
html[data-theme="dark"] body:not(:has(#video-container)) .contact textarea { background: #1d293a; color: #f8fafc; }
html[data-theme="dark"] body:not(:has(#video-container)) #themeToggle { color: var(--pt-ink); background: var(--pt-panel); }
* { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--pt-orange) !important; outline-offset: 3px !important; }
html { scroll-behavior: smooth; }
body { font-family: var(--pt-sans); }
button, input, textarea { font: inherit; }

/* Field console: the timer remains camera-first, with controls in reach. */
body:has(#video-container) {
  --text-color: #f8fafc;
  --overlay-bg: rgba(15, 23, 42, .94);
  background: #0f172a !important;
  color: #f8fafc;
  height: 100dvh !important;
  min-height: 100dvh;
  overflow: hidden !important;
  font-family: var(--pt-sans) !important;
}
body:has(#video-container) #app-container { width: 100%; height: 100dvh; min-height: 100dvh; padding: 0; }
body:has(#video-container) #video-container {
  border: 0; border-radius: 0; box-shadow: none; background:
    radial-gradient(ellipse at 50% 45%, rgba(255,140,0,.1), transparent 52%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 8px), #111c2d;
}
body:has(#video-container) video { opacity: .72; border-radius: 0; }
body:has(#video-container) #overlay-canvas { opacity: .9; }
body:has(#video-container) #timer-display {
  top: 43%; padding: .12em .2em; border: 0; border-radius: 0; background: transparent;
  color: #f8fafc; text-shadow: 0 5px 30px rgba(0,0,0,.62);
  font: 600 clamp(3.5rem, 12vw, 9.5rem)/.95 var(--pt-mono); letter-spacing: -.09em;
}
body:has(#video-container) #status-message {
  top: 76px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(90vw,680px);
  padding: 11px 17px; color: #f8fafc; background: rgba(15,23,42,.93); border: 1px solid rgba(255,140,0,.42);
  border-radius: 6px; font-size: .84rem; letter-spacing: .02em; box-shadow: none;
}
body:has(#p2p-panel) #p2p-panel { right: auto; bottom: auto; }
body:has(#p2p-panel) #status-message {
  top: 78px; left: 50%; right: auto; width: min(46vw,600px); max-width: min(600px,calc(100vw - 700px));
  transform: translateX(-50%);
}
body:has(#video-container) #controls {
  bottom: max(24px, env(safe-area-inset-bottom)); left: auto; width: auto; padding: 0;
  justify-content: center; z-index: 21;
}
body:has(#video-container) #controls button, body:has(#video-container) button {
  min-height: 58px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18);
  background: var(--pt-amber) !important; background-image: none !important; color: #0f172a !important; box-shadow: 0 8px 26px rgba(0,0,0,.26);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
body:has(#video-container) #controls button { min-width: 220px; font-size: 1rem; }
body:has(#video-container) #controls button:hover, body:has(#video-container) button:hover { background: #ffc266 !important; }
body:has(#video-container) #sensitivity-slider-container {
  left: 50%; bottom: 105px; width: min(86vw,390px); max-width: 390px; padding: 12px 17px;
  gap: 6px; flex-direction: column; color: #f8fafc; background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: none;
}
body:has(#video-container) #sensitivity-slider { height: 7px; accent-color: var(--pt-amber); background: #526177; }
body:has(#video-container) #sensitivity-slider::-webkit-slider-thumb { background: var(--pt-amber); }
body:has(#video-container) #laps-container {
  top: 80px; right: 24px; width: min(290px,28vw); max-height: 48vh; padding: 17px;
  background: rgba(15,23,42,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 7px;
  color: #f8fafc; box-shadow: none; backdrop-filter: blur(12px); font: .8rem var(--pt-sans);
}
body:has(#video-container) #laps-container h3 { color: var(--pt-amber); font: 700 .74rem var(--pt-sans); text-align: left; text-transform: uppercase; letter-spacing: .12em; }
body:has(#video-container) #laps-list li { border-color: rgba(255,255,255,.12); padding: 8px 2px; font: .76rem var(--pt-mono); }
body:has(#video-container) .message-box, body:has(#video-container) .modal-content {
  color: var(--pt-ink); background: var(--pt-panel); border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 25px 80px rgba(0,0,0,.4); border-radius: 10px; font-family: var(--pt-sans);
}
body:has(#video-container) .message-box button, body:has(#video-container) .modal-buttons button {
  flex: 1; max-width: none; border-radius: 6px; min-height: 52px; background: var(--pt-amber) !important;
  background-image: none !important; color: #0f172a !important; box-shadow: none; text-transform: none; letter-spacing: 0;
}
body:has(#video-container) .modal { background: rgba(15,23,42,.86); backdrop-filter: blur(5px); }
body:has(#video-container) .modal-content { width: min(92vw,530px); padding: clamp(22px,5vw,42px); }
body:has(#video-container) .modal-content h2 { font: 800 2rem var(--pt-display); color: var(--pt-ink); }
body:has(#video-container) .modal-content p { color: #58677b; }
body:has(#video-container) .modal-content label { color: #0f172a; }
html[data-theme="dark"] body:has(#video-container) .modal-content label,
html[data-theme="dark"] body:has(#video-container) .modal-content p { color: #cbd5e1; }
body:has(#video-container) #setup-modal .modal-buttons button,
body:has(#video-container) #excel-modal .modal-buttons button,
body:has(#video-container) #names-modal .modal-buttons button,
body:has(#video-container) #repeat-modal .modal-buttons button {
  background: #ffae42 !important; background-image: none !important; color: #0f172a !important;
}

.pt-app-nav {
  position: fixed; z-index: 40; top: 20px; left: 24px; display: flex; align-items: center; gap: 12px;
  color: #f8fafc; text-decoration: none; font: 800 .84rem var(--pt-sans); letter-spacing: .12em; text-transform: uppercase;
}
.pt-app-nav::before { content: 'P'; width: 35px; height: 35px; display: grid; place-items: center; background: var(--pt-amber); color: var(--pt-ink); border-radius: 4px; font: 800 1.2rem var(--pt-display); }
.pt-app-nav a { color: inherit; text-decoration: none; }
body:has(#video-container) #p2p-panel {
  position: fixed; top: 78px; left: 24px; z-index: 24; width: min(300px, calc(100vw - 48px));
  background: rgba(15,23,42,.96); color: #f8fafc; border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
}
body:has(#video-container) #p2p-header { padding: 13px; color: var(--pt-amber); font-weight: 700; }
body:has(#video-container) #p2p-content { padding: 12px; }
body:has(#video-container) #p2p-content input { min-height: 46px; padding: 10px; background: #f1f5f9; color: #0f172a; border: 0; border-radius: 4px; }
body:has(#video-container) #logo { display: none !important; }

/* Home and events use an editorial field-guide canvas, not a product template. */
body:not(:has(#video-container)) {
  margin: 0; background: var(--pt-paper) !important; color: var(--pt-ink) !important;
  font-family: var(--pt-sans) !important; line-height: 1.55;
}
body:not(:has(#video-container)) #particles { display: none; }
body:not(:has(#video-container)) header {
  position: relative; clip-path: none; padding: 0; text-align: left; color: var(--pt-ink);
  background: transparent; box-shadow: none;
}
body:not(:has(#video-container)) .header-container { display: none; }
body:not(:has(#video-container)) #themeToggle {
  position: absolute; top: 18px; right: clamp(18px, 3.5vw, 64px);
  width: 44px; height: 44px; border: 1px solid var(--pt-line); border-radius: 4px;
  background: var(--pt-panel); color: var(--pt-ink); box-shadow: none; font-size: 1rem;
}
body:not(:has(#video-container)) .google-translate { top: 24px; right: 82px; }
.site-nav {
  width: 100%; max-width: none; margin: 0; height: 78px; padding: 0 clamp(18px, 3.5vw, 64px); display: flex; align-items: center;
  gap: 36px; border-bottom: 1px solid var(--pt-line);
}
.site-brand { color: var(--pt-ink); text-decoration: none; font: 800 1.3rem var(--pt-display); letter-spacing: .09em; }
.site-brand b { color: var(--pt-orange); }
.site-nav-links { margin-left: auto; display: flex; gap: 26px; }
.site-nav-links a { color: var(--pt-ink); text-decoration: none; font-size: .8rem; font-weight: 700; }
.site-nav-links a:hover { color: var(--pt-orange); }
.site-nav > #themeToggle {
  position: static !important; inset: auto !important; flex: 0 0 38px; width: 38px; height: 38px;
  margin: 0; padding: 0; border: 1px solid var(--pt-line); border-radius: 4px;
  background: var(--pt-panel); color: var(--pt-ink); box-shadow: none; font-size: .9rem;
  transform: none !important; backdrop-filter: none;
}
.site-nav > #themeToggle:hover { background: var(--pt-amber); color: var(--pt-ink); transform: none !important; }
.site-nav > .google-translate {
  position: static !important; inset: auto !important; z-index: auto !important; flex: 0 1 138px;
  width: 138px; height: 36px; min-width: 0; margin: 0; overflow: hidden;
}
.site-nav .goog-te-gadget { max-width: 138px; height: 36px; overflow: hidden; color: var(--pt-muted) !important; font: 500 .65rem var(--pt-sans) !important; }
.site-nav .goog-te-gadget .goog-te-combo {
  max-width: 138px; height: 34px; margin: 0; padding: 0 7px; border: 1px solid var(--pt-line);
  border-radius: 4px; background: var(--pt-panel); color: var(--pt-ink); font: 500 .72rem var(--pt-sans);
}
#main { width: 100%; max-width: none; margin: 0; padding: 0 clamp(18px, 3.5vw, 64px); }
.home-hero {
  min-height: 485px; padding: 75px 0 70px; display: grid; grid-template-columns: 1.1fr .9fr;
  align-items: center; gap: 48px; position: relative; overflow: hidden; border-bottom: 1px solid var(--pt-line);
}
.eyebrow { color: var(--pt-muted); font: 600 .72rem var(--pt-mono); letter-spacing: .12em; text-transform: uppercase; }
.home-hero h1 { max-width: 630px; margin: 17px 0; color: var(--pt-ink); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; font: 800 clamp(3.6rem,7.6vw,7.5rem)/.88 var(--pt-display); letter-spacing: -.035em; text-transform: uppercase; }
.home-hero h1 span { background: none !important; color: var(--pt-orange) !important; -webkit-text-fill-color: var(--pt-orange) !important; }
.home-hero p { max-width: 470px; margin: 22px 0 28px; color: var(--pt-muted); font-size: 1.05rem; }
.hero-cta { display: inline-flex; min-height: 54px; align-items: center; padding: 0 22px; gap: 20px; background: var(--pt-ink); color: #f8fafc; text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.hero-cta::after { content: '↗'; color: var(--pt-amber); font-size: 1.15rem; }
.track-graphic { width: min(100%,460px); aspect-ratio: 1.07; position: relative; display: grid; place-items: center; }
.track-graphic::before { content: ''; width: 82%; height: 58%; border: 24px solid #0f172a; border-radius: 50%; transform: rotate(-29deg); box-shadow: inset 0 0 0 2px rgba(248,250,252,.5); }
.track-graphic::after { content: ''; position: absolute; width: 66%; height: 42%; border: 1px dashed #ff8c00; border-radius: 50%; transform: rotate(-29deg); }
.track-readout { position: absolute; z-index: 2; right: 2%; bottom: 4%; padding: 17px 20px; background: var(--pt-amber) !important; color: #0f172a; box-shadow: 8px 8px 0 rgba(15,23,42,.14); }
.track-readout small { display: block; font: 600 .58rem var(--pt-mono); letter-spacing: .08em; }
.track-readout strong { display: block; font: 600 2rem var(--pt-mono); letter-spacing: -.08em; }
.hero-index { position: absolute; right: 0; top: 26px; color: var(--pt-muted); font: .66rem var(--pt-mono); }
.heroes { padding: 52px 0 67px !important; max-width: none !important; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px !important; text-align: left !important; }
.heroes::before { content: 'ELIGE TU MODO'; grid-column: 1 / -1; margin-bottom: 10px; color: var(--pt-muted); font: 600 .68rem var(--pt-mono); letter-spacing: .14em; }
body:not(:has(#video-container)) .card {
  max-width: none !important; padding: 23px 24px 22px; text-align: left; border: 1px solid var(--pt-line);
  border-radius: 3px; background: var(--pt-panel); box-shadow: none; backdrop-filter: none; transition: transform .2s ease, border-color .2s ease;
}
body:not(:has(#video-container)) .card:hover { transform: translateY(-3px); border-color: #ff8c00; background: #fffaf2; box-shadow: 0 12px 30px rgba(15,23,42,.08); }
body:not(:has(#video-container)) .card-icon { margin: 0 0 20px; display: inline-block; color: var(--pt-orange); font-size: 1.4rem; }
body:not(:has(#video-container)) .card h3 { margin: 0 0 7px; padding: 0; color: var(--pt-ink); background: none; -webkit-text-fill-color: currentColor; font: 800 1.65rem var(--pt-display); text-transform: uppercase; }
body:not(:has(#video-container)) .card p { padding: 0; min-height: 50px; color: var(--pt-muted); font-size: .82rem; }
body:not(:has(#video-container)) .btn { display: inline-flex; width: auto; margin: 15px 0 0; min-height: 43px; align-items: center; justify-content: center; padding: 0 16px; border-radius: 3px; background: linear-gradient(110deg,#d9480f,#ff8c00); color: #0f172a; box-shadow: none; font: 700 .72rem var(--pt-sans); letter-spacing: .12em; }
body:not(:has(#video-container)) .btn::before { content: none; }
body:not(:has(#video-container)) .btn:hover { transform: translateY(-2px); background: #ff8c00; box-shadow: none; color: #0f172a; }
body:not(:has(#video-container)) section:not(.heroes) { max-width: none; padding: 58px 0; border-top: 1px solid var(--pt-line); text-align: left; }
body:not(:has(#video-container)) section h2 { margin: 0 0 27px; color: var(--pt-ink); background: none; -webkit-text-fill-color: currentColor; font: 800 clamp(2rem,4vw,3.4rem)/1 var(--pt-display); text-transform: uppercase; }
body:not(:has(#video-container)) .grid { gap: 12px; }
body:not(:has(#video-container)) .item { padding: 24px; border: 1px solid var(--pt-line); border-left: 2px solid var(--pt-amber); border-radius: 2px; background: rgba(255,255,255,.42); box-shadow: none; backdrop-filter: none; }
body:not(:has(#video-container)) .item:hover { transform: none; box-shadow: none; background: var(--pt-panel); }
body:not(:has(#video-container)) .item h3 { color: var(--pt-ink); background: none; -webkit-text-fill-color: currentColor; font: 800 1.4rem var(--pt-display); }
body:not(:has(#video-container)) .item p { color: var(--pt-muted); font-size: .88rem; }
body:not(:has(#video-container)) .item .icon { font-size: 1.5rem; color: var(--pt-orange); background: none; -webkit-text-fill-color: currentColor; }
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact > p { color: var(--pt-muted); }
.contact form { width: 100%; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact textarea { grid-column: 1 / -1; }
body:not(:has(#video-container)) .contact input, body:not(:has(#video-container)) .contact textarea {
  min-height: 50px; padding: 14px; border: 1px solid var(--pt-line); border-radius: 2px;
  background: var(--pt-panel); color: var(--pt-ink); font-size: .86rem;
}
body:not(:has(#video-container)) .contact input::placeholder, body:not(:has(#video-container)) .contact textarea::placeholder { color: var(--pt-muted); }
body:not(:has(#video-container)) footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px max(22px, calc((100vw - 1180px)/2)); background: var(--pt-ink); color: #f8fafc; text-align: left; font-size: .76rem; }
body:not(:has(#video-container)) footer p { margin: 0; }
body:not(:has(#video-container)) footer .social a { color: var(--pt-amber); }
body:not(:has(#video-container)) .notification { left: 24px; right: auto; bottom: 24px; background: var(--pt-ink); color: white; border: 1px solid var(--pt-amber); border-radius: 3px; box-shadow: 0 8px 25px rgba(15,23,42,.2); }
html[data-theme="dark"] .hero-cta,
html[data-theme="dark"] body:not(:has(#video-container)) footer,
html[data-theme="dark"] body:not(:has(#video-container)) .notification {
  background: #0f172a;
  color: #f8fafc;
}
body:not(:has(#video-container)) .back-to-top { right: 24px; bottom: 25px; border-radius: 3px; background: var(--pt-amber); color: var(--pt-ink); box-shadow: none; }
.events-grid { display: block; }
body:not(:has(#video-container)) .events-section { padding: 50px 0; }
body:not(:has(#video-container)) .events-section h2 { color: var(--pt-ink); }
body:not(:has(#video-container)) .logo { width: 52px; filter: none; animation: none; }
body:has(#proximos-eventos) header:has(.logo) { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; width: 100%; max-width: none; margin: 0; padding: 38px clamp(18px, 3.5vw, 64px) 28px; }
body:has(#proximos-eventos) header:has(.logo) .site-nav { grid-column: 1 / -1; grid-row: 1; width: 100%; padding: 0; }
body:has(#proximos-eventos) header:has(.logo) > a { grid-column: 1; grid-row: 2 / 4; }
body:has(#proximos-eventos) header:has(.logo) h1 { grid-column: 2; grid-row: 2; margin: 0; color: var(--pt-ink); text-shadow: none; background: none; -webkit-text-fill-color: currentColor; font: 800 clamp(2.7rem,6vw,5.8rem)/.92 var(--pt-display); letter-spacing: -.02em; text-transform: uppercase; }
body:has(#proximos-eventos) header:has(.logo) .tagline { grid-column: 2; grid-row: 3; margin: 0; color: var(--pt-muted); font-size: .92rem; }
body:not(:has(#video-container)) main:has(#proximos-eventos) { padding-top: 0; }
body.construction-page:not(:has(#video-container)) { margin: 0; background: var(--pt-paper) !important; color: var(--pt-ink) !important; font-family: var(--pt-sans) !important; overflow: auto !important; min-height: 100dvh; display: grid; place-items: center; padding: 72px 20px 30px; }
body.construction-page .container { width: min(100%,620px); margin: auto; padding: clamp(28px,7vw,62px); text-align: left; border: 1px solid var(--pt-line); border-radius: 4px; background: var(--pt-panel); box-shadow: 16px 16px 0 rgba(15,23,42,.11); animation: none; }
body.construction-page .logo { width: 56px; margin: 0 0 28px; filter: none; animation: none; }
body.construction-page .icon { margin: 0; color: var(--pt-orange); font: 600 .72rem var(--pt-mono); letter-spacing: .1em; }
body.construction-page h1 { margin: 13px 0 15px; color: var(--pt-ink); background: none; text-shadow: none; -webkit-text-fill-color: currentColor; font: 800 clamp(3rem,9vw,5rem)/.95 var(--pt-display); letter-spacing: 0; text-align: left; }
body.construction-page p { color: var(--pt-muted); font-size: 1rem; }
body.construction-page .pt-app-nav { color: var(--pt-ink); }
body.construction-page .pt-app-nav::before { background: var(--pt-amber); }
body.construction-page:not(:has(#video-container)) .btn,
body.construction-page:not(:has(#video-container)) #backHome { min-height: 50px; padding: 0 20px; border-radius: 3px; background: linear-gradient(110deg,#d9480f,#ff8c00) !important; background-image: none !important; color: #0f172a !important; box-shadow: none; font: 700 .8rem var(--pt-sans); }

/* Desktop result station */
body:has(#qrcode) { min-height: 100dvh; background: var(--pt-paper) !important; color: var(--pt-ink); overflow: auto !important; display: block !important; }
body:has(#qrcode) header {
  position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr); grid-template-rows: auto auto;
  align-content: center; align-items: center; column-gap: 20px; min-height: 196px;
  padding: 24px clamp(18px, 3.5vw, 64px); background: var(--pt-ink); color: #f8fafc; clip-path: none; border-bottom: 0;
}
body:has(#qrcode) header > a { grid-column: 1; grid-row: 1 / 3; }
body:has(#qrcode) header .logo { display: block; width: 56px; filter: none; animation: none; }
body:has(#qrcode) header h1 { grid-column: 2; grid-row: 1; margin: 0; color: #f8fafc; background: none; -webkit-text-fill-color: currentColor; text-shadow: none; font: 800 clamp(2rem,5vw,4.7rem)/.95 var(--pt-display); letter-spacing: 0; }
body:has(#qrcode) header .subtitle { grid-column: 2; grid-row: 2; margin: 8px 0 0; color: #cbd5e1; font-size: .9rem; }
body:has(#qrcode) .pt-app-nav { position: absolute; top: 14px; right: clamp(18px, 3.5vw, 64px); left: auto; }
body:has(#qrcode) .hero { width: 100%; max-width: none; margin: 35px 0; padding: 0 clamp(18px, 3.5vw, 64px); }
body:has(#qrcode) .hero-overlay { padding: clamp(20px,4vw,44px); background: var(--pt-panel); border: 1px solid var(--pt-line); }
body:has(#qrcode) .hero-overlay h2 { color: var(--pt-ink); font: 800 2rem var(--pt-display); }
body:has(#qrcode) #qrcode { width: min(100%,260px); min-height: 260px; display: grid; place-items: center; border: 1px solid var(--pt-line); }
body:has(#qrcode) #qrcode canvas { position: relative !important; inset: auto !important; z-index: 1 !important; display: block !important; width: 200px; height: 200px; margin: 0 auto; }
body:has(#qrcode) #status-message { position: static; width: auto; max-width: none; color: var(--pt-ink); background: #fff1dc; border-left: 3px solid #ff8c00; box-shadow: none; }
body:has(#qrcode) #laps-container { position: static; width: auto; max-width: none; max-height: none; margin-top: 24px; background: transparent; border: 1px solid var(--pt-line); box-shadow: none; }
body:has(#qrcode) #laps-list li { color: var(--pt-ink); border-color: var(--pt-line); }

@media (max-width: 760px) {
  .site-nav { height: auto; min-height: 65px; padding: 10px 18px; gap: 10px; flex-wrap: wrap; }
  .site-nav > .site-brand { margin-right: auto; }
  .site-nav-links { display: none; }
  .site-nav > #themeToggle { flex-basis: 36px; width: 36px; height: 36px; }
  .site-nav > .google-translate { flex: 0 1 112px; width: 112px; }
  .site-nav .goog-te-gadget, .site-nav .goog-te-gadget .goog-te-combo { max-width: 112px; }
  .home-hero { min-height: 0; padding: 66px 0 35px; grid-template-columns: 1fr; gap: 18px; }
  .home-hero h1 { max-width: 490px; font-size: clamp(3.5rem,16vw,6rem); }
  .track-graphic { max-width: 300px; margin: 0 auto; }
  .track-graphic::before { border-width: 15px; }
  .heroes { padding: 36px 0 42px !important; grid-template-columns: 1fr; }
  .heroes::before { margin-bottom: 0; }
  .contact { grid-template-columns: 1fr; gap: 8px; }
  .contact form { grid-template-columns: 1fr; }
  body:has(#proximos-eventos) header:has(.logo) { padding: 20px 18px 20px; }
  #main { padding: 0 18px; }
  body:not(:has(#video-container)) section:not(.heroes) { padding: 38px 0; }
  body:not(:has(#video-container)) .grid { grid-template-columns: 1fr; }
  body:not(:has(#video-container)) footer { padding: 24px 18px; }
  body:not(:has(#video-container)) .notification { left: 12px; bottom: 12px; max-width: calc(100vw - 84px); }
  body:not(:has(#video-container)) .back-to-top { right: 12px; bottom: 12px; }
  body:has(#proximos-eventos) header:has(.logo) .site-nav { padding: 10px 0; }
  body:has(#proximos-eventos) header:has(.logo) > a { grid-row: 2 / 4; }
  body:has(#video-container) #status-message { top: 70px; font-size: .74rem; }
  body:has(#video-container) #timer-display { top: 41%; font-size: clamp(3.1rem,14vw,6rem); }
  body:has(#video-container) #laps-container { top: auto; right: 12px; bottom: 106px; width: min(46vw,210px); max-height: 27vh; padding: 10px; }
  body:has(#video-container) #laps-container h3 { font-size: .65rem; }
  body:has(#video-container) #laps-list li { font-size: .66rem; }
  body:has(#video-container) #sensitivity-slider-container { bottom: 93px; left: 12px; transform: none; width: min(46vw,190px); padding: 9px; font-size: .68rem; }
  body:has(#video-container) #controls { left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
  body:has(#video-container) #controls button { min-height: 62px; min-width: min(88vw,360px); font-size: 1rem; }
  .pt-app-nav { top: 15px; left: 16px; }
  .pt-app-nav::before { width: 30px; height: 30px; }
  body:has(#video-container) #p2p-panel { top: 118px; left: 12px; width: min(54vw,250px); }
  body:has(#p2p-panel) #status-message { top: 70px; left: 50%; width: 90vw; max-width: 90vw; transform: translateX(-50%); }
}
@media (min-width: 761px) and (max-width: 900px) {
  body:has(#video-container) #laps-container { top: auto; right: 12px; bottom: 112px; width: min(33vw,240px); max-height: 24vh; }
  body:has(#p2p-panel) #p2p-panel { top: 118px; left: 12px; width: min(250px,30vw); }
  body:has(#p2p-panel) #status-message { top: 70px; left: 50%; width: 90vw; max-width: 90vw; transform: translateX(-50%); }
}
@media (max-width: 400px) {
  body:has(#video-container) #laps-container { width: 43vw; right: 8px; }
  body:has(#video-container) #sensitivity-slider-container { left: 8px; width: 43vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Approved PaceTrack brand palette. */
:root, html[data-theme="dark"] {
  --pt-ink: #0f172a;
  --pt-forest: #1e293b;
  --pt-paper: #f8fafc;
  --pt-panel: #ffffff;
  --pt-amber: #ffae42;
  --pt-orange: #d9480f;
  --pt-muted: #58677b;
  --pt-line: rgba(15, 23, 42, .16);
  --main: #e44812;
  --accent: #ff8c00;
  --dark: #0f172a;
  --light: #f8fafc;
  --text-secondary: #cbd5e1;
  --border: rgba(255, 140, 0, .27);
  --card-bg: rgba(255, 255, 255, .06);
  --hover-bg: rgba(255, 140, 0, .12);
  color-scheme: light;
}
html[data-theme="dark"] {
  --pt-ink: #f8fafc;
  --pt-paper: #151e2d;
  --pt-panel: #1d293a;
  --pt-muted: #cbd5e1;
  --pt-line: rgba(248, 250, 252, .17);
  --text-secondary: #cbd5e1;
  --card-bg: rgba(248, 250, 252, .06);
  color-scheme: dark;
}
body:has(#video-container) { background: #0f172a !important; color: #f8fafc !important; --overlay-bg: rgba(15, 23, 42, .93); }
body:has(#video-container) #video-container { background: radial-gradient(ellipse at 50% 45%, rgba(255, 140, 0, .11), transparent 52%), #111c2d !important; }
body:has(#video-container) #controls button, body:has(#video-container) button:not(#themeToggle) { background: #ffae42 !important; color: #0f172a !important; border-color: rgba(255, 255, 255, .28) !important; }
body:has(#video-container) #controls button:hover, body:has(#video-container) button:hover:not(#themeToggle) { background: #ffc266 !important; }
body:has(#video-container) #status-message, body:has(#video-container) #sensitivity-slider-container, body:has(#video-container) #laps-container, body:has(#video-container) #p2p-panel { background-color: rgba(15, 23, 42, .94) !important; border-color: rgba(255, 140, 0, .45) !important; }
body:has(#video-container) .modal { background: rgba(15, 23, 42, .88) !important; }
body:has(#video-container) .modal-content, body:has(#video-container) .message-box { background: #f8fafc !important; color: #0f172a !important; }
html[data-theme="dark"] body:has(#video-container) .modal-content, html[data-theme="dark"] body:has(#video-container) .message-box { background: #1d293a !important; color: #f8fafc !important; border-color: rgba(255, 140, 0, .42) !important; }
body:has(#video-container) .modal-content button, body:has(#video-container) .modal-buttons button, body:has(#video-container) .message-box button { background: #ffae42 !important; background-image: none !important; color: #0f172a !important; }
body:not(:has(#video-container)) .home-hero h1 span { color: #d9480f !important; -webkit-text-fill-color: #d9480f !important; }
body:not(:has(#video-container)) .track-readout { background: #ffae42 !important; color: #0f172a !important; }
body:not(:has(#video-container)) .track-graphic::before { border-color: #0f172a !important; }
body:not(:has(#video-container)) .track-graphic::after { border-color: #ff8c00 !important; }
body:not(:has(#video-container)) .site-nav-links a:hover, body:not(:has(#video-container)) .site-brand b, body:not(:has(#video-container)) .card-icon, body:not(:has(#video-container)) .icon, body:not(:has(#video-container)) .hero-index { color: #d9480f !important; }
body:not(:has(#video-container)) .card:hover, body:not(:has(#video-container)) .item:hover { border-color: #ff8c00 !important; }
body:not(:has(#video-container)) .item { border-left-color: #ff8c00 !important; }
body:not(:has(#video-container)) .btn, body.construction-page .btn { background: linear-gradient(110deg, #d9480f, #ff8c00) !important; color: #0f172a !important; }
body:not(:has(#video-container)) .btn:hover, body.construction-page .btn:hover { background: linear-gradient(110deg, #c13b0c, #eb7900) !important; }
body:has(#qrcode) header { border-bottom: 3px solid #ff8c00; }
body:has(#qrcode) #status-message { border-left: 3px solid #ff8c00; }
:focus-visible { outline-color: #ff8c00 !important; }