/*
Theme Name: We Love SEO
Theme URI: https://weloveseo.es
Description: Tema hijo de Bricks para weloveseo.es. Snippets PHP, schemas JSON-LD y self-hosting de fuentes. El CSS de diseño vive en los tokens del Style Manager de Bricks (design-system/theme-variables.json), no aquí.
Author: We Love SEO
Template: bricks
Version: 0.2.0
Text Domain: weloveseo
*/

/* ─────────────────────────────────────────────────────────────
   Tipografía — WOFF2 autoalojados, subsets Latin y Latin-Ext.
   Descargados de Google Fonts el 2026-09-08 y servidos desde
   fonts/. Nunca por CDN: RGPD y velocidad.

   Bricolage Grotesque y Archivo son variables (un fichero cubre
   todo el rango de pesos). IBM Plex Mono no tiene variable en
   Google Fonts: van los estáticos 500 y 600, los dos únicos que
   usa el diseño.

   Las tres son SIL Open Font License 1.1, que permite el
   autoalojamiento. Licencias en fonts/OFL.txt.

   Ojo: Bricks entrecomilla siempre el valor de font-family
   (assets.php:3659), así que los settings de elemento llevan el
   nombre real de la familia, no var(--font-*). Los tokens
   --font-display/body/mono siguen definidos para CSS propio.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ───────────────────────────────────────────────────────────
   Cuerpo base.
   Bricks sirve `body { font-size: 15px }` desde su frontend.css y el
   diseno fija la base en 16px. Hoy no cambia nada visible —los 124
   elementos de texto de las plantillas fijan su propio tamano— pero
   si cambiara en cuanto entren el blog, los CPT y cualquier contenido
   que no pase por un elemento de Bricks. Se corrige aqui y no en los
   Theme Styles para que viaje en el repo y se revise en el diff.
   ─────────────────────────────────────────────────────────── */

body {
  font-size: var(--text-base);
  /* Fondo base en papel (crema), no blanco puro: es el token --surface-base
     del diseno. Sin esto, el area bajo el pie y el fondo del scroll elastico
     en iOS salen en #FFFFFF y rompen la continuidad con las secciones. */
  background-color: var(--surface-base, var(--crema));
}

/* ─────────────────────────────────────────────────────────────
   Movimiento — handoff de diseño, sección 3.
   Solo CSS, sin librerías. Los keyframes no son primitivas de
   Bricks, así que viven aquí; los elementos los invocan por clase.
   ───────────────────────────────────────────────────────────── */

@keyframes wls-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.wls-up   { animation: wls-up var(--duration-enter) ease both; }
.wls-up-2 { animation-delay: var(--stagger-2); }
.wls-up-3 { animation-delay: var(--stagger-3); }
.wls-up-4 { animation-delay: var(--stagger-4); }

/* Cinta infinita. El contenido va duplicado en el marcado: por eso -50%. */
@keyframes wls-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.wls-marquee-track {
  display: flex;
  width: max-content;
  animation: wls-marquee var(--duration-marquee) linear infinite;
}

/* ─────────────────────────────────────────────────────────────
   Palabra rotativa del H1 — Google / ChatGPT / TikTok / Maps.
   Cinco pasos porque el primero se repite al final y así el ciclo
   cierra sin salto. La lista visible va aria-hidden y el H1 lleva
   un texto accesible fijo: si no, un lector de pantalla anuncia
   las cuatro palabras seguidas.
   ───────────────────────────────────────────────────────────── */

/* Un porcentaje en translateY se resuelve contra la altura del PROPIO
   elemento animado, que aqui es la columna entera de cinco palabras. Con
   -100% el primer salto se iba las cinco de golpe y la ranura quedaba en
   blanco. Los pasos van en la altura de UNA palabra, centralizada en
   --wls-rot-alto para que keyframes, ranura y palabras no se desincronicen. */

.wls-rotator {
  --wls-rot-alto: .92em;

  display: inline-block;
  height: var(--wls-rot-alto);
  overflow: hidden;
  vertical-align: bottom;
}

@keyframes wls-rotate {
   0%,  18% { transform: translateY(0); }
  22%,  42% { transform: translateY(calc(var(--wls-rot-alto) * -1)); }
  46%,  66% { transform: translateY(calc(var(--wls-rot-alto) * -2)); }
  70%,  90% { transform: translateY(calc(var(--wls-rot-alto) * -3)); }
  94%, 100% { transform: translateY(calc(var(--wls-rot-alto) * -4)); }
}

.wls-rotator > span {
  display: flex;
  flex-direction: column;
  animation: wls-rotate var(--duration-rotate) cubic-bezier(.7, 0, .3, 1) infinite;
}

.wls-rotator span span {
  height: var(--wls-rot-alto);
  line-height: var(--wls-rot-alto);
  color: var(--magenta);
  white-space: nowrap;
}

/* Texto solo para lectores de pantalla. */
.wls-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────
   Sombras.
   Las del handoff tienen DOS capas: una plana de 2px que asienta
   el elemento y otra difusa. El control `_boxShadow` de Bricks
   solo modela una, así que por JSON se perdía la capa plana.
   Se aplican por clase para no perder fidelidad.
   ───────────────────────────────────────────────────────────── */

.wls-shadow-card  { box-shadow: var(--shadow-card); }
.wls-shadow-panel { box-shadow: var(--shadow-panel); }

/* ─────────────────────────────────────────────────────────────
   Chips de la tarjeta de respuesta de IA.
   ───────────────────────────────────────────────────────────── */

.wls-chip {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-inverse);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-inverse);
}

.wls-chip:first-child {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--text-on-accent);
}

/* ─────────────────────────────────────────────────────────────
   Umbral bloqueante del PRD: prefers-reduced-motion siempre.
   Se anula todo movimiento, incluida la palabra rotativa, que
   queda fija en la primera opción.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wls-up,
  .wls-marquee-track,
  .wls-rotator > span {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Desplegable de Servicios, sin JavaScript.
   :hover abre con raton y :focus-within con teclado, asi que se
   recorre con Tab sin necesitar un solo byte de JS. `visibility`
   ademas de `opacity` para que el panel cerrado no sea enfocable.
   ─────────────────────────────────────────────────────────── */

.wls-desplegable {
  position: relative;
}

.wls-desplegable .wls-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 720px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow: var(--shadow-panel);
  z-index: 60;
}

.wls-desplegable:hover .wls-panel,
.wls-desplegable:focus-within .wls-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* El hueco entre el enlace y el panel rompia el :hover al bajar el raton. */
.wls-desplegable::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.wls-desplegable .wls-panel-fila:hover,
.wls-desplegable .wls-panel-fila:focus-within {
  background: var(--crema-honda);
}

.wls-desplegable .wls-panel-todos {
  grid-column: 1 / -1;
  padding: 6px 12px 0;
}

/* Foco visible en toda la cabecera: es navegacion, no decoracion. */
.wls-cabecera a:focus-visible,
.wls-cabecera button:focus-visible {
  outline: 3px solid var(--magenta-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wls-desplegable .wls-panel { transition: none; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Cifras de un caso. Las pinta el shortcode [wls_cifras], porque
   `cifras` es un array de meta y los datos dinamicos de Bricks no
   recorren arrays. El estilo vive aqui para que siga saliendo de
   los tokens y no de HTML con estilo dentro.
   ───────────────────────────────────────────────────────────── */

.wls-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wls-cifras li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wls-cifras strong {
  font: 800 30px/1 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--text-primary);
}

.wls-cifras span {
  font: 400 var(--text-xs)/1.4 Archivo, system-ui, sans-serif;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────
   Carrusel en hover, en la rejilla de ejemplos de la portada.

   POR QUE ASI
   - Sin JS y sin libreria, como manda CLAUDE.md. Es una animacion de
     `background-image` con `steps()`, que es discreta y no interpola.
   - Las laminas viven en el TEMA (`assets/carrusel/`) y se piden con
     ruta relativa a esta hoja: funcionan igual en local, staging y
     produccion, sin depender del dominio ni de un id de adjunto.
   - Van en `::after` y NO como <img> apilados: un navegador solo
     descarga la imagen de fondo de una regla que llega a aplicarse, asi
     que quien no pasa el raton no se descarga nada. La portada sigue
     siendo un <img> de verdad: con alt, lazy y srcset.
   - Solo en punteros finos con hover. En movil no hay hover y la
     portada estatica ya cuenta lo que hay que contar; no se
     autorreproduce nada.
   - `prefers-reduced-motion` la apaga entera.
   ───────────────────────────────────────────────────────────── */

.wls-carrusel {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .wls-carrusel::after {
    content: "";
    position: absolute;
    top: 16px;            /* el padding de la tarjeta */
    left: 16px;
    right: 16px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;  /* el mismo radio que la portada */
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
  }

  .wls-carrusel:hover::after,
  .wls-carrusel:focus-within::after {
    animation: wls-carrusel 5.2s steps(1, end) infinite;
  }
}

@keyframes wls-carrusel {
  0%, 24.99% {
    opacity: 0;
  }
  25%, 49.99% {
    opacity: 1;
    background-image: url(assets/carrusel/slide-2.webp);
  }
  50%, 74.99% {
    opacity: 1;
    background-image: url(assets/carrusel/slide-3.webp);
  }
  75%, 100% {
    opacity: 1;
    background-image: url(assets/carrusel/slide-4.webp);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wls-carrusel:hover::after,
  .wls-carrusel:focus-within::after {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Reels animados, en la misma rejilla de ejemplos.

   Mismo `::after` que el carrusel, y por el mismo motivo: el navegador
   solo descarga la imagen de fondo de una regla que llega a aplicarse,
   asi que quien no pasa el raton no se descarga nada. Aqui no hacen
   falta keyframes: el WebP animado se reproduce solo.

   POR QUE WEBP ANIMADO Y NO <video>
   Un <video> necesita JavaScript para arrancar en hover, y este tema no
   tiene ni una linea de JS propio. Con tipografia sobre plano de color
   el bucle entero comprime a ~60 KB, asi que meter un reproductor no
   compensa.

   `prefers-reduced-motion` no lo pausa: lo esconde. Un WebP animado no
   se puede parar desde CSS, asi que quien pide menos movimiento se
   queda con la portada estatica, que es lo correcto.
   ───────────────────────────────────────────────────────────── */

.wls-reel {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .wls-reel::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
  }

  .wls-reel:hover::after,
  .wls-reel:focus-within::after {
    opacity: 1;
  }

  /* La URL vive SOLO dentro de :hover. Es lo que hace que no se pida
     nada hasta que alguien interactua. */
  .wls-reel--seo:hover::after,
  .wls-reel--seo:focus-within::after {
    background-image: url(assets/reels/reel-seo-local.webp);
  }

  .wls-reel--tiktok:hover::after,
  .wls-reel--tiktok:focus-within::after {
    background-image: url(assets/reels/tiktok-reporting.webp);
  }

  .wls-reel--auditoria:hover::after,
  .wls-reel--auditoria:focus-within::after {
    background-image: url(assets/reels/reel-auditoria.webp);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wls-reel:hover::after,
  .wls-reel:focus-within::after {
    opacity: 0;
    background-image: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Aviso de que la tarjeta se mueve.

   POR QUE HACE FALTA
   El carrusel y los reels solo arrancan al pasar el raton, y nada en
   la rejilla lo insinuaba: un visitante podia no pasar por encima
   nunca y llevarse cinco tarjetas quietas. Un efecto que nadie
   descubre es un efecto que no existe.

   COMO
   Una pastilla diminuta en la esquina de la portada, con el triangulo
   de reproduccion. Lleva su propio fondo en --tinta, asi que se lee
   igual sobre las cinco portadas -crema, amarillo, magenta, marino y
   tinta- sin una regla por tarjeta. **Se desvanece al pasar el raton**:
   una vez que la pieza se mueve, el aviso sobra.

   El triangulo va como texto y no como imagen para no pedir un fichero
   mas por una forma de once pixeles. Su pila tipografica es de sistema
   a proposito: IBM Plex Mono no trae el glifo y saldria un cuadro.

   Vive DENTRO de la misma guarda que el efecto: si no hay hover fino o
   se pide menos movimiento, no hay efecto y tampoco hay aviso. Anunciar
   algo que no va a pasar es peor que no anunciar nada.
   ───────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .wls-reel::before,
  .wls-carrusel::before {
    content: "▶";
    position: absolute;
    top: 28px;
    right: 26px;
    z-index: 2;
    padding: 4px 7px 5px;
    border-radius: 999px;
    background: var(--tinta);
    color: var(--crema);
    font: 400 9px/1 system-ui, "Segoe UI Symbol", sans-serif;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .wls-reel:hover::before,
  .wls-reel:focus-within::before,
  .wls-carrusel:hover::before,
  .wls-carrusel:focus-within::before {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wls-reel::before,
  .wls-carrusel::before {
    content: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Firma de las fichas. La pinta el shortcode [wls_firma].
   Va en mono como el resto de etiquetas de dato del sistema, y
   el nombre en --text-primary para que la persona destaque sobre
   la fecha: es la parte que aporta la senal de autoria.
   No baja de --text-xs (13px), que es el suelo del proyecto.
   ───────────────────────────────────────────────────────────── */

.wls-firma {
  margin: 0;
  font: 500 var(--text-xs)/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wls-firma-quien {
  font-weight: 600;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────
   Paginas legales y cualquier contenido que no pase por Bricks.
   Privacidad y cookies las genera Complianz como paginas de
   bloques, y el aviso legal tambien: sin esto salen con la
   tipografia del navegador y a todo el ancho, que en un texto
   largo es ilegible.
   ───────────────────────────────────────────────────────────── */

/* OJO: Complianz pone la clase `cmplz-document` en el BODY, no en un
   contenedor de contenido. Limitar el ancho con `.cmplz-document` estrangula
   la pagina entera, cabecera y pie incluidos. El contenido va dentro de
   #brx-content, que es lo que hay que acotar. */

.wls-contenido-clasico #brx-content {
  max-width: min(72ch, 100%);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) var(--section-x);
  color: var(--text-primary);
  font: 400 17px/1.7 Archivo, system-ui, sans-serif;
}

.wls-contenido-clasico #brx-content h1,
.wls-contenido-clasico #brx-content h2,
.wls-contenido-clasico #brx-content h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.wls-contenido-clasico #brx-content h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 24px; }
.wls-contenido-clasico #brx-content h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 40px 0 12px; }
.wls-contenido-clasico #brx-content h3 { font-size: 21px; margin: 28px 0 10px; }

.wls-contenido-clasico #brx-content p,
.wls-contenido-clasico #brx-content li { color: var(--text-primary); }

.wls-contenido-clasico #brx-content ul,
.wls-contenido-clasico #brx-content ol { padding-left: 1.2em; }

.wls-contenido-clasico #brx-content li { margin-bottom: 6px; }

.wls-contenido-clasico #brx-content a {
  color: var(--magenta-ink);
  text-underline-offset: 3px;
}

.wls-contenido-clasico #brx-content code {
  font: 500 .9em "IBM Plex Mono", ui-monospace, monospace;
  background: var(--crema-honda);
  padding: 2px 6px;
  border-radius: 6px;
}

.wls-contenido-clasico #brx-content h1,
.wls-contenido-clasico #brx-content h2,
.wls-contenido-clasico #brx-content h3 { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   Boton flotante de WhatsApp.
   Es un enlace, no un widget: nada que cargar y nada que
   bloquear antes del consentimiento. El texto se oculta en
   movil, donde el espacio manda, pero el aria-label sigue ahi.
   ───────────────────────────────────────────────────────────── */

.wls-whatsapp {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--tinta);
  color: var(--crema);
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font: 800 15px "Bricolage Grotesque", system-ui, sans-serif;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}

.wls-whatsapp:hover,
.wls-whatsapp:focus-visible {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--text-on-accent);
  transform: translateY(-2px);
}

.wls-whatsapp:focus-visible {
  outline: 3px solid var(--magenta-ink);
  outline-offset: 3px;
}

.wls-whatsapp svg { flex: none; }

@media (max-width: 560px) {
  .wls-whatsapp { padding: 14px; }
  .wls-whatsapp span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wls-whatsapp { transition: none; }
  .wls-whatsapp:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Calendario de reservas (Easy Appointments).
   El plugin trae su propio CSS de Bootstrap antiguo. Aqui se le
   impone la paleta y la tipografia del sistema para que no
   parezca un injerto: pildoras, borde de 2px y magenta.
   ───────────────────────────────────────────────────────────── */

.wls-reservas .ea-bootstrap,
.wls-reservas .ea-bootstrap * {
  /* !important: el plugin impone una serif en los dias y en el resumen. */
  font-family: Archivo, system-ui, sans-serif !important;
}

.wls-reservas .ea-bootstrap label,
.wls-reservas .ea-bootstrap .control-label {
  font: 600 var(--text-xs)/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wls-reservas .ea-bootstrap select,
.wls-reservas .ea-bootstrap input[type="text"],
.wls-reservas .ea-bootstrap input[type="email"],
.wls-reservas .ea-bootstrap input[type="tel"],
.wls-reservas .ea-bootstrap textarea {
  border: var(--border-width) solid rgba(26, 13, 22, .2);
  border-radius: 12px;
  padding: 12px 15px;
  background: var(--blanco);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  height: auto;
  box-shadow: none;
}

.wls-reservas .ea-bootstrap .btn,
.wls-reservas .ea-bootstrap button {
  background: var(--magenta);
  border: var(--border-width) solid var(--magenta);
  border-radius: var(--radius-pill);
  padding: 14px 26px;
  color: var(--text-on-accent);
  font: 800 15px "Bricolage Grotesque", system-ui, sans-serif;
  text-shadow: none;
}

.wls-reservas .ea-bootstrap .btn:hover,
.wls-reservas .ea-bootstrap button:hover {
  background: var(--magenta-ink);
  border-color: var(--magenta-ink);
}

/* Dias y horas disponibles */
.wls-reservas .ea-bootstrap .ea-slot,
.wls-reservas .ea-bootstrap td.day {
  border-radius: 10px;
}

.wls-reservas .ea-bootstrap td.day.active,
.wls-reservas .ea-bootstrap .ea-slot.selected {
  background: var(--tinta);
  color: var(--crema);
}

/* El titular «Book an appointment» esta incrustado en el JS del plugin y no
   es traducible. Se oculta: la seccion ya tiene su propio h2 en espanol, y
   asi ademas no hay dos h2 seguidos ni una cadena en ingles. */
.wls-reservas .ea-booking-title { display: none; }

/* ─────────────────────────────────────────────────────────────
   Contraste del calendario de reservas.
   El plugin pinta los dias con grises de alfa muy bajo: los
   numeros daban 1,91:1 y las cabeceras 2,82:1, con AA pidiendo
   4,5. Eran 42 fallos en una pagina, y el umbral de
   accesibilidad >=95 es bloqueante. Se reemplazan por los
   tokens a opacidad completa.
   ───────────────────────────────────────────────────────────── */

.wls-reservas .ea-bootstrap label,
.wls-reservas .ea-bootstrap .ea-label,
.wls-reservas .ea-bootstrap .control-label {
  color: var(--text-primary);
  opacity: 1;
}

.wls-reservas .ui-datepicker th,
.wls-reservas .ea-bootstrap thead th {
  color: var(--text-primary);
  font: 600 var(--text-xs)/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  opacity: 1;
}

.wls-reservas .ui-datepicker td a,
.wls-reservas .ui-datepicker td span,
.wls-reservas .ea-bootstrap td a,
.wls-reservas .ea-bootstrap td span {
  color: var(--text-primary);
  opacity: 1;
  font-size: 14px;
}

/* Dias no seleccionables: tienen que leerse, solo que sin invitar al clic.
   rgba(26,13,22,.62) da 5,16:1 sobre blanco, que es el minimo que fija el
   sistema para texto secundario. */
.wls-reservas .ui-datepicker td.ui-datepicker-unselectable span,
.wls-reservas .ui-datepicker .ui-state-disabled,
.wls-reservas .ea-bootstrap .ui-state-disabled {
  color: rgba(26, 13, 22, .62);
  opacity: 1;
}

.wls-reservas .ui-datepicker-prev span,
.wls-reservas .ui-datepicker-next span,
.wls-reservas .ea-bootstrap .ui-icon {
  color: var(--text-primary);
  opacity: 1;
}

.wls-reservas .ui-datepicker-title,
.wls-reservas .ea-bootstrap .ui-datepicker-title {
  color: var(--text-primary);
  font: 800 17px "Bricolage Grotesque", system-ui, sans-serif;
}

/* Dia seleccionado y dia con hueco */
.wls-reservas .ui-datepicker td .ui-state-active,
.wls-reservas .ea-bootstrap td.selected a {
  background: var(--tinta);
  color: var(--crema);
  border-radius: 10px;
}

.wls-reservas .ea-bootstrap .ea-help-text,
.wls-reservas .ea-bootstrap small {
  color: rgba(26, 13, 22, .62);
}

/* Ultimos grises del plugin que no llegaban a AA. */
.wls-reservas .ea-summary-text,
.wls-reservas .ea-bootstrap .ea-required-note,
.wls-reservas .ea-bootstrap p,
.wls-reservas .ea-bootstrap .text-muted {
  color: rgba(26, 13, 22, .62);
  opacity: 1;
}

.wls-reservas .ea-bootstrap .ea-summary-text.empty {
  color: rgba(26, 13, 22, .62);
  font-size: 14px;
}

/* Panel de citas recurrentes: la auditoria es una reunion unica. Solo ese panel:
   `.ea_hide_show` entero contiene ademas nombre, correo y telefono, y ocultarlo
   dejaba enviar reservas vacias. */
.wls-reservas .form-group:has(#repeat_booking) {
  display: none !important;
}

/* La nota de campos obligatorios venia con alfa .48 y daba 3,07:1. */
.wls-reservas .ea-bootstrap small,
.wls-reservas .step small {
  color: rgba(26, 13, 22, .62) !important;
  opacity: 1;
}

/* «Select a date & time to continue» esta incrustado en el JS del plugin.
   Solo aparece mientras no hay fecha elegida, y la seccion ya explica en
   espanol de que va: se oculta solo esa variante, no el resumen entero. */
.wls-reservas .ea-summary-text.empty { display: none; }

/* El plugin pone la nota de campos obligatorios a 12,5px, por debajo del
   suelo de 13px del proyecto. */
.wls-reservas .ea-bootstrap small,
.wls-reservas .step small {
  font-size: var(--text-xs) !important;
}

/* ─────────────────────────────────────────────────────────────
   Enlace de consentimiento sobre la franja amarilla.
   --magenta-ink esta calibrado para magenta sobre CREMA (5,45:1);
   sobre amarillo cae a 4,27:1. El que cumple ahi es --tinta, con
   13,64:1. Va subrayado para que siga reconociendose como enlace
   sin depender del color, que es lo que pide WCAG 1.4.1.
   La regla es afirmativa, no un parche: el enlace de esta franja
   se pinta en tinta siempre, pinte quien pinte la pagina.
   ───────────────────────────────────────────────────────────── */

.wls-franja-newsletter a,
.wls-franja-newsletter label a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wls-franja-newsletter a:hover,
.wls-franja-newsletter a:focus-visible {
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   Menu movil
   ---------------------------------------------------------------------------
   Hasta el 2026-09-10 la web NO tenia navegacion en movil: `.wls-nav` se
   ocultaba por debajo de 900px y no habia nada que la sustituyera, asi que los
   trece enlaces del menu eran inalcanzables desde un telefono. El prototipo si
   lo traia (`<details data-mnav>` en inicio.dc.html) y se quedo sin maquetar.

   Va con `<details>` y sin una linea de JS, como pide CLAUDE.md: el desplegable
   abre y cierra por si solo, es accesible por teclado y aguanta si el JS falla.
   La forma sale del prototipo: boton de 46px con borde de 2px y panel de
   min(78vw, 300px) con la sombra de panel grande.
   -------------------------------------------------------------------------- */

.wls-mnav {
  display: none;
  position: relative;
  /* El `block` de Bricks nace a ancho completo: sin esto el boton se lleva la
     fila entera y la hamburguesa cae debajo del logo. */
  width: auto;
  flex: 0 0 auto;
}

.wls-mnav__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: var(--border-width) solid var(--tinta);
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

/* Safari pinta su propio triangulo si no se le quita el marcador. */
.wls-mnav__boton::-webkit-details-marker {
  display: none;
}

.wls-mnav__boton:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

/* Las tres barras: una caja y sus dos pseudoelementos, no tres elementos. */
.wls-mnav__icono,
.wls-mnav__icono::before,
.wls-mnav__icono::after {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--tinta);
  border-radius: 2px;
}

.wls-mnav__icono {
  position: relative;
}

.wls-mnav__icono::before,
.wls-mnav__icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.wls-mnav__icono::before { top: -6.5px; }
.wls-mnav__icono::after  { top: 6.5px; }

/* Abierto: las barras se cruzan en aspa. */
.wls-mnav[open] .wls-mnav__icono { background: transparent; }
.wls-mnav[open] .wls-mnav__icono::before { top: 0; transform: rotate(45deg); }
.wls-mnav[open] .wls-mnav__icono::after  { top: 0; transform: rotate(-45deg); }

.wls-mnav__panel {
  /* Un `block` de Bricks nace en flex y aqui repartia los enlaces en dos
     columnas con scroll horizontal. Los enlaces van uno debajo de otro. */
  display: block;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 60;
  width: min(78vw, 300px);
  /* Bricks pone `max-width:100%` a todo elemento, y el contenedor aqui es el
     boton de 46px: sin esto el panel sale de 46px de ancho. */
  max-width: none;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--crema);
  border: var(--border-width) solid var(--tinta);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
}

.wls-mnav__enlace {
  display: block;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(26, 13, 22, .14);
}

.wls-mnav__enlace:last-child { border-bottom: 0; }

/* El CTA cierra el panel en magenta, como el boton de la cabecera. */
.wls-mnav__enlace--cta {
  background: var(--magenta);
  color: var(--text-on-accent);
}

@media (max-width: 900px) {
  .wls-mnav { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .wls-mnav__icono,
  .wls-mnav__icono::before,
  .wls-mnav__icono::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Aviso de estado
   ---------------------------------------------------------------------------
   Para decir algo que el visitante necesita saber antes de seguir leyendo, y
   que no es marketing: hoy lo usa /kit-digital/ para avisar de que las
   convocatorias del programa estan cerradas. Amarillo sobre tinta da 13,64:1.
   -------------------------------------------------------------------------- */

.wls-aviso {
  padding: 16px 20px;
  margin-block: 4px 8px;
  background: var(--amarillo);
  border: var(--border-width) solid var(--tinta);
  border-radius: 16px;
  max-width: 62ch;
}

.wls-aviso a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Opciones de formulario
   ---------------------------------------------------------------------------
   Las etiquetas de campo van en mono y versalitas, que es la marca. Pero las
   OPCIONES de un radio o un checkbox son frases -«recuperar posiciones
   perdidas»-, y una frase en versalitas se lee mas despacio. Las etiquetas se
   quedan como estan; las opciones pasan a Archivo y caja baja.
   -------------------------------------------------------------------------- */

.brxe-form .form-group li label {
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Barra de accion fija en movil
   ---------------------------------------------------------------------------
   Por debajo de 900px la cabecera se queda solo con el logo y la hamburguesa,
   asi que en cuanto el visitante hace scroll no le queda ninguna llamada a la
   accion a la vista. Un agregado de 33 experimentos da 27% de tests ganadores
   con el doble de exito en movil que en escritorio.

   Se lleva el hueco por delante con `padding-bottom` en el body para no tapar
   el final del pie, y empuja al boton de WhatsApp hacia arriba.
   -------------------------------------------------------------------------- */

.wls-cta-fija { display: none; }

@media (max-width: 900px) {
  .wls-cta-fija {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding: 15px 20px;
    text-align: center;
    background: var(--magenta);
    border-top: var(--border-width) solid var(--tinta);
    text-decoration: none;
  }

  body { padding-bottom: 62px; }

  /* El boton de WhatsApp se sube por encima de la barra: antes se montaba
     sobre la franja de cifras y sobre el boton de enviar del formulario. */
  .wls-whatsapp {
    bottom: 78px;
    padding: 12px;
  }

  .wls-whatsapp span { display: none; }
}

/* ---------------------------------------------------------------------------
   Equipo (/nosotros/).

   El muñeco es un fondo, no una <img>: es decorativo, el nombre va escrito al
   lado, y un SVG servido como imagen no recibe :hover. La sonrisa es otro
   fichero y su URL vive SOLO dentro de :hover, como los reels de la portada:
   quien no interactua no la descarga. Ver scripts/generar_munecos_equipo.py.
   --------------------------------------------------------------------------- */
.wls-acento { color: var(--magenta); }

.wls-trama-puntos {
  background-image: url(assets/equipo/trama.svg);
  background-size: 22px 22px;
}

.wls-miembro {
  position: relative;
  transition: transform var(--duration-base) var(--ease-out);
}

.wls-miembro-cuerpo { flex: 1; }

.wls-miembro-correo {
  display: block;
  align-self: stretch;
  margin-top: auto;
  text-decoration: none;
}

.wls-miembro-correo:hover { color: var(--magenta-ink); }

.wls-miembro-correo:focus-visible,
.wls-directorio-enlace:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

.wls-doll {
  position: relative;
  flex: none;
  width: 150px;
  height: 174px;
  margin: 0 auto 4px;
  background: center / contain no-repeat;
}

.wls-doll--juan   { background-image: url(assets/equipo/juan.svg); }
.wls-doll--irene  { background-image: url(assets/equipo/irene.svg); }
.wls-doll--marcos { background-image: url(assets/equipo/marcos.svg); }
.wls-doll--diego  { background-image: url(assets/equipo/diego.svg); }
.wls-doll--carla  { background-image: url(assets/equipo/carla.svg); }
.wls-doll--hugo   { background-image: url(assets/equipo/hugo.svg); }
.wls-doll--elena  { background-image: url(assets/equipo/elena.svg); }

/* La tarjeta de la persona ocupa la fila entera. */
.wls-miembro.wls-miembro--humano {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  column-gap: var(--space-xl);
  padding: var(--space-lg);
  outline: 4px solid var(--magenta);
  outline-offset: -2px;
}

.wls-miembro--humano .wls-doll {
  width: 200px;
  height: 232px;
  margin: 0;
}

@media (max-width: 900px) {
  .wls-miembro.wls-miembro--humano {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
  }

  .wls-miembro--humano .wls-doll { margin: 0 auto; }
}

.wls-directorio-enlace {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-field);
  background: var(--blanco);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out);
}

.wls-directorio-correo {
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .wls-miembro:hover { transform: translateY(-4px); }
  .wls-directorio-enlace:hover { transform: translateX(6px); }

  .wls-miembro:hover .wls-doll::after,
  .wls-miembro:focus-within .wls-doll::after {
    content: "";
    position: absolute;
    inset: 0;
    background: center / contain no-repeat;
  }

  .wls-miembro:hover .wls-doll--juan::after,
  .wls-miembro:focus-within .wls-doll--juan::after { background-image: url(assets/equipo/juan-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--irene::after,
  .wls-miembro:focus-within .wls-doll--irene::after { background-image: url(assets/equipo/irene-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--marcos::after,
  .wls-miembro:focus-within .wls-doll--marcos::after { background-image: url(assets/equipo/marcos-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--diego::after,
  .wls-miembro:focus-within .wls-doll--diego::after { background-image: url(assets/equipo/diego-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--carla::after,
  .wls-miembro:focus-within .wls-doll--carla::after { background-image: url(assets/equipo/carla-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--hugo::after,
  .wls-miembro:focus-within .wls-doll--hugo::after { background-image: url(assets/equipo/hugo-sonrisa.svg); }
  .wls-miembro:hover .wls-doll--elena::after,
  .wls-miembro:focus-within .wls-doll--elena::after { background-image: url(assets/equipo/elena-sonrisa.svg); }
}

@media (prefers-reduced-motion: reduce) {
  .wls-miembro,
  .wls-directorio-enlace { transition: none; }

  .wls-miembro:hover,
  .wls-directorio-enlace:hover { transform: none; }
}

/* Enlace dentro de un parrafo sobre tinta: magenta-ink daria 3,2:1. */
.wls-enlace {
  color: var(--amarillo);
  font-weight: 700;
  text-decoration: underline;
}

.wls-desplegable .wls-panel.wls-panel--sectores { min-width: 340px; }

/* Tablas dentro del cuerpo de un recurso: en movil hacen scroll propio y las
   filas vacias de las plantillas conservan altura para poder rellenarlas. */
/* ---------------------------------------------------------------------------
   Precios por servicio (componente precios-servicio).
   --------------------------------------------------------------------------- */
.wls-precios-tarjeta { position: relative; }

.wls-precios-pastilla {
  position: absolute;
  top: -14px;
  left: 50%;
  width: auto;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--magenta-ink);
  transform: translateX(-50%);
  white-space: nowrap;
}

.wls-precios-lista ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wls-precios-lista li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
}

.wls-precios-lista li::before {
  content: "✓" / "";
  position: absolute;
  left: 0;
  color: var(--magenta-ink);
  font-weight: 700;
}

.wls-precios-sube { margin-top: auto; }

.wls-precios-boton { justify-content: center; width: 100%; }

/* En una columna, la recomendada va primero. */
@media (max-width: 900px) {
  .wls-precios-tarjeta--destacada { order: -1; }
}

/* ---------------------------------------------------------------------------
   Movil: contacto fijo, formularios y objetivos tactiles.
   --------------------------------------------------------------------------- */

/* Boton de envio a la altura del resto de botones del sitio. */
.brxe-form button[type="submit"],
.brxe-form .bricks-button {
  min-height: 48px;
  padding-inline: 28px;
}

/* Flechas del calendario: el plugin depende de una fuente de iconos que no
   carga y pintaba «Ant» y «Sig» encimados. El nombre accesible sale del
   aria-label que les pone inc/reservas.php. */
.wls-reservas .ui-datepicker .ui-datepicker-header {
  position: relative !important;
  min-height: 48px;
}

.wls-reservas .ui-datepicker .ui-datepicker-prev,
.wls-reservas .ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 2px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0 !important;
  text-decoration: none;
  cursor: pointer;
}

.wls-reservas .ui-datepicker .ui-datepicker-prev { left: 0 !important; right: auto !important; }
.wls-reservas .ui-datepicker .ui-datepicker-next { right: 0 !important; left: auto !important; }

.wls-reservas .ui-datepicker .ui-datepicker-prev::before,
.wls-reservas .ui-datepicker .ui-datepicker-next::before {
  position: static !important;
  font: 800 22px/1 "Bricolage Grotesque", system-ui, sans-serif !important;
}

.wls-reservas .ui-datepicker .ui-datepicker-prev::before { content: "←" !important; }
.wls-reservas .ui-datepicker .ui-datepicker-next::before { content: "→" !important; }

.wls-reservas .ui-datepicker .ui-datepicker-prev::after,
.wls-reservas .ui-datepicker .ui-datepicker-next::after { content: none !important; }

.wls-reservas .ui-datepicker .ui-datepicker-prev.ui-state-disabled { opacity: .35; cursor: default; }

.wls-reservas .ui-datepicker .ui-datepicker-title {
  float: none !important;
  width: auto !important;
  margin: 0 48px !important;
  line-height: 48px !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  /* WhatsApp entra en la barra inferior: flotando tapaba botones y textos, y
     sobre las secciones oscuras se perdia. */
  .wls-cta-fija {
    right: 64px;
    width: auto;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .wls-whatsapp,
  .wls-whatsapp:hover,
  .wls-whatsapp:focus-visible {
    right: 0;
    bottom: 0;
    justify-content: center;
    width: 64px;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .wls-whatsapp span { display: none; }

  /* iOS amplia la pagina al enfocar un campo de menos de 16 px. */
  .brxe-form input:not([type="checkbox"]):not([type="radio"]),
  .brxe-form select,
  .brxe-form textarea,
  .wls-reservas .ea-bootstrap input,
  .wls-reservas .ea-bootstrap select,
  .wls-reservas .ea-bootstrap textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .brxe-form textarea,
  .wls-reservas .ea-bootstrap textarea { min-height: 120px !important; }

  .brxe-form input[type="checkbox"],
  .brxe-form input[type="radio"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--magenta-ink);
  }

  .brxe-form .options-wrapper li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }

  .brxe-form .options-wrapper li label { flex: 1; margin: 0; }

  /* Enlaces sueltos, nunca los que van dentro de un parrafo. */
  main a.brxe-text-basic {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Migas de pan: cada una tiene su separador al lado, a 44 px se descolgaba. */
  main a.brxe-text-basic:has(+ span.brxe-text-basic) { min-height: 28px; }

  #brx-footer a.brxe-text-basic:not(.wls-cta-fija) {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .wls-mnav__panel a.wls-mnav__enlace--sub {
    padding: 13px 20px 13px 36px;
    font-weight: 500;
  }
}

@media (max-width: 560px) {
  /* Una columna: a dos, el correo se cortaba y las etiquetas se desalineaban. */
  .brxe-form .form-group:not(.submit-button-wrapper) {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .brxe-form .submit-button-wrapper,
  .brxe-form .submit-button-wrapper button,
  .brxe-form button[type="submit"] { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Blog. Piezas de child-theme/inc/blog.php y plantillas wls-articulo,
   wls-categoria y blog.
   --------------------------------------------------------------------------- */
/* !important: el `display` de la seccion lo fija Bricks con su propio selector. */
.wls-seccion-opcional:not(:has(.wls-tarjeta, .wls-enlace-pilar)) { display: none !important; }

.wls-etiqueta,
.wls-migas {
  display: block;
  margin: 0;
  color: var(--magenta-ink);
  font: 600 var(--text-xs)/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wls-etiqueta--suave {
  color: var(--text-secondary);
  font-weight: 500;
}

.wls-migas { color: var(--text-secondary); }

.wls-migas a {
  display: inline-block;
  padding-block: 6px;
  color: var(--text-primary);
  text-decoration: none;
}

.wls-migas a:hover { text-decoration: underline; }

.wls-autor-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 6px;
}

.wls-blog-muneco {
  flex: none;
  border-radius: 50%;
  background: var(--crema-honda);
}

.wls-autor-fila__nombre {
  display: block;
  min-height: 28px;
  padding-block: 3px;
  color: var(--text-primary);
  font: 800 16px/1.4 "Bricolage Grotesque", system-ui, sans-serif;
  text-decoration: none;
}

.wls-autor-fila__nombre:hover { text-decoration: underline; }

.wls-portada { margin: 14px 0 0; }

.wls-portada img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-card);
}

.wls-portada figcaption { margin-top: 8px; }

/* Articulo */
.wls-articulo-rejilla {
  display: grid;
  grid-template-columns: 260px minmax(0, 72ch);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.wls-articulo-lateral {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wls-indice ol {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.wls-indice li { border-bottom: 1px solid rgba(26, 13, 22, .14); }

.wls-indice a {
  display: block;
  padding-block: 8px;
  color: var(--text-primary);
  font: 500 14px/1.35 Archivo, system-ui, sans-serif;
  text-decoration: none;
}

.wls-indice a:hover { text-decoration: underline; }

.wls-caja-servicio {
  padding: 20px;
  background: var(--tinta);
  border-radius: var(--radius-card);
  color: var(--crema);
}

.wls-caja-servicio__titulo {
  margin: 0 0 10px;
  font: 800 19px/1.15 "Bricolage Grotesque", system-ui, sans-serif;
}

.wls-caja-servicio a {
  color: var(--amarillo);
  font: 800 15px/1.4 "Bricolage Grotesque", system-ui, sans-serif;
}

.wls-prosa {
  max-width: 72ch;
  color: var(--text-primary);
  font: 400 var(--text-base)/1.65 Archivo, system-ui, sans-serif;
}

.wls-prosa > :first-child { margin-top: 0; }

.wls-prosa h2 {
  margin: 2.2em 0 .5em;
  scroll-margin-top: 96px;
  font: 800 var(--text-h2)/1 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.03em;
}

.wls-prosa h3 {
  margin: 1.6em 0 .4em;
  font: 800 var(--text-h3)/1.15 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.02em;
}

.wls-prosa p,
.wls-prosa ul,
.wls-prosa ol { margin: 0 0 1em; }

.wls-prosa ul,
.wls-prosa ol { padding-left: 1.3em; }

.wls-prosa li { margin-bottom: .4em; }

.wls-prosa a {
  color: var(--magenta-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.wls-tabla {
  overflow-x: auto;
  margin-block: 1.4em;
}

.wls-prosa blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  background: var(--crema-honda);
  border-left: 4px solid var(--magenta);
  font: 800 var(--text-lg)/1.3 "Bricolage Grotesque", system-ui, sans-serif;
}

.wls-prosa blockquote p { margin: 0; }

.wls-prosa code,
.wls-prosa pre {
  background: var(--crema-honda);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

.wls-prosa code { padding: 0 .25em; }

.wls-prosa pre {
  overflow-x: auto;
  padding: 14px;
  border-radius: 12px;
}

.wls-prosa pre code { padding: 0; }

.wls-prosa mark.dato-pendiente {
  padding: 0 .3em;
  background: var(--amarillo);
  color: var(--tinta);
}

.wls-autor-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 72ch;
}

.wls-autor-tarjeta p { margin: 0 0 8px; }

.wls-autor-tarjeta__nombre { font: 800 var(--text-h3)/1.15 "Bricolage Grotesque", system-ui, sans-serif; }

.wls-autor-tarjeta__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.wls-autor-tarjeta__enlaces a,
.wls-enlace-fuerte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--magenta-ink);
  font: 800 15px/1.3 "Bricolage Grotesque", system-ui, sans-serif;
  text-decoration: none;
}

.wls-enlace-fuerte:hover,
.wls-autor-tarjeta__enlaces a:hover { text-decoration: underline; }

.wls-enlace-pilar { margin-top: var(--space-md); }

/* Tarjeta de articulo */
.wls-rejilla-articulos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.wls-tarjeta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blanco);
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-card);
  color: var(--text-primary);
}

.wls-tarjeta__imagen { display: block; }

.wls-tarjeta__imagen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wls-tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.wls-tarjeta__cuerpo p { margin: 0; }

.wls-tarjeta__titulo {
  margin: 0;
  font: 800 var(--text-h3)/1.15 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.02em;
}

.wls-tarjeta__titulo a {
  color: inherit;
  text-decoration: none;
}

.wls-tarjeta__titulo a:hover { text-decoration: underline; }

.wls-tarjeta__extracto {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.wls-tarjeta--ancha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

.wls-tarjeta--ancha .wls-tarjeta__extracto { -webkit-line-clamp: 4; line-clamp: 4; }

.wls-paginacion ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.wls-paginacion a,
.wls-paginacion span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  color: var(--text-primary);
  font-weight: 700;
}

/* Fondos por categoria: el mismo criterio que las portadas. El blanco sobre
   magenta da 4,50:1: por eso ahi ninguna etiqueta baja de 16 px. */
.wls-cat--visibilidad-ia, .category-visibilidad-ia .wls-cat-cabecera { --cat-fondo: var(--tinta);       --cat-tinta: var(--crema); }
.wls-cat--automatizacion, .category-automatizacion .wls-cat-cabecera { --cat-fondo: var(--crema);       --cat-tinta: var(--tinta); }
.wls-cat--ecommerce,      .category-ecommerce .wls-cat-cabecera      { --cat-fondo: var(--amarillo);    --cat-tinta: var(--tinta); }
.wls-cat--datos,          .category-datos .wls-cat-cabecera          { --cat-fondo: var(--marino);      --cat-tinta: var(--crema); }
.wls-cat--ia-marketing,   .category-ia-marketing .wls-cat-cabecera   { --cat-fondo: var(--crema);       --cat-tinta: var(--tinta); }
.wls-cat--seo,            .category-seo .wls-cat-cabecera            { --cat-fondo: var(--blanco);      --cat-tinta: var(--tinta); }
.wls-cat--contenido,      .category-contenido .wls-cat-cabecera      { --cat-fondo: var(--magenta);     --cat-tinta: var(--blanco); }
.wls-cat--marketplaces, .category-marketplaces .wls-cat-cabecera { --cat-fondo: var(--marino); --cat-tinta: var(--crema); }

.category-seo .wls-cat-cabecera { --cat-fondo: var(--crema-honda); }

.wls-cat-superficie {
  background: var(--cat-fondo, var(--crema));
  color: var(--cat-tinta, var(--tinta));
}

.wls-cat-superficie :is(h1, h2, h3, p, span, a, .wls-etiqueta-sup) { color: inherit; }

.wls-cat-lead {
  max-width: 60ch;
  margin: 0;
  font: 400 var(--text-lg)/var(--leading-body) Archivo, system-ui, sans-serif;
}

.wls-cat-superficie .wls-autor-fila__nombre { color: inherit; }

.wls-cat--contenido .wls-cat-tarjeta__enlace,
.category-contenido .wls-etiqueta-sup { font-size: 16px; }

.wls-cat-tarjeta {
  padding: var(--space-md);
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-card);
}

.wls-cat-tarjeta .wls-doll {
  width: 64px;
  height: 74px;
  margin: 0;
}

.wls-cat-tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
}

@media (max-width: 900px) {
  .wls-articulo-rejilla { grid-template-columns: minmax(0, 1fr); }
  .wls-articulo-lateral { display: none; }
  .wls-rejilla-articulos,
  .wls-tarjeta--ancha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .wls-autor-tarjeta { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Optimizacion SEO y GEO de las paginas.
   --------------------------------------------------------------------------- */

/* Segunda linea del H1: la promesa, detras de la palabra clave. */
.wls-h1-2 {
  display: block;
  margin-top: .22em;
  color: var(--magenta);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.wls-ficha-caja {
  margin-top: 34px;
  padding-top: 26px;
  border-top: var(--border-width) solid var(--border-strong);
}

.wls-ficha {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0 0 12px;
}

.wls-ficha dd { margin: 0; }

.wls-no-hacemos {
  grid-column: 1 / -1;
  padding: var(--space-md);
  background: var(--amarillo);
  border-radius: var(--radius-card);
}

/* Tarjetas de sector: el sector como etiqueta y lo que hacemos en el como titular.
   Toda la tarjeta es enlace. Sale en todas las paginas de servicio. */
#brx-content .wls-sector-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  min-height: 190px;
  padding: 24px;
  border: var(--border-width) solid var(--tinta);
  border-radius: 20px;
  background: var(--blanco);
  box-shadow: 0 2px 0 rgba(26, 13, 22, .08), 0 18px 34px -22px rgba(26, 13, 22, .45);
  transition: transform var(--duration-base) var(--ease-out);
}

#brx-content .wls-sector-mini:hover,
#brx-content .wls-sector-mini:focus-within {
  transform: translateY(-3px);
}

#brx-content .wls-sector-mini h3 {
  margin: 0;
  color: var(--tinta);
  font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#brx-content .wls-sector-mini a {
  display: block;
  min-height: 0;
  color: var(--tinta);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-decoration: none;
}

/* El enlace cubre toda la tarjeta. */
#brx-content .wls-sector-mini a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

#brx-content .wls-sector-mini a:focus-visible {
  outline: none;
}

#brx-content .wls-sector-mini a:focus-visible::after {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  #brx-content .wls-sector-mini {
    min-height: 0;
    gap: 10px;
    padding: 20px;
  }

  #brx-content .wls-sector-mini a {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #brx-content .wls-sector-mini {
    transition: none;
  }

  #brx-content .wls-sector-mini:hover,
  #brx-content .wls-sector-mini:focus-within {
    transform: none;
  }
}

.wls-faq-extra:not(:has(h3:not(:empty))) { display: none; }

@media (max-width: 900px) {
  .wls-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wls-ficha > :last-child { grid-column: 1 / -1; }
}

/* Bloque propio de cada servicio. */
.wls-bloque-rico {
  color: var(--text-primary);
  font: 400 var(--text-base)/1.6 Archivo, system-ui, sans-serif;
}

.wls-bloque-rico p,
.wls-bloque-rico ul { max-width: 72ch; margin: 0 0 1em; }

.wls-bloque-rico ul { padding-left: 1.3em; }

.wls-bloque-rico a {
  color: var(--magenta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wls-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block: var(--space-sm);
}

.wls-dato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--crema);
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-card);
  font-weight: 700;
}

.wls-dato__n {
  color: var(--magenta-ink);
  font: 800 clamp(30px, 3vw, 42px)/1 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.03em;
}

.wls-dato__f {
  color: var(--text-secondary);
  font: 500 var(--text-sm)/1.45 Archivo, system-ui, sans-serif;
}

.wls-formula {
  max-width: none;
  padding: 16px 18px;
  background: var(--tinta);
  border-radius: 12px;
  color: var(--crema);
  font: 500 var(--text-sm)/1.6 "IBM Plex Mono", ui-monospace, monospace;
}

@media (max-width: 900px) {
  .wls-datos { grid-template-columns: minmax(0, 1fr); }
}

.wls-autor-fila__nombre a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.wls-dos-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

@media (max-width: 900px) {
  .wls-dos-col { grid-template-columns: minmax(0, 1fr); }
}

.wls-bloque-rico dt {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font: 600 var(--text-xs)/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wls-bloque-rico dd {
  font: 800 17px/1.25 "Bricolage Grotesque", system-ui, sans-serif;
}

/* La trama de puntos de las masas amarillas, solo en /equipo/ (decision de Juan, 2026-11-05). */
.wls-pagina-equipo .wls-franja-newsletter,
.wls-pagina-equipo .wls-no-hacemos {
  background-image: url(assets/equipo/trama.svg);
  background-size: 22px 22px;
}

/* Dos campos en fila: la columna izquierda deja aire. En movil van en una columna. */
@media (min-width: 561px) {
  .brxe-form .form-group:nth-child(odd):has(> input:not([type="checkbox"]):not([type="radio"])) > input {
    width: calc(100% - 14px);
  }
}

.wls-perfil-nombre {
  margin: 6px 0 8px;
  color: var(--text-primary);
  font: 800 var(--text-h2)/1 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.03em;
}

.wls-blog-sobre__mas { margin: var(--space-sm) 0 0; }

.wls-paginacion { width: 100%; }

.wls-paginacion ul { justify-content: center; }

.wls-paginacion a,
.wls-paginacion span {
  min-width: 44px;
  justify-content: center;
  border: var(--border-width) solid var(--tinta);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.wls-paginacion a { color: var(--text-primary); }

.wls-paginacion a:hover { background: var(--crema-honda); }

.wls-paginacion .current {
  background: var(--tinta);
  color: var(--crema);
}

.wls-paginacion .dots { border: 0; }

/* Guias y descargables solo en la primera pagina de /blog/. */
body.paged .wls-solo-primera { display: none !important; }

.wls-pie-home {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wls-grafico { margin: 32px 0; }

.wls-grafico img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width) solid var(--tinta);
  border-radius: 16px;
}

.wls-grafico figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-primary);
}

/* El resumen de la reserva se salia del panel en movil. */
.wls-reservas .step.final table,
.wls-reservas .step.final tbody {
  display: block;
  width: 100%;
}
.wls-reservas .step.final tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
}
.wls-reservas .step.final td {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow-wrap: anywhere;
}

/* Los dos botones de la reserva no caben en una fila en movil. */
.wls-reservas .ea-new-ui-actions {
  flex-wrap: wrap;
  width: 100%;
}
.wls-reservas .ea-new-ui-actions .ea-btn {
  flex: 1 1 auto;
}

.wls-reservas .ea-bootstrap label.wls-consentimiento {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--text-primary);
}
.wls-reservas .wls-consentimiento a {
  color: inherit;
  text-decoration: underline;
}

/* Los datos del cliente aparecen al elegir la hora, no antes. */
.wls-reservas .step.final.disabled .ea_hide_show {
  display: none !important;
}

.wls-abrir-calendario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.wls-abrir-calendario:hover,
.wls-abrir-calendario:focus-visible {
  background: var(--tinta);
  color: var(--blanco);
}

/* Banner de cookies con la marca. Rechazar pesa lo mismo que aceptar. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--blanco);
  --cmplz_banner_border_color: var(--tinta);
  --cmplz_banner_border_width: 2px;
  --cmplz_banner_border_radius: 16px;
  --cmplz_text_color: var(--tinta);
  --cmplz_hyperlink_color: var(--tinta);
  --cmplz_button_border_radius: 999px;
  --cmplz_button_font_size: 16px;
  --cmplz_button_accept_background_color: var(--tinta);
  --cmplz_button_accept_border_color: var(--tinta);
  --cmplz_button_accept_text_color: var(--crema);
  --cmplz_button_deny_background_color: var(--tinta);
  --cmplz_button_deny_border_color: var(--tinta);
  --cmplz_button_deny_text_color: var(--crema);
  --cmplz_button_settings_background_color: var(--blanco);
  --cmplz_button_settings_border_color: var(--tinta);
  --cmplz_button_settings_text_color: var(--tinta);
  font-family: 'Archivo', system-ui, sans-serif;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
  width: 100%;
  font-family: inherit;
  font-weight: 700;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-save-preferences {
  grid-column: 1 / -1;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  font-size: 14px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories * {
  font-size: 13px;
}

.wls-404 {
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--tinta);
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 20px 80px;
}
.wls-404__etiqueta {
  margin: 0 0 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wls-404__titulo {
  margin: 0 0 20px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
}
.wls-404__texto {
  font-size: 16px;
  line-height: 1.6;
}
.wls-404__lista {
  display: grid;
  gap: 12px;
  margin: 32px 0;
  padding: 0;
  list-style: none;
}
.wls-404__lista a {
  display: block;
  padding: 16px 20px;
  border: var(--border-width) solid var(--tinta);
  border-radius: 16px;
  background: var(--blanco);
  color: var(--tinta);
  text-decoration: none;
}
.wls-404__lista a:hover,
.wls-404__lista a:focus-visible {
  background: var(--crema-honda);
}
.wls-404__lista strong,
.wls-404__lista span {
  display: block;
}
.wls-404__inicio {
  color: var(--tinta);
  text-decoration: underline;
}

/* Informacion basica de proteccion de datos, desplegable bajo el boton. */
.wls-capa-legal {
  margin-top: 8px;
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.5;
}
.wls-capa-legal summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.wls-capa-legal p {
  margin: 4px 0 0;
}
.wls-capa-legal a {
  color: inherit;
  text-decoration: underline;
}

/* Telefono y correo en la linea de datos del pie. */
#brx-footer #brxe-g8fv0z a {
  color: inherit;
  text-decoration: underline;
}

/* ─────────────────────────────
   Ancho maximo del contenido: 1600 px en pantallas panoramicas.
   Decision de Juan, 2026-11-05. El diseno no limita el ancho y las tarjetas
   se estiraban sin fin a partir de 2000 px.

   Va en el relleno de cada seccion, no en un contenedor: asi los fondos siguen
   llegando de borde a borde y no hay que tocar plantillas. 1712 = 1600 + 2 x 56,
   el margen lateral maximo del diseno: por debajo nada cambia.
   Lo comprueba scripts/verificar_ancho.mjs.
   ───────────────────────────── */
@media (min-width: 1712px) {
  #brx-header > .brxe-section,
  #brx-content > .brxe-section:not(#top),
  #brx-footer > .brxe-section {
    padding-inline: calc((100% - 1600px) / 2);
  }

  /* El hero de la portada no tiene relleno propio: lo llevan sus bloques, y la
     franja magenta tiene que llegar al borde. */
  #brx-content > #top > .brxe-block {
    padding-inline: calc((100% - 1600px) / 2);
  }
}

/* ─────────────────────────────
   FAQ desplegables, sin JS: <details> y <summary>. Decision de Juan, 2026-11-05:
   sustituye a la rejilla en columnas del handoff, que quedaba desordenada.
   Las respuestas siguen en el HTML: el FAQPage y los buscadores las leen igual.
   ───────────────────────────── */
#brx-content .wls-faq-lista {
  display: block;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid rgba(26, 13, 22, .14);
}

.wls-faq-item.brxe-block,
.wls-faq-lista > .wls-faq-item {
  display: block;
  border-bottom: 1px solid rgba(26, 13, 22, .14);
}

.wls-faq-pregunta.brxe-block,
.wls-faq-pregunta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.wls-faq-pregunta::-webkit-details-marker {
  display: none;
}

.wls-faq-pregunta h3,
.wls-prosa .wls-faq-pregunta h3 {
  margin: 0;
}

.wls-prosa .wls-faq-pregunta h3 {
  font-size: 20px;
  line-height: 1.2;
}

.wls-faq-pregunta::after {
  content: "+";
  flex: none;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  transition: transform .2s ease;
}

.wls-faq-item[open] > .wls-faq-pregunta::after {
  transform: rotate(45deg);
}

.wls-faq-pregunta:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.wls-faq-item > :not(summary) {
  margin-top: 0;
  padding-bottom: 18px;
}

.wls-faq-item a {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wls-faq-item a:hover {
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wls-faq-pregunta::after { transition: none; }
}

/* ─────────────────────────────
   Tablas: un solo estilo en toda la web. Panel con borde de marca, cabecera en
   tinta, solo lineas horizontales y la primera columna como titulo de la fila.
   En movil cada fila es una ficha (las etiquetas salen de inc/tablas.php).
   ───────────────────────────── */
.wls-tabla {
  overflow: visible;
  margin-block: 1.4em;
}

.wp-block-table {
  margin: var(--space-sm) 0;
}

.wls-tabla table,
.wp-block-table table,
.wls-prosa table,
.wls-bloque-rico table,
.brxe-post-content table {
  width: 100%;
  border: var(--border-width) solid var(--tinta);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--blanco);
  box-shadow: 0 2px 0 rgba(26, 13, 22, .08), 0 18px 34px -22px rgba(26, 13, 22, .45);
}

.wls-tabla th,
.wp-block-table th,
.wls-prosa th,
.wls-bloque-rico th,
.brxe-post-content th {
  padding: 14px 18px;
  border: 0;
  background: var(--tinta);
  color: var(--crema);
  font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.wls-tabla td,
.wp-block-table td,
.wls-prosa td,
.wls-bloque-rico td,
.brxe-post-content td {
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid rgba(26, 13, 22, .14);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.wls-tabla tr:first-child td,
.wp-block-table tr:first-child td,
.wls-prosa tr:first-child td,
.wls-bloque-rico tr:first-child td,
.brxe-post-content tr:first-child td {
  border-top: 0;
}

.wls-tabla td:first-child,
.wp-block-table td:first-child,
.wls-prosa td:first-child,
.wls-bloque-rico td:first-child,
.brxe-post-content td:first-child {
  font-weight: 700;
}

/* WordPress pinta bordes en todas las celdas de .wp-block-table y su hoja carga despues. */
#brx-content .wp-block-table th {
  border: 0;
}

#brx-content .wp-block-table td {
  border: 0;
  border-top: 1px solid rgba(26, 13, 22, .14);
}

#brx-content .wp-block-table tr:first-child td {
  border-top: 0;
}

@media (max-width: 560px) {
  #brx-content .wp-block-table td {
    border: 0;
  }
}

@media (max-width: 560px) {
  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"],
  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] :is(tbody, tr, td) {
    display: block;
    width: 100%;
  }

  /* Sin display: none, para que la cabecera siga disponible en lector de pantalla. */
  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] tr:has(th) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] tr:not(:has(th)) {
    padding: 14px 16px;
    border-top: 1px solid rgba(26, 13, 22, .14);
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] tr:not(:has(th)):nth-child(1),
  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] thead + tbody tr:first-child {
    border-top: 0;
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] td {
    padding: 0;
    border-top: 0;
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] td + td {
    margin-top: 10px;
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] td:first-child {
    font-size: 16px;
  }

  :is(.wls-tabla, .wp-block-table, .wls-prosa, .wls-bloque-rico, .brxe-post-content) table[role="table"] td:not(:first-child)[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: rgba(26, 13, 22, .68);
    font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* ─────────────────────────────
   /equipo/: para que si y para que no usamos agentes de IA.
   Decision de Juan, 2026-11-05. Robots decorativos: el titulo ya dice lo mismo.
   ───────────────────────────── */
.wls-agentes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.wls-agentes__caja {
  padding: 28px;
  border: var(--border-width) solid var(--tinta);
  border-radius: 20px;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 2px 0 rgba(26, 13, 22, .08), 0 18px 34px -22px rgba(26, 13, 22, .45);
}

.wls-robot {
  display: block;
  width: 104px;
  height: 120px;
  margin-bottom: 14px;
  background: left center / contain no-repeat;
}

.wls-robot--si { background-image: url(assets/equipo/robot-si.svg); }
.wls-robot--no { background-image: url(assets/equipo/robot-no.svg); }

.wls-bloque-rico .wls-agentes__caja h3 {
  margin: 0 0 14px;
  color: var(--tinta);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.wls-bloque-rico .wls-agentes__caja ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wls-bloque-rico .wls-agentes__caja li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 30px;
  border-top: 1px solid rgba(26, 13, 22, .14);
  color: var(--tinta);
  line-height: 1.5;
}

.wls-agentes__caja li::before {
  position: absolute;
  left: 2px;
  font-weight: 700;
}

.wls-agentes__caja--si li::before { content: "✓"; }
.wls-agentes__caja--no li::before { content: "✕"; }

@media (max-width: 900px) {
  .wls-agentes { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────
   Escenas del equipo en los heros de servicio. Salen de scripts/build_escenas.py.
   Decorativas: fondo CSS, sin texto. Junto al texto cuando cabe; en movil, encima.
   ───────────────────────────── */
#brx-content .wls-hero-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 480px);
  gap: var(--space-md);
  align-items: center;
  width: 100%;
  /* El titular va con interlineado muy justo y su caja sobresale. */
  margin-top: 24px;
}

.wls-escena {
  width: 100%;
  aspect-ratio: 460 / 350;
  background: right center / contain no-repeat;
}

.wls-escena--carla-web { background-image: url(assets/equipo/carla-web.svg); }
.wls-escena--irene-seo { background-image: url(assets/equipo/irene-seo.svg); }
.wls-escena--marcos-ia { background-image: url(assets/equipo/marcos-ia.svg); }
.wls-escena--diego-auto { background-image: url(assets/equipo/diego-auto.svg); }
.wls-escena--carla-ecommerce { background-image: url(assets/equipo/carla-ecommerce.svg); }
.wls-escena--hugo-contenido { background-image: url(assets/equipo/hugo-contenido.svg); }
.wls-escena--juan-datos { background-image: url(assets/equipo/juan-datos.svg); }
.wls-escena--elena-formacion { background-image: url(assets/equipo/elena-formacion.svg); }
.wls-escena--sector-clinicas { background-image: url(assets/equipo/sector-clinicas.svg); }
.wls-escena--sector-formacion { background-image: url(assets/equipo/sector-formacion.svg); }
.wls-escena--sector-industria { background-image: url(assets/equipo/sector-industria.svg); }
.wls-escena--sector-ecommerce { background-image: url(assets/equipo/sector-ecommerce.svg); }

@media (max-width: 1000px) {
  #brx-content .wls-hero-fila {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 16px;
  }

  .wls-escena {
    order: -1;
    width: min(280px, 78%);
    margin-inline: auto;
    background-position: center;
  }
}

/* El panel del menu no puede salirse de la ventana: entre 900 y 960 px creaba scroll
   lateral en todas las paginas. */
@media (min-width: 901px) and (max-width: 1000px) {
  .wls-desplegable .wls-panel {
    min-width: 640px;
  }
}

/* ─────────────────────────────
   Pie. Datos separados en escritorio y en lineas propias en movil, donde ademas los
   enlaces van en dos columnas: en una sola, el pie medía mas de 1.300 px.
   ───────────────────────────── */
.wls-pie-dato + .wls-pie-dato::before {
  content: "· ";
}

@media (max-width: 560px) {
  #brx-footer #brxe-bwkdds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 28px;
    padding-bottom: 24px;
  }

  #brx-footer #brxe-nsshp7,
  #brx-footer #brxe-tfkmac {
    grid-column: 1 / -1;
  }

  #brx-footer #brxe-s4t7o0,
  #brx-footer #brxe-dtlb1q {
    row-gap: 2px;
  }

  #brx-footer #brxe-a611a5,
  #brx-footer #brxe-vvudzj {
    margin-bottom: 8px;
  }

  /* Redes en fila, con su etiqueta encima. */
  #brx-footer #brxe-tfkmac {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 2px;
  }

  #brx-footer #brxe-nklgjm {
    flex-basis: 100%;
    margin-bottom: 6px;
  }

  #brx-footer a.brxe-text-basic:not(.wls-cta-fija) {
    min-height: 40px;
    line-height: 1.25;
  }

  .wls-pie-dato {
    display: block;
  }

  .wls-pie-dato + .wls-pie-dato::before {
    content: none;
  }

  .wls-pie-dato a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* La barra fija inferior no debe tapar los enlaces legales. */
  #brx-footer > .brxe-section {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─────────────────────────────
   Iconos de sector en las tarjetas de portada, /sectores/ y servicios. Se decide por el
   enlace de la tarjeta, para no tocar plantillas. Salen de scripts/build_escenas.py.
   ───────────────────────────── */
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/clinicas"])::before,
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/formacion"])::before,
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/industria"])::before,
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/ecommerce"])::before {
  content: "";
  display: block;
  flex: none;
  width: 68px;
  height: 68px;
  margin-bottom: 12px;
  background: left center / contain no-repeat;
}

:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/clinicas"])::before { background-image: url(assets/equipo/sector-clinicas.svg); }
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/formacion"])::before { background-image: url(assets/equipo/sector-formacion.svg); }
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/industria"])::before { background-image: url(assets/equipo/sector-industria.svg); }
:is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/ecommerce"])::before { background-image: url(assets/equipo/sector-ecommerce.svg); }

@media (max-width: 560px) {
  :is(.wls-shadow-card, .wls-sector-mini):has(> a[href*="/sectores/"])::before {
    width: 56px;
    height: 56px;
  }
}

/* «Del blog» con el mismo margen que el resto de la pagina. El CSS generado de Bricks
   puede tardar en regenerarse: asi no depende de ello. */
@media (max-width: 1711px) {
  #brx-content > .brxe-b2om6w {
    padding-inline: var(--section-x);
  }
}