/* ==========================================================================
   VisionLovers · DISEÑO FINAL (28/09/2026) · la última hoja del tema (inc/diseno-final.php, interruptor VL_DISENO_FINAL)
   Encargo: entrega/49-TEXTO-PARA-COWORK-diseno-28-09.md. Mobile first: primero 375, luego 850, luego 1440 (min-width).
   Sin !important y sin @layer: se gana con «html body.vl-df …» (un selector más que las hojas viejas y que las «parts» de Woodmart).
   ========================================================================== */

/* --------------------------------------------------------------------------
   A · CABECERA DEL ORDENADOR (≥ 1201 px: por debajo Woodmart pinta la de móvil, inc/cabecera-1200.php)
   Medido en la réplica a 1440 el 28/09: el bloque de botones (HTML 11505, hecho con WPBakery) medía 79 px de alto con solo
   44 px de botones: WPBakery añade 35 px de margen debajo de cada elemento. La columna lo centra entero, así que los botones
   quedaban 17 px más arriba que el menú y el azul tocaba la franja de arriba. Fuera ese margen → botones centrados con el menú.
   El menú se partía en dos líneas («SERVICIOS DE / VISIÓN») cuando el logo de la web real (210 px) no deja sitio: ahora
   cada entrada va en una sola línea y el logo no pasa de 36 px de alto.
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {
  html body.vl-df .whb-header .wd-header-html .wpb_content_element,
  html body.vl-df .whb-header .wd-header-html .vc_row,
  html body.vl-df .whb-header .wd-header-html .wpb_raw_code { margin-bottom: 0; }
  html body.vl-df .whb-header .wd-header-html .vc_column-inner { padding-top: 0; padding-bottom: 0; }
  html body.vl-df .whb-header .whb-general-header .whb-column { align-items: center; }
  html body.vl-df .whb-header .wd-nav.wd-nav-main > li > a { white-space: nowrap; }
  html body.vl-df .whb-header .whb-col-left .wd-logo img,
  html body.vl-df .whb-header .whb-col-left .site-logo img { max-height: 32px; width: auto; }
}
/* Las 8 entradas en una línea miden unos 805 px (mayúsculas a 13 px). Una sola medida en todo el ordenador (13 px, 6 px a cada
   lado; antes 12, 13 o 14 px según el ancho, de tres hojas distintas). No caben junto a los 3 botones hasta 1800 px: por debajo,
   «Soy profesional» se recoge (es la entrada «Profesionales» del menú) y, hasta 1439, también «Inicio» (el logo ya lleva a la
   portada, como en casi todas las webs). Entre 1201 y 1279, letra de 12 px y logo de 28 px.
   Medido en la réplica: el menú termina antes de los botones y los botones dentro de la pantalla en
   1201 · 1280 · 1366 · 1440 · 1441 · 1600 · 1799 · 1800 · 1920. */
@media (min-width: 1201px) {
  html body.vl-df .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 6px; font-size: 13px; letter-spacing: 0; }
}
@media (min-width: 1201px) and (max-width: 1799px) {
  html body.vl-df .whb-header a.vl-header-botones__enlace[href*="alta-profesionales"]:not(.vl-btn):not(.woodmart-nav-link) { display: none; }
}
@media (min-width: 1201px) and (max-width: 1439px) {
  html body.vl-df .whb-header .wd-nav.wd-nav-main > li.menu-item-home { display: none; }
}
@media (min-width: 1201px) and (max-width: 1279px) {
  html body.vl-df .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 4px; font-size: 12px; }
  html body.vl-df .whb-header .whb-col-left .wd-logo img,
  html body.vl-df .whb-header .whb-col-left .site-logo img { max-height: 28px; }
}

/* --------------------------------------------------------------------------
   T · LETRA EN TODA LA WEB
   Medido el 28/09 en el navegador: la Manrope servida desde el tema NO trae ajuste entre pares de letras (T+O = 0 px; en Inter
   −3 px) y su espacio entre palabras es estrecho (0,20 em; Inter 0,24 em). Por eso los antetítulos en mayúsculas salían con
   huecos («NUEST RA HIST ORIA», «CIT A ONLINE») y los títulos con las palabras pegadas («Nacimosayudando»).
   1) Antetítulos, sellos y títulos del pie en mayúsculas → Inter (sí lleva ese ajuste), mismo tamaño y peso.
   2) Títulos en Manrope → un poco más de aire entre palabras (+0,12 em: a 24 px, 3 px más; se ve un espacio normal). No cambia el tamaño de nada.
   -------------------------------------------------------------------------- */
html body.vl-df .vl-section__eyebrow,
html body.vl-df .vl-hero__brand,
html body.vl-df .vl-hero__eyebrow,
html body.vl-df .vl-card__badge,
html body.vl-df .vl-eyebrow,
html body.vl-df .vl-footer__title,
html body.vl-df [class*="__eyebrow"] { font-family: var(--vl-font-body, Inter), Inter, "Inter Relleno", system-ui, sans-serif; font-weight: 700; }
html body.vl-df :is(h1, h2, h3, h4, .vl-hero__title, .vl-section__title) { word-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   P · PORTADA (front-page.php · .vl-plantilla-portada)
   P1 · Márgenes laterales. Medido a 375: unos bloques empezaban a 9 px del borde y otros a 31 px. Causa: el contenedor de
        Woodmart (15 px) + el de cada bloque (16 px) en los blancos, y el truco «100vw» en los de color (que además se
        desplaza medio ancho de barra de desplazamiento). Ahora la portada no usa el contenedor de Woodmart: cada bloque ocupa
        todo el ancho sin trucos y su contenido va a 16 px del borde en el móvil y centrado (máx. 1180 px) en el ordenador.
   P2 · Franja blanca de 40 px entre «¿Tienes una óptica o clínica?» (azul) y el pie: era el relleno inferior del contenedor.
   -------------------------------------------------------------------------- */
html body.vl-df.home main.wd-content-layout { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: 0; }
html body.vl-df .vl-plantilla-portada :is(.vl-hero, .vl-section, .vl-franja, .vl-section--full) { margin-left: 0; margin-right: 0; width: auto; }

/* P3 · Tarjetas en fila (los 3 caminos y los 3 pasos): misma altura y el botón de cada una a la misma altura, abajo del todo.
        Medido a 1440: «Empezar orientación online» a 1375 px, «Reservar cita online» a 1319 y «Ver ópticas…» a 1346;
        la tarjeta del paso 3 medía 10 px más que las otras. */
html body.vl-df .vl-plantilla-portada :is(.vl-grid-3, .vl-grid-2, .vl-pasos) { align-items: stretch; }
html body.vl-df .vl-plantilla-portada .vl-grid-3 > .vl-card,
html body.vl-df .vl-plantilla-portada .vl-grid-2 > .vl-card { display: flex; flex-direction: column; height: 100%; }
html body.vl-df .vl-plantilla-portada .vl-grid-3 > .vl-card > .vl-card__footer,
html body.vl-df .vl-plantilla-portada .vl-grid-3 > .vl-card > .vl-card__body > .vl-card__footer { margin-top: auto; }
/* En fila (≥ 768 px) cada tarjeta comparte las filas con sus vecinas (subgrid): antetítulo, icono, título, subtítulo, texto,
   botón y nota quedan a la misma altura en las 3, aunque una nota tenga 3 líneas y otra 2. */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    html body.vl-df .vl-plantilla-portada .vl-grid-3:has(> .vl-card > .vl-card__disclaimer) > .vl-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; height: auto; }
    html body.vl-df .vl-plantilla-portada .vl-grid-3:has(> .vl-card > .vl-card__disclaimer) > .vl-card > .vl-card__footer { margin-top: 0; align-self: end; }
  }
}

/* P4 · Pie de la foto de Óptica Santander: el texto tocaba el borde izquierdo de la tarjeta (0 px). */
html body.vl-df .vl-plantilla-portada figure figcaption { padding: var(--vl-space-sm, 8px) var(--vl-space-md, 16px) var(--vl-space-md, 16px); }

/* --------------------------------------------------------------------------
   M · BARRA DE ICONOS DEL MÓVIL (inc/remate.php · nav.vl-barra-iconos, hasta 1200 px)
   Medido a 375 (360 útiles): 6 casillas de 57 px con la palabra a 12 px; «Centros» y «Únete» se tocaban y «Mi cuenta» se
   cortaba por la derecha. Ahora la barra usa todo el ancho (4 px a cada lado) y la palabra va en una línea, sin cortarse.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  html body.vl-df nav.vl-barra-iconos { padding-left: 4px; padding-right: 4px; }
  html body.vl-df.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a,
  html body.vl-df nav.vl-barra-iconos a { padding-left: 1px; padding-right: 1px; white-space: nowrap; letter-spacing: -0.01em; }
  /* la palabra venía a 14 px por otra regla (medido: «Mi cuenta» 71 px en una casilla de 59) */
  html body.vl-df.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a > span,
  html body.vl-df nav.vl-barra-iconos a > span { font-size: 12px; line-height: 1.2; }
}
@media (max-width: 374px) {
  html body.vl-df nav.vl-barra-iconos { padding-left: 0; padding-right: 0; }
  html body.vl-df.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a,
  html body.vl-df nav.vl-barra-iconos a { padding-left: 0; padding-right: 0; }
  html body.vl-df.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a > span,
  html body.vl-df nav.vl-barra-iconos a > span { font-size: 11px; letter-spacing: -0.02em; }
}

/* --------------------------------------------------------------------------
   B · DIRECTORIO (/directorio-visionlovers/ y los listados de Directorist)
   B1 · Una regla de arreglos.css agrandaba la zona de toque de TODOS los enlaces de la página (bloque, 10 px arriba y abajo,
        margen negativo) y deformaba pestañas, paginación, selector Lista/Mapa y pastillas. Con el diseño final esa regla ya no
        se aplica (arreglos.css, :where(body:not(.vl-df))). Aquí se hace solo en los enlaces sueltos dentro del texto, sin
        cambiar cómo se ven: un enlace en línea con relleno vertical agranda su zona de toque sin mover las líneas.
   -------------------------------------------------------------------------- */
html body.vl-df .wd-page-content :is(p, figcaption) > a:not([class]),
html body.vl-df .wd-page-content :is(.vl-prose, .wpb_text_column, .entry-content) li > a:not([class]):not(nav a) { padding-top: 10px; padding-bottom: 10px; }

/* Pestañas de tipo (Ópticas · Optometristas · Clínicas · Oftalmólogos · Proveedores): pastillas de 44 px con aire a los lados. */
html body.vl-df .vl-filtros { flex-wrap: wrap; gap: 8px; }
html body.vl-df .vl-filtros a.vl-chip { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; border-radius: var(--vl-radius-pill, 999px); white-space: nowrap; }

/* Paginación: números centrados en sus círculos de 48 px. */
html body.vl-df .directorist-pagination { flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
html body.vl-df .directorist-pagination :is(a, span).page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; margin: 0; padding: 0 12px; line-height: 1; }

/* B2 · Filtros: era una caja con borde dentro de otra caja con borde, y la de fuera se estiraba hasta el final del listado
        (1.272 px de alto con 323 de contenido). Ahora es una sola tarjeta, de su altura. */
html body.vl-df aside.listing-with-sidebar__sidebar { align-self: flex-start; }
html body.vl-df aside.listing-with-sidebar__sidebar > form.directorist-search-form { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
html body.vl-df aside.listing-with-sidebar__sidebar .directorist-search-form__box { width: 100%; }
html body.vl-df aside.listing-with-sidebar__sidebar :is(input[type="text"], input[type="search"]) { min-height: 48px; padding-left: 14px; padding-right: 44px; }
/* el icono de ubicación salía pegado al borde de arriba del campo (a 3 px) y el botón de borrar, 12 px por encima del campo */
html body.vl-df aside.listing-with-sidebar__sidebar .directorist-search-field span.directorist-input-icon { top: auto; bottom: 16px; right: 16px; transform: none; }
html body.vl-df aside.listing-with-sidebar__sidebar .directorist-search-field .directorist-search-field__btn--clear { top: auto; bottom: 0; right: 36px; height: 48px; }
/* «Tipo de centro» (select2): el texto tocaba el borde izquierdo (0 px) */
html body.vl-df aside.listing-with-sidebar__sidebar .select2-container .select2-selection--single { min-height: 48px; display: flex; align-items: center; padding-left: 14px; }
html body.vl-df aside.listing-with-sidebar__sidebar .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 14px; padding-right: 36px; line-height: 1.3; }
html body.vl-df aside.listing-with-sidebar__sidebar .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }

/* B3 · Tarjetas del listado.
   · El sello «Sin verificar / Verificada / Destacada» se estiraba a todo el ancho (209 px) como una barra: ahora es una pastilla.
   · La silueta gris de Gravatar (img.avatar) es el avatar de quien creó la ficha, no la foto del centro: parecía una foto rota.
   · «Ver ficha» y «Cómo llegar» juntos, uno debajo del otro, a todo el ancho y abajo del todo en todas las tarjetas de la fila
     (antes: «Cómo llegar» metido 8 px, a 32 px de «Ver ficha», y hasta 195 px de hueco vacío encima del pie de la tarjeta).
     En la misma fila no caben: la tarjeta mide 209 px por dentro y los dos botones 241. */
html body.vl-df article.directorist-listing-card span.vl-sello.vl-sello--tarjeta { align-self: flex-start; justify-self: start; width: auto; max-width: 100%; }
html body.vl-df article.directorist-listing-card .directorist-listing-single__header__left:has(> img.avatar) { display: none; }
html body.vl-df article.directorist-listing-card.directorist-listing-single {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto auto; align-content: stretch;
}
html body.vl-df article.directorist-listing-card.directorist-listing-single > * { grid-column: 1 / -1; }
html body.vl-df article.directorist-listing-card.directorist-listing-single > .directorist-listing-single__content { align-self: start; }
html body.vl-df article.directorist-listing-card.directorist-listing-single > a.vl-btn { align-self: end; justify-self: stretch; justify-content: center; margin: 16px 0 0; }
html body.vl-df article.directorist-listing-card.directorist-listing-single > a.vl-btn + a.vl-btn { margin-top: 4px; }
/* Lista de datos (dirección, teléfono, correo, web): el icono iba 8 px más arriba que su texto y había 50 px entre filas.
   El enlace mantiene su zona de toque de 44 px (relleno 10 px) sin mover el texto (margen −10 px). */
html body.vl-df .directorist-listing-single__info__list { row-gap: 8px; }
html body.vl-df .directorist-listing-single__info__list > li { align-items: flex-start; column-gap: 8px; }
html body.vl-df .directorist-listing-single__info__list > li > a { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
html body.vl-df .directorist-listing-single__info__list > li > i.directorist-icon-mask { flex: 0 0 16px; margin-top: 4px; }
html body.vl-df article.directorist-listing-card.directorist-listing-single > footer.directorist-listing-single__meta { margin-top: 16px; }
/* La pastilla de categoría («Óptica integral») llevaba un icono de Directorist que en esta web sale como un cuadradito: fuera. */
html body.vl-df .directorist-listing-single__meta a:has(> i.directorist-icon-mask) > i.directorist-icon-mask { display: none; }
html body.vl-df .directorist-listing-single__meta a:has(> i.directorist-icon-mask) { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 4px 12px; }

/* B4 · Tarjeta de ejemplo «Así se verá cada centro»: la foto no llegaba al borde derecho (le faltaban 48 px) y la tarjeta iba
        sola en una rejilla de 3. En el móvil ocupa el ancho; desde 850 px va apaisada (foto a la izquierda, datos a la derecha). */
html body.vl-df article.vl-center-card--ejemplo > img.vl-center-card__photo { width: calc(100% + 48px); max-width: none; }
@media (min-width: 850px) {
  /* Solo cuando va sola (directorio). En /opticas-lovers/ va al lado de otra tarjeta y se queda vertical (revisión 28/09: la
     primera versión la aplastaba a 138 px de foto). */
  html body.vl-df .vl-grid-3:has(> article.vl-center-card--ejemplo:only-child) { grid-template-columns: minmax(0, 880px); }
  html body.vl-df .vl-grid-3 > article.vl-center-card--ejemplo:only-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; align-content: start; }
  html body.vl-df .vl-grid-3 > article.vl-center-card--ejemplo:only-child > * { grid-column: 2; }
  html body.vl-df .vl-grid-3 > article.vl-center-card--ejemplo:only-child > img.vl-center-card__photo { grid-column: 1; grid-row: 1 / span 12; width: calc(100% + 24px); height: calc(100% + 48px); margin: -24px 0 -24px -24px; object-fit: cover; }
  /* el cartel «Ejemplo de ficha» (::after de componentes.css) tapaba el sello «Verificado»: va sobre la foto */
  html body.vl-df .vl-grid-3 > article.vl-center-card--ejemplo:only-child::after { right: auto; left: var(--vl-space-md, 16px); }
  /* en /opticas-lovers/: la tarjeta de ejemplo y el aviso «¿Tienes una óptica?» en 2 columnas, cada una de su altura */
  html body.vl-df .vl-grid-3:has(> .vl-directorio-vacio):has(> article.vl-center-card--ejemplo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
}

/* B5 · Los 3 pasos: la tarjeta «Pide cita» medía 214 px y las otras 204. Misma altura en fila. */
html body.vl-df .vl-pasos { align-items: stretch; }
html body.vl-df .vl-pasos > li.vl-paso { height: 100%; }

/* B6 · Franja blanca de 76 px entre el bloque azul del final y el pie: 35 px de margen de WPBakery + 40 del contenedor.
        Solo cuando el bloque azul es lo último de la página. */
html body.vl-df .wpb_raw_code:last-child:has(section.vl-franja:last-child) { margin-bottom: 0; }
html body.vl-df main.wd-content-layout:has(.wpb_raw_code:last-child section.vl-franja:last-child) { padding-bottom: 0; }

/* B7 · Botón «Preferencias de cookies» del pie: iba en mayúsculas, con aro rosa y el texto tocando el borde. Ahora es un botón
        pequeño como los demás del pie. SOLO el aspecto: el aviso y lo que hace no se tocan. */
html body.vl-df button.vl-cookies__reabrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--vl-radius-aro, 14px); background: var(--vl-footer-bg-deep, #00192f); box-shadow: none; color: var(--vl-footer-text, #e5f0ff); font: 600 14px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
html body.vl-df button.vl-cookies__reabrir:hover { border-color: var(--vl-neon, #d946ef); }
html body.vl-df button.vl-cookies__reabrir:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* Buscador de la cabecera del directorio (form.vl-buscador): el botón «BUSCAR» salía gris y en mayúsculas porque el estilo de
   botones de formulario de Woodmart ganaba a .vl-btn--primary. Ahora es el botón azul de la casa, de 48 px. */
html body.vl-df form.vl-buscador button.vl-btn.vl-btn--primary { min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--vl-radius-pill, 999px); background: var(--vl-secondary, #066aab); color: var(--vl-on-color, #fff); font-weight: 700; font-size: 16px; text-transform: none; letter-spacing: 0; }
html body.vl-df form.vl-buscador button.vl-btn.vl-btn--primary:hover { background: var(--vl-secondary-dark, #035377); }
html body.vl-df form.vl-buscador button.vl-btn.vl-btn--primary svg { color: currentColor; }

/* --------------------------------------------------------------------------
   G · MARGEN LATERAL EN LAS PÁGINAS HECHAS CON WPBAKERY (directorio, páginas de tipo, servicios…)
   Medido a 375 en el directorio: la cabecera (bloque de color que sale a todo el ancho) empieza a 16 px del borde y todo lo
   demás a 31 px (15 de la columna de WPBakery + 16 del contenedor). Fórmula: al contenedor de dentro de una columna se le
   quitan los 15 px de la columna mientras la página mide menos de 1180 px, y se le devuelven poco a poco hasta 1210 px; desde
   ahí queda como estaba (ya coincidía: a 1440 los dos empiezan en 154 px). Así el texto de toda la página empieza donde el de
   la cabecera: 16 px del borde en el móvil y 24 en la tableta.
   -------------------------------------------------------------------------- */
html body.vl-df .vc_column-inner .vl-container:not(:is(.vl-hero, .vl-franja, .vl-section--full, .vl-footer, .vl-aux, .vl-section--soft, .vl-section--gray, .vl-section--light) .vl-container) {
  padding-left: calc(var(--vl-gutter, 16px) - 15px + clamp(0px, 50vw - 590px, 15px));
  padding-right: calc(var(--vl-gutter, 16px) - 15px + clamp(0px, 50vw - 590px, 15px));
}
@media (max-width: 480px) {
  html body.vl-df .directorist-pagination { gap: 4px; }
  html body.vl-df .directorist-pagination :is(a, span).page-numbers { min-width: 44px; height: 44px; padding: 0 8px; }
}
/* Las bandas de color (lila, gris, clara) dentro de WPBakery se quedaban cortas: a 1440 iban de 116 a 1324 px, ni a todo el
   ancho ni al del contenido. Ahora van a todo el ancho, como en la portada (mismo truco que base.css usa con la cabecera). */
html body.vl-df .vc_column-inner :is(.vl-section--soft, .vl-section--gray, .vl-section--light) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; }

/* --------------------------------------------------------------------------
   C · PÁGINAS DE CADA TIPO (/opticas-vision/, /clinicas-vision/, /doctores-oftalmologos/, /profesionales-vision/,
       /servicios-vision/, /proveedores-vision/) · buscador y filtros de Directorist
   C1 · Buscador de arriba: el borde (píldora de 999 px) rodeaba la etiqueta y el campo juntos, con otro campo con borde dentro;
        la lupa (::before del campo) quedaba fuera, a la izquierda del campo (44 px de relleno). Ahora: etiqueta encima, un solo
        campo con borde y la lupa dentro del campo, a la izquierda.
   -------------------------------------------------------------------------- */
html body.vl-df .listing-with-sidebar__searchform .directorist-search-form__top { row-gap: 16px; column-gap: 12px; }
html body.vl-df .listing-with-sidebar__searchform .directorist-search-field { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* La lupa estaba dibujada con dos trozos de CSS (un círculo y una raya, remate-1-1.css) que quedaban separados y fuera del campo.
   Ahora es el icono «buscar» del juego de la casa (el de assets/img/iconos/buscar.svg: trazo 1,8, 24×24), dentro del campo. */
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-field::before {
  top: auto; bottom: 14px; left: 14px; width: 20px; height: 20px; transform: none; border: 0; border-radius: 0;
  background: var(--vl-text-muted, #475569);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-field::after { display: none; }
/* En «Tipo de centro» (un desplegable) la lupa no pinta nada: fuera, y el texto a 14 px del borde. */
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-field:has(select)::before { display: none; }
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-field:has(select) .directorist-search-field__input { padding-left: 14px; }
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-field:has(select) .select2-selection--single { padding-left: 0; }
html body.vl-df .listing-with-sidebar__searchform .directorist-search-field .directorist-search-field__input { padding-left: 44px; min-height: 48px; }
html body.vl-df .listing-with-sidebar__searchform .directorist-search-field .select2-selection--single { min-height: 48px; padding-left: 44px; display: flex; align-items: center; }
html body.vl-df .listing-with-sidebar__searchform .directorist-search-field.directorist-icon-right .directorist-search-field__input { padding-right: 44px; }
html body.vl-df .listing-with-sidebar__searchform .directorist-search-field .directorist-search-field__label { position: static; margin: 0 0 8px; transform: none; background: transparent; padding: 0; }

/* C2 · Filtros del lateral: cada campo iba dentro de una caja con borde (etiqueta arriba dentro de la caja y el campo en otra). */
html body.vl-df aside.listing-with-sidebar__sidebar .directorist-search-field { border: 0; border-radius: 0; padding: 0; background: transparent; }
html body.vl-df aside.listing-with-sidebar__sidebar .directorist-search-field .directorist-search-field__label { position: static; margin: 0 0 8px; transform: none; background: transparent; padding: 0; }

/* C3 · Filtro «Precios» (Mín./Máx. de 33 px y botones € a €€€€): resto de la plantilla de Directorist sin sentido en un
        directorio sanitario. Solo se oculta; el plugin no se toca. */
html body.vl-df .directorist-advanced-filter__advanced__element.directorist-search-field-pricing { display: none; }

/* C4 · Aviso «Aún no tenemos un centro verificado…»: caja con borde discontinuo con otra tarjeta dentro; la casilla de
        consentimiento salía fuera y su texto dentro de una caja con borde, centrado y partido con guiones («VisionLo-vers»);
        los botones, unos centrados y otros a la izquierda. Ahora: una sola tarjeta, casilla y texto juntos y a la izquierda,
        botones centrados en una columna. */
html body.vl-df .directorist-archive-notfound.vl-directorio-vacio { border: 0; padding: 0; background: transparent; }
html body.vl-df .vl-directorio-vacio .wpforms-field-checkbox ul { margin: 0; padding: 0; }
html body.vl-df .vl-directorio-vacio .wpforms-field-checkbox ul li { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
html body.vl-df .vl-directorio-vacio .wpforms-field-checkbox ul li input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; }
html body.vl-df .vl-directorio-vacio .wpforms-field-checkbox ul li label.wpforms-field-label-inline { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; text-align: left; hyphens: manual; overflow-wrap: normal; word-break: normal; font-size: 15px; line-height: 1.5; }
html body.vl-df .vl-directorio-vacio .wpforms-submit-container { text-align: center; }
html body.vl-df .vl-directorio-vacio .vl-center-card__footer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
html body.vl-df .vl-directorio-vacio .vl-center-card__footer > a.vl-btn { margin: 0; }
/* «Tipo de centro»: el texto salía desplazado hacia la derecha (y cortado a 1440: «Tipo de cen») y la caja 8 px más arriba que
   los otros dos campos (no tiene etiqueta encima). Texto a la izquierda, los tres campos alineados por abajo. */
html body.vl-df .vl-listado .listing-with-sidebar__searchform .select2-container .select2-selection__rendered { justify-content: flex-start; text-align: left; padding-left: 0; padding-right: 28px; }
html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-form__top { align-items: end; }
@media (min-width: 1025px) {
  html body.vl-df .vl-listado .listing-with-sidebar__searchform .directorist-search-form__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(200px, 0.8fr); }
}

/* --------------------------------------------------------------------------
   D · FICHA DE UN CENTRO (/perfil/…) y ENLACES DENTRO DEL TEXTO EN TODA LA WEB
   D1 · Pastillas «Óptica integral · Ópticas Visión» pegadas a los botones «Cómo llegar / WhatsApp / Llamar» (0 px).
   D2 · Los enlaces dentro del texto salían en gris #333, más claros que el texto (#0f172a), sin subrayado ni negrita: no se
        distinguían (WCAG 1.4.1: el color no puede ser la única pista). Ahora: azul oscuro de la casa (#035377, contraste 9,4
        sobre blanco), subrayados y en seminegrita, en párrafos de toda la web y en las listas de texto.
   D3 · «Ficha revisada por VisionLovers»: la lupa iba sola en una línea y el texto en la de abajo.
   -------------------------------------------------------------------------- */
html body.vl-df .vl-chips + .vl-ficha-acciones { margin-top: 16px; }
html body.vl-df main :is(p, figcaption, dd):not(.vl-articulo__etiquetas) > a:not([class]),
html body.vl-df main :is(.vl-prose, .wpb_text_column, .entry-content, .vl-legal) li > a:not([class]):not(nav a) {
  color: var(--vl-secondary-dark, #035377); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
html body.vl-df main :is(p, figcaption, dd) > a:not([class]):hover { text-decoration-thickness: 2px; }
html body.vl-df .vl-revisado.vl-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
html body.vl-df .vl-revisado.vl-card > svg { margin-top: 3px; }

/* --------------------------------------------------------------------------
   F · RESERVADOR DE CITAS (Amelia, /reserva-tu-cita/): «Seleccione el servicio» en gris #808A90 sobre blanco = contraste 3,53
       (hace falta 4,5). Amelia pone ese gris como variable en línea en #amelia-container; se redefine un nivel por debajo con el
       gris de la casa (#5b6779, contraste 5,8). El plugin no se toca.
   -------------------------------------------------------------------------- */
/* Amelia pinta ese texto con «color: var(--am-c-select-text) !important». Sin !important se gana cambiando la variable solo en
   el texto de ejemplo del desplegable (el texto elegido y el resto del reservador no cambian). Medido: #5b6779, contraste 5,8. */
html body.vl-df #amelia-container .am-select .el-select__selected-item.el-select__placeholder.is-transparent { --am-c-select-text: var(--vl-text-light, #5b6779); color: var(--vl-text-light, #5b6779); }

/* ==========================================================================
   R · REVISIÓN PÁGINA A PÁGINA (28/09, dos revisores a 375 · 850 · 1440 con móvil emulado; cada fallo visto y medido)
   ========================================================================== */

/* R1 · Saltos de línea escritos a mano DENTRO de los botones (<br>): botones de 68–88 px con el texto caído (consultora,
        consulta, orientación, optometría, cirugía, proveedores, soluciones, eres proveedor). Y la tarjeta de debajo pegada (0 px). */
html body.vl-df :is(.vl-btn, a.vl-btn) > br,
html body.vl-df :is(.vl-hero__ctas, .vl-center-card__footer) > br { display: none; }
html body.vl-df .vl-hero__content .vl-card--hero { margin-top: 32px; }
html body.vl-df .vl-hero__ctas:empty { display: none; }

/* R2 · En el móvil base.css oculta TODOS los <br> de los párrafos: en /reserva-tu-cita/ y /sobre-nosotros/ los datos salían en
        una tira («+34 681 075 883Horario: …info@visionlovers.es»). Dentro de las tarjetas de datos, los <br> vuelven. */
@media (max-width: 767px) { html body.vl-df .vl-container .vl-card__body p br { display: inline; } }

/* R3 · El «✓» del principio se quedaba solo en su línea a 375 (p.vl-hero__meta, 74 px de alto). */
html body.vl-df p.vl-hero__meta { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }

/* R4 · Franja blanca de 40 px entre la cabecera y el principio de la página (servicios, ópticas lovers, profesionales, sobre
        nosotros, contacto): el relleno de arriba del contenedor quedaba cortado por la fila de WPBakery. */
html body.vl-df main.wd-content-layout:has(.vl-hero) { padding-top: 0; }
html body.vl-df .vc_row .vl-hero { margin-top: 0; }

/* R5 · Filas de WPBakery con fondo propio + una sección con otro fondo dentro: dos tonos de lila y 40 px arriba y 56 abajo de
        más en cada sección (consultora, consulta, orientación, optometría, cirugía, proveedores). La sección de dentro deja de
        pintar su fondo y su relleno; manda la fila. */
html body.vl-df .wpb-content-wrapper > .vc_row-has-fill .wpb_text_column,
html body.vl-df .wpb-content-wrapper > .vc_row-has-fill .wpb_raw_code { margin-bottom: 0; }
html body.vl-df .wpb-content-wrapper > .vc_row-has-fill section.vl-section { background: transparent; padding-top: 0; padding-bottom: 0; }

/* R6 · Antetítulos grises en las bandas lila (consultora, consulta, optometría, cirugía): rosa de la casa, como en el resto. */
html body.vl-df .vl-section--soft .vl-section__eyebrow { color: var(--vl-primary-dark); }

/* R7 · Pie: 35 px blancos debajo (margen de WPBakery del bloque del pie) y, en el móvil, 72 px más (el hueco de la barra fija
        estaba en <body> y se veía blanco bajo el pie). Ahora el hueco va dentro del pie, del mismo azul. Y los enlaces del pie
        a 375 se pisaban (zonas de 44 px con filas cada 28 px). */
html body.vl-df .wpb_raw_html:has(.vl-footer),
html body.vl-df .wpb_raw_code:has(.vl-footer) { margin-bottom: 0; }
@media (max-width: 1024px) {
  html body.vl-df.vl-tiene-cta-fija { padding-bottom: 0; }
  html body.vl-df.vl-tiene-cta-fija .vl-footer { padding-bottom: 88px; }
}
html body.vl-df .vl-footer__links > li { margin: 0; }
html body.vl-df .vl-footer__links > li > a { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
/* Dos llamadas seguidas: si la página acaba en la franja azul «¿Tienes un centro?», el bloque «¿No sabes a quién acudir?» del
   pie sobra (medido: una acababa en y=3568 y la otra empezaba en y=3569). */
html body.vl-df:has(main section.vl-franja) .vl-footer__cta { display: none; }

/* R8 · Flechitas del menú casi invisibles (6,5 px, contraste 2,85). */
html body.vl-df .whb-header .wd-nav-main > li.menu-item-has-children > a::after { color: var(--vl-text-muted); font-size: 9px; }

/* R9 · Rejillas.
   · 3 tarjetas en 2 columnas (768–1023): la tercera quedaba sola con un hueco al lado → ocupa la fila.
   · «Cómo funciona» de 4 pasos a 850: columnas de 183 px con el título en 4 líneas → 2 × 2.
   · 3 pasos en una rejilla de 4 (consultora, 1440): una columna vacía → 3 columnas a todo el ancho.
   · 4 tarjetas de contacto (reserva): botones a 4 alturas distintas → abajo del todo. */
@media (min-width: 768px) and (max-width: 1023px) { html body.vl-df .vl-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) and (max-width: 1199px) { html body.vl-df .vl-pasos.vl-pasos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html body.vl-df .vl-grid-4.vl-grid-4--steps:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
/* 28/09 tarde (captura de Sergio): la regla de arriba ponía 3 columnas también a las rejillas de 4 pasos (soluciones, eres
   proveedor) y el 4.º se quedaba solo abajo. Ahora solo cambia las que tienen 3; las de 4 siguen en una fila de 4. */
html body.vl-df .vl-grid-4 > .vl-card { display: flex; flex-direction: column; }
html body.vl-df .vl-grid-4 > .vl-card > :last-child { margin-top: auto; }
/* El sello «GRATIS» de la tarjeta del triaje (servicios) bajaba 31 px el icono respecto a la tarjeta de al lado. */
html body.vl-df .vl-grid-2 > .vl-card:has(> .vl-card__badge) { position: relative; }
@media (min-width: 768px) { html body.vl-df .vl-grid-2 > .vl-card > .vl-card__badge { position: absolute; top: 24px; right: 24px; margin: 0; } }

/* R10 · Fotos con pie (sobre nosotros): la caja de la foto se estiraba (549 px vacíos a 850) y el pie tocaba el borde. */
html body.vl-df .vl-grid-2 > figure.vl-hero__figure { align-self: start; }
html body.vl-df figure.vl-hero__figure figcaption { padding: 12px 16px; }

/* R11 · «¿Qué te pasa?» del triaje a 375: botones de 140 a 309 px y dos partidos en dos líneas → todos a lo ancho. */
@media (max-width: 599px) { html body.vl-df .vl-que-te-pasa a { width: 100%; } }

/* R12 · Contacto: iconos en cuadros azules (en el resto de la web van en rosa). */
html body.vl-df .vl-via__icono { background: var(--vl-primary-light); color: var(--vl-primary-dark); }

/* R13 · Reserva (Amelia): 100 px vacíos arriba y abajo del reservador (margen de Amelia); a 1440 empezaba 125 px más abajo que
        la tarjeta de al lado. */
html body.vl-df .vl-reserva .amelia-v2-booking #amelia-container.am-fs__wrapper { margin: 0 auto; }

/* ==========================================================================
   V · VESTIR LOS PLUGINS DESDE EL TEMA (sus ficheros no se tocan): WPForms, User Registration, WooCommerce/Mi cuenta
   ========================================================================== */

/* V1 · WPForms (triaje, consulta, orientación, profesionales, contacto, soluciones).
   · «Nombre / Apellidos»: la etiqueta entraba 15 px más que las demás y el ::before de la fila se llevaba 16 px de hueco.
   · Opciones de radio: el círculo salía suelto ENCIMA de su caja (WPForms pone el input fuera del label).
   · Casillas: cada casilla sola en su línea y su texto en una caja con borde debajo → casilla y texto dentro de la misma caja.
   · Casilla de privacidad (tipo «payment-checkbox»): viñeta «•» y casilla nativa de 16 px.
   · 72 px vacíos antes de «Siguiente»; «Siguiente» centrado en todos; el texto legal bajo el formulario, centrado con él.
   · Doble barra de progreso en /triaje-optometrico-formulario/ («Paso 1 de 4» dos veces): se queda la que se actualiza sola. */
html body.vl-df .wpforms-container .wpforms-field-name legend.wpforms-field-label { padding-left: 0; padding-right: 0; }
html body.vl-df .wpforms-container .wpforms-field-name .wpforms-field-row-block { padding: 0; }
html body.vl-df .wpforms-container .wpforms-field-row::before,
html body.vl-df .wpforms-container .wpforms-field-row::after { display: none; }
html body.vl-df .wpforms-container .wpforms-field-radio ul li { position: relative; }
html body.vl-df .wpforms-container .wpforms-field-radio ul li > input[type="radio"] { position: absolute; left: 16px; top: 17px; margin: 0; }
html body.vl-df .wpforms-container .wpforms-field-radio ul li > label { padding-left: 52px; }
html body.vl-df .wpforms-container :is(.wpforms-field-checkbox, .wpforms-field-payment-checkbox) ul { list-style: none; margin: 0; padding-left: 0; }
html body.vl-df .wpforms-container :is(.wpforms-field-checkbox, .wpforms-field-payment-checkbox) ul li { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 0 8px; padding: 12px 16px; border: 2px solid var(--vl-border-field); border-radius: 12px; list-style: none; }
html body.vl-df .wpforms-container :is(.wpforms-field-checkbox, .wpforms-field-payment-checkbox) ul li > input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; }
html body.vl-df .wpforms-container :is(.wpforms-field-checkbox, .wpforms-field-payment-checkbox) ul li > label { display: inline; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html body.vl-df .wpforms-container .wpforms-field-checkbox legend { padding-left: 0; padding-right: 0; }
/* (el aviso vacío del directorio tiene su propia casilla sin caja: C4) */
html body.vl-df .vl-directorio-vacio .wpforms-field-checkbox ul li { min-height: 0; padding: 0; border: 0; }
html body.vl-df .wpforms-container .wpforms-field-pagebreak { padding-top: 0; }
html body.vl-df .wpforms-container .wpforms-page-button-group,
html body.vl-df .wpforms-container .wpforms-submit-container { margin-top: 8px; text-align: center; }
html body.vl-df :is(section#consulta-vision-form, section#orientacion-form) > .vl-container > p { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
html body.vl-df .vl-form-content > .vl-steps > .vl-steps__bar,
html body.vl-df .vl-form-content > .vl-steps > .vl-steps__counter { display: none; }
html body.vl-df .vl-steps__list { align-items: stretch; }
/* Formulario de soluciones (1440): campos y botón de 1.132 px sin tarjeta, etiquetas en Manrope de 18 px (las de User
   Registration en Inter de 15). Mismo ancho de lectura que el resto de formularios y la misma letra. */
html body.vl-df .wpb_text_column .wpforms-container,
html body.vl-df .wpb_raw_code .wpforms-container { max-width: 720px; margin-left: auto; margin-right: auto; }
html body.vl-df .wpforms-container .wpforms-field-label { font: 600 15px/1.4 Inter, "Inter Relleno", system-ui, sans-serif; word-spacing: 0; }

/* V2 · User Registration (entrar, registros, clave olvidada).
   · Dos columnas que no casan (4 campos a un lado y 3 al otro, «Nombre» solo) → una columna, campos a todo el ancho.
   · Campos de entrar y de «clave olvidada» a medio ancho (297 px en una tarjeta de 736).
   · Casilla metida 17 px; errores pegados a la etiqueta (6 px); botón a 4 px del campo en «clave olvidada».
   · Pestañas «Soy paciente / Soy profesional»: cuadradas y en otro gris dentro de una píldora, en mayúsculas de 13 px.
   · El correo del login con 32 px de margen interior (el resto 16). */
html body.vl-df .ur-frontend-form .ur-form-row { flex-direction: column; }
html body.vl-df .ur-frontend-form .ur-form-row > .ur-form-grid { width: 100%; flex: 1 1 auto; min-width: 0; }
html body.vl-df .ur-frontend-form .form-row > ul { margin-left: 0; padding-left: 0; }
html body.vl-df .user-registration-error { margin-bottom: 16px; }
html body.vl-df .ur_lost_reset_password .user-registration-Button { margin-top: 16px; }
html body.vl-df .vl-aux__pie a { display: inline; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
html body.vl-df .vl-tabs-login .vl-tab-btn { border-radius: var(--vl-radius-pill, 999px); background: transparent; font-size: 15px; text-transform: none; letter-spacing: 0; }
html body.vl-df .vl-tabs-login .vl-tab-btn.vl-active { background: var(--vl-bg-card, #fff); box-shadow: var(--vl-shadow-xs); }
html body.vl-df .vl-auth #username { padding-left: 16px; }
/* Registro de ópticas: el bloque de «59 €» entraba 24 px más que el título. */
html body.vl-df .vl-auth__intro .vl-card--flat { padding-left: 0; padding-right: 0; }

/* V3 · Mi cuenta (paneles de paciente y óptica).
   · 375: tarjeta dentro de tarjeta (al texto le quedaban 217 px) y cifras partidas («publica-da»).
   · 850 y 1440: 3 columnas de alturas muy distintas → hasta 975 px vacíos bajo una tarjeta. Ahora en columnas que se rellenan.
   · Etiquetas «Recibido / Confirmada / Verificada» que se salían 26 px de la tarjeta; nombres en líneas de 48 px.
   · «Mi nivel»: el «€» saltaba de línea. · 850: una raya vertical suelta junto al menú ya apilado. */
@media (max-width: 767px) {
  html body.vl-df .vl-cuenta .woocommerce-MyAccount-content { padding: 0; background: none; box-shadow: none; border-radius: 0; }
}
@media (max-width: 599px) {
  html body.vl-df .vl-panel__resumen { grid-template-columns: 1fr; }
  html body.vl-df .vl-cuenta__dato { display: flex; gap: 12px; align-items: baseline; text-align: left; }
  html body.vl-df .vl-cuenta__dato span { overflow-wrap: normal; }
}
@media (min-width: 768px) {
  html body.vl-df .vl-panel--v2 .vl-panel__grid { display: block; columns: 2 300px; column-gap: 24px; }
  html body.vl-df .vl-panel--v2 .vl-panel__grid > * { break-inside: avoid; margin-bottom: 24px; }
  html body.vl-df .vl-panel--v2 .vl-panel__grid > .vl-panel__card--ancha { column-span: all; }
}
html body.vl-df .vl-panel__lista--fichas > li > :is(.vl-badge, .vl-sello) { display: inline-flex; width: fit-content; max-width: 100%; margin-left: 0; }
html body.vl-df .vl-panel__enlace { max-width: 100%; overflow-wrap: anywhere; }
/* «Tu perfil público»: la dirección se partía en líneas de 48 px de alto */
html body.vl-df .vl-panel__url a { line-height: 1.4; padding-top: 12px; padding-bottom: 12px; overflow-wrap: anywhere; }
html body.vl-df .vl-panel__card li > a:not(.vl-btn) { line-height: 1.4; padding-top: 12px; padding-bottom: 12px; min-height: 48px; }
html body.vl-df .vl-mi-nivel .vl-precio__cifra { white-space: nowrap; font-size: clamp(32px, 3vw, 44px); }
@media (max-width: 1024px) { html body.vl-df .wd-my-account-sidebar { border-right: 0; padding-right: 0; } }

/* ==========================================================================
   W · BLOG, ALTA Y RESTO
   ========================================================================== */
/* W1 · Enlaces dentro de los párrafos del artículo en «inline-block»: saltaban a su línea y partían la frase (313 × 70 px a 375). */
html body.vl-df .vl-articulo__cuerpo p > a:not(.vl-btn) { display: inline; min-height: 0; }
/* W2 · Índices del artículo y de los legales: el número a la altura de la última línea y 60 px por punto. */
html body.vl-df :is(.vl-articulo__indice, .vl-legal__indice) li { margin-bottom: 0; }
html body.vl-df :is(.vl-articulo__indice, .vl-legal__indice) li > a { display: block; padding-top: 10px; padding-bottom: 10px; min-height: 44px; }
/* W3 · Tarjetas del blog y del buscador: con foto y sin foto mezcladas (hasta 200 px en blanco) → las que no tienen foto llevan
        un fondo de la casa del mismo tamaño; en el buscador, título pegado al borde de arriba (0 px). */
html body.vl-df .vl-entrada-card:not(:has(.vl-entrada-card__foto))::before { content: ""; display: block; aspect-ratio: 16 / 9; margin: -24px -24px 16px; border-radius: var(--vl-radius-xl, 24px) var(--vl-radius-xl, 24px) 0 0; background: linear-gradient(135deg, var(--vl-bg-hero), var(--vl-secondary-light)); }
html body.vl-df .vl-entrada-card > .vl-card__title:first-child { margin-top: 8px; }
/* W4 · Caja del triaje (blog) a 375: un botón de 48 px y otro de 68 → los dos a lo ancho y del mismo alto. */
@media (max-width: 599px) {
  html body.vl-df .vl-caja-triaje__botones { flex-direction: column; }
  html body.vl-df .vl-caja-triaje__botones .vl-btn { width: 100%; justify-content: center; }
}
/* W5 · Alta: dos bloques de preguntas con estilos distintos (uno estrecho y centrado con «+», otro a todo el ancho sin nada que
        diga que se abre); cifras de retorno torcidas (11 px) y, a 850, precios en 2 columnas con el tercero solo. */
html body.vl-df .vl-faq-niveles { margin-left: 0; margin-right: 0; max-width: none; } /* 28/09 tarde: a todo el ancho, como «Antes de darte de alta» (estrecho y a la izquierda dejaba media pantalla vacía) */
html body.vl-df .vl-faq-item > summary { display: flex; align-items: center; gap: 12px; }
html body.vl-df .vl-faq-item > summary::after { content: "+"; margin-left: auto; color: var(--vl-primary-dark); font-weight: 700; font-size: 20px; }
html body.vl-df .vl-faq-item[open] > summary::after { content: "−"; }
html body.vl-df .vl-retorno { align-items: start; }
@media (min-width: 768px) and (max-width: 1024px) { html body.vl-df .vl-planes { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
/* W6 · Margen lateral en el móvil (blog, entrar, registros, alta, 404, clave olvidada): la cabecera a 16 px y las tarjetas a 31
        (15 del contenedor de Woodmart + 16 del de la casa). Estas plantillas son del tema: fuera los 15 px de Woodmart. */
@media (max-width: 767px) {
  html body.vl-df main.wd-content-layout.container:has(:is(.vl-plantilla-blog, .vl-plantilla-entrar, .vl-plantilla-alta-venta, .vl-plantilla-aux)) { padding-left: 0; padding-right: 0; }
}
html body.vl-df .wpforms-container :is(.wpforms-field-radio, .wpforms-field-checkbox, .wpforms-field-payment-checkbox) legend.wpforms-field-label { padding-left: 0; padding-right: 0; }

/* --------------------------------------------------------------------------
   I · UN SOLO JUEGO DE ICONOS (norma 13 de Sergio) · los de Directorist van en assets/css/iconos.css
   Medido el 28/09: los iconos del tema eran de línea con trazo 1,8, salvo la barra de iconos del móvil y la barra fija de abajo
   (trazo 2), los sellos Verificada/Destacada (rellenos) y WhatsApp de la barra fija (relleno; ahora de línea en inc/premium.php).
   El trazo en CSS manda sobre el atributo del SVG: mismo trazo en todos, sin tocar el HTML.
   -------------------------------------------------------------------------- */
html body.vl-df :is(nav.vl-barra-iconos, .vl-cta-fija, .vl-cta-articulo) svg :is(path, circle, rect, line, polyline) { stroke-width: 1.8; }
html body.vl-df .vl-sello svg.vl-sello__icono :is(path, circle) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tamaño: 24 px en barras y tarjetas, 20 px dentro de botones y datos, 16–18 px en sellos y listas (ya lo estaban); los de
   Directorist a 18 px (venían a 12–16). */
html body.vl-df i.directorist-icon-mask::after { width: 18px; height: 18px; }
html body.vl-df .directorist-listing-single__info__list i.directorist-icon-mask::after { width: 16px; height: 16px; }
html body.vl-df .directorist-add-listing-types__single__link i.directorist-icon-mask::after { width: 40px; height: 40px; }

/* Pie en las páginas SIN barra fija (entrar, 404…): Woodmart reservaba 68 px debajo para su barra de iconos, que está oculta:
   68 px en blanco bajo el pie a 375 (medido en /login/ y en el 404). */
@media (max-width: 1024px) { html body.vl-df.sticky-toolbar-on:not(.vl-tiene-cta-fija) { padding-bottom: 0; } }
/* Enlaces dentro de notas y casillas («Al iniciar el triaje aceptas nuestra política de privacidad», casillas de WPForms):
   subrayados, como el resto de enlaces del texto (axe «link-in-text-block»). */
html body.vl-df :is(.vl-btn-nota, .wpforms-container label, .ur-frontend-form label) a { text-decoration: underline; text-underline-offset: 3px; }
/* Nombres cortos de óptica en las tarjetas («Ikus»: 29 × 19 px de zona de toque): 44 px de alto sin mover nada. */
html body.vl-df .directorist-listing-single__header__title a { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }

/* --------------------------------------------------------------------------
   X · CIERRE (28/09/2026, tarde) · papel 50 §5.8, §6 y §7
   -------------------------------------------------------------------------- */
/* X1 · Migas de pan dos veces en los artículos: las del tema («Inicio › Blog › Categoría › Artículo», lista accesible con
   aria-current) y las del módulo SEO de Sergio (nav.mcseo-crumbs, justo encima). El módulo no se toca: solo se esconden sus
   migas a la vista cuando la página ya lleva las del tema. Su JSON-LD (lo que lee Google) sigue igual. */
html body.vl-df:has(nav.vl-migas) nav.mcseo-crumbs { display: none; }
/* X2 · /checkout/ sin sesión: dos avisos para lo mismo. «Debes iniciar sesión… Aquí» (Directorist, lleva al escritorio) encima
   de «Primero, entra en tu cuenta» (el del tema, con su botón). Se queda el del tema. */
html body.vl-df.page-id-11340:not(.logged-in) .notice_wrapper:has(.directorist-alert-warning) { display: none; }
/* X3 · Barra de iconos a 320 px (móviles muy estrechos): «Mi cuenta» medía 53 px en una casilla de 51 (medido). Por debajo de
   360 px la palabra puede ir en dos líneas («Mi / cuenta»); las demás caben en una. */
@media (max-width: 359px) {
  html body.vl-df.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos a > span,
  html body.vl-df nav.vl-barra-iconos a > span { white-space: normal; text-align: center; overflow-wrap: normal; }
}
/* X4 · Números de página (blog y directorio): «2» y «4» salían en óvalo (46 × 44 y 44 × 48 px, medido) y en la web real el
   número iba arriba a la izquierda del círculo (captura de Sergio del 28/09). Círculo exacto de 44 px con el número en el centro;
   «Siguientes» y «Anteriores» siguen siendo pastillas con su texto. */
html body.vl-df :is(.vl-paginacion, .directorist-pagination) :is(a, span).page-numbers:not(.next):not(.prev) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; line-height: 1; text-align: center;
}
/* X5 · «Artículos relacionados» (.vl-relacionados, al final de consultora, servicios, ópticas lovers, profesionales…): va en
   una fila normal de WPBakery, sin .vl-container, así que empezaba ~38 px más a la izquierda que el resto de la página a 1301
   (captura de Sergio del 28/09, y también en la réplica). Mismo ancho de columna que las secciones de encima. */
html body.vl-df .vc_column-inner .vl-relacionados:not(.vl-container .vl-relacionados) {
  max-width: var(--vl-container, 1180px); margin-left: auto; margin-right: auto; box-sizing: border-box;
  padding-left: calc(var(--vl-gutter, 16px) - 15px + clamp(0px, 50vw - 590px, 15px));
  padding-right: calc(var(--vl-gutter, 16px) - 15px + clamp(0px, 50vw - 590px, 15px));
}