/* ============================================================ PÁGINA METODOLOGÍA (/metodologia) ============================================================ Estilos de los componentes visuales exclusivos de esta página: - .metodologia-barras → gráfico de barras con el peso de cada criterio - .metodologia-embudo → embudo visual del proceso de selección Se carga desde intro_metodologia.php (dentro de , antes de tailwind.css). Las clases van prefijadas con "metodologia-" para no colisionar con las utilidades de Tailwind del sitio. Paleta: el acento principal de la web (índigo #4f46e5, el de .mi-elemento y .text-icono) sobre la escala de grises ya usada en tarjetas y fondos. ============================================================ */ /* ---------- Gráfico de barras: peso de los criterios ---------- */ .metodologia-barras { display: flex; flex-direction: column; gap: 1.25rem; } .metodologia-barras__etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.375rem; font-size: 0.95rem; color: #374151; /* gray-700 */ } .metodologia-barras__nombre { font-weight: 500; } .metodologia-barras__valor { font-weight: 700; color: #4f46e5; /* índigo: acento principal de la web */ white-space: nowrap; } .metodologia-barras__pista { width: 100%; height: 12px; background-color: #f3f4f6; /* gray-100 */ border-radius: 9999px; overflow: hidden; } .metodologia-barras__relleno { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #4f46e5, #4338ca); /* índigo, como .mi-elemento y su hover */ } /* ---------- Embudo de selección ---------- */ .metodologia-embudo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .metodologia-embudo__paso { width: 100%; text-align: center; border-radius: 12px; padding: 1rem 1.25rem; transition: transform 0.2s ease; } .metodologia-embudo__paso:hover { transform: scale(1.02); } .metodologia-embudo__numero { font-size: 1.75rem; font-weight: 700; line-height: 1.2; } .metodologia-embudo__texto { font-size: 0.9rem; line-height: 1.4; } /* Niveles del embudo: de gris (todas las detectadas) a índigo (las que finalmente se publican) */ .metodologia-embudo__paso--1 { max-width: 640px; background-color: #f3f4f6; /* gray-100 */ color: #374151; } .metodologia-embudo__paso--2 { max-width: 500px; background-color: #e0e7ff; /* indigo-100 */ color: #3730a3; /* indigo-800 */ } .metodologia-embudo__paso--3 { max-width: 380px; background-color: #c7d2fe; /* indigo-200 */ color: #312e81; /* indigo-900 */ } .metodologia-embudo__paso--4 { max-width: 280px; background-color: #4f46e5; /* acento principal de la web */ color: #ffffff; } /* Flecha entre pasos del embudo */ .metodologia-embudo__flecha { color: #d1d5db; /* gray-300 */ font-size: 1rem; line-height: 1; } /* En pantallas pequeñas, el embudo se cierra más suavemente para que el texto del último paso siga cabiendo */ @media (max-width: 640px) { .metodologia-embudo__paso--2 { max-width: 85%; } .metodologia-embudo__paso--3 { max-width: 75%; min-width: 240px; } .metodologia-embudo__paso--4 { max-width: 70%; min-width: 220px; } }