/* ============================================================
   reparo-a.css · VISIONLOVERS · 24/09/2026 · «reparo A: público y global»
   Arreglos de la auditoría forense 20-AUDITORIA-FORENSE/01-diseno-ux.md
   que caen en lo PÚBLICO (cabecera, barra fija, accesibilidad, directorio,
   ficha, blog, botones, pie). Cada bloque lleva el nº del fallo del informe
   y el selector MEDIDO en la web viva (navegador propio, 24/09 21:40–22:30).
   Se encola DESPUÉS de remate-1-1.css y arreglos.css (gana por orden) y
   además usa «html body …» para ganar a Woodmart/Directorist por especificidad.
   Solo tokens de tokens.css. UN solo !important (el borde de las pastillas de la ficha: Directorist lo lleva; está comentado).
   Móvil primero. Comentado en español.
   ============================================================ */

/* ============================================================
   G1 · Cabecera de escritorio: «Empezar el triaje» se salía 38 px a 1440
   Medido: .whb-column.whb-col-right right=1488 con innerWidth 1440; la fila
   (.whb-flex-row) va de 51 a 1389 px; el menú (8 entradas, 14 px, 9 px de
   padding) mide 807 px; el bloque 11505 (Soy profesional + Entrar + botón) 370.
   Arreglo: entre 1025 y 1440 el menú va a 13 px con 5 px de padding (como ya
   hacía c-19 por debajo de 1280), el logo a 32 px de alto y los tres botones
   un punto más compactos. MEDIDO con este CSS inyectado en la web viva:
   a 1440 el botón termina en 1389 px (= borde de la fila, antes 1478);
   a 1300 y 1200 cabe solo recogiendo «Soy profesional» (regla de abajo).
   ⚠ Por debajo de ~1100 px el menú de 8 entradas + los botones NO cabe con
   ningún CSS: hace falta subir el «punto de corte» del menú móvil de
   Woodmart a 1200 (ajuste del Header Builder) o quitar una entrada del menú.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1440px) {
  html body .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 5px; font-size: 13px; letter-spacing: 0; }
  html body .whb-header .whb-col-left .site-logo img, html body .whb-header .whb-col-left .wd-logo img { max-height: 32px; width: auto; }
  html body .whb-header .vl-header-botones { gap: var(--vl-space-xs); }
  html body .whb-header .vl-header-botones__enlace { padding: 8px 6px; font-size: var(--vl-font-caption); }
  html body .whb-header .vl-header-botones .vl-btn { padding: 8px 12px; font-size: var(--vl-font-caption); }
}
/* Probado con el CSS inyectado en la web viva: a 1440 el botón termina en 1389 px (= borde de la fila) con la primera versión
   (13 px / 6 px / logo 36) y se sale 38 px a 1300. Por eso de 1025 a 1300 el enlace «Soy profesional» del bloque 11505 se
   recoge (está en el menú como «Profesionales» y en el pie), igual que c-19 hizo con «Buscar un centro». ⚠ Es lo único que se
   esconde en todo el fichero, y solo en ese tramo: si el CEO no lo quiere, se borra esta regla y queda el corte de antes. */
@media (min-width: 1025px) and (max-width: 1300px) {
  /* con a + :not(.vl-btn) para ganar a «.whb-header a[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link)» (0,4,1) de cabecera.css §6 */
  html body .whb-header a.vl-header-botones__enlace[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link) { display: none; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  html body .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 5px; font-size: 12px; }
  html body .whb-header .vl-header-botones__enlace { padding: 8px 4px; }
}

/* ============================================================
   G3 · Cabecera móvil/tableta: 141 px (fila del logo 40 + fila del menú 100)
   Medido a 375: .whb-top-bar 40 px con la columna del logo a 100 px (se
   salía de su fila); .whb-general-header 100 px para un botón de menú de 48.
   Woodmart fija esas alturas con el CSS de su Header Builder (id 986247), que
   gana a «.whb-header .whb-column» de cabecera.css: por eso aquí va html body.
   Ahora: fila del logo 44 + fila del menú 52 = 96 (+56 de la barra de iconos
   = 152 en vez de 211). No se quita ningún elemento.
   ============================================================ */
@media (max-width: 1024px) {
  html body .whb-header .whb-top-bar, html body .whb-header .whb-top-bar .whb-flex-row, html body .whb-header .whb-top-bar .whb-column { height: 44px; min-height: 44px; }
  html body .whb-header .whb-top-bar .site-logo img, html body .whb-header .whb-top-bar .wd-logo img { max-height: 30px; width: auto; }
  html body .whb-header .whb-general-header, html body .whb-header .whb-general-header .whb-flex-row, html body .whb-header .whb-general-header .whb-column { height: 52px; min-height: 52px; }
}

/* ============================================================
   G4 · Barra de iconos (.vl-barra-iconos, inc/remate.php §8): «Inicio» pegado
   al borde y letra de 11 px. Medido: a { padding-left: 0; font-size: 11px;
   height: 70px } dentro de una rejilla de 56 px.
   ============================================================ */
@media (max-width: 1024px) {
  html body nav.vl-barra-iconos { padding: 0 var(--vl-space-sm); }
  /* con body.vl-con-barra-iconos y .wd-page-content delante: gana a «.wd-page-content a:not(.vl-btn):not(.btn)» (padding 8px 0) de arreglos.css c-16c */
  html body.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a, html body nav.vl-barra-iconos a { height: var(--vl-header-icons-h); min-height: 0; padding: 4px 4px; font-size: 12px; box-sizing: border-box; }
}

/* ============================================================
   G5 · Botón flotante de accesibilidad (.vl-a11y__boton) tapaba botones
   Medido a 375: 48×48 fijo en x=311 y=748, ENCIMA de la barra fija
   (.vl-cta-fija ocupa 747–812). Arreglo:
   · en móvil (< 768) mide 44×44; en tableta 48;
   · con la barra fija (body.vl-tiene-cta-fija) se METE en la barra: la barra
     reserva un hueco a la derecha (padding) y el botón se coloca ahí, a la
     altura de los otros dos botones redondos. Así nunca pisa el contenido;
   · mientras el aviso de cookies esté abierto (#vl-cookies sin [hidden]) vuelve
     a flotar por encima, con la medida que escribe accesibilidad.js;
   · sin barra fija (formularios, acceso, cuenta, 404) el cuerpo deja sitio
     abajo para que el último botón de la página no quede debajo.
   ============================================================ */
@media (max-width: 1024px) {
  html body .vl-a11y__boton { min-inline-size: 48px; min-block-size: 48px; }
  html body .vl-a11y__boton svg { inline-size: 28px; block-size: 28px; }
  html body.vl-tiene-cta-fija .vl-cta-fija { padding-inline-end: calc(12px + 48px + var(--vl-space-sm)); }
  html body.vl-tiene-cta-fija .vl-a11y { inset-inline-end: 12px; inset-block-end: calc(var(--vl-space-sm) + env(safe-area-inset-bottom, 0px)); }
  html body.vl-tiene-cta-fija:has(#vl-cookies:not([hidden])) .vl-a11y { inset-block-end: max(var(--vl-a11y-abajo, 16px), 16px); }
  html body:not(.vl-tiene-cta-fija) { padding-bottom: calc(48px + var(--vl-space-lg)); }
}
@media (max-width: 767px) {
  html body .vl-a11y__boton { min-inline-size: 44px; min-block-size: 44px; }
  html body .vl-a11y__boton svg { inline-size: 26px; block-size: 26px; }
  html body.vl-tiene-cta-fija .vl-cta-fija { padding-inline-end: calc(12px + 44px + var(--vl-space-sm)); }
  html body.vl-tiene-cta-fija .vl-a11y { inset-block-end: calc(var(--vl-space-sm) + 2px + env(safe-area-inset-bottom, 0px)); }
  html body:not(.vl-tiene-cta-fija) { padding-bottom: calc(44px + var(--vl-space-lg)); }
}

/* ============================================================
   G7 · «Preferencias de cookies» pegado al borde izquierdo (x = 0)
   Medido: <p class="vl-cookies__reabrir-caja vl-cookies__reabrir-caja--pie">
   va DENTRO de .vl-footer__bottom pero FUERA de su .vl-container, y el botón
   lleva padding 0 (199×42). Ahora la caja se alinea con el contenedor
   (mismo ancho y mismo margen que los enlaces legales) y el botón toca 44 px.
   ============================================================ */
html body .vl-footer__bottom > .vl-cookies__reabrir-caja { width: 100%; max-width: var(--vl-container); margin: 0 auto; padding: var(--vl-space-sm) var(--vl-gutter) 0; box-sizing: border-box; }
html body .vl-cookies__reabrir { min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center; }

/* ============================================================
   G11 · Áreas de toque < 44 px (pie 41, «Ver ficha» 40, flecha «subir» 40,
   menú de escritorio 42, migas 37)
   ============================================================ */
html body .vl-footer a { min-height: 44px; display: inline-flex; align-items: center; }
html body .vl-btn--sm { min-height: 44px; }
html body a.scrollToTop { width: 44px; height: 44px; }
html body .whb-header .wd-nav.wd-nav-main > li > a { min-height: 44px; }
html body .vl-migas a, html body .wd-breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   2.7 · Directorio (11333) a 375: las pestañas de tipo de Directorist se
   salían (a.directorist-type-nav__link right = 553 y 714 px) y además
   repetían la fila de pastillas VL (.vl-filtros) que va justo encima.
   · En 11333 la fila de Directorist se esconde (inc/reparo-a.php §4 hace que
     las pastillas VL filtren en la misma página con ?directory_type=).
   · En el resto de páginas del directorio (categorías, localidades, búsqueda)
     la fila se desplaza en horizontal, sin barra visible y con «imán».
   Medido: .directorist-type-nav { display:block; overflow:visible } >
   ul.directorist-type-nav__list { display:flex; flex-wrap:nowrap }.
   ============================================================ */
html body.page-id-11333 .listing-with-sidebar__type-nav, html body.page-id-11333 .directorist-type-nav,
html body.page-id-11331 .directorist-type-nav, html body.page-id-11348 .directorist-type-nav, html body.page-id-11347 .directorist-type-nav,
html body.page-id-11349 .directorist-type-nav, html body.page-id-11346 .directorist-type-nav, html body.page-id-11343 .directorist-type-nav,
html body.page-id-11345 .directorist-type-nav, html body.tax-at_biz_dir-location .directorist-type-nav,
html body.tax-at_biz_dir-category .directorist-type-nav, html body.tax-at_biz_dir-tags .directorist-type-nav { display: none; } /* 26/09: + resultados, 6 listados por tipo y archivos (revisión de diseño: salía cortada a 375/850 sin señal de deslizar; el dibujo no la tiene) */
html body .directorist-type-nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; max-width: 100%; }
html body .directorist-type-nav::-webkit-scrollbar { display: none; }
html body .directorist-type-nav .directorist-type-nav__list { flex-wrap: nowrap; gap: var(--vl-space-sm); overflow: visible; width: max-content; min-width: 100%; } /* width: max-content: sin esto la lista medía 345 px y el contenedor no tenía nada que desplazar (medido) */
html body .directorist-type-nav .directorist-type-nav__list > li { flex: 0 0 auto; scroll-snap-align: start; }
/* Ruido del plugin en la rejilla: badge «Populares» (rosa #F51957, 4,07:1) fuera;
   «(0)» y «(0 Valoraciones)» pasan de #808080 (3,95:1) a --vl-text-muted (7,58:1) */
html body.directorist-content-active .directorist-listing-single.directorist-listing-card .directorist-badge.directorist-badge-popular { display: none; } /* (0,5,2): con menos, Directorist lo volvía a pintar (medido) */
html body.directorist-content-active .directorist-total-review, html body.directorist-content-active a.directorist-review { color: var(--vl-text-muted); }
/* «Filtros» es un H2 a 18 px/500: tamaño de H4 y peso 600 */
html body.directorist-content-active .directorist-advanced-filter__title { font-family: var(--font-titulos); font-size: var(--vl-font-h4); font-weight: 600; }

/* ============================================================
   2.18 · Ficha del centro (single at_biz_dir)
   Medido: .directorist-single-listing-header es flex-direction: column con
   5 hijos, en este orden: .directorist-single-listing-top (Volver atrás /
   Guardar / Compartir), h1.directorist-listing-details__listing-title (24 px
   en móvil, 30 en escritorio), p.directorist-listing-details__tagline,
   .directorist-listing-details y section.directorist-single-listing-slider-wrap.
   Ahora: título → frase → datos → ACCIONES (Cómo llegar / WhatsApp / Llamar,
   las pinta inc/reparo-a.php §5 dentro de esta misma sección) → pastillas de
   Directorist → galería. H1 al tamaño del sistema.
   ============================================================ */
html body .directorist-single-listing-header { display: flex; flex-direction: column; }
html body .directorist-single-listing-header > h1.directorist-listing-details__listing-title { order: 1; font-family: var(--font-titulos); font-size: var(--vl-font-h1); line-height: var(--vl-lh-h1); font-weight: 700; margin: 0 0 var(--vl-space-sm); }
html body .directorist-single-listing-header > .directorist-listing-details__tagline { order: 2; }
html body .directorist-single-listing-header > .directorist-listing-details { order: 3; }
html body .directorist-single-listing-header > .vl-ficha-acciones { order: 4; }
html body .directorist-single-listing-header > .directorist-single-listing-top { order: 5; }
html body .directorist-single-listing-header > .directorist-single-listing-slider-wrap { order: 6; }
/* Las pastillas de Directorist: a 375 «Volver atrás» era una flecha de 17 px y
   las tres iban en dos filas pegadas. Ahora con texto, 44 px y separación. */
html body .directorist-single-listing-top { flex-wrap: wrap; gap: var(--vl-space-sm); margin: 0 0 var(--vl-space-md); }
html body .directorist-single-listing-top .directorist-single-listing-action__text { display: inline; }
html body .directorist-single-listing-top .directorist-single-listing-quick-action, html body .directorist-single-listing-top .directorist-listing-single__quick-actions { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); }
/* El bloque de acciones nuevo (inc/reparo-a.php §5) */
.vl-ficha-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vl-space-sm); margin: 0 0 var(--vl-space-lg); }
.vl-ficha-acciones__direccion { flex: 1 1 100%; margin: 0; display: flex; gap: var(--vl-space-sm); align-items: flex-start; color: var(--vl-text-muted); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); }
.vl-ficha-acciones__direccion svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--vl-secondary); margin-top: 2px; }
@media (max-width: 599px) { .vl-ficha-acciones .vl-btn { flex: 1 1 calc(50% - var(--vl-space-sm)); } .vl-ficha-acciones .vl-btn--primary { flex-basis: 100%; } }
/* Sin reseñas todavía: «0.0 (0 Valoraciones)» no se muestra (clase del body que pone inc/reparo-a.php §5) */
html body.directorist-content-active.vl-ficha-sin-resenas .directorist-single-listing-header .directorist-listing-details .directorist-info-item.directorist-rating-meta.directorist-info-item-rating { display: none; } /* (0,6,2): con (0,4,2) seguía en flex (medido) */
/* Galería repetida: la misma galería salía otra vez dentro de «Información de la Óptica» (medido: .directorist-card > … > .directorist-details-info-wrap > .directorist-single-listing-slider-wrap) */
html body .directorist-single-wrapper .directorist-card .directorist-details-info-wrap .directorist-single-listing-slider-wrap { display: none; }
/* Las tres pastillas (Volver atrás / Guardar / Compartir): Directorist las pinta con
   «.directorist-single .directorist-single-listing-top button:not(:hover):not(:active):not(.has-background).…» (0,6,1) y
   «.directorist-single-listing-action.directorist-btn.directorist-btn-light { border: 1px solid … !important }». Por eso el selector
   de abajo lleva tres :not() de relleno (0,8,2) y el borde lleva el ÚNICO !important del fichero: sin él no hay forma de cambiarlo. */
html body .directorist-single .directorist-single-listing-top .directorist-single-listing-action.directorist-btn.directorist-btn-light:not(.vl-ra-x):not(.vl-ra-y):not(.vl-ra-z) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px var(--vl-space-md);
  border: 1.5px solid var(--vl-secondary); border-radius: var(--vl-radius-pill); background: transparent; color: var(--vl-secondary-dark);
  font-family: var(--font-cuerpo); font-size: var(--vl-font-small); line-height: 1.25; font-weight: 600; box-shadow: none;
}
html body .directorist-single .directorist-single-listing-top .directorist-single-listing-action.directorist-btn.directorist-btn-light:not(.vl-ra-x):not(.vl-ra-y):not(.vl-ra-z):hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
html body .directorist-single .directorist-single-listing-top .directorist-single-listing-action.directorist-btn.directorist-btn-light:not(.vl-ra-x):not(.vl-ra-y):not(.vl-ra-z) > .directorist-icon-mask { background: transparent; } /* 23:15: el color va en ::after (la máscara); en el <i> pintaba un cuadrado */
html body .directorist-single .directorist-single-listing-top .directorist-single-listing-action.directorist-btn.directorist-btn-light:not(.vl-ra-x):not(.vl-ra-y):not(.vl-ra-z) > .directorist-icon-mask::after { background-color: currentColor; }
/* Etiquetas de 34 px y flechas del carrusel de 30 px → 44 */
html body .directorist-single-listing-header .directorist-listing-details a { min-height: 44px; display: inline-flex; align-items: center; }
html body .directorist-swiper__nav { width: 44px; height: 44px; }

/* ============================================================
   2.11 / 2.12 · Blog
   · /blog/: el título de Woodmart (.wd-page-title.title-blog > h1.entry-title)
     iba a 78 px/500 en una franja de 294 px. Se queda (es el único H1 de la
     página) pero al tamaño del sistema y en una franja corta.
   · Entrada: el mismo bloque pintaba un H3 «Blog» de 78/36 px ENCIMA del H1 del
     artículo (40/22 px, peso 500). El PHP lo apaga (vl_ra_sin_titulo_post);
     este CSS es la red de seguridad. El H1 del artículo → 40/32 px, 700.
   · «Publicado por» y la fecha #A5A5A5 (2,46:1) → --vl-text-muted (7,58:1).
     Si no hay nombre de autor (a.author vacío) la línea no se muestra.
   · «Older» #BBBBBB (1,92:1) → --vl-text-muted; el texto lo cambia el PHP.
   · Tarjetas: fuera compartir (24×31) y el contador de comentarios «0».
   ============================================================ */
html body.blog .wd-page-title, html body.archive .wd-page-title.title-blog { background: var(--vl-bg-hero); padding: var(--vl-space-lg) 0; min-height: 0; margin-bottom: var(--vl-space-lg); }
html body.blog .wd-page-title .wd-page-title-bg, html body.archive .wd-page-title.title-blog .wd-page-title-bg { display: none; }
html body.blog .wd-page-title .title, html body.archive .wd-page-title.title-blog .title { font-family: var(--font-titulos); font-size: var(--vl-font-h1); line-height: var(--vl-lh-h1); font-weight: 700; color: var(--vl-text); margin: 0; }
html body.single-post .wd-page-title { display: none; }
html body.single-post h1.wd-post-title, html body.single-post .wd-single-post-header h1 { font-family: var(--font-titulos); font-size: var(--vl-font-h1); line-height: var(--vl-lh-h1); font-weight: 700; }
html body .wd-post-meta, html body .wd-post-meta .wd-post-author, html body .wd-post-meta .wd-post-author span, html body .wd-post-meta .wd-modified-date, html body .wd-post-meta .wd-post-date, html body .wd-post-meta time { color: var(--vl-text-muted); }
html body .wd-post-meta .wd-post-author:has(> a.author:empty) { display: none; }
html body .wd-post-meta .wd-post-author img.avatar-default { display: none; }
html body .blog-post-loop .wd-post-share, html body .blog-post-loop .wd-meta-reply { display: none; }
html body .blog-post-loop .wd-post-title { font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 600; }
html body .wd-page-nav .wd-label, html body .wd-page-nav-btn .wd-label { color: var(--vl-text-muted); }
/* Comentarios: el botón verde de Woodmart (#29C093, radio 0, 42 px, 13 px) → primario del sistema */
html body #respond .submit, html body .comment-form .submit, html body #respond input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--vl-touch); padding: 12px var(--vl-space-lg);
  border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-secondary); background: var(--vl-secondary); color: var(--vl-on-color);
  font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; line-height: 1.25; text-transform: none; letter-spacing: 0;
}
html body #respond .submit:hover, html body .comment-form .submit:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
/* Caja de llamada a la acción del blog (.vlcta, la pinta un módulo de Sergio): azul #14507D, radio 8, 38 px → sistema */
html body .vlcta__boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--vl-touch); padding: 12px var(--vl-space-lg);
  border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-secondary); background: var(--vl-secondary); color: var(--vl-on-color);
  font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; line-height: 1.25; text-decoration: none;
}
html body .vlcta__boton:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); text-decoration: none; }
html body .vlcta__boton--segundo { background: transparent; color: var(--vl-secondary-dark); border-color: var(--vl-secondary); }
html body .vlcta__boton--segundo:hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
html body .vlcta__botones { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); }
/* «Sigue leyendo» (.iaseo-sigue, módulo de Sergio): el punto de la lista se iba a la última línea del enlace en móvil */
html body .iaseo-sigue li { list-style: none; position: relative; padding-left: 18px; }
html body .iaseo-sigue li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--vl-secondary); }

/* ============================================================
   5.2 · Botones: 14 estilos medidos → DOS del diseño
   PRIMARIO: fondo --vl-secondary, letra --vl-on-color, pastilla, 48 px, 16 px.
   FANTASMA: fondo transparente, borde 1,5 px --vl-secondary, letra --vl-secondary-dark.
   Verde solo para «éxito» (.vl-btn--whatsapp se queda como está).
   NO se tocan wp-admin ni Amelia (.amelia-*). Los del sistema (.vl-btn) ya
   cumplen: aquí se igualan los de los plugins (medidos en la web viva):
   · button.wpforms-page-next / .wpforms-submit: #035377, 48, 999 → primario
     (WPForms escribe el color en línea con sus variables: por eso la
     especificidad alta). .wpforms-page-prev → fantasma.
   · button.user-registration-Button.ur-submit-button («Login»): 15 px → 16.
   · .directorist-btn (pastillas grises #EDEDED «Volver atrás / Guardar /
     Compartir», 59 px) → fantasma 44 px; el resto de .directorist-btn → primario.
   · a.button.wc-backward («Ver los planes», padding 0) → padding del sistema (el aspecto lo pone remate-1-1.css).
   · a.button.checkout-button, #place_order → primario.
   · .button / .wd-button genéricos → primario.
   ============================================================ */
/* — primario — */
html body .woocommerce .button, html body a.button, html body button.button, html body .wd-button,
html body .woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button, html body.woocommerce-checkout #payment #place_order,
html body .wpforms-container-full .wpforms-form button.wpforms-submit, html body .wpforms-container-full .wpforms-form button.wpforms-page-next,
html body .wpforms-container .wpforms-form .wpforms-submit, html body .wpforms-container .wpforms-form .wpforms-page-next,
html body .ur-frontend-form button.user-registration-Button.button.ur-submit-button, html body .ur-frontend-form .ur-submit-button,
html body.directorist-content-active .directorist-btn:not(.directorist-btn-light):not(.directorist-btn-sm):not(.directorist-btn-outline) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vl-space-sm);
  min-height: var(--vl-touch); padding: 12px var(--vl-space-lg);
  border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-secondary);
  background: var(--vl-secondary); color: var(--vl-on-color);
  font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); line-height: 1.25; font-weight: 600; text-transform: none; letter-spacing: 0;
  box-shadow: none; text-decoration: none; cursor: pointer;
}
html body .woocommerce .button:hover, html body a.button:hover, html body button.button:hover, html body .wd-button:hover,
html body .woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button:hover, html body.woocommerce-checkout #payment #place_order:hover,
html body .wpforms-container-full .wpforms-form button.wpforms-submit:hover, html body .wpforms-container-full .wpforms-form button.wpforms-page-next:hover,
html body .wpforms-container .wpforms-form .wpforms-submit:hover, html body .wpforms-container .wpforms-form .wpforms-page-next:hover,
html body .ur-frontend-form button.user-registration-Button.button.ur-submit-button:hover, html body .ur-frontend-form .ur-submit-button:hover,
html body.directorist-content-active .directorist-btn:not(.directorist-btn-light):not(.directorist-btn-sm):not(.directorist-btn-outline):hover {
  background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); text-decoration: none;
}
/* — fantasma — */
html body .wpforms-container-full .wpforms-form button.wpforms-page-prev, html body .wpforms-container .wpforms-form .wpforms-page-prev,
html body.directorist-content-active .directorist-btn.directorist-btn-light, html body.directorist-content-active .directorist-btn.directorist-btn-sm, html body.directorist-content-active .directorist-btn.directorist-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 8px var(--vl-space-md);
  border-radius: var(--vl-radius-pill); border: 1.5px solid var(--vl-secondary);
  background: transparent; color: var(--vl-secondary-dark);
  font-family: var(--font-cuerpo); font-size: var(--vl-font-small); line-height: 1.25; font-weight: 600; text-transform: none; letter-spacing: 0;
  box-shadow: none; text-decoration: none; cursor: pointer;
}
html body .wpforms-container-full .wpforms-form button.wpforms-page-prev:hover, html body .wpforms-container .wpforms-form .wpforms-page-prev:hover,
html body.directorist-content-active .directorist-btn.directorist-btn-light:hover, html body.directorist-content-active .directorist-btn.directorist-btn-sm:hover, html body.directorist-content-active .directorist-btn.directorist-btn-outline:hover {
  background: var(--vl-secondary-light); color: var(--vl-secondary-dark); border-color: var(--vl-secondary); text-decoration: none;
}
/* WPForms (motor «modern») pinta el fondo con SUS variables en una regla de (0,4,2) que gana a cualquier «html body …» razonable:
   «div.wpforms-container-full button[type=submit]:not(:hover):not(:active) { background: var(--wpforms-button-background-color-alt, …) }».
   Así que se cambian las variables en el <form> (hijo del contenedor: gana a lo que el plugin escriba en el contenedor).
   Medido: «-alt» es el color en reposo y «…-color» el del hover. */
html body .wpforms-container-full .wpforms-form { --wpforms-button-background-color-alt: var(--vl-secondary); --wpforms-button-background-color: var(--vl-secondary-dark); --wpforms-button-text-color: var(--vl-on-color); --wpforms-button-border-radius: var(--vl-radius-pill); }
html body .wpforms-container-full .wpforms-form button.wpforms-page-prev { --wpforms-button-background-color-alt: transparent; --wpforms-button-background-color: var(--vl-secondary-light); --wpforms-button-text-color: var(--vl-secondary-dark); --wpforms-button-border-color: var(--vl-secondary); --wpforms-button-border-size: 1.5px; --wpforms-button-border-style: solid; }
/* User Registration («Login» a 15 px): su regla lleva #user-registration (1,4,1); esta lleva el mismo id y más clases (1,4,3) */
html body #user-registration .ur-frontend-form button.user-registration-Button.button.ur-submit-button, html body #user-registration .ur-frontend-form .ur-submit-button { font-size: var(--vl-font-boton); min-height: var(--vl-touch); border-radius: var(--vl-radius-pill); }
/* Carrito vacío, «Ver los planes» (a.button.wc-backward): padding 0 porque ganaba «.wd-page-content a:not(.vl-btn):not(.btn)» (0,3,1) de arreglos.css c-16c.
   El aspecto (blanco, borde azul) lo pone remate-1-1.css y se respeta: aquí solo el padding, con (0,4,3). */
html body .wd-page-content .return-to-shop a.button.wc-backward { padding: 12px var(--vl-space-lg); }
/* Los botones de Amelia y de wp-admin no se tocan: ninguna regla de arriba entra en #amelia-app-booking ni en .amelia-* */
/* 22:40 · medido tras publicar: el contador de comentarios «0» de las tarjetas del blog es .wd-post-reply (no .wd-post-share). */
html body .blog-post-loop .wd-post-reply { display: none; }

/* 23:05 · medido tras 2.4.1 en la ficha del centro: */
/*   · los iconos de «Volver / Guardar / Compartir» salían como cuadrados: el <i class="directorist-icon-mask"> llevaba fondo (el color va en su ::after, que es la máscara) */
html body .directorist-single-listing-action .directorist-icon-mask, html body .directorist-single-listing-quick-action .directorist-icon-mask { background: transparent; }
/*   · el bloque de acciones (dirección + Cómo llegar + WhatsApp + Llamar) lo pinta el tema DESPUÉS de la cabecera del plugin, y la galería va dentro
       de esa cabecera: para colocarlo entre los datos y las pastillas, la cabecera «desaparece» como caja (display: contents) y el envoltorio ordena. */
html body .directorist-single-wrapper { display: flex; flex-direction: column; }
html body .directorist-single-wrapper > .directorist-single-listing-header { display: contents; }
html body .directorist-single-wrapper > * { order: 10; }
html body .directorist-single-listing-header > .directorist-listing-details__listing-title { order: 1; }
html body .directorist-single-listing-header > .directorist-listing-details__tagline { order: 2; }
html body .directorist-single-listing-header > .directorist-listing-details { order: 3; }
html body .directorist-single-wrapper > .vl-ficha-acciones { order: 4; margin: var(--vl-space-md) 0; }
html body .directorist-single-listing-header > .directorist-single-listing-top { order: 5; }
html body .directorist-single-listing-header > .directorist-single-listing-slider-wrap { order: 6; }