/* ==========================================================================
   Flamtech Energy · capa de formas
   --------------------------------------------------------------------------
   Los elementos geometricos que Miguel pidio despues de ver la landing de
   solar: circulos decorativos, imagenes recortadas en circulo, imagenes que
   se salen del cuadro y anillos alrededor de los iconos.

   Va en su propio archivo, DESPUES de solario-base.css y de la capa de
   marca, por una razon practica: si algo aqui se ve de mas, se quita el
   enlace de esta hoja y el sitio sigue funcionando completo. La decoracion
   no debe ser una dependencia de la estructura.

   Todo lo de aqui es pointer-events:none o decorativo, y nada de esto lleva
   contenido: un lector de pantalla no pierde nada si lo ignora.
   ========================================================================== */

/* ---------------------------------------------------- imagen en circulo */
.img-circulo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.img-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El anillo que la rodea, girando despacio */
.img-circulo::after {
  content: "";
  position: absolute; inset: -14px;
  border: 2px dashed var(--theme-color);
  border-radius: 50%;
  opacity: .35;
  pointer-events: none;
}

/* ---------------------------------------------------- composicion de dos
   La imagen grande con una esquina muy redondeada y un circulo que se sale
   del cuadro por la esquina. Es el recurso que mas se repite en la landing
   de solar. */
.compo-imagen { position: relative; padding: 0 0 46px 0; }
.compo-imagen .compo-principal {
  border-radius: 18px 18px 140px 18px;
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.compo-imagen .compo-principal img { width: 100%; display: block; }
.compo-imagen .compo-circulo {
  position: absolute;
  right: -18px; bottom: 0;
  width: 190px; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--sombra-alta);
}
.compo-imagen .compo-circulo img { width: 100%; height: 100%; object-fit: cover; }

/* El sello de anos, encima de la composicion */
.compo-sello {
  position: absolute;
  left: -14px; top: 26px;
  z-index: 3;
  width: 128px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  display: grid; place-content: center; text-align: center;
  box-shadow: var(--sombra-alta);
  font-family: var(--fuente-titulo);
  line-height: 1.1;
}
.compo-sello b { display: block; font-size: 2rem; font-weight: 700; }
.compo-sello span { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }

@media (max-width: 767px) {
  .compo-imagen .compo-circulo { width: 130px; right: 0; }
  .compo-sello { width: 96px; left: 0; }
  .compo-sello b { font-size: 1.5rem; }
  .compo-imagen .compo-principal { border-radius: 14px 14px 90px 14px; }
}

/* ---------------------------------------------------- circulos de fondo
   Manchas suaves detras de las secciones. Dan profundidad sin competir con
   el texto porque van a muy baja opacidad y siempre detras. */
.con-formas { position: relative; overflow: hidden; }
.con-formas > .container { position: relative; z-index: 2; }
.forma {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.forma-a {
  width: 380px; height: 380px;
  top: -120px; left: -140px;
  background: radial-gradient(circle at 30% 30%, var(--theme-color-light), transparent 70%);
}
.forma-b {
  width: 300px; height: 300px;
  bottom: -110px; right: -100px;
  border: 42px solid var(--theme-color-light);
  opacity: .55;
}
.forma-c {
  width: 16px; height: 16px;
  top: 18%; right: 9%;
  background: var(--theme-color);
  opacity: .28;
}
.forma-d {
  width: 9px; height: 9px;
  bottom: 22%; left: 7%;
  background: var(--color-yellow);
  opacity: .5;
}
@media (max-width: 991px) { .forma-b, .forma-c, .forma-d { display: none; } }

/* ---------------------------------------------------- anillo en los iconos
   El icono de servicio en circulo, con un anillo punteado alrededor. Es lo
   que hace que la reja de tarjetas se lea como el resto del diseno y no como
   una lista de cajas. */
.service-item .service-icon,
.choose-item .choose-icon,
.contact-info .contact-info-icon {
  border-radius: 50%;
  position: relative;
}
.service-item .service-icon::after,
.choose-item .choose-icon::after {
  content: "";
  position: absolute; inset: -7px;
  border: 1px dashed var(--theme-color);
  border-radius: 50%;
  opacity: .38;
  transition: transform .3s, opacity .3s;
}
.service-item:hover .service-icon::after,
.choose-item:hover .choose-icon::after { transform: scale(1.1); opacity: .7; }

/* La tarjeta con la esquina redondeada, no todas iguales */
.service-item { border-radius: 14px 14px 40px 14px; }
.choose-item  { border-radius: 14px 40px 14px 14px; }
.process-item { border-radius: 40px 14px 14px 14px; }
.contact-info { border-radius: 14px 14px 40px 14px; }

/* ---------------------------------------------------- proceso encadenado
   La linea punteada que une los cuatro pasos. Se dibuja con un pseudo
   elemento del contenedor y se apaga en movil, donde los pasos van en
   columna y la linea no significaria nada. */
@media (min-width: 992px) {
  .process-area .row.g-4 { position: relative; }
  .process-area .row.g-4::before {
    content: "";
    position: absolute;
    top: 62px; left: 12%; right: 12%;
    border-top: 2px dashed var(--color-gray);
    z-index: 0;
  }
  .process-item { z-index: 1; }
}

/* ---------------------------------------------------- cifras en circulo */
.counter-box .icon {
  position: relative;
  border-radius: 50%;
}
.counter-box .icon::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px dashed rgba(255,255,255,.32);
  border-radius: 50%;
}

/* ---------------------------------------------------- portada con formas */
.hero-single .hero-formas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-single .hero-formas span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}
.hero-single .hero-formas span:nth-child(1) { width: 420px; height: 420px; top: -110px; right: 6%; }
.hero-single .hero-formas span:nth-child(2) { width: 260px; height: 260px; bottom: -80px; right: 22%; border-color: rgba(224,0,0,.28); }
.hero-single .hero-formas span:nth-child(3) {
  width: 12px; height: 12px; top: 30%; right: 14%;
  background: var(--theme-color); border: 0; opacity: .7;
}
.hero-single > .container { z-index: 2; }
@media (max-width: 991px) { .hero-single .hero-formas { display: none; } }

/* ---------------------------------------------------- tarjetas de blog */
.blog-item {
  background: #fff;
  border: 1px solid var(--color-gray);
  border-radius: 14px 14px 40px 14px;
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.blog-item:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.blog-item-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--theme-bg-light); }
.blog-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-item:hover .blog-item-img img { transform: scale(1.05); }
.blog-item-etiqueta {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--theme-color); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 12px; border-radius: 4px;
}
.blog-item-cuerpo { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-item-cuerpo h4 { font-size: 1.08rem; margin-bottom: .5em; }
.blog-item-cuerpo h4 a { color: var(--color-dark); }
.blog-item-cuerpo h4 a:hover { color: var(--theme-color); }
.blog-item-cuerpo p { font-size: .92rem; flex: 1; }
.blog-item-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--color-skyblue);
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--color-gray);
}
.blog-item-meta i { color: var(--theme-color); margin-right: 5px; }

/* ---------------------------------------------------- cuerpo del articulo */
.articulo { max-width: 800px; margin: 0 auto; }
.articulo h2 { font-size: 1.7rem; margin: 2em 0 .7em; }
.articulo h3 { font-size: 1.25rem; margin: 1.7em 0 .6em; }
.articulo h4 { font-size: 1.05rem; margin: 1.4em 0 .5em; }
.articulo p, .articulo li { font-size: 1.02rem; line-height: 1.8; }
.articulo ul, .articulo ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.articulo ul li { list-style: disc; margin-bottom: .45em; }
.articulo ol li { list-style: decimal; margin-bottom: .45em; }
.articulo strong { color: var(--color-dark); }
.articulo hr { border: 0; border-top: 1px solid var(--color-gray); margin: 2.4em 0; }
.articulo table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  font-size: .95rem;
}
.articulo th, .articulo td { border: 1px solid var(--color-gray); padding: 10px 13px; text-align: left; }
.articulo th { background: var(--theme-bg-light); font-family: var(--fuente-titulo); color: var(--color-dark); }
.articulo blockquote {
  margin: 1.6em 0; padding: 18px 22px;
  background: var(--theme-color-light);
  border-left: 4px solid var(--theme-color);
  border-radius: 0 8px 8px 0;
}
.articulo blockquote p { margin: 0; }

/* El h1 del articulo. La banda de arriba dice "Blog tecnico" y el titular
   real del post vive aqui, que es donde tiene sentido para el lector y para
   Google. */
.articulo h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 1.2em;
  padding-bottom: .6em;
  border-bottom: 3px solid var(--theme-color);
}

/* ==========================================================================
   Tarjetas de blog, formato de demarketing
   --------------------------------------------------------------------------
   La reja ya era de tres columnas. Lo que faltaba es por que las de
   demarketing se ven ordenadas y las mias salian desparejas: el line-clamp.

   Sin recortar el titulo y la entrada a dos lineas, cada tarjeta mide lo que
   mide su texto y la reja queda con los pies a distinta altura. Con el
   recorte, las tres columnas de cada fila cierran alineadas.
   ========================================================================== */

.blog-item { border-radius: 4px; }

/* Portada de alto fijo, no por proporcion: es lo que garantiza que las tres
   tarjetas de una fila arranquen el texto a la misma altura. */
.blog-item-img { aspect-ratio: auto; height: 186px; }

.blog-item-cuerpo { padding: 22px 22px 24px; }

.blog-item-cuerpo h4 {
  font-size: 1.06rem;
  line-height: 1.35;
  margin-bottom: .55em;
  /* dos lineas y corta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-item-cuerpo p {
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La firma va abajo y pegada al fondo, como en demarketing. mt-auto es lo
   que la empuja: asi queda a la misma altura en las tres tarjetas. */
.blog-firma {
  margin-top: auto;
  display: flex; align-items: center; gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray);
}
.blog-firma .avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--theme-color-light);
  color: var(--theme-color);
  font-size: .9rem;
}
.blog-firma .quien { display: flex; flex-direction: column; line-height: 1.3; }
.blog-firma .nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: .85rem; color: var(--color-dark); }
.blog-firma .cuando { font-size: .76rem; color: var(--color-skyblue); display: flex; gap: 6px; }

/* La etiqueta pasa a esquina inferior izquierda con el rojo de la marca */
.blog-item-etiqueta { border-radius: 3px; }

/* El "Leer la guia" se va: en demarketing toda la tarjeta es el enlace, y un
   boton de mas en cada una repite el mismo clic tres veces por fila. */
.blog-item .service-btn { display: none; }
.blog-item { position: relative; }
.blog-item-cuerpo h4 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

/* ==========================================================================
   Tarjetas flotantes
   --------------------------------------------------------------------------
   El recurso de la landing de solar: una fila de tarjetas que se monta sobre
   el borde inferior de la portada. Lo que hace el efecto es el margen
   superior negativo mas el z-index.

   OJO con el orden: la portada tiene su propio z-index por los circulos
   decorativos, asi que estas tarjetas necesitan uno mayor o quedan debajo y
   el efecto no se ve.
   ========================================================================== */

.flotantes-area {
  position: relative;
  z-index: 10;
  margin-top: -96px;          /* lo que las monta sobre la portada */
  padding-bottom: 30px;
}
.flotante {
  background: #fff;
  border-radius: 6px 6px 34px 6px;
  padding: 32px 26px 30px;
  box-shadow: 0 18px 46px rgba(21, 24, 28, .16);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .28s, box-shadow .28s;
}
.flotante:hover { transform: translateY(-7px); box-shadow: 0 24px 60px rgba(21, 24, 28, .22); }

/* La franja de color de arriba, que es lo que las amarra con la marca */
.flotante::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--theme-color);
}
/* El numero de fondo, muy tenue */
.flotante .flotante-num {
  position: absolute; right: 14px; bottom: 2px;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 4.4rem; line-height: 1;
  color: var(--color-dark);
  opacity: .05;
  pointer-events: none;
}
.flotante-icono {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 20px;
  position: relative;
}
.flotante-icono::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px dashed var(--theme-color);
  border-radius: 50%;
  opacity: .4;
}
.flotante h4 { font-size: 1.14rem; margin-bottom: .45em; }
.flotante p { font-size: .93rem; margin: 0; }

/* En movil no hay nada que montar: la portada termina y las tarjetas
   empiezan, en columna. El margen negativo ahi solo taparia el texto. */
@media (max-width: 991px) {
  .flotantes-area { margin-top: 0; padding-top: 50px; }
  .flotante { border-radius: 6px 6px 24px 6px; }
}

/* ==========================================================================
   Banda de sectores en circulo
   --------------------------------------------------------------------------
   Imagenes recortadas en circulo con su etiqueta debajo. Sirve para meter
   fotografia en secciones que si no son solo texto e iconos, que era la
   queja: la reja de soluciones se leia como una lista de cajas.
   ========================================================================== */

.sector-banda { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.sector {
  flex: 1 1 190px; max-width: 240px;
  text-align: center;
  text-decoration: none;
}
.sector-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
  transition: transform .3s;
}
.sector-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* el anillo punteado, que es el mismo recurso de los iconos */
.sector-foto::after {
  content: "";
  position: absolute; inset: -12px;
  border: 2px dashed var(--theme-color);
  border-radius: 50%;
  opacity: .3;
  transition: opacity .3s, transform .3s;
}
/* velo de color para que las fotos de la fila se vean de la misma familia
   aunque vengan de escenas muy distintas */
.sector-foto::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(21,24,28,.55));
  transition: opacity .3s;
}
.sector:hover .sector-foto { transform: translateY(-6px); }
.sector:hover .sector-foto::after { opacity: .75; transform: scale(1.04); }
.sector h5 { margin: 0 0 .3em; font-size: 1.02rem; color: var(--color-dark); }
.sector p { margin: 0; font-size: .87rem; }
.sector:hover h5 { color: var(--theme-color); }

@media (max-width: 767px) {
  .sector-banda { gap: 22px; }
  .sector { flex: 1 1 130px; max-width: 160px; }
  .sector-foto::after { inset: -7px; border-width: 1px; }
}

/* ==========================================================================
   Seccion a todo lo ancho con fondo
   --------------------------------------------------------------------------
   El reemplazo del patron "texto de un lado, cuadro de imagen del otro", que
   es justo lo que Miguel pidio evitar. Aqui la imagen es el fondo de toda la
   franja y el contenido va encima, con las tarjetas montadas abajo.
   ========================================================================== */

.banda-full {
  position: relative;
  padding: 110px 0 90px;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.banda-full::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,24,28,.82) 0%, rgba(21,24,28,.93) 62%, var(--theme-bg-light) 100%);
}
.banda-full > .container { position: relative; z-index: 2; }
.banda-full .site-title, .banda-full h2 { color: #fff; }
.banda-full p { color: rgba(255,255,255,.88); }
.banda-full .site-title-tagline { color: var(--theme-color); }
.banda-full .heading-divider {
  background: linear-gradient(90deg, var(--theme-color) 0 40%, rgba(255,255,255,.25) 40%);
}

/* las cuatro tarjetas, montadas sobre el borde de abajo */
.banda-pasos {
  position: relative; z-index: 3;
  margin-top: 52px;
}
.banda-paso {
  background: #fff;
  border-radius: 6px 6px 30px 6px;
  padding: 28px 22px 26px;
  height: 100%;
  box-shadow: 0 16px 42px rgba(21,24,28,.18);
  position: relative;
  transition: transform .26s;
}
.banda-paso:hover { transform: translateY(-6px); }
.banda-paso .paso-num {
  position: absolute; top: -16px; left: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--theme-color); color: #fff;
  display: grid; place-items: center;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(224,0,0,.35);
}
.banda-paso h5 { margin: 12px 0 .4em; font-size: 1rem; }
.banda-paso p { margin: 0; font-size: .89rem; color: var(--body-text-color); }

@media (max-width: 991px) {
  .banda-full { padding-top: 70px; }
  .banda-pasos { margin-top: 40px; }
  .banda-full::before {
    background: linear-gradient(180deg, rgba(21,24,28,.86) 0%, rgba(21,24,28,.94) 100%);
  }
}

/* --------------------------------------------------------------------------
   Ajuste por las tarjetas flotantes.
   Las flotantes se montan 96 px sobre la portada, y ahi vivian los puntos
   del carrusel: quedaban tapados y no se podia cambiar de diapositiva. La
   portada gana ese aire abajo y los puntos suben por encima de las tarjetas.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Las flotantes se montan 96 px sobre la portada, y ahi caen los controles
     del carrusel. La portada gana aire abajo y los puntos suben.
     Son .owl-dots y no mis .hero-puntos: con la plantilla real el carrusel
     lo maneja owl.carousel y hace sus propios controles. */
  .hero-section .hero-single { padding-bottom: 190px; }
  .hero-section .owl-dots { bottom: 132px; position: absolute; left: 0; right: 0; }
}

/* El titular de la franja se limitaba a 8 columnas y partia "carga" sola en
   su propio renglon. Con mas ancho cabe en dos lineas parejas. */
.banda-full .site-title { max-width: 22ch; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .banda-full .site-title { max-width: none; } }

/* --------------------------------------------------------------------------
   Tablas de los articulos en movil.

   Una tabla de cuatro columnas con texto no cabe en 375 px. El primer
   intento fue ponerle display:block y white-space:nowrap a la tabla: eso
   rompe el layout de tabla y las celdas crecieron a 1821 px, o sea que
   empujaba la pagina TODAVIA mas. El ancho de la pagina paso de 454 px.

   La forma correcta es un contenedor que se desliza, y que la tabla siga
   siendo una tabla. El generador la envuelve en .tabla-scroll.
   -------------------------------------------------------------------------- */
.tabla-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll table { margin: 0; }

@media (max-width: 767px) {
  /* min-width para que no se comprima a columnas de dos letras: mejor que
     se deslice y se lea. */
  .tabla-scroll { margin: 1.4em 0; }
  .tabla-scroll table { min-width: 480px; font-size: .88rem; }
  .articulo th, .articulo td { padding: 8px 11px; }
  .articulo code { white-space: normal; word-break: break-word; }
  .articulo p, .articulo li { overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   Portada del articulo.
   Tiene su propia clase y no reusa .blog-item-img a proposito: esa clase
   lleva height:186px para alinear las tarjetas del listado, y combinada con
   un aspect-ratio daba un ancho calculado de 434 px que empujaba toda la
   pagina de lado en movil. Aqui el ancho manda y el alto se deduce.
   -------------------------------------------------------------------------- */
.articulo-portada {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 14px 14px 40px 14px;
  margin-bottom: 34px;
  background: var(--theme-bg-light);
}
.articulo-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }

.articulo-datos {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: var(--color-skyblue);
  margin-bottom: 26px;
}
.articulo-datos i { color: var(--theme-color); margin-right: 6px; }

@media (max-width: 767px) {
  .articulo-portada { aspect-ratio: 16 / 9; border-radius: 10px 10px 26px 10px; margin-bottom: 24px; }
}

/* ==========================================================================
   Mis iconos dentro de los contenedores de la plantilla
   --------------------------------------------------------------------------
   La plantilla Solario pone <img> con un SVG dentro de .service-icon,
   .choose-item-icon, .feature-icon y .counter-box .icon. Yo uso <i> de Font
   Awesome, y la plantilla no estiliza <i> ahi: heredaban el color del cuerpo
   (gris 90,100,114) a 16 px.

   El resultado era una bola roja de 88 px con un icono gris de 16 px encima,
   y en las cifras un icono BLANCO sobre fondo BLANCO. Se veian como manchas.

   Se centra con grid en lugar de confiar en el line-height que trae la
   plantilla: ese esta calculado para una imagen de alto fijo, no para un
   glifo de fuente.
   ========================================================================== */

.service-item .service-icon,
.choose-item .choose-item-icon,
.feature-item .feature-icon,
.counter-box .icon,
.process-item .icon {
  display: grid !important;
  place-items: center;
  line-height: 1 !important;
}

.service-item .service-icon i,
.choose-item .choose-item-icon i,
.feature-item .feature-icon i,
.process-item .icon i {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
}
.service-item .service-icon i { font-size: 2rem; }

/* En las cifras el circulo es BLANCO, asi que el icono va en el rojo de la
   marca. Blanco sobre blanco era invisible. */
.counter-box .icon i { color: var(--theme-color); font-size: 1.9rem; line-height: 1; }

/* ==========================================================================
   Tira de aliados
   --------------------------------------------------------------------------
   .partner-wrapper de la plantilla es una tarjeta blanca pensada para un
   carrusel de owl con imagenes. Mis marcas de texto necesitan la reja, y para
   ganarle hace falta mas especificidad que la clase sola.
   ========================================================================== */
.partner-area .partner-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  padding: 22px;
  box-shadow: var(--sombra);
  border-radius: 12px;
  background: #fff;
}

/* ==========================================================================
   Franja de cierre
   --------------------------------------------------------------------------
   El h2 se perdia: la plantilla estiliza .cta-content h1 y el mio es h2,
   porque el unico h1 de la pagina es el tema de la pagina y no la frase de
   cierre.
   ========================================================================== */
.cta-wrapper .cta-content h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: .4em;
}
.cta-wrapper .cta-content p { color: rgba(255,255,255,.86); margin: 0; }

/* ==========================================================================
   El marcador de dato sin confirmar, sobre fondo oscuro
   --------------------------------------------------------------------------
   Las cifras viven en una franja oscura, y el rayado amarillo del marcador
   dejaba el numero ilegible. El marcador tiene que avisar, no tapar.

   Sobre oscuro cambia a subrayado punteado ambar con el texto intacto. Sigue
   siendo evidente que ese dato no esta confirmado.
   ========================================================================== */
.counter-area .info.xv,
.counter-box .info.xv {
  background: none !important;
  border: 0 !important;
  border-bottom: 2px dashed var(--color-yellow) !important;
  border-radius: 0 !important;
  padding: 0 2px 3px !important;
  color: inherit !important;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.counter-area .info.xv .counter,
.counter-area .info.xv .unit { color: #fff !important; }