/* ==========================================================================
   Carpintero Lima — styles.css
   Todos los estilos del tema. Organizado por secciones.
   Los colores y fuentes leen los presets de theme.json (editables en
   Apariencia › Editor › Estilos) con un valor de respaldo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. Variables
   -------------------------------------------------------------------------- */
:root {
	--cl-papel: var(--wp--preset--color--papel, #f4f4f1);
	--cl-blanco: var(--wp--preset--color--blanco, #ffffff);
	--cl-tinta: var(--wp--preset--color--tinta, #1b1e1b);
	--cl-texto: var(--wp--preset--color--texto, #4b504c);
	--cl-linea: var(--wp--preset--color--linea, #dfe0db);
	--cl-verde: var(--wp--preset--color--verde, #1f4a43);
	--cl-verde-oscuro: var(--wp--preset--color--verde-oscuro, #17302c);
	--cl-cobre: var(--wp--preset--color--cobre, #9b5a26);
	--cl-cobre-claro: var(--wp--preset--color--cobre-claro, #c9a27c);
	--cl-nota: var(--wp--preset--color--nota, #fcefc0);
	--cl-nota-texto: #6b4c0e;
	--cl-claro-oscuro: #cfd9d5;

	--cl-font: var(--wp--preset--font-family--archivo, "Archivo", system-ui, sans-serif);
	--cl-mono: var(--wp--preset--font-family--plex-mono, "IBM Plex Mono", ui-monospace, monospace);

	--cl-container: 1350px;
	--cl-gutter: clamp(20px, 4vw, 40px);
	--cl-section-y: clamp(72px, 8.5vw, 128px);
	--cl-radius: 12px;

	--cl-h1: clamp(2.5rem, 1.1rem + 3.7vw, 4.9rem);
	--cl-h2: clamp(2rem, 1rem + 2.2vw, 3.15rem);
}


/* --------------------------------------------------------------------------
   02. Base
   -------------------------------------------------------------------------- */
body {
	margin: 0;
	background: var(--cl-papel);
	color: var(--cl-tinta);
	font-family: var(--cl-font);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--cl-tinta);
	font-family: var(--cl-font);
	line-height: 1.12;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--cl-verde);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--cl-verde-oscuro);
}

img {
	max-width: 100%;
	height: auto;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Los enlaces del menú (#servicios, #precios…) no quedan bajo la cabecera sticky */
	scroll-padding-top: 80px;
}

/* Embeds (mapas, videos) nunca más anchos que su contenedor */
iframe,
embed,
object,
video {
	max-width: 100%;
}

/* Red de seguridad: ningún bloque puede ensanchar la página en móvil.
   "clip" (no "hidden") para no romper la cabecera sticky. */
.wp-site-blocks {
	overflow-x: clip;
}

code {
	display: inline;
	padding: 2px 7px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-radius: 4px;
	background: var(--cl-nota);
	color: var(--cl-nota-texto);
	font-family: var(--cl-mono);
	font-size: 0.82em;
	line-height: 1.55;
}

:focus-visible {
	outline: 2px solid var(--cl-cobre);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   03. Estructura: secciones y contenedor
   -------------------------------------------------------------------------- */
.cl-main .cl-section,
.cl-section {
	margin-block: 0;
	padding: var(--cl-section-y) var(--cl-gutter);
}

.cl-section.is-paper { background: var(--cl-papel); }
.cl-section.is-white { background: var(--cl-blanco); }
.cl-section.is-dark  { background: var(--cl-verde-oscuro); }

.cl-section .cl-container {
	max-width: var(--cl-container);
	margin-inline: auto;
}

.cl-section .cl-container > * {
	margin-block: 0;
}


/* --------------------------------------------------------------------------
   04. Tipografía compartida (encabezados de sección)
   -------------------------------------------------------------------------- */
.cl-section .cl-eyebrow,
.cl-section p.cl-eyebrow {
	margin: 0;
	color: var(--cl-cobre);
	font-family: var(--cl-mono);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cl-section h2 {
	margin-top: 16px;
	font-size: var(--cl-h2);
	font-weight: 760;
	font-stretch: 125%;
	line-height: 1.07;
	letter-spacing: -0.02em;
}

.cl-section .cl-lead {
	margin-top: 20px;
	color: var(--cl-texto);
	font-size: clamp(18px, 1rem + 0.25vw, 21px);
	line-height: 1.68;
}

.cl-section .cl-head {
	max-width: 820px;
}

.cl-section .cl-head-narrow {
	max-width: 640px;
}

.cl-section .cl-head > * {
	margin-block-end: 0;
}

.cl-section .cl-head > .cl-eyebrow {
	margin-top: 0;
}

.cl-section .cl-head + * {
	margin-top: clamp(40px, 4.5vw, 58px);
}


/* --------------------------------------------------------------------------
   05. Botones
   -------------------------------------------------------------------------- */
.cl-section .wp-block-buttons {
	gap: 16px;
}

.wp-block-button.cl-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 30px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-family: var(--cl-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.cl-btn-primary > .wp-block-button__link {
	background: var(--cl-verde);
	color: var(--cl-blanco);
}

.wp-block-button.cl-btn-primary > .wp-block-button__link:hover {
	background: var(--cl-verde-oscuro);
}

.wp-block-button.cl-btn-ghost > .wp-block-button__link {
	background: transparent;
	border-color: var(--cl-linea);
	color: var(--cl-tinta);
}

.wp-block-button.cl-btn-ghost > .wp-block-button__link:hover {
	border-color: var(--cl-tinta);
}

.wp-block-button.cl-btn-light > .wp-block-button__link {
	background: #eef2ef;
	color: var(--cl-verde-oscuro);
}

.wp-block-button.cl-btn-light > .wp-block-button__link:hover {
	background: var(--cl-blanco);
}

.wp-block-button.cl-btn-white > .wp-block-button__link {
	background: var(--cl-blanco);
	color: var(--cl-verde);
}

.wp-block-button.cl-btn-white > .wp-block-button__link:hover {
	background: #eef2ef;
}

.wp-block-button.cl-btn-block {
	width: 100%;
}

.wp-block-button.cl-btn-block > .wp-block-button__link {
	width: 100%;
}

/* Icono de WhatsApp (máscara SVG del tema) */
.wp-block-button.cl-btn-wa > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/whatsapp.svg") center / contain no-repeat;
	mask: url("assets/icons/whatsapp.svg") center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   06. Cabecera
   -------------------------------------------------------------------------- */
.cl-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .cl-site-header {
	top: 32px;
}

.cl-header {
	padding: 15px var(--cl-gutter);
	background: var(--cl-papel);
	border-bottom: 1px solid var(--cl-linea);
}

.cl-header .cl-header-inner {
	max-width: var(--cl-container);
	margin-inline: auto;
	align-items: center;
	gap: 24px;
}

.cl-header .cl-brand > * {
	margin: 0;
}

.cl-header .cl-brand-logo {
	flex-shrink: 0;
	line-height: 0;
}

.cl-header .cl-brand-logo img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.cl-header .cl-brand-logo img {
		width: 150px;
	}
}

.cl-header .cl-brand-name {
	font-size: 22px;
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.cl-header .cl-brand-name a {
	color: var(--cl-tinta);
	text-decoration: none;
}

.cl-header .cl-brand-tag {
	margin-top: 3px;
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cl-header .cl-header-nav {
	align-items: center;
	gap: 32px;
}

.cl-header .cl-nav,
.cl-header .cl-nav .wp-block-navigation__container {
	gap: 33px;
	font-size: 18px;
}

.cl-header .cl-nav a {
	color: var(--cl-tinta);
	text-decoration: none;
}

.cl-header .cl-nav a:hover {
	color: var(--cl-verde);
}

.cl-header .wp-block-button.cl-btn > .wp-block-button__link {
	padding: 13px 22px;
	font-size: 18px;
}

/* Botón hamburguesa: área táctil de 44px */
.cl-header .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin: -10px -10px -10px 0;
	color: var(--cl-tinta);
}

.cl-header .wp-block-navigation__responsive-container-open svg {
	width: 26px;
	height: 26px;
}

/* Enlace "Cotizar" dentro del menú: solo en móvil (en escritorio ya
   está el botón de la cabecera) */
@media (min-width: 1024px) {
	.cl-header .cl-nav .cl-nav-cta {
		display: none;
	}
}

/* Tablet (600–1023px): los 5 enlaces + logo + botón no caben en una fila
   y el menú se partía en dos líneas. Se usa la hamburguesa también aquí
   (core solo la muestra por debajo de 600px). */
@media (min-width: 600px) and (max-width: 1023px) {
	.cl-header .cl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cl-header .cl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Overlay del menú móvil.
   Core calcula su padding con var(--wp--style--root--padding-*), que este
   tema no define: la declaración queda inválida y el padding cae a 0.
   Se fija aquí con el gutter del tema y se alinea a la izquierda. */
.cl-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: 16px var(--cl-gutter) 32px;
	background-color: var(--cl-papel);
	color: var(--cl-tinta);
}

/* Core fija fondo blanco y texto negro con :not(.has-background) */
.cl-header .cl-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cl-papel);
	color: var(--cl-tinta);
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	padding: 10px;
	color: var(--cl-tinta);
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 64px;
}

.cl-header .cl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
	gap: 0;
	font-size: 22px;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--cl-linea);
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 0;
	font-weight: 600;
	line-height: 1.3;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .cl-nav-cta {
	margin-top: 28px;
	border-bottom: 0;
}

.cl-header .cl-nav .wp-block-navigation__responsive-container.is-menu-open .cl-nav-cta .wp-block-navigation-item__content {
	padding: 16px 22px;
	border-radius: 7px;
	background: var(--cl-verde);
	color: var(--cl-blanco);
	text-align: center;
}


/* --------------------------------------------------------------------------
   07. Portada (hero)
   -------------------------------------------------------------------------- */
.cl-section.cl-hero {
	padding-top: clamp(56px, 7vw, 104px);
	padding-bottom: 0;
}

.cl-hero .wp-block-columns.cl-hero-cols {
	align-items: center;
	gap: clamp(32px, 5vw, 76px);
	margin: 0;
}

.cl-hero .cl-hero-cols > .wp-block-column.cl-hero-text {
	flex: 1.4 1 0;
}

.cl-hero .cl-hero-cols > .wp-block-column.cl-hero-media {
	flex: 1 1 0;
	position: relative;
}

.cl-hero .cl-hero-text > * {
	margin-block-end: 0;
}

.cl-hero h1.cl-hero-title {
	max-width: 8.9em;
	margin-top: 26px;
	font-size: var(--cl-h1);
	font-weight: 780;
	font-stretch: 125%;
	line-height: 1.03;
	letter-spacing: -0.025em;
	text-wrap: wrap;
}

.cl-hero .cl-hero-lead {
	max-width: 740px;
	margin-top: 40px;
	color: var(--cl-texto);
	font-size: clamp(18px, 1rem + 0.3vw, 21px);
	line-height: 1.75;
}

.cl-hero .cl-checks {
	margin-top: 30px;
}

.cl-hero .cl-hero-actions {
	margin-top: 40px;
}

/* Lista con checks (portada y tarjeta de contacto) */
.cl-section .cl-checks {
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.cl-section .cl-checks li {
	position: relative;
	padding-left: 42px;
	font-size: 20px;
	line-height: 1.55;
}

.cl-section .cl-checks li + li {
	margin-top: 12px;
}

.cl-section .cl-checks li::before {
	content: "";
	position: absolute;
	top: 0.32em;
	left: 4px;
	width: 17px;
	height: 8px;
	border-left: 2.5px solid var(--cl-verde);
	border-bottom: 2.5px solid var(--cl-verde);
	transform: rotate(-45deg);
}

/* Imagen y sello de garantía */
.cl-hero .cl-ph-hero img {
	aspect-ratio: 4 / 5;
}

.cl-hero .cl-hero-badge {
	position: absolute;
	left: -22px;
	bottom: 34px;
	max-width: 275px;
	margin: 0;
	padding: 20px 24px 22px;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: var(--cl-radius);
	box-shadow: 0 18px 40px rgba(27, 30, 27, 0.1);
}

.cl-hero .cl-hero-badge > * {
	margin: 0;
}

.cl-hero .cl-hero-badge-num {
	color: var(--cl-verde);
	font-size: 34px;
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
}

.cl-hero .cl-hero-badge .cl-hero-badge-text {
	margin-top: 8px;
	color: var(--cl-texto);
	font-size: 16.5px;
	line-height: 1.45;
}

/* Cifras */
.cl-hero .cl-stats {
	margin-top: clamp(56px, 6vw, 80px);
	gap: 0;
	border-top: 1px solid var(--cl-linea);
}

.cl-hero .cl-stat {
	padding: 26px 24px 32px 25px;
	border-left: 1px solid var(--cl-linea);
}

.cl-hero .cl-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.cl-hero .cl-stat > * {
	margin: 0;
}

.cl-hero .cl-stat-num {
	font-size: clamp(40px, 2rem + 1.2vw, 52px);
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
}

.cl-hero .cl-stat .cl-stat-label {
	margin-top: 14px;
	color: var(--cl-texto);
	font-size: 18px;
	line-height: 1.45;
}

/* Regla de carpintero */
.cl-section .wp-block-separator.cl-ruler {
	width: 100%;
	max-width: none;
	height: 22px;
	margin: 0;
	border: 0;
	opacity: 1;
	background-color: transparent;
	background-image:
		repeating-linear-gradient(to right, var(--cl-cobre-claro) 0 1px, transparent 1px 75px),
		repeating-linear-gradient(to right, var(--cl-cobre-claro) 0 1px, transparent 1px 37.5px),
		repeating-linear-gradient(to right, var(--cl-cobre-claro) 0 1px, transparent 1px 7.5px);
	background-size: 100% 22px, 100% 13px, 100% 7px;
	background-position: left bottom;
	background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   08. Imágenes de relleno (placeholders con etiqueta)
   -------------------------------------------------------------------------- */
.cl-section .wp-block-image.cl-ph {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--cl-radius);
}

.cl-section .wp-block-image.cl-ph img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--cl-radius);
}

.cl-section .wp-block-image.cl-ph figcaption {
	position: absolute;
	top: 18px;
	left: 18px;
	margin: 0;
	padding: 6px 13px;
	background: var(--cl-blanco);
	border-radius: 6px;
	color: #4a4d4a;
	font-family: var(--cl-mono);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	white-space: nowrap;
	max-width: calc(100% - 36px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.cl-section .wp-block-image.cl-ph-bottom figcaption {
	top: auto;
	bottom: 18px;
}

.cl-section .wp-block-image.cl-ph-map {
	border: 1px dashed var(--cl-linea);
}

.cl-section .wp-block-image.cl-ph-map img {
	aspect-ratio: 640 / 510;
}

.cl-section .wp-block-image.cl-ph-map figcaption {
	top: 50%;
	left: 50%;
	padding: 10px 18px;
	max-width: none;
	transform: translate(-50%, -50%);
	text-align: center;
}


/* --------------------------------------------------------------------------
   09. Servicios (tarjetas)
   -------------------------------------------------------------------------- */
.cl-section .cl-grid-3 {
	gap: 24px;
}

.cl-section .cl-grid-3 > *,
.cl-section .cl-steps > *,
.cl-section .cl-trust > *,
.cl-hero .cl-stats > * {
	margin: 0;
}

.cl-section .cl-card {
	display: flex;
	flex-direction: column;
	padding: 40px 34px 38px;
	background: var(--cl-papel);
	border: 1px solid var(--cl-linea);
	border-radius: var(--cl-radius);
}

.cl-section .cl-card > * {
	margin: 0;
}

.cl-section .cl-card h3 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.cl-section .cl-card .cl-card-meta {
	margin-top: 18px;
	padding-bottom: 18px;
	border-bottom: 1px dashed var(--cl-linea);
	color: var(--cl-cobre);
	font-family: var(--cl-mono);
	font-size: 15px;
	line-height: 1.7;
}

.cl-section .cl-card > p:not(.cl-card-meta):not(.cl-card-link),
.cl-section .cl-card > ul {
	margin-top: 24px;
	color: var(--cl-texto);
	font-size: 18px;
	line-height: 1.75;
}

.cl-section .cl-card > ul {
	padding-left: 22px;
}

.cl-section .cl-card li + li {
	margin-top: 6px;
}

.cl-section .cl-card strong {
	color: var(--cl-tinta);
	font-weight: 600;
}

.cl-section .cl-card .cl-card-link {
	margin-top: auto;
	padding-top: 36px;
	font-size: 18px;
	font-weight: 600;
}

.cl-section .cl-card .cl-card-link a {
	color: var(--cl-verde);
	text-decoration: none;
}

.cl-section .cl-card .cl-card-link a:hover {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   10. Confianza
   -------------------------------------------------------------------------- */
.cl-section .cl-trust {
	gap: 0;
	border-top: 1px solid var(--cl-linea);
}

.cl-section .cl-trust-item {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 38px;
	margin: 0;
	padding: 40px 40px 44px 0;
	border-bottom: 1px solid var(--cl-linea);
}

.cl-section .cl-trust-item:nth-child(even) {
	padding-left: 40px;
	padding-right: 0;
	border-left: 1px solid var(--cl-linea);
}

.cl-section .wp-block-image.cl-icon {
	flex: none;
	width: 38px;
	margin: 2px 0 0;
}

.cl-section .wp-block-image.cl-icon img {
	display: block;
	width: 38px;
	height: 38px;
}

.cl-section .cl-trust-body {
	flex: 1 1 0;
	min-width: 0;
}

.cl-section .cl-trust-body > * {
	margin: 0;
}

.cl-section .cl-trust-body h3 {
	font-size: clamp(20px, 1rem + 0.4vw, 24px);
	font-weight: 600;
	line-height: 1.25;
}

.cl-section .cl-trust-body p {
	margin-top: 12px;
	color: var(--cl-texto);
	font-size: 19px;
	line-height: 1.8;
}


/* --------------------------------------------------------------------------
   11. Proceso
   -------------------------------------------------------------------------- */
.cl-section .cl-steps {
	gap: 24px;
}

.cl-section .cl-step {
	padding-top: 26px;
	border-top: 3px solid var(--cl-verde);
}

.cl-section .cl-step > * {
	margin: 0;
}

.cl-section .cl-step .cl-step-num {
	color: var(--cl-cobre);
	font-family: var(--cl-mono);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.cl-section .cl-step h3 {
	margin-top: 16px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.18;
}

.cl-section .cl-step p:not(.cl-step-num) {
	margin-top: 14px;
	color: var(--cl-texto);
	font-size: 17.5px;
	line-height: 1.75;
}


/* --------------------------------------------------------------------------
   12. Trabajos (proyectos)
   -------------------------------------------------------------------------- */
.cl-section .cl-project > * {
	margin: 0;
}

.cl-section .cl-project .cl-ph img {
	aspect-ratio: 4 / 3;
}

.cl-section .cl-project h3 {
	margin-top: 22px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.cl-section .cl-project .cl-project-meta {
	margin-top: 10px;
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 15px;
	line-height: 1.5;
}

.cl-section .cl-container > .cl-center-actions {
	margin-top: 44px;
}


/* --------------------------------------------------------------------------
   13. Distritos
   -------------------------------------------------------------------------- */
.cl-section .wp-block-columns.cl-districts-cols {
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
	margin: 0;
}

.cl-section .cl-districts-text > * {
	margin-block-end: 0;
}

.cl-section .cl-districts-text h2 {
	margin-top: 16px;
}

/* Las dos listas (Lima y sur) se muestran como una sola fila de etiquetas */
.cl-section .cl-chips-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 32px;
}

.cl-section .cl-chips-wrap > .cl-chips {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-section .cl-chips li {
	margin: 0;
	padding: 13px 20px;
	border: 1px solid var(--cl-linea);
	border-radius: 999px;
	color: var(--cl-tinta);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

.cl-section .cl-chips.is-sur li {
	border-color: var(--cl-cobre);
	color: var(--cl-cobre);
}

/* Mapa de Google embebido (bloque HTML con width="600" fijo) */
.cl-section .cl-districts-map > * {
	margin: 0;
}

.cl-section .cl-districts-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--cl-radius);
	background-color: var(--cl-linea);
}


/* --------------------------------------------------------------------------
   14. Precios
   -------------------------------------------------------------------------- */
.cl-section .wp-block-columns.cl-price-cols {
	align-items: flex-start;
	gap: clamp(32px, 5vw, 70px);
}

.cl-section .cl-price-cols > .wp-block-column.cl-price-main {
	flex: 1.72 1 0;
}

.cl-section .cl-price-cols > .wp-block-column.cl-price-side {
	flex: 1 1 0;
}

.cl-section .wp-block-table.cl-price-table {
	margin: 0;
}

.cl-section .cl-price-table table {
	width: 100%;
	border-collapse: collapse;
}

.cl-section .cl-price-table td {
	padding: 30px 0 32px;
	border: 0;
	border-top: 1px solid var(--cl-linea);
	color: var(--cl-texto);
	font-size: 20px;
	line-height: 1.7;
	vertical-align: top;
}

.cl-section .cl-price-table tr:last-child td {
	border-bottom: 1px solid var(--cl-linea);
}

.cl-section .cl-price-table td:first-child {
	width: 26%;
	padding-right: 24px;
	color: var(--cl-tinta);
	font-size: 21px;
}

.cl-section .cl-price-table strong {
	font-weight: 600;
}

.cl-section .cl-price-aside {
	padding: 40px 35px 36px;
	background: var(--cl-verde);
	border-radius: 14px;
	color: #e4ebe8;
}

.cl-section .cl-price-aside > * {
	margin: 0;
}

.cl-section .cl-price-aside h3 {
	color: var(--cl-blanco);
	font-size: 24px;
	font-weight: 600;
}

.cl-section .cl-price-aside p {
	margin-top: 16px;
	color: #e4ebe8;
	font-size: 19px;
	line-height: 1.8;
}

.cl-section .cl-price-aside .cl-aside-actions {
	margin-top: 26px;
}

.cl-section .cl-price-aside .cl-price-note {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.85;
}


/* --------------------------------------------------------------------------
   15. Opiniones
   -------------------------------------------------------------------------- */
.cl-section .cl-review {
	padding: 36px 30px 32px;
	background: var(--cl-papel);
	border: 1px dashed #d6d7d1;
	border-radius: var(--cl-radius);
}

.cl-section .cl-review > * {
	margin: 0;
}

.cl-section .cl-review .cl-stars {
	color: var(--cl-cobre);
	font-size: 17px;
	letter-spacing: 0.15em;
	line-height: 1;
}

.cl-section .cl-review .cl-quote {
	margin-top: 22px;
	color: var(--cl-texto);
	font-size: 20px;
	font-style: italic;
	line-height: 1.7;
}

.cl-section .cl-review .cl-review-name {
	margin-top: 18px;
	color: var(--cl-tinta);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.cl-section .cl-review .cl-review-meta {
	margin-top: 4px;
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 15px;
	line-height: 1.5;
}


/* --------------------------------------------------------------------------
   16. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.cl-section .cl-faq-list {
	max-width: 1075px;
}

.cl-section .cl-faq-list > * {
	margin: 0;
}

.cl-section .cl-faq-list > * + * {
	margin-top: 16px;
}

.cl-section .wp-block-details.cl-faq {
	padding: 0;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: 10px;
	transition: border-color 0.2s ease;
}

.cl-section .wp-block-details.cl-faq[open] {
	border-color: var(--cl-tinta);
}

.cl-section .cl-faq summary {
	position: relative;
	padding: 25px 72px 25px 28px;
	color: var(--cl-tinta);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.cl-section .cl-faq summary::-webkit-details-marker {
	display: none;
}

.cl-section .cl-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 28px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background:
		linear-gradient(var(--cl-verde), var(--cl-verde)) center / 18px 2px no-repeat,
		linear-gradient(var(--cl-verde), var(--cl-verde)) center / 2px 18px no-repeat;
	transition: transform 0.2s ease;
}

.cl-section .cl-faq[open] summary::after {
	transform: rotate(45deg);
}

.cl-section .cl-faq > p {
	max-width: 840px;
	margin: 0;
	padding: 0 28px 30px;
	color: var(--cl-texto);
	font-size: 19px;
	line-height: 1.8;
}


/* --------------------------------------------------------------------------
   17. Contacto
   -------------------------------------------------------------------------- */
.cl-section.is-dark .cl-eyebrow {
	color: var(--cl-cobre-claro);
}

.cl-section.is-dark h2 {
	color: var(--cl-blanco);
}

.cl-section.is-dark .cl-lead {
	max-width: 620px;
	color: var(--cl-claro-oscuro);
}

.cl-section .wp-block-columns.cl-contact-cols {
	align-items: flex-start;
	gap: clamp(32px, 6vw, 100px);
	margin: 0;
}

.cl-section .cl-contact-text > * {
	margin-block-end: 0;
}

.cl-section .cl-contact-text h2 {
	max-width: 13em;
}

.cl-section .cl-contact-actions {
	margin-top: 34px;
}

.cl-section .cl-contact-info {
	margin-top: 38px;
}

.cl-section .cl-contact-info > * {
	margin: 0;
}

.cl-section .cl-contact-info .cl-contact-label {
	margin-top: 24px;
	color: #9fb2ab;
	font-family: var(--cl-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cl-section .cl-contact-info .cl-contact-label:first-child {
	margin-top: 0;
}

.cl-section .cl-contact-info .cl-contact-value {
	margin-top: 8px;
	color: var(--cl-blanco);
	font-size: 20px;
	line-height: 1.4;
}

.cl-section .cl-quote-card {
	padding: clamp(28px, 3vw, 40px);
	background: var(--cl-blanco);
	border-radius: 14px;
	color: var(--cl-tinta);
}

.cl-section .cl-quote-card > * {
	margin: 0;
}

.cl-section .cl-quote-card h3 {
	font-size: 24px;
	font-weight: 600;
}

.cl-section .cl-quote-card > p {
	margin-top: 14px;
	color: var(--cl-texto);
	font-size: 18px;
	line-height: 1.6;
}

.cl-section .cl-quote-card .cl-checks {
	margin-top: 22px;
	padding: 6px 22px;
	background: var(--cl-papel);
	border: 1px solid var(--cl-linea);
	border-radius: 8px;
}

.cl-section .cl-quote-card .cl-checks li {
	margin: 0;
	padding: 14px 0 14px 34px;
	color: var(--cl-texto);
	font-size: 17px;
}

.cl-section .cl-quote-card .cl-checks li + li {
	border-top: 1px solid var(--cl-linea);
}

.cl-section .cl-quote-card .cl-checks li::before {
	top: calc(14px + 0.32em);
	left: 2px;
	width: 14px;
	height: 7px;
	border-width: 2px;
}

.cl-section .cl-quote-card .cl-checks strong {
	color: var(--cl-tinta);
	font-weight: 600;
}

.cl-section .cl-quote-card .cl-card-actions {
	margin-top: 22px;
}

.cl-section .cl-quote-card .cl-form-note {
	margin-top: 20px;
	color: var(--cl-texto);
	font-size: 16px;
}


/* --------------------------------------------------------------------------
   18. Pie de página
   -------------------------------------------------------------------------- */
.cl-footer {
	padding: 0 var(--cl-gutter);
	background: var(--cl-verde-oscuro);
}

.cl-footer .cl-footer-inner {
	max-width: var(--cl-container);
	margin-inline: auto;
	padding: 44px 0 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	gap: 12px 40px;
}

.cl-footer p {
	margin: 0;
	color: #c5d0cc;
	font-size: 17px;
	line-height: 1.5;
}


/* --------------------------------------------------------------------------
   19. Páginas internas, blog y 404
   -------------------------------------------------------------------------- */
.cl-page {
	padding: clamp(56px, 7vw, 96px) var(--cl-gutter);
}

.cl-page .cl-page-title,
.cl-page h1 {
	font-size: var(--cl-h2);
	font-weight: 760;
	font-stretch: 125%;
	letter-spacing: -0.02em;
}

.cl-page .wp-block-post-content {
	color: var(--cl-texto);
}

.cl-page .wp-block-post-date,
.cl-page .wp-block-query-pagination {
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 15px;
}

.cl-page .wp-block-post-template {
	padding: 0;
}

.cl-page .wp-block-post-template > li {
	padding: 32px 0;
	border-top: 1px solid var(--cl-linea);
}

.cl-page .wp-block-post-title {
	font-size: 26px;
	font-weight: 600;
}

.cl-page .wp-block-post-title a {
	color: var(--cl-tinta);
	text-decoration: none;
}

.cl-page .wp-block-post-title a:hover {
	color: var(--cl-verde);
}


/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.cl-section .cl-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-section .cl-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 44px;
	}

	.cl-header .cl-header-nav,
	.cl-header .cl-nav,
	.cl-header .cl-nav .wp-block-navigation__container {
		gap: 22px;
	}
}

@media (max-width: 900px) {
	.cl-section .cl-trust {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-section .cl-trust-item,
	.cl-section .cl-trust-item:nth-child(even) {
		padding: 32px 0;
		border-left: 0;
	}
}

@media (max-width: 781px) {
	.admin-bar .cl-site-header {
		top: 46px;
	}

	.cl-section .cl-grid-3,
	.cl-section .cl-steps,
	.cl-hero .cl-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-hero .cl-stat,
	.cl-hero .cl-stat:first-child {
		padding: 22px 0 24px;
		border-left: 0;
		border-top: 1px solid var(--cl-linea);
	}

	.cl-hero .cl-stat:first-child {
		border-top: 0;
	}

	.cl-hero .cl-hero-badge {
		left: 16px;
		bottom: 16px;
	}

	.cl-section .cl-price-table td {
		display: block;
		width: auto;
		font-size: 18px;
	}

	.cl-section .cl-price-table td:first-child {
		width: auto;
		padding: 24px 0 0;
	}

	.cl-section .cl-price-table td + td {
		padding-top: 6px;
		border-top: 0;
	}

	.cl-section .cl-price-table tr:last-child td:first-child {
		border-bottom: 0;
	}

	.cl-section .cl-faq summary {
		padding: 22px 60px 22px 22px;
		font-size: 18px;
	}

	.cl-section .cl-faq summary::after {
		right: 22px;
	}

	.cl-section .cl-faq > p {
		padding: 0 22px 24px;
		font-size: 17px;
	}

	.cl-section .wp-block-image.cl-ph-map figcaption {
		white-space: normal;
		width: 80%;
	}
}

@media (max-width: 600px) {
	.cl-section .cl-checks li {
		font-size: 18px;
	}

	.cl-section .wp-block-buttons > .wp-block-button.cl-btn {
		width: 100%;
	}

	.cl-section .wp-block-buttons > .wp-block-button.cl-btn > .wp-block-button__link {
		width: 100%;
		white-space: normal;
	}
}

/* El botón de la cabecera se oculta justo donde aparece la hamburguesa
   (core muestra el menú completo desde 600px) */
@media (max-width: 599px) {
	.cl-header .cl-header-actions {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   21. Menú: submenú "Servicios" (se abre al pasar el mouse)
   -------------------------------------------------------------------------- */
.cl-header .cl-nav .wp-block-navigation-submenu__toggle,
.cl-header .cl-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	color: var(--cl-tinta);
}

.cl-header .cl-nav .wp-block-navigation__submenu-icon {
	width: 12px;
	height: 12px;
	margin-left: 6px;
}

@media (min-width: 1024px) {
	.cl-header .cl-nav .wp-block-navigation__submenu-container {
		top: calc(100% + 10px);
		left: -16px;
		min-width: 280px !important;
		padding: 10px;
		background: var(--cl-blanco) !important;
		border: 1px solid var(--cl-linea) !important;
		border-radius: 12px;
		box-shadow: 0 22px 50px rgba(27, 30, 27, 0.13);
	}

	/* Puente invisible para que el submenú no se cierre al bajar el mouse */
	.cl-header .cl-nav .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	.cl-header .cl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 12px 14px !important;
		border-radius: 8px;
		font-size: 17px;
		font-weight: 500;
		line-height: 1.3;
	}

	.cl-header .cl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--cl-papel);
		color: var(--cl-verde);
	}
}

/* Submenú dentro del menú móvil */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 8px 16px !important;
	border-left: 2px solid var(--cl-linea) !important;
	margin-bottom: 12px;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 0;
	font-size: 19px;
	font-weight: 500;
	color: var(--cl-verde);
}


/* --------------------------------------------------------------------------
   22. Página de servicio (p. ej. Muebles de melamina)
   Clases cl-svc-*. Todo el contenido son bloques nativos editables.
   -------------------------------------------------------------------------- */

/* Los grupos de la página usan diseño "flujo": se anulan los márgenes
   automáticos y cada componente define los suyos. */
[class*="cl-svc-"] > * {
	margin-block: 0;
}

/* ---- Portada ---- */
.cl-main .cl-svc-hero {
	margin: 0;
	background: var(--cl-papel);
}

.cl-svc-hero .wp-block-columns.cl-svc-hero-cols {
	align-items: stretch;
	gap: 0;
	margin: 0;
}

.cl-svc-hero .cl-svc-hero-cols > .wp-block-column.cl-svc-hero-text {
	display: flex;
	flex: 1.15 1 0;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding:
		clamp(32px, 3.4vw, 56px)
		clamp(28px, 4vw, 64px)
		clamp(44px, 4.4vw, 72px)
		max(var(--cl-gutter), calc((100vw - var(--cl-container)) / 2));
}

.cl-svc-hero .cl-svc-hero-cols > .wp-block-column.cl-svc-hero-media {
	position: relative;
	flex: 0.85 1 0;
	min-height: 600px;
	overflow: hidden;
	background: #ebe8e1;
}

.cl-svc-hero .wp-block-image.cl-svc-hero-img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.cl-svc-hero .wp-block-image.cl-svc-hero-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: 40% 60%;
}

.cl-svc-hero .cl-eyebrow {
	margin-top: 26px;
	color: var(--cl-cobre);
	font-family: var(--cl-mono);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cl-svc-hero h1.cl-svc-title {
	margin-top: 18px;
	font-size: clamp(2.2rem, 1rem + 2.4vw, 3.5rem);
	font-weight: 780;
	font-stretch: 125%;
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.cl-svc-hero h1.cl-svc-title mark {
	background: none !important;
}

.cl-svc-hero .cl-svc-lead {
	max-width: 620px;
	margin-top: 22px;
	color: var(--cl-texto);
	font-size: clamp(17.5px, 1rem + 0.2vw, 19.5px);
	line-height: 1.65;
}

.cl-svc-hero .cl-checks {
	margin-top: 26px;
	padding: 0;
	list-style: none;
}

.cl-svc-hero .cl-checks li {
	position: relative;
	padding-left: 38px;
	font-size: 18.5px;
	line-height: 1.55;
}

.cl-svc-hero .cl-checks li + li {
	margin-top: 10px;
}

.cl-svc-hero .cl-checks li::before {
	content: "";
	position: absolute;
	top: 0.34em;
	left: 4px;
	width: 16px;
	height: 8px;
	border-left: 2.5px solid var(--cl-verde);
	border-bottom: 2.5px solid var(--cl-verde);
	transform: rotate(-45deg);
}

.cl-svc-hero .wp-block-buttons.cl-svc-hero-actions {
	gap: 14px;
	margin-top: 36px;
}

.cl-svc-hero .cl-hero-badge {
	position: absolute;
	left: 28px;
	bottom: 28px;
	z-index: 2;
	max-width: 280px;
	margin: 0;
	padding: 20px 24px 22px;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: var(--cl-radius);
	box-shadow: 0 18px 40px rgba(27, 30, 27, 0.12);
}

.cl-svc-hero .cl-hero-badge .cl-hero-badge-num {
	color: var(--cl-verde);
	font-size: 30px;
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
}

.cl-svc-hero .cl-hero-badge .cl-hero-badge-text {
	margin-top: 8px;
	color: var(--cl-texto);
	font-size: 16px;
	line-height: 1.45;
}

/* Migas de pan (bloque nativo "Migas de pan") */
.cl-svc-hero .cl-breadcrumbs {
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 14px;
	line-height: 1.5;
}

.cl-svc-hero .cl-breadcrumbs a {
	color: var(--cl-texto);
	text-decoration: none;
}

.cl-svc-hero .cl-breadcrumbs a:hover {
	color: var(--cl-verde);
	text-decoration: underline;
}

/* ---- Barra de beneficios ---- */
.cl-main .cl-svc-benefits {
	margin: 0;
	padding: 0 var(--cl-gutter);
	background: var(--cl-blanco);
	border-top: 1px solid var(--cl-linea);
	border-bottom: 1px solid var(--cl-linea);
}

.cl-svc-benefits .cl-svc-benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--cl-container);
	margin-inline: auto;
}

.cl-svc-benefits .cl-svc-benefit {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 30px 24px;
	border-left: 1px solid var(--cl-linea);
}

.cl-svc-benefits .cl-svc-benefit:first-child {
	padding-left: 0;
	border-left: 0;
}

.cl-svc-benefits .wp-block-image.cl-icon {
	flex: none;
	width: 34px;
	margin: 2px 0 0;
}

.cl-svc-benefits .wp-block-image.cl-icon img {
	display: block;
	width: 34px !important;
	height: 34px !important;
}

.cl-svc-benefits .cl-svc-benefit-title {
	font-size: 18px;
	line-height: 1.3;
}

.cl-svc-benefits .cl-svc-benefit-title strong {
	font-weight: 650;
}

.cl-svc-benefits .cl-svc-benefit-body > p + p {
	margin-top: 4px;
	color: var(--cl-texto);
	font-size: 15.5px;
	line-height: 1.5;
}

/* ---- Tarjetas de ambientes ---- */
.cl-section .cl-svc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.cl-section .cl-svc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: var(--cl-radius);
}

.cl-section .wp-block-image.cl-svc-card-img {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ebe8e1;
}

.cl-section .wp-block-image.cl-svc-card-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.cl-section .cl-svc-card-body {
	flex: 1;
	padding: 28px 28px 30px;
}

.cl-section .cl-svc-card-body h3 {
	font-size: 23px;
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.cl-section .cl-svc-card-body .cl-card-meta {
	margin-top: 12px;
	padding-bottom: 16px;
	border-bottom: 1px dashed var(--cl-linea);
	color: var(--cl-cobre);
	font-family: var(--cl-mono);
	font-size: 14px;
	line-height: 1.6;
}

.cl-section .cl-svc-card-body > p:not(.cl-card-meta),
.cl-section .cl-svc-card-body > ul {
	margin-top: 18px;
	color: var(--cl-texto);
	font-size: 17px;
	line-height: 1.7;
}

.cl-section .cl-svc-card-body > ul {
	padding-left: 20px;
}

.cl-section .cl-svc-card-body li + li {
	margin-top: 5px;
}

.cl-section .cl-svc-card-body li::marker {
	color: var(--cl-cobre-claro);
}

/* Controles del carrusel (los crea assets/js/carousel.js; solo en móvil) */
.cl-carousel-wrap {
	position: relative;
}

.cl-carousel-arrow,
.cl-carousel-dots {
	display: none;
}

/* ---- Precios ---- */
.cl-section .cl-price-aside .cl-aside-title {
	margin-top: 0;
	color: var(--cl-blanco);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
}

.cl-section .cl-price-aside .cl-aside-list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.cl-section .cl-price-aside .cl-aside-list li {
	position: relative;
	padding: 13px 0 13px 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 17px;
	line-height: 1.6;
}

.cl-section .cl-price-aside .cl-aside-list li::before {
	content: "";
	position: absolute;
	top: 1.15em;
	left: 3px;
	width: 13px;
	height: 7px;
	border-left: 2px solid var(--cl-cobre-claro);
	border-bottom: 2px solid var(--cl-cobre-claro);
	transform: rotate(-45deg);
}

.cl-section .cl-price-aside .cl-aside-ask {
	margin-top: 18px;
	padding: 18px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.16);
	font-size: 16.5px;
	line-height: 1.65;
}

.cl-section .cl-price-aside .cl-aside-ask strong {
	color: var(--cl-blanco);
	font-weight: 600;
}

.cl-section .cl-price-table td:first-child strong {
	font-weight: 600;
}

/* ---- Por qué elegirme ---- */
.cl-section .wp-block-columns.cl-svc-trust-cols {
	align-items: flex-start;
	gap: clamp(32px, 6vw, 96px);
	margin: 0;
}

.cl-section .cl-svc-trust-cols > .cl-svc-trust-side {
	flex: 0.9 1 0;
}

.cl-section .cl-svc-trust-cols > .cl-svc-trust-list {
	flex: 1.1 1 0;
	border-top: 1px solid var(--cl-linea);
}

.cl-section .cl-svc-bigstat {
	display: flex;
	align-items: center;
	gap: 20px;
}

.cl-section .cl-svc-bigstat .cl-svc-bigstat-num {
	color: var(--cl-verde);
	font-size: clamp(56px, 3rem + 2vw, 84px);
	font-weight: 800;
	font-stretch: 125%;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.cl-section .cl-svc-bigstat .cl-svc-bigstat-text {
	max-width: 220px;
	color: var(--cl-texto);
	font-size: 17px;
	line-height: 1.5;
}

.cl-section .wp-block-image.cl-svc-trust-img {
	margin-top: 36px;
	border: 1px solid var(--cl-linea);
}

.cl-section .wp-block-image.cl-svc-trust-img img,
.cl-section .wp-block-image.cl-svc-project-img img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cl-section .cl-svc-trust-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 22px;
	padding: 32px 0;
	border-bottom: 1px solid var(--cl-linea);
}

.cl-section .cl-svc-trust-item .wp-block-image.cl-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 12px;
	background: #e6ece9;
}

.cl-section .cl-svc-trust-item .wp-block-image.cl-icon img {
	width: 28px !important;
	height: 28px !important;
}

.cl-section .cl-svc-trust-body h3 {
	font-size: clamp(20px, 1rem + 0.35vw, 23px);
	font-weight: 650;
	line-height: 1.25;
}

.cl-section .cl-svc-trust-body p {
	margin-top: 10px;
	color: var(--cl-texto);
	font-size: 17.5px;
	line-height: 1.75;
}

/* ---- Proceso ---- */
.cl-section .cl-svc-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
}

.cl-section .cl-svc-step {
	position: relative;
	padding-right: 22px;
}

.cl-section .cl-svc-step::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 56px;
	right: 0;
	height: 2px;
	background: repeating-linear-gradient(to right, var(--cl-cobre-claro) 0 6px, transparent 6px 12px);
}

.cl-section .cl-svc-step:last-child::before {
	display: none;
}

.cl-section .cl-svc-step .cl-svc-step-num {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cl-verde);
	color: var(--cl-blanco);
	font-family: var(--cl-mono);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
}

.cl-section .cl-svc-step:last-child .cl-svc-step-num {
	background: var(--cl-cobre);
}

.cl-section .cl-svc-step .cl-svc-step-title {
	margin-top: 22px;
	font-size: 20px;
	line-height: 1.25;
}

.cl-section .cl-svc-step .cl-svc-step-title strong {
	font-weight: 650;
}

.cl-section .cl-svc-step > p:not(.cl-svc-step-num):not(.cl-svc-step-title) {
	margin-top: 12px;
	color: var(--cl-texto);
	font-size: 16.5px;
	line-height: 1.7;
}

/* ---- Trabajos ---- */
.cl-section .cl-svc-projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 20px;
}

.cl-section .cl-svc-project .cl-svc-project-title {
	margin-top: 18px;
	font-size: 19px;
	line-height: 1.3;
}

.cl-section .cl-svc-project .cl-svc-project-title strong {
	font-weight: 650;
}

.cl-section .cl-svc-project .cl-project-meta {
	margin-top: 6px;
	color: var(--cl-texto);
	font-family: var(--cl-mono);
	font-size: 14px;
	line-height: 1.5;
}

/* ---- Opiniones ---- */
.cl-section .cl-svc-reviews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.cl-section.is-white .cl-svc-reviews .cl-review {
	background: var(--cl-papel);
}

/* ---- Preguntas frecuentes ---- */
.cl-section .wp-block-columns.cl-svc-faq-cols {
	align-items: flex-start;
	gap: clamp(32px, 6vw, 96px);
	margin: 0;
}

.cl-section .cl-svc-faq-cols > .cl-svc-faq-side {
	position: sticky;
	top: 104px;
	flex: 0.8 1 0;
}

.cl-section .cl-svc-faq-cols > .cl-svc-faq-main {
	flex: 1.4 1 0;
}

.cl-section .cl-svc-faq-side .cl-head + * {
	margin-top: 32px;
}

.cl-section .cl-svc-faq-help {
	padding: 26px 26px 24px;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: var(--cl-radius);
}

.cl-section .cl-svc-faq-help .cl-svc-faq-help-title {
	font-size: 19px;
	line-height: 1.35;
}

.cl-section .cl-svc-faq-help .cl-svc-faq-help-title strong {
	font-weight: 650;
}

.cl-section .cl-svc-faq-help > p:not(.cl-svc-faq-help-title) {
	margin-top: 8px;
	color: var(--cl-texto);
	font-size: 16.5px;
	line-height: 1.6;
}

.cl-section .cl-svc-faq-help .wp-block-buttons {
	margin-top: 18px;
}

/* ---- Responsive de la página de servicio ---- */
@media (max-width: 1180px) {
	.cl-section .cl-svc-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 44px;
	}

	.cl-section .cl-svc-step:nth-child(3)::before {
		display: none;
	}
}

@media (max-width: 1023px) {
	.cl-svc-benefits .cl-svc-benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-svc-benefits .cl-svc-benefit {
		padding: 24px 18px;
	}

	.cl-svc-benefits .cl-svc-benefit:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.cl-svc-benefits .cl-svc-benefit:nth-child(n + 3) {
		border-top: 1px solid var(--cl-linea);
	}

	.cl-section .cl-svc-cards,
	.cl-section .cl-svc-projects,
	.cl-section .cl-svc-reviews {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* Portada sin imagen en móvil: el texto y el botón quedan arriba */
	.cl-svc-hero .cl-svc-hero-cols > .wp-block-column.cl-svc-hero-media {
		display: none;
	}

	.cl-svc-hero .cl-svc-hero-cols > .wp-block-column.cl-svc-hero-text {
		padding: 28px var(--cl-gutter) 44px;
	}

	.cl-svc-hero .cl-eyebrow {
		margin-top: 20px;
		font-size: 13px;
	}

	.cl-svc-hero .cl-checks li {
		font-size: 17.5px;
	}

	/* "Qué fabrico" en carrusel con flechas y puntos */
	.cl-section .cl-svc-cards.cl-carousel {
		display: flex;
		gap: 14px;
		margin-inline: calc(var(--cl-gutter) * -1);
		padding: 4px var(--cl-gutter) 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cl-gutter);
		scrollbar-width: none;
	}

	.cl-section .cl-svc-cards.cl-carousel::-webkit-scrollbar {
		display: none;
	}

	.cl-section .cl-svc-cards.cl-carousel > * {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	.cl-section .cl-svc-card-body {
		padding: 22px 22px 26px;
	}

	.cl-section .cl-svc-card-body h3 {
		font-size: 21px;
	}

	.cl-carousel-arrow {
		position: absolute;
		top: var(--cl-arrow-top, 34%);
		z-index: 3;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-top: -22px;
		padding: 0;
		border: 1px solid var(--cl-linea);
		border-radius: 50%;
		background: var(--cl-blanco);
		color: var(--cl-tinta);
		box-shadow: 0 8px 22px rgba(27, 30, 27, 0.16);
		cursor: pointer;
		transition: opacity 0.2s ease;
	}

	.cl-carousel-arrow svg {
		width: 20px;
		height: 20px;
	}

	.cl-carousel-arrow.is-prev {
		left: -6px;
	}

	.cl-carousel-arrow.is-next {
		right: -6px;
	}

	.cl-carousel-arrow:disabled {
		opacity: 0;
		pointer-events: none;
	}

	.cl-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 18px;
	}

	.cl-carousel-dots button {
		width: 9px;
		height: 9px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #c9cac3;
		cursor: pointer;
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.cl-carousel-dots button[aria-current="true"] {
		width: 26px;
		background: var(--cl-verde);
	}

	/* Columnas apiladas */
	.cl-section .cl-svc-faq-cols > .cl-svc-faq-side {
		position: static;
	}

	.cl-section .cl-svc-trust-item {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 16px;
		padding: 26px 0;
	}

	.cl-section .cl-svc-trust-item .wp-block-image.cl-icon {
		width: 44px;
		height: 44px;
	}

	.cl-section .cl-svc-trust-item .wp-block-image.cl-icon img {
		width: 24px !important;
		height: 24px !important;
	}

	/* Proceso en línea vertical */
	.cl-section .cl-svc-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.cl-section .cl-svc-step {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 18px;
		padding: 0 0 28px;
	}

	.cl-section .cl-svc-step::before,
	.cl-section .cl-svc-step:nth-child(3)::before {
		display: block;
		top: 48px;
		bottom: 0;
		left: 23px;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(to bottom, var(--cl-cobre-claro) 0 6px, transparent 6px 12px);
	}

	.cl-section .cl-svc-step:last-child::before {
		display: none;
	}

	.cl-section .cl-svc-step .cl-svc-step-num {
		grid-row: span 2;
		width: 48px;
		height: 48px;
		font-size: 15px;
	}

	.cl-section .cl-svc-step .cl-svc-step-title {
		margin-top: 10px;
		font-size: 19px;
	}

	.cl-section .cl-svc-step > p:not(.cl-svc-step-num):not(.cl-svc-step-title) {
		grid-column: 2;
	}

	.cl-section .cl-svc-projects,
	.cl-section .cl-svc-reviews {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.cl-svc-benefits .cl-svc-benefits-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-svc-benefits .cl-svc-benefit,
	.cl-svc-benefits .cl-svc-benefit:nth-child(odd) {
		padding: 20px 0;
		border-left: 0;
	}

	.cl-svc-benefits .cl-svc-benefit + .cl-svc-benefit {
		border-top: 1px solid var(--cl-linea);
	}

	.cl-svc-hero .wp-block-buttons.cl-svc-hero-actions > .wp-block-button.cl-btn,
	.cl-section .cl-svc-faq-help .wp-block-button.cl-btn {
		width: 100%;
	}

	.cl-svc-hero .wp-block-buttons.cl-svc-hero-actions > .wp-block-button.cl-btn > .wp-block-button__link {
		width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cl-carousel-arrow,
	.cl-carousel-dots button {
		transition: none;
	}
}

/* ---- Acordeón de preguntas frecuentes (bloque nativo "Acordeón") ---- */
.cl-section .wp-block-accordion.cl-svc-faq {
	display: grid;
	gap: 12px;
}

.cl-section .cl-svc-faq .wp-block-accordion-item {
	margin: 0;
	background: var(--cl-blanco);
	border: 1px solid var(--cl-linea);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-section .cl-svc-faq .wp-block-accordion-item.is-open {
	border-color: var(--cl-tinta);
	box-shadow: 0 10px 28px rgba(27, 30, 27, 0.06);
}

.cl-section .cl-svc-faq .wp-block-accordion-heading {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.cl-section .cl-svc-faq .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 24px;
	border: 0;
	background: none;
	color: var(--cl-tinta);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cl-section .cl-svc-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
	color: var(--cl-verde);
}

.cl-section .cl-svc-faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 18px;
	height: 18px;
	overflow: hidden;
	background:
		linear-gradient(var(--cl-verde), var(--cl-verde)) center / 18px 2px no-repeat,
		linear-gradient(var(--cl-verde), var(--cl-verde)) center / 2px 18px no-repeat;
	color: transparent;
	font-size: 0;
	transition: transform 0.2s ease;
}

.cl-section .cl-svc-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
}

.cl-section .cl-svc-faq .wp-block-accordion-panel {
	padding: 0 24px 26px;
	color: var(--cl-texto);
	font-size: 17px;
	line-height: 1.75;
}

.cl-section .cl-svc-faq .wp-block-accordion-panel > * {
	margin: 0;
}

.cl-section .cl-svc-faq .wp-block-accordion-panel > * + * {
	margin-top: 12px;
}

.cl-section .cl-svc-faq .wp-block-accordion-panel ul {
	padding-left: 20px;
}

.cl-section .cl-svc-faq .wp-block-accordion-panel li + li {
	margin-top: 4px;
}

.cl-section .cl-svc-faq .wp-block-accordion-panel li::marker {
	color: var(--cl-cobre-claro);
}

@media (max-width: 781px) {
	.cl-section .cl-svc-faq .wp-block-accordion-heading {
		font-size: 17.5px;
	}

	.cl-section .cl-svc-faq .wp-block-accordion-heading__toggle {
		padding: 18px;
	}

	.cl-section .cl-svc-faq .wp-block-accordion-panel {
		padding: 0 18px 22px;
		font-size: 16.5px;
	}
}

/* Portada en móvil: el botón de WhatsApp sube antes de la lista para que se vea sin hacer scroll */
@media (max-width: 781px) {
	.cl-svc-hero h1.cl-svc-title {
		font-size: clamp(2rem, 1.2rem + 3.6vw, 2.4rem);
	}

	.cl-svc-hero .cl-svc-lead {
		margin-top: 18px;
	}

	.cl-svc-hero .wp-block-buttons.cl-svc-hero-actions {
		order: 5;
		margin-top: 24px;
	}

	.cl-svc-hero .cl-checks {
		order: 6;
		margin-top: 28px;
	}
}


/* --------------------------------------------------------------------------
   23. Ajustes v1.1.4
   -------------------------------------------------------------------------- */

/* Desplazamiento suave al ir a una sección (p. ej. botón "Cotizar" → #contacto) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Contacto de la home: textos centrados */
.cl-section#contacto .cl-contact-cols {
	justify-content: center;
}

.cl-section#contacto .cl-contact-text {
	flex: 0 1 820px !important;
	text-align: center;
}

.cl-section#contacto .cl-contact-text h2,
.cl-section#contacto .cl-contact-text .cl-lead {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.cl-section#contacto .cl-contact-text h2 {
	max-width: 18em;
}

.cl-section#contacto .cl-contact-text .cl-lead {
	max-width: 640px;
}

.cl-section#contacto .cl-contact-actions {
	justify-content: center;
}

/* Trabajos: foto ampliada al hacer clic (lightbox nativo del bloque Imagen) */
.cl-section .cl-project .wp-block-image img {
	cursor: zoom-in;
}

.wp-lightbox-overlay .scrim {
	background-color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1 !important;
}

.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay figure img {
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.wp-lightbox-overlay .wp-lightbox-close-button {
	top: 18px !important;
	right: 18px !important;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55) !important;
	fill: #fff !important;
	color: #fff !important;
	cursor: pointer;
}

.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible {
	background: rgba(0, 0, 0, 0.8) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button svg,\n.wp-lightbox-overlay .wp-lightbox-navigation-button svg {
	width: 22px;
	height: 22px;
	fill: #fff !important;
}

/* Menú móvil: "Servicios" con sus subitems en cascada */
.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	display: block;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none !important;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	position: static !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: -4px 0 14px 6px !important;
	padding: 2px 0 2px 20px !important;
	border: 0 !important;
	border-left: 2px solid var(--cl-cobre-claro) !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.cl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	border-bottom: 0;
}

.cl-header .cl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0 !important;
	color: var(--cl-verde);
	font-size: 18px;
	font-weight: 500;
}

.cl-header .cl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 12px;
	height: 2px;
	background: var(--cl-cobre-claro);
}

/* Pie de página */
.cl-footer .cl-footer-inner {
	align-items: center;
}

.cl-footer .cl-footer-brand {
	color: var(--cl-blanco);
	font-size: 18px;
	font-weight: 600;
}

.cl-footer .cl-footer-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.cl-footer .cl-footer-contact a {
	color: var(--cl-blanco);
	text-decoration: none;
}

.cl-footer .cl-footer-contact a:hover {
	text-decoration: underline;
}

.cl-footer .cl-footer-social {
	gap: 12px;
	margin: 0;
}

.cl-footer .cl-footer-social .wp-social-link {
	color: var(--cl-blanco);
	background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
	.cl-footer .cl-footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

.wp-lightbox-overlay .wp-lightbox-navigation-button {
	fill: #fff !important;
	color: #fff !important;
}