/* =========================================================
   ServiTotal — Ajustes responsivos (tablet / móvil)
   Carga al final para afinar el layout en pantallas pequeñas.
   ========================================================= */

/* ---------- Tablet y menos (<= 900px) ---------- */
@media (max-width: 900px) {

	/* Reduce el padding lateral raíz (en desktop es 40px).
	   WP define la variable en body/.wp-site-blocks, así que hay que
	   pisarla ahí (y en .has-global-padding) para que baje en móvil. */
	body,
	.wp-site-blocks,
	.has-global-padding {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}

	/* Hero Home: solo se recorta el hueco superior. Los laterales los fija
	   home.css con los mismos 20/15 de `.container`; tocarlos aquí es lo que
	   dejaba el hero más estrecho que el resto en tablet. */
	.st-hero-home {
		padding-top: 16px;
	}

	.st-hero-home .st-hero-bg {
		aspect-ratio: 16 / 10;
	}

	.st-hero-home .st-hero__card {
		margin-top: -40px;
		max-width: 100%;
		padding: 24px !important;
	}

	.st-hero__card h1 {
		font-size: 32px !important;
	}

	/* Banner de confianza: la imagen recupera su proporción al apilarse */
	.st-shadow-soft.has-navy-background-color .col-md-5 .st-media--4x3 img {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* ---------- Móvil (<= 600px) ---------- */
@media (max-width: 600px) {

	/* Hero Home más compacto (solo el hueco superior, ver arriba) */
	.st-hero-home {
		padding-top: 12px;
	}

	.st-hero-home .st-hero__card {
		margin-top: -28px;
		padding: 20px !important;
	}

	.st-hero__card h1 {
		font-size: 26px !important;
		line-height: 1.15;
	}

	.st-hero-home .st-search-hero .wp-block-search__inside-wrapper {
		padding: 4px 4px 4px 16px;
	}

	/* Marcas: envuelven en varias filas en vez de comprimirse */
	.st-brands {
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px 26px;
	}

	.st-brands>* {
		flex: 0 0 auto;
		min-width: 0;
	}

	.st-brands img {
		max-height: 26px;
	}

	.st-brands .st-brand-text {
		font-size: 18px;
	}

	/* Tabs "Conoce todos nuestros servicios": scroll horizontal si no caben */
	.st-svc-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.st-svc-tabs .st-svc-tab {
		white-space: nowrap;
		padding: 10px 14px;
		flex: 0 0 auto;
	}

	/* Padding interno grande (p-5 = 40px) demasiado para móvil */
	.p-5 {
		padding: 20px !important;
	}

}

/* ---------- Tablas apiladas (<= 767px) ----------
   Va en esta hoja, la última que carga, porque tiene que ganarle a las
   reglas base de cada tabla en sections.css. */
@media (max-width: 767px) {

	/* Las tablas NO caben a este ancho. Antes se dejaban desplazar en
	   horizontal y el resultado era una tabla cortada sin ninguna pista de que
	   siguiera: aquí se apilan en una tarjeta por fila, con el rótulo de cada
	   columna delante del valor (`data-rotulo`, que pone assets/js/tablas.js).
	   La comparativa de garantía NO entra aquí: el Figma la mantiene como
	   tabla en móvil y cabe (ver `.st-ga-tabla` en sections.css).
	   Siguen siendo un `<table>` de verdad para los lectores de pantalla. */
	.st-tabla-apila,
	.st-lp-tabla {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.st-tabla-apila table,
	.st-lp-tabla table { min-width: 0; width: 100%; }

	.st-tabla-apila thead,
	.st-lp-tabla thead { display: none; }

	.st-tabla-apila :is(tbody, tbody tr, tbody th, tbody td),
	.st-lp-tabla :is(tbody, tbody tr, tbody th, tbody td) { display: block; width: auto; }

	.st-tabla-apila tbody tr,
	.st-lp-tabla tbody tr {
		margin-bottom: 12px;
		border: 1px solid #B2B2B2;
		border-radius: 12px;
		overflow: hidden;
		background: #FFFFFF;
	}

	.st-tabla-apila tbody tr:nth-child(n),
	.st-lp-tabla tbody tr:nth-child(n) { background: #FFFFFF; }

	/* Título de la tarjeta: el `<th>` de la fila, o su primera celda cuando la
	   tabla del cliente no marca cabeceras de fila. */
	.st-tabla-apila tbody :is(th, td:first-child),
	.st-lp-tabla tbody :is(th, td:first-child) {
		padding: 14px 16px;
		background: #00239C;
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
		color: #FFFFFF;
		text-align: left;
	}

	.st-tabla-apila tbody td:not(:first-child),
	.st-lp-tabla tbody td:not(:first-child) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px;
		font-size: 14px;
		line-height: 20px;
		text-align: right;
	}

	.st-tabla-apila tbody td + td,
	.st-lp-tabla tbody td + td { border-top: 1px solid #EEEEEE; }

	.st-tabla-apila tbody td[data-rotulo]::before,
	.st-lp-tabla tbody td[data-rotulo]::before {
		content: attr(data-rotulo);
		flex: 1 1 auto;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: #374151;
		text-align: left;
	}
}


/* =========================================================
   Carruseles horizontales de móvil (<= 767px)
   ---------------------------------------------------------
   En el Figma móvil tres secciones del Home NO se apilan, se recorren en
   horizontal con puntos debajo: «Conoce nuestros servicios» (360px de alto),
   las categorías (353) y las tarjetas del blog (665, una tarjeta a la vista).
   El tema las apilaba y esas tres secciones sumaban ~3.500px de más.

   Se resuelve solo con CSS sobre el marcado que ya hay —las páginas guardan su
   contenido en la base de datos, así que cambiar los patterns no bastaría—.
   Los puntos los añade assets/js/carrusel-movil.js.
   ========================================================= */
@media (max-width: 767px) {

	.row:has(> * > .st-service-card),
	.row:has(> .st-cat),
	.row:has(> * > .st-card) {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: 0;
		padding-bottom: 4px;
		/* La barra de desplazamiento se oculta: la posición la indican los
		   puntos, como en el diseño. */
		scrollbar-width: none;
	}

	.row:has(> * > .st-service-card)::-webkit-scrollbar,
	.row:has(> .st-cat)::-webkit-scrollbar,
	.row:has(> * > .st-card)::-webkit-scrollbar { display: none; }

	.row:has(> * > .st-service-card) > *,
	.row:has(> .st-cat) > *,
	.row:has(> * > .st-card) > * {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
		scroll-snap-align: start;
		padding-inline: 0;
	}

	/* «Conoce nuestros servicios»: en móvil el Figma le da 40 arriba y abajo
	   (la sección mide 360 en total), no los 60/24 de las utilidades. */
	.alignfull:has(> .container > .row > * > .st-service-card) {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* La tarjeta del blog mide 388 en el móvil del Figma (180 de imagen + el
	   cuerpo), no los 488 de escritorio. */
	.row:has(> * > .st-card) .st-card { min-height: 384px; }

	/* Las categorías son fichas pequeñas: caben varias a la vista (Figma: 187
	   de ancho con 24 de separación). */
	.row:has(> .st-cat) { gap: 24px; }

	.row:has(> .st-cat) > .st-cat {
		flex: 0 0 140px;
		width: 140px;
	}

	.st-cat p { margin-top: 16px !important; font-size: 16px !important; }

	/* Puntos indicadores. Mismo lenguaje que el resto de carruseles del tema
	   (ver .st-slider-nav), pero generados por JS junto a la fila. */
	.st-cm-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 24px;
	}

	.st-cm-dots__punto {
		width: 6px;
		height: 6px;
		padding: 0;
		background: #D1D5DB;
		border: 0;
		border-radius: 100px;
		cursor: pointer;
		transition: width .18s ease, height .18s ease, background .18s ease;
	}

	.st-cm-dots__punto.is-active {
		width: 10px;
		height: 10px;
		background: #0A1E4D;
	}
}

/* De tablet hacia arriba las filas vuelven a ser rejilla y los puntos sobran. */
@media (min-width: 768px) {
	.st-cm-dots { display: none; }
}


/* ---------- Tarjeta del blog: recorte de texto (<= 1023px) ----------
   La tarjeta del Figma mide 488 (escritorio y tablet) y 388 en móvil, con el
   texto recortado a las líneas que caben. En el tema el título y el extracto
   crecían con el contenido y a 1023px la fila se iba a 614px de alto. */
@media (max-width: 1023px) {

	.row:has(> * > .st-card) .st-card h3,
	.row:has(> * > .st-card) .st-card > .p-3 > p.has-gray-color:last-of-type {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}


/* =========================================================
   Banner de confianza «Un servicio completo y de confianza»
   ---------------------------------------------------------
   El reparto de las tres tarjetas es el MISMO en los tres tamaños del Figma:
   dos en fila y la tercera a todo el ancho. Lo que cambia es la separación
   (24 en escritorio y tablet, 16 en móvil) y que en móvil la foto pasa de
   estar al lado a estar encima.

   Había una regla que por debajo de 600px ponía las dos primeras a ancho
   completo, así que en el móvil salían las tres apiladas.
   ========================================================= */
@media (max-width: 767px) {

	/* La foto va arriba y mide 330×240 (Figma), no el 16:9 que heredaba. */
	.st-shadow-soft.has-navy-background-color .col-md-5 .st-media--4x3 img {
		aspect-ratio: 330 / 240;
	}

	/* Separación de 16 entre tarjetas: `g-4` son 24 y con ellos las dos de
	   arriba no llegan a los 145 del diseño. */
	.st-shadow-soft.has-navy-background-color .row.g-4 {
		--bs-gutter-x: 16px;
		--bs-gutter-y: 16px;
	}
}