/*
Theme Name: Core Limpiezas
Theme URI: https://corelimpiezas.local
Author: Core Limpiezas
Description: Tema a medida para Core Limpiezas, empresa de pulido y limpieza de suelos en Madrid. Construido sobre la maquetación Bootstrap de la plantilla Sanera, con los cuatro servicios como páginas, trabajos realizados, testimonios y formulario de presupuesto.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: core-limpiezas
Tags: limpieza, servicios, empresa, bootstrap, custom-logo, custom-menu
*/

/* El diseño lo pone la maquetación: assets/css/vendor.min.css y assets/css/style.css.
   Aquí solo van los ajustes propios de WordPress y los pocos componentes que la
   plantilla no traía (barra de confianza, cajas de garantía y pago, preguntas
   frecuentes, marcadores de dato pendiente y acciones fijas en móvil).
   Regla: no duplicar lo que la plantilla ya resuelve. */

:root {
  --cl-verde: #0cbc8b;
  --cl-azul: #063464;
  --cl-gris: #f5f7fa;
  --cl-borde: #e4e8ee;
}

/* --- Alineación de imágenes de WordPress --- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; font-style: italic; margin: 8px 0; }

/* --- Accesibilidad --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  clip: auto !important;
  clip-path: none;
  color: var(--cl-azul);
  display: block;
  font-size: 15px;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* --- Barra de administración: evita que tape la cabecera fija --- */
.admin-bar .navbar-sticky.navbar-fixed { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .navbar-sticky.navbar-fixed { top: 46px; }
}

/* --- Logotipo ---------------------------------------------------------------
   La plantilla fija el logo en 160 × 60 px porque su SVG tiene justo esa
   proporción. Un logotipo real casi nunca la tiene, así que se respeta el alto
   que pide el theme y el ancho se calcula solo, sin deformar la imagen.

   El max-width tiene holgura a propósito: el logotipo de Core Limpiezas es
   apaisado (proporción 3,33:1), así que a 60 px de alto pide unos 200 px de
   ancho. Con el tope justo en 200 px cualquier redondeo lo recortaba y
   object-fit volvía a empequeñecerlo. */
.header .navbar-brand .logo {
  width: auto;
  max-width: 240px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 991px) {
  .header .navbar-brand .logo { height: 46px; max-width: 175px; }
}

/* --- Nombre del sitio cuando todavía no se ha subido un logotipo --- */
.navbar-brand .site-title-text {
  font-family: 'Rubik', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--cl-azul);
  letter-spacing: -.5px;
  line-height: 1;
}
.navbar-brand:hover .site-title-text { color: var(--cl-verde); }

/* --- Contenido de entradas y páginas ---------------------------------
   Los `h2 { 42px }` y `h3 { 38px }` de la plantilla son para titulares de
   sección, no para texto corrido. Dentro del contenido, la plantilla usa otra
   escala mediante clases propias, y estos son sus valores exactos:

     .service-single … .entry-heading  →  24px / line-height 1 / 700 / #05213f
     .service-single … .entry-desc     →  17px / line-height 27px
     .accordion .card-link             →  18px / 500 / #1e4873
     .accordion .card-body             →  15px / line-height 24px

   Nuestro contenido sale del editor de WordPress sin esas clases, así que la
   escala se aplica por contexto. El único añadido es el margen superior: la
   plantilla deja los titulares sin separación arriba y en un texto corrido
   quedaban pegados al párrafo anterior. */
.entry-content-wp h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #05213f;
  margin: 46px 0 21px;
}
.entry-content-wp h3 {
  /* La plantilla no define este nivel dentro del contenido: 20 px es el
     escalón intermedio entre sus 24 px de título y sus 17 px de cuerpo. */
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #05213f;
  margin: 34px 0 14px;
}
.entry-content-wp h4 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #05213f;
  margin: 28px 0 12px;
}
.entry-content-wp > h2:first-child,
.entry-content-wp > h3:first-child { margin-top: 0; }

.entry-content-wp p,
.entry-content-wp li {
  font-size: 17px;
  line-height: 27px;
}
.entry-content-wp p { margin-bottom: 25px; }
.entry-content-wp > *:last-child { margin-bottom: 0; }
.entry-content-wp img { max-width: 100%; height: auto; }
.entry-content-wp ul,
.entry-content-wp ol { margin-bottom: 22px; padding-left: 20px; }
/* La plantilla resetea `list-style: none` también en los `li`, y esa regla gana
   a la herencia del `ul`: sin esto las listas del contenido salen sin viñeta. */
.entry-content-wp ul { list-style: disc; }
.entry-content-wp ol { list-style: decimal; }
.entry-content-wp ul > li { list-style: disc; }
.entry-content-wp ol > li { list-style: decimal; }
.entry-content-wp li { margin-bottom: 8px; }
/* Nombres de cookies y rutas de configuración del navegador. */
.entry-content-wp code {
  font-family: Consolas, Monaco, monospace;
  font-size: .88em;
  background-color: var(--cl-gris);
  border: 1px solid var(--cl-borde);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--cl-azul);
  word-break: break-word;
}

.entry-content-wp blockquote {
  border-left: 3px solid var(--cl-verde);
  padding-left: 25px;
  font-style: italic;
  margin-bottom: 25px;
}

/* Tablas: se desplazan solas en móvil en vez de romper la página. */
.entry-content-wp table {
  width: 100%;
  margin-bottom: 30px;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.entry-content-wp th,
.entry-content-wp td {
  border: 1px solid var(--cl-borde);
  padding: 12px 14px;
  vertical-align: top;
  font-size: 15px;
  line-height: 24px;
}
.entry-content-wp thead th { background-color: var(--cl-azul); color: #fff; text-align: left; }
.entry-content-wp tbody tr:nth-child(even) { background-color: var(--cl-gris); }
@media (min-width: 992px) {
  .entry-content-wp table { display: table; }
}

/* --- Ajustes sobre la maquetación --------------------------------------
   La plantilla se diseñó con textos en inglés, que son más cortos. En español
   algunos rótulos se parten o descuadran, y estas reglas lo corrigen. */

/* Los anchos fijos de los botones se liberan en assets/css/botones.css, que se
   genera a partir de la hoja de la plantilla. Aquí solo va la separación entre
   ellos y el centrado de su contenido. */
.btn { gap: 10px; justify-content: center; }
.btn.w-100 { width: 100%; }

.slider .slide .slide-content .slide-action,
.hero .hero-content .hero-action,
.contact .contact-action {
  display: flex;
  flex-flow: row wrap;
  gap: 15px;
  justify-content: flex-start;
}
.slider .slide .slide-content .slide-action .btn,
.hero .hero-content .hero-action .btn,
.contact .contact-action .btn { margin: 0; }

@media (max-width: 575px) {
  .slider .slide .slide-content .slide-action,
  .hero .hero-content .hero-action,
  .contact .contact-action { flex-direction: column; align-items: stretch; }
}

/* Nada debe provocar barra horizontal. */
html, body { overflow-x: hidden; }

/* La barra de destacados original son tres paneles más una caja destacada, y
   por eso cada panel está limitado a 255 px. Aquí son cuatro avales iguales,
   así que se reparten el ancho a partes iguales. */
.features-bar .features-container .feature-panel {
  flex: 1 1 0;
  max-width: none;
}
@media (max-width: 991px) {
  .features-bar .features-container { max-width: 100%; }
  .features-bar .features-container .feature-panels-holder { flex-wrap: wrap; }
  .features-bar .features-container .feature-panel { flex: 1 1 50%; }
}
@media (max-width: 575px) {
  .features-bar .features-container .feature-panel { flex: 1 1 100%; }
}

/* La cabecera de la portada es un bloque fijo, no el carrusel original. La
   plantilla le daba 130vh de alto y centraba el texto en pantallas pequeñas,
   lo que en móvil dejaba una franja enorme vacía y sacaba el texto de la
   pantalla. Aquí crece con su contenido. */
.slider.slider-1 .slide {
  height: auto;
  min-height: 640px;
  padding: 60px 0;
}
/* El .slide es un contenedor flex y su .container, al ser elemento flex, no
   encogía por debajo del ancho de su contenido: de ahí el desbordamiento
   lateral en móvil.
   Solo se toca `min-width`: poner aquí un `max-width: 100%` anularía el ancho
   de rejilla de Bootstrap (1140 px) y el texto de la cabecera dejaría de
   alinearse con el resto de secciones de la página. */
.slider .slide > .container { min-width: 0; }
.slider .slide .slide-content { max-width: 100%; }
.slider .slide .slide-content .slide-title,
.slider .slide .slide-content .slide-desc,
.slider .slide .slide-content .slide-subtitle { overflow-wrap: break-word; }

@media (max-width: 991px) {
  .slider.slider-1 .slide {
    min-height: 0;
    padding: 90px 0 70px;
  }
  .slider .slide .slide-content { text-align: left; }
}

/* La entradilla de la cabecera lleva párrafos generados por WordPress, y el
   estilo base de <p> les daba el gris del cuerpo sobre un fondo oscuro. */
.hero .hero-content .hero-desc p {
  color: inherit;
  margin-bottom: 12px;
}
.hero .hero-content .hero-desc p:last-child { margin-bottom: 0; }

/* Las tarjetas de la portada van en rejilla, no en carrusel, así que hay que
   igualar alturas a mano para que los botones queden alineados. */
.services-2 .row > [class*="col-"],
.features-2 .features-holder .row > [class*="col-"],
.processes-3 .processes-holder .row > [class*="col-"] {
  display: flex;
}
.services-2 .service-panel,
.features-2 .feature-panel,
.processes-3 .process-panel {
  width: 100%;
}
.services-2 .service-panel .service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.services-2 .service-panel .service-more {
  margin-top: auto;
}
.processes-3 .process-panel .process-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.processes-3 .process-panel .process-content .btn {
  margin-top: auto;
}

/* --- Sección de contenido -----------------------------------------------
   La plantilla trae una clase por cada tipo de sección de su portada, pero
   ninguna genérica para una página de texto. Esta la cubre. */
.cl-page { padding: 90px 0; }
@media (max-width: 767px) {
  .cl-page { padding: 55px 0; }
}

/* --- Dato pendiente de rellenar --------------------------------------- */
.cl-pendiente {
  background-color: #fff3cd;
  color: #7a5c00;
  border-bottom: 1px dashed #d7a900;
  padding: 0 5px;
  margin: 0 2px;
  border-radius: 2px;
  font-style: normal;
  white-space: nowrap;
}
.cl-pendiente-bloque {
  background-color: #fff9e6;
  border: 1px dashed #d7a900;
  border-radius: 6px;
  padding: 26px;
  color: #7a5c00;
  text-align: center;
  margin-bottom: 30px;
}
.cl-pendiente-bloque p { margin: 0; }

/* --- Barra de confianza ------------------------------------------------ */
.cl-confianza { background-color: var(--cl-azul); color: #fff; padding: 20px 0; }
.cl-confianza ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-confianza li { display: flex; align-items: center; font-size: 15px; font-weight: 500; }
.cl-confianza i { color: var(--cl-verde); margin-right: 10px; }
@media (max-width: 767px) {
  .cl-confianza ul { justify-content: flex-start; }
  .cl-confianza li { width: 100%; }
}

/* --- Cajas de garantía y formas de pago -------------------------------- */
.cl-caja {
  border-radius: 6px;
  padding: 30px;
  margin: 34px 0;
  border: 1px solid var(--cl-borde);
}
.cl-caja h3 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #05213f;
  margin-bottom: 16px;
}
.cl-caja p { font-size: 17px; line-height: 27px; }
.cl-caja p:last-child { margin-bottom: 0; }
.cl-caja-garantia { background-color: rgba(12, 188, 139, .08); border-left: 4px solid var(--cl-verde); }
.cl-caja-pago { background-color: var(--cl-gris); border-left: 4px solid var(--cl-azul); }

/* --- Caja destacada con llamada a la acción ---------------------------- */
.cl-nota {
  background-color: var(--cl-gris);
  border-radius: 6px;
  padding: 26px 30px;
  margin: 30px 0;
}
.cl-nota p:last-child { margin-bottom: 0; }
.cl-nota .btn { margin: 10px 10px 0 0; }

/* --- Reseñas dentro del contenido -------------------------------------- */
.cl-resena {
  background-color: #fff;
  border: 1px solid var(--cl-borde);
  border-left: 4px solid var(--cl-verde);
  border-radius: 6px;
  padding: 26px;
  margin: 30px 0;
  font-style: normal;
}
.cl-resena p { font-style: italic; font-size: 17px; line-height: 27px; margin-bottom: 18px; }
.cl-resena cite { font-style: normal; color: var(--cl-azul); display: block; }
.cl-resena cite strong { display: block; font-weight: 700; }
.cl-resena cite span { font-size: 14px; color: #6b7a8d; }
.cl-resena footer { display: flex; align-items: center; gap: 14px; }
.cl-resena-comilla { width: 34px; margin-bottom: 16px; opacity: .5; }
.cl-resena-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.cl-resena-pendiente { background-color: #fff9e6; border-color: #e8d089; border-left-color: #d7a900; }
.cl-resena-pendiente footer { display: block; }

/* --- Zonas geográficas -------------------------------------------------- */
.cl-zonas {
  font-size: 15px;
  line-height: 24px;
  background-color: var(--cl-gris);
  border-radius: 4px;
  padding: 12px 16px;
}
.cl-zonas i { color: var(--cl-verde); margin-right: 8px; }

/* --- Preguntas frecuentes -----------------------------------------------
   Usan el acordeón de la plantilla (.faqs .accordion .card). Aquí solo se
   ajusta la separación, porque la sección va incrustada dentro del contenido
   de la página y no como sección suelta de la portada. */
.entry-content-wp .cl-faq { margin: 50px 0; }
.entry-content-wp .cl-faq .container { width: 100%; max-width: 100%; padding: 0; }
.cl-faq .card { margin-bottom: 20px; }
.cl-faq .card-body p:last-child { margin-bottom: 0; }

/* --- Fichas de los trabajos realizados ----------------------------------- */
.cl-trabajo-img img { width: 100%; border-radius: 6px; margin-bottom: 30px; }
.cl-trabajo-ficha,
.caso-ficha {
  background-color: var(--cl-gris);
  border-left: 4px solid var(--cl-verde);
  border-radius: 4px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cl-azul);
  list-style: none;
  margin: 0 0 30px;
}
.caso-ficha li { display: inline-block; margin: 0 18px 0 0; }

/* --- Página de contacto ---------------------------------------------------- */
.cl-contacto-datos ul { margin-bottom: 24px; padding: 0; list-style: none; }
.cl-contacto-datos li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.cl-contacto-datos i { color: var(--cl-verde); margin-top: 5px; }

/* --- Formularios ----------------------------------------------------------- */
.core-limpiezas-form .form-label { font-weight: 600; margin-bottom: 6px; display: block; }
.core-limpiezas-form .row > [class*="col-"] { margin-bottom: 18px; }
.core-limpiezas-form .is-invalid { border-color: #b02a37; }
.cl-form-nota { font-size: 14px; margin: 0; }
.form-field-error { color: #b02a37; font-size: 13px; display: block; margin-top: 4px; }

.contact-result:empty { display: none; }
.contact-result {
  margin-top: 6px;
  padding: 14px 20px;
  border-radius: 4px;
  font-size: 15px;
}
.contact-result.is-success { background-color: rgba(12, 188, 139, .12); color: #0a8b68; }
.contact-result.is-error { background-color: rgba(220, 53, 69, .12); color: #b02a37; }

/* La sección de presupuesto acababa pegada al pie: se separa de él. */
.contact.contact-2 { margin-bottom: 2rem; }

/* Y era muy alta: la plantilla le da 110 px de relleno arriba y abajo, deja 50 px
   bajo el bloque de texto y otros 85 px bajo los botones, contando con que
   debajo van los testimonios y la tarjeta del formulario. Sin esas dos cosas,
   todo ese hueco quedaba vacío. */
.contact.contact-2 { padding-top: 70px; padding-bottom: 70px; }

/* Solo se anulan esos huecos cuando de verdad no hay nada debajo: si algún día
   se publican testimonios o se vuelve a activar el formulario, recuperan su
   separación original. */
.contact.contact-2 .contact-panel.cl-sin-formulario .heading { margin-bottom: 0; }
.contact .contact-action.contact-action-2:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .contact.contact-2 { padding-top: 48px; padding-bottom: 48px; }
}

/* --- Sección de presupuesto sin formulario -----------------------------------
   En las páginas de servicio la sección va solo con el texto. El panel de la
   plantilla es un flex de dos columnas (texto + tarjeta); sin la tarjeta, el
   texto pasa a ocupar todo el ancho y se centra. */
.contact-panel.contact-panel-2.cl-sin-formulario {
  display: block;
  text-align: center;
}
.contact-panel.contact-panel-2.cl-sin-formulario .heading {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}
.contact-panel.contact-panel-2.cl-sin-formulario .contact-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.contact-panel.contact-panel-2.cl-sin-formulario .contact-action .btn { margin: 0; }
.contact-panel.contact-panel-2.cl-sin-formulario .testimonial-wrapper {
  justify-content: center;
  text-align: left;
}

/* --- Página de contacto ------------------------------------------------------
   El panel blanco sube 145 px para solapar el mapa. Si todavía no hay dirección
   configurada no hay mapa que solapar, y ese desplazamiento se comería la barra
   de avales, así que se anula. */
.contact.contact-3.cl-sin-mapa .contact-panel.contact-panel-3 {
  transform: none;
  margin-top: 70px;
  margin-bottom: 0;
}

/* --- Pie: cierre sobre la franja azul ---------------------------------------
   La maquetación remata el pie con una franja blanca (.footer-bottom) donde van
   el copyright y los enlaces legales. Aquí esa franja se ha quitado: los
   enlaces legales son una columna más y el aviso de copyright cierra la propia
   franja azul, separado por una línea tenue. */
/* --- Pie: columna de redes sociales ---------------------------------------- */
.cl-widget-redes .module-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
/* La columna es estrecha: a 38 px los tres iconos entran en una sola fila. */
.cl-widget-redes .module-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  transition: none;
}
.cl-widget-redes .module-social a:hover {
  background-color: var(--cl-verde);
  border-color: var(--cl-verde);
  color: #fff;
}
.cl-redes-pendientes {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}
.cl-redes-pendientes a { color: #fff; text-decoration: underline; }

/* El widget de contacto de la plantilla esperaba dos líneas (teléfono y
   dirección) y aquí lleva cuatro, que salían pegadas entre sí. */
.cl-footer .widget-contact .widget-content ul li {
  margin-bottom: 12px;
  line-height: 1.5;
}
.cl-footer .widget-contact .widget-content ul li:last-child { margin-bottom: 0; }
.cl-footer .widget-contact .widget-content ul li i { margin-right: 9px; }

/* El pie reservaba 100 px por debajo de las columnas contando con que después
   venía la franja blanca. Ahora el cierre va dentro, así que ese hueco se
   recorta para que el copyright quede cerca del borde. */
.cl-footer .footer-top { padding-bottom: 32px; }
@media (max-width: 767px) {
  .cl-footer .footer-top { padding-bottom: 24px; }
}

.cl-footer-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.cl-copyright {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
}
.cl-footer-cierre .backtop { margin: 0; }

@media (max-width: 767px) {
  .cl-footer-cierre {
    margin-top: 34px;
    padding-top: 22px;
    justify-content: center;
    text-align: center;
  }
}

/* --- Servicio activo en la barra lateral ------------------------------------ */
.widget-services li.active > a { color: var(--cl-verde); font-weight: 700; }
.widget-reservation .widget-phone { margin: 18px 0 0; }
.widget-reservation .widget-phone a { color: #fff; font-weight: 700; }
.widget-reservation .widget-phone i { margin-right: 8px; }

/* --- Paginación -------------------------------------------------------------- */
.pagination-wp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination-wp .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background-color: var(--cl-gris);
  color: var(--cl-azul);
  font-weight: 600;
  border-radius: 4px;
  transition: all .3s ease;
}
.pagination-wp .page-numbers:hover,
.pagination-wp .page-numbers.current { background-color: var(--cl-verde); color: #fff; }

/* --- Acciones fijas en móvil -------------------------------------------------- */
.cl-acciones-movil { display: none; }
@media (max-width: 767px) {
  .cl-acciones-movil {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
  }
  .cl-acciones-movil .cl-accion {
    flex: 1;
    text-align: center;
    padding: 15px 8px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
  }
  .cl-accion-llamar { background-color: var(--cl-azul); }
  .cl-accion-whatsapp { background-color: #25d366; }
  .cl-accion i { margin-right: 8px; }
  /* Deja sitio para la barra fija. */
  .footer-bottom { padding-bottom: 76px; }
}

/* -------------------------------------------------------------------------
 * Quiénes somos
 *
 * Las secciones son las de la maquetación tal cual (about #1, services #1,
 * industries #2 y features #3). Lo único propio es la cifra de las tarjetas
 * de «En números»: el h3 del theme mide 18px, que se lee como titular y no
 * como dato, así que la primera línea sube a los 40px que la propia
 * maquetación usa en los títulos de sección.
 * ---------------------------------------------------------------------- */
.cl-cifras .feature-panel .feature-content h3 {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.cl-cifras .cl-cifra {
  display: block;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--global--color-heading);
  margin-bottom: 4px;
}

.cl-cifras .cl-cifra-unidad {
  display: block;
}

/* La banda oscura termina en las tarjetas; sin este hueco quedarían pegadas a
   la sección verde de presupuesto que viene detrás. */
.cl-cifras .features-holder {
  margin-bottom: 0;
}

.cl-cifras {
  padding-bottom: 70px;
}

@media (max-width: 991px) {
  .cl-cifras {
    padding-bottom: 30px;
  }
}

/* El velo oscuro de .bg-overlay-theme-dark es un ::after con z-index 0, y las
   tarjetas van posicionadas sin z-index, así que el velo les cae encima y las
   deja ilegibles. En la maquetación las salva el carrusel, que sí se apila;
   aquí las tarjetas van en una fila fija, así que sube el contenido entero. */
.cl-cifras > .container {
  position: relative;
  z-index: 1;
}

/* La presentación de arriba ya cierra con su propio margen: sin esto el texto
   largo queda flotando en medio de la página. */
.cl-page-quienes-somos {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .cl-page-quienes-somos {
    padding-top: 0;
    padding-bottom: 0;
  }
}


/* Las tarjetas de estas dos filas llevan textos de distinto largo y la
   maquetación las deja con alturas desiguales porque allí van en carrusel, de
   una en una. Aquí van en fila, así que se igualan estirando la columna. */
.cl-tarjetas > [class*="col-"],
.cl-cifras .features-holder .row > [class*="col-"] {
  display: flex;
}

.cl-tarjetas .service-panel,
.cl-tarjetas .feature-panel,
.cl-tarjetas .process-panel,
.cl-cifras .feature-panel {
  width: 100%;
}

/* Ya igualadas de alto, el icono del pie de cada tarjeta caía a distinta
   altura según lo largo que fuese el texto de arriba. */
.cl-tarjetas .feature-panel,
.cl-cifras .feature-panel {
  justify-content: space-between;
}

/* --- Cierre de «Lo que hacemos» ---------------------------------------
   La plantilla remata la sección con una frase y un enlace subrayado dentro
   del mismo párrafo. Aquí el enlace es un botón, así que va en su propia
   línea, centrado, y hay que desactivar el subrayado que la plantilla le
   dibuja con un ::before a todos los enlaces de esta nota. */
.services.services-2 .processes-note-cta {
  transform: none;
  padding-bottom: 10px;
  /* La columna que la contiene es flex, así que sin esto la nota se encoge
     al ancho del texto y el centrado se queda dentro de esa caja pequeña,
     pegada a la izquierda de la sección. */
  width: 100%;
}

.processes-note-cta p {
  margin-bottom: 22px;
}

.processes-note-cta .btn {
  display: inline-flex;
}

.services.services-2 .processes-note-cta a {
  padding-bottom: 0;
}

.services.services-2 .processes-note-cta a::before {
  display: none;
}

/* --- Aire entre el bloque de precio y la caja de garantía ---------------
   Las dos secciones se tocaban: la de precio cierra con padding inferior 0 y
   la de garantía abre justo debajo. Se separan con 2 rem. */
.home .cta.cta-1 {
  margin-top: 2rem;
}