/**
 * ARCHIVO: estilos.css
 * DESCRIPCIÓN: Hoja de estilos estáticos complementarios.
 * Mantiene tus selectores originales intactos para asegurar que nada se descoloque en el renderizado.
 */

/* Configuración básica de renderizado de los iconos vectoriales de Google */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Restablecemos el comportamiento del scroll general del documento */
html {
    scroll-behavior: smooth;
}

/* TEXTO CON DEGRADADO: Efecto de color degradado para los textos principales */
.texto-degradado {
    background: linear-gradient(135deg, #152270 30%, #515f74 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #152270; /* Color alternativo en navegadores antiguos */
}

/* BORDE ELEGANTE: Técnica de micro-bordes usando un pseudo-elemento con gradiente lineal sutil */
.borde-creativo {
    position: relative;
    background: white;
    z-index: 1;
}

.borde-creativo::before {
    content: '';
    position: absolute;
    top: -1.5px; left: -1.5px; right: -1.5px; bottom: -1.5px;
    background: linear-gradient(135deg, rgba(21, 34, 112, 0.2), transparent, rgba(255, 183, 131, 0.2));
    border-radius: inherit;
    z-index: -1;
}

/* DECORACIÓN FOTO DE PERFIL: Cuadrícula abstracta geométrica SVG posicionada detrás de la imagen de perfil */
.contenedor-perfil {
    position: relative;
}

.contenedor-perfil::after {
    content: '';
    position: absolute;
    width: 130%; height: 130%;
    top: -15%; left: -15%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10L90 90M90 10L10 90' stroke='%23152270' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    z-index: -1;
    /* Difuminado perimetral circular de la cuadrícula trasera */
    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
    mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
}