/* =========================================
   CARRERAS.CSS - SOLUCIÓN DE SOLAPAMIENTO
   ========================================= */

/* SECCIÓN 1: INTRODUCCIÓN */
#carreras-intro {
    background-color: #fff;
    /* Cambiamos height por min-height para que el texto NO se salga */
    min-height: 100vh; 
    height: auto !important; 
    padding: 140px 10% 80px; /* Más espacio arriba para el header */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#carreras-intro h2 {
    /* Fuente delgada y elegante */
    font-family: 'Mulish', 'Avenir Next Light', sans-serif;
    font-weight: 200;
    font-size: 2.2rem;
    line-height: 1.3;
    color: #1a1a1a;

    /* CENTRADO Y LÍNEA */
    display: table;           /* Hace que el bloque mida lo que mide el texto */
    margin: 0 auto 40px;      /* 'auto' lo centra horizontalmente */
    padding-top: 25px;        /* Espacio entre la línea y el inicio del texto */
    border-top: 1px solid #eee !important; /* La línea de 1px igual al logo */
    
    max-width: 900px;         /* Evita que el título se estire demasiado */
    text-align: center;
}

.subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
}

.carreras-grid-text {
    display: flex;
    gap: 60px;
    text-align: left;
    max-width: 1000px;
    margin-bottom: 60px;
}

.grid-left { 
    flex: 1; 
    font-size: 1.2rem; 
    border-right: 1px solid #eee !important; 
    padding-right: 40px; 
}

.grid-right { 
    flex: 1; 
    font-size: 1rem; 
    line-height: 1.7; 
    color: #444; 
}

.slogan-footer {
    margin: 60px auto 0;      /* 'auto' a los lados centra todo el bloque */
    padding-top: 12px;
    border-top: 1px solid #eee; /* La línea de 1px igual al logo */
    
    width: auto;
    display: table;           /* Hace que la línea no sea más ancha que el texto */
    max-width: 100% !important;         /* Límite de ancho para que no se estire de más */
    white-space: nowrap;
    text-align: center;
    letter-spacing: 5px;      /* Espaciado elegante pedido por gerencia */
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: 'Mulish', 'Avenir Next Regular', sans-serif;
    font-weight: 400;
}

/* SECCIÓN 2: FORMULARIO */
#carreras-form {
    background-color: #f9f9f9;
    /* También usamos min-height aquí */
    min-height: 100vh;
    height: auto !important; 
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-card {
    background: white;
    padding: 50px;
    width: 100%;
    max-width: 850px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    text-align: center;
}

.casapiel-form {
    margin-top: 40px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.input-group label {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.input-group input, 
.input-group select {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.file-upload {
    margin: 30px 0;
    text-align: left;
}

.file-upload label {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
}

.drop-zone {
    border: 1px dashed #ccc; /* Línea de 1px punteada */
    padding: 35px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.drop-zone:hover {
    border-color: #000;
    background-color: #f0f0f0;
}

.drop-zone i {
    font-size: 1.8rem;
    color: #333;
}

.drop-zone span {
    font-size: 0.9rem;
    color: #666;
    font-family: 'Mulish', sans-serif;
}

.file-info {
    font-size: 0.7rem;
    color: #999;
    margin-top: 8px;
    font-style: italic;
}

/* Clase para cuando ya hay un archivo seleccionado */
.drop-zone.file-selected {
    border: 1px solid #2d5a27; /* Cambia a verde Casapiel */
    background-color: rgba(45, 90, 39, 0.05);
}

.submit-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 18px 40px;
    border-radius: 40px;
    cursor: pointer;
    width: 100%;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ============================================================
   SOLUCIÓN MAESTRA MÓVIL - CARRERAS.CSS (CASAPIEL)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. HEADER MÓVIL LIMPIO Y CENTRADO */
    #main-header {
        height: 65px !important;
    }
    .shop-dropdown {
        display: none !important; /* Oculta "Comprar productos" en celular */
    }
    .nav-left { flex: 1 !important; justify-content: flex-start !important; }
    .nav-center { flex: 3 !important; justify-content: center !important; }
    .nav-right { flex: 1 !important; justify-content: flex-end !important; }
    .main-logo { height: 32px !important; }

    /* 2. SECCIÓN INTRODUCCIÓN Y MANIFIESTO */
    #carreras-intro {
        padding: 85px 20px 45px !important; /* Quitamos los 140px y 10% que desbordaban */
        overflow-x: hidden !important;
        text-align: center !important;
    }

    #carreras-intro h2 {
        font-size: 1.45rem !important;       /* Tamaño proporcional para celular */
        line-height: 1.35 !important;
        display: block !important;          /* Salto de línea natural */
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        padding-top: 15px !important;
        text-align: center !important;
    }

    .subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 30px !important;
        line-height: 1.5 !important;
    }

    /* Columnas de texto: Pasan de horizontal a VERTICAL */
    .carreras-grid-text {
        flex-direction: column !important;
        gap: 25px !important;
        margin-bottom: 35px !important;
        text-align: center !important;
    }

    .grid-left {
        flex: none !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important; /* Rayita horizontal divisoria */
        padding-right: 0 !important;
        padding-bottom: 20px !important;
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    .grid-right {
        flex: none !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* 3. EL ESLOGAN DEL FINAL (SOLUCIÓN AL DESBORDE DE 900px) */
    .slogan-footer {
        white-space: normal !important;     /* VITAL: Permite que salte de renglón y no rompa la pantalla */
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        letter-spacing: 2px !important;     /* Bajamos de 5px a 2px en celular */
        font-size: 0.72rem !important;
        line-height: 1.6 !important;
        margin: 35px auto 0 !important;
        padding: 15px 10px 0 !important;
        text-align: center !important;
    }

    /* 4. SECCIÓN FORMULARIO Y SUBIDA DE CV */
    #carreras-form {
        padding: 40px 15px 60px !important;
    }

    .form-card {
        padding: 30px 18px !important;     /* Reducimos los 50px de padding que asfixiaban los inputs */
        border-radius: 12px !important;
        width: 100% !important;
    }

    .casapiel-form {
        margin-top: 25px !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }

    .input-group input, 
    .input-group select {
        padding: 12px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
    }

    /* Zona de arrastrar / subir PDF */
    .drop-zone {
        padding: 25px 15px !important;
    }
    .drop-zone i {
        font-size: 1.5rem !important;
    }
    .drop-zone span {
        font-size: 0.85rem !important;
    }

    .submit-btn {
        padding: 15px 25px !important;
        font-size: 0.88rem !important;
        letter-spacing: 1.5px !important;
    }
}