@font-face {
    font-family: 'Karu';
    src: url('../fonts/KARU-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Karu';
    src: url('../fonts/KARU-MEDIUM.OTF') format('opentype');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karu';
    src: url('../fonts/KARU-LIGHT.OTF') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karu';
    src: url('../fonts/KARU-BOLD.OTF') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* F1 Analytics — Design System */
:root {
  --text-xs:clamp(0.7rem,0.65rem + 0.2vw,0.825rem);
  /*--text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);*/
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  /*--text-hero:clamp(3rem,0.5rem + 7vw,8rem);*/
  --text-hero: clamp(4rem, 1rem + 8vw, 10rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --radius-xl:1rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  /*--font-display:'Grityle','Helvetica Neue',sans-serif;
  --font-body:'Grityle','Helvetica Neue',sans-serif;*/
  --font-display:'Karu','Helvetica Neue',sans-serif;
  --font-body:'Karu','Helvetica Neue',sans-serif;
  /*--font-display:'Titillium Web','Helvetica Neue',sans-serif;
  --font-body:'Rajdhani','Helvetica Neue',sans-serif;*/
  --content-default:1200px;
}
/* 1. Configuración por defecto (Oscuro) */
:root {
  color-scheme: dark; /* Avisa al navegador que el fondo es oscuro */
  
  --color-bg: #0a0a0a;
  --color-surface: #111;
  --color-surface-2: #181818;
  --color-surface-offset: #1e1e1e;
  --color-border: #2a2a2a;
  --color-divider: #222;
  --color-text: #f0f0f0;
  --color-text-muted: #888;
  --color-text-faint: #555;
  --color-primary: #E10600;
  --color-primary-hover: #ff1a16;
  --color-primary-dim: rgba(225, 6, 0, .15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}

/* 2. Variante Modo Claro */
[data-theme="light"] {
  color-scheme: light;
  
  --color-bg: #f4f4f4;
  --color-surface: #fff;
  --color-surface-2: #f8f8f8;
  --color-surface-offset: #eee;
  --color-border: #ddd;
  --color-divider: #e5e5e5;
  --color-text: #111;
  --color-text-muted: #555;
  --color-text-faint: #aaa;
  --color-primary: #C10000;
  --color-primary-hover: #E10600;
  --color-primary-dim: rgba(193, 0, 0, .1);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .15);
}

/* 3. Opcional: Variante Modo Oscuro Explícito 
   (Por si el usuario elige oscuro manualmente en un sistema claro) */
[data-theme="dark"] {
  color-scheme: dark;
  /* Aquí no necesitas repetir todas las variables si ya están en :root, 
     a menos que quieras valores distintos al default */
}

/* Aplicar a los títulos principales para que parezcan oficiales */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  /* Transición suave de colores sin afectar al rendimiento de scroll */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a,button{transition:color var(--transition),background var(--transition),border-color var(--transition),opacity var(--transition)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.container{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6)}
@media(max-width:768px){.container{padding-inline:var(--space-4)}}

/* NAVBAR */
/* NAVBAR */
.navbar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* permite segunda línea en móvil */
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-8);
  background: oklch(from var(--color-bg) l c h / 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: .05em;
  flex-shrink: 0;
}

/* Centro: breadcrumb */
.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.navbar-links a:hover { color: var(--color-text); }

/* Derecha: idioma + tema, juntos y pegados al final */
.lang-switcher { flex-shrink: 0; margin-left: auto; }

.sep { color: var(--color-text-faint); flex-shrink: 0; }

.theme-toggle {
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* Desktop y landscape: una sola línea, breadcrumb en el centro */
@media (min-width: 600px) {
  .navbar { flex-wrap: nowrap; }
  .navbar-links { margin-left: 0; }
  .lang-switcher { margin-left: 0; }
}

/* Móvil vertical (<600px): dos líneas */
@media (max-width: 599px) {
  .navbar {
    padding: var(--space-2) var(--space-4);
    row-gap: 0;
  }

  /* Primera línea: logo + idioma + tema */
  .navbar-logo { order: 1; }
  .lang-switcher { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; }

  /* Segunda línea: breadcrumb completo */
  .navbar-links {
    order: 4;
    width: 100%;             /* ocupa toda la línea */
    flex: none;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
    margin-top: 0;
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .navbar-links::-webkit-scrollbar { display: none; }
}

.sep{color:var(--color-text-faint)}
.theme-toggle{margin-left:auto;padding:var(--space-2);border-radius:var(--radius-full);color:var(--color-text-muted)}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset)}

/* HERO */
.hero{position:relative;min-height:30vh;display:flex;align-items:flex-end;padding:var(--space-12) 0 var(--space-8);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(225,6,0,.12) 0%,transparent 70%),linear-gradient(180deg,var(--color-bg) 0%,transparent 30%,var(--color-bg) 100%);z-index:0}
.hero-content{position:relative;z-index:1;max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6)}
.hero-label{font-size:var(--text-sm);font-family:var(--font-display);color:var(--color-primary);letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--space-3)}
.hero-title{font-family:var(--font-display);font-size:var(--text-hero);font-weight:900;line-height:1;letter-spacing:-.02em;margin-bottom:var(--space-4);font-style: italic;text-transform: uppercase;letter-spacing: -0.01em; transform: scaleX(1.1)}
.hero-title .accent{color:var(--color-primary)}
.hero-sub{font-size:var(--text-lg);color:var(--color-text-muted);max-width:50ch}
.section-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}

/* SEASONS GRID */
.seasons-section{padding:var(--space-12) 0 var(--space-20)}
.seasons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-6)}
.season-card{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.season-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.season-card-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2)}
.season-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease}
.season-card:hover .season-card-image img{transform:scale(1.04)}
.season-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%)}
.season-card-body{padding:var(--space-5) var(--space-6);flex:1}
.season-year{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;display:block;line-height:1}
.season-label{font-size:var(--text-base);color:var(--color-primary);letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:var(--space-3); font-weight: bold;}
.season-champion{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);color:var(--color-text-muted);font-weight:bold;}
.season-card-arrow{position:absolute;top:var(--space-4);right:var(--space-4);color:var(--color-text-faint);transition:color var(--transition),transform var(--transition)}
.season-card:hover .season-card-arrow{color:var(--color-primary);transform:translateX(3px)}

/* PAGE HEADER */
.page-header{padding:var(--space-12) 0 var(--space-8);border-bottom:1px solid var(--color-border)}
.page-label{font-size:var(--text-xs);font-family:var(--font-display);color:var(--color-primary);letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--space-2)}
.page-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;line-height:1.1;margin-bottom:var(--space-2)}
.page-sub{font-size:var(--text-base);color:var(--color-text-muted)}

/* EVENTS GRID */
.events-section{padding:var(--space-10) 0 var(--space-20)}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--space-5)}
.event-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.event-card-number{position:absolute;top:var(--space-3);left:var(--space-3);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;background:var(--color-primary);color:#fff;padding:2px 8px;border-radius:var(--radius-full);z-index:2}
.event-card-image{background:var(--color-surface-2);padding:var(--space-4);display:flex;align-items:center;justify-content:center;min-height:120px}
.event-card-image img{width:100%;max-height:110px;object-fit:contain;transition:transform 300ms ease}
.event-card:hover .event-card-image img{transform:scale(1.05)}
.event-card-body{padding:var(--space-4) var(--space-4);border-top:1px solid var(--color-border)}
.event-flag-country{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.event-flag{font-size:1.1em}
.event-country{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em}
.event-name{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;line-height:1.2;margin-bottom:var(--space-1)}
.event-date{font-size:var(--text-xs);color:var(--color-text-faint)}

/* SESSION CARDS */
.sessions-section{padding:var(--space-10) 0 var(--space-20)}
.sessions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-5);max-width:800px}
.session-card{display:flex;align-items:center;gap:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.session-card:hover{transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.session-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary-dim);border-radius:var(--radius-lg);color:var(--color-primary)}
.session-info{flex:1}
.session-label{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;display:block}
.session-name{font-size:var(--text-sm);color:var(--color-text-muted)}
.session-arrow{color:var(--color-text-faint);transition:color var(--transition),transform var(--transition)}
.session-card:hover .session-arrow{color:var(--color-primary);transform:translateX(3px)}

/* LOADING / EMPTY */
.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-16);color:var(--color-text-muted)}
.spinner{width:36px;height:36px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;color:var(--color-text-muted);padding:var(--space-12)}
.empty-state-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-16);color:var(--color-text-faint)}
.empty-state-box p{font-size:var(--text-base);color:var(--color-text-muted)}
.error-state{color:var(--color-primary);text-align:center;padding:var(--space-8)}

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-footer__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.site-footer__links a {
  color: #0A66C2;
  text-decoration: none;
  font-weight: 600;
}


.page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.page-header-text { flex: 1; }

.standings-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive),
              color var(--transition-interactive);
  white-space: nowrap;
}

.standings-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.standings-btn svg { flex-shrink: 0; }

/* Sobrescribe el padding del navbar en móvil */
@media (max-width: 768px) {
  .navbar {
    padding: var(--space-3) var(--space-4);  /* 2rem → 1rem lateral */
    gap: var(--space-3);
  }

  /* Oculta el breadcrumb en móvil si no cabe */
  .navbar-links {
    display: none;
  }

  /* El lang-switcher y theme-toggle se quedan pero más compactos */
  .theme-toggle {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding-left:  max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
}

.event-card--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(50%);
}

.event-upcoming-badge {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.page-sub {
  margin: 4px 0 0;
  font-size: var(--text-base);
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.chart-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--color-surface-offset);
  color: var(--color-primary);              
  border: 1.5px solid var(--color-primary);     
  font-size: 14px;
  font-weight: 700;
  cursor: help;
  position: relative;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.chart-help::after {
  /* Ya existentes */
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--color-surface-offset);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 9999;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  margin-top: 8px;
  text-transform: none;

  /* ← FIXES */
  width: max-content;          /* se adapta al contenido */
  max-width: min(300px, 80vw); /* nunca más ancho que la pantalla en móvil */
  white-space: normal;
  word-break: break-word;      /* evita que el texto desborde la caja */
  box-sizing: border-box;      /* el padding no desborda el width */

  /* Resets para evitar herencias del contenedor */
  font-weight: 400;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-align: left;
}

.chart-help:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tap móvil */
.chart-help.active::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.delta-custom {
  display: inline-block;
  /* Ajusta el ancho y alto proporcionalmente al tamaño de la letra */
  width: 0.78em; 
  height: 0.72em;
  background-color: currentColor;
  
  /* Recorta el cuadrado en forma de triángulo con el hueco en medio */
  clip-path: polygon(
    50% 0%, 100% 100%, 0% 100%, 50% 0%, 
    50% 23%, 17% 85%, 83% 85%, 50% 23%
  );
  
  /* Pequeño ajuste de posición para clavar la línea de base */
  margin-right: 0.02em;
  margin-left: -0.02em;
  vertical-align: baseline;
}

.delta-custom {
  display: inline-block;
  width: 0.72em;
  height: 0.68em;

  transform: skewX(-16deg);
  transform-origin: center center;

  background-color: currentColor;

  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%,
    50% 0%,
    50% 20%,
    15% 88%,
    85% 88%,
    50% 20%
  );

  /* ✅ margin-left positivo para separarlo de la letra anterior */
  margin-left:  0.06em;
  margin-right: -0.1em;
  vertical-align: baseline;
}

/* Modificamos tu botón existente para que imite al 100% el estilo de standings */
.btn-about {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-decoration: none;
  
  /* Usamos las variables de transición interactivas nativas de tu CSS */
  transition: background var(--transition-interactive, var(--transition)),
              border-color var(--transition-interactive, var(--transition)),
              color var(--transition-interactive, var(--transition));
  white-space: nowrap;
}

/* El efecto Hover idéntico */
.btn-about:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   PÁGINA ACERCA DE (ABOUT LAPDELTA) — INTEGRADO CON EL DESIGN SYSTEM
   ========================================================================== */

/* --- HERO SECTION --- */
.about-hero {
  padding: var(--space-16) 0 var(--space-8);
  text-align: left;
}

.about-label {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-bottom: var(--space-3);
}

.about-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transform: scaleX(1.02);
  transform-origin: left center;
}

.about-title .accent {
  color: var(--color-primary);
}

.about-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 55ch;
  line-height: 1.6;
}

/* --- SECCIÓN DE CARACTERÍSTICAS (GRID) --- */
.about-section {
  padding: var(--space-12) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
}

.about-block {
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  /*transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);*/
}
/*
.about-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}*/

.about-block-icon {
  color: var(--color-primary);
  background: var(--color-primary-dim);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.about-block-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.about-block-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- SECCIÓN CÓMO FUNCIONA --- */
.about-how {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
}

.about-how-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: flex-start;
}

@media (max-width: 768px) {
  .about-how-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.about-how-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.about-steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.about-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.about-step-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}

.about-step strong {
  color: var(--color-text);
  font-size: var(--text-base);
  display: block;
  margin-bottom: var(--space-1);
}

.about-step p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* --- SECCIÓN CTA --- */
.about-cta {
  padding: var(--space-12) 0 var(--space-20);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border-top: 1px solid var(--color-border);
}

.about-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

@media (max-width: 600px) {
  .about-cta-inner {
    flex-direction: column;
    text-align: center;
  }
}

.about-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  font-weight: 900;
  margin-bottom: var(--space-2);
}

.about-cta-sub {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* Reutilizamos el botón primario que ya tienes o lo definimos si falta */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #ffffff;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--transition);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

/* Logo navbar */
.navbar-logo .logo-dark,
.navbar-logo .logo-light {
    /* Ajusta el tamaño fluido:
       - Mínimo: 28px (para móviles muy pequeños)
       - Preferido: 2.5vw + 16px (escala con la pantalla)
       - Máximo: 40px (el tamaño ideal en ordenadores/pantallas grandes)
    */
    height: clamp(28px, 2.5vw + 16px, 40px);
    width: auto;   /* Evita que el SVG colapse horizontalmente a 0px */
    transition: height 0.2s ease; /* Suaviza el cambio si se redimensiona la ventana */
}

/* --- MODO OSCURO (Por defecto o activo) --- */
.logo-dark { display: block; }
.logo-light { display: none; }

/* --- MODO CLARO --- */
/* Añadimos selectores más específicos para que no hagan conflicto con el display */
[data-theme="light"] .navbar-logo .logo-dark  { display: none !important; }
[data-theme="light"] .navbar-logo .logo-light { display: block !important; }

/* Logo Hero - Solo letras */
.hero-logo-container .logo-dark,
.hero-logo-container .logo-light {
    /* Ajusta el tamaño fluido para el Hero:
       - Mínimo: 45px (móviles)
       - Preferido: 4.5vw + 24px (escala fluida)
       - Máximo: 75px (pantallas grandes de escritorio)
    */
    height: clamp(45px, 4.5vw + 24px, 75px);
    width: auto;   /* Evita que el SVG colapse horizontalmente */
    transition: height 0.2s ease; /* Suaviza el cambio si se redimensiona */
}

/* --- MODO OSCURO HERO (Por defecto o activo) --- */
.hero-logo-container .logo-dark { display: block; }
.hero-logo-container .logo-light { display: none; }

/* --- MODO CLARO HERO --- */
/* Selectores específicos vinculados a data-theme="light" */
[data-theme="light"] .hero-logo-container .logo-dark  { display: none !important; }
[data-theme="light"] .hero-logo-container .logo-light { display: block !important; }

.hero-logo-container {
    display: flex;
    justify-content: flex-start; /* ← era center, ahora izquierda */
    align-items: center;
    width: 100%;
    margin-bottom: var(--space-4);
}

/* Aumenta el tamaño — el viewBox es casi cuadrado (773x596) 
   así que necesitas más altura para que el logo se vea grande */
/* Logo Hero */
.hero-logo-container .logo-dark,
.hero-logo-container .logo-light {
    height: clamp(60px, 10vw + 20px, 200px);
    width: auto;
    max-width: 90vw;
}

@media (max-width: 600px) {
    .hero-logo-container .logo-dark,
    .hero-logo-container .logo-light {
        height: clamp(80px, 15vw + 30px, 220px);
        max-width: 85vw; /* que no se salga en móviles estrechos */
    }
}

/* Centro: breadcrumb */
.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.navbar-links a:hover { color: var(--color-text); }

@media (min-width: 600px) {
  .navbar { flex-wrap: nowrap; }
  .navbar-links { margin-left: 0; }
  .lang-switcher { margin-left: 0; }
}

/* Móvil (<600px): dos líneas */
@media (max-width: 599px) {
  .navbar {
    padding: var(--space-2) var(--space-4);
    row-gap: 0;
  }

  .navbar-logo { order: 1; }
  .lang-switcher { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; }

  .navbar-links {
    order: 4;
    width: 100%;
    flex: none;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
    margin-top: 0;
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .navbar-links::-webkit-scrollbar { display: none; }
}

/* Tablet (600px–768px): navbar en una línea, breadcrumb visible */
@media (min-width: 600px) and (max-width: 768px) {
  .navbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .theme-toggle { margin-left: 0; }
}

  .standings-page { padding: var(--space-8) 0 var(--space-16); }
  .standings-skeleton-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
  .chart-section { margin-bottom: var(--space-10); }
  .standings-section-label {
    font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: .1em; color: var(--color-text-muted);
    margin-bottom: var(--space-4);
  }



  /* ── Podios ─────────────────────────────── */
  .podiums-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
  }
  @media (max-width: 640px) { .podiums-row { grid-template-columns: 1fr; } }



  .podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-3);
  }
  .podium-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96px;
  }
  .podium-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 96px;
    height: auto;
    min-height: 160px;
    justify-content: flex-end;
    padding-bottom: var(--space-2);
    overflow: hidden;
  }
  .podium-plinth {
    width: 96px; flex-shrink: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--text-lg); color: #fff;
  }
  .podium-step[data-pos="1"] .podium-plinth { height: 80px; background: var(--color-gold, #d19900); }
  .podium-step[data-pos="2"] .podium-plinth { height: 55px; background: var(--color-text-faint); }
  .podium-step[data-pos="3"] .podium-plinth { height: 40px; background: #cd7f32; }



  .podium-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--text-sm); color: #fff;
  }
  .podium-code {
    font-weight: 700; font-size: var(--text-base);
    letter-spacing: .05em; text-align: center;
    white-space: nowrap;
  }
  .podium-team {
    font-size: var(--text-xs); color: var(--color-text-muted);
    text-align: center; width: 90px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .podium-pts { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }



  /* ── Charts ─────────────────────────────── */
  .evo-chart { width: 100%; height: 500px; }



  /* ── Tablas ─────────────────────────────── */
  .standings-tables { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  @media (max-width: 768px) { .standings-tables { grid-template-columns: 1fr; } }



  .standings-table { width: 100%; border-collapse: collapse; }
  .standings-table th {
    text-align: left; padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--color-border);
  }
  .standings-table td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-bottom: 1px solid var(--color-divider); }
  .standings-table tr:hover td { background: var(--color-surface-offset); }
  .pos-cell  { width: 2.5rem; font-weight: 700; color: var(--color-text-muted); }
  .pts-cell  { font-weight: 700; font-variant-numeric: tabular-nums; }
  .wins-cell { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
  .driver-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: var(--space-2); vertical-align: middle;
  }


    .standings-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-16) 0;
        gap: var(--space-6);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }
    .standings-spinner {
        width: 48px; height: 48px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-accent, #e8002d);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }


    @media (max-width: 480px) {
    .podiums-row     { gap: var(--space-3); }
    .podium-step     { width: 72px; }
    .podium-plinth   { width: 72px; }
    .podium-info     { width: 72px; height: auto; min-height: 90px; }
    .podium-avatar   { width: 36px; height: 36px; font-size: 10px; }
    .podium-code     { font-size: var(--text-sm); }
    .podium-team     { width: 68px; font-size: 10px; white-space: normal; text-align: center; }
    .podium-pts      { font-size: 10px; }
    }