/*
Theme Name: Constructor Base
Theme URI: https://www.elconstructordepaginas.com
Description: Tema base de El Constructor de Páginas. Molde del que salen la web madre y todas las demos. Tema de bloques, sin dependencias de terceros: cero plugins de maquetación, cero llamadas externas, fuentes servidas en local (RGPD). Dirección visual construida sobre las ilustraciones propias de la casa: el equipo y las escenas de cada sector.
Author: Centro de Respaldo
Version: 3.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: constructor-base
*/

/* Los estilos base viven en theme.json. Aquí solo lo que theme.json no cubre. */

/* ==========================================================================
   EL SISTEMA
   ==========================================================================
   Tres radios, tres sombras y los colores que no están en la paleta del
   theme.json pero se repiten. Antes había once radios distintos y medio
   catálogo de sombras a ojo: cada pieza nueva inventaba los suyos y el
   conjunto dejaba de leerse como una sola mano. */

:root {
  /* sombras */
  --cb-sombra-baja: 0 2px 12px rgb(24 66 86 / 7%);
  --cb-sombra: 0 4px 14px rgb(24 66 86 / 8%), 0 18px 40px rgb(24 66 86 / 10%);
  --cb-sombra-alta: 0 20px 50px rgb(24 66 86 / 20%);

  /* radios: grande para secciones y tarjetas, medio para piezas, pequeño para chips */
  --cb-radio: 20px;
  --cb-radio-m: 14px;
  --cb-radio-s: 9px;

  /* la escala de las cifras: cuatro tamaños, no ocho a ojo */
  --cb-precio-xl: clamp(2.6rem, 5vw, 3.4rem);   /* el protagonista de una sección */
  --cb-precio-l: 2.4rem;                        /* precio de un servicio */
  --cb-precio-m: 2.1rem;                        /* precio en tarjeta o total */
  --cb-precio-s: 1.7rem;                        /* precio en una línea o un hito */

  /* colores de trabajo que no son de marca */
  --cb-tinta-clara: #CFDFE8;          /* texto sobre el azul */
  --cb-bien: #16A34A;                 /* el verde de «esto está bien» */
  --cb-bien-suave: #F0FDF4;
  --cb-wasap: #25D366;
  --cb-azul-1: #1B4D64;               /* los dos tonos del degradado de marca */
  --cb-azul-2: #123646;
}

/* ==========================================================================
   SECCIONES PEGADAS
   ==========================================================================
   WordPress separa los bloques de primer nivel con el `blockGap` del tema (aquí,
   17,6 px). Entre dos secciones a ancho completo con fondo de color, ese hueco
   deja ver el blanco del body: una línea blanca entre franjas, y otra entre el
   contenido y el pie. Las secciones van pegadas; el aire lo ponen ellas con su
   propio padding. */

/* Quien pone ese hueco es el layout de WordPress, con
   `.is-layout-flow > :not(:first-child) { margin-block-start: … }`. Para ganarle
   hace falta MÁS especificidad que esa: con `:where()` (que vale 0) la regla se
   escribía pero no se aplicaba. De ahí los selectores largos de abajo.
   Y sin `>` en el segundo: la plantilla envuelve el contenido en un grupo, así que
   las secciones no son hijas directas de `.entry-content`. */

body .wp-site-blocks > * { margin-block-start: 0; }   /* el pie, pegado al contenido */

.entry-content .wp-block-group.alignfull,
.wp-block-post-content .wp-block-group.alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* En un móvil de 390 px, el margen lateral de serie (56 px por lado) se comía el
   29 % de la pantalla. Aquí se aprieta: el contenido respira igual y se lee mejor. */
@media (max-width: 620px) {
  :root {
    --wp--style--root--padding-left: 1.35rem;
    --wp--style--root--padding-right: 1.35rem;
  }
}

:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--coral);
  outline-offset: 3px;
}

/* ==========================================================================
   FORMAS — lo que rompe la caja rectangular
   ========================================================================== */

/* Manchas de color detrás de las ilustraciones */
.cb-mancha { position: relative; display: inline-block; }
.cb-mancha::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  background: var(--cb-mancha-color, var(--wp--preset--color--acento));
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  z-index: 0;
}
.cb-mancha > * { position: relative; z-index: 1; }

/* Puntitos: la textura alegre del fondo */
.cb-puntos {
  background-image: radial-gradient(rgb(24 66 86 / 12%) 2px, transparent 2px);
  background-size: 26px 26px;
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.cb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(8px);
  box-shadow: var(--cb-sombra-baja);
}
.cb-topbar { font-size: var(--wp--preset--font-size--cota); }
.cb-topbar a { text-decoration: none; }
.cb-topbar a:hover { text-decoration: underline; }

.cb-nav a {
  text-decoration: none;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  padding-block: .3rem;
}
.cb-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--acento);
  transition: width .2s ease;
}
.cb-nav a:hover::after, .cb-nav .current-menu-item > a::after { width: 100%; }

/* ==========================================================================
   HERO — el equipo saluda
   ========================================================================== */

.cb-hero { position: relative; overflow: hidden; }
.cb-hero__cols {
  display: grid;
  grid-template-columns: 54% 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
/* Mientras no haya ilustración, el hero va a una columna y el texto respira más.
   Al añadir el dibujo basta con quitar `--solo` de la clase. */
.cb-hero__cols--solo { grid-template-columns: 1fr; }
.cb-hero__cols--solo .cb-hero__texto { max-width: 46rem; }
.cb-hero__cols--solo .cb-hero__titular { max-width: 22ch; }
@media (max-width: 900px) { .cb-hero__cols { grid-template-columns: 1fr; } }
/* En un móvil estrecho, la palabra subrayada no puede partirse (el rotulador es
   una sola caja), así que se baja el cuerpo del titular para que quepa entera. */
@media (max-width: 560px) { .cb-hero__titular { font-size: 2.05rem; } }
@media (max-width: 380px) { .cb-hero__titular { font-size: 1.85rem; } }
.cb-hero__texto {
  color: var(--cb-tinta-clara);
  font-size: var(--wp--preset--font-size--grande);
  margin: 0 0 1.5rem;
  max-width: 34rem;
}
.cb-hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* El botón del hero, para no depender del bloque de WordPress dentro del slider */
.cb-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, background .15s ease;
}
.cb-btn:hover { transform: translateY(-2px); }
.cb-btn svg { width: 20px; height: 20px; flex: none; }   /* el icono del shortcode de WhatsApp */
.cb-btn--acento { background: var(--wp--preset--color--acento); color: var(--wp--preset--color--principal); }
.cb-btn--acento:hover { background: #fff; }
.cb-btn--linea { border-color: #fff; color: #fff; }
.cb-btn--linea:hover { background: #fff; color: var(--wp--preset--color--principal); }
.cb-btn--wasap { background: var(--cb-wasap); color: #fff; }
.cb-btn--wasap:hover { background: #1eb457; }

/* ==========================================================================
   EL HERO QUE SE VA TURNANDO
   ==========================================================================
   Tres mensajes, cada uno con su titular y su llamada. Todo con CSS: nada de
   JavaScript para algo que solo cambia una opacidad.

   Las diapositivas se apilan en la MISMA celda de una rejilla (`grid-area: 1/1`),
   no en posición absoluta: así el hueco lo marca la más alta y no da un salto
   cada vez que cambia el texto.

   La animación también apaga `visibility`, que es lo que saca los enlaces
   ocultos del recorrido del tabulador; con `opacity: 0` a secas seguirían
   siendo enfocables a ciegas. */

.cb-slider { display: grid; }
.cb-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  animation: cb-turno 24s infinite;
}
.cb-slide:nth-child(1) { animation-delay: 0s; }
.cb-slide:nth-child(2) { animation-delay: 8s; }
.cb-slide:nth-child(3) { animation-delay: 16s; }

@keyframes cb-turno {
  0%              { opacity: 0; visibility: hidden; transform: translateY(14px); }
  2%              { opacity: 1; visibility: visible; transform: translateY(0); }
  30%             { opacity: 1; visibility: visible; transform: translateY(0); }
  33.33%          { opacity: 0; visibility: hidden; transform: translateY(-10px); }
  100%            { opacity: 0; visibility: hidden; transform: translateY(14px); }
}

/* Quien pide menos movimiento se queda con el primer mensaje, quieto. */
@media (prefers-reduced-motion: reduce) {
  .cb-slide { animation: none; }
  .cb-slide:nth-child(1) { opacity: 1; visibility: visible; transform: none; }
}
.cb-hero__eyebrow {
  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-hero__titular {
  text-wrap: balance;
  color: #fff;                       /* dentro del slider ya no hereda del bloque */
  margin: 1rem 0 1.3rem;
}

/* El rotulador amarillo bajo la palabra clave.
   Va en un pseudo-elemento POR DETRÁS del texto, no en el fondo del span: con el
   degradado anterior, en un titular de dos líneas la banda caía encima de las
   letras y se las comía. */
.cb-subraya { position: relative; white-space: nowrap; z-index: 0; }
.cb-subraya::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em; bottom: .04em;
  height: .26em;
  background: var(--wp--preset--color--acento);
  border-radius: 3px;
  z-index: -1;
}

/* El equipo en fila: los tres personajes ilustrados */
/* Rejilla en vez de fila: cada figura tiene una celda para el dibujo y otra para
   el rótulo, así los tres rótulos caen a la misma altura aunque los personajes
   midan distinto (uno está sentado). */
.cb-equipo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(.4rem, 2vw, 1.6rem);
  padding-bottom: 1rem;
}
.cb-hero__equipo { align-self: end; }
.cb-equipo figure {
  margin: 0;
  text-align: center;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}
.cb-equipo img {
  height: clamp(150px, 22vw, 260px);
  width: auto;
  display: block;
  align-self: end;
  filter: drop-shadow(0 16px 22px rgb(0 0 0 / 22%));
}
/* Bajo cada figura va lo que se hace, no quién lo hace: son las tres
   disciplinas de la casa, no tres personas con nombre. */
.cb-equipo figcaption {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: clamp(.78rem, 1.5vw, .95rem);
  color: var(--wp--preset--color--acento);
  margin-top: .8rem;
  line-height: 1.25;
  letter-spacing: .01em;
}


/* ==========================================================================
   SERVICIOS — tarjetas con carácter, no cajas iguales
   ========================================================================== */

.cb-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.2rem;
}

.cb-tarjeta {
  background: #fff;
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra);
  padding: 2.6rem 2.2rem 2.4rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.cb-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--cb-sombra-alta); }
/* Cinta de color arriba: cada servicio tiene el suyo */
.cb-tarjeta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--cb-color, var(--wp--preset--color--acento));
}
.cb-tarjeta { text-align: center; align-items: center; }
/* La ficha va centrada, pero una lista centrada se lee fatal: los puntos se
   pierden y cada línea empieza donde quiere. Dentro, a la izquierda. */
.cb-tarjeta .cb-lista { text-align: left; align-self: stretch; margin-inline: auto; }
.cb-tarjeta .cb-lista li { margin-bottom: .45rem; }
.cb-tarjeta h3 { margin: 0 0 .6rem; }
.cb-tarjeta p { margin: 0; color: var(--wp--preset--color--tinta-suave); }

/* Las redes en las que trabajamos, bajo el texto de su ficha */
.cb-tarjeta__redes {
  display: flex;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.1rem;
  color: var(--wp--preset--color--principal);
  opacity: .75;
}
.cb-tarjeta__redes svg {
  width: 27px; height: 27px;
  fill: currentColor;      /* son los glifos de marca, macizos */
  stroke: none;
}
.cb-tarjeta__precio {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-m);
  color: var(--wp--preset--color--principal);
  margin-top: auto;
  padding-top: 1.2rem;
  padding-bottom: .3rem;
  line-height: 1;
}
.cb-tarjeta .cb-btn { margin-top: .9rem; }
.cb-tarjeta__precio small {
  display: block;
  font-family: var(--wp--preset--font-family--texto);
  font-size: .78rem;
  font-weight: 400;
  color: var(--wp--preset--color--tinta-suave);
  margin-top: .3rem;
}
/* El emoji/icono grande de cada tarjeta, en su círculo de color */
.cb-tarjeta__icono {
  margin-inline: auto;              /* la ficha va centrada, el icono también */
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cb-color, var(--wp--preset--color--acento));
  margin-bottom: 1.1rem;
}
.cb-tarjeta__icono svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   SECTORES — las escenas ilustradas de cada gremio
   ========================================================================== */

.cb-sectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.2rem; }
/* Con seis gremios, tres por fila en pantalla grande y dos en tableta */
.cb-sectores--seis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .cb-sectores--seis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cb-sectores--seis { grid-template-columns: 1fr; } }
/* Provisional, mientras no esté dibujada la ilustración del gremio: el mismo marco
   con un icono grande, para que la rejilla no quede a medias. */
.cb-sector__img--icono { display: grid; place-items: center; min-height: 190px; }
.cb-sector__icono { color: var(--wp--preset--color--principal); opacity: .75; }
.cb-sector__icono svg { width: 96px; height: 96px; display: block; }
.cb-sector {
  border-radius: var(--cb-radio);
  overflow: hidden;
  background: var(--wp--preset--color--papel-alt);
  box-shadow: var(--cb-sombra);
  display: flex;
  flex-direction: column;
}
/* Altura fija: los dibujos tienen proporciones distintas y si no, las
   tarjetas quedan a alturas diferentes y el bloque baila. */
.cb-sector__img {
  background: var(--cb-color, var(--wp--preset--color--acento-suave));
  height: 230px;
  display: grid;
  place-items: center;
  padding: 1.8rem;
}
.cb-sector__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cb-sector__txt { padding: 1.8rem 2rem 2.1rem; background: #fff; flex: 1; }
.cb-sector__txt h3 { margin: 0 0 .4rem; }
.cb-sector__txt p { margin: 0; color: var(--wp--preset--color--tinta-suave); font-size: .97rem; }

/* ==========================================================================
   PASOS
   ========================================================================== */

.cb-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; }
.cb-paso { position: relative; }
.cb-paso__num {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 4.5rem;
  line-height: .8;
  color: var(--wp--preset--color--acento);
  display: block;
  margin-bottom: .3rem;
}
.cb-paso h3 { margin: 0 0 .5rem; }
.cb-paso p { margin: 0; color: var(--wp--preset--color--tinta-suave); }

/* ==========================================================================
   LISTAS Y VARIOS
   ========================================================================== */

.cb-lista { list-style: none; padding: 0; margin: 1rem 0 0; }
.cb-lista li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; }
.cb-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .38em;
  width: 1rem; height: 1rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FE3B0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Cierre: la llamada con el personaje de la trompeta */
.cb-cierre { display: grid; grid-template-columns: 1fr auto; gap: 3.5rem; align-items: center; }
.cb-cierre img { max-width: min(340px, 34vw); height: auto; }
.cb-cierre__tel {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--wp--preset--color--acento);
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.cb-cierre__tel:hover { color: #fff; }
/* Dos columnas iguales (texto + datos de contacto): lo usan las demos */
.cb-cierre--dos { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 800px) { .cb-cierre { grid-template-columns: 1fr; } .cb-cierre img { display: none; } }
@media (max-width: 800px) { .cb-cierre--dos { grid-template-columns: 1fr; gap: 2.2rem; } }

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

/* ==========================================================================
   AVISO DE DEMOSTRACIÓN (lo inyecta el mu-plugin en las demos)
   ========================================================================== */

.cb-demo-banner {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 9999;
  background: var(--wp--preset--color--acento);
  color: var(--wp--preset--color--principal);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  text-align: center;
  padding: .8rem 1rem;
}
.cb-demo-banner a { color: var(--wp--preset--color--principal); }

/* ==========================================================================
   EL PLAN ANUAL — lo que cuesta que la web siga en pie
   ========================================================================== */

.cb-plan {
  background: #fff;
  border-radius: var(--cb-radio);
  box-shadow: var(--cb-sombra);
  padding: 2rem 1.9rem 1.7rem;
  border-top: 6px solid var(--wp--preset--color--acento);
  position: relative;
}
.cb-plan__eyebrow {
  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-plan__precio {
  margin: .3rem 0 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-xl);
  line-height: 1;
  color: var(--wp--preset--color--principal);
}
.cb-plan__precio span {
  display: inline-block;
  margin-left: .4rem;
  font-size: .32em;
  font-weight: 700;
  color: var(--wp--preset--color--tinta-suave);
  vertical-align: middle;
}
.cb-plan__nota {
  margin: .35rem 0 1.1rem;
  font-size: .84rem;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-plan__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cb-plan__lista li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .95rem;
  line-height: 1.45;
}
.cb-plan__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--wp--preset--color--acento);
  box-shadow: inset 0 0 0 .28rem #fff, 0 0 0 1px var(--wp--preset--color--acento);
}
.cb-plan__pie {
  margin: 1.1rem 0 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--wp--preset--color--principal);
}

/* Cinta de oferta sobre la tarjeta del plan */
.cb-plan__cinta {
  position: absolute;
  top: -.85rem; right: 1.4rem;
  background: var(--wp--preset--color--principal);
  color: #fff;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .8rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(24 66 86 / 22%);
}

/* ==========================================================================
   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 VALE — el cierre de la página de precios
   ==========================================================================
   Después de dos facturas, el cierre sigue la misma metáfora: un vale troquelado
   por una web de muestra a 0 €. Las muescas de los lados son dos círculos del
   color del fondo, y el borde de puntos hace de línea de corte. */

.cb-vale-bloque {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) { .cb-vale-bloque { grid-template-columns: 1fr; } }
.cb-vale-bloque__txt h2 {
  margin: 0 0 .8rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.12;
  color: var(--wp--preset--color--principal);
}
.cb-vale-bloque__txt p { margin: 0 0 1rem; color: var(--wp--preset--color--tinta-suave); max-width: 42ch; }

.cb-vale {
  position: relative;
  background: linear-gradient(150deg, var(--cb-azul-1), #133a4b);
  color: #fff;
  border-radius: var(--cb-radio);
  padding: 2rem 1.8rem 1.7rem;
  text-align: center;
  box-shadow: var(--cb-sombra-alta);
  overflow: hidden;
}
/* la línea de corte */
.cb-vale::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 2px dashed rgb(255 255 255 / 28%);
  border-radius: var(--cb-radio-m);
  pointer-events: none;
}
/* las dos muescas del troquel */
.cb-vale::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px; right: -13px;
  height: 26px;
  margin-top: -13px;
  background:
    radial-gradient(circle 13px at 13px 50%, var(--wp--preset--color--papel, #fff) 98%, transparent 100%) left / 26px 100% no-repeat,
    radial-gradient(circle 13px at calc(100% - 13px) 50%, var(--wp--preset--color--papel, #fff) 98%, transparent 100%) right / 26px 100% no-repeat;
}
.cb-vale__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--acento);
}
.cb-vale__que {
  margin: .35rem 0 .2rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
}
.cb-vale__precio {
  margin: .4rem 0 .3rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-xl);
  line-height: 1;
  color: var(--wp--preset--color--acento);
}
.cb-vale__nota { margin: 0 0 1.3rem; font-size: .86rem; color: var(--cb-tinta-clara); }
.cb-vale .cb-btn { width: 100%; box-sizing: border-box; justify-content: center; }   /* si no, el relleno lo saca del vale */
.cb-vale__pie { margin: .8rem 0 0; font-size: .78rem; color: var(--cb-tinta-clara); }

/* ==========================================================================
   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;
}

/* ==========================================================================
   MANTENIMIENTO — las dos columnas, según dónde viva la web
   ========================================================================== */

.cb-mant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.cb-mant__col {
  background: #fff;
  border-radius: var(--cb-radio);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--cb-sombra);
  border-top: 5px solid var(--wp--preset--color--linea);
}
.cb-mant__col--casa { border-top-color: var(--wp--preset--color--acento); }
.cb-mant__donde {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--wp--preset--color--principal);
  line-height: 1.25;
}
.cb-mant__donde small {
  display: block;
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 400;
  font-size: .82rem;
  color: var(--wp--preset--color--tinta-suave);
  margin-top: .25rem;
}
.cb-mant__fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--wp--preset--color--linea);
}
.cb-mant__fila span { font-weight: 600; }
.cb-mant__fila b {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-s);
  color: var(--wp--preset--color--principal);
  line-height: 1;
  white-space: nowrap;
}
.cb-mant__fila b small {
  display: block;
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 400;
  font-size: .72rem;
  color: var(--wp--preset--color--tinta-suave);
  margin-top: .2rem;
  text-align: right;
}
.cb-mant__extra {
  margin: 1rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--wp--preset--color--tinta-suave);
  border-top: 1px solid var(--wp--preset--color--linea);
  padding-top: .9rem;
}

/* ==========================================================================
   TRABAJOS · «Todas están alojadas y mantenidas por nosotros»
   ==========================================================================
   Era un muro de tres párrafos centrados justo detrás de nueve capturas a todo
   color: la única sección de la web sin nada que mirar. Y los cuatro hechos
   que sostienen la afirmación —servidores propios, copias, certificado,
   actualizaciones— iban escondidos dentro de una frase corrida.
   Ahora la afirmación va a un lado y su prueba al otro. */

.cb-cuida {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}
.cb-cuida__et {
  margin: 0 0 .5rem;
  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-cuida__txt h2 { margin: 0 0 .8rem; }
.cb-cuida__txt > p { margin: 0; color: var(--wp--preset--color--tinta-suave); }
.cb-cuida__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.1rem;
}
.cb-cuida__ficha {
  background: #fff;
  border-radius: var(--cb-radio-m);
  box-shadow: var(--cb-sombra-baja);
  padding: 1.4rem 1.4rem 1.3rem;
}
.cb-cuida__ficha h3 { margin: .8rem 0 .35rem; font-size: 1.06rem; }
.cb-cuida__ficha p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--wp--preset--color--tinta-suave);
}
/* El mismo círculo de color de las fichas grandes, en pequeño */
.cb-tarjeta__icono--s {
  margin: 0;
  width: 42px; height: 42px;
}
.cb-tarjeta__icono--s svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .cb-cuida { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ==========================================================================
   PRECIOS — dos bandas de dos, no cuatro columnas
   Cuatro columnas cabían, pero a 267 px cada frase se partía en tres líneas,
   la sección medía 999 px de alto (más que la pantalla de un portátil) y las
   fichas cortas quedaban con un palmo de blanco. Y sobre todo mentían sobre
   el contenido: dos son de pago único y dos son cuota mensual. Ahora la
   retícula lo dice — una banda cada cosa, con su rótulo.
   ========================================================================== */

.cb-precios__rotulo { margin: 0 0 1.5rem; max-width: 42rem; }
.cb-precios__rotulo--dos { margin-top: 3.4rem; }
.cb-precios__rotulo h2 { margin: 0 0 .3rem; }
.cb-precios__rotulo p { margin: 0; color: var(--wp--preset--color--tinta-suave); }

.cb-precios__par {
  display: grid;
  /* El `min()` es imprescindible: `minmax(400px, …)` a secas obliga a la
     columna a medir 400 px aunque la pantalla tenga 390, y la ficha se sale. */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 2rem;
}

/* La ficha apaisada: cabecera de una fila —quién eres, qué es, cuánto vale—
   y la lista debajo a todo lo ancho, una línea por punto. */
.cb-tarjeta--ancha {
  text-align: left;
  align-items: stretch;
  padding: 2rem 2.1rem 1.9rem;
}
.cb-plan__cab {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.cb-tarjeta--ancha .cb-tarjeta__icono {
  margin: .2rem 0 0;
  width: 52px; height: 52px;
  flex: none;
}
.cb-tarjeta--ancha .cb-tarjeta__icono svg { width: 27px; height: 27px; }
.cb-plan__id { flex: 1 1 auto; min-width: 0; }
.cb-plan__id h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.cb-plan__id p { font-size: .93rem; line-height: 1.5; }
/* La cifra sale del pie y sube a la cabecera: se ve sin recorrer la lista. */
.cb-tarjeta--ancha .cb-tarjeta__precio {
  flex: none;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: var(--cb-precio-s);
  white-space: nowrap;
}
.cb-tarjeta--ancha .cb-tarjeta__precio small { margin-top: .3rem; }
/* La regla de la ficha centrada le pone `margin-inline:auto` a la lista, y en
   una lista de frases cortas eso la deja flotando en mitad de la ficha. Aquí
   arranca donde arranca el título. */
.cb-tarjeta--ancha .cb-lista {
  margin: 1.2rem 0 0;
  max-width: none;
  width: auto;
}
/* El botón, a todo lo ancho: cierra la ficha en vez de quedarse suelto abajo
   a la izquierda, que es lo que pasaba con la ficha apaisada. */
.cb-plan__pie .cb-btn { display: flex; justify-content: center; width: 100%; }
/* La condición de contratación va en el mismo recuadro que los escalones de
   precio: es una cifra que el cliente tiene que ver, no letra pequeña. */
.cb-plan__nota {
  margin: 1.1rem 0 0;
  padding: .9rem 1.2rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--wp--preset--color--tinta-suave);
  background: var(--wp--preset--color--papel-alt);
  border-left: 5px solid var(--cb-color, var(--wp--preset--color--acento));
  border-radius: var(--cb-radio-s);
}
.cb-plan__nota strong { color: var(--wp--preset--color--principal); }
.cb-plan__pie { margin-top: auto; padding-top: 1.5rem; }

/* En pantalla estrecha la cabecera se apila y la cifra vuelve a la izquierda */
@media (max-width: 480px) {
  .cb-plan__cab { flex-wrap: wrap; }
  .cb-tarjeta--ancha .cb-tarjeta__precio { text-align: left; width: 100%; }
}

/* La misma cifra, en una línea, para la página de precios */
.cb-plan__linea {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  margin: 1.1rem 0 0;
  padding: .9rem 1.2rem;
  background: #fff;
  border-left: 5px solid var(--wp--preset--color--acento);
  border-radius: var(--cb-radio-s);
}
.cb-plan__linea strong {
  font-family: var(--wp--preset--font-family--titulos);
  font-size: 1.6rem;
  color: var(--wp--preset--color--principal);
  line-height: 1;
}
.cb-plan__linea span { font-size: .86rem; color: var(--wp--preset--color--tinta-suave); }
/* Dentro de una ficha blanca el fondo blanco no se ve: se invierte a papel. */
.cb-plan__linea--dentro {
  background: var(--wp--preset--color--papel-alt);
  border-left-color: var(--cb-color, var(--wp--preset--color--acento));
}
.cb-plan__linea--dentro strong { font-size: 1.45rem; }

/* ==========================================================================
   EL FORMULARIO DE LA MUESTRA Y SUS PREGUNTAS
   ========================================================================== */

.cb-form--muestra small {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  font-weight: 400;
  color: var(--wp--preset--color--tinta-suave);
  line-height: 1.45;
}
.cb-form__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .cb-form__dos { grid-template-columns: 1fr; } }
.cb-form__fichero input[type="file"] {
  width: 100%;
  padding: .8rem;
  border: 2px dashed var(--wp--preset--color--linea);
  border-radius: var(--cb-radio-m);
  background: var(--wp--preset--color--papel-alt);
  font-size: .9rem;
}
.cb-form__fichero input[type="file"]:hover { border-color: var(--wp--preset--color--acento); }
.cb-form__nota { font-size: .86rem; color: var(--wp--preset--color--tinta-suave); }

.cb-muestra__lado { display: grid; gap: 1.6rem; align-content: start; }
/* Los tres pasos, en columna cuando acompañan al formulario */


/* Preguntas frecuentes */
/* ==========================================================================
   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;
}
.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); }

/* ==========================================================================
   PIEZAS DE SERVICIO — enseñar el servicio, no un dibujo que no pega
   ==========================================================================
   Cada bloque de Servicios llevaba una ilustración de gremio que no tenía nada
   que ver con lo que vendía (una llanta de coche para las tiendas online). En su
   lugar, una pieza que ES el servicio: la web en dos pantallas, una ficha de
   producto con su carrito y unas publicaciones con su calendario. Todo con CSS:
   ni una imagen que mantener y se adapta sola al ancho. */

.cb-servicio__img--pieza {
  display: grid;
  place-items: center;
  gap: .9rem;
  padding: 1.9rem 1.6rem 1.4rem;
  max-height: none;
}
.cb-servicio__img--pieza img { display: none; }
.cb-pieza__pie {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--wp--preset--color--tinta-suave);
  text-align: center;
}

/* --- la web en el ordenador y en el móvil --- */
.cb-maqueta { position: relative; width: 100%; max-width: 330px; padding-bottom: 1.2rem; }
.cb-maqueta__pc {
  background: #fff;
  border-radius: var(--cb-radio-m);
  box-shadow: var(--cb-sombra);
  overflow: hidden;
}
.cb-maqueta__barra {
  display: flex; gap: 5px; align-items: center;
  padding: 8px 10px;
  background: var(--wp--preset--color--principal);
}
.cb-maqueta__barra i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 45%); }
.cb-maqueta__pantalla { padding: 0 0 12px; }
.cb-maqueta__hero {
  background: linear-gradient(135deg, var(--cb-azul-1), var(--cb-azul-2));
  padding: 18px 14px 20px;
  display: grid; gap: 7px;
}
.cb-maqueta__hero span { height: 9px; border-radius: 4px; background: rgb(255 255 255 / 72%); }
.cb-maqueta__hero span.corto { width: 58%; background: rgb(255 255 255 / 42%); }
.cb-maqueta__hero b {
  width: 84px; height: 15px; border-radius: 999px;
  background: var(--wp--preset--color--acento);
  margin-top: 5px;
}
.cb-maqueta__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 0; }
.cb-maqueta__cols div { height: 42px; border-radius: var(--cb-radio-s); background: var(--wp--preset--color--linea); }
.cb-maqueta__cols div:nth-child(2) { background: #dbe7ec; }

.cb-maqueta__movil {
  position: absolute;
  right: -14px; bottom: -10px;
  width: 92px;
  background: #fff;
  border: 4px solid var(--wp--preset--color--principal);
  border-radius: var(--cb-radio-m);
  padding: 7px 7px 10px;
  box-shadow: var(--cb-sombra-alta);
  display: grid; gap: 5px;
}
.cb-maqueta__mhero {
  background: linear-gradient(135deg, var(--cb-azul-1), var(--cb-azul-2));
  border-radius: var(--cb-radio-s);
  padding: 9px 7px;
  display: grid; gap: 4px;
}
.cb-maqueta__mhero span { height: 6px; border-radius: 3px; background: rgb(255 255 255 / 72%); }
.cb-maqueta__mhero b { width: 46px; height: 9px; border-radius: 999px; background: var(--wp--preset--color--acento); }
.cb-maqueta__movil > i { height: 5px; border-radius: 3px; background: var(--wp--preset--color--linea); }
.cb-maqueta__movil > i.corto { width: 60%; }

/* --- la ficha de producto con su carrito --- */
.cb-tienda { position: relative; width: 100%; max-width: 300px; padding-bottom: 1.6rem; }
.cb-tienda__ficha {
  background: #fff;
  border-radius: var(--cb-radio-m);
  box-shadow: var(--cb-sombra);
  padding: 14px 14px 16px;
  text-align: left;
}
.cb-tienda__foto {
  height: 108px;
  border-radius: var(--cb-radio-s);
  background:
    radial-gradient(circle at 32% 38%, rgb(255 255 255 / 65%) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--wp--preset--color--turquesa), #1b8fa0);
}
.cb-tienda__nombre { margin: 12px 0 2px; font-weight: 700; font-size: .92rem; }
.cb-tienda__precio {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-s);
  color: var(--wp--preset--color--principal);
  line-height: 1.1;
}
.cb-tienda__precio small {
  display: block;
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 400;
  font-size: .7rem;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-tienda__btn {
  display: block;
  margin-top: 11px;
  text-align: center;
  background: var(--wp--preset--color--acento);
  color: var(--wp--preset--color--principal);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .86rem;
  padding: .55rem;
  border-radius: 999px;
}
.cb-tienda__aviso {
  position: absolute;
  right: -18px; bottom: -6px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .55rem;
  background: #fff;
  border-radius: var(--cb-radio-m);
  padding: .55rem .85rem;
  box-shadow: var(--cb-sombra-alta);
  text-align: left;
}
.cb-tienda__ok {
  grid-row: 1 / 3;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cb-bien); color: #fff;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}
.cb-tienda__aviso b { font-size: .82rem; }
.cb-tienda__aviso small { font-size: .7rem; color: var(--wp--preset--color--tinta-suave); }

/* --- publicaciones y calendario --- */
.cb-redes { width: 100%; max-width: 320px; display: grid; gap: .8rem; }
.cb-redes__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.cb-redes__post {
  aspect-ratio: 1;
  border-radius: var(--cb-radio-m);
  position: relative;
  box-shadow: var(--cb-sombra);
  overflow: hidden;
}
.cb-redes__post--a { background: linear-gradient(140deg, var(--wp--preset--color--coral), #f0895f); }
.cb-redes__post--b { background: linear-gradient(140deg, var(--wp--preset--color--turquesa), #57d7e4); }
.cb-redes__post--c { background: linear-gradient(140deg, #184256, #2b6a84); }
.cb-redes__post span {
  position: absolute; left: 7px; bottom: 6px;
  color: #fff; font-size: .68rem; font-weight: 700;
  text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}
.cb-redes__cal {
  background: #fff;
  border-radius: var(--cb-radio-m);
  padding: .7rem .8rem .8rem;
  box-shadow: var(--cb-sombra);
}
.cb-redes__mes {
  margin: 0 0 .5rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .78rem;
  color: var(--wp--preset--color--principal);
}
.cb-redes__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cb-redes__dias i { aspect-ratio: 1; border-radius: 4px; background: var(--wp--preset--color--linea); }
.cb-redes__dias i.on { background: var(--wp--preset--color--acento); }

/* botón oscuro, para los bloques sobre fondo claro */
.cb-btn--oscuro { background: var(--wp--preset--color--principal); color: #fff; }
.cb-btn--oscuro:hover { background: #0f3243; }
.cb-servicio .cb-btn { margin-top: 1.2rem; }

/* ==========================================================================
   LAS MÉTRICAS DE GOOGLE, EN VERDE
   ==========================================================================
   Los tres números que Google mira para decidir si enseña tu web o no. Son los
   de esta misma página, medidos en un móvil: si vamos a vender velocidad, lo
   menos es enseñar la nuestra. */

.cb-metricas {
  display: grid;
  gap: .65rem;
  width: 100%;
  padding: 1.5rem 1.3rem 1.2rem;
}
.cb-metricas__tit {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--wp--preset--color--principal);
  text-align: center;
}
.cb-metrica {
  display: grid;
  grid-template-columns: 66px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .9rem;
  background: #fff;
  border-radius: var(--cb-radio-m);
  padding: .7rem .9rem;
  box-shadow: var(--cb-sombra-baja);
}
.cb-metrica__aro {
  grid-row: 1 / 3;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 4px solid var(--cb-bien);              /* el verde de «esto está bien» */
  background: var(--cb-bien-suave);
}
.cb-metrica__val {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--cb-bien);
  line-height: 1;
}
.cb-metrica__val small { font-size: .62em; font-weight: 700; margin-left: .06em; }
.cb-metrica__et {
  align-self: end;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  color: var(--wp--preset--color--principal);
  line-height: 1.2;
}
.cb-metrica__ref {
  align-self: start;
  font-size: .78rem;
  color: var(--wp--preset--color--tinta-suave);
  line-height: 1.3;
}
.cb-metricas__pie {
  margin: 0;
  text-align: center;
  font-size: .76rem;
  color: var(--wp--preset--color--tinta-suave);
}
/* Este bloque sustituye a la ilustración, así que necesita todo el ancho */
.cb-servicio__img--metricas { padding: 0; }
.cb-servicio__img--metricas img { display: none; }

/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.cb-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
/* Sin esto, el ancho del 100 % NO cuenta el relleno de 17,6 px de cada lado y
   los campos se salen del formulario. En móvil se salían 18 px de la pantalla. */
.cb-form input, .cb-form textarea, .cb-form select, .cb-form button { box-sizing: border-box; max-width: 100%; }
.cb-form input, .cb-form textarea {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 2px solid var(--wp--preset--color--linea);
  border-radius: var(--cb-radio-m);
  font: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-form input:focus, .cb-form textarea:focus {
  border-color: var(--wp--preset--color--turquesa);
  box-shadow: 0 0 0 4px rgb(39 181 196 / 18%);
  outline: none;
}
.cb-form .cb-legal { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.cb-form .cb-legal input { width: auto; margin-top: .3rem; }
.cb-form .cb-hp { position: absolute; left: -9999px; }
.cb-form-ok  { background: #e7f5ec; border-left: 4px solid #1e7c3c; padding: 1rem; border-radius: var(--cb-radio-s); }
.cb-form-err { background: #fdeceb; border-left: 4px solid #c0392b; padding: 1rem; border-radius: var(--cb-radio-s); }

/* ==========================================================================
   PIE
   ========================================================================== */

.cb-footer a { color: inherit; }
.cb-footer .wp-block-heading { color: #fff; }

/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 781px) {
  .wp-block-columns .wp-block-column + .wp-block-column { margin-top: 1.6rem; }
  .cb-equipo { gap: .2rem; }
  .cb-equipo img { height: 150px; }
  .cb-equipo figcaption { font-size: .82rem; }
  .cb-equipo figcaption span { font-size: .7rem; }
}

/* ==========================================================================
   SERVICIO — bloque alterno: dibujo a un lado, texto al otro
   ========================================================================== */

.cb-servicio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.cb-servicio + .cb-servicio { border-top: 1px solid var(--wp--preset--color--linea); }
/* Alterna el lado del dibujo para que la página no sea una escalera.
   Va por clase y no por nth-child: cada servicio vive en su propia sección,
   así que siempre sería el primer hijo. */
.cb-servicio--invertido .cb-servicio__img { order: 2; }
.cb-servicio__img {
  border-radius: var(--cb-radio);
  background: var(--cb-color, var(--wp--preset--color--acento-suave));
  display: grid;
  place-items: center;
  padding: 3rem;
  min-height: 280px;
}
.cb-servicio__img img { max-width: 100%; max-height: 260px; width: auto; height: auto; }
.cb-servicio h2 { margin: 0 0 .8rem; }
.cb-servicio__precio {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: var(--cb-precio-l);
  color: var(--wp--preset--color--principal);
  display: block;
  margin-top: 1.2rem;
  line-height: 1;
}
.cb-servicio__nota {
  margin: .8rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--wp--preset--color--tinta-suave);
  border-left: 3px solid var(--wp--preset--color--linea);
  padding-left: .9rem;
}
.cb-servicio__precio small {
  display: block;
  font-family: var(--wp--preset--font-family--texto);
  font-size: .82rem;
  font-weight: 400;
  color: var(--wp--preset--color--tinta-suave);
  margin-top: .35rem;
}
@media (max-width: 820px) {
  .cb-servicio { grid-template-columns: 1fr; }
  .cb-servicio--invertido .cb-servicio__img { order: 0; }
}

/* ==========================================================================
   TRABAJOS — las capturas, con su marco de navegador
   ========================================================================== */

.cb-trabajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.4rem; }
.cb-trabajo {
  border-radius: var(--cb-radio);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--cb-sombra);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cb-trabajo:hover { transform: translateY(-6px); box-shadow: var(--cb-sombra-alta); }
.cb-trabajo__barra {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem;
  background: var(--wp--preset--color--papel-alt);
  border-bottom: 1px solid var(--wp--preset--color--linea);
  font-size: .78rem;
  color: var(--wp--preset--color--tinta-suave);
}
.cb-trabajo__punto { width: 9px; height: 9px; border-radius: 50%; background: #cfd8dd; }
.cb-trabajo img { width: 100%; height: auto; display: block; }
.cb-trabajo__txt { padding: 1.6rem 1.9rem 1.9rem; }
.cb-trabajo__txt h3 { margin: 0 0 .25rem; }
/* Qué lleva cada web: dato real, no adorno (WooCommerce instalado o no) */
.cb-trabajo__etq {
  display: inline-block;
  margin-top: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--principal);
  background: var(--wp--preset--color--acento-suave);
  border-radius: var(--cb-radio-s);
  padding: .22rem .6rem;
}
.cb-trabajo__txt p { margin: 0; color: var(--wp--preset--color--tinta-suave); font-size: .95rem; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */

.cb-datos {
  background: var(--wp--preset--color--papel-alt);
  border-radius: var(--cb-radio);
  padding: clamp(1.5rem, 4vw, 2.2rem);
}
.cb-datos dl { margin: 0; display: grid; gap: 1.2rem; }
.cb-datos dt {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  color: var(--wp--preset--color--principal);
  font-size: 1.05rem;
  margin-bottom: .15rem;
}
.cb-datos dd { margin: 0; color: var(--wp--preset--color--tinta-suave); }
.cb-datos a { color: var(--wp--preset--color--principal); }
/* Enlace de servicio: «Cómo llegar». Va a Google Maps en una pestaña nueva —un
   enlace, no un iframe: la web no carga nada de terceros y así sigue. */
.cb-datos__mapa {
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .88rem;
}
/* La tarjeta de datos ya es «papel-alt»: la nota destacada de dentro necesita
   blanco para despegarse del fondo. */
.cb-datos .cb-plan__nota {
  background: #fff;
  margin-top: 1.4rem;
}
.cb-datos__tel {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 2rem;
  color: var(--wp--preset--color--principal);
  text-decoration: none;
  display: inline-block;
  line-height: 1.1;
}

/* Aviso: recuadro amarillo para lo que está pendiente de decidir */
.cb-aviso {
  background: var(--wp--preset--color--acento-suave);
  border-left: 5px solid var(--wp--preset--color--acento);
  border-radius: var(--cb-radio-s);
  padding: 1.1rem 1.3rem;
}

/* ==========================================================================
   RUTA — los pasos del proceso, unidos por el camino que sigue el cliente
   ========================================================================== */

.cb-ruta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  margin-top: 2.4rem;
}
/* La línea punteada que une los tres pasos */
.cb-ruta::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 16%;
  right: 16%;
  border-top: 3px dashed var(--wp--preset--color--acento);
  z-index: 0;
}
.cb-ruta__paso { position: relative; z-index: 1; padding: 0 2.2rem; text-align: center; }
.cb-ruta__bola {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1.4rem;
  background: var(--wp--preset--color--papel);
  border: 3px solid var(--wp--preset--color--acento);
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--wp--preset--color--principal);
  line-height: 1;
  box-shadow: 0 0 0 8px var(--wp--preset--color--papel);
}
/* El paso 2 es donde decide el cliente: manda */
.cb-ruta__paso--clave .cb-ruta__bola {
  background: var(--wp--preset--color--acento);
  transform: scale(1.16);
  box-shadow: 0 0 0 8px var(--wp--preset--color--papel), 0 10px 26px rgb(241 198 21 / 45%);
}
/* En columna, cuando acompaña al formulario: va después de `.cb-ruta` a
   propósito, porque con la misma especificidad manda el orden. */
.cb-ruta.cb-ruta--vertical { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 0; }
.cb-ruta.cb-ruta--vertical::before { display: none; }
.cb-ruta.cb-ruta--vertical .cb-ruta__paso { padding: 0 0 0 4.6rem; text-align: left; min-height: 3.4rem; }
.cb-ruta.cb-ruta--vertical .cb-ruta__bola {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  width: 3.4rem; height: 3.4rem;
  font-size: 1.4rem;
}
.cb-ruta.cb-ruta--vertical .cb-ruta__etq { position: static; display: inline-block; margin-bottom: .4rem; transform: none; }
.cb-ruta__paso h3 { margin: 0 0 .6rem; }
.cb-ruta__paso p { margin: 0; color: var(--wp--preset--color--tinta-suave); }
.cb-ruta__etq {
  display: inline-block;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--principal);
  background: var(--wp--preset--color--acento);
  padding: .2rem .7rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

@media (max-width: 820px) {
  .cb-ruta { grid-template-columns: 1fr; gap: 2.6rem; margin-top: 2.5rem; }
  /* Apilada, la línea de unión caía por el centro y **atravesaba el texto**:
     los pasos tienen z-index pero no fondo, así que se veía a través de las
     letras. Se oculta, igual que hace la variante vertical; los números ya
     dicen que es una secuencia. */
  .cb-ruta::before { display: none; }
}

/* ==========================================================================
   CONTACTO POR WHATSAPP — nada de llamadas
   ========================================================================== */

.cb-wasap {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--cb-wasap);
  color: #08331a;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1.15rem;
  padding: .95rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cb-wasap:hover {
  color: #08331a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(37 211 102 / 40%);
}
.cb-wasap svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.cb-wasap--grande { font-size: 1.3rem; padding: 1.1rem 2.2rem; }

.cb-correo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 3px solid var(--wp--preset--color--acento);
  padding-bottom: .15rem;
}
.cb-correo:hover { color: var(--wp--preset--color--acento); }

/* La etiqueta del paso 2 empujaba su título hacia abajo y descuadraba la fila:
   los otros dos reservan ese mismo hueco. */
.cb-ruta__paso:not(.cb-ruta__paso--clave)::before {
  content: "";
  display: block;
  height: 2.1rem;
}
@media (max-width: 820px) {
  .cb-ruta__paso:not(.cb-ruta__paso--clave)::before { display: none; }
}

/* Los dibujos de tonos claros desaparecen sobre el azul: van sobre un disco claro */
.cb-cierre__ilustra {
  background: var(--wp--preset--color--acento-suave);
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 54%;
  padding: 2rem 2.4rem;
  display: grid;
  place-items: center;
}
.cb-cierre__ilustra img { max-width: min(330px, 32vw); height: auto; display: block; }
@media (max-width: 800px) { .cb-cierre__ilustra { display: none; } }

/* ==========================================================================
   MARCA EN LA CABECERA
   ========================================================================== */

.cb-marca-sitio { gap: .9rem; }
.cb-header .wp-block-site-logo { line-height: 0; margin: 0; }
.cb-marca-sitio .wp-block-site-logo img { width: auto; height: 68px; max-width: none; }

/* El nombre, en los dos colores de la casa */
.cb-titulo-sitio {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-block;
  max-width: 12ch;
}
.cb-titulo-sitio .cb-tit-a { color: var(--wp--preset--color--principal); }
.cb-titulo-sitio .cb-tit-b { color: var(--wp--preset--color--acento); }
.cb-titulo-sitio:hover .cb-tit-b { color: var(--wp--preset--color--principal); }
.cb-titulo-sitio:hover .cb-tit-a { color: var(--wp--preset--color--acento); }

/* Menú: letras más grandes y más separación entre enlaces */
.cb-nav { font-size: 1.28rem; }
.cb-nav a { font-size: 1.28rem; letter-spacing: .005em; }
.cb-nav .wp-block-navigation__container { gap: 2.6rem; }

@media (max-width: 900px) {
  .cb-nav, .cb-nav a { font-size: 1.1rem; }
  .cb-nav .wp-block-navigation__container { gap: 1.4rem; }
  .cb-marca-sitio .wp-block-site-logo img { height: 50px; }
}

/* El <main> heredaba el hueco entre bloques y dejaba una franja blanca
   entre la cabecera y el hero. */
.cb-header + main,
main.wp-block-group:first-of-type { margin-top: 0; }

/* ==========================================================================
   CIERRE — la conversación de WhatsApp, que es como se contacta de verdad
   ========================================================================== */

.cb-charla {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cb-charla h2 { margin: 0 0 .8rem; }
.cb-charla__texto p { margin: 0 0 1.6rem; }

/* El móvil */
.cb-movil {
  background: #0e2c3b;
  border: 8px solid #08202c;
  border-radius: 34px;
  padding: 1.1rem .9rem 1.4rem;
  max-width: 340px;
  margin-inline: auto;
  box-shadow: 0 24px 60px rgb(0 0 0 / 32%);
}
.cb-movil__barra {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 .3rem .9rem;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  margin-bottom: .9rem;
}
.cb-movil__foto {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wp--preset--color--acento);
  display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 800;
  color: var(--wp--preset--color--principal);
  font-size: .95rem;
}
.cb-movil__quien { line-height: 1.15; }
.cb-movil__quien strong { color: #fff; font-family: var(--wp--preset--font-family--titulos); font-size: .98rem; }
.cb-movil__quien span { display: block; color: #7fd39a; font-size: .74rem; }

.cb-burbujas { display: grid; gap: .55rem; }
.cb-burbuja {
  max-width: 84%;
  padding: .6rem .85rem;
  border-radius: var(--cb-radio-m);
  font-size: .9rem;
  line-height: 1.4;
  position: relative;
}
.cb-burbuja--ellos {
  background: #ffffff;
  color: var(--wp--preset--color--tinta);
  justify-self: start;
  border-bottom-left-radius: 4px;
}
.cb-burbuja--nosotros {
  background: #d9fdd3;
  color: #0f2e18;
  justify-self: end;
  border-bottom-right-radius: 4px;
}
.cb-burbuja time {
  display: block;
  font-size: .66rem;
  opacity: .55;
  text-align: right;
  margin-top: .15rem;
}

@media (max-width: 860px) {
  .cb-charla { grid-template-columns: 1fr; }
  .cb-movil { max-width: 320px; }
}

/* ==========================================================================
   PIE
   ========================================================================== */

/* Mismo azul, pero con profundidad: degradado en diagonal + trama de puntos
   y un halo cálido arriba a la izquierda, del amarillo de la marca. */
.cb-footer {
  position: relative;
  background-image:
    radial-gradient(60rem 26rem at 12% 0%, rgb(241 198 21 / 9%), transparent 60%),
    linear-gradient(150deg, #123C56 0%, var(--wp--preset--color--principal-oscuro) 55%, #09202c 100%);
  overflow: hidden;
}
.cb-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 7%) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}
/* Filete amarillo arriba: remata el pie y lo separa del contenido */
.cb-footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wp--preset--color--acento), rgb(241 198 21 / 0));
}
.cb-footer > * { position: relative; z-index: 1; }

.cb-pie__marca img { height: 88px; width: auto; display: block; }
.cb-pie__lema {
  color: #a9c0cd;
  margin: 1rem 0 1.4rem;
  max-width: 30ch;
  font-size: .97rem;
}
.cb-pie__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.4rem;
}
.cb-pie__tit {
  font-family: var(--wp--preset--font-family--titulos);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--acento);
  margin: 0 0 1rem;
}
.cb-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cb-pie__lista a {
  color: #d6e3ea;
  text-decoration: none;
  font-size: .97rem;
}
.cb-pie__lista a:hover { color: var(--wp--preset--color--acento); }
.cb-pie__dato { color: #d6e3ea; font-size: .97rem; margin: 0 0 .55rem; }
.cb-pie__dato a { color: #d6e3ea; }

.cb-pie__raya {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 14%);
  margin: 2.4rem 0 1.3rem;
}
.cb-pie__abajo {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  color: #8ba6b5;
  font-size: .87rem;
}
.cb-pie__abajo a { color: #8ba6b5; }

@media (max-width: 900px) {
  .cb-pie__cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .cb-pie__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ENCABEZADO DE PÁGINA — la banda azul con el título
   ========================================================================== */

.cb-cabecera-pag {
  position: relative;
  overflow: hidden;
}
.cb-cabecera-pag::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 7%) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cb-cabecera-pag > * { position: relative; z-index: 1; }
.cb-cabecera-pag h1 { color: #fff; margin: 0 0 .6rem; }
.cb-cabecera-pag p { color: var(--cb-tinta-clara); margin: 0 auto; max-width: 46rem; }

/* Llamada final reutilizable en las páginas interiores */
.cb-llamada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
}
.cb-llamada h2 { color: #fff; margin: 0 0 .5rem; }
.cb-llamada p { color: var(--cb-tinta-clara); margin: 0; max-width: 38rem; }
.cb-llamada__acciones { display: grid; gap: .9rem; justify-items: start; }

/* Rejilla de trabajos: más columnas y ficha compacta */
.cb-trabajos--muchos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; }
.cb-trabajos--muchos .cb-trabajo__txt { padding: 1.1rem 1.3rem 1.3rem; }
.cb-trabajos--muchos .cb-trabajo__txt h3 { font-size: 1.15rem; }
.cb-trabajo__enlace {
  display: inline-block;
  margin-top: .6rem;
  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-trabajo__enlace:hover { color: var(--wp--preset--color--coral); }
.cb-trabajo__marco { position: relative; overflow: hidden; }
.cb-trabajo__marco img { transition: transform .35s ease; }
.cb-trabajo:hover .cb-trabajo__marco img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .cb-trabajo__marco img, .cb-trabajo:hover .cb-trabajo__marco img { transition: none; transform: none; } }

/* ==========================================================================
   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. */
.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 */
.cb-postnav { gap: 1.2rem; }
.cb-postnav .post-navigation-link-previous,
.cb-postnav .post-navigation-link-next { max-width: 21rem; }
.cb-postnav .post-navigation-link-next { text-align: right; }
.cb-postnav a { color: var(--wp--preset--color--principal); text-decoration: none; font-weight: 700; }
.cb-postnav a:hover { color: var(--wp--preset--color--coral); }
.cb-postnav__todos { margin-top: 1.6rem !important; font-size: .92rem; }

@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; }