/* ==========================================================================
   Can Xiu-Xiu — hoja base del tema
   Fuentes autoalojadas + tokens del design system + estilos base.
   Los tokens son la única fuente de verdad: Elementor debe consumirlos,
   nunca redefinir colores o tipografías a mano.
   ========================================================================== */

/* --- Tipografías autoalojadas (variables, subset latin) ------------------- */
/* Un único fichero por familia cubre todo el rango de pesos. */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens: color -------------------------------------------------------- */

:root {
	/* Paleta base (identidad aprobada) */
	--cx-ivory: #F8F5F0;         /* fondo marfil cálido */
	--cx-ivory-rgb: 248, 245, 240; /* el mismo, para degradados con alfa */
	--cx-brown-900: #4A3A2A;     /* texto principal */
	--cx-brown-600: #6B5A4A;     /* texto secundario */
	--cx-gold: #B08A47;          /* detalles premium */
	--cx-gold-dark: #A8782A;     /* botones */
	--cx-eucalyptus: #7C8B72;    /* verde eucalipto — muy puntual */

	/* Tintes derivados */
	--cx-ivory-deep: #F1EBE1;    /* fondo de sección alterna */
	--cx-sand: #E9E0D2;          /* relleno suave */
	--cx-hairline: #E2D8C8;      /* bordes y filetes */
	--cx-gold-soft: #C7A76C;     /* hover dorado */
	--cx-white: #FFFFFF;
	--cx-wine: #5C1F2E;          /* granate editorial — solo Entrevistas */

	/* Alias semánticos */
	--surface-page: var(--cx-ivory);
	--surface-card: var(--cx-white);
	--surface-alt: var(--cx-ivory-deep);
	--text-title: var(--cx-brown-900);
	--text-body: var(--cx-brown-600);
	--text-accent: var(--cx-gold);
	--text-inverse: var(--cx-white);
	--btn-primary-bg: var(--cx-gold-dark);
	--btn-primary-fg: var(--cx-white);
	--btn-primary-bg-hover: #96691F;
	--border-default: var(--cx-hairline);
	--accent-natural: var(--cx-eucalyptus);
}

/* --- Tokens: tipografía --------------------------------------------------- */

:root {
	--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans: 'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;

	/* Escala */
	--fs-hero: clamp(34px, 4.5vw, 58px);
	--fs-h2: clamp(28px, 3.2vw, 42px);
	--fs-h3: 26px;
	--fs-lead: 19px;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-caption: 12px;

	/* Roles */
	--lh-display: 1.15;
	--lh-body: 1.7;
	--ls-overline: 0.28em;
	--ls-button: 0.14em;
	--fw-display: 500;
	--fw-body: 300;
	--fw-medium: 400;
}

/* --- Tokens: espaciado ---------------------------------------------------- */

:root {
	--sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
	--sp-6: 32px; --sp-7: 48px;  --sp-8: 64px; --sp-9: 96px; --sp-10: 140px;

	--section-y: var(--sp-9);
	--content-max: 1200px;
	--content-narrow: 680px;      /* medida de lectura a una columna */
	--gutter: clamp(20px, 5vw, 64px);
}

/* --- Tokens: efectos ------------------------------------------------------ */

:root {
	--radius-button: 4px;
	--radius-card: 6px;
	--radius-image: 8px;
	--shadow-card: 0 2px 14px rgba(74, 58, 42, 0.07);
	--shadow-card-hover: 0 8px 28px rgba(74, 58, 42, 0.12);
	--ease-brand: cubic-bezier(0.25, 0.6, 0.3, 1);
	--dur-fast: 180ms;
	--dur-slow: 400ms;
	--rule-gold: 1px solid var(--cx-gold-soft);
}

/* --- Base ----------------------------------------------------------------- */

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-body);
	background: var(--surface-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .cx-display {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	color: var(--text-title);
	line-height: var(--lh-display);
	margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }

a {
	color: var(--cx-gold-dark);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-brand);
}
a:hover, a:focus { color: var(--cx-brown-900); }

/* Antecesor de todo: las imágenes nunca desbordan ni provocan saltos. */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Overline: mayúsculas con espaciado amplio, recurso recurrente del diseño. */
.cx-overline {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--text-accent);
	font-weight: var(--fw-medium);
}

/* --- Accesibilidad -------------------------------------------------------- */

/* Enlace «saltar al contenido»: invisible hasta recibir foco por teclado. */
.cx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--sp-3) var(--sp-5);
	background: var(--cx-brown-900);
	color: var(--text-inverse);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
}
.cx-skip-link:focus {
	left: var(--sp-4);
	top: var(--sp-4);
	color: var(--text-inverse);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--cx-gold-dark);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

@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;
	}
}

/* --- Contenedor de reserva ------------------------------------------------ */
/* Solo aplica donde no maqueta Elementor (resultados de búsqueda, 404…). */

.cx-shell {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}
.cx-shell--narrow { max-width: var(--content-narrow); }

/* --- Listados de reserva -------------------------------------------------- */
/* Para archivos y búsqueda, donde no llega Elementor. Las páginas del diseño
   se maquetan en Elementor y no usan nada de esto. */

.cx-archive-head { margin-bottom: var(--sp-8); }

.cx-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-7) var(--sp-6);
}

.cx-card__media {
	display: block;
	margin-bottom: var(--sp-4);
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cx-sand);
}
.cx-card__media img {
	width: 100%;
	transition: transform var(--dur-slow) var(--ease-brand);
}
.cx-card:hover .cx-card__media img { transform: scale(1.03); }

.cx-card__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--sp-2);
}
.cx-card__title a { color: var(--text-title); }
.cx-card__title a:hover { color: var(--cx-gold-dark); }

.cx-card__excerpt {
	font-size: var(--fs-small);
	margin: 0;
}

.pagination {
	margin-top: var(--sp-8);
	display: flex;
	gap: var(--sp-3);
	justify-content: center;
	font-size: var(--fs-small);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
}

/* --- Cabecera y pie de reserva -------------------------------------------- */
/* Se sustituyen en cuanto haya cabecera y pie publicados en Elementor. */

.cx-fallback-header,
.cx-fallback-footer { border-block: 1px solid var(--border-default); }

.cx-fallback-header .cx-shell,
.cx-fallback-footer .cx-shell {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--sp-5);
}

.cx-fallback-header ul,
.cx-fallback-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Botones -------------------------------------------------------------- */
/* Del design system: los usan tanto el tema como los bloques de Elementor. */

.cx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 14px var(--sp-6);
	background: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	border: 1px solid var(--btn-primary-bg);
	border-radius: var(--radius-button);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-brand),
	            border-color var(--dur-fast) var(--ease-brand),
	            color var(--dur-fast) var(--ease-brand);
}
.cx-btn:hover,
.cx-btn:focus {
	background: var(--btn-primary-bg-hover);
	border-color: var(--btn-primary-bg-hover);
	color: var(--btn-primary-fg);
}

/* Fantasma: solo contorno, para la acción secundaria. */
.cx-btn--ghost {
	background: transparent;
	color: var(--cx-brown-900);
	border-color: var(--cx-gold-soft);
}
.cx-btn--ghost:hover,
.cx-btn--ghost:focus {
	background: transparent;
	border-color: var(--cx-gold-dark);
	color: var(--cx-gold-dark);
}

.cx-btn--sm { padding: 10px var(--sp-5); font-size: 11px; }