body {
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Página con fondo blanco en esta vista */
}

.form-container {
        background-color: #fff;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        width: 100%;
        /* Tamaño grande como solicitaste */
        max-width: 800px; 
        margin: 10px 0;
        align-items: center;
        justify-content: center;
}

/* Nueva sección que contiene el formulario y la imagen de fondo con overlay */
.form-section{
    position: relative;
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 60px;
    background-color: #ffffff; /* fondo general blanco */
    overflow: hidden;
}
.form-section::before{
    /* imagen de fondo en la sección (detrás de la tarjeta) */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../Img/hero-contacto.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
    pointer-events: none;
}
.form-section::after{
    /* capa oscurecida encima de la imagen */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
    pointer-events: none;
}
.form-section-inner{ position: relative; z-index: 2; display:flex; justify-content:center; align-items:center; padding: 12px 24px; width:100%; }
.form-section .form-container{ margin: 0 auto; width:100%; max-width:800px; }

/* Alinear texto hacia la izquierda dentro de los bloques principales */
.form-container,
.contact-card,
.contact-info,
.confirm-box{
    text-align: left;
}

/* Asegurar que los inputs ocupen todo el ancho disponible dentro de la tarjeta */
.form-row input,
.form-row textarea{
    width: 100%;
}

/* Asegurar que la sección no cambie el flujo del resto de secciones */
.form-section{ display:block; }

/* --- Estilos del Formulario (existente) --- */
h1 {
    color: #333;
    margin-top: 0;
    font-weight: bold;
    font-size: 24px;
}

p {
    color: #666;
    margin-bottom: 25px;
}

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

.form-row input,
.form-row textarea {
    flex: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

.form-row textarea {
    resize: vertical;
    min-height: 100px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
    color: #666;
}

.form-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.form-checkbox a {
    color: #000;
    text-decoration: underline;
}

button {
    background-color: #ff0066;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: auto;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #e6005c;
}


.map-contact-block{ padding:36px 18px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #fff; }
.mc-inner{ max-width:1200px; margin:0 auto; display:flex; gap:28px; align-items:stretch; }

/* MAP */
.mc-map{ flex:1.1; min-width:300px; border-radius:16px; overflow:hidden; box-shadow: 0 18px 36px rgba(6,24,60,0.08); }
.mc-map iframe{ width:100%; height:100%; min-height:340px; display:block; border:0; }

/* CARD (derecha) */
.mc-card{ flex:0 0 420px; background:#ffffff; border-radius:16px; padding:24px; box-shadow: 0 24px 40px rgba(17,24,39,0.08); display:flex; flex-direction:column; gap:12px; }
.mc-title{ margin:0; font-size:24px; font-weight:800; color:#111827; }
.mc-underline{ width:48px; height:5px; border-radius:4px; background: linear-gradient(90deg,#003366,#C06A3E); margin-top:6px; }

/* descripción */
.mc-desc{ color:#6b7280; font-size:14px; margin:6px 0 10px; line-height:1.5; }

/* lista de contacto */
.mc-list{ list-style:none; padding:0; margin:6px 0 10px; display:flex; flex-direction:column; gap:12px; }
.mc-list li{ display:flex; gap:12px; align-items:flex-start; }
.mc-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 40px; }
.mc-icon svg{ display:block; width:18px; height:18px; }

/* colores para cada icono */
.mc-icon--phone{ background: linear-gradient(135deg,#ff6b94,#ff9fb8); }
.mc-icon--mail{ background: linear-gradient(135deg,#9b8cff,#caa3ff); }
.mc-icon--pin{ background: linear-gradient(135deg,#7ad7ff,#6fcfff); }

/* texto junto al icono */
.mc-item strong{ display:block; font-size:13px; color:#111827; }
.mc-item span{ display:block; color:#6b7280; font-size:13px; }

/* horarios */
.mc-hours{ margin-top:6px; color:#6b7280; font-size:13px; }

/* responsive: apilar en móvil */
@media (max-width:900px){
  .mc-inner{ flex-direction:column-reverse; }
  .mc-card{ width:100%; flex-basis:auto; }
  .mc-map iframe{ min-height:260px; }
  .map-contact-block{ padding:20px 12px; }
}

/* --- Confirmation UI --- */
.confirm-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:36px;
    background: #fff;
    border-radius:8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    width:100%;
    max-width:800px;
    box-sizing:border-box;
}
.confirm-circle{
    width:86px;
    height:86px;
    border-radius:50%;
    background:#ff0066; /* rojo */
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.confirm-circle svg{ width:44px; height:44px; }
.confirm-title{ font-size:20px; font-weight:700; color:#111827; }
.confirm-sub{ color:#6b7280; font-size:14px; text-align:center; max-width:560px; }
.confirm-return{
    display:inline-block;
    margin-top:6px;
    background:transparent;
    border:2px solid #003366;
    color: #003366;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
}
.confirm-return:hover{ background:#003366; color:#fff; transition: .18s; }