/* ==========================================================================
   RELEVANDIA – Main CSS
   Versión: 1.0.0
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */

:root {
	/* Colores */
	--color-primary:        #f90b1f;
	--color-primary-dark:   #c40818;
	--color-primary-darker: #a60714;
	--color-primary-light:  #fde8ea;
	/* Accent de marca sobre fons foscos (eyebrows, resplandors, números, filets).
	   No usar com a fons sòlid amb text blanc: no arriba a AA (usar primary-dark). */
	--color-accent:        #e6243f;
	--color-dark:          #0f162a;
	--color-darker:        #080d1a; /* base del hero i seccions fosques del rediseño home */
	--color-navy-end:      #0f2b5b; /* segundo stop del gradiente navy, repetido ~10 veces */
	--color-gray-900:      #212529;
	--color-gray-700:      #495057;
	--color-gray-500:      #6c757d;
	--color-gray-400:      #adb5bd;
	--color-gray-300:      #dee2e6;
	--color-gray-200:      #e9ecef;
	--color-gray-100:      #f8f9fa;
	--color-white:         #ffffff;
	--color-success:       #198754;
	--color-success-light: #d1e7dd;
	--color-warning:       #ffc107;

	/* Gradiente navy (hero, footer, CTAs oscuros, sidebar...) */
	--gradient-navy: linear-gradient(135deg, var(--color-dark) 0%, var(--color-navy-end) 100%);

	/* Tipografía
	   Figtree para el cuerpo, Archivo para titulares (más contundente y estrecho).
	   Ambas variables, cargadas en una sola petición desde inc/enqueue.php. */
	--font-family-base:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-family-display: "Archivo", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-size-xs:   0.75rem;   /* 12px */
	--font-size-sm:   0.875rem;  /* 14px */
	--font-size-base: 1rem;      /* 16px */
	--font-size-md:   1.125rem;  /* 18px */
	--font-size-lg:   1.25rem;   /* 20px */
	--font-size-xl:   1.5rem;    /* 24px */
	--font-size-2xl:  2rem;      /* 32px */
	--font-size-3xl:  2.5rem;    /* 40px */
	--font-size-4xl:  3rem;      /* 48px */
	--font-size-5xl:  4rem;      /* 64px – titulares editoriales del rediseño */

	--line-height-base:  1.6;
	--line-height-tight: 1.2;
	--line-height-snug:  1.35;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semi:   600;
	--font-weight-bold:   700;

	/* Espaciado */
	--space-1:   0.25rem;
	--space-2:   0.5rem;
	--space-3:   0.75rem;
	--space-4:   1rem;
	--space-5:   1.25rem;
	--space-6:   1.5rem;
	--space-8:   2rem;
	--space-10:  2.5rem;
	--space-12:  3rem;
	--space-16:  4rem;
	--space-20:  5rem;
	--space-24:  6rem;

	/* Layout */
	--container-max:    1200px;
	--container-narrow: 760px;
	--container-px:     1.5rem;

	/* Bordes */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  12px;
	--radius-xl:  16px;
	--radius-full: 9999px;

	/* Sombras */
	--shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
	--shadow-lg:  0 10px 30px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);

	/* Header */
	--header-height: 76px;

	/* Transiciones */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Evita que los enlaces de ancla queden ocultos bajo la cabecera sticky. */
	scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-gray-900);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

img, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

ul, ol {
	padding-left: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semi); }
h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semi); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-semi); }

p {
	margin-top: 0;
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

/* Accesibilidad: skip link */
.skip-to-content {
	position: absolute;
	top: -999px;
	left: 0;
	padding: var(--space-3) var(--space-4);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-weight: var(--font-weight-semi);
	z-index: 9999;
	border-radius: 0 0 var(--radius-md) 0;
}
.skip-to-content:focus {
	top: 0;
	text-decoration: none;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

/* ==========================================================================
   3. LAYOUT: CONTENEDOR Y UTILIDADES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.container-narrow {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.section {
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
}

.section.bg-light {
	background-color: var(--color-gray-100);
}

.section-header {
	text-align: center;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-16);
}

.section-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--space-4);
}

.section-subtitle {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin-bottom: 0;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.625rem 1.5rem;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	line-height: 1.4;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
	white-space: nowrap;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-sm {
	padding: 0.375rem 1rem;
	font-size: var(--font-size-sm);
}

.btn-lg {
	padding: 0.875rem 2rem;
	font-size: var(--font-size-md);
}

.btn-block {
	display: flex;
	width: 100%;
	white-space: normal;
	text-align: center;
}

/* Variantes */
.btn-primary {
	/* color-primary (#f90b1f) con texto blanco da 4,12:1, por debajo del mínimo AA (4,5:1)
	   para texto normal. Se usa color-primary-dark como fondo por defecto para cumplir contraste. */
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
}
.btn-primary:hover {
	background-color: var(--color-primary-darker);
	border-color: var(--color-primary-darker);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}

.btn-outline {
	background-color: transparent;
	border-color: var(--color-primary-dark);
	color: var(--color-primary-dark);
}
.btn-outline:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-white {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-dark);
}
.btn-white:hover {
	background-color: var(--color-gray-100);
	color: var(--color-dark);
}

.btn-outline-white {
	background-color: transparent;
	border-color: rgba(255,255,255,.7);
	color: var(--color-white);
}
.btn-outline-white:hover {
	background-color: rgba(255,255,255,.15);
	color: var(--color-white);
}

/* ==========================================================================
   5. HEADER
   Cabecera oscura común a todas las páginas: continúa el navy de la marca y
   se integra sin costura con los heros oscuros de la home y las landings.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--header-height);
	background-color: var(--color-dark);
	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.site-header.scrolled {
	background-color: rgba(10,14,28,.92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: rgba(255,255,255,.12);
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.site-header .container {
	height: 100%;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--space-6);
}

/* Branding / Logo */
.site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.site-branding .custom-logo-link,
.site-branding .site-logo-link {
	display: block;
	line-height: 0;
}

.site-branding .custom-logo,
.site-branding .site-logo-link img {
	height: 34px;
	width: auto;
}

.site-name-link {
	text-decoration: none;
}

.site-name {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	letter-spacing: -0.02em;
}

.site-name-link--white .site-name {
	color: var(--color-white);
}

/* Navegación principal */
.main-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu li {
	position: relative;
}

.nav-menu li a {
	display: block;
	position: relative;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: rgba(255,255,255,.78);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* Filete rojo animado bajo el enlace activo / hover */
.nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: 6px;
	height: 2px;
	background-color: var(--color-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition-base);
}

.nav-menu li a:hover,
.nav-menu li a:focus-visible,
.nav-menu li.current-menu-item > a,
.nav-menu li.current-page-ancestor > a {
	color: var(--color-white);
	background-color: transparent;
}

.nav-menu > li > a:hover::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current-page-ancestor > a::after {
	transform: scaleX(1);
}

/* Indicador de submenú */
.nav-menu .menu-item-has-children > a {
	padding-right: calc(var(--space-4) + 12px);
}

.nav-menu .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: var(--space-4);
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .65;
	transition: transform var(--transition-fast);
}

.nav-menu .menu-item-has-children:hover > a::before,
.nav-menu .menu-item-has-children:focus-within > a::before {
	transform: rotate(45deg) translate(2px, 2px);
}

/* Submenú */
.nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	background: #121a30;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 40px rgba(0,0,0,.4);
	min-width: 230px;
	padding: var(--space-2);
	list-style: none;
	margin: 0;
	z-index: 200;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	display: block;
}

.nav-menu .sub-menu li a {
	padding: var(--space-3) var(--space-4);
	color: rgba(255,255,255,.75);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-md);
}

.nav-menu .sub-menu li a:hover {
	color: var(--color-white);
	background-color: rgba(255,255,255,.07);
}

.nav-menu .sub-menu li a::after {
	display: none;
}

/* Header CTA */
.header-cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.header-client-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: rgba(255,255,255,.6);
	white-space: nowrap;
}

.header-client-link:hover {
	color: var(--color-white);
	text-decoration: none;
}

.header-cta-main {
	border-radius: var(--radius-full);
	padding: 0.5rem 1.25rem;
}

.header-cta-main:hover {
	box-shadow: 0 6px 20px rgba(230,36,63,.35);
}

/* CTA dentro del panel móvil (oculto en escritorio) */
.mobile-nav-cta {
	display: none;
}

/* Menú móvil toggle */
.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.mobile-menu-toggle:hover {
	background-color: rgba(255,255,255,.1);
}

.burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-white);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-fast);
}

.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(2) {
	opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.section-hero {
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 100%);
	color: var(--color-white);
	text-align: center;
}

.hero-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.hero-badge {
	display: inline-block;
	padding: var(--space-1) var(--space-4);
	background-color: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255,255,255,.9);
	margin-bottom: var(--space-6);
}

.hero-title {
	font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: var(--space-6);
}

.hero-subtitle {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,.8);
	line-height: 1.7;
	margin-bottom: var(--space-10);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

.hero-narrow {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.hero-service,
.hero-contact,
.hero-faq,
.hero-client-area,
.hero-pricing {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

/* ==========================================================================
   7. SECCIÓN SERVICIOS
   ========================================================================== */

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

/* Base compartida amb .pricing-card (4 pilars, mateix tractament visual) */
.service-card,
.pricing-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.service-card:hover,
.pricing-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.service-card-icon,
.pricing-card-icon {
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	border-radius: var(--radius-lg);
	color: var(--color-primary);
}

.service-card-icon {
	display: flex;
	width: 56px;
	height: 56px;
	margin: var(--space-8) var(--space-8) var(--space-4);
}

.service-card-icon .sw-icon svg {
	width: 28px;
	height: 28px;
}

.service-card-body {
	flex: 1;
	padding: 0 var(--space-8) var(--space-6);
}

.service-card-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
}

.service-card-price,
.pricing-card-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
}

.price-amount {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	line-height: 1;
}

.price-currency {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
}

.price-period {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* Pill "tagline" compartida (servicios, planes, hosting) */
.service-tagline,
.pricing-tagline {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	color: var(--color-success);
	background-color: var(--color-success-light);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.service-card-description,
.pricing-description {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.service-card-description {
	margin-bottom: var(--space-5);
}

.pricing-description {
	margin-bottom: 0;
}

/* Llista de features compartida (servicios, planes, hosting) */
.service-features,
.pricing-card-features ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.service-features {
	gap: var(--space-2);
}

.pricing-card-features ul {
	gap: var(--space-3);
}

.service-feature,
.pricing-card-features ul li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.service-feature .sw-icon,
.pricing-card-features ul li .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
	margin-top: 2px;
}

.service-feature .sw-icon svg,
.pricing-card-features ul li .sw-icon svg {
	width: 16px;
	height: 16px;
}

.service-card-footer,
.pricing-card-cta {
	padding: 0 var(--space-8) var(--space-8);
}

.services-note,
.pricing-notes {
	text-align: center;
	margin-top: var(--space-8);
}

.services-note p,
.pricing-notes p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ==========================================================================
   8. SECCIÓN PROCESO – Timeline vertical
   ========================================================================== */

.section-process .section-header {
	margin-bottom: clamp(var(--space-16), 8vw, var(--space-20));
}

.process-steps {
	max-width: 840px;
	margin-inline: auto;
	margin-bottom: var(--space-12);
	position: relative;
	--process-progress: 0px;
	--process-track-end: 100%;
}

/* Línia de fons */
.process-steps::before {
	content: '';
	position: absolute;
	top: 0;
	left: 35px;
	width: 2px;
	height: var(--process-track-end);
	background: var(--color-gray-300);
}

/* Línia de progrés animada */
.process-steps::after {
	content: '';
	position: absolute;
	top: 0;
	left: 35px;
	width: 2px;
	height: var(--process-progress);
	background: var(--color-primary);
	transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-8);
	padding-bottom: clamp(var(--space-12), 6vw, var(--space-20));
	position: relative;
	z-index: 1;
}

.process-step:last-child {
	padding-bottom: 0;
}

.process-step__marker {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.process-step__number {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-gray-500);
	background: var(--color-white);
	border: 2px solid var(--color-gray-300);
	border-radius: var(--radius-full);
	transition:
		background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step.is-active .process-step__number {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	box-shadow:
		0 0 0 8px rgba(249, 11, 31, 0.08),
		0 8px 24px -4px rgba(249, 11, 31, 0.22);
}

.process-step__content {
	padding: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-10));
	background: var(--color-white);
	border: 1px solid transparent;
	border-radius: var(--radius-xl);
	transition:
		background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0.5;
}

.process-step.is-active .process-step__content {
	background: var(--color-white);
	border-color: var(--color-gray-200);
	box-shadow: var(--shadow-md);
	opacity: 1;
}

.process-step__title {
	font-size: clamp(var(--font-size-base), 2.5vw, var(--font-size-xl));
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-3);
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
	color: var(--color-dark);
}

.process-step__desc {
	color: var(--color-gray-700);
	line-height: 1.75;
	font-size: clamp(var(--font-size-sm), 1.5vw, var(--font-size-base));
	max-width: 560px;
	margin-bottom: 0;
}

.process-cta {
	text-align: center;
	padding-top: var(--space-10);
}

/* ==========================================================================
   9. SECCIÓN FAQ
   ========================================================================== */

/* Layout dos columnes */
.faq-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-16);
	align-items: start;
}

.faq-sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-8));
}

.faq-eyebrow {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.faq-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	line-height: var(--line-height-tight);
	margin-bottom: var(--space-5);
}

.faq-desc {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin-bottom: 0;
}

.faq-sidebar .faq-more {
	margin-top: var(--space-6);
}

.faq-content {
	min-width: 0;
}

.faq-groups {
	margin: 0;
}

.faq-group {
	margin-bottom: var(--space-12);
}

.faq-group:last-child {
	margin-bottom: 0;
}

.faq-group-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary-light);
}

/* Cada pregunta és una targeta independent: sense filets separadors, la
   separació la fa l'espaiat entre targetes. */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-item {
	background-color: var(--color-gray-100);
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
	background-color: var(--color-white);
	border-color: var(--color-gray-200);
	box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
	background-color: var(--color-white);
	border-color: var(--color-gray-200);
	box-shadow: var(--shadow-md);
}

.faq-question {
	margin: 0;
}

/* Botó toggle accordion */
.faq-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: none;
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	text-align: left;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	transition: color var(--transition-fast);
}

.faq-toggle:hover {
	color: var(--color-primary);
}

.faq-toggle[aria-expanded="true"] {
	color: var(--color-primary);
}

.faq-toggle-text {
	flex: 1;
}

/* Chevron animat */
.faq-chevron {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background-color: var(--color-white);
	color: var(--color-gray-500);
	transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-base);
}

.faq-toggle:hover .faq-chevron {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

.faq-toggle[aria-expanded="true"] .faq-chevron {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	transform: rotate(180deg);
}

/* Resposta col·lapsable */
/* grid-template-rows 0fr→1fr en lugar de max-height: anima exactamente hasta
   la altura real del contenido (sin un tope arbitrario como los 600px
   anteriores, que truncaban respuestas largas y animaban a un valor que
   nunca coincidía con el contenido real). */
/* `visibility` a més del 0fr: alguns motors deixen escapar una línia de text
   quan la fila val 0fr, i la resposta s'entreveia amb l'accordion tancat.
   Com que `visibility` s'interpola de forma discreta, en obrir s'aplica a
   l'instant i en tancar espera el final de la transició. */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	visibility: hidden;
	margin: 0;
	transition: grid-template-rows 0.35s ease, visibility 0.35s;
}

.faq-answer.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
}

.faq-answer-inner {
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	padding: 0 var(--space-6) var(--space-5);
}

.faq-answer p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin-bottom: 0;
}

.faq-answer p + p {
	margin-top: var(--space-3);
}

.faq-more {
	margin-top: var(--space-10);
}

/* Bloc destacat de preguntes de confiança */
.section-faq-trust {
	background-color: var(--color-primary-light);
	border-bottom: 1px solid rgba(249, 11, 31, 0.12);
}

.section-faq-trust .faq-item {
	background-color: rgba(255, 255, 255, 0.55);
}

.section-faq-trust .faq-item:hover,
.section-faq-trust .faq-item.is-open {
	background-color: var(--color-white);
	border-color: rgba(249, 11, 31, 0.2);
}

.section-faq-trust .faq-toggle {
	color: var(--color-dark);
}

.section-faq-trust .faq-toggle:hover,
.section-faq-trust .faq-toggle[aria-expanded="true"] {
	color: var(--color-primary-dark);
}

.section-faq-trust .faq-chevron {
	background-color: rgba(249, 11, 31, 0.1);
}

.section-faq-trust .faq-toggle:hover .faq-chevron,
.section-faq-trust .faq-toggle[aria-expanded="true"] .faq-chevron {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* Navegación de grupos FAQ en página completa */
.faq-group-nav {
	margin-bottom: var(--space-10);
}

.faq-group-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
}

.faq-group-nav ul li a {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
}

.faq-group-nav ul li a:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
}

@media (max-width: 1024px) {
	.faq-layout {
		grid-template-columns: 240px 1fr;
		gap: var(--space-12);
	}

	.faq-sidebar {
		position: static;
	}
}

@media (max-width: 768px) {
	.faq-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.faq-sidebar {
		position: static;
	}

	.faq-title {
		font-size: var(--font-size-xl);
	}

	.faq-toggle {
		padding: var(--space-4) var(--space-5);
	}

	.faq-answer-inner {
		padding: 0 var(--space-5) var(--space-4);
	}
}

/* ==========================================================================
   10. SECCIÓN CTA
   ========================================================================== */

.section-cta {
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
}

.section-cta--dark {
	background: var(--gradient-navy);
	color: var(--color-white);
}

.section-cta--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.section-cta--light {
	background-color: var(--color-gray-100);
}

.cta-inner {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.cta-title {
	font-size: var(--font-size-2xl);
	color: inherit;
	margin-bottom: var(--space-4);
}

.cta-text {
	font-size: var(--font-size-md);
	opacity: .85;
	margin-bottom: var(--space-8);
	line-height: 1.6;
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/* ==========================================================================
   11. SECCIÓN PROBLEMAS (PORTADA)
   ========================================================================== */

.section-problems {
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
}

.problems-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-10);
}

.problem-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	background-color: var(--color-gray-100);
	border-radius: var(--radius-lg);
}

.problem-icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.problem-icon svg {
	width: 20px;
	height: 20px;
}

.problem-item p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin: 0;
}

.problems-cta {
	text-align: center;
}

.problems-cta p {
	color: var(--color-gray-700);
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   12. SECCIÓN BENEFICIOS (PORTADA)
   ========================================================================== */

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

.benefit-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
}

.benefit-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background-color: var(--color-success-light);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-success);
}

.benefit-icon svg {
	width: 18px;
	height: 18px;
}

.benefit-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-2);
}

.benefit-text {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* ==========================================================================
   13. PÁGINA DE SERVICIO (DETALLE)
   ========================================================================== */

.service-detail-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-12);
	align-items: start;
}

.service-detail-main h2 {
	font-size: var(--font-size-xl);
	margin-top: var(--space-10);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-gray-200);
}

.service-detail-main h2:first-child {
	margin-top: 0;
}

.service-features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.service-features-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-base);
}

.service-features-list li .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
	margin-top: 2px;
}

.service-features-list li .sw-icon svg {
	width: 18px;
	height: 18px;
}

.use-cases-list,
.exclusions-list {
	margin-bottom: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-left: 1.5em;
}

.use-cases-list li,
.exclusions-list li {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
}

.process-steps-simple {
	margin-bottom: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-left: 1.5em;
}

.process-steps-simple li {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
}

/* Price card sidebar */
.service-detail-sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.price-card {
	background: var(--color-white);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.price-card-header {
	padding: var(--space-8);
	background: var(--gradient-navy);
	text-align: center;
	color: var(--color-white);
}

.price-card-title {
	font-size: var(--font-size-lg);
	color: var(--color-white);
	margin-bottom: var(--space-4);
}

.price-card-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
}

.price-card-price .price-amount {
	font-size: var(--font-size-4xl);
	color: var(--color-white);
}

.price-card-price .price-currency {
	font-size: var(--font-size-2xl);
	color: var(--color-white);
}

.price-card-note {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,.7);
	margin-bottom: 0;
}

.price-card-body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.price-card-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.price-card-features li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.price-card-features li::before {
	content: "\2713";
	color: var(--color-success);
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
}

.price-badge {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	padding: 2px 8px;
	border-radius: var(--radius-full);
	margin-left: var(--space-2);
}

.sidebar-info-box {
	background: var(--color-gray-100);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.sidebar-info-box h4 {
	font-size: var(--font-size-base);
	margin-bottom: var(--space-2);
}

.sidebar-info-box p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin-bottom: var(--space-4);
}

/* Optimize detail blocks */
.optimize-detail {
	margin-bottom: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.optimize-block {
	padding: var(--space-5);
	background-color: var(--color-gray-100);
	border-radius: var(--radius-md);
	border-left: 3px solid var(--color-primary);
}

.optimize-block h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-2);
}

.optimize-block p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin-bottom: 0;
}

/* ==========================================================================
   14. PRICING PAGE
   ========================================================================== */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

/* Base compartida amb .service-card definida a la secció 3 (Servicios).
   Aquí només les particularitats de .pricing-card: capçalera centrada amb
   fons gris i icona 48px inline (vs. 56px alineada a l'esquerra a service-card). */
.pricing-card-header {
	padding: var(--space-8);
	text-align: center;
	background-color: var(--color-gray-100);
}

.pricing-card-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-4);
}

.pricing-card-icon svg {
	width: 24px;
	height: 24px;
}

.pricing-card-title {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-3);
}

.pricing-card-price {
	justify-content: center;
}

.pricing-card-features {
	flex: 1;
	padding: var(--space-6) var(--space-8);
}

.pricing-card-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pricing-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

.pricing-info-item {
	padding: var(--space-6);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-gray-200);
}

.pricing-info-item h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-3);
}

.pricing-info-item p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.pricing-card-price-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-gray-500);
	margin-bottom: var(--space-2);
	text-align: center;
}

.pricing-includes-heading {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin-bottom: var(--space-3);
	text-align: left;
}

.pricing-card-features--includes {
	flex: 1;
}

@media (min-width: 1025px) {
	.pricing-info-grid--how {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   15. CONTACTO
   ========================================================================== */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-12);
	align-items: start;
}

.contact-main h2 {
	margin-bottom: var(--space-4);
}

.contact-main > p {
	color: var(--color-gray-700);
	margin-bottom: var(--space-8);
}

.contact-form-wrap {
	margin-top: var(--space-6);
}

.contact-form-placeholder {
	padding: var(--space-8);
	background-color: var(--color-gray-100);
	border-radius: var(--radius-lg);
	border: 2px dashed var(--color-gray-300);
}

.contact-form-note {
	color: var(--color-gray-700);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-4);
}

.contact-form-example {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-family: monospace;
	font-size: var(--font-size-sm);
}

.contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
}

.contact-info-box {
	padding: var(--space-6);
	background: var(--color-gray-100);
	border-radius: var(--radius-lg);
}

.contact-info-box h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-3);
}

.contact-info-box p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin-bottom: var(--space-4);
}

.contact-services-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-services-list li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-3);
	background: var(--color-white);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: box-shadow var(--transition-fast);
}

.contact-services-list li a:hover {
	box-shadow: var(--shadow-sm);
}

.contact-services-list li a strong {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-dark);
}

.contact-services-list li a span {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

/* Formulari de contacte natiu */
.sw-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.sw-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.sw-form-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-900);
}

.sw-form-required {
	color: var(--color-primary);
	margin-left: 2px;
}

.sw-form-input {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	color: var(--color-gray-900);
	background: var(--color-white);
	border: 1.5px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-sizing: border-box;
}

.sw-form-input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(249, 11, 31, 0.12);
}

.sw-form-input::placeholder {
	color: var(--color-gray-400);
}

.sw-form-input[aria-invalid="true"] {
	border-color: #b91c1c;
}
.sw-form-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

.sw-form-textarea {
	resize: vertical;
	min-height: 140px;
	line-height: var(--line-height-base);
}

.sw-form-footer {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

.sw-form-privacy {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	margin: 0;
}

.sw-form-privacy a {
	color: var(--color-primary);
}

.sw-form-feedback {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-base);
}

.sw-form-feedback--success {
	background-color: #d1e7dd;
	color: #0a3622;
	border: 1px solid #a3cfbb;
}

.sw-form-feedback--error {
	background-color: #f8d7da;
	color: #58151c;
	border: 1px solid #f1aeb5;
}

/* ==========================================================================
   16. ÁREA DE CLIENTES
   ========================================================================== */

.client-area-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-12);
	align-items: start;
}

.client-area-main h2 {
	margin-bottom: var(--space-6);
}

.client-area-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.client-area-features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.client-area-features li .sw-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background-color: var(--color-success-light);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-success);
	margin-top: 2px;
}

.client-area-features li .sw-icon svg {
	width: 16px;
	height: 16px;
}

.client-area-features li strong {
	display: block;
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-1);
}

.client-area-features li p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin: 0;
}

.client-area-sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.client-area-access-box {
	background: var(--gradient-navy);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	text-align: center;
	color: var(--color-white);
}

.client-area-access-box h3 {
	font-size: var(--font-size-xl);
	color: var(--color-white);
	margin-bottom: var(--space-3);
}

.client-area-access-box > p:first-of-type {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,.7);
	margin-bottom: var(--space-4);
}

.client-area-domain {
	margin-bottom: var(--space-6);
}

.client-area-domain code {
	background: rgba(255,255,255,.1);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,.9);
}

.client-area-note {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,.5);
	margin-top: var(--space-3);
}

/* ==========================================================================
   17. PÁGINA LEGAL
   ========================================================================== */

.page-legal .page-header-narrow {
	margin-bottom: 0;
}

.legal-last-updated {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
	margin-top: var(--space-3);
}

.legal-content-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding-top: var(--space-12);
	padding-bottom: var(--space-16);
}

.legal-entry-content h2 {
	font-size: var(--font-size-xl);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gray-200);
}

.legal-entry-content h2:first-child {
	margin-top: 0;
}

.legal-entry-content h3 {
	font-size: var(--font-size-lg);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
}

.legal-entry-content p, .legal-entry-content li {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	line-height: 1.7;
}

.legal-footer-note {
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-200);
}

.legal-footer-note p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ==========================================================================
   18. BLOG: HEADER DE PÁGINA Y LAYOUT
   ========================================================================== */

.page-header,
.page-header-narrow {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

.page-title {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-3);
}

.page-subtitle {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	margin-bottom: 0;
}

.blog-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--space-12);
	padding-top: var(--space-10);
	padding-bottom: var(--space-20);
	align-items: start;
}

.blog-posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.archive-intro {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	max-width: 700px;
	margin-top: var(--space-4);
	margin-bottom: 0;
}

.blog-cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

.blog-cat-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-gray-300);
	background: var(--color-white);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-gray-700);
	text-decoration: none;
	transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.blog-cat-pill:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
	color: var(--color-primary);
	text-decoration: none;
}

/* CTA de servei recomanat: al peu de cada categoria i dins els articles */
.article-service-cta {
	margin: var(--space-10) 0;
}

.archive-service-cta,
.article-service-cta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-8);
	background: var(--gradient-navy);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: none;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.archive-service-cta:hover,
.article-service-cta:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Reset de regles de entry-content que trenquen el layout del card dins els articles */
.entry-content .article-service-cta h2,
.entry-content .article-service-cta h3,
.entry-content .article-service-cta h4 {
	margin-top: 0;
	margin-bottom: var(--space-1);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	line-height: var(--line-height-tight);
}

.entry-content .article-service-cta p {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.72);
	line-height: var(--line-height-snug);
	margin-bottom: 0;
}

.archive-service-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	flex-shrink: 0;
}

.archive-service-cta-icon .sw-icon {
	width: 26px;
	height: 26px;
	display: flex;
}

.archive-service-cta-icon .sw-icon svg {
	width: 26px;
	height: 26px;
}

.archive-service-cta-body {
	min-width: 0;
}

.archive-service-cta-heading {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	margin-bottom: var(--space-1);
	line-height: var(--line-height-tight);
}

.archive-service-cta-text {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: var(--line-height-snug);
}

.archive-service-cta-action {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.archive-service-cta {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: var(--space-4);
		padding: var(--space-6);
	}

	.archive-service-cta-action {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   19. POST CARD
   ========================================================================== */

.post-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	display: grid;
	grid-template-columns: 1fr;
}

.post-card.has-post-thumbnail {
	grid-template-columns: 280px 1fr;
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.post-card-thumbnail {
	display: block;
	overflow: hidden;
}

.post-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.post-card-thumbnail:hover img {
	transform: scale(1.03);
}

.post-card-body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
}

.post-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

.post-card-meta .cat-links a {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.post-card-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-3);
	line-height: 1.3;
}

.post-card-title a {
	color: var(--color-dark);
}

.post-card-title a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.post-card-excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	flex: 1;
	margin-bottom: var(--space-5);
}

.post-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
}

.post-card-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
}

.post-card-reading-time {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

/* ==========================================================================
   20. SINGLE POST
   ========================================================================== */

.post-header {
	padding-top: var(--space-10);
	padding-bottom: var(--space-8);
}

.post-header-inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--space-12);
}

.post-header-inner .breadcrumbs {
	grid-column: 1 / -1;
}

.post-header-col {
	grid-column: 1 / 2;
}

.post-title {
	font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
	margin-bottom: var(--space-4);
	margin-top: var(--space-3);
}

.post-byline {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.post-byline-sep {
	color: var(--color-gray-400);
}

.reading-time {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.post-thumbnail {
	margin-top: var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
}

.single-post-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--space-12);
	padding-top: var(--space-10);
	padding-bottom: var(--space-12);
	align-items: start;
}

.post-article {
	max-width: 720px;
}

/* ==========================================================================
   21. CONTENIDO ENTRY (GUTENBERG COMPATIBLE)
   ========================================================================== */

.entry-content {
	line-height: var(--line-height-base);
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2em;
	margin-bottom: 0.75em;
}

.entry-content p {
	font-size: var(--font-size-base);
	color: var(--color-gray-900);
	line-height: 1.7;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}

.entry-content li {
	margin-bottom: 0.4em;
	line-height: 1.6;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: var(--space-5) var(--space-8);
	border-left: 4px solid var(--color-primary);
	background-color: var(--color-primary-light);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.entry-content blockquote p {
	font-size: var(--font-size-md);
	font-style: italic;
	color: var(--color-dark);
	margin-bottom: 0;
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content figure {
	margin: 2em 0;
}

.entry-content figcaption {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	text-align: center;
	margin-top: var(--space-2);
}

.entry-content hr {
	border: none;
	border-top: 2px solid var(--color-gray-200);
	margin: 2.5em 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-gray-300);
	font-size: var(--font-size-sm);
	text-align: left;
}

.entry-content th {
	background-color: var(--color-gray-100);
	font-weight: var(--font-weight-semi);
}

/* Gutenberg blocks */
.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	padding: 0.625rem 1.5rem;
	font-weight: var(--font-weight-semi);
	border-radius: var(--radius-md);
	text-decoration: none;
}

.entry-content .is-style-fill .wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.entry-content .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

.entry-content .wp-block-columns {
	display: flex;
	gap: var(--space-8);
}

.entry-content .wp-block-column {
	flex: 1;
}

.entry-content .wp-block-separator {
	border: none;
	border-top: 2px solid var(--color-gray-200);
	margin: 2.5em auto;
}

.entry-content .wp-block-separator.is-style-dots {
	border: none;
	text-align: center;
}

.entry-content .wp-block-separator.is-style-dots::before {
	content: "· · ·";
	color: var(--color-gray-400);
	font-size: var(--font-size-lg);
	letter-spacing: 0.5em;
}

.entry-content .alignwide {
	margin-left: -4rem;
	margin-right: -4rem;
}

.entry-content .alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
}

/* ==========================================================================
   22. SIDEBAR
   ========================================================================== */

.sidebar .widget {
	margin-bottom: var(--space-8);
}

.sidebar .widget:last-child {
	margin-bottom: 0;
}

.widget-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary);
}

.sidebar-cta-box {
	background: var(--gradient-navy);
	color: var(--color-white);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
}

.sidebar-cta-box .widget-title {
	color: var(--color-white);
	border-bottom-color: rgba(255,255,255,.2);
}

.sidebar-cta-box p {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,.8);
	margin-bottom: var(--space-4);
}

.sidebar-services-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.sidebar-services-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--color-gray-100);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	transition: background-color var(--transition-fast);
}

.sidebar-services-list li a:hover {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	text-decoration: none;
}

.sidebar-posts-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.sidebar-posts-list li a {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: 1.4;
}

/* ==========================================================================
   23. NAVEGACIÓN DE POSTS
   ========================================================================== */

.post-navigation {
	padding: var(--space-8) 0;
	/*border-top: 1px solid var(--color-gray-200);*/
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	padding: var(--space-4);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	border-color: var(--color-primary);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation .nav-label {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-1);
}

.post-navigation .nav-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
}

/* Paginación */
/* Paginació del blog (the_posts_pagination) */
.navigation.pagination {
	padding: var(--space-8) 0 var(--space-4);
}

.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.navigation.pagination .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1.5px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-gray-700);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.navigation.pagination .nav-links .page-numbers:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
	color: var(--color-primary);
	text-decoration: none;
}

.navigation.pagination .nav-links .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--font-weight-semi);
	pointer-events: none;
}

.navigation.pagination .nav-links .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	pointer-events: none;
	color: var(--color-gray-400);
}

.navigation.pagination .nav-links .prev.page-numbers,
.navigation.pagination .nav-links .next.page-numbers {
	padding: 0 var(--space-4);
	color: var(--color-primary);
	border-color: var(--color-primary);
	font-weight: var(--font-weight-semi);
}

/* ==========================================================================
   24. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
	margin-bottom: var(--space-4);
}

.breadcrumbs-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

.breadcrumb-item a {
	color: var(--color-gray-500);
	text-decoration: none;
}

.breadcrumb-item a:hover {
	color: var(--color-primary);
}

.breadcrumb-item.active span {
	color: var(--color-gray-700);
}

.breadcrumb-sep {
	color: var(--color-gray-400);
	font-size: var(--font-size-xs);
}

/* ==========================================================================
   25. FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--color-dark);
	color: rgba(255,255,255,.8);
}

.footer-main {
	padding: var(--space-16) 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(200px, 1.3fr) repeat(5, 1fr);
	gap: var(--space-8);
}

.footer-col-brand .site-name-link .site-name {
	color: var(--color-white);
}

.footer-logo-link {
	display: inline-block;
}

.footer-logo-link img {
	display: block;
	height: 32px;
	width: auto;
}

.footer-tagline {
	margin-top: var(--space-4);
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,.6);
	line-height: 1.6;
	max-width: 28ch;
}

.footer-phone {
	margin-top: var(--space-4);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.footer-phone a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-phone a:hover,
.footer-phone a:focus-visible {
	color: var(--color-white);
}

.footer-heading {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,.4);
	margin-bottom: var(--space-4);
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer-menu li a {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,.7);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-menu li a:hover {
	color: var(--color-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: var(--space-5) 0;
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	flex-wrap: wrap;
}

.footer-copyright {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,.4);
	margin: 0;
	flex-shrink: 0;
}

.footer-copyright a {
	color: rgba(255,255,255,.6);
	text-decoration: none;
}

.footer-copyright a:hover {
	color: var(--color-white);
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	font-size: var(--font-size-xs);
}

.footer-legal a {
	/* rgba(255,255,255,.4) sobre --color-dark daba ~3,1:1, por debajo del mínimo
	   AA (4,5:1) para texto normal. Se sube la opacidad a .5 (~5,2:1). */
	color: rgba(255,255,255,.5);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-legal a:hover {
	color: rgba(255,255,255,.8);
}

/* ==========================================================================
   26. 404
   ========================================================================== */

.error-404 {
	padding: var(--space-24) 0;
}

.error-404-wrap {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.error-404-number {
	font-size: 8rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-gray-200);
	line-height: 1;
	margin-bottom: var(--space-4);
}

.error-404-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--space-4);
}

.error-404-text {
	color: var(--color-gray-700);
	margin-bottom: var(--space-8);
}

.error-404-actions {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	margin-bottom: var(--space-8);
}

.error-404-search {
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-6);
}

.error-404-search p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
	margin-bottom: var(--space-3);
}

/* ==========================================================================
   27. SEARCH FORM
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	padding: 0.6rem 1rem;
	font-size: var(--font-size-sm);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-gray-900);
	transition: border-color var(--transition-fast);
}

.search-field:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(249,11,31,.15);
}

.search-submit {
	padding: 0.6rem 1.25rem;
	background-color: var(--color-primary-dark);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.search-submit:hover {
	background-color: var(--color-primary-darker);
}

/* ==========================================================================
   28. COMENTARIOS
   ========================================================================== */

.comments-area {
	padding: var(--space-10) 0;
	max-width: 720px;
}

.comments-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--color-gray-200);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment {
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.comment-author {
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-1);
}

.comment-meta {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	margin-bottom: var(--space-3);
}

.comment-content p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.comment-reply-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-6);
}

.comment-form label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-sm);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	transition: border-color var(--transition-fast);
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(249,11,31,.15);
}

.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comment-form-cookies-consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   29. LANDING GENÉRICA
   ========================================================================== */

.symptoms-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.symptoms-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.symptoms-list li::before {
	content: "⚠";
	color: var(--color-warning);
	flex-shrink: 0;
}

.landing-placeholder-content {
	max-width: 640px;
}

.landing-edit-note {
	font-size: var(--font-size-xs);
	color: var(--color-gray-400);
	font-style: italic;
	margin-top: var(--space-6);
}

/* --- Trust text bajo CTAs del hero --- */
.hero-trust {
	font-size: var(--font-size-xs);
	color: rgba(255, 255, 255, 0.6);
	margin-top: var(--space-5);
	letter-spacing: 0.01em;
}

/* --- Texto intro / problema --- */
.landing-intro-text {
	max-width: 760px;
	margin: 0 auto;
}

.landing-intro-text p {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin-bottom: var(--space-4);
}

/* --- Síntomas en grid 2 columnas --- */
.symptoms-list.symptoms-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

/* --- Causas habituales --- */
.landing-causes-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	max-width: 900px;
	margin: 0 auto;
}

.landing-causes-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.landing-causes-list li::before {
	content: "→";
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
}

/* --- Cómo lo resolvemos (pasos numerados) --- */
.landing-how-steps {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 700px;
	margin: 0 auto;
}

.landing-how-step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-4) var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
}

.landing-how-step-number {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.landing-how-step-text {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	padding-top: var(--space-2);
}

/* --- Servicio recomendado --- */
.landing-service-match {
	background: var(--color-gray-100);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-10);
	max-width: 820px;
	margin: 0 auto;
}

.landing-service-match > p {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	margin-bottom: var(--space-6);
}

.landing-service-features h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin-bottom: var(--space-4);
}

.landing-service-features .service-features-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.landing-service-features .service-features-list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* --- Rec-card: servicio recomendado (adaptado del analizador) --- */
.landing-rec-card-wrapper {
	max-width: 820px;
	margin: 0 auto;
}

.landing-rec-card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	border: 2px solid var(--color-gray-200);
}

.landing-rec-card__header {
	padding: 1.5rem 2rem;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.landing-rec-card__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-white);
}

.landing-rec-card__icon .sw-icon svg {
	width: 26px;
	height: 26px;
}

.landing-rec-card__eyebrow {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: var(--space-2);
}

.landing-rec-card__title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	line-height: 1.2;
	margin-bottom: var(--space-2);
}

.landing-rec-card__desc {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: 1.6;
}

.landing-rec-card__price-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.landing-rec-card__price {
	font-size: 1.75rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	letter-spacing: -0.02em;
	line-height: 1;
}

.landing-rec-card__tagline {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	background: var(--color-success-light);
	color: var(--color-success);
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-full);
}

/* Features / includes section */
.landing-rec-card__features {
	padding: 1rem 2rem 1.25rem;
	border-top: 1px solid var(--color-gray-200);
	background: var(--color-gray-100);
}

.landing-rec-card__feat-title {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-gray-500);
	margin-bottom: var(--space-3);
}

.landing-rec-card__feat-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.landing-rec-card__feat-list li {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	line-height: 1.45;
}

.landing-rec-card__feat-list li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gray-400);
	flex-shrink: 0;
	margin-top: 0.45em;
}

/* Footer */
.landing-rec-card__footer {
	padding: 1.25rem 2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--color-gray-200);
}

/* CTA primari */
.landing-rec-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75rem 1.75rem;
	color: var(--color-white);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	transition: filter 0.2s, transform 0.15s;
	text-decoration: none;
}

.landing-rec-cta-primary:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	color: var(--color-white);
}

.landing-rec-cta-primary .sw-icon svg {
	width: 16px;
	height: 16px;
}

/* CTA secundari */
.landing-rec-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	transition: opacity 0.2s;
	text-decoration: none;
}

.landing-rec-cta-secondary:hover {
	opacity: 0.7;
	text-decoration: underline;
}

/* Links relacionados (línia extra dins el footer) */
.landing-rec-card__related {
	width: 100%;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
	margin-top: var(--space-1);
}

/* ─── Color de marca (rojo) para todas las landings ─── */
.landing-rec-card { border-color: #f5c2c7; }
.landing-rec-card .landing-rec-card__header { background: var(--color-primary-light); }
.landing-rec-card .landing-rec-card__icon   { background: var(--color-primary); }
.landing-rec-card .landing-rec-card__eyebrow { color: var(--color-primary); }
.landing-rec-cta-primary   { background: var(--color-primary-dark); }
.landing-rec-cta-secondary { color: var(--color-primary); }

/* --- Links relacionados --- */
.landing-related-links {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.landing-related-links a {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: var(--font-weight-medium);
}

.landing-related-links a:hover {
	color: var(--color-primary-dark);
}

/* --- Do / Don't (error 500) --- */
.landing-dos-donts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-4);
}

.landing-dos,
.landing-donts {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
}

.landing-dos {
	background: var(--color-success-light);
	border: 1px solid rgba(25, 135, 84, 0.3);
}

.landing-donts {
	background: #fce8e8;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

.landing-dos h3,
.landing-donts h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	margin-bottom: var(--space-4);
}

.landing-dos h3 {
	color: var(--color-success);
}

.landing-donts h3 {
	color: var(--color-primary-dark);
}

.landing-dos ul,
.landing-donts ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.landing-dos ul li,
.landing-donts ul li {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	padding-left: var(--space-6);
	position: relative;
	line-height: 1.5;
}

.landing-dos ul li::before {
	content: "✓";
	color: var(--color-success);
	font-weight: var(--font-weight-bold);
	position: absolute;
	left: 0;
}

.landing-donts ul li::before {
	content: "✗";
	color: var(--color-primary-dark);
	font-weight: var(--font-weight-bold);
	position: absolute;
	left: 0;
}

.solution-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-12);
	align-items: start;
}

.solution-text h2 {
	margin-bottom: var(--space-4);
}

.solution-text p {
	color: var(--color-gray-700);
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   30. SECCIÓN BLOG EN HOME
   ========================================================================== */

.section-home-blog {
	/* hereda padding de .section */
}

.home-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.home-post-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.home-post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.home-post-card-thumbnail {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.home-post-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.home-post-card-thumbnail:hover img {
	transform: scale(1.04);
}

.home-post-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
}

.home-post-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.home-post-card-cat {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.home-post-card-cat:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.home-post-card-date {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

.home-post-card-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	line-height: var(--line-height-snug);
	margin-bottom: var(--space-3);
}

.home-post-card-title a {
	color: var(--color-dark);
	text-decoration: none;
}

.home-post-card-title a:hover {
	color: var(--color-primary);
}

.home-post-card-excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: 1.55;
	flex: 1;
	margin-bottom: var(--space-4);
}

.home-post-card-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	text-decoration: none;
	margin-top: auto;
}

.home-post-card-link:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.home-blog-more {
	text-align: center;
	margin-top: var(--space-10);
}

/* Responsive blog home grid */
@media (max-width: 1024px) {
	.home-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.home-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   30. UTILIDADES Y NO-RESULTS
   ========================================================================== */

.no-results {
	padding: var(--space-12) 0;
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
}

.no-results-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
}

.no-results p {
	color: var(--color-gray-700);
	margin-bottom: var(--space-6);
}

.no-results-wrap {
	padding: var(--space-12) 0;
	text-align: center;
}

/* Page content wrap */
.page-content-wrap {
	max-width: 800px;
	padding: var(--space-12) 0 var(--space-16);
}

/* Entry footer */
.entry-footer {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.entry-tags .tags-links a {
	display: inline-block;
	padding: 2px 10px;
	background-color: var(--color-gray-100);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	color: var(--color-gray-700);
	margin: 2px;
	text-decoration: none;
}

.entry-tags .tags-links a:hover {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

/* Icono SVG */
.sw-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sw-icon svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   31. RESPONSIVE: TABLET (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	/* Header: comprime la navegación antes de pasar al menú hamburguesa */
	.nav-menu li a {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
		font-size: 0.8125rem;
	}

	.nav-menu > li > a::after {
		left: var(--space-3);
		right: var(--space-3);
	}

	.header-client-link {
		display: none;
	}

	.services-grid {
		grid-template-columns: 1fr 1fr;
	}

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

	.benefits-grid {
		grid-template-columns: 1fr;
	}

	.service-detail-grid {
		grid-template-columns: 1fr;
	}

	.service-detail-sidebar {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.pricing-grid {
		grid-template-columns: 1fr 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.contact-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.client-area-layout {
		grid-template-columns: 1fr;
	}

	.client-area-sidebar {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.footer-col-brand {
		grid-column: 1 / -1;
	}

	.blog-layout {
		grid-template-columns: 1fr;
	}

	.single-post-layout,
	.post-header-inner {
		grid-template-columns: 1fr;
	}

	.post-header-col {
		grid-column: 1 / -1;
	}

	.solution-grid {
		grid-template-columns: 1fr;
	}

	.pricing-info-grid {
		grid-template-columns: 1fr;
	}

	.pricing-info-grid--how {
		grid-template-columns: repeat(2, 1fr);
	}

	.symptoms-list.symptoms-grid {
		grid-template-columns: 1fr 1fr;
	}

	.landing-causes-list {
		grid-template-columns: 1fr 1fr;
	}

	.entry-content .alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ==========================================================================
   32. RESPONSIVE: MÓVIL (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {

	:root {
		--container-px: 1rem;
		--space-20: 3.5rem;
		--space-24: 4rem;
	}

	/* Header */
	.main-nav {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
		background: var(--color-dark);
		border-bottom: 1px solid rgba(255,255,255,.1);
		padding: var(--space-4) var(--container-px) var(--space-6);
		box-shadow: 0 24px 40px rgba(0,0,0,.4);
		z-index: 99;
	}

	.main-nav.is-open {
		display: block;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-1);
	}

	.nav-menu li {
		border-bottom: 1px solid rgba(255,255,255,.07);
	}

	.nav-menu li a {
		display: block;
		padding: var(--space-4) 0;
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-semi);
		color: var(--color-white);
	}

	.nav-menu > li > a::after,
	.nav-menu .menu-item-has-children > a::before {
		display: none;
	}

	.nav-menu .sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 var(--space-2) var(--space-4);
		display: block;
		min-width: 0;
	}

	.nav-menu .sub-menu li {
		border-bottom: none;
	}

	.nav-menu .sub-menu li a {
		padding: var(--space-2) 0;
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-normal);
		color: rgba(255,255,255,.7);
	}

	.mobile-menu-toggle {
		display: flex;
	}

	.header-cta {
		display: none;
	}

	.mobile-nav-cta {
		display: block;
		margin-top: var(--space-6);
		text-align: center;
	}

	.mobile-nav-cta .btn {
		border-radius: var(--radius-full);
	}

	.mobile-nav-client-link {
		display: inline-block;
		margin-top: var(--space-4);
		font-size: var(--font-size-sm);
		color: rgba(255,255,255,.6);
	}

	.mobile-nav-client-link:hover {
		color: var(--color-white);
	}

	/* Hero */
	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn {
		width: 100%;
	}

	/* Servicios */
	.services-grid {
		grid-template-columns: 1fr;
	}

	.post-card.has-post-thumbnail {
		grid-template-columns: 1fr;
	}

	.post-card-thumbnail {
		height: 200px;
	}

	/* Proceso — timeline compacta en mòbil */
	.process-step {
		grid-template-columns: 56px 1fr;
		gap: var(--space-5);
		padding-bottom: var(--space-10);
	}

	.process-step__number {
		width: 56px;
		height: 56px;
		font-size: var(--font-size-sm);
	}

	.process-steps::before,
	.process-steps::after {
		left: 27px;
	}

	.process-step__content {
		padding: var(--space-5);
	}

	/* Problemas */
	.problems-grid {
		grid-template-columns: 1fr;
	}

	/* Pricing */
	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.pricing-info-grid--how {
		grid-template-columns: 1fr;
	}

	/* Contact */
	.contact-sidebar {
		grid-template-columns: 1fr;
	}

	/* Client area */
	.client-area-sidebar {
		grid-template-columns: 1fr;
	}

	/* Service sidebar */
	.service-detail-sidebar {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.footer-col-brand {
		grid-column: auto;
	}

	.footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.footer-legal {
		gap: var(--space-2) var(--space-3);
	}

	/* 404 */
	.error-404-actions {
		flex-direction: column;
	}

	/* Breadcrumbs */
	.breadcrumbs-list {
		display: none;
	}

	/* CTA */
	.cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Page title */
	.page-title {
		font-size: var(--font-size-2xl);
	}

	/* Columns gutenberg */
	.entry-content .wp-block-columns {
		flex-direction: column;
	}

	/* Post nav */
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	/* Solution grid */
	.solution-grid {
		grid-template-columns: 1fr;
	}

	.section {
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
	}
}

/* ==========================================================================
   33. ESTADO ACTIVO / FOCUS PARA ACCESIBILIDAD
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   34. PÁGINA SOBRE NOSOTROS – REDISEÑO EDITORIAL
   templates/template-about.php. Reutiliza las primitivas de la portada
   (§37.1: .home-eyebrow, .home-section-title/-lead, .home-section-head--center,
   .home-dark-glow, .btn-ghost-dark, .home-link-arrow) y añade aquí solo lo
   propio de esta página. Ritmo de fondos: oscuro → blanco → gris → blanco →
   oscuro → gris → blanco → oscuro.

   OJO con la especificidad: esta sección va ANTES del §37 en el archivo, así
   que para sobrescribir una primitiva .home-* hace falta un selector de dos
   clases (p. ej. `.about-cta-inner .home-section-title`), no uno solo.
   ========================================================================== */

/* Variante section-header alineada a la izquierda */
.section-header--left {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* ─── 34.1 Hero oscuro con collage del equipo ──────────────────────────── */

.about-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-24) 0;
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 58% 52% at 76% 42%, rgba(18,46,96,.32) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 6% 6%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
}

.about-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.about-hero-glow--one {
	top: -20%;
	left: -12%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(230,36,63,.2) 0%, rgba(230,36,63,0) 68%);
}

.about-hero-glow--two {
	bottom: -34%;
	right: -8%;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(circle, rgba(15,43,91,.55) 0%, rgba(15,43,91,0) 70%);
}

.about-hero .container {
	position: relative;
}

/* La columna de texto pesa algo más que la visual: con las dos al 50% y el
   titular a 52px, «Detrás de cada web hay» se partía en dos líneas y dejaba
   «hay» colgando. Con 1.1fr y un máximo de 48px cada mitad del H1 cabe en una
   sola línea a partir de ~1200px de ventana. */
.about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--space-16);
	align-items: center;
}

.about-hero-title {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.about-hero-title span {
	display: block;
	color: var(--color-accent);
}

.about-hero-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: rgba(255,255,255,.74);
	margin: 0 0 var(--space-8);
	max-width: 48ch;
}

.about-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Flecha del CTA de anclaje: al girar 90° el translateX del hover se aplica
   sobre el eje ya rotado, así que la flecha baja en lugar de avanzar. */
.btn .btn-icon--down svg {
	transform: rotate(90deg);
}

.btn:hover .btn-icon--down svg {
	transform: rotate(90deg) translateX(3px);
}

.about-hero-visual {
	position: relative;
}

/* Filigrana roja de la identidad. Mismas reglas que .home-arcs: width/height
   explícitos (un <svg> es elemento reemplazado y con medidas auto no se
   estira) y trazo de grosor fijo aunque el estirado no sea uniforme. */
.about-hero-lines {
	position: absolute;
	top: -8%;
	left: -14%;
	width: 128%;
	height: 118%;
	color: var(--color-accent);
	opacity: 0.45;
	pointer-events: none;
}

.about-hero-collage {
	position: relative;
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	gap: var(--space-4);
	align-items: start;
}

.about-hero-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 18px 44px rgba(3,6,13,.55);
}

.about-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.about-hero-photo--1 {
	aspect-ratio: 3 / 4;
}

.about-hero-photo--2 {
	aspect-ratio: 1 / 1;
	margin-top: var(--space-10);
}

.about-hero-photo--3 {
	aspect-ratio: 4 / 5;
	width: 78%;
}

.about-hero-photo--4 {
	aspect-ratio: 1 / 1;
	width: 88%;
	margin-top: calc(var(--space-8) * -1);
	margin-left: auto;
}

/* ─── 34.2 Posicionamiento (editorial, sin tarjetas) ───────────────────── */

.section-about-position {
	padding: var(--space-24) 0;
}

.about-position {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.about-position-title {
	font-size: clamp(1.875rem, 3.8vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 20ch;
}

.about-position-title span {
	display: block;
	color: var(--color-primary);
}

.about-position-text {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
	max-width: 54ch;
}

.about-position-claim {
	max-width: 34ch;
	margin: var(--space-10) 0 0;
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-primary);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

/* ─── 34.3 Áreas de especialización (filas 01–05) ──────────────────────── */

.about-areas {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-gray-200);
}

.about-area {
	display: grid;
	grid-template-columns: 4.5rem 3rem minmax(0, 15rem) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-8) var(--space-4);
	border-bottom: 1px solid var(--color-gray-200);
	transition: background-color var(--transition-base);
}

.about-area:hover {
	background-color: var(--color-gray-100);
}

.about-area-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-gray-300);
	transition: color var(--transition-base);
}

.about-area:hover .about-area-number {
	color: var(--color-primary);
}

.about-area-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about-area-icon svg {
	width: 24px;
	height: 24px;
}

.about-area-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0;
}

.about-area-text {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
}

.about-areas-foot {
	margin: var(--space-8) 0 0;
}

/* ─── 34.4 Cómo trabajamos (sección oscura) ────────────────────────────── */

.section-about-method {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 58%, var(--color-darker) 100%);
	color: var(--color-white);
}

.section-about-method .container {
	position: relative;
	z-index: 1;
}

.about-method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8);
}

.about-method-step {
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255,255,255,.16);
}

.about-method-number {
	display: block;
	margin-bottom: var(--space-4);
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

.about-method-title {
	font-size: var(--font-size-md);
	color: var(--color-white);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.about-method-text {
	font-size: var(--font-size-base);
	color: rgba(255,255,255,.7);
	line-height: var(--line-height-base);
	margin: 0;
}

/* ─── 34.5 Experiencia + tres cifras grandes ───────────────────────────── */

.about-experience-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: var(--space-16);
	align-items: start;
}

.about-experience-intro .home-section-title {
	max-width: 24ch;
}

.about-experience-intro .home-section-lead {
	margin-bottom: var(--space-5);
}

.about-experience-text {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
	max-width: 54ch;
}

.about-experience-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.about-stat {
	padding-top: var(--space-5);
	border-top: 2px solid var(--color-primary);
}

.about-stat-value {
	display: block;
	font-family: var(--font-family-display);
	font-size: clamp(1.75rem, 3vw, var(--font-size-3xl));
	font-weight: var(--font-weight-bold);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--color-dark);
}

.about-stat-label {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* ─── 34.6 Principios (solo tipografía e icono mínimo) ─────────────────── */

.about-principles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-8);
}

.about-principle {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-gray-200);
}

.about-principle-icon {
	display: inline-flex;
	margin-bottom: var(--space-4);
	color: var(--color-primary-dark);
}

.about-principle-icon svg {
	width: 22px;
	height: 22px;
}

.about-principle-title {
	font-size: var(--font-size-md);
	margin: 0 0 var(--space-2);
}

.about-principle-text {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
}

/* ─── 34.7 CTA final oscuro ────────────────────────────────────────────── */

.section-about-cta {
	position: relative;
	overflow: hidden;
	background: var(--gradient-navy);
	color: var(--color-white);
}

.about-cta-mark {
	position: absolute;
	right: -3rem;
	bottom: -4rem;
	width: 18rem;
	height: auto;
	opacity: 0.05;
	pointer-events: none;
}

.about-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.about-cta-inner .home-section-title,
.about-cta-inner .home-section-lead {
	max-width: none;
	margin-inline: auto;
}

.about-cta-inner .home-section-lead {
	max-width: 46ch;
	margin-bottom: var(--space-8);
}

.about-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.about-cta-services {
	margin: var(--space-10) 0 0;
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* Cuadrícula del equipo (Sobre nosotros → El equipo) */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.team-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary-light);
}

.team-card-photo {
	aspect-ratio: 3 / 4;
	background-color: var(--color-gray-100);
	overflow: hidden;
}

.team-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:hover .team-card-photo img {
	transform: scale(1.03);
}

.team-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
}

.team-card-name {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin: 0;
}

.team-card-role {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-primary-dark);
	margin: calc(var(--space-2) * -1) 0 0;
}

.team-card-text {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
}

.team-card--join {
	background: var(--gradient-navy);
	border-color: transparent;
	justify-content: center;
}

.team-card--join:hover {
	border-color: transparent;
}

.team-card--join .team-card-body {
	gap: var(--space-4);
	padding: var(--space-8) var(--space-6);
}

.team-card--join .team-card-name {
	color: var(--color-white);
	font-size: var(--font-size-lg);
}

.team-card--join .team-card-text {
	color: rgba(255, 255, 255, 0.8);
}

.team-join-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.team-join-icon svg {
	width: 24px;
	height: 24px;
}

.team-join-cta {
	align-self: flex-start;
	margin-top: var(--space-2);
}

/* ─── 34.8 Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.about-hero {
		padding: var(--space-20) 0;
	}

	.about-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.about-hero-visual {
		width: 100%;
		max-width: 32rem;
		margin-inline: auto;
	}

	.section-about-position {
		padding: var(--space-20) 0;
	}

	.about-position {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	/* El texto pasa debajo del título, en la misma columna: sin `grid-column`
	   la colocación automática lo mandaría a la primera celda libre (la del
	   número, en la fila siguiente). */
	.about-area {
		grid-template-columns: 3.5rem 3rem minmax(0, 1fr);
		row-gap: var(--space-3);
	}

	.about-area-text {
		grid-column: 3;
	}

	.about-method {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-8);
	}

	.about-experience-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.about-experience-stats {
		flex-direction: row;
	}

	.about-stat {
		flex: 1 1 0;
	}

	.about-principles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
	}

	.team-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.about-hero {
		padding: var(--space-16) 0 var(--space-20);
	}

	.about-hero-lines {
		opacity: 0.32;
	}

	.about-hero-photo--2 {
		margin-top: var(--space-6);
	}

	.about-hero-photo--3,
	.about-hero-photo--4 {
		width: 100%;
	}

	.about-hero-photo--4 {
		margin-top: calc(var(--space-5) * -1);
	}

	.about-position-text {
		font-size: var(--font-size-md);
	}

	.about-position-claim {
		font-size: var(--font-size-lg);
	}

	.about-area {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: var(--space-2) var(--space-4);
		padding: var(--space-6) 0;
		align-items: start;
	}

	.about-area-number {
		font-size: var(--font-size-xl);
	}

	.about-area-icon {
		display: none;
	}

	.about-area-title,
	.about-area-text {
		grid-column: 2;
	}

	.about-method {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.about-experience-stats {
		flex-direction: column;
	}

	.about-principles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
	}

	.about-cta-mark {
		width: 12rem;
		right: -2rem;
		bottom: -3rem;
	}

	.team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	.team-card-body {
		padding: var(--space-5);
	}
}

/* ==========================================================================
   34b. RESPONSIVE LANDINGS (≤ 1024px i ≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.symptoms-list.symptoms-grid,
	.landing-causes-list,
	.landing-dos-donts {
		grid-template-columns: 1fr;
	}

	.landing-service-match {
		padding: var(--space-6);
	}

	.landing-rec-card__header {
		flex-direction: column;
	}

	.landing-rec-card__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.landing-rec-cta-primary {
		justify-content: center;
		width: 100%;
	}

	.landing-related-links {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}

/* ==========================================================================
   34c. PLANES MENSUALES Y HOME
   ========================================================================== */

.choice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	max-width: 900px;
	margin: 0 auto;
}

.choice-item {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
}

.choice-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
	color: var(--color-dark);
}

.services-secondary-cta {
	text-align: center;
	margin-top: var(--space-6);
}

.pricing-card-price .price-period-plan {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	margin-left: var(--space-2);
	color: var(--color-gray-700);
}

.pricing-notes--center {
	text-align: center;
	max-width: 640px;
	margin: var(--space-6) auto 0;
}

.plan-comparison-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--space-6);
}

.plan-comparison-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.plan-comparison-table th,
.plan-comparison-table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-gray-200);
	text-align: left;
}

.plan-comparison-table thead th {
	background: var(--color-gray-100);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
}

.plan-comparison-link-more {
	text-align: center;
}

.section-plan-upsell {
	padding: var(--space-16) 0;
}

.section-title--sm {
	font-size: var(--font-size-2xl);
}

.plan-upsell-text {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	margin-bottom: var(--space-6);
	line-height: var(--line-height-base);
}

.plan-upsell-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

.section-home-intro {
	padding: var(--space-16) 0;
	text-align: center;
}

.home-intro-prose {
	text-align: left;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.home-intro-prose p + p {
	margin-top: var(--space-4);
}

.service-card--home .service-card-description--solo {
	margin-top: var(--space-4);
}

.service-card--home.service-card--plan-home .service-card-footer .btn {
	font-size: var(--font-size-sm);
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}

.plans-home-more {
	text-align: center;
	margin-top: var(--space-10);
}

.plans-intro-lead {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

/* Página Planes de mantenimiento */
.section-plans-page-intro .section-title {
	margin-bottom: var(--space-6);
}

.plans-page-intro-prose {
	text-align: left;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.plans-page-intro-prose p {
	font-size: var(--font-size-md);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
}

.plans-page-intro-prose p + p {
	margin-top: var(--space-4);
}

.section-eyebrow {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-gray-500);
	margin-bottom: var(--space-2);
}

.section-header .section-eyebrow {
	text-align: center;
}

.section-plan-choose .section-header .section-eyebrow {
	margin-bottom: var(--space-3);
}

.plan-choose-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
	align-items: start;
}

.plan-choose-heading {
	font-size: var(--font-size-lg);
	color: var(--color-dark);
	margin-bottom: var(--space-4);
	line-height: var(--line-height-snug);
}

.plan-choose-list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
}

.plan-choose-list li + li {
	margin-top: var(--space-3);
}

.section-plan-continuity {
	padding: var(--space-16) 0;
}

.section-plan-continuity .section-eyebrow {
	text-align: left;
	margin-bottom: var(--space-2);
}

.section-plan-continuity .section-title {
	text-align: left;
	margin-bottom: var(--space-6);
}

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

	.plan-choose-grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
}

/* ==========================================================================
   34b. PÁGINA DISEÑO Y DESARROLLO WEB
   ========================================================================== */

/* — Por qué importa: 3 columnas con tarjetas suaves — */
.web-importance-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.web-importance-item {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.web-importance-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.web-importance-title {
	font-size: var(--font-size-lg);
	color: var(--color-dark);
	margin-bottom: var(--space-3);
	line-height: var(--line-height-snug);
}

.web-importance-item p {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	margin: 0;
}

/* — Servicios web (Express vs A medida): comparativa lado a lado — */
.web-services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	max-width: 980px;
	margin: 0 auto;
}

.web-service-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.web-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.web-service-card--medida {
	border: 2px solid var(--color-primary);
}

.web-service-card-header {
	margin-bottom: var(--space-6);
}

.web-service-tagline {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-success);
	background: var(--color-success-light);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.web-service-tagline--alt {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.web-service-card-title {
	font-size: var(--font-size-2xl);
	color: var(--color-dark);
	margin-bottom: var(--space-3);
}

.web-service-card-description {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	margin: 0;
}

.web-service-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex-grow: 1;
}

.web-service-features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-base);
	color: var(--color-gray-900);
}

.web-service-features li .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
	margin-top: 2px;
}

.web-service-features li .sw-icon svg {
	width: 18px;
	height: 18px;
}

.web-service-card-footer {
	margin-top: auto;
}

/* — Comparativa encaja / alternativa (Web a medida, reutilitzable) — */
.section-web-fit-compare .section-header {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.web-fit-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	max-width: 1080px;
	margin: 0 auto;
}

.web-fit-compare__panel {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.web-fit-compare__panel:hover {
	box-shadow: var(--shadow-md);
}

.web-fit-compare__panel--yes {
	border-color: rgba(249, 11, 31, 0.35);
	box-shadow: var(--shadow-md);
}

.web-fit-compare__panel--yes:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.web-fit-compare__panel-head {
	padding: var(--space-8) var(--space-8) var(--space-6);
}

.web-fit-compare__panel--yes .web-fit-compare__panel-head {
	background: var(--gradient-navy);
	color: var(--color-white);
}

.web-fit-compare__panel--alt .web-fit-compare__panel-head {
	background: var(--color-gray-100);
	border-bottom: 1px solid var(--color-gray-200);
}

.web-fit-compare__badge {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.web-fit-compare__badge--yes {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
}

.web-fit-compare__badge--alt {
	background: var(--color-white);
	color: var(--color-gray-700);
	border: 1px solid var(--color-gray-300);
}

.web-fit-compare__panel-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.web-fit-compare__panel--yes .web-fit-compare__panel-title {
	color: var(--color-white);
}

.web-fit-compare__panel--alt .web-fit-compare__panel-title {
	color: var(--color-dark);
}

.web-fit-compare__panel-lead {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	margin: 0;
}

.web-fit-compare__panel--yes .web-fit-compare__panel-lead {
	color: rgba(255, 255, 255, 0.78);
}

.web-fit-compare__panel--alt .web-fit-compare__panel-lead {
	color: var(--color-gray-700);
}

.web-fit-compare__list {
	list-style: none;
	margin: 0;
	padding: var(--space-6) var(--space-8) var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	flex: 1;
}

.web-fit-compare__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
}

.web-fit-compare__list li .sw-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-success);
}

.web-fit-compare__list li .sw-icon svg {
	width: 18px;
	height: 18px;
}

.web-fit-compare__list--alt li .sw-icon {
	color: var(--color-gray-500);
}

.web-fit-compare__panel-footer {
	padding: 0 var(--space-8) var(--space-8);
	margin-top: auto;
}

.web-fit-compare__bridge {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-4);
	position: relative;
}

.web-fit-compare__bridge::before {
	content: '';
	position: absolute;
	top: 12%;
	bottom: 12%;
	left: 50%;
	width: 1px;
	background: linear-gradient(
		180deg,
		transparent 0%,
		var(--color-gray-300) 15%,
		var(--color-gray-300) 85%,
		transparent 100%
	);
	transform: translateX(-50%);
}

.web-fit-compare__bridge-label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--color-white);
	border: 2px solid var(--color-gray-200);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-500);
	text-transform: lowercase;
	box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
	.web-fit-compare {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		max-width: 560px;
	}

	.web-fit-compare__bridge {
		padding: 0;
		min-height: 44px;
	}

	.web-fit-compare__bridge::before {
		top: 50%;
		bottom: auto;
		left: 10%;
		right: 10%;
		width: auto;
		height: 1px;
		transform: none;
		background: linear-gradient(
			90deg,
			transparent 0%,
			var(--color-gray-300) 15%,
			var(--color-gray-300) 85%,
			transparent 100%
		);
	}
}

/* — Tu situación: 3 escenarios numerados — */
.web-situation-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.web-situation-card {
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-10) var(--space-8) var(--space-8);
	display: flex;
	flex-direction: column;
}

.web-situation-number {
	position: absolute;
	top: var(--space-6);
	right: var(--space-8);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary-light);
	line-height: 1;
}

.web-situation-stage {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.web-situation-title {
	font-size: var(--font-size-lg);
	color: var(--color-dark);
	line-height: var(--line-height-snug);
	margin-bottom: var(--space-3);
}

.web-situation-text {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
	flex-grow: 1;
}

.web-situation-recommend {
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.web-situation-recommend-label {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.web-situation-recommend-name {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
}

/* — Impacto real: 3 ítems con icono — */
.web-impact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

.web-impact-item {
	text-align: left;
}

.web-impact-icon {
	width: 48px;
	height: 48px;
	background: var(--color-primary-light);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.web-impact-icon .sw-icon svg {
	width: 24px;
	height: 24px;
}

.web-impact-title {
	font-size: var(--font-size-lg);
	color: var(--color-dark);
	margin-bottom: var(--space-3);
	line-height: var(--line-height-snug);
}

.web-impact-item p {
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
	margin: 0;
}

/* — Situaciones habituales: lista de quotes — */
.web-pain-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.web-pain-list li {
	position: relative;
	padding: var(--space-5) var(--space-6) var(--space-5) var(--space-12);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-md);
	color: var(--color-gray-900);
	font-style: italic;
}

.web-pain-quote {
	position: absolute;
	left: var(--space-5);
	top: var(--space-3);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	line-height: 1;
	font-style: normal;
}

.web-pain-cta {
	text-align: center;
}

/* — Aftercare: puente a planes mensuales — */
.section-web-aftercare {
	padding: var(--space-16) 0;
}

.web-aftercare-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-6);
}

/* — Hero específico de la página de diseño web — */
.section-hero.hero-web-design {
	background: var(--gradient-navy);
}

/* — Bloque Diseño y desarrollo web en home: grid de 2 columnas centrado — */
.services-grid--two {
	grid-template-columns: repeat(2, 1fr);
	max-width: 880px;
	margin: 0 auto;
}

.service-card--web-design .service-card-body {
	display: flex;
	flex-direction: column;
}

.service-card--web-design .service-tagline {
	align-self: flex-start;
}

/* Variante azul de la tagline (para Web a medida) */
.service-tagline--alt {
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}

/* — Bloque "¿Qué necesita tu WordPress ahora mismo?" – 3 vías — */
.choice-grid--three {
	grid-template-columns: repeat(3, 1fr);
	max-width: 1100px;
	gap: var(--space-6);
}

.choice-grid--four {
	grid-template-columns: repeat(4, 1fr);
	max-width: 1200px;
	gap: var(--space-6);
}

.choice-grid--three .choice-item,
.choice-grid--four .choice-item {
	display: flex;
	flex-direction: column;
}

.choice-grid--three .choice-item p,
.choice-grid--four .choice-item p {
	color: var(--color-gray-700);
	margin-bottom: var(--space-6);
	flex-grow: 1;
}

.choice-grid--three .choice-item .btn,
.choice-grid--four .choice-item .btn {
	align-self: flex-start;
}

@media (max-width: 1024px) {
	.choice-grid--three,
	.choice-grid--four {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grid--two {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

@media (max-width: 768px) {
	.choice-grid--three,
	.choice-grid--four {
		grid-template-columns: 1fr;
	}
}

/* — Responsive — */
@media (max-width: 1024px) {
	.web-importance-grid,
	.web-situation-grid,
	.web-impact-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.web-services-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

@media (max-width: 768px) {
	.web-importance-grid,
	.web-situation-grid,
	.web-impact-grid {
		grid-template-columns: 1fr;
	}

	.web-situation-number {
		font-size: var(--font-size-2xl);
		top: var(--space-4);
		right: var(--space-6);
	}

	.web-pain-list li {
		padding-left: var(--space-10);
		font-size: var(--font-size-base);
	}
}

/* — Etiqueta de precio "presupuesto a medida" (página de precios, bloque diseño) — */
.pricing-card-price-label--note {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-500);
	margin-bottom: var(--space-4);
	text-transform: none;
	letter-spacing: 0;
}

/* ==========================================================================
   35. TESTIMONIALS
   ========================================================================== */

.section-testimonials {
	padding: var(--space-20) 0;
}

/* Grid de cards */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: stretch;
}

/* Card base */
.testimonial-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.testimonial-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Estrelles */
.testimonial-stars {
	display: flex;
	gap: 2px;
	line-height: 1;
}

.star {
	font-size: 1rem;
	line-height: 1;
}

.star--filled {
	color: #f59e0b;
}

.star--empty {
	color: var(--color-gray-300);
}

/* Cita */
.testimonial-quote {
	margin: 0;
	padding: 0;
	flex: 1;
}

.testimonial-quote p {
	font-size: var(--font-size-base);
	font-style: italic;
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0;
}

/* Autor */
.testimonial-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-gray-200);
}

.testimonial-author-avatar {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: var(--radius-full);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}

.testimonial-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.testimonial-author-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-900);
	line-height: 1.3;
}

.testimonial-author-meta {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* Responsive tablet */
@media (max-width: 1024px) {
	.testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive mòbil */
@media (max-width: 768px) {
	.testimonials-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.testimonial-card {
		padding: var(--space-6);
	}
}

/* ─────────────────────────────────────────────────────────
   GOOGLE REVIEWS – secció amb ressenyes reals de Google
   ───────────────────────────────────────────────────────── */

.section-google-reviews {
	padding: var(--space-20) 0;
}

.google-reviews-source {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-gray-500);
	font-size: var(--font-size-sm);
	margin-top: var(--space-2);
}

.google-reviews-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* Contenidor que envolta el shortcode del plugin.
 * La majoria de plugins de ressenyes generen el seu propi layout;
 * aquest wrapper assegura que s'integri bé amb el nostre disseny. */
.google-reviews-widget {
	width: 100%;
}

/* Overrides genèrics per als widgets de ressenyes de Google habituals.
 * Ajusta o elimina les regles que el teu plugin ja gestioni. */
.google-reviews-widget .grw-badge,
.google-reviews-widget .grw-header {
	display: none !important; /* elimina capçaleres duplicades del plugin */
}

.google-reviews-widget .grw-review-grid,
.google-reviews-widget .reviewGrid,
.google-reviews-widget .reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

@media (max-width: 1024px) {
	.google-reviews-widget .grw-review-grid,
	.google-reviews-widget .reviewGrid,
	.google-reviews-widget .reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.section-google-reviews {
		padding: var(--space-12) 0;
	}

	.google-reviews-widget .grw-review-grid,
	.google-reviews-widget .reviewGrid,
	.google-reviews-widget .reviews-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

/* ==========================================================================
   36. PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.section-cta,
	.hero-actions {
		display: none;
	}

	body {
		font-size: 12pt;
		color: #000;
	}
}

/* ─────────────────────────────────────────────────────────
   TRUST BAR – Franja d'estadístiques de confiança
   ───────────────────────────────────────────────────────── */

.section-trust-bar {
	background-color: var(--color-dark);
	padding: var(--space-10) 0;
	position: relative;
}

.trust-bar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.trust-bar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-6) var(--space-8);
	position: relative;
}

.trust-bar-item + .trust-bar-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 40%;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.12);
}

.trust-bar-value {
	display: block;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-white);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-2);
}

.trust-bar-label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: rgba(255, 255, 255, 0.55);
	line-height: var(--line-height-snug);
	max-width: 120px;
	letter-spacing: 0.01em;
}

/* Tablet: 2×2 */
@media (max-width: 768px) {
	.trust-bar-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.trust-bar-item:nth-child(3)::before,
	.trust-bar-item:nth-child(4)::before {
		left: 0;
		top: 0;
		transform: none;
		width: 100%;
		height: 1px;
	}

	.trust-bar-item:nth-child(3) {
		padding-top: var(--space-8);
	}

	.trust-bar-item:nth-child(4) {
		padding-top: var(--space-8);
	}
}

/* Mòbil petit: 1 per fila */
@media (max-width: 400px) {
	.trust-bar-list {
		grid-template-columns: 1fr;
	}

	.trust-bar-item + .trust-bar-item::before {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40%;
		height: 1px;
	}

	.trust-bar-item:nth-child(3),
	.trust-bar-item:nth-child(4) {
		padding-top: var(--space-6);
	}
}

/* ==========================================================================
   SECTION ANALYZER BANNER
   Banner destacat entre "Planes mensuales" i "Servicios puntuales" a la home
   ========================================================================== */

.section-analyzer-banner {
	background: linear-gradient(135deg, #c40818 0%, #f90b1f 50%, #ff4d5e 100%);
	padding: var(--space-16) 0;
	position: relative;
	overflow: hidden;
}

/* Cercle decoratiu de fons */
.section-analyzer-banner::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.section-analyzer-banner::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.analyzer-banner-inner {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--space-16);
	align-items: center;
	position: relative;
	z-index: 1;
}

/* ── Columna de text (esquerra) ── */

.analyzer-banner-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-6);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.analyzer-banner-badge .sw-icon {
	width: 14px;
	height: 14px;
	opacity: 0.9;
}

.analyzer-banner-title {
	color: #fff;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-5) 0;
}

.analyzer-banner-text {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--font-size-md);
	line-height: var(--line-height-base);
	margin: 0 0 var(--space-8) 0;
	max-width: 520px;
}

.analyzer-banner-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semi);
	padding: var(--space-4) var(--space-8);
}

.analyzer-banner-cta-arrow {
	transition: transform 0.2s ease;
}

.analyzer-banner-cta:hover .analyzer-banner-cta-arrow {
	transform: translateX(4px);
}

.analyzer-banner-note {
	margin: var(--space-4) 0 0 0;
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.6);
}

/* ── Columna visual (dreta) – targeta simulada ── */

.analyzer-banner-visual {
	position: relative;
}

.analyzer-card {
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.analyzer-card-header {
	background: var(--color-gray-100);
	border-bottom: 1px solid var(--color-gray-200);
	padding: var(--space-3) var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.analyzer-card-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green  { background: #28c840; }

.analyzer-card-url {
	margin-left: var(--space-3);
	background: var(--color-gray-200);
	border-radius: var(--radius-sm);
	padding: 2px var(--space-3);
	font-size: var(--font-size-xs);
	color: var(--color-gray-700);
	font-family: monospace;
}

.analyzer-card-body {
	padding: var(--space-5) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.analyzer-metric {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-3);
	background: var(--color-gray-100);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
}

.analyzer-metric-label {
	color: var(--color-gray-700);
	font-weight: var(--font-weight-medium);
}

.analyzer-metric-value {
	font-weight: var(--font-weight-semi);
	font-size: var(--font-size-xs);
}

.analyzer-metric-value.ok   { color: var(--color-success); }
.analyzer-metric-value.warn { color: #e67e00; }

.analyzer-card-footer {
	padding: var(--space-4) var(--space-6) var(--space-5);
	border-top: 1px solid var(--color-gray-200);
}

.analyzer-progress {
	height: 6px;
	background: var(--color-gray-200);
	border-radius: var(--radius-full);
	overflow: hidden;
	margin-bottom: var(--space-2);
}

.analyzer-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-radius: var(--radius-full);
}

.analyzer-score {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* Decoració de punts */
.analyzer-dots {
	position: absolute;
	bottom: -16px;
	right: -16px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	z-index: -1;
}

.analyzer-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: block;
}

/* ── Responsive tablet ── */

@media (max-width: 1024px) {
	.analyzer-banner-inner {
		grid-template-columns: 1fr 360px;
		gap: var(--space-10);
	}
}

/* ── Responsive mòbil ── */

@media (max-width: 768px) {
	.section-analyzer-banner {
		padding: var(--space-12) 0;
	}

	.analyzer-banner-inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.analyzer-banner-title {
		font-size: var(--font-size-2xl);
	}

	.analyzer-banner-text {
		max-width: none;
	}

	.analyzer-banner-cta {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.analyzer-banner-visual {
		max-width: 420px;
		margin: 0 auto;
	}

	.analyzer-card-body {
		padding: var(--space-4) var(--space-4);
		gap: var(--space-2);
	}
}

/* ═══════════════════════════════════════════════════
   PÀGINES DE PLANS MENSUALS (page-plan-*)
   Estils compartits entre Mantenimiento Esencial, Activo i Ecommerce
   ═══════════════════════════════════════════════════ */

/* ── Secció "Este plan encaja contigo si…" ── */
.plan-fit-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

.plan-fit-grid li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
}

.plan-fit-grid li .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
	margin-top: 2px;
}

.plan-fit-grid li .sw-icon svg {
	width: 20px;
	height: 20px;
}

.plan-fit-grid li strong {
	display: block;
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin-bottom: var(--space-1);
	font-size: var(--font-size-base);
}

.plan-fit-grid li span {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: 1.5;
}

/* ── Intro de secció ── */
.plan-section-intro {
	color: var(--color-gray-700);
	margin-bottom: var(--space-5);
}

/* ── Box d'exemples / soporte básico ── */
.plan-examples-box {
	background: var(--color-primary-light);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-6) var(--space-8);
	margin-bottom: var(--space-10);
}

.plan-examples-box h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin-bottom: var(--space-2);
}

.plan-examples-box p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin-bottom: var(--space-4);
}

.plan-examples-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2) var(--space-6);
}

.plan-examples-list li {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	padding-left: 1.1em;
	position: relative;
}

.plan-examples-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-size: 0.75em;
	top: 0.15em;
}

.plan-examples-note {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	margin: 0;
	font-style: italic;
}

/* ── Llista "Qué evitas" ── */
.plan-avoids-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.plan-avoids-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
}

.plan-avoids-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary-dark);
	font-weight: var(--font-weight-bold);
	font-size: 1rem;
	margin-top: 1px;
}

/* ── Box de promesa (fons fosc) ── */
.plan-promise-box {
	background: var(--gradient-navy);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-10);
	margin-bottom: var(--space-10);
	color: var(--color-white);
}

.plan-promise-box h2 {
	color: var(--color-white);
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
}

.plan-promise-box p {
	color: rgba(255, 255, 255, .85);
	margin-bottom: var(--space-3);
	line-height: 1.7;
}

.plan-promise-box p:last-child {
	margin-bottom: 0;
}

/* ── Mini comparativa dels 3 plans ── */
.plan-mini-compare {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-10);
}

.plan-mini-compare__item {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.plan-mini-compare__item--active {
	border: 2px solid var(--color-primary);
	background: var(--color-primary-light);
}

.plan-mini-compare__badge {
	display: inline-block;
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	padding: 2px 10px;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-1);
	align-self: flex-start;
}

.plan-mini-compare__price {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	line-height: 1;
}

.plan-mini-compare__price span {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	color: var(--color-gray-500);
}

.plan-mini-compare__name {
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	font-size: var(--font-size-sm);
}

.plan-mini-compare__desc {
	font-size: var(--font-size-xs);
	color: var(--color-gray-700);
	line-height: 1.5;
	flex-grow: 1;
}

.plan-mini-compare__link {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	text-decoration: none;
	margin-top: var(--space-2);
}

.plan-mini-compare__link:hover {
	text-decoration: underline;
}

.plan-mini-compare__link--primary {
	background: var(--color-primary-dark);
	color: var(--color-white);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	text-align: center;
}

.plan-mini-compare__link--primary:hover {
	background: var(--color-primary-darker);
	text-decoration: none;
}

/* ── Secció "Qué pasa después" ── */
.section-next-steps .section-header {
	margin-bottom: var(--space-10);
}

.next-steps-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 800px;
	margin-inline: auto;
}

.next-step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--space-6);
	align-items: flex-start;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
}

.next-step__num {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.next-step__content h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	margin-bottom: var(--space-1);
}

.next-step__content p {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	margin: 0;
	line-height: 1.6;
}

/* ── Price card features list ── */
.price-card-features {
	list-style: none;
	padding: 0;
	margin: var(--space-5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.price-card-features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.price-card-features li .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
}

.price-card-features li .sw-icon svg {
	width: 15px;
	height: 15px;
}

/* ── Sidebar trust box ── */
.sidebar-info-box--trust {
	background: var(--color-primary-light);
	border: 1px solid rgba(249, 11, 31, .15);
}

/* ── Responsive plans ── */
@media (max-width: 768px) {
	.plan-fit-grid {
		grid-template-columns: 1fr;
	}

	.plan-examples-list {
		grid-template-columns: 1fr;
	}

	.plan-mini-compare {
		grid-template-columns: 1fr;
	}

	.plan-promise-box {
		padding: var(--space-6);
	}

	.next-step {
		grid-template-columns: 44px 1fr;
		gap: var(--space-4);
	}

	.next-step__num {
		width: 44px;
		height: 44px;
		font-size: var(--font-size-sm);
	}
}

/* ── Portfolio de webs desenvolupades ── */
.section-web-portfolio {
	scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.section-web-portfolio:focus-within .web-portfolio-browser {
	box-shadow: var(--shadow-lg);
}

.web-portfolio-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.web-portfolio-browser {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
}

.web-portfolio-browser-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--gradient-navy);
	color: var(--color-white);
}

.web-portfolio-browser-dots {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.web-portfolio-browser-dots span {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.35);
}

.web-portfolio-browser-dots span:first-child {
	background: #ff5f57;
}

.web-portfolio-browser-dots span:nth-child(2) {
	background: #febc2e;
}

.web-portfolio-browser-dots span:nth-child(3) {
	background: #28c840;
}

.web-portfolio-browser-meta {
	flex: 1 1 180px;
	min-width: 0;
}

.web-portfolio-browser-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.web-portfolio-browser-url {
	font-size: var(--font-size-xs);
	margin: 0;
	opacity: 0.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.web-portfolio-browser-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-left: auto;
}

.web-portfolio-mode-toggle {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.12);
}

.web-portfolio-mode-btn {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.web-portfolio-mode-btn:hover {
	color: var(--color-white);
}

.web-portfolio-mode-btn.is-active {
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-white);
}

.web-portfolio-nav {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.web-portfolio-nav-btn {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.web-portfolio-nav-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
}

.web-portfolio-counter {
	font-size: var(--font-size-xs);
	opacity: 0.85;
	min-width: 3.5rem;
	text-align: center;
}

.web-portfolio-browser-stage {
	position: relative;
	height: min(62vh, 560px);
	min-height: 320px;
	background: var(--color-gray-100);
}

.web-portfolio-iframe,
.web-portfolio-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.web-portfolio-iframe {
	border: 0;
	background: var(--color-white);
}

.web-portfolio-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: linear-gradient(180deg, var(--color-gray-100) 0%, var(--color-white) 100%);
}

.web-portfolio-fallback[hidden],
.web-portfolio-iframe[hidden] {
	display: none;
}

.web-portfolio-screenshot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 0;
}

.web-portfolio-fallback-note {
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.web-portfolio-hint {
	margin: var(--space-4) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
	text-align: center;
}

.web-portfolio-grid {
	display: grid;
	gap: var(--space-5);
}

.web-portfolio-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-portfolio-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.web-portfolio-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	border: 2px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.web-portfolio-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.web-portfolio-card.is-active {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.web-portfolio-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-gray-100);
}

.web-portfolio-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.35s ease;
}

.web-portfolio-card:hover .web-portfolio-card-thumb img,
.web-portfolio-card.is-active .web-portfolio-card-thumb img {
	transform: scale(1.03);
}

.web-portfolio-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
}

.web-portfolio-card-type {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
}

.web-portfolio-card-name {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semi);
	color: var(--color-dark);
	line-height: var(--line-height-snug);
}

.web-portfolio-card-sector {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

@media (max-width: 1024px) {
	.web-portfolio-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.web-portfolio-browser-bar {
		padding: var(--space-4);
	}

	.web-portfolio-browser-controls {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.web-portfolio-mode-toggle {
		order: 3;
		width: 100%;
		justify-content: center;
	}

	.web-portfolio-browser-stage {
		height: 52vh;
		min-height: 280px;
	}

	.web-portfolio-grid--2,
	.web-portfolio-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* ─── Author Box (E-E-A-T) ─────────────────────────────────────────────────── */

.author-box {
	display: flex;
	gap: var(--space-6);
	align-items: flex-start;
	padding: var(--space-8);
	margin: var(--space-10) 0;
	background: var(--color-gray-100);
	border-radius: var(--radius-xl);
	border-left: 4px solid var(--color-primary);
}

.author-box-photo {
	flex-shrink: 0;
}

.author-box-avatar {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-full);
	display: block;
}

.author-box-content {
	flex: 1;
	min-width: 0;
}

.author-box-label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-gray-500);
	margin: 0 0 var(--space-1);
	font-weight: var(--font-weight-semi);
}

.author-box-name {
	display: block;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-dark);
	text-decoration: none;
	margin-bottom: var(--space-2);
}

.author-box-name:hover {
	color: var(--color-primary);
}

.author-box-bio {
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	line-height: var(--line-height-base);
	margin: 0 0 var(--space-3);
}

.author-box-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary);
	text-decoration: none;
}

.author-box-link:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.author-box {
		flex-direction: column;
		gap: var(--space-4);
	}
}

/* ==========================================================================
   HOSTING WORDPRESS GESTIONADO (/hosting-wordpress/)
   Estilos específicos: grid de 4 planes, badge "Más contratado",
   comparativa 2 columnas y animación reveal-on-scroll (con soporte para
   prefers-reduced-motion). Scoped a esta página; no afecta al resto del sitio.
   ========================================================================== */

.pricing-grid--hosting {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.pricing-grid--hosting {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.pricing-grid--hosting {
		grid-template-columns: 1fr;
	}
}

.pricing-card--negocio {
	border: 2px solid var(--color-primary);
}

.pricing-card--negocio .pricing-card-header {
	background-color: var(--color-primary-light);
}

/*
 * .pricing-card tiene overflow:hidden (para recortar las esquinas
 * redondeadas de la cabecera), así que el badge "Más contratado" NO puede
 * ser hijo de .pricing-card: la mitad superior quedaría recortada (bug
 * visual reportado). Se envuelve cada card en .pricing-card-slot (posición
 * relativa, overflow visible) y el badge se posiciona respecto a ese
 * wrapper, no respecto a la card.
 */
.pricing-card-slot {
	position: relative;
	height: 100%;
}

.pricing-card-slot .pricing-card {
	height: 100%;
}

.pricing-card-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	padding: 0.3rem 1rem;
	border-radius: var(--radius-full);
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	z-index: 2;
}

.hosting-monthly-equivalent {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	margin-top: var(--space-1);
	margin-bottom: var(--space-3);
}

.hosting-freq-note {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	font-style: italic;
	margin-top: var(--space-1);
	margin-bottom: var(--space-3);
}

.plan-comparison-table--2col th:nth-child(2),
.plan-comparison-table--2col td:nth-child(2) {
	background-color: var(--color-gray-100);
}

.hosting-friction-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.hosting-friction-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
	padding: var(--space-3) var(--space-4);
	background: var(--color-white);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-gray-200);
}

.hosting-friction-list li svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	margin-top: 2px;
}

.hosting-domains-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hosting-domains-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

.hosting-domains-list li svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-success);
	margin-top: 3px;
}

@media (max-width: 768px) {
	.hosting-friction-list {
		grid-template-columns: 1fr;
	}
}

.sw-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
	/* Los bloques en cascada pasan su retardo con style="--reveal-delay: 90ms" */
	transition-delay: var(--reveal-delay, 0ms);
}

.sw-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sw-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   37. PORTADA – REDISEÑO EDITORIAL
   Bloques exclusivos de templates/template-home-commercial.php.
   Jerarquía: diseño y desarrollo web como servicio protagonista; navy oscuro,
   blanco y el acento rojo (--color-accent) reservado a filetes y resplandores.
   ========================================================================== */

/* ─── 37.1 Primitivas compartidas ─────────────────────────────────────── */

.home-eyebrow {
	display: block;
	margin: 0 0 var(--space-5);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.home-eyebrow--light {
	color: var(--color-accent);
}

.home-section-title {
	font-size: clamp(1.875rem, 4vw, var(--font-size-4xl));
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-5);
	max-width: 18ch;
}

.home-section-title--light {
	color: var(--color-white);
}

.home-title-accent {
	display: block;
	color: var(--color-primary);
}

.home-section-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-8);
	max-width: 44ch;
}

.home-section-lead--light {
	color: rgba(255,255,255,.72);
}

.home-section-head {
	margin-bottom: var(--space-16);
}

.home-section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-8);
}

.home-section-head--split .home-section-title {
	margin-bottom: 0;
}

/* Cabecera centrada: para bloques cuyo contenido ocupa las 3-4 columnas y
   no deja sitio a una intro lateral sin estrechar el titular. */
.home-section-head--center {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

.home-section-head--center .home-section-title,
.home-section-head--center .home-section-lead {
	max-width: none;
	margin-inline: auto;
}

.home-section-head--center .home-section-lead {
	margin-bottom: 0;
}

/* Enlace con flecha que avanza al hover */
.home-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-primary-dark);
	white-space: nowrap;
}

.home-link-arrow:hover {
	text-decoration: none;
	color: var(--color-primary-darker);
}

.home-link-arrow .sw-icon svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition-base);
}

.home-link-arrow:hover .sw-icon svg {
	transform: translateX(4px);
}

.home-link-arrow--light {
	color: var(--color-white);
}

.home-link-arrow--light:hover {
	color: var(--color-accent);
}

/* Botón fantasma sobre fondo oscuro */
.btn-ghost-dark {
	background-color: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.22);
	color: var(--color-white);
	backdrop-filter: blur(6px);
}

.btn-ghost-dark:hover {
	background-color: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.4);
	color: var(--color-white);
}

.btn .btn-icon svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition-base);
}

.btn:hover .btn-icon svg {
	transform: translateX(3px);
}

/* Resplandor rojo reutilizable en secciones oscuras */
.home-dark-glow {
	position: absolute;
	top: -10%;
	right: -8%;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(230,36,63,.22) 0%, rgba(230,36,63,0) 68%);
	pointer-events: none;
}

/* ─── 37.2 Bloque 1: hero ─────────────────────────────────────────────── */

.home-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 60% 52% at 70% 46%, rgba(18,46,96,.3) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 8% 4%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
	/* Contiene el mix-blend-mode de .home-hero-shot dentro de la sección: sin
	   esto el modo screen buscaría el backdrop más arriba en el documento. */
	isolation: isolate;
}

.home-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.home-hero-glow--one {
	top: -20rem;
	right: -14rem;
	width: 52rem;
	height: 52rem;
	background: radial-gradient(circle, rgba(230,36,63,.24) 0%, rgba(230,36,63,0) 65%);
}

.home-hero-glow--two {
	bottom: -22rem;
	left: -16rem;
	width: 44rem;
	height: 44rem;
	background: radial-gradient(circle, rgba(31,86,178,.35) 0%, rgba(31,86,178,0) 68%);
}

/* Arco decorativo detrás de los dispositivos: guiño al símbolo de la marca.
   Va en SVG (no en border-radius) porque necesita un trazo con degradado que
   nace y muere en transparente, más un halo desenfocado. Se ve a través del
   negro de la ilustración gracias al modo screen. */
.home-hero-arc {
	position: absolute;
	top: -7rem;
	right: 1rem;
	width: min(48rem, 56%);
	height: calc(100% + 14rem);
	background: url("../img/hero/hero-arc.svg") right center / contain no-repeat;
	pointer-events: none;
}

/* Sin z-index a propósito: con él el contenedor sería un contexto de
   apilamiento y el mix-blend-mode de .home-hero-shot solo se mezclaría con lo
   pintado dentro del contenedor (nada), dejando el negro opaco. Los glows y el
   arco van antes en el DOM, así que el contenido queda por encima igualmente. */
.home-hero .container {
	position: relative;
}

.home-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: var(--space-12);
}

.home-hero-title {
	font-size: clamp(2.25rem, 5.2vw, 3.75rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
	text-wrap: balance;
}

.home-hero-title span {
	display: block;
	color: var(--color-accent);
}

.home-hero-subtitle {
	font-size: var(--font-size-md);
	line-height: 1.7;
	color: rgba(255,255,255,.72);
	max-width: 46ch;
	margin: 0 0 var(--space-8);
}

.home-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

/* Estadísticas de confianza integradas en el hero: icono + cifra, sin filete */
.home-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-hero-stat {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.home-hero-stat-icon {
	flex-shrink: 0;
	color: rgba(255,255,255,.4);
}

.home-hero-stat-icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.4;
}

.home-hero-stat-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.home-hero-stat-value {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-white);
	white-space: nowrap;
}

.home-hero-stat-label {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,.5);
	white-space: nowrap;
}

/* ── Composición estática (modo activo) ─────────────────────────────────
   Ilustración de los tres dispositivos sobre NEGRO PURO, integrada con
   mix-blend-mode: screen. Con screen el negro (0) no aporta nada, así que el
   fondo del hero, el arco y el charco de luz se ven a través del archivo y no
   hay canto posible: ni recorte con alpha, ni degradados de difuminado, ni
   necesidad de que los colores casen. Es el motivo por el que la ilustración
   debe entregarse siempre sobre negro plano (o con alpha), nunca sobre el
   degradado del hero ya incrustado.                                     */
.home-hero-shot {
	display: block;
	width: 106%;
	max-width: none;
	height: auto;
	margin-left: -3%;
	mix-blend-mode: screen;
}

/* El copy va por encima: si la ilustración lo solapara, screen sobre el texto
   lo dejaría lavado. Con z-index el texto queda fuera del backdrop del blend. */
.home-hero-copy {
	position: relative;
	z-index: 1;
}

.home-hero-visual {
	position: relative;
	min-height: 30rem;
}

/* ── Composición de dispositivos ────────────────────────────────────────
   INACTIVA: se conserva porque es la alternativa a la ilustración estática
   (capturas reales de sw_get_web_portfolio() dentro de marcos en CSS). Para
   volver a ella hay que restaurar el marcado de .home-devices en
   section-home-hero.php y quitar la <img class="home-hero-shot">.
   Cada .device es el chasis (bisel + cuerpo casi negro + luz de canto) y
   .device-screen recorta la captura.                                    */

/* Charco de luz bajo el grupo, para que no flote sobre un fondo plano */
.home-devices-glow {
	position: absolute;
	left: 50%;
	bottom: -5rem;
	width: 120%;
	height: 18rem;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse at 55% 45%, rgba(31,86,178,.38) 0%, rgba(31,86,178,0) 68%),
		radial-gradient(ellipse at 88% 62%, rgba(230,36,63,.26) 0%, rgba(230,36,63,0) 62%);
	filter: blur(12px);
	pointer-events: none;
}

.home-devices {
	position: relative;
}

.device {
	position: relative;
	margin: 0;
	padding: 6px;
	border-radius: 13px;
	background: linear-gradient(155deg, #2c3752 0%, #131b2c 42%, #06090f 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.24),
		inset 0 -1px 0 rgba(255,255,255,.06),
		inset 0 0 0 1px rgba(255,255,255,.08),
		0 56px 96px -32px rgba(0,0,0,.92),
		0 20px 44px -14px rgba(0,0,0,.7);
}

.device-screen {
	position: relative;
	overflow: hidden;
	border-radius: 7px;
	background: #0d1424;
}

/* Brillo diagonal sobre la captura: es lo que hace leer la pantalla como
   cristal y no como una imagen pegada dentro de un rectángulo. */
.device-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 16%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}

.device-screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.device--laptop {
	width: 88%;
	margin-left: auto;
}

.device--laptop .device-screen {
	aspect-ratio: 16 / 11;
}

/* Base del portátil: se ensancha hacia el frente para sugerir perspectiva */
.device-deck {
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 108%;
	height: 11px;
	transform: translateX(-50%);
	border-radius: 0 0 8px 8px;
	background: linear-gradient(180deg, #232d43 0%, #0d1220 100%);
	box-shadow: 0 14px 24px -10px rgba(0,0,0,.7);
	clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}

/* Delante y desplazada hacia fuera de la columna, para que solo tape el
   cuadrante inferior izquierdo del portátil y ambas webs se lean. */
.device--tablet {
	position: absolute;
	left: -7%;
	bottom: -4.5rem;
	width: 55%;
	z-index: 2;
	padding: 8px;
	border-radius: 16px;
}

.device--tablet .device-screen {
	aspect-ratio: 3 / 2;
	border-radius: 9px;
}

.device--phone {
	position: absolute;
	right: 2%;
	bottom: -6rem;
	width: 19%;
	z-index: 3;
	padding: 5px;
	border-radius: 20px;
}

.device--phone .device-screen {
	aspect-ratio: 9 / 19;
	border-radius: 16px;
}

.device-notch {
	position: absolute;
	top: 9px;
	left: 50%;
	z-index: 1;
	width: 32%;
	height: 5px;
	transform: translateX(-50%);
	border-radius: var(--radius-full);
	background: #0a0e18;
}

/* Ajustes del hero solo en escritorio (las reglas de .home-devices son de la
   composición en CSS, inactiva). */
@media (min-width: 1025px) {

	/* La composición es más alta que el copy: necesita aire por abajo para no
	   quedar pegada al borde de la sección */
	.home-hero {
		padding-bottom: var(--space-24);
	}

	/* La composición sangra hacia el borde derecho: los tres dispositivos
	   necesitan más ancho del que da la columna del grid para no solaparse.
	   La sangría se limita al espacio real que queda entre el contenedor y
	   el borde de la ventana, así el móvil nunca se corta. */
	.home-hero-visual {
		--hero-bleed: min(5rem, max(0px, calc((100vw - var(--container-max)) / 2 - 1rem)));
		width: calc(100% + var(--hero-bleed));
		margin-right: calc(var(--hero-bleed) * -1);
	}

	.home-devices {
		transform: perspective(1800px) rotateY(-8deg) rotateX(2deg);
		transform-style: preserve-3d;
	}

	/* Contrarrotación: el portátil queda al fondo en ángulo y los dos
	   dispositivos delanteros se leen casi frontales, como en la referencia. */
	.device--tablet {
		transform: rotateY(4deg);
	}

	.device--phone {
		transform: rotateY(4deg);
	}
}

/* ─── 37.3 Bloque 2: proyectos destacados (casos de éxito) ────────────── */

/* El titular de este bloque es más largo que el del resto ("Te mostramos los
   resultados."): con el max-width de 18ch por defecto se partiría en tres
   líneas y perdería fuerza. */
.section-home-projects .home-section-title {
	max-width: 28ch;
}

.home-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La tarjeta ya no es el enlace: el enlace envuelve el nombre del proyecto y se
   estira sobre toda la tarjeta con ::after (ver .home-project-link). Así el
   texto de ancla sigue siendo el nombre y los KPIs quedan fuera del enlace. */
.home-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-dark);
	border: 1px solid var(--color-gray-200);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.home-project-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 16px 34px rgba(15,22,42,.13);
}

.home-project-shot {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-gray-100);
}

.home-project-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 400ms cubic-bezier(.22,1,.36,1);
}

.home-project-card:hover .home-project-shot img {
	transform: scale(1.02);
}

/* Banda de resultados flotando sobre el borde inferior de la captura.
   El ancho lo marca el contenido (solo se fija `left`), así una tarjeta con un
   único resultado no arrastra media banda vacía. Si no hay resultados el
   bloque no se imprime y la captura queda limpia. */
.home-project-kpis {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	z-index: 1;
	display: flex;
	max-width: calc(100% - var(--space-8));
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(15,22,42,.06);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 10px rgba(15,22,42,.09);
}

.home-project-kpi {
	min-width: 0;
	padding: var(--space-3) var(--space-4);
}

.home-project-kpi + .home-project-kpi {
	border-left: 1px solid var(--color-gray-200);
}

.home-project-kpi-value {
	display: block;
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

.home-project-kpi-label {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: var(--font-weight-semi);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-700);
}

.home-project-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: var(--color-white);
	border-top: 1px solid var(--color-gray-200);
	flex-grow: 1;
}

.home-project-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.home-project-name {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semi);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-dark);
	margin: 0;
}

.home-project-link,
.home-project-link:hover {
	color: inherit;
	text-decoration: none;
}

/* Capa clicable sobre toda la tarjeta. Va por encima de la banda de KPIs
   (z-index 1) para que el clic funcione también encima de ella. */
.home-project-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* El objetivo de foco real es el nombre, pero el anillo se pinta sobre la
   tarjeta completa (offset negativo: la tarjeta recorta con overflow hidden). */
.home-project-link:focus-visible {
	outline: none;
}

.home-project-link:focus-visible::after {
	outline: 2px solid var(--color-primary-dark);
	outline-offset: -3px;
	border-radius: var(--radius-xl);
}

.home-project-meta {
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
	margin: 0;
}

.home-project-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.home-project-arrow .sw-icon svg {
	width: 16px;
	height: 16px;
}

.home-project-card:hover .home-project-arrow {
	background: var(--color-primary-dark);
	color: var(--color-white);
	transform: translateX(3px);
}

/* ─── 37.4 Bloque 3: diseño y desarrollo web ──────────────────────────── */

.section-home-design {
	position: relative;
	overflow: hidden;
	background: var(--color-gray-100);
}

/* Columna editorial fija a la izquierda y rail a la derecha. El grid NO va
   dentro de `.container`: su padding izquierdo replica el borde de contenido del
   contenedor (mitad del hueco sobrante + su propio padding) y la columna
   derecha llega hasta el borde de la ventana, que es lo que permite que la
   tarjeta siguiente quede cortada. Se usa `100%` (ancho de la sección) y no
   `100vw` para no contar la barra de scroll vertical. */
.home-design-flow {
	--rail-gutter: calc(max(0px, (100% - var(--container-max)) / 2) + var(--container-px));
	--rail-intro: 25rem;
}

.home-design-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--rail-intro)) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;
	padding-left: var(--rail-gutter);
}

.home-design-intro .home-section-title,
.home-design-intro .home-section-lead {
	max-width: none;
}

.home-design-intro .home-section-lead {
	margin-bottom: var(--space-4);
}

.home-design-text {
	font-size: var(--font-size-base);
	line-height: 1.7;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-8);
}

.home-design-rail-title {
	font-size: var(--font-size-xl);
	line-height: 1.25;
	max-width: 34ch;
	margin: 0 0 var(--space-6);
}

/* El rail se desborda hacia la derecha porque su columna del grid ya termina en
   el borde de la ventana: solo hace falta un poco de aire al final del recorrido
   y el margen negativo lateral que evita que se recorte la sombra de la primera
   tarjeta. */
.home-design-track {
	display: flex;
	gap: var(--space-5);
	list-style: none;
	margin: 0 0 0 -4px;
	padding: 4px var(--space-8) var(--space-6) 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.home-design-track::-webkit-scrollbar {
	display: none;
}

.home-design-track:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.home-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(18rem, 24vw, 22rem);
	scroll-snap-align: start;
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-stage:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
}

/* Filete punteado que enlaza las fases a la altura del centro del icono,
   igual que hacía la antigua rejilla de cuatro pasos. */
.home-stage::before {
	content: "";
	position: absolute;
	top: calc(var(--space-8) + 24px);
	left: 100%;
	width: var(--space-5);
	border-top: 1px dashed var(--color-gray-300);
}

.home-stage:last-child::before,
.home-stage--cta::before {
	display: none;
}

.home-stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.home-stage-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.home-stage-icon svg {
	width: 22px;
	height: 22px;
}

.home-stage-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-gray-300);
}

.home-stage-title {
	font-size: var(--font-size-md);
	margin: 0 0 var(--space-3);
}

.home-stage-text {
	font-size: var(--font-size-sm);
	line-height: 1.65;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-3);
}

.home-stage-text:last-of-type {
	margin-bottom: 0;
}

/* Los aspectos técnicos van como chips: una lista vertical de siete líneas
   estiraría la altura de todas las tarjetas del rail. */
.home-stage-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}

.home-stage-tags li {
	padding: 0.25rem var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-gray-100);
	border: 1px solid var(--color-gray-200);
	font-size: var(--font-size-xs);
	color: var(--color-gray-700);
}

/* `margin-top: auto` empuja el cierre al pie: en un rail todas las tarjetas
   tienen la misma altura y así el remate queda siempre alineado. */
.home-stage-note {
	margin: auto 0 0;
	padding-top: var(--space-6);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-500);
}

.home-stage-note::before {
	content: "";
	display: block;
	width: var(--space-8);
	margin-bottom: var(--space-3);
	border-top: 2px solid var(--color-primary);
}

/* Última tarjeta del recorrido: premia a quien llega al final con el CTA */
.home-stage--cta {
	justify-content: center;
	background: var(--gradient-navy);
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

.home-stage--cta .home-stage-title {
	color: var(--color-white);
	font-size: var(--font-size-xl);
}

.home-stage--cta .home-stage-text {
	color: rgba(255,255,255,.72);
	margin-bottom: var(--space-6);
}

.home-stage--cta .btn {
	align-self: flex-start;
}

/* Los controles quedan alineados con el rail, no con la columna editorial */
.home-design-rail-foot {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-2);
	margin-left: calc(var(--rail-intro) + var(--space-12));
}

.home-design-progress {
	flex: 1 1 auto;
	height: 3px;
	border-radius: var(--radius-full);
	background: var(--color-gray-300);
	overflow: hidden;
}

.home-design-progress span {
	display: block;
	width: 40%;
	height: 100%;
	border-radius: inherit;
	background: var(--color-primary);
	transition: width 0.15s linear;
}

.home-design-hint {
	flex-shrink: 0;
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

/* Sin scroll pendiente (pantallas anchas o pocas tarjetas) las ayudas de
   navegación no aportan nada: las oculta el JS del rail. */
.home-design-flow.is-static .home-design-nav,
.home-design-flow.is-static .home-design-rail-foot {
	display: none;
}

/* ─── 37.5 Bloque 4: servicios post-lanzamiento ───────────────────────── */

.section-home-post-launch {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(180deg, #0f162a 0%, #0b1224 100%);
	color: var(--color-white);
}

.section-home-post-launch .container {
	position: relative;
	z-index: 1;
}

/* Cabecera centrada arriba + tres tarjetas a lo ancho: los tres servicios
   complementarios necesitan el ancho completo para que el texto respire. */
.home-pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	align-items: stretch;
}

.home-pillar {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.home-pillar:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,.07);
	border-color: rgba(230,36,63,.5);
}

.home-pillar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-5);
	border-radius: var(--radius-md);
	background: rgba(230,36,63,.14);
	color: var(--color-accent);
}

.home-pillar-title {
	font-size: var(--font-size-lg);
	color: var(--color-white);
	margin-bottom: var(--space-3);
}

.home-pillar-text {
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: rgba(255,255,255,.65);
	margin: 0 0 var(--space-6);
}

.home-pillar-list {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
}

.home-pillar-list li {
	position: relative;
	padding-left: var(--space-4);
	font-size: var(--font-size-base);
	color: rgba(255,255,255,.85);
}

.home-pillar-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-accent);
}

.home-pillar-list a {
	color: rgba(255,255,255,.85);
}

.home-pillar-list a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

/* ─── 37.6 Bloque 5: valores ──────────────────────────────────────────── */

.section-home-values {
	position: relative;
	overflow: hidden;
}

.section-home-values .container {
	position: relative;
	z-index: 1;
}

/* Filigrana de la marca: trazos que cruzan la sección de lado a lado. El dibujo
   se estira para ocupar toda la caja (`preserveAspectRatio="none"` en el SVG),
   así que la caja debe ser la sección completa. `width`/`height` explícitos son
   obligatorios (un <svg> es un elemento reemplazado: con inset no se estira,
   usaría su ratio intrínseco). El trazo se mantiene a 2px reales con
   non-scaling-stroke, que además evita que el estirado lo deforme. */
.home-arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-primary);
	opacity: .12;
	pointer-events: none;
}

/* Intro editorial a la izquierda y cuatro tarjetas numeradas en 2×2 */
.home-values-layout {
	display: grid;
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;
}

.home-values-intro .home-section-title {
	max-width: 14ch;
}

.home-values-intro .home-section-lead {
	margin-bottom: 0;
	max-width: 38ch;
}

.home-values-cta {
	margin-top: var(--space-8);
}

.home-values-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-value {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-value:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
}

/* Cifra de orden como marca de agua: refuerza la lectura sin competir */
.home-value-number {
	position: absolute;
	top: var(--space-5);
	right: var(--space-6);
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-gray-300);
	pointer-events: none;
}

.home-value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.home-value-icon svg {
	width: 22px;
	height: 22px;
}

.home-value-body {
	/* Reserva el hueco de la cifra para que el titular nunca la pise */
	padding-right: var(--space-8);
}

.home-value-title {
	font-size: var(--font-size-md);
	margin: 0 0 var(--space-2);
}

.home-value-text {
	font-size: var(--font-size-sm);
	line-height: 1.65;
	color: var(--color-gray-700);
	margin: 0;
}

/* ─── 37.7 Bloque 6: reseñas de Google ────────────────────────────────── */

.section-home-reviews {
	position: relative;
	background: var(--color-white);
	padding-top: var(--space-10);
}

/* El gris del bloque anterior se prolonga por detrás del panel: así el panel
   cruza el límite entre secciones en lugar de quedar encajado dentro de una.
   Se pinta como franja (no con margen negativo) para no arrastrar el fondo
   de la sección al colapsar márgenes. */
.section-home-reviews::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--space-24);
	background: var(--color-gray-100);
}

.section-home-reviews .container {
	position: relative;
	z-index: 1;
}

/* Panel único: a la izquierda el resumen de valoración, a la derecha las
   reseñas reales en un carrusel horizontal con scroll-snap (sin librerías). */
.home-reviews-panel {
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	gap: var(--space-8);
	padding: var(--space-10);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-md);
}

.home-reviews-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-right: 1px solid var(--color-gray-200);
	padding-right: var(--space-8);
}

.home-reviews-intro .home-section-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	max-width: 16ch;
	margin-bottom: var(--space-5);
}

.home-reviews-score {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

/* Estrellas: capa base en gris y capa de relleno recortada al % real */
.home-reviews-stars {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	line-height: 0;
	color: var(--color-gray-300);
}

.home-reviews-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--color-primary);
}

.home-reviews-stars .sw-icon svg {
	width: 16px;
	height: 16px;
}

.home-reviews-score-text {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-900);
}

.home-reviews-note {
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-500);
	margin: 0 0 var(--space-5);
	max-width: 30ch;
}

.home-reviews-source {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-700);
	margin-bottom: var(--space-6);
}

.home-reviews-source:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

/* Flechas circulares compartidas por el carrusel de reseñas y el rail de
   fases del bloque de diseño (`.home-rail-nav`). */
.home-reviews-nav,
.home-rail-nav {
	display: flex;
	gap: var(--space-3);
	margin-top: auto;
}

.home-reviews-nav button,
.home-rail-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--color-gray-300);
	background: var(--color-white);
	color: var(--color-gray-700);
	cursor: pointer;
	transition: color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

/* El avance es la acción esperada: se marca en rojo cuando está disponible */
.home-reviews-nav .home-reviews-next:not(:disabled),
.home-rail-nav .home-rail-next:not(:disabled) {
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.home-reviews-nav button:hover:not(:disabled),
.home-rail-nav button:hover:not(:disabled) {
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.home-reviews-nav button:disabled,
.home-rail-nav button:disabled {
	opacity: .4;
	cursor: default;
}

.home-reviews-nav svg,
.home-rail-nav svg {
	width: 18px;
	height: 18px;
}

.home-reviews-nav .home-reviews-prev svg,
.home-rail-nav .home-rail-prev svg {
	transform: rotate(180deg);
}

.home-reviews-carousel {
	min-width: 0;
}

.home-reviews-track {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Aire para que el hover de las tarjetas no se recorte */
	padding: 4px 4px 6px;
	margin: -4px -4px -6px;
}

.home-reviews-track::-webkit-scrollbar {
	display: none;
}

.home-review {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
	scroll-snap-align: start;
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-review:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
}

.home-review-quote {
	display: block;
	font-family: var(--font-family-display);
	font-size: 2.75rem;
	font-weight: var(--font-weight-bold);
	line-height: .8;
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.home-review-text {
	margin: 0 0 var(--space-6);
	border: 0;
	padding: 0;
	flex-grow: 1;
}

.home-review-text p {
	font-size: var(--font-size-sm);
	line-height: 1.7;
	color: var(--color-gray-700);
	margin: 0;
	/* Alturas homogéneas sin recortar el sentido de la reseña */
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-review-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.home-review-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-gray-100);
}

.home-review-avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family-display);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary-dark);
	background: var(--color-primary-light);
}

.home-review-name {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	color: var(--color-gray-900);
}

.home-review-meta {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-gray-500);
}

.home-reviews-dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.home-reviews-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-gray-300);
	cursor: pointer;
	transition: background-color var(--transition-base), transform var(--transition-base);
}

.home-reviews-dots button[aria-current="true"] {
	background: var(--color-primary);
	transform: scale(1.2);
}

/* Fallback: si el plugin de reseñas todavía no tiene datos, el bloque
   antiguo sigue funcionando con la cabecera editorial de la portada. */
.page-home .section-google-reviews .section-header,
.page-home .section-testimonials .section-header {
	max-width: 22ch;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

.page-home .section-google-reviews .section-title,
.page-home .section-testimonials .section-title {
	font-size: clamp(1.875rem, 4vw, var(--font-size-4xl));
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.page-home .section-google-reviews .google-reviews-source {
	justify-content: flex-start;
}

/* ─── 37.8 Bloque 7: CTA final ────────────────────────────────────────── */

.section-home-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background-color: var(--color-darker);
	background-image: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
	color: var(--color-white);
	text-align: center;
}

.home-dark-glow--cta {
	top: auto;
	right: -14rem;
	bottom: -24rem;
	width: 52rem;
	height: 52rem;
	background: radial-gradient(circle, rgba(230,36,63,.3) 0%, rgba(230,36,63,0) 64%);
}

.home-cta-mark {
	position: absolute;
	left: 1.5rem;
	bottom: -2.5rem;
	width: 13rem;
	height: auto;
	opacity: .1;
	pointer-events: none;
}

.section-home-cta .container {
	position: relative;
	z-index: 1;
}

.home-cta-inner {
	max-width: 720px;
	margin: 0 auto;
}

.home-cta-inner .home-eyebrow {
	margin-bottom: var(--space-4);
}

.home-cta-title {
	font-size: clamp(1.875rem, 4.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-5);
	text-wrap: balance;
}

.home-cta-text {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,.7);
	margin: 0 0 var(--space-10);
}

.home-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

/* ─── 37.9 Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {

	.home-hero-grid {
		grid-template-columns: 1fr;
		gap: var(--space-16);
	}

	.home-hero-subtitle,
	.home-hero-title {
		max-width: none;
	}

	.home-hero-visual {
		min-height: 0;
		max-width: 34rem;
	}

	.home-values-layout {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	/* `minmax(0, …)` es imprescindible también con una sola columna: con `1fr`
	   pelado el rail impone su ancho de contenido y arrastra la columna
	   editorial fuera de la pantalla. */
	.home-design-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.home-design-intro .home-section-title,
	.home-values-intro .home-section-title {
		max-width: 24ch;
	}

	/* Apilado, la columna editorial necesita su propio margen derecho: el grid
	   solo lleva padding a la izquierda para que el rail llegue al borde. */
	.home-design-intro {
		padding-right: var(--container-px);
	}

	.home-design-text {
		max-width: 64ch;
	}

	.home-design-rail-foot {
		margin-left: 0;
	}

	.home-values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* El resumen de valoración pasa arriba y las reseñas ocupan todo el ancho.
	   minmax(0, …) es imprescindible: con 1fr el carrusel impone su ancho de
	   contenido y desborda el panel. */
	.home-reviews-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.home-reviews-intro {
		border-right: 0;
		border-bottom: 1px solid var(--color-gray-200);
		padding-right: 0;
		padding-bottom: var(--space-8);
	}

	.home-reviews-intro .home-section-title {
		max-width: 24ch;
	}

	.home-reviews-nav {
		margin-top: 0;
	}

	.home-review {
		flex: 0 0 calc((100% - var(--space-5)) / 2);
	}

	/* Las tres tarjetas siguen en fila, pero con menos aire interior */
	.home-pillars-grid {
		gap: var(--space-5);
	}

	.home-pillar {
		padding: var(--space-6);
	}

	.home-projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-projects-grid .home-project:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {

	.home-hero {
		padding-top: var(--space-12);
		padding-bottom: var(--space-16);
	}

	.home-hero-actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-10);
	}

	.home-hero-actions .btn {
		width: 100%;
	}

	.home-hero-stats {
		gap: var(--space-6) var(--space-8);
	}

	.home-hero-stat {
		flex: 1 1 40%;
	}

	.home-hero-visual {
		max-width: none;
		min-height: 0;
	}

	.device--laptop {
		width: 100%;
	}

	.device--tablet {
		display: none;
	}

	.device--phone {
		width: 25%;
		right: -0.5rem;
		bottom: -2rem;
	}

	.home-devices-glow {
		bottom: -2rem;
		height: 10rem;
	}

	.home-section-head {
		margin-bottom: var(--space-10);
	}

	.home-section-head--split {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
	}

	.home-projects-grid,
	.home-pillars-grid,
	.home-values-grid {
		grid-template-columns: 1fr;
	}

	.home-projects-grid .home-project:first-child {
		grid-column: auto;
	}

	/* En una columna la tarjeta es mucho más ancha: los resultados pueden (y
	   deben) crecer para que no queden en letra pequeña. */
	.home-project-kpi-value {
		font-size: var(--font-size-xl);
	}

	.home-project-kpi-label {
		font-size: var(--font-size-xs);
	}

	/* La tarjeta ocupa casi todo el ancho y deja asomar la siguiente, que es
	   la pista de que el rail se desplaza. */
	.home-stage {
		flex: 0 0 86%;
	}

	.home-design-hint {
		display: none;
	}

	.home-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.home-cta-actions .btn {
		width: 100%;
	}

	.home-cta-mark {
		width: 9rem;
	}

	.page-home .section-google-reviews .section-header,
	.page-home .section-testimonials .section-header {
		max-width: none;
	}

	.home-reviews-panel {
		padding: var(--space-6);
	}

	.section-home-reviews {
		padding-top: var(--space-8);
	}

	.section-home-reviews::before {
		height: var(--space-16);
	}

	/* Al reducirse la escala hay más línea por superficie: baja la intensidad. */
	.home-arcs {
		opacity: .1;
	}

	.home-reviews-intro .home-section-title,
	.home-values-intro .home-section-lead {
		max-width: none;
	}

	.home-review {
		flex: 0 0 86%;
	}
}

/* Sin animaciones de hover ni desplazamientos para quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {

	.home-project-card:hover,
	.home-pillar:hover,
	.home-value:hover,
	.home-review:hover,
	.home-stage:hover,
	.home-reviews-nav button:hover:not(:disabled),
	.home-rail-nav button:hover:not(:disabled) {
		transform: none;
	}

	.home-project-card:hover .home-project-shot img,
	.home-link-arrow:hover .sw-icon svg,
	.btn:hover .btn-icon svg,
	.home-project-card:hover .home-project-arrow {
		transform: none;
	}
}

/* ==========================================================================
   38. PÁGINA URGENCIAS – REDISEÑO EDITORIAL
   templates/template-urgencias.php. Reutiliza las primitivas de la portada
   (§37.1: .home-eyebrow, .home-section-title/-lead, .home-section-head--center,
   .home-dark-glow, .home-link-arrow, .btn-ghost-dark) y las estadísticas del
   hero (.home-hero-stats*), y añade aquí solo lo propio de esta página.
   Ritmo de fondos: oscuro → blanco → gris → blanco → oscuro → gris → blanco →
   blanco → oscuro.

   Este bloque va DESPUÉS del §37, así que para sobrescribir una primitiva
   .home-* basta un selector de una sola clase (gana por orden de cascada).
   ========================================================================== */

/* ─── 38.1 Hero oscuro con panel de diagnóstico ─────────────────────────── */

.urg-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-24) 0;
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 58% 52% at 78% 44%, rgba(18,46,96,.34) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 6% 6%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
}

.urg-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.urg-hero-glow--one {
	top: -22%;
	left: -10%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(230,36,63,.22) 0%, rgba(230,36,63,0) 68%);
}

.urg-hero-glow--two {
	bottom: -30%;
	right: -10%;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(circle, rgba(15,43,91,.55) 0%, rgba(15,43,91,0) 70%);
}

.urg-hero .container {
	position: relative;
}

.urg-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-16);
	align-items: center;
}

.urg-hero-title {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.urg-hero-title span {
	display: block;
	color: var(--color-accent);
}

.urg-hero-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: rgba(255,255,255,.74);
	margin: 0 0 var(--space-8);
	max-width: 48ch;
}

.urg-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

/* El visitante llega con un síntoma, no con el nombre del servicio: el panel
   hace de derivador y por eso va en el hueco visual del hero. */
.urg-triage {
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px rgba(3,6,13,.5);
}

.urg-triage-eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.urg-triage-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	margin: 0 0 var(--space-5);
}

.urg-triage-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.urg-triage-item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
}

.urg-triage-item + .urg-triage-item {
	border-top: 1px solid rgba(255,255,255,.1);
}

.urg-triage-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: rgba(230,36,63,.14);
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.urg-triage-icon svg {
	width: 22px;
	height: 22px;
}

.urg-triage-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.urg-triage-symptom {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	color: rgba(255,255,255,.7);
}

.urg-triage-service {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.urg-triage-service:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.urg-triage-service .sw-icon svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition-base);
}

.urg-triage-service:hover .sw-icon svg {
	transform: translateX(3px);
}

.urg-triage-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-white);
	white-space: nowrap;
}

.urg-triage-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: rgba(255,255,255,.6);
}

/* Enlace en blanco subrayado, no en acento: el rojo de marca sobre este fondo
   se queda en 4,33:1 y el texto es pequeño. */
.urg-triage-note a {
	color: var(--color-white);
	text-decoration: underline;
	white-space: nowrap;
}

/* ─── 38.2 Posicionamiento (editorial, sin tarjetas) ────────────────────── */

.section-urg-intro {
	padding: var(--space-24) 0;
}

.urg-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.urg-intro-title {
	font-size: clamp(1.875rem, 3.8vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 22ch;
}

.urg-intro-title span {
	display: block;
	color: var(--color-primary);
}

.urg-intro-text {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
	max-width: 54ch;
}

.urg-intro-claim {
	max-width: 34ch;
	margin: var(--space-10) 0 0;
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-primary);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

/* ─── 38.3 Los tres servicios ───────────────────────────────────────────── */

.urg-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	align-items: stretch;
}

.urg-service {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.urg-service:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.urg-service-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.urg-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.urg-service-icon svg {
	width: 24px;
	height: 24px;
}

.urg-service-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-gray-300);
}

.urg-service-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.urg-service-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	font-family: var(--font-family-display);
	letter-spacing: -0.03em;
	color: var(--color-dark);
}

.urg-service-amount {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.urg-service-currency {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.urg-service-vat {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.urg-service-tagline {
	align-self: flex-start;
	margin: 0 0 var(--space-5);
	padding: 0.25rem var(--space-3);
	border-radius: var(--radius-full);
	background-color: var(--color-success-light);
	color: var(--color-success);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
}

.urg-service-text {
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
}

.urg-service-features {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.urg-service-features li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--color-gray-700);
}

.urg-service-features .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
}

.urg-service-features .sw-icon svg {
	width: 18px;
	height: 18px;
}

/* `margin-top: auto` alinea el cierre al pie de las tres tarjetas, que tienen
   listas de features de distinta longitud. Sustituye al antiguo bloque
   independiente «Cómo elegir». */
.urg-service-when {
	margin: auto 0 var(--space-6);
	padding-top: var(--space-6);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-500);
}

.urg-service-when::before {
	content: "";
	display: block;
	width: var(--space-8);
	margin-bottom: var(--space-3);
	border-top: 2px solid var(--color-primary);
}

.urg-service-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.urg-service-detail {
	font-size: var(--font-size-sm);
}

.urg-services-note {
	margin: var(--space-10) 0 0;
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ─── 38.4 Comparativa (tabla compartida con /mantenimiento/) ───────────── */

.section-urg-compare .plan-comparison-wrap {
	margin-bottom: 0;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	background: var(--color-white);
}

/* La tabla mide 640px mínimos: en móvil solo se ven dos columnas y media, así
   que el aviso de deslizar solo aparece cuando de verdad hay scroll. */
.urg-compare-hint {
	display: none;
}

.urg-compare-hint .sw-icon svg {
	width: 16px;
	height: 16px;
}

/* ─── 38.5 Cómo trabajamos una urgencia (sección oscura) ────────────────── */

.section-urg-process {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 58%, var(--color-darker) 100%);
	color: var(--color-white);
}

.section-urg-process .container {
	position: relative;
	z-index: 1;
}

.urg-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8);
}

.urg-step {
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255,255,255,.16);
}

.urg-step-number {
	display: block;
	margin-bottom: var(--space-4);
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

.urg-step-title {
	font-size: var(--font-size-md);
	color: var(--color-white);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.urg-step-text {
	font-size: var(--font-size-base);
	color: rgba(255,255,255,.7);
	line-height: var(--line-height-base);
	margin: 0;
}

/* ─── 38.6 Puente a los planes mensuales ────────────────────────────────── */

.urg-continuity {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: var(--space-16);
	align-items: start;
}

.urg-continuity-intro .home-section-title {
	max-width: 22ch;
}

.urg-plans {
	list-style: none;
	margin: 0;
	padding: 0;
}

.urg-plan {
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-gray-300);
}

.urg-plan:last-child {
	border-bottom: 1px solid var(--color-gray-300);
}

.urg-plan-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	color: var(--color-dark);
}

.urg-plan-link:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.urg-plan-name,
.urg-plan-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
}

.urg-plan-price {
	color: var(--color-primary-dark);
	white-space: nowrap;
}

.urg-plan-text {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* ─── 38.7 CTA final oscuro ─────────────────────────────────────────────── */

.section-urg-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background-color: var(--color-darker);
	background-image: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
	color: var(--color-white);
	text-align: center;
}

.urg-cta-mark {
	position: absolute;
	left: 1.5rem;
	bottom: -2.5rem;
	width: 13rem;
	height: auto;
	opacity: .1;
	pointer-events: none;
}

.section-urg-cta .container {
	position: relative;
	z-index: 1;
}

.urg-cta-inner {
	max-width: 46rem;
	margin-inline: auto;
}

.urg-cta-title {
	max-width: none;
	margin-inline: auto;
}

.urg-cta-text {
	max-width: 48ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.urg-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.urg-cta-services {
	margin: var(--space-10) 0 0;
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* ─── 38.8 Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.urg-hero {
		padding: var(--space-20) 0;
	}

	.urg-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.urg-hero-title,
	.urg-hero-lead {
		max-width: none;
	}

	.section-urg-intro {
		padding: var(--space-20) 0;
	}

	.urg-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	/* Los tres servicios siguen en fila (con dos columnas quedaría una tarjeta
	   huérfana): lo que se reduce es el aire interior. */
	.urg-services-grid {
		gap: var(--space-5);
	}

	.urg-service {
		padding: var(--space-6);
	}

	.urg-service-title {
		font-size: var(--font-size-lg);
	}

	.urg-service-amount {
		font-size: var(--font-size-2xl);
	}

	.urg-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-8);
	}

	.urg-continuity {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}
}

@media (max-width: 768px) {
	.urg-hero {
		padding: var(--space-16) 0 var(--space-20);
	}

	.urg-hero-actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-10);
	}

	.urg-hero-actions .btn {
		width: 100%;
	}

	.urg-triage {
		padding: var(--space-6);
	}

	/* Con el icono, las tres columnas dejan el nombre del servicio en dos
	   líneas en pantallas de 320-360px. */
	.urg-triage-icon {
		display: none;
	}

	.urg-triage-item {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.urg-intro-text {
		font-size: var(--font-size-md);
	}

	.urg-intro-claim {
		font-size: var(--font-size-lg);
	}

	.urg-services-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.urg-compare-hint {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		justify-content: flex-end;
		margin: 0 0 var(--space-3);
		font-size: var(--font-size-xs);
		color: var(--color-gray-500);
	}

	.urg-service-title {
		font-size: var(--font-size-xl);
	}

	.urg-service-amount {
		font-size: var(--font-size-3xl);
	}

	.urg-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.urg-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.urg-cta-actions .btn {
		width: 100%;
	}

	.urg-cta-mark {
		width: 9rem;
	}
}

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

	.urg-service:hover {
		transform: none;
	}

	.urg-triage-service:hover .sw-icon svg {
		transform: none;
	}
}

/* ==========================================================================
   39. FICHAS DE SERVICIO – REDISEÑO EDITORIAL
   template-parts/service-page.php, compartido por las tres fichas
   (/reparacion-web/, /puesta-al-dia-web/, /optimizacion-web/).

   Reutiliza las primitivas de la portada (§37.1: .home-eyebrow,
   .home-section-title/-lead con --light, .home-section-head--center,
   .home-dark-glow, .home-link-arrow, .btn-ghost-dark) y las estadísticas del
   hero (.home-hero-stats*). Va DESPUÉS del §37, así que para sobrescribir una
   primitiva .home-* basta un selector de una sola clase.

   Ritmo de fondos: oscuro → blanco → gris → oscuro → blanco → (editor) →
   gris → blanco → blanco → gris → banner analyzer → oscuro.
   ========================================================================== */

/* ─── 39.1 Titular editorial de sección (fondos claros) ─────────────────── */

/* Más contenido y columnas más estrechas que en la portada: por eso las
   cabeceras a dos columnas de estas fichas no usan .home-section-title. */
.svc-section-title {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-5);
	max-width: 24ch;
}

/* ─── 39.2 Hero oscuro con panel de precio ──────────────────────────────── */

.svc-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-24) 0;
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 58% 52% at 80% 42%, rgba(18,46,96,.32) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 5% 8%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
}

.svc-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.svc-hero-glow--one {
	top: -24%;
	left: -12%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(230,36,63,.2) 0%, rgba(230,36,63,0) 68%);
}

.svc-hero-glow--two {
	bottom: -32%;
	right: -8%;
	width: 44rem;
	height: 44rem;
	background: radial-gradient(circle, rgba(15,43,91,.5) 0%, rgba(15,43,91,0) 70%);
}

.svc-hero .container {
	position: relative;
}

.svc-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: var(--space-16);
	align-items: center;
}

.svc-hero-title {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.svc-hero-title span {
	display: block;
	color: var(--color-accent);
}

.svc-hero-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: rgba(255,255,255,.74);
	margin: 0 0 var(--space-8);
	max-width: 50ch;
}

.svc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

/* Panel informativo, sin botón: el CTA primario es el de la columna de texto,
   para no apilar tres llamadas a la acción por encima del pliegue. */
.svc-panel {
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px rgba(3,6,13,.5);
}

.svc-panel-label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.svc-panel-title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	margin: 0 0 var(--space-4);
}

.svc-panel-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	font-family: var(--font-family-display);
	letter-spacing: -0.03em;
	color: var(--color-white);
}

.svc-panel-amount {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.svc-panel-currency {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.svc-panel-vat {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}

.svc-panel-deadline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-3) 0;
	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);
	font-family: var(--font-family-display);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

.svc-panel-deadline .sw-icon {
	color: var(--color-accent);
}

.svc-panel-deadline .sw-icon svg {
	width: 20px;
	height: 20px;
}

.svc-panel-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.svc-panel-features li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: rgba(255,255,255,.78);
}

.svc-panel-features .sw-icon {
	flex-shrink: 0;
	color: var(--color-accent);
}

.svc-panel-features .sw-icon svg {
	width: 18px;
	height: 18px;
}

.svc-panel-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: rgba(255,255,255,.6);
}

/* ─── 39.3 ¿Es tu caso? (síntomas) ──────────────────────────────────────── */

.svc-symptoms,
.svc-limits,
.svc-siblings {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.svc-symptoms-head .home-section-lead:last-child,
.svc-limits-head .home-section-lead:last-child {
	margin-bottom: 0;
}

.svc-symptoms-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svc-symptoms-list li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-size: var(--font-size-md);
	line-height: 1.5;
	color: var(--color-gray-900);
}

.svc-symptoms-list li + li {
	border-top: 1px solid var(--color-gray-200);
}

.svc-symptoms-list .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
}

.svc-symptoms-list .sw-icon svg {
	width: 20px;
	height: 20px;
}

.svc-symptoms-closing {
	margin: var(--space-8) 0 0;
	padding-top: var(--space-5);
	border-top: 2px solid var(--color-primary);
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

/* ─── 39.4 Qué incluye (filas, no tarjetas) ─────────────────────────────── */

/* Filas y no tarjetas porque el número de puntos varía por servicio (4 o 5):
   en una rejilla de 3 columnas quedaría siempre una fila coja. */
.svc-scope-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svc-scope-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 16rem) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: baseline;
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-gray-300);
	transition: border-color var(--transition-base);
}

.svc-scope-item:first-child {
	border-top: 1px solid var(--color-gray-300);
}

.svc-scope-item:hover {
	border-bottom-color: var(--color-primary);
}

.svc-scope-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-gray-400);
	transition: color var(--transition-base);
}

.svc-scope-item:hover .svc-scope-number {
	color: var(--color-primary);
}

.svc-scope-title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	margin: 0;
}

.svc-scope-text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: var(--color-gray-700);
}

.svc-scope-note {
	margin: var(--space-10) auto 0;
	max-width: 60ch;
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ─── 39.5 Cómo lo hacemos (sección oscura, timeline) ───────────────────── */

.section-svc-process {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 58%, var(--color-darker) 100%);
	color: var(--color-white);
}

.section-svc-process .container {
	position: relative;
	z-index: 1;
}

.svc-process-layout {
	display: grid;
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
}

.svc-process-head .home-section-title {
	max-width: 20ch;
}

.svc-flow {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Lista vertical y no rejilla: el proceso tiene 4 pasos en dos servicios y 6
   en el otro, y una rejilla de 4 columnas dejaría dos huérfanos. */
.svc-flow-step {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-6) 0;
}

.svc-flow-step + .svc-flow-step {
	border-top: 1px solid rgba(255,255,255,.14);
}

.svc-flow-step:first-child {
	padding-top: 0;
}

.svc-flow-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

.svc-flow-title {
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	margin: 0 0 var(--space-2);
}

.svc-flow-text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: rgba(255,255,255,.7);
}

/* ─── 39.6 Qué no incluye ───────────────────────────────────────────────── */

.svc-limits-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svc-limits-list li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-gray-700);
}

.svc-limits-list li span {
	flex-shrink: 0;
	color: var(--color-gray-400);
	font-weight: var(--font-weight-bold);
}

.svc-limits-note {
	margin: var(--space-6) 0 0;
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-gray-100);
	border-left: 3px solid var(--color-primary);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-700);
}

/* ─── 39.7 Zona editable con Gutenberg ─────────────────────────────────── */

/* Solo se pinta si la página tiene contenido en el editor, así que el ritmo
   de fondos de la ficha no depende de ella. */
.section-svc-editor {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

/* ─── 39.8 Las otras dos intervenciones ─────────────────────────────────── */

.svc-siblings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.svc-sibling-link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	color: var(--color-dark);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.svc-sibling-link:hover {
	transform: translateY(-2px);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	text-decoration: none;
	color: var(--color-dark);
}

.svc-sibling-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.svc-sibling-icon svg {
	width: 22px;
	height: 22px;
}

.svc-sibling-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.svc-sibling-name {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
}

.svc-sibling-text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	color: var(--color-gray-700);
}

.svc-sibling-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-primary-dark);
	white-space: nowrap;
}

/* ─── 39.9 Siguiente paso (mantenimiento / rediseño) ────────────────────── */

.svc-next-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8) var(--space-16);
}

.svc-next-item {
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-primary);
}

.svc-next-eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.svc-next-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.svc-next-text {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: var(--color-gray-700);
}

/* ─── 39.10 CTA final oscuro ────────────────────────────────────────────── */

.section-svc-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background-color: var(--color-darker);
	background-image: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
	color: var(--color-white);
	text-align: center;
}

.svc-cta-mark {
	position: absolute;
	left: 1.5rem;
	bottom: -2.5rem;
	width: 13rem;
	height: auto;
	opacity: .1;
	pointer-events: none;
}

.section-svc-cta .container {
	position: relative;
	z-index: 1;
}

.svc-cta-inner {
	max-width: 46rem;
	margin-inline: auto;
}

.svc-cta-title {
	max-width: none;
	margin-inline: auto;
}

.svc-cta-text {
	max-width: 48ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.svc-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.svc-cta-services {
	margin: var(--space-10) 0 0;
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* ─── 39.11 Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.svc-hero {
		padding: var(--space-20) 0;
	}

	.svc-hero-grid,
	.svc-symptoms,
	.svc-limits,
	.svc-siblings,
	.svc-process-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.svc-hero-title,
	.svc-hero-lead,
	.svc-section-title,
	.svc-process-head .home-section-title {
		max-width: none;
	}

	/* Sin esto, la colocación automática mandaría el texto a la columna del
	   número (mismo caso que .about-area). */
	.svc-scope-item {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: var(--space-3) var(--space-6);
	}

	.svc-scope-text {
		grid-column: 2;
	}

	.svc-next-grid {
		gap: var(--space-10);
	}
}

@media (max-width: 768px) {
	.svc-hero {
		padding: var(--space-16) 0 var(--space-20);
	}

	.svc-hero-actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-10);
	}

	.svc-hero-actions .btn {
		width: 100%;
	}

	.svc-panel {
		padding: var(--space-6);
	}

	.svc-panel-amount {
		font-size: var(--font-size-3xl);
	}

	.svc-symptoms-list li {
		font-size: var(--font-size-base);
	}

	.svc-scope-item,
	.svc-flow-step {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2);
	}

	.svc-scope-text,
	.svc-flow-text {
		grid-column: 1;
	}

	.svc-scope-number,
	.svc-flow-number {
		font-size: var(--font-size-lg);
	}

	/* Con el icono, el nombre del servicio y el precio se estrechan demasiado
	   por debajo de 360px. */
	.svc-sibling-icon {
		display: none;
	}

	.svc-sibling-link {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-4);
		padding: var(--space-4) var(--space-5);
	}

	.svc-next-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.svc-cta-actions .btn {
		width: 100%;
	}

	.svc-cta-mark {
		width: 9rem;
	}
}

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

	.svc-sibling-link:hover {
		transform: none;
	}
}

/* ==========================================================================
   40. HUB DE MANTENIMIENTO – REDISEÑO EDITORIAL
   templates/template-plans-maintenance.php (/mantenimiento/).

   Mismo esqueleto visual que /urgencias/ (§38): hero oscuro con panel
   derivador, posicionamiento editorial, tres tarjetas, comparativa, proceso
   oscuro, puente al otro pilar y cierre oscuro. Reutiliza las primitivas de la
   portada (§37.1) y las estadísticas del hero (.home-hero-stats*).

   Ritmo de fondos: oscuro → blanco → gris → blanco → oscuro → gris → blanco →
   blanco → oscuro.
   ========================================================================== */

/* ─── 40.1 Hero oscuro con selector por tipo de web ─────────────────────── */

.mnt-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-24) 0;
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 58% 52% at 78% 44%, rgba(18,46,96,.34) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 6% 6%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
}

.mnt-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mnt-hero-glow--one {
	top: -22%;
	left: -10%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(230,36,63,.2) 0%, rgba(230,36,63,0) 68%);
}

.mnt-hero-glow--two {
	bottom: -30%;
	right: -10%;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(circle, rgba(15,43,91,.55) 0%, rgba(15,43,91,0) 70%);
}

.mnt-hero .container {
	position: relative;
}

.mnt-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-16);
	align-items: center;
}

.mnt-hero-title {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.mnt-hero-title span {
	display: block;
	color: var(--color-accent);
}

.mnt-hero-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: rgba(255,255,255,.74);
	margin: 0 0 var(--space-8);
	max-width: 50ch;
}

.mnt-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

/* El visitante no llega por el nombre del plan, sino por el tipo de web que
   tiene: el panel hace de derivador hacia la ficha que le toca. */
.mnt-picker {
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px rgba(3,6,13,.5);
}

.mnt-picker-eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.mnt-picker-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	margin: 0 0 var(--space-5);
}

.mnt-picker-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mnt-picker-item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
}

.mnt-picker-item + .mnt-picker-item {
	border-top: 1px solid rgba(255,255,255,.1);
}

.mnt-picker-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: rgba(230,36,63,.14);
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mnt-picker-icon svg {
	width: 22px;
	height: 22px;
}

.mnt-picker-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mnt-picker-profile {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	color: rgba(255,255,255,.7);
}

.mnt-picker-plan {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.mnt-picker-plan:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.mnt-picker-plan .sw-icon svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition-base);
}

.mnt-picker-plan:hover .sw-icon svg {
	transform: translateX(3px);
}

.mnt-picker-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-white);
	white-space: nowrap;
}

.mnt-picker-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: rgba(255,255,255,.6);
}

/* Blanco subrayado y no acento: el rojo de marca sobre este fondo se queda en
   4,33:1 y el texto es pequeño (mismo criterio que .urg-triage-note a). */
.mnt-picker-note a {
	color: var(--color-white);
	text-decoration: underline;
	white-space: nowrap;
}

/* ─── 40.2 Posicionamiento (editorial, sin tarjetas) ────────────────────── */

.section-mnt-intro {
	padding: var(--space-24) 0;
}

.mnt-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.mnt-intro-title {
	font-size: clamp(1.875rem, 3.8vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 22ch;
}

.mnt-intro-title span {
	display: block;
	color: var(--color-primary);
}

.mnt-intro-text {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
	max-width: 54ch;
}

.mnt-intro-claim {
	max-width: 34ch;
	margin: var(--space-10) 0 0;
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-primary);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

/* ─── 40.3 Los tres planes ──────────────────────────────────────────────── */

.mnt-plans-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	align-items: stretch;
}

.mnt-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.mnt-plan:hover {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.mnt-plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.mnt-plan-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.mnt-plan-icon svg {
	width: 24px;
	height: 24px;
}

.mnt-plan-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-gray-300);
}

.mnt-plan-title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.mnt-plan-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	font-family: var(--font-family-display);
	letter-spacing: -0.03em;
	color: var(--color-dark);
}

.mnt-plan-amount {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.mnt-plan-currency {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.mnt-plan-period {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.mnt-plan-vat {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.mnt-plan-tagline {
	align-self: flex-start;
	margin: 0 0 var(--space-5);
	padding: 0.25rem var(--space-3);
	border-radius: var(--radius-full);
	background-color: var(--color-success-light);
	color: var(--color-success);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
}

.mnt-plan-text {
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: var(--color-gray-700);
	margin: 0 0 var(--space-6);
}

.mnt-plan-features {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.mnt-plan-features li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--color-gray-700);
}

.mnt-plan-features .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
}

.mnt-plan-features .sw-icon svg {
	width: 18px;
	height: 18px;
}

/* `margin-top: auto` alinea el cierre al pie de las tres tarjetas, que tienen
   listas de features de distinta longitud (5, 6 y 8 puntos). */
.mnt-plan-when {
	margin: auto 0 var(--space-6);
	padding-top: var(--space-6);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-500);
}

.mnt-plan-when::before {
	content: "";
	display: block;
	width: var(--space-8);
	margin-bottom: var(--space-3);
	border-top: 2px solid var(--color-primary);
}

.mnt-plan-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.mnt-plan-detail {
	font-size: var(--font-size-sm);
}

.mnt-plans-note {
	margin: var(--space-10) 0 0;
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ─── 40.4 Comparativa (tabla compartida con /urgencias/) ───────────────── */

.section-mnt-compare .plan-comparison-wrap {
	margin-bottom: 0;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	background: var(--color-white);
}

/* El aviso de deslizar solo aparece donde la tabla desborda de verdad. */
.mnt-compare-hint {
	display: none;
}

.mnt-compare-hint .sw-icon svg {
	width: 16px;
	height: 16px;
}

/* ─── 40.5 Cómo trabajamos un plan (sección oscura) ─────────────────────── */

.section-mnt-process {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 58%, var(--color-darker) 100%);
	color: var(--color-white);
}

.section-mnt-process .container {
	position: relative;
	z-index: 1;
}

.mnt-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8);
}

.mnt-step {
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255,255,255,.16);
}

.mnt-step-number {
	display: block;
	margin-bottom: var(--space-4);
	font-family: var(--font-family-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

.mnt-step-title {
	font-size: var(--font-size-md);
	color: var(--color-white);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.mnt-step-text {
	font-size: var(--font-size-base);
	color: rgba(255,255,255,.7);
	line-height: var(--line-height-base);
	margin: 0;
}

/* ─── 40.6 Puente a los servicios puntuales ─────────────────────────────── */

.mnt-urgent {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: var(--space-16);
	align-items: start;
}

.mnt-urgent-intro .home-section-title {
	max-width: 22ch;
}

.mnt-services {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mnt-service {
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-gray-300);
}

.mnt-service:last-child {
	border-bottom: 1px solid var(--color-gray-300);
}

.mnt-service-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	color: var(--color-dark);
}

.mnt-service-link:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.mnt-service-name,
.mnt-service-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
}

.mnt-service-price {
	color: var(--color-primary-dark);
	white-space: nowrap;
}

.mnt-service-text {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-gray-700);
}

/* ─── 40.7 CTA final oscuro ─────────────────────────────────────────────── */

.section-mnt-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background-color: var(--color-darker);
	background-image: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
	color: var(--color-white);
	text-align: center;
}

.mnt-cta-mark {
	position: absolute;
	left: 1.5rem;
	bottom: -2.5rem;
	width: 13rem;
	height: auto;
	opacity: .1;
	pointer-events: none;
}

.section-mnt-cta .container {
	position: relative;
	z-index: 1;
}

.mnt-cta-inner {
	max-width: 46rem;
	margin-inline: auto;
}

.mnt-cta-title {
	max-width: none;
	margin-inline: auto;
}

.mnt-cta-text {
	max-width: 48ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.mnt-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.mnt-cta-services {
	margin: var(--space-10) 0 0;
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* ─── 40.8 Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.mnt-hero {
		padding: var(--space-20) 0;
	}

	.mnt-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.mnt-hero-title,
	.mnt-hero-lead {
		max-width: none;
	}

	.section-mnt-intro {
		padding: var(--space-20) 0;
	}

	.mnt-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	/* Los tres planes siguen en fila (con dos columnas quedaría una tarjeta
	   huérfana): lo que se reduce es el aire interior. */
	.mnt-plans-grid {
		gap: var(--space-5);
	}

	.mnt-plan {
		padding: var(--space-6);
	}

	.mnt-plan-title {
		font-size: var(--font-size-lg);
	}

	.mnt-plan-amount {
		font-size: var(--font-size-2xl);
	}

	.mnt-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-8);
	}

	.mnt-urgent {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}
}

@media (max-width: 768px) {
	.mnt-hero {
		padding: var(--space-16) 0 var(--space-20);
	}

	.mnt-hero-actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-10);
	}

	.mnt-hero-actions .btn {
		width: 100%;
	}

	.mnt-picker {
		padding: var(--space-6);
	}

	/* Con el icono, las tres columnas parten el nombre del plan en dos líneas
	   en pantallas de 320-360px. */
	.mnt-picker-icon {
		display: none;
	}

	.mnt-picker-item {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.mnt-intro-text {
		font-size: var(--font-size-md);
	}

	.mnt-intro-claim {
		font-size: var(--font-size-lg);
	}

	.mnt-plans-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mnt-plan-title {
		font-size: var(--font-size-xl);
	}

	.mnt-plan-amount {
		font-size: var(--font-size-3xl);
	}

	.mnt-compare-hint {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		justify-content: flex-end;
		margin: 0 0 var(--space-3);
		font-size: var(--font-size-xs);
		color: var(--color-gray-500);
	}

	.mnt-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.mnt-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.mnt-cta-actions .btn {
		width: 100%;
	}

	.mnt-cta-mark {
		width: 9rem;
	}
}

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

	.mnt-plan:hover {
		transform: none;
	}

	.mnt-picker-plan:hover .sw-icon svg {
		transform: none;
	}
}

/* ==========================================================================
   41. FICHAS DE PLAN MENSUAL – REDISEÑO EDITORIAL
   template-parts/plan-page.php, compartido por las tres fichas
   (/mantenimiento-esencial/, /mantenimiento-activo/, /mantenimiento-ecommerce/).

   Reutiliza las primitivas de la portada (§37.1), las estadísticas del hero
   (.home-hero-stats*) y el titular de sección de las fichas de servicio
   (.svc-section-title, §39.1), que resuelve el mismo problema aquí: cabeceras
   a dos columnas con más texto del que cabe en los 18ch de la portada.

   Ritmo de fondos: oscuro → blanco → gris → oscuro → blanco → (editor) →
   gris → blanco → blanco → gris → banner analyzer → oscuro.
   ========================================================================== */

/* ─── 41.1 Hero oscuro con panel de cuota mensual ───────────────────────── */

.pln-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-24) 0;
	background-color: var(--color-darker);
	background-image:
		radial-gradient(ellipse 58% 52% at 80% 42%, rgba(18,46,96,.32) 0%, rgba(5,8,15,0) 70%),
		radial-gradient(ellipse 62% 58% at 5% 8%, rgba(18,46,96,.42) 0%, rgba(5,8,15,0) 68%),
		linear-gradient(180deg, #070b16 0%, #03060d 100%);
	color: var(--color-white);
}

.pln-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.pln-hero-glow--one {
	top: -24%;
	left: -12%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(230,36,63,.2) 0%, rgba(230,36,63,0) 68%);
}

.pln-hero-glow--two {
	bottom: -32%;
	right: -8%;
	width: 44rem;
	height: 44rem;
	background: radial-gradient(circle, rgba(15,43,91,.5) 0%, rgba(15,43,91,0) 70%);
}

.pln-hero .container {
	position: relative;
}

.pln-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: var(--space-16);
	align-items: center;
}

.pln-hero-title {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.pln-hero-title span {
	display: block;
	color: var(--color-accent);
}

.pln-hero-lead {
	font-size: var(--font-size-md);
	line-height: 1.65;
	color: rgba(255,255,255,.74);
	margin: 0 0 var(--space-8);
	max-width: 50ch;
}

.pln-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

/* Panel informativo, sin botón: el CTA primario es el de la columna de texto
   (mismo criterio que .svc-panel en las fichas de servicio). */
.pln-panel {
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px rgba(3,6,13,.5);
}

.pln-panel-label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pln-panel-title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	margin: 0 0 var(--space-4);
}

.pln-panel-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	font-family: var(--font-family-display);
	letter-spacing: -0.03em;
	color: var(--color-white);
}

.pln-panel-amount {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

.pln-panel-currency {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.pln-panel-period {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	color: rgba(255,255,255,.7);
}

.pln-panel-vat {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}

.pln-panel-tag {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-3) 0;
	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);
	font-family: var(--font-family-display);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

.pln-panel-tag .sw-icon {
	color: var(--color-accent);
}

.pln-panel-tag .sw-icon svg {
	width: 20px;
	height: 20px;
}

.pln-panel-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pln-panel-features li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: rgba(255,255,255,.78);
}

.pln-panel-features .sw-icon {
	flex-shrink: 0;
	color: var(--color-accent);
}

.pln-panel-features .sw-icon svg {
	width: 18px;
	height: 18px;
}

.pln-panel-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: rgba(255,255,255,.6);
}

/* ─── 41.2 ¿Es tu caso? (encaje del plan) ───────────────────────────────── */

/* Cabecera centrada y rejilla a todo el ancho: son 6 encajes con título y
   texto, y en una columna lateral quedarían demasiado estrechos. */
.pln-fit-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6) var(--space-12);
}

.pln-fit-item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--color-gray-200);
}

/* La icona s'alinea amb la primera línia del títol, no amb el centre del bloc:
   amb align-items del grid quedava flotant entre títol i text. */
.pln-fit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--font-size-md) * var(--line-height-snug));
	color: var(--color-success);
}

.pln-fit-icon svg {
	width: 22px;
	height: 22px;
}

.pln-fit-title {
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-2);
}

.pln-fit-text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-gray-700);
}

.pln-fit-closing {
	max-width: 46ch;
	margin: var(--space-12) 0 0;
	padding-top: var(--space-5);
	border-top: 2px solid var(--color-primary);
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-dark);
}

/* ─── 41.3 Qué incluye cada mes ─────────────────────────────────────────── */

.pln-includes {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.pln-includes-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pln-includes-list li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-size: var(--font-size-md);
	line-height: 1.5;
	color: var(--color-gray-900);
}

.pln-includes-list li + li {
	border-top: 1px solid var(--color-gray-300);
}

.pln-includes-list .sw-icon {
	flex-shrink: 0;
	color: var(--color-success);
}

.pln-includes-list .sw-icon svg {
	width: 20px;
	height: 20px;
}

/* Caja lateral: matiza el alcance («qué significa el soporte básico»,
   «qué revisamos en tu tienda»), que es donde se juegan las expectativas. */
.pln-detail {
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	box-shadow: var(--shadow-sm);
}

.pln-detail-title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-3);
}

.pln-detail-text {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-gray-700);
}

.pln-detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pln-detail-list li {
	position: relative;
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-700);
}

.pln-detail-list li::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0;
	width: 10px;
	border-top: 2px solid var(--color-primary);
}

.pln-detail-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-500);
}

.pln-includes-note {
	margin: var(--space-10) auto 0;
	max-width: 62ch;
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

/* ─── 41.4 Qué evitas / qué añade (sección oscura) ──────────────────────── */

.section-pln-value {
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-image: linear-gradient(160deg, var(--color-dark) 0%, var(--color-navy-end) 58%, var(--color-darker) 100%);
	color: var(--color-white);
}

.section-pln-value .container {
	position: relative;
	z-index: 1;
}

.pln-value-layout {
	display: grid;
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
}

.pln-value-head .home-section-title {
	max-width: 20ch;
}

.pln-value-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pln-value-list li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-size: var(--font-size-md);
	line-height: 1.55;
	color: rgba(255,255,255,.82);
}

.pln-value-list li + li {
	border-top: 1px solid rgba(255,255,255,.14);
}

.pln-value-marker {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-bold);
	line-height: inherit;
}

/* Cruz gris (lo que dejas de sufrir) frente a suma en acento (lo que añade el
   plan superior): el mismo listado sirve para los dos argumentos. */
.pln-value-list--cross .pln-value-marker {
	color: rgba(255,255,255,.4);
}

.pln-value-list--plus .pln-value-marker {
	color: var(--color-accent);
}

.pln-value-closing {
	margin: var(--space-8) 0 0;
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-accent);
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	color: var(--color-white);
	max-width: 48ch;
}

/* ─── 41.5 Qué no incluye ───────────────────────────────────────────────── */

.pln-limits,
.pln-siblings,
.pln-steps-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--space-12) var(--space-16);
	align-items: start;
}

.pln-limits-head .home-section-lead:last-child {
	margin-bottom: 0;
}

.pln-limits-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pln-limits-list li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-gray-700);
}

.pln-limits-list li span {
	flex-shrink: 0;
	color: var(--color-gray-400);
	font-weight: var(--font-weight-bold);
}

.pln-limits-note {
	margin: var(--space-6) 0 0;
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-gray-100);
	border-left: 3px solid var(--color-primary);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-gray-700);
}

/* ─── 41.6 Zona editable con Gutenberg ──────────────────────────────────── */

/* Solo se pinta si la página tiene contenido en el editor, así que el ritmo de
   fondos de la ficha no depende de ella. */
.section-pln-editor {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

/* ─── 41.7 Los tres planes (dónde estás) ────────────────────────────────── */

.pln-siblings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.pln-sibling-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	color: var(--color-dark);
	transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

a.pln-sibling-row:hover {
	transform: translateY(-2px);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	text-decoration: none;
	color: var(--color-dark);
}

/* El plan de la ficha se marca, pero no enlaza a sí mismo. */
.pln-sibling-row--current {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

.pln-sibling-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pln-sibling-badge {
	align-self: flex-start;
	margin-bottom: var(--space-2);
	padding: 0.15rem var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pln-sibling-name {
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
}

.pln-sibling-text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	color: var(--color-gray-700);
}

.pln-sibling-price {
	font-family: var(--font-family-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-primary-dark);
	white-space: nowrap;
}

/* ─── 41.8 Qué pasa después de solicitarlo (timeline claro) ─────────────── */

/* Vertical y no rejilla: son 5 pasos y una rejilla de 4 o 3 columnas dejaría
   huérfanos (mismo criterio que .svc-flow, pero sobre fondo claro). */
.pln-flow {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pln-flow-step {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-6) 0;
}

.pln-flow-step + .pln-flow-step {
	border-top: 1px solid var(--color-gray-300);
}

.pln-flow-step:first-child {
	padding-top: 0;
}

.pln-flow-number {
	font-family: var(--font-family-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.pln-flow-title {
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-2);
}

.pln-flow-text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-gray-700);
}

/* ─── 41.9 CTA final oscuro ─────────────────────────────────────────────── */

.section-pln-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	background-color: var(--color-darker);
	background-image: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
	color: var(--color-white);
	text-align: center;
}

.pln-cta-mark {
	position: absolute;
	left: 1.5rem;
	bottom: -2.5rem;
	width: 13rem;
	height: auto;
	opacity: .1;
	pointer-events: none;
}

.section-pln-cta .container {
	position: relative;
	z-index: 1;
}

.pln-cta-inner {
	max-width: 46rem;
	margin-inline: auto;
}

.pln-cta-title {
	max-width: none;
	margin-inline: auto;
}

.pln-cta-text {
	max-width: 48ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.pln-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.pln-cta-services {
	margin: var(--space-10) 0 0;
	font-family: var(--font-family-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* ─── 41.10 Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.pln-hero {
		padding: var(--space-20) 0;
	}

	.pln-hero-grid,
	.pln-includes,
	.pln-limits,
	.pln-siblings,
	.pln-steps-layout,
	.pln-value-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.pln-hero-title,
	.pln-hero-lead,
	.pln-value-head .home-section-title {
		max-width: none;
	}

	.pln-fit-grid {
		gap: var(--space-4) var(--space-10);
	}
}

@media (max-width: 768px) {
	.pln-hero {
		padding: var(--space-16) 0 var(--space-20);
	}

	.pln-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pln-hero-actions .btn {
		width: 100%;
	}

	.pln-panel {
		padding: var(--space-6);
	}

	.pln-panel-amount {
		font-size: var(--font-size-3xl);
	}

	.pln-fit-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.pln-includes-list li {
		font-size: var(--font-size-base);
	}

	.pln-detail {
		padding: var(--space-6);
	}

	.pln-value-list li {
		font-size: var(--font-size-base);
	}

	/* Sin esto la colocación automática mandaría el texto a la columna del
	   número (misma trampa que .svc-flow-step). */
	.pln-flow-step {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2);
	}

	.pln-flow-text {
		grid-column: 1;
	}

	.pln-flow-number {
		font-size: var(--font-size-lg);
	}

	.pln-sibling-row {
		padding: var(--space-4) var(--space-5);
		gap: var(--space-4);
	}

	.pln-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pln-cta-actions .btn {
		width: 100%;
	}

	.pln-cta-mark {
		width: 9rem;
	}
}

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

	a.pln-sibling-row:hover {
		transform: none;
	}
}

/* ==========================================================================
   AVISO DE CAMBIO DE MARCA (SoporteWordpress → RELEVANDIA)
   ==========================================================================
   Diálogo temporal para quien llega redirigido desde el dominio antiguo.
   Marcado en template-parts/rebrand-notice.php, lógica en main.js §10.
   Al retirar la transición se puede borrar este bloque entero.
   ========================================================================== */

.rebrand-notice {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

/* El atributo hidden no basta: display:flex lo anularía. */
.rebrand-notice[hidden] {
	display: none;
}

body.rebrand-notice-is-open {
	overflow: hidden;
}

.rebrand-notice-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 13, 26, .72);
	backdrop-filter: blur(4px);
	animation: rebrand-notice-fade .25s ease-out;
}

.rebrand-notice-dialog {
	position: relative;
	width: 100%;
	max-width: 34rem;
	max-height: calc(100vh - var(--space-8));
	overflow-y: auto;
	padding: var(--space-10) var(--space-8) var(--space-8);
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	text-align: center;
	animation: rebrand-notice-in .3s cubic-bezier(.22, 1, .36, 1);
}

.rebrand-notice-close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	color: var(--color-gray-500);
	background: none;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.rebrand-notice-close:hover {
	color: var(--color-gray-900);
	background: var(--color-gray-100);
}

.rebrand-notice-close svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Los dos logos con la flecha en medio: el antiguo apagado, el nuevo a color. */
.rebrand-notice-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.rebrand-notice-logo {
	height: 1.625rem;
	width: auto;
}

/* El logo antiguo va a todo color, sin apagar: el objetivo del aviso es que el
   visitante lo reconozca de inmediato. La lectura "antes → ahora" ya la dan la
   flecha y el titular. */

/* Respaldo tipográfico si no existe el asset del logo antiguo. */
.rebrand-notice-wordmark {
	display: inline-flex;
	align-items: center;
	height: 1.625rem;
	font-family: var(--font-family-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--color-gray-700);
	white-space: nowrap;
}

.rebrand-notice-arrow {
	color: var(--color-primary);
}

.rebrand-notice-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.rebrand-notice-eyebrow {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semi);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--color-primary-dark);
}

.rebrand-notice-title {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-tight);
}

.rebrand-notice-text {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-base);
	color: var(--color-gray-700);
}

.rebrand-notice-text--muted {
	font-size: var(--font-size-sm);
	color: var(--color-gray-500);
}

.rebrand-notice-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

@keyframes rebrand-notice-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes rebrand-notice-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 768px) {

	.rebrand-notice-dialog {
		padding: var(--space-8) var(--space-5) var(--space-6);
	}

	.rebrand-notice-logos {
		gap: var(--space-3);
	}

	.rebrand-notice-logo,
	.rebrand-notice-wordmark {
		height: 1.375rem;
	}

	.rebrand-notice-wordmark {
		font-size: var(--font-size-base);
	}

	.rebrand-notice-actions .btn {
		width: 100%;
	}
}

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

	.rebrand-notice-backdrop,
	.rebrand-notice-dialog {
		animation: none;
	}
}