/* ============================================== */
/* === CSS PARA LA PÁGINA DE FORMULARIO         === */
/* ============================================== */

/* --- Base y Accesibilidad --- */
* { box-sizing: border-box; }
body { font-family: 'Lexend', sans-serif; margin: 0; color:#333; background:#f7f8fa; }
a { color: inherit; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Header y Logo (Escritorio) --- */
.fixed-logo { position: fixed; top: 30px; left: 40px; z-index: 1001; }
.fixed-logo img { height: 40px; width: auto; }
.main-header { position: fixed; top: 20px; right: 20px; left: 20px; z-index: 1000; display:flex; justify-content:flex-end; align-items:center; padding:10px 20px; transition: top .4s ease-in-out; }
.main-header.nav-hidden { top: -100px; }
.nav-wrapper { background:rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:10px; padding:10px 20px; display:flex; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.main-nav { display: flex; }
.main-nav a { color:#333; text-decoration:none; margin:0 20px; font-weight:500; position:relative; padding:5px 0; }
.main-nav a:hover::after, .main-nav a.active::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:#c5a47e; }
.cta-button {
    background: linear-gradient(135deg, #B98B49 0%, #caa168 100%);
    color: white;
    padding: 12px 25px;
    border-radius: 90px;
    text-decoration: none;
    font-weight: 700;
    margin-left: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px rgba(185, 139, 73, 0.3);
}

.cta-button:hover {
    background: linear-gradient(135deg, #caa168 0%,);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 30px rgba(185, 139, 73, 0.4);
}
.mobile-nav-toggle { display: none; }

/* --- Hero --- */
.page-hero { position:relative; height: 46vh; min-height: 320px; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.05); animation: kenburns 18s ease-out infinite; z-index:1; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(26,42,74,.55)); z-index:2; }
.hero-content { position:relative; z-index:3; padding:0 16px; }
.hero-content h1 { font-size: clamp(2rem, 5vw, 3.2rem); text-shadow: 0 6px 24px rgba(0,0,0,.45); margin:0 0 8px; }
.hero-subtitle { opacity:.95; }
@keyframes kenburns { 0%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* --- Contenido y Formulario --- */
.page-container { max-width: 1100px; margin: 0 auto; padding: 90px 20px; }
.form-section { display:flex; justify-content:center; }
.form-card { width: min(900px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 18px 60px rgba(26,42,74,.18); padding: 28px; }
.form-card h2 { margin: 0 0 6px; color:#1a2a4a; font-size:1.8rem; }
.form-intro { margin: 0 0 22px; color:#465161; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.input-full { grid-column: 1 / -1; }
.input-group { display:flex; flex-direction:column; }
.input-group label { font-weight:600; margin-bottom:8px; color:#22314f; }
.input-group input, .input-group textarea { border: 1.5px solid #dfe5ef; background: #fbfcfe; border-radius: 10px; padding: 14px; outline: none; font-size: 1rem; transition: border .2s ease, box-shadow .2s ease; }
.input-group input:focus, .input-group textarea:focus { border-color: #c5a47e; box-shadow: 0 0 0 3px rgba(197,164,126,.2); }

/* === Selector de País y Teléfono === */
.phone-input-wrapper { display: flex; gap: 10px; align-items: stretch; }
.country-selector {
    border: 1.5px solid #dfe5ef;
    background: #fbfcfe;
    border-radius: 10px;
    padding: 14px 10px;
    outline: none;
    font-size: 1rem;
    cursor: pointer;
    transition: border .2s ease, box-shadow .2s ease;
    min-width: 110px;
    font-family: 'Lexend', sans-serif;
}
.country-selector:focus {
    border-color: #c5a47e;
    box-shadow: 0 0 0 3px rgba(197,164,126,.2);
}
.phone-input-wrapper input[type="tel"] {
    flex: 1;
    min-width: 0;
}

.error-msg { display:none; color:#b24a4a; font-size:.9rem; margin-top:6px; }
.form-actions { display:flex; gap:14px; align-items:center; margin-top:8px; }
.btn-primary {
    background: linear-gradient(135deg, #B98B49 0%, #caa168 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(185, 139, 73, 0.3);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #caa168 0%, #3e5c7e 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(185, 139, 73, 0.4);
}
.btn-secondary {
    background: transparent;
    color: #B98B49;
    border: 2px solid #B98B49;
    padding: 14px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #B98B49;
    color: white;
    transform: translateY(-2px);
}
.privacy-note { color:#6b768a; font-size:.95rem; margin-top:14px; }

/* --- Pre-footer y Footer --- */
.pre-footer { background:#f5f6f7; padding:80px 20px; text-align:center; }
.pre-footer-content { max-width:900px; margin: 0 auto; }
.pre-footer h2 { font-size:2rem; color:#1a2a4a; margin:0 0 12px; }
.pre-footer p { color:#465161; margin:0 0 22px; }
.cta-button-footer { display:inline-block; background:#c5a47e; color:#fff; text-decoration:none; font-weight:700; padding:14px 28px; border-radius:8px; }
.cta-button-footer:hover { background:#b39169; }
.main-footer-container { background-color: #1a2a4a; color: #e0e0e0; padding: 60px 40px 20px; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 40px; }
.footer-column { flex: 1; min-width: 220px; }
.footer-column h4 { font-size: 1.2rem; color: #fff; margin-bottom: 20px; font-weight: 600; position: relative; padding-bottom: 10px; }
.footer-column h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: #c5a47e; }
.footer-column a, .footer-column p { color: #e0e0e0; text-decoration: none; display: block; margin-bottom: 10px; line-height: 1.7; }
.footer-column a:hover { color: #fff; text-decoration: underline; }
.footer-tagline { font-style: italic; color: #c5a47e; }
.footer-brand { max-width: 180px; height: auto; display: block; filter: brightness(0) invert(1); }
.footer-bottom { text-align: center; border-top: 1px solid #3c4a6b; padding-top: 20px; margin-top: 40px; font-size: 0.9rem; color: #a0a0a0; }

/* --- Modal Éxito Original --- */
#modal-container { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:2000; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
#modal-container.is-visible { opacity:1; visibility:visible; }
.modal-content { background:#fff; border-radius:14px; padding:28px; width:min(560px, 92%); position:relative; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.modal-close-btn { position:absolute; top:10px; right:14px; border:none; background:none; font-size:2rem; color:#999; cursor:pointer; }

/* --- Animaciones de Aparición --- */
.hidden-item { opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.hidden-item.is-visible { opacity:1; transform: translateY(0); }
.hidden-hero-text { opacity:0; transform: translateY(18px); transition: opacity 1s ease .4s, transform 1s ease .4s; }
.hidden-hero-text.is-visible { opacity:1; transform: translateY(0); }

/* =============================================== */
/* === MODAL ELEGANTE DE AGRADECIMIENTO MEJORADO === */
/* =============================================== */

#success-modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 42, 74, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#success-modal.show {
    opacity: 1;
    visibility: visible;
}

.success-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 24px;
    padding: 50px 40px;
    max-width: 520px;
    width: 92%;
    text-align: center;
    box-shadow: 
        0 32px 80px rgba(26, 42, 74, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    transform: scale(0.8) translateY(40px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#success-modal.show .success-modal-content {
    transform: scale(1) translateY(0);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #c5a47e, #b39169);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: successPulse 2s ease-in-out infinite;
}

.success-icon::before {
    content: '✓';
    color: white;
    font-size: 32px;
    font-weight: bold;
    animation: checkmark 0.6s ease-in-out 0.3s both;
    transform: scale(0);
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 164, 126, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(197, 164, 126, 0); }
}

@keyframes checkmark {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.2) rotate(-45deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.success-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a2a4a;
    margin: 0 0 12px;
    line-height: 1.3;
}

.success-name {
    color: #c5a47e;
    font-weight: 800;
    display: inline-block;
    position: relative;
}

.success-name::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c5a47e, #b39169);
    border-radius: 1px;
    animation: underlineGrow 0.8s ease-out 0.8s both;
    transform: scaleX(0);
}

@keyframes underlineGrow {
    to { transform: scaleX(1); }
}

.success-message {
    color: #465161;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 32px;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-details {
    background: rgba(197, 164, 126, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin: 0 0 32px;
    border-left: 4px solid #c5a47e;
    opacity: 0;
    animation: slideInLeft 0.6s ease-out 0.9s both;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.success-details p {
    margin: 0;
    color: #1a2a4a;
    font-weight: 600;
    font-size: 0.95rem;
}

.success-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.success-btn {
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 1.2s both;
}

.success-btn-primary {
    background: linear-gradient(135deg, #c5a47e, #b39169);
    color: white;
    box-shadow: 0 4px 16px rgba(197, 164, 126, 0.3);
}

.success-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(197, 164, 126, 0.4);
}

.success-btn-secondary {
    background: white;
    color: #1a2a4a;
    border: 2px solid #e1e8f0;
}

.success-btn-secondary:hover {
    border-color: #c5a47e;
    transform: translateY(-1px);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    transform: rotate(90deg);
}

/* Loading state para el botón */
.btn-primary.loading {
    background: #b39169;
    cursor: not-allowed;
    position: relative;
    color: transparent;
}

.btn-primary.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================ */
/* === RESPONSIVE UNIFICADO === */
/* ============================ */
@media (max-width: 900px) {
    .grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* --- Menú Hamburguesa --- */
    .mobile-nav-toggle {
        display: block; position: relative; z-index: 1001;
        width: 28px; height: 20px;
        background: transparent; border: 0; padding: 0; cursor: pointer;
    }
    .mobile-nav-toggle::before, .mobile-nav-toggle::after {
        content: ''; position: absolute; left: 0;
        width: 100%; height: 3px; background: #fff;
        border-radius: 2px; transition: transform .3s, top .3s, bottom .3s;
    }
    .mobile-nav-toggle::before { top: 0; }
    .mobile-nav-toggle::after { bottom: 0; }
    .nav-open .mobile-nav-toggle::before { top: 8.5px; transform: rotate(45deg); }
    .nav-open .mobile-nav-toggle::after { bottom: 8.5px; transform: rotate(-45deg); }
    body.nav-open { overflow: hidden; }

    .fixed-logo { top: 20px; left: 20px; }
    .fixed-logo img { height: 35px; }
    .main-header { padding: 15px 20px; }
    .nav-wrapper { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: none; padding: 0; }
    .main-nav {
        display: none; position: fixed; z-index: 1000;
        inset: 0 0 0 30%;
        flex-direction: column; justify-content: center; align-items: center; gap: 3rem;
        padding: min(20vh, 10rem) 2em;
        background: rgba(26, 42, 74, 0.95);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        transform: translateX(100%); transition: transform 0.4s ease-out;
    }
    .nav-open .main-nav { display: flex; transform: translateX(0%); }
    .main-nav a { color: white; margin: 0; font-size: 1.1rem; }
    .main-nav a.active::after, .main-nav a:hover::after { display: none; }
    .main-nav .cta-button { border: 2px solid #c5a47e; background-color: transparent; padding: 12px 30px; border-radius: 50px; }
    
    /* --- Otros Ajustes --- */
    .page-hero { height: 35vh; min-height: 260px; }
    .page-container { padding: 60px 20px; }
    .form-card { padding: 24px; }
    .form-card h2 { font-size: 1.6rem; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-column h4::after { left: 50%; transform: translateX(-50%); }
    .footer-brand { margin: 0 auto 15px; }
    
    /* --- Modal Responsive --- */
    .success-modal-content {
        padding: 40px 24px;
        margin: 0 16px;
    }
    
    .success-title {
        font-size: 1.6rem;
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .success-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-container { padding: 40px 15px; }
    .form-card { padding: 20px; }
    .form-card h2 { font-size: 1.4rem; }
    .input-group input, .input-group textarea, .btn-primary, .btn-secondary { font-size: 0.95rem; padding: 12px; }
    .country-selector { font-size: 0.95rem; padding: 12px 8px; min-width: 95px; }
    .main-footer-container { padding: 40px 20px 20px; }
    
    /* --- Modal Móvil --- */
    .success-modal-content {
        padding: 30px 20px;
    }
    
    .success-icon {
        width: 60px;
        height: 60px;
    }
    
    .success-icon::before {
        font-size: 24px;
    }
    
    .success-title {
        font-size: 1.4rem;
    }
}