/* ======================================================
	CLUB DE AJEDREZ DE REQUENA — Hoja de estilos principal
	Breakpoints:
		@768px  — tablet / móvil grande
		@568px  — teléfono pequeño
	====================================================== */


/* ===== VARIABLES ===== */

:root {
	/* Paleta Ajedrez */
	--chess-dark:       #0f0f1a;
	--chess-bg:         #1a1a2e;
	--chess-gold:       #c9a84c;
	--chess-gold-light: #e8d5a3;

	/* Paleta Go */
	--go-dark:    #0e1f17;
	--go-bg:      #1a3326;
	--go-wood:    #c8954a;
	--go-cream:   #f0e6d0;

	/* Colores compartidos */
	--white:          #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.7);
	--text-faint:     rgba(255, 255, 255, 0.4);
	--border-subtle:  rgba(255, 255, 255, 0.07);
	--border-dim:     rgba(255, 255, 255, 0.12);
	--surface-dim:    rgba(255, 255, 255, 0.04);
	--page-bg:        #0a0a12;

	/* Tipografía */
	--font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
	--font-display: 'Playfair Display', Georgia, serif;

	/* Transición */
	--transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ===== RESET ===== */

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

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: hidden;
	background: var(--page-bg);
	color: var(--white);
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
}


/* ===== UTILIDADES ===== */

.display-font {
	font-family: var(--font-display);
}

.chess-colored {
	color: var(--chess-gold);
}

.go-colored {
	color: var(--go-wood);
}

/* Espacio invisible que compensa el header fijo en los anchor links */
.anchor-offset {
	display: block;
	height: 80px;
	margin-top: -80px;
	pointer-events: none;
	visibility: hidden;
}


main {
	background-color: #0d0d1b;
}

/* ===== ANIMACIONES ===== */

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-in {
	animation: fade-in-up 0.55s ease forwards;
}

.animate-in:nth-child(2) { animation-delay: 0.08s; }
.animate-in:nth-child(3) { animation-delay: 0.16s; }
.animate-in:nth-child(4) { animation-delay: 0.24s; }
.animate-in:nth-child(5) { animation-delay: 0.32s; }


/* ===== HEADER ===== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: rgba(10, 10, 18, 0.75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-subtle);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* L'icona testuale è rimpiazzata dall'immagine del logo */
.site-logo-image {
	height: 40px;
	width: auto;
	flex-shrink: 0;
	filter: invert(1);
	mix-blend-mode: screen;
}

.site-logo-name {
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: var(--white);
	white-space: nowrap;
}

.site-logo-city {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--text-faint);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: block;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.main-nav-link {
	padding: 7px 14px;
	border-radius: 50px;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
	border: 1px solid transparent;
	transition: var(--transition);
}

.main-nav-link:hover {
	color: var(--white);
	background: var(--surface-dim);
	border-color: var(--border-dim);
}

.main-nav-link--chess-active {
	color: var(--chess-gold);
	border-color: rgba(201, 168, 76, 0.3);
}

.main-nav-link--go-active {
	color: var(--go-wood);
	border-color: rgba(200, 149, 74, 0.3);
}

.main-nav-link--active {
	color: var(--white);
	background: var(--surface-dim);
	border-color: var(--border-dim);
}

.language-switcher {
	display: none; /* oculto temporalmente — descomentar cuando se añadan traducciones */
	gap: 4px;
	margin-left: 12px;
	padding-left: 16px;
	border-left: 1px solid var(--border-dim);
}

.language-button {
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	border: 1px solid transparent;
	background: none;
	transition: var(--transition);
}

.language-button:hover,
.language-button--active {
	color: var(--white);
	background: var(--surface-dim);
	border-color: var(--border-dim);
}


/* ===== MENÚ HAMBURGER (solo móvil) ===== */

.hamburger-button {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--border-dim);
	border-radius: 8px;
	color: var(--white);
	font-size: 1.2rem;
	line-height: 1;
	transition: var(--transition);
}

.hamburger-button:hover {
	background: var(--surface-dim);
}

/* Overlay de navegación móvil */
.mobile-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(8, 8, 16, 0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 80px 32px 48px;
}

.mobile-nav-overlay--open {
	display: flex;
}

.mobile-nav-close-button {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: 1px solid var(--border-dim);
	border-radius: 8px;
	color: var(--white);
	font-size: 1.4rem;
	line-height: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}

.mobile-nav-close-button:hover {
	background: var(--surface-dim);
}

.mobile-nav-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.mobile-nav-link {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--text-secondary);
	padding: 10px 24px;
	border-radius: 12px;
	transition: var(--transition);
	text-align: center;
	width: 100%;
}

.mobile-nav-link:hover,
.mobile-nav-link--active {
	color: var(--white);
	background: var(--surface-dim);
}

.mobile-nav-link--chess {
	color: var(--chess-gold);
}

.mobile-nav-link--go {
	color: var(--go-wood);
}

.mobile-language-switcher {
	display: none; /* oculto temporalmente — descomentar cuando se añadan traducciones */
	gap: 8px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border-subtle);
}

.mobile-language-button {
	padding: 8px 18px;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
	border: 1px solid var(--border-subtle);
	background: none;
	transition: var(--transition);
}

.mobile-language-button:hover,
.mobile-language-button--active {
	color: var(--white);
	background: var(--surface-dim);
	border-color: var(--border-dim);
}


/* ===== HOME: PANELES DIVIDIDOS ===== */


.home-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}

/* Línea divisoria entre paneles */
.home-split::after {
	content: '';
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 100vh;
	background: linear-gradient(to bottom,
		transparent 10%,
		var(--border-dim) 30%,
		var(--border-dim) 70%,
		transparent 90%);
	z-index: 10;
	pointer-events: none;
}

.home-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 120px 64px 80px;
	overflow: hidden;
	transition: var(--transition);
	min-height: 100vh;
	text-decoration: none;
}

/* Panel de Ajedrez */
.chess-home-panel {
	background: var(--chess-bg);
}

.chess-home-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-conic-gradient(
			rgba(255, 255, 255, 0.04) 0% 25%,
			transparent 0% 50%
		) 0 0 / 56px 56px;
	pointer-events: none;
}

.chess-home-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(201, 168, 76, 0.12) 0%,
		rgba(15, 15, 26, 0.6) 50%,
		rgba(15, 15, 26, 0.8) 100%);
	pointer-events: none;
	transition: background var(--transition);
}

.chess-home-panel:hover::after {
	background: linear-gradient(135deg,
		rgba(201, 168, 76, 0.2) 0%,
		rgba(15, 15, 26, 0.45) 50%,
		rgba(15, 15, 26, 0.65) 100%);
}

/* Panel de Go */
.go-home-panel {
	background: var(--go-bg);
}

.go-home-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(200, 149, 74, 0.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 149, 74, 0.18) 1px, transparent 1px);
	background-size: 44px 44px;
	pointer-events: none;
}

.go-home-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(45, 106, 79, 0.3) 0%,
		rgba(14, 31, 23, 0.55) 50%,
		rgba(14, 31, 23, 0.75) 100%);
	pointer-events: none;
	transition: background var(--transition);
}

.go-home-panel:hover::after {
	background: linear-gradient(135deg,
		rgba(45, 106, 79, 0.45) 0%,
		rgba(14, 31, 23, 0.4) 50%,
		rgba(14, 31, 23, 0.6) 100%);
}

/* Contenido dentro del panel */
.home-panel-content {
	position: relative;
	z-index: 2;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

/* Icono decorativo grande en el fondo */
.home-panel-background-icon {
	position: absolute;
	right: -20px;
	bottom: -40px;
	font-size: 22rem;
	opacity: 0.04;
	z-index: 1;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	transition: opacity var(--transition), transform var(--transition);
}

.chess-home-panel:hover .home-panel-background-icon,
.go-home-panel:hover .home-panel-background-icon {
	opacity: 0.07;
	transform: scale(1.05) rotate(-3deg);
}

/* Badge "Desde 1996 / Desde 2024" */
.activity-year-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 50px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid;
}

.chess-home-panel .activity-year-badge {
	color: var(--chess-gold);
	border-color: rgba(201, 168, 76, 0.4);
	background: rgba(201, 168, 76, 0.1);
}

.go-home-panel .activity-year-badge {
	color: var(--go-wood);
	border-color: rgba(200, 149, 74, 0.4);
	background: rgba(200, 149, 74, 0.1);
}

.panel-title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 5vw, 5.5rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.chess-home-panel .panel-title {
	color: var(--chess-gold-light);
}

.go-home-panel .panel-title {
	color: var(--go-cream);
}

.panel-tagline {
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 600;
	color: var(--white);
}

.panel-description {
	font-size: clamp(0.82rem, 1.1vw, 0.93rem);
	color: var(--text-secondary);
	line-height: 1.7;
}

.schedule-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.83rem;
	padding: 9px 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
}

.panel-call-to-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
	border-radius: 50px;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: var(--transition);
	border: 2px solid;
}

.chess-home-panel .panel-call-to-action {
	color: var(--chess-dark);
	background: var(--chess-gold);
	border-color: var(--chess-gold);
}

.chess-home-panel .panel-call-to-action:hover {
	background: var(--chess-gold-light);
	border-color: var(--chess-gold-light);
	transform: translateX(4px);
}

.go-home-panel .panel-call-to-action {
	color: var(--go-dark);
	background: var(--go-wood);
	border-color: var(--go-wood);
}

.go-home-panel .panel-call-to-action:hover {
	background: var(--go-cream);
	border-color: var(--go-cream);
	transform: translateX(4px);
}

.call-to-action-arrow {
	display: inline-block;
	transition: transform var(--transition);
}

.panel-call-to-action:hover .call-to-action-arrow {
	transform: translateX(4px);
}


/* ===== HERO DE PÁGINAS INTERNAS ===== */

.page-hero {
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 120px 64px 60px;
	position: relative;
	overflow: hidden;
}

.chess-page-hero {
	background: var(--chess-bg);
}

.chess-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-conic-gradient(
			rgba(255, 255, 255, 0.05) 0% 25%,
			transparent 0% 50%
		) 0 0 / 56px 56px;
	pointer-events: none;
}

.chess-page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(15, 15, 26, 0.2) 0%,
		rgba(15, 15, 26, 0.8) 100%);
	pointer-events: none;
}

.go-page-hero {
	background: var(--go-bg);
}

.go-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(200, 149, 74, 0.2) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 149, 74, 0.2) 1px, transparent 1px);
	background-size: 44px 44px;
	pointer-events: none;
}

.go-page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(14, 31, 23, 0.2) 0%,
		rgba(14, 31, 23, 0.85) 100%);
	pointer-events: none;
}

/* Hero de páginas compartidas (actividades, galería, contacto) */
.shared-page-hero {
	background: linear-gradient(135deg, #1a1a2e 0%, #1a3326 100%);
	border-bottom: 1px solid var(--border-subtle);
}

/* Oscurecimiento hacia abajo para mejor legibilidad del texto */
.shared-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

.shared-page-hero::after {
	display: none;
}

.page-hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-faint);
	margin-bottom: 20px;
	letter-spacing: 0.04em;
	transition: color 0.2s;
}

.back-link:hover {
	color: var(--text-secondary);
}

.hero-category-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.chess-page-hero .hero-category-label { color: var(--chess-gold); }
.go-page-hero .hero-category-label { color: var(--go-wood); }
.shared-page-hero .hero-category-label { color: var(--text-faint); }

.page-title {
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 6vw, 5.5rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
	color: var(--white);
}

.page-subtitle {
	font-size: clamp(0.95rem, 1.8vw, 1.15rem);
	color: var(--text-secondary);
	max-width: 560px;
	line-height: 1.7;
}

.hero-decorative-icon {
	position: absolute;
	right: 64px;
	bottom: 32px;
	font-size: 13rem;
	opacity: 0.05;
	line-height: 1;
	z-index: 1;
	pointer-events: none;
}


/* ===== SECCIÓN DE TARJETAS DE INFORMACIÓN ===== */

.info-section {
	padding: 72px 64px;
}

.info-card-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.info-card {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	padding: 36px;
	transition: var(--transition);
}

.info-card:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Link "Ver contacto →" dentro de una tarjeta de información */
.info-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: gap var(--transition);
}

.info-card-link--chess {
	color: var(--chess-gold);
}

.info-card-link--go {
	color: var(--go-wood);
}

.info-card-link:hover {
	gap: 10px;
}

/* Avatar de persona: círculo de color con la inicial */
.person-avatar {
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	flex-shrink: 0;
	margin-top: 1px;
}

.person-avatar--chess {
	background: rgba(201, 168, 76, 0.18);
	color: var(--chess-gold);
	border: 2px solid rgba(201, 168, 76, 0.45);
}

.person-avatar--go {
	background: rgba(200, 149, 74, 0.18);
	color: var(--go-wood);
	border: 2px solid rgba(200, 149, 74, 0.45);
}

/* Tarjetas de contacto por actividad con acento de color */
.contact-activity-card--chess {
	border-top: 3px solid var(--chess-gold);
}

.contact-activity-card--go {
	border-top: 3px solid var(--go-wood);
}

.info-card--full-width {
	grid-column: 1 / -1;
}

.card-category-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.card-heading {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 14px;
	color: var(--white);
	line-height: 1.2;
}

.card-body {
	color: var(--text-secondary);
	line-height: 1.75;
	font-size: 0.93rem;
}

.card-body + .card-body {
	margin-top: 10px;
}

/* Lista de características (horario, actividades…) */
.features-list {
	list-style: none;
	margin-top: 16px;
}

.features-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-subtle);
}

.features-item:last-child {
	border-bottom: none;
}

.features-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 7px;
	flex-shrink: 0;
}

.chess-bullet { background: var(--chess-gold); }
.go-bullet    { background: var(--go-wood); }

.features-text strong {
	display: block;
	font-size: 0.9rem;
	color: var(--white);
	margin-bottom: 2px;
}

.features-text span {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

/* Etiquetas de información (pills) */
.info-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.info-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: 50px;
	font-size: 0.78rem;
	font-weight: 500;
	border: 1px solid;
}

.info-tag--chess {
	color: var(--chess-gold);
	border-color: rgba(201, 168, 76, 0.3);
	background: rgba(201, 168, 76, 0.07);
}

.info-tag--go {
	color: var(--go-wood);
	border-color: rgba(200, 149, 74, 0.3);
	background: rgba(200, 149, 74, 0.07);
}


/* ===== TABLERO MINI DE GO (decoración) ===== */

.go-board-mini {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 2px;
	width: 100%;
	max-width: 240px;
	margin: 18px 0;
	padding: 10px;
	background: rgba(200, 149, 74, 0.05);
	border: 1px solid rgba(200, 149, 74, 0.14);
	border-radius: 8px;
	position: relative;
}

.go-board-mini::before {
	content: '';
	position: absolute;
	inset: 10px;
	background-image:
		linear-gradient(rgba(200, 149, 74, 0.22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 149, 74, 0.22) 1px, transparent 1px);
	background-size: calc(100% / 8) calc(100% / 8);
	pointer-events: none;
}

.go-stone {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.go-stone--black {
	background: radial-gradient(circle at 35% 35%, #666, #111);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.go-stone--white {
	background: radial-gradient(circle at 35% 35%, #fff, #ccc);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.go-stone--empty {
	background: transparent;
}


/* ===== SECCIONES DE PÁGINAS COMPARTIDAS ===== */

.page-section {
	padding: 72px 64px;
}


.section-container {
	max-width: 1100px;
	margin: 0 auto;
}

.section-header {
	margin-bottom: 44px;
}

.section-category-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.section-heading {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 700;
	color: var(--white);
	line-height: 1.15;
	margin-bottom: 10px;
}

.section-description {
	color: var(--text-secondary);
	font-size: 0.95rem;
	max-width: 560px;
	line-height: 1.75;
}


/* ===== LISTA DE ACTIVIDADES / CALENDARIO ===== */

.events-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.event-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--surface-dim);
	border: 1px solid var(--border-subtle);
	transition: var(--transition);
}

.event-item:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--border-dim);
}

.event-date {
	flex-shrink: 0;
	width: 52px;
	text-align: center;
	padding: 8px 4px;
	border-radius: 8px;
}

.chess-event-date {
	background: rgba(201, 168, 76, 0.1);
	border: 1px solid rgba(201, 168, 76, 0.2);
}

.go-event-date {
	background: rgba(200, 149, 74, 0.1);
	border: 1px solid rgba(200, 149, 74, 0.2);
}

.both-event-date {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-dim);
}

.event-day-number {
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	display: block;
}

.chess-event-date .event-day-number { color: var(--chess-gold); }
.go-event-date .event-day-number    { color: var(--go-wood); }
.both-event-date .event-day-number  { color: var(--text-secondary); }

.event-month-label {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
	display: block;
	margin-top: 3px;
}

.event-details {
	flex: 1;
	min-width: 0;
}

.event-details strong {
	display: block;
	font-size: 0.9rem;
	color: var(--white);
	margin-bottom: 3px;
}

.event-details p {
	font-size: 0.8rem;
	color: var(--text-secondary);
	line-height: 1.55;
}

.event-type-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.event-type-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.tag--class {
	background: rgba(255, 255, 255, 0.07);
	color: var(--text-secondary);
}

.tag--chess-tournament {
	background: rgba(201, 168, 76, 0.14);
	color: var(--chess-gold);
}

.tag--go-tournament {
	background: rgba(200, 149, 74, 0.14);
	color: var(--go-wood);
}

.tag--open-event {
	background: rgba(100, 180, 255, 0.1);
	color: rgba(150, 205, 255, 0.85);
}

.tag--chess {
	background: rgba(201, 168, 76, 0.1);
	color: var(--chess-gold);
}

.tag--go {
	background: rgba(200, 149, 74, 0.1);
	color: var(--go-wood);
}


/* ===== GALERÍA DE FOTOS ===== */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}

.photo-item {
	aspect-ratio: 1;
	border-radius: 12px;
	background: var(--surface-dim);
	border: 1.5px dashed rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.2);
	font-size: 0.72rem;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: var(--transition);
}

.photo-item:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
}

.photo-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-placeholder-icon {
	font-size: 1.8rem;
	opacity: 0.25;
}

.gallery-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.instagram-follow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 50px;
	font-size: 0.83rem;
	font-weight: 600;
	border: 1px solid var(--border-dim);
	color: var(--text-secondary);
	background: var(--surface-dim);
	transition: var(--transition);
}

.instagram-follow-link:hover {
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.3),
		rgba(253, 29, 29, 0.18),
		rgba(252, 176, 69, 0.18));
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.gallery-instagram-note {
	font-size: 0.76rem;
	color: var(--text-faint);
}

/* Separador visual entre secciones de Ajedrez y Go */
.activity-section-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 48px 0 32px;
}

.activity-section-divider-icon {
	font-size: 1.4rem;
	flex-shrink: 0;
}

.activity-section-divider-title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--white);
}

.activity-section-divider-line {
	flex: 1;
	height: 1px;
	background: var(--border-subtle);
}


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

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	min-height: 440px;
}

.contact-info-panel {
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(255, 255, 255, 0.02);
}

.contact-map-panel {
	position: relative;
	overflow: hidden;
	min-height: 360px;
}

.contact-map-panel iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.contact-field {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--border-subtle);
}

.contact-field:last-of-type {
	border-bottom: none;
}

.contact-field-icon {
	font-size: 1.1rem;
	width: 24px;
	flex-shrink: 0;
	margin-top: 2px;
}

.contact-field-text strong {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 3px;
}

.contact-field-text span,
.contact-field-text a {
	font-size: 0.9rem;
	color: var(--white);
	line-height: 1.55;
}

.contact-field-text small {
	font-size: 0.78rem;
	color: var(--text-faint);
	font-style: italic;
}

.contact-field-text a {
	transition: color 0.2s;
}

.contact-field-text a:hover {
	color: var(--chess-gold);
}

/* Tarjeta de Instagram en el bloque de contacto */
.instagram-card {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.1),
		rgba(253, 29, 29, 0.07),
		rgba(252, 176, 69, 0.07));
	border: 1px solid var(--border-subtle);
	transition: var(--transition);
	text-decoration: none;
}

.instagram-card:hover {
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.2),
		rgba(253, 29, 29, 0.13),
		rgba(252, 176, 69, 0.13));
	border-color: var(--border-dim);
}

.instagram-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.instagram-handle strong {
	display: block;
	font-size: 0.86rem;
	color: var(--white);
	margin-bottom: 1px;
}

.instagram-handle span {
	font-size: 0.72rem;
	color: var(--text-faint);
}

/* Bloque de contacto por actividad (chess / go) en contacto.html */
.contact-activity-blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 32px;
}

.contact-activity-card {
	padding: 28px;
	border-radius: 16px;
	background: var(--surface-dim);
	border: 1px solid var(--border-subtle);
}

.contact-activity-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.contact-activity-icon {
	font-size: 1.5rem;
}

.contact-activity-title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--white);
}


/* ===== BARRA DE CROSS-PROMOTION ===== */

.cross-promotion-bar {
	background: rgba(255, 255, 255, 0.02);
	border-top: 1px solid var(--border-subtle);
	padding: 48px 64px;
	text-align: center;
}

.cross-promotion-bar p {
	font-size: 1.05rem;
	color: var(--text-secondary);
	margin-bottom: 18px;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 30px;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: var(--transition);
}

.chess-cta-button {
	background: var(--chess-gold);
	color: var(--chess-dark);
}

.chess-cta-button:hover {
	background: var(--chess-gold-light);
	transform: translateY(-2px);
}

.go-cta-button {
	background: var(--go-wood);
	color: var(--go-dark);
}

.go-cta-button:hover {
	background: var(--go-cream);
	transform: translateY(-2px);
}


/* ===== PIE DE PÁGINA ===== */

.site-footer {
	background: #060609;
	border-top: 1px solid var(--border-subtle);
	padding: 36px 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-brand {
	font-family: var(--font-display);
	font-size: 0.85rem;
	color: var(--text-faint);
}

.footer-brand strong {
	color: var(--text-secondary);
}

.footer-nav {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-nav a {
	font-size: 0.78rem;
	color: var(--text-faint);
	transition: color 0.2s;
}

.footer-nav a:hover {
	color: var(--text-secondary);
}


/* ===== RESPONSIVE — 768px ===== */

@media (max-width: 768px) {

	/* Header: ocultar nav y language, mostrar hamburger */
	.main-nav,
	.language-switcher {
		display: none;
	}

	.hamburger-button {
		display: flex;
	}

	.site-header {
		padding: 12px 20px;
	}



	.home-split {
		grid-template-columns: 1fr;
	}

	.home-split::after {
		display: none;
	}

	.home-panel {
		min-height: 100svh;
		padding: 100px 28px 56px;
		justify-content: flex-start;
	}

	.home-panel-background-icon {
		font-size: 14rem;
		right: -10px;
		bottom: -20px;
	}

	.panel-title {
		font-size: clamp(3.5rem, 13vw, 5rem);
	}

	/* Hero interno */
	.page-hero {
		padding: 100px 24px 48px;
		min-height: 42vh;
	}

	.hero-decorative-icon {
		display: none;
	}

	.page-title {
		font-size: clamp(2.4rem, 9vw, 3.5rem);
	}

	/* Secciones */
	.info-section,
	.page-section {
		padding: 48px 20px;
	}

	.info-card-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.info-card--full-width {
		grid-column: 1;
	}

	.info-card {
		padding: 24px;
	}

	/* Galería */
	.photo-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* Contacto */
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.contact-info-panel {
		padding: 32px 22px;
	}

	.contact-map-panel {
		min-height: 280px;
		position: static;
	}

	.contact-map-panel iframe {
		position: static;
		height: 280px;
	}

	.contact-activity-blocks {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* Cross-promotion */
	.cross-promotion-bar {
		padding: 40px 20px;
	}

	/* Footer */
	.site-footer {
		padding: 28px 20px;
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ===== RESPONSIVE — 568px ===== */

@media (max-width: 568px) {

	.home-panel {
		padding: 96px 20px 48px;
	}

	.panel-call-to-action {
		width: 100%;
		justify-content: center;
	}

	.schedule-chip {
		width: 100%;
		justify-content: center;
	}

	.info-tags {
		flex-direction: column;
	}

	.photo-grid {
		grid-template-columns: 1fr 1fr;
	}

	.gallery-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.event-item {
		gap: 12px;
		padding: 14px 14px;
	}

	.event-date {
		width: 44px;
	}
}


/* Card Instagram dentro del panel: separación visual clara respecto al CTA */
.home-panel .home-instagram-account-card {
	margin-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== INSTAGRAM — SECCIÓN HOME ===== */

/* Link Instagram dentro de cada panel de la home (debajo del CTA) */
.panel-instagram-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.38);
	letter-spacing: 0.02em;
	transition: color 0.25s;
	text-decoration: none;
}

.panel-instagram-link:hover {
	color: rgba(255, 255, 255, 0.78);
}

/* Sección debajo del split con las dos cuentas de Instagram */
.home-instagram-section {
	background: #07070f;
	border-top: 1px solid var(--border-subtle);
	padding: 56px 64px;
	text-align: center;
}

.home-instagram-section-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 10px;
}

.home-instagram-section-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 8px;
}

.home-instagram-section-desc {
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-bottom: 36px;
}

.home-instagram-accounts {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.home-instagram-account-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 28px;
	border-radius: 16px;
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.12),
		rgba(253, 29, 29, 0.08),
		rgba(252, 176, 69, 0.08));
	border: 1px solid rgba(255, 255, 255, 0.1);
	text-decoration: none;
	transition: var(--transition);
	min-width: 240px;
}

.home-instagram-account-card:hover {
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.22),
		rgba(253, 29, 29, 0.16),
		rgba(252, 176, 69, 0.16));
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.18);
}

.home-instagram-account-card strong {
	display: block;
	font-size: 1rem;
	color: var(--white);
	margin-bottom: 2px;
}

.home-instagram-account-card span {
	font-size: 0.75rem;
	color: var(--text-faint);
}

/* ===== INSTAGRAM — GALERÍA (versión prominente) ===== */

/* Sustituye al .instagram-follow-link pequeño en la galería */
.instagram-featured-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.14),
		rgba(253, 29, 29, 0.1),
		rgba(252, 176, 69, 0.1));
	border: 1px solid rgba(255, 255, 255, 0.12);
	text-decoration: none;
	transition: var(--transition);
	max-width: 400px;
}

.instagram-featured-card:hover {
	background: linear-gradient(135deg,
		rgba(131, 58, 180, 0.26),
		rgba(253, 29, 29, 0.18),
		rgba(252, 176, 69, 0.18));
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
}

.instagram-featured-card .instagram-avatar {
	width: 52px;
	height: 52px;
	font-size: 1.6rem;
}

.instagram-featured-card-text strong {
	display: block;
	font-size: 1.05rem;
	color: var(--white);
	margin-bottom: 3px;
}

.instagram-featured-card-text span {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

.gallery-instagram-cta {
	margin-top: 28px;
}

.gallery-instagram-cta-note {
	font-size: 0.78rem;
	color: var(--text-faint);
	margin-top: 14px;
}

/* ===== INSTAGRAM — FOOTER ===== */

.footer-instagram {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.footer-instagram-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.38);
	transition: color 0.2s;
	text-decoration: none;
}

.footer-instagram-link:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* ===== RESPONSIVE INSTAGRAM ===== */

@media (max-width: 768px)
{
	.home-instagram-section {
		padding: 48px 20px;
	}

	.home-instagram-accounts {
		flex-direction: column;
		align-items: center;
	}

	.home-instagram-account-card {
		width: 100%;
		max-width: 320px;
		min-width: unset;
		justify-content: center;
	}

	.footer-instagram {
		gap: 10px;
	}
}

@media (max-width: 568px)
{
	.instagram-featured-card {
		max-width: 100%;
	}
}