/* =========================================================
   ServiTotal — Secciones específicas de páginas
   (splash, garantía, ubicaciones, estado de reparación,
    centro de soluciones)
   ========================================================= */

/* ---------- Splash (portada) ---------- */
.st-splash {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.st-splash__main {
	flex: 1 1 auto;
	display: flex;
}

.st-splash__main>.row {
	flex: 1;
	align-items: stretch;
	margin: 0;
}

.st-splash__photo {
	display: flex;
	flex-direction: column;
}

.st-splash__photo .wp-block-image {
	flex: 1;
	margin: 0;
}

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

.st-splash__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--60);
}

.st-country {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	overflow: hidden;
	margin-bottom: 18px;
}

.st-country>summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 700;
	font-size: 18px;
	color: var(--wp--preset--color--navy);
}

.st-country>summary::-webkit-details-marker {
	display: none;
}

.st-country>summary::before {
	content: "";
	width: 40px;
	height: 28px;
	flex: 0 0 auto;
	background: url(../images/logo-servitotal.png) center / contain no-repeat;
}

.st-country>summary::after {
	content: "⌄";
	margin-left: auto;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	line-height: 1;
}

.st-country[open]>summary::after {
	content: "⌃";
}

.st-country__row {
	margin: 0;
}

.st-country__row a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 20px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	font-size: 17px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.st-country__row a:hover {
	background: #eaf4ff;
	color: var(--wp--preset--color--primary);
}

.st-country__row a::after {
	content: "→";
	margin-left: auto;
	color: var(--wp--preset--color--navy);
	font-size: 18px;
}

.st-splash__bar {
	background: var(--wp--preset--color--primary);
	gap: 16px 44px;
}

.st-splash__bar .st-feat {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.st-splash__bar .st-feat [class*="st-ico--"] {
	--st-ico: 24px;
}

.st-splash__bar .st-feat__txt {
	margin: 0;
}

.st-splash__legal {
	background: var(--wp--preset--color--yellow);
}

@media (max-width: 900px) {
	.st-splash__main>.row {
		flex-wrap: wrap;
	}

	.st-splash__photo {
		min-height: 260px;
	}

	.st-splash__photo img {
		min-height: 260px;
	}
}

/* ---------- Landing Garantía ---------- */
.st-gar-stats {
	margin-top: -46px;
	position: relative;
	z-index: 2;
}

.st-gar-stat {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(8, 21, 52, .10);
	text-align: center;
	padding: 26px 20px;
}

.st-gar-stat__num {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 30px;
	font-weight: 700;
}

.st-gar-stat__label {
	margin: 4px 0 0;
	color: var(--wp--preset--color--gray);
	font-size: 14px;
}

/* Tabla comparativa (bloque wp:table nativo) */
.wp-block-table.st-cmp {
	overflow-x: auto;
}

.st-cmp table {
	border-collapse: collapse;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(8, 21, 52, .08);
	min-width: 640px;
}

.st-cmp th,
.st-cmp td {
	border: 0;
}

.st-cmp th {
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	padding: 18px 22px;
}

.st-cmp th:last-child {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
	text-align: center;
}

.st-cmp td {
	padding: 15px 22px;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
	border-top: 1px solid var(--wp--preset--color--border);
}

.st-cmp td:nth-child(2),
.st-cmp td:nth-child(3) {
	text-align: center;
	font-size: 18px;
}

.st-cmp td:last-child {
	background: #fff9e0;
}

/* Rating */
.st-rating__stars {
	margin: 0;
	color: var(--wp--preset--color--yellow);
	font-size: 26px;
	letter-spacing: 4px;
}

.st-rating__num {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 34px;
	font-weight: 700;
}

/* Testimonios */
.st-quote {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 28px 26px;
}

.st-quote p {
	margin: 0;
}

.st-quote__name {
	margin-top: 16px !important;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

.st-quote__meta {
	margin-top: 2px !important;
}

/* Productos que protegemos */
.st-prot-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	transition: transform .18s ease, box-shadow .18s ease;
}

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

.st-prot-card .wp-block-image {
	width: 100%;
	margin: 0;
}

.st-prot-card h3 {
	margin: 0;
}

/* Retailers (CTA final) */
.st-retailer {
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}

.st-retailer__name {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	letter-spacing: -.3px;
}

.st-retailer__link {
	margin: 0;
}

.st-retailer__link a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}

.st-retailer__link a:hover {
	text-decoration: underline;
}

.st-retailer--bordered {
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 8px 24px rgba(8, 21, 52, .06);
}

/* ---------- Ubicaciones ---------- */
.st-loc-card {
	text-align: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 28px 20px;
	height: 100%;
}

.st-loc-card .st-icon-circle {
	margin: 0 auto 8px;
}

.st-loc-card .st-loc-name {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

.st-loc-card .st-loc-phone {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.st-loc-card .st-loc-meta {
	color: var(--wp--preset--color--gray);
	font-size: 13px;
}

.st-loc-card p {
	margin: 2px 0;
}

/* Tarjetas de sucursal */
.st-branch {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}

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

.st-branch__map {
	height: 170px;
	background: linear-gradient(135deg, #dfe7f5, #eef1f6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	position: relative;
}

.st-branch__map::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(8, 21, 52, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 21, 52, .06) 1px, transparent 1px);
	background-size: 26px 26px;
}

.st-branch__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.st-branch__badge {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff);
	border-radius: 6px;
	padding: 4px 10px;
	margin: 0;
}

.st-branch__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.st-branch__row {
	font-size: 14px;
	color: #4b5566;
	display: flex;
	gap: 8px;
}

.st-branch__row p {
	margin: 0;
}

.st-branch__row [class*="st-ico--"] {
	--st-ico: 16px;
	color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
	margin-top: 2px;
}

.st-branch__actions.wp-block-buttons {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.st-branch__actions .wp-block-button {
	flex: 1;
}

.st-branch__actions .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	padding: 11px 8px;
}

.st-branch__actions .call .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--border);
}

/* Hero Ubicaciones (foto + tarjeta) */
.st-ubi-hero {
	position: relative;
	overflow: hidden;
}

.st-ubi-hero .st-ubi-card {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 16px;
	max-width: 520px;
	margin-left: auto;
	box-shadow: 0 24px 60px rgba(8, 21, 52, .28);
}

.st-ubi-hero .st-ubi-card h1 {
	margin: 0;
}

.st-ubi-hero .st-ubi-card p {
	margin: 0;
}

@media (max-width: 700px) {
	.st-ubi-hero .st-ubi-card {
		max-width: none;
		margin: 0;
	}
}

/* ---------- Estado de la reparación ---------- */
.st-est {
	align-items: flex-start;
}

.st-est__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.st-est__aside .st-form-placeholder {
	padding: 22px;
	text-align: left;
}

.st-est__aside .st-form-placeholder .st-form-note {
	text-align: left;
}

.st-help {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 22px;
}

.st-help__hd {
	margin: 0;
}

.st-help__sub {
	margin: 2px 0 14px;
	font-size: 13px;
	color: var(--wp--preset--color--gray);
}

.st-help__row {
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	margin-bottom: 10px;
}

.st-help__row:hover {
	border-color: var(--wp--preset--color--primary);
}

.st-help__ico {
	--st-ico: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff);
	color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}

.st-help__txt {
	flex: 1;
}

.st-help__txt p {
	margin: 0;
}

.st-help__txt p:first-child a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.st-help__row .st-arrow {
	margin: 0;
	color: var(--wp--preset--color--gray);
	font-size: 20px;
}

.st-est__result {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 28px;
}

.st-est__rhd {
	margin: 0 0 22px;
}

.st-track {
	position: relative;
	margin-bottom: 32px;
}

.st-track::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: var(--wp--preset--color--border);
	z-index: 0;
}

.st-track__step {
	flex: 1;
	text-align: center;
	position: relative;
	z-index: 1;
}

.st-track__ico {
	--st-ico: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--gray);
	border: 2px solid var(--wp--preset--color--border);
	margin: 0 auto;
}

.st-track__lbl {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--gray);
}

.st-track__step.is-done .st-track__ico {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.st-track__step.is-done .st-track__lbl {
	color: var(--wp--preset--color--navy);
}

.st-track__step.is-active .st-track__ico {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
	box-shadow: 0 0 0 6px rgba(37, 99, 235, .15);
}

.st-track__step.is-active .st-track__lbl {
	color: #2563eb;
}

.st-est__cols {
	row-gap: 24px;
}

.st-col__hd {
	margin: 0 0 16px;
}

.st-hist__row {
	align-items: flex-start;
	gap: 12px;
}

.st-hist__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--border);
	background: #fff;
	flex: 0 0 auto;
	margin-top: 3px;
	position: relative;
}

.st-hist__row:not(:last-child) .st-hist__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	width: 2px;
	height: calc(100% + 14px);
	background: var(--wp--preset--color--border);
}

.st-hist__row.is-done .st-hist__dot,
.st-hist__row.is-active .st-hist__dot {
	background: #2563eb;
	border-color: #2563eb;
}

.st-hist__body {
	padding-bottom: 18px;
}

.st-hist__body p {
	margin: 0;
}

.st-hist__date {
	font-size: 11px;
	color: var(--wp--preset--color--gray);
}

.st-hist__row.is-active .st-hist__body p:nth-child(2) {
	color: #2563eb;
}

.st-info {
	background: var(--wp--preset--color--surface);
	border-radius: 12px;
	padding: 22px;
}

.st-info__order {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}

.st-info__k {
	margin: 0;
	font-size: 11px;
	color: var(--wp--preset--color--gray);
	text-transform: uppercase;
	letter-spacing: .4px;
}

.st-info__v {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.st-info__warranty {
	margin-top: 6px;
	background: #fff9e0;
	border-radius: 10px;
	padding: 14px 16px;
}

.st-info__warranty p {
	margin: 2px 0 0;
}

.st-info__wk {
	--st-ico: 16px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 700;
}

/* ---------- Centro de soluciones (catálogo filtrable) ---------- */
.st-solman .st-search .wp-block-search__inside-wrapper {
	box-shadow: 0 8px 24px rgba(8, 21, 52, .14);
}

.st-sol {
	align-items: flex-start;
}

.st-sol__side {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 90px;
}

.st-sol__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 4px 8px 4px 16px;
}

.st-sol__search .wp-block-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14px;
	color: var(--wp--preset--color--navy);
	box-shadow: none;
}

.st-sol__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.st-sol__chip {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
}

.st-sol__chip.is-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.st-sol__grouphd {
	--st-ico: 16px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--navy);
}

.st-sol__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.st-sol__list li {
	font-size: 14px;
	color: var(--wp--preset--color--navy);
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.st-sol__list li.is-active {
	background: #eef2ff;
	color: #2563eb;
	font-weight: 600;
}

.st-sol__list li:not(.is-active):hover {
	background: var(--wp--preset--color--surface);
}

.st-sol__active {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.st-sol__lbl {
	font-size: 12px;
	color: var(--wp--preset--color--gray);
	width: 100%;
}

.st-sol__tagf {
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
	padding: 4px 10px;
}

.st-sol__clear {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.st-sol__clear a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.st-sol__chip,
.st-sol__tagf,
.st-pager__pg,
.st-pager__arrow,
.st-sol__lbl,
.st-sol__date {
	margin: 0;
}

.st-sol__count {
	color: var(--wp--preset--color--gray);
	font-size: 14px;
	margin: 0 0 18px;
}

.st-sol__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.st-sol__card {
	background: #fff;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
}

.st-sol__card .st-card__media img {
	border-radius: 14px 14px 0 0;
	aspect-ratio: 16/10;
}

.st-sol__body {
	padding: 16px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.st-sol__date {
	margin: 0;
	font-size: 12px;
	color: var(--wp--preset--color--gray);
}

.st-sol__body h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.st-sol__body h3 a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

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

.st-pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}

.st-pager__pg,
.st-pager__arrow {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.st-pager__pg.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

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

	.st-sol__side {
		position: static;
	}

	.st-sol__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.st-sol__grid {
		grid-template-columns: 1fr;
	}
}
/* =========================================================
   Ubicaciones — réplica del frame «centros-de-servicio»
   (sección «Ubicaciones» del Figma, 🇸🇻 El salvador).

   Referencias desktop sobre un contenido de 1280:
     hero 417 · sucursales 913 · CTA 328
   ========================================================= */

/* ---------- Hero ---------- */
.st-ubi-hero {
	/* `padding: 0` anula el relleno fantasma del core: todo grupo con fondo
	   recibe 1.25em/2.375em (=38px de lado). Aquí el fondo es una foto. */
	padding: 0;
	/* La foto ya NO va aquí: es un bloque de imagen con `.st-hero-bg` dentro del
	   grupo, para que se pueda reemplazar desde el editor. */
}

/* Por encima de la foto, que se posiciona absoluta a cobertura. */
.st-ubi-hero__inner {
	position: relative;
	z-index: 1;
	min-height: 417px;
	display: flex;
	align-items: center;
	/* La tarjeta va pegada a la DERECHA (align=MAX en el Figma). */
	justify-content: flex-end;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 15px;
}

.st-ubi-hero__card {
	width: 621px;
	max-width: 100%;
	min-height: 313px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 17px 24px;
	background: #FFFFFF;
	border-radius: 12px;
}

.st-ubi-hero__title {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	/* 2 líneas de 58 = los 116 de la caja del Figma. */
	line-height: 58px;
	color: #EA2B27;
}

.st-ubi-hero__lead {
	margin: 0;
	max-width: 573px;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	color: #4D4D4D;
}

/* ---------- Sucursales ---------- */
.st-ubi-branches {
	padding-block: 90px;
	background: #F7F7F7;
}

/* Los títulos de sección son 32/40. El .fig dice 42 y 48, pero ese `fontSize`
   está obsoleto: «¿Necesitas ayuda con tu producto?» no cabe en una línea de
   600 por encima de 32, y las secciones solo cuadran con una caja de 40. */
.st-ubi-branches__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #0A1E4D;
}

.st-ubi-branches__lead {
	margin: 0 auto 60px;
	max-width: 600px;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	color: #454545;
}

.st-ubi-branches__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* ---------- Tarjeta de sucursal (407x593) ---------- */
.st-ubi-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
}

/* El mapa es un iframe (bloque servitotal/map), no una imagen: ocupa la misma
   franja de 220 que la captura del Figma. */
.st-ubi-card__map {
	margin: 0;
	flex: 0 0 220px;
	height: 220px;
	background: #E9EDF2;
}

.st-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.st-ubi-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 25px;
}

.st-ubi-card__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.st-ubi-card__badge {
	margin: 0;
	padding: 6px 12px;
	background: #EBF0FF;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 17px;
	color: #00239C;
}

.st-ubi-card__name {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 38px;
	color: #0A1E4D;
}

.st-ubi-card__meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.st-ubi-card__row {
	--st-ico: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	color: #00239C;
}

.st-ubi-card__row p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #6B7280;
}

/* Los dos botones van apilados y a todo el ancho de la tarjeta (357x52). */
.st-ubi-card__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.st-ubi-card__actions .wp-block-button { width: 100%; }

.st-ubi-btn .wp-block-button__link {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px;
	border-radius: 100px;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}

.st-ubi-btn--dir .wp-block-button__link {
	background-color: #000000;
	color: #FFFFFF;
	font-weight: 700;
}

.st-ubi-btn--call .wp-block-button__link {
	background-color: #F1F5F9;
	color: #0A1E4D;
	font-weight: 600;
}

/* ---------- CTA ---------- */
.st-ubi-cta {
	/* 328 = 64 + 104 + 40 + 56 + 64. El metadato dice 100 de relleno, pero la
	   geometría de los hijos da 64. */
	padding-block: 64px;
	background: #0A1E4D;
}

.st-ubi-cta__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #FFFFFF;
}

.st-ubi-cta__lead {
	margin: 0 auto 40px;
	max-width: 600px;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #FFFFFF;
}

.st-ubi-cta__actions {
	justify-content: center;
}

.st-ubi-btn--cta {
	width: 366px;
	max-width: 100%;
}

.st-ubi-btn--cta .wp-block-button__link {
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	background-color: var(--wp--preset--color--primary);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
}

/* ---------- Tablet (frame «centros-de-servicio - Tablet», 1023x1676) ----------
   hero 417 (tarjeta de 500) · sucursales 786 · CTA 245. Siguen siendo TRES
   tarjetas en fila, de 565 de alto. */
@media (max-width: 1023px) {
	.st-ubi-hero__inner { padding-inline: 20px; }
	.st-ubi-hero__card { width: 500px; }
	.st-ubi-hero__title { font-size: 32px; line-height: 40px; }

	.st-ubi-branches { padding-block: 56px; }
	.st-ubi-branches__lead { margin-bottom: 40px; }
	.st-ubi-branches__row { gap: 32px; }
	.st-ubi-card__name { font-size: 24px; line-height: 32px; }
	.st-ubi-card__body { padding: 20px; gap: 16px; }

	/* CTA 245 = 42 + 64 (título 24 + 16 de hueco + texto 24) + 40 + 56 + 42. */
	.st-ubi-cta { padding-block: 42px; }
	.st-ubi-cta__title { font-size: 24px; line-height: 24px; margin-bottom: 16px; }
	/* A este ancho el diseño lo deja en UNA línea; el tope de 600 del escritorio
	   lo partiría en dos. */
	.st-ubi-cta__lead { max-width: none; margin-bottom: 40px; }
	.st-ubi-branches__title { font-size: 28px; line-height: 36px; }
}

/* ---------- Móvil (frame «centros-servicio-mobile», 360x1643) ----------
   El hero SE PARTE: arriba una banda de foto de 190 y debajo un bloque blanco
   de 208 a todo el ancho y sin radio. Y las tarjetas pasan a CARRUSEL
   horizontal (`carousel-outer` de 605, con puntos debajo). */
@media (max-width: 767px) {
	.st-ubi-hero {
		background-color: #FFFFFF;
		background-size: 100% 190px;
		background-position: top center;
		background-repeat: no-repeat;
	}
	.st-ubi-hero__inner {
		display: block;
		min-height: 0;
		padding: 190px 0 0;
	}
	.st-ubi-hero__card {
		width: 100%;
		min-height: 208px;
		align-items: center;
		gap: 12px;
		padding: 24px 25px;
		border-radius: 0;
		text-align: center;
	}
	.st-ubi-hero__title { font-size: 24px; line-height: 32px; }
	.st-ubi-hero__lead { font-size: 14px; line-height: 20px; }

	.st-ubi-branches { padding-block: 32px 24px; }
	.st-ubi-branches__title { font-size: 22px; line-height: 28px; margin-bottom: 8px; }
	.st-ubi-branches__lead { font-size: 14px; line-height: 20px; margin-bottom: 24px; }

	/* Fila con desplazamiento horizontal y anclaje: reproduce el carrusel del
	   diseño sin JS. Se sale de los márgenes del contenedor a propósito, para
	   que la tarjeta siguiente asome por el borde. */
	.st-ubi-branches__row {
		display: flex;
		gap: 15px;
		margin-inline: -15px;
		padding: 0 15px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.st-ubi-branches__row::-webkit-scrollbar { display: none; }
	.st-ubi-card { flex: 0 0 300px; scroll-snap-align: center; }
	.st-ubi-card__name { font-size: 24px; line-height: 32px; }
	.st-ubi-card__body { padding: 20px; gap: 16px; }

	/* CTA 256 = 24 + 112 (título 2x28 + 16 + texto 2x20) + 40 + 56 + 24. */
	.st-ubi-cta { padding-block: 24px; }
	.st-ubi-cta__title { font-size: 22px; line-height: 28px; margin-bottom: 16px; }
	.st-ubi-cta__lead { font-size: 14px; line-height: 20px; margin-bottom: 40px; }
	.st-ubi-btn--cta { width: 230px; }
}

/* =========================================================
   Contáctanos — réplica del frame «contactanos-landing».
   Referencias desktop sobre un contenido de 1280:
     hero 234 · opciones 314 · formulario 528 · ubicaciones 464
   ========================================================= */

.st-ct-hero {
	padding: 80px 0 60px;
}

.st-ct-hero__title {
	margin: 0 0 12px;
	font-size: 48px;
	font-weight: 800;
	line-height: 58px;
	color: #1A1A1A;
}

.st-ct-hero__lead {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

/* ---------- Opciones de contacto ---------- */
.st-ct-options {
	padding: 0 0 60px;
}

.st-ct-options__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.st-ct-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	min-height: 254px;
	padding: 40px;
	background: #FFFFFF;
	border: 2px solid #D2D2D2;
	border-radius: 16px;
}

.st-ct-card__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.st-ct-card__ico {
	--st-ico: 36px;
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0D0D0D;
	border-radius: 50%;
	color: #FFFFFF;
}

.st-ct-card__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 440px;
}

.st-ct-card__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: #1A1A1A;
}

.st-ct-card__desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

.st-ct-card__actions .wp-block-button { width: 100%; }

.st-ct-btn .wp-block-button__link {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 40px;
	background-color: #0D0D0D;
	border-radius: 100px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

/* ---------- Consulta rápida ---------- */
.st-ct-form {
	padding-block: 38px;
	background: #FAFAFA;
}

/* La tarjeta no tiene fondo propio: en el Figma es del mismo #FAFAFA que la
   sección, así que solo aporta el relleno de 40 y el hueco de 44. */
.st-contacto {
	padding: 40px;
	border-radius: 16px;
}

/* `border-box` en todo el formulario: sin esto el `min-height: 44` de los
   inputs es del contenido y el relleno + borde lo suben a 66, dejando cada
   campo en 102 en vez de los 80 del Figma. */
.st-contacto,
.st-contacto *,
.st-contacto *::before,
.st-contacto *::after {
	box-sizing: border-box;
}

.st-contacto__form {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.st-contacto__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.st-contacto__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Campo de 80 = rótulo 24 + 12 de aire + control 44, como el resto del tema. */
.st-contacto .st-field > label {
	display: block;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	color: #10161F;
}

.st-contacto .st-req { color: var(--wp--preset--color--primary); }

.st-contacto input,
.st-contacto select {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid #E4E0D8;
	border-radius: 10px;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}

.st-contacto input:focus,
.st-contacto select:focus {
	outline: none;
	border-color: #00239C;
	box-shadow: 0 0 0 3px rgba(0, 35, 156, .14);
}

.st-contacto .st-field.has-error input,
.st-contacto .st-field.has-error select {
	border-color: #EF4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

/* Trampa para robots: fuera de pantalla, pero no `display:none` (algunos la
   detectan). */
.st-contacto__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-contacto__submit {
	--st-ico: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 14px 24px;
	background: #E82927;
	border: 0;
	border-radius: 100px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.st-contacto__submit:disabled { opacity: .6; cursor: default; }

.st-contacto__alert {
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
}

.st-contacto__alert.is-ok { background: #F1FCFA; border: 1px solid #019382; color: #019382; }
.st-contacto__alert.is-error { background: #FEF2F2; border: 1px solid #EF4444; color: #B91C1C; }

/* ---------- Ubicaciones ---------- */
.st-ct-locs {
	padding-block: 80px;
}

/* Aquí el título SÍ es 36 ExtraBold: es un nodo distinto del de Repuestos
   (32/40 Bold). Cada página tiene el suyo. */
.st-ct-locs__title {
	margin: 0 0 40px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	color: #1A1A1A;
}

.st-ct-locs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.st-ct-loc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-height: 224px;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 12px;
}

.st-ct-loc__ico {
	--st-ico: 24px;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EA2B27;
	border-radius: 50%;
	color: #FFFFFF;
}

.st-ct-loc__head,
.st-ct-loc__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.st-ct-loc__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 24px; color: #1A1A1A; }
.st-ct-loc__phone { margin: 0; font-size: 14px; font-weight: 700; line-height: 24px; color: #1A1A1A; }
.st-ct-loc__line { margin: 0; font-size: 12px; font-weight: 400; line-height: 24px; color: #666666; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.st-ct-hero { padding: 56px 0 40px; }
	.st-ct-hero__title { font-size: 36px; line-height: 44px; }
	.st-ct-options { padding-bottom: 40px; }
	.st-ct-options__row { gap: 24px; }
	.st-ct-card { padding: 32px; }
	.st-ct-card__title { font-size: 20px; }
	.st-ct-locs { padding-block: 56px; }
	.st-ct-locs__title { font-size: 28px; margin-bottom: 32px; }
	.st-contacto { padding: 32px 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.st-ct-hero { padding: 40px 0 32px; }
	.st-ct-hero__title { font-size: 28px; line-height: 34px; }
	.st-ct-hero__lead { font-size: 15px; }

	.st-ct-options { padding-bottom: 32px; }
	.st-ct-options__row { grid-template-columns: 1fr; gap: 16px; }
	.st-ct-card { padding: 24px; min-height: 0; }
	.st-ct-card__head { flex-direction: column; text-align: center; gap: 16px; }
	.st-ct-card__ico { flex-basis: 64px; width: 64px; height: 64px; --st-ico: 28px; }
	.st-ct-card__title { font-size: 20px; line-height: 26px; }

	.st-ct-form { padding-block: 24px; }
	.st-contacto { padding: 0; }
	.st-contacto__form { gap: 24px; }
	.st-contacto__row { grid-template-columns: 1fr; }

	.st-ct-locs { padding-block: 32px; }
	.st-ct-locs__title { font-size: 24px; margin-bottom: 24px; }
	.st-ct-locs__grid { grid-template-columns: 1fr; }
	.st-ct-loc { min-height: 0; }
}

/* =========================================================
   Servicios — réplica del frame `centros-de-servicio` de la
   sección «SERVICIOS» (nodo 769:22065 — NO confundir con el
   del mismo nombre de «Ubicaciones»).

   Referencias desktop sobre un contenido de 1280:
     hero 417 · tarjetas 755
   ========================================================= */

.st-sv-hero {
	position: relative;
	/* `padding: 0` anula el relleno fantasma del core en grupos con fondo. */
	padding: 0;
	overflow: hidden;
	background: linear-gradient(90deg, #000F32 0%, #0047F2 100%);
}

/* Arcos concéntricos del diseño (Group 57): van detrás del técnico y se
   recortan con el `overflow` de la sección. Es decorativo, así que va como
   fondo y no como bloque de imagen. */
.st-sv-hero::before {
	content: "";
	position: absolute;
	top: -341px;
	right: calc(50% - 720px + 11px);
	width: 890px;
	height: 1114px;
	background: url("../images/hero-servicios-arcos.svg") no-repeat center / contain;
	opacity: .5;
	pointer-events: none;
}

.st-sv-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 10px;
	min-height: 417px;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 127px;
}

.st-sv-hero__text {
	flex: 0 1 625px;
	max-width: 625px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.st-sv-hero__title {
	margin: 0;
	font-size: 48px;
	font-weight: 800;
	line-height: 70px;
	color: #FFFFFF;
}

.st-sv-hero__lead {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: #FFFFFF;
}

.st-sv-hero__visual {
	flex: 0 0 536px;
	width: 536px;
	align-self: flex-end;
}

.st-sv-hero__img {
	margin: 0;
}

.st-sv-hero__img img {
	display: block;
	width: 536px;
	max-width: 100%;
	height: 413px;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(-2px 1px 52px rgba(0, 14, 62, .4));
}

/* ---------- Tarjetas ---------- */
.st-sv-cards {
	padding-block: 90px;
	background: #F7F7F7;
}

/* 32/40 como el resto de títulos de sección: el .fig dice 42 en una caja de 40
   y ese `fontSize` está obsoleto. */
.st-sv-cards__title {
	margin: 0 0 60px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #0A1E4D;
}

.st-sv-cards__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.st-sv-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

/* Zona del icono: 220 de alto con degradado gris, como en el Figma. El diseño
   pone ahí una ilustración 3D genérica repetida en las cuatro tarjetas; aquí va
   el icono propio de cada servicio. */
.st-sv-card__media {
	flex: 0 0 220px;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #F9F9F9 0%, #EEEEEE 100%);
}

.st-sv-card__ico {
	--st-ico: 84px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00239C;
}

.st-sv-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
}

.st-sv-card__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.st-sv-card__badge {
	align-self: flex-start;
	margin: 0;
	padding: 4px 10px;
	background: #EBF0FF;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	color: #00239C;
}

.st-sv-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: #111111;
}

.st-sv-card__desc {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #6C6C6C;
}

/* La flecha del enlace se dibuja con ::after para no meter un icono suelto. */
.st-sv-card__cta {
	margin: 0;
	padding-block: 12px;
}

.st-sv-card__cta a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #E30613;
	text-decoration: none;
}

.st-sv-card__cta a::after {
	content: "";
	width: 14px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M8 2l4 3.5L8 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 5.5h11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M8 2l4 3.5L8 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 5.5h11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Tablet (frame de 768) ---------- */
@media (max-width: 1023px) {
	.st-sv-hero__inner { padding-inline: 32px; gap: 24px; }
	.st-sv-hero__title { font-size: 36px; line-height: 46px; }
	.st-sv-hero__lead { font-size: 17px; line-height: 24px; }
	.st-sv-hero__visual { flex-basis: 300px; width: 300px; }
	.st-sv-hero__img img { width: 300px; height: 320px; }

	.st-sv-cards { padding-block: 56px; }
	.st-sv-cards__title { font-size: 28px; margin-bottom: 40px; }
	.st-sv-cards__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.st-sv-card__media { flex-basis: 180px; height: 180px; }
	.st-sv-card__ico { --st-ico: 68px; }
}

/* ---------- Móvil (frame de 360) ---------- */
@media (max-width: 767px) {
	.st-sv-hero::before { display: none; }
	.st-sv-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 32px 16px 0;
		gap: 24px;
	}
	.st-sv-hero__text { flex: 1 1 auto; max-width: 100%; gap: 16px; }
	.st-sv-hero__title { font-size: 28px; line-height: 36px; }
	.st-sv-hero__lead { font-size: 15px; line-height: 22px; }
	.st-sv-hero__visual { flex: 1 1 auto; width: 100%; align-self: center; }
	.st-sv-hero__img img { width: 100%; height: 280px; }

	.st-sv-cards { padding-block: 32px; }
	.st-sv-cards__title { font-size: 24px; line-height: 32px; margin-bottom: 24px; }
	.st-sv-cards__row { grid-template-columns: 1fr; gap: 16px; }
	.st-sv-card__media { flex-basis: 160px; height: 160px; }
	.st-sv-card__ico { --st-ico: 64px; }
}

/* =========================================================
   Conócenos — réplica del frame «conocenos-landing».
   Referencias desktop sobre un contenido de 1280:
     hero 385 · historia 860 · razón de ser 618 · valores 745
     certificaciones 794 · equipo 688 · CTA 328
   ========================================================= */

.st-cn-hero {
	position: relative;
	padding: 30px 0 60px;
	min-height: 385px;
	display: flex;
	align-items: flex-start;
	/* La foto es un bloque de imagen con `.st-hero-bg`, reemplazable desde el
	   editor; aquí solo se la coloca detrás del contenido. */
}

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

/* «75 años» va a 71px en Inter Black y amarillo: en el Figma es un tramo con
   estilo propio dentro del mismo texto. */
.st-cn-hero__title mark {
	font-size: 71px;
	font-weight: 900;
	line-height: 1;
}

.st-cn-hero__title {
	margin: 0;
	max-width: 950px;
	font-size: 47.5px;
	font-weight: 800;
	line-height: 69px;
	color: #FFFFFF;
}

/* ---------- Historia ---------- */
.st-cn-historia {
	padding: 32px 0 100px;
}

.st-cn-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 52px;
}

/* Las tres tarjetas comparten borde: el Figma las pega sin separación. */
/* El Figma NO pone recuadro: solo una línea divisoria a la DERECHA de las dos
   primeras (`borderStrokeWeightsIndependent` con solo `borderRightWeight`), y
   la tercera sin ninguna. Por eso la del medio parece tener línea a los dos
   lados. */
.st-cn-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 160px;
	padding: 32px;
	background: #FFFFFF;
	border: 0;
}

.st-cn-stat:not(:last-child) { border-right: 1px solid #D5D4D4; }

.st-cn-stat__num {
	margin: 0;
	font-size: 48px;
	font-weight: 900;
	line-height: 58px;
	color: #EA2B27;
}

.st-cn-stat__label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 17px;
	color: #081534;
}

.st-cn-historia__row {
	display: flex;
	align-items: center;
	gap: 65px;
	min-height: 516px;
}

.st-cn-mapa {
	flex: 0 0 560px;
	width: 560px;
	height: 498px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #EFF3FF;
	border-radius: 20px;
}

.st-cn-mapa__img {
	margin: 0;
	width: 424px;
}

.st-cn-mapa__img img {
	display: block;
	width: 424px;
	height: auto;
}

/* Chapa roja del diseño (Frame 48, 135px con sombra) CON la mascota dentro:
   no es un círculo vacío. */
.st-cn-mapa__chapa {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 135px;
	height: 135px;
	margin: -68px 0 0 -56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E82927;
	border-radius: 50%;
	box-shadow: -1px 9px 15px rgba(0, 0, 0, .5);
}

.st-cn-mapa__chapa img {
	display: block;
	width: 95px;
	height: auto;
}

.st-cn-historia__text {
	flex: 0 1 655px;
	max-width: 655px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.st-cn-historia__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #081534;
}

.st-cn-historia__lead {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #6B7280;
}

/* ---------- Nuestra razón de ser ---------- */
.st-cn-razon {
	padding-block: 88px;
	background: #F7F7F7;
}

.st-cn-razon__title {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 800;
	line-height: 40px;
	color: #081534;
}

.st-cn-razon__lead {
	margin: 0 0 48px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #6B7280;
}

.st-cn-razon__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.st-cn-mv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 318px;
	padding: 40px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 12px;
}

/* Chapa de 72 en rojo con el icono en blanco. */
.st-cn-mv__ico {
	--st-ico: 32px;
	width: 72px;
	height: 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #E82927;
	border-radius: 50%;
	color: #FFFFFF;
}

.st-cn-mv__title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 38px;
	color: #E82927;
}

.st-cn-mv__text {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #6B7280;
}

/* ---------- Valores ---------- */
.st-cn-valores {
	padding-block: 88px;
}

.st-cn-valores__title {
	margin: 34px 0 16px;
	font-size: 40px;
	font-weight: 800;
	line-height: 40px;
	color: #081534;
}

/* 34 para cerrar el bloque de cabecera + 35 de hueco hasta la rejilla. */
.st-cn-valores__lead {
	margin: 0 0 69px;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #666666;
}

.st-cn-valores__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
}

.st-cn-valor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 180px;
	padding: 12px;
	border: 1px solid #E8E8E8;
	border-radius: 12px;
}

.st-cn-valor__ico {
	--st-ico: 24px;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFE7E7;
	border-radius: 50%;
	color: #E82927;
}

/* El Figma pone estos títulos en #C6B5B5 (contraste ~2:1 sobre blanco, no
   legible) salvo uno en #081534. Se usa el legible en los diez. */
.st-cn-valor__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: #081534;
}

.st-cn-valor__desc {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

/* ---------- Certificaciones ---------- */
.st-cn-certs {
	padding-block: 80px;
	background: #F7F7F7;
}

.st-cn-certs__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #081534;
}

.st-cn-certs__lead {
	margin: 0 0 46px;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

.st-cn-certs__row {
	display: flex;
	align-items: center;
	gap: 22px;
}

.st-cn-certs__aside {
	flex: 0 0 310px;
	width: 310px;
	border-radius: 12px;
	overflow: hidden;
}

.st-cn-certs__foto { margin: 0; }

.st-cn-certs__foto img {
	display: block;
	width: 100%;
	height: 362px;
	object-fit: cover;
}

.st-cn-certs__pie {
	box-sizing: border-box;
	margin: 0;
	min-height: 123px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: #0027AD;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #FFFFFF;
}

/* En el Figma esta fila es un CARRUSEL (lleva flecha de «siguiente» a la
   derecha): las cuatro tarjetas van a 298 fijos y la fila se desplaza. */
.st-cn-certs .st-cn-certs__puntos { display: none; }

.st-cn-certs__cards {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.st-cn-certs__cards::-webkit-scrollbar { display: none; }

.st-cn-cert {
	flex: 0 0 298px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 508px;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 12px;
}

/* Chapa de marca: 234x180 con degradado azulado muy leve. La foto lateral es
   la única pieza de la fila que no lleva. */
.st-cn-cert__marca {
	--st-ico: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	background: linear-gradient(180deg, rgba(242, 245, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
	border-radius: 12px;
	color: #000000;
}

.st-cn-cert__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #081534;
}

.st-cn-cert__desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	color: #6B7280;
}

/* Los checks son marca de lista, no iconos sueltos. */
.st-cn-cert__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.st-cn-cert__list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 24px;
	color: #081534;
}

.st-cn-cert__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #E82927;
	font-weight: 700;
}

/* ---------- Equipo ---------- */
.st-cn-equipo {
	padding-block: 80px;
}

.st-cn-equipo__title {
	margin: 0 0 16px;
	font-size: 40px;
	font-weight: 800;
	line-height: 40px;
	color: #081534;
}

.st-cn-equipo__lead {
	margin: 0 0 64px;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #666666;
}

/* También es un carrusel en el Figma (lleva indicadores debajo). */
.st-cn-equipo__row {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.st-cn-equipo__row::-webkit-scrollbar { display: none; }

/* La fila va CENTRADA (Figma: «Frame 689» con align=CENTER). Las tarjetas miden
   405 fijos, así que a partir de 1440 sobra sitio y sin esto se quedaban
   pegadas a la izquierda con un hueco a la derecha.

   Se centra con `width: fit-content` + márgenes automáticos, NO con
   `justify-content: center` ni con pseudoelementos:
     · `center` en un contenedor con desplazamiento deja la primera tarjeta
       fuera del área visible cuando desborda, y ya no hay forma de llegar a
       ella (en móvil son tres tarjetas de 330 en 330 de ancho);
     · dos pseudoelementos con `margin: auto` cuentan como hijos y el `gap`
       de 32 se aplicaba también a ellos: la fila crecía 64px de la nada.
   Con `max-width: 100%` la fila vuelve a desbordar y desplazarse en cuanto las
   tarjetas no caben. */
.st-cn-equipo__row {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.st-cn-persona {
	flex: 0 0 405px;
	max-width: 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	min-height: 339px;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 16px;
}

.st-cn-persona__foto { margin: 0; }

.st-cn-persona__foto img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.st-cn-persona__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.st-cn-persona__nombre { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; color: #081534; }
/* El puesto es una PASTILLA, no una línea de texto suelta. */
.st-cn-persona__rol {
	align-self: center;
	margin: 0;
	padding: 4px 12px;
	background: #F3F5FF;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	line-height: 15px;
	color: #E82927;
}
.st-cn-persona__bio { margin: 0; font-size: 15px; font-weight: 400; line-height: 24px; color: #6B7280; }

/* ---------- CTA ---------- */
.st-cn-cta {
	padding-block: 80px;
	background: #EA2B27;
}

.st-cn-cta__title {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 900;
	line-height: 44px;
	color: #FFFFFF;
}

.st-cn-cta__lead {
	margin: 0 0 32px;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	color: #FFDADA;
}

.st-cn-cta__actions { justify-content: center; }

.st-cn-cta__btn {
	width: 575px;
	max-width: 100%;
}

.st-cn-cta__btn .wp-block-button__link {
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	background-color: #FFFFFF;
	border-radius: 100px;
	color: #EA2B27;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

/* ---------- Tablet (frame «conocenos-landing - Tablet», 1023x4336) ----------
   hero 385 · historia 650 · razón 508 · valores 926 · certs 708 · equipo 584 · CTA 308.
   OJO: a este ancho el diseño NO apila ni el mapa ni las certificaciones. */
@media (max-width: 1023px) {
	.st-cn-hero { min-height: 385px; }
	.st-cn-hero__title { font-size: 36px; line-height: 46px; }
	.st-cn-hero__title mark { font-size: 52px; }

	.st-cn-historia { padding: 32px 0 60px; }
	.st-cn-stats { margin-bottom: 52px; }
	.st-cn-stat { min-height: 167px; padding: 24px; gap: 12px; }
	.st-cn-stat__num { font-size: 40px; line-height: 48px; }

	/* Sigue en fila: el mapa se encoge, no se va debajo. */
	.st-cn-historia__row { min-height: 339px; gap: 22px; }
	.st-cn-mapa { flex: 0 1 460px; width: auto; height: 339px; }
	.st-cn-mapa__img, .st-cn-mapa__img img { width: 300px; }
	.st-cn-mapa__chapa { width: 96px; height: 96px; margin: -48px 0 0 -40px; }
	.st-cn-mapa__chapa img { width: 68px; }
	.st-cn-historia__text { max-width: none; gap: 20px; }
	.st-cn-historia__title { font-size: 28px; line-height: 36px; }

	.st-cn-razon { padding-block: 56px; }
	.st-cn-razon__lead { margin-bottom: 48px; }
	.st-cn-mv { min-height: 0; padding: 32px; }

	.st-cn-valores { padding-block: 56px; }
	.st-cn-valores__title { margin-top: 42px; font-size: 32px; line-height: 40px; }
	.st-cn-valores__lead { margin-bottom: 66px; font-size: 18px; }
	/* Cuatro columnas y tarjetas de 229x198. */
	.st-cn-valores__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.st-cn-valor { min-height: 198px; }

	.st-cn-certs { padding-block: 56px; }
	.st-cn-certs__title { font-size: 32px; line-height: 40px; }
	.st-cn-certs__lead { margin-bottom: 46px; }
	/* También sigue en fila. */
	.st-cn-certs__row { flex-direction: row; gap: 22px; }
	.st-cn-certs__aside { flex: 0 0 310px; width: 310px; }

	.st-cn-equipo { padding-block: 56px; }
	.st-cn-equipo__title { font-size: 32px; line-height: 40px; }
	.st-cn-equipo__lead { margin-bottom: 40px; font-size: 16px; }
	.st-cn-persona { flex-basis: 310px; min-height: 323px; }

	.st-cn-cta { padding-block: 80px; }
	.st-cn-cta__title { font-size: 32px; line-height: 40px; }
}

/* ---------- Móvil (frame «conocenos-mobile», 390x4371) ----------
   hero 186 · historia 749 · razón 731 · valores 800 · certs 769 · equipo 561 · CTA 308. */
@media (max-width: 767px) {
	.st-cn-hero { min-height: 186px; padding: 30px 0 60px; }
	.st-cn-hero__title { font-size: 26px; line-height: 34px; }
	.st-cn-hero__title mark { font-size: 38px; }

	.st-cn-historia { padding: 32px 0 48px; background: #FFFFFF; text-align: center; }
	/* Las cifras pasan a DOS filas (2 + 1) y recuperan su recuadro, porque ya
	   no están pegadas en una sola línea. */
	.st-cn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin-bottom: 24px; }
	.st-cn-stat { min-height: 78px; padding: 12px; gap: 4px; border: 1px solid #D5D4D4; border-radius: 8px; }
	.st-cn-stat:not(:last-child) { border-right: 1px solid #D5D4D4; }
	.st-cn-stat:last-child { grid-column: 1 / -1; min-height: 54px; }
	.st-cn-stat__num { font-size: 28px; line-height: 34px; }
	.st-cn-stat__label { font-size: 12px; line-height: 15px; }

	.st-cn-historia__row { flex-direction: column; min-height: 0; gap: 24px; }
	.st-cn-mapa { flex: 1 1 auto; width: 100%; height: 294px; background: transparent; }
	.st-cn-mapa__img, .st-cn-mapa__img img { width: 250px; }
	.st-cn-mapa__chapa { width: 80px; height: 80px; margin: -40px 0 0 -34px; }
	.st-cn-mapa__chapa img { width: 56px; }
	/* `flex: 0 0 auto` es imprescindible: en columna, el `flex-basis: 655px` que
	   hereda del escritorio se convierte en ALTURA y dispara la sección. */
	.st-cn-historia__text { flex: 0 0 auto; max-width: 100%; align-items: center; gap: 12px; }
	.st-cn-historia__title { font-size: 22px; line-height: 27px; text-align: center; }
	.st-cn-historia__lead { font-size: 14px; line-height: 24px; text-align: center; }

	.st-cn-razon { padding-block: 48px; }
	.st-cn-razon__title { font-size: 22px; line-height: 28px; }
	.st-cn-razon__lead { margin-bottom: 16px; font-size: 14px; }
	.st-cn-razon__row { grid-template-columns: 1fr; gap: 16px; }
	.st-cn-mv { min-height: 0; padding: 24px; }
	.st-cn-mv__ico { width: 56px; height: 56px; --st-ico: 26px; }
	.st-cn-mv__title { font-size: 20px; line-height: 28px; }
	.st-cn-mv__text { font-size: 14px; }

	.st-cn-valores { padding-block: 48px; background: #FFFFFF; }
	.st-cn-valores__title { margin-top: 0; font-size: 22px; line-height: 27px; }
	.st-cn-valores__lead { margin-bottom: 24px; font-size: 14px; }
	/* A este ancho los valores pierden el recuadro: son icono + texto sueltos. */
	.st-cn-valores__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.st-cn-valor { min-height: 112px; padding: 0; gap: 12px; border: 0; border-radius: 0; }
	.st-cn-valor__ico { width: 56px; height: 56px; --st-ico: 22px; }
	.st-cn-valor__title { font-size: 16px; line-height: 20px; }
	.st-cn-valor__desc { font-size: 13px; line-height: 18px; }

	.st-cn-certs { padding-block: 60px; background: #FFFFFF; }
	.st-cn-certs__title { font-size: 24px; line-height: 29px; }
	.st-cn-certs__lead { margin-bottom: 24px; font-size: 14px; line-height: 21px; }
	/* `align-items: stretch` es necesario: con el `center` que hereda del
	   escritorio, el carrusel se ajusta al ANCHO DE SU CONTENIDO (1272) en vez
	   de al del contenedor, y desborda la página. */
	.st-cn-certs__row { flex-direction: column; align-items: stretch; gap: 24px; }
	.st-cn-certs__cards { width: 100%; min-width: 0; }
	/* La tarjeta de la foto se vuelve una franja HORIZONTAL: foto a la izquierda
	   y el rótulo azul a la derecha. */
	/* Franja horizontal de 123: la foto y el rótulo azul miden lo mismo. Sin
	   fijar el alto en el contenedor, el rótulo se estiraba a 143 y quedaba
	   colgando por debajo de la foto. */
	.st-cn-certs__aside {
		flex: 1 1 auto;
		width: 100%;
		height: 123px;
		display: flex;
		align-items: stretch;
	}
	.st-cn-certs__foto { flex: 0 0 45%; height: 123px; }
	.st-cn-certs__foto img { height: 123px; }
	.st-cn-certs__pie { flex: 1 1 auto; min-height: 0; height: 123px; font-size: 14px; }

	/* El carrusel sangra hasta el borde de la pantalla (el marco lo dibuja a
	   390 con 15 de relleno, no a los 360 del contenedor): así la tarjeta
	   siguiente asoma en vez de quedar cortada por el contenedor. */
	.st-cn-certs__cards {
		width: auto;
		margin-inline: -15px;
		padding-inline: 15px;
		scroll-padding-left: 15px;
	}

	/* A este ancho el control son PUNTOS, no la flecha. Con `.st-cn-certs`
	   delante, porque la regla base de la flecha va después en el archivo. */
	.st-cn-certs .st-cn-certs__flecha { display: none; }
	.st-cn-certs .st-cn-certs__puntos { display: flex; margin-top: 24px; }
	/* Tarjeta de 300x328 en el Figma: la chapa de marca baja de 180 a 110. */
	.st-cn-cert { flex-basis: 300px; min-height: 0; padding: 20px; gap: 16px; }
	.st-cn-cert__marca { height: 110px; --st-ico: 60px; }
	.st-cn-cert__title { font-size: 17px; line-height: 22px; }
	.st-cn-cert__desc { font-size: 13px; line-height: 20px; }
	.st-cn-cert__list li { font-size: 13px; line-height: 20px; }

	.st-cn-equipo { padding-block: 60px; }
	.st-cn-equipo__title { font-size: 26px; line-height: 32px; }
	.st-cn-equipo__lead { margin-bottom: 24px; font-size: 15px; }
	.st-cn-equipo__row { gap: 16px; }
	.st-cn-persona { flex-basis: 100%; min-height: 319px; }

	.st-cn-cta { padding-block: 60px; }
	.st-cn-cta__title { font-size: 24px; line-height: 30px; }
	.st-cn-cta__lead { font-size: 16px; }
}

/* =========================================================
   Controles de carrusel (bloque servitotal/slider-nav)
   ========================================================= */

.st-slider-nav--puntos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10.5px;
	margin-top: 32px;
}

/* Figma: el activo mide 13 y los inactivos 8. Se reserva el alto del mayor
   para que la fila no dé un salto al cambiar de tarjeta. */
.st-slider-nav__punto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D1D5DB;
	cursor: pointer;
	transition: width .15s ease, height .15s ease, background .15s ease;
}

.st-slider-nav__punto.is-active {
	width: 13px;
	height: 13px;
	background: #0A1E4D;
}

.st-slider-nav__punto:focus-visible {
	outline: 2px solid #0A1E4D;
	outline-offset: 3px;
}

/* Cuando la fila cabe entera no hay nada que recorrer. Los puntos siguen a la
   vista porque el Figma los dibuja también ahí, pero dejan de comportarse como
   un botón: sin puntero y sin reaccionar (lo pone assets/js/slider.js). */
.st-slider-nav--puntos.is-estatico { pointer-events: none; }
.st-slider-nav--puntos.is-estatico .st-slider-nav__punto { cursor: default; }

.st-slider-nav--flecha {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

.st-slider-nav__flecha {
	--st-ico: 23px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #EAF0FF;
	color: #000000;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.st-slider-nav__flecha:hover { background: #D8E3FF; }
.st-slider-nav__flecha:focus-visible { outline: 2px solid #0027AD; outline-offset: 2px; }

/* Al llegar al final el botón vuelve al principio: se gira para que se note. */
.st-slider-nav__flecha.is-final { transform: scaleX(-1); }

/* Los puntos del carrusel de Ubicaciones son algo menores y con los inactivos
   en blanco (Figma: 10 y 6). */
.st-ubi-puntos { gap: 8px; margin-top: 16px; }
.st-ubi-puntos .st-slider-nav__punto { width: 6px; height: 6px; background: #FFFFFF; }
.st-ubi-puntos .st-slider-nav__punto.is-active { width: 10px; height: 10px; background: #0A1E4D; }

/* =========================================================
   Landing de Apple — frame «Desktop» de la sección
   «Landing de apple». Referencias sobre un contenido de 1280:
     hero 540 · dispositivos 316 · pasos 754 · sucursales 559
   ========================================================= */

/* El Figma deja aire entre el header y la tarjeta del hero: el header mide 113
   y el frame del hero arranca en 135 (22 de hueco). Tablet 16 y móvil 8. */
.st-ap-hero { padding-block: 22px 0; }

/* El Figma dibuja la tarjeta a 540 de alto con una foto recortada. Con el vídeo
   manda su 16:9: la tarjeta ya no impone alto y lo toma del vídeo (~435 a 1440).
   En los anchos en que el panel de texto pide más alto que eso, el sobrante
   queda como aire del mismo gris del panel, nunca como bandas negras. */
.st-ap-hero__card {
	display: flex;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
	background: #F5F5F7;
}

/* `align-self: center` es lo que protege el 16:9: sin él la tarjeta estiraría
   la caja del vídeo cuando el panel de texto es el más alto. */
.st-ap-hero__video {
	flex: 0 0 60.5%;
	align-self: center;
	background: transparent;
}

.st-ap-hero__img { flex: 0 0 60.5%; margin: 0; }

.st-ap-hero__img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
}

/* Panel gris de 505 con 32 de relleno. */
.st-ap-hero__panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 32px;
	background: #F5F5F7;
}

.st-ap-hero__sello { margin: 0; }
.st-ap-hero__sello img { display: block; width: 100%; max-width: 441px; height: auto; }

.st-ap-hero__destacado {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: #000000;
}

.st-ap-hero__texto {
	margin: -14px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	color: #000000;
}

/* ---------- Dispositivos ---------- */
.st-ap-dispositivos { padding-block: 24px; }

.st-ap-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 24px 80px;
	background: #EFEFEF;
	border: 1px solid #CACACA;
	border-radius: 12px;
}

.st-ap-panel__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	color: #000000;
}

.st-ap-devices {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 92px;
}

.st-ap-device {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}

.st-ap-device__img { margin: 0; }

.st-ap-device__img img {
	display: block;
	width: auto;
	height: 80px;
	object-fit: contain;
}

.st-ap-device__label {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	color: #000000;
}

/* ---------- Antes de visitar ---------- */
.st-ap-titulo {
	margin: 0 0 24px;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	color: #000000;
}

.st-ap-pasos { padding-block: 100px 0; }

.st-ap-pasos__panel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	padding: 32px 41px;
	background: #EEEEF4;
	border-radius: 12px;
}

.st-ap-paso {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 20px;
	min-height: 490px;
	padding: 19px;
	background: #FFFFFF;
	border-radius: 12px;
}

.st-ap-paso__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.st-ap-paso__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 23px;
	color: #000000;
}

.st-ap-paso__desc {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
}

.st-ap-paso__img { margin: 0; }

.st-ap-paso__img img {
	display: block;
	width: 100%;
	height: 217px;
	object-fit: cover;
	border-radius: 12px;
}

.st-ap-paso__actions .wp-block-button { width: 100%; }

.st-ap-btn .wp-block-button__link {
	display: block;
	width: 100%;
	min-height: 36px;
	padding: 10px;
	background-color: #C33914;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* ---------- Programa tu visita ---------- */
.st-ap-visita { padding-block: 100px 24px; }

.st-ap-puntos { display: none; }

.st-ap-visita__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.st-ap-suc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	min-height: 511px;
	padding: 24px;
	border: 1px solid #9D9D9D;
	border-radius: 12px;
}

/* El mapa ocupa el hueco de la foto del diseño (364x250). */
.st-ap-suc__mapa {
	width: 100%;
	height: 250px;
	border-radius: 12px;
	overflow: hidden;
	background: #E9EDF2;
}

.st-ap-suc__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.st-ap-suc__nombre {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: #000000;
}

.st-ap-suc__fila {
	--st-ico: 18px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #C33914;
}

.st-ap-suc__fila p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	color: #000000;
}

.st-ap-suc__fila a { color: inherit; text-decoration: none; }

/* Entre 1024 y 1279 el panel se queda estrecho y el texto crece a lo alto
   hasta pasar del vídeo, que es lo que dejaría aire alrededor de él. Con la
   tipografía de tablet vuelve a caber dentro del 16:9. */
@media (max-width: 1279px) {
	.st-ap-hero__panel { gap: 16px; padding: 24px; }
	.st-ap-hero__destacado { font-size: 16px; line-height: 20px; }
	.st-ap-hero__texto { font-size: 14px; line-height: 18px; margin-top: -8px; }
}

/* ---------- Tablet (frame de 1023) ---------- */
@media (max-width: 1023px) {
	.st-ap-hero { padding-top: 16px; }
	/* El alto lo pone la foto (o el vídeo), no la tarjeta. */
	.st-ap-hero__img { flex-basis: 45%; }
	.st-ap-hero__img img { min-height: 442px; }

	.st-ap-panel { padding: 24px 32px; gap: 24px; }
	.st-ap-panel__title { font-size: 24px; line-height: 29px; }
	.st-ap-devices { gap: 32px; flex-wrap: wrap; }
	.st-ap-device__img img { height: 64px; }

	.st-ap-titulo { font-size: 24px; line-height: 29px; }
	/* A este ancho el diseño mantiene las CUATRO tarjetas en una fila (209 cada
	   una) y las TRES de sucursal también (313). No se apila nada. */
	.st-ap-pasos { padding-top: 40px; }
	.st-ap-pasos__panel { padding: 32px 20px; gap: 22px; }
	.st-ap-paso { min-height: 490px; padding: 14px; }
	.st-ap-paso__title { font-size: 17px; line-height: 21px; }
	.st-ap-paso__desc { font-size: 14px; line-height: 20px; }
	.st-ap-paso__img img { height: 170px; }

	.st-ap-visita { padding-block: 40px 24px; }
	.st-ap-visita__row { gap: 22px; }
	.st-ap-suc { min-height: 475px; padding: 24px; }
	.st-ap-suc__mapa { height: 182px; }
	.st-ap-suc__fila p { font-size: 14px; line-height: 18px; }
}

/* ---------- Móvil (frame de 360) ---------- */
@media (max-width: 767px) {
	.st-ap-hero { padding-top: 8px; }
	.st-ap-hero__card { flex-direction: column; min-height: 0; }
	.st-ap-hero__video { flex: 0 0 auto; align-self: stretch; }
	.st-ap-hero__img { flex: 1 1 auto; }
	.st-ap-hero__img img { min-height: 0; height: 220px; }
	.st-ap-hero__panel { padding: 20px 16px; }

	.st-ap-panel { padding: 20px 16px; gap: 20px; }
	.st-ap-panel__title { font-size: 20px; line-height: 24px; }
	.st-ap-devices { gap: 20px; }
	.st-ap-device__img img { height: 52px; }
	.st-ap-device__label { font-size: 13px; }

	.st-ap-titulo { font-size: 20px; line-height: 24px; }

	/* A 360 los dos bloques se vuelven CARRUSEL con puntos. */
	.st-ap-pasos { padding-top: 32px; }
	.st-ap-pasos__panel {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		padding: 32px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.st-ap-pasos__panel::-webkit-scrollbar { display: none; }
	.st-ap-paso { flex: 0 0 298px; scroll-snap-align: center; min-height: 435px; }

	.st-ap-visita { padding-block: 32px 24px; }
	.st-ap-visita__row {
		display: flex;
		grid-template-columns: none;
		gap: 22px;
		margin-inline: -15px;
		padding: 24px 15px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.st-ap-visita__row::-webkit-scrollbar { display: none; }
	.st-ap-suc { flex: 0 0 313px; scroll-snap-align: center; min-height: 426px; padding: 24px; gap: 22px; }
	.st-ap-suc__mapa { height: 160px; }
	.st-ap-suc__body { gap: 16px; }

	.st-ap-pasos .st-ap-puntos,
	.st-ap-visita .st-ap-puntos { display: flex; margin-top: 16px; }
}

/* =========================================================
   Centro de soluciones — frame «centro-virtual-soluciones».
   Dos columnas sobre 1280: filtros 360 + resultados 894, gap 26.
   ========================================================= */

.st-sol {
	padding: 59px 0 80px;
	background: #F8F8F8;
}

.st-sol__layout {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

/* ---------- Barra de filtros ---------- */
.st-sol__filtros {
	flex: 0 0 360px;
	width: 360px;
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
}

/* Botón «Filtros»: solo en móvil (ver el bloque de 767px). */
.st-sol__toggle { display: none; }

.st-sol__bloque { padding: 40px; }
.st-sol__bloque + .st-sol__bloque { padding-top: 0; }

.st-sol__rotulo {
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 800;
	line-height: 24px;
	color: #6B7280;
}

.st-sol__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.st-sol__chip {
	min-height: 38px;
	padding: 10px 16px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #081534;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.st-sol__chip:hover { border-color: #254EDC; }

.st-sol__chip.is-active {
	background: #254EDC;
	border-color: #254EDC;
	color: #FFFFFF;
}

/* Listas plegables: `<details>` nativo, sin JS para abrir y cerrar. */
.st-sol__grupo { border: 0; }
.st-sol__lista + .st-sol__lista { margin-top: 24px; }

.st-sol__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: #081534;
}

.st-sol__cabecera::-webkit-details-marker { display: none; }

.st-sol__cabecera-txt {
	--st-ico: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.st-sol__chevron { color: #6B7280; transition: transform .15s ease; }
.st-sol__grupo[open] .st-sol__chevron { transform: rotate(180deg); }

.st-sol__items { display: flex; flex-direction: column; gap: 2px; }

.st-sol__item {
	--st-ico: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 24px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #DCDCDC;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	color: #081534;
	text-align: left;
	cursor: pointer;
}

.st-sol__item:hover { background: #F5F7FF; }

/* Activo: fondo azul al 10 % y el rótulo en azul, con menos sangrado. */
.st-sol__item.is-active {
	padding-left: 12px;
	background: rgba(37, 78, 220, .1);
	border-bottom-color: transparent;
	font-weight: 700;
	color: #254EDC;
}

/* Chip blanco de 42x24 con el logotipo vectorial en negro (Figma). Antes se
   usaban los PNG blancos del Home con un `invert`, y salían como rectángulos
   negros: aquellos son siluetas macizas pensadas para fondo oscuro. */
.st-sol__logo {
	--st-ico: 18px;
	flex: 0 0 42px;
	width: 42px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid #ECECEC;
	border-radius: 2px;
	color: #000000;
}

/* Los logotipos son palabras muy apaisadas (Samsung, MasterTech): se limita el
   ancho y se deja el alto libre para que no se aplasten. */
.st-sol__logo svg { width: auto; height: auto; max-width: 36px; max-height: 18px; }

/* ---------- Filtros activos ---------- */
.st-sol__activos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 40px;
	border-top: 1px solid #E0E0E0;
}

.st-sol__activos-lista { display: flex; flex-wrap: wrap; gap: 12px; }

.st-sol__activo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(37, 78, 220, .1);
	border: 0;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #254EDC;
	cursor: pointer;
}

.st-sol__activo::after { content: "×"; font-size: 14px; line-height: 1; }

.st-sol__limpiar {
	align-self: flex-start;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	font-weight: 700;
	color: #254EDC;
	cursor: pointer;
}

/* ---------- Resultados ---------- */
.st-sol__resultados { flex: 1 1 auto; min-width: 0; }

.st-sol__titulo {
	margin: 0 0 10px;
	font-size: 42px;
	font-weight: 800;
	line-height: 58px;
	color: #081534;
}

.st-sol__subtitulo {
	margin: 0 auto 24px;
	max-width: 600px;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #081534;
}

.st-sol__contador {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

.st-sol__linea {
	margin: 0 0 32px;
	border: 0;
	border-top: 1px solid #DEDEDE;
}

.st-sol__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.st-sol__vacio {
	margin: 32px 0 0;
	font-size: 16px;
	color: #666666;
}

/* ---------- Tarjeta ---------- */
.st-sol__card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 12px;
	overflow: hidden;
}

/* La tarjeta entera es un enlace: sin subrayado y heredando el color, para que
   se vea como en el diseño. */
.st-sol__enlace {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.st-sol__enlace:hover .st-sol__card-titulo { color: #254EDC; }

.st-sol__media { position: relative; height: 180px; }

.st-sol__media img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.st-sol__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	background: #E82927;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: #FFFFFF;
}

.st-sol__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
}

.st-sol__texto { display: flex; flex-direction: column; gap: 8px; }

.st-sol__fecha { margin: 0; font-size: 12px; line-height: 24px; color: #666666; }

.st-sol__card-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: #081534;
}

.st-sol__extracto { margin: 0; font-size: 14px; line-height: 24px; color: #666666; }

.st-sol__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #E0E0E0;
}

.st-sol__tag {
	padding: 2px 8px;
	background: #EEEEEE;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	color: #666666;
}

.st-sol__tag--mas { border-radius: 100px; }

/* ---------- Tablet (frame de 1023) ---------- */
@media (max-width: 1023px) {
	.st-sol { padding: 59px 0 80px; }
	.st-sol__layout { gap: 26px; }
	.st-sol__filtros { flex-basis: 300px; width: 300px; }
	.st-sol__bloque { padding: 24px; }
	.st-sol__activos { padding: 16px 24px; }
	.st-sol__item { padding-inline: 12px; }
	.st-sol__titulo { font-size: 32px; line-height: 40px; }
	.st-sol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Móvil (frame de 375) ----------
   Aquí SÍ se apila: la sección pasa a auto-vertical con 16 de hueco. */
@media (max-width: 767px) {
	.st-sol { padding: 24px 0; }
	.st-sol__layout { flex-direction: column; gap: 16px; }
	.st-sol__filtros { flex: 1 1 auto; width: 100%; }

	/* El panel arranca PLEGADO: abierto se comía la primera pantalla entera
	   antes de que se viera un solo artículo. */
	.st-sol__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 14px 20px;
		background: #FFFFFF;
		border: 1px solid #E0E0E0;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 600;
		color: #081534;
		cursor: pointer;
	}

	.st-sol__toggle-chevron { transition: transform .18s ease; }
	.st-sol__toggle.is-open .st-sol__toggle-chevron { transform: rotate(180deg); }
	.st-sol__toggle-txt { flex: 1 1 auto; text-align: left; }

	.st-sol__toggle-num {
		min-width: 22px;
		padding: 2px 7px;
		background: #254EDC;
		border-radius: 100px;
		font-size: 12px;
		font-weight: 700;
		color: #FFFFFF;
	}

	.st-sol__filtros:not(.is-open) { display: none; }
	.st-sol__bloque { padding: 20px; }
	.st-sol__activos { padding: 16px 20px; }
	.st-sol__titulo { font-size: 26px; line-height: 32px; }
	.st-sol__subtitulo { font-size: 15px; }
	.st-sol__grid { grid-template-columns: 1fr; }
	.st-sol__card-titulo { font-size: 18px; line-height: 24px; }
}

/* =========================================================
   Landing de garantía — frame «servitotal-landing-page-
   GARANTÍA-Desktop». OJO: margen lateral de 120 (no los 80
   del resto del sitio); solo «beneficios» va a 80.
   Altos: hero 564 · cifras 231 · pasos 448 · beneficios 706
          comparativa 899 · testimonios 770 · productos 850 · CTA 565
   ========================================================= */

/* Ancho propio de esta página: 1200 de contenido con 120 de margen. */
.st-ga-ancho {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 15px;
}

/* ---------- Hero ---------- */
.st-ga-hero { padding: 0; background: #FFFFFF; }

.st-ga-hero__row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
	min-height: 564px;
}

.st-ga-hero .st-escudo-hero { flex: 0 0 611px; }

.st-ga-hero__text {
	flex: 0 1 589px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.st-ga-hero__title {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 52px;
	color: #383838;
}

.st-ga-hero__lead {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 32px;
	color: #232323;
}

.st-ga-hero__cta .wp-block-button { width: 100%; max-width: 575px; }

.st-ga-btn .wp-block-button__link {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 100px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

/* ---------- Cifras ---------- */
.st-ga-stats { padding-block: 42px; }

.st-ga-stats__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.st-ga-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 146px;
	padding: 35px;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.st-ga-stat__num {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 40px;
	color: #0037B9;
}

.st-ga-stat__label {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #374151;
}

/* ---------- Títulos comunes ---------- */
.st-ga-titulo {
	margin: 0 0 16px;
	font-size: 48px;
	font-weight: 700;
	line-height: 58px;
	color: #111827;
}

.st-ga-subtitulo {
	margin: 0 auto 48px;
	max-width: 720px;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #6B7280;
}

/* ---------- Cómo funciona ---------- */
.st-ga-pasos { padding-block: 77px; background: #FFFFFF; }
.st-ga-pasos .st-ga-titulo { margin-bottom: 80px; }

.st-ga-pasos__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.st-ga-paso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

/* Círculo amarillo de 70 con el icono a 36. */
.st-ga-paso__ico {
	--st-ico: 36px;
	width: 70px;
	height: 70px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FCD61A;
	border-radius: 50%;
	color: #111827;
}

.st-ga-paso__text { display: flex; flex-direction: column; gap: 8px; }
.st-ga-paso__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; color: #111827; }
.st-ga-paso__desc { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: #6B7280; }

/* ---------- Beneficios ---------- */
.st-ga-benef { padding-block: 120px; background: #F7F7F7; }
.st-ga-benef .st-ga-subtitulo { margin-bottom: 64px; }

.st-ga-benef__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.st-ga-benef__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	min-height: 222px;
	padding: 35px;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .03);
}

.st-ga-benef__ico { --st-ico: 48px; color: #EA2B27; }
.st-ga-benef__text { display: flex; flex-direction: column; gap: 12px; }
.st-ga-benef__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; color: #111827; }
.st-ga-benef__desc { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: #6B7280; }

/* ---------- Comparativa ---------- */
.st-ga-comp { padding-block: 120px; background: #FFFFFF; }
.st-ga-comp .st-ga-titulo { margin-bottom: 64px; }

.st-ga-tabla {
	border: 1px solid #B2B2B2;
	border-radius: 12px;
	overflow: hidden;
}

.st-ga-tabla table {
	width: 100%;
	border-collapse: collapse;
}

.st-ga-tabla thead th {
	padding: 18px 24px;
	background: #00239C;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: #FFFFFF;
	text-align: center;
}

.st-ga-tabla thead th:first-child { text-align: left; }

/* Rótulos de la tabla: el largo manda salvo en móvil (ver el bloque de 767px),
   donde el Figma los abrevia para que la tabla quepa sin desplazarse. */
.st-ga-larga { display: inline; }
.st-ga-corta { display: none; }

/* La columna de la garantía extendida es la destacada: cabecera amarilla y
   fondo tenue en el cuerpo, alternando como las filas. */
.st-ga-tabla thead .st-ga-col-ext {
	background: #FCD61A;
	color: #00239C;
}

.st-ga-tabla thead .st-ga-col-fabrica { border-inline: 1px solid #FFFFFF; }

.st-ga-tabla tbody tr { border-top: 1px solid #EEEEEE; }
.st-ga-tabla tbody tr:nth-child(odd) { background: #FFFFFF; }
.st-ga-tabla tbody tr:nth-child(even) { background: #F8FAFC; }

.st-ga-tabla tbody th {
	padding: 22px 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #374151;
	text-align: left;
}

.st-ga-tabla tbody td {
	width: 220px;
	padding: 22px 12px;
	text-align: center;
	vertical-align: middle;
}

.st-ga-tabla tbody td.st-ga-col-ext { width: 256px; }
.st-ga-tabla tbody tr:nth-child(odd) td.st-ga-col-ext { background: #FFF9D9; }
.st-ga-tabla tbody tr:nth-child(even) td.st-ga-col-ext { background: #FFF1AE; }

.st-ga-si, .st-ga-no {
	--st-ico: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.st-ga-si { color: #12A594; }
.st-ga-no { --st-ico: 16px; color: #9CA3AF; }

/* ---------- Testimonios ---------- */
.st-ga-testi { padding-block: 120px; background: #F7F7F7; }
.st-ga-testi .st-ga-subtitulo { margin-bottom: 48px; }

.st-ga-estrellas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	--st-ico: 24px;
}

.st-ga-estrella { color: #D9D9D9; display: inline-flex; }
.st-ga-estrella.is-on { color: #FCD61A; }

.st-ga-puntos { display: none; }

.st-ga-rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 48px;
}

.st-ga-rating__nota { margin: 0; font-size: 32px; font-weight: 800; line-height: 40px; color: #0037B9; }
.st-ga-rating__meta { margin: 0; font-size: 14px; line-height: 24px; color: #6B7280; }

.st-ga-testi__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.st-ga-testi__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 250px;
	padding: 35px;
	background: #FFFFFF;
	border: 1px solid #D7D7D7;
	border-radius: 20px;
}

.st-ga-testi__quote { margin: 0; font-size: 16px; line-height: 24px; color: #374151; }
.st-ga-testi__autor { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.st-ga-testi__nombre { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; color: #0A1E4D; }
.st-ga-testi__meta { margin: 0; font-size: 14px; line-height: 24px; color: #6B7280; }

/* ---------- Productos ---------- */
.st-ga-prod { padding-block: 120px; background: #FFFFFF; }
.st-ga-prod .st-ga-titulo { margin-bottom: 64px; }

.st-ga-prod__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.st-ga-prod__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 253px;
	padding: 40px;
	background: #FFFFFF;
	border: 1px solid #D3D3D3;
	border-radius: 20px;
}

.st-ga-prod__img { margin: 0; }

.st-ga-prod__img img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 93px;
	object-fit: contain;
}

.st-ga-prod__label { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; color: #111827; }

/* ---------- CTA ---------- */
.st-ga-cta { padding-block: 100px; background: #0A1E4D; }

.st-ga-cta__title {
	margin: 0 0 20px;
	font-size: 52px;
	font-weight: 800;
	line-height: 60px;
	color: #FFFFFF;
}

.st-ga-cta__lead {
	margin: 0 auto 40px;
	max-width: 800px;
	font-size: 20px;
	font-weight: 400;
	line-height: 32px;
	color: #D1D5DB;
}

.st-ga-cta__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.st-ga-comercio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 217px;
	padding: 50px;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .02);
}

.st-ga-comercio__logo { margin: 0; }

.st-ga-comercio__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 51px;
	object-fit: contain;
}

.st-ga-comercio__cta { margin: 0; }

.st-ga-comercio__cta a {
	font-size: 18px;
	font-weight: 700;
	line-height: 20px;
	color: #E82927;
	text-decoration: none;
}

/* ---------- Tablet (frame de 1023) ---------- */
@media (max-width: 1023px) {
	.st-ga-ancho { padding-inline: 20px; }

	.st-ga-hero__row { min-height: 436px; gap: 32px; padding-block: 32px; }
	.st-ga-hero .st-escudo-hero { flex: 0 1 45%; }
	.st-ga-hero .st-escudo-hero__foto img { height: 340px; }
	.st-ga-hero__title { font-size: 32px; line-height: 42px; }
	.st-ga-hero__lead { font-size: 17px; line-height: 26px; }

	.st-ga-pasos { padding-block: 48px; }
	.st-ga-pasos .st-ga-titulo { margin-bottom: 48px; }
	.st-ga-benef, .st-ga-comp, .st-ga-testi, .st-ga-prod, .st-ga-cta { padding-block: 64px; }
	.st-ga-titulo { font-size: 32px; line-height: 40px; }
	.st-ga-cta__title { font-size: 36px; line-height: 44px; }
	.st-ga-benef__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-ga-benef .st-ga-subtitulo, .st-ga-comp .st-ga-titulo,
	.st-ga-testi .st-ga-subtitulo, .st-ga-prod .st-ga-titulo { margin-bottom: 32px; }
	.st-ga-benef__card, .st-ga-testi__card, .st-ga-prod__card { min-height: 0; }
	.st-ga-tabla tbody td { width: 140px; }
	.st-ga-tabla tbody td.st-ga-col-ext { width: 160px; }
	.st-ga-comercio { padding: 32px; min-height: 0; }
}

/* ---------- Móvil (frame de 375) ---------- */
@media (max-width: 767px) {
	.st-ga-ancho { padding-inline: 15px; }

	.st-ga-hero__row { flex-direction: column; align-items: stretch; min-height: 0; padding-block: 24px 64px; gap: 24px; }
	.st-ga-hero .st-escudo-hero { flex: 1 1 auto; }
	.st-ga-hero .st-escudo-hero__foto img { height: 220px; }
	.st-ga-hero__text { flex: 1 1 auto; gap: 20px; }
	.st-ga-hero__title { font-size: 28px; line-height: 36px; }
	.st-ga-hero__lead { font-size: 16px; line-height: 24px; }

	.st-ga-stats { padding-block: 40px; }
	.st-ga-stats__row { grid-template-columns: 1fr; gap: 16px; }
	.st-ga-stat { min-height: 0; padding: 24px; }

	.st-ga-pasos { padding-block: 64px; }
	.st-ga-pasos .st-ga-titulo { margin-bottom: 48px; }
	.st-ga-pasos__row { grid-template-columns: 1fr; gap: 32px; }

	.st-ga-benef, .st-ga-comp, .st-ga-testi, .st-ga-prod, .st-ga-cta { padding-block: 64px; }
	.st-ga-titulo { font-size: 24px; line-height: 32px; }
	.st-ga-subtitulo { font-size: 15px; line-height: 24px; margin-bottom: 32px; }
	/* A este ancho el diseño NO apila todo: las cifras van 2+1, y beneficios y
	   productos a DOS columnas. Los testimonios pasan a carrusel. */
	.st-ga-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.st-ga-stat:last-child { grid-column: 1 / -1; }

	.st-ga-benef__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.st-ga-benef__card { padding: 20px; }
	.st-ga-benef__ico { --st-ico: 36px; }
	.st-ga-benef__title { font-size: 16px; line-height: 20px; }
	.st-ga-benef__desc { font-size: 13px; line-height: 18px; }

	/* Productos: dos columnas y tarjeta baja (119 en el Figma). */
	.st-ga-prod__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.st-ga-prod__card { min-height: 119px; padding: 16px; gap: 8px; }
	.st-ga-prod__img img { height: 52px; }
	.st-ga-prod__label { font-size: 14px; line-height: 18px; }

	/* Testimonios: carrusel con anclaje. */
	.st-ga-testi__row {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		margin-inline: -15px;
		padding-inline: 15px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.st-ga-testi__row::-webkit-scrollbar { display: none; }
	.st-ga-testi__card { flex: 0 0 300px; scroll-snap-align: center; min-height: 210px; padding: 24px; }
	.st-ga-testi .st-ga-puntos { display: flex; margin-top: 24px; }

	/* Las tarjetas de comercio conservaban los 217 de escritorio y el CTA se
	   iba +263: a este ancho son una franja compacta. */
	.st-ga-cta__row { grid-template-columns: 1fr; gap: 12px; }
	.st-ga-comercio { min-height: 0; padding: 20px; gap: 12px; }
	.st-ga-comercio__logo img { height: 38px; }
	.st-ga-comercio__cta a { font-size: 16px; }

	.st-ga-pasos__row { gap: 40px; }
	.st-ga-paso__ico { width: 60px; height: 60px; --st-ico: 30px; }

	/* ---- Tabla comparativa ----
	   El Figma la mantiene como TABLA en móvil y la hace caber en los 335 de
	   contenido: columnas de 134 / 91 / 110, texto de 12 y relleno de 12. Nada
	   de desplazamiento horizontal ni de apilarla en tarjetas.
	   Lo que hace que quepa son los rótulos abreviados —«G. Fábrica»,
	   «Fallas por calor/polvo»…—, que pone inc/garantia.php. */
	.st-ga-tabla {
		border-color: #EEEEEE;
		overflow: hidden;
	}

	.st-ga-tabla table {
		min-width: 0;
		width: 100%;
		table-layout: fixed;
	}

	/* Los rótulos largos son los de escritorio; en móvil mandan los cortos. */
	.st-ga-larga { display: none; }
	.st-ga-corta { display: inline; }

	/* Con `table-layout: fixed` los anchos los deciden las celdas de la PRIMERA
	   fila, así que van en el `thead`: 134 / 91 / 110 sobre los 335 del Figma,
	   en porcentaje para que aguanten a 360 y a 390. */
	.st-ga-tabla thead th {
		padding: 12px;
		font-size: 12px;
		line-height: 24px;
		width: 27.2%;
	}

	.st-ga-tabla thead th:first-child { width: 40%; text-align: left; }
	.st-ga-tabla thead th.st-ga-col-ext { width: 32.8%; }

	.st-ga-tabla tbody th {
		padding: 12px;
		font-size: 12px;
		font-weight: 400;
		line-height: 24px;
		color: #6B7280;
	}

	.st-ga-tabla tbody td { padding: 12px; }

	.st-ga-si, .st-ga-no { --st-ico: 20px; }

	.st-ga-cta__title { font-size: 26px; line-height: 34px; }
	.st-ga-cta__lead { font-size: 16px; line-height: 26px; }
}

/* =========================================================
   Pieza compartida: foto con escudo (landing de garantía y
   «Protege tu producto» usan el mismo nodo del Figma).
   ========================================================= */

.st-escudo-hero {
	position: relative;
	/* El marco blanco de 10 del Figma. */
	padding: 10px;
	background: #FFFFFF;
	border-radius: 12px;
}

.st-escudo-hero__foto { margin: 0; }

.st-escudo-hero__foto img {
	display: block;
	width: 100%;
	height: 438px;
	object-fit: cover;
	border-radius: 8px;
}

/* Escudo rojo centrado sobre la foto, con la mascota dentro. */
.st-escudo-hero__escudo {
	--st-ico: 240px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #E82927;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4));
	pointer-events: none;
}

.st-escudo-hero__mascota {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: auto;
	transform: translate(-50%, -58%);
}

/* =========================================================
   Protege tu producto — frame «Protege tu producto página
   principal». Elección de comercio 485 · cierre 511.
   ========================================================= */

.st-pr-elige {
	padding-block: 60px;
	background: #F7F5F0;
}

.st-pr-titulo {
	margin: 0 0 30px;
	font-size: 40px;
	font-weight: 800;
	line-height: 52px;
	color: #383838;
}

.st-pr-lead {
	margin: 0 0 30px;
	max-width: 1053px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #383838;
}

.st-pr-comercios {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* ---------- Cierre ---------- */
.st-pr-cierre { padding-block: 32px; }

.st-pr-cierre__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	min-height: 447px;
}

.st-pr-cierre .st-escudo-hero { flex: 0 0 544px; }
.st-pr-cierre .st-escudo-hero__foto img { height: 469px; }

.st-pr-cierre__text {
	flex: 0 1 562px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.st-pr-cierre__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 36px;
	color: #383838;
}

.st-pr-cierre__cta .wp-block-button { width: 314px; max-width: 100%; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.st-pr-titulo { font-size: 32px; line-height: 40px; }
	.st-pr-comercios { gap: 32px; }
	.st-pr-comercios .st-ga-comercio { min-height: 204px; padding: 50px; }
	.st-pr-cierre__row { gap: 60px; min-height: 383px; }
	.st-pr-cierre .st-escudo-hero { flex: 0 1 45%; }
	.st-pr-cierre .st-escudo-hero__foto img { height: 320px; }
	.st-escudo-hero__escudo { --st-ico: 170px; }
	.st-escudo-hero__mascota { width: 68px; }
	.st-pr-cierre__title { font-size: 20px; font-weight: 600; line-height: 24px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.st-pr-elige { padding-block: 44px 60px; }
	.st-pr-titulo { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
	.st-pr-lead { font-size: 16px; line-height: 24px; margin-bottom: 30px; }

	/* A este ancho las tarjetas NO se apilan verticales: son una franja de 96
	   con el logo a la izquierda y la llamada a la derecha. */
	.st-pr-comercios { grid-template-columns: 1fr; gap: 16px; }
	.st-pr-comercios .st-ga-comercio {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 96px;
		padding: 24px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, .02);
	}
	.st-pr-comercios .st-ga-comercio__logo img { height: 36px; max-width: 120px; }
	.st-pr-comercios .st-ga-comercio__cta { text-align: right; }
	.st-pr-comercios .st-ga-comercio__cta a { font-size: 16px; line-height: 20px; }

	.st-pr-cierre { padding-block: 32px; }
	.st-pr-cierre__row { flex-direction: column; align-items: stretch; min-height: 0; gap: 32px; }
	.st-pr-cierre .st-escudo-hero { flex: 1 1 auto; }
	.st-pr-cierre .st-escudo-hero__foto img { height: 240px; }
	.st-escudo-hero__escudo { --st-ico: 140px; }
	.st-escudo-hero__mascota { width: 56px; }
	.st-pr-cierre__text { flex: 1 1 auto; }
	.st-pr-cierre__title { font-size: 20px; font-weight: 600; line-height: 24px; }
}

/* =========================================================
   Lista de precios — no está en el Figma: se construye con
   el mismo lenguaje que el resto (ancho de `.container`,
   escala tipográfica y la tabla como la comparativa de
   garantía, que es la única tabla del diseño).
   ========================================================= */

.st-lp-hero { padding-block: 22px 0; }

.st-lp-titulo {
	margin: 40px 0 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 58px;
	color: #000000;
}

.st-lp-subtitulo {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #374151;
}

.st-lp-aviso {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #00239C;
}

.st-lp-tarifas { padding-block: 48px 0; }

/* La tabla tiene 32 filas y tres columnas: en pantallas estrechas se desplaza
   ella sola en horizontal en vez de encoger los precios hasta partirlos. */
.st-lp-tabla {
	margin: 0;
	border: 1px solid #B2B2B2;
	border-radius: 12px;
	overflow: hidden;
	overflow-x: auto;
}

.st-lp-tabla table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
}

.st-lp-tabla thead th {
	padding: 18px 24px;
	background: #00239C;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #FFFFFF;
	text-align: center;
	border: 0;
}

.st-lp-tabla thead th:first-child { text-align: left; }

.st-lp-tabla tbody tr { border-top: 1px solid #EEEEEE; }
.st-lp-tabla tbody tr:nth-child(odd) { background: #FFFFFF; }
.st-lp-tabla tbody tr:nth-child(even) { background: #F8FAFC; }

.st-lp-tabla tbody td {
	padding: 16px 24px;
	border: 0;
	font-size: 16px;
	line-height: 22px;
	color: #374151;
	text-align: center;
}

.st-lp-tabla tbody td:first-child {
	font-weight: 600;
	text-align: left;
	color: #111827;
}

.st-lp-nota {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: #6B7280;
}

.st-lp-cta { padding-block: 64px 80px; }

.st-lp-cta__titulo {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #000000;
}

.st-lp-cta__texto {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 22px;
	color: #374151;
}

/* Con el `blockGap` del tema en 0, una fila de botones sin hueco propio los
   deja pegados; el mismo caso que `.st-post__cta-acciones`. */
.st-lp-cta__actions { gap: 12px; margin-top: 24px; }

@media (max-width: 1023px) {
	.st-lp-hero { padding-top: 16px; }
	.st-lp-titulo { margin-top: 32px; font-size: 40px; line-height: 48px; }
	.st-lp-subtitulo { font-size: 16px; line-height: 22px; }
	.st-lp-tarifas { padding-top: 32px; }
	.st-lp-cta { padding-block: 48px 60px; }
	.st-lp-cta__titulo { font-size: 28px; line-height: 34px; }
}

@media (max-width: 767px) {
	.st-lp-hero { padding-top: 8px; }
	.st-lp-titulo { margin-top: 24px; font-size: 28px; line-height: 34px; }
	.st-lp-subtitulo { font-size: 15px; line-height: 21px; }
	.st-lp-aviso { font-size: 14px; line-height: 20px; }
	.st-lp-tabla thead th { padding: 14px 16px; font-size: 14px; line-height: 19px; }
	.st-lp-tabla tbody td { padding: 12px 16px; font-size: 14px; line-height: 19px; }
	.st-lp-cta { padding-block: 40px 48px; }
	.st-lp-cta__titulo { font-size: 24px; line-height: 29px; }
}

/* =========================================================
   Entrada del blog — tampoco está en el Figma. Se construye
   con el mismo lenguaje: ancho de `.container`, columna de
   lectura estrecha y la píldora roja de las tarjetas del
   Centro de soluciones, que es de donde se llega.
   ========================================================= */

.st-post { padding-block: 40px 80px; }

/* Columna de lectura: el ancho completo es cómodo para una maqueta, no para
   leer. Todo el artículo se centra en 800, salvo la portada. */
.st-post__cabecera,
.st-post__contenido,
.st-post__cta {
	max-width: 800px;
	margin-inline: auto;
}

.st-post__badges { margin: 0; font-size: 0; }

.st-post__badges a {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 4px 10px;
	background: #E82927;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: #FFFFFF;
	text-decoration: none;
}

.st-post__badges a:hover { background: var(--wp--preset--color--primary-dark); }

.st-post__titulo {
	margin: 16px 0 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	color: var(--wp--preset--color--navy);
}

.st-post__fecha {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--gray);
}

/* La portada es más ancha que el texto, pero con el alto atado: estas fotos son
   de catálogo (700x400) y a ancho completo se ampliaban hasta verse borrosas. */
.st-post__portada {
	max-width: 1000px;
	margin: 32px auto 0;
}

.st-post__portada img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 14px;
}

/* Las entradas heredadas de Elementor están maquetadas a dos columnas para el
   ancho completo: dentro de 800 se quedan en dos medias columnas de 390 y el
   texto se lee fatal. Cuando el cuerpo trae Elementor se ensancha la columna. */
.st-post__contenido:has(.elementor) { max-width: 1120px; }

/* Y esas entradas ya abren con su propia foto de portada, así que la imagen
   destacada —que ahí es la miniatura de la tarjeta— saldría dos veces. */
.st-post:has(.st-post__contenido .elementor) .st-post__portada { display: none; }

.st-post__contenido {
	margin-top: 40px;
	font-size: 17px;
	line-height: 28px;
	color: #374151;
}

.st-post__contenido > * + * { margin-top: 20px; }

.st-post__contenido h2,
.st-post__contenido h3 {
	margin: 36px 0 0;
	color: var(--wp--preset--color--navy);
}

.st-post__contenido h2 { font-size: 28px; line-height: 34px; }
.st-post__contenido h3 { font-size: 22px; line-height: 28px; }
.st-post__contenido img { max-width: 100%; height: auto; border-radius: 12px; }
.st-post__contenido a { color: var(--wp--preset--color--primary); }

/* Las entradas heredadas están hechas con Elementor y traen sus propias
   secciones a ancho completo: se les quita el relleno lateral, que aquí ya lo
   pone la columna de lectura. */
.st-post__contenido .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.st-post__contenido .elementor-widget-container { padding-inline: 0; }

.st-post__cta {
	margin-top: 56px;
	padding: 32px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	text-align: center;
}

.st-post__cta-titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
	color: var(--wp--preset--color--navy);
}

.st-post__cta-texto {
	max-width: 520px;
	margin: 10px auto 0;
	font-size: 16px;
	line-height: 22px;
	color: #374151;
}

/* El hueco entre botones no puede depender del `blockGap` del tema, que es 0:
   sin esto los dos botones salen pegados uno al otro. */
.st-post__cta-acciones { justify-content: center; gap: 12px; margin-top: 22px; }

/* Los relacionados, con las tarjetas del Home. La rejilla que traen las
   entradas heredadas de Elementor se queda fuera: es de la web anterior y
   desentona con el diseño nuevo. */
.st-post__contenido .elementor-widget-posts { display: none; }

.st-post__relacionados {
	max-width: 1120px;
	margin: 64px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.st-post__relacionados-titulo {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	line-height: 34px;
	color: var(--wp--preset--color--navy);
}

@media (max-width: 1023px) {
	.st-post { padding-block: 28px 60px; }
	.st-post__titulo { font-size: 32px; line-height: 40px; }
	.st-post__portada img { max-height: 320px; }
	.st-post__contenido { margin-top: 32px; font-size: 16px; line-height: 26px; }
	.st-post__relacionados { margin-top: 48px; padding-top: 32px; }
	.st-post__relacionados-titulo { font-size: 24px; line-height: 29px; }
}

@media (max-width: 767px) {
	.st-post { padding-block: 20px 48px; }
	.st-post__titulo { font-size: 26px; line-height: 32px; }
	.st-post__portada { margin-top: 24px; }
	.st-post__portada img { max-height: 220px; }
	.st-post__cta { padding: 24px 20px; }
	.st-post__cta-titulo { font-size: 22px; line-height: 27px; }
	.st-post__relacionados { margin-top: 40px; padding-top: 28px; }
	.st-post__relacionados-titulo { font-size: 20px; line-height: 25px; }
}

/* =========================================================
   Listado de entradas (índice del blog y archivos)
   ========================================================= */

.st-listado { padding-block: 48px 80px; }

.st-listado__titulo {
	margin: 0 0 32px;
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	color: var(--wp--preset--color--navy);
}

.st-listado__descripcion {
	margin: -20px 0 32px;
	max-width: 720px;
	font-size: 16px;
	line-height: 24px;
	color: #374151;
}

/* La rejilla del núcleo saca su hueco del `blockGap` del tema, que es 0: sin
   esto las tarjetas se tocan. Va también en el bloque, pero aquí no depende de
   que nadie lo recuerde al editar la plantilla. */
.st-listado__rejilla.is-layout-grid { gap: 24px; }

.st-listado .st-card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.st-listado .st-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.st-listado .st-card .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.st-listado .st-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

.st-listado__paginacion { gap: 12px; margin-top: 40px; }

@media (max-width: 1023px) {
	.st-listado { padding-block: 32px 60px; }
	.st-listado__titulo { font-size: 32px; line-height: 40px; }
	.st-listado__rejilla.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.st-listado { padding-block: 24px 48px; }
	.st-listado__titulo { font-size: 26px; line-height: 32px; margin-bottom: 24px; }
	.st-listado__rejilla.is-layout-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* =========================================================
   Páginas legales (privacidad, términos y cookies).
   No están en el Figma: son texto largo, así que lo que
   importa es la medida de lectura y la jerarquía.
   ========================================================= */

.st-legal { padding-block: 56px 80px; }

/* ~70 caracteres por línea: por encima de eso el ojo pierde el renglón, y
   estas páginas se leen de arriba abajo. */
.st-legal__texto {
	max-width: 760px;
	margin-inline: auto;
}

.st-legal__titulo {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	color: #081534;
}

.st-legal__fecha {
	margin: 0 0 32px;
	font-size: 14px;
	line-height: 20px;
	color: #6B7280;
}

.st-legal__texto h2 {
	margin: 40px 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	color: #081534;
}

.st-legal__texto p,
.st-legal__texto li {
	font-size: 16px;
	line-height: 26px;
	color: #374151;
}

.st-legal__texto p { margin: 0 0 16px; }

.st-legal__texto ul {
	margin: 0 0 16px;
	padding-left: 22px;
	list-style: disc;
}

.st-legal__texto li { margin-bottom: 8px; }

.st-legal__texto a {
	color: #254EDC;
	text-decoration: underline;
}

/* Nota para quien edita la página: se escribe como un párrafo normal (así se
   puede borrar sin tocar código) y aquí se esconde del visitante. En el
   editor sí se ve, resaltada — ver assets/css/editor.css. */
.st-solo-editor { display: none; }

@media (max-width: 767px) {
	.st-legal { padding-block: 32px 56px; }
	.st-legal__titulo { font-size: 28px; line-height: 34px; }
	.st-legal__texto h2 { margin-top: 32px; font-size: 19px; line-height: 26px; }
	.st-legal__texto p, .st-legal__texto li { font-size: 15px; line-height: 24px; }
}