/* =========================================================
   ServiTotal — Home (hero y secciones de la portada)
   ========================================================= */

/* ---------- Hero Home (banner de imagen + tarjeta superpuesta) ---------- */
/* El hero sigue EXACTAMENTE el mismo modelo de márgenes que `.container`
   (80 / 20 / 15 por breakpoint, ancho fluido). Antes se recortaba a los 1280
   del contenido y se centraba: solo coincidía con el resto de la página en un
   viewport de 1440 justo — a 1920 arrancaba 240px más adentro que las demás
   secciones, y en tablet/móvil se veía más estrecho. */
.st-hero-home.alignfull {
	max-width: none;
}

.st-hero-home {
	position: relative;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 39px 15px 0;
}

@media (min-width: 768px) {
	.st-hero-home { padding-inline: 20px; }
}

@media (min-width: 1024px) {
	.st-hero-home { padding-inline: 80px; }
}

/* Fondo de hero genérico (Ubicaciones, Conócenos): imagen absoluta de cobertura */
.st-hero-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.st-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Banner del hero del Home: imagen redondeada en flujo */
.st-hero-home .st-hero-bg {
	position: relative;
	inset: auto;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1280 / 458;
	z-index: auto;
}

/* Tarjeta blanca ancha superpuesta al borde inferior de la foto */
.st-hero-home .st-hero__card {
	position: relative;
	z-index: 2;
	align-self: center;
	width: 100%;
	max-width: 1191px;
	margin-top: -158px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 20px;
	box-shadow: 0 4px 2px rgba(0, 0, 0, .1);
}

.st-hero__card h1 {
	/* Figma: 40px (la tarjeta del hero, no el H1 de página). */
	font-size: 40px !important;
	letter-spacing: -1px;
	line-height: 1.2;
}

.st-hero__card>.has-gray-color {
	color: #888 !important;
}

/* Buscador del hero: botón circular rojo con flecha */
.st-search-hero {
	max-width: 547px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Figma: la píldora del hero mide 48px de alto (no 58). */
.st-search-hero .wp-block-search__inside-wrapper {
	border: 1px solid #d5d5d5;
	box-shadow: none;
	padding: 4px 4px 4px 22px;
	height: 48px;
	align-items: center;
}

.st-search-hero .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	min-width: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.st-search-hero .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.st-search-hero .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* Píldoras de acceso rápido del hero */
.st-hero-pills {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.st-hero-pills .st-pill {
	align-items: center;
	gap: 4px;
	background: linear-gradient(180deg, #fff 22%, #f3f3f3 160%);
	border: 1px solid #c8c8c8;
	border-radius: 999px;
	padding: 12px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.st-hero-pills .st-pill:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 16px rgba(8, 21, 52, .10);
}

/* Figma: el icono va en rojo de marca y el texto en gris #414141. */
.st-hero-pills .st-pill__ico {
	--st-ico: 20px;
	color: var(--wp--preset--color--primary);
}

.st-hero-pills .st-pill p {
	margin: 0;
}

.st-hero-pills .st-pill a {
	color: #414141;
	text-decoration: none;
}

/* ---------- Hero de página con imagen (Conócenos) ---------- */
.st-page-hero-img {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.st-page-hero-img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(8, 21, 52, .6);
}

.st-page-hero-img> :not(.st-hero-bg) {
	position: relative;
	z-index: 2;
}

.st-hero--conocenos h1 {
	max-width: 620px;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left;
}

/* ---------- Hero genérico ---------- */
.st-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 520px;
	display: flex;
	align-items: center;
}

.st-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 21, 52, .15) 0%, rgba(8, 21, 52, .45) 100%);
}

.st-hero>* {
	position: relative;
	z-index: 1;
}

.st-hero__card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(8, 21, 52, .25);
}

@media (max-width: 900px) {
	.st-hero {
		min-height: 420px;
	}
}

@media (max-width: 600px) {
	.st-hero {
		min-height: 380px;
	}
}

/* ---------- Tarjetas de servicio (icono + título en línea; roja SOLO en hover) ---------- */
.st-service-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: #fff;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
	height: 100%;
	/* Figma: 243px de alto con el enlace anclado abajo (la fila del texto
	   absorbe el espacio sobrante, por eso 1fr en la fila central). */
	min-height: 243px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
	column-gap: 6px;
	row-gap: 10px;
}

/* Primera tarjeta destacada: fondo rojo y contenido en blanco (Figma). */
.st-service-card.is-featured {
	background: var(--wp--preset--color--primary) !important;
	border-color: transparent !important;
}

.st-service-card.is-featured :where(h3, p, a) {
	color: #fff !important;
}

.st-service-card.is-featured .st-svc-ico {
	color: #fff;
}

.st-service-card>.st-svc-ico {
	grid-column: 1;
	align-self: center;
	margin: 0;
}

.st-service-card>h3 {
	grid-column: 2;
	align-self: center;
}

.st-service-card>p {
	grid-column: 1 / -1;
	margin: 0;
}

.st-svc-ico {
	--st-ico: 30px;
	color: var(--wp--preset--color--primary);
}

.st-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(8, 21, 52, .12);
	background: var(--wp--preset--color--primary) !important;
	border-color: transparent !important;
}

.st-service-card:hover :where(h3, p, a) {
	color: #fff !important;
}

.st-service-card:hover .st-svc-ico {
	color: #fff;
}

/* ---------- Banner de confianza (tarjetas translúcidas) ---------- */
.st-trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.st-trust-card {
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 20px;
	padding: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
}

.st-trust-card--wide {
	grid-column: 1 / -1;
}

/* Imagen del banner a altura completa y a ras del borde izquierdo */
.st-shadow-soft.has-navy-background-color .col-md-5 {
	display: flex;
}

.st-shadow-soft.has-navy-background-color .col-md-5 .wp-block-image {
	margin: 0;
	width: 100%;
	display: flex;
}

.st-shadow-soft.has-navy-background-color .col-md-5 .st-media--4x3 img {
	aspect-ratio: auto;
	height: 100%;
	width: 100%;
}

.st-trust-card .st-feat-ico {
	--st-ico: 24px;
	color: #fff;
	margin-bottom: 2px;
}

.st-trust-card h4 {
	margin: 0;
	font-size: 20px !important;
}

.st-trust-card p {
	margin: 0;
	color: rgba(255, 255, 255, .82) !important;
}

@media (max-width: 600px) {
	.st-trust-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Categorías (imágenes sobre blanco, sin card) ---------- */
.wp-block-group.has-surface-background-color:has(.st-cat) {
	background-color: #fff !important;
}

.st-cat {
	text-align: center;
}

.st-cat img {
	border-radius: 0;
	aspect-ratio: 187 / 129;
	object-fit: contain;
	width: 100%;
	background: transparent;
}

.st-cat p {
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #393939 !important;
	margin-top: 24px !important;
}

/* Con 8 categorías (Figma: + Muebles y Automotriz) van todas en UNA fila desde
   tablet, igual que en el mockup (que allí recorta a 1003px); por debajo de 768
   mandan las utilidades y quedan de dos en dos. */
@media (min-width: 768px) {

	.row:has(>.st-cat)>.st-cat {
		flex: 0 0 12.5%;
		max-width: 12.5%;
	}
}

/* ---------- Marcas · marquesina (16 logos del Figma en bucle) ---------- */
.st-brands.st-marquee {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	overflow: hidden;
	/* Desvanece los bordes para que la entrada/salida no se vea cortada. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.st-marquee .st-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 48px;
	padding-inline-end: 48px;
	animation: st-marquee-scroll 45s linear infinite;
	will-change: transform;
}

.st-marquee .st-marquee__track>* {
	flex: 0 0 auto;
	margin: 0;
	min-width: 0;
}

/* El Figma acota los logos por ancho (~160px); el alto varía según la marca. */
.st-brands.st-marquee img {
	max-height: 42px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: .95;
}

.st-brands.st-marquee:hover .st-marquee__track,
.st-brands.st-marquee:focus-within .st-marquee__track {
	animation-play-state: paused;
}

@keyframes st-marquee-scroll {
	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 767.98px) {

	.st-brands.st-marquee img {
		max-height: 28px;
		max-width: 108px;
	}

	.st-marquee .st-marquee__track {
		gap: 32px;
		padding-inline-end: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.st-marquee .st-marquee__track {
		animation: none;
	}

	/* Sin animación la pista duplicada sobra: se navega con scroll. */
	.st-marquee .st-marquee__track+.st-marquee__track {
		display: none;
	}

	.st-brands.st-marquee {
		overflow-x: auto;
	}
}

/* ---------- Marcas (logos repartidos de borde a borde) ---------- */
.st-brands {
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}

.st-brands>* {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-brands img {
	max-height: 34px;
	width: auto;
	object-fit: contain;
	opacity: .95;
}

.st-brands .st-brand-text {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	opacity: .9;
	text-align: center;
}

/* ---------- Tabs "Conoce todos nuestros servicios" ---------- */
/* Figma: pestañas contiguas (sin separación), 37px de alto = 10 + 17 + 10.
   La fila es de UNA línea a cualquier ancho y se recorre en horizontal si no
   caben, que es lo que enseña el móvil del Figma (dos pestañas a la vista y la
   segunda cortada). Envolviéndolas, en 360px ocupaban 149px de alto. */
.st-svc-tabs {
	gap: 0;
	/* `!important` porque el marcado lleva la utilidad `.flex-wrap`, que la
	   capa de utilidades declara con `!important` (convención de Bootstrap 5). */
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid #a8abb2;
}

.st-svc-tabs::-webkit-scrollbar { display: none; }

.st-svc-tabs .st-svc-tab {
	margin: 0;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 10px 24px;
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	cursor: pointer;
	color: #a8abb2;
}

.st-svc-tabs .st-svc-tab a {
	color: inherit;
	text-decoration: none;
}

.st-svc-tabs .st-svc-tab.is-active,
.st-svc-tabs .st-svc-tab.is-active a {
	color: #556383;
}

.st-svc-tabs .st-svc-tab.is-active {
	box-shadow: inset 0 -2px 0 #497eff;
}

.st-svc-tabs .st-svc-tab:hover,
.st-svc-tabs .st-svc-tab:hover a {
	color: #556383;
}

.st-tabs .st-tab-panel {
	display: none;
}

.st-tabs .st-tab-panel.is-active {
	display: block;
}

/* Orientación vertical: la barra de pestañas queda como columna a la izquierda
   y el panel activo ocupa el resto. Los paneles inactivos son display:none, así
   que en el flex sólo participan la barra y el panel activo. */
.st-tabs--vertical {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.st-tabs--vertical .st-svc-tabs {
	flex: 0 0 auto;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
	border-bottom: 0;
	border-right: 1px solid #a8abb2;
}

.st-tabs--vertical .st-svc-tabs .st-svc-tab.is-active {
	box-shadow: inset -2px 0 0 #497eff;
}

.st-tabs--vertical .st-tab-panel.is-active {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 700px) {
	/* En móvil, la vertical se apila como la horizontal. */
	.st-tabs--vertical {
		flex-direction: column;
		gap: 0;
	}
	.st-tabs--vertical .st-svc-tabs {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid #a8abb2;
	}
	.st-tabs--vertical .st-svc-tabs .st-svc-tab.is-active {
		box-shadow: inset 0 -2px 0 #497eff;
	}
}

/* Botón de play sobre imagen (video) */
.st-play {
	position: relative;
}

.st-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EA2B27'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
	box-shadow: 0 8px 24px rgba(8, 21, 52, .28);
}

/* ---------- Tarjetas genéricas (blog) ---------- */
.st-card {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	transition: transform .18s ease, box-shadow .18s ease;
	height: 100%;
	/* WP añade padding a .wp-block-group.has-background; la tarjeta no lo
	   quiere (el contenido interno ya trae su propio p-3 pb-4). */
	padding: 0;
}

.st-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(8, 21, 52, .12);
}

.st-card img {
	width: 100%;
	object-fit: cover;
}

.st-card h3 a {
	color: #081534;
	text-decoration: none;
}

.st-card h3 a:hover {
	color: var(--wp--preset--color--primary);
}

.st-card__media {
	position: relative;
}

/* Figma: la tarjeta del blog mide 488px (180 de imagen + 284 de cuerpo + 24). */
.st-blog-grid .st-card,
.row:has(.st-card__media) .st-card {
	min-height: 488px;
	display: flex;
	flex-direction: column;
}

.row:has(.st-card__media) .st-card>.p-3 {
	flex: 1;
}

.st-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	margin: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 6px;
	padding: 4px 10px;
}

/* Pills de filtro (blog) */
/* El contenedor va con `d-flex flex-wrap` pero sin hueco, así que las pastillas
   se tocaban entre sí y, al saltar de línea, con las de arriba. El 17 es el
   `gap` del Frame 67 del Figma.

   La fila es de UNA línea y se recorre en horizontal si no cabe. En el Figma
   son cuatro pastillas en una fila de 37px, pero el bloque pinta todas las
   categorías que haya en la base de datos: con 15, envolvían en cinco líneas
   y se comían 375px de alto en móvil. Así se conserva la altura del diseño sin
   esconderle categorías a nadie. */
.st-blog-filters {
	gap: 17px;
	flex-wrap: nowrap !important;
	/* Alineada al principio: con `center`, al desbordar, la primera pastilla se
	   va a la izquierda del área visible y ya no hay forma de llegar a ella
	   (se medía en −784px). El centrado cuando SÍ caben lo hacen los dos
	   pseudoelementos de abajo con `margin: auto`, que se colapsan solos
	   cuando no sobra sitio. */
	justify-content: flex-start !important;
	overflow-x: auto;
	scrollbar-width: none;
	/* El desbordamiento lateral no debe recortar el foco al tabular. */
	padding-block: 2px;
}

.st-blog-filters::-webkit-scrollbar { display: none; }

/* Centran la fila cuando las pastillas caben y desaparecen cuando no. */
.st-blog-filters::before,
.st-blog-filters::after {
	content: "";
	flex: 0 0 0;
	margin: auto;
}

.st-blog-pill { flex: 0 0 auto; }

.st-blog-pill a { white-space: nowrap; }

.st-blog-pill {
	margin: 0;
}

.st-blog-pill a {
	display: inline-block;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 8px 20px;
	transition: background .18s ease, color .18s ease;
}

.st-blog-pill.is-active a {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-color: var(--wp--preset--color--navy);
}

.st-blog-pill:not(.is-active) a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Chips de etiquetas */
.st-chips .st-chip {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--gray);
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
	padding: 3px 9px;
}

/* ---------- FAQ (details/summary) ---------- */
/* Encabezados azules #00239c (blog y FAQ), scoped por :has */
.wp-block-group:has(> .st-blog-filters)>.wp-block-heading,
.wp-block-group:has(> .st-faq)>.wp-block-heading {
	color: #00239c;
}

.wp-block-group:has(> .st-faq)>.wp-block-heading {
	text-align: left;
}

/* ---------- Acordeón de preguntas frecuentes ----------
   Componente «FAQ / Accordion» del Figma, tres estados:
     cerrado  fondo #fff   · borde #e0e0e7 · icono +
     hover    fondo #f5f5fa
     abierto  fondo #f8f8ff · borde blanco · icono − · divisoria y respuesta
   Cabecera de 64px, radio 12, relleno lateral 20 y 24 de separación entre ítems. */
.st-faq .wp-block-details {
	background: #fff;
	border: 1px solid #e0e0e7;
	border-radius: 12px;
	padding: 0 20px;
	margin-bottom: 24px;
}

.st-faq .wp-block-details:last-child {
	margin-bottom: 0;
}

.st-faq .wp-block-details:hover {
	background: #f5f5fa;
}

.st-faq .wp-block-details[open] {
	background: #f8f8ff;
	border-color: #fff;
}

.st-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #1a1a1f;
	cursor: pointer;
	list-style: none;
}

.st-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Icono de 24px dibujado con dos barras: + al cerrar, − al abrir. */
.st-faq .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background:
		linear-gradient(currentColor, currentColor) center/16px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center/2px 16px no-repeat;
	color: #6b6b7d;
}

.st-faq .wp-block-details[open] summary::after {
	background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
	color: #00239c;
}

/* Divisoria entre la pregunta y la respuesta, solo al abrir. */
.st-faq .wp-block-details[open] summary {
	border-bottom: 1px solid #e0e0e7;
}

.st-faq .wp-block-details p {
	margin: 0;
	padding: 14px 0 0;
	font-size: 14px !important;
	line-height: 20px;
	color: #6b6b7d !important;
}

.st-faq .wp-block-details p:last-child {
	padding-bottom: 14px;
}

/* El panel de las pestañas se divide 663 / 617 en el Figma (51.8% / 48.2%),
   que no es una fracción de la rejilla de 12; se ajusta aquí para que la imagen
   quede en 540px de alto como en el diseño. */
@media (min-width: 768px) {

	.st-tab-panel .row>.col-md-7 {
		flex: 0 0 51.797%;
		max-width: 51.797%;
	}

	.st-tab-panel .row>.col-md-5 {
		flex: 0 0 48.203%;
		max-width: 48.203%;
	}
}

/* Banner de confianza: la tarjeta no se divide en fracciones de la rejilla de 12,
   y además cambia entre tablet y escritorio.
     tablet (993px):    imagen 529 / contenido 464  -> 53.3% / 46.7%
     escritorio (1280): imagen 602 / contenido 678  -> 47.0% / 53.0%
   Ojo: `.st-shadow-soft` es el PADRE de `.row`, no la propia fila. */
@media (min-width: 768px) {

	.st-shadow-soft.has-navy-background-color>.row>.col-md-5 {
		flex: 0 0 53.273%;
		max-width: 53.273%;
	}

	.st-shadow-soft.has-navy-background-color>.row>.col-md-7 {
		flex: 0 0 46.727%;
		max-width: 46.727%;
	}
}

@media (min-width: 1024px) {

	.st-shadow-soft.has-navy-background-color>.row>.col-md-5 {
		flex: 0 0 47.031%;
		max-width: 47.031%;
	}

	.st-shadow-soft.has-navy-background-color>.row>.col-md-7 {
		flex: 0 0 52.969%;
		max-width: 52.969%;
	}
}

/* ---------- Vídeo dentro de un panel de tabs ---------- */
/* El panel es una tarjeta con la foto a la izquierda y las esquinas de ese lado
   redondeadas; el vídeo ocupa ese hueco con su 16:9 y la tarjeta toma su alto,
   igual que en el hero de la landing de Apple. */
.st-tab-video {
	border-radius: 16px 0 0 16px;
	background: #000;
}

@media (max-width: 767px) {
	/* Apilado, la foto pasa a estar arriba: las esquinas redondeadas también. */
	.st-tab-video { border-radius: 16px 16px 0 0; }
}