/* =========================================================
   ServiTotal — Base: primitivas y utilidades compartidas
   ========================================================= */

/* `hidden` tiene que ganar SIEMPRE. Cualquier regla del tema con `display`
   (tarjetas flex, rejillas, barras) pisa el `display:none` que el navegador
   da al atributo, y entonces ocultar algo desde JS deja de funcionar sin que
   se vea el motivo: pasó con los filtros del Centro de soluciones, donde las
   tarjetas seguían visibles con `hidden` puesto. */
[hidden] { display: none !important; }

.st-shadow-soft { box-shadow: 0 10px 30px rgba(8, 21, 52, .10); }

/* Iconos en línea (servitotal_iconbox): el SVG reemplaza al ::before de máscara.
   El ALTO manda y el ancho sale de la proporción: los iconos del Figma no son
   todos cuadrados (chevrones estrechos, logotipos apaisados) y fijar las dos
   medidas los deforma. El color se hereda por `currentColor`. */
.st-ico--box::before { content: none !important; }
.st-ico--box > svg { height: var(--st-ico, 24px); width: auto; max-width: 100%; display: block; }

/* ---------- Botones ----------
   El botón por defecto del tema es una píldora (`elements.button` en
   theme.json), como el máster «Botón» del Figma: #E82927, r100, alto 56.
   El CTA amarillo del header es la excepción: ahí el diseño dibuja un
   rectángulo de 8 (el nodo exterior de 145x36 lleva r8 y tapa la píldora
   que hay dentro), así que se fija aquí. */
/* Medidas del Figma: 145×36, texto de 12px y radio 8. El botón por defecto del
   tema es una píldora de 56 con texto `small`, y aquí salía a 164×45. */
.st-btn-cta a {
	white-space: nowrap;
	min-height: 36px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 20px;
	box-shadow: 0 4px 12px rgba(252, 214, 26, .35);
}

.st-btn-cta a:hover { background: #ffe45a !important; }

/* ---------- Hero de página con overlay ---------- */
.st-page-hero { position: relative; background-size: cover; background-position: center; }
.st-page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(8,21,52,.62); }
.st-page-hero > * { position: relative; z-index: 1; }

/* ---------- Stats ---------- */
.st-stat { text-align: center; }
.st-stat .st-stat__num { color: var(--wp--preset--color--primary); font-weight: 700; font-size: 40px; line-height: 1; }
.st-stat .st-stat__label { color: var(--wp--preset--color--gray); font-size: 14px; margin-top: 6px; }
.st-stat p { margin: 0; }

/* ---------- Insignia circular con ícono ---------- */
.st-icon-circle {
	--st-ico: 26px;
	width: 56px; height: 56px; border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff);
	color: var(--wp--preset--color--primary);
	display: inline-flex; align-items: center; justify-content: center;
}
.st-icon-circle--light { background: rgba(255,255,255,.14); color: #fff; }
.st-icon-circle--yellow { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--navy); }
/* Tamaños de ícono por contexto */
.st-svc-card__top { --st-ico: 40px; color: var(--wp--preset--color--primary); }
.st-branch__map { --st-ico: 38px; color: var(--wp--preset--color--primary); }
.st-tl-dot { --st-ico: 16px; }
.st-feat-ico { --st-ico: 30px; }
.st-check-row { --st-ico: 16px; display: flex; align-items: flex-start; gap: 8px; }
.st-check-row .st-ico--check { color: var(--wp--preset--color--primary); flex: 0 0 auto; margin-top: 3px; }
.st-country__flag { display: inline-flex; align-items: center; }

/* ---------- Imágenes recortadas por relación de aspecto ---------- */
.st-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-media--16x10 img { aspect-ratio: 16 / 10; }
/* Tarjeta del blog: la zona de imagen tiene ALTO FIJO de 180px en el Figma
   (no una proporción: la instancia resuelve 307x180 sea cual sea el ancho). */
.st-media-blog img   { height: 180px; width: 100%; object-fit: cover; aspect-ratio: auto; }
/* Panel de las pestañas del Home: proporción del Figma (663x540). */
.st-media-panel img  { aspect-ratio: 663 / 540; }
.st-media--4x3 img   { aspect-ratio: 4 / 3; }
.st-round-16 img      { border-radius: 16px; }
.st-round-14-top img  { border-radius: 14px 14px 0 0; }
.st-round-16-left img { border-radius: 16px 0 0 16px; }
.st-round-20-left img { border-radius: 20px 0 0 20px; }

/* ---------- Banda CTA ---------- */
.st-cta-band { background: var(--wp--preset--color--primary); }
.st-cta-band :where(h2,p){ color:#fff; }

/* ---------- Listas con viñeta de check (check por CSS) ---------- */
.st-check-list { list-style: none; padding-left: 0; }
.st-check-list li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.st-check-list li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Texto solo para lectores de pantalla.
   `clip-path` en vez del viejo `clip`, y SIN `position: absolute`: un elemento
   absoluto dentro de un contenedor con desplazamiento horizontal se ancla a la
   página y la ensancha (la tabla de garantía estiraba el documento a 475 en una
   pantalla de 375). Con tamaño 1px + `overflow: hidden` basta. */
.st-ga-oculto {
	position: static;
	display: inline-block;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}