/* ===================================================
   atletas-tema-rojo-azul.css
   Variante de color opcional para un perfil de "equipo" — blanco y
   gris de base, con rojo y azul en botones y otros detalles.
   Se activa por perfil desde el campo ACF "Esquema de color del
   perfil" (tema_color = rojo_azul) — no afecta a otros atletas ni
   equipos, que siguen viendo la paleta dorada de siempre.

   Funciona redefiniendo las mismas variables de color que ya usa
   atletas-estilos.css (--carbon, --oro, --piedra, --linea, etc.) más
   un puñado de ajustes puntuales donde el original usaba un color
   fijo en vez de variable. Todo queda bajo "body.tema-rojo-azul" para
   no tocar el resto del sitio.
   =================================================== */

body.tema-rojo-azul{
  --carbon:      #FFFFFF;
  --carbon-2:    #F4F5F6;
  --carbon-3:    #ECEDEF;
  --hueso:       #1B1F24;
  --oro:         #C8102E;                    /* rojo — antes dorado */
  --oro-claro:   #E23A4E;                    /* rojo claro (hover) */
  --oro-bg:      rgba(200,16,46,0.07);
  --piedra:      #6B7280;
  --piedra-claro:#3F454C;
  --linea:       rgba(27,31,36,0.10);
  --linea-oro:   rgba(29,78,216,0.35);       /* azul — borde del botón secundario */
}

/* ── Detalles en azul (segundo acento) ─────────────────────── */
body.tema-rojo-azul .historia-texto h3,
body.tema-rojo-azul .integrante-rol{
  color:#1D4ED8;
}
body.tema-rojo-azul .btn-outline{ color:#1D4ED8; border-color:rgba(29,78,216,0.4); }
body.tema-rojo-azul .btn-outline:hover{ border-color:#1D4ED8; color:#1739A6; background:rgba(29,78,216,0.06); }
/* Dentro de la tarjeta roja de "Próximos eventos" el botón secundario debe
   verse blanco (como el botón principal, invertido) y no azul — si no, esta
   regla más específica pierde contra la de arriba. */
body.tema-rojo-azul .evento-destacado .btn-outline{ color:var(--carbon); border-color:var(--carbon); }
body.tema-rojo-azul .evento-destacado .btn-outline:hover{ background:var(--carbon); color:var(--oro); border-color:var(--carbon); }

/* ── Fondos que en el original eran un color fijo, no variable ── */
body.tema-rojo-azul .topbar{ background:rgba(255,255,255,0.85); }
body.tema-rojo-azul .cta-movil{ background:rgba(255,255,255,0.95); border-top-color:rgba(29,78,216,0.35); }
body.tema-rojo-azul .ficha-foto,
body.tema-rojo-azul .integrante-foto{ background:#ECEDEF; }

/* El visor de fotos (lightbox) y el marco de video se quedan oscuros
   a propósito — es lo habitual incluso en sitios claros, y así las
   fotos y videos se ven con mejor contraste. */

/* ── Banners de bloque sólido, como en el folleto del equipo ──
   El folleto usa rectángulos de color llenos (rojo/azul, a veces
   inclinados) detrás de los títulos en vez de texto suelto — lo
   replicamos en el eyebrow de arriba (azul) y en cada título de
   sección (rojo). */
body.tema-rojo-azul .ficha-num{
  display:inline-block;
  background:#1D4ED8; color:#fff;
  padding:7px 16px; margin-bottom:14px;
  font-family:'Anton', sans-serif; font-size:11px; font-weight:400; letter-spacing:0.1em;
  transform:rotate(-1deg);
}

body.tema-rojo-azul .bloque-titulo{
  display:inline-flex; width:fit-content;
  background:#C8102E; color:#fff;
  padding:9px 20px; margin-bottom:24px;
  font-family:'Anton', sans-serif; font-size:18px; font-weight:400; letter-spacing:0.1em;
  transform:rotate(-1deg);
}
body.tema-rojo-azul .bloque-titulo .marca-color{ display:none; }

/* La etiqueta del evento destacado pasa de píldora redonda a bloque
   recto, como las insignias de "Patrocinador principal" del folleto. */
body.tema-rojo-azul .evento-destacado-tag{ border-radius:2px; transform:rotate(-1deg); }

@media (max-width:640px){
  body.tema-rojo-azul .ficha-num,
  body.tema-rojo-azul .bloque-titulo{ transform:none; } /* en pantallas chicas, sin inclinar */
}

/* ── Bloque gris con foto, luego bloque blanco — el mismo ritmo del
   folleto (portada/itinerario en gris con foto, presupuesto en
   blanco). La ficha del equipo (foto + datos) queda en gris con la
   foto en blanco y negro; el contenido de abajo (logros, historia,
   integrantes...) sigue en blanco como ya estaba. */
body.tema-rojo-azul .ficha{ background:var(--carbon-2); }
body.tema-rojo-azul .ficha-foto img{ filter:grayscale(100%) contrast(1.05); }

/* ── Franjas de información a todo el ancho, con foto de fondo ──
   Las secciones pasan a ser bandas de borde a borde (el padding sale de
   .contenido y se lo damos a cada bloque). Las fotos de fondo ya vienen
   desvanecidas en gris, así que el texto oscuro se lee sin más ajustes;
   el velo blanco solo termina de asegurar el contraste.
   Imágenes: img/equipo/bgN.webp (escritorio) y bgNm.webp (móvil).
   Rutas relativas a este archivo CSS (raíz del tema). */
body.tema-rojo-azul .contenido{ padding:0 0 40px; }
body.tema-rojo-azul .bloque{ margin-bottom:0; padding:56px; }
@media (max-width:880px){
  body.tema-rojo-azul .bloque{ padding:40px 24px; }
}

body.tema-rojo-azul .bloque[class*="bloque--bg"]{
  --velo: rgba(255,255,255,0.25);
  background-color:#F4F5F6;
  background-image:linear-gradient(var(--velo), var(--velo)), var(--bg-img);
  background-size:cover;
  background-position:center var(--bg-pos, 30%);
  background-repeat:no-repeat;
}
body.tema-rojo-azul .bloque--bg1{ --bg-img:url("img/equipo/bg1.webp"); --bg-pos:25%; }
body.tema-rojo-azul .bloque--bg2{ --bg-img:url("img/equipo/bg2.webp"); --bg-pos:30%; }
body.tema-rojo-azul .bloque--bg3{ --bg-img:url("img/equipo/bg3.webp"); --bg-pos:40%; }

@media (max-width:768px){
  body.tema-rojo-azul .bloque--bg1{ --bg-img:url("img/equipo/bg1m.webp"); }
  body.tema-rojo-azul .bloque--bg2{ --bg-img:url("img/equipo/bg2m.webp"); }
  body.tema-rojo-azul .bloque--bg3{ --bg-img:url("img/equipo/bg3m.webp"); }
}