/* Componentes compartidos entre bloques de la Farmacia Vía Augusta. */

/* ---- Cabecera fijada (sticky) ---- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

/* ---- Menú: hover en verde principal, sin subrayado ---- */
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:focus,
header.wp-block-template-part .wp-block-navigation a:hover .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-navigation .current-menu-item a {
	color: #86be0b;
	text-decoration: none;
}

/* ---- Secciones fijadas (sin espacio vertical entre bloques) ---- */
.wp-block-fva-hero,
.wp-block-fva-actualidad,
.wp-block-fva-cta-banner,
.wp-block-fva-servicios {
	margin-top: 0;
	margin-bottom: 0;
}

/* Sin espacio entre header → contenido → pie (bloques de primer nivel) */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-site-blocks > main { margin-block: 0; }

/* ---- Botones ---- */
.fva-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	font-family: "Nunito", sans-serif;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1.15;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background 0.15s ease;
	position: relative;
}
.fva-btn:hover { transform: translateY(-2px); color: #fff; }
.fva-btn__icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; display: inline-flex; }
.fva-btn--primary { background: #86be0b; }
.fva-btn--primary:hover { background: #6fa008; }
.fva-btn--dark { background: #1d1d1d; }
.fva-btn--dark:hover { background: #000; }

/* Grupo botón + nota: la nota se sitúa respecto al grupo (no dentro del enlace). */
.fva-btn-group { position: relative; display: flex; }

.fva-btn__note {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: #1d1d1d;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	padding: 0.4rem 0.35rem;
	border-radius: 10px;
	width: max-content;
	max-width: 220px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.fva-btn__note::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: #fff;
}

/* ---- Etiqueta de sección (— SERVICIOS) ---- */
.fva-section-label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: "Nunito", sans-serif;
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #86be0b;
	margin: 0 0 0.75rem;
}
.fva-section-label::before {
	content: "";
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: #86be0b;
}

@media (max-width: 781px) {
	/* Botones apilados a todo el ancho (mismo ancho todos) y contenido centrado. */
	.fva-hero__buttons,
	.fva-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.fva-btn { justify-content: center; }

	/* El bocadillo, a todo el ancho como los botones, justo debajo con el triángulo haciendo de puente;
	   z-index para quedar por encima de la sombra del botón (si no, parece "medio debajo"). */
	.fva-btn-group { flex-direction: column; align-items: stretch; }
	.fva-btn__note {
		position: relative;
		z-index: 2;
		transform: none;
		left: auto;
		width: auto;
		max-width: none;
		margin: 8px 0 0;
	}
}