/*
Theme Name: Sagrat Cor
Theme URI: https://cesagratcor.com
Author: Jose
Description: Tema propio y a medida para el Club Esportiu Sagrat Cor, construido desde cero, sin depender de Astra ni Elementor.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sagrat-cor
*/

/* =====================================================================
   FASE 1 – SISTEMA DE DISEÑO
   Club Esportiu Sagrat Cor

   Este archivo va PRIMERO en el CSS (antes que cualquier otro).
   Define las variables y componentes base que usaremos en el resto
   de fases (Inicio, plantilla de deporte, menú, etc).

   Tipografía: las fuentes están autoalojadas en /fonts (ver el bloque
   de @font-face justo debajo); no se piden a Google.
   ===================================================================== */

/* =====================================================================
   FUENTES AUTOALOJADAS (Poppins para títulos, Inter para texto)
   Archivos en /fonts, subconjunto latino (incluye tildes, ñ, ç, ¿ ¡).
   Descargadas de Google Fonts; licencia SIL Open Font License.
   ===================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
}
/* Inter: un solo archivo "variable" que sirve para los pesos 400 y 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* ---- Color de marca ---- */
  --color-marca: #3457a9;
  --color-marca-oscuro: #24406f;
  --color-marca-claro: #e8eefa;

  /* ---- Acentos por deporte ---- */
  --color-voleibol: #2b63d9;
  --color-baloncesto: #3457a9;
  --color-futsal: #3457a9;
  --color-taekwondo: #e31e24;
  --color-gimnasia: #15a1e5;
  --color-patinaje: #15a1e5;
  /* Celeste más oscuro para TEXTO y botones (el celeste original da
     solo ~2,9:1 sobre blanco; este da ~5,5:1). El original se queda
     para bordes y decoración. */
  --color-gimnasia-texto: #0a6fa6;

  /* ---- Neutros ---- */
  --color-texto: #1a1a1a;
  --color-texto-suave: #555555;
  --color-texto-tenue: #6b6b6b; /* antes #888: ahora cumple contraste AA (≈5:1) */
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f6f7f9;
  --color-borde: #e2e4ea;

  /* ---- Tipografía ----
     Poppins para títulos (con carácter, moderna),
     Inter para texto de cuerpo (muy legible en pantalla) */
  --fuente-titulos: 'Poppins', sans-serif;
  --fuente-texto: 'Inter', sans-serif;

  --texto-xs: 0.8rem;
  --texto-sm: 0.9rem;
  --texto-base: 1rem;
  --texto-lg: 1.15rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 2rem;
  --texto-3xl: 2.75rem;

  /* ---- Espaciados (escala consistente en vez de valores sueltos) ---- */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.5rem;
  --espacio-lg: 2.5rem;
  --espacio-xl: 4rem;

  /* ---- Bordes y sombras ---- */
  --radio-sm: 8px;
  --radio-md: 16px;
  --radio-pill: 999px;
  --sombra-suave: 0 2px 12px rgba(26, 26, 26, 0.06);
  --sombra-media: 0 6px 24px rgba(26, 26, 26, 0.1);

  --transicion: 0.2s ease;
}

/* ============================================
   RESET BÁSICO
   (esto debería haber estado desde la Fase 1 — sin box-sizing:
   border-box, cualquier elemento con padding se desborda de su
   contenedor, que es la causa raíz de casi todos los problemas
   de scroll horizontal y "zoom" vistos en móvil)
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

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

/* ============================================
   TIPOGRAFÍA BASE
   ============================================ */
body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  line-height: 1.6;
}

h1, h2, h3, h4,
.titulo-1, .titulo-2, .titulo-3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-texto);
}

.titulo-1 { font-size: var(--texto-3xl); }
.titulo-2 { font-size: var(--texto-2xl); }
.titulo-3 { font-size: var(--texto-xl); }

.texto-suave {
  color: var(--color-texto-suave);
}

.texto-tenue {
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
}

/* ============================================
   CONTENEDOR / LAYOUT
   ============================================ */
.contenedor {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--espacio-sm);
}

.seccion {
  padding: var(--espacio-xl) 0;
}

.seccion-alterna {
  background-color: var(--color-fondo-alterno);
}

/* ============================================
   BOTONES
   ============================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85em 2em;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: var(--texto-base);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radio-pill);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.boton-primario {
  background-color: var(--color-marca);
  color: #ffffff;
}

.boton-primario:hover {
  background-color: var(--color-marca-oscuro);
  color: #ffffff;
}

.boton-secundario {
  background-color: transparent;
  border-color: var(--color-marca);
  color: var(--color-marca);
}

.boton-secundario:hover {
  background-color: var(--color-marca-claro);
  color: var(--color-marca);
}

/* ============================================
   TARJETAS
   ============================================ */
.tarjeta {
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-md);
  transition: box-shadow var(--transicion), transform var(--transicion);
  overflow-wrap: break-word;
  word-break: break-word;
}

.tarjeta:hover {
  box-shadow: var(--sombra-suave);
  transform: translateY(-3px);
}

.tarjeta-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--texto-lg);
  margin: 0 0 0.5rem;
}

/* Rejilla reutilizable para tarjetas (noticias, deportes, categorías) */
.rejilla {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
}

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

@media (min-width: 960px) {
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   ETIQUETA / BADGE (para marcar el deporte en tarjetas)
   ============================================ */
.etiqueta {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  padding: 0.25em 0.9em;
  border-radius: var(--radio-pill);
  background-color: var(--color-marca-claro);
  color: var(--color-marca);
}

.etiqueta-taekwondo { background-color: #fbe4e4; color: var(--color-taekwondo); }
.etiqueta-gimnasia,
.etiqueta-patinaje { background-color: #e0f4fc; color: var(--color-gimnasia-texto); }

/* ============================================
   ACENTO POR DEPORTE (Fase 3)
   Pon una de estas clases en <body> y toda la plantilla
   de deporte adopta el color correcto automáticamente.
   ============================================ */
.page-voleibol   { --acento: var(--color-voleibol); }
.page-baloncesto { --acento: var(--color-baloncesto); }
.page-taekwondo  { --acento: var(--color-taekwondo); }
.page-futbol-sala     { --acento: var(--color-futsal); }
.page-gimnasia-ritmica   { --acento: var(--color-gimnasia-texto); --acento-decorado: var(--color-gimnasia); }
.page-patinaje   { --acento: var(--color-gimnasia-texto); --acento-decorado: var(--color-patinaje); }

/* ============================================
   MENÚ MÓVIL Y ENLACE ACTIVO (Fase 4)
   ============================================ */
.boton-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}

.boton-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-texto);
  margin: 5px 0;
}

@media (max-width: 720px) {
  .boton-menu {
    display: block;
    margin-right: -7rem;
  }

  .cabecera-interior { position: relative; }

  .menu-principal {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    min-width: 200px;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-media);
    padding: var(--espacio-sm);
    gap: var(--espacio-sm);
    list-style: none;
    margin: 0;
  }

  .menu-principal.abierto {
    display: flex;
    z-index: 100;
  }
}

.menu-principal .current-menu-item > a {
  color: var(--acento, var(--color-marca));
  font-weight: 600;
}

/* ============================================
   REDES SOCIALES EN EL PIE (Fase 4)
   ============================================ */
.pie-redes {
  display: flex;
  gap: var(--espacio-sm);
}

.pie-redes a {
  color: var(--color-texto-suave);
  display: inline-flex;
}

.pie-redes a:hover {
  color: var(--color-marca);
}

/* ============================================
   "TAMBIÉN PRACTICAMOS" — chips a otros deportes
   (compensa que el menú ya no lista los 6 deportes)
   ============================================ */
.otros-deportes {
  text-align: center;
  padding: 0 0 var(--espacio-lg);
}

.otros-deportes h3 {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-texto-tenue);
  margin: 0 0 var(--espacio-sm);
}

.chips-deportes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.chip {
  display: inline-block;
  padding: 0.4em 1.1em;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion);
}

.chip:hover {
  border-color: var(--color-marca);
  color: var(--color-marca);
}


/* =====================================================================
   ESTILOS DE CABECERA, PIE Y COMPONENTES DE PÁGINA
   (trasladados desde los estilos "locales" de cada página HTML;
   se usan en todo el sitio, así que viven aquí en el tema)
   ===================================================================== */

header.cabecera {
  border-bottom: 1px solid var(--color-borde);
  position: relative;
  z-index: 100;
  background-color: var(--color-fondo);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--espacio-sm);
  padding-bottom: var(--espacio-sm);
}

.logo-texto {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: var(--texto-lg);
  color: var(--color-marca);
  text-decoration: none;
}

@media (min-width: 721px) {
  .menu-principal {
    display: flex;
    gap: var(--espacio-md);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.menu-principal a {
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--texto-sm);
}

.menu-principal a:hover {
  color: var(--color-marca);
}

/* Héroe: dos columnas, texto a la izquierda */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-lg);
  align-items: center;
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.1fr 1fr;
  }
}

.hero h1 {
  font-size: var(--texto-3xl);
  max-width: 14ch;
  margin: 0 0 var(--espacio-sm);
}

.hero p {
  max-width: 46ch;
  font-size: var(--texto-lg);
  margin: 0 0 var(--espacio-md);
}

.hero-acciones {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
}

/* Placeholder de imagen: sustituir por una foto real */
.placeholder-foto {
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-md);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  text-align: center;
  padding: var(--espacio-sm);
}

/* Tarjeta de deporte: una franja de color a la izquierda según disciplina */
.tarjeta-deporte {
  border-left: 4px solid var(--color-marca);
}

.tarjeta-deporte.taekwondo { border-left-color: var(--color-taekwondo); }
.tarjeta-deporte.gimnasia,
.tarjeta-deporte.patinaje { border-left-color: var(--color-gimnasia); }

.tarjeta-deporte a {
  color: var(--color-marca);
  font-weight: 600;
  font-size: var(--texto-sm);
  text-decoration: none;
}

/* Noticias */
.tarjeta-noticia .placeholder-foto {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--espacio-sm);
}

.fecha-noticia {
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
}

/* CTA final */
.cta-final {
  background-color: var(--color-marca);
  border-radius: var(--radio-md);
  padding: var(--espacio-lg);
  text-align: center;
  color: #ffffff;
}

.cta-final h2 {
  color: #ffffff;
  margin: 0 0 var(--espacio-xs);
}

.cta-final p {
  color: #e8eefa;
  margin: 0 0 var(--espacio-md);
}

.cta-final .boton-primario {
  background-color: #ffffff;
  color: var(--color-marca);
}

.cta-final .boton-primario:hover {
  background-color: var(--color-marca-claro);
}

/* Pie de página */
footer.pie {
  background-color: var(--color-fondo-alterno);
  border-top: 1px solid var(--color-borde);
  padding: var(--espacio-lg) 0 var(--espacio-md);
}

.pie-columnas {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--espacio-md);
}

@media (min-width: 640px) {
  .pie-columnas { grid-template-columns: repeat(3, 1fr); }
}

.pie-columnas h3 {
  font-size: var(--texto-sm);
  margin: 0 0 var(--espacio-xs);
}

.pie-columnas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-columnas a {
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: var(--texto-sm);
  line-height: 2;
}

.pie-columnas a:hover {
  color: var(--color-marca);
}

.pie-legal {
  border-top: 1px solid var(--color-borde);
  padding-top: var(--espacio-sm);
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  margin-top: var(--espacio-md);
}


/* =====================================================================
   PLANTILLA DE PÁGINA DE DEPORTE
   (trasladado desde los estilos locales de voleibol.html, etc.)
   ===================================================================== */

.deporte-hero {
  background-color: var(--color-fondo-alterno);
  padding: var(--espacio-lg) 0;
}

.deporte-hero-interior {
  display: grid;
  gap: var(--espacio-md);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .deporte-hero-interior {
    grid-template-columns: auto 1fr;
  }
}

.deporte-hero h1 {
  font-size: var(--texto-2xl);
  margin: 0 0 0.5rem;
  color: var(--acento, var(--color-marca));
}

.deporte-hero p {
  max-width: 60ch;
  margin: 0;
}

.categoria-card {
  border-top: 3px solid var(--acento-decorado, var(--acento, var(--color-marca)));
}

.categoria-card h3 {
  color: var(--acento, var(--color-marca));
}

.categoria-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.categoria-card li + li {
  margin-top: 0.35rem;
}

.nota-edades {
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
  font-style: italic;
  max-width: 60ch;
  margin: var(--espacio-md) auto 0;
  text-align: center;
}

.boton-deporte {
  background-color: var(--acento, var(--color-marca));
  color: #ffffff;
}

.boton-deporte:hover {
  filter: brightness(0.88);
  color: #ffffff;
}

.zona-cta {
  text-align: center;
  padding: var(--espacio-lg) 0;
}

/* Galería de fotos de cada deporte (bloque nativo "Galería") */
.seccion-galeria-deporte {
  padding-bottom: var(--espacio-lg);
}

.seccion-galeria-deporte h2 {
  margin-bottom: var(--espacio-md);
}


/* =====================================================================
   CABECERA DE PÁGINA SIMPLE Y TABLA DE HORARIOS
   (se usa en Horarios, y la reutilizaremos en Noticias/Galería/Contacto)
   ===================================================================== */

.pagina-hero {
  background-color: var(--color-fondo-alterno);
  padding: var(--espacio-lg) 0;
  text-align: center;
}


.tabla-horarios-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--espacio-md);
}

.tabla-horarios {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

/* En pantallas estrechas, la tabla deja de ser tabla: cada fila se
   convierte en una ficha apilada, sin scroll horizontal necesario */
@media (max-width: 600px) {
  .tabla-horarios {
    min-width: 0;
  }

  .tabla-horarios thead {
    display: none;
  }

  .tabla-horarios, .tabla-horarios tbody, .tabla-horarios tr, .tabla-horarios td {
    display: block;
    width: 100%;
  }

  .tabla-horarios tr {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    margin-bottom: var(--espacio-sm);
    padding: var(--espacio-sm);
  }

  .tabla-horarios td {
    border: none;
    padding: 0.3rem 0;
  }

  .tabla-horarios td::before {
    content: attr(data-etiqueta) ": ";
    font-weight: 600;
    color: var(--color-texto-tenue);
  }
}

.tabla-horarios th, .tabla-horarios td {
  border-bottom: 1px solid var(--color-borde);
  padding: 0.75rem;
  text-align: left;
}

.tabla-horarios th {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--color-texto-tenue);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tabla-horarios .etiqueta {
  white-space: nowrap;
}


/* =====================================================================
   CONTACTO
   ===================================================================== */

.contacto-grid {
  display: grid;
  gap: var(--espacio-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .contacto-grid { grid-template-columns: 1fr 1.2fr; }
}

.info-contacto p {
  margin: 0 0 var(--espacio-sm);
}

.info-contacto strong {
  display: block;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-texto-tenue);
  margin-bottom: 0.15rem;
}

.campo {
  margin-bottom: var(--espacio-sm);
}

.campo label {
  display: block;
  font-size: var(--texto-sm);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.65em 0.9em;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  color: var(--color-texto);
  box-sizing: border-box;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--color-marca);
  outline-offset: 1px;
}

.campo textarea {
  resize: vertical;
  min-height: 120px;
}

.placeholder-mapa {
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-md);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-tenue);
  font-size: var(--texto-sm);
  text-align: center;
  padding: var(--espacio-sm);
  margin-top: var(--espacio-md);
}


/* =====================================================================
   FORMULARIO DE CONTACTO (WPForms)
   Ajustamos el estilo por defecto del plugin para que encaje con nuestro
   sistema de diseño, sin tocar el HTML que genera WPForms.
   ===================================================================== */

.wpforms-container {
  margin: 0 !important;
}

.wpforms-field {
  padding: 0 !important;
  margin-bottom: var(--espacio-sm) !important;
}

.wpforms-field-label {
  font-family: var(--fuente-texto) !important;
  font-size: var(--texto-sm) !important;
  font-weight: 500 !important;
  color: var(--color-texto) !important;
  margin-bottom: 0.35rem !important;
}

.wpforms-field input[type=text],
.wpforms-field input[type=email],
.wpforms-field select,
.wpforms-field textarea {
  width: 100% !important;
  padding: 0.65em 0.9em !important;
  border: 1px solid var(--color-borde) !important;
  border-radius: var(--radio-sm) !important;
  font-family: var(--fuente-texto) !important;
  font-size: var(--texto-base) !important;
  color: var(--color-texto) !important;
  box-sizing: border-box !important;
}

.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
  outline: 2px solid var(--color-marca) !important;
  outline-offset: 1px !important;
}

.wpforms-submit-container {
  margin-top: var(--espacio-sm) !important;
}

.wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.85em 2em !important;
  font-family: var(--fuente-texto) !important;
  font-weight: 600 !important;
  font-size: var(--texto-base) !important;
  background-color: var(--color-marca) !important;
  border: none !important;
  border-radius: var(--radio-pill) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color var(--transicion) !important;
}

.wpforms-submit:hover {
  background-color: var(--color-marca-oscuro) !important;
}

.wpforms-confirmation-container-full {
  background-color: var(--color-fondo-alterno) !important;
  border: 1px solid var(--color-borde) !important;
  border-radius: var(--radio-md) !important;
  padding: var(--espacio-md) !important;
  color: var(--color-texto) !important;
}


/* =====================================================================
   TARJETAS DE DEPORTE CLICABLES ENTERAS (página /deportes)
   ===================================================================== */

/* Columna flexible: el texto crece y el enlace "Ver categorías y horarios"
   queda siempre abajo, a la misma altura en todas las tarjetas de la fila,
   aunque la descripción tenga más o menos líneas. */
.tarjeta-deporte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.tarjeta-deporte p {
  flex-grow: 1;
}

.enlace-ver {
  margin-top: auto;
  color: var(--color-marca);
  font-weight: 600;
  font-size: var(--texto-sm);
}

.tarjeta-deporte.taekwondo .enlace-ver { color: var(--color-taekwondo); }
.tarjeta-deporte.gimnasia .enlace-ver,
.tarjeta-deporte.patinaje .enlace-ver { color: var(--color-gimnasia-texto); }

/* =====================================================================
   ETIQUETA DE EVENTO (Partido / Competición) en Horarios
   ===================================================================== */

.etiqueta-evento {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  padding: 0.25em 0.9em;
  border-radius: var(--radio-pill);
  background-color: #fff1de;
  color: #b8650a;
}


/* =====================================================================
   LOGO REAL POR DEPORTE (si se sube imagen destacada en la Página)
   ===================================================================== */

/* Alto fijo y ancho libre (hasta un máximo): un logo apaisado se ve
   completo, y uno cuadrado sigue ocupando 96px */
.logo-deporte-real {
  height: 96px;
  max-width: min(220px, 100%);
  justify-self: start; /* en móvil no se estira a todo el ancho de la rejilla */
  border-radius: var(--radio-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* pegado a la izquierda, alineado con el texto */
}

.logo-deporte-real img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Si no hay logo, el texto ocupa todo el ancho en vez de dejar hueco */
.deporte-hero-interior > div:only-child {
  grid-column: 1 / -1;
}


/* =====================================================================
   VISOR DE FOTOS (LIGHTBOX) — página de Galería
   ===================================================================== */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.abierto {
  display: flex;
}

body.lightbox-activo {
  overflow: hidden;
}

.lightbox-imagen {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-media);
}

.lightbox-cerrar {
  position: absolute;
  top: var(--espacio-sm);
  right: var(--espacio-sm);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lightbox-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-flecha:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.lightbox-anterior {
  left: var(--espacio-sm);
}

.lightbox-siguiente {
  right: var(--espacio-sm);
}

@media (max-width: 600px) {
  .lightbox-flecha {
    width: 40px;
    height: 40px;
  }
}

/* =====================================================================
   PAGINACIÓN DE NOTICIAS
   paginate_links() genera enlaces con la clase .page-numbers; la página
   actual lleva además .current y los puntos suspensivos .dots.
   ===================================================================== */

.paginacion-noticias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--espacio-lg);
}

.paginacion-noticias .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-texto-suave);
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
}

.paginacion-noticias a.page-numbers:hover {
  border-color: var(--color-marca);
  color: var(--color-marca);
}

.paginacion-noticias .page-numbers.current {
  background-color: var(--color-marca);
  border-color: var(--color-marca);
  color: #ffffff;
}

.paginacion-noticias .page-numbers.dots {
  border-color: transparent;
}


/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */

/* Foco visible: solo aparece al navegar con teclado (Tab), no al
   pulsar con el ratón o el dedo */
a:focus-visible,
button:focus-visible,
.boton:focus-visible,
.chip:focus-visible,
.wp-block-gallery img:focus-visible {
  outline: 3px solid var(--acento, var(--color-marca));
  outline-offset: 3px;
}

/* Sobre fondos oscuros o del color de marca, el contorno azul no se ve */
.cta-final :focus-visible,
.lightbox-overlay :focus-visible {
  outline-color: #ffffff;
}

/* Quien pide menos animación en su sistema no ve elevaciones ni
   transiciones */
@media (prefers-reduced-motion: reduce) {
  .boton,
  .tarjeta,
  .chip,
  .paginacion-noticias .page-numbers {
    transition: none;
  }

  .boton:hover,
  .tarjeta:hover {
    transform: none;
  }
}


/* =====================================================================
   MAPA DE GOOGLE (página de Contacto)
   La regla global "iframe { height: auto }" encogía el mapa (un iframe
   no tiene altura propia). Le damos proporción fija y ancho completo.
   ===================================================================== */

.info-contacto iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radio-md);
  margin-top: var(--espacio-md);
}


/* =====================================================================
   FOTO DEL HERO DE INICIO (imagen destacada de la página de Inicio)
   ===================================================================== */

.hero-foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin foto, el texto del hero usa una sola columna */
@media (min-width: 860px) {
  .hero.hero-sin-foto {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   INFORMACIÓN BÁSICA DE PROTECCIÓN DE DATOS (debajo del formulario)
   ===================================================================== */

.aviso-datos {
  margin-top: var(--espacio-sm);
  font-size: var(--texto-xs);
  line-height: 1.5;
  color: var(--color-texto-tenue);
}

.aviso-datos a {
  color: var(--color-marca);
}


/* =====================================================================
   EQUIPOS DENTRO DE UNA CATEGORÍA (página de deporte)
   ===================================================================== */

.equipos-titulo {
  margin: var(--espacio-sm) 0 0.4rem;
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-texto-tenue);
}

.categoria-card .equipos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.categoria-card .equipos-lista li {
  margin: 0;
  padding: 0.25em 0.8em;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  background-color: var(--color-fondo-alterno);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}