/* Capa visual del formulario. Va después de los estilos antiguos. */
.app-moderna {
    --verde: #1b7a3a;
    --verde-oscuro: #145c2c;
    --verde-suave: #e8f5ec;
    --fondo: #f4f5f7;
    --card: #ffffff;
    --texto: #1a2420;
    --muted: #5c6670;
    --linea: #dfe3e8;
    --info-fondo: #eef1f5;
    --info-texto: #3d4a56;
    --progreso-hecho: #64748b;
    --progreso-actual: #1b7a3a;
    --acento-neutro: #475569;
    --radio: 14px;
    /* Escritorio: --ancho-app crece en media queries (final del archivo). */
    --ancho-app: 680px;
    --padding-app-x: 18px;
    --padding-app-y: 20px;
    --sombra-card: 0 1px 2px rgba(22, 40, 30, 0.04), 0 8px 24px rgba(22, 40, 30, 0.06);
    --sombra-boton: 0 4px 14px rgba(27, 122, 58, 0.14);
    --btn-principal: #1b7a3a;
    --btn-principal-hover: #145c2c;
    --btn-paso-fondo: #ffffff;
    --btn-paso-borde: #c5cdd6;
    --btn-paso-texto: #1a2420;
    --btn-contorno: #334155;
    --btn-maps-fondo: #eef5fc;
    --btn-maps-texto: #174a6e;
    --btn-maps-borde: #a8c4de;
    --btn-anterior-fondo: #f0f4f1;
    --btn-anterior-texto: #4a5c52;
    --btn-util-fondo: #f3f5f4;
    --btn-whatsapp: #0f766e;
    --btn-whatsapp-hover: #0d655e;
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app-moderna .container {
    box-sizing: border-box;
    width: 100%;
    max-width: min(var(--ancho-app), 100%);
    margin-inline: auto;
    padding:
        max(var(--padding-app-y), env(safe-area-inset-top, 0px))
        max(var(--padding-app-x), env(safe-area-inset-right, 0px))
        max(36px, env(safe-area-inset-bottom, 0px))
        max(var(--padding-app-x), env(safe-area-inset-left, 0px));
}

.app-moderna .container::before {
    display: none;
}

.app-moderna .pagina-inicial,
.app-moderna .vista-formulario {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.app-moderna .pagina-inicial.hidden,
.app-moderna .vista-formulario.hidden {
    display: none !important;
}

.app-moderna .header-inicial .logo-container,
.app-moderna .pagina-inicial .header-inicial .logo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 8px 0 4px;
    background: transparent;
    border: 0;
}

.app-moderna .pagina-inicial .header-inicial .logo {
    max-height: 64px;
    width: auto;
}

.app-moderna .eyebrow {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-moderna .pagina-inicial h1,
.app-moderna .pagina-inicial .header-inicial .header-texto-principal h1 {
    margin: 0 0 8px;
    color: var(--texto);
    font-size: clamp(1.45rem, 4vw, 1.75rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.app-moderna .texto-aviso-mantenimiento,
.app-moderna .pagina-inicial .texto-aviso-mantenimiento {
    max-width: 38rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    background: transparent;
    border: 0;
    padding: 0;
}

.app-moderna .intro-flujo {
    background: var(--card);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 20px 20px 10px;
    box-shadow: var(--sombra-card);
}

.app-moderna .contenido-central-inicial {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.app-moderna .acciones-inicial {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.app-moderna .titulo-intro {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.app-moderna .lista-pasos-resumen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.app-moderna .lista-pasos-resumen li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    color: var(--texto);
    font-size: 0.94rem;
    background: #fafcfb;
}

.app-moderna .paso-num {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--info-fondo);
    color: var(--acento-neutro);
    font-weight: 700;
    font-size: 0.9rem;
}

.app-moderna .btn-comenzar,
.app-moderna .btn-primary,
.app-moderna #calcularPresupuesto {
    background: var(--verde);
    color: #fff;
    border: 0;
    border-radius: 14px;
    min-height: 52px;
    padding: 12px 22px;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: none;
}

.app-moderna .btn-comenzar {
    width: 100%;
    max-width: 320px;
}

.app-moderna .btn-primary:hover,
.app-moderna .btn-comenzar:hover,
.app-moderna #calcularPresupuesto:hover {
    background: var(--verde-oscuro);
}

.app-moderna .btn-secondary,
.app-moderna .btn-enlace-inicio {
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--linea);
    border-radius: 14px;
    min-height: 48px;
    box-shadow: none;
}

.app-moderna .pie-inicial {
    color: var(--muted);
    font-size: 0.85rem;
}

.app-moderna .header-formulario {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 calc(-1 * var(--padding-app-x)) 4px;
    padding: 10px var(--padding-app-x);
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    background: rgba(244, 245, 247, 0.92);
    border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(10px);
}

.app-moderna .header-formulario-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: var(--ancho-app);
    margin: 0 auto;
}

.app-moderna .logo--compacto,
.app-moderna .header-marca--compacta .logo {
    max-height: 42px;
    width: auto;
}

.app-moderna .header-formulario-titulo {
    flex: 1;
    margin: 0;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.app-moderna #btnVolverInicio {
    min-height: 40px;
    padding: 8px 12px;
}

.app-moderna .indicador-progreso {
    padding: 14px 16px 12px;
    background: var(--card);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-card);
}

.app-moderna .pasos-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.app-moderna .paso-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.app-moderna .paso-nav span {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1.5px solid var(--linea);
    background: #fff;
}

.app-moderna .paso-nav.is-actual {
    color: var(--texto);
}

.app-moderna .paso-nav.is-hecho span {
    background: var(--progreso-hecho);
    border-color: var(--progreso-hecho);
    color: #fff;
}

.app-moderna .paso-nav.is-actual span {
    background: #fff;
    border-color: var(--progreso-actual);
    color: var(--progreso-actual);
    box-shadow: 0 0 0 2px rgba(27, 122, 58, 0.12);
}

.app-moderna .barra-progreso {
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.app-moderna .barra-progreso-fill {
    width: var(--progress, 25%);
    background: var(--progreso-hecho);
    height: 100%;
}

.app-moderna .texto-progreso {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

.app-moderna #presupuestoForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-moderna .seccion-colapsable {
    background: var(--card);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-card);
}

.app-moderna .seccion-header {
    padding: 16px 18px 0;
    background: transparent;
    border: 0;
    cursor: default;
}

.app-moderna .numero-paso,
.app-moderna .estado-icono,
.app-moderna .check-completo {
    display: none;
}

.app-moderna .seccion-titulo h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--texto);
}

.app-moderna .seccion-contenido {
    padding: 12px 18px 18px;
}

.app-moderna .campo-obligatorio,
.app-moderna .nota-planes-intro,
.app-moderna .texto-paso-cesped,
.app-moderna .ubicacion-texto-sutil,
.app-moderna .ubicacion-km-ayuda {
    color: var(--muted);
    font-size: 0.95rem;
}

.app-moderna .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.app-moderna .form-group {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.app-moderna .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--texto);
}

.app-moderna .form-group input,
.app-moderna .form-group select,
.app-moderna .ubicacion-km-manual-input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    font: inherit;
    font-size: 16px;
    box-shadow: none;
}

.app-moderna .form-group input:focus,
.app-moderna .form-group select:focus,
.app-moderna .ubicacion-km-manual-input:focus {
    outline: 2px solid rgba(71, 85, 105, 0.22);
    border-color: #94a3b8;
}

.app-moderna input::placeholder,
.app-moderna textarea::placeholder {
    color: #6b7a72;
    opacity: 1;
}

.app-moderna .nota-info,
.app-moderna .ubicacion-regla-clave,
.app-moderna .presupuesto-orientativo {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--info-fondo);
    border: 1px solid var(--linea);
    border-radius: 12px;
    color: var(--info-texto);
}

.app-moderna .ubicacion-dos-columnas {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}

.app-moderna .ubicacion-columna {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fbfcfb;
}

.app-moderna .ubicacion-columna--activa {
    border-color: var(--acento-neutro);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.08);
}

.app-moderna .ubicacion-columna--inactiva {
    opacity: 0.55;
}

.app-moderna .ubicacion-pill {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--info-fondo);
    color: var(--acento-neutro);
    font-size: 0.75rem;
    font-weight: 700;
}

.app-moderna .ubicacion-subtitulo {
    margin: 0;
    font-size: 1.05rem;
}

.app-moderna .ubicacion-separador-o span {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--linea);
    color: var(--muted);
    font-weight: 700;
}

.app-moderna .btn-ubicacion-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.app-moderna #kmSeleccionado {
    background: #fff;
    font-weight: 700;
    color: var(--texto);
    border: 1px solid var(--linea);
}

.app-moderna .planes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    align-items: stretch;
}

.app-moderna .plan {
    position: relative;
}

.app-moderna .plan input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    clip: rect(0 0 0 0);
}

.app-moderna .plan-label {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 14px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    box-shadow: none;
}

.app-moderna .plan input:checked + .plan-label::after {
    content: "Elegido";
    display: inline-flex;
    align-self: flex-start;
    order: -1;
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    opacity: 1;
    transform: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.app-moderna .plan-label:hover,
.app-moderna .plan input:focus-visible + .plan-label {
    border-color: #94a3b8;
}

.app-moderna .plan-label.selected,
.app-moderna .plan input:checked + .plan-label {
    border-color: var(--acento-neutro);
    background: #fafbfc;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.15);
}

.app-moderna .plan-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.app-moderna .plan-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
}

.app-moderna .plan-header h3 i {
    position: static;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.app-moderna .precio {
    margin: 0;
    color: var(--texto);
    font-size: 1.25rem;
    font-weight: 700;
}

.app-moderna .servicios {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.9rem;
}

.app-moderna .servicios li {
    display: block;
    position: relative;
    margin: 0 0 8px;
    padding-left: 1.7em;
    word-break: normal;
    overflow-wrap: break-word;
}

.app-moderna .servicios li i {
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.15em;
    margin: 0;
    text-align: center;
    line-height: 1;
}

.app-moderna .estado-cesped-fila-principal {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 16px;
    align-items: center;
}

.app-moderna .option-buttons,
.app-moderna .imagen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-moderna .imagen-btn,
.app-moderna #tomarFoto {
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: #fff;
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.app-moderna .imagen-preview {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--linea);
    border-radius: 16px;
    color: var(--muted);
    background: #fbfcfb;
}

.app-moderna .imagen-preview img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 14px;
}

.app-moderna .cesped-tag-opcional {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3f0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-moderna .navegacion-wizard {
    position: sticky;
    bottom: 12px;
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--linea);
    border-radius: 16px;
}

.app-moderna .navegacion-wizard .btn {
    flex: 1;
}

.app-moderna #botonCalcularContainer {
    margin-top: 8px;
}

.app-moderna #calcularPresupuesto {
    width: 100%;
}

.app-moderna .presupuesto {
    background: var(--card);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 18px;
}

.app-moderna .presupuesto h2 {
    margin: 0 0 8px;
}

.app-moderna .resumen-presupuesto {
    display: grid;
    gap: 0;
    margin: 12px 0;
}

.app-moderna .resumen-presupuesto .fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}

.app-moderna .resumen-presupuesto .total {
    border-bottom: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--texto);
}

.app-moderna .aviso-privacidad {
    background: #f7faf8;
    border: 1px solid var(--linea);
    border-radius: 12px;
}

.app-moderna .botones-accion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.app-moderna .btn-whatsapp {
    grid-column: 1 / -1;
    background: #128c7e;
    color: #fff;
    border: 0;
    border-radius: 14px;
    min-height: 52px;
    font-weight: 700;
}

.app-moderna .btn-whatsapp:hover {
    background: #0e7368;
}

.app-moderna #volverFormulario {
    grid-column: 1 / -1;
    justify-self: start;
    background: transparent;
    border: 0;
    color: var(--muted);
    min-height: 40px;
}

.app-moderna .info-envio,
.app-moderna .despedida {
    color: var(--muted);
}

.app-moderna .camera-container video {
    width: 100%;
    border-radius: 16px;
    background: #111;
}

.app-moderna .modal-personalizado {
    background: rgba(20, 32, 24, 0.45);
}

.app-moderna .modal-contenido {
    border-radius: 18px;
    border: 0;
    max-width: 420px;
}

.app-moderna #obtenerUbicacion i.fas,
.app-moderna #calcularPresupuesto i.fas {
    animation: none;
}

@media (max-width: 900px) {
    .app-moderna .pagina-inicial h1,
    .app-moderna .pagina-inicial .header-inicial .header-texto-principal h1 {
        font-size: 1.65rem;
    }

    .app-moderna .form-grid,
    .app-moderna .ubicacion-dos-columnas,
    .app-moderna .estado-cesped-fila-principal,
    .app-moderna .botones-accion {
        grid-template-columns: 1fr;
    }

    .app-moderna .ubicacion-separador-o {
        justify-self: center;
    }

    .app-moderna .paso-nav small {
        font-size: 0.68rem;
    }

    .app-moderna .btn-comenzar,
    .app-moderna #calcularPresupuesto,
    .app-moderna .navegacion-wizard .btn {
        width: 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-moderna * {
        animation: none !important;
        transition: none !important;
    }
}

/* Gana a los estilos antiguos que usan !important o selectores por id. */
body.app-moderna {
    background: var(--fondo);
}

body.app-moderna h2 {
    padding-bottom: 0;
    margin-bottom: 8px;
}

body.app-moderna h2::after {
    display: none;
}

body.app-moderna .pagina-inicial .header-inicial .logo-container,
body.app-moderna .pagina-inicial .header-inicial .header-texto-principal h1,
body.app-moderna .pagina-inicial .texto-aviso-mantenimiento {
    text-align: center;
    align-items: center;
}

body.app-moderna .btn-primary,
body.app-moderna #btnSiguiente,
body.app-moderna #calcularPresupuesto,
body.app-moderna .btn-comenzar {
    background: #1b7a3a !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none;
}

body.app-moderna .btn-primary:hover,
body.app-moderna #btnSiguiente:hover,
body.app-moderna #calcularPresupuesto:hover,
body.app-moderna .btn-comenzar:hover {
    background: #145c2c !important;
}

body.app-moderna #btnAnterior,
body.app-moderna #enviarEmail,
body.app-moderna #imprimir {
    background: #fff !important;
    color: #1c2b22 !important;
    border: 1px solid #dce6df !important;
    box-shadow: none !important;
}

body.app-moderna #btnAnterior:disabled {
    display: none;
}

body.app-moderna #volverFormulario {
    background: transparent !important;
    box-shadow: none !important;
}

body.app-moderna .navegacion-wizard {
    position: static;
    bottom: auto;
    z-index: 1;
}

body.app-moderna .navegacion-wizard #btnAnterior {
    flex: 0 0 auto;
}

body.app-moderna .navegacion-wizard #btnSiguiente,
body.app-moderna .navegacion-wizard .boton-calcular {
    flex: 1 1 auto;
    margin: 0;
    width: auto;
    align-items: stretch;
}

body.app-moderna .navegacion-wizard #calcularPresupuesto {
    width: 100%;
}

body.app-moderna #presupuestoForm .seccion-colapsable,
body.app-moderna #presupuestoForm .seccion-colapsable.activa {
    background: #fff;
    border: 1px solid #dce6df;
    border-radius: 14px;
    box-shadow: var(--sombra-card);
}

body.app-moderna #presupuestoForm .seccion-header,
body.app-moderna #presupuestoForm .datos-personales .seccion-header,
body.app-moderna #presupuestoForm .ubicacion .seccion-header,
body.app-moderna #presupuestoForm .planes .seccion-header,
body.app-moderna #presupuestoForm .estado-cesped .seccion-header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    padding: 16px 18px 0;
}

body.app-moderna #presupuestoForm .seccion-titulo h2 {
    font-size: 1.35rem;
    color: #1c2b22;
}

body.app-moderna .campo-obligatorio,
body.app-moderna .ubicacion-regla-clave,
body.app-moderna .ubicacion-texto-sutil,
body.app-moderna .ubicacion-km-ayuda,
body.app-moderna .texto-paso-claro,
body.app-moderna .nota-planes-intro,
body.app-moderna .texto-paso-cesped,
body.app-moderna .cesped-nota-linea,
body.app-moderna .info-envio,
body.app-moderna .pagina-inicial .texto-aviso-mantenimiento,
body.app-moderna .lista-pasos-resumen li {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
}

body.app-moderna .ubicacion-regla-clave {
    border: 1px solid var(--linea);
    border-left: 0;
    background: var(--info-fondo);
    color: var(--info-texto);
}

body.app-moderna #plan-basico .plan-label,
body.app-moderna #plan-standard .plan-label,
body.app-moderna #plan-premium .plan-label,
body.app-moderna .plan-label {
    position: relative;
    border-top: 1.5px solid #dce6df;
    box-shadow: none;
    background: #fff;
    padding-right: 14px;
}

body.app-moderna .plan input:checked + .plan-label .servicios li {
    animation: none;
}

body.app-moderna .servicios li,
body.app-moderna .producto-beneficio {
    display: block;
    position: relative;
    margin-left: 0;
    padding-left: 1.7em !important;
    word-break: normal;
    overflow-wrap: break-word;
}

body.app-moderna .servicios li em {
    display: inline;
    font-style: italic;
}

body.app-moderna .servicios li i,
body.app-moderna .producto-beneficio i {
    position: absolute !important;
    left: 0 !important;
    top: 0.2em !important;
    width: 1.15em !important;
    margin: 0 !important;
    text-align: center;
}

body.app-moderna .plan input:checked + .plan-label {
    border-color: var(--acento-neutro);
    background: #fafbfc;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.15);
    transform: none;
}

body.app-moderna #seccionPresupuesto h2 {
    font-size: 1.45rem;
}

body.app-moderna #seccionPresupuesto .resumen-presupuesto .fila {
    padding: 12px 0;
}

body.app-moderna #seccionPresupuesto .resumen-presupuesto .fila span {
    font-size: 1rem;
}

@media (max-width: 900px) {
    body.app-moderna #seccionPresupuesto .resumen-presupuesto .fila {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    body.app-moderna #seccionPresupuesto .resumen-presupuesto .fila span:last-child {
        font-weight: 700;
        text-align: left;
    }
}

body.app-moderna .modal-contenido {
    background: #fff;
    padding: 8px 8px 12px;
    width: min(420px, calc(100% - 32px));
}

body.app-moderna .modal-header,
body.app-moderna .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

body.app-moderna .modal-body {
    padding: 4px 14px 8px;
    font-size: 1rem;
    line-height: 1.45;
}

body.app-moderna .modal-footer .btn {
    flex: 1;
}

@media (max-width: 768px) {
    body.app-moderna select {
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231c2b22' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 36px !important;
    }

    body.app-moderna .pagina-inicial .texto-aviso-mantenimiento,
    body.app-moderna .lista-pasos-resumen li,
    body.app-moderna .campo-obligatorio,
    body.app-moderna .ubicacion-regla-clave,
    body.app-moderna .ubicacion-texto-sutil,
    body.app-moderna .ubicacion-km-ayuda,
    body.app-moderna .texto-paso-cesped,
    body.app-moderna .info-envio {
        font-size: 0.98rem !important;
    }
}

/* El texto cabe en la pantalla: nada empuja el ancho del contenedor. */
body.app-moderna .vista-formulario,
body.app-moderna .pagina-inicial,
body.app-moderna #presupuestoForm,
body.app-moderna .seccion-contenido,
body.app-moderna .header-formulario-inner,
body.app-moderna .pasos-nav,
body.app-moderna .paso-nav,
body.app-moderna .form-group,
body.app-moderna .plan,
body.app-moderna .ubicacion-columna,
body.app-moderna .estado-cesped-info,
body.app-moderna .estado-cesped-fila-principal,
body.app-moderna .resumen-presupuesto .fila span {
    min-width: 0;
    max-width: 100%;
}

body.app-moderna .container {
    min-width: 0;
    width: 100%;
    max-width: min(var(--ancho-app), 100%) !important;
    margin-left: auto;
    margin-right: auto;
}

body.app-moderna .seccion-titulo h2,
body.app-moderna .header-formulario-titulo,
body.app-moderna .nota-info,
body.app-moderna .texto-progreso,
body.app-moderna .info-envio,
body.app-moderna .pie-inicial p,
body.app-moderna .paso-nav small,
body.app-moderna .btn,
body.app-moderna .btn-ubicacion-accion {
    overflow-wrap: break-word;
}

body.app-moderna .header-formulario-inner {
    flex-wrap: wrap;
}

body.app-moderna .header-formulario-titulo {
    flex: 1 1 10rem;
}

body.app-moderna .paso-nav small {
    max-width: 100%;
    text-align: center;
}

body.app-moderna .btn,
body.app-moderna .btn-ubicacion-accion,
body.app-moderna .navegacion-wizard .btn,
body.app-moderna .botones-accion button,
body.app-moderna a.btn-ubicacion-accion--opcion-b-calc {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

body.app-moderna .ubicacion-maps-fila-calc,
body.app-moderna .navegacion-wizard,
body.app-moderna .botones-accion {
    flex-wrap: wrap;
}

body.app-moderna .option-buttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

body.app-moderna .imagen-btn {
    position: relative;
    flex: 1 1 auto;
    min-height: 48px;
    justify-content: center;
    text-align: center;
}

body.app-moderna .imagen-btn--galeria i {
    color: #64748b;
}

@media (max-width: 480px) {
    body.app-moderna .imagen-btn {
        flex: 0 0 auto;
        width: 100%;
    }
}

body.app-moderna .imagen-info.hidden,
body.app-moderna .precio-minimo.hidden {
    display: none !important;
}

body.app-moderna .selector-archivo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.app-moderna .imagen-preview-container,
body.app-moderna .imagen-preview,
body.app-moderna .imagen-preview img {
    max-width: 100%;
}

@media (max-width: 900px) {
    body.app-moderna .imagen-preview-container {
        width: 100%;
        max-width: 220px;
        align-self: center;
    }

    body.app-moderna .imagen-preview--compacta {
        width: 100%;
        height: 120px;
    }
}

@media (max-width: 520px) {
    body.app-moderna .header-formulario-titulo {
        font-size: 0.95rem;
    }

    body.app-moderna .logo--compacto,
    body.app-moderna .header-marca--compacta .logo {
        max-width: 84px;
        max-height: 36px;
    }

    body.app-moderna .navegacion-wizard {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Botones: una sola familia, en todas las pantallas. */
body.app-moderna .btn,
body.app-moderna .btn-ubicacion-accion,
body.app-moderna .imagen-btn,
body.app-moderna .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px !important;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 0.9375rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.app-moderna .btn i,
body.app-moderna .btn-ubicacion-accion i,
body.app-moderna .imagen-btn i,
body.app-moderna .modal-footer .btn i {
    flex: 0 0 auto;
    width: 1.1em;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

body.app-moderna .btn-primary::after,
body.app-moderna .btn-comenzar::after,
body.app-moderna #btnSiguiente::after,
body.app-moderna #calcularPresupuesto::after {
    content: none !important;
    display: none !important;
}

/* Nivel 1: una acción principal por pantalla (Comenzar, Siguiente, Ver precio, Capturar). */
body.app-moderna .btn-comenzar,
body.app-moderna #btnSiguiente,
body.app-moderna #calcularPresupuesto,
body.app-moderna #capturarFoto,
body.app-moderna .modal-footer .btn-aceptar {
    background: var(--btn-principal) !important;
    color: #fff !important;
    border: 1.5px solid var(--btn-principal) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, var(--sombra-boton) !important;
}

body.app-moderna .btn-comenzar:hover,
body.app-moderna #btnSiguiente:hover,
body.app-moderna #calcularPresupuesto:hover,
body.app-moderna #capturarFoto:hover,
body.app-moderna .modal-footer .btn-aceptar:hover {
    background: var(--btn-principal-hover) !important;
    border-color: var(--btn-principal-hover) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(27, 122, 58, 0.18) !important;
    transform: translateY(-1px);
}

body.app-moderna .btn-comenzar i,
body.app-moderna #btnSiguiente i,
body.app-moderna #calcularPresupuesto i,
body.app-moderna #capturarFoto i {
    color: #fff !important;
}

/* Nivel 2: confirmar algo dentro del paso (GPS, guardar km). */
body.app-moderna #obtenerUbicacion,
body.app-moderna .btn-ubicacion-accion--opcion-a {
    background: var(--btn-paso-fondo) !important;
    color: var(--btn-paso-texto) !important;
    border: 1.5px solid var(--btn-paso-borde) !important;
    box-shadow: none !important;
}

body.app-moderna #obtenerUbicacion:hover,
body.app-moderna .btn-ubicacion-accion--opcion-a:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: var(--texto) !important;
    transform: translateY(-1px);
}

body.app-moderna #obtenerUbicacion i,
body.app-moderna .btn-ubicacion-accion--opcion-a i {
    color: var(--acento-neutro) !important;
}

body.app-moderna #aplicarKmManual,
body.app-moderna .btn-ubicacion-accion--opcion-b-aplicar {
    background: #fff !important;
    color: var(--btn-contorno) !important;
    border: 2px solid var(--btn-contorno) !important;
    box-shadow: none !important;
    font-weight: 700;
}

body.app-moderna #aplicarKmManual:hover,
body.app-moderna .btn-ubicacion-accion--opcion-b-aplicar:hover {
    background: #f1f5f9 !important;
    border-color: #1e293b !important;
    color: #1e293b !important;
    transform: translateY(-1px);
}

body.app-moderna #aplicarKmManual i,
body.app-moderna .btn-ubicacion-accion--opcion-b-aplicar i {
    color: var(--acento-neutro) !important;
}

/* Herramienta externa: abrir Maps (tono azul, distinto del verde de marca). */
body.app-moderna #calcularRutaMaps,
body.app-moderna a.btn-ubicacion-accion--opcion-b-calc {
    background: var(--btn-maps-fondo) !important;
    color: var(--btn-maps-texto) !important;
    border: 1.5px solid var(--btn-maps-borde) !important;
    box-shadow: none !important;
}

body.app-moderna #calcularRutaMaps:hover,
body.app-moderna a.btn-ubicacion-accion--opcion-b-calc:hover {
    background: #e3eef9 !important;
    border-color: #8ab4d6 !important;
    color: #123d5a !important;
    transform: translateY(-1px);
}

body.app-moderna #calcularRutaMaps i,
body.app-moderna a.btn-ubicacion-accion--opcion-b-calc i {
    color: #2563a8 !important;
}

/* Nivel 3: volver / secundario en la barra del wizard. */
body.app-moderna #btnAnterior,
body.app-moderna .btn-secondary,
body.app-moderna #cancelarFoto,
body.app-moderna .modal-footer .btn-cancelar {
    background: var(--btn-anterior-fondo) !important;
    color: var(--btn-anterior-texto) !important;
    border: 1.5px solid #d2ddd5 !important;
    box-shadow: none !important;
}

body.app-moderna #btnAnterior:hover,
body.app-moderna .btn-secondary:hover,
body.app-moderna #cancelarFoto:hover,
body.app-moderna .modal-footer .btn-cancelar:hover {
    background: #e8eeea !important;
    color: #3d4d44 !important;
    border-color: #bcc9c0 !important;
    transform: translateY(-1px);
}

body.app-moderna #btnAnterior i,
body.app-moderna .btn-secondary i,
body.app-moderna #cancelarFoto i {
    color: #5d6b63 !important;
}

/* Foto: opciones neutras (no compiten con Ver precio). */
body.app-moderna .imagen-btn {
    background: #fafcfb !important;
    color: #1c2b22 !important;
    border: 1.5px solid #dce6df !important;
    box-shadow: none !important;
}

body.app-moderna .imagen-btn:hover {
    background: #f3f7f4 !important;
    border-color: #c5d4cb !important;
    color: #1c2b22 !important;
    transform: translateY(-1px);
}

body.app-moderna .imagen-btn i,
body.app-moderna .imagen-btn--galeria i,
body.app-moderna .imagen-btn--camara i {
    color: #5d6b63 !important;
}

/* Presupuesto: email blanco; imprimir gris utilitario. */
body.app-moderna #enviarEmail {
    background: #fff !important;
    color: #1c2b22 !important;
    border: 1.5px solid #d5e3da !important;
    box-shadow: 0 1px 2px rgba(20, 40, 28, 0.05) !important;
}

body.app-moderna #enviarEmail:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: var(--texto) !important;
}

body.app-moderna #enviarEmail i {
    color: #64748b !important;
}

body.app-moderna #imprimir {
    background: var(--btn-util-fondo) !important;
    color: #4a5c52 !important;
    border: 1.5px solid #ccd6cf !important;
    box-shadow: none !important;
}

body.app-moderna #imprimir:hover {
    background: #e8ecea !important;
    border-color: #b8c4bc !important;
    color: #3d4d44 !important;
}

body.app-moderna #imprimir i {
    color: #6b7f73 !important;
}

body.app-moderna #quitarDistancia {
    background: #fff !important;
    color: #5d6b63 !important;
    border: 1.5px dashed #c5d4cb !important;
    box-shadow: none !important;
}

body.app-moderna #quitarDistancia:hover {
    background: #f8fafc !important;
    color: var(--texto) !important;
    border-color: #94a3b8 !important;
    border-style: solid !important;
}

body.app-moderna #btnVolverInicio,
body.app-moderna #volverFormulario {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: none !important;
    font-weight: 600;
}

body.app-moderna #btnVolverInicio {
    background: #fff !important;
    color: #5d6b63 !important;
    border: 1.5px solid #d5e3da !important;
}

body.app-moderna #btnVolverInicio:hover {
    background: #f5f7f6 !important;
    color: #3d4d44 !important;
    border-color: #c5d4cb !important;
    transform: none;
}

body.app-moderna #btnVolverInicio i {
    color: #6b7f73 !important;
}

body.app-moderna #volverFormulario {
    background: transparent !important;
    color: #5d6b63 !important;
    border: 1.5px solid transparent !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.app-moderna #volverFormulario:hover {
    background: transparent !important;
    color: var(--texto) !important;
    border-color: transparent !important;
    transform: none;
}

body.app-moderna #volverFormulario i {
    color: inherit !important;
}

body.app-moderna #enviarWhatsApp {
    background: var(--btn-whatsapp) !important;
    color: #fff !important;
    border: 1.5px solid var(--btn-whatsapp) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(15, 118, 110, 0.28) !important;
}

body.app-moderna #enviarWhatsApp:hover {
    background: var(--btn-whatsapp-hover) !important;
    border-color: var(--btn-whatsapp-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body.app-moderna #enviarWhatsApp i {
    color: #fff !important;
}

body.app-moderna .btn-sm,
body.app-moderna #quitarDistancia {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
}

body.app-moderna #eliminarImagen {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
    background: #fff !important;
    color: #b42318 !important;
    border: 1.5px solid #f3c7c7 !important;
    box-shadow: none !important;
}

body.app-moderna #eliminarImagen i {
    color: #b42318 !important;
}

body.app-moderna #eliminarImagen:hover {
    background: #fff5f5 !important;
    border-color: #e7a3a3 !important;
    color: #912018 !important;
    transform: none;
}

body.app-moderna button:disabled,
body.app-moderna .btn:disabled,
body.app-moderna .btn-ubicacion-accion:disabled {
    opacity: 0.48;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

body.app-moderna button:focus-visible,
body.app-moderna .btn:focus-visible,
body.app-moderna .imagen-btn:focus-visible,
body.app-moderna a.btn-ubicacion-accion:focus-visible {
    outline: 3px solid #64748b;
    outline-offset: 3px;
}

body.app-moderna .btn:active,
body.app-moderna .btn-ubicacion-accion:active,
body.app-moderna .imagen-btn:active {
    transform: translateY(0) scale(0.985);
}

body.app-moderna .navegacion-wizard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e3ebe6;
    border-radius: 14px;
    box-shadow: var(--sombra-card);
}

body.app-moderna .navegacion-wizard #btnAnterior {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

body.app-moderna .navegacion-wizard #btnSiguiente {
    flex: 1 1 auto;
    width: auto;
    max-width: 280px;
    height: auto;
}

body.app-moderna .navegacion-wizard .boton-calcular {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0;
}

body.app-moderna .navegacion-wizard #calcularPresupuesto {
    flex: 0 0 auto;
    width: auto;
    min-width: 10.5rem;
    max-width: 14rem;
    height: auto;
    min-height: 46px;
}

@media (max-width: 640px) {
    body.app-moderna .navegacion-wizard {
        flex-direction: column;
        align-items: stretch;
    }

    body.app-moderna .navegacion-wizard .btn,
    body.app-moderna .navegacion-wizard .boton-calcular,
    body.app-moderna .navegacion-wizard #btnSiguiente,
    body.app-moderna .navegacion-wizard #btnAnterior,
    body.app-moderna .navegacion-wizard #calcularPresupuesto {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
    }

    body.app-moderna .navegacion-wizard #btnSiguiente,
    body.app-moderna .navegacion-wizard .boton-calcular {
        order: -1;
    }
}

body.app-moderna .btn-comenzar {
    min-height: 48px;
    width: 100%;
    max-width: 280px;
    padding: 12px 20px;
}

@media (min-width: 641px) {
    body.app-moderna .btn,
    body.app-moderna .btn-ubicacion-accion,
    body.app-moderna .imagen-btn {
        min-height: 44px;
        padding: 9px 15px;
    }

    body.app-moderna .navegacion-wizard #btnSiguiente,
    body.app-moderna .navegacion-wizard #calcularPresupuesto {
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    body.app-moderna .btn,
    body.app-moderna .btn-ubicacion-accion,
    body.app-moderna .imagen-btn,
    body.app-moderna .modal-footer .btn {
        min-height: 48px;
        font-size: 0.95rem !important;
    }

    body.app-moderna .container {
        padding: 16px 14px 28px;
    }

    body.app-moderna .navegacion-wizard #btnSiguiente {
        max-width: none;
    }
}

/* Cierre del presupuesto: acciones, notas y firma en un solo bloque. */
body.app-moderna #seccionPresupuesto .botones-accion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0 0;
}

body.app-moderna #seccionPresupuesto .botones-accion .btn {
    min-height: 44px;
}

body.app-moderna #seccionPresupuesto #enviarWhatsApp {
    font-weight: 700;
}

body.app-moderna #seccionPresupuesto .botones-accion button {
    width: 100%;
    margin: 0;
}

body.app-moderna #seccionPresupuesto #enviarWhatsApp,
body.app-moderna #seccionPresupuesto #volverFormulario {
    grid-column: 1 / -1;
}

body.app-moderna #seccionPresupuesto #volverFormulario {
    justify-self: center;
    width: auto;
    margin-top: 2px;
}

body.app-moderna #seccionPresupuesto .pie-presupuesto {
    margin-top: 18px;
}

body.app-moderna #seccionPresupuesto .notas-pie {
    display: grid;
    margin: 0;
    padding: 2px 16px;
    background: #f7faf8;
    border: 1px solid #e3ebe6;
    border-radius: 16px;
}

body.app-moderna #seccionPresupuesto .notas-pie > * {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 0;
    border: 0 !important;
    border-bottom: 1px solid #e3ebe6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3d4d44 !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

body.app-moderna #seccionPresupuesto .notas-pie > *:last-child {
    border-bottom: 0 !important;
}

body.app-moderna #seccionPresupuesto .notas-pie i {
    flex: 0 0 auto;
    width: 1.1em;
    margin: 3px 0 0;
    color: #64748b;
    text-align: center;
}

body.app-moderna #seccionPresupuesto #notaDisponibilidad::before,
body.app-moderna #seccionPresupuesto #notaAgenda::before {
    flex: 0 0 auto;
    width: 1.1em;
    margin-top: 2px;
    color: #64748b;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    text-align: center;
}

body.app-moderna #seccionPresupuesto #notaDisponibilidad::before {
    content: "\f073";
}

body.app-moderna #seccionPresupuesto #notaDisponibilidad.alta-demanda::before {
    color: #b86e00;
}

body.app-moderna #seccionPresupuesto #notaAgenda::before {
    content: "\f017";
}

body.app-moderna #seccionPresupuesto .despedida {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    text-align: center;
    color: #5d6b63;
}

body.app-moderna #seccionPresupuesto .despedida p {
    margin: 0;
}

body.app-moderna #seccionPresupuesto .despedida .firma {
    margin-top: 6px;
    color: var(--texto);
    font-weight: 700;
    letter-spacing: 0.03em;
}

@media (max-width: 640px) {
    body.app-moderna #seccionPresupuesto .botones-accion {
        grid-template-columns: 1fr;
    }
}

/* --- Responsive: móvil, tablet, escritorio y pantallas grandes --- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.app-moderna {
    overflow-x: clip;
    min-height: 100dvh;
}

body.app-moderna img,
body.app-moderna video,
body.app-moderna svg {
    max-width: 100%;
    height: auto;
}

body.app-moderna #contenido-principal {
    min-width: 0;
}

/* Gana a styles.css (flex en móvil) y mantiene rejilla en app-moderna */
body.app-moderna .form-grid {
    display: grid !important;
    width: 100%;
    flex-direction: unset !important;
}

@media (max-width: 768px) {
    body.app-moderna {
        --padding-app-x: 14px;
        --padding-app-y: 16px;
    }

    body.app-moderna .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    body.app-moderna .form-grid .form-group {
        width: auto !important;
        grid-column: auto !important;
        grid-area: unset !important;
    }

    body.app-moderna .estado-cesped-fila-principal {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    body.app-moderna .imagen-preview-container {
        width: 100%;
        max-width: none;
    }

    body.app-moderna .ubicacion-maps-fila-calc {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.app-moderna .ubicacion-maps-fila-calc #calcularRutaMaps,
    body.app-moderna .ubicacion-maps-fila-calc a.btn-ubicacion-accion--opcion-b-calc {
        width: 100%;
    }

    body.app-moderna .navegacion-wizard {
        position: sticky;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        z-index: 25;
    }

    body.app-moderna .header-formulario-inner {
        gap: 8px;
    }

    body.app-moderna #btnVolverInicio {
        flex: 0 0 auto;
        max-width: 100%;
    }

    body.app-moderna .header-formulario-titulo {
        min-width: 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.app-moderna .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 901px) {
    body.app-moderna .navegacion-wizard {
        position: static;
        bottom: auto;
    }
}

@media (min-width: 1025px) {
    body.app-moderna .container {
        padding-top: max(24px, env(safe-area-inset-top, 0px));
    }

    body.app-moderna .pagina-inicial .header-inicial .logo-container {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    body.app-moderna .pasos-nav {
        gap: 4px;
    }

    body.app-moderna .paso-nav {
        font-size: 0.72rem;
    }

    body.app-moderna .paso-nav span {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }

    body.app-moderna .seccion-titulo h2,
    body.app-moderna #presupuestoForm .seccion-titulo h2 {
        font-size: 1.12rem;
    }

    body.app-moderna .intro-flujo {
        padding: 16px 14px 8px;
    }

    body.app-moderna .btn-comenzar {
        max-width: none;
    }
}

@media (max-width: 360px) {
    body.app-moderna .paso-nav small {
        font-size: 0.6rem;
        letter-spacing: -0.02em;
    }

    body.app-moderna .header-formulario-titulo {
        font-size: 0.82rem;
    }
}

@media (min-width: 769px) {
    .app-moderna {
        --ancho-app: 840px;
    }
}

@media (min-width: 1024px) {
    .app-moderna {
        --ancho-app: 960px;
    }

    body.app-moderna .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px;
    }

    body.app-moderna .form-grid .form-group:nth-child(4),
    body.app-moderna .form-grid .form-group:nth-child(5),
    body.app-moderna .form-grid .form-group:nth-child(6) {
        grid-column: span 1;
    }
}

@media (min-width: 1280px) {
    .app-moderna {
        --ancho-app: 1040px;
    }
}