/* ============================================================
   componentes.css · VISIONLOVERS · Sistema VL 2.0 (26/09/2026: 1.1 + la marca neón en botón secundario y tarjetas)
   Todas las piezas que usan las 26 pantallas: botón, tarjeta, ficha de
   centro, chips, campos, opciones del triaje, pasos, acordeón/FAQ, avisos,
   tabla de precios, testimonio, pestañas, tabla, migas, paginación,
   franja, autenticación, guías del blog, directorio vacío, 404.
   Cubre las 119 clases vl-* del HTML vivo (las 33 que no tenían CSS
   incluidas) y las nuevas del diseño. Las clases de programación de
   Claude Code (vl-panel*, vl-cta-fija*, vl-cookies*, vl-vista*, vl-calc*,
   vl-cuenta*, vl-verificado*, vl-oferta*, vl-a11y*) NO se renombran:
   su CSS vive en paneles.css / premium.css / fichas.css / accesibilidad.css.
   Móvil primero. Cero !important. Todo tamaño de letra es var(--vl-font-*)
   para que el panel de accesibilidad lo escale.
   ============================================================ */

/* ---------- Base de las piezas ---------- */
[class^="vl-"], [class*=" vl-"], [class^="vl-"] *, [class*=" vl-"] * { box-sizing: border-box; }
.vl-icon { width: 24px; height: 24px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vl-icon--sm { width: 20px; height: 20px; }
.vl-icon--lg { width: 28px; height: 28px; }

/* ---------- Botón ---------- */
.vl-btn {
  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 transparent;
  font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); line-height: 1.25; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--vl-transition-normal), color var(--vl-transition-normal), box-shadow var(--vl-transition-normal), transform var(--vl-transition-normal), border-color var(--vl-transition-normal);
}
.vl-btn:hover, .vl-btn:focus-visible { text-decoration: none; }
.vl-btn--primary { background: var(--vl-secondary); color: var(--vl-on-color); box-shadow: var(--vl-shadow-sm); }
.vl-btn--primary:hover { background: var(--vl-secondary-dark); color: var(--vl-on-color); box-shadow: var(--vl-shadow-md); transform: translateY(var(--vl-lift)); }
.vl-btn--primary:active { transform: translateY(0); box-shadow: var(--vl-shadow-xs); }
/* VL 2.0 (26/09/2026, la marca «sí o sí»): el botón secundario lleva el ARO neón (capa 2): borde de 1 px en #d946ef y un segundo aro
   al 15 %, esquinas de 14 px. El texto va en el rosa que se lee (#a91b6f, 6,83:1); el neón solo en el aro. Antes: borde azul y forma píldora. */
.vl-btn--secondary { background: var(--vl-bg); color: var(--vl-primary-dark); border-color: transparent; border-radius: var(--vl-radius-aro); box-shadow: var(--vl-aro); transition: box-shadow var(--vl-transition-neon), background var(--vl-transition-neon), color var(--vl-transition-neon), transform var(--vl-transition-neon); }
.vl-btn--secondary:hover { background: var(--vl-neon-suave); color: var(--vl-primary-dark); box-shadow: var(--vl-aro-fuerte); }
.vl-btn--secondary:active { box-shadow: var(--vl-aro); background: var(--vl-primary-light); }
/* Estado «cargando»: el botón se bloquea, el texto se atenúa y gira un aro. Se pone con aria-busy="true" (y se lee en el lector de pantalla). */
.vl-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.vl-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); border-top-color: currentColor; color: var(--vl-on-color); animation: vl-gira 700ms linear infinite; }
.vl-btn--secondary[aria-busy="true"]::after { border-color: rgba(var(--vl-neon-rgb), .25); border-top-color: var(--vl-primary-dark); }
@keyframes vl-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vl-btn[aria-busy="true"]::after { animation-duration: 2s; } }
.vl-btn--ghost { background: transparent; color: var(--vl-secondary-dark); }
.vl-btn--ghost:hover { background: var(--vl-bg-gray); color: var(--vl-secondary-dark); }
/* Blanco: para ir sobre el pie o sobre una franja azul */
.vl-btn--white { background: var(--vl-on-color); color: var(--vl-secondary-dark); border-color: var(--vl-on-color); }
.vl-btn--white:hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); border-color: var(--vl-secondary-light); }
.vl-btn--danger { background: var(--vl-danger); color: var(--vl-on-color); }
.vl-btn--danger:hover { background: var(--vl-warning); color: var(--vl-on-color); }
.vl-btn--sm { min-height: 40px; padding: 8px var(--vl-space-md); font-size: var(--vl-font-small); }
.vl-btn--lg { padding: 14px var(--vl-space-xl); font-size: var(--vl-font-body); }
.vl-btn--block, .vl-btn--full { width: 100%; }
@media (min-width: 600px) { .vl-btn--full { width: auto; } }   /* «full» = ancho completo SOLO en móvil */
.vl-btn:disabled, .vl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.vl-btn__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.vl-btn svg, .vl-badge svg, .vl-chip svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vl-btn--whatsapp { background: var(--vl-success); color: var(--vl-on-color); }
.vl-btn--whatsapp:hover { background: #0f6a31; color: var(--vl-on-color); }
/* Nota bajo un botón: «Gratis · te contesta la colegiada» */
.vl-btn-nota { display: block; margin-top: var(--vl-space-sm); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }

/* ---------- Tarjeta ---------- */
/* VL 2.0 (26/09/2026, la marca «sí o sí»): la tarjeta lleva el HALO neón (capa 1): sombra suave oscura + halo rosa al 20 % + filo de 1 px,
   esquinas de 24 px. Al pasar el ratón el halo sube al 30 % en 120 ms (0 ms con menos movimiento). Antes: borde rosa pálido y sombra gris. */
.vl-card {
  background: var(--vl-bg-card); border: 0; border-radius: var(--vl-radius-xl);
  padding: var(--vl-space-lg); box-shadow: var(--vl-halo); position: relative;
  transition: box-shadow var(--vl-transition-neon), transform var(--vl-transition-neon);
}
.vl-card:hover { box-shadow: var(--vl-halo-fuerte); transform: translateY(var(--vl-lift)); }
.vl-card--flat, .vl-card--flat:hover { box-shadow: none; transform: none; }
.vl-card--link { display: block; color: inherit; text-decoration: none; }
.vl-card--link:hover { color: inherit; text-decoration: none; }
.vl-card--link .vl-card__title { color: var(--vl-secondary-dark); }
.vl-card__title { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 600; color: var(--vl-text); margin: 0 0 var(--vl-space-xs); }
.vl-card__meta { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0 0 var(--vl-space-md); }
.vl-card__body { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); }
.vl-card__body p:last-child { margin-bottom: 0; }
.vl-card__icon { width: var(--vl-touch); height: var(--vl-touch); border-radius: var(--vl-radius-md); background: var(--vl-primary-light); color: var(--vl-primary-dark); display: grid; place-items: center; margin-bottom: var(--vl-space-md); }
.vl-card__icon svg { width: 26px; height: 26px; }
.vl-card__badge { display: inline-flex; align-items: center; gap: var(--vl-space-xs); font-family: var(--font-titulos); font-size: var(--vl-font-eyebrow); line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--vl-primary-dark); margin: 0 0 var(--vl-space-sm); }
.vl-card__disclaimer { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-light); margin: var(--vl-space-md) 0 0; padding-top: var(--vl-space-md); border-top: 1px solid var(--vl-border); }
.vl-card__footer { margin-top: var(--vl-space-lg); display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); align-items: center; }
.vl-card__num { font-family: var(--font-titulos); font-size: var(--vl-font-h2); line-height: 1; font-weight: 700; color: var(--vl-primary-dark); margin-bottom: var(--vl-space-sm); }
/* Tarjeta «hero»: la tarjeta grande que va dentro de un hero (formulario, resultado) */
.vl-card--hero { padding: var(--vl-space-xl) var(--vl-space-lg); box-shadow: var(--vl-shadow-lg); border-color: var(--vl-border); }
.vl-card--hero:hover { transform: none; box-shadow: var(--vl-shadow-lg); }
@media (min-width: 768px) { .vl-card--hero { padding: var(--vl-space-2xl); } }
/* Tarjeta destacada (la del plan «más elegido») */
.vl-card--destacada { box-shadow: var(--vl-halo-fuerte), inset 0 0 0 2px var(--vl-secondary); }
.vl-card--destacada:hover { box-shadow: var(--vl-halo-fuerte), inset 0 0 0 2px var(--vl-secondary); }
.vl-card--destacada .vl-card__badge { position: absolute; top: calc(-1 * var(--vl-space-md)); left: var(--vl-space-lg); background: var(--vl-secondary); color: var(--vl-on-color); padding: 4px 12px; border-radius: var(--vl-radius-pill); margin: 0; }
/* Tarjeta con número de paso (vl-grid-4--steps) */
.vl-grid-4--steps .vl-card::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vl-primary-light); color: var(--vl-primary-dark); font-family: var(--font-titulos); font-weight: 700; font-size: var(--vl-font-h4); margin-bottom: var(--vl-space-md); }

/* ---------- Ficha de centro (resultado del directorio) ---------- */
.vl-center-card {
  display: flex; flex-direction: column; gap: var(--vl-space-md);
  background: var(--vl-bg-card); border: 0; border-radius: var(--vl-radius-xl);
  padding: var(--vl-space-lg); box-shadow: var(--vl-halo); height: 100%; position: relative;
  transition: box-shadow var(--vl-transition-neon), transform var(--vl-transition-neon);
}
.vl-center-card:hover { box-shadow: var(--vl-halo-fuerte); transform: translateY(var(--vl-lift)); }
.vl-center-card__photo { width: calc(100% + var(--vl-space-lg) * 2); margin: calc(-1 * var(--vl-space-lg)) calc(-1 * var(--vl-space-lg)) 0; aspect-ratio: 16 / 9; border-radius: var(--vl-radius-xl) var(--vl-radius-xl) 0 0; background: var(--vl-bg-gray); object-fit: cover; display: block; }
.vl-center-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vl-space-md); }
.vl-center-card__name { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 600; margin: 0; color: var(--vl-text); }
.vl-center-card__name a { color: inherit; }
.vl-center-card__badge { flex: 0 0 auto; }
.vl-center-card__tagline { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-primary-dark); font-weight: 500; margin: 0; }
.vl-center-card__location { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); display: flex; gap: var(--vl-space-xs); align-items: center; margin: 0; }
.vl-center-card__location svg { width: 18px; height: 18px; color: var(--vl-secondary); }
.vl-center-card__description { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); margin: 0; }
.vl-center-card__chips { display: flex; flex-wrap: wrap; gap: var(--vl-space-xs); }
.vl-center-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--vl-space-md); padding-top: var(--vl-space-md); border-top: 1px solid var(--vl-border); flex-wrap: wrap; }
.vl-center-card__tel { display: inline-flex; align-items: center; gap: var(--vl-space-xs); min-height: var(--vl-touch); font-weight: 600; color: var(--vl-secondary-dark); }
.vl-center-card--ejemplo { border-style: dashed; opacity: .9; }
.vl-center-card--ejemplo::after { content: "Ejemplo de ficha"; position: absolute; top: var(--vl-space-md); right: var(--vl-space-md); font-size: var(--vl-font-caption); font-weight: 600; color: var(--vl-text-muted); background: var(--vl-bg-gray); padding: 2px 10px; border-radius: var(--vl-radius-pill); }

/* ---------- Chip y etiqueta ---------- */
.vl-chip { display: inline-flex; align-items: center; gap: var(--vl-space-xs); min-height: 32px; padding: 4px 12px; border-radius: var(--vl-radius-pill); background: var(--vl-primary-light); color: var(--vl-primary-dark); font-size: var(--vl-font-caption); line-height: 1.4; font-weight: 500; }
.vl-chip--azul { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
.vl-chip--gris { background: var(--vl-bg-gray); color: var(--vl-text-muted); }
a.vl-chip { min-height: 44px; padding: 8px 16px; }   /* un chip que es enlace se toca: 44 px */
a.vl-chip:hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); text-decoration: none; }
.vl-chips { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); }
.vl-badge { display: inline-flex; align-items: center; gap: var(--vl-space-xs); min-height: 28px; padding: 4px 10px; border-radius: var(--vl-radius-pill); font-size: var(--vl-font-caption); line-height: 1.4; font-weight: 600; white-space: nowrap; }
.vl-badge svg { width: 16px; height: 16px; }
.vl-badge--verificado, .vl-badge--ok { background: var(--vl-success-bg); color: var(--vl-success); }
.vl-badge--info { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
.vl-badge--rosa { background: var(--vl-primary-light); color: var(--vl-primary-dark); }
.vl-badge--aviso { background: var(--vl-warning-bg); color: var(--vl-warning); }
.vl-badge--gris { background: var(--vl-bg-gray); color: var(--vl-text-muted); }

/* ---------- Fila de confianza (colegiada + plazo) ---------- */
.vl-confianza { display: flex; flex-wrap: wrap; gap: var(--vl-space-md) var(--vl-space-xl); align-items: center; padding: var(--vl-space-md) var(--vl-space-lg); background: var(--vl-bg-card); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); box-shadow: var(--vl-shadow-xs); }
.vl-confianza__persona { display: flex; gap: var(--vl-space-md); align-items: center; }
.vl-confianza__nombre { font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin: 0; color: var(--vl-text); }
.vl-confianza__dato { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0; }
.vl-confianza__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vl-space-sm) var(--vl-space-lg); }
.vl-confianza__lista li { display: inline-flex; align-items: center; gap: var(--vl-space-xs); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-confianza__lista svg { width: 20px; height: 20px; color: var(--vl-success); }

/* ---------- Lista con marcas ---------- */
.vl-list { list-style: none; margin: 0 0 var(--vl-space-md); padding: 0; }
.vl-list li { position: relative; padding-left: calc(24px + var(--vl-space-sm)); margin-bottom: var(--vl-space-sm); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); }
.vl-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%; background: var(--vl-success-bg) center / 12px no-repeat; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.vl-list--steps { counter-reset: paso; }
.vl-list--steps li { padding-left: calc(32px + var(--vl-space-md)); min-height: 32px; margin-bottom: var(--vl-space-md); }
.vl-list--steps li::before { counter-increment: paso; content: counter(paso); width: 32px; height: 32px; top: 0; background: var(--vl-primary-light); color: var(--vl-primary-dark); font-family: var(--font-titulos); font-weight: 700; font-size: var(--vl-font-small); display: grid; place-items: center; }
.vl-list--x li::before { background-color: var(--vl-danger-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>"); }
.vl-list--compacta li { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); margin-bottom: var(--vl-space-xs); }

/* ---------- Pasos con número (cómo funciona) ---------- */
.vl-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-lg); counter-reset: paso; }
@media (min-width: 768px) { .vl-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vl-pasos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vl-paso { position: relative; padding: var(--vl-space-lg); background: var(--vl-bg-card); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); }
.vl-paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vl-secondary); color: var(--vl-on-color); font-family: var(--font-titulos); font-weight: 700; font-size: var(--vl-font-h4); margin-bottom: var(--vl-space-md); }
.vl-paso__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin: 0 0 var(--vl-space-xs); }
.vl-paso__texto { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0; }

/* ---------- Campo de formulario ---------- */
.vl-form { display: block; }
.vl-form-shell { max-width: var(--vl-container-text); margin: 0 auto; }
.vl-form-content { background: var(--vl-bg-card); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); box-shadow: var(--vl-shadow-lg); }
@media (min-width: 768px) { .vl-form-content { padding: var(--vl-space-2xl); } }
.vl-field { display: block; margin-bottom: var(--vl-space-lg); }
.vl-field__label { display: block; font-size: var(--vl-font-body); line-height: var(--vl-lh-small); font-weight: 600; color: var(--vl-text); margin-bottom: var(--vl-space-sm); }
.vl-field__label .vl-req { color: var(--vl-danger); margin-left: 2px; }
.vl-field__help { display: block; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin-top: var(--vl-space-xs); }
.vl-field__error { display: flex; gap: var(--vl-space-xs); align-items: center; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-danger); margin-top: var(--vl-space-xs); font-weight: 500; }
.vl-input, .vl-select, .vl-textarea {
  width: 100%; min-height: var(--vl-touch); padding: 12px var(--vl-space-md);
  border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md);
  background: var(--vl-bg); color: var(--vl-text); font-family: var(--font-cuerpo); font-size: var(--vl-font-body); line-height: 1.4;
  transition: border-color var(--vl-transition-fast), box-shadow var(--vl-transition-fast);
}
.vl-input::placeholder, .vl-textarea::placeholder { color: var(--vl-text-light); opacity: 1; }
.vl-input:focus, .vl-select:focus, .vl-textarea:focus { border-color: var(--vl-secondary); outline: none; box-shadow: 0 0 0 3px var(--vl-secondary-light); }
.vl-input[aria-invalid="true"], .vl-select[aria-invalid="true"], .vl-textarea[aria-invalid="true"] { border-color: var(--vl-danger); }
.vl-textarea { min-height: 140px; resize: vertical; }
.vl-select { appearance: none; padding-right: var(--vl-space-2xl); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right var(--vl-space-md) center; background-size: 20px; }
.vl-fieldset { border: 0; padding: 0; margin: 0 0 var(--vl-space-lg); min-width: 0; }
.vl-fieldset__legend { font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin-bottom: var(--vl-space-sm); padding: 0; }
.vl-form__fila { display: grid; gap: 0 var(--vl-space-md); }
@media (min-width: 640px) { .vl-form__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vl-check { display: flex; gap: var(--vl-space-sm); align-items: flex-start; min-height: var(--vl-touch); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); cursor: pointer; }
.vl-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--vl-secondary); flex: 0 0 auto; }
.vl-check--salud { padding: var(--vl-space-md); background: var(--vl-secondary-light); border-radius: var(--vl-radius-md); }
.vl-option { display: flex; gap: var(--vl-space-md); align-items: center; min-height: 56px; padding: var(--vl-space-md); margin-bottom: var(--vl-space-sm); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); cursor: pointer; font-size: var(--vl-font-body); line-height: 1.4; transition: border-color var(--vl-transition-fast), background var(--vl-transition-fast); }
.vl-option:hover { border-color: var(--vl-secondary); }
.vl-option:has(input:checked) { border-color: var(--vl-secondary); background: var(--vl-secondary-light); }
.vl-option:has(input:focus-visible) { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
.vl-option input { width: 22px; height: 22px; accent-color: var(--vl-secondary); flex: 0 0 auto; margin: 0; }
.vl-form__acciones { display: flex; flex-direction: column; gap: var(--vl-space-sm); margin-top: var(--vl-space-lg); }
@media (min-width: 600px) { .vl-form__acciones { flex-direction: row; align-items: center; justify-content: space-between; } }
.vl-form__plazo { display: flex; gap: var(--vl-space-sm); align-items: center; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-form__plazo svg { width: 20px; height: 20px; color: var(--vl-success); }

/* ---------- Pasos del triaje (barra de progreso) ---------- */
.vl-steps { position: relative; margin-bottom: var(--vl-space-lg); }
.vl-steps__bar { height: 6px; border-radius: var(--vl-radius-pill); background: var(--vl-border); overflow: hidden; }
.vl-steps__fill { height: 100%; width: 0; background: var(--vl-secondary); border-radius: inherit; transition: width var(--vl-transition-slow); }
/* El progreso va en un atributo, nunca en style="" (regla del encargo: cero estilos en línea) */
.vl-steps__fill[data-vl-progreso="25"] { width: 25%; } .vl-steps__fill[data-vl-progreso="50"] { width: 50%; } .vl-steps__fill[data-vl-progreso="75"] { width: 75%; } .vl-steps__fill[data-vl-progreso="100"] { width: 100%; }
.vl-steps__counter { display: flex; justify-content: space-between; font-size: var(--vl-font-caption); line-height: 1.4; font-weight: 500; color: var(--vl-text-muted); margin-top: var(--vl-space-sm); }
.vl-steps__list { list-style: none; margin: var(--vl-space-md) 0 0; padding: 0; display: none; gap: var(--vl-space-sm); }
.vl-steps__list li { flex: 1; font-size: var(--vl-font-caption); line-height: 1.4; color: var(--vl-text-muted); padding: 8px 10px; border-radius: var(--vl-radius-sm); background: var(--vl-bg-gray); text-align: center; }
.vl-steps__list li[aria-current="step"] { background: var(--vl-secondary); color: var(--vl-on-color); font-weight: 600; }
.vl-steps__list li.vl-hecho { background: var(--vl-success-bg); color: var(--vl-success); }
@media (min-width: 768px) { .vl-steps__list { display: flex; } }

/* ---------- Acordeón y FAQ ---------- */
.vl-accordion { border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); overflow: hidden; background: var(--vl-bg-card); }
.vl-accordion__item + .vl-accordion__item { border-top: 1px solid var(--vl-border); }
.vl-accordion__header { width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: var(--vl-space-md); padding: var(--vl-space-md) var(--vl-space-lg); background: var(--vl-bg-card); border: 0; text-align: left; font-family: var(--font-cuerpo); font-size: var(--vl-font-body); line-height: 1.4; font-weight: 600; color: var(--vl-text); cursor: pointer; }
.vl-accordion__header:hover { background: var(--vl-bg-gray); }
.vl-accordion__icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--vl-secondary); transition: transform var(--vl-transition-normal); }
.vl-accordion__header[aria-expanded="true"] .vl-accordion__icon { transform: rotate(180deg); color: var(--vl-primary-dark); }
.vl-accordion__body { background: var(--vl-bg-soft); }
.vl-accordion__body[hidden] { display: none; }
.vl-accordion__body-inner { padding: var(--vl-space-md) var(--vl-space-lg) var(--vl-space-lg); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); }
/* FAQ con <details>: funciona sin JavaScript */
.vl-faq { display: grid; gap: var(--vl-space-sm); }
.vl-faq-item { border: 1px solid var(--vl-border); border-radius: var(--vl-radius-md); background: var(--vl-bg-card); }
.vl-faq-item__question { margin: 0; font-family: var(--font-cuerpo); font-size: var(--vl-font-body); line-height: 1.4; font-weight: 600; }
.vl-faq-item__question summary, summary.vl-faq-item__question { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--vl-space-md); min-height: 56px; padding: var(--vl-space-md) var(--vl-space-lg); cursor: pointer; color: var(--vl-text); }
.vl-faq-item__question summary::-webkit-details-marker { display: none; }
.vl-faq-item__question summary::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23066aab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 24px no-repeat; transition: transform var(--vl-transition-normal); }
.vl-faq-item[open] .vl-faq-item__question summary::after { transform: rotate(180deg); }
.vl-faq-item__answer { padding: 0 var(--vl-space-lg) var(--vl-space-lg); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); }
.vl-faq-item__answer p:last-child { margin-bottom: 0; }

/* ---------- Avisos ---------- */
.vl-alert { display: flex; gap: var(--vl-space-md); padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); border: 1px solid transparent; font-size: var(--vl-font-body); line-height: var(--vl-lh-body); margin-bottom: var(--vl-space-lg); }
.vl-alert__icon { width: 28px; height: 28px; flex: 0 0 auto; margin-top: 2px; }
.vl-alert strong { display: block; font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); margin-bottom: var(--vl-space-xs); }
.vl-alert p:last-child, .vl-alert ul:last-child { margin-bottom: 0; }
.vl-alert ul { padding-left: 1.2em; margin: var(--vl-space-xs) 0 0; }
.vl-alert--info { background: var(--vl-info-bg); color: var(--vl-info); border-color: var(--vl-info-bg); }
.vl-alert--success { background: var(--vl-success-bg); color: var(--vl-success); }
.vl-alert--warning { background: var(--vl-warning-bg); color: var(--vl-warning); }
.vl-alert--danger { background: var(--vl-danger-bg); color: var(--vl-danger); border-color: var(--vl-danger); }
.vl-alert a { color: inherit; text-decoration: underline; }

/* ---------- Precio y planes ---------- */
.vl-precio { display: flex; align-items: baseline; gap: var(--vl-space-xs); flex-wrap: wrap; margin: var(--vl-space-sm) 0 var(--vl-space-md); }
.vl-precio__cifra { font-family: var(--font-titulos); font-size: var(--vl-font-precio); line-height: 1; font-weight: 700; color: var(--vl-text); }
.vl-precio__periodo { font-size: var(--vl-font-small); color: var(--vl-text-muted); }
.vl-precio__nota { width: 100%; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-precio__antes { font-size: var(--vl-font-small); color: var(--vl-text-light); text-decoration: line-through; }
.vl-planes { display: grid; gap: var(--vl-space-lg); align-items: stretch; }
@media (min-width: 768px) { .vl-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vl-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vl-space-xl); } }
.vl-planes .vl-card { display: flex; flex-direction: column; }
.vl-planes .vl-card .vl-btn { margin-top: auto; }
/* Comparativa básica / completa */
.vl-comparativa { width: 100%; border-collapse: collapse; font-size: var(--vl-font-body); }
.vl-comparativa th, .vl-comparativa td { padding: var(--vl-space-sm) var(--vl-space-md); border-bottom: 1px solid var(--vl-border); text-align: left; vertical-align: top; }
.vl-comparativa th { font-family: var(--font-titulos); font-weight: 600; }
.vl-comparativa thead th { background: var(--vl-bg-gray); }
.vl-comparativa td:not(:first-child) { text-align: center; }
.vl-comparativa .vl-si { color: var(--vl-success); font-weight: 600; }
.vl-comparativa .vl-no { color: var(--vl-text-light); }

/* ---------- Cálculo de retorno («¿Sale a cuenta?») ---------- */
.vl-retorno { background: var(--vl-secondary-light); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); display: grid; gap: var(--vl-space-md); }
@media (min-width: 768px) { .vl-retorno { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; } }
.vl-retorno__dato { text-align: center; }
.vl-retorno__cifra { display: block; font-family: var(--font-titulos); font-size: var(--vl-font-h2); line-height: 1.1; font-weight: 700; color: var(--vl-secondary-dark); }
.vl-retorno__etiqueta { display: block; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-retorno__dato--total .vl-retorno__cifra { color: var(--vl-primary-dark); }

/* ---------- Testimonio / cita ---------- */
.vl-testimonio { background: var(--vl-bg-card); border: 1px solid var(--vl-border-brand); border-left: 4px solid var(--vl-primary-dark); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); margin: 0; }
.vl-testimonio__texto { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text); margin: 0 0 var(--vl-space-md); font-style: normal; }
.vl-testimonio__autor { display: flex; align-items: center; gap: var(--vl-space-md); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-testimonio__autor b { color: var(--vl-text); display: block; }

/* ---------- Franja (llamada a la acción a todo el ancho) ---------- */
.vl-franja { background: var(--vl-secondary); color: var(--vl-on-color); padding: var(--vl-space-2xl) 0; }
.vl-franja--rosa { background: var(--vl-primary-dark); }
.vl-franja--lila { background: var(--vl-bg-hero); color: var(--vl-text); }
.vl-franja__inner { display: flex; flex-direction: column; gap: var(--vl-space-lg); align-items: flex-start; }
@media (min-width: 900px) { .vl-franja__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.vl-franja__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h2); line-height: var(--vl-lh-h2); font-weight: 700; color: inherit; margin: 0 0 var(--vl-space-xs); }
.vl-franja__texto { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); margin: 0; opacity: .95; max-width: 620px; }
.vl-franja .vl-btn--white { flex: 0 0 auto; }

/* ---------- Migas de pan ---------- */
.vl-migas { list-style: none; margin: 0 0 var(--vl-space-lg); padding: 0; display: flex; flex-wrap: wrap; gap: var(--vl-space-xs); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-migas li { display: inline-flex; align-items: center; gap: var(--vl-space-xs); }
.vl-migas li + li::before { content: "›"; color: var(--vl-text-light); }
.vl-migas a { color: var(--vl-secondary); min-height: 32px; display: inline-flex; align-items: center; }
.vl-migas [aria-current="page"] { color: var(--vl-text); font-weight: 500; }

/* ---------- Paginación ---------- */
.vl-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vl-space-sm); margin: var(--vl-space-xl) 0 0; list-style: none; padding: 0; }
.vl-paginacion a, .vl-paginacion span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--vl-touch); min-height: var(--vl-touch); padding: 0 var(--vl-space-md); border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-border); color: var(--vl-secondary-dark); font-weight: 600; }
.vl-paginacion a:hover { border-color: var(--vl-secondary); background: var(--vl-secondary-light); text-decoration: none; }
.vl-paginacion [aria-current="page"] { background: var(--vl-secondary); border-color: var(--vl-secondary); color: var(--vl-on-color); }

/* ---------- Pestañas (Entrar: soy paciente / soy profesional) ---------- */
.vl-tabs-login, .vl-tabs { display: flex; gap: var(--vl-space-xs); padding: var(--vl-space-xs); background: var(--vl-bg-gray); border-radius: var(--vl-radius-pill); margin-bottom: var(--vl-space-lg); }
.vl-tab-btn { flex: 1 1 0; min-height: var(--vl-touch); padding: 10px var(--vl-space-md); border: 0; border-radius: var(--vl-radius-pill); background: transparent; color: var(--vl-text-muted); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; cursor: pointer; transition: background var(--vl-transition-fast), color var(--vl-transition-fast); }
.vl-tab-btn:hover { color: var(--vl-secondary-dark); }
.vl-tab-btn.vl-active, .vl-tab-btn[aria-selected="true"] { background: var(--vl-bg); color: var(--vl-secondary-dark); box-shadow: var(--vl-shadow-xs); }
.vl-tab-content { display: none; }
.vl-tab-content.vl-active { display: block; }

/* ---------- Autenticación (Entrar / Registro) ---------- */
.vl-auth { padding: var(--vl-space-2xl) 0; }
.vl-auth__container { display: grid; gap: var(--vl-space-xl); align-items: start; }
@media (min-width: 1024px) { .vl-auth__container { grid-template-columns: 1fr 1.1fr; gap: var(--vl-space-3xl); } }
.vl-auth__container--centered { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.vl-auth__intro { max-width: var(--vl-container-text); }
.vl-auth__intro--centered { text-align: center; margin: 0 auto; }
.vl-auth__eyebrow { display: block; font-family: var(--font-titulos); text-transform: uppercase; letter-spacing: .12em; font-size: var(--vl-font-eyebrow); line-height: 1.4; font-weight: 600; color: var(--vl-primary-dark); margin-bottom: var(--vl-space-sm); }
.vl-auth__title { 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-md); }
.vl-auth__text { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); margin: 0 0 var(--vl-space-lg); }
.vl-auth__card { background: var(--vl-bg-card); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); box-shadow: var(--vl-shadow-lg); }
@media (min-width: 768px) { .vl-auth__card { padding: var(--vl-space-xl); } }
.vl-auth__card--centered { margin: 0 auto; width: 100%; }
.vl-auth__register-link, .vl-auth__pie { margin-top: var(--vl-space-lg); padding-top: var(--vl-space-md); border-top: 1px solid var(--vl-border); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); text-align: center; }
.vl-auth__register-link a { font-weight: 600; }
.vl-auth__ventajas { margin: 0; padding: 0; }
.vl-auth--centered { text-align: center; }

/* ---------- Guías por síntoma (blog) ---------- */
.vl-respuesta-directa { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text); background: var(--vl-secondary-light); border-left: 4px solid var(--vl-secondary); border-radius: 0 var(--vl-radius-md) var(--vl-radius-md) 0; padding: var(--vl-space-md) var(--vl-space-lg); margin: 0 0 var(--vl-space-lg); font-weight: 500; }
.vl-que-te-pasa { background: var(--vl-bg-soft); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); margin: var(--vl-space-xl) 0; color: var(--vl-text); } /* F10 26/09: heredaba el gris #767676 de Woodmart (3,9:1 sobre el lila, medido con axe); con el texto de la casa, 13:1 */
.vl-que-te-pasa__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin: 0 0 var(--vl-space-md); }
.vl-que-te-pasa__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-sm); }
@media (min-width: 640px) { .vl-que-te-pasa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vl-que-te-pasa__lista a { display: flex; align-items: center; gap: var(--vl-space-sm); min-height: var(--vl-touch); padding: var(--vl-space-sm) var(--vl-space-md); background: var(--vl-bg-card); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-md); color: var(--vl-secondary-dark); font-weight: 500; }
.vl-que-te-pasa__lista a:hover { border-color: var(--vl-secondary); background: var(--vl-secondary-light); text-decoration: none; }
.vl-que-te-pasa__lista a[aria-current="page"] { border-color: var(--vl-primary-dark); color: var(--vl-primary-dark); background: var(--vl-primary-light); }
.vl-relacionados { margin: var(--vl-space-xl) 0 0; padding-top: var(--vl-space-lg); border-top: 1px solid var(--vl-border); }
.vl-relacionados h2, .vl-relacionados h3 { font-size: var(--vl-font-h3); margin-bottom: var(--vl-space-md); }
.vl-relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-sm); }
.vl-relacionados a { display: inline-flex; align-items: center; min-height: var(--vl-touch); font-weight: 500; }
/* Cabecera de la entrada del blog */
.vl-entrada__meta { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm) var(--vl-space-md); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin-bottom: var(--vl-space-lg); }
.vl-entrada__meta span { display: inline-flex; align-items: center; gap: var(--vl-space-xs); }
.vl-entrada__meta svg { width: 18px; height: 18px; color: var(--vl-secondary); }
.vl-entrada__firma { display: flex; gap: var(--vl-space-md); align-items: center; padding: var(--vl-space-md) var(--vl-space-lg); background: var(--vl-bg-soft); border-radius: var(--vl-radius-lg); margin: var(--vl-space-xl) 0; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-entrada__firma b { color: var(--vl-text); display: block; font-size: var(--vl-font-body); }
/* Tarjeta de entrada en el listado del blog */
.vl-entrada-card { display: flex; flex-direction: column; gap: var(--vl-space-sm); }
.vl-entrada-card__sintoma { font-size: var(--vl-font-caption); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--vl-primary-dark); }
.vl-entrada-card .vl-card__title a { color: var(--vl-text); }
.vl-entrada-card .vl-card__title a:hover { color: var(--vl-secondary-dark); }
.vl-entrada-card__leer { margin-top: auto; display: inline-flex; align-items: center; gap: var(--vl-space-xs); min-height: var(--vl-touch); font-weight: 600; }

/* ---------- Directorio vacío (dicho de verdad) ---------- */
.vl-directorio-vacio { text-align: center; padding: var(--vl-space-2xl) var(--vl-space-lg); background: var(--vl-bg-soft); border: 1px dashed var(--vl-border-strong); border-radius: var(--vl-radius-lg); }
.vl-directorio-vacio h2, .vl-directorio-vacio h3 { font-size: var(--vl-font-h3); margin-bottom: var(--vl-space-sm); }
.vl-directorio-vacio p { color: var(--vl-text-muted); max-width: 520px; margin: 0 auto var(--vl-space-lg); }
.vl-directorio-vacio .vl-btn + .vl-btn { margin-left: var(--vl-space-sm); }
.vl-directorio-vacio .vl-form { text-align: left; }
/* Buscador del directorio */
.vl-buscador { display: grid; gap: var(--vl-space-sm); padding: var(--vl-space-md); background: var(--vl-bg-card); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); box-shadow: var(--vl-shadow-md); }
@media (min-width: 768px) { .vl-buscador { grid-template-columns: 1.4fr 1fr auto; align-items: end; } }
.vl-buscador .vl-field { margin: 0; }
.vl-directorio__cabecera { display: flex; flex-wrap: wrap; gap: var(--vl-space-md); align-items: center; justify-content: space-between; margin-bottom: var(--vl-space-lg); }
.vl-directorio__contador { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin: 0; }
.vl-filtros { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); }

/* ---------- Ficha completa de un centro ---------- */
.vl-ficha__cabecera { display: grid; gap: var(--vl-space-lg); align-items: start; }
@media (min-width: 900px) { .vl-ficha__cabecera { grid-template-columns: 1.4fr 1fr; gap: var(--vl-space-xl); } }
.vl-ficha__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--vl-radius-lg); background: var(--vl-bg-gray); display: block; }
.vl-ficha__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vl-space-sm) var(--vl-space-md); margin-bottom: var(--vl-space-sm); }
.vl-ficha__titulo h1 { margin: 0; }
.vl-ficha__direccion { display: flex; gap: var(--vl-space-xs); align-items: flex-start; color: var(--vl-text-muted); margin-bottom: var(--vl-space-md); }
.vl-ficha__direccion svg { width: 20px; height: 20px; color: var(--vl-secondary); flex: 0 0 auto; margin-top: 3px; }
.vl-ficha__acciones { display: flex; flex-direction: column; gap: var(--vl-space-sm); position: sticky; top: calc(var(--vl-header-sticky-h) + var(--vl-space-md)); }
.vl-ficha__acciones .vl-card { display: grid; gap: var(--vl-space-sm); }
.vl-ficha__acciones .vl-card:hover { transform: none; }
.vl-ficha__dato { display: flex; gap: var(--vl-space-sm); align-items: center; font-size: var(--vl-font-small); color: var(--vl-text-muted); }
.vl-ficha__dato svg { width: 20px; height: 20px; color: var(--vl-secondary); }
.vl-ficha__seccion { margin-top: var(--vl-space-xl); }
.vl-ficha__seccion h2 { font-size: var(--vl-font-h3); }
.vl-horario { width: 100%; border-collapse: collapse; font-size: var(--vl-font-small); }
.vl-horario th, .vl-horario td { padding: var(--vl-space-sm) 0; border-bottom: 1px solid var(--vl-border); text-align: left; }
.vl-horario th { font-weight: 500; color: var(--vl-text-muted); width: 40%; }
.vl-horario .vl-hoy th, .vl-horario .vl-hoy td { color: var(--vl-secondary-dark); font-weight: 600; }
.vl-mapa { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--vl-radius-lg); background: var(--vl-bg-gray); display: grid; place-items: center; color: var(--vl-text-muted); border: 1px solid var(--vl-border); }
@media (min-width: 640px) { .vl-mapa { aspect-ratio: 16 / 7; } }

/* ---------- Tabla genérica ---------- */
.vl-tabla { width: 100%; border-collapse: collapse; font-size: var(--vl-font-body); margin: 0 0 var(--vl-space-lg); }
.vl-tabla th, .vl-tabla td { padding: var(--vl-space-sm) var(--vl-space-md); border-bottom: 1px solid var(--vl-border); text-align: left; vertical-align: top; }
.vl-tabla thead th { background: var(--vl-bg-gray); font-family: var(--font-titulos); font-weight: 600; }
.vl-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--vl-space-lg); }
.vl-tabla-scroll .vl-tabla { min-width: 520px; margin: 0; }

/* ---------- Resultado del triaje / página de gracias ---------- */
.vl-gracias { text-align: center; max-width: 620px; margin: 0 auto; }
.vl-gracias__icono { width: 72px; height: 72px; border-radius: 50%; background: var(--vl-success-bg); color: var(--vl-success); display: grid; place-items: center; margin: 0 auto var(--vl-space-lg); }
.vl-gracias__icono svg { width: 36px; height: 36px; }
.vl-gracias .vl-pasos { text-align: left; margin-top: var(--vl-space-xl); }

/* ---------- Contacto ---------- */
.vl-contacto { display: grid; gap: var(--vl-space-xl); }
@media (min-width: 1024px) { .vl-contacto { grid-template-columns: 1fr 1.2fr; } }
.vl-contacto__vias { display: grid; gap: var(--vl-space-md); }
.vl-via { display: flex; gap: var(--vl-space-md); align-items: flex-start; padding: var(--vl-space-md) var(--vl-space-lg); background: var(--vl-bg-card); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); color: inherit; }
a.vl-via:hover { border-color: var(--vl-secondary); text-decoration: none; color: inherit; }
.vl-via__icono { width: var(--vl-touch); height: var(--vl-touch); border-radius: var(--vl-radius-md); background: var(--vl-secondary-light); color: var(--vl-secondary-dark); display: grid; place-items: center; flex: 0 0 auto; }
.vl-via__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h4); font-weight: 600; margin: 0 0 2px; }
.vl-via__texto { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0; }

/* ---------- Página 404 ---------- */
.vl-404 { text-align: center; max-width: 620px; margin: 0 auto; padding: var(--vl-space-2xl) 0; }
.vl-404__codigo { font-family: var(--font-titulos); font-size: var(--vl-font-precio); line-height: 1; font-weight: 700; color: var(--vl-primary-dark); margin-bottom: var(--vl-space-md); }
.vl-404__enlaces { display: grid; gap: var(--vl-space-sm); margin-top: var(--vl-space-xl); text-align: left; }
@media (min-width: 640px) { .vl-404__enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Equipo / persona (Sobre nosotros, Profesionales) ---------- */
.vl-persona { display: flex; gap: var(--vl-space-md); align-items: flex-start; }
.vl-persona__nombre { font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin: 0; }
.vl-persona__rol { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0; }
/* Línea de tiempo (la historia: DANA → hoy) */
.vl-historia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-lg); position: relative; }
.vl-historia::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--vl-border-brand); }
.vl-historia li { position: relative; padding-left: var(--vl-space-2xl); }
.vl-historia li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--vl-primary-dark); border: 3px solid var(--vl-bg); box-shadow: 0 0 0 2px var(--vl-primary-dark); }
.vl-historia__fecha { display: block; font-family: var(--font-titulos); text-transform: uppercase; letter-spacing: .1em; font-size: var(--vl-font-eyebrow); font-weight: 600; color: var(--vl-primary-dark); margin-bottom: var(--vl-space-xs); }
.vl-historia p { margin: 0; color: var(--vl-text-muted); }
.vl-historia b { color: var(--vl-text); }

/* ---------- Cifras (3 datos en fila) ---------- */
.vl-cifras { display: grid; gap: var(--vl-space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .vl-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vl-space-lg); } }
.vl-cifra { padding: var(--vl-space-md); background: var(--vl-bg-card); border: 1px solid var(--vl-border-brand); border-radius: var(--vl-radius-lg); text-align: center; }
.vl-cifra__num { display: block; font-family: var(--font-titulos); font-size: var(--vl-font-h2); line-height: 1.1; font-weight: 700; color: var(--vl-secondary-dark); }
.vl-cifra__txt { display: block; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }

/* ---------- Página legal ---------- */
.vl-legal { display: grid; gap: var(--vl-space-xl); }
@media (min-width: 1024px) { .vl-legal { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.vl-legal__indice { position: sticky; top: calc(var(--vl-header-sticky-h) + var(--vl-space-md)); padding: var(--vl-space-md) var(--vl-space-lg); background: var(--vl-bg-soft); border-radius: var(--vl-radius-lg); font-size: var(--vl-font-small); }
.vl-legal__indice ol { margin: 0; padding-left: 1.2em; }
.vl-legal__indice li { margin-bottom: var(--vl-space-xs); }
.vl-legal__indice a { display: inline-block; min-height: 32px; }
.vl-legal__fecha { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin-bottom: var(--vl-space-lg); }
.vl-legal__resumen { background: var(--vl-secondary-light); border-radius: var(--vl-radius-lg); padding: var(--vl-space-lg); margin-bottom: var(--vl-space-xl); }
.vl-legal__resumen h2 { font-size: var(--vl-font-h4); margin-top: 0; }

/* ---------- Estados que el panel de accesibilidad pide ---------- */
html[data-vl-facil="si"] .vl-hero::before { display: none; }
html[data-vl-comodo="si"] .vl-card, html[data-vl-comodo="si"] .vl-center-card, html[data-vl-comodo="si"] .vl-form-content, html[data-vl-comodo="si"] .vl-auth__card { background: var(--vl-bg); }
html[data-vl-foco="si"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-width: 5px; }


/* ============================================================
   VL 1.1 (24/09/2026) · arreglos de arreglos.css 2.2.3 absorbidos aquí (§1.3 del encargo)
   ============================================================ */
/* 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-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); }

/* 26/09 (revisión de diseño): base.css pone box-sizing: content-box a input[type="search"] (0,1,1) y ganaba a .vl-input (0,1,0):
   a 375 el campo «¿Qué buscas?» del directorio medía 343 px y se salía 17 px de su tarjeta. */
.vl-buscador .vl-input[type="search"] { box-sizing: border-box; }