.oe-contact-page { 
    padding: 50px 15px 60px; 
    background: #002c5c url("../img/viajes-contacto.jpg") center center / cover no-repeat; 
}
.oe-contact { 
    border: 0; 
    border-radius: 10px; 
    background: rgba(0, 44, 92, 0.9); 
    color: white; 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 32px 24px; 
    box-sizing: border-box;
}
.oe-contact h3, .oe-contact p, .oe-contact label { 
    color: white; 
}
.oe-contact-heading { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 16px; 
    margin-bottom: 24px; 
}
.oe-contact .oe-contact-heading h3 { 
    margin: 0; 
}
.oe-contact-fields { 
    display: grid; 
    grid-template-columns: repeat(2,minmax(0,1fr)); 
    gap: 14px; 
    margin-top: 14px; 
}
.oe-contact-field { 
    min-width: 0; 
}
.oe-contact-field label { 
    display: block; 
    font-size: 14px; 
    font-weight: normal; 
}
.oe-contact-field input, .oe-contact-field textarea, .oe-contact-field select { 
    display: block; 
    width: 100%; 
    min-height: 42px; 
    padding: 8px; 
    border: 2px solid transparent; 
    border-radius: 5px; 
    background: white !important; 
    color: #002c5c !important; 
    -webkit-text-fill-color: #002c5c !important; 
    caret-color: #002c5c; 
    font: inherit; 
    box-sizing: border-box; 
}
.oe-contact-field input::placeholder, .oe-contact-field textarea::placeholder { 
    color: #002c5c !important; 
    -webkit-text-fill-color: #002c5c !important; 
    opacity: 1; 
}
.oe-contact-field textarea { 
    resize: vertical; 
}
.oe-contact-field-wide { 
    grid-column: 1 / -1; 
}
.oe-contact [aria-invalid="true"] { 
    border-color: #ffca66; 
}
.oe-contact-error, .oe-contact-status { 
    color: #ffe18a !important; 
    font-size: 14px; 
}
.oe-contact a { 
    color: white; 
    text-decoration: underline; 
}
.oe-contact :focus-visible { 
    outline: 3px solid #ffca66; 
    outline-offset: 3px; 
}
.oe-contact-send { 
    background: #e31d1a !important; 
    color: white; 
    border: 0; 
    border-radius: 4px; 
    padding: 10px 24px; 
}
.oe-contact-send:disabled { 
    opacity: .6; 
    cursor: wait; 
}
.oe-contact-trap { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip-path: inset(50%); 
}
.oe-contact-privacy { 
    margin-top: 18px; 
}
.oe-contact-privacy label { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 14px;
    font-weight: normal; 
    cursor: pointer; 
}
.oe-contact-privacy input[type="checkbox"] { 
    appearance: auto; 
    width: 18px; 
    height: 18px; 
    flex: 0 0 18px; 
    margin: 3px 0 0; 
    accent-color: #e31d1a; 
}
@media (max-width: 540px) { 
    .oe-contact-fields { 
    grid-template-columns: 1fr; 
} }
.oe-contact-stepper { 
    display: flex; 
    list-style: none; 
    margin: 0 0 24px; 
    padding: 0; 
    border: 1px solid #819db6; 
    border-radius: 18px; 
    overflow: hidden; 
}
.oe-contact-stepper li { 
    display: flex; 
    flex: 1 1 0; 
    min-width: 0; 
    justify-content: center; 
    align-items: center; 
    gap: 12px; 
    padding: 10px 10px; 
    background-color: transparent;
    transition: background-color .3s ease, color .3s ease;
    color: white; 
    font-size: 16px; 
}
.oe-contact-stepper li > span { 
    display: grid; 
    place-items: center; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    flex-shrink: 0; 
    background: #f00000; 
    color: white; 
    font-size: 18px;
    font-weight: bold; 
    line-height: 1; 
    transition: background-color .3s ease, color .3s ease;
}
.oe-contact-stepper [aria-current="step"] { 
    background: #f00000; 
    color: white; 
}
.oe-contact-stepper [aria-current="step"] > span { 
    background: #002c5c; 
}
.oe-contact-panels { 
    position: relative; 
    overflow: hidden; 
}
.oe-contact-panel { 
    position: relative; 
    width: 100%; 
    box-sizing: border-box; 
    padding: 8px; 
    margin: 0; 
}
.oe-contact-panel[hidden] { 
    display: none !important; 
}
.oe-contact[data-step="1"] .oe-contact-panel.is-active { 
    animation: oe-contact-enter-back .3s ease; 
}
.oe-contact[data-step="2"] .oe-contact-panel.is-active { 
    animation: oe-contact-enter-forward .3s ease; 
}
@keyframes oe-contact-enter-forward { 
    from { 
    transform: translateX(110%); 
} to { 
    transform: translateX(0); 
} }
@keyframes oe-contact-enter-back { 
    from { 
    transform: translateX(-110%); 
} to { 
    transform: translateX(0); 
} }
.oe-contact h4 { 
    color: white; 
    font-size: 21px; 
    margin: 0 0 16px; 
}
.oe-contact-options { 
    display: grid; 
    gap: 12px; 
    padding: 4px; 
}
.oe-contact-option { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    width: 100%; 
    text-align: left; 
    background: rgba(255,255,255,.06) !important; 
    border: 1px solid #728ba8; 
    border-radius: 7px; 
    color: white; 
    font: inherit; 
    padding: 14px 16px !important; 
    cursor: pointer; 
}
.oe-contact-option::after { 
    content: '→'; 
    font-size: 22px; 
}
.oe-contact-option:hover, .oe-contact-option[aria-pressed="true"] { 
    background: rgba(255,255,255,.15) !important; 
    border-color: white; 
}
.oe-contact-back { 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    width: auto; 
    flex-shrink: 0; 
    background: transparent !important; 
    border: 0; 
    color: white; 
    font: inherit; 
    text-decoration: none; 
    padding: 8px 0 !important; 
    margin: 0; 
    cursor: pointer; 
    font-size: 14px;
}
.oe-contact-back[hidden] { 
    display: none !important; 
}
.oe-contact-back:hover { 
    text-decoration: none; 
    color: yellow;
}
.oe-contact-back:disabled { 
    opacity: .6; 
    cursor: wait; 
}
@media (prefers-reduced-motion: reduce) { 
    .oe-contact-stepper li, .oe-contact-stepper li > span {
    transition: none;
    }
    .oe-contact .oe-contact-panel.is-active { 
    animation: none; 
} }
@media (max-width: 540px) { 
    .oe-contact-page {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0px;
    }
    .oe-contact {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px 12px;
    border-radius: 0;
    }
    .oe-contact-heading { 
    flex-direction: column;
    align-items: center;
    gap: 10px; 
} .oe-contact-back { 
    margin: 0;
    align-self: flex-start;
} .oe-contact-stepper li { 
    font-size: 14px; 
    gap: 8px; 
    padding: 12px 6px; 
} .oe-contact-stepper li > span { 
    width: 28px; 
    height: 28px; 
    font-size: 19px; 
} 
.oe-contact-page h3 {
    text-align: center;
    width: 100%;
}
}