/* ============================================================================
   maqueta-pespas.css — La maquetación «Pespas» aplicada a las pantallas que
   pinta HivePress: el buscador, la ficha, la cuenta y el alta.

   POR QUÉ ESTÁ AQUÍ Y NO EN `fronts/pespas.css`
   Esto NO es la marca de pespas.com: es una MAQUETACIÓN, y cualquier dominio
   puede adoptarla eligiéndola en Pespas ▸ Fronts ▸ Diseño. Por eso todo
   cuelga de `body.ctop-maqueta--pespas` —la clase que pone
   `front-design.php:208`— y no de `body.ctop-front--pespas`.

   Y por eso **no hay ni un hexadecimal de marca en los componentes**: se pintan
   con `var(--uv-blue)`, `var(--uv-amber)`, `var(--uv-ink)`… que cada front
   redefine en su propia hoja (prioridad 26). Un dominio verde que elija esta
   maquetación sale verde, no negro. Es el mismo criterio de
   `assets/css/seo/arquetipos.css`.

   Lo que sí define este fichero son los tokens de FORMA, que son los que hacen
   que la maquetación se reconozca: sin radios, sin sombras difusas, filetes de
   1px y retícula editorial.

   La mitad de Elementor (portada, páginas editoriales, cabecera y pie) está en
   el CSS global del kit — `_claude_build/brand-pespas.css`.

   ORDEN: se encola en `core/enqueue.php` justo ANTES de `core/mobile.css`, que
   sigue siendo el último porque corrige a todos los anteriores.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Tokens de forma

   Se declaran sobre `body.…` y no sobre `:root` por la misma razón que documenta
   `fronts/README.css`: `themes/trabajourgente/assets/css/base.css` ya declara las
   `--uv-*` en `:root`, y al ser el mismo elemento ganaría la última hoja
   cargada. Anclarlo al body deja claro de quién es cada regla.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas {
  --pes-papel:   #FAFAFA;
  --pes-linea:   #E4E4E7;
  --pes-linea-2: #D4D4D8;
  --pes-gris-cl: #A1A1AA;
  --pes-gris:    #71717A;
  --pes-gris-os: #52525B;
  --pes-tinta-2: #3F3F46;
  --pes-tinta-3: #27272A;

  --pes-radio:   0;
  --pes-filete:  1px solid var(--pes-linea);
  --pes-fuente:  Archivo, Helvetica, Arial, sans-serif;

  /* La única sombra del sistema: dura y desplazada. Nunca difusa. */
  --pes-sombra:  8px 8px 0 var(--pes-linea);

  font-family: var(--pes-fuente);
}

/* El fondo de las pantallas de HivePress deja de ser azulado. */
body.ctop-maqueta--pespas.hp-template,
body.ctop-maqueta--pespas .hp-page { background: #fff; }

/* ---------------------------------------------------------------------------
   2. Reglas transversales

   Nada redondeado y nada con sombra difusa en toda la pantalla. Se hace de una
   vez, en lugar de repetir `border-radius:0` en cuarenta componentes, porque lo
   que define esta maquetación es precisamente la ausencia.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2a. Tipografía y forma, para TODO

   **Esta sección existe porque la primera versión de esta hoja vestía una lista
   de componentes en vez de un sistema.** Lo que estaba en la lista se adaptó y
   lo que no —`/servicios/`, las landings, las valoraciones, los widgets propios
   de Elementor— se quedó en Inter, Montserrat y sus radios de siempre. No era
   un olvido repartido al azar: era exactamente todo lo que nadie enumeró.

   Por eso ahora la familia y el radio se declaran de arriba, y las reglas de
   componente de más abajo solo se ocupan de lo que de verdad es propio de cada
   uno. Se usa `:where()`, que aporta CERO especificidad: no pisa nada que ya
   esté decidido, solo rellena lo que nadie había decidido.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas :where(
  h1, h2, h3, h4, h5, h6, p, a, li, span, div, small, strong, em, blockquote,
  button, input, select, textarea, label, legend, td, th, summary, details, time, figcaption
) {
  font-family: var(--pes-fuente);
}

/* ---------------------------------------------------------------------------
   Una regla de familia NUNCA debe alcanzar a un icono.

   Un icono de Font Awesome es un carácter privado de SU fuente: si algo le cambia la familia, el
   navegador busca ese punto de código en Archivo, no lo encuentra y pinta **el cuadro vacío del
   glifo ausente**. No es un icono mal elegido ni un fichero que falta — parece una imagen rota, y
   por eso se busca donde no es.

   Pasó con `.hp-table td *`, escrita para quitarle Inter a las celdas: se llevó por delante los
   iconos de estado y de acciones de «Mis anuncios». La regla de abajo es la red para el resto:
   cualquier familia que se declare más adelante pierde contra esto, porque `!important` en una
   propiedad que el sistema de iconos necesita **exacta** no es una opinión de estilo.

   `fa-`, no `fa`, en el selector: `.fa-solid`/`.fas` ya vienen cubiertos por el genérico, y así
   también entran los dashicons de wp-admin, que sufren lo mismo.
   --------------------------------------------------------------------------- */
body.ctop-maqueta--pespas i[class*="fa-"],
body.ctop-maqueta--pespas span[class*="fa-"],
body.ctop-maqueta--pespas .fa, body.ctop-maqueta--pespas .fas,
body.ctop-maqueta--pespas .far, body.ctop-maqueta--pespas .fal,
body.ctop-maqueta--pespas [class*="fa-"]::before {
  font-family: 'Font Awesome 5 Free' !important;
}
/* Los de marca viven en otro fichero de la misma familia («Brands»), y ese sí hay que nombrarlo
   aparte: WhatsApp y compañía son `fab`, no `fas`. */
body.ctop-maqueta--pespas .fab,
body.ctop-maqueta--pespas i.fab::before,
body.ctop-maqueta--pespas [class*="fa-"].fab::before {
  font-family: 'Font Awesome 5 Brands' !important;
}
body.ctop-maqueta--pespas [class*="dashicons"],
body.ctop-maqueta--pespas [class*="dashicons"]::before {
  font-family: dashicons !important;
}

/* Las cifras siguen siendo la excepción: Archivo Black es otra familia, no otro
   peso, y es la que sostiene precios y contadores. */
body.ctop-maqueta--pespas :where(
  .ctop-stat__n, .uv-plan__entero, .uv-plan__dec, .uv-cifra, .uv-stat-n,
  .ctop-plan__precio, .hp-rating__value
) {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
}

/* Sin esquinas redondeadas y sin sombras difusas en ninguna parte de la
   maquetación. La excepción va declarada aparte y es una sola: los avatares
   redondos de las reseñas, que son fotos de personas. */
body.ctop-maqueta--pespas :where(
  .hp-page, .hp-page *, .elementor-widget *, .ctop-indice *, .ctop-landing-links *
) {
  border-radius: 0;
}
body.ctop-maqueta--pespas :where(
  .hp-review__image img, .hp-vendor__image img, .hp-user__image img, .avatar
) {
  border-radius: 50%;
}

/* **Con `!important`, y no por pereza.** Los módulos base declaran
   `border-radius:999px!important` en los botones (`forms/forms.css:8,16`),
   `border-radius:12px!important` en los campos (`:31`) y
   `display:flex!important` en la tarjeta (`listing/listings.css:10`). Contra
   una declaración `!important` no gana ninguna especificidad, así que la única
   forma de que esta maquetación exista es responder en el mismo registro. Se
   limita a las propiedades que están peleadas, no a todo el bloque. */
/* `:not(.ctop-ficha)` excluye la ficha del anuncio, que conserva radio y sombra por decisión
   expresa (ver la sección 9k). Se excluye AQUÍ, en el origen, y no se añade otro `!important` más
   abajo: contra un `!important` solo gana otro, y una pelea de `!important` entre dos reglas de
   esta misma hoja es la clase de cosa que nadie entiende seis meses después. */
body.ctop-maqueta--pespas:not(.ctop-ficha) .hp-page :where(
  input, select, textarea, button,
  .hp-form__button, .hp-listing, .hp-vendor, .hp-review,
  .ctop-card, .ctop-chip, .ctop-pill, .ctop-fs-caja, .ctop-plan,
  .uv-tag, .uv-spec-chip, .ctop-open-badge, .ctop-follow-box, .ctop-reserva,
  .uv-call-btn, .uv-wa-btn, .ts-control, .ts-dropdown,
  .hp-listing__attribute, .hp-listing__images, .hp-listing__image, .hp-listing__rating
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Dentro de la ficha se sigue aplanando lo que NO es una tarjeta: los controles de formulario, los
   chips y los botones. Lo que recupera su forma son las tarjetas, no todo. */
body.ctop-maqueta--pespas.ctop-ficha .hp-page :where(
  input, select, textarea, button,
  .hp-form__button, .ctop-chip, .ctop-pill, .uv-tag, .uv-spec-chip,
  .ctop-open-badge, .uv-call-btn, .uv-wa-btn, .ts-control, .ts-dropdown,
  .hp-listing__attribute
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* La familia también viene forzada desde `forms.css`. */
body.ctop-maqueta--pespas .hp-page :where(input, select, textarea, button, .hp-form__button) {
  font-family: var(--pes-fuente) !important;
}

body.ctop-maqueta--pespas .hp-page :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--uv-amber); outline-offset: 0; border-color: var(--uv-ink);
}

/* Rótulo de sección: 12px, versalitas espaciadas, filete negro debajo. Es el
   patrón que el diseño repite en la ficha, en la cuenta y en el alta. */
body.ctop-maqueta--pespas .hp-section__title,
body.ctop-maqueta--pespas .uv-extra-title,
body.ctop-maqueta--pespas .ctop-card__titulo,
body.ctop-maqueta--pespas .uv-lead-title,
body.ctop-maqueta--pespas .uv-sched-title,
body.ctop-maqueta--pespas .ctop-notas__titulo,
body.ctop-maqueta--pespas .uv-stats-h3 {
  font-family: var(--pes-fuente);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pes-gris);
  border-bottom: 1px solid var(--uv-ink);
  padding: 0 0 10px; margin: 0 0 16px;
}

body.ctop-maqueta--pespas .hp-page__title {
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--uv-ink);
}

/* ---------------------------------------------------------------------------
   3. Botones y formularios de HivePress

   `forms.css` ya pinta los botones con `var(--uv-blue)`, así que el color lo
   resuelve el front. Aquí cambia la FORMA: rectángulo, peso 700, sin sombra.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .hp-form__button,
body.ctop-maqueta--pespas .hp-page button[type="submit"],
body.ctop-maqueta--pespas .hp-listing-package__button {
  background: var(--uv-blue); color: #fff; border: 0;
  font: 700 14px/1.2 var(--pes-fuente); letter-spacing: 0.01em;
  padding: 15px 26px; text-transform: none;
}
body.ctop-maqueta--pespas .hp-form__button:hover,
body.ctop-maqueta--pespas .hp-page button[type="submit"]:hover,
body.ctop-maqueta--pespas .hp-listing-package__button:hover {
  background: var(--uv-amber); color: var(--uv-ink);
}

body.ctop-maqueta--pespas .hp-page :where(input[type="text"], input[type="email"],
input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], select, textarea) {
  border: var(--pes-filete); background: #fff; color: var(--uv-ink);
  font: 400 15px/1.4 var(--pes-fuente); padding: 13px 14px;
}

/* `forms.css:37` los fija con `!important` en Inter y `#0F172A`. */
body.ctop-maqueta--pespas .hp-field__label,
body.ctop-maqueta--pespas .hp-field label,
body.ctop-maqueta--pespas .hp-form__label {
  font-family: var(--pes-fuente) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pes-gris) !important;
}

/* Las casillas del buscador son una etiqueta con caja: ahí la versalita no vale,
   porque el texto es una frase («Solo los que atienden en este momento»). */
body.ctop-maqueta--pespas .hp-field--checkbox label,
body.ctop-maqueta--pespas .hp-field--radio label {
  font-size: 14px !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--uv-ink) !important;
}
body.ctop-maqueta--pespas .hp-field--checkbox,
body.ctop-maqueta--pespas .hp-field--radio {
  border-color: var(--pes-linea) !important; border-radius: 0 !important;
}

/* `forms.css:31-32` fija borde, radio, familia y color de TODOS los campos. */
body.ctop-maqueta--pespas .hp-page :where(input[type="text"], input[type="email"],
input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], select, textarea),
body.ctop-maqueta--pespas .hp-form input,
body.ctop-maqueta--pespas .hp-form select,
body.ctop-maqueta--pespas .hp-form textarea {
  border-color: var(--pes-linea) !important; border-radius: 0 !important;
  font-family: var(--pes-fuente) !important; font-weight: 400 !important;
  color: var(--uv-ink) !important;
}

/* Select2 lo usa HivePress en algunos filtros; su caja va aparte. */
body.ctop-maqueta--pespas .select2-selection,
body.ctop-maqueta--pespas .select2-dropdown {
  border-radius: 0 !important; border-color: var(--pes-linea) !important;
  font-family: var(--pes-fuente);
}

/* Cargar más resultados: era una píldora azul con borde azul. */
body.ctop-maqueta--pespas .ctop-inf-spin { color: var(--pes-gris); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .ctop-inf-spin i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-inf-more {
  background: #fff; color: var(--uv-ink); border: 1px solid var(--uv-ink); border-radius: 0;
  font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-inf-more:hover,
body.ctop-maqueta--pespas .ctop-inf-more:focus { background: var(--uv-ink); color: #fff; }

/* El título de página: `forms.css:25` lo centra y lo pone en Montserrat. */
body.ctop-maqueta--pespas .hp-page__title,
body.ctop-maqueta--pespas h1.hp-page__title {
  font-family: var(--pes-fuente) !important; font-weight: 800 !important;
  color: var(--uv-ink) !important; text-align: left;
}
body.ctop-maqueta--pespas .hp-field__description {
  font-size: 13px; line-height: 1.5; color: var(--pes-gris);
}

body.ctop-maqueta--pespas .hp-page :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--uv-ink);
}

/* ---------------------------------------------------------------------------
   4. El buscador

   La barra lateral del diseño mide 260px fijos, no una fracción de doce. La
   maquetación declara `ancho => 3` porque la rejilla de HivePress solo entiende
   doceavos, y aquí se corrige a la medida real. Se usan `flex-basis` sobre las
   columnas que ya existen: la rejilla no se desmonta.
   --------------------------------------------------------------------------- */

/* **Dos columnas solo a partir de 1024px.**

   La barra mide 260px fijos y la rejilla de HivePress le pone al contenido `.hp-col-sm-9`, es
   decir `max-width: 75%`. Esas dos cosas solo caben juntas cuando el 25% restante supera los 292px
   (260 + los 16+16 de la rejilla): a partir de ~1240px de ventana. Por debajo la barra caía a su
   propia línea y el contenido se quedaba en tres cuartos, así que **entre 768 y 1200px había de
   150 a 258px de página muerta a la derecha** y la barra flotaba sobre los resultados al hacer
   scroll. Medido a diez anchuras, no deducido.

   Se arregla por los dos lados: `max-width: none` para que la columna deje de estar capada, y
   `flex-basis: 0` para que reparta en vez de pedir todo lo que ocupa su contenido (con `auto` se
   llevaba la fila entera y la barra bajaba igual, en TODAS las anchuras).

   Y por debajo de 1024 se apila a propósito: 260px de barra dejan al resultado menos de 500px,
   donde la tarjeta se parte en tres líneas. En tablet el filtro va arriba, a todo lo ancho. */
@media (min-width: 1024px) {
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row {
    display: flex; align-items: flex-start; gap: 40px; margin: 0;
  }
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row > .hp-page__sidebar {
    flex: 0 0 260px; max-width: 260px; padding: 0;
  }
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row > .hp-page__content {
    flex: 1 1 0; min-width: 0; max-width: none; padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row {
    display: block; margin: 0;
  }
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row > .hp-page__sidebar,
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row > .hp-page__content {
    max-width: none; width: 100%; padding: 0;
  }
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page > .hp-row > .hp-page__sidebar {
    margin-bottom: 32px; border-bottom: var(--pes-filete); padding-bottom: 24px;
  }

  /* Con el filtro arriba, sus campos caben en dos por fila en vez de uno por línea.

     **La rejilla va en `.hp-form__fields`, no en el `<form>`.** Puesta en el formulario, sus hijos
     directos son otros: `__messages`, `__fields` y `__footer`. El resultado era que TODOS los campos
     se apilaban en la primera columna y el botón «Filtrar» se iba solo a la segunda, dejando media
     tablet en blanco — que es exactamente lo que se veía. Los campos son hijos de `__fields`, así
     que es ahí donde hay que repartir. */
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page__sidebar .hp-form__fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px; align-items: start;
  }
  /* El botón ocupa el ancho completo, debajo de los campos: es la acción de todos ellos. */
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page__sidebar .hp-form__footer {
    margin-top: 8px;
  }
  body.ctop-maqueta--pespas.hp-template--listings-view-page .hp-page__sidebar .hp-form__button {
    width: 100%;
  }
}

/* Los grupos de filtros: rótulo pequeño con filete negro, controles planos. */
body.ctop-maqueta--pespas .hp-widget--listing-filter {
  background: none; border: 0; padding: 0; margin-bottom: 28px;
}
body.ctop-maqueta--pespas .hp-widget--listing-filter .hp-form__field { margin-bottom: 18px; }

body.ctop-maqueta--pespas .hp-form--listing-filter .hp-field--checkbox label,
body.ctop-maqueta--pespas .hp-form--listing-filter .hp-field--radio label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 400; color: var(--uv-ink); cursor: pointer;
  letter-spacing: 0; text-transform: none;
}

body.ctop-maqueta--pespas .hp-button--listing-filter,
body.ctop-maqueta--pespas .ctop-pick-btn {
  background: #fff; border: var(--pes-filete); color: var(--uv-ink);
  font: 600 13px var(--pes-fuente); padding: 10px 14px;
}
body.ctop-maqueta--pespas .ctop-pick-btn:hover { border-color: var(--uv-ink); }

/* El icono y la flecha del selector.

   Van en `::before` y `::after` (`search-filters.css:224-233`), y por eso sobrevivieron a todos los
   barridos: `getComputedStyle(elemento)` no mira los pseudoelementos, así que el detector daba la
   página por limpia mientras la cuadrícula del gremio y el marcador de la localidad seguían en
   `#2563EB`. Se vieron en una captura. **Un barrido de color que no mire `::before`/`::after` tiene
   ese punto ciego**, y aquí los iconos de CSS son la norma, no la excepción.

   `search-filters.css:358-359` los repite dentro del filtro con dos clases, así que aquí se repite
   la misma forma para ganar sin `!important`. */
body.ctop-maqueta--pespas .ctop-pick-btn::before,
body.ctop-maqueta--pespas .hp-form--listing-filter .ctop-pick-btn::before {
  color: var(--uv-amber);
}
body.ctop-maqueta--pespas .ctop-pick-btn::after,
body.ctop-maqueta--pespas .hp-form--listing-filter .ctop-pick-btn::after {
  color: var(--pes-gris);
}
/* Al pasar por encima el botón se invierte a tinta: los iconos tienen que seguirlo o desaparecen. */
body.ctop-maqueta--pespas .ctop-pick-btn:hover::before,
body.ctop-maqueta--pespas .ctop-pick-btn:hover::after { color: var(--uv-ink); }

/* Chips de filtros activos: cuadrados con filete, y el de limpiar en negativo. */
body.ctop-maqueta--pespas .ctop-filtros-activos {
  border: 0; border-bottom: var(--pes-filete); background: none;
  padding: 0 0 14px; margin-bottom: 20px;
}
body.ctop-maqueta--pespas .ctop-filtros-activos__titulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-chip {
  background: #fff; border: var(--pes-filete); color: var(--uv-ink);
  font: 400 13px var(--pes-fuente); padding: 7px 12px;
}
body.ctop-maqueta--pespas .ctop-chip:hover { border-color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-chip--limpiar {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}

/* La tarjeta de resultado.

   Es la misma tarjeta de HivePress con todos sus bloques —teléfono, WhatsApp,
   web, sello, valoración, «abierto ahora»—; lo único que cambia es el marco. La
   franja de color superior de `listings.css` se retira: aquí el hilo es el
   filete, y dos lenguajes de borde a la vez se pelean. */
body.ctop-maqueta--pespas .hp-listing--view-block {
  background: #fff; border: var(--pes-filete); border-top: var(--pes-filete);
  padding: 20px; transition: border-color .15s ease;
}
body.ctop-maqueta--pespas .hp-listing--view-block:hover { border-color: var(--uv-ink); }

/* La tarjeta EN FILA, que es la mitad de lo que hace esta maquetación.

   HivePress pinta la tarjeta en bloque vertical —cabecera con la foto a todo lo ancho, contenido,
   pie— y a una columna eso deja una foto de 1300px de ancho por anuncio: hay que hacer scroll para
   ver el segundo resultado. Se reorganizan los TRES hijos que ya existen (`__header`, `__content`,
   `__footer`) en una rejilla de tres columnas; no se mueve ni se borra ningún bloque, así que las
   inyecciones de otros módulos —el sello, «abierto ahora», el botón de llamar— siguen cayendo
   donde caían.

   Las acciones (llamar, WhatsApp, web) viven dentro de `__footer` junto a los atributos, así que el
   pie se subdivide a su vez. */
body.ctop-maqueta--pespas .hp-listing--view-block:hover {
  box-shadow: none !important; transform: none !important;
}

@media (min-width: 768px) {
  body.ctop-maqueta--pespas .hp-listing--view-block {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) minmax(180px, 220px);
    grid-template-areas: "foto contenido acciones";
    gap: 20px; align-items: center;
  }

  body.ctop-maqueta--pespas .hp-listing--view-block > .hp-listing__header { grid-area: foto; margin: 0; }
  body.ctop-maqueta--pespas .hp-listing--view-block > .hp-listing__content { grid-area: contenido; margin: 0; }
  body.ctop-maqueta--pespas .hp-listing--view-block > .hp-listing__footer {
    grid-area: acciones; margin: 0;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
  }

  /* Un anuncio sin foto no debe dejar un hueco de 120px: la rejilla se reduce a dos columnas. */
  body.ctop-maqueta--pespas .hp-listing--view-block:not(:has(.hp-listing__image)) {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    grid-template-areas: "contenido acciones";
  }

  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image {
    width: 120px; height: 120px; margin: 0; overflow: hidden;
    aspect-ratio: auto; flex: 0 0 auto;
  }
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image img,
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image a {
    width: 100%; height: 100%; object-fit: cover !important; display: block;
  }
  body.ctop-maqueta--pespas .hp-listing--view-block:hover .hp-listing__image img { transform: none; }

  /* Los atributos —zona, verificado, «abierto ahora»— describen el anuncio, así que van en fila
     bajo el título y no apilados en la columna de botones. `listings.css:22` los pone en columna
     con `!important`. */
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__attributes--primary {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    align-items: center; gap: 8px 14px;
    font-size: 13px; color: var(--pes-gris);
  }
}

/* **En la ficha, la tarjeta NO va en fila.** «Profesionales relacionados» usa la misma clase
   `.hp-listing--view-block`, pero vive en una columna de ~250px. Con la rejilla de
   `120px 1fr 220px` la pista central se quedaba sin espacio y el título salía **una letra por
   línea**, en vertical. Se veía en la captura y no lo detectaba ninguna medición de color ni de
   desborde: la tarjeta cabía en su caja, solo que ilegible.

   Ahí vuelve al bloque vertical de HivePress, que es lo que pide una columna estrecha. */
body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-block {
  display: flex !important; flex-direction: column;
  grid-template-columns: none; grid-template-areas: none;
  gap: 0; align-items: stretch;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-block .hp-listing__image {
  width: 100%; height: auto; max-height: 160px; aspect-ratio: 4 / 3; margin: 0 0 12px;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-block .hp-listing__image img {
  width: 100%; height: 100%; object-fit: cover !important;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-block .hp-listing__title {
  font-size: 15px; line-height: 1.3;
}

/* En móvil no hay tres columnas que repartir: la foto vuelve arriba, y entonces sí tiene que ocupar
   todo el ancho de la tarjeta. Eso era lo que se veía mal —la imagen a media anchura— y se arregla
   aquí, sin tocar la fila de escritorio. */
@media (max-width: 767px) {
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image {
    display: block; width: 100%; max-height: 200px; aspect-ratio: auto;
    margin: 0 0 14px; overflow: hidden;
  }
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image a,
  body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__image img {
    display: block; width: 100%; height: 100%; object-fit: cover !important;
  }
}

/* `listings.css:5` fuerza Montserrat con `!important`. */
body.ctop-maqueta--pespas .hp-listing__title,
body.ctop-maqueta--pespas .hp-listing__title a,
body.ctop-maqueta--pespas a.hp-listing__title {
  font-family: var(--pes-fuente) !important; font-weight: 700 !important;
  font-size: 17px; letter-spacing: -0.015em; color: var(--uv-ink) !important;
  text-decoration: none;
}
body.ctop-maqueta--pespas .hp-listing__title a:hover { color: var(--uv-amber) !important; }

body.ctop-maqueta--pespas .hp-listing__categories,
body.ctop-maqueta--pespas .hp-listing__categories a,
body.ctop-maqueta--pespas .hp-listing__details--primary,
body.ctop-maqueta--pespas .hp-listing__date,
body.ctop-maqueta--pespas .hp-listing__attributes--secondary {
  font-size: 13px; color: var(--pes-gris);
}

/* La zona de la tarjeta: `listings.css:24-27` la declara en Inter `#475569` con
   un pin azul delante hecho con `::before`. */
body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__attribute--zona {
  font: 400 13px/1.4 var(--pes-fuente); color: var(--pes-gris);
}
body.ctop-maqueta--pespas .hp-listing--view-block .hp-listing__attribute--zona::before,
body.ctop-maqueta--pespas .ctop-ficha-meta__item i,
body.ctop-maqueta--pespas .hp-listing__attribute i { color: var(--pes-gris); }
body.ctop-maqueta--pespas .hp-listing__description { font-size: 13px; line-height: 1.5; color: var(--pes-gris-os); }

/* El sello «Verificado»: en el diseño es una etiqueta negra en versalitas, no
   una píldora verde con icono.

   El elemento NO tiene texto: `listings.css:91-92` compone el distintivo entero
   con `::before` (el icono de FontAwesome) y `::after` (la palabra). Cambiarle
   el fondo al elemento y nada más deja el icono verde encima del negro. */
/* La segunda mitad del selector no sobra: en la FICHA, HivePress pinta el fondo
   de todos los atributos con `.hp-listing--view-page .hp-listing__attributes--primary
   .hp-listing__attribute` (tres clases), que gana a `body.ctop-maqueta--pespas
   .hp-listing__attribute--verificado` (dos clases y un elemento). El resultado
   era un sello de fondo gris claro con la palabra en blanco: ilegible, y solo en
   la ficha. */
body.ctop-maqueta--pespas .hp-listing__attribute--verificado,
body.ctop-maqueta--pespas .hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--verificado,
body.ctop-maqueta--pespas .ctop-pill--ok {
  background: var(--uv-ink); background-color: var(--uv-ink);
  color: #fff; border: 0; border-radius: 0; gap: 0;
  padding: 4px 8px;
}
body.ctop-maqueta--pespas .hp-listing__attribute--verificado::before,
body.ctop-maqueta--pespas .ctop-pill--ok i { display: none; }
body.ctop-maqueta--pespas .hp-listing__attribute--verificado::after {
  content: "VERIFICADO";
  font: 700 10px/1 var(--pes-fuente); color: #fff; letter-spacing: 0.1em;
}

/* «Abierto ahora» pasa a ser texto, no un distintivo de color. */
body.ctop-maqueta--pespas .ctop-open-badge {
  background: none; border: 0; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-open-badge--si { color: var(--uv-green); }
body.ctop-maqueta--pespas .ctop-open-badge--no { color: var(--pes-gris-cl); }

/* Los botones de la tarjeta: negro macizo el teléfono, filete el resto. */
body.ctop-maqueta--pespas .uv-call-btn,
body.ctop-maqueta--pespas .uv-call-btn--card {
  background: var(--uv-ink); color: #fff; border: 0;
  font: 700 13px var(--pes-fuente); padding: 11px 20px; text-align: center;
}
body.ctop-maqueta--pespas .uv-call-btn:hover { background: var(--uv-amber); color: var(--uv-ink); }

body.ctop-maqueta--pespas .uv-wa-btn,
body.ctop-maqueta--pespas .uv-wa-btn--card {
  background: #fff; color: var(--uv-ink); border: 1px solid var(--uv-ink);
  font: 600 13px var(--pes-fuente); padding: 10px 20px; text-align: center;
}
body.ctop-maqueta--pespas .uv-wa-btn:hover { background: var(--uv-ink); color: #fff; }

body.ctop-maqueta--pespas .hp-listing__attribute--dominio a {
  border: var(--pes-filete); color: var(--pes-gris-os);
  font-size: 13px; padding: 10px 20px; text-align: center; text-decoration: none; display: block;
}
body.ctop-maqueta--pespas .hp-listing__attribute--dominio a:hover { border-color: var(--uv-ink); color: var(--uv-ink); }

/* Destacado: sin fondo crema, con el filete en ámbar y su etiqueta. */
body.ctop-maqueta--pespas .hp-listing--featured {
  background: #fff; border-color: var(--uv-amber);
}

/* Paginación en cajas cuadradas — **solo cuando de verdad toca pintarla**.

   `infinite-scroll.js:170` le pone `.ctop-inf-hidden` en cuanto la carga continua se activa, y
   `listings.css:81` la esconde con `display:none`. Esta regla la resucitaba: `display:flex` con una
   clase más de especificidad (0,2,1 contra 0,2,0). El resultado era el listado con **las dos cosas
   a la vez**, carga infinita y números de página debajo, que es contradictorio — al hacer scroll se
   añaden anuncios y el «1 2 3» de abajo deja de significar nada.

   El `:not()` es lo que hay que conservar: la paginación sigue en el DOM para quien no tenga JS,
   pero deja de pintarse en cuanto el scroll infinito toma el mando. */
body.ctop-maqueta--pespas .hp-pagination:not(.ctop-inf-hidden) {
  display: flex; gap: 6px; margin-top: 28px;
}
/* Y una paginación SIN enlaces no se pinta. Cuando los resultados caben en una página, HivePress
   deja el contenedor igualmente: un recuadro vacío de 28px de margen debajo de la lista, que en una
   landing con un solo anuncio es lo único que hay después de la tarjeta. */
body.ctop-maqueta--pespas .hp-pagination:not(:has(.page-numbers)) { display: none; }
body.ctop-maqueta--pespas .hp-pagination .page-numbers {
  border: var(--pes-filete); background: #fff; color: var(--uv-ink);
  font-size: 13px; padding: 9px 15px; text-decoration: none; border-radius: 0; min-width: 0;
}
body.ctop-maqueta--pespas .hp-pagination .page-numbers:hover { border-color: var(--uv-ink); }
body.ctop-maqueta--pespas .hp-pagination .page-numbers.current {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   5. La ficha

   `ficha.php` ya agrupa los bloques en tarjetas (prioridad 600) y ese árbol NO
   se toca: aquí solo se repinta. Los nombres de bloque son contrato.
   --------------------------------------------------------------------------- */

/* La tarjeta de la ficha vuelve a tener caja: filete, radio y aire por dentro. Estaba sin borde y
   sin padding porque la versión plana separaba las secciones solo con espacio; con el radio de
   vuelta (sección 9k) hace falta el filete, o el redondeo no se ve. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-card {
  background: #fff; border: var(--pes-filete); padding: 22px 24px; margin-bottom: 24px;
}
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--cabecera { margin-bottom: 28px; }

body.ctop-maqueta--pespas .ctop-migas {
  font-size: 13px; color: var(--pes-gris); margin-bottom: 24px;
}
body.ctop-maqueta--pespas .ctop-migas a { color: var(--pes-gris); text-decoration: underline; text-underline-offset: 3px; }
body.ctop-maqueta--pespas .ctop-migas a:hover { color: var(--uv-amber); }

body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-page .hp-listing__title,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__title {
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
}

body.ctop-maqueta--pespas .ctop-ficha-meta,
body.ctop-maqueta--pespas .ctop-row-meta {
  font-size: 14px; color: var(--pes-gris);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* La categoría, arriba de la ficha: en el diseño es una etiqueta con filete, no
   una píldora azul clara. */
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__categories,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__category {
  background: none; border: 0; padding: 0;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__categories a {
  display: inline-block; background: #fff; border: var(--pes-filete); border-radius: 0;
  color: var(--uv-ink); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; text-decoration: none;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__categories a:hover { border-color: var(--uv-ink); }

/* Las pestañas de gestión del anuncio («Detalles», «Reservas»…) que el dueño ve
   en su propia ficha. `ficha.css:157` las pinta en azul de marca. */
body.ctop-maqueta--pespas .hp-menu--listing-manage a {
  border-radius: 0; background: #fff; border: var(--pes-filete); color: var(--uv-ink);
  font-size: 13px; font-weight: 600;
}
body.ctop-maqueta--pespas .hp-menu--listing-manage a:hover { border-color: var(--uv-ink); background: #fff; }
body.ctop-maqueta--pespas .hp-menu--listing-manage .hp-menu__item--current a,
body.ctop-maqueta--pespas .hp-menu--listing-manage .current-menu-item a {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}

/* La galería conserva el carrusel de HivePress —lightbox, tiras de miniaturas y
   vídeo—; solo pierde el marco redondeado. */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__images { padding: 0; border-radius: 0; }
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__images img,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__images video { border-radius: 0; }

/* «Escribir una valoración», «Informar del anuncio», «Seguir»: iconos en tinta,
   no en el azul de HivePress. */
body.ctop-maqueta--pespas .hp-listing__action i,
body.ctop-maqueta--pespas .ctop-follow-box i { color: var(--uv-ink); }
body.ctop-maqueta--pespas .hp-listing__action a,
body.ctop-maqueta--pespas .hp-listing__action .hp-link,
body.ctop-maqueta--pespas .hp-listing__actions--secondary a { color: var(--uv-ink); }
body.ctop-maqueta--pespas .hp-listing__action a:hover,
body.ctop-maqueta--pespas .hp-listing__action .hp-link:hover { color: var(--uv-amber); }

body.ctop-maqueta--pespas .uv-why {
  border: 0; border-left: 3px solid var(--uv-amber); background: none;
  font-size: 16px; line-height: 1.6; color: var(--uv-ink);
  padding: 2px 0 2px 16px; margin: 18px 0 0;
}

/* **La medida de lectura va en el PÁRRAFO, no en la caja.**
 *
 * Estaba como `max-width: 68ch` sobre `.hp-listing__description`, que es lo que se busca para el
 * texto —68 caracteres por línea se leen sin perder el renglón— pero esa clase es también la
 * TARJETA: con filete y sombra, el recuadro se quedaba en 605px dentro de una columna de 893 y
 * parecía un bloque a medio maquetar junto a los demás, que sí llegan al borde.
 *
 * La caja llena su columna; el texto conserva su medida. Es la misma intención, aplicada al
 * elemento correcto. */
body.ctop-maqueta--pespas .hp-listing__description,
body.ctop-maqueta--pespas .ctop-card--cuerpo .hp-listing__description {
  font-size: 15px; line-height: 1.7; color: var(--pes-tinta-2); max-width: none;
}
/* **Sin medida de lectura: el texto va a todo el ancho de su tarjeta.** Decisión del usuario, y va
   contra el consejo habitual —68 caracteres por línea se siguen mejor que 100—, así que conviene
   que quede dicho: si algún día se quiere recuperar, es devolver `max-width: 68ch` a estas tres
   líneas. Lo que NO hay que hacer es ponerlo otra vez en `.hp-listing__description`, que es la
   tarjeta: ahí encoge la caja entera y es el defecto que se corrigió antes. */
body.ctop-maqueta--pespas .hp-listing__description > p,
body.ctop-maqueta--pespas .hp-listing__description > ul,
body.ctop-maqueta--pespas .hp-listing__description > ol { max-width: none; }

/* Chips de especialidades y de zona de cobertura: el mismo objeto. */
body.ctop-maqueta--pespas .uv-spec-chip,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip {
  border: var(--pes-filete); background: #fff; color: var(--uv-ink);
  font-size: 13px; padding: 8px 14px; text-decoration: none;
}
body.ctop-maqueta--pespas .uv-spec-chip:hover,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip:hover { border-color: var(--uv-ink); }

/* La columna de contacto: caja con filete, pegajosa, y el teléfono como pieza
   principal. Sin `gap` en los hijos de `.hp-page__sidebar`: el componente
   `sticky` de HivePress mete un `<div>` por dentro por encima de 768px y el gap
   dejaría de aplicarse. Se separan con márgenes. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--contacto {
  border: var(--pes-filete); padding: 24px; background: #fff;
}
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--contacto > * { margin-bottom: 12px; }
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--contacto > *:last-child { margin-bottom: 0; }

body.ctop-maqueta--pespas .uv-contact .uv-call-btn {
  display: block; font-size: 17px; padding: 15px;
}

body.ctop-maqueta--pespas .uv-lead-form { border-top: var(--pes-filete); padding-top: 16px; }
body.ctop-maqueta--pespas .uv-lead-consent { font-size: 12px; line-height: 1.5; color: var(--pes-gris); }

body.ctop-maqueta--pespas .uv-sched-table,
body.ctop-maqueta--pespas .uv-sched-view { font-size: 14px; border-collapse: collapse; width: 100%; }
body.ctop-maqueta--pespas .uv-sched-table td,
body.ctop-maqueta--pespas .uv-sched-view td { border-bottom: var(--pes-filete); padding: 8px 0; }

/* FAQ: cada pregunta es una CAJA, y por eso lleva aire por dentro.

   Esto se escribió cuando las preguntas eran filas separadas por un filete, sin caja: entonces el
   padding horizontal era 0 a propósito, para que el texto quedara alineado con el resto de la
   tarjeta. Una sección posterior las devolvió a caja con borde (`.uv-faq-item { border: … }`), y el
   padding se quedó a cero: la pregunta y la respuesta tocaban el filete. Es lo que pasa cuando dos
   sitios describen el mismo componente — aquí se decide una vez y con su aire. */
body.ctop-maqueta--pespas .uv-faq-item { background: none; padding: 0; }
body.ctop-maqueta--pespas .uv-faq-q {
  font-size: 15px; font-weight: 700; color: var(--uv-ink);
  padding: 16px 18px; background: none; text-align: left;
}
/* El padding VERTICAL va solo en la respuesta abierta.
   Puesto también en la cerrada —que tiene `max-height:0` y `overflow:hidden`— dejaba una franja de
   18px por la que asomaba la primera línea del texto cortada a media palabra: parecía un resumen
   mal hecho y era una pregunta que se creía cerrada. El HORIZONTAL sí puede estar siempre: con
   altura cero no se ve, y así no hay que repetirlo. */
body.ctop-maqueta--pespas .uv-faq-a {
  font-size: 14px; line-height: 1.6; color: var(--pes-gris-os); padding: 0 18px;
}
body.ctop-maqueta--pespas .uv-faq-item.open .uv-faq-a { padding: 0 18px 16px; }

/* Reseñas. */
body.ctop-maqueta--pespas .hp-review,
body.ctop-maqueta--pespas .ctop-rev-card {
  border: var(--pes-filete); background: #fff; padding: 20px; margin-bottom: 20px;
}
body.ctop-maqueta--pespas .hp-review__author-name { font-size: 14px; font-weight: 700; color: var(--uv-ink); }
body.ctop-maqueta--pespas .hp-review__date { font-size: 12px; color: var(--pes-gris); }
body.ctop-maqueta--pespas .hp-review__text { font-size: 14px; line-height: 1.6; color: var(--pes-tinta-2); }
body.ctop-maqueta--pespas .hp-review__reply {
  border-left: 3px solid var(--pes-linea); background: var(--pes-papel); padding: 14px 16px;
}

/* Relacionados: se conservan (son oferta, no adorno) con el marco de la casa. */
body.ctop-maqueta--pespas .hp-section { margin-top: 48px; }

/* ---------------------------------------------------------------------------
   6. El menú de la cuenta

   Lo pinta el TEMA (`themes/trabajourgente/assets/css/header-account.css` para
   el desplegable del escritorio y `responsive.css` para el acordeón del móvil),
   que es el mismo para los dieciocho dominios: ahí no se puede tocar sin
   repintar toda la cartera. Se repinta desde aquí, que es por maquetación.

   Casi todas las reglas del tema llevan `!important` en el color, así que hay
   que responder igual — la alternativa sería subir la especificidad con
   selectores cada vez más largos, que envejece peor.

   **«Salir» deja de ir en rojo.** En este sistema el rojo es un estado de error
   y cerrar sesión no lo es; el diseño no tiene rojo en ninguna parte. Se separa
   con un filete, que es como el diseño distingue las cosas. Si se prefiere el
   rojo, se recupera cambiando el color de las dos reglas de `[href*="logout"]`.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .uv-acc-menu {
  border: var(--pes-filete); border-radius: 0; padding: 0;
  box-shadow: 6px 6px 0 var(--pes-linea);
  min-width: 232px;
}
body.ctop-maqueta--pespas .uv-acc-item {
  border-radius: 0; gap: 12px; padding: 11px 16px;
  font: 500 14px/1.2 var(--pes-fuente);
  color: var(--uv-ink) !important;
  border-left: 2px solid transparent;
}
body.ctop-maqueta--pespas .uv-acc-item i { width: 16px; font-size: 13px; color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-acc-item:hover,
body.ctop-maqueta--pespas .uv-acc-item.is-active {
  background: var(--pes-papel); color: var(--uv-ink) !important; border-left-color: var(--uv-amber);
}
body.ctop-maqueta--pespas .uv-acc-item:hover i,
body.ctop-maqueta--pespas .uv-acc-item.is-active i { color: var(--uv-amber); }

/* «Dar de alta» es la acción principal de la cuenta: en negativo, como en la cabecera. */
body.ctop-maqueta--pespas .uv-acc-item[href*="submit-listing"] {
  background: var(--uv-ink); color: #fff !important; font-weight: 700; border-left-color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-acc-item[href*="submit-listing"] i { color: #fff; }
body.ctop-maqueta--pespas .uv-acc-item[href*="submit-listing"]:hover {
  background: var(--uv-amber); color: var(--uv-ink) !important; border-left-color: var(--uv-amber);
}
body.ctop-maqueta--pespas .uv-acc-item[href*="submit-listing"]:hover i { color: var(--uv-ink); }

body.ctop-maqueta--pespas .uv-acc-item[href*="logout"] {
  color: var(--pes-gris) !important;
  border-top: var(--pes-filete); margin-top: 4px; padding-top: 13px;
}
body.ctop-maqueta--pespas .uv-acc-item[href*="logout"] i { color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-acc-item[href*="logout"]:hover { color: var(--uv-ink) !important; }
body.ctop-maqueta--pespas .uv-acc-item[href*="logout"]:hover i { color: var(--uv-amber); }

/* El mismo menú, cuando HivePress lo pinta como barra lateral. */
body.ctop-maqueta--pespas .hp-menu--user-account {
  border: var(--pes-filete); border-radius: 0; box-shadow: none; padding: 0;
}
body.ctop-maqueta--pespas .hp-menu--user-account a {
  border-radius: 0; padding: 11px 16px;
  font: 500 14px/1.2 var(--pes-fuente); color: var(--uv-ink) !important;
  border-left: 2px solid transparent;
}
body.ctop-maqueta--pespas .hp-menu--user-account a:hover,
body.ctop-maqueta--pespas .hp-menu--user-account .current a {
  background: var(--pes-papel); color: var(--uv-ink) !important; border-left-color: var(--uv-amber);
}
body.ctop-maqueta--pespas .hp-menu--user-account .hp-menu__item--listing-submit a {
  background: var(--uv-ink); color: #fff !important;
  font-family: var(--pes-fuente) !important; font-weight: 700 !important;
}

/* Y el acordeón del móvil, que es por donde se navega la cuenta cuando el
   desplegable no existe. */
body.ctop-maqueta--pespas .uv-mpop-acctoggle { font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .uv-mpop-submenu { border-left: 2px solid var(--pes-linea); }
body.ctop-maqueta--pespas .uv-mpop-sub {
  border-radius: 0; color: var(--uv-ink); font: 500 14px var(--pes-fuente);
}
body.ctop-maqueta--pespas .uv-mpop-sub i { color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-mpop-sub:hover,
body.ctop-maqueta--pespas .uv-mpop-sub:focus,
body.ctop-maqueta--pespas .uv-mpop-sub.is-active {
  background: var(--pes-papel); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-mpop-sub.is-active i { color: var(--uv-amber); }

/* ---------------------------------------------------------------------------
   6b. La cuenta
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .uv-table,
body.ctop-maqueta--pespas .hp-table { border-collapse: collapse; width: 100%; font-size: 14px; }
body.ctop-maqueta--pespas .uv-table th,
body.ctop-maqueta--pespas .hp-table th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pes-gris); text-align: left;
  border-bottom: 1px solid var(--uv-ink); padding: 0 12px 10px 0; background: none;
}
body.ctop-maqueta--pespas .uv-table td,
body.ctop-maqueta--pespas .hp-table td {
  border-bottom: var(--pes-filete); padding: 14px 12px 14px 0; color: var(--pes-tinta-2);
}

body.ctop-maqueta--pespas .uv-stats-cards,
body.ctop-maqueta--pespas .ctop-notas {
  border: 0; background: none; box-shadow: none; padding: 0;
}
body.ctop-maqueta--pespas .uv-stat {
  border: var(--pes-filete); background: #fff; padding: 20px; border-radius: 0;
}
body.ctop-maqueta--pespas .uv-stat-n {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
  font-size: 30px; letter-spacing: -0.03em; color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-stat-l { font-size: 13px; color: var(--pes-gris); }

/* Los avisos (prueba, rol, moderación, bloqueo) comparten forma: filete lateral
   grueso y fondo papel. El COLOR del filete lo decide cada estado en su propia
   hoja; aquí solo se quita la tarjeta redondeada. */
body.ctop-maqueta--pespas .ctop-rol__aviso,
body.ctop-maqueta--pespas .ctop-card-step__aviso,
body.ctop-maqueta--pespas .ctop-blocked-notice,
body.ctop-maqueta--pespas .ctop-rejected-notice,
body.ctop-maqueta--pespas .uv-login-notice {
  border-radius: 0; box-shadow: none; background: var(--pes-papel);
  border: var(--pes-filete); border-left-width: 3px;
  font-size: 14px; line-height: 1.6;
}

/* El aviso del periodo gratuito.

   `billing/trial.css` lo pinta en cuatro tonos según lo que queda —info, aviso,
   urgente, vencido— y eso **no se toca**: es información, no decoración, y es lo
   que distingue «te quedan seis meses» de «se te ha pasado». Lo que cambia es la
   forma: caja recta con filete lateral grueso en vez de tarjeta redondeada, y el
   botón rectangular. El color de cada estado lo sigue poniendo su propia hoja. */
body.ctop-maqueta--pespas .ctop-trial {
  border-radius: 0; border-width: 1px; border-left-width: 3px;
  font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-trial__titulo { font-weight: 800; letter-spacing: -0.01em; }
body.ctop-maqueta--pespas .ctop-trial__cta {
  border-radius: 0; font-family: var(--pes-fuente); font-weight: 700;
  background: var(--uv-ink); color: #fff;
}
body.ctop-maqueta--pespas .ctop-trial__cta:hover { background: var(--uv-amber); color: var(--uv-ink) !important; }

/* Los cuatro estados, traducidos a la escala del diseño.

   `trial.css` los distingue por el FONDO —azul, ámbar claro, rojo claro, verde claro— y eso aquí
   deja el único bloque de color de toda la cuenta, además en un azul que no existe en la paleta.
   La distinción no se pierde: pasa al filete lateral, que es como el diseño separa las cosas, y el
   fondo es siempre papel. El orden sigue leyéndose de un vistazo: gris (queda mucho) → ámbar
   (conviene mirarlo) → rojo (se acaba) → tinta (ya está resuelto).

   El rojo se queda SOLO en «vencido» y «urgente»: ahí sí es un estado de error. */
body.ctop-maqueta--pespas .ctop-trial--info,
body.ctop-maqueta--pespas .ctop-trial--aviso,
body.ctop-maqueta--pespas .ctop-trial--urgente,
body.ctop-maqueta--pespas .ctop-trial--vencido,
body.ctop-maqueta--pespas .ctop-trial--pagado {
  background: var(--pes-papel); border-color: var(--pes-linea);
}

body.ctop-maqueta--pespas .ctop-trial--info { border-left-color: var(--pes-gris-cl); }
body.ctop-maqueta--pespas .ctop-trial--info > i { color: var(--pes-gris); }

body.ctop-maqueta--pespas .ctop-trial--aviso { border-left-color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-trial--aviso > i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-trial--aviso .ctop-trial__cta {
  background: var(--uv-amber); color: var(--uv-ink) !important;
}

body.ctop-maqueta--pespas .ctop-trial--urgente,
body.ctop-maqueta--pespas .ctop-trial--vencido { border-left-color: var(--uv-red); }
body.ctop-maqueta--pespas .ctop-trial--urgente > i,
body.ctop-maqueta--pespas .ctop-trial--vencido > i { color: var(--uv-red); }
body.ctop-maqueta--pespas .ctop-trial--urgente .ctop-trial__titulo,
body.ctop-maqueta--pespas .ctop-trial--vencido .ctop-trial__titulo { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-trial--urgente .ctop-trial__cta,
body.ctop-maqueta--pespas .ctop-trial--vencido .ctop-trial__cta { background: var(--uv-red); color: #fff; }

/* Ya tiene tarjeta: es una confirmación, no una llamada a la acción. */
body.ctop-maqueta--pespas .ctop-trial--pagado { border-left-color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-trial--pagado > i { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-trial--pagado .ctop-trial__cta {
  background: #fff; color: var(--uv-ink) !important; border: 1px solid var(--uv-ink);
}

/* Los iconos de las tarjetas de «Estadísticas» heredan el azul de HivePress. */
body.ctop-maqueta--pespas .uv-stat i,
body.ctop-maqueta--pespas .uv-stats-cards i { color: var(--pes-gris); }

body.ctop-maqueta--pespas .ctop-plan {
  border: 2px solid var(--pes-linea-2); box-shadow: var(--pes-sombra);
  border-radius: 0; background: #fff; padding: 24px;
}
body.ctop-maqueta--pespas .ctop-plan__nombre {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-plan__precio {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
  font-size: 34px; letter-spacing: -0.03em; color: var(--uv-ink);
}
/* `forms.css:227` separa el «al mes» con 3px, que junto a un precio de 13px se leía. Al subirlo a
   34px en Archivo Black dejó de leerse: la página imprimía «9,90 € almes». Es consecuencia de la
   tipografía de esta maquetación, así que la separación se corrige aquí y no en el módulo base. */
body.ctop-maqueta--pespas .ctop-plan__precio small {
  margin-left: 8px; font-family: var(--pes-fuente); color: var(--pes-gris);
}

body.ctop-maqueta--pespas .ctop-follow-box,
body.ctop-maqueta--pespas .ctop-reserva {
  border: var(--pes-filete); background: #fff; padding: 20px;
}

/* ---------------------------------------------------------------------------
   7. El alta

   `form-layout.js` agrupa el formulario en fieldsets y monta la barra de pasos.
   Su estructura y sus clases son contrato con el JS: aquí solo se repinta.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ctop-fs-caja {
  border: var(--pes-filete); background: #fff; box-shadow: none; border-radius: 0; padding: 28px;
}

body.ctop-maqueta--pespas .ctop-fs__legend {
  border-bottom: 1px solid var(--uv-ink); padding-bottom: 12px; margin-bottom: 20px;
}
body.ctop-maqueta--pespas .ctop-fs__t {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-fs__icono { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-fs__ayuda { font-size: 13px; color: var(--pes-gris); }

/* La barra de pasos: números en Archivo Black, el activo en negro macizo. */
body.ctop-maqueta--pespas .ctop-pasos {
  border-bottom: var(--pes-filete); background: none; border-radius: 0; box-shadow: none;
}
body.ctop-maqueta--pespas .ctop-pasos__p { background: none; border: 0; border-radius: 0; }
body.ctop-maqueta--pespas .ctop-pasos__n {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
  background: #fff; border: var(--pes-filete); color: var(--pes-gris);
  border-radius: 0; font-size: 12px;
}
body.ctop-maqueta--pespas .ctop-pasos__p.is-ahora .ctop-pasos__n {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}
body.ctop-maqueta--pespas .ctop-pasos__p.is-mal .ctop-pasos__n {
  background: var(--uv-red); border-color: var(--uv-red); color: #fff;
}
body.ctop-maqueta--pespas .ctop-pasos__t {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-pasos__p.is-ahora .ctop-pasos__t { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-pasos__cuenta { font-size: 12px; color: var(--pes-gris); }

body.ctop-maqueta--pespas .ctop-pasos__btn--pri {
  background: var(--uv-ink); color: #fff; border: 0; border-radius: 0;
  font: 700 14px var(--pes-fuente); padding: 14px 26px;
}
body.ctop-maqueta--pespas .ctop-pasos__btn--pri:hover { background: var(--uv-amber); color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-pasos__btn--sec {
  background: #fff; color: var(--uv-ink); border: 1px solid var(--uv-ink); border-radius: 0;
  font: 600 14px var(--pes-fuente); padding: 13px 26px;
}
body.ctop-maqueta--pespas .ctop-pasos__pie { border-top: var(--pes-filete); background: #fff; }

/* Etiquetas de campo del alta, en versalitas como en el diseño. */
body.ctop-maqueta--pespas .ctop-fs .hp-field__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pes-gris);
}

/* El botón de subir imágenes es el único del formulario que no es `hp-form__button`. */
body.ctop-maqueta--pespas .hp-attachment-upload__button,
body.ctop-maqueta--pespas .hp-file__select {
  background: #fff !important; border: 1px solid var(--uv-ink) !important; border-radius: 0 !important;
  color: var(--uv-ink) !important; font-family: var(--pes-fuente) !important;
  font-weight: 600 !important; font-size: 14px;
}
body.ctop-maqueta--pespas .hp-attachment-upload__button:hover,
body.ctop-maqueta--pespas .hp-file__select:hover {
  background: var(--uv-ink) !important; color: #fff !important;
}

/* Las marcas de «esto vuelve a revisión» dejan de ser una píldora de color. */
body.ctop-maqueta--pespas .ctop-review-chip {
  background: none; border: 0; border-left: 2px solid var(--uv-amber); border-radius: 0;
  color: var(--pes-gris); font-size: 12px; padding: 2px 0 2px 10px;
}

/* Etiquetas de especialidades dentro del formulario. */
body.ctop-maqueta--pespas .uv-tags-box { border: var(--pes-filete); border-radius: 0; background: #fff; }
body.ctop-maqueta--pespas .uv-tag {
  background: var(--pes-papel); border: var(--pes-filete); color: var(--uv-ink);
  border-radius: 0; font-size: 13px;
}

/* El editor de horario y el panel de reservas. */
body.ctop-maqueta--pespas .uv-sched-editor,
body.ctop-maqueta--pespas .ctop-pick-box,
body.ctop-maqueta--pespas .ctop-pick-modal {
  border-radius: 0; box-shadow: none; border: var(--pes-filete);
}

/* ---------------------------------------------------------------------------
   7b. Los paneles de gremio y localidad del buscador

   Estaban sin adaptar: píldoras redondeadas, azul de HivePress y el elegido sin
   distinguirse de los demás. Ahora la selección es MÚLTIPLE, así que marcar lo
   elegido dejó de ser un detalle y pasó a ser lo que hace usable el panel.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ctop-pick-modal { background: rgba(0, 0, 0, .55); }
body.ctop-maqueta--pespas .ctop-pick-box { border: 1px solid var(--uv-ink); background: #fff; }
body.ctop-maqueta--pespas .ctop-pick-head {
  border-bottom: var(--pes-filete); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-pick-head strong { font-weight: 800; letter-spacing: -0.02em; }
body.ctop-maqueta--pespas .ctop-pick-close {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0; color: var(--uv-ink);
}

body.ctop-maqueta--pespas .ctop-pick-todos {
  background: #fff; border: 1px solid var(--uv-ink); border-radius: 0;
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-pick-todos i { color: var(--uv-amber); }

body.ctop-maqueta--pespas .ctop-pick-grupo__titulo {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0;
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-pick-servicio,
body.ctop-maqueta--pespas .ctop-pick-fila {
  background: #fff; border: var(--pes-filete); border-radius: 0;
  color: var(--uv-ink); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-pick-grupo__titulo:hover,
body.ctop-maqueta--pespas .ctop-pick-servicio:hover,
body.ctop-maqueta--pespas .ctop-pick-fila:hover { border-color: var(--uv-ink); }

/* Lo elegido, en negativo. Con selección múltiple hay que poder contar de un vistazo qué llevas
   marcado sin leer el botón de arriba. */
body.ctop-maqueta--pespas .ctop-pick-grupo__titulo.is-actual,
body.ctop-maqueta--pespas .ctop-pick-servicio.is-actual,
body.ctop-maqueta--pespas .ctop-pick-fila.is-actual,
/* La zona faltaba, y era la mitad del panel: se podían marcar varias localidades pero ninguna se
   veía marcada, así que había que leer el rótulo del botón de arriba para saber qué llevabas. Los
   gremios sí se ponían en negativo desde el principio — misma regla, un selector de menos. */
body.ctop-maqueta--pespas .ctop-pick-zona.is-actual {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}
body.ctop-maqueta--pespas .ctop-pick-grupo__titulo.is-actual::after,
body.ctop-maqueta--pespas .ctop-pick-servicio.is-actual::after,
body.ctop-maqueta--pespas .ctop-pick-zona.is-actual::after {
  content: "✕"; margin-left: 8px; font-size: 11px; opacity: .7;
}
/* `search-filters.css:309-311` fija el fondo de `:hover`, `:focus` y `:active` de la zona, y en un
   móvil un toque deja el `:focus` puesto: sin esto, la localidad recién marcada volvía a verse
   blanca en cuanto se soltaba el dedo. */
body.ctop-maqueta--pespas .ctop-pick-zona.is-actual:hover,
body.ctop-maqueta--pespas .ctop-pick-zona.is-actual:focus,
body.ctop-maqueta--pespas .ctop-pick-zona.is-actual:active {
  background: var(--uv-ink); color: #fff;
}

body.ctop-maqueta--pespas .ctop-pick-buscar {
  border: var(--pes-filete); border-radius: 0; font-family: var(--pes-fuente);
}

/* La barra de «Aplicar», que aparece con la selección múltiple. */
body.ctop-maqueta--pespas .ctop-pick-foot {
  border-top: var(--pes-filete); padding: 14px 20px; display: flex; justify-content: flex-end;
  background: #fff;
}
body.ctop-maqueta--pespas .ctop-pick-aplicar {
  background: var(--uv-ink); color: #fff; border: 0; border-radius: 0;
  font: 700 14px var(--pes-fuente); padding: 13px 28px; cursor: pointer;
}
body.ctop-maqueta--pespas .ctop-pick-aplicar:hover { background: var(--uv-amber); color: var(--uv-ink); }

/* ---------------------------------------------------------------------------
   8. Los bloques de datos de la portada

   `[ctop_gremios]`, `[ctop_cartera]`, `[ctop_stats]` y `[ctop_planes]` salen en
   páginas que pinta Elementor, pero se visten aquí y no en el CSS del kit: la
   clase `ctop-maqueta--pespas` está en el `<body>` de todas las páginas del
   front, y estos bloques son de la maquetación, no de la marca. La estructura
   mínima (que la rejilla sea rejilla aunque no haya maquetación) está en
   `seo/arquetipos.css`.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ctop-gremios {
  display: grid;
  grid-template-columns: repeat(var(--ctop-gremios-cols, 4), minmax(0, 1fr));
  gap: 12px;
}
body.ctop-maqueta--pespas .ctop-gremio-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: var(--pes-filete); padding: 18px 18px 20px;
  text-decoration: none; color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-gremio-card:hover { border-color: var(--uv-ink); color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-gremio-card__marca { width: 10px; height: 10px; background: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-gremio-card__t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
body.ctop-maqueta--pespas .ctop-gremio-card__d { font-size: 12px; line-height: 1.45; color: var(--pes-gris); }

@media (max-width: 900px) { body.ctop-maqueta--pespas .ctop-gremios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { body.ctop-maqueta--pespas .ctop-gremios { grid-template-columns: 1fr; } }

/* Las cintas.

   `translateX(calc(-50% - 6px))`: media anchura menos MEDIO HUECO. El `-6px` no
   es un ajuste a ojo — con `gap:12px` entre tarjetas, media anchura de la cinta
   cae en mitad de un hueco, y sin descontarlo la costura se ve como un salto de
   seis píxeles cada vuelta. Si se cambia el `gap`, se cambia aquí.

   Se detiene al pasar el ratón: son enlaces, y perseguir un enlace en
   movimiento es de las pocas cosas que consiguen que una animación estorbe de
   verdad. */
@keyframes ctop-marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 6px)); }
}

body.ctop-maqueta--pespas .ctop-gremios-marq,
body.ctop-maqueta--pespas .ctop-dest-marq {
  display: flex; flex-direction: column; gap: 12px; overflow: hidden; width: 100%;
}

body.ctop-maqueta--pespas .ctop-gremios-marq__cinta,
body.ctop-maqueta--pespas .ctop-dest-marq__cinta {
  display: flex; gap: 12px; width: max-content;
  animation-name: ctop-marquesina;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
body.ctop-maqueta--pespas .ctop-gremios-marq__cinta--inv { animation-direction: reverse; }

body.ctop-maqueta--pespas .ctop-gremios-marq:hover .ctop-gremios-marq__cinta,
body.ctop-maqueta--pespas .ctop-dest-marq:hover .ctop-dest-marq__cinta,
body.ctop-maqueta--pespas .ctop-gremios-marq:focus-within .ctop-gremios-marq__cinta,
body.ctop-maqueta--pespas .ctop-dest-marq:focus-within .ctop-dest-marq__cinta {
  animation-play-state: paused;
}

body.ctop-maqueta--pespas .ctop-gremios-marq .ctop-gremio-card { width: 250px; flex-shrink: 0; }

/* La tarjeta de destacado de la cinta: inicial, nombre, gremio · ciudad y nota. */
body.ctop-maqueta--pespas .ctop-dest-card {
  display: flex; gap: 16px; width: 340px; flex-shrink: 0;
  background: #fff; border: var(--pes-filete); padding: 20px;
  text-decoration: none; color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-dest-card:hover { border-color: var(--uv-ink); color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-dest-card__ini {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--uv-ink); color: #fff;
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
body.ctop-maqueta--pespas .ctop-dest-card__cuerpo {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
body.ctop-maqueta--pespas .ctop-dest-card__t {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.ctop-maqueta--pespas .ctop-dest-card__m { font-size: 12px; color: var(--pes-gris); }
body.ctop-maqueta--pespas .ctop-dest-card__nota {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
body.ctop-maqueta--pespas .ctop-dest-card__marca { width: 9px; height: 9px; background: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-dest-card__nota b { font-size: 13px; font-weight: 700; }
body.ctop-maqueta--pespas .ctop-dest-card__nota span:last-child { font-size: 12px; color: var(--pes-gris); }

/* Quien ha pedido que no se mueva nada ve una fila estática y puede desplazarla
   a mano. Parar la animación sin más dejaría medio catálogo fuera de la pantalla
   y sin forma de llegar a él. */
@media (prefers-reduced-motion: reduce) {
  body.ctop-maqueta--pespas .ctop-gremios-marq__cinta,
  body.ctop-maqueta--pespas .ctop-dest-marq__cinta { animation: none; }
  body.ctop-maqueta--pespas .ctop-gremios-marq,
  body.ctop-maqueta--pespas .ctop-dest-marq { overflow-x: auto; }
}

/* Titular de sección con enlace a la derecha, subrayado en ámbar. */
body.ctop-maqueta--pespas .uv-vermas a,
.uv-vermas a {
  font-size: 13px; font-weight: 600; color: inherit; text-decoration: none;
  border-bottom: 2px solid var(--uv-amber, #F59E0B); padding-bottom: 2px;
}
body.ctop-maqueta--pespas .uv-vermas a:hover { color: var(--uv-amber); }

/* Las cifras: sin tarjetas, una regla arriba y el número en Archivo Black. */
body.ctop-maqueta--pespas .ctop-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--uv-ink); gap: 0; width: 100%;
}
/* El color va EXPLÍCITO, no heredado. `seo/home.css:27` pinta `.ctop-stat` en blanco porque allí
   el bloque va sobre un degradado azul oscuro; aquí el fondo es blanco y `color:inherit` dejaba las
   cifras en blanco sobre blanco: los rótulos se leían y los números no estaban. */
body.ctop-maqueta--pespas .ctop-stat {
  padding: 28px 24px 0 0; background: none; border: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-stat__n {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
  font-size: 38px; font-weight: 400; letter-spacing: -0.03em; line-height: 1;
  color: var(--uv-ink); margin-bottom: 6px; min-height: 0;
}
body.ctop-maqueta--pespas .ctop-stat__t { font-size: 13px; font-weight: 400; color: var(--pes-gris); }

@media (max-width: 767px) { body.ctop-maqueta--pespas .ctop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { body.ctop-maqueta--pespas .ctop-stats { grid-template-columns: 1fr; } }

/* Planes. La sombra dura desplazada 8px es la ÚNICA sombra del sistema, y el
   plan destacado la lleva en ámbar: es lo que lo distingue sin recurrir a un
   color de fondo distinto, que rompería la escala neutra. */
body.ctop-maqueta--pespas .uv-planes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch;
}
body.ctop-maqueta--pespas .uv-plan {
  border: 2px solid var(--pes-linea-2); box-shadow: var(--pes-sombra); background: #fff;
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
body.ctop-maqueta--pespas .uv-plan--destacado {
  border-color: var(--uv-ink); box-shadow: 8px 8px 0 var(--uv-amber);
}
body.ctop-maqueta--pespas .uv-plan__marca {
  background: var(--uv-ink); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 4px 8px; align-self: flex-start; white-space: nowrap;
}
body.ctop-maqueta--pespas .uv-plan__nombre {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--pes-gris);
}
body.ctop-maqueta--pespas .uv-plan__precio { display: flex; align-items: baseline; gap: 5px; }
body.ctop-maqueta--pespas .uv-plan__entero,
body.ctop-maqueta--pespas .uv-plan__dec {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif; letter-spacing: -0.03em;
}
body.ctop-maqueta--pespas .uv-plan__entero { font-size: 42px; }
body.ctop-maqueta--pespas .uv-plan__dec { font-size: 22px; letter-spacing: -0.02em; }
body.ctop-maqueta--pespas .uv-plan__periodo { font-size: 14px; color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-plan__para {
  font-size: 14px; line-height: 1.6; color: var(--pes-gris-os);
  border-bottom: var(--pes-filete); padding-bottom: 18px;
}
body.ctop-maqueta--pespas .uv-plan ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
body.ctop-maqueta--pespas .uv-plan li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: 14px; line-height: 1.5; color: var(--pes-tinta-2);
}
body.ctop-maqueta--pespas .uv-plan li:before {
  content: ""; width: 8px; height: 8px; background: var(--uv-ink); margin-top: 6px;
}
body.ctop-maqueta--pespas .uv-plan__cta {
  margin-top: auto; font-size: 14px; font-weight: 700; padding: 15px;
  text-align: center; text-decoration: none; background: var(--uv-ink); color: #fff;
}
body.ctop-maqueta--pespas .uv-plan--destacado .uv-plan__cta { background: var(--uv-amber); color: var(--uv-ink); }
body.ctop-maqueta--pespas .uv-plan__cta:hover { opacity: .85; }

@media (max-width: 900px) { body.ctop-maqueta--pespas .uv-planes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   9. El aviso de cookies

   CookieYes guarda el banner como HTML YA RENDERIZADO en la opción
   `cky_banner_template`, no como ajustes, y esa opción es una sola para los
   dieciocho dominios: reescribirla con los colores de Pespas repintaría el
   banner de toda la cartera. Por eso se repinta desde aquí, que es per-front y
   no toca el dato de nadie.

   Es la primera pieza que ve un visitante nuevo, así que dejarla azul con
   esquinas redondeadas delante de un diseño negro y recto no es un detalle.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .cky-consent-container .cky-consent-bar {
  border: 1px solid var(--uv-ink); border-radius: 0; box-shadow: var(--pes-sombra);
  font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .cky-title { font-weight: 800; letter-spacing: -0.02em; }
body.ctop-maqueta--pespas .cky-notice-des,
body.ctop-maqueta--pespas .cky-preference-body-wrapper { color: var(--pes-gris-os); font-size: 13.5px; }

body.ctop-maqueta--pespas .cky-btn {
  border-radius: 0 !important; font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .cky-btn-accept {
  background: var(--uv-ink) !important; border-color: var(--uv-ink) !important; color: #fff !important;
}
body.ctop-maqueta--pespas .cky-btn-accept:hover {
  background: var(--uv-amber) !important; border-color: var(--uv-amber) !important; color: var(--uv-ink) !important;
}
body.ctop-maqueta--pespas .cky-btn-reject,
body.ctop-maqueta--pespas .cky-btn-customize,
body.ctop-maqueta--pespas .cky-btn-preferences {
  background: #fff !important; border-color: var(--uv-ink) !important; color: var(--uv-ink) !important;
}
/* La pestaña que reabre el aviso de cookies está en TODAS las páginas, abajo a
   la izquierda, y es un cuadrado azul eléctrico.

   **Segundo intento.** El primero puso el fondo en el botón interior dando por
   hecho que el envoltorio era transparente, y es al revés: el azul lo pinta
   `.cky-btn-revisit-wrapper`, con su propio color. Medido en el navegador antes
   de volver a escribirlo. Se cubren los dos, que no cuesta nada y así da igual
   cuál de los dos cambie CookieYes en la próxima versión. */
body.ctop-maqueta--pespas .cky-btn-revisit-wrapper,
body.ctop-maqueta--pespas .cky-btn-revisit-wrapper:hover,
body.ctop-maqueta--pespas .cky-btn-revisit,
body.ctop-maqueta--pespas .cky-btn-revisit:hover {
  background: var(--uv-ink) !important; background-color: var(--uv-ink) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body.ctop-maqueta--pespas .cky-btn-revisit img,
body.ctop-maqueta--pespas .cky-btn-revisit svg { filter: grayscale(1) brightness(3); }

/* ---------------------------------------------------------------------------
   9b. El índice `/servicios/`

   Lo pinta `[ctop_indice_servicios]` y lo viste `seo/services-index.css`, que es
   de los dieciocho dominios. Era la página que más lejos se había quedado: 558
   enlaces azules, tarjetas redondeadas con sombra y todo centrado.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ctop-indice { text-align: left; }

body.ctop-maqueta--pespas .ctop-indice-gremio {
  background: #fff; border: var(--pes-filete); box-shadow: none; border-radius: 0;
}
body.ctop-maqueta--pespas .ctop-indice-gremio[open],
body.ctop-maqueta--pespas .ctop-indice-gremio:hover { border-color: var(--uv-ink); }

/* `services-index.css:120` lo declara en Montserrat y `#0F172A` con una
   especificidad de una sola clase; aquí basta con la del body. */
body.ctop-maqueta--pespas .ctop-indice-gremio__titulo {
  background: none; font-family: var(--pes-fuente); font-weight: 700;
  color: var(--uv-ink); letter-spacing: -0.01em;
}
body.ctop-maqueta--pespas .ctop-indice-gremio__titulo:hover { background: var(--pes-papel); }
body.ctop-maqueta--pespas .ctop-indice-gremio__titulo a { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-indice-gremio__titulo a:hover { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-indice-gremio__nombre {
  font-weight: 700; letter-spacing: -0.01em; color: var(--uv-ink);
}
/* El contador es el dato de la tarjeta: va en ámbar, que es el acento del
   sistema, y no en una píldora azul. */
body.ctop-maqueta--pespas .ctop-indice-gremio__n {
  background: none; border: 0; border-radius: 0; padding: 0;
  color: var(--uv-amber); font-weight: 700; font-size: 13px;
}
body.ctop-maqueta--pespas .ctop-indice-gremio__flecha { color: var(--pes-gris); }

body.ctop-maqueta--pespas .ctop-indice-zonas a,
body.ctop-maqueta--pespas .ctop-indice-gremio__todos a {
  color: var(--uv-ink); text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.ctop-maqueta--pespas .ctop-indice-zonas a:hover,
body.ctop-maqueta--pespas .ctop-indice-gremio__todos a:hover {
  color: var(--uv-ink); border-bottom-color: var(--uv-amber);
}

/* El nivel de la zona (Municipio / Provincia / Comunidad) es una etiqueta, no
   un enlace: filete y gris, para que no compita con el nombre. */
body.ctop-maqueta--pespas .ctop-indice-nivel {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0;
  color: var(--pes-gris); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
body.ctop-maqueta--pespas .ctop-indice-vacio { color: var(--pes-gris); }

/* ---------------------------------------------------------------------------
   9c. Las landings `/gremio-en-zona/`

   Las tres cajas de enlaces del final («Cerca de X», «Zonas más amplias»,
   «Otros servicios») seguían con fondo azulado, radio 12 y enlaces azules.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ctop-landing-title { color: var(--uv-ink); letter-spacing: -0.03em; }
body.ctop-maqueta--pespas .ctop-landing-lead { color: var(--pes-gris-os); }
body.ctop-maqueta--pespas .ctop-landing-lead a,
body.ctop-maqueta--pespas .ctop-landing-texto a { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-landing-lead a:hover,
body.ctop-maqueta--pespas .ctop-landing-texto a:hover { color: var(--uv-amber); }

body.ctop-maqueta--pespas .ctop-landing-linkbox {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}
body.ctop-maqueta--pespas .ctop-landing-linkbox h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pes-gris); border-bottom: 1px solid var(--uv-ink); padding-bottom: 10px;
}
body.ctop-maqueta--pespas .ctop-landing-linkbox a { color: var(--uv-ink); text-decoration: none; }
body.ctop-maqueta--pespas .ctop-landing-linkbox a:hover { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-link-datos,
body.ctop-maqueta--pespas .ctop-linkbox-nota,
body.ctop-maqueta--pespas .ctop-link-nota { color: var(--pes-gris); }

/* La distancia deja de ser una píldora azul. */
body.ctop-maqueta--pespas .ctop-link-km {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0;
  color: var(--pes-gris); font-size: 11px; font-weight: 600;
}

body.ctop-maqueta--pespas .ctop-landing-texto h2,
body.ctop-maqueta--pespas .ctop-landing-texto h3 { color: var(--uv-ink); letter-spacing: -0.02em; }
body.ctop-maqueta--pespas .ctop-landing-texto p,
body.ctop-maqueta--pespas .ctop-landing-texto li { color: var(--pes-tinta-2); }
body.ctop-maqueta--pespas .ctop-sin-oferta { color: var(--pes-gris); }

/* ---------------------------------------------------------------------------
   9d. Valoraciones

   La nota es una CIFRA, así que va en Archivo Black como los precios (ya lo
   resuelve la regla global). Aquí queda el color y la estrella vacía, que era
   de un azul grisáceo que no está en la paleta.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .hp-rating__value { color: var(--uv-ink) !important; letter-spacing: -0.02em; }
body.ctop-maqueta--pespas .hp-rating__count { color: var(--pes-gris); }

/* La estrella vuelve a ser una ESTRELLA.

   `listings.css:96` y `reviews.css:35` no dibujan una estrella: recortan el logotipo de la marca
   con `mask: var(--uv-logo)`, y `--uv-logo` lo pone el tema apuntando a `branding/icon-192.png`.
   A 16px ese contorno no se lee como una puntuación —es una mancha redondeada— y además era el
   icono de la marca anterior, que es exactamente lo que se ve en la ficha.

   Una valoración es un signo convencional: se entiende porque tiene la forma que todo el mundo
   espera, no porque lleve la marca de quien la publica. Va en SVG en línea (el trazo de
   `fa-star` de Font Awesome 5, la misma familia que usa el resto del sitio) para no añadir una
   petición ni un fichero que mantener. El relleno lo sigue dando `background-color`, así que el
   mecanismo de vacía/llena de los módulos base no cambia.

   **Solo afecta a esta maquetación.** Los otros diecisiete dominios siguen con su logotipo; si se
   quiere para todos, esto mismo va a `listings.css` y se borra de aquí. */
body.ctop-maqueta--pespas .hp-rating-stars i,
body.ctop-maqueta--pespas .hp-rating-stars .fa-star,
body.ctop-maqueta--pespas .hp-review-form .hp-rating i,
body.ctop-maqueta--pespas .hp-field--rating i,
/* `.ctop-rev-stars` es la clase PROPIA de «Mis reseñas» y del formulario de valorar
   (`reviews/reviews.css:33`), con su propio `mask: var(--uv-logo)`. La primera versión de esto solo
   cubrió `.hp-rating-stars`, así que en las reseñas seguía saliendo el isotipo anterior: mismo
   fallo, otro selector. Cuando algo se dibuja con el logotipo hay que buscarlo por `--uv-logo`, no
   por el nombre de la clase que uno recuerda. */
body.ctop-maqueta--pespas .ctop-rev-stars i,
body.ctop-maqueta--pespas .hp-form--review-submit .hp-rating-stars i {
  --pes-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");
  -webkit-mask: var(--pes-estrella) center/contain no-repeat;
          mask: var(--pes-estrella) center/contain no-repeat;
  background-color: var(--pes-linea-2);
}
body.ctop-maqueta--pespas .hp-rating-stars i.active,
body.ctop-maqueta--pespas .hp-rating-stars i.filled,
body.ctop-maqueta--pespas .hp-rating-stars .hp-rating__star--filled,
body.ctop-maqueta--pespas .hp-field--rating i.active,
body.ctop-maqueta--pespas .ctop-rev-stars i.active,
body.ctop-maqueta--pespas .hp-form--review-submit .hp-rating-stars i.active { background-color: var(--uv-amber); }
/* Al puntuar, la estrella bajo el cursor se adelanta. Se conserva el gesto y se le quita el rebote:
   en este sistema nada escala. */
body.ctop-maqueta--pespas .ctop-rev-stars i:hover,
body.ctop-maqueta--pespas .hp-form--review-submit .hp-rating-stars i:hover {
  background-color: var(--uv-amber); transform: none;
}

/* ---------------------------------------------------------------------------
   9e. Los widgets propios de Elementor

   Contacto, las legales y el blog no se maquetaron con las piezas de Pespas:
   usan los widgets de serie de Elementor. Vestirlos aquí los arregla los tres a
   la vez, y también cualquier página que se cree mañana.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .elementor-button {
  border-radius: 0; font-family: var(--pes-fuente); font-weight: 700;
}
/* También sin `!important`: los campos de un formulario de Elementor se configuran desde el panel
   (borde, radio, relleno, color) y ese ajuste debe ganar. */
body.ctop-maqueta--pespas .elementor-field-textual,
body.ctop-maqueta--pespas .elementor-field-group .elementor-field {
  border: var(--pes-filete); border-radius: 0;
  font-family: var(--pes-fuente); font-size: 15px; padding: 13px 14px;
  background: #fff; color: var(--uv-ink);
}
body.ctop-maqueta--pespas .elementor-field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pes-gris);
}
/* **SIN `!important`, y es una decisión, no un descuido.**
 *
 * Estas reglas son el VALOR POR DEFECTO de los widgets de Elementor en esta maquetación, y tienen
 * que perder contra lo que alguien elija en el editor. La especificidad está calculada para eso:
 *
 *   Elementor de serie         `.elementor-widget-heading .elementor-heading-title`      (0,2,0)
 *   esta hoja                  `body.… .elementor-widget-heading .elementor-heading-title` (0,3,1)
 *   ajuste de UN widget        `.elementor-3701 .elementor-element.elementor-element-x …` (0,4,0)
 *
 * O sea: gana al de serie —que es lo que se quiere, el sistema por defecto— y pierde contra el
 * ajuste concreto, que es lo que se quiere también: cambiar un color o una tipografía desde el
 * panel tiene que funcionar sin tocar código.
 *
 * Hubo una versión con `!important` y estaba mal: hacía imposible editar nada desde Elementor. Lo
 * que aquello tapaba no era un problema de CSS sino de DATOS —ajustes viejos (Montserrat, índigo
 * `#1E1B4B`) guardados dentro de las páginas— y eso se limpia en los datos, con
 * `_claude_build/20-paginas/48_pespas_estilos_legados.php`, no peleando desde aquí.
 *
 * Los `!important` que quedan en esta hoja son para pantallas de HivePress, del tema y de
 * CookieYes, que NO se pueden editar desde Elementor y donde el módulo base sí fuerza el valor.
 */
body.ctop-maqueta--pespas .elementor-widget-heading .elementor-heading-title,
body.ctop-maqueta--pespas .elementor-widget-text-editor,
body.ctop-maqueta--pespas .elementor-widget-text-editor p,
body.ctop-maqueta--pespas .elementor-widget-icon-list .elementor-icon-list-text,
body.ctop-maqueta--pespas .elementor-button .elementor-button-text {
  font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .elementor-heading-title { letter-spacing: -0.025em; }
body.ctop-maqueta--pespas .elementor-widget-text-editor,
body.ctop-maqueta--pespas .elementor-widget-text-editor p,
body.ctop-maqueta--pespas .elementor-widget-text-editor li { color: var(--pes-gris-os); }

/* Los iconos de lista y de caja que quedaron en azul de HivePress. */
body.ctop-maqueta--pespas .elementor-icon-list-icon i,
body.ctop-maqueta--pespas .elementor-icon-box-icon i { color: var(--uv-amber); }

/* ---------------------------------------------------------------------------
   9g. La ficha: las tarjetas que `ficha.css` pinta con su propia forma

   `listing/ficha.css:39-49` declara fondo, borde `#E9EEF5` y radio 16 sobre
   `body.ctop-ficha .hp-page__content > .hp-section`, `> .hp-listing__images`,
   `.ctop-card`… — dos clases y un combinador de hijo. Las reglas genéricas de
   esta hoja (`body.ctop-maqueta--pespas :where(…)`) pierden contra eso, y por
   eso la ficha seguía con esquinas redondeadas mientras el resto ya no.

   Se repite la MISMA forma de selector añadiendo la clase de maquetación:
   `body.ctop-maqueta--pespas.ctop-ficha` son tres clases y gana sin `!important`.
   --------------------------------------------------------------------------- */

/* **La ficha conserva el radio y la sombra suave. Es una excepción pedida y consciente.**

   El sistema Pespas dice «sin esquinas redondeadas y sin sombras difusas», y el resto del sitio lo
   cumple. Aquí no: la ficha del anuncio se aplanó con el rediseño y el usuario pidió expresamente
   recuperar su aspecto anterior. Se recupera solo la FORMA —radio 14 y una sombra apenas
   perceptible—, no los colores: el filete sigue siendo `--pes-linea` y la tipografía, Archivo. Así
   la ficha se reconoce como antes sin volver al azul.

   Los tokens son propios (`--pes-ficha-*`) para que se vea de un vistazo que esto es una excepción
   local y no un cambio del sistema: si algún día se quiere alinear con el resto, se ponen a 0 aquí
   y no hay que buscar por toda la hoja. */
body.ctop-maqueta--pespas.ctop-ficha {
  --pes-ficha-radio:  14px;
  --pes-ficha-sombra: 0 2px 10px rgba(24, 24, 27, .05);
}

body.ctop-maqueta--pespas.ctop-ficha .ctop-card,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-section,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__images,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__description,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__actions,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__actions--primary,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__description,
body.ctop-maqueta--pespas.ctop-ficha .hp-section {
  border-color: var(--pes-linea);
}


body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-section > .hp-section__title,
body.ctop-maqueta--pespas.ctop-ficha .hp-section__title {
  font-family: var(--pes-fuente); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pes-gris);
  border-bottom: 1px solid var(--uv-ink); padding-bottom: 10px;
}

body.ctop-maqueta--pespas.ctop-ficha .ctop-migas__sep { color: var(--pes-gris-cl); }
body.ctop-maqueta--pespas.ctop-ficha .ctop-ficha-meta__item { color: var(--pes-gris); }
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--cabecera .hp-page__topbar { border-top-color: var(--pes-linea); }
body.ctop-maqueta--pespas.ctop-ficha .ctop-sin-resenas {
  border-radius: 0; border-color: var(--pes-linea); background: var(--pes-papel);
}
body.ctop-maqueta--pespas.ctop-ficha .ctop-sin-resenas p,
body.ctop-maqueta--pespas.ctop-ficha .ctop-sin-resenas strong { color: var(--pes-tinta-2); }

/* Los chips de zona tienen variante por nivel (municipio / provincia / comunidad) y cada una traía
   su azul. Aquí los tres niveles comparten forma; lo que los distingue es el texto, que ya lo dice. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip,
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip--municipio,
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip--provincia,
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip--comunidad,
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip--resto {
  background: #fff; border: var(--pes-filete); border-radius: 0; color: var(--uv-ink);
}
body.ctop-maqueta--pespas.ctop-ficha .ctop-chip:hover { border-color: var(--uv-ink); color: var(--uv-amber); }

/* «Escribir una valoración» y «Informar del anuncio» los pinta `ficha.css` con dos clases
   (`body.ctop-ficha .hp-listing__action--review`), así que hay que igualar la forma. */
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--review,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--report,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--review i,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--report i { color: var(--uv-ink); }
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--review:hover,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__action--report:hover { color: var(--uv-amber); }

/* La tarjeta del profesional al pie de la ficha comparte forma con las demás. */
body.ctop-maqueta--pespas.ctop-ficha .hp-vendor--view-block {
  border-radius: 0; border-color: var(--pes-linea); box-shadow: none;
}

/* La fecha dentro de la fila de metadatos: `ficha.css` la declara con tres clases. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-row-meta .hp-listing__date,
body.ctop-maqueta--pespas.ctop-ficha .hp-vendor__date {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}

/* Los iconos de sección de la ficha («zona de cobertura», «enviar un mensaje»): eran azules. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-card__titulo i,
body.ctop-maqueta--pespas.ctop-ficha .uv-lead-title i,
body.ctop-maqueta--pespas.ctop-ficha .uv-extra-title i,
body.ctop-maqueta--pespas.ctop-ficha .hp-section__title i { color: var(--uv-amber); }

/* Fechas y metadatos sueltos que seguían en Inter. */
body.ctop-maqueta--pespas .hp-meta,
body.ctop-maqueta--pespas .hp-listing__date,
body.ctop-maqueta--pespas .hp-vendor__date { font-family: var(--pes-fuente); color: var(--pes-gris); }

/* Tom Select pinta su propio control con su color de texto. */
body.ctop-maqueta--pespas .ts-control,
body.ctop-maqueta--pespas .ts-control input,
body.ctop-maqueta--pespas .ts-dropdown { color: var(--uv-ink) !important; }

/* ---------------------------------------------------------------------------
   9j. Lo que quedaba de la ficha: los bloques que inyectan otros módulos

   La sección 9g vistió las TARJETAS que monta `ficha.php`. Dentro de ellas van bloques que meten
   `listing-extra.php` y `schedule.php`, con CSS propio y con su forma de siempre: «por qué
   elegirnos» sobre un degradado azul, el horario con filete azulado y rayado a dos tonos, el FAQ
   con radio 12, y los iconos en `#2563EB`. Es otra vez el complemento de la lista — lo que nadie
   enumeró.

   **`ficha.css` tiene selectores más profundos que esta hoja**, así que donde compita hay que
   repetir su forma con `.ctop-maqueta--pespas.ctop-ficha` (0,3,1) en vez de añadir `!important`:
   con `!important` se gana igual, pero se oculta lo cerca que están las dos reglas y la siguiente
   persona no sabe cuál manda.
   --------------------------------------------------------------------------- */

/* «Por qué elegirnos»: el degradado azul pasa a papel con un filete lateral ámbar. */
body.ctop-maqueta--pespas .uv-why {
  background: var(--pes-papel); border: var(--pes-filete);
  border-left: 3px solid var(--uv-amber); border-radius: 0;
  color: var(--pes-gris-os); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .uv-why i { color: var(--uv-amber); }

body.ctop-maqueta--pespas .uv-extra-block {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}

/* Baremo de precios: el importe es una CIFRA, así que va en Archivo Black como los demás números
   del sistema, y la fila se separa con filete. */
body.ctop-maqueta--pespas .ctop-precios__tabla tr + tr th,
body.ctop-maqueta--pespas .ctop-precios__tabla tr + tr td { border-top: var(--pes-filete); }
body.ctop-maqueta--pespas .ctop-precio__concepto {
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-precio__nota { color: var(--pes-gris); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .ctop-precio__importe {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
  font-size: 16px; color: var(--uv-ink);
}
/* La última celda ya trae un filete inferior del tema; con el `border-top` del aviso salían DOS
   líneas juntas. Se cierra la tabla por abajo y el aviso va sin borde propio. */
body.ctop-maqueta--pespas .ctop-precios__tabla tr:last-child th,
body.ctop-maqueta--pespas .ctop-precios__tabla tr:last-child td { border-bottom: 0; }
body.ctop-maqueta--pespas .ctop-precios__aviso {
  color: var(--pes-gris); font-family: var(--pes-fuente);
  border-top: var(--pes-filete); padding-top: 12px; margin-top: 12px;
}
body.ctop-maqueta--pespas .ctop-precios .uv-extra-title i { color: var(--uv-amber); }

/* FAQ: acordeón sin radio, con la flecha en ámbar. */
body.ctop-maqueta--pespas .uv-faq-item { border: var(--pes-filete); border-radius: 0; }
body.ctop-maqueta--pespas .uv-faq-q { font-family: var(--pes-fuente); color: var(--uv-ink); }
body.ctop-maqueta--pespas .uv-faq-q i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .uv-faq-a { font-family: var(--pes-fuente); color: var(--pes-gris-os); }

/* Horario. `ficha.css:209-217` llega a (0,2,1); aquí se iguala la forma y se sube un escalón. */
body.ctop-maqueta--pespas .uv-sched-view,
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-view {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-wrap { border-radius: 0; }
body.ctop-maqueta--pespas .uv-sched-title i,
body.ctop-maqueta--pespas .uv-sched-view i { color: var(--uv-amber); }
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table th,
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table td {
  font-family: var(--pes-fuente); font-weight: 600; background: none;
  border-bottom: var(--pes-filete);
}
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table th { color: var(--uv-ink); font-weight: 700; }
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table td { color: var(--pes-gris-os); }
/* El rayado de dos tonos desaparece: en este sistema las filas se separan con un filete. */
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table tr:nth-child(odd) th,
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table tr:nth-child(odd) td { background: none; }
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table tr:last-child th,
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-table tr:last-child td { border-bottom: 0; }
/* Abierto/cerrado sí conservan su lectura: es estado, no marca. Abierto pasa a verde porque el
   azul ya no significa nada en este sistema y «abierto» es una buena noticia. */
body.ctop-maqueta--pespas .uv-open   { color: var(--uv-green); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .uv-closed { color: var(--pes-gris-cl); font-family: var(--pes-fuente); }

/* Migas, metadatos y distintivos de la cabecera de la ficha. */
body.ctop-maqueta--pespas .ctop-migas,
body.ctop-maqueta--pespas .ctop-ficha-meta__item,
body.ctop-maqueta--pespas .ctop-pill,
body.ctop-maqueta--pespas .hp-listing__attribute--dominio,
body.ctop-maqueta--pespas .hp-listing__description,
body.ctop-maqueta--pespas .hp-listing__action { font-family: var(--pes-fuente); }

/* Reseñas publicadas en la ficha. */
body.ctop-maqueta--pespas .hp-review {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}
body.ctop-maqueta--pespas .hp-review__author,
body.ctop-maqueta--pespas .hp-review__author-name {
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 800;
}
body.ctop-maqueta--pespas .hp-review__date,
body.ctop-maqueta--pespas .hp-vendor__registered-date { color: var(--pes-gris); }
body.ctop-maqueta--pespas .hp-review__text { color: var(--pes-gris-os); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .hp-vendor__name,
body.ctop-maqueta--pespas .hp-vendor__name a {
  font-family: var(--pes-fuente); font-weight: 800; color: var(--uv-ink);
}

/* Tarjetas de «Mis reseñas», que son de otra clase y arrastraban la misma forma. */
body.ctop-maqueta--pespas .ctop-rev-card {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}
body.ctop-maqueta--pespas .ctop-rev-head a {
  font-family: var(--pes-fuente); font-weight: 800; color: var(--uv-ink);
}

/* ---------- Donde `ficha.css` va más hondo ----------

   Estas cuatro reglas repiten la forma EXACTA de la suya con una clase más. Se midieron una a una
   con el depurador de estilos, no se estimaron: cada comentario dice contra qué compite. */

/* vs `body.ctop-ficha .ctop-card--cabecera .uv-why` (0,3,0).
   También el FONDO: seguía en `#EFF6FF` con filete azul, el único azul que quedaba en la ficha. No
   lo detectaba el barrido porque ese tono no estaba en su lista de colores antiguos — se vio en la
   captura. La lista del detector ya lo incluye. */
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--cabecera .uv-why {
  font-family: var(--pes-fuente);
  background: var(--pes-papel);
  border: var(--pes-filete); border-left: 3px solid var(--uv-amber);
}
body.ctop-maqueta--pespas.ctop-ficha .ctop-card--cabecera .uv-why i { color: var(--uv-amber); }

/* vs `body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name` (0,4,0) */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name a {
  font-family: var(--pes-fuente); font-weight: 800; color: var(--uv-ink);
}

/* vs `body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__date` (0,4,0) */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__date {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}

/* vs `body.ctop-ficha .hp-page__content > .hp-section .hp-review` (0,4,0) */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-section .hp-review {
  background: #fff; border: var(--pes-filete); border-radius: 0; box-shadow: none;
}

/* vs `body.ctop-ficha .hp-page__content > .hp-listing__description` (0,3,0) */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__description {
  font-family: var(--pes-fuente); color: var(--pes-gris-os);
}

/* La tabla del horario lleva su `font:` en el ELEMENTO, no en las celdas: poner la familia solo en
   `th`/`td` dejaba la tabla en Inter y las celdas en Archivo, que se nota en el interlineado. */
body.ctop-maqueta--pespas .uv-sched-table { font-family: var(--pes-fuente); }

/* Las casillas del filtro del buscador («Abierto ahora», «Solo verificados»), que llevan su tipo
   desde `.hp-form--listing-filter .hp-field--checkbox` (0,2,0). */
body.ctop-maqueta--pespas .hp-form--listing-filter .hp-field--checkbox {
  font-family: var(--pes-fuente); color: var(--pes-gris-os);
}

/* Las pestañas «Detalles» / «Valoraciones» de la ficha son enlaces sin clase. */
body.ctop-maqueta--pespas.ctop-ficha .hp-tabs a,
body.ctop-maqueta--pespas.ctop-ficha .hp-menu a { font-family: var(--pes-fuente); }

/* ---------------------------------------------------------------------------
   9h. Los últimos restos

   Todos son literales `#0F172A`, `#1E3A8A`, `#64748B` o `#2563EB` escritos a
   mano en el módulo de cada componente. No hay una regla común que los cubra:
   son cinco sitios distintos, así que se nombran los cinco. `!important` donde
   el módulo lo usa; especificidad donde basta.
   --------------------------------------------------------------------------- */

/* Migas: el último tramo es un `<span>` sin clase, y `ficha.css` lo pinta con dos clases más la
   del body, así que aquí hace falta añadir `.ctop-ficha` para empatar y ganar por orden. */
body.ctop-maqueta--pespas .ctop-migas,
body.ctop-maqueta--pespas .ctop-migas span,
body.ctop-maqueta--pespas.ctop-ficha .ctop-migas span { color: var(--pes-gris); }

/* Los chips de zona traen el azul marino con más peso del que parecía. */
body.ctop-maqueta--pespas .ctop-chips .ctop-chip,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip--municipio,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip--provincia,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip--comunidad,
body.ctop-maqueta--pespas .ctop-chips .ctop-chip--resto {
  color: var(--uv-ink) !important; background: #fff !important;
  border: var(--pes-filete) !important; border-radius: 0 !important;
}

/* El consentimiento del formulario de contacto de la ficha. */
body.ctop-maqueta--pespas .uv-lead-consent,
body.ctop-maqueta--pespas .uv-lead-consent span { color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-lead-consent a { color: var(--uv-ink); text-decoration: underline; }
body.ctop-maqueta--pespas .uv-lead-consent a:hover { color: var(--uv-amber); }

/* Seguir el anuncio. */
body.ctop-maqueta--pespas .ctop-follow,
body.ctop-maqueta--pespas .ctop-follow__txt { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-follow:hover,
body.ctop-maqueta--pespas .ctop-follow:hover .ctop-follow__txt { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-follow-box__pie { color: var(--pes-gris); }

/* El nombre del profesional en su tarjeta. */
/* La última: `ficha.css` la declara con cuatro clases
   (`body.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name a`), así que hay que llegar ahí.
   Es la más profunda de toda la hoja y por eso va comentada: si alguien la simplifica, vuelve el
   `#0F172A`. */
body.ctop-maqueta--pespas .hp-vendor__name,
body.ctop-maqueta--pespas .hp-vendor__name a,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor .hp-vendor__name a {
  color: var(--uv-ink); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .hp-vendor__name a:hover { color: var(--uv-amber); }

/* La categoría del anuncio y la fecha de alta del profesional seguían en Inter. */
body.ctop-maqueta--pespas .hp-listing__categories a,
body.ctop-maqueta--pespas .hp-vendor__registered-date,
body.ctop-maqueta--pespas .hp-vendor__date { font-family: var(--pes-fuente) !important; }

/* En las landings, lo resaltado del texto. */
body.ctop-maqueta--pespas .ctop-landing-lead strong,
body.ctop-maqueta--pespas .ctop-landing-texto strong { color: var(--uv-ink); }

/* El velo y los enlaces del panel móvil.

   **Fuera de la consulta de medios a propósito.** `mobile-menu.js` construye el panel en TODOS los
   anchos y lo esconde con CSS, así que sus colores tienen que estar puestos siempre: si solo se
   declaran dentro de `max-width:767`, en un escritorio el panel existe en el DOM con los colores
   viejos y aparecería en cuanto alguien lo abriera con el teclado o cambiara el tamaño de la
   ventana sin recargar. */
body.ctop-maqueta--pespas .uv-mpop { background: rgba(0, 0, 0, .55); }
body.ctop-maqueta--pespas .uv-mpop-nav a { color: var(--uv-ink); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .uv-mpop-nav a:hover,
body.ctop-maqueta--pespas .uv-mpop-nav a:focus { color: var(--uv-amber); }

/* El teléfono de la ficha viene en Montserrat desde `.hp-listing--view-page …`. */
body.ctop-maqueta--pespas .hp-listing--view-page .hp-listing__attribute--telefono {
  font-family: var(--pes-fuente); font-weight: 700;
}

/* El pie: `base.css:26` lo pinta marino con `[data-elementor-type="footer"]`, y el CSS del kit
   se imprime antes que el del tema, así que la corrección tiene que vivir aquí. */
body.ctop-maqueta--pespas [data-elementor-type="footer"] { background-color: #000; }

/* ---------------------------------------------------------------------------
   9i. Los azules de la cuenta y del alta

   Todo lo de aquí sale de auditar el DOM ya autenticado, no de mirar pantallas: se midió el color
   calculado de cada elemento visible de `/submit-listing/` y de las siete páginas de `/account/`,
   y esto es lo que seguía pintando con la paleta anterior.

   El patrón que se repite —y que conviene reconocer— es que la maqueta **repintó el hijo y se dejó
   el padre**: `.ctop-fs__icono` tenía el color del icono cambiado pero conservaba su caja azul
   pálido, y `.ctop-pasos__p` tenía fondo y borde neutralizados pero no el `color`, así que el paso
   activo seguía escribiendo en índigo. Un componente no está vestido hasta que no queda ninguna de
   sus propiedades decidida por el módulo base.
   --------------------------------------------------------------------------- */

/* ---------- El alta ---------- */

/* El icono del fieldset: caja BLANCA con filete, no la pastilla azul de `form-layout.css:108`. */
body.ctop-maqueta--pespas .ctop-fs__icono {
  background: #fff; border: var(--pes-filete); border-radius: 0;
  color: var(--uv-amber); width: 32px; height: 32px; font-size: 14px;
}

/* Los pasos: faltaba el `color`, que es lo que dejaba el índigo del módulo base. */
body.ctop-maqueta--pespas .ctop-pasos__p { color: var(--pes-gris); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .ctop-pasos__p:hover { background: none; color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-pasos__p.is-ahora { background: none; color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-pasos__p.is-mal   { background: none; color: var(--uv-red); }
body.ctop-maqueta--pespas .ctop-pasos__p.is-mal .ctop-pasos__t { color: var(--uv-red); }

/* La caja del formulario, que seguía con radio 22 y filete azulado. */
body.ctop-maqueta--pespas form.hp-form--listing-submit,
body.ctop-maqueta--pespas form.hp-form--listing-update {
  border: var(--pes-filete); border-radius: 0; box-shadow: none; background: #fff;
}

/* Los `button` de campo de HivePress («Configurar reservas», «Buscar en Google»…). Llevan
   `!important` solo en el radio, porque `forms.css:31` lo fuerza; el color no hace falta forzarlo. */
body.ctop-maqueta--pespas button.hp-field--button,
body.ctop-maqueta--pespas .hp-field--button > button {
  border-radius: 0 !important;
  background: #fff; border: 1px solid var(--uv-ink); color: var(--uv-ink);
  font-family: var(--pes-fuente); font-weight: 600;
}
body.ctop-maqueta--pespas button.hp-field--button:hover,
body.ctop-maqueta--pespas .hp-field--button > button:hover {
  background: var(--uv-ink); color: #fff;
}

/* «Seleccionar una imagen».

   `forms.css:14` lo pinta azul con `!important` desde TRES selectores, y la maqueta solo cubría
   dos: el que faltaba, `[data-component="file-upload"] button`, es justo el que alcanza al botón
   real del alta. Es el mismo componente de más arriba; aquí se completa la lista. */
body.ctop-maqueta--pespas [data-component="file-upload"] button,
body.ctop-maqueta--pespas .hp-field--attachment-upload button,
body.ctop-maqueta--pespas .hp-field--attachment-upload .hp-field__button {
  background: #fff !important; border: 1px solid var(--uv-ink) !important;
  border-radius: 0 !important; color: var(--uv-ink) !important;
  font-family: var(--pes-fuente) !important; font-weight: 600 !important;
}
body.ctop-maqueta--pespas [data-component="file-upload"] button:hover,
body.ctop-maqueta--pespas .hp-field--attachment-upload button:hover {
  background: var(--uv-ink) !important; color: #fff !important;
}

/* «Guardar los cambios» mientras quedan pasos por delante.

   `form-layout.css:80` lo deja azul sobre blanco con `!important` desde
   `.ctop-pasos__pie:not(.is-final) .hp-form__button` — (0,3,0), porque `:not()` cuenta lo que lleva
   dentro. Para devolverlo hay que subir por encima y responder en el mismo registro. */
body.ctop-maqueta--pespas .ctop-pasos__pie:not(.is-final) .hp-form__button,
body.ctop-maqueta--pespas .ctop-pasos__pie:not(.is-final) .hp-form__button * {
  background: #fff !important; color: var(--uv-ink) !important;
  border: 1px solid var(--uv-ink) !important; border-radius: 0 !important;
  font-family: var(--pes-fuente) !important;
}
body.ctop-maqueta--pespas .ctop-pasos__pie:not(.is-final) .hp-form__button * {
  background: none !important; border: 0 !important;
}
body.ctop-maqueta--pespas .ctop-pasos__pie:not(.is-final) .hp-form__button:hover {
  background: var(--uv-ink) !important; color: #fff !important;
}
body.ctop-maqueta--pespas .ctop-pasos__pie:not(.is-final) .hp-form__button:hover * {
  color: #fff !important;
}

/* Textos de ayuda y notas al pie, que conservaban Inter y el gris azulado. */
body.ctop-maqueta--pespas .hp-field__description,
body.ctop-maqueta--pespas .ctop-chars,
body.ctop-maqueta--pespas .ctop-fs small,
body.ctop-maqueta--pespas .hp-form small {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}
/* El contador sí conserva sus dos avisos: no son marca, son estado del campo. */
body.ctop-maqueta--pespas .ctop-chars.is-corto { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-chars.is-largo { color: var(--uv-red); }

/* La barra de TinyMCE de la descripción: sus botones venían en azul de Elementor. */
body.ctop-maqueta--pespas .mce-toolbar .mce-btn button,
body.ctop-maqueta--pespas .mce-toolbar .mce-ico,
body.ctop-maqueta--pespas .mce-toolbar .mce-txt { color: var(--pes-tinta-2); }
body.ctop-maqueta--pespas .mce-toolbar .mce-btn:hover .mce-ico,
body.ctop-maqueta--pespas .mce-toolbar .mce-btn:hover .mce-txt { color: var(--uv-ink); }
body.ctop-maqueta--pespas .wp-editor-container,
body.ctop-maqueta--pespas .mce-panel { border-color: var(--pes-linea); border-radius: 0; }

/* ---------- Las tablas de la cuenta ---------- */

/* `leads.css:46` da a la tabla filete azulado, radio 12 e Inter con la forma abreviada `font:`,
   que gana a la regla global de familia (que es `:where()`, de especificidad cero). Por eso hay que
   volver a nombrar la familia aquí. */
body.ctop-maqueta--pespas .uv-table,
body.ctop-maqueta--pespas .hp-table,
body.ctop-maqueta--pespas .uv-table thead,
body.ctop-maqueta--pespas .uv-table tbody,
body.ctop-maqueta--pespas .uv-table tr {
  font-family: var(--pes-fuente);
  border: 0; border-radius: 0; background: none; overflow: visible;
}

/* Más aire: la tabla venía con 10px y a catorce columnas de ancho se leía apretada. */
body.ctop-maqueta--pespas .uv-table th,
body.ctop-maqueta--pespas .hp-table th { padding: 0 16px 12px 0; }
/* Tres cosas que había que quitar de la celda, y ninguna venía de nuestros módulos:

   · `border-top`, que lo pone `leads.css:48` — dejar solo el de abajo pintaba DOS líneas por fila;
   · `border-left`/`border-right` en `rgba(128,128,128,.5)` y un fondo `rgba(128,128,128,.07)`, que
     son del TEMA. Eso es lo que convertía la tabla en una rejilla con rayado de dos tonos: nada de
     eso está en el diseño, que separa las filas con un filete y nada más. Se veía en la captura
     antes que en ningún selector — por eso hay que mirar las pantallas además de medirlas. */
/* **A TODAS las tablas, no a una lista de ellas.** La primera versión nombraba `.uv-table` y
   `.hp-table`, y en cuanto apareció una tabla nueva —el baremo de precios— volvió a salir la
   rejilla gris con rayado a dos tonos del tema. Es el mismo error de fondo que la sección 2a: vestir
   los componentes que alguien enumeró en vez del sistema. Cada tabla decide luego cómo separa sus
   filas; lo que se quita aquí es lo que ninguna quiere. */
body.ctop-maqueta--pespas .hp-page table td,
body.ctop-maqueta--pespas .hp-page table th,
body.ctop-maqueta--pespas .uv-table td,
body.ctop-maqueta--pespas .uv-table th,
body.ctop-maqueta--pespas .hp-table td,
body.ctop-maqueta--pespas .hp-table th {
  border-top: 0; border-left: 0; border-right: 0; background: none;
}
body.ctop-maqueta--pespas .uv-table td,
body.ctop-maqueta--pespas .hp-table td {
  padding: 18px 16px 18px 0; vertical-align: middle;
}
/* Las celdas de las tablas de HivePress traen Inter desde sus propios módulos.
   El `:not()` no es cosmético: sin él esta regla le pone Archivo a los `<i>` de Font Awesome que
   HivePress mete en la columna de estado y en la de acciones, y salen como el cuadro vacío del
   glifo que falta. Ver «una regla de familia nunca debe alcanzar a un icono», más abajo. */
body.ctop-maqueta--pespas .hp-table td,
body.ctop-maqueta--pespas .hp-table td *:not([class*="fa-"]):not([class*="dashicons"]) {
  font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .uv-table th:last-child,
body.ctop-maqueta--pespas .uv-table td:last-child,
body.ctop-maqueta--pespas .hp-table th:last-child,
body.ctop-maqueta--pespas .hp-table td:last-child { padding-right: 0; }

/* Que una tabla ancha se pueda arrastrar en vez de romper la página. */
body.ctop-maqueta--pespas .uv-table-wrap { overflow-x: auto; }

/* Las etiquetas de tipo de contacto: cuadradas, en papel con filete, y el icono en ámbar. */
body.ctop-maqueta--pespas .uv-lead-tipo {
  border-radius: 0; background: var(--pes-papel); border: var(--pes-filete);
  color: var(--pes-tinta-2); font-family: var(--pes-fuente); font-size: 12px;
}
body.ctop-maqueta--pespas .uv-lead-tipo i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .uv-lead-tipo--wa i { color: var(--uv-green); }
body.ctop-maqueta--pespas .uv-lead-anon { color: var(--pes-gris-cl); }

/* ---------- El aviso del periodo gratuito ---------- */

body.ctop-maqueta--pespas .ctop-trial {
  border-radius: 0; box-shadow: none; border: var(--pes-filete); background: #fff;
}
body.ctop-maqueta--pespas .ctop-trial__titulo {
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 800;
}
body.ctop-maqueta--pespas .ctop-trial__texto { color: var(--pes-gris-os); }
body.ctop-maqueta--pespas .ctop-trial__cta {
  background: var(--uv-ink); color: #fff !important; border-radius: 0;
  font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-trial__cta:hover {
  background: var(--uv-amber); color: var(--uv-ink) !important;
}
/* Los estados conservan su color: son semáforo, no marca. Solo pierden la forma. */
body.ctop-maqueta--pespas .ctop-trial--aviso   { border-left: 3px solid var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-trial--urgente { border-left: 3px solid var(--uv-red); }
body.ctop-maqueta--pespas .ctop-trial--pagado  { border-left: 3px solid var(--uv-green); }
body.ctop-maqueta--pespas .ctop-trial--vencido { background: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-trial--vencido .ctop-trial__titulo { color: #fff; }
body.ctop-maqueta--pespas .ctop-trial--vencido .ctop-trial__texto  { color: var(--pes-gris-cl); }

/* ---------- El aviso de «no te cobramos nada todavía» ---------- */

/* Conserva el verde en un filete lateral —es una buena noticia y así se lee de un vistazo— pero
   deja de ser una caja verde con esquinas redondeadas. */
body.ctop-maqueta--pespas .ctop-free-notice {
  background: #fff; border: var(--pes-filete); border-left: 3px solid var(--uv-green);
  border-radius: 0; color: var(--pes-gris-os);
}
body.ctop-maqueta--pespas .ctop-free-notice i { color: var(--uv-green); }
body.ctop-maqueta--pespas .ctop-free-notice strong { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-free-notice--ok { background: #fff; }

/* ---------- Avisos de verificación ---------- */

body.ctop-maqueta--pespas .uv-verify-reminder {
  border-radius: 0; border: var(--pes-filete); background: #fff; box-shadow: none;
}
body.ctop-maqueta--pespas .uv-verify-reminder-cta {
  background: var(--uv-ink); color: #fff !important; border-radius: 0;
  font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .uv-verify-reminder-cta:hover {
  background: var(--uv-amber); color: var(--uv-ink) !important;
}

/* ---------- Cambiar de tipo de cuenta (`/account/settings/`) ---------- */

body.ctop-maqueta--pespas .ctop-rol {
  border: var(--pes-filete); border-radius: 0; box-shadow: none; background: #fff;
}
body.ctop-maqueta--pespas .ctop-rol__titulo {
  color: var(--uv-ink); font-family: var(--pes-fuente); font-weight: 800;
}
body.ctop-maqueta--pespas .ctop-rol__actual {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0;
  color: var(--pes-gris-os);
}
body.ctop-maqueta--pespas .ctop-rol__actual i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-rol__actual strong { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-rol__texto { color: var(--pes-gris-os); }
body.ctop-maqueta--pespas .ctop-rol__aviso {
  border: var(--pes-filete); border-radius: 0; background: var(--pes-papel);
  color: var(--pes-gris-os); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-rol__aviso i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-rol__aviso strong { color: var(--uv-ink); }
/* El aviso «todo en orden» conserva el verde: es estado, no marca. */
body.ctop-maqueta--pespas .ctop-rol__aviso--ok { border-left: 3px solid var(--uv-green); }

/* ---------- «Siguiendo» ---------- */

body.ctop-maqueta--pespas .ctop-follows h2 { color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-follows h2 > i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-follows__n {
  background: var(--pes-papel); border: var(--pes-filete); border-radius: 0;
  color: var(--pes-gris-os); font-family: var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-follows__vacio {
  border: var(--pes-filete); border-radius: 0; background: #fff;
}
body.ctop-maqueta--pespas .ctop-follows__vacio > i { color: var(--pes-linea-2); }
body.ctop-maqueta--pespas .ctop-follows__vacio-t { color: var(--uv-ink); font-family: var(--pes-fuente); }
body.ctop-maqueta--pespas .ctop-follows__vacio-d { color: var(--pes-gris); }
/* `follows.css:114` ya pelea contra `.elementor-kit-4 a` (0,2,0), así que aquí hay que igualar el
   peso: clase + clase + elemento. No es capricho — sin el `a` la regla pierde y el botón se queda
   azul sobre azul, que es exactamente como este componente llegó a existir. */
body.ctop-maqueta--pespas .ctop-follows a.ctop-follows__cta {
  background: var(--uv-ink); color: #fff !important; border-radius: 0;
  font-family: var(--pes-fuente); font-weight: 700;
}
body.ctop-maqueta--pespas .ctop-follows a.ctop-follows__cta:hover {
  background: var(--uv-amber); color: var(--uv-ink) !important;
}

/* ---------------------------------------------------------------------------
   9f. Los desbordes

   Cuatro medidos, cuatro de causa distinta.
   --------------------------------------------------------------------------- */

/* **La rejilla de HivePress, que se sale 16px de su columna.** `.hp-row` lleva
   `margin:0 -16px` y sus columnas lo compensan con `padding:0 16px`; es el
   contrato que CLAUDE.md pide no romper por un solo lado. La maqueta lo había
   neutralizado SOLO en el `> .hp-row` del buscador y a partir de 768px, así que
   seguía saliéndose en móvil y en la sección de relacionados de la ficha.
   Se anulan los dos lados a la vez, que es la única forma correcta. */
body.ctop-maqueta--pespas .hp-page .hp-row { margin-left: 0; margin-right: 0; }
/* El `:not(.hp-page__content):not(.hp-page__sidebar)` deja fuera las DOS columnas de la ficha.
   Anulándoles el padding se quedaban pegadas —0px entre las tarjetas del anuncio y las de
   contacto— y ahí sí hace falta canal; la sección 9k se lo devuelve, ensanchado a 20px por lado.
   El resto de columnas de la rejilla siguen sin gutter, que es lo que esta regla vino a arreglar. */
body.ctop-maqueta--pespas .hp-page .hp-row > [class*="hp-col-"]:not(.hp-page__content):not(.hp-page__sidebar) {
  padding-left: 0; padding-right: 0;
}
body.ctop-maqueta--pespas .hp-page .hp-grid { margin-left: 0; margin-right: 0; }
body.ctop-maqueta--pespas .hp-page .hp-grid > .hp-grid__item { padding-left: 0; padding-right: 0; }

/* Los relacionados de la ficha usan la misma rejilla dentro de `page_footer`. */
body.ctop-maqueta--pespas .hp-page__footer .hp-row,
body.ctop-maqueta--pespas .hp-page__footer .hp-grid { margin-left: 0; margin-right: 0; }

/* El menú «Servicios» del pie: `columns:2` reparte el ancho del CONTENIDO, no
   el de la caja, así que con enlaces largos se salía 30px. Una rejilla de dos
   columnas sí respeta el contenedor. */
body.ctop-maqueta--pespas .uv-foot-servicios .elementor-nav-menu {
  columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px; width: 100%;
}
body.ctop-maqueta--pespas .uv-foot-servicios .elementor-nav-menu li { min-width: 0; }
body.ctop-maqueta--pespas .uv-foot-servicios .elementor-nav-menu a { overflow-wrap: anywhere; }

/* Ningún formulario de Elementor debe salirse de su caja. */
body.ctop-maqueta--pespas .elementor-form { max-width: 100%; }
body.ctop-maqueta--pespas .elementor-form .elementor-form-fields-wrapper { margin: 0; width: 100%; }
body.ctop-maqueta--pespas .elementor-form .elementor-field-group { padding-left: 0; padding-right: 0; }

/* ---------------------------------------------------------------------------
   9k. La FICHA conserva el radio y la sombra — excepción pedida y consciente

   El sistema Pespas dice «sin esquinas redondeadas y sin sombras difusas», y el resto del sitio lo
   cumple. La ficha del anuncio, no: se aplanó con el rediseño y el usuario pidió expresamente
   recuperar el aspecto que tenía. Se recupera solo la FORMA —radio 14 y una sombra apenas
   perceptible—, nunca los colores: el filete sigue siendo `--pes-linea` y la tipografía, Archivo.
   Así la ficha se reconoce como antes sin volver al azul.

   **Va al final de todas las secciones de la ficha a propósito.** Antes estaba dentro de 9g y solo
   se aplicaba a medias: 9i y 9j vienen después y vuelven a poner `border-radius: 0` en el horario y
   en las tarjetas. Con la misma especificidad manda el que va último, así que la excepción tiene
   que ir detrás de todo lo que aplana.

   Los tokens son propios para que se vea de un vistazo que esto es local: si algún día se quiere
   alinear con el resto del sistema, se ponen a `0` / `none` aquí y ya está.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas.ctop-ficha {
  --pes-ficha-radio:  14px;
  --pes-ficha-sombra: 0 2px 10px rgba(24, 24, 27, .05);
}

body.ctop-maqueta--pespas.ctop-ficha .ctop-card,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-section,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__images,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-listing__description,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__description,
body.ctop-maqueta--pespas.ctop-ficha .hp-section,
body.ctop-maqueta--pespas.ctop-ficha .uv-extra-block,
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-view,
body.ctop-maqueta--pespas.ctop-ficha .uv-why,
body.ctop-maqueta--pespas.ctop-ficha .ctop-sin-resenas,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .hp-section .hp-review,
body.ctop-maqueta--pespas.ctop-ficha .hp-review,
body.ctop-maqueta--pespas.ctop-ficha .hp-listing__actions--primary,
body.ctop-maqueta--pespas.ctop-ficha .ctop-follow-box,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor {
  border-radius: var(--pes-ficha-radio);
  box-shadow: var(--pes-ficha-sombra);
}

/* **Ritmo vertical: un solo hueco entre bloques, y ancho completo.**

   Medido en la ficha con contenido de verdad: los huecos iban de 20 a 48px según qué módulo hubiera
   inyectado cada bloque —cada uno traía su propio `margin-bottom` y ninguno sabía de los demás—, así
   que la página se leía apelmazada en unos sitios y suelta en otros sin motivo. Aquí se les da a
   todos el mismo margen desde el contenedor, en vez de ir corrigiéndolos uno a uno.

   `> *` y no una lista de clases: lo que se está fijando es el ritmo de la COLUMNA, y eso tiene que
   alcanzar también al bloque que alguien añada mañana. Es el mismo razonamiento que la sección 2a
   —vestir el sistema, no la lista— aplicado al espaciado. */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > * {
  width: 100%; max-width: 100%; margin-bottom: 28px;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > *:last-child { margin-bottom: 0; }
/* Las migas son un rótulo, no un bloque: no necesitan el mismo aire debajo. */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__content > .ctop-migas { margin-bottom: 18px; }

/* **El canal entre las dos columnas.**

   Estaban pegadas: 0px entre el borde derecho de las tarjetas del anuncio y el izquierdo de las de
   contacto, así que se leían como una sola masa. El hueco desapareció al anular los `padding`
   laterales de la rejilla de HivePress (`.hp-row` lleva `margin: 0 -16px` y sus columnas lo
   compensan con `padding: 0 16px`; aquí los dos quedaron a cero, de forma consistente pero sin
   canal).

   **El hueco va como `padding`, no como `gap`.** Las dos columnas son `flex: 0 0 66.67%` y
   `0 0 33.33%`: porcentajes fijos que ya suman 100. Un `column-gap` de 40px no cabría y empujaría
   la barra fuera de la fila. Con `box-sizing: border-box` el padding se come hacia dentro y el
   ancho total no cambia — que es justo la razón por la que la rejilla de HivePress lo hace así.

   Solo a partir de 768px: por debajo las columnas se apilan y un padding lateral solo restaría
   ancho al contenido. */
@media (min-width: 768px) {
  body.ctop-maqueta--pespas.ctop-ficha .hp-page__content { padding-right: 20px; }
  body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar { padding-left: 20px; }
}
/* Apiladas no hay canal que abrir, y el `1rem` que HivePress da a sus columnas solo restaría ancho
   al contenido. La exclusión de más abajo deja a estas dos fuera del anulado general, así que aquí
   hay que decirlo explícitamente. */
@media (max-width: 767px) {
  body.ctop-maqueta--pespas.ctop-ficha .hp-page__content,
  body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar { padding-left: 0; padding-right: 0; }
}

/* Y lo mismo en la columna de contacto, que apila cinco tarjetas.

   **Aquí no se puede contar la profundidad.** El componente `sticky` de HivePress envuelve el
   contenido de la barra (`wrapInner`), y encima de ese envoltorio hay otro: la cadena real es
   `.hp-page__sidebar > div > .inner-wrapper-sticky > tarjetas`. Un `> div > *` solo alcanzaba al
   primer envoltorio —un elemento— y las tarjetas se quedaban con el `margin: 0` que les pone
   `ficha.css`. El resultado eran huecos de 24, 16, **0** y 16px: dos tarjetas pegadas sin
   separación ninguna.

   Se nombran las tarjetas por su clase, como hace `ficha.css`, con una clase más para ganarle sin
   `!important`. Así da igual cuántos envoltorios meta el plugin de sticky mañana. */
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .ctop-card,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .ctop-reserva,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .ctop-follow-box,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .ctop-notas,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-listing__actions--primary,
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor {
  width: 100%; max-width: 100%; margin: 0 0 20px;
}
body.ctop-maqueta--pespas.ctop-ficha .hp-page__sidebar .hp-vendor:last-child {
  margin-bottom: 0;
}

/* Aire por dentro de las tarjetas que no lo traen: las que inyectan otros módulos venían con el
   padding de su hoja original, pensado para un bloque suelto y no para una tarjeta con filete. */
body.ctop-maqueta--pespas.ctop-ficha .uv-extra-block { padding: 22px 24px; }

/* Los dos últimos iconos en azul de la ficha: el del dominio (un `::before`, invisible para
   cualquier barrido que no mire pseudoelementos) y el calendario de «Pedir cita». */
body.ctop-maqueta--pespas .hp-listing__attribute--dominio::before,
body.ctop-maqueta--pespas .ctop-reserva .fa-calendar-alt,
body.ctop-maqueta--pespas .ctop-reserva h3 i { color: var(--uv-amber); }

/* El aviso de «necesitas una cuenta» del alta, y el botón «Acceder» del panel lateral.

   **Estos dos estaban FUERA del alcance de los barridos anteriores por dos motivos distintos**, y
   los dos merecen quedar anotados: el del aviso es un `::before` de Font Awesome, y el del panel
   tenía sus colores dentro de `@media (max-width: 1099px)` — correcto para la hamburguesa, pero el
   panel existe en el DOM a cualquier anchura, así que por encima de 1100 volvía al azul eléctrico.
   Un color de marca no depende del ancho de la ventana: se saca del `@media`. */
body.ctop-maqueta--pespas .uv-login-notice i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .uv-mpop-btn--acc,
body.ctop-maqueta--pespas .uv-mpop-acctoggle {
  background: #fff !important; color: var(--uv-ink) !important;
  border: 1px solid var(--uv-ink) !important; border-radius: 0;
}
body.ctop-maqueta--pespas .uv-mpop-btn--acc i,
body.ctop-maqueta--pespas .uv-mpop-acctoggle i { color: var(--uv-ink) !important; }

/* El acordeón del FAQ y la tabla del horario recortan su contenido: sin `overflow:hidden` la
   primera fila se sale por la esquina redondeada. */
body.ctop-maqueta--pespas.ctop-ficha .uv-faq-item {
  border-radius: calc(var(--pes-ficha-radio) - 4px); overflow: hidden;
}
body.ctop-maqueta--pespas.ctop-ficha .uv-sched-wrap {
  border-radius: calc(var(--pes-ficha-radio) - 4px); overflow: hidden;
}

/* ---------------------------------------------------------------------------
   9l. Nada se queda pegado al hacer scroll

   La barra lateral de HivePress es `position: sticky` (`.hp-page__sidebar`, en su propia hoja) y
   además lleva un plugin de jQuery —`sticky-sidebar`— que le envuelve el contenido en
   `.inner-wrapper-sticky` y le va escribiendo `position`, `top`, `width` y `transform` **en línea**
   mientras se hace scroll.

   En el buscador eso rompía la tablet: entre 768 y 1024 la barra va a todo el ancho y **encima** de
   los resultados, así que al pasar de ~300px de scroll se anclaba arriba y las tarjetas le pasaban
   por debajo. Medido: contenido en y=-210 con la barra clavada en y=88. Se veía como «el filtro ha
   desaparecido» o «el filtro se monta sobre los anuncios», que son la misma cosa.

   Se deja todo en flujo normal. **El `!important` es obligatorio aquí**, no una comodidad: el
   plugin escribe estilos en línea, y contra un estilo en línea no gana ninguna especificidad. Se
   limita a las cuatro propiedades que el plugin toca, para no desactivar nada más. */
body.ctop-maqueta--pespas .hp-page__sidebar,
body.ctop-maqueta--pespas .hp-page__sidebar .inner-wrapper-sticky {
  position: static !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
}

/* ---------------------------------------------------------------------------
   10. Tom Select, allá donde salga
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .ts-control {
  border: var(--pes-filete) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 11px 14px !important;
  font: 400 15px var(--pes-fuente) !important;
}
body.ctop-maqueta--pespas .ts-dropdown {
  border: var(--pes-filete); border-radius: 0; box-shadow: none; margin-top: 1px;
}
body.ctop-maqueta--pespas .ts-dropdown .active { background: var(--pes-papel); color: var(--uv-ink); }

/* ---------------------------------------------------------------------------
   10b. La cabecera por debajo de 1100px

   **Aquí había un solapamiento de verdad**, no un descuadre: entre 768 y 1100px
   el tema oculta la hamburguesa (`responsive.css:12,34`) y deja el menú
   horizontal, que se dimensionó para la cabecera antigua —etiquetas más cortas
   y menos entradas—. Con las seis de Pespas más «Acceder» y «Dar de alta mi
   negocio» el contenido pide 901px en una caja de 820: el botón se montaba
   ENCIMA de «Verificación», «Sobre nosotros» salía cortado y «Acceder»
   desaparecía.

   La hamburguesa ya existe en todos los anchos —`mobile-menu.js` la inyecta
   siempre y es el CSS quien la esconde— y el panel lateral ya está vestido, así
   que basta con adelantar el umbral. Se gana a un `!important` del tema con la
   clase del body, no con otro `!important` encima.

   **1280, y el número está medido, no elegido.** Estuvo en 1100 y seguía mal: entre 1101 y 1440 el
   menú no se solapaba, pero se PARTÍA EN DOS FILAS y la cabecera pasaba de 77 a 112 px de alto.
   Eso es lo que se ve como «una barra entre la cabecera y el contenido»: no hay ningún elemento
   ahí, es la segunda fila del propio menú.

   Las medidas, en el hueco real que le deja el logo a la izquierda y los botones a la derecha:

   | ventana | hueco del menú | el menú pide | |
   |---|---|---|---|
   | 1440 | 691 | 671 | cabe |
   | 1366 | 651 | 671 | se parte |
   | 1280 | 604 | 671 | se parte |
   | 1101 | 508 | 671 | se parte |

   Comprimir no alcanza para todo el rango: a 1101 px harían falta ≤508 px para seis entradas, y
   eso exige bajar el texto a 12 px, que ya es ilegible (y el usuario ya avisó de que el menú en
   tablet se leía pequeño). Así que por debajo de 1280 va la hamburguesa, y entre 1281 y 1440 el
   menú se comprime lo justo para caber en una fila — ver 10c.

   **Este umbral y el del panel lateral son el mismo número en dos sitios** (aquí y en el bloque de
   1279 px, más abajo): las media queries no admiten `var()`, así que si se mueve uno hay que mover
   el otro o la hamburguesa abre un panel con los colores anteriores.
   --------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  body.ctop-maqueta--pespas [data-elementor-type="header"] .uv-header-nav,
  body.ctop-maqueta--pespas [data-elementor-type="header"] .elementor-nav-menu--main,
  body.ctop-maqueta--pespas [data-elementor-type="header"] .uv-acc-btn,
  body.ctop-maqueta--pespas [data-elementor-type="header"] .uv-account-btn,
  body.ctop-maqueta--pespas [data-elementor-type="header"] .uv-alta-btn {
    display: none !important;
  }
  /* Los dos `!important` de este bloque son los únicos de la hoja que rozan a Elementor, y ninguno
     quita nada al editor:
       · `.uv-burger` NO es un widget: lo inyecta `mobile-menu.js` y el tema lo esconde con
         `display:none!important`. Sin `!important` no hay forma de enseñarlo.
       · `.e-con-inner` responde a `responsive.css:36-37`, que ya fuerza `flex-direction`,
         `flex-wrap`, `align-items` y `justify-content` con `!important` en ese mismo ancho. El
         editor ya estaba bloqueado ahí por el tema; esto solo devuelve el valor correcto. */
  body.ctop-maqueta--pespas [data-elementor-type="header"] .uv-burger {
    display: inline-flex !important;
    background: var(--uv-ink) !important; color: #fff !important; border-radius: 0;
    width: 46px; height: 46px; align-items: center; justify-content: center;
    border: 0; font-size: 20px; cursor: pointer; margin-left: auto; flex: 0 0 auto;
  }
  /* La fila de la cabecera vuelve a ser logo + hamburguesa, sin envolver. */
  body.ctop-maqueta--pespas [data-elementor-type="header"] .e-con-inner {
    flex-wrap: nowrap !important; justify-content: space-between !important;
  }
}

/* ---------------------------------------------------------------------------
   10c. El menú, en UNA fila entre 1281 y 1440px

   Por encima de 1440 el menú cabe con su tamaño normal; por debajo de 1281 hay hamburguesa. En
   medio hay que comprimirlo, porque si se parte reaparece exactamente la banda que 10b describe.

   Se comprime el ESPACIADO antes que el texto: 16→10px de padding lateral ahorra 72px y no se lee;
   bajar de 14 a 13.5px aporta los 17px que faltan y sigue siendo legible. Con eso el menú pide
   ~582px y a 1281 el hueco es de 604: entra con 22px de sobra, que es el margen que evita que un
   cambio de etiqueta lo vuelva a partir.

   `flex-wrap: nowrap` es la red de seguridad: si algún día se añade una entrada más, el menú se
   sale por un lado —visible al instante— en vez de partirse en dos filas, que es un defecto que
   parece un elemento de diseño y puede vivir meses sin que nadie lo mire.

   **El `<ul>` no lleva `elementor-nav-menu--main`.** La primera versión de este bloque colgaba de
   esa clase —la misma que usa 10b para esconder el menú— y no se aplicaba nada: en Elementor 4 esa
   clase está en el `<nav>` que envuelve la lista, no en la lista. La regla existía, el editor la
   aceptaba y el menú seguía partiéndose. Se ve midiendo (`filas=2`), no leyendo el CSS.

   Y hay DOS `ul.elementor-nav-menu` en la cabecera: el horizontal y el desplegable del panel
   móvil, que está oculto. Por eso el selector cuelga de `[data-elementor-type="header"]` y no de
   la clase a secas.
   --------------------------------------------------------------------------- */

@media (min-width: 1281px) and (max-width: 1440px) {
  body.ctop-maqueta--pespas [data-elementor-type="header"] .elementor-nav-menu {
    flex-wrap: nowrap;
  }
  body.ctop-maqueta--pespas [data-elementor-type="header"] .elementor-nav-menu > li > a {
    padding-left: 10px; padding-right: 10px; font-size: 13.5px; white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   10d. El logotipo no puede encogerse hasta desaparecer

   En móvil medía **33 × 6 px**: ilegible. No era su tamaño configurado —el widget pide el 100% de
   su contenedor— sino que **el contenedor del logo se encogía a 53px** repartiendo la fila con la
   hamburguesa. Elementor pone `min-width: 0` en sus `.e-con`, y eso permite a un elemento flex
   bajar por debajo de su propio contenido; sin esa línea el mínimo habría sido el ancho del logo y
   nunca habría pasado.

   Se pone un SUELO, no un tamaño: `min-width` deja que quien edite la cabecera lo haga más grande
   desde el panel, que es el contrato de esta hoja con Elementor. Y solo por debajo de 768px, que
   es donde el reparto se estrecha.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.ctop-maqueta--pespas [data-elementor-type="header"] .e-con { min-width: auto; }
  body.ctop-maqueta--pespas [data-elementor-type="header"] .elementor-widget-image img {
    min-width: 132px;
  }
}

/* ---------------------------------------------------------------------------
   10c. La barra fija de móvil no puede tapar el final de la página

   El mu-plugin la pinta en todas las páginas, pero el hueco al final solo estaba
   puesto sobre `body.elementor-page` — y las pantallas de HivePress (buscador,
   ficha, cuenta, alta) **no llevan esa clase**, así que ahí no había hueco
   ninguno. En `/servicios/` se veía: con el scroll al fondo, los últimos enlaces
   quedaban debajo de la barra y no había forma de llegar a ellos.

   El hueco se declara con una variable para que siga la altura real de la barra
   —hoy 46px— en vez de un número copiado, que es lo que ya hace
   `form-layout.js` con `--ctop-barra-movil`.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.ctop-maqueta--pespas { --ctop-barra-movil: 46px; }
  body.ctop-maqueta--pespas:has(.uv-mobile-cta) {
    padding-bottom: calc(var(--ctop-barra-movil) + 8px);
  }
}

/* ---------------------------------------------------------------------------
   11. Móvil

   Lo justo: `core/mobile.css` va DESPUÉS de este fichero y usa `!important` en
   varias reglas del lienzo, así que aquí solo se corrige lo que es propio de
   esta maquetación y no entra en conflicto con aquello.
   --------------------------------------------------------------------------- */

/* La hamburguesa y el panel deslizante los pinta el TEMA (`responsive.css`,
   prioridad 20) y los monta `mobile-menu.js`. Esta hoja va en la 25, así que
   puede repintarlos sin tocar el tema, que es compartido por los 18 dominios.

   **Hasta 1279px, no hasta 767.** La sección 10b adelantó la hamburguesa porque con las seis
   entradas de Pespas el menú horizontal no cabía; pero el repintado del panel se quedó en 767.
   Resultado: entre 768 y el umbral la hamburguesa abría un panel con los colores ANTERIORES
   —«Mi cuenta» en azul eléctrico sobre borde azul—, que es justo lo que se veía al abrir el menú
   en una tablet. El umbral del panel tiene que ser el mismo que el de la hamburguesa: **si se
   mueve uno, se mueve el otro**, y ya ha pasado dos veces (767→1100, 1100→1280). */
@media (max-width: 1279px) {
  /* **Los estados también, y con `!important`.** `responsive.css:53-54` fija los COLORES de texto
     con `!important`, y `core/mobile.css:99-112` fija además `:hover`, `:focus` y `:active` en azul
     —también con `!important`— para arreglar un azul-sobre-azul del tema. `core/mobile.css` se
     encola DESPUÉS de esta hoja, así que aquí no basta con `!important`: hace falta más
     especificidad, y la da la clase del body.

     Sin esto el defecto no se ve en una captura en reposo: aparece solo al PULSAR, porque un toque
     en móvil deja el `:focus` puesto. La hamburguesa y «Mi cuenta» se quedaban azul eléctrico
     dentro de un panel negro y ámbar. */
  body.ctop-maqueta--pespas .uv-burger,
  body.ctop-maqueta--pespas .uv-burger:hover,
  body.ctop-maqueta--pespas .uv-burger:focus {
    background: var(--uv-ink) !important; color: #fff !important; border-radius: 0;
  }
  body.ctop-maqueta--pespas .uv-burger:hover i,
  body.ctop-maqueta--pespas .uv-burger:focus i { color: #fff !important; }

  body.ctop-maqueta--pespas .uv-mpop-panel,
  body.ctop-maqueta--pespas .uv-mpop { border-radius: 0; }

  body.ctop-maqueta--pespas .uv-mpop-close,
  body.ctop-maqueta--pespas .uv-mpop-close:hover,
  body.ctop-maqueta--pespas .uv-mpop-close:focus {
    background: var(--pes-papel) !important; color: var(--uv-ink) !important;
    border: var(--pes-filete); border-radius: 0;
  }

  /* En una tablet el panel ocupa media pantalla y 16px se quedaba menudo; el tamaño acompaña al
     ancho disponible en vez de ser el mismo en un móvil de 360 y en una tablet de 1024. */
  body.ctop-maqueta--pespas .uv-mpop-nav a {
    font: 600 clamp(16px, 1.9vw, 19px) var(--pes-fuente);
    color: var(--uv-ink); border-bottom: var(--pes-filete);
    padding-top: 14px; padding-bottom: 14px;
  }
  body.ctop-maqueta--pespas .uv-mpop-btn { font-size: clamp(15px, 1.7vw, 17px); }
  body.ctop-maqueta--pespas .uv-mpop-nav a:hover,
  body.ctop-maqueta--pespas .uv-mpop-nav a:focus { color: var(--uv-amber); }

  body.ctop-maqueta--pespas .uv-mpop-btn { font-family: var(--pes-fuente); font-weight: 700; }

  body.ctop-maqueta--pespas .uv-mpop-btn--acc,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle {
    background: #fff !important; color: var(--uv-ink) !important;
    border: 1px solid var(--uv-ink) !important; border-radius: 0;
  }
  body.ctop-maqueta--pespas .uv-mpop-btn--acc:hover,
  body.ctop-maqueta--pespas .uv-mpop-btn--acc:focus,
  body.ctop-maqueta--pespas .uv-mpop-btn--acc:active,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle:hover,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle:focus,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle:active,
  body.ctop-maqueta--pespas .uv-mpop-acc.open .uv-mpop-acctoggle {
    background: var(--uv-ink) !important; color: #fff !important;
    border-color: var(--uv-ink) !important;
  }
  body.ctop-maqueta--pespas .uv-mpop-btn--acc:hover i,
  body.ctop-maqueta--pespas .uv-mpop-btn--acc:focus i,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle:hover i,
  body.ctop-maqueta--pespas .uv-mpop-acctoggle:focus i,
  body.ctop-maqueta--pespas .uv-mpop-acc.open .uv-mpop-acctoggle i { color: #fff !important; }

  body.ctop-maqueta--pespas .uv-mpop-btn--alta,
  body.ctop-maqueta--pespas .uv-mpop-btn--alta:hover,
  body.ctop-maqueta--pespas .uv-mpop-btn--alta:focus {
    background: var(--uv-amber) !important; color: var(--uv-ink) !important; border-radius: 0;
  }

  body.ctop-maqueta--pespas .uv-mpop a { font-family: var(--pes-fuente); }
}

@media (max-width: 767px) {
  body.ctop-maqueta--pespas .hp-page__title { font-size: 26px; }
  body.ctop-maqueta--pespas.ctop-ficha .hp-listing--view-page .hp-listing__title { font-size: 28px; }
  body.ctop-maqueta--pespas .ctop-fs-caja { padding: 20px; }
  body.ctop-maqueta--pespas .hp-listing--view-block { padding: 16px; }
  body.ctop-maqueta--pespas .uv-stat-n { font-size: 24px; }

  /* La tabla en modo tarjeta.

     `mobile.css:27-33` ya hace lo difícil —convertir cada fila en una ficha y sacar el título de
     cada celda de su `data-label`—, y eso se respeta: aquí solo se cambia el aspecto, que venía
     con radio 12, filete azulado e Inter. Gana por especificidad (0,2,1 contra 0,1,1), no por
     orden: `core/mobile.css` se encola DESPUÉS de esta hoja y por orden perdería siempre. */
  body.ctop-maqueta--pespas .uv-table tr {
    border: var(--pes-filete); border-radius: 0; padding: 4px 14px; margin-bottom: 14px;
  }
  body.ctop-maqueta--pespas .uv-table td {
    border-top: var(--pes-filete); padding: 12px 0; gap: 16px;
  }
  body.ctop-maqueta--pespas .uv-table td::before {
    font: 700 11px var(--pes-fuente); letter-spacing: 0.12em;
    color: var(--pes-gris); flex-basis: 38%;
  }

  /* «Rendimiento por anuncio» es una rejilla de cifras, no una ficha.

     Apilada como las demás daba cuatro filas por anuncio: con diecinueve anuncios, ocho mil píxeles
     de scroll para leer doce ceros. Aquí el nombre pasa a ser el título de la tarjeta y las tres
     métricas se ponen en fila, con su rótulo encima del número — que es como se leen tres cifras
     que se comparan entre sí. */
  body.ctop-maqueta--pespas .uv-table--cifras tr {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px;
    padding: 14px; align-items: start;
  }
  body.ctop-maqueta--pespas .uv-table--cifras td {
    display: block; border: 0; padding: 0; min-width: 0;
  }
  body.ctop-maqueta--pespas .uv-table--cifras td:first-child {
    grid-column: 1 / -1; margin-bottom: 12px; font-weight: 700;
  }
  body.ctop-maqueta--pespas .uv-table--cifras td:first-child::before { display: none; }
  /* `mobile.css:32` monta el rótulo como una columna de ancho fijo dentro de un flex; aquí va
     encima del número, y necesita poder PARTIR: «Clics en Llamar» no cabe en un tercio de 390px y
     se salía encima de «WhatsApp», dejando los tres rótulos pegados en una sola línea ilegible. */
  body.ctop-maqueta--pespas .uv-table--cifras td::before {
    display: block; flex: none; margin-bottom: 4px; font-size: 10px; line-height: 1.3;
    white-space: normal; overflow-wrap: anywhere;
    /* Dos líneas reservadas: «Clics en Llamar» ocupa dos y «WhatsApp» una, y sin esto los tres
       números quedaban a tres alturas distintas. Son cifras que se comparan entre sí — si no
       comparten línea de base, hay que buscarlas. */
    min-height: 2.6em;
  }
  body.ctop-maqueta--pespas .uv-table--cifras td:not(:first-child) {
    font-family: 'Archivo Black', Helvetica, Arial, sans-serif; font-size: 20px;
    color: var(--uv-ink);
  }
  /* Un cero no es «nada que mostrar»: aquí es el dato. `mobile.css:34` esconde las celdas vacías,
     y este `td` no lo está — pero conviene dejarlo dicho, porque la regla de al lado lo sugiere. */
  body.ctop-maqueta--pespas .uv-table--cifras td:empty { display: block; }

  /* «Contactos recibidos»: cada contacto con su CABECERA.

     Apilados, todos los contactos eran el mismo bloque de pares etiqueta/valor y había que leerlos
     para saber dónde acababa uno y empezaba el siguiente. La fecha —que es la primera celda— pasa a
     ser una banda de cabecera con el ámbar de la marca al canto: se ve dónde empieza cada ficha sin
     leer nada. El resto de celdas no cambian de forma, solo se separan de ella. */
  body.ctop-maqueta--pespas .uv-table--contactos tr {
    padding: 0; border-left: 3px solid var(--uv-amber);
  }
  body.ctop-maqueta--pespas .uv-table--contactos td:first-child {
    background: var(--pes-papel); border-top: 0; border-bottom: var(--pes-filete);
    padding: 12px 14px; margin-bottom: 4px;
    font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
    font-size: 13px; color: var(--uv-ink); letter-spacing: 0.01em;
  }
  /* En la cabecera el rótulo «FECHA» sobra: una fecha se reconoce sola, y quitarlo deja la banda
     limpia y el dato a la izquierda, que es donde se busca. */
  body.ctop-maqueta--pespas .uv-table--contactos td:first-child::before { display: none; }
  body.ctop-maqueta--pespas .uv-table--contactos td { padding: 10px 14px; }
}

/* ============================================================================
   10. El selector de zonas y gremios del alta  (.uv-loc-*)
   ----------------------------------------------------------------------------
   Este componente nunca se había repintado, y no fue mala suerte: vive en los pasos 2 y 3 del
   asistente, que están `hidden` hasta que alguien navega hasta ellos. Ningún barrido de color lo
   vio nunca — `getComputedStyle` sobre un nodo oculto no dice nada útil y el detector no llegaba
   siquiera a abrir el paso. Se encontró mirando el formulario paso a paso, no midiendo.

   Lo que quedaba dentro era la marca antigua entera: botón azul `#2563EB` en píldora, chips azul
   claro sobre `#EFF6FF`, modal con radio 18 y sombra difusa, Montserrat e Inter. Es decir, el
   sistema anterior completo dentro de una caja que no se abría.

   Las dos hojas comparten clases a propósito (ver `location-picker.css`), así que esto viste los
   DOS selectores —zonas y gremios— de una vez. Es la razón de reutilizarlas.
   ============================================================================ */

body.ctop-maqueta--pespas .uv-loc-empty,
body.ctop-maqueta--pespas .uv-loc-hint,
body.ctop-maqueta--pespas .uv-loc-loading {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}

/* --- Chips de lo elegido --- */
body.ctop-maqueta--pespas .uv-loc-chip {
  background: var(--pes-papel); color: var(--uv-ink);
  border: var(--pes-filete); border-radius: var(--pes-radio);
  font: 600 13px var(--pes-fuente);
}
body.ctop-maqueta--pespas .uv-loc-chip b { color: var(--pes-gris); font-weight: 700; }
body.ctop-maqueta--pespas .uv-loc-chip b:hover { color: var(--uv-ink); }

/* --- El botón que abre el panel ---
   Es el que el usuario señaló: píldora azul en medio de un formulario en blanco y negro. Pasa a
   negro y cuadrado, que es la forma de acción del sistema; el ámbar se reserva para el acento,
   no para cada botón. */
body.ctop-maqueta--pespas .uv-loc-open {
  background: var(--uv-ink); color: #fff;
  border: 1px solid var(--uv-ink); border-radius: var(--pes-radio);
  font: 800 14px var(--pes-fuente); letter-spacing: .01em;
  padding: 12px 20px;
  transition: background .15s, color .15s;
}
body.ctop-maqueta--pespas .uv-loc-open:hover {
  background: #fff; color: var(--uv-ink);
}
/* El icono NO se toca de familia: es un carácter de uso privado de Font Awesome y cambiarle la
   fuente lo convierte en el cuadrado de glifo ausente. Misma trampa que la sección 2a. */
body.ctop-maqueta--pespas .uv-loc-open i { color: inherit; }

/* --- El panel --- */
body.ctop-maqueta--pespas .uv-loc-modal { background: rgba(0, 0, 0, .55); }
body.ctop-maqueta--pespas .uv-loc-box {
  border-radius: var(--pes-radio);
  border: 1px solid var(--uv-ink);
  box-shadow: none;            /* la sombra del sistema marca el plan recomendado, nada más */
}
body.ctop-maqueta--pespas .uv-loc-head {
  border-bottom: 1px solid var(--uv-ink);
  font-family: var(--pes-fuente); font-weight: 800;
  background: var(--uv-ink); color: #fff;
}
body.ctop-maqueta--pespas .uv-loc-close {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--pes-radio);
}
body.ctop-maqueta--pespas .uv-loc-close:hover { background: #fff; color: var(--uv-ink); }

body.ctop-maqueta--pespas .uv-loc-searchbar { border-bottom: var(--pes-filete); color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-loc-searchbar input {
  border: 1px solid var(--pes-linea-2); border-radius: var(--pes-radio);
  font: 500 15px var(--pes-fuente);
}
body.ctop-maqueta--pespas .uv-loc-searchbar input:focus {
  outline: 0; border-color: var(--uv-ink);
}

body.ctop-maqueta--pespas .uv-loc-check {
  font-family: var(--pes-fuente); color: var(--uv-ink); border-radius: var(--pes-radio);
}
body.ctop-maqueta--pespas .uv-loc-check:hover { background: var(--pes-papel); }
body.ctop-maqueta--pespas .uv-loc-check input { accent-color: var(--uv-ink); }

body.ctop-maqueta--pespas .uv-loc-exp { border-radius: var(--pes-radio); color: var(--pes-gris); }
body.ctop-maqueta--pespas .uv-loc-exp:hover,
body.ctop-maqueta--pespas .uv-loc-node.open > .uv-loc-exp {
  background: var(--pes-papel); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-loc-exp:focus-visible { outline: 2px solid var(--uv-ink); }
body.ctop-maqueta--pespas .uv-loc-children { border-left: 1px solid var(--pes-linea); }

/* El nivel (Comunidad/Provincia/Municipio) es lo que evita confundir «València» con «Valencia»:
   tiene que leerse, así que al marcarlo pasa al ámbar en vez de desvanecerse en gris. */
body.ctop-maqueta--pespas .uv-loc-nivel {
  border-radius: var(--pes-radio); background: var(--pes-papel);
  border: var(--pes-filete); color: var(--pes-gris);
  font: 600 11px var(--pes-fuente); text-transform: uppercase; letter-spacing: .04em;
}
body.ctop-maqueta--pespas .uv-loc-node.open > .uv-loc-check .uv-loc-nivel,
body.ctop-maqueta--pespas .uv-loc-check input:checked ~ span .uv-loc-nivel {
  background: var(--uv-amber); border-color: var(--uv-amber); color: var(--uv-ink);
}

body.ctop-maqueta--pespas .uv-loc-foot { border-top: 1px solid var(--uv-ink); }
body.ctop-maqueta--pespas .uv-loc-done {
  background: var(--uv-ink); color: #fff;
  border: 1px solid var(--uv-ink); border-radius: var(--pes-radio);
  font: 800 14px var(--pes-fuente); padding: 11px 24px;
}
body.ctop-maqueta--pespas .uv-loc-done:hover { background: #fff; color: var(--uv-ink); }

/* --- Propio del selector de gremios --- */
body.ctop-maqueta--pespas .uv-loc-grupo + .uv-loc-grupo { border-top: var(--pes-filete); }
body.ctop-maqueta--pespas .uv-loc-subs { border-left: 1px solid var(--pes-linea); }
body.ctop-maqueta--pespas .uv-loc-aviso {
  background: var(--uv-amber); color: var(--uv-ink);
  border-bottom: 1px solid var(--uv-ink);
  font: 700 13px var(--pes-fuente);
}

/* ============================================================================
   11. El asistente de «Configurar reservas»  (.ctop-wiz__*, .ctop-reserva-cfg-btn)
   ----------------------------------------------------------------------------
   Tercera vez que aparece el mismo agujero, y ya no es casualidad: lo que vive detrás de un botón,
   dentro de un paso `hidden`, no lo ve ningún barrido de color. El marco del asistente sí estaba
   vestido —reutiliza `.ctop-pick-*` del buscador, adaptado en §7b— pero su CONTENIDO es una hoja
   aparte (`bookings/bookings-setup.css`) que conservaba el sistema anterior entero: azul `#2563EB`
   en el botón primario, en el punto de progreso, en la opción elegida y en el icono del resumen,
   radios de 9-12px, Inter y Montserrat.

   Que el marco estuviera bien es justo lo que lo hacía difícil de ver: la ventana se abría con el
   aspecto correcto y lo de dentro era de otra marca.
   ============================================================================ */

/* --- El botón que abre el asistente, en el formulario --- */
body.ctop-maqueta--pespas .hp-form__field button.ctop-reserva-cfg-btn {
  background: #fff; border: 1px solid var(--uv-ink); border-radius: var(--pes-radio);
  color: var(--uv-ink); font: 700 14.5px/1 var(--pes-fuente);
}
body.ctop-maqueta--pespas .hp-form__field button.ctop-reserva-cfg-btn:hover {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}
/* El icono es el `\f013` de Font Awesome puesto por `::before`: hereda el color, pero NO puede
   heredar la familia — sería el cuadro de glifo ausente. Por eso aquí solo se toca el color. */
body.ctop-maqueta--pespas .ctop-reserva-cfg-btn::before { color: inherit; }
body.ctop-maqueta--pespas .ctop-reserva-cfg__resumen {
  font: 500 13px/1.5 var(--pes-fuente); color: var(--pes-gris);
}

/* --- Progreso ---
   Los puntos eran círculos, y el sistema no tiene radios. Pasan a trazos: el hecho en gris, el
   actual en tinta y más largo. La misma información sin una forma que no es de aquí. */
body.ctop-maqueta--pespas .ctop-wiz__puntos span {
  border-radius: 0; height: 3px; width: 14px; background: var(--pes-linea);
}
body.ctop-maqueta--pespas .ctop-wiz__puntos span.is-hecho { background: var(--pes-gris-cl); }
body.ctop-maqueta--pespas .ctop-wiz__puntos span.is-ahora {
  border-radius: 0; width: 28px; background: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-wiz__n {
  font: 600 12px/1.4 var(--pes-fuente); color: var(--pes-gris);
  text-transform: uppercase; letter-spacing: .06em;
}

body.ctop-maqueta--pespas .ctop-wiz__titulo {
  font: 800 19px/1.3 var(--pes-fuente); color: var(--uv-ink); letter-spacing: -0.02em;
}
body.ctop-maqueta--pespas .ctop-wiz__sub {
  font: 800 14px/1.35 var(--pes-fuente); color: var(--uv-ink);
  text-transform: uppercase; letter-spacing: .04em;
}
body.ctop-maqueta--pespas .ctop-wiz__ayuda,
body.ctop-maqueta--pespas .ctop-wiz__cargando {
  font: 400 13px/1.6 var(--pes-fuente); color: var(--pes-gris);
}

/* --- Tarjetas de opción ---
   Lo elegido va en negativo, igual que en los paneles del buscador (§7b): es el mismo gesto —
   «esto es lo que llevas marcado»— y debe leerse igual en los dos sitios. */
body.ctop-maqueta--pespas .ctop-wiz__op {
  border: var(--pes-filete); border-radius: var(--pes-radio);
  background: #fff; color: var(--uv-ink); font: 600 14px/1.2 var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-wiz__op:hover {
  background: var(--pes-papel); border-color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-wiz__op.is-on {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
  font-weight: 800; box-shadow: none;
}

/* --- Previsualización de huecos --- */
body.ctop-maqueta--pespas .ctop-wiz__vista-t {
  font: 600 12px/1.4 var(--pes-fuente); color: var(--pes-gris);
  text-transform: uppercase; letter-spacing: .05em;
}
body.ctop-maqueta--pespas .ctop-wiz__horas span {
  border-radius: var(--pes-radio); background: #fff; border: var(--pes-filete);
  color: var(--pes-tinta-2); font: 700 12.5px/1 var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-wiz__horas .ctop-wiz__mas {
  background: var(--pes-papel); color: var(--pes-gris);
}
/* «24 citas posibles a la semana» es la cifra que decide la elección: en gris claro se perdía
   debajo de la rejilla de horas. Archivo Black, como todas las cifras del sistema. */
body.ctop-maqueta--pespas .ctop-wiz__vista-p {
  font: 400 13px/1.4 var(--pes-fuente); color: var(--pes-tinta-2);
}
body.ctop-maqueta--pespas .ctop-wiz__vista-p strong,
body.ctop-maqueta--pespas .ctop-wiz__vista-p b {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif; color: var(--uv-ink);
}

/* --- Aviso y resumen --- */
body.ctop-maqueta--pespas .ctop-wiz__aviso {
  border-radius: var(--pes-radio); background: var(--uv-amber);
  border: 1px solid var(--uv-ink); color: var(--uv-ink);
  font: 700 13px/1.55 var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-wiz__resumen li {
  border: var(--pes-filete); border-radius: var(--pes-radio); background: #fff;
  font: 400 13.5px/1.4 var(--pes-fuente); color: var(--pes-tinta-2);
}
body.ctop-maqueta--pespas .ctop-wiz__resumen i { color: var(--uv-amber); }
body.ctop-maqueta--pespas .ctop-wiz__resumen strong { color: var(--uv-ink); font-weight: 800; }
body.ctop-maqueta--pespas .ctop-wiz__nota {
  border-radius: var(--pes-radio); background: var(--pes-papel);
  border-left: 3px solid var(--uv-amber); color: var(--pes-tinta-2);
  font: 500 13px/1.5 var(--pes-fuente);
}

/* --- Pie del asistente ---
   `bookings-setup.css:53` redondea el pie por abajo (`0 0 18px 18px`) para encajar con una caja
   que aquí ya no tiene esquinas: sin esto quedaban dos muescas blancas en las esquinas inferiores. */
body.ctop-maqueta--pespas .ctop-wiz .ctop-pick-foot,
body.ctop-maqueta--pespas .ctop-pick-foot { border-radius: 0; background: #fff; }
body.ctop-maqueta--pespas .ctop-wiz__btn {
  border-radius: var(--pes-radio); font: 700 14px/1 var(--pes-fuente); padding: 12px 24px;
}
body.ctop-maqueta--pespas .ctop-wiz__btn--pri {
  background: var(--uv-ink); color: #fff; border: 1px solid var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-wiz__btn--pri:hover { background: var(--uv-amber); color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-wiz__btn--sec {
  background: #fff; border: 1px solid var(--pes-linea-2); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-wiz__btn--sec:hover {
  background: var(--pes-papel); border-color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-wiz__btn[disabled]:hover {
  background: #fff; border-color: var(--pes-linea-2);
}

/* --- El editor de horario prestado (paso 3) --- */
body.ctop-maqueta--pespas .ctop-wiz .uv-sched-row {
  border: var(--pes-filete); border-radius: var(--pes-radio); background: var(--pes-papel);
}

/* ---------------------------------------------------------------------------
   11b. El EDITOR de horario  (.uv-sched-editor y compañía)

   La VISTA del horario (`.uv-sched-view`, en la ficha) ya estaba adaptada en §? — el editor no, y
   son dos cosas distintas con nombres parecidos. El editor conservaba entero el sistema anterior:
   `#2563EB` a trazos en «añadir tramo», radios de 6-14px, Inter y Montserrat.

   No se limita a `.ctop-wiz`: es **el mismo nodo** el que se presta al asistente y el que vive en
   el paso «Horario» del alta (`bookings-setup.js` lo mueve y lo devuelve al cerrar). Vestirlo solo
   dentro del modal lo dejaría con dos aspectos según dónde estuviera.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .uv-sched-editor {
  background: #fff; border: var(--pes-filete); border-radius: var(--pes-radio);
}
body.ctop-maqueta--pespas .uv-sched-day {
  font: 700 14px/1 var(--pes-fuente); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-sched-editor select.uv-sched-mode,
body.ctop-maqueta--pespas .uv-sched-hours input[type="time"] {
  border: 1px solid var(--pes-linea-2); border-radius: var(--pes-radio);
  font-family: var(--pes-fuente); background: #fff; color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-sched-editor select.uv-sched-mode:focus,
body.ctop-maqueta--pespas .uv-sched-hours input[type="time"]:focus {
  outline: 0; border-color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-sched-hours {
  font: 600 14px var(--pes-fuente); color: var(--pes-tinta-2);
}
body.ctop-maqueta--pespas .uv-sched-range {
  border: var(--pes-filete); border-radius: var(--pes-radio); background: #fff;
}

/* «Añadir tramo» era una píldora azul a trazos. Pasa a filete continuo en tinta: es una acción
   secundaria y no necesita color, solo borde. */
body.ctop-maqueta--pespas .uv-sched-add {
  border: 1px solid var(--uv-ink); border-radius: var(--pes-radio);
  background: #fff; color: var(--uv-ink); font: 800 12px var(--pes-fuente);
  text-transform: uppercase; letter-spacing: .04em;
}
body.ctop-maqueta--pespas .uv-sched-add:hover { background: var(--uv-ink); color: #fff; }

/* Quitar un tramo SÍ conserva el rojo: es la única acción destructiva del editor y el sistema no
   tiene otra forma de decirlo. Lo que cambia es la forma, no el aviso. */
body.ctop-maqueta--pespas .uv-sched-del { border-radius: var(--pes-radio); font-family: var(--pes-fuente); }

/* La cabecera del panel traía `#0F172A` escrito a mano en `search-filters.css`, que es la tinta
   ANTERIOR: junto al negro `#18181B` del resto se lee como un azulado sucio. */
body.ctop-maqueta--pespas .ctop-pick-head,
body.ctop-maqueta--pespas .ctop-pick-head strong { color: var(--uv-ink); }

/* ---------------------------------------------------------------------------
   11c. `button.button` — el botón «en crudo» de HivePress

   «Volver a mi cuenta», al final del alta (`listing-complete-message.php`), salía con el borde y el
   relleno **granate** `#c36` de `hello-elementor/assets/css/reset.css:1`, que pinta TODO `button`
   y además lo rellena en `:hover`.

   `base.css` ya neutralizaba ese granate, pero solo para `button:not([class])` — «botones en
   crudo». Este tiene `class="button"`, la clase genérica de WordPress, así que quedaba justo en la
   rendija: con clase para la regla que lo protegía, sin estilo propio en ninguna parte. Un botón
   con clase no es un botón vestido.

   El arreglo va en dos capas a propósito: `base.css` le da el azul común (los dieciocho dominios lo
   tenían granate) y aquí se viste como el resto del sistema. Ninguna de las dos sobra.
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas button.button,
body.ctop-maqueta--pespas input.button {
  background: var(--uv-ink); border: 1px solid var(--uv-ink); border-radius: var(--pes-radio);
  color: #fff; font: 800 14px var(--pes-fuente); padding: 13px 26px;
  letter-spacing: .01em; transition: background .15s, color .15s;
}
body.ctop-maqueta--pespas button.button:hover,
body.ctop-maqueta--pespas button.button:focus,
body.ctop-maqueta--pespas input.button:hover,
body.ctop-maqueta--pespas input.button:focus {
  background: var(--uv-amber); border-color: var(--uv-amber); color: var(--uv-ink);
}

/* ============================================================================
   12. La evolución de contactos  (.ctop-graf)
   ----------------------------------------------------------------------------
   El componente se dibuja con cuatro variables propias (`--ctop-serie-*`) que por defecto toman
   `--uv-blue`, `--uv-green`, `--uv-amber` y `--uv-ink`. Aquí se reasignan a la escala neutra: el
   sistema Pespas es zinc + ámbar, y un verde de WhatsApp dentro de un gráfico en blanco y negro
   se lee como un error, no como una categoría.

   **Las cuatro series tienen que distinguirse sin color**, porque tres de ellas van a ser grises.
   Se separan por VALOR —negro, gris medio, gris claro— y el ámbar queda para la que más importa
   al anunciante: el formulario, que es el único contacto que llega con mensaje escrito.
   ============================================================================ */

body.ctop-maqueta--pespas .ctop-graf {
  --ctop-serie-call:    var(--uv-ink);
  --ctop-serie-wa:      var(--pes-gris);
  --ctop-serie-form:    var(--uv-amber);
  --ctop-serie-reserva: var(--pes-gris-cl);
}

body.ctop-maqueta--pespas .ctop-graf__rangos a.ctop-graf__rango {
  border: var(--pes-filete); border-radius: var(--pes-radio);
  font: 700 12.5px/1 var(--pes-fuente); color: var(--pes-gris);
  text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px;
}
body.ctop-maqueta--pespas .ctop-graf__rangos a.ctop-graf__rango:hover {
  border-color: var(--uv-ink); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-graf__rangos a.ctop-graf__rango.is-on {
  background: var(--uv-ink); border-color: var(--uv-ink); color: #fff;
}

body.ctop-maqueta--pespas .ctop-graf__lienzo {
  border: var(--pes-filete); border-radius: var(--pes-radio);
}
body.ctop-maqueta--pespas .ctop-graf__guia { stroke: var(--pes-linea); }
body.ctop-maqueta--pespas .ctop-graf__eje  { stroke: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-graf__escala,
body.ctop-maqueta--pespas .ctop-graf__fecha {
  fill: var(--pes-gris); font-family: var(--pes-fuente); font-weight: 600;
}

/* Los cuadrados de la leyenda pierden el radio, como todo lo demás. */
body.ctop-maqueta--pespas .ctop-graf__punto { border-radius: 0; }
body.ctop-maqueta--pespas .ctop-graf__leyenda li,
body.ctop-maqueta--pespas .ctop-graf__total {
  font-family: var(--pes-fuente); color: var(--pes-tinta-2);
}
/* Cifras en Archivo Black, como en el resto del sistema. */
body.ctop-maqueta--pespas .ctop-graf__leyenda b,
body.ctop-maqueta--pespas .ctop-graf__total b {
  font-family: 'Archivo Black', Helvetica, Arial, sans-serif; color: var(--uv-ink);
}

/* --- 12b. El rango a medida del gráfico --- */
body.ctop-maqueta--pespas .ctop-graf__campo span {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-graf__medida input[type="date"] {
  border: 1px solid var(--pes-linea-2); border-radius: var(--pes-radio);
  font-family: var(--pes-fuente); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-graf__medida input[type="date"]:focus { border-color: var(--uv-ink); }
body.ctop-maqueta--pespas .ctop-graf__medida button.ctop-graf__ver {
  border-radius: var(--pes-radio); font: 800 13.5px var(--pes-fuente);
  text-transform: uppercase; letter-spacing: .04em;
}
body.ctop-maqueta--pespas .ctop-graf__medida button.ctop-graf__ver:hover {
  background: var(--uv-amber); border-color: var(--uv-amber); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .ctop-graf__medida a.ctop-graf__limpiar {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}
body.ctop-maqueta--pespas .ctop-graf__aviso {
  border-radius: var(--pes-radio); background: var(--uv-amber);
  border: 1px solid var(--uv-ink); color: var(--uv-ink);
  font: 700 12.5px/1.5 var(--pes-fuente);
}
body.ctop-maqueta--pespas .ctop-graf__nota { color: var(--pes-gris); }

/* ---------------------------------------------------------------------------
   13. Ordenar y filtrar las tablas  (.ctop-tabla__*)
   --------------------------------------------------------------------------- */

body.ctop-maqueta--pespas .uv-table th.ctop-tabla__th:focus-visible { outline-color: var(--uv-ink); }
body.ctop-maqueta--pespas .uv-table th.ctop-tabla__th.is-asc,
body.ctop-maqueta--pespas .uv-table th.ctop-tabla__th.is-desc { color: var(--uv-ink); }
/* La flecha de la columna activa en ámbar: es el único acento del sistema y aquí dice, de un
   vistazo y sin leer, por dónde está ordenada la tabla. */
body.ctop-maqueta--pespas .uv-table th.ctop-tabla__th.is-asc::after,
body.ctop-maqueta--pespas .uv-table th.ctop-tabla__th.is-desc::after { color: var(--uv-amber); }

body.ctop-maqueta--pespas .uv-table .ctop-tabla__filtro {
  border: 1px solid var(--pes-linea-2); border-radius: var(--pes-radio);
  font-family: var(--pes-fuente); color: var(--uv-ink);
}
body.ctop-maqueta--pespas .uv-table .ctop-tabla__filtro:focus { border-color: var(--uv-ink); }
body.ctop-maqueta--pespas .uv-table .ctop-tabla__filtro::placeholder { color: var(--pes-gris-cl); }

body.ctop-maqueta--pespas .ctop-tabla__sinfiltro,
body.ctop-maqueta--pespas .ctop-tabla__recorte {
  font-family: var(--pes-fuente); color: var(--pes-gris);
}
@media (max-width: 767px) {
  body.ctop-maqueta--pespas table.uv-table tr.ctop-tabla__filtros th::before {
    font-family: var(--pes-fuente); color: var(--pes-gris);
  }
}