/* ==========================================================================
   Casabiel Cubiertas — sistema visual
   Port literal del prototipo. Todos los valores (tamaños, pesos, opacidades,
   grosores de línea, paddings) están copiados de los HTML de referencia:
   Home, Servicios, Servicio, Obras, Quiénes Somos, FAQ, Trabaja, Contacto,
   Landing, Header, Footer y Formulario.

   No depende del personalizador de Astra: los colores y la tipografía están
   fijados aquí. Lo que se toque en el personalizador es cosmético y no puede
   romper la composición.

    0. Anulación de Astra
    1. Tokens
    2. Base
    3. Contenedor y retículas
    4. Tipografía
    5. Cabecera de página y banda de claim
    6. Botones y flechas
    7. Hero de la home
    8. Tarjetas de servicio destacado
    9. Mosaico de servicios
   10. Celdas de retícula con líneas
   11. Banner COMPROMISO
   12. Caja de presentación
   13. Cifras
   14. Testimonios
   15. Obras
   16. Clientes
   17. Ficha de servicio
   18. Galería
   19. Acordeón (FAQ)
   20. Formularios
   21. Modales
   22. Footer y menús de Astra
   23. Animaciones y reveals
   24. Utilidades
   25. Responsive
   ========================================================================== */

/* 0. ANULACIÓN DE ASTRA =====================================================
   Astra imprime su CSS dinámico en línea, después de este archivo, así que
   todo lo que pueda pisar la composición se neutraliza con especificidad de
   body.cb-site y, donde no hay otra vía, con !important. Es deliberado: el
   diseño no debe depender de qué valores haya en el personalizador. */

body.cb-site,
body.cb-site .site,
body.cb-site #page,
body.cb-site #content,
body.cb-site .site-content,
body.cb-site .ast-container,
body.cb-site .ast-container-fluid,
body.cb-site #primary,
body.cb-site .site-main,
body.cb-site .entry-content,
body.cb-site .ast-article-single,
body.cb-site .ast-article-post,
body.cb-site .ast-separate-container,
body.cb-site .ast-separate-container .ast-article-single,
body.cb-site .ast-plain-container .site-content {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
}

/* En el CONTENIDO, el contenedor de Astra tiene que desaparecer: las líneas
   de 1px del diseño llegan al borde de la ventana y el ancho de 1400px lo
   pone .cb-wrap por dentro. Ojo: esto se limita al área de contenido a
   propósito. El header y el footer los monta Israel con el constructor de
   Astra y ahí el contenedor SÍ tiene que seguir centrando a 1400px. */
body.cb-site #content .ast-container,
body.cb-site .site-content > .ast-container,
body.cb-site #primary > .ast-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	display: block !important;
}

/* Header y footer: mismo contenedor que el resto del sitio, 1400px con el
   mismo gutter, para que el logotipo y el menú caigan a plomo con el
   contenido de las páginas. */
body.cb-site .site-header .ast-container,
body.cb-site .site-footer .ast-container,
body.cb-site .ast-builder-grid-row-container-inner,
body.cb-site .site-primary-header-wrap.ast-container,
body.cb-site .site-primary-footer-wrap.ast-container,
body.cb-site .ast-primary-header-bar .ast-container,
body.cb-site #ast-desktop-header .ast-container,
body.cb-site #ast-mobile-header .ast-container,
body.cb-site .site-primary-header-wrap > .ast-container,
body.cb-site .site-above-header-wrap > .ast-container,
body.cb-site .site-below-header-wrap > .ast-container,
body.cb-site .site-primary-footer-wrap > .ast-container,
body.cb-site .site-above-footer-wrap > .ast-container,
body.cb-site .site-below-footer-wrap > .ast-container,
body.cb-site .ast-mobile-header-content,
body.cb-site .ast-desktop-header-content,
body.cb-site .site-below-footer-wrap .ast-builder-grid-row,
body.cb-site .site-primary-footer-wrap .ast-builder-grid-row {
	max-width: var(--cb-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--cb-gutter) !important;
	padding-right: var(--cb-gutter) !important;
}

body.cb-site #primary,
body.cb-site .site-main,
body.cb-site .entry-content,
body.cb-site .ast-article-single {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Restos de plantilla de blog que Astra pinta y aquí no pintan nada. */
body.cb-site #secondary,
body.cb-site .ast-single-post-order,
body.cb-site .ast-archive-description,
body.cb-site .page-links,
body.cb-site .post-navigation,
body.cb-site .ast-author-details,
body.cb-site .ast-blog-featured-section,
body.cb-site .read-more {
	display: none !important;
}

/* Tipografía y color: mandan los nuestros, no los del personalizador. */
body.cb-site,
body.cb-site p,
body.cb-site li,
body.cb-site td,
body.cb-site th,
body.cb-site dd,
body.cb-site dt,
body.cb-site blockquote,
body.cb-site h1,
body.cb-site h2,
body.cb-site h3,
body.cb-site h4,
body.cb-site h5,
body.cb-site h6,
body.cb-site input,
body.cb-site select,
body.cb-site textarea,
body.cb-site button,
body.cb-site .entry-title,
body.cb-site .widget-title {
	font-family: 'League Spartan', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #fff;
}

body.cb-site h1,
body.cb-site h2,
body.cb-site h3,
body.cb-site h4,
body.cb-site h5,
body.cb-site h6 {
	text-transform: none;
	letter-spacing: normal;
}

/* Astra estiliza los enlaces y los botones del contenido. */
body.cb-site a,
body.cb-site .entry-content a {
	box-shadow: none;
	text-decoration: none;
}

body.cb-site .cb-btn,
body.cb-site button.cb-btn,
body.cb-site input.cb-btn,
body.cb-site .entry-content .cb-btn {
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.cb-site .entry-content > *:first-child {
	margin-top: 0;
}

body.cb-site .entry-content > *:last-child {
	margin-bottom: 0;
}

body.cb-site img,
body.cb-site figure {
	border-radius: 0;
	box-shadow: none;
}

/* 1. TOKENS ================================================================ */
:root {
	--cb-bg: #363845;
	--cb-bg-soft: #424557;
	--cb-bg-deep: #2C2E3A;
	--cb-accent: #A4163F;
	--cb-accent-soft: #E4708F;

	/* Los grosores de línea del prototipo, ni uno más. */
	--cb-line: rgba(255, 255, 255, .16);
	--cb-line-12: rgba(255, 255, 255, .12);
	--cb-line-14: rgba(255, 255, 255, .14);
	--cb-line-18: rgba(255, 255, 255, .18);
	--cb-line-20: rgba(255, 255, 255, .20);
	--cb-line-24: rgba(255, 255, 255, .24);
	--cb-line-30: rgba(255, 255, 255, .30);
	--cb-line-strong: rgba(255, 255, 255, .30);
	--cb-line-soft: rgba(255, 255, 255, .12);

	--cb-text: #fff;
	--cb-text-85: rgba(255, 255, 255, .85);
	--cb-text-82: rgba(255, 255, 255, .82);
	--cb-text-75: rgba(255, 255, 255, .75);
	--cb-text-74: rgba(255, 255, 255, .74);
	--cb-text-72: rgba(255, 255, 255, .72);
	--cb-text-70: rgba(255, 255, 255, .70);
	--cb-text-68: rgba(255, 255, 255, .68);
	--cb-text-66: rgba(255, 255, 255, .66);
	--cb-text-65: rgba(255, 255, 255, .65);
	--cb-text-62: rgba(255, 255, 255, .62);
	--cb-text-60: rgba(255, 255, 255, .60);
	--cb-text-55: rgba(255, 255, 255, .55);
	--cb-text-50: rgba(255, 255, 255, .50);
	--cb-text-45: rgba(255, 255, 255, .45);
	--cb-text-40: rgba(255, 255, 255, .40);
	--cb-text-30: rgba(255, 255, 255, .30);

	--cb-font: 'League Spartan', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cb-max: 1980px;
	--cb-gutter: clamp(18px, 4vw, 40px);
	--cb-measure: 820px;

	/* ------------------------------------------------------------------
	   Escala tipográfica fluida.

	   Cada tamaño crece linealmente entre 1400px y 1980px de ventana. La
	   fórmula de los dos puntos es:

	     pendiente = (grande - pequeño) / (1980 - 1400)
	     vw        = pendiente × 100
	     fijo      = pequeño - pendiente × 1400

	   El primer valor del clamp es el tamaño que ya tenía el proyecto, así
	   que POR DEBAJO DE 1400px no cambia absolutamente nada: la web se ve
	   hoy igual que ayer en portátil, tableta y móvil. Solo crece cuando la
	   ventana pasa de 1400.
	   ------------------------------------------------------------------ */
	--cb-fs-xxs:   clamp(11px, 8.586px + 0.172vw, 12px);   /* 11 → 12 */
	--cb-fs-xs:    clamp(12px, 7.172px + 0.345vw, 14px);   /* 12 → 14 */
	--cb-fs-sm:    clamp(13px, 8.172px + 0.345vw, 15px);   /* 13 → 15 */
	--cb-fs-md:    clamp(16px, 11.172px + 0.345vw, 18px);  /* 16 → 18 */
	--cb-fs-base:  clamp(18px, 10.759px + 0.517vw, 21px);  /* 18 → 21 */
	--cb-fs-lg:    clamp(20px, 12.759px + 0.517vw, 23px);  /* 20 → 23 */
	--cb-fs-xl:    clamp(21px, 13.759px + 0.517vw, 24px);  /* 21 → 24 */
	--cb-fs-quote: clamp(22px, 12.345px + 0.690vw, 26px);  /* 22 → 26 */
	--cb-fs-num:   clamp(24px, 14.345px + 0.690vw, 28px);  /* 24 → 28 */
	--cb-fs-tel:   clamp(34px, 19.517px + 1.034vw, 40px);  /* 34 → 40 */

	/* Ritmo vertical del prototipo. */
	--cb-s70: 70px;
	--cb-s80: 80px;
	--cb-s90: 90px;
	--cb-s100: 100px;
	--cb-s110: 110px;

	--cb-t: .3s;
	--cb-t-mid: .35s;
	--cb-t-slow: .45s;
	--cb-t-slower: .55s;
	--cb-ease: cubic-bezier(.16, 1, .3, 1);
}

/* 2. BASE ================================================================== */
html,
body {
	margin: 0;
	padding: 0;
	background: var(--cb-bg);
}

body.cb-site {
	font-family: var(--cb-font);
	color: var(--cb-text);
	font-weight: 300;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

body.cb-site a {
	color: #fff;
	text-decoration: none;
	transition: color var(--cb-t);
}

/*
 * Hover de los enlaces.
 *
 * Esta regla era body.cb-site a:hover, con especificidad (0,2,2), y le ganaba a
 * todos los componentes: .cb-filters a:hover es (0,2,1). Resultado: un botón de
 * filtro con fondo granate se quedaba con el texto también en granate, o sea
 * invisible. Ahora el granate del hover solo se aplica a los enlaces de texto
 * corrido —los que no llevan clase— y a los sitios donde se pide a propósito.
 * Cada componente manda sobre su propio hover.
 */
body.cb-site a:where(:not([class])):hover,
body.cb-site a:where(:not([class])):focus-visible,
body.cb-site .cb-text a:hover,
body.cb-site .cb-legal a:hover,
body.cb-site .cb-legal-menu a:hover,
body.cb-site .cb-legal-menu button:hover,
body.cb-site a.cb-dato:hover,
body.cb-site .site-footer a:hover {
	color: var(--cb-accent);
}

::selection {
	background: var(--cb-accent);
	color: #fff;
}

body.cb-site img {
	max-width: 100%;
	height: auto;
	display: block;
}

body.cb-site input,
body.cb-site textarea,
body.cb-site button,
body.cb-site select {
	font-family: inherit;
}

body.cb-site input::placeholder,
body.cb-site textarea::placeholder {
	color: var(--cb-text-30);
}

body.cb-site strong,
body.cb-site b {
	font-weight: 500;
}

body.cb-site em,
body.cb-site i {
	font-style: normal;
}

hr {
	border: none;
	border-top: 1px solid var(--cb-line);
	margin: 0;
}

[hidden] {
	display: none !important;
}

#cb-main {
	position: relative;
	background: var(--cb-bg);
	/* Red de seguridad: si algo mide mal, se recorta en vez de romper la
	   maqueta y aparecer barra horizontal en toda la web. */
	max-width: 100vw;
	overflow-x: clip;
}

/* La cita del testimonio: el prototipo la deja correr a todo el ancho de su
   columna, pero con una línea de 1.250px se lee fatal. Se limita a la medida
   de lectura que usa el resto del sitio. */
.cb-testi__swiper .cb-quote {
	max-width: 1100px;
}

/* 3. CONTENEDOR Y RETÍCULAS ================================================ */
.cb-wrap {
	max-width: var(--cb-max);
	margin: 0 auto;
	padding: 0 var(--cb-gutter);
}

/* Secciones. En el prototipo casi todas llevan solo padding arriba y la
   siguiente aporta el suyo, de ahí los modificadores. */
.cb-section {
	padding: var(--cb-s100) 0 0;
}

.cb-section--both {
	padding: var(--cb-s100) 0;
}

.cb-section--tight {
	padding: var(--cb-s70) 0 0;
}

.cb-section--80 {
	padding: var(--cb-s80) 0 0;
}

.cb-section--90 {
	padding: var(--cb-s90) 0 0;
}

.cb-section--110 {
	padding: var(--cb-s110) 0 0;
}

.cb-section--flush {
	padding-bottom: 0;
}

.cb-section--top {
	padding-top: var(--cb-s110);
}

/* Bandas: la línea llega al borde de la ventana, el contenido no. */
.cb-band {
	border-top: 1px solid var(--cb-line);
}

.cb-band--both {
	border-top: 1px solid var(--cb-line);
	border-bottom: 1px solid var(--cb-line);
}

.cb-grid {
	display: grid;
}

.cb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cb-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cb-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cb-grid--auto-210 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cb-grid--auto-275 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.cb-grid--auto-290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* 340px da tres columnas a 1400, dos en tableta y una en móvil: con seis
   testimonios las filas salen siempre completas. */
.cb-grid--auto-340 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cb-grid--gap { gap: 24px; }

/* Separación por línea de 1px.
 *
 * El prototipo lo hace con un fondo del color de la línea y un gap de 1px, con
 * las celdas opacas encima. Funciona mientras la última fila esté completa: en
 * cuanto sobra un hueco, ese hueco enseña el fondo y aparece un rectángulo
 * gris del tamaño de las celdas que faltan. Con seis testimonios en cuatro
 * columnas pasaba justo eso.
 *
 * Aquí las líneas se dibujan con bordes en cada celda. Se ve exactamente igual
 * cuando la fila está completa, y cuando no lo está el hueco simplemente queda
 * vacío. */
.cb-lines {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--cb-line);
	border-left: 1px solid var(--cb-line);
}

.cb-lines > * {
	background: var(--cb-bg);
	border-right: 1px solid var(--cb-line);
	border-bottom: 1px solid var(--cb-line);
	min-width: 0;
}

/* Variante con bordes reales (los servicios destacados de la home): la
   retícula cierra por los dos costados y cada celda pone su línea derecha. */
.cb-grid--lines {
	border-left: 1px solid var(--cb-line);
	border-right: 1px solid var(--cb-line);
}

.cb-grid--lines > * {
	border-right: 1px solid var(--cb-line);
}

.cb-grid--lines > *:last-child {
	border-right: none;
}

.cb-split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(30px, 4.5vw, 60px);
	align-items: center;
}

.cb-split--wide {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 0;
}

.cb-split--text {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: clamp(34px, 5vw, 70px);
	align-items: start;
}

.cb-split--nav {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(30px, 4.5vw, 60px);
	align-items: center;
}

.cb-box { border: 1px solid var(--cb-line-30); }
.cb-box--soft { border: 1px solid var(--cb-line); }
.cb-box--24 { border: 1px solid var(--cb-line-24); }

/* 4. TIPOGRAFÍA ============================================================ */
.cb-h1,
body.cb-site h1.cb-h1 {
	font-size: clamp(34px, 4.4vw, 64px);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: .02em;
	margin: 0 0 56px;
	text-wrap: balance;
}

.cb-h2,
body.cb-site h2.cb-h2 {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 .6em;
	text-wrap: balance;
}

.cb-h2--light {
	font-weight: 500;
	line-height: 1.14;
}

/* El tamaño intermedio que el prototipo repite en casi todos los bloques. */
.cb-h3,
body.cb-site h3.cb-h3 {
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .6em;
}

.cb-h4,
body.cb-site h4.cb-h4 {
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .5em;
}

.cb-h5 {
	font-size: var(--cb-fs-xl);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 12px;
}

.cb-lead {
	font-size: var(--cb-fs-lg);
	line-height: 1.75;
	color: var(--cb-text-70);
	margin: 0 0 1em;
	font-weight: 300;
}

.cb-text {
	font-size: var(--cb-fs-base);
	line-height: 1.85;
	color: var(--cb-text-74);
}

.cb-text p,
.cb-text ul,
.cb-text ol {
	margin: 0 0 22px;
	font-size: var(--cb-fs-base);
	line-height: 1.85;
	color: var(--cb-text-74);
}

.cb-text > *:last-child {
	margin-bottom: 0;
}

.cb-text h2 {
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
	line-height: 1.3;
	margin: 44px 0 18px;
}

.cb-text h3 {
	font-size: var(--cb-fs-xl);
	font-weight: 600;
	margin: 34px 0 14px;
}

.cb-text a:not(.cb-btn):not(.cb-link-arrow) {
	border-bottom: 1px solid var(--cb-line-30);
}

.cb-text a:hover {
	border-color: var(--cb-accent);
}

.cb-text ul,
.cb-text ol {
	padding-left: 20px;
}

.cb-text li {
	margin-bottom: 8px;
}

.cb-note {
	font-size: var(--cb-fs-md);
	color: var(--cb-text-45);
}

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

.cb-measure {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Antetítulo: línea granate de 52px + texto espaciado. */
.cb-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(10px, 2.4vh, 30px);
	font-size: var(--cb-fs-md);
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--cb-text-60);
	text-transform: uppercase;
}

.cb-eyebrow span {
	width: 52px;
	height: 1px;
	background: var(--cb-accent);
	flex: none;
}

.cb-eyebrow--center {
	justify-content: center;
}

/* Filete suelto sobre un titular. */
.cb-rule {
	width: 56px;
	height: 1px;
	background: var(--cb-accent);
	margin-bottom: 26px;
}

.cb-rule--sm {
	width: 44px;
	margin-bottom: 22px;
}

.cb-num {
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 200;
	color: var(--cb-accent);
}

/* Etiqueta pequeña espaciada: FICHA DEL SERVICIO, NAVEGACIÓN, DATOS… */
.cb-label {
	font-size: var(--cb-fs-xs);
	letter-spacing: .18em;
	color: var(--cb-text-45);
	margin-bottom: 18px;
	text-transform: uppercase;
}

/* 5. CABECERA DE PÁGINA Y BANDA DE CLAIM ===================================
   Todas las páginas interiores del prototipo abren igual: 170px de aire,
   un H1 gigantesco centrado en peso 200, y debajo una banda con dos líneas
   horizontales y dos verticales que encajonan un párrafo de 860px. */

.cb-page-header {
	padding: 170px 0 60px;
}

.cb-page-header__title,
body.cb-site h1.cb-page-header__title {
	margin: 0;
	font-size: clamp(52px, 9vw, 130px);
	font-weight: 200;
	letter-spacing: .06em;
	text-align: center;
	line-height: 1;
	text-transform: uppercase;
}

/* Titulares largos: el prototipo los baja de tamaño para que no rompan. */
.cb-page-header__title--long {
	font-size: clamp(40px, 6.4vw, 98px);
	letter-spacing: .05em;
	line-height: 1.05;
}

.cb-page-header__title--mid {
	font-size: clamp(46px, 7.6vw, 116px);
}

/* Ficha de servicio: H1 más contenido y con migas encima. */
.cb-page-header--servicio {
	padding: 150px 0 0;
}

.cb-page-header--servicio .cb-page-header__title {
	font-size: clamp(34px, 4.4vw, 64px);
	letter-spacing: .02em;
	line-height: 1.12;
	text-transform: none;
	margin-bottom: 56px;
	text-wrap: balance;
}

.cb-claim {
	border-top: 1px solid var(--cb-line);
	border-bottom: 1px solid var(--cb-line);
}

.cb-claim__grid {
	max-width: var(--cb-max);
	margin: 0 auto;
	padding: 0 var(--cb-gutter);
	display: grid;
	grid-template-columns: 1fr minmax(0, 860px) 1fr;
}

.cb-claim__grid::before,
.cb-claim__grid::after {
	content: "";
	display: block;
}

.cb-claim__grid::before { border-right: 1px solid var(--cb-line); }
.cb-claim__grid::after { border-left: 1px solid var(--cb-line); }

.cb-claim__text {
	padding: 34px clamp(20px, 4vw, 60px);
	text-align: center;
	margin: 0;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	color: var(--cb-text-65);
	grid-column: 2;
}

/* Migas. */
.cb-breadcrumb {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: var(--cb-fs-sm);
	letter-spacing: .08em;
	color: var(--cb-text-45);
	margin-bottom: 40px;
}

.cb-breadcrumb a { color: var(--cb-text-45); }
body.cb-site .cb-breadcrumb a:hover { color: #fff; }
.cb-breadcrumb .cb-current { color: #fff; }

/* 6. BOTONES Y FLECHAS ===================================================== */

/* Sólido granate, versalitas espaciadas. */
.cb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--cb-accent);
	border: none;
	color: #fff;
	padding: 19px 34px;
	font-size: var(--cb-fs-md);
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--cb-t);
	line-height: 1;
	font-family: inherit;
}

body.cb-site .cb-btn:hover,
body.cb-site .cb-btn:focus {
	opacity: .86;
	color: #fff;
}

/* Contorno claro que se rellena de granate. */
.cb-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	padding: clamp(11px, 1.8vh, 17px) clamp(22px, 3vw, 34px);
	font-size: var(--cb-fs-md);
	letter-spacing: normal;
	text-transform: none;
	transition: background var(--cb-t), border-color var(--cb-t);
}

body.cb-site .cb-btn--ghost:hover,
body.cb-site .cb-btn--ghost:focus {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: #fff;
	opacity: 1;
}

/* Contorno que se rellena del gris suave (acciones secundarias). */
.cb-btn--line {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .45);
	padding: 16px 20px;
	font-size: var(--cb-fs-sm);
	letter-spacing: .14em;
	transition: background var(--cb-t);
}

body.cb-site .cb-btn--line:hover,
body.cb-site .cb-btn--line:focus {
	background: var(--cb-bg-soft);
	color: #fff;
	opacity: 1;
}

.cb-btn--line-soft {
	border-color: rgba(255, 255, 255, .25);
	color: var(--cb-text-75);
}

/* Botón de acción de la ficha: texto a la izquierda, icono a la derecha. */
.cb-btn--block {
	width: 100%;
	justify-content: space-between;
	gap: 14px;
	padding: 17px 20px;
	font-size: var(--cb-fs-sm);
	letter-spacing: .14em;
}

/* Botón de formulario: ancho completo, sin flecha. */
.cb-btn--submit {
	width: 100%;
	padding: 19px;
	font-size: var(--cb-fs-md);
	letter-spacing: .18em;
}

/* Enlace de texto con flecha. */
.cb-link-arrow {
	font-size: var(--cb-fs-md);
	color: var(--cb-text-65);
	padding: 12px 6px;
	display: inline-block;
}

body.cb-site .cb-link-arrow:hover { color: #fff; }

.cb-btn--pill {
	padding: 17px 34px;
	font-size: var(--cb-fs-md);
	letter-spacing: .1em;
}

/* Botones circulares de los sliders. */
body.cb-site .cb-round {
	/*
	 * Astra aplica padding: 15px 30px a todos los <button>. Un elemento
	 * border-box no puede ser más estrecho que su padding más el borde, así
	 * que los 52px de ancho se convertían en 62px (de ahí la elipse) y el
	 * hueco para el contenido quedaba en cero, por lo que la flecha
	 * desaparecía. El padding a cero es obligatorio, no cosmético.
	 */
	padding: 0 !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px;
	min-height: 52px;
	max-width: 52px;
	max-height: 52px;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	border: 1px solid var(--cb-text-40);
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	overflow: visible;
	transition: background var(--cb-t), border-color var(--cb-t);
}

body.cb-site .cb-round:hover,
body.cb-site .cb-round:focus {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: #fff;
}

body.cb-site .cb-round--sm {
	width: 46px !important;
	height: 46px !important;
	min-width: 46px;
	min-height: 46px;
	max-width: 46px;
	max-height: 46px;
}

.cb-nav-pair {
	display: flex;
	gap: 14px;
}


/* Iconos en línea (flechas, candado, teléfono, descarga).
   Los atributos fill y stroke de un SVG los pisa cualquier regla CSS, así que
   se declaran aquí. vector-effect mantiene el trazo a 1px real aunque el
   viewBox se escale, que es lo que evita que la línea se quede en nada. */
body.cb-site .cb-icon {
	display: block;
	flex: 0 0 auto;
	overflow: visible;
	max-width: none;
	height: auto;
	color: inherit;
}

body.cb-site .cb-icon path,
body.cb-site .cb-icon rect,
body.cb-site .cb-icon circle {
	fill: none;
	stroke: currentColor;
	vector-effect: non-scaling-stroke;
	stroke-linecap: square;
}

body.cb-site .cb-icon circle[fill] {
	fill: currentColor;
	stroke: none;
}

body.cb-site .cb-round .cb-icon {
	pointer-events: none;
}

/* 7. HERO DE LA HOME =======================================================
   El prototipo no usa slider: la sección mide 590vh, el contenido queda
   sticky y las diapositivas se cruzan según el scroll. Cada tramo de 0.7
   pantallas avanza una diapositiva. Las variables --cb-o / --cb-y las
   escribe el JS en cada slide. */

.cb-hero {
	position: relative;
	height: calc(var(--cb-hero-slides, 8) * 70vh + 100vh);
}

.cb-hero__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.cb-hero__inner {
	max-width: var(--cb-max);
	margin: 0 auto;
	padding: 88px var(--cb-gutter) 74px;
	width: 100%;
	height: 100%;
	display: grid;
	align-content: center;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(30px, 4.5vw, 60px);
	align-items: center;
}

.cb-hero__stack {
	position: relative;
	display: grid;
	min-height: 0;
}

.cb-hero__slide {
	grid-area: 1 / 1;
	align-self: start;
	opacity: var(--cb-o, 0);
	transform: translate3d(0, var(--cb-y, 0), 0);
	will-change: transform, opacity;
	pointer-events: none;
}

.cb-hero__slide.is-active {
	pointer-events: auto;
}

.cb-hero__num {
	font-size: 15px;
	letter-spacing: .2em;
	color: var(--cb-accent);
	margin-bottom: clamp(6px, 1.6vh, 14px);
}

.cb-hero__title,
body.cb-site h1.cb-hero__title {
	margin: 0 0 clamp(8px, 2vh, 18px);
	font-size: clamp(24px, min(3.4vw, 5.6vh), 54px);
	line-height: 1.12;
	font-weight: 200;
	text-wrap: balance;
	letter-spacing: normal;
}

.cb-hero__text {
	margin: 0 0 clamp(14px, 2.6vh, 26px);
	font-size: clamp(13px, min(1.25vw, 2vh), 17px);
	line-height: 1.6;
	color: var(--cb-text-72);
	max-width: 620px;
}

.cb-hero__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

/* Recorte hexagonal de la imagen. */
.cb-hero__media {
	position: relative;
	height: min(74vh, 100%);
	overflow: hidden;
	clip-path: polygon(0% 14%, 100% 0%, 100% 86%, 0% 100%);
}

.cb-hero__layer {
	position: absolute;
	inset: -8% 0;
	background-size: cover;
	background-position: center;
	opacity: var(--cb-o, 0);
	transform: translate3d(0, var(--cb-img-y, 0), 0) scale(var(--cb-scale, 1));
	will-change: transform, opacity;
}

.cb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(54, 56, 69, .22), rgba(54, 56, 69, .05));
	pointer-events: none;
}

/* Paginador de barras. */
.cb-hero__pager {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
	width: min(460px, 70vw);
	z-index: 3;
}

.cb-hero__bullet {
	flex: 1;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.cb-hero__bar {
	height: 2px;
	width: 100%;
	background: rgba(255, 255, 255, .22);
	display: block;
	position: relative;
	overflow: hidden;
}

.cb-hero__bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--cb-fill, 0%);
	background: var(--cb-accent);
	display: block;
}

.cb-hero__bullet em {
	font-size: var(--cb-fs-sm);
	letter-spacing: .14em;
	color: var(--cb-text-40);
	font-style: normal;
	transition: color .4s;
}

.cb-hero__bullet.is-active em {
	color: #fff;
}

/* Indicador de scroll. */
.cb-scrollhint {
	position: absolute;
	bottom: 30px;
	right: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	opacity: var(--cb-hint, 1);
	transition: opacity .4s;
	z-index: 3;
	/* El icono hereda el color: aquí es blanco al 50 %, como el prototipo. */
	color: rgba(255, 255, 255, .5);
}

.cb-scrollhint svg {
	animation: cb-bob 2.4s ease-in-out infinite;
}

.cb-scrollhint span {
	font-size: var(--cb-fs-xxs);
	letter-spacing: .26em;
	color: var(--cb-text-45);
}

/* 8. TARJETAS DE SERVICIO DESTACADO ======================================== */
.cb-card {
	position: relative;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #fff;
	transition: box-shadow var(--cb-t-slow), background var(--cb-t-slow);
}

body.cb-site .cb-card:hover,
body.cb-site .cb-card:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 44px rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
	color: #fff;
}

.cb-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity var(--cb-t-slower);
}

.cb-card:hover .cb-card__bg { opacity: 1; }

.cb-card__veil {
	position: absolute;
	inset: 0;
	background: rgba(54, 56, 69, .62);
	opacity: 0;
	transition: opacity var(--cb-t-slower);
	pointer-events: none;
}

.cb-card:hover .cb-card__veil { opacity: 1; }

.cb-card__body {
	position: relative;
	flex: 1;
	padding: 48px 32px 20px;
	pointer-events: none;
}

.cb-card__num {
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 400;
	margin-bottom: 20px;
}

.cb-card__title {
	margin: 0 0 16px;
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 600;
	line-height: 1.25;
}

.cb-card__text {
	margin: 0;
	font-size: var(--cb-fs-base);
	line-height: 1.75;
	color: var(--cb-text-70);
}

.cb-card__foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--cb-line);
	pointer-events: none;
}

.cb-card__foot span:first-child {
	padding: 20px 32px;
	font-size: var(--cb-fs-base);
	color: var(--cb-text-72);
}

.cb-card__foot span:last-child {
	padding: 20px 26px;
	border-left: 1px solid var(--cb-line);
	display: flex;
	align-items: center;
}

/* 9. MOSAICO DE SERVICIOS ================================================== */
.cb-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.12;
	overflow: hidden;
	border: 1px solid var(--cb-line-18);
	color: #fff;
	transition: box-shadow var(--cb-t-slow), border-color var(--cb-t-slow), filter var(--cb-t-slow);
}

body.cb-site .cb-tile:hover,
body.cb-site .cb-tile:focus-visible {
	box-shadow: 0 0 44px rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .3);
	border-color: rgba(255, 255, 255, .5);
	filter: brightness(1.2) contrast(1.04);
	color: #fff;
}

.cb-tile__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .72;
}

.cb-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(54, 56, 69, .15) 0%, rgba(54, 56, 69, .86) 78%);
}

.cb-tile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 22px 24px;
	z-index: 2;
}

.cb-tile__num {
	font-size: var(--cb-fs-xxs);
	letter-spacing: .2em;
	color: var(--cb-text-55);
	margin-bottom: 8px;
}

.cb-tile__title {
	font-size: var(--cb-fs-base);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

/* Mosaico cuadrado de «otros servicios». */
.cb-tile--square { aspect-ratio: 1 / 1; }
.cb-tile--square .cb-tile__bg { opacity: .55; }

.cb-tile--square::after {
	background: linear-gradient(180deg, rgba(54, 56, 69, .2) 0%, rgba(54, 56, 69, .9) 78%);
}

.cb-tile--square .cb-tile__body { padding: 20px; }

/* 10. CELDAS DE RETÍCULA CON LÍNEAS ======================================== */
.cb-cell {
	padding: clamp(28px, 4vw, 46px) clamp(22px, 3vw, 34px);
	transition: background var(--cb-t-mid);
}

.cb-cell:hover { background: var(--cb-bg-soft); }
.cb-cell--center { text-align: center; }
.cb-cell--sm { padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 32px); }
.cb-cell--xs { padding: 38px 26px; }
.cb-cell--md { padding: 44px 32px; }

.cb-cell__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	opacity: .9;
	margin-bottom: 18px;
	display: block;
}

.cb-cell--center .cb-cell__icon {
	margin-left: auto;
	margin-right: auto;
}

.cb-cell__num {
	font-size: var(--cb-fs-num);
	font-weight: 200;
	color: var(--cb-accent);
	margin-bottom: 16px;
}

.cb-cell__title {
	margin: 0 0 12px;
	font-size: var(--cb-fs-lg);
	font-weight: 600;
	line-height: 1.3;
}

.cb-cell--center .cb-cell__title {
	font-size: var(--cb-fs-quote);
	margin-bottom: 14px;
}

.cb-cell__text {
	margin: 0;
	font-size: var(--cb-fs-base);
	line-height: 1.75;
	color: var(--cb-text-62);
}

.cb-cell--center .cb-cell__text {
	color: var(--cb-text-66);
}

/* 11. BANNER COMPROMISO ==================================================== */
.cb-banner {
	position: relative;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cb-banner__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cb-banner__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cb-banner__veil {
	position: absolute;
	inset: 0;
	background: rgba(54, 56, 69, .58);
}

.cb-banner__title,
body.cb-site h2.cb-banner__title {
	position: relative;
	margin: 0;
	font-size: clamp(48px, 7vw, 104px);
	font-weight: 500;
	letter-spacing: .05em;
	text-align: center;
	padding: 0 var(--cb-gutter);
	line-height: 1;
}

.cb-banner__title i {
	font-weight: 200;
	opacity: .8;
	font-style: normal;
}

.cb-banner__title--long {
	font-size: clamp(40px, 5.6vw, 84px);
	letter-spacing: .04em;
}

/* 12. CAJA DE PRESENTACIÓN ================================================= */
.cb-pitch {
	border: 1px solid var(--cb-line-30);
	padding: 64px var(--cb-gutter);
	text-align: center;
}

.cb-pitch__title {
	margin: 0 0 20px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
	line-height: 1.3;
}

.cb-pitch__text {
	margin: 0 auto;
	max-width: 820px;
	font-size: var(--cb-fs-lg);
	line-height: 1.75;
	color: var(--cb-text-70);
}

/* 13. CIFRAS =============================================================== */
.cb-figure {
	padding: 38px 30px;
}

.cb-figure__num {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 200;
	line-height: 1;
}

.cb-figure__label {
	font-size: var(--cb-fs-xs);
	letter-spacing: .16em;
	color: var(--cb-text-50);
	margin-top: 8px;
	text-transform: uppercase;
}

/* 14. TESTIMONIOS ========================================================== */
.cb-quote {
	margin: 0 0 26px;
	font-size: var(--cb-fs-quote);
	line-height: 1.7;
	color: var(--cb-text-85);
	min-height: 120px;
	font-weight: 300;
}

.cb-quote__author {
	font-size: var(--cb-fs-base);
	font-weight: 600;
}

.cb-quote__role {
	font-size: var(--cb-fs-base);
	color: var(--cb-text-55);
	margin-top: 4px;
}

.cb-quote__counter {
	margin-top: 20px;
	font-size: var(--cb-fs-md);
	color: var(--cb-text-45);
}

/* Rejilla de testimonios (página de obras). */
.cb-testi-cell {
	padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: background var(--cb-t-mid);
}

/* La firma se pega abajo: con citas de distinta longitud, si no, cada nombre
   queda a una altura distinta y la rejilla parece descuadrada. */
.cb-testi-cell > div:last-child {
	margin-top: auto;
}

.cb-testi-cell:hover { background: var(--cb-bg-soft); }

.cb-testi-cell p {
	margin: 0;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	color: var(--cb-text-74);
}

/*
 * Contenedores de Swiper dentro de una retícula.
 *
 * Un hijo de grid tiene min-width: auto, es decir, no puede encogerse por
 * debajo del ancho de su contenido. Swiper mide el contenedor y le pone a cada
 * diapositiva ese ancho en línea (width: 1400px), la columna crece para
 * caberlo, Swiper vuelve a medir… y la sección se sale de la pantalla
 * arrastrando las flechas fuera de la ventana. El min-width: 0 rompe ese
 * bucle: es obligatorio, no cosmético.
 */
.cb-testi__swiper,
.cb-obras__swiper,
.cb-gallery__swiper,
.cb-hero__swiper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.cb-split > *,
.cb-split--wide > *,
.cb-split--text > *,
.cb-split--nav > *,
.cb-grid > *,
.cb-lines > * {
	min-width: 0;
}

.cb-split,
.cb-split--wide,
.cb-split--text,
.cb-split--nav,
.cb-grid,
.cb-lines {
	min-width: 0;
}

/* Y que el propio carrusel no herede un ancho mayor que su columna. */
.cb-testi__swiper .swiper-wrapper,
.cb-obras__swiper .swiper-wrapper,
.cb-gallery__swiper .swiper-wrapper {
	max-width: 100%;
}

.cb-testi__swiper .swiper-slide {
	height: auto;
}

/* 15. OBRAS ================================================================ */
.cb-obra {
	text-align: left;
	padding: 0;
	background: var(--cb-bg);
	border: 1px solid var(--cb-line-20);
	color: #fff;
	cursor: pointer;
	display: block;
	width: 100%;
	transition: border-color var(--cb-t-mid);
}

body.cb-site .cb-obra:hover,
body.cb-site .cb-obra:focus-visible {
	border-color: var(--cb-accent);
	color: #fff;
}

.cb-obra__img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cb-bg-deep);
}

.cb-obra__img img,
.cb-obra__img > div {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}

.cb-obra__body {
	padding: 22px 22px 24px;
	border-top: 1px solid var(--cb-line-20);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cb-obra__title {
	display: block;
	font-size: var(--cb-fs-lg);
	font-weight: 600;
	margin: 0;
}

.cb-obra__tipo {
	display: block;
	font-size: var(--cb-fs-base);
	color: rgba(255, 255, 255, .58);
	margin-top: 6px;
}

.cb-obra__meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cb-line-14);
	font-size: var(--cb-fs-base);
}

.cb-obra__meta span:first-child { color: var(--cb-text-55); }
.cb-obra__meta span:last-child { text-align: right; }
.cb-obra__meta:last-child { border-bottom: none; }

/* Filtros de la lista. */
.cb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.cb-filters a,
.cb-filters button {
	border: 1px solid var(--cb-line-30);
	background: transparent;
	color: var(--cb-text-72);
	padding: 11px 20px;
	font-size: var(--cb-fs-md);
	cursor: pointer;
	font-family: inherit;
	transition: background var(--cb-t), border-color var(--cb-t), color var(--cb-t);
}

body.cb-site .cb-filters a:hover,
body.cb-site .cb-filters button:hover,
body.cb-site .cb-filters .is-active {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: #fff;
}

/* 16. CLIENTES ============================================================= */
.cb-clientes__title {
	margin: 0 0 44px;
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 600;
}

.cb-clientes__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--cb-line);
	border: 1px solid var(--cb-line);
}

.cb-clientes__item {
	background: var(--cb-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 20px;
	min-height: 132px;
	transition: background var(--cb-t-mid);
}

.cb-clientes__item:hover { background: var(--cb-bg-soft); }

.cb-clientes__logo {
	max-width: 100%;
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(2.2);
	opacity: .55;
	transition: opacity var(--cb-t), filter var(--cb-t);
}

.cb-clientes__item:hover .cb-clientes__logo {
	filter: none;
	opacity: 1;
}

.cb-clientes__meta {
	font-size: var(--cb-fs-xs);
	letter-spacing: .1em;
	color: var(--cb-text-45);
	text-align: center;
	text-transform: uppercase;
}

.cb-cliente-card__logo {
	max-height: 54px;
	width: auto;
	object-fit: contain;
	margin-bottom: 16px;
}

/* 17. FICHA DE SERVICIO ==================================================== */
.cb-ficha__label {
	font-size: var(--cb-fs-xs);
	letter-spacing: .18em;
	color: var(--cb-text-45);
	margin-bottom: 18px;
	text-transform: uppercase;
}

.cb-ficha__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--cb-line-12);
	font-size: var(--cb-fs-base);
}

.cb-ficha__row span:first-child { color: var(--cb-text-50); }
.cb-ficha__row span:last-child { text-align: right; }
.cb-ficha__row:last-child { border-bottom: none; }

.cb-ficha__head {
	padding: 34px 34px 28px;
	border-bottom: 1px solid var(--cb-line-24);
}

.cb-ficha__actions {
	padding: 30px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cb-ficha__body {
	padding: clamp(26px, 4vw, 52px) clamp(24px, 4vw, 52px) clamp(26px, 4vw, 46px);
	border-right: 1px solid var(--cb-line-24);
}

.cb-ficha__col {
	display: flex;
	flex-direction: column;
}

/* Lista de filas con línea superior (perfiles, «qué buscamos»). */
.cb-rows > * {
	padding: 14px 0;
	border-top: 1px solid var(--cb-line);
	font-size: var(--cb-fs-base);
}

.cb-rows > *:last-child {
	border-bottom: 1px solid var(--cb-line);
}

/* Pasos numerados. */
.cb-steps {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cb-steps > * {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: start;
}

.cb-steps b {
	font-size: var(--cb-fs-lg);
	font-weight: 200;
	color: var(--cb-accent);
}

.cb-steps span {
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-70);
}

/* 18. GALERÍA ============================================================== */
.cb-gallery {
	border: 1px solid var(--cb-line-24);
	padding: 22px;
}

.cb-gallery__stage {
	aspect-ratio: 16 / 8;
	background-color: var(--cb-bg-deep);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.cb-gallery__stage img,
.cb-gallery__stage .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cb-gallery__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 6px 4px;
	flex-wrap: wrap;
}

.cb-gallery__meta {
	font-size: var(--cb-fs-md);
	color: var(--cb-text-55);
}

.cb-gallery__count {
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-45);
}

.cb-gallery__nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Miniaturas. */
.cb-thumbs {
	display: flex;
	gap: 12px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--cb-line-18);
	overflow-x: auto;
}

.cb-thumbs button {
	width: 96px;
	height: 64px;
	border: 1px solid var(--cb-line-24);
	padding: 0;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	opacity: .55;
	flex: none;
	transition: opacity var(--cb-t), border-color var(--cb-t);
}

body.cb-site .cb-thumbs button:hover,
body.cb-site .cb-thumbs button.is-active {
	opacity: 1;
	border-color: var(--cb-accent);
}

/* 19. ACORDEÓN (FAQ) ======================================================= */
.cb-acc {
	border-top: 1px solid var(--cb-line-30);
}

.cb-acc__item {
	border-bottom: 1px solid var(--cb-line-18);
}

.cb-acc__head {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 30px;
	background: none;
	border: none;
	color: #fff;
	text-align: left;
	padding: 22px 0;
	cursor: pointer;
	font-size: var(--cb-fs-base);
	font-weight: 600;
	line-height: 1.35;
	font-family: inherit;
}

body.cb-site .cb-acc__head:hover { color: #fff; }

/* La marca es una línea de 34px que se pone granate al abrir. */
.cb-acc__icon {
	width: 34px;
	height: 1px;
	background: var(--cb-line-30);
	display: block;
	transition: background var(--cb-t);
}

.cb-acc__item.is-open .cb-acc__icon,
.cb-acc__head[aria-expanded="true"] .cb-acc__icon {
	background: var(--cb-accent);
}

.cb-acc__panel {
	display: none;
}

.cb-acc__item.is-open .cb-acc__panel {
	display: block;
}

.cb-acc__inner {
	margin: 0 0 26px;
	max-width: 900px;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	color: var(--cb-text-66);
}

.cb-acc__inner p {
	margin: 0 0 16px;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	color: var(--cb-text-66);
}

.cb-acc__inner p:last-child { margin-bottom: 0; }

/* 20. FORMULARIOS ==========================================================
   Campos con borde completo de 1px al 40 %, etiqueta en versalitas de 13px
   con letter-spacing .14em encima, y foco en granate. */

.cb-form {
	display: grid;
	gap: 26px;
}

.cb-form__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 46px;
}

.cb-form__head h2 {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
}

.cb-form__head p {
	margin: 0;
	font-size: var(--cb-fs-base);
	color: var(--cb-text-60);
	max-width: 520px;
}

.cb-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 26px;
}

.cb-form__row--3 {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cb-form__row--wide {
	grid-template-columns: 1.4fr 1fr 1fr;
}

.cb-field {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.cb-field > label,
.cb-field > span,
.cb-field__label {
	font-size: var(--cb-fs-sm);
	letter-spacing: .14em;
	color: var(--cb-text-60);
	text-transform: uppercase;
	font-weight: 300;
}

.cb-field input[type="text"],
.cb-field input[type="email"],
.cb-field input[type="tel"],
.cb-field input[type="number"],
.cb-field input[type="url"],
.cb-field input[type="date"],
.cb-field input[type="password"],
.cb-field textarea,
.cb-field select,
.cb-form input[type="text"],
.cb-form input[type="email"],
.cb-form input[type="tel"],
.cb-form input[type="number"],
.cb-form input[type="url"],
.cb-form input[type="date"],
.cb-form input[type="password"],
.cb-form textarea,
.cb-form select {
	background: transparent;
	border: 1px solid var(--cb-text-40);
	border-radius: 0;
	color: #fff;
	padding: 15px 16px;
	font-size: var(--cb-fs-base);
	line-height: 1.4;
	outline: none;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-shadow: none;
	transition: border-color var(--cb-t);
}

.cb-field select,
.cb-form select {
	background-color: var(--cb-bg);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .55) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.cb-field textarea,
.cb-form textarea {
	resize: vertical;
	line-height: 1.6;
}

.cb-field input:focus,
.cb-field textarea:focus,
.cb-field select:focus,
.cb-form input:focus,
.cb-form textarea:focus,
.cb-form select:focus {
	border-color: var(--cb-accent);
	box-shadow: none;
	outline: none;
}

.cb-field input[type="file"],
.cb-form input[type="file"] {
	background: transparent;
	border: 1px solid var(--cb-text-40);
	color: var(--cb-text-70);
	padding: 14px 16px;
	font-size: var(--cb-fs-base);
	outline: none;
	width: 100%;
	border-radius: 0;
}

.cb-field input.cb-error,
.cb-form input.cb-error,
.cb-form textarea.cb-error,
.cb-form select.cb-error {
	border-color: var(--cb-accent-soft);
}

/* Consentimiento. */
.cb-check {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--cb-fs-sm);
	letter-spacing: .1em;
	color: var(--cb-text-60);
	text-transform: uppercase;
	cursor: pointer;
}

.cb-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cb-accent);
	flex: none;
	margin: 0;
}

.cb-check a,
.cb-check button {
	background: none;
	border: none;
	padding: 0;
	color: #fff;
	font-weight: 600;
	font-size: var(--cb-fs-sm);
	letter-spacing: .1em;
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
}

/* Mensajes. */
.cb-form__msg {
	border: 1px solid var(--cb-accent);
	padding: 44px var(--cb-gutter);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cb-form__msg strong {
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 500;
}

.cb-form__msg p {
	margin: 0;
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-68);
}

.cb-form__msg--ko {
	border-color: var(--cb-accent-soft);
}

.cb-form__error {
	font-size: var(--cb-fs-sm);
	letter-spacing: .06em;
	color: var(--cb-accent-soft);
}

/* Honeypot: fuera de pantalla, nunca display:none. */
.cb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* Astra fija una altura a los controles de formulario (select sobre todo).
   Con padding vertical propio, el hueco interior se queda por debajo del
   cuerpo de letra y el texto aparece cortado por la mitad. La altura la
   calcula el contenido, siempre. */
body.cb-site .cb-form input,
body.cb-site .cb-form select,
body.cb-site .cb-form textarea,
body.cb-site .cb-field input,
body.cb-site .cb-field select,
body.cb-site .cb-field textarea,
body.cb-site .cb-doc input {
	height: auto !important;
	min-height: 0;
	max-height: none;
	line-height: 1.4;
	box-sizing: border-box;
}

body.cb-site .cb-form select,
body.cb-site .cb-field select {
	/* Alto real del control: 15px + 15px de padding + una línea de texto. */
	min-height: calc(1.4em + 32px);
}

body.cb-site .cb-form textarea,
body.cb-site .cb-field textarea {
	min-height: 150px;
}

/* Las opciones desplegadas las pinta el sistema, no la página: hay que
   darles fondo o en Windows salen blancas sobre blanco. */
body.cb-site .cb-form select option,
body.cb-site .cb-field select option {
	background: var(--cb-bg);
	color: #fff;
}

/* 21. MODALES ============================================================== */
.cb-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.cb-modal.is-open { display: flex; }

.cb-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(20, 21, 27, .75);
	backdrop-filter: blur(6px);
}

.cb-modal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	background: var(--cb-bg);
	border: 1px solid var(--cb-line-24);
	padding: clamp(26px, 4vw, 52px) clamp(24px, 4vw, 48px);
	text-align: left;
	max-height: 86vh;
	overflow-y: auto;
}

.cb-modal__box--wide {
	max-width: 940px;
	max-height: 82vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cb-modal__box--obra {
	max-width: 1080px;
	max-height: 86vh;
	padding: 0;
	overflow-y: auto;
}

/*
 * Cerrar. En el prototipo es una × suelta, sin fondo.
 *
 * Astra pinta el color de marca en el fondo de todo <button>, y aquí lo hacía
 * con más peso que nuestra regla: salía un cuadrado granate estrecho con la ×
 * dentro. De ahí los !important, y de ahí también el tamaño fijo: sin él, el
 * padding de Astra deformaba la caja igual que pasaba con las flechas
 * circulares de los carruseles.
 */
body.cb-site .cb-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0;

	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: var(--cb-text-60);
	font-size: 30px;
	font-weight: 200;
	line-height: 1;
	cursor: pointer;
	transition: color var(--cb-t);
}

body.cb-site .cb-modal__close:hover,
body.cb-site .cb-modal__close:focus {
	background: none !important;
	background-color: transparent !important;
	color: #fff;
	transform: none;
}

body.cb-site .cb-modal__close:focus-visible {
	outline: 1px solid var(--cb-line-30);
	outline-offset: -6px;
}

.cb-modal__title {
	margin: 0 0 14px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 200;
}

.cb-modal__text {
	margin: 0 0 30px;
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-68);
}

/* Pestañas del modal legal. */
.cb-tabs {
	display: flex;
	border-bottom: 1px solid var(--cb-line-18);
	flex-wrap: wrap;
}

.cb-tabs button {
	flex: 1;
	background: transparent;
	border: none;
	border-right: 1px solid var(--cb-line-18);
	color: #fff;
	padding: 22px 14px;
	font-size: var(--cb-fs-md);
	cursor: pointer;
	transition: background var(--cb-t);
	font-family: inherit;
}

body.cb-site .cb-tabs button:hover,
body.cb-site .cb-tabs button.is-active {
	background: var(--cb-bg-soft);
}

.cb-legal {
	padding: 44px 48px;
	overflow-y: auto;
}

.cb-legal h3 {
	margin: 0 0 22px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 200;
}

.cb-legal p {
	margin: 0 0 18px;
	font-size: var(--cb-fs-base);
	line-height: 1.8;
	color: var(--cb-text-70);
}

/* Acceso a documentación. */
.cb-doc {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cb-doc input[type="password"] {
	background: transparent;
	border: 1px solid var(--cb-text-40);
	color: #fff;
	padding: 15px 16px;
	font-size: var(--cb-fs-base);
	outline: none;
	border-radius: 0;
	width: 100%;
}

.cb-doc input[type="password"]:focus {
	border-color: var(--cb-accent);
}

.cb-doc__error {
	font-size: var(--cb-fs-base);
	color: var(--cb-accent-soft);
}

.cb-doc__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * Fila de documento. Ojo con el selector: escrito como «.cb-doc__links a»
 * alcanzaba también al botón ABRIR de dentro de cada fila —(0,1,1) le gana a
 * .cb-btn, que es (0,1,0)— y lo convertía en una barra granate a todo el ancho
 * con borde. Solo los hijos directos, y nunca un .cb-btn.
 */
.cb-doc__links > a:not(.cb-btn) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid rgba(255, 255, 255, .35);
	padding: 20px 22px;
	transition: background var(--cb-t);
}

body.cb-site .cb-doc__links > a:not(.cb-btn):hover {
	background: var(--cb-bg-soft);
	color: #fff;
}

/* Ficha de documento: título y nota a la izquierda, botón a la derecha. */
.cb-doc__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 32px);
	border: 1px solid var(--cb-line-24);
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 26px);
}

.cb-doc__card > div {
	min-width: 0;
}

.cb-doc__card .cb-h4 {
	font-size: clamp(18px, 2vw, 21px);
	font-weight: 600;
}

.cb-doc__card .cb-btn {
	flex: none;
	padding: 15px 26px;
}

@media (max-width: 700px) {
	.cb-doc__card {
		flex-direction: column;
		align-items: stretch;
	}

	.cb-doc__card .cb-btn {
		width: 100%;
	}
}

.cb-doc__links strong {
	display: block;
	font-size: var(--cb-fs-base);
	font-weight: 300;
	margin-bottom: 5px;
}

.cb-doc__links small {
	display: block;
	font-size: var(--cb-fs-base);
	color: var(--cb-text-55);
}

/* 22. FOOTER Y MENÚS DE ASTRA ==============================================
   Israel monta el header y el footer con el constructor de Astra: aquí solo
   se le da el aspecto del prototipo a lo que Astra pinta. */

body.cb-site .ast-primary-header-bar,
body.cb-site .site-header,
body.cb-site .ast-above-header,
body.cb-site .ast-below-header {
	background: rgba(54, 56, 69, .9) !important;
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--cb-line);
	box-shadow: none;
}

body.cb-site .main-header-menu,
body.cb-site .main-header-menu .menu-link,
body.cb-site.ast-header-break-point .main-header-menu .menu-link {
	background: transparent;
	color: #fff;
	/*
	 * En el prototipo los enlaces del menú van a 18px, peso 300 y en caja
	 * normal: «Servicios», no «SERVICIOS». Las versalitas y el espaciado extra
	 * los mete la tipografía del menú del personalizador de Astra, y aquí se
	 * anulan porque las mayúsculas son cosa de los dos botones, no del menú.
	 */
	font-size: var(--cb-fs-base) !important;
	font-weight: 300 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}

body.cb-site .main-header-menu > .menu-item > .menu-link {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--cb-t);
}

/*
 * Astra estira los enlaces del menú a toda la altura de la barra para que el
 * hover cubra la franja entera. En un enlace normal no se nota, pero los dos
 * botones llevan borde, y ese borde salía del techo al suelo del header en vez
 * de dibujar una caja de su tamaño. De ahí el height auto.
 */
body.cb-site .main-header-menu > .cb-lock,
body.cb-site .main-header-menu > .cb-call {
	align-items: center;
	align-self: center;
}

body.cb-site .cb-lock > .menu-link,
body.cb-site .cb-call > .menu-link {
	height: auto !important;
	min-height: 0 !important;
	line-height: 1 !important;
	font-size: var(--cb-fs-sm) !important;
	font-weight: 500 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
}

body.cb-site .main-header-menu > .current-menu-item > .menu-link,
body.cb-site .main-header-menu > .current_page_item > .menu-link,
body.cb-site .main-header-menu > .menu-item > .menu-link:hover {
	border-bottom-color: var(--cb-accent);
	color: #fff;
}

/*
 * El menú del prototipo separa los elementos con un gap de 24px.
 *
 * Ojo con el selector: ast-desktop y ast-header-break-point son clases del
 * propio <body>, no de un elemento de dentro. Escrito con espacio —
 * «body.cb-site .ast-desktop» — el selector no casa con nada y la regla no se
 * aplica nunca. Va concatenado.
 */
body.cb-site:not(.ast-header-break-point) .main-header-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

body.cb-site:not(.ast-header-break-point) .main-header-menu > .menu-item > .menu-link {
	padding-left: 0;
	padding-right: 0;
}

/* El subrayado de la página activa no se le pone a los dos botones. */
body.cb-site .main-header-menu > .cb-lock.current-menu-item > .menu-link,
body.cb-site .main-header-menu > .cb-call.current-menu-item > .menu-link {
	border-color: rgba(255, 255, 255, .45);
}

body.cb-site .main-header-menu > .cb-call.current-menu-item > .menu-link {
	border-color: var(--cb-accent);
}

/* El candado de Documentación. */
body.cb-site .cb-lock > .menu-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, .45);
	padding: 12px 18px !important;
	transition: background var(--cb-t), border-color var(--cb-t);
}

body.cb-site .cb-lock > .menu-link::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='4' y='10' width='16' height='11' rx='1'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='4' y='10' width='16' height='11' rx='1'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
}

body.cb-site .cb-lock > .menu-link:hover {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: #fff;
}

/*
 * El segundo botón del header: «Llamar», relleno de granate. En el prototipo
 * los dos van juntos a la derecha del menú, el de documentación con contorno y
 * este macizo. Se le pone la clase cb-call al elemento del menú.
 */
body.cb-site .cb-call > .menu-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--cb-accent);
	border: 1px solid var(--cb-accent);
	color: #fff;
	padding: 13px 20px !important;
	transition: transform var(--cb-t), background var(--cb-t);
}

body.cb-site .cb-call > .menu-link::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/></svg>") center / contain no-repeat;
}

body.cb-site .cb-call > .menu-link:hover,
body.cb-site .cb-call > .menu-link:focus {
	transform: translateY(-2px);
	background: var(--cb-accent);
	color: #fff;
}

/* Los dos botones no llevan el subrayado de página activa del resto del menú. */
body.cb-site .cb-lock > .menu-link,
body.cb-site .cb-call > .menu-link {
	border-bottom-width: 1px;
}

body.cb-site .main-header-menu > .cb-lock,
body.cb-site .main-header-menu > .cb-call {
	display: flex;
	align-items: center;
}

/* En el menú desplegado del móvil los dos ocupan todo el ancho. */
body.cb-site.ast-header-break-point .cb-lock > .menu-link,
body.cb-site.ast-header-break-point .cb-call > .menu-link {
	justify-content: center;
	width: 100%;
	font-size: 15px;
	padding: 16px 18px;
	margin: 8px 0;
}

/* Menú desplegado en móvil. */
body.cb-site .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.cb-site .ast-mobile-header-wrap,
body.cb-site .main-navigation ul.ast-desktop-toggle-menu {
	background: var(--cb-bg) !important;
	border-top: 1px solid var(--cb-line);
}

body.cb-site.ast-header-break-point .main-header-menu .menu-item > .menu-link {
	font-size: var(--cb-fs-quote);
	padding: 16px 0;
	border-bottom: 1px solid var(--cb-line-14);
}

/* Footer. */
body.cb-site .site-footer,
body.cb-site .ast-footer-overlay,
body.cb-site .site-primary-footer-wrap,
body.cb-site .site-above-footer-wrap,
body.cb-site .site-below-footer-wrap {
	background: var(--cb-bg) !important;
	color: #fff;
}

body.cb-site .site-footer {
	border-top: 1px solid var(--cb-line);
}

body.cb-site .site-primary-footer-wrap {
	padding: 64px 0;
}

body.cb-site .site-below-footer-wrap {
	padding: 22px 0;
	border-top: 1px solid var(--cb-line);
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-40);
}

body.cb-site .site-footer a {
	color: rgba(255, 255, 255, .8);
	font-size: var(--cb-fs-base);
}

body.cb-site .site-footer a:hover {
	color: var(--cb-accent);
}

body.cb-site .site-footer .widget-title,
body.cb-site .site-footer h2,
body.cb-site .site-footer h3 {
	font-size: var(--cb-fs-xs);
	letter-spacing: .18em;
	color: var(--cb-text-45);
	margin-bottom: 6px;
	font-weight: 300;
	text-transform: uppercase;
}

body.cb-site .site-footer p {
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-55);
}

body.cb-site .site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Menú legal del pie. */
.cb-legal-menu {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--cb-fs-md);
	color: var(--cb-text-70);
}

.cb-legal-menu a,
.cb-legal-menu button {
	font-size: var(--cb-fs-md);
	color: var(--cb-text-70);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.cb-legal-menu a:hover,
.cb-legal-menu button:hover {
	color: var(--cb-accent);
}

/* 23. ANIMACIONES Y REVEALS ================================================ */
@keyframes cb-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(7px); }
}

@keyframes cb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes cb-drift {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-16px) rotate(2deg); }
}

.cb-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s var(--cb-ease), transform .9s var(--cb-ease);
}

.cb-reveal.cb-in {
	opacity: 1;
	transform: none;
}

.cb-parallax { will-change: transform; }

.cb-marquee {
	overflow: hidden;
	white-space: nowrap;
}

.cb-marquee > * {
	display: inline-flex;
	animation: cb-marquee 28s linear infinite;
}

/* 24. UTILIDADES =========================================================== */
.cb-line {
	height: 1px;
	background: var(--cb-line);
	border: none;
	margin: 0;
}

.cb-mt-60 { margin-top: 60px; }
.cb-mt-100 { margin-top: 100px; }
.cb-mt-110 { margin-top: 110px; }
.cb-pt-0 { padding-top: 0 !important; }
.cb-gap-24 { gap: 24px; }
.cb-flex { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cb-col { display: flex; flex-direction: column; gap: 10px; }
.cb-relative { position: relative; }
.cb-full { width: 100%; }

.cb-img--4x3 {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, .2);
}

.cb-map {
	position: relative;
	min-height: 420px;
}

.cb-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9);
}

.cb-tel-big {
	font-size: var(--cb-fs-tel);
	font-weight: 400;
	line-height: 1.2;
}

.cb-tel-mid {
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 400;
}

.cb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Hexágono de la landing. */
.cb-hex {
	clip-path: polygon(0% 0%, 50% 26%, 100% 0%, 100% 68%, 50% 100%, 0% 68%);
}

.cb-hex--ghost {
	position: absolute;
	width: min(34vw, 480px);
	aspect-ratio: 1 / 1.02;
	border: 1px solid var(--cb-line-30);
	animation: cb-drift 13s ease-in-out infinite;
}

/* 25. RESPONSIVE ===========================================================
   El prototipo solo tiene dos cortes: 900px para apilar las columnas y
   768px para el cuerpo de texto. Se respeta tal cual. */

@media (max-width: 900px) {
	.cb-stack,
	[data-stack],
	.cb-split,
	.cb-split--wide,
	.cb-split--text,
	.cb-split--nav,
	.cb-hero__inner,
	.cb-form__row--wide {
		grid-template-columns: 1fr !important;
		gap: 34px !important;
	}

	.cb-stack > *,
	[data-stack] > *,
	.cb-split > *,
	.cb-split--wide > * {
		border-right: none !important;
		border-left: none !important;
	}

	.cb-ficha__body {
		border-right: none !important;
		border-bottom: 1px solid var(--cb-line-24);
	}
}

@media (max-width: 768px) {
	body.cb-site p {
		font-size: 17px;
		line-height: 1.75;
	}

	.cb-page-header { padding: 120px 0 40px; }
	.cb-page-header--servicio { padding: 110px 0 0; }

	.cb-section,
	.cb-section--80,
	.cb-section--90,
	.cb-section--110,
	.cb-section--both {
		padding-top: var(--cb-s70);
	}

	.cb-section--both { padding-bottom: var(--cb-s70); }

	.cb-pitch { padding: 40px 24px; }
	.cb-card { min-height: 440px; }
	.cb-card__body { padding: 34px 24px 18px; }
	.cb-card__foot span:first-child { padding: 18px 24px; }
	.cb-card__foot span:last-child { padding: 18px 20px; }
	.cb-banner { height: 260px; }
	.cb-modal { padding: 16px; }
	.cb-legal { padding: 28px 22px; }

	.cb-ficha__head,
	.cb-ficha__actions {
		padding: 26px 22px;
	}

	.cb-gallery { padding: 12px; }
	.cb-quote { font-size: 19px; min-height: 0; }
	.cb-tel-big { font-size: 28px; }
	.cb-figure { padding: 28px 22px; }
	.cb-thumbs { padding: 12px 16px; }
}

/* El muro de logotipos baja de 6 a 4 y a 2. */
@media (max-width: 1100px) {
	.cb-clientes__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 700px) {
	.cb-clientes__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cb-claim__grid {
		grid-template-columns: 1fr;
	}

	.cb-claim__grid::before,
	.cb-claim__grid::after {
		display: none;
	}

	.cb-claim__text {
		grid-column: 1;
		padding: 26px 0;
	}

	.cb-hero { height: auto; }

	.cb-hero__sticky {
		position: relative;
		height: auto;
		min-height: 100vh;
	}

	.cb-hero__inner { padding-top: 110px; }
	.cb-hero__media { height: 46vh; }
	.cb-scrollhint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cb-scrollhint svg,
	.cb-marquee > *,
	.cb-hex--ghost {
		animation: none;
	}

	.cb-hero { height: auto; }

	.cb-hero__sticky {
		position: relative;
		height: auto;
		min-height: 100vh;
	}
}

/* Impresión de la ficha de servicio. */
@media print {
	body.cb-site {
		background: #fff;
		color: #000;
	}

	.cb-noprint,
	[data-noprint],
	.site-header,
	.site-footer,
	.cb-modal {
		display: none !important;
	}

	body.cb-site,
	body.cb-site p,
	body.cb-site h1,
	body.cb-site h2,
	body.cb-site h3 {
		color: #000;
	}
}

/* ==========================================================================
   26. MODAL DE FICHA DE OBRA
   Las obras no tienen página propia: se consultan en este modal. Medidas del
   prototipo (Casabiel Obras).
   ========================================================================== */

.cb-obras__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}

body.cb-modal-open {
	overflow: hidden;
}

.cb-modal--obra .cb-modal__veil {
	background: rgba(20, 21, 27, .78);
}

.cb-obra-modal__stage {
	position: relative;
	aspect-ratio: 16 / 7;
	background-color: var(--cb-bg-deep);
}

.cb-obra-modal__foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: background-image .3s;
}

.cb-obra-modal__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	background: linear-gradient(180deg, rgba(54, 56, 69, 0) 0%, rgba(54, 56, 69, .9) 100%);
}

.cb-obra-modal__count {
	font-size: var(--cb-fs-base);
	color: var(--cb-text-75);
}

.cb-obra-modal__bar .cb-round {
	background: rgba(54, 56, 69, .5);
	border-color: rgba(255, 255, 255, .45);
}

.cb-obra-modal__body {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(28px, 4vw, 48px);
	padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 44px) clamp(28px, 4vw, 46px);
}

.cb-obra-modal__title,
body.cb-site h3.cb-obra-modal__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 500;
	line-height: 1.2;
}

.cb-obra-modal__tipo {
	font-size: var(--cb-fs-base);
	color: var(--cb-text-60);
	margin-bottom: 26px;
}

.cb-obra-modal__cita {
	margin: 30px 0 0;
	padding: 22px 24px;
	border-left: 1px solid var(--cb-accent);
	background: rgba(255, 255, 255, .03);
}

.cb-obra-modal__cita p {
	margin: 0 0 10px;
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-82);
}

.cb-obra-modal__cita footer {
	font-size: var(--cb-fs-md);
	color: var(--cb-text-55);
}

@media (max-width: 900px) {
	.cb-obra-modal__body {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   27. FORMULARIOS DEL PLUGIN (.cbf)
   El plugin trae su propia hoja, pero esa se carga antes y la caché del
   hosting la deja atrás con facilidad. El aspecto definitivo del formulario
   se define AQUÍ, en la última hoja del sitio, con los valores del prototipo:
   caja completa de 1px al 40 %, etiqueta en versalitas de 13px con
   letter-spacing .14em encima, foco en granate y botón a todo el ancho.
   ========================================================================== */

body.cb-site .cbf {
	font-family: var(--cb-font);
	color: #fff;
}

/* Retícula de seis columnas: full = 6, half = 3, third = 2. */
body.cb-site .cbf__fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 26px;
}

body.cb-site .cbf__field {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	grid-column: span 6;
}

body.cb-site .cbf__field--full { grid-column: span 6; }
body.cb-site .cbf__field--half { grid-column: span 3; }
body.cb-site .cbf__field--third { grid-column: span 2; }

body.cb-site .cbf__label {
	font-size: var(--cb-fs-sm);
	font-weight: 300;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--cb-text-60);
	margin: 0;
}

body.cb-site .cbf__req {
	color: var(--cb-accent);
}

/* ---------------------------------------------------------- Controles */

body.cb-site .cbf input[type="text"],
body.cb-site .cbf input[type="email"],
body.cb-site .cbf input[type="tel"],
body.cb-site .cbf input[type="number"],
body.cb-site .cbf input[type="url"],
body.cb-site .cbf input[type="date"],
body.cb-site .cbf select,
body.cb-site .cbf textarea {
	/*
	 * La altura la decide el contenido. Astra y su addon fijan una altura a
	 * los controles de formulario y, con padding vertical propio, el hueco
	 * interior se queda por debajo del cuerpo de letra: el valor elegido de un
	 * select sale cortado por la mitad. De ahí el !important, que aquí no es
	 * pereza sino la única forma de ganar a una regla que llega después.
	 */
	height: auto !important;
	min-height: 0;
	max-height: none;
	box-sizing: border-box !important;

	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 15px 16px;

	font-family: inherit;
	font-size: var(--cb-fs-base);
	font-weight: 300;
	line-height: 1.4;
	color: #fff;

	background: transparent;
	border: 1px solid var(--cb-text-40);
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--cb-t);
}

body.cb-site .cbf input:focus,
body.cb-site .cbf select:focus,
body.cb-site .cbf textarea:focus {
	border-color: var(--cb-accent);
	box-shadow: none !important;
	outline: none;
}

body.cb-site .cbf input::placeholder,
body.cb-site .cbf textarea::placeholder {
	color: var(--cb-text-30);
	opacity: 1;
}

body.cb-site .cbf textarea {
	min-height: 150px;
	line-height: 1.6;
	resize: vertical;
}

/* Select: flecha propia y hueco suficiente para una línea completa. */
body.cb-site .cbf select {
	/* 15 + 15 de padding + una línea de texto: nunca corta el valor. */
	min-height: calc(1.4em + 32px);
	padding-right: 44px;
	cursor: pointer;

	background-color: var(--cb-bg);
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .6) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, .6) 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
	background-size: 7px 7px, 7px 7px;
	background-repeat: no-repeat;

	/* Sin esto, Firefox y Windows recortan la línea de texto del valor. */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/*
 * El desplegable lo pinta el sistema operativo, no la página. Sin fondo y
 * color explícitos sale blanco sobre blanco en Windows y negro sobre negro en
 * algunos Linux.
 */
body.cb-site .cbf select option,
body.cb-site .cbf select optgroup {
	background: var(--cb-bg);
	color: #fff;
	font-size: var(--cb-fs-md);
	padding: 6px 10px;
}

body.cb-site .cbf input[type="file"] {
	width: 100%;
	padding: 14px 16px;
	font-size: var(--cb-fs-md);
	color: var(--cb-text-70);
	background: transparent;
	border: 1px solid var(--cb-text-40);
	border-radius: 0;
	height: auto !important;
}

body.cb-site .cbf input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 18px;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--cb-bg-soft);
	border: 1px solid var(--cb-line-30);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--cb-t);
}

body.cb-site .cbf input[type="file"]::file-selector-button:hover {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
}

/* ------------------------------------------------------ Consentimiento */

body.cb-site .cbf__consent {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--cb-fs-sm);
	letter-spacing: .1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--cb-text-60);
	cursor: pointer;
}

body.cb-site .cbf__consent input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	margin: 0;
	padding: 0;
	flex: none;
	accent-color: var(--cb-accent);
	appearance: auto;
	-webkit-appearance: checkbox;
	border-radius: 0;
}

body.cb-site .cbf__consent a,
body.cb-site .cbf__consent button {
	color: #fff;
	font-weight: 600;
	font-size: var(--cb-fs-sm);
	letter-spacing: .1em;
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Opciones sueltas (radios y casillas múltiples). */
body.cb-site .cbf__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding-top: 4px;
}

body.cb-site .cbf__option {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--cb-fs-base);
	color: var(--cb-text-72);
	cursor: pointer;
}

body.cb-site .cbf__option input {
	width: 16px !important;
	height: 16px !important;
	margin: 0;
	flex: none;
	accent-color: var(--cb-accent);
}

/* ------------------------------------------------------------- Errores */

body.cb-site .cbf__error {
	display: block;
	font-size: var(--cb-fs-sm);
	letter-spacing: .04em;
	color: var(--cb-accent-soft);
	min-height: 0;
}

body.cb-site .cbf__field--error input,
body.cb-site .cbf__field--error select,
body.cb-site .cbf__field--error textarea {
	border-color: var(--cb-accent-soft);
}

/* -------------------------------------------------------------- Envío */

body.cb-site .cbf__actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 8px;
}

body.cb-site .cbf__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	padding: 19px 34px !important;
	height: auto !important;

	font-family: inherit;
	font-size: var(--cb-fs-md);
	font-weight: 400;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;

	background: var(--cb-accent) !important;
	border: none;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: opacity var(--cb-t);
}

body.cb-site .cbf__submit:hover,
body.cb-site .cbf__submit:focus {
	opacity: .86;
	background: var(--cb-accent) !important;
	color: #fff;
	transform: none;
}

body.cb-site .cbf__submit:disabled {
	opacity: .55;
	cursor: progress;
}

body.cb-site .cbf__arrow {
	display: block;
	flex: none;
	max-width: none;
	height: auto;
	overflow: visible;
	transition: transform var(--cb-t);
}

body.cb-site .cbf__arrow path {
	fill: none;
	stroke: currentColor;
	vector-effect: non-scaling-stroke;
}

body.cb-site .cbf__submit:hover .cbf__arrow {
	transform: translateX(4px);
}

body.cb-site .cbf__status {
	margin: 0;
	font-size: var(--cb-fs-md);
	color: var(--cb-text-55);
}

/* Mensajes de resultado: caja con borde granate, como el prototipo. */
body.cb-site .cbf__msg {
	margin: 0 0 26px;
	padding: 44px var(--cb-gutter);
	border: 1px solid var(--cb-accent);
	border-left-width: 1px;
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-68);
	background: none;
}

body.cb-site .cbf__msg--ko {
	border-color: var(--cb-accent-soft);
}

/* Honeypot: fuera de pantalla, nunca display:none. */
body.cb-site .cbf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cabecera propia del plugin: la del tema ya pinta el titular. */
body.cb-site .cbf__head {
	margin-bottom: 34px;
}

body.cb-site .cbf__title {
	margin: 0 0 14px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
	line-height: 1.3;
}

body.cb-site .cbf__text {
	margin: 0;
	max-width: 520px;
	font-size: var(--cb-fs-base);
	line-height: 1.7;
	color: var(--cb-text-60);
}

@media (max-width: 900px) {
	body.cb-site .cbf__fields {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	body.cb-site .cbf__field,
	body.cb-site .cbf__field--full,
	body.cb-site .cbf__field--half,
	body.cb-site .cbf__field--third {
		grid-column: 1;
	}
}

/* ==========================================================================
   28. DATOS DE CONTACTO Y PALABRAS LARGAS
   Un email o una URL no tienen dónde partirse: en una columna estrecha se
   salen de su celda por mucho que la celda tenga overflow. Se le dice al
   navegador que puede partir dentro de la palabra cuando no hay otra opción.
   ========================================================================== */

body.cb-site {
	overflow-wrap: break-word;
}

.cb-dato {
	display: block;
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	/* anywhere permite partir la palabra y además deja que la celda se
	   estreche; break-word por sí solo no reduce el ancho mínimo. */
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: none;
}

a.cb-dato:hover {
	color: var(--cb-accent);
}

.cb-cell--dato {
	min-width: 0;
}

/* Lo mismo donde puede caer un dato largo: fichas, tablas del modal, footer. */
.cb-ficha__row span,
.cb-obra__meta span,
.cb-clientes__meta,
.cb-doc__links strong,
.cb-doc__links small,
body.cb-site .site-footer a,
body.cb-site .cbf__label {
	overflow-wrap: anywhere;
	min-width: 0;
}

/* El email en pantallas estrechas baja de cuerpo antes que partirse. */
@media (max-width: 1200px) {
	.cb-dato {
		font-size: var(--cb-fs-base);
	}
}

/* ==========================================================================
   29. ESCALA GRANDE (a partir de 1400px)
   El contenedor llega hasta 1980px y los encabezados crecen con él. Todo lo
   que hay aquí solo entra en juego por encima de 1400, así que la web en
   portátil, tableta y móvil se ve exactamente igual que antes.
   ========================================================================== */

@media (min-width: 1400px) {

	:root {
		/* Más aire en los costados cuando hay sitio. */
		--cb-gutter: clamp(40px, 1.143px + 2.759vw, 56px);   /* 40 → 56 */
		--cb-measure: clamp(820px, 530.345px + 20.690vw, 940px);
	}

	/* Titulares ------------------------------------------------------- */
	.cb-h1,
	body.cb-site h1.cb-h1 {
		font-size: clamp(64px, 39.862px + 1.724vw, 74px);
	}

	.cb-h2,
	body.cb-site h2.cb-h2 {
		font-size: clamp(52px, 32.690px + 1.379vw, 60px);
	}

	.cb-h3,
	body.cb-site h3.cb-h3,
	.cb-text h2,
	.cb-pitch__title,
	.cb-modal__title,
	.cb-legal h3,
	.cb-form__head h2,
	body.cb-site .cbf__title,
	.cb-obra-modal__title,
	body.cb-site h3.cb-obra-modal__title {
		font-size: clamp(32px, 17.517px + 1.034vw, 38px);
	}

	.cb-h4,
	body.cb-site h4.cb-h4,
	.cb-num,
	.cb-card__num,
	.cb-card__title,
	.cb-clientes__title,
	.cb-tel-mid,
	.cb-form__msg strong {
		font-size: clamp(26px, 16.345px + 0.690vw, 30px);
	}

	/* Cabecera de página y banda ---------------------------------------- */
	.cb-page-header__title,
	body.cb-site h1.cb-page-header__title {
		font-size: clamp(130px, -0.345px + 9.310vw, 184px);
	}

	.cb-page-header__title--mid {
		font-size: clamp(116px, 3.586px + 8.046vw, 163px);
	}

	.cb-page-header__title--long {
		font-size: clamp(98px, 3.034px + 6.786vw, 137px);
	}

	.cb-page-header--servicio .cb-page-header__title {
		font-size: clamp(64px, 39.862px + 1.724vw, 74px);
	}

	.cb-banner__title,
	body.cb-site h2.cb-banner__title {
		font-size: clamp(104px, 7.448px + 6.897vw, 144px);
	}

	.cb-banner__title--long {
		font-size: clamp(84px, 6.207px + 5.517vw, 116px);
	}

	.cb-figure__num {
		font-size: clamp(52px, 27.862px + 1.724vw, 62px);
	}

	/* Cabecera más alta: el H1 gigante necesita más aire. */
	.cb-page-header {
		padding: clamp(170px, 96.552px + 5.172vw, 200px) 0 clamp(60px, 26.897px + 2.362vw, 74px);
	}

	/* Medidas de lectura ------------------------------------------------ */
	.cb-measure,
	.cb-pitch__text {
		max-width: var(--cb-measure);
	}

	.cb-claim__grid {
		grid-template-columns: 1fr minmax(0, clamp(860px, 522.759px + 24.138vw, 1000px)) 1fr;
	}

	.cb-hero__text {
		max-width: clamp(620px, 378.621px + 17.241vw, 720px);
	}

	.cb-acc__inner {
		max-width: clamp(900px, 561.379px + 24.138vw, 1040px);
	}

	.cb-testi__swiper .cb-quote {
		max-width: clamp(1100px, 617.241px + 34.483vw, 1300px);
	}

	.cb-form__head p,
	body.cb-site .cbf__text {
		max-width: clamp(520px, 326.897px + 13.793vw, 600px);
	}

	/* Tarjetas y cajas -------------------------------------------------- */
	.cb-card {
		min-height: clamp(520px, 375.172px + 10.345vw, 580px);
	}

	.cb-modal__box {
		max-width: clamp(560px, 366.897px + 13.793vw, 640px);
	}

	.cb-modal__box--wide {
		max-width: clamp(940px, 601.379px + 24.138vw, 1080px);
	}

	.cb-modal__box--obra {
		max-width: clamp(1080px, 693.793px + 27.586vw, 1240px);
	}

	.cb-clientes__logo {
		max-height: clamp(46px, 26.690px + 1.379vw, 54px);
	}
}

/* ==========================================================================
   30. NÚMERO DE COLUMNAS EN PANTALLAS ANCHAS
   Al pasar el contenedor de 1400 a 1980px, las retículas de auto-fit dejan de
   ser una decisión de diseño y se convierten en una división: el mosaico de
   servicios pasaba de 5 a 7 columnas y los testimonios de 3 a 5, con las
   tarjetas cada vez más pequeñas y la última fila siempre a medias. Aquí el
   número de columnas se fija a propósito, y se eligen los divisores que llenan
   las filas: 12 servicios en 6 columnas, 6 testimonios en 3.
   ========================================================================== */

/* Mosaico de servicios: 12 fichas. */
.cb-grid--servicios {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 1100px) {
	.cb-grid--servicios {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1500px) {
	.cb-grid--servicios {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Obras: el número es variable, así que se controla el tamaño mínimo de la
   tarjeta en vez del número de columnas. Sin esto salían seis tarjetas
   diminutas por fila a 1980. */
@media (min-width: 1500px) {
	.cb-grid--auto-275 {
		grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	}
}

/* Testimonios en rejilla: tres columnas fijas, que es lo que llena las filas
   con seis citas. */
@media (min-width: 1100px) {
	.cb-grid--auto-340 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Servicios destacados de la home: cuatro, siempre cuatro. */
@media (min-width: 1100px) {
	.cb-grid--auto.cb-grid--lines {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Muro de logotipos y vías de contacto: los divisores naturales. */
@media (min-width: 1500px) {
	.cb-clientes__grid {
		grid-template-columns: repeat(8, 1fr);
	}
}

/* Caja de acceso a documentación (área comercial). */
.cb-doc-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: clamp(30px, 4vw, 44px) clamp(24px, 3vw, 40px);
}

.cb-doc-cta .cb-btn {
	flex: none;
}