/*
Theme Name:   ReserVan — Bricks Child
Theme URI:    https://reservan.es/
Description:  Tema hijo de Bricks para ReserVan. Personalizaciones: hreflang x-default (Polylang), seguridad (xmlrpc), tokens de diseño y fuentes locales. No editar el tema padre.
Author:       ReserVan
Template:     bricks
Version:      0.2.0
Text Domain:  bricks-child
*/

/*
 * Estilos personalizados del tema hijo.
 * Los tokens de diseño (colores, tipografía, espaciado) se gestionan en
 * Bricks > Style Manager. Este archivo queda para overrides puntuales
 * que Bricks no cubra.
 */

/* ===========================================================================
 * Correcciones sobre la revisión del cliente (2026-08-04, Carlos)
 * ---------------------------------------------------------------------------
 * 1) Tamaño de texto: Bricks fija el tamaño de fuente raíz en 10px (patrón
 *    62,5%). La maqueta está diseñada en rem sobre 16px, así que todo se veía
 *    a un 62,5% de su tamaño. Se restaura el raíz a 16px para que la tipografía
 *    de la maqueta rinda al tamaño previsto (1rem = 16px). !important porque el
 *    ajuste de Bricks se inyecta después de la hoja del tema.
 * =========================================================================== */
html {
	font-size: 100% !important; /* 16px */
}

/* ---------------------------------------------------------------------------
 * 2) Contraste del logo en la cabecera: la cabecera oscura era translúcida
 *    (96%), así que la imagen del hero se transparentaba y el fondo bajo el
 *    logo no coincidía con el resto de la cabecera. Se deja totalmente opaca.
 * --------------------------------------------------------------------------- */
.site-header--dark {
	background: var(--rv-prussian, #003153);
	backdrop-filter: none;
}

/* ---------------------------------------------------------------------------
 * 3) Cabecera: al restaurar el raíz a 16px, la barra de navegación (logo + 7
 *    enlaces + ES/EN + 2 CTAs) no cabía en una línea y se partía. Se compacta
 *    la navegación (tamaño y separaciones) para que quepa a partir de ~1200px,
 *    manteniendo el texto de contenido a tamaño completo. La navegación un poco
 *    menor que el cuerpo es una convención tipográfica habitual.
 * --------------------------------------------------------------------------- */
.header-inner { gap: var(--rv-space-3); }
.main-nav ul { gap: 1.15rem; }
.main-nav a { font-size: 0.9375rem; white-space: nowrap; }
.header-actions { gap: var(--rv-space-3); }
.header-actions .btn { font-size: 0.9375rem; padding: 0.5rem 0.9rem; white-space: nowrap; }
.lang-switch a { font-size: 0.8125rem; }

/* ---------------------------------------------------------------------------
 * 1b) Logo de la cabecera: el contenedor flex lo estaba comprimiendo a ~38px
 *     de ancho (debía medir ~200px). Al aplastarse, el SVG se distorsionaba y
 *     asomaba su lienzo de fondo — ese era el "fondo distinto" que se veía.
 *     Se fija el ancho natural y se evita que el flex lo encoja o lo deforme.
 *     SOLO EN ESCRITORIO (min-width:768px): sin este límite, esta regla (dos
 *     clases, más específica que el `.logo-img` a secas de maqueta.css) ganaba
 *     también en móvil y anulaba el encogimiento a ~30-32px previsto ahí,
 *     dejando el logo a 202px de ancho en un viewport de 390px — eso empujaba
 *     el conmutador de idioma, el botón de WhatsApp y el propio botón de menú
 *     fuera del viewport (invisibles, sin scroll por `overflow-x:clip`). Carlos,
 *     2026-08-05 (bloqueante): "en la versión móvil no se visualiza el menú de
 *     navegación" — confirmado por iPhone 14: el botón de menú existía en el DOM
 *     pero renderizaba fuera de la pantalla.
 * --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-header .logo { flex-shrink: 0; }
	.site-header .logo-img {
		height: 36px;
		width: auto;
		max-width: none;
		flex-shrink: 0;
		object-fit: contain;
	}
}

/* ---------------------------------------------------------------------------
 * 4) CTAs de sección (revisión de Carlos, 2026-08-04): los grupos de botones
 *    que cierran una sección (flota, cómo funciona) quedaban pegados y alineados
 *    a la izquierda, con lo que parecían "colgar" de la primera columna en vez de
 *    ser una llamada a la acción de toda la sección. En la conversión, además, se
 *    perdió su margen superior. Se centran y se les devuelve el aire.
 *    Los CTAs del hero y del bloque final NO se ven afectados (van en otros
 *    contenedores, no como hijos directos de .container).
 * --------------------------------------------------------------------------- */
.container > .btn-group {
	margin-top: var(--rv-space-6);
	justify-content: center;
}

/* Se restauran también estilos en línea que la conversión no conservó */
.pillar-ico { color: var(--rv-champagne); }

/* ---------------------------------------------------------------------------
 * 5) Barra fija móvil (.sticky-bar) tapa el CTA de WhatsApp del hero en pantallas
 *    bajas: en la maqueta un <script> por IntersectionObserver la ocultaba según
 *    el scroll (mirando #presupuesto/#cta-final/footer/banner de cookies), pero
 *    el conversor descarta <script> del origen (solo traduce estructura), así
 *    que en el sitio construido la barra queda siempre visible y, en viewports
 *    de poca altura, se solapa con el botón de WhatsApp del propio hero.
 *    Carlos, 2026-08-04: "Iconos se sobreponen al texto".
 *    Mitigación CSS: ocultar la barra en viewports bajos (donde se da el
 *    choque) y dar al CTA del hero un margen inferior de seguridad en todo
 *    móvil. Pendiente-real: reintroducir el comportamiento de scroll con un
 *    script propio del tema, ver 08_client_comms para seguimiento.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 700px) {
	.sticky-bar { display: none !important; }
}
@media (max-width: 767px) {
	.hero .btn-group,
	.hero--split .btn-group {
		margin-bottom: calc(var(--rv-space-3) + 76px);
	}
}

/* ---------------------------------------------------------------------------
 * 6) Cabecera fija durante la navegación: la maqueta pone `position:sticky` en
 *    `.site-header`, pero ese elemento es un DESCENDIENTE de `#brx-header`, que
 *    es el hijo flex directo de `<body>` (Bricks pone `body{display:flex;
 *    flex-direction:column}` para poder anclar el pie abajo). Comprobado en el
 *    propio navegador: aplicar sticky a `.site-header` no ancla nada (se
 *    desplaza 1:1 con el scroll); aplicarlo al envoltorio `#brx-header` sí
 *    funciona. Carlos, 2026-08-04 (xlsx HOME-01): "comportamiento fijo header
 *    sticky, para que el menú sea visible durante la navegación".
 * --------------------------------------------------------------------------- */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 900;
	/* Sin fondo propio, `#brx-header` era transparente (el color navy vive en
	 * `.site-header`, su hijo). Carlos, 2026-08-05: "se observa una línea o
	 * franja blanca sobre el logo" en iPhone 14 — no reproducible en Chromium
	 * (WebKit no se pudo instalar en este entorno para confirmar visualmente,
	 * ver nota en 08_client_comms), pero es la firma clásica de un fallo de
	 * Safari con `position:sticky`: un margen de redondeo de subpíxel entre el
	 * envoltorio con scroll y su hijo puede dejar ver, por una fracción de
	 * píxel, el fondo de `<body>` (marfil `--rv-ivory`, no blanco puro, pero
	 * se percibe como "blanco") justo en el borde superior — donde está el
	 * logo. Se iguala el fondo del envoltorio al de la cabecera para que, si
	 * ese hueco existe, muestre navy en vez de marfil.
	 */
	background: var(--rv-prussian, #003153);
}

/* ---------------------------------------------------------------------------
 * 7) Proporción del logo en móvil: a 30px de alto quedaba muy pequeño junto a
 *    los botones ES/EN y WhatsApp, que miden 44px. Carlos, 2026-08-05: "la
 *    proporción de tamaños de logo vs (ES/EN) y Whatsapp debe corregirse".
 *    Se sube a 38px (más cerca del tamaño de esos botones, sin llegar a
 *    igualarlo — sigue siendo el elemento secundario del grupo) y se fuerza
 *    `object-fit:contain` en todos los anchos: en móvil ningún otro selector
 *    lo fijaba, así que el navegador usaba el valor inicial (`fill`), que
 *    ESTIRA el gráfico para rellenar la caja en vez de conservar su
 *    proporción real — con `width:auto` normalmente no se nota, pero al
 *    encogerse por flex junto a los otros botones sí podía deformarse.
 *    Probado en el propio sitio a 390px tras el cambio: cabecera sin
 *    desbordamiento, botón de menú dentro del viewport.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.site-header .logo-img {
		height: 38px;
		object-fit: contain;
	}
}