/*
Theme Name: TEMPLATE X
Author: Erick Munoz
Author URI: http://movisil.com/
Description: PARA CUALQUIER SITIO WEB.
Version: 1.0
*/

/* =====================
   POPPINS — Fuente local
   ===================== */
@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins/poppins/Poppins-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-principal: 'Poppins', sans-serif;

	/* Paleta de colores */
	--color-azul: #005dbe;
	/* Azul principal */
	--color-azul-oscuro: #00498e;
	/* Azul oscuro */
	--color-gris-blanco: #f6f6f6;
	/* Gris claro (fondos) */
	--color-gris-claro: #eaeaea;
	/* Gris muy claro (bordes, fondos suaves) */
	--color-gris: #848484;
	/* Gris medio (textos secundarios) */
	--color-negro: #000000;
	/* Negro */
}

*,
*::after,
*::before {
	margin: 0px;
	padding: 0px;
	box-sizing: inherit;
}

::-webkit-scrollbar {
	width: .9rem;
}

/* Track */
::-webkit-scrollbar-track {
	background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #0057a8;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #252525;
}

html {
	font-size: 62.5%;
	scrollbar-width: thin;
	scrollbar-color: #0057a8 #fff;
}

/* Oculta el scrollbar pero mantiene el scroll funcional */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Edge nuevo, Opera, Brave, Vivaldi, Safari */
}

body {
	box-sizing: border-box;
	font-size: 1.4rem;
	font-family: var(--font-principal);
}

/* Reutilizable */
.fs-1-6-r {
	font-size: 1.6rem !important;
}

.fs-2-6-r {
	font-size: 2.6rem !important;
}

.pt-5 {
	padding-top: 5rem;
}

.pe-6 {
	padding-right: 6rem !important;
}

.justify-text {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	word-break: break-word;
}

.text-color-gray-op {
	color: #96a195 !important;
}

.nav-auth-link {
	color: #96a195;
	transition: color 0.2s ease;
}

.nav-auth-link:hover {
	color: #0057a8 !important;
}

.fw-600 {
	font-weight: 600;
}

/* Header */
/* TOP BAR */
.top-bar {
	background-color: #f7f7f7;
	color: var(--color-gris);
	font-size: 1rem;
}

.top-bar a {
	color: var(--color-gris);
	text-decoration: none;
}

/* Separador vertical entre redes y país */
.top-bar__separator {
	display: block;
	width: 1.5px;
	height: 20px;
	background-color: #d0d5dd;
	flex-shrink: 0;
}

/* País en mayúsculas */
#country-selected-text {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* PROMO */
.top-bar__promo {
	font-size: clamp(0.75rem, 1.5vw, 1rem);
}

/* ICONOS SOCIALES */
.top-bar__social a {
	border-radius: 50%;
	background-color: var(--color-gris);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;

	/* Tamaño responsive */
	width: clamp(2rem, 2.3vw, 2.5rem);
	height: clamp(2rem, 2.3vw, 2.5rem);
	font-size: clamp(.9rem, 1.6vw, 1.5rem);
}

.top-bar__social a svg {
	width: clamp(0.15rem, 1vw, 0.5rem);
	height: clamp(0.15rem, 1vw, 0.5rem);
}

.top-bar__social a:hover {
	transform: scale(1.2);
	background-color: #555;
}

.bottom-bar__social a {
	border-radius: 50%;
	background-color: #fff;
	color: #1e5aa5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	text-decoration-line: none;

	width: clamp(2rem, 2.3vw, 6rem);
	height: clamp(2rem, 2.3vw, 6rem);
	font-size: clamp(.9rem, 1.6vw, 6rem);
}

.bottom-bar__social a svg {
	width: clamp(0.15rem, 1.5vw, 6rem);
	height: clamp(0.15rem, 1.5vw, 6rem);
}

.bottom-bar__social a:hover {
	transform: scale(1.2);
	color: white;
	background-color: var(--color-azul-oscuro);
}

/* PAÍS */
.top-bar__country {
	font-size: 1.6rem;
	color: var(--color-gris);
	white-space: nowrap;
}

.top-bar__country p {
	margin: 0;
	font-size: 1.3rem;
	font-family: var(--font-principal);
	color: var(--color-gris);
	font-weight: 600;
	line-height: 1;
}

.top-bar__country img {
	border-radius: 2px;
	flex-shrink: 0;
}

.top-bar__country-wrap {
	position: relative;
}

/* Botón que muestra el país seleccionado */
.top-bar__country-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: none;
	border-radius: 20px;
	padding: 5px 12px;
	cursor: pointer;
	font-family: var(--font-principal);
	font-size: 1.5rem;
	font-weight: 600;
	color: #838383;
	white-space: nowrap;
	transition: border-color 0.2s;
	min-width: 175px;
	justify-content: space-between;
}

.top-bar__country-icon {
	font-size: 0.7rem;
	color: #838383;
	transition: transform 0.2s;
	margin-left: 2px;
}

.top-bar__country-wrap.open .top-bar__country-icon {
	transform: rotate(180deg);
}

.top-bar__country-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 190px;
	z-index: 9999;
}

.top-bar__country-dropdown li {
	list-style: none !important;
}

.top-bar__country-wrap.open .top-bar__country-dropdown {
	display: block;
}

/* Ítems del dropdown */
.country-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 500;
	color: #444;
	cursor: pointer;
	transition: all 0.15s, color 0.15s;
}

.country-option img {
	flex-shrink: 0;
	border-radius: 2px;
	object-fit: cover;
}

.country-option:hover {
	background: #f0f5ff;
	color: #005dbe;
}

.country-option.active {
	background: #005dbe;
	color: #fff;
	font-weight: 600;
}

.country-option:first-child {
	border-radius: 12px 12px 0 0;
}

.country-option:last-child {
	border-radius: 0 0 12px 12px;
}

/* NAVBAR MEDIO */
.navbar-logo {
	height: 70px;
	width: auto;
	transition: height 0.2s;
	padding-left: 5rem;
}

.navbar-middle {
	background: #fff;
}

.navbar-icon-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
}

.navbar-icon-svg img {
	display: block;
	width: auto;
	height: auto;
	max-width: 30px;
	max-height: 30px;
	object-fit: contain;
}

.navbar-top-row {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
}

.navbar-search {
	justify-content: center;
	align-items: center;
}

.navbar-search .form-control:focus {
	box-shadow: none;
	border-color: #ced4da;
}

.search-wrapper {
	border-radius: 50px;
	height: 3.5rem;
	background: #fff;
	width: 100%;
	max-width: 45rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	background-color: var(--color-gris-claro);
}

.search-brand-btn {
	background: #fff;
	border: none;
	padding: 0 16px;
	font-size: 1.3rem;
	color: #333;
	white-space: nowrap;
	height: 100%;
	cursor: pointer;
	transition: all 0.2s;
}

.search-brand-btn:hover {
	background: #f5f5f5;
}

.search-brand-wrap {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	border-radius: 50px 0 0 50px;
	overflow: hidden;
}

.search-brand-select {
	background: #fff;
	border: none;
	padding: 0 2.8rem 0 1.6rem;
	font-size: 1.5rem;
	color: var(--color-gris);
	font-weight: 600;
	height: 100%;
	cursor: pointer;
	outline: none;
	background-color: var(--color-gris-claro);
	appearance: none;
	-webkit-appearance: none;
	border-radius: 50px 0 0 50px;
}

.search-brand-icon {
	position: absolute;
	right: 1rem;
	pointer-events: none;
	font-size: 0.75rem;
	color: #333;
}

.search-divider {
	width: 1.5px;
	height: 60%;
	background-color: var(--color-azul);
	flex-shrink: 0;
}

.search-input {
	border: none;
	outline: none;
	flex: 1;
	padding: 0 14px;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
	color: #555;
	height: 100%;
	background: var(--color-gris-claro);
	width: auto;
	min-width: 23rem;
	border-radius: 50%;
}

.top-bar__social a svg {
	width: clamp(1.6rem, 1vw, 1.8rem);
	height: clamp(1.6rem, 1vw, 1.8rem);
	display: block;
}

.search-input::placeholder {
	color: #aaa;
}

.search-submit-btn {
	background: var(--color-azul);
	color: #fff;
	border: none;
	padding: 0 28px;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	height: 100%;
	cursor: pointer;
	white-space: nowrap;
	border-radius: 0 50px 50px 0;
	transition: all 0.2s;
	/* Shadow Radial — hover.css */
	position: relative;
	transform: perspective(1px) translateZ(0);
}

.search-submit-btn::before,
.search-submit-btn::after {
	pointer-events: none;
	position: absolute;
	content: '';
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	height: 13px;
	opacity: 0;
	transition: opacity 0.3s;
}

.search-submit-btn::before {
	bottom: 100%;
	background: radial-gradient(ellipse at center 100%,
			rgba(0, 0, 0, 0.38) 0%,
			rgba(0, 0, 0, 0) 70%);
}

.search-submit-btn::after {
	top: 100%;
	background: radial-gradient(ellipse at center 0%,
			rgba(0, 0, 0, 0.38) 0%,
			rgba(0, 0, 0, 0) 70%);
}

.search-submit-btn:hover {
	background: var(--color-azul-oscuro);
}

.search-submit-btn:hover::before,
.search-submit-btn:focus::before,
.search-submit-btn:active::before,
.search-submit-btn:hover::after,
.search-submit-btn:focus::after,
.search-submit-btn:active::after {
	opacity: 1;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

/* NAV SECUNDARIA */
.nav2 {
	background: var(--color-azul);
	display: flex;
	align-items: stretch;
	min-height: 6rem;
	position: sticky;
	top: 0;
	z-index: 1030;
	width: 100%;
	overflow: visible;
}

.nav2--video-bg {
	background: rgba(0, 87, 168, 0.55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.nav2--video-bg .nav2__productos {
	background: transparent;
}

.nav2__productos {
	width: 22%;
	flex-shrink: 0;
	background: var(--color-azul);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 2rem;
}

.nav2__productos-link {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 100%;
	background: transparent;
	color: #fff;
	font-family: var(--font-principal);
	font-size: 2rem;
	font-weight: 700;
	text-decoration: none;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	padding: 1rem 0;
	/* Lento para cuando se QUITA el hover/se cierra el dropdown — la
	   entrada rápida la gana la regla :hover de abajo (por especificidad
	   y orden) mientras el mouse está encima. */
	transition: background 1.5s, color 1.5s;
}

.nav2__productos-link:hover,
#nav2-productos-wrap.open .nav2__productos-link {
	background: #003a72;
	color: #fff;
}

.nav2__productos-link.nav2__productos--inactive {
	pointer-events: none;
	cursor: default;
}

.nav2__productos-link:not(.nav2__productos--inactive) {
	transition: opacity 0.4s, background 1.5s, color 1.5s;
}

.nav2__productos-link:hover {
	transition: background 0.15s, color 0.15s;
}

.nav2__productos-icon {
	font-size: 0.8rem;
	margin-left: 0.6rem;
	transition: transform 0.2s;
}

#nav2-productos-wrap.open .nav2__productos-icon {
	transform: rotate(180deg);
}

/* Dropdown de categorías — diseño hero-sidebar */
.nav2__productos-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 86.5%;
	background: #fff;
	border: 2px solid var(--color-azul);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	list-style: none !important;
	margin: 0 2rem !important;
	padding: 0 !important;
	z-index: 1031;
}

#nav2-productos-wrap.open .nav2__productos-dropdown {
	display: block;
}

.nav2__productos-dropdown li {
	list-style: none !important;
	margin-bottom: 0.3rem;
	padding: 0.8rem 1.5rem;
}

.nav2__productos-dropdown li:first-child {
	padding-top: 2rem;
}

.nav2__cat-option {
	display: block;
	padding: 0.3rem 1.2rem;
	padding-left: 3rem;
	font-family: var(--font-principal);
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--color-azul);
	text-decoration: none;
	border-radius: 25px;
	box-sizing: border-box;
	background: linear-gradient(to right, var(--color-azul) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right center;
	transition: background-position 0.3s ease, color 0.3s ease;
}

.nav2__cat-option:hover {
	background-position: left center;
	color: #fff;
}

.nav2__cat-option--active {
	background-position: left center;
	color: #fff;
	font-weight: 700;
}

/* Resto de ítems */
.nav2__links {
	display: flex;
	align-items: stretch;
	flex: 1;
	overflow: visible;
	position: relative;
	z-index: 1;
}

/* Lista generada por wp_nav_menu */
.nav2__menu {
	display: flex !important;
	align-items: stretch;
	flex: 1;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	overflow: visible;
}

.nav2__menu>.nav-item {
	flex: 1;
	display: flex;
	align-items: stretch;
	list-style: none !important;
	overflow: visible;
}

/* Links — mismo estilo que el antiguo .nav2__item */
.nav2__item,
.nav2__menu>.nav-item>.nav-link {
	color: rgba(255, 255, 255, 0.9) !important;
	text-decoration: none;
	padding: 1rem 0 !important;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 500;
	white-space: nowrap;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	transition: background 1.5s, color 1.5s, border-radius 1.5s;
	border-radius: 50px;
	position: relative;
	overflow: visible;
}



.nav2__menu>.nav-item.current-menu-item>.nav-link,
.nav2__menu>.nav-item.current-page-ancestor>.nav-link {
	color: #fff !important;
	font-weight: 700;
}

.nav2__menu>.nav-item.current-menu-item>.nav-link::after,
.nav2__menu>.nav-item.current-menu-item>.nav-link::before,
.nav2__menu>.nav-item.current-page-ancestor>.nav-link::after,
.nav2__menu>.nav-item.current-page-ancestor>.nav-link::before {
	transform: scaleX(1);
}

.nav2__menu>.nav-item>.nav-link:hover,
.nav2__menu>.nav-item.current-menu-item>.nav-link,
.nav2__menu>.nav-item.current-page-ancestor>.nav-link {
	background: var(--color-azul-oscuro);
	border-radius: 50px;
	color: #fff !important;
	transition: background 0.15s, color 0.15s;
}

body.page-template-page-nosotros-php .nav2__menu>.nav-item.current-menu-item>.nav-link::after,
body.page-template-page-nosotros-php .nav2__menu>.nav-item.current-menu-item>.nav-link::before {
	transform: scaleX(0);
}


/* HERO BODY */
.hero-body {
	display: flex;
	align-items: stretch;
	background: transparent;
	position: relative;
	z-index: 1;
}

/* SIDEBAR CATEGORÍAS */
.hero-sidebar {
	display: flex;
	width: 22%;
	flex-shrink: 0;
	background: #fff;
	margin: 0 0 1rem 0;
	align-items: stretch;
	justify-content: center;
	padding: 0 2rem;
	opacity: 1;
	transition: opacity 0.3s, width 0.3s, padding 0.3s;
	overflow: hidden;
}

.hero-sidebar--hidden {
	opacity: 0;
	width: 0;
	padding: 0;
	pointer-events: none;
}

.hero-sidebar ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
	width: 100%;
	border-left: 2px solid var(--color-azul);
	border-right: 2px solid var(--color-azul);
	border-bottom: 2px solid var(--color-azul);
	border-radius: 0 0 8px 8px;
}

.hero-sidebar li {
	list-style: none !important;
	margin-bottom: 0.3rem;
	padding: .8rem 1.5rem;
	float: none;
	width: 100%;
}

.hero-sidebar li:first-child {
	padding-top: 3rem;
}

.hero-sidebar__cat {
	display: block;
	padding: 0.3rem 1.2rem;
	padding-left: 3rem;
	font-family: var(--font-principal);
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--color-azul);
	text-decoration: none;
	border-radius: 25px;
	box-sizing: border-box;
	background: linear-gradient(to right, var(--color-azul) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right center;
	transition: background-position 0.3s ease, color 0.3s ease;
}

.hero-sidebar__cat:hover {
	background-position: left center;
	color: #fff;
}

.hero-sidebar__cat--active {
	background-position: left center;
	color: #fff;
	font-weight: 700;
}

.home-hero-scope {
	position: relative;
}

.home-hero-video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* HERO CAROUSEL */
.hero-carousel {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	position: relative;
	z-index: 1;
}

.hero-swiper {
	position: relative;
	overflow: hidden;
	height: 90vh;
}

.hero-slide {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

/* Degradado izquierda visible → derecha blanco */
.hero-slide__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
			transparent 0%,
			transparent 38%,
			rgba(255, 255, 255, 0.55) 52%,
			#fff 90%);
	z-index: 1;
}

.hero-slide__content {
	position: relative;
	z-index: 2;
	margin-left: 50%;
	padding-right: 0%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
}

.hero-slide__eyebrow {
	font-family: var(--font-principal);
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-azul);
	letter-spacing: 0.04em;
}

.hero-slide__title {
	font-family: var(--font-principal);
	font-size: clamp(2rem, 3.2vw, 3.6rem);
	font-weight: 600;
	color: #111;
	line-height: 1.1;
	margin: 0;
	padding-bottom: 2rem;
}

/* Botón reutilizable — esquina inferior-derecha cuadrada */
.btn-pill {
	display: inline-block;
	padding: 10px 26px;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border: none;
	cursor: pointer;
	border-radius: 0px 25px 25px 25px;
	transition: all 0.2s, transform 0.2s;
	align-self: flex-start;
}

.btn-pill--blue {
	background: var(--color-azul);
}

.btn-pill--blue:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
	transform: translateY(-2px);
}

.btn-pill--inactive {
	background: var(--color-gris-claro) !important;
	color: var(--color-gris) !important;
	pointer-events: none;
	opacity: 0.55;
	transform: none !important;
	transition: all 0.4s, color 0.4s, opacity 0.4s;
}

.btn-pill--blue.btn-pill--active {
	background: var(--color-azul) !important;
	color: #fff !important;
	pointer-events: auto;
	cursor: pointer;
	opacity: 1;
}

/* Paginación */
.hero-pagination .swiper-pagination-bullet-active {
	background: var(--color-azul);
}


/* SECCIÓN CATEGORÍAS (page-home) */
/* Título angosto y en renglones parejos con ancho máximo (antes era
   "padding: 0 50vh": en celular eso son ~400px de relleno por lado, el
   título medía el doble de la pantalla y el teléfono alejaba el zoom de
   toda la Home). */
.section-categorias__titulo {
	font-size: clamp(2.8rem, 4vw, 4.8rem);
	font-weight: 700;
	color: var(--color-negro);
	max-width: 84rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1.6rem;
	text-wrap: balance;
}

.section-categorias__titulo span {
	color: var(--color-azul);
}

/* Ancho máximo + balance: el texto (editable en la Home) baja de línea
   solo y en renglones parejos, sin tener que poner saltos a mano. */
.section-categorias__desc {
	font-size: 1.6rem;
	color: var(--color-negro);
	line-height: 1.6;
	max-width: 62rem;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

/* CATEGORÍAS — efecto hover expand */
.categorias-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6rem;
	flex-wrap: wrap;
	list-style: none !important;
	margin: 0 !important;
	padding: 3rem 2rem !important;
}

.categorias-list li {
	position: relative;
	list-style: none !important;
	width: 9rem;
	height: 9rem;
	background: var(--color-gris-claro);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	border-radius: 9rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.categorias-list li::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9rem;
	background: linear-gradient(45deg, var(--i), var(--j));
	opacity: 0;
	transition: 0.5s;
}

.categorias-list li::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 100%;
	height: 100%;
	border-radius: 9rem;
	background: linear-gradient(45deg, var(--i), var(--j));
	transition: 0.5s;
	filter: blur(15px);
	z-index: -1;
	opacity: 0;
}

.categorias-list li:hover,

.categorias-list li.cat-activa {
	width: 22rem;
	box-shadow: none;
}

.categorias-list li:hover::before,

.categorias-list li.cat-activa::before {
	opacity: 1;
}

.categorias-list li:hover::after,

.categorias-list li.cat-activa::after {
	opacity: 0.5;
}

.cat-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
	transition-delay: 0.25s;
	z-index: 1;
}

.cat-icon img {
	width: 90%;
	height: 90%;
	object-fit: contain;
	transition: 0.5s;
	transition-delay: 0.25s;
}

.categorias-list li:hover .cat-icon img,

.categorias-list li.cat-activa .cat-icon img {
	transform: scale(0);
	transition-delay: 0s;
}

/* El <a> cubre todo el li para que sea clickeable */
.cat-link {
	position: absolute;
	inset: 0;
	border-radius: 9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.cat-title {
	position: absolute;
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transform: scale(0);
	transition: 0.5s;
	transition-delay: 0s;
	z-index: 1;
	white-space: nowrap;
}

.categorias-list li:hover .cat-title,

.categorias-list li.cat-activa .cat-title {
	transform: scale(1);
	transition-delay: 0.25s;
}

/* SECCIÓN PRODUCTOS (page-home) */
.section-productos {
	background: var(--color-gris-blanco);
}

.section-productos__titulo {
	font-size: clamp(2.8rem, 4vw, 4.8rem);
	font-weight: 600;
	color: #111;
}

.section-productos__titulo strong {
	color: var(--color-azul);
}

/* Tabs */
.productos-tabs {
	display: flex;
	justify-content: center;
	gap: 0;
}

.productos-tab {
	background: none;
	border: none;
	padding: 0.8rem 2rem;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-negro);
	cursor: pointer;
	transition: color 0.15s;
}

.productos-tab:hover {
	color: var(--color-azul);
}

.productos-tab--active {
	color: var(--color-azul);
}

/* Grid */
.productos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	padding-top: 2rem;
}

.producto-wrap {
	position: relative;
	padding-top: 1rem;
}

.producto-card__badge {
	position: absolute;
	top: 0;
	left: 1.2rem;
	background: var(--color-azul);
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.4rem 1.2rem;
	border-radius: 20px;
	white-space: nowrap;
	z-index: 20;
}

/* Tarjeta */
.producto-card {
	background: #fff;
	border-radius: 12px;
	border: 1.5px solid var(--color-gris-claro);
	overflow: hidden;
	position: relative;
	width: 100%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.3s;
}

.producto-card:hover {
	box-shadow: 0 8px 28px rgba(0, 87, 168, 0.18);
}

/* Slides */
.producto-card .slide.slide1 {
	width: 100%;
	transition: transform 0.5s ease;
}

.producto-card:hover .slide.slide1 {
	transform: translateY(-1rem);
}

.producto-card .slide.slide2 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-azul);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.4rem 2rem;
	transform: translateY(100%);
	transition: transform 0.5s ease;
}

.producto-card:hover .slide.slide2 {
	transform: translateY(0);
}

/* La foto llena toda el área (sin padding ni franjas blancas a los lados):
   las fotos son cuadradas con el empaque al centro sobre gris liso, así
   que "cover" solo recorta fondo. */
.producto-card__img {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22rem;
	overflow: hidden;
	background: #f8f9fa;
}

.producto-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* El marcador "sin imagen" no es foto de empaque: se muestra completo */
.producto-card__img img[src$="sin%20imagen.png"] {
	object-fit: contain;
	padding: 2rem 1.5rem;
}

/* Celular/tablet táctil: no hay hover, y el primer toque dejaba la franja
   azul "pegada" encima de la foto. Ahí el nombre va fijo debajo de la
   imagen y la foto no se desplaza. */
@media (hover: none) {
	.producto-card .slide.slide2 {
		position: static;
		transform: none;
	}

	.producto-card:hover .slide.slide1 {
		transform: none;
	}
}

.producto-card__nombre {
	font-family: var(--font-principal);
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	text-align: center;
	margin: 0;
}

.producto-card__nombre small {
	font-weight: 400;
}

/* SECCIÓN BLOG CIENTÍFICO (page-home) */
.seccion-titulo-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--color-azul);
	color: #fff;
	font-family: var(--font-principal);
	font-size: clamp(1.8rem, 2.5vw, 5rem);
	font-weight: 700;
	padding: 1.2rem 6rem;
	border-radius: 0 0 40px 40px;
	min-height: 10rem;
	min-width: 55%;
}

.pill-reversa-wrap,
.pill-titulo-wrap {
	pointer-events: none;
}

.seccion-titulo-pill-reversa {
	display: inline-block;
	font-size: 0;
	line-height: 0;
	background: var(--color-azul);
	border-radius: 40px 40px 0 0;
	min-height: 1.5rem;
	width: 55%;
	margin-bottom: 0;
	padding-bottom: 0;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.blog-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
	box-shadow: 0 13px 10px -7px rgba(0, 0, 0, 0.1);
	max-width: 80%;
	display: flex;
	flex-direction: column;
}

.blog-card-modific-width {
	max-width: 100%;
}

.blog-card:hover {
	box-shadow: 0 30px 18px -8px rgba(0, 0, 0, 0.1);
}

.blog-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Imagen hover — position absolute, misma altura que .blog-card__img */
.blog-card__img-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: height 0.2s ease-out, opacity 0.2s ease-out;
}

.blog-card:hover .blog-card__img-hover {
	height: 100%;
	opacity: 0.7;
}

/* Badge en blog-card */
.blog-card .producto-card__badge {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	z-index: 4;
}

.blog-card__img {
	width: 100%;
	height: 18rem;
	overflow: hidden;
	visibility: hidden;
}

.blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__body {
	background: #fff;
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	flex: 1;
	transition: all 0.25s;
}

.blog-card:hover .blog-card__body {
	color: #000;
	background: #ffffff94;
}

.blog-card:hover .blog-card__body span {
	color: #000;
}

.blog-card:hover .blog-card__body h3 {
	color: var(--color-azul);
}

.blog-card:hover .blog-card__body p {
	color: #000;
}

.blog-card__fecha {
	font-size: 1.2rem;
	color: var(--color-gris);
}

.blog-card__titulo {
	font-size: 1.6rem;
	font-weight: 700;
	color: #111;
	line-height: 1.4;
	margin: 0;
}

.blog-card__desc {
	font-size: 1.3rem;
	color: var(--color-gris);
	line-height: 1.6;
	margin: 0;
}

.blog-card__share {
	display: inline-flex;
	align-items: center;
	background: var(--color-azul);
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.3rem;
	text-decoration: none;
	align-self: flex-start;
	font-weight: 600;
	padding: 0.8rem 1.6rem;
	border-radius: 10px 10px 0 0;
	min-width: 50%;
	margin-top: auto;
	transition: all 0.2s;
}

.blog-card__share i {
	padding-left: 1rem;
	font-size: 1.7rem;
}

.blog-card__share:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
}

/* Blog científico (Home) — SOLO mobile. .blog-card se reutiliza en
   page-blog-cientifico.php con otro diseño, así que todo va anclado a
   .section-blog + el media query para no tocar ni ese template ni el
   look de escritorio de esta misma página. */
@media (max-width: 767px) {
	/* La animación de entrada (AOS fade-left/fade-right) corre las tarjetas
	   ~100px hacia los lados antes de aparecer: en celular se salían de la
	   pantalla y dejaban desplazar la Home de lado. "clip" recorta sin
	   crear un área de scroll propia (no afecta el menú sticky). */
	.section-blog {
		overflow-x: clip;
	}

	.section-blog .blog-card {
		max-width: 85%;
		margin-left: auto;
		margin-right: auto;
	}

	.section-blog .blog-card__img {
		height: 20rem;
	}

	.section-blog .blog-card__img-hover {
		height: 100%;
		opacity: 0.7;
	}

	.section-blog .blog-card:hover {
		box-shadow: 0 30px 18px -8px rgba(0, 0, 0, 0.1);
	}

	/* El padding inferior del body queda como una franja blanquecina
	   entre "Comparte" y la franja azul de Facebook/LinkedIn — se quita
	   para que el botón quede pegado al bloque azul. */
	.section-blog .blog-card__body {
		color: #000;
		background: #ffffff94;
		padding-bottom: 0;
	}

	.section-blog .blog-card__body span,
	.section-blog .blog-card__body h3,
	.section-blog .blog-card__body p {
		color: #000;
	}

	.section-blog .blog-card__front {
		transform: translateY(-5rem);
	}

	.section-blog .blog-card__back-wrap {
		transform: translateY(0);
	}
}

.blog-nav {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.blog-nav__btn {
	width: 4.8rem;
	height: 4rem;
	border-radius: 12px;
	border: none;
	background: var(--color-azul);
	color: #fff;
	font-size: 1.6rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
}

.blog-nav__btn:hover {
	background: var(--color-azul-oscuro);
}

/* FOOTER */

/* Newsletter */
.footer-newsletter {
	background: linear-gradient(135deg, #05294b 0%, #0057a8 100%);
	padding: 1.5rem 0;
}

.footer-newsletter__titulo {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.5rem;
}

.footer-newsletter__sub {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.footer-newsletter__form {
	display: flex;
	height: 4rem;
	border-radius: 4px;
	overflow: hidden;
}

.footer-newsletter__input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0 1.8rem;
	font-size: 1.3rem;
	color: #333;
	background: #fff;
}

.footer-newsletter__input::placeholder {
	color: #aaa;
}

.footer-newsletter__btn {
	background: var(--color-azul-oscuro);
	color: #fff;
	border: none;
	padding: 0 2.8rem;
	font-size: 1.4rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s;
}

.footer-newsletter__btn:hover {
	background: #1447c0;
}

/* Footer principal */
.footer-main {
	background: #f8f9fa;
}

.footer-container {
	padding-left: 10%;
	padding-right: 10%;
}

@media (max-width: 768px) {
	.footer-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.footer-logo {
	height: 70px;
	width: auto;
}

.footer-office-label {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-top: 1.4rem;
	margin-bottom: 0.3rem;
}

.footer-office-label:first-of-type {
	margin-top: 0;
}

.footer-office-text {
	font-size: 1.25rem;
	color: var(--color-gris);
	line-height: 1.5;
	margin-bottom: 0;
}

.footer-heading {
	font-size: 2.7rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 1rem;
}

.footer-col-titulo {
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1.8rem;
}

.footer-col-titulo--rojo {
	color: #e63946;
}

.footer-col-titulo--azul {
	color: #0057a8;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	position: relative;
	padding-bottom: 0.3rem;
	margin-bottom: 0.3rem;
}

.footer-links li::after {
	content: "";
	display: block;
	width: 60%;
	height: 1px;
	background: #e2e5ea;
	position: absolute;
	bottom: 0;
	left: 0;
}

.footer-links li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.footer-links li:last-child::after {
	display: none;
}

.footer-links a {
	color: var(--color-gris);
	text-decoration: none;
	font-size: 1.3rem;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: var(--color-azul-oscuro);
}

/* Links con ícono (columna Información) */
.footer-links--icon li {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer-links--icon li i {
	color: #0057a8;
	font-size: 1.6rem;
	width: 1.8rem;
	text-align: center;
	flex-shrink: 0;
}

/* Contáctanos */
.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	margin-bottom: 1.4rem;
	font-size: 1.3rem;
	color: #444;
}

.footer-contact-icon {
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: #0057a8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.4rem;
	flex-shrink: 0;
}

/* Social strip */
.footer-social-strip {
	background: #fff;
	padding: 1rem 0;
	text-align: center;
	border-top: 1px solid #e9ecef;
}

.footer-social-icon {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: #05294b;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	text-decoration: none;
	transition: all 0.2s, transform 0.2s;
}

.footer-social-icon:hover {
	background: #0057a8;
	color: #fff;
	transform: scale(1.1);
}

.footer-bottom-bar {
	background: #e9ecef;
	padding: 0.8rem 0;
}

.footer-copy {
	font-size: 1.2rem;
	color: #888;
	margin: 0;
}


/* TÍTULO MISIÓN — compartido con Productos */
.titulo-mision {
	font-size: clamp(1.4rem, 3vw, 4rem);
	font-weight: 800;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	margin-top: 1rem;
	padding-bottom: 3rem;
}

.titulo-mision span {
	color: #0057a8;
}

/* Page Home — Carrusel de productos */
.producto-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s;
}

.swiper-slide-active .producto-card {
	box-shadow: 0 12px 40px rgba(0, 87, 168, 0.2);
}

.swiper-slide-active .producto-card__img img {
	transform: scale(1.04);
}

/* Page Productos */
/* SIDEBAR */
.prod-sidebar {
	width: 25%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	padding-right: 2rem;
}

.prod-sidebar__card {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.prod-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem 1.6rem;
	border-bottom: 1px solid #e9ecef;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-azul-oscuro);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.prod-sidebar__toggle {
	color: var(--color-azul-oscuro);
	font-size: 1.2rem;
}

.prod-sidebar__list {
	list-style: none;
	padding: 0.8rem 0;
	margin: 0;
}

.prod-sidebar__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.65rem 1.6rem;
	font-size: 1.3rem;
	color: #333;
	cursor: pointer;
	transition: all 0.15s, color 0.15s;
}

.prod-sidebar__item:hover {
	background: #f0f4ff;
	color: var(--color-azul-oscuro);
}

.prod-sidebar__item--active {
	color: var(--color-azul-oscuro);
	font-weight: 600;
}

.prod-sidebar__item i:first-child {
	color: #aaa;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.prod-sidebar__item--active i:first-child {
	color: var(--color-azul-oscuro);
}

.prod-sidebar__ver-mas {
	display: block;
	padding: 1rem 1.6rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-azul-oscuro);
	text-decoration: none;
	border-top: 1px solid #e9ecef;
	transition: color 0.2s;
}

.prod-sidebar__ver-mas:hover {
	color: #1447c0;
}

/* Checkbox custom */
.prod-check {
	display: flex;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	width: 100%;
	font-size: 1.3rem;
	color: #333;
	user-select: none;
}

.prod-check input[type="checkbox"] {
	display: none;
}

.prod-check__box {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid #aaa;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s;
	background: #fff;
}

.prod-check input:checked~.prod-check__box {
	background: var(--color-azul-oscuro);
	border-color: var(--color-azul-oscuro);
}

.prod-check__box::after {
	content: '';
	width: 0.5rem;
	height: 0.8rem;
	border: 2px solid transparent;
	border-top: none;
	border-left: none;
	transform: rotate(45deg) translateY(-1px);
	display: block;
}

.prod-check input:checked~.prod-check__box::after {
	border-color: #fff;
}

.prod-check input:checked~.prod-check__box+span,
.prod-check:has(input:checked) {
	color: var(--color-azul-oscuro);
	font-weight: 600;
}

/* PAGINACIÓN */
.prod-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 3rem 0 1rem;
}

.prod-pagination__btn {
	width: 3.6rem;
	height: 3.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 1.3rem;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	background: #fff;
	transition: all 0.2s;
}

.prod-pagination__btn:hover {
	background: #f0f4ff;
	border-color: var(--color-azul-oscuro);
	color: var(--color-azul-oscuro);
}

.prod-pagination__btn--active {
	background: var(--color-azul-oscuro);
	border-color: var(--color-azul-oscuro);
	color: #fff;
}

.prod-pagination__btn--active:hover {
	background: #1447c0;
	color: #fff;
}

.prod-pagination__btn--nav {
	color: #555;
	font-size: 1.1rem;
}

/* BUSCADOR PRODUCTOS */
.prod-search {
	display: flex;
	align-items: center;
	background: var(--color-azul-oscuro);
	border-radius: 8px;
	overflow: hidden;
	height: 4.2rem;
	padding-left: 1.4rem;
	border: 1px solid #111;
}

.prod-search__icon {
	color: #fff;
	font-size: 1.5rem;
	flex-shrink: 0;
	margin-right: 1rem;
}

.prod-search__input {
	flex: 1;
	border: none;
	outline: none;
	background: #fff;
	color: #111;
	font-size: 1.4rem;
	height: 100%;
	min-width: 0;
	padding-left: 5px;
	border-left: 1px solid #111;
	border-right: 1px solid #111;
}

.prod-search__input::placeholder {
	color: rgba(46, 45, 45, 0.712);
}

.prod-search__btn {
	background: #1447c0;
	border: none;
	color: #fff;
	height: 100%;
	padding: 0 1.8rem;
	font-size: 1.5rem;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s;
}

.prod-search__btn:hover {
	background: #0e3aa0;
}

/* PRODUCT CARD */
.pcard-link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.pcard-link:hover {
	color: inherit;
}

.pcard {
	position: relative;
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.25s;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pcard:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
}

/* Imagen — altura fija para todas las cards */
/* Proporción 4:3 en vez de alto fijo: así en celular (tarjeta a todo el
   ancho) la foto no queda como un cuadro gris flotando con franjas a los
   lados. Las fotos de producto son cuadradas con el empaque al centro y
   fondo gris liso, así que "cover" solo recorta fondo, nunca el empaque. */
.pcard__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.pcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El marcador "sin imagen" no es foto de empaque: se muestra completo */
.pcard__img img[src$="sin%20imagen.png"] {
	object-fit: contain;
}

.pcard__body {
	padding: 1rem 1.2rem 1.2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.4rem;
}

.pcard__nombre {
	font-size: 1.8rem;
	font-weight: 700;
	color: #111;
	line-height: 1.35;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pcard__molecula {
	font-size: 1.5rem;
	line-height: 1.45;
	min-height: 2.9rem;
	margin: 0;
}

.pcard__desc {
	font-size: 1.3rem;
	color: #777;
	margin: 0;
	line-height: 1.45;
	min-height: 4.35rem;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Precio principal */
.pcard__precio-principal {
	font-size: 1.7rem;
	font-weight: 800;
	color: #111;
	line-height: 1;
	margin-top: auto;
	padding-bottom: 1rem;
}

/* Botón */
.pcard__btn-carrito {
	margin-top: 0;
	background: var(--color-azul);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1rem;
	font-size: 1.3rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s;
}

.pcard__body:not(:has(.pcard__precio-principal)) .pcard__btn-carrito {
	margin-top: auto;
}

.pcard__btn-carrito:hover {
	background: var(--color-azul-oscuro);
}

/* Responsive — Página Productos (mobile) */
@media (max-width: 767px) {
	.temporal {
		flex-direction: column;
		padding-top: 2rem !important;
	}

	.temporal .prod-sidebar {
		width: 100%;
		padding-right: 0;
	}

	.temporal .w-75 {
		width: 100% !important;
		padding: 2rem 1.5rem !important;
	}

	.temporal .mx-5 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.temporal .titulo-mision.fs-2-6-r {
		font-size: 2.1rem !important;
	}

	.temporal #prod-grid.pt-5 {
		padding-top: 2rem !important;
	}

	.prod-search {
		height: 4.6rem;
	}

	.prod-search__input {
		font-size: 1.5rem;
	}

}

/* Page Nosotros */
/* SECCIÓN 1 — Video institucional */
.about-video-wrap {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.about-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 75vh;
	background: #000;
}

.about-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.about-video__label {
	position: absolute;
	right: 2.5rem;
	bottom: 5.5rem;
	color: #111;
	font-family: var(--font-principal);
	font-size: clamp(1.6rem, 2.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

/* SECCIÓN 2 — Timeline + mapa */
.about-timeline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 3rem;
}

.about-infografia__img {
	max-width: 100%;
	height: auto;
	display: block;
}

.about-timeline__col {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	min-width: 0;
}

.about-timeline__item {
	position: relative;
	background: #eef0f2;
	border-radius: 2px;
	padding: 2.2rem 2.4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 13rem;
}

/* Conector: codo horizontal→vertical desde la caja 1, baja hasta el punto medio */
.about-timeline__item--1::after {
	content: '';
	position: absolute;
	top: 25%;
	left: 100%;
	width: 65%;
	height: 6.35rem;
	border-top: 10px solid var(--color-azul);
	border-right: 10px solid var(--color-azul);
}

/* Conector: codo horizontal→vertical desde la caja 2, sube hasta el punto medio */
.about-timeline__item--2::before {
	content: '';
	position: absolute;
	bottom: 25%;
	left: 100%;
	width: 65%;
	height: 6.35rem;
	border-bottom: 10px solid var(--color-azul);
	border-right: 10px solid var(--color-azul);
}

/* Tramo final: del punto medio hacia la caja grande */
.about-timeline__item--1::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 10px;
	height: 3.2rem;
	background: var(--color-azul);
}

.about-timeline__year {
	display: block;
	font-family: var(--font-principal);
	font-size: 2.8rem;
	font-weight: 800;
	color: var(--color-azul);
	margin-bottom: 1.2rem;
}

.about-timeline__item p {
	font-size: 1.4rem;
	color: #222;
	margin: 0;
	line-height: 1.55;
}

.about-map__titulo {
	font-family: var(--font-principal);
	font-size: clamp(2.2rem, 3.5vw, 3.2rem);
	font-weight: 800;
	color: #111;
	margin-bottom: 1.2rem;
}

.about-map__titulo span {
	color: var(--color-azul);
}

.about-map__desc {
	font-size: 1.4rem;
	color: #444;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.about-map__img {
	width: 100%;
	max-width: 55rem;
	height: auto;
	display: block;
}

/* SECCIÓN 3 — Tabs */
.about-tabs {
	display: flex;
}

.about-tab {
	flex: 1;
	background: #fff;
	border: none;
	padding: 1.2rem 1rem 1.5rem;
	margin: 0;
	font-family: var(--font-principal);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-azul);
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
}

.about-tab:hover {
	background: #f0f5ff;
}

.about-tab--active,
.about-tab--active:hover {
	background: var(--color-azul);
	color: #fff;
}

.about-tab-panel {
	display: none;
	position: relative;
	min-height: 90vh;
	background-size: cover;
	background-position: top;
	flex-direction: column;
	justify-content: flex-start;
}

.about-tab-panel--active {
	display: flex;
}

.about-tab-panel__overlay {
	position: absolute;
	inset: 0;
}

.about-tab-panel__inner {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 4rem 0;
	max-width: 1600px; /* más ancho que el .container de Bootstrap, solo aquí */
}

.about-tab-panel__text {
	max-width: 55rem;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.7;
	margin: 0;
	text-align: right;
	padding-right: 5rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}

.about-tab-panel__list {
	max-width: 90rem;
	width: 100%;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 0 2rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem 3rem;
	text-align: left;
}

.about-tab-panel__list li {
	position: relative;
	padding-left: 1.8rem;
	font-size: 1.3rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}

.about-tab-panel__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1rem;
	height: 0.3rem;
	background: #60bc37;
}

.about-tab-panel__list li strong {
	display: block;
	font-size: 1.5rem;
	color: #fff;
	margin-bottom: 0.2rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}

.about-contact-bar {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	margin-top: auto;
}

.about-contact-item {
	flex: 1;
	min-width: 22rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.6rem 3rem;
	background: rgba(5, 41, 75, 0.55);
	color: #fff;
	text-decoration: none;
	transition: background 0.2s;
}

.about-contact-item:hover {
	background: rgba(5, 41, 75, 0.75);
	color: #fff;
}

.about-contact-item img {
	width: 2.4rem;
	height: 2.4rem;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
}

.about-contact-item strong {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
}

.about-contact-item span {
	display: block;
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.8);
}

.about-contact-item--highlight {
	background: var(--color-azul-oscuro);
}

.about-contact-item--highlight:hover {
	background: var(--color-azul);
}

@media (max-width: 767px) {
	.about-timeline {
		grid-template-columns: 1fr;
	}

	.about-timeline__item--1::after,
	.about-timeline__item--2::before,
	.about-timeline__item--3::before {
		display: none;
	}

	.about-timeline__item--3 {
		min-height: 0;
	}

	.about-video__label {
		right: 1.5rem;
		bottom: 4rem;
	}

	.about-tabs {
		flex-wrap: wrap;
	}

	.about-tab {
		flex: 1 1 50%;
		font-size: 1.3rem;
		padding: 1rem 0.6rem 0;
	}

	.about-contact-item {
		min-width: 100%;
	}

	.about-tab-panel__list {
		grid-template-columns: 1fr;
	}
}

/* Page Single Producto */

.sp-page {
	background: #f8f9fa;
}

/* ── HERO ── */
.sp-hero {
	background: #fff;
	padding: 4rem 0 3rem;
}

.sp-hero__inner {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
}

/* ── GRID de la ficha (woocommerce/single-product.php) ──
   2 columnas × 2 filas: imagen+"También en la línea" a la izquierda,
   info+"Farmacias/Atulado" a la derecha. Con CSS Grid cada fila mide lo
   que necesite su celda más alta — así el segundo renglón (el carrusel
   de la izquierda vs. Farmacias/Atulado de la derecha) arranca siempre a
   la misma altura en las dos columnas, sea cual sea el contenido o el
   tamaño de pantalla, sin necesidad de un margen fijo "a ojo".
   (No se reutiliza .sp-hero__inner/.sp-gallery/.sp-details porque
   page-single-producto.php usa esas mismas clases con su propia
   estructura simple — ver CLAUDE.md.) */
.sp-product-grid {
	display: grid;
	grid-template-columns: 58% minmax(0, 1fr);
	column-gap: 3rem;
	row-gap: 1.4rem;
	align-items: start;
}

/* Fila de miniaturas + imagen principal */
.sp-gallery__media {
	display: flex;
	gap: 1rem;
	grid-column: 1;
	grid-row: 1;
}

/* Miniaturas verticales */
.sp-thumbs {
	width: 7rem;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	height: 44rem;
	padding: 0 3px;
}

.sp-thumbs .swiper-wrapper {
	flex-direction: column;
}

.sp-thumb {
	width: 6.5rem;
	height: 7.5rem;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	overflow: hidden;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s;
}

.sp-thumb:hover,
.swiper-slide-thumb-active .sp-thumb {
	border-color: var(--color-azul-oscuro);
}

.sp-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Flechas miniatura */
.sp-thumbs__prev,
.sp-thumbs__next {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: 3rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	cursor: pointer;
	color: #555;
	font-size: 1rem;
	transition: all 0.2s;
}

.sp-thumbs__prev {
	top: 0;
}

.sp-thumbs__next {
	bottom: 0;
}

.sp-thumbs__prev:hover,
.sp-thumbs__next:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
	border-color: var(--color-azul-oscuro);
}

/* Imagen principal */
.sp-main-img {
	flex: 1;
	height: 44rem;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	overflow: hidden;
	background: #f8f9fa;
	position: relative;
}

.sp-main-img .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-main-img img {
	max-width: 100%;
	max-height: 40rem;
	object-fit: contain;
}

/* Flechas de la imagen principal (solo si hay más de 1 imagen) */
.sp-main__prev,
.sp-main__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 3.6rem;
	height: 3.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	cursor: pointer;
	color: #555;
	font-size: 1.2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: all 0.2s;
}

.sp-main__prev { left: 1.2rem; }
.sp-main__next { right: 1.2rem; }

.sp-main__prev:hover,
.sp-main__next:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
	border-color: var(--color-azul-oscuro);
}

.sp-main__prev.swiper-button-disabled,
.sp-main__next.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

/* ── DETALLES ──
   (.sp-details la sigue usando page-single-producto.php con su propia
   estructura simple — no tocar. La ficha de WooCommerce usa las dos de
   abajo, las dos mitades de la columna derecha del grid.) */
.sp-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding-top: 1rem;
	overflow: hidden;
}

.sp-details__top,
.sp-details__bottom {
	grid-column: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	overflow: hidden;
}

.sp-details__top {
	grid-row: 1;
	padding-top: 1rem;
}

.sp-details__bottom {
	grid-row: 2;
}

.sp-details__linea {
	font-size: 1.2rem;
	color: var(--color-azul-oscuro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

/* "Línea: X | Familia: Y" — debajo del título */
.sp-details__meta {
	font-size: 1.3rem;
	color: #6b7280;
	margin: 0.6rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sp-details__meta strong {
	color: #05294b;
	font-weight: 700;
}

.sp-details__meta a {
	text-decoration: none;
}

.sp-details__meta a:hover strong {
	text-decoration: underline;
}

.sp-details__meta-sep {
	color: #d1d5db;
}

/* Checks (Vegano/Sin gluten/etc.) — de momento salen de las etiquetas
   (product_tag) que ya tenga el producto; a refinar cuando definan el
   dato real. */
.sp-details__keys {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin: 1rem 0 0;
	padding: 0;
}

.sp-details__keys li {
	font-size: 1.2rem;
	font-weight: 600;
	color: #16a34a;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sp-details__nombre {
	font-size: clamp(2.8rem, 4vw, 4.5rem);
	font-weight: 800;
	color: #05294b;
	margin: 0;
	line-height: 1.1;
}

.sp-details__nombre sup {
	font-size: 1.8rem;
}

.sp-details__list {
	padding-left: 1.8rem;
	margin: 0;
	color: #444;
	font-size: 1.4rem;
	line-height: 1.9;
}

/* Precio */
.sp-details__precio-wrap {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 0.4rem;
}

.sp-details__precio {
	font-size: 3rem;
	font-weight: 800;
	color: #05294b;
}

/* Botones */
/* Píldoras apiladas — clara arriba (Añadir al carrito), sólida y ancha
   abajo (Comprar Ahora), como la referencia, con los colores del sitio. */
.sp-details__btns {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	width: 100%;
	border: none;
	border-radius: 50px;
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
	padding: 1.2rem 2rem;
	transition: all 0.2s;
	text-decoration: none;
}

.sp-btn--comprar {
	background: var(--color-azul-oscuro);
	color: #fff;
	font-size: 1.4rem;
}

.sp-btn--comprar:hover {
	background: #1447c0;
	color: #fff;
}

.sp-btn--carrito {
	background: #eef1f7;
	color: var(--color-azul-oscuro);
}

.sp-btn--carrito:hover {
	background: #e2e7f0;
}

/* Fila cantidad + Añadir al carrito */
.sp-add-row {
	display: flex;
	gap: 1rem;
}

.sp-add-row .sp-btn--carrito {
	width: auto;
	flex: 1;
}

.sp-qty {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	background: #eef1f7;
	border-radius: 50px;
	padding: 0 0.3rem;
}

.sp-qty__btn {
	background: none;
	border: none;
	width: 3.4rem;
	height: 100%;
	min-height: 3.6rem;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--color-azul-oscuro);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s;
}

.sp-qty__btn:hover {
	color: #1447c0;
}

.sp-qty__btn:disabled {
	color: #b7c0cc;
	cursor: default;
}

.sp-qty__input {
	width: 3rem;
	text-align: center;
	border: none;
	background: none;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-azul-oscuro);
}

.sp-btn--wsp {
	/* width:auto para no heredar el width:100% de .sp-btn (ese es para los
	   botones apilados de Comprar/Añadir) — este va a la par del logo. */
	width: auto;
	background: #25d366;
	color: #fff;
	font-size: 1.3rem;
	padding: 0.8rem 1.6rem;
}

.sp-btn--wsp:hover {
	background: #1eb558;
	color: #fff;
}

.sp-btn--contacto {
	background: #25d366;
	color: #fff;
}

.sp-btn--contacto:hover {
	background: #1eb558;
	color: #fff;
}

/* Farmacias disponibles */
.sp-details__farmacias {
	border-top: 1px solid #e9ecef;
	padding-top: 1.2rem;
}

.sp-details__farmacias-label {
	font-size: 1.2rem;
	color: #888;
	margin-bottom: 1rem;
}

.sp-details__farmacias-logos {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
}

.sp-details__farmacias-logos img {
	height: 3.6rem;
	width: auto;
	object-fit: contain;
	filter: grayscale(30%);
	transition: filter 0.2s;
}

.sp-details__farmacias-logos img:hover {
	filter: grayscale(0%);
}

/* Atulado + WhatsApp */
.sp-details__extra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	flex-wrap: wrap;
}

.sp-details__atulado img {
	height: 4rem;
	width: auto;
}

/* ── CARRUSEL FARMACIAS ── */
.sp-farmacias-strip {
	background: #fff;
	padding: 1.5rem 0;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	overflow: hidden;
	margin-left: 0;
	margin-right: 0;
}

/* Aviso cuando no hay farmacias para el país elegido en el header */
.sp-farmacias-aviso {
	margin: 0;
	padding: 1.2rem 1.6rem;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	font-size: 1.3rem;
	color: var(--color-gris);
}

.sp-farmacias-swiper {
	overflow: hidden;
	width: 100%;
}

/* Ancho fijo por logo — con esto, slidesPerView:'auto' en el JS calcula
   solo cuántos caben en el espacio real (3, 4 o 5), sin desbordarse. */
/* Los logos ya vienen recortados a su contenido en un lienzo de 400×160
   (2.5:1), así que la imagen llena todo el recuadro sin margen extra.
   Siempre 3 a la vez: el ancho de cada slide lo calcula Swiper
   (slidesPerView: 3 en js/script.js), no un ancho fijo aquí. */
.sp-farmacias-swiper .swiper-slide {
	flex-shrink: 0;
}

.sp-farmacia-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
	text-decoration: none;
}

.sp-farmacia-logo img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: contain;
	display: block;
}

/* ── TABS ── */
.sp-tabs-section {
	background: #fff;
	padding: 0 0 5rem;
}

.sp-tabs {
	display: flex;
	border-bottom: 2px solid #e9ecef;
	margin-bottom: 3rem;
}

.sp-tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 1.4rem 2.4rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.sp-tab:hover {
	color: var(--color-azul-oscuro);
}

.sp-tab--active {
	color: #0057a8;
	border-bottom-color: #0057a8;
	font-weight: 700;
}

.sp-tab-content {
	display: none;
	font-size: 1.4rem;
	color: #444;
	line-height: 1.8;
}

.sp-tab-content--active {
	display: block;
}

.sp-tab-content p {
	margin-bottom: 2rem;
}

.sp-tab-content__subtitle {
	font-size: 1.5rem;
	font-weight: 700;
	color: #111;
	margin-bottom: 1rem;
}

.sp-tab-content__list {
	padding-left: 2rem;
	margin-bottom: 2.4rem;
}

.sp-tab-content__list li {
	margin-bottom: 0.6rem;
}

.sp-widgets-section {
	background: #f4f8ff;
	padding: 4rem 0 3rem;
	border-bottom: 1px solid #ccdcf0;
}

.sp-widget+.sp-widget {
	border-left: 1px solid #e9ecef;
}

.sp-widget__title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #05294b;
	padding-bottom: 0.8rem;
	border-bottom: 3px solid #e63946;
	margin-bottom: 0;
}

.sp-widget__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 0.8rem;
	border-bottom: 3px solid rgb(0, 87, 168);
}

.sp-widget__title-row .sp-widget__title {
	border-bottom: none;
	padding-bottom: 0;
}

.sp-widget__title-accent {
	display: inline-block;
	width: 4px;
	height: 1.4em;
	background: #e63946;
	border-radius: 2px;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.sp-widget__title-accent--blue {
	background: var(--color-azul);
}

.sp-events-cal {
	font-size: 1.25rem;
	font-weight: 600;
	color: #555;
	text-decoration: none;
}

.sp-events-cal:hover {
	color: var(--color-azul-oscuro);
}

.sp-events-nav {
	display: flex;
	gap: 0.5rem;
}

.sp-events-nav__btn {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 6px;
	border: 1.5px solid #e0e0e0;
	background: #fff;
	color: #555;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.sp-events-nav__btn:hover {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: #fff;
}

.sp-events-viewport {
	overflow: hidden;
}

.sp-news-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-news-item {
	padding: 1.2rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.sp-news-item:last-child {
	border-bottom: none;
}

.sp-news-item__date {
	display: block;
	font-size: 1.2rem;
	color: #999;
	margin-bottom: 0.3rem;
}

.sp-news-item__link {
	font-size: 1.3rem;
	color: var(--color-azul-oscuro);
	text-decoration: none;
	line-height: 1.4;
	display: block;
}

.sp-news-item__link:hover {
	text-decoration: underline;
}

.sp-events-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-event-item {
	display: flex;
	gap: 1.4rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid #f0f0f0;
	align-items: center;
	transition: background 0.2s;
	border-radius: 8px;
	padding-left: 0.5rem;
}

.sp-event-item:hover {
	background: #f0f5ff;
}

.sp-event-item:last-child {
	border-bottom: none;
}

.sp-event-date {
	flex-shrink: 0;
	width: 5.2rem;
	min-height: 5.8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #fff;
	padding: 0.5rem;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.sp-event-date--blue {
	background: linear-gradient(135deg, var(--color-azul), var(--color-azul-oscuro));
}

.sp-event-date--red {
	background: linear-gradient(135deg, #e63946, #c0392b);
}

.sp-event-date__mon {
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	opacity: 0.9;
}

.sp-event-date__day {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.15;
}

.sp-event-info__title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #05294b;
	text-decoration: none;
	line-height: 1.4;
	display: block;
	transition: color 0.2s;
}

.sp-event-info__title:hover {
	color: var(--color-azul);
}

.sp-event-info__venue {
	font-size: 1.15rem;
	color: #888;
	margin: 0.3rem 0 0;
}

.sp-widget__img {
	width: 100%;
	height: 15rem;
	object-fit: cover;
	object-position: top;
	border-radius: 4px;
	margin-bottom: 1.2rem;
	display: block;
	margin-top: 1.2rem;
}

.sp-widget__desc {
	font-size: 1.3rem;
	color: #444;
	line-height: 1.7;
	margin-top: 1.2rem;
}

.sp-widget__desc a {
	color: var(--color-azul-oscuro);
}

.sp-widget__desc strong {
	color: #111;
}

#section-blog-cientifico {
	background: #f9faff;
}

/* Encabezado de sección blog */
.blog-main-tabs {
	display: flex;
	justify-content: center;
	gap: 1.2rem;
}

#tribe-events-pg-template {
	max-width: 100% !important;
	padding: 0 !important;
}

.blog-main-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 3rem;
	margin-right: 1.3rem;
	border-radius: 50px;
	border: 2px solid #e0e0e0;
	background: #fff;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	transition: all 0.25s;
}

.blog-main-tab:hover {
	border-color: var(--color-azul);
	color: var(--color-azul);
}

.blog-main-tab--active {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: #fff;
}

.blog-main-tab--active:hover {
	background: var(--color-azul-oscuro);
	border-color: var(--color-azul-oscuro);
	color: #fff;
}

.blog-main-tab--calendar {
	padding: 1rem 1.4rem;
	border-radius: 50%;
	text-decoration: none;
}

.blog-main-tab--calendar:hover {
	background: var(--color-azul);
	border-color: var(--color-azul);
	color: #fff;
}

.blog-main-panel {
	display: none;
}

.blog-main-panel--active {
	display: block;
}

.blog-section-header {
	text-align: center;
	margin-bottom: 2rem;
}

.blog-section-header__eyebrow {
	display: inline-block;
	background: #e63946;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0.25rem 1rem;
	border-radius: 3px;
	margin-bottom: 0.8rem;
}

.blog-section-header__title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 800;
	color: #000000;
	margin-bottom: 0.5rem;
}

.blog-section-header__title span {
	color: var(--color-azul);
}

.blog-section-header__sub {
	font-size: 1.3rem;
	color: #666;
	max-width: 550px;
	margin: 0 auto;
}

.blog-featured {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	max-height: 200vh;
	border-left: 4px solid #0057a8;
	border-bottom: 4px solid #0057a8;
}

.blog-featured__img {
	overflow: hidden;
	flex: 1;
	min-height: 0;
}

.blog-featured__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-featured__img--placeholder {
	width: 100%;
	height: 100%;
	background: #e9ecef;
}

.blog-featured__body {
	flex: 1;
	padding: 0.8rem 0 0;
	display: flex;
	flex-direction: column;
}

.blog-featured__title {
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-weight: 700;
	color: #05294b;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: left;
	margin: 0.5rem 0 0.3rem;
}

.blog-featured__excerpt {
	font-size: 1.3rem;
	color: #555;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.blog-tag {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.6rem;
	padding: 0.15rem 0.7rem;
	background: var(--color-azul);
	color: #fff;
}

.blog-tag--blue {
	background: var(--color-azul);
	color: #fff;
}

.blog-tag--red {
	background: #e63946;
	color: #fff;
}

.blog-card__date {
	font-size: 1.1rem;
	color: #888;
	margin: 0 0 0.5rem;
}

.sp-widget__ttle {
	font-weight: 700;
}

.blog-read-more {
	display: inline-block;
	margin-top: auto;
	padding: 0.55rem 1.2rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--color-azul-oscuro), #0057a8);
	border-radius: 50px;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.2s;
}

.blog-read-more:hover {
	opacity: 0.85;
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
}

.blog-filter-bar {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.blog-filter-select-wrap {
	position: relative;
	flex-shrink: 0;
}

.blog-filter-select {
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid #ced4da;
	border-radius: 6px;
	padding: 0 2.8rem 0 1rem;
	font-size: 1.3rem;
	color: #333;
	background: #fff;
	cursor: pointer;
	height: 3.5rem;
}

.blog-filter-select-icon {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #555;
	font-size: 1.1rem;
	pointer-events: none;
}

.blog-filter-search {
	display: flex;
	flex: 1;
	border: 1.5px solid #ced4da;
	border-radius: 6px;
	overflow: hidden;
	height: 3.5rem;
}

.blog-filter-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0 1.2rem;
	font-size: 1.3rem;
	color: #555;
	min-width: 0;
}

.blog-filter-input::placeholder {
	color: #aaa;
}

.blog-filter-btn {
	background: var(--color-azul-oscuro);
	color: #fff;
	border: none;
	padding: 0 2rem;
	font-size: 1.3rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s;
}

.blog-filter-btn:hover {
	background: #1447c0;
}

/* GRID CARDS */
.blog-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.3s;
}


.blog-card__img {
	width: 100%;
	height: 25rem;
	overflow: hidden;
	background: #e9ecef;
	flex-shrink: 0;
}

.blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: #e9ecef;
}

.blog-card__body {
	padding: 0.7rem 1rem;
	padding-bottom: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-card__title {
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 700;
	color: var(--color-azul-oscuro);
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0.4rem 0 0.3rem;
}

.blog-card__excerpt {
	font-size: 1.2rem;
	color: #555;
	line-height: 1.55;
	flex: 1;
	margin-bottom: 0.8rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hover-underline {
	background: none;
	border: none;
	padding: 0.8rem 2rem;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-negro);
	cursor: pointer;
	position: relative;
	display: inline-block;
}

.hover-underline.productos-tab--active {
	color: var(--color-azul);
}

/* BLOG CARD — slide up on hover */
.blog-card__front {
	position: relative;
	z-index: 2;
	transition: transform 0.4s ease;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-card:hover .blog-card__front {
	transform: translateY(-5rem);
}

.blog-card__back-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5rem;
	background: #ffffff94;
	transform: translateY(100%);
	transition: transform 0.4s ease;
	z-index: 10;
}

.blog-card:hover .blog-card__back-wrap {
	transform: translateY(0);
}

.blog-card__back {
	position: absolute;
	bottom: 0;
	left: 1rem;
	width: calc(50% - 1rem);
	height: 120%;
	background: var(--color-azul);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 0.8rem 1.6rem;
}

.blog-share-icon {
	color: #fff;
	font-size: 1.8rem;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s;
	position: relative;
	z-index: 11;
}

.blog-share-icon:hover {
	background: rgba(255, 255, 255, 0.4);
	color: #fff;
}

/* PDF SECTION — Single Producto */
.sp-pdf-section {
	background: #f8f9fa;
	padding: 3rem 0 4rem;
}

.sp-pdf-section__title {
	font-family: var(--font-principal);
	font-size: 2rem;
	font-weight: 700;
	color: #05294b;
	margin-bottom: 2rem;
}

.sp-pdf-section__title i {
	color: #e63946;
	margin-right: 0.8rem;
}

.sp-pdf-card {
	display: flex;
	align-items: center;
	gap: 2rem;
	background: #fff;
	border: 1.5px solid #e9ecef;
	border-radius: 12px;
	padding: 2rem 2.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s;
}

.sp-pdf-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.sp-pdf-card__icon {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #e63946, #c0392b);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 2.4rem;
	flex-shrink: 0;
}

.sp-pdf-card__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.sp-pdf-card__name {
	font-size: 1.5rem;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-pdf-card__label {
	font-size: 1.2rem;
	color: #888;
}

.sp-pdf-card__actions {
	display: flex;
	gap: 1rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.sp-pdf-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1.8rem;
	border-radius: 8px;
	font-size: 1.3rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
}

.sp-pdf-card__btn i {
	font-size: 1.4rem;
}

.sp-pdf-card__btn--view {
	background: #f0f5ff;
	color: var(--color-azul);
	border: 1.5px solid var(--color-azul);
}

.sp-pdf-card__btn--view:hover {
	background: var(--color-azul);
	color: #fff;
}

.sp-pdf-card__btn--download {
	background: var(--color-azul);
	color: #fff;
}

.sp-pdf-card__btn--download:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
}

.sp-pdf-sidebar {
	position: sticky;
	top: 8rem;
}

.sp-pdf-flipbook {
	margin-bottom: 2.5rem;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ── "TAMBIÉN EN LA LÍNEA" (misma Familia, máx. 5) ── */
.sp-match {
	grid-column: 1;
	grid-row: 2;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	padding: 1.4rem 0;
}

.sp-match__titulo {
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 700;
	color: #05294b;
	margin-bottom: 1.2rem;
}

/* Carrusel (antes era una lista estática que se reordenaba sola en cada
   carga por el "orderby=rand" del PHP — con Swiper el orden lo controla
   el usuario con las flechas, no salta solo). */
.sp-match-carousel {
	position: relative;
	padding: 0 2.8rem;
}

.sp-match-swiper {
	overflow: hidden;
}

/* Tarjetas verticales (imagen arriba, texto abajo) — con 3 a la vez
   abarcando todo el ancho, una fila horizontal (imagen+texto lado a lado)
   quedaba demasiado angosta para agrandar la imagen como se pidió. */
.sp-match__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	text-align: center;
}

.sp-match__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	cursor: pointer;
	color: #555;
	font-size: 1.1rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.sp-match__nav--prev { left: 0; }
.sp-match__nav--next { right: 0; }

.sp-match__nav:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
	border-color: var(--color-azul-oscuro);
}

.sp-match__nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

.sp-match__img {
	width: 100%;
	height: 13rem;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid #ececec;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* La foto llena toda la tarjeta (empaque al centro sobre gris liso: "cover"
   solo recorta fondo). El marcador "sin imagen" se muestra completo. */
.sp-match__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-match__img img[src$="sin%20imagen.png"] {
	width: auto;
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}

/* Imagen principal y miniaturas de la ficha (solo la de WooCommerce,
   page-single-producto.php comparte las clases y no se toca): la foto
   llena el recuadro de borde a borde, sin el marco gris alrededor. */
.sp-product-grid .sp-main-img img,
.sp-product-grid .sp-thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.sp-product-grid .sp-main-img img[src$="sin%20imagen.png"],
.sp-product-grid .sp-thumb img[src$="sin%20imagen.png"] {
	object-fit: contain;
}

.sp-match__info {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}

.sp-match__nombre {
	font-size: 1.3rem;
	font-weight: 600;
	color: #05294b;
}

.sp-match__item:hover .sp-match__nombre {
	text-decoration: underline;
}

.sp-match__precio {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-azul-oscuro);
}

.sp-match__precio del {
	font-weight: 400;
	color: #999;
	margin-right: 0.4rem;
	font-size: 1.1rem;
}

.sp-match__precio ins {
	text-decoration: none;
}

/* ── FICHA DE PRODUCTO EN TABLET/CELULAR ──
   Todo en una sola columna: imagen (con miniaturas en fila debajo) → info
   y botones → Farmacias/Atulado → "También en la línea". Va con prefijo
   .sp-product-grid para no tocar page-single-producto.php, que reutiliza
   .sp-thumbs/.sp-main-img con su propia estructura. */
@media (max-width: 991px) {
	.sp-hero {
		padding: 2rem 0 2.5rem;
	}

	.sp-product-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}

	.sp-product-grid .sp-gallery__media {
		flex-direction: column-reverse;
		gap: 1rem;
		min-width: 0;
	}

	/* 4:3 (con tope en tablet) — la foto cuadrada llena el recuadro y
	   "cover" solo recorta un poco de fondo gris arriba y abajo */
	.sp-product-grid .sp-main-img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		max-height: 50rem;
	}

	.sp-product-grid .sp-thumbs {
		width: 100%;
		height: auto;
		padding: 0;
	}

	.sp-product-grid .sp-thumbs .swiper-wrapper {
		flex-direction: row;
	}

	.sp-product-grid .sp-thumb {
		width: 100%;
		height: 7rem;
	}

	/* En fila se navega deslizando; las flechas ↑/↓ no aplican */
	.sp-product-grid .sp-thumbs__prev,
	.sp-product-grid .sp-thumbs__next {
		display: none;
	}

	.sp-product-grid .sp-details__top {
		grid-column: 1;
		grid-row: 2;
		padding-top: 0;
	}

	.sp-product-grid .sp-details__bottom {
		grid-column: 1;
		grid-row: 3;
	}

	.sp-product-grid .sp-match {
		grid-column: 1;
		grid-row: 4;
	}

	/* Pestañas: en vez de una fila que se sale de la pantalla (y que no
	   siempre se deja deslizar), "chips" que bajan a varias líneas — todas
	   quedan visibles y tocables. */
	.sp-tabs {
		flex-wrap: wrap;
		gap: 0.8rem;
		border-bottom: none;
		margin-bottom: 2rem;
	}

	.sp-tab {
		margin-bottom: 0;
		padding: 0.8rem 1.6rem;
		border: 1px solid #dbe3ee;
		border-radius: 50px;
		font-size: 1.3rem;
		background: #fff;
	}

	.sp-tab--active {
		background: #0057a8;
		border-color: #0057a8;
		color: #fff;
	}
}

@media (max-width: 575px) {
	.sp-product-grid .sp-thumb {
		height: 6rem;
	}

	.sp-details__precio {
		font-size: 2.4rem;
	}
}


/* SINGLE POST */
.single-post {
	background: #f9faff;
}

.single-hero {
	position: relative;
	min-height: 45vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

/* El banner toma la proporción de la imagen destacada (--hero-ratio lo pone
   single.php), así se ve completa en vez de recortada a un alto fijo. Si el
   título no cabe (p. ej. en celular), el banner crece solo para el texto. */
.single-hero--proporcion {
	min-height: 0;
	aspect-ratio: var(--hero-ratio);
}

/* Celular: la imagen va completa arriba (ancho 100%, alto según su
   proporción con --hero-inv) y el título debajo sobre azul oscuro. Con la
   proporción apaisada sobre el título, la imagen quedaba muy recortada. */
@media (max-width: 767px) {
	.single-hero--proporcion {
		aspect-ratio: auto;
		background-color: #05294b;
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
		padding-top: calc(var(--hero-inv) * 100vw);
	}

	.single-hero--proporcion .single-hero__overlay {
		background: linear-gradient(to bottom, transparent 0, transparent calc(var(--hero-inv) * 100vw - 4rem), #05294b calc(var(--hero-inv) * 100vw));
	}

	/* .single-hero__inner trae "padding: 4rem 0", que en celular dejaba el
	   título pegado al borde: aquí se le da margen a los lados */
	.single-hero--proporcion .single-hero__inner {
		padding: 1.6rem 1.6rem 3.6rem;
	}
}

.single-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 41, 75, 0.9) 0%, rgba(0, 87, 168, 0.3) 60%, transparent 100%);
}

.single-hero__ribbon {
	position: absolute;
	right: 9rem;
	bottom: -2rem;
	background: var(--color-azul);
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1rem 2.5rem 1rem 3rem;
	z-index: 5;
	border-radius: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.single-hero__ribbon::before {
	content: '';
	position: absolute;
	left: -1.5rem;
	top: 0;
	bottom: 0;
	border-style: solid;
	border-width: 1.85rem 1.5rem;
	border-color: var(--color-azul) var(--color-azul) var(--color-azul) transparent;
}

.single-hero__ribbon::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -1rem;
	border-style: solid;
	border-width: 1rem 1rem 0 0;
	border-color: var(--color-azul-oscuro) transparent transparent transparent;
}

.single-hero__inner {
	position: relative;
	padding: 4rem 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.single-hero__title {
	font-family: var(--font-principal);
	font-size: clamp(2.8rem, 4vw, 4.5rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	margin: 0;
}

.single-hero__meta {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	font-size: 1.3rem;
	color: rgba(255, 255, 255, 0.8);
}

.single-hero__meta i {
	margin-right: 0.5rem;
}

.single-header-noimg {
	margin-bottom: 3rem;
}

.single-header-noimg__title {
	font-family: var(--font-principal);
	font-size: clamp(2.4rem, 3.5vw, 3.8rem);
	font-weight: 800;
	color: #05294b;
	margin: 1rem 0;
	line-height: 1.2;
}

.single-content-section {
	padding: 4rem 0 5rem;
}

.single-back {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-azul);
	text-decoration: none;
	margin-bottom: 2.5rem;
	transition: all 0.2s;
}

.single-back:hover {
	color: var(--color-azul-oscuro);
	transform: translateX(-4px);
}

.single-body {
	font-family: var(--font-principal);
	font-size: 1.5rem;
	color: #333;
	line-height: 1.85;
}

.single-body h2,
.single-body h3,
.single-body h4 {
	color: #05294b;
	font-weight: 700;
	margin: 2.5rem 0 1rem;
}

.single-body h2 {
	font-size: 2.4rem;
}

.single-body h3 {
	font-size: 2rem;
}

.single-body p {
	margin-bottom: 1.6rem;
}

.single-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 2rem auto;
	display: block;
}

.single-body figure,
.single-body .wp-block-image,
.single-body .wp-block-embed,
.single-body .wp-block-video,
.single-body .wp-block-file {
	margin: 2rem auto;
	text-align: center;
}

.single-body iframe {
	display: block;
	margin: 2rem auto;
	max-width: 100%;
	border-radius: 8px;
}

.single-body ul,
.single-body ol {
	padding-left: 2rem;
	margin-bottom: 1.6rem;
}

.single-body li {
	margin-bottom: 0.6rem;
}

.single-body blockquote {
	border-left: 4px solid var(--color-azul);
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	background: #f0f5ff;
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #444;
}

.single-body a {
	color: var(--color-azul);
	text-decoration: underline;
}

.single-share {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 2.5rem 0;
	margin-top: 2rem;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
}

.single-share__label {
	font-size: 1.4rem;
	font-weight: 600;
	color: #05294b;
}

.single-share__icons {
	display: flex;
	gap: 1rem;
}

.single-share__icon {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.6rem;
	text-decoration: none;
	transition: transform 0.2s, opacity 0.2s;
}

.single-share__icon:hover {
	transform: scale(1.1);
	opacity: 0.85;
	color: #fff;
}

.single-share__icon--fb {
	background: #1877f2;
}

.single-share__icon--li {
	background: #0a66c2;
}

.single-share__icon--wa {
	background: #25d366;
}

.single-tags {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	padding: 2rem 0;
}

.single-tag {
	display: inline-block;
	padding: 0.4rem 1.2rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-azul);
	border: 1.5px solid var(--color-azul);
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.2s;
}

.single-tag:hover {
	background: var(--color-azul);
	color: #fff;
}

.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	position: sticky;
	top: 8rem;
}

.single-sidebar__card {
	background: #fff;
	border-radius: 10px;
	padding: 2rem;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

.single-sidebar__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #05294b;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #e9ecef;
}

.single-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-sidebar__item {
	border-bottom: 1px solid #f0f0f0;
}

.single-sidebar__item:last-child {
	border-bottom: none;
}

.single-sidebar__item-link {
	display: flex;
	gap: 1.2rem;
	padding: 1.2rem 0;
	text-decoration: none;
	transition: background 0.2s;
}

.single-sidebar__item-link:hover .single-sidebar__item-title {
	color: var(--color-azul);
}

.single-sidebar__item-img {
	width: 7rem;
	height: 7rem;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.single-sidebar__item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-sidebar__item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.single-sidebar__item-cat {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-azul);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.single-sidebar__item-title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #333;
	line-height: 1.35;
	margin: 0.3rem 0;
	transition: color 0.2s;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.single-sidebar__item-date {
	font-size: 1.1rem;
	color: #999;
}

.single-sidebar__cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-sidebar__cat-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.9rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.single-sidebar__cat-list li:last-child {
	border-bottom: none;
}

.single-sidebar__cat-list a {
	font-size: 1.3rem;
	color: #444;
	text-decoration: none;
	transition: color 0.2s;
}

.single-sidebar__cat-list a:hover {
	color: var(--color-azul);
}

.single-sidebar__cat-count {
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	background: var(--color-azul);
	border-radius: 12px;
	padding: 0.15rem 0.8rem;
	min-width: 2.4rem;
	text-align: center;
}

/* SINGLE EVENT */
.single-event-page {
	background: #f9faff;
}

.se-hero {
	position: relative;
	min-height: 40vh;
	background-size: cover;
	background-position: center;
	background-color: #05294b;
	display: flex;
	align-items: flex-end;
}

.se-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 41, 75, 0.92) 0%, rgba(0, 87, 168, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.se-hero__inner {
	position: relative;
	padding: 4rem 0;
	display: flex;
	gap: 2.5rem;
	margin-left: 5rem;
	align-items: flex-end;
}

.se-hero__date-badge {
	flex-shrink: 0;
	width: 9rem;
	min-height: 10rem;
	background: #fff;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.se-hero__date-mon {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-azul);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.se-hero__date-day {
	font-size: 3.6rem;
	font-weight: 800;
	color: #05294b;
	line-height: 1.1;
}

.se-hero__date-year {
	font-size: 1.1rem;
	font-weight: 600;
	color: #888;
}

.se-hero__text {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.se-hero__title {
	font-family: var(--font-principal);
	font-size: clamp(2.4rem, 3.5vw, 4rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	margin: 0;
}

.se-hero__meta {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	font-size: 1.3rem;
	color: rgba(255, 255, 255, 0.85);
}

.se-hero__meta i {
	margin-right: 0.5rem;
	color: rgba(255, 255, 255, 0.6);
}

.se-content-section {
	padding: 4rem 0 5rem;
}

.se-gallery {
	margin: 2.5rem 0;
}

.se-gallery img {
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.se-details-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.se-details-list li {
	display: flex;
	gap: 1.2rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid #f0f0f0;
	align-items: flex-start;
}

.se-details-list li:last-child {
	border-bottom: none;
}

.se-details-list li i {
	color: var(--color-azul);
	font-size: 1.5rem;
	width: 2rem;
	text-align: center;
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.se-details-list li div {
	display: flex;
	flex-direction: column;
}

.se-details-list li strong {
	font-size: 1.2rem;
	font-weight: 700;
	color: #05294b;
	margin-bottom: 0.2rem;
}

.se-details-list li span {
	font-size: 1.3rem;
	color: #555;
}

.se-details-address {
	font-size: 1.15rem !important;
	color: #888 !important;
}

.se-details-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	width: 100%;
	padding: 1.2rem;
	margin-top: 1.5rem;
	background: var(--color-azul);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s;
}

.se-details-btn:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
}

.se-sidebar-date {
	background: linear-gradient(135deg, #0057a8, #003d75) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.se-sidebar-date span {
	font-size: 1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.se-sidebar-date strong {
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.img-logo-header {
	width: auto !important;
	height: 35px !important;
}

/* THE EVENTS CALENDAR — Override */
.tribe-events {
	font-family: var(--font-principal) !important;
}

.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h6,
.tribe-common .tribe-common-h1 {
	font-family: var(--font-principal) !important;
}

.tribe-events-header__title {
	font-family: var(--font-principal) !important;
	color: #05294b !important;
	font-weight: 800 !important;
	font-size: clamp(2.2rem, 3vw, 3.2rem) !important;
}

.tribe-events .tribe-events-c-top-bar {
	border-bottom: 2px solid #e9ecef !important;
	padding-bottom: 1.5rem !important;
	margin-bottom: 2rem !important;
}

.tribe-events .tribe-events-c-top-bar__nav-link {
	color: var(--color-azul) !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
}

.tribe-events .tribe-events-c-top-bar__nav-link:hover {
	color: var(--color-azul-oscuro) !important;
}

.tribe-events .tribe-events-calendar-month__header-column h3 {
	font-family: var(--font-principal) !important;
	color: #05294b !important;
	font-weight: 700 !important;
	font-size: 1.3rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
	background: var(--color-azul) !important;
	color: #fff !important;
	border-radius: 50% !important;
	width: 3.2rem !important;
	height: 3.2rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 3px 10px rgba(0, 93, 190, 0.35) !important;
}

.tribe-events .tribe-events-calendar-month__day-date-link {
	font-weight: 600 !important;
	color: #333 !important;
	transition: all 0.2s !important;
}

.tribe-events .tribe-events-calendar-month__day-date-link:hover {
	color: var(--color-azul) !important;
}

.tribe-events .tribe-events-calendar-month__day-cell--mobile {
	border-color: #e9ecef !important;
}

.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title a,
.tribe-events .tribe-events-calendar-list__event-title a,
.tribe-events .tribe-events-calendar-day__event-title a {
	color: #05294b !important;
	font-family: var(--font-principal) !important;
	font-weight: 700 !important;
	transition: color 0.2s !important;
}

.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title a:hover,
.tribe-events .tribe-events-calendar-list__event-title a:hover,
.tribe-events .tribe-events-calendar-day__event-title a:hover {
	color: var(--color-azul) !important;
}

.tribe-events .tribe-events-calendar-month__calendar-event-tooltip {
	border-radius: 10px !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
	padding: 1.2rem !important;
	max-width: 30rem !important;
}

.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-description {
	display: -webkit-box !important;
	overflow: hidden !important;
	line-height: 1.5 !important;
	font-size: 1.2rem !important;
}

.tribe-events .tribe-events-calendar-month__calendar-event--featured::before {
	background: var(--color-azul) !important;
	border-radius: 0px !important;
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
	background: var(--color-azul) !important;
	border-radius: 4px !important;
}

.tribe-events .tribe-events-c-view-selector__button {
	font-family: var(--font-principal) !important;
	font-weight: 600 !important;
	color: #555 !important;
}

.tribe-events .tribe-events-c-view-selector__button:hover {
	color: var(--color-azul) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
	color: var(--color-azul) !important;
	font-weight: 700 !important;
}

.tribe-events .tribe-events-c-subscribe-dropdown__button {
	border-color: var(--color-azul) !important;
	color: var(--color-azul) !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
}

.tribe-events .tribe-events-c-subscribe-dropdown__button:hover {
	background: var(--color-azul) !important;
	color: #fff !important;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
	color: var(--color-azul) !important;
	font-weight: 800 !important;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	color: #888 !important;
	font-weight: 600 !important;
}

.tribe-events .tribe-events-calendar-list__event-row {
	border-radius: 12px !important;
	transition: box-shadow 0.3s !important;
	border: 1px solid #f0f0f0 !important;
	margin-bottom: 1rem !important;
}

.tribe-events .tribe-events-calendar-list__event-row:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.tribe-events .tribe-events-calendar-list__event-venue {
	color: #888 !important;
}

.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__prev {
	color: var(--color-azul) !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
}

.tribe-events .tribe-events-c-nav__next:hover,
.tribe-events .tribe-events-c-nav__prev:hover {
	color: var(--color-azul-oscuro) !important;
}

.tribe-events .tribe-events-c-events-bar__search-button {
	background: var(--color-azul) !important;
	border-radius: 0 8px 8px 0 !important;
	transition: all 0.2s !important;
}

.tribe-events .tribe-events-c-events-bar__search-button:hover {
	background: var(--color-azul-oscuro) !important;
}

.tribe-events .tribe-events-c-events-bar__search-input {
	border-radius: 8px 0 0 8px !important;
	font-family: var(--font-principal) !important;
}

.tribe-events .tribe-events-calendar-month__body {
	border-radius: 10px !important;
	overflow: hidden !important;
}

.tribe-events .tribe-events-calendar-month__header-row {
	background: #f8f9fa !important;
}

.tribe-events .tribe-events-calendar-month__day:hover {
	background: #f0f5ff !important;
}

.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link {
	color: #ccc !important;
}

.tribe-events .datepicker .day.active,
.tribe-events .datepicker .day.active:hover {
	background: var(--color-azul) !important;
	color: #fff !important;
	border-radius: 50% !important;
}

.tribe-events .datepicker .day:hover {
	background: #f0f5ff !important;
	border-radius: 50% !important;
}

/* MEDIA QUERRYS */

@media (max-width: 480px) {
	.banner-swiper {
		height: 320px;
	}
}

@media (min-width: 768px) {
	.navbar-logo {
		height: 90px;
	}
}

@media (min-width: 992px) {
	.navbar-logo {
		height: 110px;
	}

	.search-wrapper {
		height: 3.5rem;
	}
}

/* Responsive — Home: categorías */
@media (max-width: 991px) {
	.categorias-list {
		gap: 3rem;
	}

	.categorias-list li {
		width: 7.5rem;
		height: 7.5rem;
	}

	.categorias-list li:hover,

	.categorias-list li.cat-activa {
		width: 17rem;
	}
}

@media (max-width: 575px) {
	.section-categorias__desc {
		font-size: 1.4rem;
		padding: 0 3rem;
	}

	/* 8 columnas, cada ícono ocupa 2 (=4 por fila); los últimos 3 (fila
	   incompleta) se recorren 1 columna para quedar centrados en vez de
	   pegados a la izquierda. */
	.categorias-list {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		justify-items: center;
		row-gap: 2rem;
		column-gap: 0;
		padding: 2rem 1rem !important;
	}

	.categorias-list li {
		grid-column: span 2;
		width: 6rem;
		height: 6rem;
	}

	.categorias-list li:nth-child(5) {
		grid-column: 2 / span 2;
	}

	.categorias-list li:nth-child(6) {
		grid-column: 4 / span 2;
	}

	.categorias-list li:nth-child(7) {
		grid-column: 6 / span 2;
	}

	.categorias-list li:hover,

	.categorias-list li.cat-activa {
		width: 12rem;
	}

	.cat-title {
		font-size: 1rem;
	}
}

/* Responsive — Home: tabs de productos */
@media (max-width: 767px) {
	.productos-tabs {
		flex-wrap: wrap;
		row-gap: 1rem;
		column-gap: 1.6rem;
	}

	.productos-tab {
		padding: 0.5rem 0.4rem;
		font-size: 1.2rem;
	}
}

/* Responsive — Home: tarjeta de producto */
@media (max-width: 575px) {
	/* Tarjeta a todo el ancho: 4:3 para que la foto no quede aplastada */
	.producto-card__img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Responsive — Home: pill de sección */
@media (max-width: 767px) {
	.seccion-titulo-pill {
		padding: 1rem 3rem;
		min-height: 7rem;
		min-width: 75%;
	}
}

/* Responsive — Home: blog científico */
@media (max-width: 991px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-card {
		max-width: 100%;
	}
}

/* Responsive — Página Blog Científico */
@media (max-width: 767px) {
	.blog-main-tabs {
		flex-wrap: wrap;
		row-gap: 1rem;
	}

	.blog-main-tabs .blog-main-tab {
		padding: 0.9rem 1.8rem;
		margin-right: 0;
		font-size: 1.3rem;
	}

	.blog-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.blog-filter-select-wrap,
	.blog-filter-select {
		width: 100%;
	}

	.blog-filter-select,
	.blog-filter-select option {
		font-size: 1.1rem;
	}

	.sp-widgets-section .row {
		row-gap: 3rem;
	}

	.sp-widgets-section .sp-widget {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}

	.prod-pagination {
		flex-wrap: wrap;
		row-gap: 0.8rem;
	}

	/* Sin hover real en touch — deja el "back" de la card siempre visible */
	.blog-card__front {
		transform: translateY(-5rem);
	}

	.blog-card__back-wrap {
		transform: translateY(0);
	}

	.blog-card__body {
		color: #000;
		background: #ffffff94;
	}

	.blog-card__body span,
	.blog-card__body p {
		color: #000;
	}

	.blog-card__body h3 {
		color: var(--color-azul-oscuro);
	}

	.blog-card__title {
		font-size: 1.7rem;
	}

	.blog-card__excerpt {
		font-size: 1.4rem;
	}

	.blog-card__date {
		font-size: 1.2rem;
	}
}

/* Filas de Bootstrap con .g-5: su separación horizontal (3rem) es más
   ancha que el margen del .container, y en celular la fila se salía ~8px
   por cada lado (scroll lateral en Nosotros y Blog Científico). En
   celular las columnas van apiladas, así que se reduce solo la
   horizontal; la vertical (--bs-gutter-y) queda igual. */
@media (max-width: 767px) {
	.row.g-5 {
		--bs-gutter-x: 1.5rem;
	}
}

/* Responsive — Header: top bar */
@media (max-width: 767px) {
	.top-bar__right {
		gap: 0.7rem !important;
	}

	.top-bar__country-btn {
		min-width: 0;
		padding: 5px 8px;
	}

	.top-bar__social a {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.5rem;
	}

	.top-bar__social a svg {
		width: 1.4rem;
		height: 1.4rem;
	}
}

@media (max-width: 380px) {
	.top-bar__social a {
		width: 2.2rem;
		height: 2.2rem;
		font-size: 1.3rem;
	}

	.top-bar__social a svg {
		width: 1.2rem;
		height: 1.2rem;
	}
}

/* Responsive — Header: navbar medio */
@media (max-width: 767px) {
	.navbar-top-row {
		display: flex !important;
		justify-content: space-between;
	}

	.navbar-logo {
		padding-left: 0;
	}

	.navbar-actions.pe-6 {
		padding-right: 0.5rem !important;
	}

	.search-mobile {
		margin-bottom: 1.2rem;
	}
}

/* ── Menú hamburguesa (nav2) ──
   En PC: el botón no se ve y .nav2__panel es display:contents, así que
   Productos y el menú siguen siendo hijos directos del flex de .nav2
   (mismo diseño de siempre). En celular: una barra con "☰ Menú" que abre
   un panel desplegable con todas las opciones en lista. */
.nav2__burger {
	display: none;
}

.nav2__panel {
	display: contents;
}

/* Menú fijo arriba al hacer scroll (PC y celular). La clase la pone
   js/script.js cuando el menú llega al borde superior; "top" lo ajusta el
   JS si está la barra negra de WordPress (sesión iniciada en PC).
   "sticky" no alcanzaba: el menú vive dentro de un div que solo lo
   contiene a él (o a él + el banner en la Home), y sticky no puede
   salirse de su contenedor. */
.nav2.nav2--fijo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Atulado + "Ingresar / Inscríbete" en tablet/celular: apilados (logo
   arriba, enlaces abajo) y más compactos, a la derecha del logo Lafage.
   En PC (992px+) siguen lado a lado como siempre. */
@media (max-width: 991px) {
	.atulado-header {
		flex-direction: column;
		align-items: center;
		gap: 0.2rem !important;
	}

	.atulado-header .img-logo-header {
		height: 28px !important;
	}

	.atulado-header__auth {
		font-size: 1.3rem !important;
		white-space: nowrap;
	}

	/* El buscador de celular tenía un mínimo de 23rem que en pantallas
	   de 320px empujaba el botón BUSCAR fuera de la pantalla */
	.search-mobile .search-input {
		min-width: 0;
	}
}

/* En la Home el menú es azul translúcido para verse sobre el video; ya
   fijo sobre el resto de la página va sólido para que no se vea lavado. */
.nav2--video-bg.nav2--fijo {
	background: var(--color-azul);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media (max-width: 767px) {
	.nav2 {
		flex-wrap: nowrap;
		align-items: center;
		min-height: 0;
	}

	.nav2__burger {
		display: flex;
		align-items: center;
		gap: 1.2rem;
		width: 100%;
		background: none;
		border: 0;
		color: #fff;
		font-family: var(--font-principal);
		font-size: 1.6rem;
		font-weight: 600;
		padding: 1.3rem 1.6rem;
		cursor: pointer;
	}

	/* Tres rayas que se vuelven una X al abrir */
	.nav2__burger-icon {
		position: relative;
		width: 2.4rem;
		height: 1.8rem;
		flex-shrink: 0;
	}

	.nav2__burger-icon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform 0.25s, opacity 0.2s, top 0.25s;
	}

	.nav2__burger-icon span:nth-child(1) { top: 0; }
	.nav2__burger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
	.nav2__burger-icon span:nth-child(3) { top: 100%; transform: translateY(-100%); }

	.nav2--abierto .nav2__burger-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
	.nav2--abierto .nav2__burger-icon span:nth-child(2) { opacity: 0; }
	.nav2--abierto .nav2__burger-icon span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

	/* Panel desplegable, encima del contenido (el nav2 ya es sticky) */
	.nav2__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-azul);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		padding-bottom: 0.8rem;
	}

	.nav2--abierto .nav2__panel {
		display: block;
	}


	/* Opciones en lista: una por renglón, alineadas a la izquierda */
	.nav2__productos {
		display: block;
		width: 100%;
		padding: 0;
		background: transparent;
	}

	.nav2__productos-link,
	.nav2__menu>.nav-item>.nav-link {
		justify-content: space-between !important;
		width: 100%;
		text-align: left;
		white-space: normal;
		border-radius: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		font-size: 1.5rem;
		font-weight: 500;
		padding: 1.3rem 2rem !important;
	}

	.nav2__productos-link {
		font-weight: 700;
	}

	/* Flechita de Productos (gira al abrir sus líneas) */
	.nav2__productos-link::after {
		content: '';
		width: 0.8rem;
		height: 0.8rem;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		margin-top: -0.4rem;
		transition: transform 0.2s;
	}

	#nav2-productos-wrap.open .nav2__productos-link::after {
		transform: rotate(-135deg);
		margin-top: 0.4rem;
	}

	/* Líneas de Productos: submenú dentro del panel (no flotante) */
	.nav2__productos-dropdown {
		position: static;
		width: auto;
		margin: 0 !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.12);
		padding: 0.4rem 0 !important;
	}

	.nav2__productos-dropdown li,
	.nav2__productos-dropdown li:first-child {
		padding: 0;
		margin: 0;
	}

	.nav2__cat-option {
		color: rgba(255, 255, 255, 0.92);
		background: none;
		border-radius: 0;
		font-size: 1.4rem;
		padding: 1rem 2rem 1rem 3.4rem;
	}

	.nav2__cat-option:hover,
	.nav2__cat-option--active {
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
	}

	.nav2__links,
	.nav2__menu,
	.nav2__menu>.nav-item {
		display: block !important;
		width: 100%;
	}

	/* Página actual: barra blanca a la izquierda en vez de la píldora */
	.nav2__menu>.nav-item.current-menu-item>.nav-link,
	.nav2__menu>.nav-item.current-page-ancestor>.nav-link {
		background: rgba(255, 255, 255, 0.14);
		box-shadow: inset 4px 0 0 #fff;
	}
}

/* Responsive — Header: banner hero */
@media (max-width: 767px) {
	.hero-sidebar {
		display: none !important;
	}

	/* max() en vez de height+min-height: el video de fondo (abajo) usa el
	   mismo valor para medir exactamente lo mismo que el banner */
	.hero-swiper {
		height: max(50vh, 320px);
	}

	/* Sin margen lateral: con él, el degradado se veía como un segundo
	   recuadro detrás de la tarjeta blanca */
	.hero-carousel {
		padding: 0;
	}

	/* Video solo detrás del banner, no detrás del menú: el menú en
	   celular ocupa 2 filas y, encima del video (semitransparente con
	   blur), tapaba la parte de arriba (las caras). */
	.home-hero-video-bg {
		top: auto;
		bottom: -2px;
		height: calc(max(50vh, 320px) + 2px);
	}

	.nav2--video-bg {
		background: var(--color-azul);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.hero-slide {
		align-items: flex-end;
	}

	.hero-slide__content {
		margin-left: 0;
		max-width: 88%;
		padding: 1.2rem 1.5rem;
		margin-bottom: 3rem;
		background: rgba(255, 255, 255, 0.88);
		border-radius: 14px;
	}

	/* Sin degradado blanco: la tarjeta ya tiene su propio fondo y el
	   degradado formaba un "cuadro" detrás de ella */
	.hero-slide__fade {
		display: none;
	}

	.hero-slide__content {
		margin-left: 4%;
		margin-bottom: 2rem;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
	}

	.hero-slide__eyebrow {
		font-size: 1.4rem;
	}

	.hero-slide__title {
		font-size: clamp(1.6rem, 6vw, 2.2rem);
		padding-bottom: 1rem;
	}
}

.bitacora-page {
	background: #fff;
	color: #0b0b0b;
	overflow: hidden;
}

.bitacora-cover {
	border-radius: 0 0 5px 5px;
	height: 60rem;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.bitacora-cover-swiper,
.bitacora-cover .swiper-slide {
	height: 100%;
}

.bitacora-cover__bg {
	background-position: center top;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.bitacora-cover__fade {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, .92) 77%, #fff 100%);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.bitacora-cover__copy {
	position: absolute;
	right: 8%;
	top: 34%;
	z-index: 2;
}

.bitacora-dots.swiper-pagination {
	bottom: 10rem;
	left: 54%;
	right: auto;
	width: auto;
}

.bitacora-dots .swiper-pagination-bullet {
	background: #bbb;
	border-radius: 50%;
	height: .8rem;
	opacity: 1;
	width: .8rem;
}

.bitacora-dots .swiper-pagination-bullet-active {
	background: #1267b1;
}

/* Puntitos de los carruseles de historias y podcasts (mismo estilo que
   los del banner de portada), centrados debajo de las tarjetas. Si solo
   hay una "página", Swiper los oculta solo (swiper-pagination-lock). */
.bitacora-carrusel-dots {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 2rem;
}

.bitacora-carrusel-dots .swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	margin: 0 !important;
	background: #bbb;
	opacity: 1;
	transition: width 0.3s, background 0.3s;
}

.bitacora-carrusel-dots .swiper-pagination-bullet-active {
	width: 2.4rem;
	border-radius: 1rem;
	background: #1267b1;
}

.bitacora-carrusel-dots.swiper-pagination-lock {
	display: none;
}

.bitacora-cover__copy p {
	color: var(--color-azul-oscuro);
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.bitacora-cover__copy h1 {
	color: #050505;
	font-size: 5.2rem;
	font-weight: 800;
	line-height: .92;
	margin: .2rem 0 0;
}

.bitacora-dots {
	bottom: 10rem;
	display: flex;
	gap: 1rem;
	left: 54%;
	position: absolute;
	z-index: 2;
}

.bitacora-dots span {
	background: #bbb;
	border-radius: 50%;
	height: .8rem;
	width: .8rem;
}

.bitacora-dots span.is-active {
	background: #1267b1;
}

.bitacora-feature {
	align-items: center;
	display: grid;
	gap: 4rem;
	grid-template-columns: .7fr 1.3fr;
	margin: 10rem auto 7rem;
	max-width: 115rem;
}

.bitacora-feature__copy {
	padding-left: 1rem;
}

.bitacora-label,
.bitacora-number {
	color: var(--color-azul-oscuro);
	font-size: 3rem;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
}

.bitacora-number {
	font-size: 3rem;
	margin-top: .7rem;
}

.bitacora-feature h2 {
	font-size: 3.7rem;
	font-weight: 800;
	line-height: .98;
	margin: 2rem 0 2.5rem;
}

.bitacora-description {
	color: #777;
	font-size: 1.3rem;
	line-height: 1.55;
	max-width: 31rem;
}

.bitacora-outline-button,
.bitacora-white-button {
	align-items: center;
	border: 2px solid var(--color-azul);
	border-radius: 1.5rem;
	color: var(--color-azul-oscuro);
	display: inline-flex;
	font-size: 1.45rem;
	font-weight: 700;
	gap: 1.2rem;
	margin-top: 2.5rem;
	padding: 1rem 2.3rem;
	text-decoration: none;
}

.bitacora-play {
	align-items: center;
	background: var(--color-azul);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 1.1rem;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.bitacora-video {
	border-radius: 1.8rem;
	height: 40rem;
	overflow: hidden;
	position: relative;
}

.bitacora-video iframe,
.bitacora-video img {
	border: 0;
	height: 100%;
	display: block;
	width: 100%;
	object-fit: cover;
}

.bitacora-stories,
.bitacora-podcast-list {
	background: var(--color-gris-blanco);
	border-radius: 2.5rem;
	margin: 0 auto 3.5rem;
	max-width: 104rem;
	padding: 3rem 4.8rem 4rem;
	/* Los botones "Ver más historias" bajan hasta aquí (#historias /
	   #podcast): margen para que el menú fijo no tape el título */
	scroll-margin-top: 8rem;
}

.bitacora-section-heading {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.bitacora-section-heading h2 {
	color: var(--color-azul-oscuro);
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
}

.bitacora-slider-controls {
	display: flex;
	gap: .5rem;
}

.bitacora-slider-controls button {
	background: var(--color-azul);
	border: 0;
	border-radius: 1.2rem;
	color: #fff;
	cursor: pointer;
	font-size: 2.5rem;
	height: 3rem;
	line-height: 1;
	width: 4rem;
}

.bitacora-story-card {
	background: #fff;
	border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 6rem;
	min-height: 25rem;
	position: relative;
}

.bitacora-story-card__image {
	height: 18rem;
	overflow: hidden;
	position: relative;
	border-radius: 0;
}

.bitacora-story-card__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
	border-radius: 1.5rem;
}

.bitacora-story-card__image span {
	background: var(--color-azul-oscuro);
	border-radius: 1rem;
	color: #fff;
	font-size: .8rem;
	left: 1.5rem;
	padding: .3rem .8rem;
	position: absolute;
	text-transform: uppercase;
	top: 1.2rem;
}

.bitacora-story-card time,
.bitacora-podcast-card time {
	color: var(--color-gris);
	display: block;
	font-size: .95rem;
	margin: 1.2rem 1.5rem .8rem;
}

.bitacora-story-card time {
	border-bottom: 1px solid var(--color-gris);
	padding-bottom: .8rem;
}

.bitacora-story-card h3,
.bitacora-podcast-card h3 {
	font-size: 1.8rem;
	line-height: 1.25;
	font-weight: 600;
	margin: 0 1.5rem 1.3rem;
}

.bitacora-story-card a,
.bitacora-podcast-card a {
	align-items: center;
	color: var(--color-azul);
	display: flex;
	font-size: 1.5rem;
	gap: .7rem;
	margin: 0 1.5rem;
	text-decoration: none;
}

.bitacora-story-card a {
	bottom: 1.7rem;
	justify-content: center;
	left: 50%;
	margin: 0;
	position: absolute;
	transform: translateX(-50%);
	width: calc(100% - 3rem);
}

.bitacora-play--outline {
	background: transparent;
	border: 1px solid #145494;
	color: #145494;
	font-size: .9rem;
	height: 2.5rem;
	width: 2.5rem;
}

.bitacora-medical {
	align-items: center;
	background: var(--color-azul-oscuro);
	border-radius: 2.5rem;
	color: #fff;
	display: grid;
	gap: 3rem;
	grid-template-columns: 1.1fr .9fr;
	margin: 0 auto 0;
	max-width: 104rem;
	padding: 3rem 4rem;
}

.bitacora-medical .bitacora-label,
.bitacora-number--light {
	color: #fff;
}

.bitacora-number--light {
	color: #41a4e5;
	font-size: 1.45rem;
}

.bitacora-medical h2 {
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.1;
	margin: 2.4rem 0 1.5rem;
}

.bitacora-medical__copy>p:not(.bitacora-label):not(.bitacora-number) {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 39rem;
}

.bitacora-medical__image {
	border-radius: .5rem;
	height: 25rem;
	object-fit: cover;
	width: 100%;
}

.bitacora-white-button {
	background: #fff;
	border: 0;
	color: #145494;
	margin-top: 2rem;
}

.bitacora-headphones {
	align-items: center;
	display: inline-flex;
	height: 2.7rem;
	justify-content: center;
	width: 2.7rem;
}

.bitacora-headphones img {
	height: 3rem;
	width: 3rem;
}

.bitacora-podcast-list {
	border-radius: 0 0 2.5rem 2.5rem;
	margin-bottom: 7rem;
	padding-top: 3rem;
}

article.bitacora-podcast-card {
	align-items: center;
	background: #fff;
	border-radius: 1.5rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: 10rem minmax(0, 1fr);
	min-height: 10rem;
	overflow: hidden;
}


article.bitacora-podcast-card > .bitacora-podcast-card__image {
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	min-height: 10rem;
	object-fit: cover;
	width: 100%;
	display: block;
}

article.bitacora-podcast-card > .bitacora-podcast-card__content {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.bitacora-podcast-card time {
	font-size: 1.2rem;
	margin: 0 1rem .5rem;
	border-bottom: 1px solid #000;
	padding-bottom: .8rem;
	padding-top: 1rem;
}

.bitacora-podcast-card h3 {
	font-size: 1.9rem;
	margin: 0 1rem .8rem;
}

.bitacora-podcast-card a {
	font-size: 1.3rem;
	padding-bottom: 1rem;
	margin: 0 1rem;
}

@media (max-width: 767px) {
	.bitacora-cover {
		min-height: auto;
		height: 30rem;
	}

	.bitacora-cover__fade {
		background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .9) 75%);
	}

	.bitacora-cover__copy {
		right: 5%;
		top: 32%;
	}

	.bitacora-cover__copy p {
		font-size: 1.2rem;
	}

	.bitacora-cover__copy h1 {
		font-size: 3.1rem;
	}

	.bitacora-dots.swiper-pagination {
		bottom: 3rem;
		left: 53%;
	}

	.bitacora-feature {
		display: flex;
		flex-direction: column;
		gap: 3rem;
		margin: 5rem 2rem;
	}

	.bitacora-feature__copy {
		padding: 0;
	}

	.bitacora-feature h2 {
		font-size: 3.1rem;
	}

	.bitacora-video {
		height: 26rem;
		width: 100%;
	}

	.bitacora-stories,
	.bitacora-podcast-list {
		border-radius: 1.8rem;
		margin-left: 1.5rem;
		margin-right: 1.5rem;
		padding: 2.3rem 1.5rem 2.8rem;
	}

	.bitacora-medical {
		border-radius: 1.8rem;
		display: flex;
		flex-direction: column;
		margin: 0 1.5rem;
		padding: 2.5rem 2rem;
	}

	.bitacora-medical__image {
		height: 20rem;
		order: -1;
	}

	.bitacora-medical h2 {
		font-size: 2.35rem;
	}

	.bitacora-podcast-list {
		margin-bottom: 4rem;
	}
}

/* ── HERO EMPLEOS ── */
.emp-hero {
	--emp-hero-bg: none;
	background-image: linear-gradient(90deg, #f5f0e8 0%, rgba(245, 240, 232, .92) 42%, rgba(245, 240, 232, .55) 68%, rgba(245, 240, 232, .15) 100%), var(--emp-hero-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5rem 0 4.5rem;
}
.emp-hero__title {
	font-size: 3.1rem;
	font-weight: 800;
	color: #05294b;
	line-height: 1.2;
	margin-bottom: 0.8rem;
}
.emp-hero__sub {
	color: #6b7280;
	font-size: 1.25rem;
	margin-bottom: 2.2rem;
}
.emp-search-bar {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
	display: flex;
	align-items: center;
	padding: 0.7rem 0.7rem 0.7rem 1.3rem;
	gap: 0;
	flex-wrap: wrap;
}
.emp-search-bar .esb-input {
	flex: 1 1 180px;
	border: none;
	outline: none;
	font-size: 1.2rem;
	color: #374151;
	background: transparent;
	padding: 0.6rem 0;
	min-width: 140px;
}
.emp-search-bar .esb-divider {
	width: 1px;
	height: 32px;
	background: #e5e7eb;
	margin: 0 1rem;
	flex-shrink: 0;
}
.emp-search-bar .esb-select-wrap {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.emp-search-bar .esb-select {
	border: none;
	outline: none;
	font-size: 1.1rem;
	color: #374151;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	padding: 0.6rem 1.8rem 0.6rem 0.3rem;
	cursor: pointer;
}
.emp-search-bar .esb-select-icon {
	position: absolute;
	right: 0;
	font-size: 0.85rem;
	color: #9ca3af;
	pointer-events: none;
}
.emp-search-bar .esb-btn {
	background: linear-gradient(135deg, #1a56db, #0057a8);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.2rem;
	padding: 0.8rem 2rem;
	flex-shrink: 0;
	cursor: pointer;
	transition: opacity .2s;
}
.emp-search-bar .esb-btn:hover { opacity: .88; }

/* ── LAYOUT MAIN ── */
.emp-main { padding: 3rem 0 3.5rem; background: #f9fafb; }

/* ── SIDEBAR ── */
.emp-sidebar {
	background: #fff;
	border-radius: 12px;
	padding: 1.8rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.emp-sidebar__section { margin-bottom: 2rem; }
.emp-sidebar__section:last-child { margin-bottom: 0; }
.emp-sidebar__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #05294b;
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid #f3f4f6;
}

/* Job alert box */
.emp-alert-box {
	background: linear-gradient(135deg, #1a56db, #0057a8);
	border-radius: 10px;
	padding: 1.6rem;
	color: #fff;
	margin-bottom: 1.8rem;
}
.emp-alert-box strong { font-size: 1.25rem !important; }
.emp-alert-box p { font-size: 1.05rem; opacity: .9; margin-bottom: 1rem; }
.emp-alert-box input {
	width: 100%;
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1rem;
	font-size: 1.05rem;
	margin-bottom: 0.8rem;
	outline: none;
}
.emp-alert-btn {
	width: 100%;
	background: #e63946;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.7rem;
	font-weight: 700;
	font-size: 1.1rem;
	cursor: pointer;
	transition: opacity .2s;
}
.emp-alert-btn:hover { opacity: .88; }
/* "Enviar mi CV": mismo botón rojo pero como enlace */
.emp-alert-btn--link {
	display: block;
	text-align: center;
	text-decoration: none;
	margin-top: 0.4rem;
}
.emp-alert-btn--link:hover { color: #fff; }
.emp-alert-msg {
	background: rgba(255, 255, 255, .15);
	border-radius: 6px;
	padding: 0.7rem 1rem;
	font-size: 0.95rem;
	margin: 0 !important;
}

/* Checkboxes & radios */
.emp-check-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.7rem;
	font-size: 1.1rem;
	color: #374151;
}
.emp-check-item label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.emp-check-item input[type="checkbox"],
.emp-check-item input[type="radio"] { accent-color: #1a56db; width: 19px; height: 19px; cursor: pointer; }
.emp-check-count {
	background: #f3f4f6;
	color: #6b7280;
	font-size: 0.95rem;
	border-radius: 20px;
	padding: 0.15rem 0.65rem;
}

/* Salary range */
.emp-range { width: 100%; accent-color: #1a56db; height: 6px; margin: 0.7rem 0; }
.emp-range-labels { display: flex; justify-content: space-between; font-size: 1rem; color: #6b7280; }
.emp-range-labels span:nth-child(2) { color: #1a56db; font-weight: 700; }

/* Apply filter btn */
.emp-apply-btn {
	width: 100%;
	background: linear-gradient(135deg, #1a56db, #0057a8);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0.85rem;
	font-weight: 700;
	font-size: 1.15rem;
	cursor: pointer;
	transition: opacity .2s;
}
.emp-apply-btn:hover { opacity: .88; }
.emp-reset-link { display: block; text-align: center; font-size: 1.02rem; color: #6b7280; margin-top: 0.6rem; text-decoration: underline; cursor: pointer; }

/* Recruiting box */
.emp-recruiting {
	background: linear-gradient(135deg, #0057a8, #05294b);
	border-radius: 10px;
	padding: 1.6rem;
	color: #fff;
	text-align: center;
	margin-top: 1.8rem;
}
.emp-recruiting i { font-size: 2.6rem !important; }
.emp-recruiting strong { font-size: 1.2rem !important; }
.emp-recruiting p { font-size: 1.02rem; opacity: .85; margin-bottom: 1rem; }
.emp-recruiting a {
	display: inline-block;
	background: #e63946;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	padding: 0.6rem 1.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	transition: opacity .2s;
}
.emp-recruiting a:hover { opacity: .88; color: #fff; }

/* ── CONTENT AREA ── */
.emp-content-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.6rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.emp-content-bar__count { font-size: 1.1rem; color: #6b7280; }
.emp-content-bar__count strong { color: #05294b; }
.emp-sort-wrap { display: flex; align-items: center; gap: 1rem; }
.emp-sort-select {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 0.5rem 2rem 0.5rem 0.9rem;
	font-size: 1.05rem;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
	background-color: #fff;
	cursor: pointer;
}
.emp-view-toggle { display: flex; gap: 0.4rem; }
.emp-view-btn {
	border: 1px solid #e5e7eb;
	background: #fff;
	border-radius: 5px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #9ca3af;
	font-size: 1.1rem;
	transition: all .2s;
}
.emp-view-btn.active, .emp-view-btn:hover { background: #1a56db; color: #fff; border-color: #1a56db; }

/* ── JOB CARD ── */
.emp-job-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	transition: transform .25s, box-shadow .25s;
	height: 100%;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.emp-job-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); color: inherit; }
.emp-job-card__img {
	position: relative;
	height: 200px;
	overflow: hidden;
}
.emp-job-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.emp-badge-urgent {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #e63946;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.3rem 0.8rem;
	border-radius: 4px;
}
.emp-job-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.6rem 1.2rem 0.4rem;
}
.emp-company { display: flex; align-items: center; gap: 0.7rem; }
.emp-company-logo {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 700;
	color: #0057a8;
	flex-shrink: 0;
	overflow: hidden;
}
.emp-company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.emp-company-name { font-size: 1rem; color: #6b7280; }
.emp-badge-type {
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.3rem 0.8rem;
	border-radius: 4px;
}
.emp-badge-type--blue { background: #dbeafe; color: #1a56db; }
.emp-badge-type--green { background: #dcfce7; color: #16a34a; }
.emp-badge-type--orange { background: #fff7ed; color: #ea580c; }
.emp-job-card__body {
	padding: 0.5rem 1.2rem 1.6rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.emp-job-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #05294b;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}
.emp-job-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.8rem;
}
.emp-job-card__tag {
	background: #f3f4f6;
	color: #6b7280;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.25rem 0.7rem;
	border-radius: 20px;
}
.emp-job-card__desc {
	line-height: 1.5;
	margin-bottom: 0;
}
.emp-job-card__footer { margin-top: 1rem; }
.emp-job-card__info {
	font-size: 1rem;
	color: #9ca3af;
	margin-bottom: 0.3rem;
}
.emp-job-card__salary {
	font-size: 1.2rem;
	font-weight: 700;
	color: #1a56db;
	margin-top: 0.5rem;
}
.emp-job-card__map-btn {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin-top: 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a56db;
	cursor: pointer;
}
.emp-job-card__map-btn:hover { text-decoration: underline; }

/* ── PAGINATION ── */
.emp-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }
.emp-page-btn {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	color: #374151;
	text-decoration: none;
	transition: all .2s;
}
.emp-page-btn:hover, .emp-page-btn.active {
	background: #1a56db;
	border-color: #1a56db;
	color: #fff;
}
.emp-page-btn--nav { color: #9ca3af; }

/* ── PARTNERS ── */
.emp-partners { padding: 3rem 0; background: #fff; border-top: 1px solid #f3f4f6; }
.emp-partners__logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	flex-wrap: wrap;
}
.emp-partner-logo {
	font-size: 1.5rem;
	font-weight: 800;
	color: #9ca3af;
	letter-spacing: -0.03em;
	transition: color .2s;
}
.emp-partner-logo:hover { color: #0057a8; }

/* ── SUBSCRIBE ── */
.emp-subscribe {
	background: linear-gradient(135deg, #1a56db 0%, #0057a8 100%);
	padding: 3.5rem 0;
	text-align: center;
	color: #fff;
}
.emp-subscribe h2 { font-size: 2.3rem; font-weight: 800; margin-bottom: 0.6rem; }
.emp-subscribe p { opacity: .85; margin-bottom: 1.8rem; font-size: 1.2rem; }
.emp-subscribe-form {
	display: flex;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.emp-subscribe-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0.9rem 1.2rem;
	font-size: 1.1rem;
	color: #374151;
}
.emp-subscribe-btn {
	background: #e63946;
	color: #fff;
	border: none;
	padding: 0.9rem 1.7rem;
	font-weight: 700;
	font-size: 1.1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: opacity .2s;
}
.emp-subscribe-btn:hover { opacity: .88; }
/* "Enviar CV" solo (sin campo de correo): botón-enlace centrado tipo píldora */
.emp-subscribe-btn--link {
	display: inline-flex;
	justify-content: center;
	border-radius: 50px;
	padding: 1rem 3rem;
	font-size: 1.4rem;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.emp-subscribe-btn--link:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   FICHA DE VACANTE (single-empleo.php)
   Clases con prefijo "job-single-", exclusivas de esta plantilla.
   ══════════════════════════════════════════════════════════════════ */

.job-single { background: #f9fafb; padding-bottom: 4rem; }

.job-single__back { padding: 1.6rem 0 0; }
.job-single__back a {
	color: #6b7280;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}
.job-single__back a:hover { color: #1a56db; }

.job-single__header {
	background: linear-gradient(135deg, #0057a8, #05294b);
	color: #fff;
	margin-top: 1.4rem;
	padding: 2.6rem 0;
}
.job-single__header-inner {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	flex-wrap: wrap;
}
.job-single__logo {
	background: #fff;
	color: #0057a8;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 800;
	flex-shrink: 0;
	overflow: hidden;
}
.job-single__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.job-single__headline { flex: 1 1 320px; }
.job-single__badge {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.25rem 0.8rem;
	border-radius: 20px;
	margin-bottom: 0.6rem;
}
.job-single__badge--green { background: #dcfce7; color: #16a34a; }
.job-single__badge--orange { background: #fff7ed; color: #ea580c; }
.job-single__headline h1 {
	font-size: 2.2rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.7rem;
	line-height: 1.2;
}
.job-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	color: rgba(255, 255, 255, .85);
	font-size: 1rem;
}
.job-single__cta {
	text-align: right;
	flex-shrink: 0;
}
.job-single__salary {
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.8rem;
}
.job-single__apply-btn {
	display: inline-block;
	background: #e63946;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0.85rem 2rem;
	border-radius: 8px;
	transition: opacity .2s;
	white-space: nowrap;
}
.job-single__apply-btn:hover { opacity: .88; color: #fff; }
.job-single__apply-btn--block { display: block; text-align: center; width: 100%; margin-top: 1.2rem; }

.job-single__body { padding-top: 2.5rem; }

.job-single__card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	padding: 1.8rem;
	margin-bottom: 1.6rem;
}
.job-single__card h2 {
	font-size: 1.5rem;
	font-weight: 800;
	color: #05294b;
	margin: 0 0 1.1rem;
}
.job-single__card h3 {
	font-size: 1.2rem;
	font-weight: 800;
	color: #05294b;
	margin: 0 0 1.1rem;
}
.job-single__lead {
	font-size: 1.2rem;
	font-weight: 600;
	color: #05294b;
	margin: 0;
	line-height: 1.5;
}
.job-single__prose {
	font-size: 1.05rem;
	color: #374151;
	line-height: 1.75;
}
.job-single__prose p:last-child { margin-bottom: 0; }
.job-single__prose ul, .job-single__prose ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.job-single__prose li { margin-bottom: 0.5rem; }
.job-single__prose strong { color: #05294b; }

.job-single__apply-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #1a56db, #0057a8);
	color: #fff;
}
.job-single__apply-banner strong { font-size: 1.2rem; }
.job-single__apply-banner p { color: rgba(255, 255, 255, .85); font-size: 1rem; }

.job-single__summary { list-style: none; margin: 0 0 0; padding: 0; }
.job-single__summary li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.7rem 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 1rem;
}
.job-single__summary li:last-child { border-bottom: 0; }
.job-single__summary li span { color: #9ca3af; }
.job-single__summary li strong { color: #05294b; text-align: right; }

.job-single__map-link {
	color: #1a56db;
	font-weight: 600;
	text-decoration: none;
}
.job-single__map-link:hover { text-decoration: underline; }

.job-single__share { display: flex; gap: 0.8rem; }
.job-single__share a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #05294b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	text-decoration: none;
	transition: all .2s;
}
.job-single__share a:hover { background: #1a56db; color: #fff; }

.job-single__related { list-style: none; margin: 0; padding: 0; }
.job-single__related li { border-bottom: 1px solid #f3f4f6; }
.job-single__related li:last-child { border-bottom: 0; }
.job-single__related a {
	display: block;
	padding: 0.9rem 0;
	text-decoration: none;
}
.job-single__related-title {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: #05294b;
}
.job-single__related-meta {
	display: block;
	font-size: 0.9rem;
	color: #9ca3af;
	margin-top: 0.2rem;
}

/* ── PÁGINA CONTÁCTANOS (page-contactanos.php) ── */
.contacto-page {
	background: #fff;
}

.contacto-hero {
	position: relative;
	padding: 5rem 0 4rem;
	overflow: hidden;
	min-height: 30rem;
}

.contacto-hero__inner {
	display: flex;
	align-items: center;
	gap: 4rem;
}

.contacto-hero__texto {
	max-width: 54rem;
}

.contacto-hero__raya {
	display: block;
	width: 4rem;
	height: 4px;
	background: #e63946;
	margin-bottom: 1.2rem;
}

.contacto-hero__texto h1 {
	font-family: var(--font-principal);
	font-size: clamp(2.2rem, 3vw, 3.2rem);
	font-weight: 700;
	color: var(--color-azul-oscuro);
	white-space: nowrap;
	margin: 0 0 1.2rem;
}

.contacto-hero__texto p {
	font-size: 1.5rem;
	color: var(--color-gris);
	max-width: 42rem;
	margin: 0;
}

.contacto-hero__img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 52%;
}

.contacto-hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.contacto-hero__label {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Franja de Teléfono/Correo/Ubicación — fondo grisáceo, los 3 items
   iguales (sin ninguno "resaltado"). */
.contacto-cards {
	background: var(--color-gris-blanco);
	padding: 3.5rem 0;
}

.contacto-info-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

/* Cada uno es su propio contenedor: caja blanca con sombra, no solo
   ícono+texto flotando sobre el gris de la sección. */
.contacto-info-item {
	flex: 1 1 26rem;
	max-width: 32rem;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	background: #fff;
	border-radius: 12px;
	padding: 1.8rem 2rem;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.contacto-info-item__icono {
	width: 5rem;
	height: 5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: #e3edfa;
	color: var(--color-azul);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
}

.contacto-info-item strong {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-azul-oscuro);
}

.contacto-info-item span {
	display: block;
	font-size: 1.2rem;
	color: var(--color-gris);
}

/* Mapa + formulario */
.contacto-mapa-form {
	background: #fff;
	padding: 4rem 0;
}

.contacto-mapa-form__inner {
	display: flex;
	gap: 3rem;
	align-items: stretch;
}

.contacto-mapa {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 38rem;
	border-radius: 12px;
	overflow: hidden;
}

.contacto-mapa iframe {
	width: 100%;
	height: 100%;
	min-height: 38rem;
}

.contacto-form {
	flex: 1;
	min-width: 0;
}

.contacto-form__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.6rem;
}

.contacto-form__aviso {
	padding: 1rem 1.4rem;
	border-radius: 8px;
	font-size: 1.3rem;
	margin-bottom: 1.8rem;
}

.contacto-form__aviso--ok {
	background: #e7f7ec;
	color: #1e7a3f;
	border: 1px solid #bfe8cc;
}

.contacto-form__aviso--error {
	background: #fdeceb;
	color: #b3261e;
	border: 1px solid #f6c6c2;
}

.contacto-form__campo {
	display: block;
	margin-bottom: 1.6rem;
}

.contacto-form__campo span {
	display: block;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-azul-oscuro);
	margin-bottom: 0.5rem;
}

.contacto-form__campo input,
.contacto-form__campo textarea {
	width: 100%;
	padding: 1rem 1.2rem;
	border: 1.5px solid var(--color-gris-claro);
	border-radius: 8px;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	color: var(--color-negro);
	resize: vertical;
}

.contacto-form__campo input:focus,
.contacto-form__campo textarea:focus {
	outline: none;
	border-color: var(--color-azul);
}

.contacto-form__btn {
	padding: 1.2rem 3rem;
	border: none;
	border-radius: 50px;
	background: var(--color-azul-oscuro);
	color: #fff;
	font-family: var(--font-principal);
	font-size: 1.4rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}

.contacto-form__btn:hover {
	background: var(--color-azul);
}

/* CTA Atulado */
.contacto-cta {
	background: var(--color-azul-oscuro);
	padding: 3rem 0;
}

.contacto-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.contacto-cta__grupo {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.contacto-cta__icono {
	flex-shrink: 0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
}

.contacto-cta__logo {
	flex-shrink: 0;
	height: 3.6rem;
	width: auto;
}

.contacto-cta__texto {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
}

.contacto-cta__texto h3 {
	font-family: var(--font-principal);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	margin: 0;
}

.contacto-cta__sep {
	width: 1px;
	height: 2rem;
	background: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

.contacto-cta__texto p {
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.contacto-cta__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1rem 2.4rem;
	border-radius: 50px;
	background: #fff;
	color: var(--color-azul-oscuro);
	font-family: var(--font-principal);
	font-weight: 700;
	font-size: 1.4rem;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.contacto-cta__btn:hover {
	background: var(--color-azul);
	color: #fff;
}

@media (max-width: 767px) {
	.contacto-hero { padding-top: 0; }
	.contacto-hero__img { position: static; width: 100%; height: 16rem; margin-bottom: 2rem; }
	.contacto-hero__img img { object-position: right center; }
	.contacto-hero__inner { flex-direction: column; }
	.contacto-hero__texto { max-width: 100%; }
	.contacto-mapa-form__inner { flex-direction: column; }
	.contacto-mapa { min-height: 26rem; }
	.contacto-mapa iframe { min-height: 26rem; }
	.contacto-form__fila { grid-template-columns: 1fr; }
	.contacto-cta__inner { text-align: center; justify-content: center; }
	.contacto-cta__grupo { flex-direction: column; }
	.contacto-cta__texto { flex-direction: column; }
	.contacto-cta__sep { display: none; }
}

@media (max-width: 767px) {
	.job-single__header-inner { flex-direction: column; align-items: flex-start; }
	.job-single__cta { text-align: left; width: 100%; }
	.job-single__apply-btn { width: 100%; text-align: center; }
	.job-single__headline h1 { font-size: 1.7rem; }
}

.prod-paginacion {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.prod-paginacion .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.prod-paginacion .page-numbers li {
	display: flex;
}

.prod-paginacion .page-numbers a,
.prod-paginacion .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.6rem;
	height: 3.6rem;
	padding: 0 0.6rem;
	border-radius: 50px;
	background: #fff;
	border: 1.5px solid var(--color-gris-claro);
	color: var(--color-azul-oscuro);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.prod-paginacion .page-numbers a:hover {
	background: var(--color-azul-oscuro);
	color: #fff;
	border-color: var(--color-azul-oscuro);
}

.prod-paginacion .page-numbers.current span,

.prod-paginacion .page-numbers .current {
	background: var(--color-azul-oscuro);
	color: #fff;
	border-color: var(--color-azul-oscuro);
}

.prod-sidebar__card--oculta {
	display: none;
}
/* ── ETIQUETA "PROMOCIÓN X" (por país) ──
   Se imprime en la ficha, el catálogo y la Home; el JS deja visible solo
   la del país elegido en el header (las demás quedan con [hidden]). */
.promo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--color-azul);
	color: #fff;
	font-family: var(--font-principal);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(0, 93, 190, 0.25);
	white-space: nowrap;
}

.promo-badge[hidden] {
	display: none;
}

.promo-badge strong {
	font-weight: 800;
	background: #fff;
	color: var(--color-azul);
	border-radius: 50px;
	padding: 0.1rem 0.8rem;
}

/* Ficha: debajo del título */
.promo-badge--ficha {
	align-self: flex-start;
	font-size: 1.4rem;
	padding: 0.5rem 0.6rem 0.5rem 1.4rem;
}

/* Tarjetas (catálogo y Home): esquina superior izquierda de la foto */
.pcard__img,
.producto-card__img {
	position: relative;
}

.promo-badge--card {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	font-size: 1.1rem;
	padding: 0.35rem 0.4rem 0.35rem 1rem;
}


/* Círculos de línea (Home): sin contorno de foco, el efecto ya lo indica */
.categorias-list .cat-link:focus {
	outline: none;
}

/* Productos del nav2 es ahora un link directo al portafolio (sin desglose
   de líneas): sin la flechita de submenú del panel de celular */
.nav2__productos-link--directo::after {
	content: none !important;
}

/* Bitácora: aviso "¡Muy pronto!" cuando Videos o Podcasts no tienen
   publicaciones (page-bitacora-paciente.php) */
.bitacora-vacio {
	padding: 2rem 0 1rem;
	text-align: center;
}

.bitacora-vacio__titulo {
	color: #1a56db;
	font-size: 3.2rem;
	font-weight: 800;
	margin: 0 0 .6rem;
}

.bitacora-vacio__texto {
	color: #05294b;
	font-size: 1.7rem;
	margin: 0;
}

@media (max-width: 767px) {
	.bitacora-vacio__titulo {
		font-size: 2.6rem;
	}

	.bitacora-vacio__texto {
		font-size: 1.5rem;
	}
}

/* Bitácora: Historia destacada sin video (aún no hay posts de Video):
   una sola columna centrada, sin hueco a la derecha */
.bitacora-feature.bitacora-feature--sin-video {
	grid-template-columns: 1fr;
	max-width: 80rem;
	text-align: center;
}

.bitacora-feature--sin-video .bitacora-feature__copy {
	padding-left: 0;
}

.bitacora-feature--sin-video .bitacora-description {
	margin-left: auto;
	margin-right: auto;
	max-width: 60rem;
	font-size: 1.6rem;
}

/* Nosotros: video institucional más pequeño y centrado (pedido del cliente) */
.about-video-section .about-video-wrap {
	max-width: 100rem;
	margin: 0 auto;
}

/* Nosotros: más aire entre "Laboratorios Lafage" (mapa) y los tabs
   Misión/Visión/Valores (pedido del cliente) */
.about-map-section {
	margin-bottom: 10rem;
	margin-top: 10rem;
}

@media (max-width: 767px) {
	.about-map-section {
		margin-bottom: 5rem;
		margin-top: 5rem;
	}
}

/* Nosotros: video del mapa (cuadrado) en lugar de la imagen */
.about-map__video {
	aspect-ratio: 1 / 1;
	max-width: 48rem;
	margin: 0 auto;
	object-fit: cover;
	border-radius: 12px;
}

/* Ficha de producto: título "Disponible en:" arriba del carrusel de farmacias */
.sp-farmacias-titulo {
	color: #05294b;
	font-size: 1.5rem;
	font-weight: 700;
	/* el contenedor (.sp-details__bottom) ya separa 14px con gap */
	margin: 0 0 -.6rem;
}

.sp-farmacias-titulo[hidden] {
	display: none;
}