lor: var(--color-titulo);
    flex-shrink: 0;
}

.beneficio-texto {
    font-size: 14px;
    color: var(--color-texto-claro);
    font-weight: 500;
    line-height: 1.4;
}

/* ========================================
   9. RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .proceso-reserva-contenedor {
        grid-template-columns: 1fr;
    }

    .resumen-reserva-sticky {
        position: relative;
        top: auto;
    }

    .barra-progreso-contenido {
        flex-wrap: wrap;
        gap: 20px;
    }

    .paso-linea {
        display: none;
    }
}

@media (max-width: 768px) {
    .modal-reserva-header {
        padding: 40px 20px 20px;
    }

    .modal-reserva-titulo {
        font-size: 22px;
    }

    .modal-reserva-body {
        padding: 20px;
    }

    .proceso-reserva-contenedor {
        padding: 15px 10px;
    }

    .proceso-reserva-izquierda {
        padding: 20px 15px;
        border-radius: 15px;
    }

    /* Títulos y descripciones principales */
    .paso-titulo-principal {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .paso-descripcion {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* PASO 1 - Información */
    .viaje-destacado-info {
        padding: 0px 15px;
        margin-bottom: 20px;
    }

    .viaje-nombre {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .detalle-item {
        font-size: 13px;
    }

    .desplegable-box {
        margin-bottom: 15px;
    }

    .desplegable-header {
        padding: 15px;
    }

    .desplegable-titulo {
        font-size: 15px;
        gap: 10px;
    }

    .icono-info {
        width: 20px;
        height: 20px;
    }

    .icono-chevron {
        width: 20px;
        height: 20px;
    }

    .desplegable-contenido {
        padding: 0 15px 15px;
        font-size: 13px;
        line-height: 1.6;
    }

    .desplegable-contenido h4 {
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: 8px;
    }

    .lista-condiciones {
        padding-left: 15px;
        margin: 10px 0;
    }

    .lista-condiciones li {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.5;
    }

    .nota-pequena {
        font-size: 12px;
        margin-top: 12px;
    }

    .confirmacion-lectura {
        padding: 18px 15px;
        margin-top: 20px;
    }

    .checkbox-container {
        gap: 10px;
    }

    .confirmacion-lectura input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .confirmacion-lectura input[type="checkbox"]:checked::after {
        left: 6px;
        top: 2px;
        width: 4px;
        height: 9px;
    }

    .checkbox-label {
        font-size: 13px;
        line-height: 1.4;
    }

    /* PASO 2 - Datos personales */
    .formulario-datos-personales {
        gap: 25px;
    }

    .persona-formulario {
        padding: 18px 15px;
    }

    .persona-titulo {
        font-size: 18px;
        gap: 10px;
        margin-bottom: 20px;
    }

    .icono-persona {
        width: 22px;
        height: 22px;
    }

    .badge-titular {
        font-size: 7px;
        padding: 3px 10px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .form-control {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 8px;
    }

    .form-help {
        font-size: 11px;
        margin-top: 4px;
    }

    .seccion-datos-facturacion {
        padding: 18px 15px;
    }

    .seccion-titulo {
        font-size: 18px;
        gap: 10px;
        margin-bottom: 15px;
    }

    .icono-seccion {
        width: 22px;
        height: 22px;
    }

    /* PASO 3 - Pago */
    .bloque-seguridad {
        padding: 10px 7px;
        gap: 15px;
        margin-bottom: 20px;
    }

    .icono-lock {
        width: 40px;
        height: 40px;
    }

    .seguridad-texto h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .seguridad-texto p {
        font-size: 13px;
        line-height: 1.5;
    }

    .resumen-final-reserva {
        padding: 20px 15px;
        margin-bottom: 20px;
    }

    .resumen-final-reserva>h3 {
        font-size: 18px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .resumen-seccion {
        margin-bottom: 18px;
    }

    .resumen-seccion h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .resumen-item {
        padding: 6px 0;
        font-size: 13px;
    }

    .resumen-item-destacado {
        padding: 12px;
        margin-bottom: 8px;
    }

    .resumen-valor-destacado {
        font-size: 20px;
    }

    .resumen-item-total {
        padding: 12px;
        margin-top: 12px;
    }

    .resumen-valor-total {
        font-size: 22px;
    }

    .terminos-aceptacion {
        padding: 18px 15px;
        margin-bottom: 20px;
    }

    .terminos-aceptacion>h3 {
        font-size: 17px;
        margin-bottom: 15px;
    }

    .checkbox-terminos {
        margin-bottom: 12px;
    }

    .terminos-aceptacion input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .terminos-aceptacion input[type="checkbox"]:checked::after {
        left: 5px;
        top: 1px;
        width: 4px;
        height: 9px;
    }

    .checkbox-label {
        font-size: 13px;
        line-height: 1.5;
    }

    .btn-finalizar-reserva {
        font-size: 16px;
        padding: 16px 30px;
        gap: 10px;
    }

    .icono-btn {
        width: 20px;
        height: 20px;
    }

    .texto-ayuda-finalizar {
        font-size: 12px;
        margin-top: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;

    }

    /* Resumen sidebar */
    .resumen-reserva-sticky {
        padding: 18px 15px;
        border-radius: 15px;
    }

    .resumen-titulo {
        font-size: 18px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .resumen-nombre-viaje {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .resumen-detalle {
        font-size: 13px;
        gap: 6px;
        margin-bottom: 6px;
    }

    .icono-pequeno {
        width: 16px;
        height: 16px;
    }

    .precio-linea {
        padding: 8px 0;
        font-size: 13px;
    }

    .precio-label {
        font-size: 13px;
    }

    .precio-valor {
        font-size: 14px;
    }

    .precio-info-pequena {
        font-size: 11px;
        margin: 4px 0 12px 0;
    }

    .precio-reserva .precio-label small {
        font-size: 11px;
    }

    .precio-destacado {
        font-size: 18px;
    }

    .precio-muy-destacado {
        font-size: 20px;
    }

    .codigo-promocional-box label {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .codigo-promocional-input-group .form-control {
        padding: 10px 12px;
        font-size: 13px;
    }

    .btn-aplicar-codigo {
        padding: 10px 16px;
        font-size: 13px;
    }

    .codigo-mensaje {
        font-size: 12px;
        padding: 8px;
    }

    /* Mantener layout horizontal incluso en tablet */

    .mensaje-autoguardado {
        bottom: 20px;
        right: 20px;
        left: 20px;
        justify-content: center;
        font-size: 12px;
    }

    /* Mantener botones en línea en móvil pero más compactos */
    .botones-navegacion-container {
        gap: 10px;
    }

    .btn-volver-paso,
    .btn-siguiente-paso {
        padding: 10px 16px;
        font-size: 13px;
    }

    .btn-volver-paso svg,
    .btn-siguiente-paso svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .reserva-login-opciones {
        grid-template-columns: 1fr;
    }

    .opcion-card {
        padding: 30px 20px;
    }

    .modal-reserva-contenido {
        width: 95%;
    }

    .selector-personas-input {
        width: 70px;
        height: 55px;
        font-size: 28px;
    }

    /* Optimizaciones adicionales para pantallas pequeñas */
    .proceso-reserva-contenedor {
        padding: 10px 8px;
    }

    .proceso-reserva-izquierda {
        padding: 15px 12px;
    }

    .paso-titulo-principal {
        font-size: 20px;
        text-align: center;
    }

    .paso-descripcion {
        font-size: 13px;
    }

    .viaje-nombre {
        font-size: 18px;
    }

    .desplegable-titulo {
        font-size: 14px;
    }

    .persona-titulo {
        font-size: 16px;
    }

    .form-control {
        padding: 10px 12px;
        font-size: 13px;
    }

    .resumen-reserva-sticky {
        padding: 15px 12px;
    }

    .resumen-titulo {
        font-size: 16px;
    }

    .resumen-nombre-viaje {
        font-size: 15px;
    }

    .precio-destacado {
        font-size: 16px;
    }

    .precio-muy-destacado {
        font-size: 18px;
    }

    .btn-finalizar-reserva {
        font-size: 15px;
        padding: 15px 25px;
    }

    .icono-btn {
        width: 18px;
        height: 18px;
    }

    /* Botones navegación aún más compactos en móviles pequeños */
    .botones-navegacion-container {
        gap: 8px;
    }

    .btn-volver-paso,
    .btn-siguiente-paso {
        padding: 10px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .btn-volver-paso svg,
    .btn-siguiente-paso svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   6. PÁGINA DE REGISTRO INDEPENDIENTE
   ======================================== */
.registro-page {
    min-height: 80vh;
    padding: 60px 20px;
    background: var(--color-fondo);
}

.registro-container {
    max-width: 600px;
    margin: 0 auto;
}

.registro-header {
    text-align: center;
    margin-bottom: 40px;
}

.registro-titulo {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 15px;
}

.registro-subtitulo {
    font-size: 16px;
    color: var(--color-texto-claro);
    line-height: 1.6;
}

.formulario-registro-wrapper {
    background: var(--color-fondo-secundario);
    border-radius: 20px;
    padding: 40px 40px;
    box-shadow: var(--sombra-card);
    border: 1px solid rgba(137, 196, 255, 0.2);
    max-width: 500px;
    margin: 0 auto;
}

.form-success {
    background: rgba(70, 180, 80, 0.2);
    border: 1px solid var(--color-exito);
    color: var(--color-exito);
    padding: 15px 20px;
    border-radius: 12px;
    margin: 20px 0;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.texto-login {
    text-align: center;
    color: var(--color-texto-claro);
    font-size: 15px;
    margin-top: 15px;
}

.texto-login a {
    color: var(--color-titulo);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transicion);
}

.texto-login a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Responsive para página de registro */
@media (max-width: 768px) {
    .registro-page {
        padding: 40px 15px;
    }

    .registro-titulo {
        font-size: 28px;
    }

    .formulario-registro-wrapper {
        padding: 30px 20px;
    }
}


.viaje-destacado-info {
    display: none;
}

/* ========================================
   ESTILOS PARA RESUMEN DE VIAJE - SIDEBAR
   ======================================== */

/* Contenedor de información del viaje en el resumen sticky */
.viaje-info-container {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-borde);
}

/* Nombre del viaje destacado en azul corporativo */
.viaje-nombre-destacado {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-titulo, #89c4ff);
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Fecha del viaje con icono pequeño en gris */
.viaje-fecha-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 14px;
}

.icono-calendario-pequeno {
    width: 14px;
    height: 14px;
    color: #999;
    flex-shrink: 0;
}

/* Ajustar estilos de precio para que "Precio por persona" y "Número de personas" sean grises */
.resumen-precio-desglose .precio-linea:nth-child(1) .precio-label,
.resumen-precio-desglose .precio-linea:nth-child(2) .precio-label {
    color: #999;
    font-size: 14px;
}

/* Los valores numéricos permanecen en blanco */
.resumen-precio-desglose .precio-linea .precio-valor {
    color: var(--color-texto, #fff);
    font-weight: 600;
}