/*
 * paginas.css — CSS de PÁGINAS de la web madre (3.9.0+).
 *
 * No es del tema: son secciones de www.elconstructordepaginas.com que en la web
 * de un cliente no existen. La variante «fábrica» no lleva este fichero, y
 * functions.php comprueba que exista antes de encolarlo.
 *
 * 🚨 SE ENCOLA DESPUÉS DE style.css (dependencia declarada en cb_assets()).
 *    Hasta la 3.8.0 todo vivía en un fichero y en un empate de especificidad
 *    ganaba lo que estuviera más abajo; el orden de encolado es ahora el que
 *    manda.
 *
 * 🚨 AQUÍ SOLO ENTRAN SECCIONES QUE NO PISAN AL MOLDE. De las 22 exclusivas de
 *    la web madre, 9 NO se pudieron mover: pintan los mismos elementos que
 *    secciones compartidas que venían DESPUÉS, y sacarlas invertía quién gana.
 *    El caso de libro es .cb-servicio__img--pieza contra .cb-servicio__img:
 *    dos clases distintas en el MISMO elemento, misma especificidad, decide el
 *    orden. Antes de mover una sección más, pasa scripts/comprobar-corte-css.py.
 *    Detalle en ../../DIAGNOSTICO-CSS-MOLDE.md.
 */

/* ==========================================================================
   EL CIERRE, CON FONDO DE CONVERSACIÓN
   ==========================================================================
   La sección va de escribirnos por WhatsApp y enseña un móvil con una charla,
   así que el fondo hace de papel pintado de la conversación: burbujas, el doble
   visto y una arroba, sueltos y muy tenues sobre el azul de la casa. El SVG va
   dentro del propio CSS —ni una petición más, ni una imagen que mantener— y un
   halo verde detrás del móvil lo despega del fondo. */

.cb-fondo-chat {
  position: relative;
  isolation: isolate;
  /* Verde profundo, no azul: el pie ya es azul oscuro y las dos secciones
     seguidas se fundían en un bloque. Además es el color de la conversación. */
  background:
    radial-gradient(58% 88% at 76% 48%, rgb(37 211 102 / 22%) 0%, transparent 60%),
    linear-gradient(150deg, #12513F 0%, #0E4133 48%, #093026 100%);
  overflow: hidden;
}
.cb-fondo-chat::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23F7E06B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 26h44a8 8 0 0 1 8 8v20a8 8 0 0 1-8 8H36l-10 9V62h-8a8 8 0 0 1-8-8V34a8 8 0 0 1 8-8z'/><path d='M150 150h48a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8h-8v9l-10-9h-30a8 8 0 0 1-8-8v-22a8 8 0 0 1 8-8z'/></g><g fill='none' stroke='%237FE3B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M156 40l7 7 15-16'/><path d='M168 47l7 7 15-16'/><circle cx='60' cy='176' r='15'/><path d='M75 176v4a9 9 0 0 0 18 0v-4a33 33 0 1 0-13 26'/><path d='M60 176a0 0 0 0 1 0 0'/></g></svg>");
  background-size: 240px 240px;
  transform: rotate(-8deg);
}
/* Una banda de luz que cruza, para que el azul no quede plano */
.cb-fondo-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 6%) 50%, transparent 62%);
}

/* ==========================================================================
   ALOJAMIENTO Y MANTENIMIENTO — dos cosas distintas, y se ve
   ========================================================================== */

.cb-hosting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background: var(--wp--preset--color--principal);
  color: #fff;
  border-radius: var(--cb-radio);
  padding: 1.6rem 1.9rem;
  margin-top: 1.4rem;
}
.cb-hosting { position: relative; }
.cb-hosting__oferta {
  position: absolute;
  top: -.8rem; left: 1.6rem;
  background: var(--wp--preset--color--acento);
  color: var(--wp--preset--color--principal);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: .82rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.cb-hosting__txt { flex: 1 1 22rem; }
.cb-hosting__et {
  margin: 0 0 .3rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.25rem;
}
.cb-hosting__desc { margin: 0; color: var(--cb-tinta-clara); font-size: .95rem; line-height: 1.5; }
.cb-hosting__precio {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-l);
  line-height: 1;
  color: var(--wp--preset--color--acento);
  white-space: nowrap;
}
.cb-hosting__precio span {
  display: block;
  font-size: .3em;
  font-weight: 700;
  color: var(--cb-tinta-clara);
  margin-top: .3rem;
  text-align: right;
}
.cb-mant__tit {
  margin: 1.8rem 0 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--wp--preset--color--principal);
}

/* ==========================================================================
   EL EJEMPLO, CON PINTA DE FACTURA
   ==========================================================================
   En un párrafo con negritas nadie entendía qué se paga y cuándo. Con líneas de
   concepto y precio —incluidas las que van a cero— se lee de un vistazo. */

.cb-factura__tit {
  margin: 2rem 0 1rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--wp--preset--color--principal);
}
.cb-facturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.cb-factura {
  background: #fff;
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra);
  padding: 1.4rem 1.5rem 1.2rem;
}
.cb-factura__cuando {
  margin: 0 0 .9rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--wp--preset--color--principal);
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--wp--preset--color--linea);
}
.cb-factura__linea {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .8rem;
  padding: .62rem 0;
  border-bottom: 1px dashed var(--wp--preset--color--linea);
}
.cb-factura__linea span { font-size: .95rem; line-height: 1.35; }
.cb-factura__linea small {
  display: block;
  font-size: .78rem;
  color: var(--wp--preset--color--tinta-suave);
  margin-top: .15rem;
  line-height: 1.4;
}
.cb-factura__linea b {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--wp--preset--color--principal);
  white-space: nowrap;
}
.cb-factura__linea--regalo b { color: var(--cb-bien); }
.cb-factura__linea--regalo s {
  font-weight: 400;
  font-size: .78em;
  color: var(--wp--preset--color--tinta-suave);
  margin-right: .3rem;
}
.cb-factura__linea--fuera span, .cb-factura__linea--fuera b { color: var(--wp--preset--color--tinta-suave); }
.cb-factura__total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .8rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 2px solid var(--wp--preset--color--principal);
}
.cb-factura__total span {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1rem;
}
.cb-factura__total b {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-m);
  line-height: 1;
  color: var(--wp--preset--color--principal);
}
.cb-factura__pie {
  margin: 1.1rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--wp--preset--color--tinta-suave);
}

.cb-mant__nota { margin: 1rem 0 0; font-size: .92rem; color: var(--wp--preset--color--tinta-suave); }
.cb-mant__total {
  margin: 1.2rem 0 0;
  padding: .9rem 1.2rem;
  background: var(--wp--preset--color--acento-suave);
  border-radius: var(--cb-radio-m);
  font-size: .95rem;
  line-height: 1.55;
}

/* ==========================================================================
   LAS PREGUNTAS DE LA MUESTRA — respuestas a la vista, no un acordeón
   ==========================================================================
   Era un acordeón: seis cajas blancas cerradas con el triangulito nativo del
   navegador. Un acordeón está bien en un FAQ de soporte, donde el visitante
   viene a buscar UNA respuesta concreta; aquí es lo contrario — cada respuesta
   desactiva un miedo («es gratis», «funciona de verdad», «caduca sola») y lo
   que interesa es que se lean sin tener que pedirlo.

   Y no todas pesan igual: las dos primeras son las que deciden, así que van
   arriba y anchas; las cuatro de trámite, en rejilla debajo. */

.cb-preg { max-width: 64rem; margin-inline: auto; }
/* Dos columnas fijas, no `auto-fit`: con auto-fit las cuatro de abajo se
   repartían en tres y una, y la última quedaba descolgada. */
.cb-preg__clave,
.cb-preg__resto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem 2.6rem;
}
.cb-preg__resto { margin-top: 2.4rem; }

@media (max-width: 700px) {
  .cb-preg__clave,
  .cb-preg__resto { grid-template-columns: 1fr; }
  .cb-preg__resto { margin-top: 1.8rem; }
}

.cb-preg__una { border-top: 2px solid var(--wp--preset--color--linea); padding-top: 1.1rem; }
/* El guion abre la pregunta como en una entrevista: la web habla en primera
   persona en todas las páginas y aquí también son ellos preguntando. */
.cb-preg__una h3 {
  margin: 0 0 .55rem;
  font-size: 1.1rem;
  color: var(--wp--preset--color--principal);
}
.cb-preg__una h3::before {
  content: "—";
  color: var(--wp--preset--color--turquesa);
  margin-right: .45rem;
}
.cb-preg__una p {
  margin: 0;
  color: var(--wp--preset--color--tinta-suave);
  line-height: 1.65;
}
/* Las dos que deciden: línea de acento y un punto más de cuerpo */
.cb-preg__clave .cb-preg__una { border-top-color: var(--wp--preset--color--acento); }
.cb-preg__clave h3 { font-size: 1.25rem; }
.cb-preg__clave p { font-size: 1.02rem; }
.cb-preg__clave strong { color: var(--wp--preset--color--principal); }

/* ==========================================================================
   «Y LO QUE VIENE DESPUÉS» — tres hitos en el tiempo, no un párrafo
   ==========================================================================
   Antes era un título centrado y un párrafo con los precios metidos en negrita:
   se leía como letra pequeña. Ahora son tres momentos —cuando se publica, cada
   mes y el día que quieras irte— y cada uno lleva su cifra a la vista. */

.cb-despues__et {
  margin: 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cota);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquesa);
}
.cb-despues__tit {
  margin: .3rem 0 .5rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--wp--preset--color--principal);
}
.cb-despues__sub {
  margin: 0 auto 2.2rem;
  max-width: 46rem;
  text-align: center;
  color: var(--wp--preset--color--tinta-suave);
}

.cb-hitos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem;
  position: relative;
}
/* La línea que une los tres momentos, por detrás de las tarjetas */
@media (min-width: 900px) {
  .cb-hitos::before {
    content: "";
    position: absolute;
    left: 12%; right: 12%; top: 2.1rem;
    border-top: 2px dashed var(--wp--preset--color--acento);
    z-index: 0;
  }
}
.cb-hito {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--wp--preset--color--linea);   /* sobre blanco, si no se diluyen */
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra);
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cb-hito__cuando {
  align-self: center;
  margin-top: -2.3rem;
  margin-bottom: 1rem;
  background: var(--wp--preset--color--principal);
  color: #fff;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .03em;
  padding: .38rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cb-hito__icono {
  width: 46px; height: 46px;
  border-radius: var(--cb-radio-m);
  display: grid; place-items: center;
  background: var(--wp--preset--color--acento-suave);
  margin-bottom: .9rem;
}
.cb-hito__icono svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--wp--preset--color--principal);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-hito h3 { margin: 0 0 .5rem; font-size: 1.18rem; }
.cb-hito p { margin: 0 0 1.1rem; color: var(--wp--preset--color--tinta-suave); font-size: .95rem; line-height: 1.55; }
.cb-hito__precio {
  margin-top: auto;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-s);
  line-height: 1;
  color: var(--wp--preset--color--principal);
}
.cb-hito__precio small {
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 400;
  font-size: .5em;
  color: var(--wp--preset--color--tinta-suave);
  margin-left: .4rem;
}
.cb-hito__regalo {
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wp--preset--color--principal);
  background: var(--wp--preset--color--acento);
  border-radius: var(--cb-radio-s);
  padding: .25rem .6rem;
}
.cb-hito__regalo--gris {
  background: var(--wp--preset--color--papel-alt);
  color: var(--wp--preset--color--tinta-suave);
  font-weight: 600;
}
/* El hito del mantenimiento ya no lleva cifra: la cifra vive en la sección del
   producto. El `margin-top:auto` es el que mantiene alineados los tres pies. */
.cb-hito__enlace {
  margin-top: auto;
  padding-top: .9rem;
  font-weight: 700;
  font-size: .88rem;
}
.cb-despues__pie { margin: 2.2rem 0 0; text-align: center; }

/* ==========================================================================
   DOS PLANES, UNO AL LADO DEL OTRO
   ==========================================================================
   Para los servicios que tienen dos niveles (las redes: con vídeo o sin él).
   El segundo va destacado, que es el que interesa vender. */

.cb-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.cb-planes__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--cb-radio-m);
  padding: 1.2rem 1.2rem 1.1rem;
}
.cb-planes__col--destacada {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--wp--preset--color--acento), var(--cb-sombra);
}
.cb-planes__cinta {
  position: absolute;
  top: -.72rem; right: 1rem;
  background: var(--wp--preset--color--acento);
  color: var(--wp--preset--color--principal);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: .72rem;
  padding: .25rem .75rem;
  border-radius: 999px;
}
.cb-planes__et {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cota);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-planes__precio {
  margin: .2rem 0 .5rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-m);
  line-height: 1;
  color: var(--wp--preset--color--principal);
}
.cb-planes__precio span {
  font-size: .34em;
  font-weight: 700;
  color: var(--wp--preset--color--tinta-suave);
  margin-left: .35rem;
}
.cb-planes__desc { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--wp--preset--color--tinta-suave); }

/* ==========================================================================
   EL BLOG — portada y artículo
   ==========================================================================
   Las plantillas venían de serie: título, fecha y extracto uno debajo de otro,
   sin diseño. Aquí el blog es una herramienta de venta —cada artículo contesta
   una pregunta que frena una compra—, así que la portada se lee como un índice
   de preguntas y el artículo, como algo que da gusto leer entero.
   ========================================================================== */

/* --- Portada: la lista de artículos ------------------------------------- */

.cb-entradas__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 1.8rem;
}
/* WordPress marca la lista como `is-layout-flow` y eso le mete un
   `margin-block-start` a TODOS los hijos MENOS al primero. En una lista normal
   no se nota; en una rejilla, ese margen empuja cada ficha dentro de su celda
   y la primera queda 17 px más alta que las demás. El espacio ya lo pone el
   `gap`, así que fuera. */
.cb-entradas__lista > li { margin-block-start: 0; margin-block-end: 0; }
.cb-entrada {
  background: #fff;
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra-baja);
  overflow: hidden;                 /* para que la foto respete la esquina */
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--wp--preset--color--acento);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cb-entrada:hover { transform: translateY(-5px); box-shadow: var(--cb-sombra); }
/* La foto del artículo. Si un artículo no la tiene, el bloque no se pinta y la
   ficha queda como antes: sin hueco ni marco vacío. */
.cb-entrada__img { margin: 0; }
.cb-entrada__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cb-entrada:hover .cb-entrada__img img { transform: scale(1.04); }
.cb-entrada__cuerpo {
  padding: 1.6rem 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.cb-entrada__tit { margin: 0 0 .8rem; font-size: 1.32rem; line-height: 1.25; }
.cb-entrada__tit a { color: var(--wp--preset--color--principal); text-decoration: none; }
.cb-entrada__tit a:hover { color: var(--wp--preset--color--coral); }
.cb-entrada__txt {
  margin: 0;
  color: var(--wp--preset--color--tinta-suave);
  line-height: 1.6;
  font-size: .95rem;
}
/* El «Leer el artículo» que WordPress cuelga del extracto: aquí es el pie de
   la ficha, así que se despega del texto y se ancla abajo.
   El `margin-top:auto` de abajo NO hacía nada: el enlace cuelga del extracto y
   el extracto no era contenedor flexible, así que no había eje contra el que
   empujar. Se veía en cuanto una ficha se quedaba sin foto —el enlace se
   pegaba al texto y dejaba media tarjeta en blanco—, pero pasaba en todas las
   que tienen el extracto corto. */
.cb-entrada__txt { display: flex; flex-direction: column; flex: 1 1 auto; }
.cb-entrada__txt .wp-block-post-excerpt__more-text { margin-top: auto; }
.cb-entrada__txt a {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .92rem;
  color: var(--wp--preset--color--principal);
  text-decoration: none;
  border-bottom: 2px solid var(--wp--preset--color--acento);
}
.cb-entrada__txt a:hover { color: var(--wp--preset--color--coral); }

.cb-paginacion { margin-top: 2.6rem; gap: .8rem; }
.cb-paginacion a, .cb-paginacion span { text-decoration: none; font-weight: 700; }

/* --- El artículo -------------------------------------------------------- */

.cb-cabecera-pag--post .cb-post__fecha {
  margin: 0 0 .4rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cota);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--acento);
}
.cb-cabecera-pag--post h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.15; }

/* Cuerpo de lectura: más aire entre líneas que en el resto de la web, porque
   aquí se leen párrafos seguidos y no fichas sueltas. */
.cb-post .wp-block-post-content > p,
.cb-post .wp-block-post-content > ul,
.cb-post .wp-block-post-content > ol { font-size: 1.06rem; line-height: 1.78; }
.cb-post .wp-block-post-content > * + * { margin-top: 1.25rem; }
.cb-post h2 {
  margin-top: 2.8rem !important;
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  line-height: 1.25;
}
.cb-post h3 { margin-top: 2rem !important; font-size: 1.2rem; }
.cb-post li { margin-bottom: .65rem; line-height: 1.7; }
.cb-post a { color: var(--wp--preset--color--principal); text-decoration-color: var(--wp--preset--color--acento); text-underline-offset: 3px; }
.cb-post a:hover { color: var(--wp--preset--color--coral); }
.cb-post code {
  background: var(--wp--preset--color--papel-alt);
  padding: .12em .38em;
  border-radius: var(--cb-radio-s);
  font-size: .92em;
}
/* La entradilla: el párrafo que resume el artículo antes del primer titular */
.cb-post__entradilla {
  font-size: 1.18rem !important;
  line-height: 1.6 !important;
  color: var(--wp--preset--color--principal);
  border-left: 5px solid var(--wp--preset--color--acento);
  padding-left: 1.2rem;
}
/* El aviso del final del artículo hereda el recuadro de los precios */
.cb-post .cb-plan__nota { margin-top: 2.6rem; font-size: 1rem; }

/* Anterior / siguiente */
/* Los dos artículos de al lado, con su foto.
   Mismos materiales que las fichas del blog —fondo blanco, esquina redondeada,
   sombra baja y la foto que se acerca al pasar por encima—, pero en horizontal:
   así se distinguen del listado del blog y el bloque no se come media pantalla
   al final del artículo. La foto tiene un ancho máximo para que, cuando solo
   hay un artículo al lado (el primero y el último no tienen los dos), la ficha
   pueda ocupar todo el ancho sin que la miniatura se vuelva un cartelón. */
.cb-postnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.4rem;
}
.cb-postnav__una {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra-baja);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cb-postnav__una:hover { transform: translateY(-4px); box-shadow: var(--cb-sombra); }
.cb-postnav__foto { flex: 0 0 38%; max-width: 190px; overflow: hidden; }
.cb-postnav__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cb-postnav__una:hover .cb-postnav__foto img { transform: scale(1.05); }
.cb-postnav__txt {
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
}
.cb-postnav__et {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquesa);
}
.cb-postnav__tit {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--wp--preset--color--principal);
}
.cb-postnav__una:hover .cb-postnav__tit { color: var(--wp--preset--color--coral); }
.cb-postnav__todos { margin-top: 1.6rem !important; font-size: .92rem; }

/* En el móvil la ficha se apila. En horizontal, con el titular ocupando tres o
   cuatro líneas, la columna de la foto queda alta y estrecha y el recorte se
   come la ilustración: se veía una tira vertical. Arriba y a 16:9 se ve entera,
   igual que en las fichas del blog. */
@media (max-width: 560px) {
  .cb-postnav__una { flex-direction: column; }
  .cb-postnav__foto {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-postnav__una, .cb-postnav__una:hover,
  .cb-postnav__foto img, .cb-postnav__una:hover .cb-postnav__foto img {
    transition: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-entrada, .cb-entrada__img img,
  .cb-entrada:hover, .cb-entrada:hover .cb-entrada__img img { transition: none; transform: none; }
}

/* La foto de cabecera del artículo, entre el titular y el texto */
.cb-post__portada { margin: 0 auto 2.4rem; max-width: 860px; }
.cb-post__portada img { width: 100%; border-radius: var(--cb-radio); display: block; }

/* --- La firma del final del artículo ------------------------------------
   Quién escribe esto. Va sobre papel-alt para separarse del cuerpo del
   artículo sin parecer otra sección de la web. */
.cb-firma {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 3rem;
  padding: 1.6rem 1.8rem;
  background: var(--wp--preset--color--papel-alt);
  border-radius: var(--cb-radio);
  border-left: 5px solid var(--wp--preset--color--turquesa);
}
.cb-firma__cara { width: auto; height: 128px; flex: none; align-self: flex-end; }
.cb-firma__et {
  margin: 0 0 .3rem !important;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cota);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--turquesa);
}
.cb-firma__txt { margin: 0 !important; font-size: .95rem !important; line-height: 1.6 !important; }
.cb-firma__pie { margin: .7rem 0 0 !important; font-size: .9rem !important; }

@media (max-width: 620px) {
  .cb-firma { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .cb-firma__cara { height: 104px; align-self: center; }
}

/* --- Los temas del blog -------------------------------------------------
   Píldoras para saltar de un tema a otro. Van arriba del listado, que es
   donde se buscan, y la activa se marca en tinta para que se vea de un
   vistazo dónde estás. */
.cb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.2rem;
}
.cb-cats__una {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--wp--preset--color--linea);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .92rem;
  color: var(--wp--preset--color--principal);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cb-cats__una span {
  font-size: .78rem;
  font-weight: 400;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-cats__una:hover { border-color: var(--wp--preset--color--acento); }
.cb-cats__una.is-activa {
  background: var(--wp--preset--color--principal);
  border-color: var(--wp--preset--color--principal);
  color: #fff;
}
.cb-cats__una.is-activa span { color: var(--cb-tinta-clara); }

/* El tema al que pertenece cada artículo: en la ficha y en su cabecera */
.cb-entrada__cat,
.cb-post__cat {
  margin: 0 0 .5rem !important;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cota);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cb-entrada__cat a { color: var(--wp--preset--color--turquesa); text-decoration: none; }
.cb-entrada__cat a:hover { color: var(--wp--preset--color--coral); }
/* En la cabecera del artículo, sobre el degradado oscuro. El bloque de
   términos se pinta como caja flexible, así que `text-align:center` no le
   basta: hay que centrar también la caja. */
/* El `auto` de los lados es imprescindible: el grupo centra a sus hijos con
   `margin-inline:auto`, y un `margin: .5rem 0 0` lo anula y deja la caja
   pegada a la izquierda aunque el texto vaya centrado. */
.cb-post__cat {
  margin: .5rem auto 0 !important;
  text-align: center;
}
.cb-post__cat a { color: var(--wp--preset--color--acento); text-decoration: none; }
.cb-post__cat a:hover { text-decoration: underline; }
/* La fecha va antes que el tema, y con el tema debajo sobra el margen doble */
.cb-cabecera-pag--post .cb-post__fecha { margin-bottom: 0 !important; }

/* La descripción del tema, bajo su título */
.cb-cabecera-pag .wp-block-term-description p { margin: .6rem 0 0; }

/* ==========================================================================
   AVISO DE COOKIES
   Una banda abajo, no un muro: se lee la web mientras se decide. Los dos
   botones pesan igual a propósito —rechazar tiene que costar lo mismo que
   aceptar—, y ninguno viene marcado de antemano.
   ========================================================================== */

.cb-cookies {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9000;
  max-width: 62rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.8rem;
  padding: 1.15rem 1.4rem;
  background: var(--wp--preset--color--principal);
  color: #fff;
  border-radius: var(--cb-radio);
  box-shadow: 0 10px 40px rgb(0 0 0 / 28%);
}
.cb-cookies[hidden] { display: none; }
.cb-cookies__txt { flex: 1 1 22rem; }
.cb-cookies__txt strong {
  display: block;
  font-family: var(--wp--preset--font-family--titulos);
  font-size: 1.1rem;
  margin-bottom: .2rem;
}
.cb-cookies__txt p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #cfdfe8;
}
.cb-cookies__txt a { color: var(--wp--preset--color--acento); }
.cb-cookies__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  flex: 0 0 auto;
}
/* Los botones del aviso son <button>, no <a> como el resto de la web: hay que
   apagarles el estilo que les da el navegador. Sin esto, el de rechazar salía
   con el gris de serie (#efefef) y su texto blanco encima: ilegible. */
.cb-cookies__botones .cb-btn {
  font-family: var(--wp--preset--font-family--titulos);
  font-size: .95rem;
  padding: .7rem 1.4rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* El botón de línea, sobre el azul del aviso, necesita fondo transparente y el
   borde en claro. */
.cb-cookies__botones .cb-btn--linea {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 55%);
}
.cb-cookies__botones .cb-btn--linea:hover { background: rgb(255 255 255 / 12%); }

@media (max-width: 560px) {
  .cb-cookies { left: .6rem; right: .6rem; bottom: .6rem; padding: 1rem 1.1rem; }
  .cb-cookies__botones { width: 100%; }
  .cb-cookies__botones .cb-btn { flex: 1 1 0; text-align: center; }
}

/* Tabla de la política de cookies: se desplaza sola en el móvil en vez de
   desbordar la página. */
.cb-tabla-cookies { overflow-x: auto; margin: 1.4rem 0 1.8rem; }
.cb-tabla-cookies table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .93rem;
}
.cb-tabla-cookies th,
.cb-tabla-cookies td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--wp--preset--color--linea, rgb(0 0 0 / 10%));
  vertical-align: top;
}
.cb-tabla-cookies th {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  color: var(--wp--preset--color--principal);
  border-bottom-width: 2px;
}
.cb-tabla-cookies code {
  font-size: .88rem;
  background: var(--wp--preset--color--papel-alt);
  padding: .1rem .35rem;
  border-radius: 4px;
}

/* La línea que cuenta cada trabajo. Va bajo el sector y antes de la etiqueta:
   el sector dice de qué va el negocio y esta dice qué resuelve su web, que es
   lo que de verdad mira quien está pensando en encargar la suya. */
.cb-trabajo__desc {
  margin: .7rem 0 0 !important;
  font-size: .93rem !important;
  line-height: 1.55;
  color: var(--wp--preset--color--tinta) !important;
}

/* Iconos de redes en el pie. Solo se pintan si la red está dada de alta en la
   opción `cb_rrss`, así que en una demo recién montada el pie no enseña
   enlaces a perfiles que no existen. */
.cb-pie__redes { display: inline-flex; gap: .7rem; align-items: center; }
.cb-pie__redes a {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  transition: background .2s ease, transform .2s ease;
}
.cb-pie__redes a:hover { background: var(--wp--preset--color--acento); transform: translateY(-2px); }
.cb-pie__redes svg { width: 1.1rem; height: 1.1rem; fill: #fff; }
.cb-pie__redes a:hover svg { fill: var(--wp--preset--color--principal); }

@media (prefers-reduced-motion: reduce) {
  .cb-pie__redes a, .cb-pie__redes a:hover { transition: none; transform: none; }
}

/* ==========================================================================
   ARREGLOS DE LA REVISIÓN SEO 28-07 (informe Lighthouse)
   ========================================================================== */

/* El turquesa de marca (#27B5C4) da 2,5:1 sobre blanco: vale para adornos,
   pero en texto pequeño no llega al mínimo (4,5:1) y era lo único que bajaba
   la nota de accesibilidad. Para los rotulitos se usa esta variante oscura
   (5,1:1) que conserva el carácter; los degradados, bordes y guiones
   decorativos siguen con el turquesa de siempre. */
.cb-cuida__et,
.cb-despues__et,
.cb-postnav__et,
.cb-firma__et,
.cb-entrada__cat a { color: #147985; }

/* Los personajes del equipo del hero: su CSS fija el alto, pero el ancho no
   se sabe hasta que la imagen llega, así que en PC el bloque entraba estrecho
   y empujaba al crecer (CLS 0,104, lo medía Lighthouse). Declarando la
   proporción real (206×392) el hueco queda reservado desde el primer pintado. */
.cb-equipo img { aspect-ratio: 206 / 392; }

/* ==========================================================================
   LAS NOTAS DE GOOGLE — la gráfica de la portada
   Cuatro aros al estilo del propio Lighthouse, con las notas reales de esta
   web. El aro es SVG puro: nada que cargar y nítido a cualquier tamaño.
   ========================================================================== */

.cb-notas {
  margin-top: 2.6rem;
  padding: 2rem 1.6rem 1.6rem;
  background: var(--wp--preset--color--papel-alt);
  border-radius: var(--cb-radio);
}
.cb-notas__tit {
  text-align: center;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--wp--preset--color--principal);
  margin: 0 0 1.6rem;
}
.cb-notas__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 40%), 1fr));
  gap: 1.4rem 1rem;
  justify-items: center;
}
.cb-nota { text-align: center; }
.cb-nota svg { display: block; margin-inline: auto; }
.cb-nota__pista { fill: none; stroke: #dfe7ea; stroke-width: 10; }
.cb-nota__arco {
  fill: none;
  stroke: var(--wp--preset--color--principal);
  stroke-width: 10;
  stroke-linecap: round;
}
.cb-nota__val {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 34px;
  fill: var(--wp--preset--color--principal);
}
.cb-nota__cien { font-size: 13px; font-weight: 700; fill: var(--wp--preset--color--tinta-suave); }
.cb-nota__et {
  display: block;
  margin-top: .6rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .95rem;
  color: var(--wp--preset--color--principal);
}
.cb-notas__pie {
  text-align: center;
  margin: 1.6rem 0 0;
  font-size: .85rem;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-notas__pie a { color: inherit; }

/* La versión compacta de los aros, dentro de la tarjeta de métricas de la
   página de Servicios: las notas primero (el titular) y el detalle debajo. */
.cb-notas__fila--mini {
  /* minmax(0,1fr): sin el 0, el mínimo de cada columna es el ancho fijo del
     SVG (82px) y la tarjeta desbordaba en el móvil (435px en una pantalla
     de 390). Con el 0 la columna puede encoger y el aro se adapta. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: .2rem 0 .9rem;
}
.cb-notas__fila--mini .cb-nota svg { width: 100%; max-width: 82px; height: auto; }
.cb-notas__fila--mini .cb-nota__val { font-size: 40px; }
.cb-notas__fila--mini .cb-nota__et {
  margin-top: .35rem;
  font-size: .74rem;
  letter-spacing: .02em;
}

/* En pantallas estrechas la tarjeta es angosta y cuatro aros en fila se
   pisaban las etiquetas: pasan a dos por fila, como en la portada. */
@media (max-width: 700px) {
  .cb-notas__fila--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .5rem; }
}