/*
Theme Name: Bodega Child
Theme URI: https://cliente-321.test/
Description: Child theme de Bodega para Raison Villaseñor — fork mantenido internamente. Aplica hardening de seguridad, optimización CWV/SEO y overrides específicos del cliente. No se actualiza desde Qode/Select Themes (tema padre adoptado).
Author: LUNAmkt
Author URI: https://lunamkt.com/
Template: bodega
Version: 1.0.0
Text Domain: bodega-child
*/

/* ==========================================================================
   Overrides de cliente — agregar reglas específicas debajo
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía display — Fraunces (variable serif, eje optical-size)
   Aplicada a todos los headings de cara al usuario; body queda en Open Sans
   (carga del padre). Si Fraunces no carga (offline / Google Fonts caído),
   degrada a Georgia → serif del sistema.
   -------------------------------------------------------------------------- */
:root {
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-ui:      "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--brand-navy:   #1a3358; /* navy de la marca — ajustar si difiere del exacto */
}

h1, h2, h3,
.qode-pl-title,
.title_subtitle_holder h1,
.title_subtitle_holder h2,
.qodef-portfolio-title,
.vc_custom_heading h1,
.vc_custom_heading h2,
.vc_custom_heading h3 {
	font-family: var(--font-display) !important;
	font-optical-sizing: auto;
	letter-spacing: -0.005em !important;
	font-weight: 500;
}

h1 { font-variation-settings: "opsz" 96; }
h2 { font-variation-settings: "opsz" 72; }
h3 { font-variation-settings: "opsz" 36; }

/* Listas y body se quedan en Open Sans del padre — sin override */

/* --------------------------------------------------------------------------
   Header bottom — fondo navy en TODOS los estados (default + sticky + scrolled).
   Bodega tiene reglas con mayor especificidad y !important que ponen bg blanco
   al hacer scroll (`header.sticky .header_bottom { bg:#fff !important }`).
   Para vencerlas, igualamos especificidad agregando `header.sticky` y
   `header.scrolled` como ancestros — y como nuestro CSS carga después del
   padre, el último gana en empate.
   -------------------------------------------------------------------------- */
.header_bottom,
header.stick .header_bottom,
header.sticky .header_bottom,
header.scrolled .header_bottom {
	background-color: var(--brand-navy) !important;
}

/* También sumamos `not_transparent` y `scrolled_not_transparent` que es la
   clase real que aplica Bodega al hacer scroll en headers transparent-default. */
header.not_transparent .header_bottom,
header.scrolled_not_transparent .header_bottom,
header.stick.not_transparent .header_bottom {
	background-color: var(--brand-navy) !important;
}

/* Logo en estados sticky/scrolled — Bodega muestra `.sticky` u oculta otros.
   Forzamos visibilidad y opacidad para que siempre se vea el SVG. */
header.sticky .q_logo img.sticky,
header.scrolled .q_logo img.sticky,
header.not_transparent .q_logo img.normal {
	opacity: 1 !important;
	visibility: visible !important;
}

/* MENÚ — el texto vive dentro de `<span class="item_inner">`, no en el `<a>`.
   Bodega aplica color/font directo al .item_inner, así que ahí debe ir
   nuestro override. Iconos del menú via .qode_icon_font_awesome también. */
.qode_icon_font_awesome {
	color: #ffffff !important;
}

#menu-main_menu .item_inner,
.menu-item .item_inner,
nav.main_menu .menu-item > a {
	font-family: var(--font-ui) !important;
	font-weight: 500 !important;
	font-size: 17px !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* Hover y activo — el texto SE MANTIENE blanco + línea blanca debajo */
#menu-main_menu .menu-item > a:hover .item_inner,
#menu-main_menu .menu-item > a:focus .item_inner,
#menu-main_menu .menu-item.current-menu-item > a .item_inner,
#menu-main_menu .menu-item.current_page_item > a .item_inner,
#menu-main_menu .menu-item.current-menu-ancestor > a .item_inner,
.menu-item > a:hover .item_inner,
.menu-item.current-menu-item > a .item_inner {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-decoration-color: #ffffff !important;
	text-underline-offset: 6px !important;
	text-decoration-thickness: 2px !important;
}

/* Sub-menu items (dropdowns desktop) — un pelo más chicos */
.sub-menu .menu-item > a,
nav.main_menu ul ul .menu-item > a {
	font-size: 15px !important;
}

/* Mobile menu — los items mantienen DM Sans 16px blanco con borde sutil.
   La regla `.menu-item > a` arriba ya cubre tipografía+color, sólo ajustamos size */
.mobile_menu .menu-item > a {
	font-size: 16px !important;
	padding: 14px 24px !important;
}

/* --------------------------------------------------------------------------
   Menú principal — DM Sans 17px, blanco. SIN pill bg (lo lleva el header).
   Hover y activo: blanco + underline para contrastar sobre el navy.
   -------------------------------------------------------------------------- */
nav.main_menu > ul,
nav.main_menu > ul > li,
nav.main_menu > ul > li > a {
	font-family: var(--font-ui) !important;
	font-weight: 500 !important;
	font-size: 17px !important;
	letter-spacing: 0.01em !important;
	color: #ffffff !important;
}

nav.main_menu > ul > li > a:hover,
nav.main_menu > ul > li.current-menu-item > a,
nav.main_menu > ul > li.current_page_item > a {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 6px !important;
	text-decoration-thickness: 2px !important;
}

/* Submenús (dropdown) — heredan tipografía + bg propio para que se vean
   sobre el header navy aunque desplieguen abajo. */
nav.main_menu ul ul {
	background-color: var(--brand-navy) !important;
}

nav.main_menu ul ul li a {
	font-family: var(--font-ui) !important;
	font-size: 15px !important;
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Mobile menu (hamburger expandido) — bg navy + texto blanco DM Sans
   El padre tiene `.mobile_menu { background-color: #fff }` con borders gris.
   Si dejamos texto blanco sobre bg blanco, los ítems desaparecen.
   Cambiamos bg a navy para mantener consistencia con el header.
   -------------------------------------------------------------------------- */
.mobile_menu {
	background-color: var(--brand-navy) !important;
}

.mobile_menu ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.mobile_menu ul,
.mobile_menu ul li,
.mobile_menu ul li a,
nav.mobile_menu ul li a {
	font-family: var(--font-ui) !important;
	font-size: 16px !important;
	color: #ffffff !important;
	background-color: transparent !important;
}

.mobile_menu ul li a:hover,
.mobile_menu ul li.current-menu-item > a,
.mobile_menu ul li.current_page_item > a {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
}

/* Sub-items del mobile menu (cuando se expanden) */
.mobile_menu ul ul {
	background-color: rgba(0, 0, 0, 0.15) !important;
}

.mobile_menu ul li span.mobile_arrow i {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Footer — DM Sans para todo el texto + headings (CONTACTO, MENÚ, etc.)
   Override de la display Fraunces en h4 sólo dentro de footer.
   -------------------------------------------------------------------------- */
footer,
footer p,
footer a,
footer span,
footer li,
footer .widget,
footer .widget_text,
footer .widget_nav_menu {
	font-family: var(--font-ui) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
	font-family: var(--font-ui) !important;
	font-variation-settings: normal !important; /* anular opsz de Fraunces */
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
}

/* Quita el italic heredado del CSS del padre / shortcodes WPBakery del
   widget de footer column2 (texto contacto + horarios). */
footer .widget,
footer .widget_text,
footer .textwidget,
footer .textwidget p,
footer .textwidget span,
footer .luna-copy-footer,
footer .luna-copy-footer span {
	font-style: normal !important;
}

/* Iconos sociales del footer en NEGRO (estado normal).
   Mi regla anterior `.qode_icon_font_awesome { color: #fff !important }` era
   demasiado amplia y volvía blancos los iconos del footer (que viven dentro
   de círculos blancos → invisibles). Scope al footer y restauramos #000. */
footer .qode_icon_font_awesome,
footer .q_icon_shade .qode_icon_font_awesome,
footer .q_icon_shortcode .qode_icon_font_awesome {
	color: #000 !important;
}

/* --------------------------------------------------------------------------
   Logo — respetamos el sistema de centrado vertical del padre y sólo
   intervenimos lo mínimo necesario.
   El padre Bodega centra el logo así:
     .logo_wrapper { height: 100px; float: left }   ← contenedor con altura fija
     .q_logo      { position: relative; top: 50% }  ← se mueve al centro vertical
     .q_logo img  { position: absolute; top: -50% } ← se sube media altura propia
   Resultado: logo centrado vertical automático. NO TOCAMOS eso.

   Sólo necesitamos:
   1. Ocultar las 4 variantes que el padre alterna según estado del header
      (light/sticky/dark/popup/mobile) y mostrar siempre .normal.
   2. Forzar dimensiones EXPLÍCITAS al SVG (height/width en px) — el SVG
      original lleva `width="100%" height="100%"` que sin contexto numérico
      da 0×0 en Chrome.
   -------------------------------------------------------------------------- */
/* Desktop (>1000px): mostrar SOLO `.normal`, ocultar el resto.
   La variante `.mobile` la guardamos para el breakpoint mobile (más abajo). */
.q_logo a img.light,
.q_logo a img.sticky,
.q_logo a img.dark,
.q_logo a img.popup {
	display: none !important;
}

.q_logo a img.mobile {
	display: none !important; /* default desktop, se invierte en @media abajo */
}

.q_logo a img.normal {
	opacity: 1 !important;
	visibility: visible !important;
	height: 70px !important;
	width: 70px !important;
}

/* Wrappers del logo siempre visibles (vencer cualquier display:none/opacity:0
   del padre dependiente de estado). */
.logo_wrapper,
.q_logo,
.q_logo a {
	visibility: visible !important;
	opacity: 1 !important;
}

.q_logo {
	display: block !important;
}

.q_logo a {
	display: inline-block !important;
}

/* Tablet y mobile (≤1000px): Bodega cambia a layout mobile y la imagen
   relevante es `.mobile`. Invertimos: ocultamos `.normal` y mostramos
   `.mobile` con dimensiones explícitas. */
@media (max-width: 1000px) {
	.q_logo a img.normal {
		display: none !important;
	}
	.q_logo a img.mobile {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: 70px !important;
		width: 70px !important;
	}
}

/* Header mobile aparte (cuando Bodega usa wrapper `.qode_mobile_header`) */
.qode_mobile_header .mobile_logo img,
header .mobile_logo img {
	height: 70px !important;
	width: 70px !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* Footer logo — sin halo. El logo (PNG o SVG) ya trae su propio círculo
   navy con elementos blancos que contrastan sobre el footer navy.
   Sólo limitamos el ancho máximo para que no se desborde del column1. */
footer .widget_text img[src*="logo"],
footer .widget_text img[src*="RV-Logo"],
.footer_top img[src*="logo"],
.footer_top img[src*="RV-Logo"] {
	max-width: 180px;
	height: auto;
}

/* --------------------------------------------------------------------------
   Botón "back to top" centrado vertical, lado derecho del viewport
   Por defecto Bodega lo pega a bottom-right; lo subimos a 50% vertical.
   Mantengo la transición existente del padre.
   -------------------------------------------------------------------------- */
#back_to_top.right,
a#back_to_top {
	position: fixed !important;
	right: 25px !important;
	top: 50% !important;
	bottom: auto !important;
	left: auto !important;
	transform: translateY(-50%) !important;
}

@media (max-width: 768px) {
	#back_to_top.right,
	a#back_to_top {
		right: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Footer — 3 columnas (col1 ancho doble, col2/3 mismo ancho)
   El wrapper queda como `.four_columns` por la opción del tema, pero sólo
   hay 3 columnas con contenido (col1=logo+firma, col2=contacto, col3=menú).
   Convertimos a CSS Grid sobreescribiendo los floats/widths de Bodega.

   Breakpoints:
     ≥768px  → fila horizontal: 2fr | 1fr | 1fr
     <768px  → col1 full-width arriba, col2/3 lado a lado abajo
     <480px  → todo apilado vertical
   -------------------------------------------------------------------------- */
footer .four_columns {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr !important;
	gap: 40px !important;
	align-items: start !important;
	float: none !important;
}

/* Neutralizar pseudo-elementos del .clearfix — cuando el padre es grid,
   `::before` y `::after` con `content: " "` se vuelven grid items extra
   y rompen el layout (los empujan a celdas vacías). */
footer .four_columns::before,
footer .four_columns::after {
	display: none !important;
	content: none !important;
}

footer .four_columns > .qode_column,
footer .four_columns > .qode_column.column1,
footer .four_columns > .qode_column.column2,
footer .four_columns > .qode_column.column3 {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border-left: none !important; /* override `.qode_column { border-left:1px solid #444 }` del padre */
}

/* El padre define paddings asimétricos en `> .columnN > .column_inner`
   (15px-r en col1, 10px-l/5px-r en col2, etc.) — los neutralizamos para
   que el `gap: 40px` del grid sea quien controle separación uniforme. */
footer .four_columns > .qode_column > .column_inner {
	padding: 0 !important;
}

/* Tablet pequeña / mobile: col1 full width arriba, cols 2-3 lado a lado */
@media (max-width: 767px) {
	footer .four_columns {
		grid-template-columns: 1fr 1fr !important;
		gap: 30px !important;
	}
	footer .four_columns > .qode_column.column1 {
		grid-column: 1 / -1 !important;
	}
}

/* Mobile muy chico: todo apilado vertical */
@media (max-width: 479px) {
	footer .four_columns {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	footer .four_columns > .qode_column.column1 {
		grid-column: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Páginas legales (Aviso de privacidad, Términos, etc.)
   Bodega aplica uppercase + tamaños gigantes a H2/H3 que sirven para hero,
   pero arruinan la lectura en contenido legal denso. Estas reglas devuelven
   ritmo tipográfico, separación entre secciones y respiran las listas.
   Scoped al body class `.privacy-policy` que WordPress añade automáticamente
   a la página designada como "Política de privacidad" en Ajustes → Privacidad.
   -------------------------------------------------------------------------- */

.privacy-policy h2 {
	margin-top: 2.4em !important;
	margin-bottom: 0.7em !important;
	font-size: clamp(1.45rem, 1.15rem + 1vw, 1.85rem) !important;
	line-height: 1.25 !important;
	letter-spacing: 0.02em !important;
}

.privacy-policy h2:first-of-type {
	margin-top: 0.6em !important;
}

.privacy-policy h3 {
	margin-top: 1.7em !important;
	margin-bottom: 0.5em !important;
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem) !important;
	line-height: 1.3 !important;
	font-style: italic;
}

.privacy-policy p {
	margin: 0 0 1.1em 0 !important;
	line-height: 1.7 !important;
}

.privacy-policy ul,
.privacy-policy ol {
	margin: 0 0 1.4em 1.6em !important;
	padding-left: 0.4em !important;
}

.privacy-policy ul li,
.privacy-policy ol li {
	margin-bottom: 0.55em !important;
	line-height: 1.6 !important;
}

.privacy-policy ul ul,
.privacy-policy ol ol,
.privacy-policy ul ol,
.privacy-policy ol ul {
	margin-top: 0.4em !important;
	margin-bottom: 0.6em !important;
}

.privacy-policy hr {
	margin: 2em 0 !important;
	border: 0 !important;
	border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.privacy-policy a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.privacy-policy strong {
	font-weight: 600;
}