/*
	Padel Center La Costa — capa de marca sobre Spectral (main.css).
	Se carga después de main.css y temas.css. Todos los colores salen de las
	variables de temas.css; acá no se escribe ningún color fijo.
*/

:root {
	--pc-overlay: color-mix(in srgb, var(--pc-oscuro) 72%, transparent);
	--pc-font-title: "Barlow Condensed", "Arial Narrow", sans-serif;
	--pc-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* Base */

	body {
		background: var(--pc-oscuro);
	}

	body, input, select, textarea {
		color: var(--pc-sobre-oscuro);
		font-family: var(--pc-font-body);
		letter-spacing: 0.01em;
	}

	@media screen and (max-width: 736px) {
		body, input, select, textarea {
			letter-spacing: 0;
		}
	}

	h1, h2, h3, h4, h5, h6,
	strong, b {
		color: var(--pc-sobre-oscuro);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--pc-font-title);
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	h2 {
		font-size: 2em;
		line-height: 1.15em;
	}

	h3 {
		font-size: 1.3em;
		line-height: 1.3em;
		margin-bottom: 0.5em;
	}

	@media screen and (max-width: 736px) {
		h2 {
			font-size: 1.65em;
			line-height: 1.15em;
		}
	}

	header.major h2 {
		border-bottom-color: var(--pc-sobre-oscuro);
	}

	header.major p {
		color: var(--pc-sobre-oscuro);
	}

	section[id] {
		scroll-margin-top: 3em;
	}

/* Botones */

	.button,
	button {
		box-shadow: inset 0 0 0 2px var(--pc-sobre-oscuro);
		color: var(--pc-sobre-oscuro);
		font-family: var(--pc-font-title);
		font-size: 0.95em;
		font-weight: 700;
		letter-spacing: 0.12em;
		border-radius: 6px;
	}

		.button:hover,
		button:hover {
			background-color: color-mix(in srgb, var(--pc-sobre-oscuro) 12%, transparent);
		}

	.button.icon:before {
		margin-right: 0.6em;
	}

	.button.primary {
		background-color: var(--pc-primario);
		color: var(--pc-sobre-primario) !important;
	}

		.button.primary:hover {
			background-color: var(--pc-primario-hover) !important;
		}

		.button.primary:active {
			background-color: var(--pc-oscuro) !important;
		}

	.button:focus-visible,
	a:focus-visible {
		outline: 3px solid var(--pc-acento);
		outline-offset: 3px;
	}

/* Header + menú */

	#header {
		background: color-mix(in srgb, var(--pc-oscuro) 96%, transparent);
	}

		#header h1 a img {
			display: block;
			height: 1.15em;
			margin-top: 0.95em;
			width: auto;
		}

		@media screen and (max-width: 736px) {
			#header h1 a img {
				height: 1.2em;
				margin-top: 0.9em;
			}
		}

		#header nav > ul > li > a {
			color: var(--pc-sobre-oscuro);
			font-family: var(--pc-font-title);
			font-size: 0.95em;
			font-weight: 700;
			letter-spacing: 0.15em;
		}

	#menu {
		background: var(--pc-oscuro-2);
		color: var(--pc-sobre-oscuro);
	}

		#menu ul > li {
			border-top-color: color-mix(in srgb, var(--pc-sobre-oscuro) 8%, transparent);
		}

		#menu ul > li > a {
			font-family: var(--pc-font-title);
			font-size: 1.05em;
			font-weight: 700;
			letter-spacing: 0.15em;
		}

			#menu ul > li > a:hover {
				color: var(--pc-acento);
			}

/* Fondo de la landing (foto fija bajo banner y contacto) */

	body.landing #page-wrapper {
		background-image: linear-gradient(var(--pc-overlay), var(--pc-overlay)), url("../../images/hero.jpg");
	}

	body.is-mobile.landing #page-wrapper {
		background: none;
	}

	body.is-mobile.landing #banner,
	body.is-mobile.landing .wrapper.style4 {
		background-image: linear-gradient(var(--pc-overlay), var(--pc-overlay)), url("../../images/hero.jpg");
	}

/* Banner */

	#banner:after {
		background: var(--pc-oscuro);
	}

	#banner .kicker {
		color: var(--pc-suave);
		font-family: var(--pc-font-title);
		font-weight: 700;
		letter-spacing: 0.3em;
		margin-bottom: 1.25em;
	}

	#banner h2 {
		margin-bottom: 1.25em;
		margin-top: 60px;
		max-width: 100%;
		padding: 1em 2.5em;
	}

		#banner h2.banner-logo img {
			display: block;
			height: auto;
			max-width: 100%;
			width: 15em;
		}

		#banner h2:before,
		#banner h2:after {
			background: var(--pc-acento);
			height: 3px;
		}

	#banner p {
		font-family: var(--pc-font-title);
		font-size: 1.2em;
		font-weight: 600;
		letter-spacing: 0.12em;
		margin-bottom: 1em;
		margin-top: -25px;
	}

	#banner .actions {
		margin-top: calc(-0.5em - 20px + 25px);
	}

	@media screen and (max-width: 736px) {
		#banner {
			min-height: 100vh;
			min-height: 100svh;
			padding: calc(7em - 85px) 1.5em 5em 1.5em;
		}

			#banner h2 {
				font-size: 1em;
				margin-bottom: 1.5em;
				padding: 1.25em 1.5em;
			}

				#banner h2.banner-logo img {
					width: 16.8em;
				}

			#banner p {
				font-size: 1.05em;
			}

			#banner .actions {
				align-items: center;
			}

			#banner .actions li {
				padding-left: 0 !important;
				width: 75% !important;
			}

				#banner .actions li > * {
					width: 100% !important;
				}
	}

/* Números (style1) */

	.wrapper.style1 {
		background-color: var(--pc-primario);
		color: var(--pc-sobre-primario);
	}

		.wrapper.style1 h2,
		.wrapper.style1 header p,
		.wrapper.style1 header.major p {
			color: var(--pc-sobre-primario);
		}

		.wrapper.style1 header.major h2 {
			border-color: color-mix(in srgb, var(--pc-sobre-primario) 30%, transparent);
		}

	.stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5em;
		list-style: none;
		margin: 1em 0 0 0;
		padding: 0;
	}

		.stats li {
			border-top: 3px solid var(--pc-suave);
			padding: 1.25em 0 0 0;
		}

		.stats strong {
			color: var(--pc-sobre-primario);
			display: block;
			font-family: var(--pc-font-title);
			font-size: 3.5em;
			font-weight: 800;
			line-height: 1em;
		}

		.stats span {
			color: var(--pc-suave);
			display: block;
			font-family: var(--pc-font-title);
			font-size: 0.95em;
			font-weight: 700;
			letter-spacing: 0.15em;
			margin-top: 0.5em;
			text-transform: uppercase;
		}

	@media screen and (max-width: 736px) {
		.wrapper.style1 {
			padding-left: 1.5em;
			padding-right: 1.5em;
		}

		.stats {
			grid-template-columns: repeat(2, 1fr);
			gap: 2em 1.5em;
		}

			.stats strong {
				font-size: 2.75em;
			}
	}

/* Etiquetas y chips reutilizables */

	.tag {
		color: var(--pc-primario);
		font-family: var(--pc-font-title);
		font-size: 0.95em;
		font-weight: 700;
		letter-spacing: 0.3em;
		margin: 0 0 0.25em 0;
		text-transform: uppercase;
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.chips li {
			background: color-mix(in srgb, var(--pc-texto) 8%, transparent);
			border-radius: 999px;
			color: var(--pc-texto);
			font-size: 0.85em;
			font-weight: 600;
			padding: 0.3em 1em;
		}

/* Sedes (spotlights claros) */

	#sedes {
		background-color: var(--pc-claro);
		color: var(--pc-texto-2);
	}

		#sedes h2 {
			color: var(--pc-texto);
			font-size: 4em;
			line-height: 1em;
			margin-bottom: 0.35em;
		}

		#sedes .spotlight {
			align-items: stretch;
		}

			#sedes .spotlight:nth-child(1) {
				background-color: var(--pc-claro);
			}

			#sedes .spotlight:nth-child(2) {
				background-color: var(--pc-suave);
			}

			#sedes .spotlight .image img {
				height: 100%;
				object-fit: cover;
			}

			#sedes .spotlight .content {
				align-self: center;
				padding: 4em 4em 2em 4em;
			}

		#sedes .button:not(.primary),
		#academia .button:not(.primary) {
			box-shadow: inset 0 0 0 2px var(--pc-texto);
			color: var(--pc-texto);
		}

			#sedes .button:not(.primary):hover,
			#academia .button:not(.primary):hover {
				background-color: color-mix(in srgb, var(--pc-texto) 8%, transparent);
			}

		@media screen and (max-width: 980px) {
			#sedes .spotlight .image img {
				height: 22em;
			}

			#sedes .spotlight .content {
				padding: 3em 2em 1.5em 2em;
			}

			#sedes .chips {
				justify-content: center;
			}
		}

		@media screen and (max-width: 736px) {
			#sedes h2 {
				font-size: 3em;
			}

			#sedes .spotlight .image img {
				height: 15em;
			}

			#sedes .spotlight .content {
				padding: 2.5em 1.5em 1em 1.5em;
			}
		}

/* Amenities (style3) */

	.wrapper.style3 {
		background-color: var(--pc-oscuro);
		color: var(--pc-sobre-oscuro-2);
	}

		.wrapper.style3 header p,
		.wrapper.style3 header.major p {
			color: var(--pc-sobre-oscuro-2);
		}

		.wrapper.style3 header.major h2 {
			border-color: color-mix(in srgb, var(--pc-sobre-oscuro) 20%, transparent);
		}

	#amenities .inner {
		width: 72em;
		max-width: 100%;
	}

	#amenities .features {
		display: grid;
		gap: 1em;
		grid-template-columns: repeat(3, 1fr);
	}

		#amenities .features li,
		#amenities .features li:nth-child(n) {
			background-color: color-mix(in srgb, var(--pc-sobre-oscuro) 4%, transparent);
			border: 1px solid color-mix(in srgb, var(--pc-acento) 18%, transparent);
			border-radius: 10px;
			padding: 2em 1.75em 0.75em 4.75em;
			width: auto;
		}

			#amenities .features li:before {
				color: var(--pc-acento);
				font-size: 1.5em;
				left: 1.1em;
				top: 1.3em;
			}

			#amenities .features h3 {
				font-size: 1.2em;
			}

			#amenities .features p {
				font-size: 0.95em;
				margin-bottom: 1.25em;
			}

	/* Revelado progresivo (lo activa padelcenter.js; sin JS se ven todas) */

	.revelar-activo > li {
		opacity: 0;
		transform: translateY(28px) scale(0.97);
		transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

		.revelar-activo > li.visible {
			opacity: 1;
			transform: none;
		}

	.badge {
		background: var(--pc-acento);
		border-radius: 999px;
		color: var(--pc-oscuro);
		display: inline-block;
		font-family: var(--pc-font-body);
		font-size: 0.55em;
		font-weight: 600;
		letter-spacing: 0.08em;
		line-height: 1;
		margin-left: 0.4em;
		padding: 0.45em 0.8em;
		vertical-align: middle;
	}

	@media screen and (max-width: 980px) {
		#amenities .features {
			grid-template-columns: repeat(2, 1fr);
		}

			#amenities .features li:nth-child(n) {
				padding: 2em 1.5em 0.5em 1.5em;
			}

				#amenities .features li:before {
					left: 0;
					margin-bottom: 0.6em;
					top: 0;
				}
	}

	@media screen and (max-width: 736px) {
		#amenities {
			padding-left: 1em;
			padding-right: 1em;
		}

		#amenities .features {
			gap: 0.75em;
			grid-template-columns: 1fr;
		}

			#amenities .features li:nth-child(n) {
				background-color: color-mix(in srgb, var(--pc-sobre-oscuro) 4%, transparent) !important;
				border: 1px solid color-mix(in srgb, var(--pc-acento) 18%, transparent);
				padding: 1.5em 1.25em 0.25em 4em;
				text-align: left;
			}

				#amenities .features li:before {
					left: 0.85em;
					margin: 0;
					position: absolute;
					top: 1.05em;
				}
	}

/* Academia (style5) */

	.wrapper.style5 {
		background-color: var(--pc-claro);
		color: var(--pc-texto-2);
	}

		.wrapper.style5 h2,
		.wrapper.style5 h3,
		.wrapper.style5 strong {
			color: var(--pc-texto);
		}

	#academia .inner {
		width: 72em;
		max-width: 100%;
	}

	.academia-intro {
		align-items: center;
		display: grid;
		gap: 3.5em;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 3em;
	}

		.academia-intro .image,
		.academia-intro .image img {
			border-radius: 12px;
			width: 100%;
		}

		.academia-intro .image img {
			aspect-ratio: 4 / 3;
			object-fit: cover;
		}

	/* Rotador: las fotos se apilan y se cruzan con un fundido */

	.rotador {
		aspect-ratio: 4 / 3;
		background: var(--pc-oscuro);
		overflow: hidden;
	}

		.rotador img,
		.academia-intro .rotador img {
			height: 100%;
			left: 0;
			object-fit: cover;
			object-position: center 35%;
			opacity: 0;
			position: absolute;
			top: 0;
			transition: opacity 1s ease;
			width: 100%;
		}

			.rotador img.activa {
				opacity: 1;
			}

		.academia-intro h2 {
			font-size: 3em;
			line-height: 1em;
			margin-bottom: 0.4em;
		}

		/* El logo se pinta con el color de texto del tema: la imagen queda
		   invisible (da tamaño y alt) y el color sale de la máscara. */
		.academia-intro h2.academia-logo {
			-webkit-mask: url("../../images/logo-p4academy.png") no-repeat left top / contain;
			mask: url("../../images/logo-p4academy.png") no-repeat left top / contain;
			background-color: var(--pc-texto);
			font-size: 1em;
			margin-bottom: 1.5em;
			width: 9em;
		}

			.academia-intro h2.academia-logo img {
				display: block;
				height: auto;
				opacity: 0;
				width: 100%;
			}

	.horario {
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.horario li {
			color: var(--pc-texto);
			font-weight: 600;
			padding: 0.35em 0;
		}

			.horario .icon {
				color: var(--pc-primario);
				display: inline-block;
				margin-right: 0.5em;
				text-align: center;
				width: 1.25em;
			}

	.cards {
		display: grid;
		gap: 1em;
		grid-template-columns: repeat(3, 1fr);
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.cards li {
			background: var(--pc-tarjeta);
			border: 1px solid color-mix(in srgb, var(--pc-texto) 8%, transparent);
			border-radius: 12px;
			padding: 2em 1.75em 0.5em 1.75em;
		}

			.cards li > .icon {
				background: var(--pc-suave);
				border-radius: 10px;
				color: var(--pc-primario);
				display: inline-block;
				font-size: 1.2em;
				height: 2.4em;
				line-height: 2.4em;
				margin-bottom: 1em;
				text-align: center;
				width: 2.4em;
			}

			.cards li p {
				margin-bottom: 1.5em;
			}

		.cards li.destacada {
			background: var(--pc-primario);
			border-color: var(--pc-primario);
			color: var(--pc-sobre-primario);
		}

			.cards li.destacada h3 {
				color: var(--pc-sobre-primario);
			}

			.cards li.destacada > .icon {
				background: color-mix(in srgb, var(--pc-sobre-primario) 15%, transparent);
				color: var(--pc-sobre-primario);
			}

			.cards li.destacada a {
				border-bottom: 0;
				color: var(--pc-sobre-primario);
				display: inline-block;
				font-family: var(--pc-font-title);
				font-weight: 700;
				letter-spacing: 0.08em;
				margin-bottom: 1.5em;
				text-transform: uppercase;
			}

				.cards li.destacada a:hover {
					color: var(--pc-suave);
				}

	@media screen and (max-width: 980px) {
		#academia {
			padding-left: 2em;
			padding-right: 2em;
		}

		.academia-intro {
			gap: 2em;
			grid-template-columns: 1fr;
		}

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

	@media screen and (max-width: 736px) {
		#academia {
			padding-left: 1em;
			padding-right: 1em;
		}

		.academia-intro h2.academia-logo {
			width: 7.5em;
		}
	}

/* Contacto (style4, sobre la foto) */

	#contacto h2 {
		font-size: 2.6em;
		line-height: 1.05em;
	}

	#contacto header p {
		color: var(--pc-sobre-oscuro-2);
	}

	#contacto header p strong {
		color: var(--pc-suave);
		white-space: nowrap;
	}

	.contacto-datos {
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}

		.contacto-datos li {
			padding: 0.25em 0;
		}

			.contacto-datos .icon {
				color: var(--pc-acento);
				display: inline-block;
				margin-right: 0.5em;
				width: 1.25em;
			}

	@media screen and (max-width: 736px) {
		#contacto {
			padding-left: 1.5em;
			padding-right: 1.5em;
		}
	}

/* Footer */

	body.landing #footer,
	body.is-mobile.landing #footer,
	#footer {
		background-color: var(--pc-oscuro-2);
	}

	.footer-logo {
		margin-bottom: 1.5em;
	}

		.footer-logo img {
			height: 5.5em;
			max-width: 100%;
			width: auto;
		}

	#footer .icons a,
	#footer .copyright {
		color: color-mix(in srgb, var(--pc-sobre-oscuro) 55%, transparent);
	}

		#footer .copyright li {
			border-left-color: color-mix(in srgb, var(--pc-sobre-oscuro) 40%, transparent);
		}

	#footer .icons a:hover {
		color: var(--pc-acento);
	}

/* WhatsApp flotante */

	.wsp-float {
		align-items: center;
		background: #25d366;
		border: 0;
		border-radius: 50%;
		bottom: 16px;
		box-shadow: 0 4px 14px color-mix(in srgb, var(--pc-oscuro-2) 35%, transparent);
		color: #ffffff;
		display: flex;
		font-size: 1.6em;
		height: 2.4em;
		justify-content: center;
		position: fixed;
		right: 1.25em;
		transition: background-color 0.2s ease, transform 0.2s ease;
		width: 2.4em;
		z-index: 9999;
	}

		.wsp-float:hover {
			background: #1ebe57;
			color: #ffffff;
			transform: translateY(-2px);
		}

		.wsp-float .icon:before {
			line-height: 1;
		}

	body.is-menu-visible .wsp-float {
		display: none;
	}

	@media screen and (max-width: 736px) {
		.wsp-float {
			bottom: 1em;
		}
	}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}