/* ============================================================================ CIERRE DE MARCA (2026-09-11) La banda que cierra las paginas de marca: la linea de cobertura + los enlaces de referencia, entre el formulario de contacto y el footer. POR QUE EXISTE ESTE ARCHIVO Los dos parrafos colgaban DIRECTO de , fuera de todo contenedor: sin ancho maximo, sin padding y sin centrar. `.vs-cobertura` ni siquiera tenia una regla en ningun CSS del sitio, asi que heredaba el default del navegador y el texto arrancaba pegado al borde izquierdo de la ventana (x=0, ancho completo). En vendor-micro.php se veia menos mal solo porque llevaba un text-align:center inline, pero igual de suelto. POR QUE APARTE, Y NO DENTRO DE vendor-solucion.css Lo usan las dos plantillas y vendor-micro.php NO carga vendor-solucion.css. Duplicar las reglas en hero-marca.css las separa en dos a la primera correccion — la misma razon por la que el hero se extrajo a su propio archivo. Una sola implementacion, los dos la enlazan. POR QUE TODO VA CON FALLBACK --vs-accent y --vs-accent-strong los da marca-tokens.css, que SI cargan las dos. Los neutros (--vs-muted, --vs-line, --vs-surface-2) estan declarados dentro de vendor-solucion.css, que vendor-micro.php no carga: sin el segundo valor del var(), en la pagina de marca el texto saldria sin color. ========================================================================= */ .cierre-marca{ border-top:1px solid var(--vs-line,#e3e9f0); background:var(--vs-surface-2,#f6f9fc); padding:26px 16px 30px; } /* El mismo contenedor que .vs-wrap del catalogo, para que el cierre quede alineado con las tarjetas de arriba y no con el borde de la ventana. */ .cierre-marca__in{ max-width:1380px; margin:0 auto; text-align:center; } /* 68ch = el mismo ancho de lectura que .vs-about-body. Sin el, en un monitor ancho la frase se estira de lado a lado y deja de leerse como una linea. */ .cierre-cobertura{ max-width:68ch; margin:0 auto; font-size:15px; line-height:1.7; color:var(--vs-muted,#5c6b7a); } .cierre-cobertura a{ color:var(--vs-accent,#0078D4); font-weight:600; text-decoration:none; } /* micrositios.css trae un `a:hover{text-decoration:none !important}` global, asi que el hover NO puede apoyarse en el subrayado: cambia el color. */ .cierre-cobertura a:hover, .cierre-cobertura a:focus-visible{ color:var(--vs-accent-strong,#005a9e); } /* Iba con style="color:#CCC" inline: 1.6:1 contra el fondo, por debajo de cualquier minimo legible. --vs-muted sobre la banda da ~5:1. */ .cierre-refs{ margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--vs-muted,#5c6b7a); } .cierre-refs a{ color:var(--vs-muted,#5c6b7a); text-decoration:underline; text-underline-offset:2px; } .cierre-refs a:hover, .cierre-refs a:focus-visible{ color:var(--vs-accent,#0078D4); } @media (max-width:767px){ .cierre-marca{padding:22px 14px 26px;} .cierre-cobertura{font-size:14.5px;} .cierre-refs{font-size:12px;} }