/* ===== REMEDIA — página: Únete ===== Solo secciones de esta página. Todo selector prefijado con .page-unete o .sec--* ===================================== */ /* ===== 00 · INTRO (hero) ======================================= Mismo criterio que .sec--intro de "El Problema": H1 + párrafos alineados a la izquierda. Aquí se agrega un CTA con la flecha hacia abajo (ancla a la siguiente sección de la página). */ .sec--intro__title { margin-bottom: var(--sp-3); } .sec--intro__subtitle { font-family: var(--f-ui); font-size: var(--fs-body-xl); color: var(--c-text-muted); } .sec--intro__subtitle + .sec--intro__subtitle { margin-top: var(--sp-3); } .sec--intro__cta { margin-top: var(--sp-5); } /* ===== 01 · CULTURA ============================================= Título + subtítulo centrados, 4 columnas numeradas debajo (mismo patrón que .sec--publico de home.css: número + título + descripción, con línea divisoria entre columnas) y un cierre centrado. */ .sec--cultura__title, .sec--cultura__subtitle { max-width: 780px; /* ⚠️ CONFIRMAR: mismo ancho de lectura que .sec--pruebas__text */ margin-inline: auto; text-align: center; } .sec--cultura__title { margin-bottom: var(--sp-2); } .sec--cultura__subtitle { font-family: var(--f-ui); font-size: var(--fs-body-l); color: var(--c-text-muted); } .sec--cultura__row { margin-top: var(--sp-6); row-gap: var(--sp-5); /* solo visible si las columnas se apilan (2×2) en móvil */ } /* Línea divisoria entre columnas. En móvil son 2 columnas por fila (col-6): la 1ª y 3ª empiezan fila nueva y no deben llevar línea. */ .sec--cultura__col { border-left: 1px solid var(--c-line); padding-left: var(--sp-4); } .sec--cultura__col:nth-child(odd) { border-left: none; } @media (min-width: 992px) { .sec--cultura__col:nth-child(odd) { border-left: 1px solid var(--c-line); } .sec--cultura__col:first-child { border-left: none; } } .sec--cultura__num { display: block; font-family: var(--f-ui); font-size: var(--fs-body-m); color: var(--c-text-muted); margin-bottom: var(--sp-4); } .sec--cultura__name { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: var(--sp-2); } .sec--cultura__desc { font-family: var(--f-ui); font-size: var(--fs-body-m); color: var(--c-text-muted); } .sec--cultura__close { max-width: 780px; margin-inline: auto; margin-top: var(--sp-6); text-align: center; font-family: var(--f-ui); font-size: var(--fs-body-l); color: var(--c-text-muted); } .sec--cultura__close strong { color: var(--c-text); font-weight: var(--fw-medium); } /* ===== 02 · BANDA (divisor, acento morado) ===================== Usa el componente compartido .sec--banda/.grad (ver main.css) — solo se sobreescriben --g1..--g4. La página en sí es de acento azul (data-accent="azul" en el ), pero este divisor pide morado explícitamente: mismas paradas que usa el-sistema.css para su propio acento (#A6B0FF). ⚠️ CONFIRMAR: paradas intermedias (--g2/--g3) aproximadas — Abel las genera con su herramienta. */ .sec--banda { --g1: #0B0B0B; --g2: #222040; --g3: #6B75E0; --g4: var(--p-morado); } /* ===== 03 · PERFILES ============================================ Título + párrafo alineados a la izquierda dentro de .container; el acordeón fullwidth (.valor--full) va debajo, ya fuera de .container (ver main.css para el componente). */ .sec--perfiles__title { margin-bottom: var(--sp-2); } .sec--perfiles__subtitle { font-family: var(--f-ui); font-size: var(--fs-body-l); color: var(--c-text-muted); margin-bottom: var(--sp-6); } .sec--perfiles__subtitle strong { color: var(--c-text); font-weight: var(--fw-medium); } .sec--perfiles__list { border-top: 1px solid var(--c-line); } /* ===== 04 · DEMUÉSTRALO ========================================= Título + párrafo full width, foto a la izquierda + CTA de aplicación a la derecha (todo el bloque de texto es un link), alineado al fondo de la foto. */ .sec--demuestralo__title { margin-bottom: var(--sp-2); } .sec--demuestralo__subtitle { font-family: var(--f-ui); font-size: var(--fs-body-l); max-width: 780px; /* ⚠️ CONFIRMAR: mismo ancho de lectura usado en el resto de la página */ } .sec--demuestralo__subtitle strong { color: var(--c-text); font-weight: var(--fw-medium); } .sec--demuestralo__row { margin-top: var(--sp-6); align-items: stretch; } .sec--demuestralo__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec--demuestralo__cta-col { display: flex; align-items: flex-end; margin-top: var(--sp-4); /* solo se ve apilado en móvil */ } @media (min-width: 992px) { .sec--demuestralo__cta-col { margin-top: 0; } } .sec--demuestralo__cta { display: block; width: 100%; color: var(--c-text-muted); text-decoration: none; } .sec--demuestralo__cta-text { font-family: var(--f-ui); font-size: var(--fs-body-m); margin-bottom: var(--sp-4); } .sec--demuestralo__cta-line { font-family: var(--f-ui); font-size: var(--fs-body-m); color: var(--c-text); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); } /* ===== 05 · BANDA 2 (divisor, acento morado) ==================== Mismo componente .sec--banda de la sección 02, pero con el CTA entre el título y el párrafo (orden pedido: título → CTA → aviso). */ .sec--banda__cta { margin-top: var(--sp-4); margin-bottom: var(--sp-4); } .sec--banda__aviso { margin-bottom: 0; } /* Banda final (05) pegada al footer: sin .sec--vacantes intermedia ni línea duplicada — el ::before de .sec--banda ya cierra el bloque. */ .page-unete .footer-main { border-top: none; }