/*
Theme Name: Xcape39 Theme
Description: Gutenberg-first theme for Xcape39 motorbike rental with booking-focused UX
Author: Xcape39
Template: hello-elementor
Version: 1.0.0
Text Domain: xcape-theme
License: GNU General Public License v3 or later.
Tags: gutenberg, responsive, booking, rental, accessibility
*/

/* Fuentes autoalojadas en /fonts. No se usa el CDN de Google: además de sumar
   una conexión externa, servir Google Fonts desde la UE arrastra problemas de
   RGPD. font-display:swap evita el texto invisible mientras cargan. */
@font-face {
	font-family: 'Barlow';
	src: url('fonts/barlow-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fonts/barlow-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('fonts/barlow-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url('fonts/barlow-condensed-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/*
	 * Paleta. El turquesa #1eaaaa y el carbón salen del logotipo: son marca y no
	 * se tocan. #35d6d2 es el mismo turquesa aclarado para fondos oscuros, donde
	 * el original no llega a contraste AA.
	 *
	 * Los fondos claros son arena cálida (#f2eee7), no blanco: integran la
	 * fotografía de atardecer en lugar de recortarla, y quitan el aire de
	 * plantilla que da el blanco puro.
	 */
	--xcape-color-accent: #1eaaaa;
	--xcape-color-accent-dark: #17807f;
	--xcape-color-accent-bright: #35d6d2;
	--xcape-color-accent-light: #d6efee;

	--xcape-color-ink: #131615;
	--xcape-color-ink-soft: #1e2322;
	--xcape-color-ink-line: #2f3634;

	--xcape-color-text-primary: #131615;
	--xcape-color-text-secondary: #6e6862;
	--xcape-color-on-dark: #efe9df;
	--xcape-color-on-dark-muted: #a7a19a;

	--xcape-color-bg-light: #f2eee7;
	--xcape-color-bg-sand: #e7e1d6;
	--xcape-color-bg-white: #ffffff;
	--xcape-color-border: #d8d0c2;

	/* Alias heredados, para no romper reglas que aún los usan. */
	--xcape-color-secondary: var(--xcape-color-ink);
	--xcape-color-secondary-light: var(--xcape-color-bg-sand);

	/* Semánticos (estado), independientes del acento de marca */
	--xcape-color-success: #10b981;
	--xcape-color-warning: #f59e0b;
	--xcape-color-error: #ef4444;

	/* Type Scale */
	--xcape-type-xs: 0.75rem;
	--xcape-type-sm: 0.875rem;
	--xcape-type-base: 1.0625rem;
	--xcape-type-lg: 1.125rem;
	--xcape-type-xl: 1.5rem;
	--xcape-type-2xl: 1.875rem;
	--xcape-type-3xl: 2.25rem;
	--xcape-type-4xl: 3rem;

	/* Medidas compartidas por las secciones */
	--xcape-gutter: clamp(1.25rem, 5vw, 5rem);
	--xcape-wide: 82rem;

	/* Spacing System */
	--xcape-space-xs: 0.5rem;
	--xcape-space-sm: 1rem;
	--xcape-space-md: 1.5rem;
	--xcape-space-lg: 2rem;
	--xcape-space-xl: 3rem;
	--xcape-space-2xl: 4rem;

	/* Tipografía. Barlow nace de la señalética de carretera: encaja con una
	   marca cuyo logotipo lleva una carretera dentro de la X. La condensada
	   se reserva a titulares, donde su estrechez da carácter sin restar
	   legibilidad al texto corrido. */
	--xcape-font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
	--xcape-font-body: 'Barlow', system-ui, -apple-system, sans-serif;
	--xcape-font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Motion */
	--xcape-transition-fast: 150ms ease-in-out;
	--xcape-transition-base: 300ms ease-in-out;
	--xcape-transition-slow: 500ms ease-in-out;

	/* Esquinas.
	   Los detalles finos (chips, resaltes) siguen casi rectos; los elementos
	   grandes —botones, tarjetas y fotos— comparten un radio único de 15px,
	   para que el redondeo se lea como una decisión y no como ruido. */
	--xcape-radius-sm: 2px;
	--xcape-radius-md: 2px;
	--xcape-radius-lg: 2px;
	--xcape-radius-button: 15px;
	--xcape-radius-card: 15px;
}

/*
 * Motivo de carretera.
 *
 * La X del logotipo lleva dentro una carretera con línea discontinua. Se
 * reutiliza aquí como divisor sobre los titulares: es un elemento gráfico que
 * sólo puede ser de esta marca.
 */
.xcape-road {
	display: block;
	height: 3px;
	border: 0;
	background-image: repeating-linear-gradient(
		to right,
		var(--xcape-color-accent) 0 28px,
		transparent 28px 52px
	);
}

.xcape-road--short {
	width: 5.5rem;
	margin-bottom: var(--xcape-space-md);
}

/*
 * Sin variante de tema oscuro a propósito.
 *
 * Este diseño se compromete con un único mundo visual —arena cálida, carbón
 * verdoso y turquesa de marca— construido alrededor de la fotografía. Invertir
 * la paleta con prefers-color-scheme convertía el arena en negro y desmontaba
 * justo lo que le da carácter. Si algún día se quiere modo oscuro, hay que
 * diseñarlo, no derivarlo.
 */

/* Reset & Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
 * Red de seguridad contra bloqueos de scroll ajenos.
 *
 * En la ficha de producto (/vehiculos/{slug}) la página deja de poder
 * desplazarse, y no está causado ni por el CSS del motor de reserva ni por el
 * de este tema: revisados ambos, nadie fija overflow ni alturas ahí.
 *
 * Queda la vía de que algún script escriba document.body.style.overflow. Una
 * declaración !important en hoja de autor gana a los estilos en línea que no
 * lo son, así que esto lo neutraliza. La excepción .has-modal-open preserva el
 * bloqueo legítimo del panel de ficha propio.
 *
 * Es una red, no un diagnóstico: si el bloqueo lo causara un elemento fijo
 * cubriendo la pantalla, esto no lo resolvería.
 */
body:not(.has-modal-open) {
	overflow-y: visible !important;
	height: auto !important;
	position: static !important;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--xcape-font-body);
	font-size: var(--xcape-type-base);
	line-height: 1.6;
	color: var(--xcape-color-text-primary);
	background-color: var(--xcape-color-bg-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tipografía. Interlineado muy cerrado y tracking negativo en titulares: es lo
   que da a la condensada su presencia de señal de carretera. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--xcape-font-display);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5rem); margin-bottom: var(--xcape-space-md); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--xcape-space-md); margin-top: var(--xcape-space-xl); }
h3 { font-size: var(--xcape-type-xl); line-height: 1.05; margin-bottom: var(--xcape-space-sm); margin-top: var(--xcape-space-lg); }
h4 { font-size: var(--xcape-type-lg); margin-bottom: var(--xcape-space-sm); }

p {
	margin-bottom: var(--xcape-space-md);
	max-width: 75ch;
}

/* Antetítulo: la línea pequeña en versalitas sobre los titulares del hero. */
.xcape-eyebrow {
	font-family: var(--xcape-font-body);
	font-size: var(--xcape-type-sm);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--xcape-color-accent-dark);
	margin-bottom: var(--xcape-space-sm);
}

a {
	color: var(--xcape-color-accent-dark);
	text-decoration: none;
	transition: color var(--xcape-transition-fast);
}

a:hover {
	color: var(--xcape-color-text-primary);
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--xcape-color-accent);
	outline-offset: 2px;
}

/* Buttons */
.xcape-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--xcape-space-sm) var(--xcape-space-lg);
	font-size: var(--xcape-type-base);
	font-weight: 600;
	border: none;
	border-radius: var(--xcape-radius-button);
	cursor: pointer;
	transition: all var(--xcape-transition-fast);
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
}

.xcape-button:focus-visible {
	outline: 2px solid var(--xcape-color-accent);
	outline-offset: 2px;
}

/* Primario: teal sobre carbón — el mismo emparejamiento del logotipo.
   Texto blanco sobre #1eaaaa daría 2.84:1 y no pasa AA; carbón sobre teal da 4.95:1. */
.xcape-button--primary {
	background-color: var(--xcape-color-accent);
	color: var(--xcape-color-ink);
}

.xcape-button--primary:hover {
	background-color: var(--xcape-color-ink);
	color: var(--xcape-color-accent-bright);
	text-decoration: none;
}

.xcape-button--secondary {
	background-color: transparent;
	color: var(--xcape-color-accent-dark);
	border: 1px solid var(--xcape-color-border);
}

.xcape-button--secondary:hover {
	border-color: var(--xcape-color-accent);
	background-color: var(--xcape-color-bg-white);
	text-decoration: none;
}

/* Container & Layout */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--xcape-space-lg);
}

@media (max-width: 768px) {
	.container {
		padding: 0 var(--xcape-space-md);
	}
}

/* Utilities */
.wp-block-separator {
	margin: var(--xcape-space-xl) 0;
	border: none;
	border-top: 2px solid var(--xcape-color-border);
}

figure {
	margin: 0;
}

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

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 768px) {
	h1 { font-size: var(--xcape-type-2xl); }
	h2 { font-size: var(--xcape-type-xl); }
	h3 { font-size: var(--xcape-type-base); }
}

/*
 * Aparición al hacer scroll.
 *
 * La clase .xcape-reveal la pone js/theme.js, no el HTML: así, sin JavaScript,
 * el contenido se ve tal cual en lugar de quedarse invisible. El retardo sale
 * de --xcape-reveal-step, que el script fija según la posición del elemento en
 * su grupo, para que las rejillas entren escalonadas y no de golpe.
 */
.xcape-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--xcape-reveal-step, 0) * 80ms);
	will-change: opacity, transform;
}

.xcape-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.xcape-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}