/* ================================================================
   CONTACTO.CSS - Full Page Styles
   ================================================================ */

/* --- 1. THE HERO --- */
.page-hero {
    height: 45vh;
    margin-top: 80px; /* Space for the fixed navbar */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/contacto/contacto-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 4.5rem);
    color: #fff;
}

/* --- 2. THE GRADIENT FORM CONTAINER --- */
.form-section {
    padding: 160px 8% 120px;
    background-color: #000;
}

.form-container {
    max-width: 900px;
    margin: -100px auto 0; /* Overlaps the hero */
    background: linear-gradient(145deg, var(--primary-green) 0%, #002e15 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7);
}

/* --- THE HYBRID HEADER (Option 3 Background + Option 5 Fonts) --- */
.form-header {
    /* Background from Option 3: Deep Industrial Metal */
    background: linear-gradient(to bottom, #2a2a2a 0%, #111 100%);
    padding: 45px 50px;
    border-bottom: 3px solid #000;

    /* Side Accent from Option 5 to ground the design */
    border-left: 8px solid var(--volt-yellow);

    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.form-header h3 {
    /* Fonts from Option 5: Architectural & Spacious */
    font-family: var(--font-heading);
    font-size: 1.7rem;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 4px; /* The "Pro" spacing */
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.form-header p {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}
/* --- 3. FORM ELEMENTS --- */
.contact-form {
    padding: 50px;
    color: #fff;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group { margin-bottom: 30px; }

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
}

.optional {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: lowercase;
    font-style: italic;
    font-weight: 400;
}

/* --- 4. GLASS INPUTS --- */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--volt-yellow);
    box-shadow: 0 0 15px rgba(212, 224, 42, 0.3);
}

/* --- 5. DYNAMIC LOGIC (The Dropdowns) --- */
.conditional-fields {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-left: 4px solid var(--volt-yellow);
    margin-bottom: 0;
    padding-left: 0;
}

.conditional-fields.active {
    max-height: 400px;
    opacity: 1;
    margin-bottom: 30px;
    padding-left: 25px;
    padding-top: 15px;
    background: rgba(212, 224, 42, 0.03);
}


.form-legal-text {
    margin: 15px 0 25px 0;
    text-align: center; /* Or left, depending on button alignment */
}

.form-legal-text p {
    font-size: 0.75rem;
    color: #adadad; /* Muted so it stays in the background */
    line-height: 1.5;
}

.form-legal-text a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: 0.3s ease;
}

.form-legal-text a:hover {
    color: var(--volt-yellow);
    border-bottom-color: var(--volt-yellow);
}


/* --- 6. THE VOLT BUTTON --- */
/* --- THE ELECTRIC BORDER FORM BUTTON --- */
.submit-btn {
    display: block;
    width: 100%;

    /* INITIAL STATE: Brand Green */
    background-color: var(--primary-green) !important;
    color: #ffffff !important;

    /* THE LIGHT GREEN BORDER: Using a brighter "Neon" green for contrast */
    border: 2px solid #39ff14 !important;

    /* Structure */
    padding: 20px 60px;
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 4px;
    cursor: pointer;

    /* Visibility & Power-Up Animation */
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    position: relative;
    z-index: 20;
}

/* HOVER STATE: White Background & Dark Green Text */
.submit-btn:hover {
    background-color: #ffffff !important;
    color: #003318 !important; /* Deep industrial green text */
    border-color: #ffffff !important; /* Border matches background for a clean look */

    transform: translateY(-5px);

    /* Pure white glow effect */
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}

/* --- 7. QUICK BRANCHES (Bottom Section) --- */
/* --- BRANCHES CTA WITH INDUSTRIAL IMAGE --- */
.branches-cta-section {
    position: relative;
    padding: 160px 8%;
    background-color: #000;
    text-align: center;
    overflow: hidden; /* Keeps the image inside */

    /* THE TOP "ENERGY LINE" - Separates the form from this section */
    border-top: 1px solid var(--primary-green);
}

.cta-background-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    /* USE A WAREHOUSE OR INDUSTRIAL PHOTO HERE */
    background-image: url('assets/contacto/contacto-sucursales-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Creates a cool Parallax effect when scrolling */

    filter: grayscale(100%) brightness(0.3); /* Makes it dark and industrial */
    z-index: 1;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    /* This gradient makes the bottom of the page "fade" into the footer */
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,154,71,0.15) 50%,
        rgba(0,0,0,1) 100%);
    z-index: 2;
}

.cta-content {
    position: relative;
    z-index: 10; /* Sits above the image and overlay */
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.cta-content p {
    color: var(--champagne-light); /* Uses your brand champagne for a premium touch */
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 50px;
    opacity: 0.9;
}

/* THE BUTTON (Matches your previous style) */
.btn-ver-todas {
    display: inline-block;
    background-color: var(--primary-green);
    color: #ffffff;
    border: 2px solid #39ff14;
    padding: 18px 45px;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-ver-todas:hover {
    background-color: #ffffff;
    color: #003318;
    border-color: #ffffff;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 154, 71, 0.4);
}


/* --- 🛠️ SUCCESS NOTIFICATION SYSTEM --- */
/* --- THE SUCCESS SWITCH --- */
#success-overlay {
    display: none; /* THIS IS THE KEY: It keeps it invisible by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.success-card {
    background: #0a0a0a;
    border: 2px solid var(--primary-green);
    padding: 60px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 154, 71, 0.2);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.success-icon {
    color: var(--primary-green);
    margin-bottom: 20px;
}

.success-icon svg { width: 60px; height: 60px; }

.success-close-btn {
    margin-top: 25px;
    background: var(--primary-green);
    color: #fff;
    border: 1px solid #39ff14;
    padding: 10px 25px;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 768px) {
    .form-row, .branches-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 30px; }
    .form-header { padding: 30px; }
}