/* =========================================
   CONTACT PAGE SPECIFIC OVERRIDES
   Matches Reference: https://ywq.wek.mybluehost.me/website_33577b3c/contacto.html
   ========================================= */

/* 1. HEADER & OVERLAY FIXES */
/* Header must be FIXED and TRANSPARENT initially to overlay the hero image */
.header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: transparent !important;
    border-bottom: 0.95px solid rgba(246, 241, 233, 0.1) !important;
    z-index: 1000;
    transition: background 0.35s ease, border-bottom-color 0.35s ease, box-shadow 0.35s ease;
}

/* Scrolled State: Solid Cream Background */
.header.scroll {
    background-color: rgba(248,246,243,0.97) !important;
    border-bottom: 0.5px solid rgba(42,26,13,0.08) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}

/* --- TEXT COLORS LOGIC --- */

/* INITIAL STATE (Transparent over dark hero): WHITE Text */
.header .navbar-brand,
.header .menu-btn-text {
    color: #ffffff !important;
}
.header .hamburger span {
    background-color: #ffffff !important;
}

/* SCROLLED STATE (Cream background): DARK Text */
.header.scroll .navbar-brand,
.header.scroll .menu-btn-text {
    color: #18130d !important;
}
.header.scroll .hamburger span {
    background-color: #2E1A10 !important;
}


/* !!! FIX FOR BEIGE STRIP (Navbar Collapse hidden by default) !!! */
/* The global style puts .navbar-collapse with #e9dfd2 bg absolute top:0. */
/* We must hide it or reset it for this page until menu is opened */
.header .navbar-collapse:not(.show) {
    background-color: transparent !important;
    height: 0 !important;
    pointer-events: none;
    opacity: 0;
}

/* 2. BODY / LAYOUT FIXES */
.contact-page-body {
    background-color: #fefbf2; /* Cream body */
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* 3. INPUT FIELDS (Exact Copy from Reference) */
.contact-form .form-group label {
    color: #000000 !important;
}

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
    background-color: #ffffff !important;
    border: 1px solid #d4c4b8 !important;
    border-radius: 0 !important;
    color: #5a5755 !important;
    width: 100%;
}

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
    background-color: #fffcf8 !important;
    border-color: #a59182 !important;
    outline: none !important;
    box-shadow: none !important;
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: #b5a89f !important;
}

/* 4. BUTTONS */
.contact-form .btn-submit {
    background-color: #2E1A10 !important;
    color: #ffffff !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. REMOVE STRANGE STRIPS */
.intro-overlay {
    display: none !important; 
}

/* 6. FOOTER GAP FIXES */
/* Ensure no margin/padding leaks beige body background below the footer on Contact Page */
.contact-footer, .footer {
    margin-bottom: 0 !important;
}

/* Ensure the copyright paragraph doesn't push the container with margins */
.contact-footer .contact-footer-bottom p,
.footer .f-bottom p {
    margin-bottom: 0 !important;
}

.contact-page-body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 7. HERO COMPACTO
   El hero a 100vh empujaba el formulario fuera del primer viewport en
   todos los tamaños. Lo bajamos para que el inicio del form asome bajo
   el fold y el usuario vea que hay algo que completar. */
.contact-page-body .hero {
    height: 55vh;
    min-height: 360px;
}
@media (max-width: 768px) {
    .contact-page-body .hero {
        height: 40vh !important;
        min-height: 240px;
    }
    .contact-page-body #brxe-f04636 {
        font-size: 24px;
        letter-spacing: 4px;
        opacity: 1; /* sin animación de fade-in en mobile, evita parpadeo */
    }
}

/* =========================================
   Ocultar el H2 "Tengamos una conversación" del formulario
   en la página de contacto: el hero ya cumple ese rol y evita
   duplicación de títulos. Se mantiene visible en el resto de
   las páginas que embeben el formulario (home, etc).
   El grid de 2 columnas pasa a 1 columna centrada con max-width.
   ========================================= */
.contact-page .cc-form-intro {
    display: none;
}

.contact-page .cc-form-inner {
    grid-template-columns: 1fr;
    max-width: 760px;
}

/* =========================================
   HERO: Título de marca + bajada italic
   Tipografía/colores/spacing alineados con .nosotros-hero-content h1 y
   .portfolio-hero-content h1 (mismo sistema). En móvil (≤575px),
   responsive.css conmuta a EB Garamond 22px/2px para todos los heroes.
   Para no pisar esa regla, esta base solo aplica desde 576px en adelante.
   ========================================= */
.contact-page-body .contact-hero-title {
    color: rgb(246, 241, 233) !important;
    text-transform: uppercase !important;
    text-align: center;
    margin: 0 0 18px 0;
}

@media (min-width: 576px) {
    .contact-page-body .contact-hero-title {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-weight: 400 !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
        letter-spacing: 5px !important;
    }
}

.contact-page-body .contact-hero-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: rgba(246, 241, 233, 0.92);
    text-align: center;
    margin: 0;
    opacity: 0;
    animation: contactHeroFadeIn 1s ease-out 1.3s forwards;
}

@keyframes contactHeroFadeIn {
    to { opacity: 1; }
}

/* En móvil la regla unificada en responsive.css (.home-banner .heading .title *,
   .nosotros-hero-content h1, .portfolio-hero-content h1, .hero-content h1,
   .contact-page-body .contact-hero-title) conmuta a EB Garamond 22px/2px para
   todos los heroes del sitio. Aquí solo ajustamos la bajada en móvil. */
@media (max-width: 768px) {
    .contact-page-body .contact-hero-subtitle {
        font-size: 15px;
        padding: 0 8px;
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 478px) {
    .contact-page-body .contact-hero-subtitle {
        font-size: 14px;
    }
}

/* =========================================
   BLOQUE "¿Qué pasa después?" post-formulario
   Cierra el círculo de la página con el proceso real
   ========================================= */
.contact-page-body .post-form-block {
    padding: 80px 24px 100px;
    background: #fefbf2;
}

.contact-page-body .post-form-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.contact-page-body .post-form-block .cc-rule {
    width: 56px;
    height: 1px;
    background: #b8a795;
    margin: 0 auto 28px;
}

.contact-page-body .post-form-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 1.25;
    color: #241d15;
    letter-spacing: 0.3px;
    margin: 0 0 24px;
}

.contact-page-body .post-form-body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.7;
    color: #4a3528;
    letter-spacing: 0.2px;
    margin: 0 0 18px;
}

.contact-page-body .post-form-body:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .contact-page-body .post-form-block {
        padding: 56px 20px 72px;
    }
    .contact-page-body .post-form-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .contact-page-body .post-form-body {
        font-size: 17px;
        line-height: 1.65;
        text-align: left;
    }
}