/* ========================================================= Values Corp · Factoring — capa de secciones --------------------------------------------------------- Equivalente a holding.css para el otro sitio: aquí viven los colores de banda y las variantes de tarjeta propias de Factoring, para no tocar styles.css, que es compartido. Va DESPUÉS de tokens.css, components.css y styles.css. SOBRE EL CONTRASTE: el texto sobre las bandas verdes va en BLANCO a propósito y no cumple AA. Es una deuda asumida, no un descuido: NO "arreglarla" por criterio propio. Ver docs/Notas_Implementacion_Sitio.md (§1). ========================================================= */ /* --------------------------------------------------------- 1 · Tarjetas de "Por qué Values Factoring" (portada) --------------------------------------------------------- */ /* Mismo aspecto que las tarjetas de Qué nos define: blancas con borde suave y el recuadro del ícono en verde claro. */ #por-que .bcard{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:24px;padding:26px} #por-que .bcard:hover{transform:none;box-shadow:none} #por-que .bcard h3,#por-que .bcard p{color:var(--ink)} #por-que .bcard .ic{background:#EFF5EA;color:var(--vc-teal-500)} /* Avatar del testimonio, en el mismo verde claro. Va con el selector completo porque styles.css lo declara como .testi .author .ph. */ .testi .author .ph{background:#C2D9B2;color:var(--ink)} /* --------------------------------------------------------- 2 · Los cuatro pasos: banda verde con tarjetas blancas y el número en grande, como las tarjetas de valores del holding. --------------------------------------------------------- */ #pasos{background:#83AC64} #pasos .eyebrow{color:rgba(255,255,255,.85)} #pasos .title,#pasos .lead{color:#fff} #pasos .step{background:#fff;border-radius:24px;padding:26px 24px} #pasos .step .num{font-size:clamp(30px,3.2vw,42px);line-height:1;letter-spacing:-.02em; color:var(--vc-teal-500);display:block;margin-bottom:10px} #pasos .step h3{margin:0 0 8px} /* El botón de esta banda usa .btn-outline-light, la variante del DS para fondos oscuros: .btn-outline trae relleno blanco y el texto blanco quedaba invisible sobre él. */ /* --------------------------------------------------------- 3 · Banda de cierre: bloque completo de borde a borde, con fondo blanco y texto oscuro. No es una tarjeta redondeada. Aplica a las DIEZ bandas del sitio: es el mismo componente repetido y separarlas dejaría dos formas distintas para lo mismo. El texto va en #2B2B2B, el gris del logotipo: el sitio no usa negro puro. Sobre blanco da 14,4:1. Los botones cambian en el marcado a .btn-primary y .btn-outline: las variantes -light están pensadas para fondos oscuros y sobre blanco desaparecían. --------------------------------------------------------- */ .cta-band{background:#fff;color:var(--ink);border-radius:0;margin:0;padding:64px 24px} .cta-band h2{color:var(--ink)} .cta-band p{color:var(--ink)} /* --------------------------------------------------------- 4 · Pie en verde, con el texto en blanco. El logotipo va enteramente en blanco. --------------------------------------------------------- */ footer.site{background:#83AC64;color:#fff;margin-top:0} footer.site h3{color:#fff} footer.site p.desc,footer.site a,footer.site .foot-addr{color:rgba(255,255,255,.92)} footer.site a:hover{color:#fff} footer.site .foot-bottom{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)} /* --------------------------------------------------------- 5 · Sección de propósito en teal, con texto claro. --------------------------------------------------------- */ #proposito{background:var(--vc-teal-500)} #proposito .title{color:#fff} #proposito .eyebrow{color:rgba(255,255,255,.78)} #proposito .purpose{color:#fff;border-left-color:rgba(255,255,255,.55)} #proposito p{color:rgba(255,255,255,.9)} #proposito .actor{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)} #proposito .actor h3,#proposito .actor h4{color:#fff} #proposito .actor p{color:rgba(255,255,255,.88)} /* --------------------------------------------------------- 6 · Hero de página con video de fondo (Nosotros), con el mismo tratamiento que el de la portada. --------------------------------------------------------- */ .page-hero.hero-video{position:relative;overflow:hidden} .page-hero.hero-video video.bgvid{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:.48;z-index:0} .page-hero.hero-video .hero-overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(160deg,color-mix(in srgb,var(--vc-green-050) 60%,transparent), color-mix(in srgb,var(--vc-green-050) 46%,transparent) 55%, color-mix(in srgb,var(--vc-green-050) 38%,transparent))} .page-hero.hero-video .wrap{position:relative;z-index:2} /* Todos los textos de hero van centrados. La portada ya lo estaba por su clase .hero-center; esto alinea el resto de las páginas de Factoring, que usan .page-hero. Va en ESTA hoja y no en styles.css a propósito: .page-hero lo comparte el 404 del holding, que se queda alineado a la izquierda. factoring.css solo se carga en /factoring/, así que el cambio no lo alcanza. El párrafo lleva max-width:620px desde styles.css, así que centrar el texto no basta: hay que centrar también la caja con márgenes auto. */ .page-hero .wrap{text-align:center} .page-hero p{margin-left:auto;margin-right:auto} /* --------------------------------------------------------- 7 · Bandas de sección --------------------------------------------------------- */ /* Nosotros sigue el ritmo de Soluciones: claro → color → claro. Eso invierte los fondos que tenían el propósito y el directorio. */ #proposito{background:#fff} /* Las tarjetas van DEBAJO del texto, no en una segunda columna: el texto ocupa el ancho completo y las cuatro tarjetas van en fila, bajando a dos y a una con los cortes de siempre. */ #proposito > .wrap > .grid-2{grid-template-columns:1fr} #proposito .grid-2 .grid-2{grid-template-columns:repeat(4,1fr);margin-top:clamp(24px,3vw,40px)} @media(max-width:980px){ #proposito .grid-2 .grid-2{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ #proposito .grid-2 .grid-2{grid-template-columns:1fr} } /* Con el texto a ancho completo, la cita no debe cruzar toda la pantalla. */ #proposito .purpose,#proposito .lead{max-width:760px} #proposito .title,#proposito .purpose{color:var(--ink)} #proposito .eyebrow{color:var(--mint-dark)} #proposito p{color:var(--muted)} #proposito .purpose{border-left-color:var(--mint)} /* Los dos textos de la izquierda van a un tamaño menor que el resto de la sección, para no pesar de más frente a las tarjetas. */ #proposito .purpose{font-size:clamp(17px,1.8vw,20px);line-height:1.5} #proposito .lead{font-size:15px;line-height:1.7} #proposito .actor{background:#fff;border-color:var(--line)} /* Recuadro del ícono, igual que en las tarjetas de la portada. */ #proposito .actor .ic{width:44px;height:44px;border-radius:12px;background:#EFF5EA; color:var(--vc-teal-500);display:flex;align-items:center;justify-content:center;margin-bottom:12px} #proposito .actor .ic svg{width:22px;height:22px} #proposito .actor h3{color:var(--ink)} #proposito .actor p{color:var(--muted)} /* Directorio: la banda de color del medio. Las fichas siguen blancas. */ #directorio.bg-soft{background:#83AC64} #directorio .title{color:#fff} #directorio .eyebrow{color:rgba(255,255,255,.85)} /* "¿Cuál te conviene?" (Soluciones), en verde. */ #cual-conviene.bg-soft{background:#83AC64} /* Qué nos define: el respaldo va en VERDE y la matriz en AZUL. El orden del contenido no cambia. El respaldo traía dos leads con color inline #cfe0e0 —un gris azulado hecho para el teal—: se quitaron del marcado, porque le ganan a esta hoja y sobre el verde se veían fríos. */ #respaldo.bg-petrol{background:#83AC64} #respaldo .lead{color:#fff} #matriz{background:var(--vc-teal-500)} #matriz .title,#matriz .lead,#matriz p{color:#fff} #matriz .eyebrow{color:rgba(255,255,255,.85)} #matriz .grid-2 .grid-2{grid-template-columns:1fr} #matriz .actor{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)} #matriz .actor h3,#matriz .actor p{color:#fff} #cual-conviene .title,#cual-conviene .lead{color:#fff} #cual-conviene .lead a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* --------------------------------------------------------- 8 · Ritmo de fondos, como en Qué nos define --------------------------------------------------------- Tras el hero, las secciones alternan claro y color: nunca dos claras seguidas. Claro es #EFF5EA, el verde más suave de la escala; color es #83AC64. Dos bandas de color DISTINTO sí pueden ir juntas —el verde del respaldo junto al teal de la matriz—, igual que en el holding, donde el ritmo alterna arena con dos profundidades de teal. Sobre #EFF5EA el texto oscuro da 12,76:1; sobre #83AC64 el blanco da 2,61:1 y no cumple, pero es la decisión tomada para todas las bandas verdes del sitio. --------------------------------------------------------- */ /* Portada: claro → color → teal. La sección va en blanco porque sus tarjetas son #EFF5EA y sobre ese mismo tono desaparecerían. */ #por-que.bg-soft{background:#fff} /* Nosotros: verde → claro → color */ #equipo-ejecutivo{background:var(--vc-teal-500)} #equipo-ejecutivo .title{color:#fff} #equipo-ejecutivo .eyebrow{color:rgba(255,255,255,.85)} #equipo-ejecutivo .team-note{color:rgba(255,255,255,.85)} /* Cómo funciona: blanco → color → claro → color. #cf-1 va en BLANCO, no en el #EFF5EA del ritmo. Se mantiene la regla de no repetir dos claras seguidas: abajo viene la banda verde. */ #cf-1{background:#fff} /* Las tarjetas van en el verde clarísimo, igual que las de la portada sobre blanco. Se delimitan por el BORDE, no por el relleno: el relleno casi no contrasta con el blanco de la sección. */ #cf-1 .actor{background:#EFF5EA;border-color:#DDE9D3} #cf-2.bg-soft{background:#83AC64} #cf-2 .title,#cf-2 .lead{color:#fff} #cf-2 .eyebrow{color:rgba(255,255,255,.85)} #cf-2 .step{background:transparent;border:0;box-shadow:none;padding:0} #cf-2 .step:hover{transform:none;box-shadow:none} #cf-2 .step .num,#cf-2 .step h3{color:#fff} #cf-2 .step p{color:rgba(255,255,255,.92)} /* La nota de cierre de la banda: era una caja blanca y quedaba flotando sola sobre el verde ahora que los pasos no llevan tarjeta. */ #cf-2 .note-box{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff} #cf-3{background:#fff} #cf-4{background:var(--vc-teal-500)} /* Tarjetas en una sola columna. */ #cf-4 .grid-2 .grid-2,#cf-4 .grid-2 > div:last-child{grid-template-columns:1fr} #cf-4 .title,#cf-4 .lead,#cf-4 p{color:#fff} #cf-4 .eyebrow{color:rgba(255,255,255,.85)} #cf-4 .actor,#cf-4 .vcard{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)} #cf-4 .actor h3,#cf-4 .actor p,#cf-4 .vcard h3,#cf-4 .vcard p{color:#fff} /* Preguntas frecuentes: claro → color → claro → color */ #faq-1{background:#fff} #faq-2.bg-soft{background:var(--vc-teal-500)} #faq-2 .title,#faq-2 .lead{color:#fff} #faq-2 .eyebrow{color:rgba(255,255,255,.85)} #faq-3{background:#EFF5EA} #faq-4.bg-soft{background:#83AC64} #faq-4 .title,#faq-4 .lead{color:#fff} #faq-4 .eyebrow{color:rgba(255,255,255,.85)} /* Soluciones: la sección de industrias, en azul. */ #industrias{background:var(--vc-teal-500)} #industrias .title,#industrias .lead{color:#fff} #industrias .eyebrow{color:rgba(255,255,255,.85)} #industrias .chip,#industrias .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff} #industrias .note-box{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff} #industrias .note-box b,#industrias .note-box strong{color:#fff} /* Hazte cliente: la sección del formulario cierra en color, si no la página quedaba con dos claras seguidas. La tarjeta del formulario sigue blanca encima, así que los campos no cambian. */ #form.bg-soft{background:#83AC64} #form .title,#form .lead{color:#fff} #form .eyebrow{color:rgba(255,255,255,.85)} #form .cline b{color:#fff} #form .cline span,#form .cline a{color:rgba(255,255,255,.92)} #form .cline .ic{background:rgba(255,255,255,.22);color:#fff} /* --------------------------------------------------------- 9 · Texto que quedaba oscuro sobre las bandas verdes --------------------------------------------------------- Detectado recorriendo el DOM y comparando cada texto con el fondo REAL que hereda, no con el de su propio elemento: son párrafos y enlaces que no eran .title ni .lead y por eso las reglas anteriores no los alcanzaban. --------------------------------------------------------- */ #cf-4 p,#cf-4 a,#cf-4 li,#cf-4 span{color:#fff} #cf-4 a{text-decoration:underline;text-underline-offset:3px} /* Preguntas frecuentes: el acordeón va directo sobre la banda. El componente es .faq > .q > button, no .mito: la primera versión de estas reglas apuntaba a una clase que no existe en esta página. */ #faq-2 .faq .q,#faq-4 .faq .q{border-color:rgba(255,255,255,.35)} #faq-2 .faq button,#faq-4 .faq button, #faq-2 .faq button span,#faq-4 .faq button span{color:#fff} #faq-2 .faq .icon,#faq-4 .faq .icon{background:rgba(255,255,255,.22);color:#fff} #faq-2 .faq .a p,#faq-4 .faq .a p, #faq-2 p,#faq-4 p{color:rgba(255,255,255,.92)} #faq-2 a,#faq-4 a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* Hazte cliente: el enlace al portal en la columna de contacto. */ #form .cline a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* --------------------------------------------------------- 10 · El rótulo de familia de soluciones, a tamaño de sección --------------------------------------------------------- Es un

pero styles.css lo dibujaba como una etiqueta diminuta en mayúsculas (11px, interletrado ancho, gris). Se le devuelve el peso visual que corresponde a su nivel. --------------------------------------------------------- */ .svc-tag{font-size:clamp(26px,4vw,var(--heading-h2-font-size));font-weight:var(--heading-h2-weight); line-height:1;letter-spacing:-.035em;text-transform:none;color:var(--petrol);margin:56px 0 24px; /* Centrado: era el único título suelto a la izquierda en una página donde el resto va centrado. */ text-align:center} /* --------------------------------------------------------- 11 · Íconos de las tarjetas de Soluciones --------------------------------------------------------- styles.css los declara con relleno verde sólido y el trazo en blanco. Pasan al mismo recuadro que el resto del sitio —verde muy claro con el ícono en teal—, que es el criterio del sitio. Va acá y no en styles.css porque esa hoja es compartida con el holding. --------------------------------------------------------- */ .svc .ic{background:#EFF5EA;color:var(--vc-teal-500)} /* --------------------------------------------------------- 12 · Menú superior en mayúsculas, igual que el holding --------------------------------------------------------- El menú de Factoring se ve como el del holding: se copian los mismos valores de holding.css —11,5px, semibold, interletrado .06em y altas— para que ambos sitios lean idéntico. El color NO se copia: el holding va en su teal de identidad y Factoring se queda con su carbón (--petrol), porque los dos sitios no comparten paleta. Quedan fuera los .nav-cta-m, que son los botones "Ingresar" y "Hazte cliente" del menú desplegado en móvil: son botones, no enlaces de menú, y deben leerse igual que sus gemelos de escritorio. --------------------------------------------------------- */ .nav-links a:not(.nav-cta-m){font-size:11.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} @media(min-width:961px){ .nav-links{gap:20px} } /* --------------------------------------------------------- 13 · El propósito, con el texto centrado --------------------------------------------------------- La clase .center de styles.css se encarga del text-align y de centrar la caja del .lead; acá quedan las dos cosas que no cubre. La cita pierde su barra vertical izquierda. Un filete a la izquierda es un ancla de alineación: con el texto centrado quedaba tirando el ojo hacia un borde que ya no existe. Si se la quiere de vuelta, basta con borrar esta regla. --------------------------------------------------------- */ #proposito .center .purpose{border-left:0;padding:6px 0; margin-left:auto;margin-right:auto}