/* ── Hero slider card — glass ─────────────────────────── */
.hero-slider {
	background: rgba(255, 255, 255, 0.12) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.6);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}
.hero-slider__item {
	background: transparent !important;
}
.hero-slider__counter,
.hero-slider__counter-total,
.hero-slider__title,
.hero-slider__item-title {
	color: #fff !important;
}
.hero-slider__progressbar {
	background-color: rgba(255, 255, 255, 0.2) !important;
}
.hero-slider__progressbar .swiper-pagination-progressbar-fill {
	background-color: #fff !important;
}

/* ── Header glass (sticky al volver a subir) ──────────── */
.header._glass {
	background: rgba(10, 10, 20, 0.55);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

/* ── Header — sin cuadritos, texto y logo en blanco ──── */
.header__logo {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}
.header__logo-img {
	filter: brightness(0) invert(1);
	/* Logo más grande sin alterar la altura del header (contenedor fijo a 80rem) */
	width: 130rem;
}
@media only screen and (max-width: 1024px) {
	.header__logo-img {
		width: 64rem;
	}
}
.header__menu {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}
.header__menu-item {
	color: #fff;
}
.header__menu-item .text-hover__elem {
	color: #fff;
}
.header__btn.btn {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}
.header__btn.btn:hover {
	color: #fff;
}
.header__lang-heading.btn {
	background-color: transparent;
	border-color: transparent;
	color: #fff;
}
.header__lang-heading .btn__inner {
	color: #fff;
}
.header__lang-heading svg path {
	fill: #fff !important;
}
.header__lang-dropdown {
	background-color: rgba(20, 20, 20, 0.85);
	backdrop-filter: blur(8px);
}
.header__lang-item,
.header__lang-item .text-hover__elem {
	color: #fff;
}

/* ── Caption del textarea: anclado arriba (el 50% del tema cae en medio
   de un campo alto). En reposo alineado con la primera línea; al escribir
   o enfocar sube pequeño a la esquina, como en los inputs. ── */
.input:has(> textarea.input__field) .input__caption {
	top: 33rem;
	transform: none;
}
.input.focus:has(> textarea.input__field) .input__caption {
	top: 10rem;
	font-size: 12rem;
}

/* ── Select del formulario (pedidos/mes) con el estilo de los inputs ── */
/* Mientras no hay opción elegida, el texto (la pregunta) va en gris como los captions */
select.input__field:required:invalid {
	color: #9c9cab;
}
select.input__field option {
	color: #141414;
}
select.input__field {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.267 7.06149L5.84961 11.7365C6.19441 12.0878 6.80452 12.0878 7.15054 11.7365L11.7331 7.06149C12.0902 6.69643 12.0889 6.10663 11.7295 5.74406C11.37 5.38148 10.7905 5.38148 10.4322 5.74654L7.41586 8.82221V0.931267C7.41586 0.415966 7.00504 0 6.49885 0C5.99266 0 5.58184 0.415966 5.58184 0.931267V8.82221L2.56671 5.74654C2.38698 5.56401 2.15223 5.47337 1.91625 5.47337C1.68272 5.47337 1.44796 5.56401 1.26945 5.74406C0.911205 6.10663 0.909982 6.69643 1.267 7.06149Z' fill='%231F1F61'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 30rem center;
	background-size: 14rem;
}

/* ── Contacto: el formulario va primero ─────────────────
   Al reordenar las secciones, el formulario (.contact) hereda el hueco
   del header fijo (200rem) y el hero de datos pasa a espaciado normal. */
.page-contacts .contact {
	padding-top: 200rem;
}
.page-contacts .hero-contacts {
	padding-top: 90rem;
}

/* ── Desactivar animación de transición entre páginas ─── */
.transition-plug {
	display: none !important;
}

/* ── Header oscuro en páginas blancas solo cuando está en el top ──────
   custom.js añade ._at-top cuando scrollY <= 80 y lo quita en cuanto
   el usuario baja, por lo que el fondo desaparece junto con el header. */
.page-blog .header._at-top,
.page-contacts .header._at-top,
.page-privacy .header._at-top,
.page-article .header._at-top {
	background-color: #1f1f61;
}


/* Botón CTA visible en desktop en página de servicios */
.page-services .contact__btn {
	display: flex;
}

.form-message {
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	display: none;
}

.form-message.success {
	background: rgba(0, 180, 100, 0.15);
	color: #00b464;
	border: 1px solid #00b464;
	display: block;
}

/* ── Modal de éxito del formulario ── */
.tbf-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rem;
	background: rgba(15, 15, 40, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: tbf-fade 0.25s ease;
}
.tbf-modal-backdrop._closing {
	opacity: 0;
	transition: opacity 0.25s ease;
}
.tbf-modal {
	background: #fff;
	border-radius: 16rem;
	padding: 50rem 55rem 45rem;
	max-width: 520rem;
	width: 100%;
	text-align: center;
	box-shadow: 0 25rem 80rem rgba(31, 31, 97, 0.35);
	animation: tbf-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.tbf-modal__icon {
	display: block;
	font-size: 64rem;
	line-height: 1;
	margin-bottom: 18rem;
	animation: tbf-wiggle 1s ease-in-out 0.4s 2;
}
.tbf-modal__title {
	color: #1f1f61;
	font-size: 30rem;
	font-weight: 700;
	margin-bottom: 12rem;
}
.tbf-modal__text {
	color: #55556b;
	font-size: 16rem;
	line-height: 1.5;
	margin-bottom: 28rem;
}
.tbf-modal__close {
	margin: 0 auto;
}
@keyframes tbf-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes tbf-pop {
	0% { transform: scale(0.5); opacity: 0; }
	70% { transform: scale(1.05); }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes tbf-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-12deg) translateY(-4rem); }
	75% { transform: rotate(12deg) translateY(-4rem); }
}

/* ── Confeti temático (mini-cajas, cápsulas y chispas) ── */
.tbf-burst {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	overflow: hidden;
}
.tbf-piece {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform, opacity;
}
/* caja de cartón con su precinto */
.tbf-piece._box {
	background:
		linear-gradient(90deg, transparent 42%, #a8763e 42%, #a8763e 58%, transparent 58%),
		#c99b66;
	border-radius: 2px;
}
.tbf-piece._brand {
	background: #1f1f61;
	border-radius: 2px;
}
.tbf-piece._light {
	background: #ffffff;
	border: 1px solid #d9d9e3;
	border-radius: 2px;
}
/* cápsula bicolor (suplementos) */
.tbf-piece._pill {
	background: linear-gradient(90deg, #1f1f61 50%, #ffffff 50%);
	border: 1px solid #1f1f61;
	border-radius: 999px;
}
.tbf-piece._spark {
	background: #ffd166;
	border-radius: 50%;
}

.form-message.error {
	background: rgba(220, 50, 50, 0.15);
	color: #dc3232;
	border: 1px solid #dc3232;
	display: block;
}

/* Botón mientras se envía: atenuado y sin interacción */
.contact__form-submit._sending {
	opacity: 0.55;
	pointer-events: none;
}

/* Botón de envío centrado */
.contact__form-submit {
	margin-left: auto;
	margin-right: auto;
}

/* Errores de validación debajo de cada campo */
.contact__form-item.input {
	flex-wrap: wrap;
}
.field-error {
	width: 100%;
	margin-top: 8rem;
	padding-left: 40rem;
	color: #dc3232;
	font-size: 13rem;
	font-weight: 500;
}

/* El aviso de error del servidor ocupa su propia línea, centrado */
.form-message.error {
	flex-basis: 100%;
	text-align: center;
}

.input__field.invalid {
	border-color: #dc3232 !important;
}

/* ── Hero About — ABB items sin wrap ─────────────────── */
.hero-about__abb-item {
	display: inline-block !important;
	width: 360rem !important;
	min-width: 360rem !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	overflow: visible !important;
}
.hero-about__abb-item .char,
.hero-about__abb-item .word {
	display: inline-block !important;
	white-space: nowrap !important;
}

/* ── Hero About — imagen de fondo ────────────────────── */
.hero-about {
	background-image: url('../img/about-us/imgHeroAbous.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ── Integraciones — carrusel marquee glass ──────────── */
.clients__title {
	white-space: nowrap !important;
	max-width: none !important;
}
.clients__marquee {
	overflow: hidden;
	padding: 10rem 0 20rem;
	-webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
	display: flex;
	gap: 20rem;
	width: max-content;
	animation: clients-marquee 55s linear infinite;
}
.clients__track:hover {
	animation-play-state: paused;
}
@keyframes clients-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.clients__marquee .clients__item {
	width: 430rem;
	height: 320rem;
	flex-shrink: 0;
	margin-left: 0 !important;
	background: rgba(244, 244, 247, 0.06) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 20rem;
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}
.clients__marquee .clients__item:hover {
	background: rgba(244, 244, 247, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

/* ── Logo en footer oscuro — todas las páginas (blanco sobre negro) ── */
.footer__logo-img {
	filter: brightness(0) invert(1);
}

/* ── Botón "Arriba" alineado al extremo derecho del footer ── */
.footer__bottom-wrap {
	justify-content: flex-end;
}
.footer__up-btn {
	cursor: pointer;
}

/* ══════════════════════════════════════════════
   PÁGINAS DE ARTÍCULO
══════════════════════════════════════════════ */

/* Hero */
.article-hero {
	padding: 200rem 0 0;
}
.article-hero__meta {
	display: flex;
	align-items: center;
	gap: 24rem;
	margin-bottom: 28rem;
}
.article-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 8rem;
	font-size: 13rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(31, 31, 97, 0.5);
	text-decoration: none;
	transition: color 0.2s;
}
.article-hero__back:hover { color: #1F1F61; }
.article-hero__back svg { transition: transform 0.2s; }
.article-hero__back:hover svg { transform: translateX(-4rem); }
.article-hero__category {
	font-size: 12rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #1F1F61;
	background: rgba(31, 31, 97, 0.08);
	padding: 5rem 14rem;
	border-radius: 4rem;
}
.article-hero__date {
	font-size: 13rem;
	color: rgba(31, 31, 97, 0.45);
	letter-spacing: 0.04em;
}
.article-hero__title {
	font-size: 100rem;
	line-height: 0.92;
	text-transform: uppercase;
	max-width: 1500rem;
	margin-bottom: 60rem;
}
.article-hero__cover {
	width: 100%;
	height: 580rem;
	overflow: hidden;
	border-radius: 20rem;
	margin-bottom: 100rem;
}
.article-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: article-img-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes article-img-in {
	from { transform: scale(1.06); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

/* Body */
.article-body { padding: 0 0 100rem; }
.article-body__inner {
	max-width: 860rem;
	margin: 0 auto;
}
.article-body__lead {
	font-size: 26rem;
	line-height: 1.5;
	color: #1F1F61;
	font-weight: 500;
	margin-bottom: 55rem;
	padding-bottom: 55rem;
	border-bottom: 1rem solid rgba(31, 31, 97, 0.15);
}
.article-body__h2 {
	font-size: 52rem;
	text-transform: uppercase;
	line-height: 0.95;
	color: #1F1F61;
	margin: 65rem 0 22rem;
}
.article-body__p {
	font-size: 18rem;
	line-height: 1.75;
	color: rgba(31, 31, 97, 0.72);
	margin-bottom: 22rem;
}
.article-body__quote {
	margin: 55rem 0;
	padding: 28rem 40rem;
	border-left: 4rem solid #1F1F61;
	background: rgba(31, 31, 97, 0.04);
	border-radius: 0 12rem 12rem 0;
	font-size: 24rem;
	font-weight: 600;
	line-height: 1.45;
	color: #1F1F61;
}
.article-body__list {
	list-style: none;
	padding: 0;
	margin-bottom: 30rem;
}
.article-body__list li {
	position: relative;
	padding: 16rem 0 16rem 30rem;
	border-bottom: 1rem solid rgba(31, 31, 97, 0.1);
	font-size: 18rem;
	line-height: 1.6;
	color: rgba(31, 31, 97, 0.72);
}
.article-body__list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: #1F1F61;
	font-weight: 700;
}

/* Responsive artículo */
@media only screen and (max-width: 1024px) {
	.article-hero__title { font-size: 52rem; }
	.article-hero__cover { height: 280rem; border-radius: 10rem; margin-bottom: 50rem; }
	.article-body__lead { font-size: 18rem; }
	.article-body__h2 { font-size: 32rem; }
	.article-body__p, .article-body__list li { font-size: 16rem; }
	.article-body__quote { font-size: 18rem; padding: 20rem 24rem; }
}

/* ── Categorías blog: estado activo ── */
.blog__categories-item a._active .text-hover__elem-1 {
	opacity: 0.5;
	text-decoration: underline;
}

/* ── Formulario de contacto — página de contacto ── */
.page-contacts .contact__container-inner {
	margin-left: auto;
	margin-right: auto;
}

.page-contacts .contact__form {
	background: #fff;
	border-radius: 16rem;
	padding: 44rem 48rem;
	box-shadow: 0 4px 40px rgba(31, 31, 97, 0.09);
	border: 1px solid rgba(31, 31, 97, 0.06);
	gap: 14rem;
}

/* Campos mitad: ocupan 50% en vez del ancho fijo del tema */
.page-contacts .contact__form-item:not(._full-width) {
	width: calc(50% - 7rem) !important;
}

/* Input: fondo suave + borde + esquinas redondeadas sin romper el label flotante */
.page-contacts .input__field {
	background-color: #f6f6fb !important;
	border: 1.5px solid rgba(31, 31, 97, 0.11) !important;
	border-radius: 8rem !important;
	transition: border-color 0.2s, background-color 0.2s;
}

.page-contacts .input__field:focus {
	background-color: #fff !important;
	border-color: #1f1f61 !important;
	outline: none;
}

/* Botón: ancho automático alineado a la izquierda */
.page-contacts .contact__form-submit {
	width: auto !important;
	min-width: 260rem;
	padding-left: 52rem !important;
	padding-right: 52rem !important;
	margin-top: 6rem;
}

@media only screen and (max-width: 768px) {
	.page-contacts .contact__form {
		padding: 28rem 20rem;
		border-radius: 12rem;
	}
	.page-contacts .contact__form-item:not(._full-width) {
		width: 100% !important;
	}
	.page-contacts .contact__form-submit {
		width: 100% !important;
	}
}

/* ── Eliminar gap blanco entre última sección y footer oscuro ── */
.page-services .contact,
.page-blog .contact,
.page-contacts .contact {
	padding-bottom: 0;
}
.page-about .note {
	padding-bottom: 0;
}

/* Hero Servicios — imágenes personalizadas */
.hero-services__section-0 {
	background-image: url(../img/services/imgHeroServicios.webp);
}
.hero-services__section-1 .hero-services__image {
	background-image: url(../img/img2.png);
}
.hero-services__section-2 .hero-services__image {
	background-image: url(../img/img5.png);
	background-position: top center;
}
.hero-services__section-3 .hero-services__image {
	background-image: url(../img/img3.png);
}
.hero-services__section-4 .hero-services__image {
	background-image: url(../img/img4.png);
}
.hero-services__section-5 .hero-services__image {
	background-image: url(../img/img10.png);
}
.hero-services__section-6 .hero-services__image {
	background-image: url(../img/img1.png);
}

/* ── Botón CTA en modales de servicio (fondo oscuro #1f1f61) ── */
.modal-services__cta {
	display: inline-block;
	margin-top: 50rem;
	padding: 16rem 36rem;
	background: #fff;
	color: #1f1f61 !important;
	font-size: 13rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 6rem;
	border: 2rem solid #fff;
	text-decoration: none;
	transition: background 0.25s, color 0.25s;
}
.modal-services__cta:hover {
	background: transparent;
	color: #fff !important;
}

/* Hero About — evitar corte en "FULFILLMENT" */
.hero-about__abb-text {
	white-space: nowrap;
}

/* ── Services homepage: crossfade imagen panel izquierdo ── */
.services__container-inner {
	transition: opacity 0.25s ease;
	background-position: center;
}
.services__container-inner._img-changing {
	opacity: 0.6;
}

/* Note — evitar que los chars de SplitText salten de línea al animar width */
.note__head {
	overflow: visible;
}
.note__head-item {
	white-space: nowrap;
	flex-shrink: 0;
	overflow: visible;
}
.note__head-item .char,
.note__head-item .word {
	display: inline-block !important;
	white-space: nowrap !important;
}