/* ===== RESET BASICO ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; background: #0b0f14; color: #e8ecf1; }

/* ===== NAV ===== */
.topbar { background:#0f1520; border-bottom:1px solid rgba(255,255,255,.08); }
.nav { max-width:1200px; margin:auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:800; letter-spacing:.5px; display:flex; gap:8px; align-items:center; }
.badge { background:#e10600; color:white; padding:4px 8px; border-radius:6px; }
.navlinks a { color:#cfd6e4; text-decoration:none; margin-left:14px; }
.navlinks a:hover { color:white; }

/* ===== LAYOUT ===== */
.container { max-width:1200px; margin:auto; padding:20px; }
.card { background:#0f1520; border-radius:18px; padding:18px; }

/* ===== GRID ===== */
.tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.tile { background:#121a26; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition: transform .2s ease; }
.tile:hover { transform: translateY(-4px); }

/* ===== IMAGENES (AQUI ESTA LA MAGIA) ===== */
.tile .img { height: 220px; overflow: hidden; }
.tile .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 3%;   /* <-- ESTO RECORTA PARA QUE SOLO SE VEA CARA/PECHO */
  display: block;
}

/* ===== TEXTO ===== */
.tile .inner { padding: 10px; }
.tile h3 { margin: 0; font-size: 16px; }
.tile p { margin: 4px 0 0; font-size: 13px; color: #9aa4b2; }

.sectionTitle { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.small { color:#9aa4b2; font-size:13px; }

/* ================================
   FIX DEFINITIVO LOGOS ESCUDERÍAS
   ================================ */

.tile .img{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.tile .img img{
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)) saturate(1.2) contrast(1.15) brightness(1.05) !important;
  transition: transform .25s ease, filter .25s ease;
}

.tile:hover .img img{
  transform: scale(1.08);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)) saturate(1.3) contrast(1.2) brightness(1.1) !important;
}

/* ===== teams: logos perfectos en tarjetas ===== */

/* evita que el logo se estire o se “coma” el card */
.tile .img{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
}

/* Logos de teams en color (evita que se vean negros por filtros globales) */
.teamLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* NO se recorta, se ajusta */
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* ====== FIX DEFINITIVO PARA LOGOS EN TEAMS ====== */
.tile .img{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
}

.tile .img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  /* quita cualquier filtro oscuro del tema */
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* ====== TAMAÑO FIJO DE LOGOS (QUE NO CAMBIE AL RECARGAR) ====== */
.tiles .tile .img img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ====== DRIVERS: MODO PRO SIN CORTAR CARAS ====== */

/* Ajusta el cuadro de imagen (no el card completo) */
.tiles .tile .img{
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Default: estilo “retrato” como los buenos, sin zoom exagerado */
.tiles .tile .img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 18%; /* encuadre seguro para no cortar cara */
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Si JS detecta “imagen vertical/cuerpo completo”, se le aplica contain */
.tiles .tile .img img.portrait-full{
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* DRIVERS: encuadre tipo retrato sin cortar cara */
#driversGrid .tile .img img,
.tiles .tile .img img{
  object-fit: contain !important;   /* NO recorta caras */
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* y el cuadro de imagen mantiene el tamaño */
#driversGrid .tile .img,
.tiles .tile .img{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ====== DRIVERS: USAR TUS IMÁGENES SIN ROMPERLAS ====== */

.tiles .tile .img{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* TODAS las imágenes de pilotos */
.tiles .tile .img img{
  width: 100% !important;
  height: 100% !important;

  /* CLAVE: no recorta caras */
  object-fit: contain !important;
  object-position: center !important;

  /* Las hacemos un poco más grandes visualmente */
  transform: scale(1.12);

  /* Evita filtros raros */
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Hover suave */
.tiles .tile:hover .img img{
  transform: scale(1.18);
}

.tile .img{
  overflow: hidden;
}

.tile .img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.5) translateY(-8%);
}

/* ===== ZOOM DEFINITIVO (GANA A TODO) ===== */
.tiles .tile .img > img{
  transform: scale(1.45) translateY(-8%) !important;
}

/* ===== DRIVERS/IMÁGENES: ZOOM + RECORTE SIN BORDES ===== */
.tiles .tile .img{
  overflow: hidden !important;      /* recorta lo que se salga */
}

/* Ajusta AQUÍ el zoom y el encuadre */
.tiles .tile .img > img{
  transform: scale(1.35) translateY(-6%) !important;  /* <- cambia estos valores */
  transform-origin: center top !important;
}

/* Estilo normal (todos) */
.tiles .tile .img > img{
  transform: scale(1.35) translateY(-6%) !important;
}

/* SOLO los que tengan esta clase */
.tiles .tile.zoom2 .img > img{
  transform: scale(5) translateY(0%) !important;
}

/* Para cualquier contenedor que tenga zoom2 */
.zoom3  > img,
.zoom3  .img > img{
  transform: scale(1.5) translateY(-10%) !important;
  transform-origin: center top !important;
}

/* ===== HADJAR: ARREGLAR TAMAÑO DEL CUADRO ===== */
.portraitCard{
  height: 420x;        /* <- ajusta este número */
  max-height: 420px;
}

/* ===== HADJAR HERO: recorte tipo retrato pro ===== */

/* El cuadro de la foto */
.portraitCard{
  height: 420px;           /* ajusta: 380–480 */
  overflow: hidden !important;
  display: flex;
  align-items: flex-start; /* importante para recortar arriba */
  justify-content: center;
}

/* La imagen dentro */
.portraitCard.zoom3 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* rellena sin bordes */
  object-position: 50% -5%;/* sube la cara */
  transform: scale(1.35);  /* zoom sin perder tanto */
  transform-origin: center top;
}

/* ===== FIX: layout tipo Red Bull SOLO para Ferrari ===== */
body.ferrariPage .heroInner{
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body.ferrariPage .portraitCard{
  height: 360px;              /* ajusta a gusto */
  overflow: hidden !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

body.ferrariPage .portraitCard img{
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

@media (max-width: 900px){
  body.ferrariPage .heroInner{
    grid-template-columns: 1fr !important;
  }
}

/* ====== FORZAR LAYOUT FERRARI ====== */

body.ferrariPage .heroInner{
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Forzar que el contenedor de la imagen exista */
body.ferrariPage .portraitCard{
  min-width: 360px !important;
  height: 360px !important;
  background: rgba(255,255,255,0.04); /* solo para ver el cuadro */
  border-radius: 18px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Forzar que la imagen se vea */
body.ferrariPage .portraitCard img{
  width: 90% !important;
  height: 90% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 900px){
  body.ferrariPage .heroInner{
    grid-template-columns: 1fr !important;
  }
}

/* ===== LIVE STANDINGS (resaltado pro) ===== */
.liveTables{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 920px){
  .liveTables{ grid-template-columns: 1fr 1fr; }
}

.livePanel{
  border-radius: 16px;
  background: rgba(15,21,32,.75);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.livePanelHeader{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color:#cfd6e4;
  font-size: 13px;
}
.livePanelHeader span{
  color:#9aa4b2;
  font-weight: 700;
}

.liveTable{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.liveTable th, .liveTable td{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color:#cfd6e4;
}
.liveTable th{
  color:#9aa4b2;
  font-weight: 800;
  text-transform: none;
}
.liveTable .pts{ text-align:right; font-weight: 900; }
.liveTable tr:last-child td{ border-bottom: none; }

/* #1 resaltado */
.liveTable tr.isLeader{
  background: rgba(225,6,0,.10);
  outline: 1px solid rgba(225,6,0,.28);
}
.liveTable tr.isLeader td{
  color:#ffffff;
}
.liveTable tr.isLeader td:first-child{
  font-weight: 900;
}

/* Hacer el bloque de puntos más ancho */
.liveBox{
  padding: 5px;
}

/* Que las tablas usen todo el ancho */
.liveTable{
  width: 100%;
}


/* Que el panel no se vea tan apretado */
.livePanel{
  padding-bottom: 6px;
}

/* ====== Alinear tablas inferiores con las superiores ====== */

/* Que el panel derecho tenga el mismo padding visual */
.panel{
  padding: 18px;
}

/* Tablas: ancho completo y más aire */
.table{
  width: 100%;
  margin-top: 6px;
}

/* Celdas más cómodas */
.table th,
.table td{
  padding: 12px 16px;
  font-size: 14px;
}

/* Encabezados más claros */
.table th{
  width: 40%;
  font-weight: 900;
}

/* Separación visual entre secciones */
.panel h2{
  margin-top: 0;
}

/* Que las tablas no se vean “hundidas” */
.table + .divider{
  margin: 18px 0;
}