/* ==========================================================================
   P7 · Cabecera (.vf-header, parts/header.html) y pie (.vf-footer, parts/footer.html)
   Medidas del original (header#header, footer.footer, .footer-kit-digital) a 1440 y 390 px.
   Breakpoint del menú hamburguesa: ≤992px, como el original (también el alto 70px de --vf-header-h).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenido bajo la cabecera fija.
   Portada: la cabecera se superpone al hero, como el original (en móvil el hueco de 70px
   ya lo pone 00-sliders-cabecera.css en .vf-s00). Páginas interiores (legales, entradas):
   se compensa siempre el alto de la cabecera.
   -------------------------------------------------------------------------- */
body:not(.home) .wp-site-blocks {
	padding-top: var(--vf-header-h, 82px);
}

/* --------------------------------------------------------------------------
   Cabecera fija
   -------------------------------------------------------------------------- */
.vf-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 9999;
	box-sizing: border-box;
	height: var(--vf-header-h, 82px);
	margin: 0 !important;
	padding: 8px 31px;              /* header 8px 16px + .container 0 15px */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--bubbler-one);
	font-size: 20px;
	line-height: 26px;
	transition: padding-top .3s, padding-bottom .3s;
}

.vf-header > * {
	margin-block: 0;
}

/* En el editor, que no tape el lienzo */
.vf-header.block-editor-block-list__block {
	position: relative;
	top: auto;
}

/* Logo de texto (.main-logo > .logo-text) */
/* Si falta sitio (993–1070px) el logo se parte en dos líneas y el menú no, como el original */
.vf-header .vf-header__logo {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 16px 0 10px;
	padding: 0;
	font-size: 26px;
	line-height: 26px;
	color: var(--wp--preset--color--base);
}

.vf-header .vf-header__logo a {
	color: inherit;
	text-decoration: none;
	transition: color .3s;
}

.vf-header .vf-header__logo a:hover,
.vf-header .vf-header__logo a:focus {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

/* Navegación (core/navigation). Ojo: WP repite .vf-header__nav en el <ul>, por eso nav.vf-header__nav */
.vf-header nav.vf-header__nav {
	margin-left: auto;
	gap: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 26px;
	color: var(--wp--preset--color--base);
}

.vf-header nav.vf-header__nav,
.vf-header .vf-header__social.wp-block-social-links {
	flex-shrink: 0;
}

.vf-header .wp-block-navigation__responsive-container-content {
	gap: 0;
	flex-wrap: nowrap;
	align-items: center;
}

.vf-header ul.wp-block-navigation__container {
	gap: 0;
	flex-wrap: nowrap;
	align-items: center;
}

.vf-header .wp-block-navigation-item {
	color: var(--wp--preset--color--base);
	transition: color .4s;
}

.vf-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	padding: 20px 14px;
	font-size: 14px;
	font-weight: 700;               /* Bubbler One solo tiene 400: negrita sintética, como el original */
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: color .4s;
}

.vf-header .wp-block-navigation-item:hover,
.vf-header .wp-block-navigation-item:focus-within,
.vf-header .wp-block-navigation-item.vf-is-active {
	color: var(--wp--preset--color--secondary);
}

/* Botón CONTACTO (vf-btn--nav, definido en style.css) */
.vf-header .vf-header__cta {
	flex: 0 0 auto;
	gap: 0;
	margin: 0 10px 0 24px;
}

/* style.css aplica .vf-btn--nav también al envoltorio .wp-block-button (padding y fondo dobles): se neutraliza */
.vf-header .vf-header__cta .wp-block-button.vf-btn--nav,
.vf-header .vf-header__cta .wp-block-button.vf-btn--nav:hover {
	padding: 0;
	border-radius: 0;
	background: none;
	transition: none;
}

.vf-header .vf-header__cta .wp-block-button__link {
	border: 1px solid transparent;  /* 42px de alto, como el original */
	white-space: nowrap;
}

/* Redes (LinkedIn, Instagram): iconos blancos de 16px en cajas de 25px */
.vf-header .vf-header__social.wp-block-social-links {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 5px;
	margin: 0 0 0 15px;
	padding: 0;
	font-size: 16px;
}

.vf-header .vf-header__social.wp-block-social-links .wp-social-link {
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--base);
	transition: color .3s;
}

.vf-header .vf-header__social.wp-block-social-links .wp-social-link:hover {
	color: var(--wp--preset--color--secondary);
	transform: none;
}

.vf-header .vf-header__social.wp-block-social-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	padding: 0;
	color: inherit;
}

.vf-header .vf-header__social.wp-block-social-links .wp-social-link svg {
	width: 17px;
	height: 17px;
}

/* LinkedIn: el original usa el glifo «in» sin recuadro (fa-linkedin), no el logo cuadrado de WP */
.vf-header .vf-header__social.wp-block-social-links .wp-social-link-linkedin svg {
	display: none;
}

.vf-header .vf-header__social.wp-block-social-links .wp-social-link-linkedin a::before {
	content: "";
	display: block;
	width: 14px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Ccircle cx='54' cy='108' r='54'/%3E%3Crect x='7' y='160' width='95' height='288'/%3E%3Cpath d='M141 160h92v42c13-24 44-50 91-50c97 0 124 64 124 147v149h-96V316c0-35-1-80-49-80c-49 0-56 38-56 77v135H141z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Ccircle cx='54' cy='108' r='54'/%3E%3Crect x='7' y='160' width='95' height='288'/%3E%3Cpath d='M141 160h92v42c13-24 44-50 91-50c97 0 124 64 124 147v149h-96V316c0-35-1-80-49-80c-49 0-56 38-56 77v135H141z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Botón hamburguesa (fa-bars de 30px: 26.25 x 30) */
.vf-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38.25px;
	height: 52px;
	padding: 1px 6px;
	color: var(--wp--preset--color--base);
}

.vf-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.vf-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 26.25px;
	height: 30px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Crect y='60' width='448' height='72' rx='16'/%3E%3Crect y='220' width='448' height='72' rx='16'/%3E%3Crect y='380' width='448' height='72' rx='16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Crect y='60' width='448' height='72' rx='16'/%3E%3Crect y='220' width='448' height='72' rx='16'/%3E%3Crect y='380' width='448' height='72' rx='16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.vf-header .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* El cierre del panel se hace con la propia hamburguesa (como el original); el botón X de WP queda
   accesible solo para teclado/lectores de pantalla. */
.vf-header .wp-block-navigation__responsive-container-close {
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.vf-header .wp-block-navigation__responsive-container-close:focus-visible {
	width: auto;
	height: auto;
	top: 10px;
	right: 15px;
	clip-path: none;
	overflow: visible;
	outline: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   ≤992px: cabecera de 70px, logo 20px y menú hamburguesa con panel a pantalla completa
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.vf-header {
		padding: 8px 15px;
	}

	.vf-header .vf-header__logo {
		font-size: 20px;
	}

	/* Orden móvil: logo · redes · hamburguesa */
	.vf-header .vf-header__social.wp-block-social-links {
		order: 2;
		margin: 0 15px 0 auto;
	}

	.vf-header nav.vf-header__nav {
		order: 3;
		margin-left: 0;
	}

	/* core/navigation colapsa a 600px: aquí se fuerza a 992px */
	.vf-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vf-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Panel abierto: bajo la cabecera, fondo primary, enlaces centrados en vertical */
	.vf-header .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--vf-header-h, 70px) + var(--wp-admin--admin-bar--height, 0px));
		padding: 0;
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
		animation-duration: .4s;
	}

	html.has-modal-open .vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		max-width: none;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1 0 auto;
		justify-content: center;
		align-items: stretch;
		padding: 0;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		align-items: flex-start;   /* 769–992px: alineado a la izquierda, como el original */
		padding: 0 15px;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: inline-block;
		padding: 10px 0;
		font-weight: 600;
	}

	.vf-header .wp-block-navigation__responsive-container.is-menu-open .vf-header__cta {
		justify-content: flex-start;
		margin: 0 0 0 39px;        /* li padding 15px + margin 24px */
	}
}

@media (max-width: 768px) {
	.vf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		align-items: center;
	}

	/* margen derecho de 10px del botón (.btn del original): queda 5px a la izquierda del centro */
	.vf-header .wp-block-navigation__responsive-container.is-menu-open .vf-header__cta {
		justify-content: center;
		margin: 20px 10px 0 0;
	}
}

/* --------------------------------------------------------------------------
   Pie: franja legal (fondo primary, 12px, blanco) + franja Kit Digital (logos obligatorios)
   -------------------------------------------------------------------------- */
.vf-footer {
	--vf-kit-bg: #e8eaee;           /* fondo de .footer-kit-digital del original */
	--vf-kit-text: #0c0c0c;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--bubbler-one);
}

.vf-footer > * {
	margin-block: 0;
}

.vf-footer .vf-footer__main {
	padding-top: 25px;
	padding-bottom: 30px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	line-height: 26px;
	text-align: center;
}

.vf-footer .vf-footer__row {
	gap: 0;
	align-items: flex-start;
	padding-bottom: 15px;
}

.vf-footer .vf-footer__legal {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 26px;
}

.vf-footer .vf-footer__legal > li {
	margin: 0;
	padding: 0 3px;
}

.vf-footer .vf-footer__legal a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.vf-footer .vf-footer__legal a:hover,
.vf-footer .vf-footer__legal a:focus {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.vf-footer .vf-footer__copy {
	margin: 0;
	font-size: 12px;
	line-height: 26px;
}

/* ≤992px el original apila: enlaces legales y debajo el copyright centrado */
@media (max-width: 992px) {
	.vf-footer .vf-footer__row {
		display: block;
	}
}

/* Franja Kit Digital */
.vf-footer .vf-footer__kit {
	background-color: var(--vf-kit-bg);
	color: var(--vf-kit-text);
	font-size: 12px;
	line-height: 26px;
}

.vf-footer .vf-footer__kit .vf-footer__kit-text {
	margin: 0;
	padding: 35px 0 10px;
	font-size: 10px;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
	text-transform: uppercase;
}

.vf-footer .vf-footer__kit .vf-footer__kit-logos {
	margin-block: 0;
	padding: 16px 0;
	row-gap: 0;
}

.vf-footer .vf-footer__kit-logos .wp-block-image {
	margin: 0;
	padding: 8px 0;
	text-align: center;
	font-size: 12px;
	line-height: 26px;
}

.vf-footer .vf-footer__kit-logos .wp-block-image img {
	display: inline;
	vertical-align: baseline;      /* hueco de línea del <img> inline del original */
	width: 100%;
	max-width: 230px;
	height: auto;
}

.vf-footer .vf-footer__kit-logos .wp-block-column:last-child .wp-block-image img {
	max-width: 250px;
}

/* col-md-6: dos columnas desde 768px (WP apila hasta 781px) */
@media (min-width: 768px) and (max-width: 781px) {
	.vf-footer .vf-footer__kit .vf-footer__kit-logos {
		flex-wrap: nowrap !important;
	}

	.vf-footer .vf-footer__kit .vf-footer__kit-logos > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}
