/* ==========================================================================
   Everom — hoja de estilos principal
   Estructura: reset → tipografía → header (páginas interiores) → contacto →
   footer → reveal. El Home (prototipo de Figma) se estila en stage.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(24px, 5vw, 96px);
}

/* Tipografía ---------------------------------------------------------- */
.h1 { font-size: clamp(36px, 5.5vw, var(--fs-h1)); font-weight: 700; line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2 { font-size: clamp(28px, 4vw, var(--fs-h2)); font-weight: 700; line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h3 { font-size: clamp(22px, 3vw, var(--fs-h3)); font-weight: 700; line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--secondary-foreground); }
.eyebrow {
	display: inline-block;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--accent-2);
	padding: var(--space-pill-y) var(--space-pill-x);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
}
em { font-family: var(--font-serif); font-style: italic; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-sm);
	padding: var(--space-button-y) var(--space-button-x);
	border-radius: var(--radius-pill);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: var(--lh-button);
	background: var(--primary);
	color: var(--primary-foreground);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--accent); transform: translateY(-1px); }

/* Header / nav ---------------------------------------------------------- */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px clamp(24px, 5vw, 96px);
	/* En Figma el fondo es uniforme; aquí el contenido pasa por debajo al hacer scroll. */
	background: linear-gradient(to bottom, var(--hero-bg) 55%, rgba(21, 1, 49, 0));
}
.site-header__logo img { height: 21px; width: auto; }
.site-header__nav { display: flex; gap: 32px; }
.site-header__nav a {
	font-size: 16.8px;
	font-weight: 600;
	color: var(--ink-mid);
	transition: color 0.2s ease;
}
.site-header__nav a:hover { color: var(--accent-2); }
.site-header__burger { display: none; color: var(--burger); }

@media (max-width: 860px) {
	.site-header__burger { display: block; position: relative; z-index: 2; }
	.site-header__nav {
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		gap: 0;
		padding: 8px clamp(24px, 5vw, 96px) 24px;
		background: var(--hero-bg);
		border-bottom: 1px solid var(--border);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.site-header__nav a { padding: 14px 0; font-size: 20px; border-bottom: 1px solid var(--border); }
	.site-header__nav a:last-child { border-bottom: 0; }
	.site-header.is-open .site-header__nav { opacity: 1; visibility: visible; transform: none; }
}


/* Contacto ------------------------------------------------------------------ */
.contacto-section {
	position: relative;
	padding: 140px clamp(24px, 5vw, 96px);
	background: var(--hero-bg);
	text-align: center;
}
.contacto-section__diamond {
	width: 160px;
	height: 160px;
	margin-inline: auto;
}
/* Valores de "Mobile 17" (Figma): campos #964fe1 h42 radio 16, etiquetas Inter
   Medium 14px alineadas a la derecha, botón #360863. Escritorio = mismo layout,
   columnas más anchas (no hay frame de escritorio). */
.contacto-section .h2 {
	margin-top: 24px;
	font-size: clamp(31px, 3.4vw, 48px);
	line-height: 1.3;
	letter-spacing: -0.09px;
	color: var(--form-field);
}
.contacto-section .h2 em { display: block; font-weight: 700; }
.contacto-form {
	max-width: 640px;
	margin: 40px auto 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.contacto-form form { display: flex; flex-direction: column; gap: 14px; }
.cf-row {
	display: grid;
	grid-template-columns: clamp(108px, 22%, 180px) 1fr;
	column-gap: 11px;
	align-items: center;
}
.cf-row label {
	margin: 0;
	text-align: right;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.042px;
	color: var(--ink-bright);
}
.cf-row--textarea { align-items: start; }
.cf-row--textarea label { padding-top: 10px; }
.cf-row--submit { margin-top: 8px; }
/* Turnstile va en la fila del botón, encima de él: en modo "solo si hace
   falta" no ocupa sitio salvo que Cloudflare muestre la casilla. */
.cf-row--submit .wpcf7-turnstile { max-width: 100%; overflow: hidden; }
/* Campo trampa: fuera de la vista y del teclado (no display:none, que algunos bots detectan). */
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-row--submit > * { grid-column: 2; }
.cf-row .wpcf7-form-control-wrap { display: block; }
.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form textarea {
	width: 100%;
	height: 42px;
	padding: 0 var(--space-input-x);
	background: var(--form-field);
	border: 0;
	border-radius: var(--radius-card);
	color: var(--hero-bg);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
}
/* display:block evita el hueco de línea base bajo el textarea (descuadraba el botón). */
.contacto-form textarea { display: block; height: 160px; padding: 12px var(--space-input-x); resize: vertical; }
.contacto-form input:focus-visible,
.contacto-form textarea:focus-visible,
.cf-submit:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cf-submit {
	width: 100%;
	height: 42px;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--form-button);
	color: var(--form-field);
	font-family: var(--font-sans);
	font-size: 13.4px;
	font-weight: 700;
	letter-spacing: -0.04px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.cf-submit:hover { background: var(--brand); }
.contacto-form .wpcf7-spinner { position: absolute; }
.contacto-form .wpcf7-not-valid-tip { color: #ff8a95; font-size: 13px; margin-top: 4px; }
.contacto-form .wpcf7-response-output { margin: 16px 0 0 !important; border-radius: var(--radius-input); color: var(--secondary-foreground); }
.contacto-contact-line { margin-top: 32px; color: var(--muted-foreground); font-size: 14px; }
.contacto-contact-line a { color: var(--accent-2); }

@media (max-width: 860px) {
	.contacto-section { padding-block: 80px; }
}

/* Footer --------------------------------------------------------------------- */
.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--border);
	padding: 48px clamp(24px, 5vw, 96px);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: var(--muted-foreground);
}
.site-footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer__legal a:hover { color: var(--accent-2); }

/* Selector de idioma (cabecera interior y footer; en el Home va en el nav del prototipo) */
.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch a + a::before { content: "/"; margin-right: 4px; opacity: 0.55; }
.lang-switch a:not([aria-current]) { opacity: 0.55; }
.lang-switch a:hover { opacity: 1; }
.site-header__nav .lang-switch a { font-size: inherit; }
@media (max-width: 860px) {
	.site-header__nav .lang-switch { padding: 14px 0; gap: 8px; }
	.site-header__nav .lang-switch a { padding: 0; border: 0; }
}

/* Páginas de texto (legales) ---------------------------------------------- */
body.page:not(.home) { background: var(--hero-bg); }
.text-page {
	padding: 160px clamp(24px, 5vw, 96px) 120px;
}
.text-page__article { max-width: 760px; margin-inline: auto; }
.text-page__title {
	font-size: clamp(36px, 5vw, var(--fs-h2));
	font-weight: 700;
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	color: var(--accent-2);
	margin-bottom: 16px;
}
.text-page__content { color: var(--secondary-foreground); font-size: var(--fs-base); line-height: 1.7; }
.text-page__content > * + * { margin-top: 16px; }
.text-page__content h2 {
	margin-top: 48px;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	font-weight: 700;
	color: var(--foreground);
}
.text-page__content h3 { margin-top: 32px; font-size: 20px; font-weight: 600; color: var(--foreground); }
.text-page__content ul { padding-left: 20px; }
.text-page__content li + li { margin-top: 6px; }
.text-page__content a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.text-page__content strong { color: var(--foreground); font-weight: 600; }
.text-page__content .legal-updated { font-size: 14px; color: var(--muted-foreground); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legal-table th { color: var(--foreground); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
	.text-page { padding-top: 120px; }
}
/* En móvil cada fila de la tabla pasa a ser una ficha (etiquetas en data-label). */
@media (max-width: 600px) {
	.legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
	.legal-table thead { display: none; }
	.legal-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
	.legal-table td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
	.legal-table td::before { content: attr(data-label); color: var(--foreground); font-weight: 600; }
}

/* Aviso de cookies (pieza propia; solo aparece con un ID de GA4 configurado) -- */
.consent {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 1000;
	max-width: 420px;
	width: calc(100% - 32px);
	padding: 20px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	color: var(--secondary-foreground);
	font-size: 14px;
	line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent__text a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.consent__btn {
	padding: 10px 20px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 600;
	background: var(--primary);
	color: var(--primary-foreground);
	border: 1px solid var(--primary);
}
.consent__btn--ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.consent__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--primary-foreground); }
.consent__btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Escritorio: barra compacta centrada (en el Home no tapa el titular ni el párrafo). */
@media (min-width: 861px) {
	.consent {
		left: 50%;
		transform: translateX(-50%);
		max-width: 680px;
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 14px 16px 14px 20px;
	}
	.consent[hidden] { display: none; }
	.consent__actions { margin-top: 0; flex-shrink: 0; }
}

/* Reveal al hacer scroll (IntersectionObserver) ------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

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