/* ============================================================
   arreglos.css · VISIONLOVERS · lo que encontró el verificador (23/09/2026)
   Cada bloque dice qué fallo arregla (07-VERIFICACION/informe-verificacion.md).
   Solo variables de tokens.css. Cero reglas forzadas. Carga después de plugins/*.css.
   ============================================================ */

/* c-1 · Blog: la píldora de categoría era azul sobre azul (ratio 1,0).
   Woodmart le pone de fondo el color primario; base.css pinta todos los <a> del mismo azul. */
.wd-post-cat.wd-style-with-bg a { color: var(--vl-on-color); }
.wd-post-cat.wd-style-with-bg a:hover { color: var(--vl-on-color); opacity: .9; }

/* (b) · Blog: «Posted by» gris #a5a5a5 (2,46). */
.wd-entry-meta, .wd-entry-meta span, .wd-entry-meta .wd-meta-author { color: var(--vl-text-muted); }
.wd-entry-meta a { color: var(--vl-secondary); }

/* c-3 · Login / registro de User Registration: el plugin lee estas variables para sus colores.
   Van en body (no en :root): el plugin define las suyas en :root más tarde, y body está más cerca del elemento, así que gana. */
body {
  --ur-primary-color: var(--vl-secondary);
  --ur-primary-light: var(--vl-bg-hero);
  --ur-button-background-normal-color: var(--vl-secondary);
  --ur-button-background-hover-color: var(--vl-secondary-dark);
  --ur-button-text-normal-color: var(--vl-on-color);
  --ur-button-text-hover-color: var(--vl-on-color);
}
/* Campos a 48 px y letra 17 (misma cadena de selectores que el plugin, para ganar por orden sin forzar). */
body .ur-frontend-form .ur-form-row .ur-form-grid .user-registration-form-row input.input-text,
body .ur-frontend-form .ur-form-row .ur-form-grid .user-registration-form-row input.user-registration-Input,
body .ur-frontend-form .user-registration-form-login input.user-registration-Input,
body .ur-frontend-form input.input-text,
body .user-registration input.user-registration-Input {
  min-height: var(--vl-touch);
  font-size: 17px;
  line-height: 1.4;
  border-radius: var(--vl-radius-md);
  border: 1px solid var(--vl-border);
  color: var(--vl-text);
}
body .ur-frontend-form .user-registration-Button.button,
body .ur-frontend-form .ur-submit-button,
body .ur-frontend-form button.ur-submit-button,
body .user-registration button.user-registration-Button {
  background: var(--vl-secondary);
  color: var(--vl-on-color);
  min-height: var(--vl-touch);
  padding: 0 var(--vl-space-lg);
  border-radius: var(--vl-radius-pill);
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.ur-frontend-form .user-registration-LostPassword a,
.ur-frontend-form a { color: var(--vl-secondary); }

/* c-5 · Cabecera móvil: medía 200 px y el 2º botón se salía (body de 478 px a 375).
   Cowork (decisión 12): logo + barra de iconos, UN botón. */
@media (max-width: 1024px) {
  .wd-hb-wrapp, .header-banner.wd-hb { display: none; }               /* el banner azul de 40 px */
  .whb-mobile-right { flex-wrap: nowrap; gap: 6px; }
  .whb-mobile-right .wd-button-wrapper { flex: 0 1 auto; min-width: 0; }
  .whb-mobile-right .wd-button-wrapper a.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px;
    font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
    border-radius: var(--vl-radius-pill);
    color: var(--vl-secondary); background: var(--vl-bg); border: 2px solid var(--vl-secondary);
  }
  .whb-mobile-right .wd-button-wrapper a.btn:hover { color: var(--vl-on-color); background: var(--vl-secondary); }
  /* El 2º botón («¿Eres Profesional?») se oculta en móvil: ya está en la barra de iconos (PROFESIONALES) y en el menú. */
  .whb-mobile-right .wd-button-wrapper + .wd-button-wrapper { display: none; }
}
@media (max-width: 480px) {
  .whb-mobile-right .wd-button-wrapper a.btn { padding: 0 12px; font-size: 13px; }
}

/* c-6 · Cabecera de escritorio: los 3 enlaces del bloque 11505 no tenían separación. */
.vl-header-botones { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--vl-space-sm); }

/* c-13 · Placeholders cortados a 375: que se recorten con puntos y no se salgan. */
input::placeholder, textarea::placeholder { text-overflow: ellipsis; }

/* c-12 · Portada a 768: el título de la tarjeta se estrechaba a 80 px por la píldora de al lado. */
.vl-center-card__header { flex-wrap: wrap; gap: var(--vl-space-xs); }
.vl-center-card__header > div { min-width: 0; flex: 1 1 200px; }

/* SGE (24/09/2026) · la respuesta directa bajo el título y la franja «¿Qué te pasa?» con las 6 guías por síntoma */
.vl-respuesta-directa { font-size: 19px; line-height: 1.6; color: var(--vl-text); max-width: 720px; margin: var(--vl-space-md) 0 var(--vl-space-lg); }
.vl-que-te-pasa { margin: var(--vl-space-lg) 0 0; padding: var(--vl-space-md); background: var(--vl-bg-hero); border-radius: var(--vl-radius-md); }
.vl-que-te-pasa__titulo { margin: 0 0 var(--vl-space-xs); font-size: 17px; }
.vl-que-te-pasa__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vl-space-xs); }
.vl-que-te-pasa__lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--vl-radius-pill); background: var(--vl-bg); color: var(--vl-secondary); border: 1px solid var(--vl-border); font-size: 15px; font-weight: 600; text-decoration: none; }
.vl-que-te-pasa__lista a:hover { background: var(--vl-secondary); color: var(--vl-on-color); border-color: var(--vl-secondary); }
.vl-tabla { width: 100%; border-collapse: collapse; margin: var(--vl-space-md) 0; font-size: 16px; }
.vl-tabla th, .vl-tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vl-border); vertical-align: top; }
.vl-tabla th { background: var(--vl-bg-hero); }

/* c-14 (24/09, capturas de Sergio a ~850 px) · Cabecera PEGADA al subir en móvil/tableta: Woodmart pintaba la fila del
   logo en negro (#212121) con el logo de letras blancas casi invisible, y arrastraba la barra de 4 iconos (192 px en total).
   Ahora: fila del logo blanca con el logo normal, y la barra de iconos no va pegada (queda en 132 px). */
@media (max-width: 1024px) {
  /* c-17 (24/09 16:15, VL 1.0): la cabecera ya NO va por encima del contenido (overlap apagado en el Header Builder); sin el
     hero lila debajo, Woodmart pinta la fila del logo en negro (#212121, «whb-color-light») SIEMPRE, no solo pegada → blanca. */
  .whb-header .whb-row.whb-top-bar.whb-color-light.whb-without-bg,
  .whb-sticked .whb-row.whb-top-bar.whb-color-light.whb-without-bg { background-color: var(--vl-bg); }
  /* con .whb-top-bar delante para ganar a header-el-logo-opt-swap.css de Woodmart, que carga después */
  .whb-sticked .whb-top-bar .wd-switch-logo .wd-main-logo { display: block; }
  .whb-sticked .whb-top-bar .wd-switch-logo .wd-sticky-logo { display: none; }
  .whb-sticked .whb-header-bottom { display: none; }
}

/* c-15 (24/09) · [16:45: la ficha ya NO necesita hueco: el solape de la cabecera se apagó en el Header Builder; queda solo mi-cuenta, que ya no casa (sin .wd-header-overlap) y es inofensivo] Ficha de Directorist: la cabecera va POR ENCIMA del contenido (wd-header-overlap) y Woodmart solo deja
   40 px, así que «Volver / Guardar / Compartir» se montaban sobre el menú. Escritorio: banner 40 + fila 92; móvil: 40+60+60. */
html body.page-id-11.wd-header-overlap .wd-content-layout:first-child { padding-top: 140px; }   /* page-id-11 = /mi-cuenta/ (WooCommerce, sin hero).
   Medido 24/09: gana la de Woodmart «.wd-header-overlap:where(:not(.single-product)) .wd-content-layout:first-child{padding-top:0}»
   (header-opt-overlap.css, carga después): por eso esta lleva html + las dos clases del body + :first-child */
@media (max-width: 1024px) {
  html body.page-id-11.wd-header-overlap .wd-content-layout:first-child { padding-top: 172px; }
}

/* c-16 (24/09, pasada de diseño móvil-primero a 375/850/1440, 26 páginas) */
/* c-16a · La barra inferior de Woodmart (CONTACTO / NOSOTROS, letra de 11 px) seguía saliendo en las páginas SIN la
   barra fija del triaje (formulario, reserva, registros, mi cuenta). Decisión 16 de Sergio: fuera en todas. */
body.sticky-toolbar-on .wd-toolbar { display: none; }       /* con el body delante: la parte CSS de Woodmart (opt-bottom-toolbar) carga después que esta hoja */
body.sticky-toolbar-on, body.wd-toolbar-enabled { padding-bottom: 0; }
/* c-16b · Barra de 4 iconos a 375: «PROVEEDORES» se salía 10 px por la derecha. Cuatro columnas iguales y letra de 10 px. */
@media (max-width: 480px) {
  .whb-header-bottom .whb-col-mobile { display: flex; width: 100%; margin-inline: 0; }   /* Woodmart le pone margin -10px: de ahí los 385 px */
  .whb-header-bottom .whb-col-mobile > .info-box-wrapper { flex: 1 1 25%; min-width: 0; padding-inline: 2px; }
  .whb-header-bottom .wd-info-box .info-box-title { font-size: 10px; letter-spacing: 0; overflow-wrap: anywhere; }
}
/* c-16c · Áreas de toque de 44 px (WCAG 2.5.8): enlaces legales del pie (20 px), categoría y migas del blog (16 px),
   «Inicia sesión» / «Volver a elegir perfil» en los registros (18-20 px). Solo padding: no cambia el aspecto. */
.vl-footer__legal a, .vl-footer__links a, .vl-footer__bottom a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
.wd-post-cat a, .wd-entry-meta a, .wd-breadcrumbs a, .breadcrumbs a, .wd-post-cat .wd-cat-item { display: inline-block; padding: 8px 2px; margin: -8px -2px; }
/* 27/09 (Sergio, portada a 1303 px): esta regla genérica de enlaces (44 px de toque) pisaba a las pastillas de provincia y a las de «¿Qué te pasa?»
   (padding 10px 0 y el texto se salía del borde). Las dos se excluyen aquí y recuperan su forma abajo. */
.wd-page-content .vl-provincias__lista a.vl-provincias__item, .wd-page-content .vl-que-te-pasa__lista a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin: 0; }
.wd-page-content a:not(.vl-btn):not(.btn):not(.vl-provincias__item):not(.vl-que-te-pasa__lista a), .vl-card__body a, .vl-section p a, .vl-auth a, .ur-frontend-form a, .user-registration-LostPassword a, .woocommerce-LostPassword a { display: inline-block; padding: 10px 0; margin: -10px 0; /* C4 26/09: con 8 px los enlaces medían 40; con 10, 44 (línea de 24 px) */ }
/* c-16d · El carrusel de MARCAS de la demo de Woodmart (vitra, magisso…) salía en blog, entradas, producto, ficha y legales. Es un
   widget de la demo, no de Sergio: se esconde (no se borra). */
.wd-brands.brands-widget { display: none; }
/* c-16e · Blog: «0» de comentarios con 11 px y la fecha con 12 px → 13 px mínimo. */
body .wd-replies-count, body .post-date-month, body .post-date-day { font-size: 13px; }
/* c-16f · 27/09 (Sergio: «aún hay fallos de diseño», medido en Consultora Tu Visión 10529 a 1580 px). Cuatro fallos de las páginas
   de WPBakery, arreglados de forma genérica para que valgan en todas y no solo en la que se midió:
   1) el HTML mete la clase de la «etiquetita» (.vl-hero__brand: 13 px, mayúsculas) DENTRO del H1 → «Orientación profesional en» y debajo
      «SALUD VISUAL» en pequeño. Dentro del título se comporta como la palabra destacada (mismo tamaño, rosa, en línea). */
.vl-hero__title .vl-hero__brand { display: inline; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; margin: 0; color: var(--vl-primary-dark); }
/* 2) la regla genérica de enlaces (44 px de toque, justo arriba) también alcanza a los botones metidos en un párrafo (.vl-section p a):
      margin -10px y el botón se montaba sobre la línea de texto anterior («Inicia tu formulario…» / «Iniciar consulta de visión»). */
.wd-page-content p > a.vl-btn, .vl-section p > a.vl-btn { margin-top: 0; margin-bottom: 0; padding: 12px 24px; }
/* 3) <span class="vl-center-card__badge"> («Importante», «Garantía») dentro de un <p> de una tarjeta: solo tenía flex:0 0 auto (es la
      clase del sello de la ficha del directorio), así que salía como texto suelto flotando junto al título. Aquí es una pastilla. */
p > .vl-center-card__badge { display: inline-block; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); font-weight: 600; color: var(--vl-primary-dark); background: var(--vl-neon-suave); padding: 4px 12px; border-radius: var(--vl-radius-pill); }
/* 4) cada fila de WPBakery lleva 40/56 px y la .vl-section de dentro otros 72/72: huecos de 240 px entre secciones. La regla de
      legado-paginas.css:382 ya lo arreglaba en 5 páginas por id; esta vale para todas (10529, 10536, 10549, 10551, 10555 incluidas). */
.wd-page-content .vc_row .vl-section { padding-top: var(--vl-space-lg); padding-bottom: var(--vl-space-lg); }
/* 5) (medido en Optometría Avanzada 10541) el H1 lleva DOS spans: uno normal («Centros especializados en») y el de la etiqueta; la regla
      .vl-hero__title span pinta los dos de rosa y el título salía entero rosa. Con la etiqueta dentro, el span normal hereda el color. */
.vl-hero__title:has(.vl-hero__brand) > span:not(.vl-hero__brand) { color: inherit; }
/* 6) franja vacía de 75 px entre el menú y el hero: la primera fila de WPBakery trae padding-top 40 px y su columna 35 px, los dos con
      !important desde el editor (no se pueden pisar sin otro !important, prohibido aquí). El hero, que ya es de ancho completo, sube
      esos 75 px con margen negativo. Solo cuando el hero va en la PRIMERA fila. */
.wd-page-content .wpb-content-wrapper > .vc_row:first-child .vl-hero { margin-top: -40px; }
/* 27/09 tarde, medido página a página: en las 6 con la primera fila «home-hero» (40 px de fila + 35 de columna, con !important) el hueco
   total es de 115 px; en las otras 4 (10536, 10555, 10549, 10551) solo hay los 40 px del área de contenido, y con -75 el hero se metía
   35 px debajo de la cabecera fija. Por eso: -40 para todas y -115 solo para esas seis. */
html body.page-id-10529 .wpb-content-wrapper > .vc_row:first-child .vl-hero, html body.page-id-10541 .wpb-content-wrapper > .vc_row:first-child .vl-hero, html body.page-id-10543 .wpb-content-wrapper > .vc_row:first-child .vl-hero, html body.page-id-10783 .wpb-content-wrapper > .vc_row:first-child .vl-hero, html body.page-id-10782 .wpb-content-wrapper > .vc_row:first-child .vl-hero, html body.page-id-10784 .wpb-content-wrapper > .vc_row:first-child .vl-hero { margin-top: -115px; }
/* 7) las 3 páginas de Proveedores (10783, 10782, 10784) llevan saltos de línea <br> escritos a mano DENTRO de los párrafos (55, 38 y 29
      medidos): el texto se escribió para una columna más estrecha y a 1580 px salen líneas rotas a mitad de frase («empresas»,
      «concretos», «y sin actuar como central de compras» solas). Los <br> de los párrafos no se pintan (todos van seguidos de un
      espacio, medido, así que las palabras no se pegan); los del H1 («Proveedores del / sector óptico») se quedan. */
html body.page-id-10783 main p br, html body.page-id-10782 main p br, html body.page-id-10784 main p br { display: none; }
/* 9) Alta (11332), Sergio lo señaló en su captura: el selector de tipo de ficha de Directorist («Clínicas Visión», «Doctores
      Oftalmólogos»…) sale con 6 cajas desiguales (el enlace es inline-block, se encoge al texto, y la etiqueta más larga se sale del
      borde), icono pegado a la esquina y un hueco blanco enorme debajo. Aquí cada opción es una tarjeta de la casa, del mismo ancho,
      icono centrado y texto dentro. */
html body .vl-alta-ficha__card .directorist-add-listing-types .directorist-row { gap: var(--vl-space-md) 0; }
html body .vl-alta-ficha__card .directorist-add-listing-types [class*="directorist-col-"] { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 var(--vl-space-sm); }
html body .vl-alta-ficha__card .directorist-add-listing-types__single__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vl-space-sm); width: 100%; min-height: 150px; padding: var(--vl-space-md); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); background: var(--vl-bg); color: var(--vl-text); font-weight: 600; text-align: center; transition: box-shadow var(--vl-transition-neon), transform var(--vl-transition-neon); }
html body .vl-alta-ficha__card .directorist-add-listing-types__single__link:hover, html body .vl-alta-ficha__card .directorist-add-listing-types__single__link:focus-visible { box-shadow: var(--vl-halo); transform: translateY(var(--vl-lift)); color: var(--vl-primary-dark); }
html body .vl-alta-ficha__card .directorist-add-listing-types__single__link .directorist-icon-mask { margin: 0 auto var(--vl-space-sm); } /* el plugin deja el enlace en inline-block pase lo que pase: el icono se centra con margen auto */
html body .vl-alta-ficha__card .directorist-add-listing-types__single__link span { display: block; width: 100%; white-space: normal; line-height: 1.3; }
@media (max-width: 767px) { html body .vl-alta-ficha__card .directorist-add-listing-types [class*="directorist-col-"] { flex: 0 0 50%; max-width: 50%; } }
/* 8) Contacto (10551, medido a 1307 px): la rejilla .vl-contacto es de 2 columnas (1fr / 1.2fr) y el HTML trae 3 piezas en este orden:
      vías de contacto · aviso «No para urgencias» · formulario. Por orden, el aviso caía en la columna 2 estirado a la altura de las vías
      (517 px de caja naranja casi vacía) y el formulario se quedaba solo en la columna 1 con la 2 vacía. Aquí cada pieza va a su sitio:
      vías + aviso en la columna 1 (el aviso sin estirar), el formulario ocupa la columna 2 a lo largo de las dos filas. */
@media (min-width: 1024px) {
  .vl-contacto > .vl-contacto__vias { grid-column: 1; grid-row: 1; }
  .vl-contacto > .vl-alert { grid-column: 1; grid-row: 2; align-self: start; }
  .vl-contacto > .vl-form-content { grid-column: 2; grid-row: 1 / span 2; }
}


/* c-18 (24/09 16:45, VL 1.0) · /mi-cuenta/ (page-id-11): el login+registro de WooCommerce lo pinta Woodmart (2 columnas, botones verdes
   .btn-accent). Estas reglas vivían en huecos.css (ya no se carga) y componentes.css de Cowork no las cubre. Copiadas tal cual. */
.vl-auth { padding: var(--vl-space-2xl) 0; }
/* Los botones de WooCommerce salen VERDES: Woodmart los pinta con .btn.btn-accent y sus variables --btn-accented-*.
   Se redefinen aquí, en .vl-auth (más cerca del botón que el :root de Woodmart, así ganan), al azul de .vl-btn--primary. */
.vl-auth {
  --btn-accented-bgcolor: var(--vl-secondary);
  --btn-accented-bgcolor-hover: var(--vl-secondary-dark);
  --btn-accented-color: var(--vl-on-color);
  --btn-accented-color-hover: var(--vl-on-color);
  --btn-accented-brd-radius: var(--vl-radius-pill);
  --btn-accented-height: var(--vl-touch);
  --btn-accented-font-size: 17px;
  --btn-accented-transform: none;
  --btn-accented-box-shadow: var(--vl-shadow-sm);
  --btn-accented-box-shadow-hover: var(--vl-shadow-md);
}
/* la sección entera centrada lleva el fondo suave de la casa: la tarjeta blanca se distingue del fondo */
.vl-auth--centered { background: var(--vl-bg-soft); }
.vl-auth__container { width: 100%; max-width: var(--vl-container); margin: 0 auto; padding: 0 var(--vl-space-md); }
.vl-auth__container--centered { max-width: 480px; }
.vl-auth__intro { margin-bottom: var(--vl-space-lg); }
.vl-auth__intro--centered { text-align: center; }
.vl-auth__eyebrow { display: block; font-family: var(--font-titulos); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--vl-primary-dark); margin: 0 0 var(--vl-space-sm); }
.vl-auth__title { font-size: var(--vl-font-h1); line-height: 1.15; margin: 0 0 var(--vl-space-sm); }
.vl-auth__text { font-size: var(--vl-font-body); line-height: 1.6; color: var(--vl-text-muted); margin: 0; }
.vl-auth__card { background: var(--vl-bg); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg) var(--vl-space-md); box-shadow: var(--vl-shadow-md); }
.vl-auth__card--centered { margin: 0 auto; max-width: 480px; }
/* Woodmart pone el login y el registro en 2 columnas con 80 px de hueco y márgenes negativos: aquí, una columna */
.vl-auth__card .wd-registration-page { max-width: none; }
.vl-auth__card .wd-grid-f-col { margin: 0; }
.vl-auth__card .wd-grid-f-col > .wd-col { flex: 0 0 100%; max-width: 100%; padding-inline: 0; margin-bottom: 0; }
.vl-auth__card #customer_login > div:not(:first-child):last-child { border-inline-start: 0; border-top: 1px solid var(--vl-border); margin-top: var(--vl-space-lg); padding-top: var(--vl-space-lg); }
.vl-auth__card .wd-login-title { font-size: var(--vl-font-h3); margin: 0 0 var(--vl-space-md); }
.vl-auth__card label { font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text); }
.vl-auth__card input.input-text,
.vl-auth__card input[type="text"],
.vl-auth__card input[type="email"],
.vl-auth__card input[type="password"] {
  width: 100%; min-height: var(--vl-touch); padding: 12px var(--vl-space-md);
  border: 2px solid var(--vl-border); border-radius: var(--vl-radius-md);
  background: var(--vl-bg); color: var(--vl-text); font-size: 17px; line-height: 24px;
}
.vl-auth__card input.input-text:focus { border-color: var(--vl-secondary); box-shadow: 0 0 0 3px var(--vl-secondary-light); }
.vl-auth .vl-auth__card .button,
.vl-auth .vl-auth__card .woocommerce-button,
.vl-auth .vl-auth__card button.woocommerce-Button,
.vl-auth .vl-auth__card button[type="submit"] {
  width: 100%; min-height: var(--vl-touch); padding: 12px var(--vl-space-lg);
  border-radius: var(--vl-radius-pill); border: 0;
  background: var(--vl-secondary); color: var(--vl-on-color);
  font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.vl-auth .vl-auth__card .button:hover,
.vl-auth .vl-auth__card .woocommerce-button:hover,
.vl-auth .vl-auth__card button.woocommerce-Button:hover,
.vl-auth .vl-auth__card button[type="submit"]:hover { background: var(--vl-secondary-dark); color: var(--vl-on-color); box-shadow: var(--vl-shadow-md); }
.vl-auth__card .login-form-footer { display: flex; flex-direction: column; gap: var(--vl-space-sm); margin-top: var(--vl-space-sm); font-size: var(--vl-font-small); }
.vl-auth__card .lost_password { display: inline-flex; align-items: center; min-height: 44px; color: var(--vl-secondary); }
.vl-auth__register-link { text-align: center; margin-top: var(--vl-space-lg); font-size: var(--vl-font-body); line-height: 1.6; color: var(--vl-text-muted); }
.vl-auth__register-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--vl-secondary); }
@media (min-width: 640px) {
  .vl-auth { padding: var(--vl-space-3xl) 0; }
  .vl-auth__card { padding: var(--vl-space-xl); }
  .vl-auth__card .login-form-footer { flex-direction: row; justify-content: space-between; align-items: center; }
}


/* c-19 (24/09 17:20, captura de Sergio a 1440) · Cabecera de ESCRITORIO: el menú real tiene 8 entradas (932 px) y el bloque 11505
   nuevo 4 piezas; no cabían: el menú se partía en 2 filas y «Buscar un centro / Soy profesional» se subían al banner.
   Ahora: en escritorio quedan «Entrar» + el botón (Buscar y Soy profesional ya están en el menú), el menú un poco más
   compacto y la columna del bloque no se estrecha. Cowork dibujó un menú de 5 entradas: eso es decisión de Sergio (Apariencia → Menús). */
@media (min-width: 1025px) {
  .whb-header .vl-header-botones__enlace:not([href="/login/"]) { display: none; }
  .whb-header .vl-header-botones { flex-wrap: nowrap; gap: var(--vl-space-xs); }
  .whb-header .whb-column:has(> .vl-header-botones), .whb-header .whb-column:has(.vl-header-botones) { flex: 0 0 auto; }
  .whb-header .wd-nav.wd-nav-main { flex-wrap: nowrap; }
  .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 9px; font-size: 14px; letter-spacing: 0; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .whb-header .wd-nav.wd-nav-main > li > a { padding-inline: 6px; font-size: 13px; }
}

/* c-16g · 27/09, revisor Fable a 375 px: 1) en consultora/optometría/cirugía los datos del hero van como <p class="vl-hero__meta"> sueltos
   (la regla es para <ul>/<span>): aquí cada <p> es una línea con ✓ como en el resto de páginas; 2) la barra fija de móvil («Empezar el
   triaje gratis») tapaba la última línea del pie (el aviso del CMP de Google se añade fuera del pie): más aire abajo en móvil. */
p.vl-hero__meta { display: inline-flex; align-items: center; gap: var(--vl-space-xs); margin: 0 var(--vl-space-lg) var(--vl-space-xs) 0; }
p.vl-hero__meta::before { content: "\2713"; color: var(--vl-success); font-weight: 700; }
@media (max-width: 1024px) { body.vl-con-barra-iconos, body.wd-toolbar-enabled { padding-bottom: 104px; } }
