/* LTSM-4279 — Sección unificada "Reserva" + "Agenda cita" (layout 2 columnas)
   Solo layout; los colores/tipografía los aportan los componentes existentes
   de Sotobosque (.wrap-steps, .alter-steps, .make-appointment-home__wrapper, etc.). */

.home-reserve-cita {
    padding: 60px 16px;
}

.home-reserve-cita__grid {
    max-width: 1316px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Evita desbordes de hijos dentro de las celdas del grid */
.home-reserve-cita__col {
    min-width: 0;
}

/* La columna de pasos reutiliza .step-reserves__steps--vv; forzamos ancho completo
   porque ese modificador asumía media sección en el layout antiguo. */
.home-reserve-cita__steps,
.home-reserve-cita__steps .wrap-steps {
    width: 100%;
    max-width: none;
}

.home-reserve-cita__sales {
    margin-top: 32px;
}

/* La columna izquierda va sobre el fondo oscuro de la sección. El subtítulo
   "¿Cómo reservar tu apartamento?" y el bloque "Sala de ventas" heredaban el
   color de texto oscuro (e incluso .color--primary-default) y se confundían con
   el fondo. Los forzamos a claro para que sean legibles. */
.home-reserve-cita__col--steps .wrap-steps-subtitle {
    color: #ffffff;
}

.home-reserve-cita__sales .color--primary-default {
    color: #ffffff !important;
}

.home-reserve-cita__sales,
.home-reserve-cita__sales p,
.home-reserve-cita__sales a {
    color: #dae5ec;
}

/* Los estilos base de .contact-info (texto #6e7191, íconos y link "Llamar"
   en #3b5563) ganaban por especificidad y quedaban oscuros sobre el navy.
   Subimos la especificidad para que TODO el bloque sea legible en claro. */
.home-reserve-cita__sales .contact-info div p {
    color: #dae5ec;
}

.home-reserve-cita__sales .contact-info div p > span {
    color: #dae5ec;
}

.home-reserve-cita__sales .contact-info__phone a {
    color: #ffffff !important;
}

/* "Sala de ventas": en desktop .contact-info es flex-row con divs de ancho fijo
   (265/270/275px) que no caben en esta columna angosta y se amontonan. Lo
   apilamos en vertical a todo el ancho (como la sala de ventas de Polanco). */
.home-reserve-cita__sales .contact-info {
    flex-direction: column;
    gap: 14px;
}

.home-reserve-cita__sales .contact-info div {
    width: 100% !important;
}

/* Botón "Reserva tu apartamento": el fondo de la sección es #3b5563, idéntico
   al relleno de .cta--solid, así que el botón se funde con el fondo y solo se
   veía el texto. Lo pasamos a botón de contorno (borde claro siempre visible) y
   en hover aclara a blanco (patrón de transparencia de Mariscal). */
.home-reserve-cita__col--steps .cta--solid {
    background-color: transparent;
    border-color: #dae5ec;
    color: #dae5ec;
}

.home-reserve-cita__col--steps .cta--solid:hover {
    background-color: rgba(0, 0, 0, 0);
    border-color: #ffffff;
    color: #ffffff;
}

/* Isotipo decorativo sobre el formulario (columna derecha) */
.home-reserve-cita__isotipo {
    text-align: center;
    margin-bottom: 16px;
}

.home-reserve-cita__isotipo img {
    max-height: 72px;
    width: auto;
}

/* El wrapper del formulario debe llenar su columna.
   Se neutralizan los offsets heredados (margin-top negativo y translateY)
   que servían para solapar el banner antiguo, ya inexistente. */
.home-reserve-cita__col--form .make-appointment-home__wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-top: 0;
    -webkit-transform: none !important;
    transform: none !important;
}

/* --- Formulario "Agenda tu cita" ---------------------------------------------
   El wrapper reutiliza .make-appointment-home__wrapper, cuyos estilos en
   styles.min.css fueron diseñados para una sección a ancho completo (form en
   grid de 3 columnas + título desplazado 95px por el patrón decorativo).
   En este layout de media columna eso queda apretado y "sin padding", así que
   replicamos el tratamiento de Polanco: tarjeta con padding propio y form en
   2 campos por fila. Scopeado bajo .home-reserve-cita para no afectar la página
   independiente de agendar cita. */
.home-reserve-cita .make-appointment-home__wrapper.bg-wrapper-form {
    padding: 40px 36px;
    border-radius: 20px;
    /* El patrón decorativo desplazaba el título; el isotipo ya cumple ese rol. */
    background-image: none;
}

/* Título/subtítulo alineados con los campos (se neutraliza el offset del patrón) */
.home-reserve-cita .make-appointment-home__wrapper h1,
.home-reserve-cita .make-appointment-home__wrapper h1 + p {
    padding-left: 0;
    padding-top: 0;
}

.home-reserve-cita .make-appointment-home__wrapper .row {
    margin-bottom: 24px;
}

/* Form en columna de filas; cada fila con 2 campos a lo ancho */
.home-reserve-cita .make-appointment-home__wrapper .form-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
    width: 100%;
    margin: 0;
}

.home-reserve-cita .make-appointment-home__wrapper .form-container > .form-column {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    margin: 0;
}

.home-reserve-cita .make-appointment-home__wrapper .form-container > .form-column > .form-row {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
}

/* Responsive: una sola columna en tablet/móvil */
@media (max-width: 1024px) {
    .home-reserve-cita__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .home-reserve-cita__isotipo {
        display: none;
    }
}

/* Campos Fecha/Hora de la cita: label estático arriba del input (sin animación
   de floating-label) + botón AM/PM. Portado de Polanco. */
.home-reserve-cita .form-row--datetime {
    position: relative;
}

.home-reserve-cita .form-row--datetime .form-label-static {
    position: static;
    display: block;
    width: 100%;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: #6e7191;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.home-reserve-cita .form-row--datetime .form-input-static {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 0 6px 0;
    border: none;
    border-bottom: 1px solid #c9ccd9;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    color: #262338;
    outline: none;
    box-shadow: none;
}

.home-reserve-cita .form-row--datetime .form-input-static:focus {
    border-bottom-color: #3b5563;
}

.home-reserve-cita .form-row--hora .hora-cita-ampm {
    position: absolute;
    right: 0;
    bottom: 4px;
    height: 30px;
    min-width: 48px;
    padding: 0 10px;
    border-radius: 16px;
    border: 1px solid #3b5563;
    background: transparent;
    color: #3b5563;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.home-reserve-cita .form-row--hora .hora-cita-ampm.is-pm {
    background: #3b5563;
    color: #fff;
}

.home-reserve-cita .form-row--hora #hora_cita_input {
    padding-right: 60px;
}

/* Botón Enviar en su propia fila, centrado */
.home-reserve-cita .make-appointment-home__wrapper .form-container > .form-row--submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 8px 0 0;
}

.home-reserve-cita .form-row--submit .cta[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* En móvil los 2 campos por fila se apilan */
@media (max-width: 575px) {
    .home-reserve-cita .make-appointment-home__wrapper.bg-wrapper-form {
        padding: 32px 24px;
    }

    .home-reserve-cita .make-appointment-home__wrapper .form-container > .form-column {
        flex-direction: column;
        gap: 20px;
    }
}