/* ==========================================================================
   TodoFormula1 - Sistema de diseño
   --------------------------------------------------------------------------
   Origen: Diseño/Rediseño/DESIGN.md (los tokens) y Diseño/Rediseño/code.html
   (la maqueta que produjo screen.png). Donde los dos discrepan manda code.html,
   que es lo que se ve en la captura aprobada: fondo #f8fafc y no #f9f9ff,
   texto #0f172a y no #111827, secundario #0284c7 y no #565e74.

   REGLA: ningun color, tamanyo ni espacio se escribe a mano fuera de este
   bloque :root. Si hace falta un valor nuevo, se anyade aqui como variable.
   Es lo que permite retocar el diseño entero sin recorrer 50 plantillas.

   Prefijo tf1- en todas las clases: el CSS viejo (bootstrap, main, style,
   colors, responsive) define selectores muy genericos y va a seguir vivo en
   las paginas todavia sin redisenyar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Color - lienzo y superficies */
    --tf1-fondo:                #f8fafc;
    --tf1-lienzo:               #ffffff;
    --tf1-lienzo-sutil:         #f1f5f9;
    --tf1-superficie:           #ffffff;
    --tf1-superficie-elevada:   #f1f5f9;
    --tf1-superficie-contenedor:#e2e8f0;
    --tf1-superficie-inversa:   #0f172a;

    /* Color - texto */
    --tf1-texto:                #0f172a;
    --tf1-texto-secundario:     #475569;
    --tf1-texto-tenue:          #64748b;
    --tf1-texto-inverso:        #ffffff;

    /* Color - marca */
    --tf1-rojo:                 #e10600;   /* rojo de competicion, el acento */
    --tf1-rojo-oscuro:          #c00500;   /* hover del rojo */
    --tf1-rojo-tenue:           rgba(225, 6, 0, 0.08);
    --tf1-rojo-borde:           rgba(225, 6, 0, 0.25);
    --tf1-azul:                 #0284c7;
    --tf1-ambar:                #d97706;   /* banderas amarillas, coche de seguridad */
    --tf1-error:                #dc2626;

    /* Color - bordes */
    --tf1-borde:                #e2e8f0;
    --tf1-borde-fuerte:         #cbd5e1;
    --tf1-contorno:             #94a3b8;

    /* Color - telemetria. Solo para datos de cronometraje. */
    --tf1-morado:               #7e22ce;   /* vuelta rapida absoluta */
    --tf1-morado-fondo:         rgba(126, 34, 206, 0.08);
    --tf1-verde:                #16a34a;   /* mejor personal */
    --tf1-verde-fondo:          rgba(22, 163, 74, 0.08);

    /* Color - compuestos Pirelli. Sin datos todavia; quedan definidos
       porque OpenF1 (Fase 7) los traera. */
    --tf1-blando:               #dc2626;
    --tf1-medio:                #eab308;
    --tf1-duro:                 #64748b;
    --tf1-intermedio:           #16a34a;
    --tf1-lluvia:               #2563eb;

    /* Tipografia. Las tres familias se cargan desde Google Fonts en
       base.html.twig. Autoalojarlas sigue pendiente. */
    --tf1-fuente-titulo:    "Chivo", "Helvetica Neue", Arial, sans-serif;
    --tf1-fuente-texto:     "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tf1-fuente-datos:     "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Espaciado */
    --tf1-esp-xs:   0.25rem;
    --tf1-esp-sm:   0.5rem;
    --tf1-esp-md:   0.75rem;
    --tf1-esp-lg:   1.25rem;
    --tf1-esp-xl:   2rem;
    --tf1-esp-2xl:  3rem;

    /* Margenes laterales y canal de la retícula */
    --tf1-margen:   1rem;      /* movil */
    --tf1-canal:    1rem;
    --tf1-ancho-maximo: 1280px;

    /* Radios. Bajos a proposito: el diseño es de precision, no de juguete. */
    --tf1-radio:        0.125rem;
    --tf1-radio-lg:     0.25rem;
    --tf1-radio-xl:     0.5rem;
    --tf1-radio-pildora: 9999px;

    /* Elevacion */
    --tf1-sombra-1: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
    --tf1-sombra-2: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
    --tf1-sombra-3: 0 4px 20px -4px rgba(0, 0, 0, 0.06);

    /* Transicion unica, para que todo el portal reaccione igual */
    --tf1-transicion: 150ms ease;
}

@media (min-width: 768px) {
    :root {
        --tf1-margen: 1.5rem;
        --tf1-canal:  1.5rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --tf1-margen: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tf1-fondo);
    color: var(--tf1-texto);
    font-family: var(--tf1-fuente-texto);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--tf1-fuente-titulo);
    color: var(--tf1-texto);
}

p { margin: 0 0 var(--tf1-esp-lg); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--tf1-transicion);
}
a:hover { color: var(--tf1-rojo); }

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr {
    border: 0;
    border-top: 1px solid var(--tf1-borde);
    margin: var(--tf1-esp-xl) 0;
}

/* Foco visible y consistente. El CSS viejo lo anulaba con outline:none. */
:focus-visible {
    outline: 2px solid var(--tf1-rojo);
    outline-offset: 2px;
}

/* El atributo hidden tiene que ganar a cualquier display de clase. Sin esto,
   un elemento con display:flex y hidden se sigue viendo. */
[hidden] { display: none !important; }

/* Texto solo para lectores de pantalla */
.tf1-oculto-visualmente {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Escala tipografica
   --------------------------------------------------------------------------
   Tres familias con tres trabajos distintos: Chivo titula, Work Sans se lee,
   JetBrains Mono alinea cifras. Los tiempos y las diferencias van SIEMPRE en
   la familia de datos: con fuente proporcional las columnas bailan en
   horizontal cada vez que cambia un numero.
   -------------------------------------------------------------------------- */

.tf1-hero {
    font-family: var(--tf1-fuente-titulo);
    font-size: 34px; font-weight: 900;
    line-height: 38px; letter-spacing: -0.02em;
}

.tf1-titulo-lg {
    font-family: var(--tf1-fuente-titulo);
    font-size: 24px; font-weight: 800;
    line-height: 30px; letter-spacing: -0.01em;
}

.tf1-titulo-md {
    font-family: var(--tf1-fuente-titulo);
    font-size: 22px; font-weight: 700;
    line-height: 28px; letter-spacing: -0.01em;
}

.tf1-titulo-sm {
    font-family: var(--tf1-fuente-titulo);
    font-size: 18px; font-weight: 700;
    line-height: 24px;
}

.tf1-texto-lg { font-size: 16px; line-height: 26px; }
.tf1-texto-md { font-size: 14px; line-height: 22px; }
.tf1-texto-sm { font-size: 12px; line-height: 18px; }

.tf1-dato-lg {
    font-family: var(--tf1-fuente-datos);
    font-size: 20px; font-weight: 700;
    line-height: 24px; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tf1-dato-md {
    font-family: var(--tf1-fuente-datos);
    font-size: 14px; font-weight: 600;
    line-height: 18px; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.tf1-dato-sm {
    font-family: var(--tf1-fuente-datos);
    font-size: 11px; font-weight: 500;
    line-height: 14px; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.tf1-rotulo {
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    line-height: 14px; letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* En pantalla grande los titulares crecen; el cuerpo y los datos no. */
@media (min-width: 768px) {
    .tf1-hero      { font-size: 52px; line-height: 56px; letter-spacing: -0.03em; }
    .tf1-titulo-lg { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
}

/* Modificadores de color de texto */
.tf1-t-secundario { color: var(--tf1-texto-secundario); }
.tf1-t-tenue      { color: var(--tf1-texto-tenue); }
.tf1-t-rojo       { color: var(--tf1-rojo); }
.tf1-t-morado     { color: var(--tf1-morado); }
.tf1-t-verde      { color: var(--tf1-verde); }

/* --------------------------------------------------------------------------
   4. Estructura
   -------------------------------------------------------------------------- */

.tf1-contenedor {
    width: 100%;
    max-width: var(--tf1-ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--tf1-margen);
}

/* Franja de ancho completo con su propio fondo. El contenedor va dentro. */
.tf1-franja        { width: 100%; padding-block: var(--tf1-esp-xl); }
.tf1-franja--blanca{ background: var(--tf1-lienzo); border-block: 1px solid var(--tf1-borde); }
.tf1-franja--sutil { background: var(--tf1-lienzo-sutil); }

/* Retícula fluida. Las columnas se declaran por tramos, no por clase-numero:
   asi una plantilla no puede pedir 5 columnas en un movil. */
.tf1-rejilla { display: grid; gap: var(--tf1-canal); }

@media (min-width: 768px) {
    .tf1-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tf1-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tf1-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .tf1-rejilla--4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Contenido principal + barra lateral, 65/35 como en la maqueta */
    .tf1-rejilla--principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    /* Magazine: pieza destacada grande + columna de secundarias */
    .tf1-rejilla--magazine  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Cabecera de seccion: filete rojo, titulo y enlace a la derecha */
.tf1-cabecera-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    flex-wrap: wrap;
    margin-bottom: var(--tf1-esp-lg);
}

.tf1-cabecera-seccion__titulo {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-md);
    text-transform: uppercase;
}

.tf1-cabecera-seccion__titulo::before {
    content: "";
    width: 4px;
    align-self: stretch;
    min-height: 22px;
    background: var(--tf1-rojo);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. Primitivas
   -------------------------------------------------------------------------- */

/* Tarjeta */
.tf1-tarjeta {
    background: var(--tf1-superficie);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    box-shadow: var(--tf1-sombra-1);
}

.tf1-tarjeta--enlazable { transition: border-color var(--tf1-transicion), box-shadow var(--tf1-transicion); }
.tf1-tarjeta--enlazable:hover {
    border-color: var(--tf1-borde-fuerte);
    box-shadow: var(--tf1-sombra-2);
}

.tf1-tarjeta__cabecera {
    background: var(--tf1-lienzo-sutil);
    border-bottom: 1px solid var(--tf1-borde);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
}

.tf1-tarjeta__cuerpo { padding: var(--tf1-esp-lg); }

/* Botones */
.tf1-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tf1-esp-sm);
    padding: var(--tf1-esp-sm) var(--tf1-esp-lg);
    border-radius: var(--tf1-radio-lg);
    border: 1px solid transparent;
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color var(--tf1-transicion), border-color var(--tf1-transicion), color var(--tf1-transicion);
}

.tf1-boton--primario {
    background: var(--tf1-rojo);
    color: var(--tf1-texto-inverso);
    box-shadow: 0 1px 2px rgba(225, 6, 0, 0.2);
}
.tf1-boton--primario:hover { background: var(--tf1-rojo-oscuro); color: var(--tf1-texto-inverso); }

.tf1-boton--secundario {
    background: var(--tf1-superficie);
    border-color: var(--tf1-borde-fuerte);
    color: var(--tf1-texto);
}
.tf1-boton--secundario:hover { background: var(--tf1-lienzo-sutil); border-color: var(--tf1-texto); color: var(--tf1-texto); }

.tf1-boton--fantasma { color: var(--tf1-texto-tenue); }
.tf1-boton--fantasma:hover { background: var(--tf1-superficie-elevada); color: var(--tf1-texto); }

/* Enlace de seccion, el "Ver todas -->" */
.tf1-enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: var(--tf1-esp-xs);
    color: var(--tf1-rojo);
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tf1-enlace-mas:hover { color: var(--tf1-rojo-oscuro); }

/* Pastillas de estado */
.tf1-pastilla {
    display: inline-flex;
    align-items: center;
    gap: var(--tf1-esp-xs);
    padding: 2px var(--tf1-esp-sm);
    border-radius: var(--tf1-radio-pildora);
    border: 1px solid transparent;
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    line-height: 14px; letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf1-pastilla--roja   { background: var(--tf1-rojo); color: var(--tf1-texto-inverso); }
.tf1-pastilla--suave  { background: var(--tf1-rojo-tenue); border-color: var(--tf1-rojo-borde); color: var(--tf1-rojo); }
.tf1-pastilla--neutra { background: var(--tf1-superficie-elevada); border-color: var(--tf1-borde); color: var(--tf1-texto-secundario); }
.tf1-pastilla--ambar  { background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.25); color: var(--tf1-ambar); }
.tf1-pastilla--morada { background: var(--tf1-morado-fondo); color: var(--tf1-morado); }
.tf1-pastilla--verde  { background: var(--tf1-verde-fondo); color: var(--tf1-verde); }

/* Etiqueta cuadrada de categoria, la del magazine */
.tf1-etiqueta {
    display: inline-block;
    padding: 2px var(--tf1-esp-sm);
    border-radius: var(--tf1-radio);
    background: var(--tf1-rojo);
    color: var(--tf1-texto-inverso);
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    line-height: 14px; letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Punto que late. Solo donde haya algo realmente en curso. */
.tf1-latido {
    width: 6px; height: 6px;
    border-radius: var(--tf1-radio-pildora);
    background: currentColor;
    flex-shrink: 0;
    animation: tf1-latir 1.6s ease-in-out infinite;
}

@keyframes tf1-latir {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Quien haya pedido menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tf1-latido { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   6. Cabecera
   --------------------------------------------------------------------------
   Tres filas: ticker de proxima carrera, marca, y navegacion.

   Solo la fila de navegacion queda pegada arriba. La maqueta fijaba la
   cabecera entera, que en un movil son ~150px robados a la pantalla en cada
   scroll, y obliga a compensar con un padding-top que descuadra los enlaces
   a anclas.
   ========================================================================== */

.tf1-cabecera { background: var(--tf1-lienzo); }

/* --- Fila 1: ticker ------------------------------------------------------ */

.tf1-ticker {
    background: var(--tf1-superficie-elevada);
    border-bottom: 1px solid var(--tf1-borde);
}

.tf1-ticker__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    padding-block: var(--tf1-esp-xs);
    min-height: 28px;
}

.tf1-ticker__carrera {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-sm);
    min-width: 0;              /* sin esto el truncado no funciona dentro de un flex */
    color: var(--tf1-texto-secundario);
}

/* El nombre del Gran Premio se corta antes que empujar la cuenta atras. */
.tf1-ticker__texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf1-ticker__separador { color: var(--tf1-texto-tenue); }

.tf1-cuenta-atras {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-sm);
    flex-shrink: 0;
    background: var(--tf1-lienzo);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    padding: 1px var(--tf1-esp-sm);
}

.tf1-cuenta-atras__valor { color: var(--tf1-rojo); font-weight: 700; }

/* En movil el reloj sobra: el ticker ya dice las fechas. */
@media (max-width: 767px) {
    .tf1-cuenta-atras { display: none; }
}

/* --- Fila 2: marca ------------------------------------------------------- */

.tf1-marca-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-lg);
    padding-block: var(--tf1-esp-md);
}

.tf1-marca { display: flex; align-items: center; gap: var(--tf1-esp-md); }
.tf1-marca:hover { color: inherit; }
.tf1-marca__logo { height: 40px; width: auto; flex-shrink: 0; }

.tf1-marca__texto { display: block; }

.tf1-marca__nombre {
    display: block;
    font-family: var(--tf1-fuente-titulo);
    font-size: 20px; font-weight: 900;
    line-height: 1; letter-spacing: -0.02em;
    text-transform: uppercase;
}
.tf1-marca__nombre span { color: var(--tf1-rojo); }

.tf1-marca__lema {
    display: block;
    margin-top: 2px;
    font-family: var(--tf1-fuente-titulo);
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tf1-texto-tenue);
}

/* --- Fila 3: navegacion -------------------------------------------------- */

.tf1-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--tf1-lienzo);
    border-block: 1px solid var(--tf1-borde);
}

.tf1-nav__lista {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-xs);
    padding-block: var(--tf1-esp-xs);
    overflow-x: auto;
    scrollbar-width: none;
}
.tf1-nav__lista::-webkit-scrollbar { display: none; }

.tf1-nav__enlace {
    display: block;
    padding: 6px var(--tf1-esp-md);
    border-radius: var(--tf1-radio-lg);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tf1-texto-secundario);
    transition: background-color var(--tf1-transicion), color var(--tf1-transicion);
}
.tf1-nav__enlace:hover { background: var(--tf1-superficie-elevada); color: var(--tf1-texto); }

.tf1-nav__enlace--activo,
.tf1-nav__enlace--activo:hover {
    background: var(--tf1-rojo);
    color: var(--tf1-texto-inverso);
    font-weight: 700;
}

/* --- Movil: hamburguesa y panel ------------------------------------------ */

.tf1-hamburguesa {
    /* flex y no grid: .tf1-solo-movil lo declara flex mas abajo y ganaria,
       dejando place-items a medias -- justify-items no hace nada en flex y el
       icono se quedaria pegado a la izquierda. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie-elevada);
    color: var(--tf1-texto);
    flex-shrink: 0;
}
.tf1-hamburguesa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.tf1-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.45);
}

.tf1-panel__cajon {
    width: min(320px, 85vw);
    height: 100%;
    margin-left: auto;
    background: var(--tf1-lienzo);
    box-shadow: var(--tf1-sombra-3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tf1-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-bottom: 1px solid var(--tf1-borde);
}

.tf1-panel__enlace {
    display: block;
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-bottom: 1px solid var(--tf1-borde);
    font-family: var(--tf1-fuente-titulo);
    font-size: 15px; font-weight: 700;
    color: var(--tf1-texto);
}
.tf1-panel__enlace:hover { background: var(--tf1-superficie-elevada); }

.tf1-panel__enlace--activo {
    color: var(--tf1-rojo);
    box-shadow: inset 3px 0 0 var(--tf1-rojo);
}

/* El reparto entre escritorio y movil.
   La fila de navegacion y los iconos sociales desaparecen en movil: su
   contenido vive en el panel. */
.tf1-solo-movil      { display: none; }

@media (max-width: 1023px) {
    .tf1-solo-movil      { display: flex; }
    .tf1-solo-escritorio { display: none; }
}

/* ==========================================================================
   7. Migas de pan
   ========================================================================== */

.tf1-migas {
    background: var(--tf1-lienzo-sutil);
    border-bottom: 1px solid var(--tf1-borde);
}

.tf1-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tf1-esp-xs);
    padding-block: var(--tf1-esp-sm);
    color: var(--tf1-texto-tenue);
}

.tf1-migas__lista li { display: flex; align-items: center; gap: var(--tf1-esp-xs); }

/* El separador se pinta con CSS y no con un caracter en el marcado: asi un
   lector de pantalla lee la ruta y no "barra" entre cada nivel. */
.tf1-migas__lista li + li::before {
    content: "›";
    color: var(--tf1-borde-fuerte);
}

.tf1-migas a:hover { color: var(--tf1-rojo); }
.tf1-migas [aria-current] { color: var(--tf1-texto); font-weight: 600; }

/* ==========================================================================
   8. Pie
   ========================================================================== */

.tf1-pie {
    background: var(--tf1-lienzo);
    border-top: 1px solid var(--tf1-borde);
    padding-block: var(--tf1-esp-xl);
}

.tf1-pie__rejilla {
    display: grid;
    gap: var(--tf1-esp-xl);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .tf1-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    /* La columna de la marca es mas ancha: lleva parrafo, el resto listas. */
    .tf1-pie__rejilla { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
}

.tf1-pie__titulo {
    display: block;
    margin-bottom: var(--tf1-esp-md);
    padding-bottom: var(--tf1-esp-sm);
    border-bottom: 2px solid var(--tf1-rojo);
}

.tf1-pie__lista li + li { margin-top: var(--tf1-esp-sm); }
.tf1-pie__lista a { color: var(--tf1-texto-secundario); }
.tf1-pie__lista a:hover { color: var(--tf1-rojo); }

.tf1-copyright {
    background: var(--tf1-lienzo-sutil);
    border-top: 1px solid var(--tf1-borde);
    padding-block: var(--tf1-esp-lg);
    color: var(--tf1-texto-tenue);
}

.tf1-copyright__aviso { max-width: 90ch; }

/* ==========================================================================
   9. Portada: el fin de semana
   ========================================================================== */

.tf1-fds__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tf1-esp-lg);
    flex-wrap: wrap;
    margin-bottom: var(--tf1-esp-lg);
}

.tf1-fds__titulo { margin-top: var(--tf1-esp-sm); }
.tf1-fds__titulo a:hover { color: var(--tf1-rojo); }

.tf1-fds__lugar {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-sm);
    flex-wrap: wrap;
    margin-top: var(--tf1-esp-sm);
    color: var(--tf1-texto-secundario);
}

/* Reloj grande. Cada unidad en su celda, separadas por filetes: asi los
   numeros no bailan al cambiar de dos cifras a una. */
.tf1-reloj {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie);
    box-shadow: var(--tf1-sombra-1);
    overflow: hidden;
}

.tf1-reloj__rotulo {
    display: flex;
    align-items: center;
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    background: var(--tf1-lienzo-sutil);
    border-right: 1px solid var(--tf1-borde);
    max-width: 9ch;
}

.tf1-reloj__unidades { display: flex; }

.tf1-reloj__unidad {
    min-width: 58px;
    padding: var(--tf1-esp-md) var(--tf1-esp-sm);
    text-align: center;
}
.tf1-reloj__unidad + .tf1-reloj__unidad { border-left: 1px solid var(--tf1-borde); }

.tf1-reloj__cifra { display: block; color: var(--tf1-texto); }
.tf1-reloj__nombre { display: block; margin-top: 2px; color: var(--tf1-texto-tenue); }

/* La tarjeta del fin de semana: circuito a la izquierda, horario a la derecha */
.tf1-fds__tarjeta { display: grid; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
    .tf1-fds__tarjeta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .tf1-fds__circuito { border-right: 1px solid var(--tf1-borde); }
}

.tf1-fds__circuito { border-bottom: 1px solid var(--tf1-borde); }

@media (min-width: 1024px) {
    .tf1-fds__circuito { border-bottom: 0; }
}

.tf1-fds__foto {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: var(--tf1-lienzo-sutil);
    border-bottom: 1px solid var(--tf1-borde);
}

/* Rejilla de datos tecnicos. auto-fit para que con dos datos ocupen el ancho
   y con cuatro no se aprieten. */
.tf1-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tf1-datos__celda {
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-top: 1px solid var(--tf1-borde);
}
.tf1-datos__celda + .tf1-datos__celda { border-left: 1px solid var(--tf1-borde); }

.tf1-datos__valor { display: block; color: var(--tf1-texto); }
.tf1-datos__nombre { display: block; margin-top: var(--tf1-esp-xs); color: var(--tf1-texto-tenue); }

/* Cronograma */
.tf1-sesion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-bottom: 1px solid var(--tf1-borde);
}
.tf1-sesion:last-child { border-bottom: 0; }

.tf1-sesion--destacada { background: var(--tf1-lienzo-sutil); }

/* La carrera lleva filete rojo a la izquierda en lugar de sombra o fondo:
   marca la fila sin sacarla de la retícula. */
.tf1-sesion--principal {
    background: var(--tf1-rojo-tenue);
    box-shadow: inset 3px 0 0 var(--tf1-rojo);
}

.tf1-sesion__nombre { display: flex; align-items: center; gap: var(--tf1-esp-sm); min-width: 0; }
.tf1-sesion__horas { display: flex; align-items: center; gap: var(--tf1-esp-lg); flex-shrink: 0; }
.tf1-sesion__fecha { color: var(--tf1-texto-tenue); }
.tf1-sesion__hora { color: var(--tf1-texto); }

.tf1-sesion--pasada .tf1-sesion__nombre,
.tf1-sesion--pasada .tf1-sesion__horas { opacity: 0.55; }

@media (max-width: 479px) {
    .tf1-sesion { flex-direction: column; align-items: flex-start; gap: var(--tf1-esp-xs); }
}

/* --- Podio de la carrera ya corrida -------------------------------------- */

.tf1-podio__fila {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-md);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-bottom: 1px solid var(--tf1-borde);
}
.tf1-podio__fila:last-of-type { border-bottom: 0; }

/* El ganador con el mismo filete rojo que la carrera en el cronograma: una
   sola forma de decir "esta es la fila que importa" en toda la portada. */
.tf1-podio__fila--ganador {
    background: var(--tf1-rojo-tenue);
    box-shadow: inset 3px 0 0 var(--tf1-rojo);
}

.tf1-podio__pos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--tf1-borde-fuerte);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie);
    color: var(--tf1-texto);
}

.tf1-podio__piloto { min-width: 0; flex: 1; }
.tf1-podio__nombre { display: block; }
.tf1-podio__equipo { display: block; margin-top: 2px; color: var(--tf1-texto-tenue); }

.tf1-podio__marca { text-align: right; flex-shrink: 0; }
.tf1-podio__tiempo { display: block; color: var(--tf1-texto); }
.tf1-podio__puntos { display: block; margin-top: 2px; color: var(--tf1-texto-tenue); }

/* Caja de la vuelta rapida, en el hueco que deja el reloj */
.tf1-vuelta-rapida {
    display: flex;
    align-items: center;
    gap: var(--tf1-esp-lg);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border: 1px solid var(--tf1-borde);
    border-left: 3px solid var(--tf1-morado);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie);
    box-shadow: var(--tf1-sombra-1);
}

.tf1-vuelta-rapida__tiempo { display: block; color: var(--tf1-morado); }
.tf1-vuelta-rapida__quien { display: block; margin-top: 2px; color: var(--tf1-texto-tenue); }

/* ==========================================================================
   10. Portada: clasificaciones y ultimas carreras
   ========================================================================== */

/* Conmutador pilotos / constructores */
.tf1-pestanyas {
    display: flex;
    gap: var(--tf1-esp-xs);
    padding: 3px;
    background: var(--tf1-superficie-elevada);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
}

.tf1-pestanya {
    padding: 5px var(--tf1-esp-md);
    border-radius: var(--tf1-radio);
    color: var(--tf1-texto-secundario);
    white-space: nowrap;
    transition: background-color var(--tf1-transicion), color var(--tf1-transicion);
}
.tf1-pestanya:hover { color: var(--tf1-texto); }

.tf1-pestanya[aria-selected="true"] {
    background: var(--tf1-superficie-inversa);
    color: var(--tf1-texto-inverso);
}

/* Tabla de clasificacion */
.tf1-clasif { width: 100%; }

.tf1-clasif thead th {
    padding: var(--tf1-esp-sm) var(--tf1-esp-md);
    background: var(--tf1-lienzo-sutil);
    border-bottom: 1px solid var(--tf1-borde);
    color: var(--tf1-texto-tenue);
    text-align: left;
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tf1-clasif tbody td {
    padding: var(--tf1-esp-sm) var(--tf1-esp-md);
    border-bottom: 1px solid var(--tf1-borde);
    vertical-align: middle;
}

.tf1-clasif tbody tr:last-child td { border-bottom: 0; }
.tf1-clasif tbody tr:hover { background: var(--tf1-lienzo-sutil); }

/* La posicion y todo lo que sea cifra, en la familia de datos y a la derecha:
   son columnas que se leen comparando, no leyendo. */
.tf1-clasif__pos { width: 1%; color: var(--tf1-texto-tenue); }
.tf1-clasif__cifra { text-align: right; white-space: nowrap; }
.tf1-clasif__puntos { text-align: right; color: var(--tf1-texto); white-space: nowrap; }
.tf1-clasif__equipo { color: var(--tf1-texto-secundario); }

/* El lider no lleva diferencia; el resto, la que le separa de el. */
.tf1-clasif__brecha { text-align: right; color: var(--tf1-texto-tenue); white-space: nowrap; }

/* En movil caben posicion, nombre y puntos. Equipo, victorias y diferencia
   sobran antes que hacer scroll horizontal en la portada. */
@media (max-width: 767px) {
    .tf1-clasif__equipo,
    .tf1-clasif__victorias,
    .tf1-clasif__brecha { display: none; }
}

.tf1-clasif__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    flex-wrap: wrap;
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    border-top: 1px solid var(--tf1-borde);
    background: var(--tf1-lienzo-sutil);
}

/* Tarjetas de las ultimas carreras */
.tf1-carrera-reciente { border-bottom: 1px solid var(--tf1-borde); }
.tf1-carrera-reciente:last-of-type { border-bottom: 0; }

.tf1-carrera-reciente__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tf1-esp-sm);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg) 0;
}

.tf1-carrera-reciente__titulo { padding: 2px var(--tf1-esp-lg) var(--tf1-esp-sm); }

.tf1-carrera-reciente__podio { padding: 0 var(--tf1-esp-lg) var(--tf1-esp-md); }

.tf1-carrera-reciente__fila {
    display: flex;
    align-items: baseline;
    gap: var(--tf1-esp-sm);
    padding: 2px 0;
}

.tf1-carrera-reciente__pos { color: var(--tf1-texto-tenue); width: 1.6em; flex-shrink: 0; }
.tf1-carrera-reciente__piloto { flex: 1; min-width: 0; }
.tf1-carrera-reciente__marca { color: var(--tf1-texto-tenue); flex-shrink: 0; }

/* ==========================================================================
   11. Portada: proximas citas
   ========================================================================== */

.tf1-citas {
    display: grid;
    gap: var(--tf1-canal);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .tf1-citas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.tf1-cita { padding: var(--tf1-esp-lg); }

.tf1-cita__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-sm);
    margin-bottom: var(--tf1-esp-md);
}

.tf1-cita__nombre { display: block; }
.tf1-cita__circuito { display: block; margin-top: var(--tf1-esp-xs); color: var(--tf1-texto-tenue); }

.tf1-cita__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-sm);
    margin-top: var(--tf1-esp-lg);
    padding-top: var(--tf1-esp-md);
    border-top: 1px solid var(--tf1-borde);
}

/* ==========================================================================
   12. Noticias
   ========================================================================== */

.tf1-cabecera-pagina { margin-bottom: var(--tf1-esp-xl); }
.tf1-cabecera-pagina__recuento { display: block; margin-top: var(--tf1-esp-sm); color: var(--tf1-texto-tenue); }
.tf1-cabecera-pagina__bio { margin-top: var(--tf1-esp-md); max-width: 70ch; color: var(--tf1-texto-secundario); }

/* Una pieza del listado: miniatura a la izquierda y texto a la derecha. */
.tf1-pieza {
    display: grid;
    gap: var(--tf1-esp-lg);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--tf1-esp-lg);
    border-bottom: 1px solid var(--tf1-borde);
}
.tf1-pieza:first-child { padding-top: 0; }
.tf1-pieza:last-child { border-bottom: 0; }

@media (min-width: 560px) {
    .tf1-pieza--con-foto { grid-template-columns: 220px minmax(0, 1fr); }
}

/* aspect-ratio y object-fit: las imagenes heredadas de WordPress vienen a su
   tamanyo original y con proporciones de todo tipo. Sin esto, cada una
   empujaria el listado al cargarse. */
.tf1-pieza__foto {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--tf1-lienzo-sutil);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
}

.tf1-pieza__titulo a:hover { color: var(--tf1-rojo); }

.tf1-pieza__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tf1-esp-sm);
    margin-top: var(--tf1-esp-sm);
    color: var(--tf1-texto-tenue);
}
.tf1-pieza__meta a { color: var(--tf1-texto-secundario); }
.tf1-pieza__meta a:hover { color: var(--tf1-rojo); }
.tf1-pieza__meta span + span::before { content: "·"; margin-right: var(--tf1-esp-sm); color: var(--tf1-borde-fuerte); }

.tf1-pieza__extracto { margin-top: var(--tf1-esp-md); color: var(--tf1-texto-secundario); }

/* Hemeroteca: los anyos como pastillas */
.tf1-anyos { display: flex; flex-wrap: wrap; gap: var(--tf1-esp-xs); }

.tf1-anyos a {
    display: inline-flex;
    align-items: baseline;
    gap: var(--tf1-esp-xs);
    padding: var(--tf1-esp-xs) var(--tf1-esp-sm);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie);
    color: var(--tf1-texto-secundario);
}
.tf1-anyos a:hover { border-color: var(--tf1-borde-fuerte); color: var(--tf1-texto); }

.tf1-anyos a[aria-current] {
    background: var(--tf1-rojo);
    border-color: var(--tf1-rojo);
    color: var(--tf1-texto-inverso);
}
.tf1-anyos a[aria-current] small { color: var(--tf1-texto-inverso); opacity: 0.8; }
.tf1-anyos small { color: var(--tf1-texto-tenue); }

/* Paginacion */
.tf1-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tf1-esp-xs);
    margin-top: var(--tf1-esp-xl);
}

.tf1-paginacion a,
.tf1-paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding-inline: var(--tf1-esp-sm);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    background: var(--tf1-superficie);
    color: var(--tf1-texto-secundario);
}

.tf1-paginacion a:hover { border-color: var(--tf1-borde-fuerte); color: var(--tf1-texto); }

.tf1-paginacion [aria-current] {
    background: var(--tf1-rojo);
    border-color: var(--tf1-rojo);
    color: var(--tf1-texto-inverso);
}

.tf1-paginacion__salto { border-color: transparent; background: none; color: var(--tf1-texto-tenue); }

/* ==========================================================================
   13. Componentes compartidos de las fichas
   ========================================================================== */

.tf1-aside { display: flex; flex-direction: column; gap: var(--tf1-esp-lg); }

/* Tabla de datos general: resultados, parrillas, tiempos por vuelta.
   Siempre dentro de .tf1-tabla-scroll: son tablas de nueve columnas y en un
   movil no caben. Lo que no puede pasar es que la PAGINA se desplace en
   horizontal, solo la tabla. */
.tf1-tabla-scroll { overflow-x: auto; }

.tf1-tabla { width: 100%; }

.tf1-tabla thead th {
    padding: var(--tf1-esp-sm) var(--tf1-esp-md);
    background: var(--tf1-lienzo-sutil);
    border-bottom: 1px solid var(--tf1-borde);
    color: var(--tf1-texto-tenue);
    text-align: left;
    white-space: nowrap;
    font-family: var(--tf1-fuente-titulo);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tf1-tabla tbody td {
    padding: var(--tf1-esp-sm) var(--tf1-esp-md);
    border-bottom: 1px solid var(--tf1-borde);
    vertical-align: middle;
    white-space: nowrap;
}

/* El nombre puede partir; las cifras y los tiempos, nunca. */
.tf1-tabla td.tf1-tabla__ancha { white-space: normal; min-width: 12ch; }

.tf1-tabla tbody tr:last-child td { border-bottom: 0; }
.tf1-tabla tbody tr:hover { background: var(--tf1-lienzo-sutil); }

.tf1-tabla__num { text-align: right; }
.tf1-tabla__pos { width: 1%; color: var(--tf1-texto-tenue); }

/* El podio, con el mismo filete rojo del ganador que usa toda la portada. */
.tf1-tabla tbody tr.tf1-tabla__ganador { background: var(--tf1-rojo-tenue); box-shadow: inset 3px 0 0 var(--tf1-rojo); }

/* ==========================================================================
   14. Prosa: el cuerpo de un articulo
   --------------------------------------------------------------------------
   Estos son los unicos selectores del sistema que no llevan clase propia en
   cada elemento: el HTML viene de 11.398 articulos importados de WordPress y
   no se puede tocar uno por uno. Van todos acotados dentro de .tf1-prosa.
   ========================================================================== */

.tf1-prosa {
    max-width: 72ch;
    font-size: 17px;
    line-height: 29px;
    color: var(--tf1-texto-secundario);
}

.tf1-prosa > * + * { margin-top: var(--tf1-esp-lg); }

.tf1-prosa h2,
.tf1-prosa h3,
.tf1-prosa h4 {
    margin-top: var(--tf1-esp-xl);
    color: var(--tf1-texto);
    font-family: var(--tf1-fuente-titulo);
    letter-spacing: -0.01em;
}
.tf1-prosa h2 { font-size: 24px; line-height: 30px; font-weight: 800; }
.tf1-prosa h3 { font-size: 20px; line-height: 26px; font-weight: 700; }
.tf1-prosa h4 { font-size: 17px; line-height: 24px; font-weight: 700; }

.tf1-prosa a { color: var(--tf1-rojo); text-decoration: underline; text-underline-offset: 2px; }
.tf1-prosa a:hover { color: var(--tf1-rojo-oscuro); }

.tf1-prosa strong, .tf1-prosa b { color: var(--tf1-texto); font-weight: 700; }

.tf1-prosa ul, .tf1-prosa ol { padding-left: var(--tf1-esp-xl); }
.tf1-prosa li { list-style: disc; }
.tf1-prosa ol li { list-style: decimal; }
.tf1-prosa li + li { margin-top: var(--tf1-esp-sm); }

.tf1-prosa img {
    border-radius: var(--tf1-radio-lg);
    border: 1px solid var(--tf1-borde);
}

.tf1-prosa figure { margin: 0; }
.tf1-prosa figcaption {
    margin-top: var(--tf1-esp-sm);
    color: var(--tf1-texto-tenue);
    font-size: 13px;
    line-height: 20px;
}

.tf1-prosa blockquote {
    margin: 0;
    padding-left: var(--tf1-esp-lg);
    border-left: 3px solid var(--tf1-rojo);
    color: var(--tf1-texto);
    font-style: italic;
}

/* Las tablas de los articulos viejos vienen sin clase y con anchos en
   atributos. Se las encierra para que no desborden la pagina. */
.tf1-prosa table { display: block; overflow-x: auto; width: 100%; }
.tf1-prosa th, .tf1-prosa td { padding: var(--tf1-esp-sm); border: 1px solid var(--tf1-borde); }

.tf1-prosa iframe { max-width: 100%; }

/* ==========================================================================
   15. Cabecera de ficha
   ========================================================================== */

.tf1-ficha__cabecera { margin-bottom: var(--tf1-esp-xl); }
.tf1-ficha__etiquetas { display: flex; flex-wrap: wrap; gap: var(--tf1-esp-xs); margin-bottom: var(--tf1-esp-md); }
.tf1-ficha__titulo { margin-bottom: var(--tf1-esp-md); }

.tf1-ficha__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tf1-esp-sm);
    color: var(--tf1-texto-tenue);
}
.tf1-ficha__meta a { color: var(--tf1-texto-secundario); }
.tf1-ficha__meta a:hover { color: var(--tf1-rojo); }
.tf1-ficha__meta span + span::before { content: "·"; margin-right: var(--tf1-esp-sm); color: var(--tf1-borde-fuerte); }

.tf1-ficha__portada {
    width: 100%;
    margin-bottom: var(--tf1-esp-xl);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
}

/* Rejilla de datos de una ficha: pares nombre/valor en tarjetas pequenyas */
.tf1-hechos {
    display: grid;
    gap: var(--tf1-canal);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: var(--tf1-esp-xl);
}

.tf1-hecho {
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    background: var(--tf1-superficie);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
}
.tf1-hecho__valor { display: block; color: var(--tf1-texto); }
.tf1-hecho__nombre { display: block; margin-top: var(--tf1-esp-xs); color: var(--tf1-texto-tenue); }

/* --- Temporadas plegables de la ficha de piloto -------------------------- */

.tf1-temporada {
    background: var(--tf1-superficie);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    margin-bottom: var(--tf1-esp-md);
}

.tf1-temporada__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf1-esp-md);
    padding: var(--tf1-esp-md) var(--tf1-esp-lg);
    cursor: pointer;
    list-style: none;
}
.tf1-temporada__titulo::-webkit-details-marker { display: none; }

.tf1-temporada__titulo::after {
    content: "+";
    font-family: var(--tf1-fuente-datos);
    color: var(--tf1-texto-tenue);
    order: 3;
}
.tf1-temporada[open] .tf1-temporada__titulo::after { content: "−"; }
.tf1-temporada[open] .tf1-temporada__titulo { border-bottom: 1px solid var(--tf1-borde); }
.tf1-temporada__titulo:hover { background: var(--tf1-lienzo-sutil); }

/* --- Campos de formulario ------------------------------------------------ */

.tf1-campo {
    flex: 1;
    min-width: 200px;
    padding: var(--tf1-esp-sm) var(--tf1-esp-md);
    background: var(--tf1-superficie);
    border: 1px solid var(--tf1-borde-fuerte);
    border-radius: var(--tf1-radio-lg);
    color: var(--tf1-texto);
}
.tf1-campo:focus {
    outline: none;
    border-color: var(--tf1-rojo);
    box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12);
}

/* --- Vídeo incrustado ----------------------------------------------------- */

.tf1-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--tf1-superficie-inversa);
    border: 1px solid var(--tf1-borde);
    border-radius: var(--tf1-radio-lg);
    overflow: hidden;
}
.tf1-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }