/*
Theme Name:     GeneratePress Child
Theme URI:
Description:    Generatepress child theme.
Author:         Teconsite
Author URI:
Template:       generatepress
Version:        0.1.0
*/

/* ==========================================================================
   1. Tokens
   Única fuente de verdad del diseño. Cambiar aquí un color lo cambia en
   todo el sitio; los bloques nunca llevan valores en crudo.
   ========================================================================== */

:root {
	/* Marca */
	--is-primary: #216093;
	--is-primary-dark: #0a1d2d;
	--is-accent: #3b82f6;

	/* Texto */
	--is-ink: #0f172a;
	--is-body: #475569;
	--is-muted: #94a3b8;
	--is-body-soft: #5e6a7c;
	--is-ink-soft: #334155;
	--is-on-dark: #cbd5e1;

	/* Superficies y bordes */
	--is-surface: #f8fafc;
	--is-surface-alt: #f1f5f9;
	--is-surface-icon: #eff6ff;
	--is-border: #e2e8f0;
	--is-border-brand: #c2c6ca;

	/* Radios */
	--is-radius-sm: 8px;
	--is-radius-md: 12px;
	--is-radius-lg: 20px;
	--is-radius-xl: 22px;
	--is-radius-pill: 999px;

	/* Sombras */
	--is-shadow-card: 0 8px 24px -4px rgb(15 23 42 / 5%);
	--is-shadow-card-hi: 0 16px 40px -6px rgb(59 130 246 / 18%);
	--is-shadow-form: 0 20px 48px -10px rgb(15 23 42 / 8%);
	--is-shadow-soft: 0 2px 6px 0 rgb(15 23 42 / 4%);

	/* Tipografía */
	--is-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Layout — un único ancho y un único padding para todo el sitio: header,
	   secciones y footer comparten caja, así todo queda alineado por los lados.
	   Los 1440 incluyen el padding, como el frame de Figma: contenido 1376.
	   Figma usaba 1152 en algunas bandas, pero se veía estrecho. */
	--is-container: 1440px;
	--is-gutter: 32px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	font-family: var(--is-font);
	color: var(--is-body);
}

/* GeneratePress da margin-bottom a todo <p>, lo que inflaba cada hueco del
   diseño. El espaciado lo dan los `gap` de los contenedores, no los márgenes. */
.gb-text {
	margin: 0;
}

/* ==========================================================================
   2b. Maquetación
   Los bloques de la página llevan sólo estas clases: la disposición vive aquí,
   no repetida en los ajustes de cada bloque.
   ========================================================================== */

/* Misma caja que el header y el footer: 1440 con el padding dentro, centrada.
   Aquí no hay un div interior donde poner `max-width` (el fondo debe seguir a
   todo el ancho), así que se consigue con el padding: crece con la pantalla
   para centrar la caja, y el `+ var(--is-gutter)` mantiene el contenido en
   1376, alineado con el logo del header. */
.is-section {
	padding: 80px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter)));
	background-color: #fff;
}

.is-section--surface {
	background-color: var(--is-surface);
}

.is-container {
	max-width: var(--is-container);
	margin: 0 auto;
	padding: 0 var(--is-gutter);
}

/* Bloque badge + título + entradilla, centrado */
.is-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 44px;
	text-align: center;
}
.page-id-71 .is-section-head.problemas, .is-section-head.activos {
	margin-bottom: 24px !important;
}
.is-section-head .is-section-lead {
	max-width: 680px;
}

/* Rejilla de 3 tarjetas (Verticales) */
.is-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

/* Rejilla de 2 columnas (Comparativa) */
.is-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: start;
}

/* Columna vertical genérica */
.is-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.is-stack--sm {
	gap: 8px;
}

.is-stack--lg {
	gap: 24px;
}

/* Fila horizontal genérica */
.is-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.is-row--wrap {
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}

.is-center {
	text-align: center;
}

@media (max-width: 1024px) {
	.is-grid-3 {
		grid-template-columns: 1fr;
	}

	.is-grid-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.is-section {
		padding: 56px 24px;
	}

	.is-container {
		padding: 0 16px;
	}
}

/* ==========================================================================
   3. Cabeceras de sección
   El trío badge + título + entradilla se repite en Verticales, Comparativa,
   Implementación y Contacto.
   ========================================================================== */

.is-badge {
	display: inline-block;
	padding: 7px 0px;
	border-radius: var(--is-radius-lg);
	color: var(--is-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.72px;
	text-transform: uppercase;
}

.is-section-title {
	color: var(--is-ink);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.16;
}

.is-section-lead {
	color: var(--is-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
}

/* ==========================================================================
   4. Botones y enlaces de acción
   ========================================================================== */

/* CTA principal "Cuéntanos tu proyecto" — aparece en Hero, Comparativa e
   Implementación. */
.is-cta,
.is-cta:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 25px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--is-radius-pill);
	background-color: var(--is-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.is-cta:hover,
.is-cta:focus {
	background-color: var(--is-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* La flecha se pinta desde CSS con una máscara sobre el propio SVG del
   diseño: hereda el color del botón y no ensucia el contenido del bloque. */
.is-cta::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	mask: url("icons/icon-arrow.svg") no-repeat center / contain;
	-webkit-mask: url("icons/icon-arrow.svg") no-repeat center / contain;
	margin-top:3px;
}

/* Enlace "Explorar solución" / "Ver todos los módulos" */
.is-link-action,
.is-link-action:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--is-primary);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.is-link-action::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	mask: url("icons/ic-arrow-sm.svg") no-repeat center / contain;
	-webkit-mask: url("icons/ic-arrow-sm.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
	margin-top:3px;
}

.is-link-action:hover::after {
	transform: translateX(3px);
}

/* Variante sobre fondo oscuro */
.is-link-action--on-dark,
.is-link-action--on-dark:visited, .is-link-action--on-dark:hover, .is-link-action--on-dark:active, .is-link-action--on-dark:focus {
	color: #fff !important;
}

/* ==========================================================================
   5. Tarjetas
   ========================================================================== */

.is-card {
	padding: 28px 26px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-lg);
	background-color: #fff;
	box-shadow: var(--is-shadow-card);
}

/* La tarjeta entera es clicable: el enlace "Explorar solución" se estira por
   encima de ella. El ::after del enlace ya es la flecha, así que la capa que
   captura el clic va en el ::before. */
.is-card:has(> .is-link-action) {
	position: relative;
	cursor: pointer;
}

.is-card > .is-link-action::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* La flecha reacciona al pasar por cualquier punto de la tarjeta */
.is-card:has(> .is-link-action):hover .is-link-action::after {
	transform: translateX(3px);
}

/* Tarjeta destacada del gradiente (Trasteros) */
.is-card--dark {
	border: 0;
	background-image: linear-gradient(to bottom, var(--is-primary), var(--is-primary-dark));
	box-shadow: none;
}

.is-card--dark .is-card__title {
	color: #fff;
}

.is-card--dark .is-card__text {
	color: var(--is-on-dark);
}

/* Tarjeta con borde de marca (Con InputSmart) */
.is-card--featured {
	border: 1.5px solid var(--is-primary);
	box-shadow: var(--is-shadow-card-hi);
}

/* Tarjeta apagada (Sin InputSmart) */
.is-card--muted {
	border: 1px solid var(--is-border);
	background-color: var(--is-surface);
	box-shadow: none;
}

.is-card__title {
	color: var(--is-ink);
	font-size: 22px;
	font-weight: 600;
}

.is-card__text {
	color: var(--is-body);
	font-size: 16px;
	line-height: 1.52;
}

/* Contenedor cuadrado del icono de tarjeta */
.is-icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background-color: var(--is-surface-icon);
}

.is-icon-tile::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

/* Baldosa blanca sobre la tarjeta oscura: el glifo sigue en azul. */
.is-icon-tile--light {
	background-color: #fff;
}

/* Baldosa azul (Con InputSmart): el glifo va en blanco. */
.is-icon-tile--brand {
	background-color: var(--is-primary);
}

.is-icon-tile--brand::before {
	background-color: #fff;
}

/* Baldosa gris apagada (Sin InputSmart). */
.is-icon-tile--muted {
	background-color: #eef2f7;
}

/* Glifo de cada baldosa. Cambiar el icono es cambiar estas dos líneas. */
.is-icon-tile--trasteros::before {
	mask-image: url("icons/ic-trasteros.svg");
	-webkit-mask-image: url("icons/ic-trasteros.svg");
}

.is-icon-tile--alojamientos::before {
	mask-image: url("icons/ic-alojamientos.svg");
	-webkit-mask-image: url("icons/ic-alojamientos.svg");
}

.is-icon-tile--otros::before {
	mask-image: url("icons/ic-otros.svg");
	-webkit-mask-image: url("icons/ic-otros.svg");
}

.is-icon-tile--reloj::before {
	mask-image: url("icons/ic-sin.svg");
	-webkit-mask-image: url("icons/ic-sin.svg");
}

.is-icon-tile--check::before {
	mask-image: url("/wp-content/uploads/2026/07/logo-input-smart.svg");
	-webkit-mask-image: url("/wp-content/uploads/2026/07/logo-input-smart.svg");
}

/* ==========================================================================
   6. Métricas y etiquetas
   ========================================================================== */

/* Cajita RevPAR / ADR / Ocupación dentro de las tarjetas */
.is-metric {
	flex: 1 0 0;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-md);
	background-color: var(--is-surface);
}

.is-metric__label {
	color: var(--is-muted);
	font-size: 13px;
	font-weight: 500;
}

.is-metric__value {
	color: var(--is-ink);
	font-size: 19px;
	font-weight: 600;
}

.is-card--dark .is-metric {
	border-color: rgb(255 255 255 / 12%);
	background-color: rgb(255 255 255 / 6%);
}

.is-card--dark .is-metric__value {
	color: #fff;
}

/* Fila de dos métricas dentro de una tarjeta */
.is-metrics {
	display: flex;
	gap: 12px;
	width: 100%;
}

/* Etiqueta tipo chip (Revenue management, Check-in digital…) */
.is-chip {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--is-radius-sm);
	background-color: var(--is-surface-alt);
	color: var(--is-body);
	font-size: 13.5px;
	font-weight: 500;
}

.is-card--dark .is-chip {
	background-color: rgb(255 255 255 / 8%);
	color: var(--is-on-dark);
}

/* Cifras de la banda de estadísticas */
.is-stat__value {
	color: var(--is-ink);
	font-size: 40px;
	font-weight: 600;
	line-height: 44px;
	margin-bottom:5px;
}

.is-stat__label {
	color: #6b7280;
	font-size: 15.5px;
	line-height: 20px;
}

.is-stat-divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 1px;
	background-color: var(--is-border-brand);
	opacity: 0.6;
}

/* Banda de estadísticas */
.is-stats {
	padding: 35px 0 36px;
	border-bottom: 1px solid var(--is-border-brand);
	background-color: #fff;
}

.is-eyebrow {
	color: var(--is-primary);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24px;
	line-height: 17px;
	text-align: center;
	text-transform: uppercase;
}

.is-stats__row {
	display: flex;
	align-items: center;
	height: 96px;
	margin-top: 20px;
}

.is-stat {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: 100%;
	text-align: center;
}

@media (max-width: 768px) {
	.is-stats__row {
		height: auto;
		flex-direction: column;
		gap: 24px;
	}

	.is-stat-divider {
		align-self: center;
		width: 60%;
		height: 1px;
	}
}

/* Banda de logos de clientes */
.is-logos {
	padding: 61px 0;
	background-color: #fff;
}

.is-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px 70px;
	margin-top: 32px;
}

.is-logos__row figure {
	margin: 0;
}

.is-logos__row img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

/* ==========================================================================
   7. Listas con icono
   Comparativa (✓ / ✗), lista de "Otros activos" y pasos numerados.
   ========================================================================== */

.is-feature {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* El icono de cada ítem es un ::before del propio ítem: la lista se escribe en
   el editor como texto y el glifo lo pone la clase. */
.is-feature::before {
	content: "";
	width: 22px;
	height: 22px;
	flex: none;
	background: no-repeat center / contain;
}

/* Aspa roja (Sin InputSmart) */
.is-feature--cross::before {
	background-image: url("icons/ic-x.svg");
}

/* Check verde (Con InputSmart) */
.is-feature--check::before {
	background-image: url("icons/ic-check.svg");
}
.is-features.check-n .is-feature--check::before {
	background-image: url("icons/ic-check2.svg");
}
/* Check verde claro de la lista de "Otros activos". Aquí el ítem es una sola
   línea de texto, así que va centrado y sin bloque de descripción. */
.is-feature--soft {
	align-items: center;
	gap: 10px;
}

.is-feature--soft::before {
	width: 20px;
	height: 20px;
	background-image: url("icons/ic-check-list.svg");
}

/* Lista de ítems */
.is-features {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.is-features--tight {
	gap: 13px;
}

/* Texto de cada ítem, junto al icono */
.is-feature__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.is-feature__title {
	color: var(--is-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}

.is-feature__text {
	color: var(--is-body);
	font-size: 14.5px;
	line-height: 1.4;
}

.is-card--muted .is-feature__title {
	color: var(--is-ink-soft);
}

.is-card--muted .is-feature__text {
	color: var(--is-body-soft);
}

/* Cabecera de tarjeta: baldosa + título + subtítulo (Sin/Con InputSmart) */
.is-card__head {
	display: flex;
	gap: 13px;
	align-items: center;
}

.is-card__head-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.is-card__head-title {
	color: var(--is-ink);
	font-size: 18px;
	font-weight: 600;
}

.is-card__subtitle {
	color: var(--is-muted);
	font-size: 14.5px;
	font-weight: 500;
}

.is-card--featured .is-card__subtitle {
	color: var(--is-primary);
}

/* Chips en fila que envuelve */
.is-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

/* Pasos numerados de Implementación */
.is-steps {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.is-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
}

.is-step__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.is-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--is-radius-pill);
	background-color: var(--is-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.is-step__title {
	color: var(--is-ink);
	font-size: 17px;
	font-weight: 600;
}

.is-step__text {
	color: var(--is-body);
	font-size: 15.5px;
	line-height: 1.45;
}

/* ==========================================================================
   7b. Implementación
   ========================================================================== */

/* La foto sangra hasta el borde derecho del contenedor: sin padding a la
   derecha, y a la izquierda el mismo tope centrado que el resto de secciones. */
.is-impl {
	display: flex;
	gap: 40px;
	align-items: center;
	padding-left: max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter)));
	padding-right: max(0px, calc((100% - var(--is-container)) / 2));
	overflow: hidden;
	background-color: var(--is-surface);
}

.is-impl__col {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	min-width: 0;
	max-width: 540px;
	padding: 60px 0;
}

/* `margin-left: auto` la pega al borde derecho: la columna de texto está
   capada a 540px y sin esto el espacio sobrante quedaría a la derecha. */
.is-impl__media {
	position: relative;
	flex: none;
	width: 720px;
	margin: 0 0 0 auto;
	align-self: stretch;
}

.is-impl__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Burbujas de métricas sobre la foto. Las posiciones salen del diseño
   (lienzo de 720 × 694) convertidas a porcentaje para que aguanten el escalado. */
.is-bubble {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 107px;
	height: 47px;
	border-radius: var(--is-radius-pill);
	background-color: rgb(255 255 255 / 68%);
	color: #000;
	text-align: center;
}

@media (max-width: 1024px) {
	.is-impl {
		flex-direction: column;
		gap: 0;
		padding-left: 0;
	}

	.is-impl__col {
		max-width: none;
		padding: 56px 24px;
	}

	.is-impl__media {
		width: 100%;
	}
}

/* ==========================================================================
   8. Contacto
   ========================================================================== */

.is-contact {
	display: flex;
	gap: 64px;
	align-items: flex-start;
	padding: 88px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter)));
	background-color: var(--is-surface);
}
.page-id-44 .is-contact {
	padding: 50px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 88px !important;
}
.is-contact__col {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	width: 540px;
}

.is-contact__form {
	flex: 1 0 0;
	min-width: 0;
}

.is-contact__title {
	color: var(--is-ink);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.18;
}

.is-contact__title em {
	color: var(--is-primary);
	font-style: normal;
}

/* Variante para cuando el titular va dentro de una tarjeta: los 44px de la
   sección se comen la caja */
.is-contact__title--sm {
	font-size: 30px;
	line-height: 1.25;
}

@media (max-width: 1024px) {
	.is-contact {
		flex-direction: column;
		gap: 40px;
		padding: 56px 24px;
	}

	.is-contact__col {
		width: 100%;
	}

	.is-contact__form {
		width: 100%;
	}
}

/* Fila icono + etiqueta + valor (Email, Teléfono, Horario) */
.is-contact-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.is-contact-item {
	display: flex;
	gap: 14px;
	align-items: center;
}

.is-contact-item__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.is-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.is-contact-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-md);
	background-color: #fff;
	box-shadow: var(--is-shadow-soft);
}

.is-contact-item__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-contact-item__icon--email::before {
	mask-image: url("icons/ic-mail.svg");
	-webkit-mask-image: url("icons/ic-mail.svg");
}

.is-contact-item__icon--telefono::before {
	mask-image: url("icons/ic-phone.svg");
	-webkit-mask-image: url("icons/ic-phone.svg");
}

.is-contact-item__icon--horario::before {
	mask-image: url("icons/ic-clock.svg");
	-webkit-mask-image: url("icons/ic-clock.svg");
}

.is-contact-item__icon--direccion::before {
	mask-image: url("icons/ic-ubicacion.svg");
	-webkit-mask-image: url("icons/ic-ubicacion.svg");
}

.is-contact-item__label {
	color: var(--is-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.is-contact-item__value {
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
}

/* Teléfono y email son enlaces, pero se leen igual que el resto de valores */
a.is-contact-item__value,
a.is-contact-item__value:visited {
	color: var(--is-ink);
	text-decoration: none;
}

a.is-contact-item__value:hover,
a.is-contact-item__value:focus-visible {
	color: var(--is-primary);
	text-decoration: underline;
}

/* Distintivo con check (RGPD, Respuesta en 48h, Sin compromiso) */
.is-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px 8px 12px;
	border: 1px solid var(--is-border);
	border-radius: 10px;
	background-color: #fff;
	color: var(--is-body);
	font-size: 14px;
	font-weight: 500;
}

.is-pill::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: url("icons/ic-badge.svg") no-repeat center / contain;
}

/* ==========================================================================
   9. Formulario (FluentForm dentro de .is-form-card)
   Estiliza los campos que pinta el plugin sin tocar sus plantillas.
   ========================================================================== */

.is-form-card {
	padding: 32px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-xl);
	background-color: #fff;
	box-shadow: var(--is-shadow-form);
}

.is-form-card .ff-el-input--label label {
	color: var(--is-ink);
	font-size: 15px;
	font-weight: 600;
}

.is-form-card .ff-el-form-control {
	padding: 14px;
	border: 1px solid var(--is-border);
	border-radius: 10px;
	background-color: var(--is-surface);
	color: var(--is-ink);
	font-family: var(--is-font);
	font-size: 15.5px;
}

.is-form-card .ff-el-form-control::placeholder {
	color: var(--is-muted);
}

.is-form-card .ff-el-form-control:focus {
	border-color: var(--is-primary);
	outline: 2px solid rgb(33 96 147 / 20%);
	outline-offset: 0;
}

.is-form-card textarea.ff-el-form-control {
	min-height: 104px;
}

.is-form-card .ff-btn-submit {
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: var(--is-radius-pill);
	background-color: var(--is-primary);
	color: #fff;
	font-family: var(--is-font);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.is-form-card .ff-btn-submit:hover {
	background-color: var(--is-primary-dark);
}

/* ==========================================================================
   10. Hero
   ========================================================================== */

.is-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 712px;
	padding: 72px 64px 84px;
	overflow: hidden;
	background-color: var(--is-primary-dark);
}

/* Degradado negro → azul por debajo de la foto */
.is-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(0deg, var(--is-primary) 0%, #000 100%);
}

.is-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.is-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.is-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	max-width: 866px;
	text-align: center;
}

.is-hero__text {
	max-width: 480px;
}

.is-hero__title {
	color: #fff;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -1.04px;
	line-height: 1.08;
}

.is-hero__title em {
	color: var(--is-accent);
	font-style: normal;
}

.is-hero__text {
	color: #fff;
	font-size: 18px;
	line-height: 1.62;
}

/* ==========================================================================
   11. Cabecera y navegación
   ========================================================================== */

.is-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	border-bottom: 1px solid rgb(255 255 255 / 8%);
	background-color: rgb(0 0 0 / 45%);
	backdrop-filter: blur(30px);
}

.is-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--is-container);
	height: 64px;
	margin: 0 auto;
	padding: 0 var(--is-gutter);
}

.is-header__logo img {
	display: block;
	width: 144px;
	height: auto;
}

/* Respaldo por si el logo no está en la librería: texto, nunca enlace crudo. */
.is-header__logo {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.4px;
	text-decoration: none;
}

.is-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* La cabecera es fija y el hero pasa por debajo a propósito. El resto de
   páginas sí necesitan compensar su altura. */
body:not(.home) .site-content {
	padding-top: 64px;
}

/* Cabecera compacta — páginas de cierre (gracias, avisos) que no tienen hero
   oscuro debajo. La normal es fija y translúcida sobre el hero; sobre fondo
   claro se vería como una banda gris encima del contenido, así que aquí va
   sólida, más baja y dentro del flujo. `relative` (no `static`) porque el menú
   móvil se posiciona en absoluto respecto a ella. */
.is-header--compact {
	position: relative;
	border-bottom: 0;
	background-color: var(--is-primary-dark);
	backdrop-filter: none;
}

.is-header--compact .is-header__inner {
	height: 56px;
}

/* Al estar en el flujo ya no hay hueco que compensar */
body.is-compact-header .site-content {
	padding-top: 0;
}

/* ==========================================================================
   11b. Migas de pan
   ========================================================================== */

/* Comparte el fondo de la sección que va debajo para que no se vea un corte */
.is-breadcrumb-bar {
	padding: 26px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 0;
	background-color: var(--is-surface);
}

.is-breadcrumb {
	color: var(--is-muted);
	font-size: 13.5px;
}

.is-breadcrumb a {
	color: var(--is-body);
	text-decoration: none;
}

.is-breadcrumb a:hover,
.is-breadcrumb a:focus-visible {
	color: var(--is-primary);
	text-decoration: underline;
}

/* La sección de debajo ya trae su propio padding superior */
.is-breadcrumb-bar + .is-contact {
	padding-top: 34px;
}

/* Páginas con hero oscuro a sangre: el hero tiene que seguir arrancando bajo la
   cabecera translúcida, así que las migas no pueden empujarlo hacia abajo. Se
   superponen, y para eso `.site` necesita ser el bloque contenedor. */
.is-dark-hero .site {
	position: relative;
}

.is-breadcrumb-bar--over {
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	z-index: 3;
	padding-top: 14px;
	padding-bottom: 0;
	background: none;
}

.is-breadcrumb-bar--over .is-breadcrumb {
	color: rgb(255 255 255 / 65%);
}

.is-breadcrumb-bar--over .is-breadcrumb a {
	color: rgb(255 255 255 / 90%);
}

.is-breadcrumb-bar--over .is-breadcrumb a:hover,
.is-breadcrumb-bar--over .is-breadcrumb a:focus-visible {
	color: #fff;
}

@media (max-width: 1024px) {
	.is-breadcrumb-bar {
		padding: 22px 24px 0;
	}

	.is-breadcrumb-bar + .is-contact {
		padding-top: 28px;
	}
}

.is-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}
@media(max-width:992px) {
	.is-nav {
		gap: 4px;
	}
}
.is-nav a {
	padding: 8px 16px;
	border-radius: var(--is-radius-pill);
	color: #fff;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.is-nav a:hover {
	background-color: rgb(255 255 255 / 12%);
}

.is-header__cta,
.is-header__cta:visited {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: var(--is-radius-pill);
	background-color: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.is-header__cta:hover {
	background-color: var(--is-primary);
	color: #fff;
}

/* Botón hamburguesa: sólo móvil */
.is-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

/* ==========================================================================
   11c. Páginas legales
   Aviso legal, privacidad y cookies. Es el único sitio del tema con texto
   corrido: el resto son secciones maquetadas donde el espaciado lo dan los
   `gap`. Aquí manda el ritmo vertical entre párrafos y títulos, así que se
   hace con márgenes y hay que ganarle a `.gb-text { margin: 0 }` — de ahí el
   selector de dos clases.
   ========================================================================== */

.is-legal {
	font-size: 16px;
	line-height: 1.75;
	color: var(--is-body);
}

/* Ritmo por defecto entre bloques hermanos; los títulos lo amplían debajo. */
.is-legal > * + * {
	margin-top: 20px;
}

.is-legal > :first-child {
	margin-top: 0;
}

.is-legal h1 {
	margin-top: 0;
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--is-ink);
}

.is-legal > h2 {
	margin-top: 56px;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--is-ink);
}

.is-legal > h3 {
	margin-top: 32px;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--is-ink);
}

/* El texto original abusa de las negritas: sin esto compiten con los títulos. */
.is-legal strong {
	font-weight: 600;
	color: var(--is-ink-soft);
}

.is-legal a {
	color: var(--is-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* Las políticas traen URLs largas pegadas; sin esto desbordan en móvil. */
	overflow-wrap: anywhere;
}

.is-legal a:hover,
.is-legal a:focus-visible {
	color: var(--is-accent);
}

/* Sin `margin-top` propio: a las listas de primer nivel ya se lo da la regla
   de hermanos, y así las que van dentro de una rejilla no se descuadran. */
.is-legal ul,
.is-legal ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-left:10px;
}

.is-legal li::marker {
	color: var(--is-primary);
}

/* Las listas que en el sitio antiguo llevaban el check de FontAwesome. Reusa
   el icono de `is-feature--check` en vez de duplicarlo. */
.is-legal .is-legal-check {
	padding-left: 0;
	list-style: none;
	margin-left: 0 !important;
}

.is-legal .is-legal-check > li {
	display: flex;
/* 	gap: 12px; */
	align-items: flex-start;
}

.is-legal .is-legal-check > li::before {
	content: "";
	width: 22px;
	height: 22px;
	flex: none;
	/* Centra el icono sobre la primera línea de texto (16 × 1.75 = 28). */
	margin-top: 3px;
	background: no-repeat center / contain url("icons/ic-check.svg");
	margin-right:12px;
}

/* Tablas: las escribe Complianz con [cmplz-cookies], no las páginas. Se les da
   scroll propio para que nunca empujen el ancho del documento. */
.is-legal .is-legal-table {
	overflow-x: auto;
}

.is-legal table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.is-legal th,
.is-legal td {
	padding: 12px 16px;
	border: 1px solid var(--is-border);
	text-align: left;
	vertical-align: top;
}

.is-legal th {
	background-color: var(--is-surface-alt);
	font-weight: 600;
	color: var(--is-ink);
}

@media (max-width: 768px) {
	.is-legal h1 {
		font-size: 30px;
	}

	.is-legal > h2 {
		margin-top: 44px;
		font-size: 24px;
	}

	.is-legal > h3 {
		font-size: 18px;
	}
}

/* ==========================================================================
   12. Pie
   ========================================================================== */

.is-footer {
	padding: 57px 0 29px;
	border-top: 1px solid var(--is-border-brand);
	background-color: #fff;
}

.is-footer__inner {
	display: grid;
	grid-template-columns: 240px 1fr auto auto auto;
	gap: 48px;
	max-width: var(--is-container);
	margin: 0 auto;
	padding: 0 var(--is-gutter);
}

.is-footer__logo img {
	display: block;
	width: 153px;
	height: auto;
}

/* Mismo respaldo que en la cabecera, en oscuro sobre el fondo claro del pie. */
.is-footer__logo {
	color: var(--is-primary-dark);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.4px;
	text-decoration: none;
}

.is-footer__text {
	margin-top: 16px;
	color: rgb(0 0 0 / 60%);
	font-size: 15.5px;
	line-height: 24px;
}

.is-footer__heading {
	color: #000;
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
}

.is-footer__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* El disparador del banner de Complianz es un <button> por accesibilidad, pero
   en el pie tiene que leerse como un enlace más de la lista. */
.is-footer__list a,
.is-footer__list button {
	color: rgb(0 0 0 / 60%);
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
}

.is-footer__list button {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.is-footer__list a:hover,
.is-footer__list button:hover {
	color: var(--is-primary);
}

/* Columna de logos de financiación: apilados y con el mismo ancho, aunque los
   originales tengan proporciones distintas. */
.is-footer__col--logos {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.is-footer__funding-logo {
	display: block;
	width: 180px;
	height: auto;
	max-width: 100%;
}

.is-social {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.is-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--is-border-brand);
	border-radius: var(--is-radius-sm);
	color: var(--is-ink);
}

.is-social a:hover {
	border-color: var(--is-primary);
	color: var(--is-primary);
}

.is-social svg {
	width: 16px;
	height: 16px;
}

.is-footer__bottom {
	max-width: var(--is-container);
	margin: 48px auto 0;
	padding: 29px var(--is-gutter) 0;
	border-top: 1px solid var(--is-border-brand);
	color: rgb(0 0 0 / 45%);
	font-size: 13px;
	line-height: 17px;
}

/* ==========================================================================
   13. Botón flotante de WhatsApp
   ========================================================================== */

.is-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--is-radius-pill);
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
	transition: transform 0.2s ease;
}

.is-whatsapp:hover {
	transform: scale(1.08);
	color: #fff;
}

.is-whatsapp svg {
	width: 30px;
	height: 30px;
}

/* ==========================================================================
   14. Responsive
   El diseño de Figma sólo define la vista de 1440px; estos cortes son una
   adaptación razonable, no una maqueta aprobada.
   ========================================================================== */

@media (max-width: 1024px) {
	.is-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.is-section-title, .is-contact__title {
		font-size: 32px;
	}

	.is-hero__title {
		font-size: 34px;
		letter-spacing: -0.5px;
	}

	/* Los 712px del diseño son para 1440. Aquí el contenido es más alto y más
	   estrecho, así que manda el contenido y el hero se ajusta. */
	.is-hero {
		min-height: 0;
		padding: 104px var(--is-gutter) 64px;
	}

	.is-hero .gb-text.is-cta {
		margin-top: 32px !important;
	}

	.is-nav {
		display: none;
	}

	.is-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Menú desplegado por el botón hamburguesa */
	.is-header.is-open .is-nav {
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 12px var(--is-gutter) 20px;
		background-color: #000;
	}

	/* La compacta mide 56px, no 64: va después para ganar a igual especificidad */
	.is-header--compact.is-open .is-nav {
		top: 56px;
	}

	.is-footer__inner {
		grid-template-columns: 1fr;
	}

	.is-whatsapp {
		right: 16px;
		bottom: 16px;
	}
}
/* Desplaza la cabecera hacia abajo cuando la barra de admin está activa */
body.admin-bar.home .is-header, body.admin-bar.page-id-71 .is-header, body.admin-bar.page-id-77 .is-header, body.admin-bar.page-id-87 .is-header {
    top: 32px !important;
}

/* Ajuste para tablets y móviles donde la barra de admin es más alta */
@media all and (max-width: 782px) {
    body.admin-bar.home .is-header, body.admin-bar.home .is-header, body.admin-bar.page-id-71 .is-header, body.admin-bar.page-id-77 .is-header, body.admin-bar.page-id-87 .is-header {
        top: 46px !important;
    }
}
.gb-text.is-cta.cta-mg {
	margin-top:60px !important;
}
.gb-text.is-cta.hero {
	margin-top:20px;
}
a, button {
	transition: all .3s ease-in-out !important;
}
.gb-text.is-cta {
	margin-top: 16px !important;
}
.container-opciones .is-card.is-stack {
	transition: all .3s ease-in-out;
}
.container-opciones .is-card.is-stack:hover, .container-opciones .is-card.is-stack:active, .container-opciones .is-card.is-stack:focus {
	transform: scale(1.03);
}
label.ff-el-form-check-label {
	font-size: 15px !important;
}
/* ==========================================================================
   15. Página Trasteros
   Maquetación propia de /trasteros/. Reutiliza los tokens y las clases
   generales (is-section, is-container, is-card, is-cta, is-badge…) y sólo
   añade lo que el diseño de esta página no cubría.

   Nota sobre los resaltes de color dentro de un titular: el tema los hace con
   <em> (ver .is-hero__title em). Donde el diseño pide DOS colores en el mismo
   titular se usa <em> y <strong>, que son los únicos formatos en línea que el
   editor de bloques conserva al reabrir la página. Un <span class="…"> se
   perdería al editar.
   ========================================================================== */

:root {
	/* Colores que sólo aparecen en esta página */
	--is-hero-end: #113f64;
	--is-danger: #ed4c4c;
	--is-success: #16a34a;
}

/* La cabecera es fija: las páginas con hero oscuro a sangre se comportan como
   la portada y dejan que pase por debajo, sin el hueco de 64px. */
body.is-dark-hero .site-content {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   15.1 Hero partido (texto + foto)
   El de la portada es centrado y a sangre; éste va a dos columnas, así que es
   una clase aparte y no un modificador de .is-hero.
   -------------------------------------------------------------------------- */

/* La foto sangra por la derecha y por abajo: sólo queda el tope izquierdo, el
   mismo que alinea el resto del sitio. El aire inferior lo pone la columna de
   texto, no la sección, para que la imagen llegue a la esquina. */
.is-tr-hero {
	position: relative;
	overflow: hidden;
	padding: 128px 0 0 max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter)));
	background-image: linear-gradient(180deg, #000 0%, var(--is-hero-end) 100%);
}

/* Halo difuso del diseño. Decorativo: no ocupa sitio ni captura clics. */
.is-tr-hero::before {
	content: "";
	position: absolute;
	top: -160px;
	left: 30%;
	z-index: 0;
	width: 576px;
	height: 576px;
	border-radius: 50%;
	opacity: 0.3;
	filter: blur(64px);
	background-image: radial-gradient(circle, rgb(255 255 255 / 35%) 0%, rgb(0 0 0 / 0%) 70%);
	pointer-events: none;
}

/* `stretch` es lo que hace que la foto llegue de la primera a la última línea
   de la caja; los 636 del diseño son el suelo cuando el texto ocupa menos. */
.is-tr-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 48px;
	align-items: stretch;
	min-height: 636px;
}

/* La columna sí conserva el aire inferior que se le quitó a la sección, y el
   texto sigue centrado dentro de él. */
.is-tr-hero__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	max-width: 664px;
	padding-bottom: 96px;
}

.is-tr-hero__title {
	margin-top: 24px;
	/* La caja del titular en Figma mide 512: sin tope, «de Self Storage» se
	   parte y «Storage» cae solo en la tercera línea. */
	max-width: 540px;
	color: #fff;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -1.6px;
	line-height: 1.21;
}

.is-tr-hero__title em {
	color: var(--is-accent);
	font-style: normal;
}

.is-tr-hero__text {
	margin-top: 24px;
	max-width: 606px;
	color: rgb(255 255 255 / 62%);
	font-size: 18px;
	line-height: 1.625;
}

.is-tr-hero__text strong {
	color: #fff;
	font-weight: 700;
}

/* Gana a la regla global `.gb-text.is-cta { margin-top: 16px !important }` */
.is-tr-hero__col .gb-text.is-cta {
	margin-top: 36px !important;
}

/* Se come todo el hueco que deja la columna de texto, hasta el borde derecho.
   La imagen va en absoluto para que su alto intrínseco no infle la caja: si no,
   en pantallas anchas la foto se estiraría hasta más de mil píxeles de alto. */
.is-tr-hero__media {
	position: relative;
	flex: 1 1 auto;
	width: auto;
	margin: 0;
}

.is-tr-hero__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 132px 0 0 0;
	object-fit: cover;
}

/* Pastilla translúcida sobre fondo oscuro (hero y cierre) */
.is-tr-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--is-radius-pill);
	background-color: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 90%);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.is-tr-pill::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background-color: currentColor;
	mask: url("icons/ic-sparkle.svg") no-repeat center / contain;
	-webkit-mask: url("icons/ic-sparkle.svg") no-repeat center / contain;
}
.is-tr-pill.not-icon::before {
	content: "";
	mask: none !important;
	-webkit-mask: none !important;
	width: 0 !important;
	height: 0 !important;
}
/* Línea de tranquilidad bajo el CTA del hero */
.is-tr-trust {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 24px;
	color: rgb(255 255 255 / 72%);
	font-size: 14px;
	line-height: 20px;
}

.is-tr-trust::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	mask: url("icons/ic-check-thin.svg") no-repeat center / contain;
	-webkit-mask: url("icons/ic-check-thin.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   15.2 Variantes de botón que pide esta página
   -------------------------------------------------------------------------- */

/* CTA blanco sobre fondo oscuro. La flecha ya usa currentColor, así que
   cambiando sólo los dos colores queda coherente. */
.is-cta--light,
.is-cta--light:visited {
	border-color: rgb(10 10 10 / 4%);
	background-color: #fff;
	color: var(--is-primary);
	box-shadow: 0 1px 1px rgb(10 10 10 / 4%), 0 8px 12px rgb(10 10 10 / 10%);
}

.is-cta--light:hover,
.is-cta--light:focus {
	background-color: var(--is-surface);
	color: var(--is-primary-dark);
}

/* Versión compacta para las barras de llamada a la acción */
.is-cta--sm {
	padding: 0 20px;
	height: 44px;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   15.3 Barra de llamada a la acción (degradado, ancho completo)
   Se repite en «Los retos del sector» y en «Implementación y acompañamiento».
   -------------------------------------------------------------------------- */

.is-tr-banner {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	margin-top: 45px;
	padding: 29px;
	border: 1px solid var(--is-border-brand);
	border-radius: 16px;
	background-image: linear-gradient(to right, var(--is-primary-dark), var(--is-primary));
}

/* La segunda barra invierte el degradado y lleva el borde en blanco */
.is-tr-banner--alt {
	margin-top: 20px;
	border-color: #fff;
	background-image: linear-gradient(to left, #2f6794, #0f202e);
}

.is-tr-banner__text {
	color: #fff;
	font-size: 18px;
	line-height: 24px;
}

.is-tr-banner__text strong {
	font-weight: 500;
}

/* La regla global de .is-cta añade un margen que aquí descuadra la fila */
.is-tr-banner .gb-text.is-cta {
	margin-top: 0 !important;
	flex: none;
}

/* --------------------------------------------------------------------------
   15.4 «¿Te suena alguno de estos problemas?»
   Lista centrada, sin tarjetas: sólo icono + título + descripción.
   -------------------------------------------------------------------------- */

.is-tr-problems {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.is-tr-problem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.is-tr-problem__title {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--is-ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.352px;
	line-height: 24px;
}

/* El glifo va antes del título; el icono lo elige el modificador de abajo. */
.is-tr-problem__title::before {
	content: "";
	width: 22px;
	height: 22px;
	flex: none;
	background-color: #216093;
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

/* Triángulo de aviso, en su color original, volado sobre el título */
.is-tr-problem__title::after {
	content: "";
	width: 9px;
	height: 8px;
	flex: none;
	align-self: flex-start;
	margin-top: 2px;
	background: url("icons/ic-alert-tri.svg") no-repeat center / contain;
}

.is-tr-problem--morosidad .is-tr-problem__title::before {
	mask-image: url("icons/ic-euro.svg");
	-webkit-mask-image: url("icons/ic-euro.svg");
}

.is-tr-problem--accesos .is-tr-problem__title::before {
	mask-image: url("icons/ic-key.svg");
	-webkit-mask-image: url("icons/ic-key.svg");
}

.is-tr-problem--contratos .is-tr-problem__title::before {
	mask-image: url("icons/ic-contract.svg");
	-webkit-mask-image: url("icons/ic-contract.svg");
}

.is-tr-problem--visibilidad .is-tr-problem__title::before {
	mask-image: url("icons/ic-chart.svg");
	-webkit-mask-image: url("icons/ic-chart.svg");
}

.is-tr-problem--soporte .is-tr-problem__title::before {
	mask-image: url("icons/ic-support.svg");
	-webkit-mask-image: url("icons/ic-support.svg");
}

.is-tr-problem--fragmentacion .is-tr-problem__title::before {
	mask-image: url("icons/ic-network.svg");
	-webkit-mask-image: url("icons/ic-network.svg");
}

.is-tr-problem__text {
	color: rgb(0 0 0 / 60%);
	font-size: 16px;
	line-height: 22.75px;
}

/* --------------------------------------------------------------------------
   15.5 «Reduce tu morosidad» — panel oscuro + lista
   -------------------------------------------------------------------------- */

.is-tr-moro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.is-tr-moro__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 103px 36px;
	border-radius: 24px;
	background-image:
		radial-gradient(ellipse 60% 45% at 50% 50%, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 70%),
		linear-gradient(0deg, #09253c 0%, var(--is-primary) 100%);
}

.is-tr-moro__eyebrow {
	display: flex;
	gap: 8px;
	align-items: center;
	color: rgb(255 255 255 / 62%);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	width: 100%;
}

.is-tr-moro__eyebrow::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	mask: url("icons/ic-trend-down.svg") no-repeat center / contain;
	-webkit-mask: url("icons/ic-trend-down.svg") no-repeat center / contain;
}

.is-tr-moro__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	margin-top: 28px;
}

.is-tr-tile {
	padding: 21px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 16px;
	background-color: rgb(255 0 0 / 5%);
}

.is-tr-tile--good {
	border-color: rgb(255 255 255 / 25%);
	background-color: rgb(0 255 72 / 10%);
}

.is-tr-tile__label {
	color: rgb(255 255 255 / 40%);
	font-size: 12px;
	letter-spacing: 0.3px;
	line-height: 16px;
	text-transform: uppercase;
}

.is-tr-tile__value {
	margin-top: 8px;
	color: #ea6d6d;
	font-size: 36px;
	font-weight: 600;
	line-height: 40px;
}

.is-tr-tile--good .is-tr-tile__value {
	color: #00ff2b;
}

.is-tr-tile__note {
	margin-top: 4px;
	color: rgb(255 255 255 / 62%);
	font-size: 12px;
	line-height: 16px;
}

.is-tr-moro__hl {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	margin-top: 16px;
	padding: 17px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 16px;
	background-color: rgb(255 255 255 / 5%);
}

.is-tr-moro__hl::before {
	content: "";
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	background-color: rgb(255 255 255 / 10%);
	background-image: url("icons/ic-lock-solid.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.is-tr-moro__hl-title {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.is-tr-moro__hl-note {
	color: rgb(255 255 255 / 62%);
	font-size: 12px;
	line-height: 16px;
}

/* Titular con dos resaltes: <em> el dato malo, <strong> el bueno. */
.is-tr-moro__title em {
	color: #ff0b0a;
	font-style: normal;
}

.is-tr-moro__title strong {
	color: #00c721;
	font-weight: inherit;
}

/* Lista con icono en caja blanca (columna derecha) */
.is-tr-iconlist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-top: 18px;
}

.is-tr-iconlist__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: rgb(0 0 0 / 85%);
	font-size: 16px;
	line-height: 22.75px;
}

.is-tr-iconlist__item::before {
	content: "";
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid var(--is-border-brand);
	border-radius: 8px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.is-tr-iconlist__item--alertas::before {
	background-image: url("icons/ic-chat.svg");
}

.is-tr-iconlist__item--bloqueo::before {
	background-image: url("icons/ic-lock.svg");
}

.is-tr-iconlist__item--reintento::before {
	background-image: url("icons/ic-refresh.svg");
}

.is-tr-iconlist__item--panel::before {
	background-image: url("icons/ic-grid.svg");
}

.is-tr-moro .gb-text.is-cta {
	margin-top: 32px !important;
}

/* --------------------------------------------------------------------------
   15.6 «No te dejamos solo» — foto grande + cuatro tarjetas
   -------------------------------------------------------------------------- */

.is-tr-support {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.is-tr-photocard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 412px;
	padding: 28px;
	border: 1px solid var(--is-border-brand);
	border-radius: 24px;
	overflow: hidden;
	background-color: #000;
}

.is-tr-photocard__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.is-tr-photocard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo oscuro para que el texto se lea sobre la foto */
.is-tr-photocard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(to top, #000 0%, rgb(102 102 102 / 0%) 100%);
}

.is-tr-photocard > *:not(.is-tr-photocard__media) {
	position: relative;
	z-index: 2;
}

.is-tr-photocard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 16px;
	background-color: rgb(255 255 255 / 5%);
}

.is-tr-photocard__icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: #fff;
	mask: url("icons/ic-user.svg") no-repeat center / contain;
	-webkit-mask: url("icons/ic-user.svg") no-repeat center / contain;
}

.is-tr-photocard__title {
	margin-top: 24px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.44px;
	line-height: 28px;
}

.is-tr-photocard__text {
	margin-top: 8px;
	color: rgb(255 255 255 / 62%);
	font-size: 14px;
	line-height: 22.75px;
}

.is-tr-support__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.is-tr-minicard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 21px;
	border: 1px solid var(--is-border-brand);
	border-radius: 16px;
	background-color: #fff;
}

/* Fila superior: baldosa del icono a la izquierda y check verde a la derecha */
.is-tr-minicard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.is-tr-minicard__head::after {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: url("icons/ic-check2.svg") no-repeat center / contain;
}

.is-tr-minicard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-color: var(--is-surface-icon);
}

.is-tr-minicard__icon::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-tr-minicard__icon--soporte::before {
	mask-image: url("icons/ic-headset.svg");
	-webkit-mask-image: url("icons/ic-headset.svg");
}

.is-tr-minicard__icon--migracion::before {
	mask-image: url("icons/ic-database.svg");
	-webkit-mask-image: url("icons/ic-database.svg");
}

.is-tr-minicard__icon--formacion::before {
	mask-image: url("icons/ic-graduation.svg");
	-webkit-mask-image: url("icons/ic-graduation.svg");
}

.is-tr-minicard__icon--actualizaciones::before {
	mask-image: url("icons/ic-refresh.svg");
	-webkit-mask-image: url("icons/ic-refresh.svg");
}

.is-tr-minicard__kicker {
	margin-top: 16px;
	color: rgb(0 0 0 / 45%);
	font-size: 11.2px;
	font-weight: 600;
	letter-spacing: 1.568px;
	line-height: 16.8px;
	text-transform: uppercase;
}

.is-tr-minicard__title {
	margin-top: 4px;
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

.is-tr-minicard__text {
	margin-top: 6px;
	color: rgb(0 0 0 / 60%);
	font-size: 14px;
	line-height: 22.75px;
}

/* --------------------------------------------------------------------------
   15.7 «Funcionalidades pensadas para escalar»
   -------------------------------------------------------------------------- */

/* El diseño funde el blanco de arriba con un gris al pie de la sección. */
.is-tr-features-sec {
	padding: 84px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 151px;
	background-image: linear-gradient(180deg, rgb(217 217 217 / 0%) 0%, rgb(217 217 217 / 100%) 100%);
}

.is-tr-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.is-tr-fcard {
	padding: 25px;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: 24px;
	background-color: #fff;
}

.is-tr-fcard__kicker {
	color: var(--is-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.92px;
	line-height: 16px;
	text-transform: uppercase;
}

.is-tr-fcard__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 20px;
}

.is-tr-fitem {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* Baldosa del icono. El glifo lo pone el modificador de cada ítem. */
.is-tr-fitem::before {
	content: "";
	width: 36px;
	height: 36px;
	flex: none;
	border: 1px solid rgb(65 65 65 / 12%);
	border-radius: 12px;
	background-color: rgb(0 0 0 / 5%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.is-tr-fitem--online::before { background-image: url("icons/ic-cart.svg"); }
.is-tr-fitem--otp::before { background-image: url("icons/ic-sign.svg"); }
.is-tr-fitem--altas::before { background-image: url("icons/ic-swap.svg"); }
.is-tr-fitem--area::before { background-image: url("icons/ic-user-check.svg"); }
.is-tr-fitem--llave::before { background-image: url("icons/ic-mobile.svg"); }
.is-tr-fitem--comunicaciones::before { background-image: url("icons/ic-bell.svg"); }
.is-tr-fitem--multiusuario::before { background-image: url("icons/ic-globe.svg"); }
.is-tr-fitem--mapa::before { background-image: url("icons/ic-map.svg"); }
.is-tr-fitem--verifactu::before { background-image: url("icons/ic-invoice.svg"); }
.is-tr-fitem--tpv::before { background-image: url("icons/ic-card.svg"); }
.is-tr-fitem--morosidad::before { background-image: url("icons/ic-shield.svg"); }
.is-tr-fitem--analitica::before { background-image: url("icons/ic-analytics.svg"); }

.is-tr-fitem__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
}

.is-tr-fitem__title {
	color: #444;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* El diseño traía tres grises distintos para estas descripciones; se unifican
   en el mismo valor que el resto de textos secundarios de la página. */
.is-tr-fitem__text {
	margin-top: 2px;
	color: rgb(0 0 0 / 62%);
	font-size: 13px;
	line-height: 19.5px;
}

.is-tr-features__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}

.is-tr-features__note {
	color: rgb(0 0 0 / 62%);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.is-tr-chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 7px 15px;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: var(--is-radius-pill);
	background-color: rgb(0 0 0 / 5%);
	color: #000;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.is-tr-chip::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: url("icons/ic-layers.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   15.8 «El flujo perfecto» — pasos numerados + foto
   -------------------------------------------------------------------------- */

.is-tr-flow {
	display: grid;
	grid-template-columns: 1fr 560px;
	gap: 40px;
	align-items: center;
}

.is-tr-flow__col {
	max-width: 512px;
}

.is-tr-flow__title {
	color: var(--is-ink);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.02;
}

.is-tr-flow__text {
	margin-top: 16px;
	max-width: 448px;
	color: rgb(0 0 0 / 60%);
	font-size: 18px;
	line-height: 29.25px;
}

.is-tr-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 36px;
}

/* La línea que une un paso con el siguiente. Va como ::before del propio paso
   para no meter un bloque vacío en el editor; el último no la lleva. */
.is-tr-step {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.is-tr-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 48px;
	left: 20px;
	width: 1px;
	height: calc(100% - 32px);
	background-color: var(--is-border-brand);
}

.is-tr-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--is-radius-pill);
	background-color: var(--is-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.is-tr-step__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
	padding-top: 6px;
}

.is-tr-step__title {
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.352px;
	line-height: 24px;
}

.is-tr-step__text {
	margin-top: 4px;
	color: rgb(0 0 0 / 60%);
	font-size: 14px;
	line-height: 22.75px;
}

.is-tr-flow__media {
	margin: 0;
	border-radius: 41px;
	overflow: hidden;
}

.is-tr-flow__media img {
	display: block;
	width: 100%;
	height: 491px;
	object-fit: cover;
	object-position: 17% 0;
}

/* --------------------------------------------------------------------------
   15.9 «¿Cuánto te ahorras al mes?»
   -------------------------------------------------------------------------- */

.is-tr-savings {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.is-tr-savecard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 29px;
	border: 1px solid var(--is-border-brand);
	border-radius: 24px;
	background-color: #fff;
}

.is-tr-savecard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--is-border-brand);
	border-radius: 16px;
	background-color: #fff;
}

.is-tr-savecard__icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-tr-savecard__icon--ahorro::before {
	mask-image: url("icons/ic-trending-up.svg");
	-webkit-mask-image: url("icons/ic-trending-up.svg");
}

.is-tr-savecard__icon--personal::before {
	mask-image: url("icons/ic-user-badge.svg");
	-webkit-mask-image: url("icons/ic-user-badge.svg");
}

.is-tr-savecard__icon--tiempo::before {
	mask-image: url("icons/ic-clock.svg");
	-webkit-mask-image: url("icons/ic-clock.svg");
}

.is-tr-savecard__figure {
	margin-top: 24px;
	color: var(--is-primary);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.75px;
	line-height: 36px;
}

.is-tr-savecard__subtitle {
	margin-top: 4px;
	color: rgb(0 0 0 / 60%);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.is-tr-compare {
	width: 100%;
	margin-top: 24px;
	border: 1px solid var(--is-border-brand);
	border-radius: 16px;
}

.is-tr-compare__row {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	color: rgb(0 0 0 / 60%);
	font-size: 14px;
	line-height: 20px;
}

.is-tr-compare__row:first-child {
	padding-bottom: 11px;
	border-bottom: 1px solid var(--is-border-brand);
}

/* El dato «antes» en rojo y el «después» en verde y más marcado. */
.is-tr-compare__row em {
	color: var(--is-danger);
	font-style: normal;
}

.is-tr-compare__row strong {
	color: var(--is-success);
	font-weight: 600;
}

/* `auto` la empuja al fondo: así las tres tarjetas cierran a la misma altura
   aunque el texto de arriba ocupe distinto número de líneas. */
.is-tr-savecard__note {
	margin-top: auto;
	padding-top: 20px;
	color: rgb(0 0 0 / 45%);
	font-size: 12px;
	line-height: 16px;
}

/* --------------------------------------------------------------------------
   15.10 Cierre
   -------------------------------------------------------------------------- */

.is-tr-final {
	padding: 128px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 176px;
	background-image: linear-gradient(0deg, #000 0%, var(--is-primary) 100%);
	text-align: center;
}

.is-tr-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
}

.is-tr-final__title {
	margin-top: 24px;
	color: #fff;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -1.2px;
	line-height: 1.08;
}

.is-tr-final__text {
	margin-top: 20px;
	max-width: 576px;
	color: rgb(255 255 255 / 62%);
	font-size: 18px;
	line-height: 29.25px;
}

.is-tr-final .gb-text.is-cta {
	margin-top: 36px !important;
}

.is-tr-final__note {
	margin-top: 20px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
   15.11 Adaptación a pantallas menores
   El diseño sólo existe a 1440; de aquí abajo son decisiones nuestras.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	/* La foto del hero y la del flujo dejan de tener ancho fijo antes de que
	   la columna de texto se quede sin sitio. */
	.is-tr-hero__media {
		width: 10%;
	}

	.is-tr-flow {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1024px) {
	/* Apilado ya no hay hueco a la derecha que llenar: la foto vuelve a la caja
	   normal y la sección recupera sus cuatro lados. */
	.is-tr-hero {
		padding-top: 144px;
		padding-right: max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter)));
		padding-bottom: 64px;
	}

	.is-tr-hero__inner {
		flex-direction: column;
		gap: 40px;
		align-items: flex-start;
		min-height: 0;
	}

	.is-tr-hero__col {
		max-width: none;
		padding-bottom: 0;
	}

	.is-tr-hero__media {
		position: static;
		width: 100%;
	}

	.is-tr-hero__media img {
		position: static;
		height: auto;
		border-radius: 64px 0 0 0;
	}

	.is-tr-moro,
	.is-tr-support,
	.is-tr-flow {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.is-tr-moro__panel {
		padding: 48px 28px;
	}

	.is-tr-features,
	.is-tr-savings {
		grid-template-columns: 1fr 1fr;
	}

	.is-tr-features-sec {
		padding-top: 64px;
		padding-bottom: 80px;
	}

	.is-tr-final {
		padding-top: 88px;
		padding-bottom: 96px;
	}

	.is-tr-flow__col,
	.is-tr-flow__text {
		max-width: none;
	}

	.is-tr-flow__media img {
		height: auto;
	}
}

@media (max-width: 768px) {
	.is-tr-hero {
		padding-right: 32px;
		padding-left: 32px;
	}

	.is-tr-hero__title {
		font-size: 34px;
		letter-spacing: -0.5px;
	}

	.is-tr-hero__text,
	.is-tr-flow__text,
	.is-tr-final__text {
		font-size: 16px;
	}

	/* A 390 no cabe en una línea: se deja envolver y se centra el icono. */
	.is-tr-trust {
		align-items: flex-start;
	}

	.is-tr-trust::before {
		margin-top: 2px;
	}

	.is-tr-flow__title,
	.is-tr-moro__title {
		font-size: 32px;
	}

	/* La barra pasa a columna: el botón ya no cabe al lado del texto. */
	.is-tr-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px;
	}

	.is-tr-moro__tiles,
	.is-tr-support__cards,
	.is-tr-features,
	.is-tr-savings {
		grid-template-columns: 1fr;
	}

	.is-tr-features-sec,
	.is-tr-final {
		padding-right: 24px;
		padding-left: 24px;
	}

	.is-tr-final__title {
		font-size: 32px;
		letter-spacing: -0.5px;
	}

	.is-tr-features__foot {
		gap: 16px;
	}

	.is-tr-photocard {
		min-height: 320px;
	}

	.is-tr-flow__media {
		border-radius: 24px;
	}
}

/* ==========================================================================
   16. Página Otros Activos
   Maquetación propia de /otros-activos/. El hero, la barra de llamada a la
   acción y la tarjeta con foto son los mismos de Trasteros (`is-tr-*`): aquí
   sólo se ajusta lo que este diseño cambia y se añade lo que no existía.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 Hero
   Misma caja partida que Trasteros; cambian el interlineado del titular, el
   gris del párrafo y que hay dos botones en vez de uno.
   -------------------------------------------------------------------------- */

.is-oa-hero .is-tr-hero__title {
	/* En Figma el titular desborda su caja y cabe en dos líneas; en la columna
	   real no cabe, así que se le pone tope para que reparta en tres líneas
	   equilibradas en vez de dejar «medida» sola. */
	max-width: 440px;
	letter-spacing: -1.04px;
	line-height: 1.08;
}

.is-oa-hero .is-tr-hero__text {
	max-width: 560px;
	color: var(--is-muted);
	font-size: 18px;
	line-height: 1.6;
}

/* Pastilla del hero con punto en lugar del destello. El ::before de
   `.is-tr-pill` ya es un cuadro de `currentColor` enmascarado: basta con
   quitarle la máscara y redondearlo. */
.is-tr-pill--dot {
	border-color: rgb(255 255 255 / 18%);
	background-color: transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.66px;
	text-transform: uppercase;
}

.is-tr-pill--dot::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	mask: none;
	-webkit-mask: none;
	color: #216093;
}

/* Los dos botones van en fila; la regla global de `.is-cta` les mete un margen
   superior que aquí los descuadraría. */
.is-oa-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 32px;
}

.is-oa-hero__buttons .gb-text.is-cta,
.is-oa-final__buttons .gb-text.is-cta {
	margin-top: 0 !important;
}

/* CTA secundario sobre fondo oscuro: sólo contorno y sin flecha. */
.is-cta--ghost,
.is-cta--ghost:visited {
	border-color: rgb(255 255 255 / 25%);
	background-color: transparent;
	color: #fff;
}

.is-cta--ghost::after {
	display: none;
}

.is-cta--ghost:hover,
.is-cta--ghost:focus {
	background-color: rgb(255 255 255 / 12%);
	color: #fff;
}

/* --------------------------------------------------------------------------
   16.2 Cajas centradas
   El diseño estrecha las listas respecto al ancho de la sección.
   -------------------------------------------------------------------------- */

.is-oa-narrow {
	margin: 0 auto;
}

.is-oa-wide {
	max-width: 1088px;
	margin: 0 auto;
}

/* El titular de 40px que usan «Cómo trabajamos» y el cierre. Con el tope de
   caja parte en dos líneas como el diseño, en vez de dejar «pasos» solo. */
.is-section-title--sm {
	max-width: 820px;
	font-size: 40px;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   16.3 «¿Qué tipo de activo necesitas gestionar?»
   Rejilla de dos columnas sin tarjeta: icono, título y descripción centrados.
   -------------------------------------------------------------------------- */

.is-oa-types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 20px;
	max-width:900px;
	margin: 0 auto;
}

.is-oa-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 22px;
	border-radius: var(--is-radius-md);
	text-align: center;
}

/* El glifo es el ::before del propio ítem; lo elige el modificador. */
.is-oa-type::before {
	content: "";
	width: 24px;
	height: 24px;
	flex: none;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-oa-type--parkings::before { mask-image: url("icons/oa-car.svg"); -webkit-mask-image: url("icons/oa-car.svg"); }
.is-oa-type--garajes::before { mask-image: url("icons/oa-garage.svg"); -webkit-mask-image: url("icons/oa-garage.svg"); }
.is-oa-type--naves::before { mask-image: url("icons/oa-warehouse.svg"); -webkit-mask-image: url("icons/oa-warehouse.svg"); }
.is-oa-type--caravanas::before { mask-image: url("icons/oa-caravan.svg"); -webkit-mask-image: url("icons/oa-caravan.svg"); }
.is-oa-type--mobile-homes::before { mask-image: url("icons/oa-mobile-home.svg"); -webkit-mask-image: url("icons/oa-mobile-home.svg"); }
.is-oa-type--residencias::before { mask-image: url("icons/oa-building.svg"); -webkit-mask-image: url("icons/oa-building.svg"); }
.is-oa-type--almacenamiento::before { mask-image: url("icons/oa-package.svg"); -webkit-mask-image: url("icons/oa-package.svg"); }
.is-oa-type--personalizados::before { mask-image: url("icons/oa-settings.svg"); -webkit-mask-image: url("icons/oa-settings.svg"); }

.is-oa-type__title {
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.is-oa-type__text {
	color: var(--is-body);
	font-size: 15px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   16.4 «Una plataforma que se adapta a ti»
   Tarjeta con foto a la izquierda y copia con checklist a la derecha.
   -------------------------------------------------------------------------- */

.is-oa-solution {
	display: grid;
	grid-template-columns: 600px 1fr;
	gap: 64px;
	align-items: center;
}

/* La tarjeta con foto es la de Trasteros; aquí el diseño la hace más alta y le
   cambia el glifo. */
.is-oa-photocard {
	min-height: 591px;
}

.is-tr-photocard__icon--asesoramiento::before {
	mask-image: url("icons/oa-handshake.svg");
	-webkit-mask-image: url("icons/oa-handshake.svg");
}

.is-oa-solution__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 17px;
	min-width: 0;
}

.is-oa-solution__title {
	color: var(--is-ink);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.16;
}

.is-oa-solution__text {
	color: var(--is-body);
	font-size: 16px;
	line-height: 1.65;
}

.is-oa-solution__col .gb-text.is-cta {
	margin-top: 6px !important;
}

/* Lista de ventajas: cada una es una caja con el check verde delante. */
.is-oa-checks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.is-oa-check {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--is-border);
	border-radius: 10px;
	background-color: var(--is-surface);
	color: var(--is-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.is-oa-check::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: url("icons/ic-check2.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   16.5 «Todo lo que necesitas, configurable a tu proyecto»
   Ocho tarjetas de tres en tres; la última fila queda centrada, de ahí el
   flex con `wrap` en vez de una rejilla de columnas fijas.
   -------------------------------------------------------------------------- */

.is-oa-modules {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.is-oa-module {
	display: flex;
	flex: 0 1 20%;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-md);
	background-color: #fff;
}

.is-oa-module__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: var(--is-radius-sm);
	background-color: var(--is-surface-icon);
}

.is-oa-module__icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-oa-module__icon--contratos::before { mask-image: url("icons/oa-file-text.svg"); -webkit-mask-image: url("icons/oa-file-text.svg"); }
.is-oa-module__icon--facturacion::before { mask-image: url("icons/oa-credit-card.svg"); -webkit-mask-image: url("icons/oa-credit-card.svg"); }
.is-oa-module__icon--accesos::before { mask-image: url("icons/oa-lock.svg"); -webkit-mask-image: url("icons/oa-lock.svg"); }
.is-oa-module__icon--crm::before { mask-image: url("icons/oa-users.svg"); -webkit-mask-image: url("icons/oa-users.svg"); }
.is-oa-module__icon--plano::before { mask-image: url("icons/oa-map.svg"); -webkit-mask-image: url("icons/oa-map.svg"); }
.is-oa-module__icon--comunicaciones::before { mask-image: url("icons/oa-mail.svg"); -webkit-mask-image: url("icons/oa-mail.svg"); }
.is-oa-module__icon--portal::before { mask-image: url("icons/oa-globe.svg"); -webkit-mask-image: url("icons/oa-globe.svg"); }
.is-oa-module__icon--reporting::before { mask-image: url("icons/oa-bar-chart.svg"); -webkit-mask-image: url("icons/oa-bar-chart.svg"); }

.is-oa-module__title {
	color: var(--is-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.is-oa-module__text {
	color: var(--is-body);
	font-size: 13px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   16.6 «Cómo trabajamos» — cuatro pasos en columna
   -------------------------------------------------------------------------- */

.is-oa-steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 630px;
	margin: 0 auto;
}

.is-oa-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: center;
}

/* La rayita que une un paso con el siguiente. Va como ::before del paso para
   no meter un bloque vacío en el editor; el primero no la lleva. */
.is-oa-step + .is-oa-step::before {
	content: "";
	width: 1px;
	height: 20px;
	background-color: var(--is-border-brand);
}

.is-oa-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border: 1px solid var(--is-primary);
	border-radius: var(--is-radius-pill);
	background-color: #fff;
	color: var(--is-primary);
	font-size: 14px;
	font-weight: 600;
}

.is-oa-step__title {
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.is-oa-step__text {
	color: var(--is-body);
	font-size: 15px;
	line-height: 1.6;
}

.is-oa-steps-sec .gb-text.is-cta {
	margin-top: 48px !important;
}

/* --------------------------------------------------------------------------
   16.7 Cierre
   Mismo bloque centrado que Trasteros, con el degradado de este diseño y una
   fila de garantías bajo los botones.
   -------------------------------------------------------------------------- */

.is-oa-final {
	padding-top: 88px;
	padding-bottom: 88px;
	background-image: linear-gradient(180deg, var(--is-primary) 0%, var(--is-primary-dark) 100%);
}

.is-oa-final .is-tr-final__title {
	margin-top: 0;
	font-size: 40px;
	letter-spacing: normal;
	line-height: 1.2;
}

.is-oa-final .is-tr-final__text {
	margin-top: 22px;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.65;
}

.is-oa-final__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-top: 22px;
}

.is-oa-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	justify-content: center;
	margin-top: 22px;
}

.is-oa-trust__item {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}

.is-oa-trust__item::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background-color: currentColor;
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-oa-trust__item--respuesta::before { mask-image: url("icons/oa-clock.svg"); -webkit-mask-image: url("icons/oa-clock.svg"); }
.is-oa-trust__item--compromiso::before { mask-image: url("icons/oa-shield-check.svg"); -webkit-mask-image: url("icons/oa-shield-check.svg"); }
.is-oa-trust__item--expertos::before { mask-image: url("icons/oa-user.svg"); -webkit-mask-image: url("icons/oa-user.svg"); }

/* --------------------------------------------------------------------------
   16.8 Adaptación a pantallas menores
   El diseño sólo existe a 1440; de aquí abajo son decisiones nuestras.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	/* La foto deja de tener ancho fijo antes de que la columna de texto se
	   quede sin sitio. */
	.is-oa-solution {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 1024px) {
	.is-oa-solution {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.is-oa-photocard {
		min-height: 420px;
	}
}

@media (max-width: 768px) {
	.is-section-title--sm,
	.is-oa-solution__title,
	.is-oa-final .is-tr-final__title {
		font-size: 30px;
	}

	/* A 390 los dos botones no caben en una línea: cada uno ocupa la suya. */
	.is-oa-hero__buttons .gb-text.is-cta,
	.is-oa-final__buttons .gb-text.is-cta {
		width: 100%;
	}

	.is-oa-final__buttons {
		gap: 12px;
		width: 100%;
	}

	.is-oa-photocard {
		min-height: 320px;
	}
}

/* Por debajo de 600 ya no caben dos columnas de tipologías ni dos tarjetas de
   módulo: a 768 sí, así que el corte va aquí y no en el de 768. */
@media (max-width: 600px) {
	.is-oa-types {
		grid-template-columns: 1fr;
	}

	.is-oa-type {
		padding: 16px 0;
	}

	.is-oa-module {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   17. Página Alojamientos
   Reaprovecha el hero partido de Trasteros, las tarjetas de Inicio y la banda
   de implementación. Aquí sólo viven las diferencias del diseño de Figma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1 Hero
   Misma caja partida que Trasteros; cambian el tamaño del titular y el gris
   del párrafo, que aquí es el azulado del diseño en vez del blanco al 62%.
   -------------------------------------------------------------------------- */

.is-al-hero .is-tr-hero__title {
	/* La caja de Figma mide 547, pero ahí el titular desborda y se reparte en
	   tres líneas. Con el tope real cae igual que en el diseño, cortando
	   después de «para». */
	max-width: 430px;
	letter-spacing: -1.04px;
	line-height: 1.1;
}

.is-al-hero .is-tr-hero__text {
	max-width: 547px;
	color: var(--is-muted);
	font-size: 18px;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   17.2 «Diseñado para proyectos turísticos» — tres tarjetas
   La rejilla y las tarjetas son las de Inicio; sólo hacen falta los glifos
   nuevos y la etiqueta «Especialidad» de la tarjeta oscura.
   -------------------------------------------------------------------------- */

.is-icon-tile--villas::before {
	mask-image: url("icons/al-villas.svg");
	-webkit-mask-image: url("icons/al-villas.svg");
}

.is-icon-tile--glamping::before {
	mask-image: url("icons/al-tent.svg");
	-webkit-mask-image: url("icons/al-tent.svg");
}

.is-icon-tile--complejos::before {
	mask-image: url("icons/al-complejos.svg");
	-webkit-mask-image: url("icons/al-complejos.svg");
}

/* Etiqueta sobre la tarjeta oscura. No es `.is-chip`: el diseño la quiere en
   pastilla, con borde claro y versalita. */
.is-al-tag {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #579cd5;
	border-radius: var(--is-radius-pill);
	background-color: #15507f;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   17.3 «Todo lo que necesitas para automatizar tu operativa turística»
   Seis tarjetas de dos en dos en una caja de 820, más estrecha que la sección.
   -------------------------------------------------------------------------- */

.is-al-modules-sec .is-section-lead {
	font-size: 16px;
	line-height: 1.6;
}

.is-al-modules {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 820px;
	margin: 0 auto;
}

.is-al-module {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-md);
	background-color: #fff;
}

/* Baldosa de 30 con glifo de 14: más pequeña que la de tarjeta (48/24). */
.is-al-module__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: var(--is-radius-sm);
	background-color: var(--is-surface-icon);
}

.is-al-module__icon::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: var(--is-primary);
	mask: no-repeat center / contain;
	-webkit-mask: no-repeat center / contain;
}

.is-al-module__icon--reservas::before { mask-image: url("icons/al-calendar.svg"); -webkit-mask-image: url("icons/al-calendar.svg"); }
.is-al-module__icon--facturacion::before { mask-image: url("icons/al-receipt.svg"); -webkit-mask-image: url("icons/al-receipt.svg"); }
.is-al-module__icon--huespedes::before { mask-image: url("icons/al-user.svg"); -webkit-mask-image: url("icons/al-user.svg"); }
.is-al-module__icon--accesos::before { mask-image: url("icons/al-lock.svg"); -webkit-mask-image: url("icons/al-lock.svg"); }
.is-al-module__icon--comunicaciones::before { mask-image: url("icons/al-message.svg"); -webkit-mask-image: url("icons/al-message.svg"); }
.is-al-module__icon--integraciones::before { mask-image: url("icons/al-plug.svg"); -webkit-mask-image: url("icons/al-plug.svg"); }

.is-al-module__title {
	color: var(--is-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.is-al-module__text {
	color: var(--is-body);
	font-size: 15px;
	line-height: 1.58;
}

/* --------------------------------------------------------------------------
   17.4 «Automatización total de accesos físicos»
   La banda de implementación de Inicio con una lista de checks en vez de los
   pasos numerados.
   -------------------------------------------------------------------------- */

.is-al-impl .is-section-lead {
	font-size: 16px;
	line-height: 1.6;
}

/* Los checks son más grandes que en la comparativa: aquí cada ítem es un
   titular de la sección, no una línea de lista. */
.is-al-impl .is-feature__title {
	font-size: 17px;
}

.is-al-impl .gb-text.is-cta {
	margin-top: 8px !important;
}

/* --------------------------------------------------------------------------
   17.5 «No somos un SaaS genérico más»
   Las dos tarjetas de la comparativa de Inicio, con el CTA centrado debajo.
   -------------------------------------------------------------------------- */

.is-al-compare .is-feature__title {
	font-size: 14.5px;
}

.is-al-compare__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.is-al-compare__cta .gb-text.is-cta {
	margin-top: 40 !important;
}

/* --------------------------------------------------------------------------
   17.6 «Conectados con los líderes del sector»
   -------------------------------------------------------------------------- */

.is-al-logos {
	padding-top: 56px;
	padding-bottom: 56px;
}

.is-al-logos .is-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.72px;
}

.is-al-logos .is-logos__row {
	gap: 30px 70px;
	margin-top: 28px;
}

/* Los cinco logos llegan con alturas muy distintas: el tope los iguala
   ópticamente sin deformarlos. */
.is-al-logos .is-logos__row img {
	max-height: 33px;
}
.page-id-71 .is-logos__row img {
	max-height:45px !important;
}
.page-id-71  .is-logos__row {
	gap: 30px 100px !important;
}
/* --------------------------------------------------------------------------
   17.7 Adaptación a pantallas menores
   El diseño sólo existe a 1440; de aquí abajo son decisiones nuestras.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.is-al-impl .is-feature__title {
		font-size: 15.5px;
	}
}

/* Dos columnas de módulos aguantan a 768 pero no por debajo. */
@media (max-width: 600px) {
	.is-al-modules {
		grid-template-columns: 1fr;
	}
}
.page-id-52 .is-section, .page-id-53 .is-section, .page-id-54 .is-section, .page-id-44 .is-section  {
	padding: 50px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 80px !important;
}
.is-breadcrumb-bar {
	padding: 16px max(var(--is-gutter), calc((100% - var(--is-container)) / 2 + var(--is-gutter))) 20px !important;
	margin-bottom: 0 !important;
}

/* Va después del `!important` de arriba, que si no le come el padding vertical
   y las migas superpuestas se despegan del hero. */
.is-breadcrumb-bar--over {
	padding-top: 14px !important;
	padding-bottom: 0 !important;
}
.search .site, .error404 .site {
	padding-bottom:80px !important;
	padding-top:20px !important;
}

/* ==========================================================================
   Búsqueda y 404
   Pantallas del sistema: no vienen de Figma, así que sólo se les aplica el
   lenguaje visual que ya existe en vez de inventar uno nuevo.
   ========================================================================== */

/* `box-sizing` y `width` explícitos: GeneratePress da a `.content-area` un ancho
   propio que, sumado a este padding, desbordaba 3px en móvil. */
.search .site .content-area,
.error404 .site .content-area {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--is-container);
	margin: 0 auto;
	padding: 0 var(--is-gutter);
}

.error404 .entry-title,
.search .page-header .page-title {
	margin: 0 0 12px;
	color: var(--is-ink);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.error404 .entry-content p,
.search .page-header + * .entry-summary {
	color: var(--is-body);
	font-size: 16px;
	line-height: 26px;
}

.is-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 32px;
	padding: 0;
	list-style: none;
}

.is-404-links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-pill);
	background-color: #fff;
	color: var(--is-ink);
	font-size: 15px;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.is-404-links a:hover,
.is-404-links a:focus-visible {
	border-color: var(--is-primary);
	color: var(--is-primary);
}

.is-404-hint {
	margin-bottom: 12px !important;
	font-weight: 600;
}

/* El buscador del tema padre viene con el botón gris oscuro por defecto */
.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	max-width: 460px;
	gap: 8px;
}

.search-form input[type="search"],
.wp-block-search__input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-sm);
	background-color: #fff;
	color: var(--is-ink);
	font-family: inherit;
	font-size: 15px;
}

.search-form input[type="search"]:focus,
.wp-block-search__input:focus {
	border-color: var(--is-primary);
	outline: none;
}

.search-form button,
.wp-block-search__button {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--is-radius-sm);
	background-color: var(--is-primary);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.search-form button:hover,
.wp-block-search__button:hover {
	background-color: var(--is-primary-dark);
}

/* Resultados: cada uno como tarjeta, en vez de bandas a todo lo ancho */
.search .site article {
	margin-bottom: 16px;
	padding: 24px 28px;
	border: 1px solid var(--is-border);
	border-radius: var(--is-radius-md);
	background-color: #fff;
	box-shadow: var(--is-shadow-soft);
}

.search .site article .entry-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.search .site article .entry-title a {
	color: var(--is-ink);
	text-decoration: none;
}

.search .site article .entry-title a:hover {
	color: var(--is-primary);
}

.search .site article .entry-summary p {
	margin: 0;
	color: var(--is-body);
	font-size: 15px;
	line-height: 24px;
}

.search .site article .read-more {
	color: var(--is-primary);
	font-weight: 500;
	text-decoration: none;
}

@media (max-width: 768px) {
	.error404 .entry-title,
	.search .page-header .page-title {
		font-size: 27px;
	}

	.search .site article {
		padding: 20px;
	}
}
/* BANNER COOKIES */
.cmplz-title {
	font-size: 18px !important;
	font-weight: bold !important;
}
.cmplz-message a {
	text-decoration: underline !important;
	font-weight:bold !important;
}
.cmplz-message a:hover {
	opacity: .9 !important;
}
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-deny {
    margin-right: 180px !important;
}
.cmplz-message p {
	font-size: 16px !important;
	margin-top: 0 !important;
	font-weight:400 !important;
}
@media(min-width: 769px) {
	#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
		order: 3 !important;
	}
	#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
		order: 2 !important;
	}
	#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
		order: 1 !important;
	}
}
@media (max-width: 768px) {
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
	order: 1 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
	order: 2 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
	order: 3 !important;
}
}
.cmplz-btn.cmplz-save-preferences {
	order: 4 !important;
}
.cmplz-link.cookie-statement {
	display: none !important;
}
.cmplz-cookiebanner.cmplz-show {
	padding-top: 25px !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept, #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny, #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences, .cmplz-btn.cmplz-save-preferences {
	font-weight: bold !important;
	font-size:16px;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover, #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:active, #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:focus, #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover, #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:active, #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:focus, #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover, #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:active, #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:focus, .cmplz-btn.cmplz-save-preferences:hover, .cmplz-btn.cmplz-save-preferences:active, .cmplz-btn.cmplz-save-preferences:focus {
	opacity: .9 !important;
}
.cmplz-categories .cmplz-description {
	line-height:1.4;
	font-weight:400;
}
#cmplz-manage-consent {
	display: none !important;
}
.error404 .is-breadcrumb-bar, .search .is-breadcrumb-bar {
	padding-left: 0 !important;
}
.is-card.is-stack a.is-link-action:hover, .is-card.is-stack a.is-link-action:active, .is-card.is-stack a.is-link-action:focus {
	color: var(--contrast);
}