@charset "UTF-8";
/* Importar tipografía moderna */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================
  1. VARIABLES Y TIPOGRAFÍA GLOBAL
   ========================================== */
:root {
    /* Paleta Personalizada */
    --bs-primary: #2E3A50;   /* Azul sobrio */
    --bs-primary-rgb: 46, 58, 80;
    
    --bs-info: #CB5A54;      /* Rojo acento */
    --bs-info-rgb: 203, 90, 84;
    
    --bs-secondary: #B4B9BD; /* Gris medio */
    --bs-secondary-rgb: 180, 185, 189;
    
    --bs-body-bg: #EAEDED;   /* Gris claro (Fondo) */
    --bs-body-bg-rgb: 234, 237, 237;
    
    --bs-body-color: #2E3A50; /* Texto base usando el Azul principal */
    --bs-body-color-rgb: 46, 58, 80;
    
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ==========================================
  1.1 SOBRESCRITURA FORZADA DE BOOTSTRAP
   ========================================== */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

.bg-info { background-color: var(--bs-info) !important; }
.text-info { color: var(--bs-info) !important; }
.border-info { border-color: var(--bs-info) !important; }

.bg-secondary { background-color: var(--bs-secondary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }

html {
    scroll-padding-top: calc(4.5rem - 1px);
    scroll-behavior: smooth;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--bs-font-sans-serif) !important;
    letter-spacing: -0.5px;
    font-weight: 600;
}

/* ==========================================
  2. NAVBAR Y NAVEGACIÓN
   ========================================== */
#mainNav {
    box-shadow: none;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#mainNav .navbar-brand {
    color: var(--bs-primary);
    font-weight: 700;
    letter-spacing: 1px;
}

#mainNav .navbar-nav .nav-item .nav-link {
    color: #4a5669;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: color 0.2s ease;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
    color: var(--bs-info) !important;
}

/* Navbar Shrink (Cuando se hace scroll) */
#mainNav.navbar-shrink {
    background-color: rgba(234, 237, 237, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(46, 58, 80, 0.08);
}

@media (min-width: 992px) {
    #mainNav .navbar-brand { color: rgba(255, 255, 255, 0.85); }
    #mainNav .navbar-brand:hover { color: #fff; }
    #mainNav .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, 0.8); }
    #mainNav .navbar-nav .nav-item .nav-link:hover { color: #fff; }
    
    #mainNav.navbar-shrink .navbar-brand { color: var(--bs-primary); }
    #mainNav.navbar-shrink .navbar-brand:hover { color: var(--bs-info); }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link { color: var(--bs-primary); }
    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover { color: var(--bs-info); }
}

/* ==========================================
  3. HERO SECTION (MASTHEAD)
   ========================================== */
header.masthead {
    padding-top: 10rem;
    padding-bottom: 5.5rem;
    /* Degradado adaptado a tu Azul (#2E3A50) */
    background: linear-gradient(135deg, rgba(46, 58, 80, 0.92) 0%, rgba(26, 33, 46, 0.98) 100%), url("../assets/img/bg-masthead.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

@media (min-width: 992px) {
    header.masthead {
        height: 100vh;
        min-height: 40rem;
        padding-top: 4.5rem;
        padding-bottom: 0;
    }
}

/* ==========================================
  4. UTILIDADES Y SECCIONES
   ========================================== */
.page-section {
    padding: 8rem 0;
}

.divider {
    max-width: 3.25rem;
    border-width: 0.25rem;
    border-color: var(--bs-info); /* Línea roja */
    opacity: 1;
    margin: 1.5rem auto;
    border-radius: 5px;
}

/* Tarjetas (Cards) */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Mantener blanco para que resalten del EAEDED */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(46, 58, 80, 0.1) !important;
}

/* ==========================================
  5. BOTONES PERSONALIZADOS
   ========================================== */
.btn-xl {
    padding: 1.25rem 2.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #1a212e;
    border-color: #1a212e;
    color: #fff;
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
    border-width: 2px;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
    box-shadow: 0 0 15px rgba(203, 90, 84, 0.4); /* Resplandor rojo */
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    transform: translateY(-2px);
    color: #fff;
}

/* ==========================================
  6. PORTFOLIO / SKILLS GRID
   ========================================== */
#skills .portfolio-box {
    position: relative;
    display: block;
    overflow: hidden;
}

#skills .portfolio-box .portfolio-box-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    opacity: 0;
    background: rgba(46, 58, 80, 0.9);
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

#skills .portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#skills .portfolio-box-caption .project-category {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

#skills .portfolio-box-caption .project-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

/* Utilidades adicionales */
.cursor-pointer { cursor: pointer; }
.hover-opacity-100 { opacity: 0.75; }
.hover-opacity-100:hover { opacity: 1 !important; }
.transition { transition: all 0.3s ease; }