/* Estilos solo de la pagina Proceso */


/* Intro destacada y linea con los 5 pasos */
.proceso-intro { max-width: 1000px; text-align: center; }
.proceso-intro__texto { font-family: var(--titulos); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.35; color: var(--oscuro); max-width: 900px; margin: 0 auto 60px; }
.linea-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.linea-pasos::before { content: ''; position: absolute; top: 27px; left: 10%; right: 10%; height: 1px; background: var(--rojo); opacity: .35; }
.linea-pasos a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; font-family: var(--titulos); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--oscuro); transition: color .2s; }
.linea-pasos span { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--crema); border: 2px solid var(--rojo); color: var(--rojo); font-size: 1.2rem; letter-spacing: 0; transition: background .2s, color .2s; }
.linea-pasos a:hover { color: var(--rojo); }
.linea-pasos a:hover span { background: var(--rojo); color: var(--blanco); }

/* Pasos: numero grande calado detras del titulo */
.pasos { gap: 120px; }
.paso { gap: 80px; scroll-margin-top: 110px; }
.paso__texto { position: relative; }
.paso__numero { position: absolute; top: -70px; left: -10px; z-index: -1; font-family: var(--titulos); font-weight: 800; font-size: 11rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(104,20,4,.14); pointer-events: none; }
.paso { isolation: isolate; }
.paso__num { font-size: .9rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 6px; }
.paso h2 { color: var(--rojo); }
.paso__img img { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 921px) {
    .linea-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .linea-pasos a { font-size: .7rem; letter-spacing: .02em; gap: 8px; }
    .linea-pasos span { width: 40px; height: 40px; font-size: .95rem; }
    .linea-pasos::before { top: 20px; }
    .pasos { gap: 80px; }
    .paso { gap: 40px; }
    .paso__numero { font-size: 7rem; top: -40px; }
}