/* =========================================
   EMP - FORMULARIO DE COTIZACIÓN
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199, 152, 59, .08),
            transparent 35%
        ),
        #080808;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================
   HEADER
========================================= */

.form-header {
    width: 100%;
    min-height: 66px;

    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: #0c0c0c;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.form-header a {
    color: #c7983b;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .8px;

    text-decoration: none;
}


.form-header a:hover {
    color: #e2bd70;
}


.form-header div {
    color: rgba(255,255,255,.70);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


/* =========================================
   CONTENEDOR
========================================= */

.emp-form-page {
    width: min(1100px, calc(100% - 40px));

    margin: 0 auto;

    padding: 65px 0 90px;
}


/* =========================================
   TÍTULO
========================================= */

.emp-form-heading {
    max-width: 760px;

    margin-bottom: 40px;
}


.emp-form-heading > span {
    display: block;

    margin-bottom: 12px;

    color: #c7983b;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 3px;
}


.emp-form-heading h1 {
    margin: 0;

    font-size:
        clamp(38px, 5vw, 60px);

    line-height: 1;

    letter-spacing: -2px;
}


.emp-form-heading p {
    max-width: 650px;

    margin: 18px 0 0;

    color: rgba(255,255,255,.62);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================
   CAJAS
========================================= */

.form-box {
    margin-bottom: 18px;

    padding: 30px 32px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 7px;
}


.form-box h2 {
    margin: 0 0 27px;

    display: flex;
    align-items: center;

    gap: 11px;

    font-size: 20px;
    font-weight: 800;
}


.form-box h2 > span {
    color: #c7983b;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   GRID
========================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 18px;
}


/* =========================================
   CAMPOS
========================================= */

.field {
    min-width: 0;
}


.field label {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.78);

    font-size: 12px;
    font-weight: 700;
}


.field input,
.field select,
.field textarea {
    width: 100%;

    min-height: 46px;

    padding: 0 13px;

    background: #0b0b0b;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 4px;

    outline: none;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.field textarea {
    min-height: 140px;

    padding: 13px;

    resize: vertical;

    line-height: 1.55;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #c7983b;

    box-shadow:
        0 0 0 3px
        rgba(199,152,59,.10);
}


.field input::placeholder,
.field textarea::placeholder {
    color: rgba(255,255,255,.30);
}


.field select {
    cursor: pointer;
}


.field select option {
    background: #111111;

    color: #ffffff;
}


.field select:disabled {
    opacity: .48;

    cursor: not-allowed;
}


.field input[type="date"] {
    color-scheme: dark;
}


/* =========================================
   EMPRESA
========================================= */

.empresa-field {
    display: none;
}


.empresa-field.emp-visible {
    display: block;
}


/* =========================================
   SERVICIO PRESELECCIONADO
========================================= */

.servicio-preseleccionado {
    margin: 0 0 24px;

    padding: 18px 20px;

    background:
        rgba(199,152,59,.10);

    border:
        1px solid rgba(199,152,59,.45);

    border-radius: 5px;
}


.servicio-preseleccionado > span {
    display: block;

    margin-bottom: 7px;

    color: #c7983b;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.servicio-preseleccionado strong {
    display: block;

    color: #ffffff;

    font-size: 20px;
}


.servicio-preseleccionado p {
    margin: 6px 0 0;

    color: rgba(255,255,255,.65);

    font-size: 13px;
}


/* =========================================
   SERVICIOS
========================================= */

.servicios {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.servicio {
    min-height: 56px;

    padding: 12px 14px;

    display: flex;
    align-items: center;

    gap: 10px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 4px;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.servicio:hover {
    background:
        rgba(199,152,59,.07);

    border-color:
        rgba(199,152,59,.55);

    transform:
        translateY(-1px);
}


.servicio-activo {
    background:
        rgba(199,152,59,.12);

    border-color: #c7983b;
}


.servicio input {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    margin: 0;

    accent-color: #c7983b;

    cursor: pointer;
}


.servicio > span {
    color: rgba(255,255,255,.84);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================
   COMPLEMENTOS
========================================= */

.emp-complementos {
    margin-top: 32px;

    padding-top: 28px;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.emp-complementos-heading > span {
    color: #c7983b;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.emp-complementos-heading h3 {
    margin: 7px 0 0;

    color: #ffffff;

    font-size: 22px;
}


.emp-complementos-heading p {
    margin: 7px 0 0;

    color: rgba(255,255,255,.60);

    font-size: 13px;
}


.emp-complementos-grid {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.emp-complemento {
    min-height: 105px;

    padding: 16px;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 5px;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.emp-complemento:hover {
    background:
        rgba(199,152,59,.07);

    border-color:
        rgba(199,152,59,.55);

    transform:
        translateY(-1px);
}


.emp-complemento input {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    margin-top: 3px;

    accent-color: #c7983b;
}


.emp-complemento > span {
    display: block;
}


.emp-complemento strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
}


.emp-complemento small {
    display: block;

    margin-top: 6px;

    color: rgba(255,255,255,.58);

    font-size: 11px;

    line-height: 1.45;
}


/* =========================================
   BOTONES
========================================= */

.form-send {
    margin-top: 30px;

    display: flex;
    align-items: center;

    gap: 22px;
}


.form-send button {
    min-height: 54px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    background: #c7983b;

    border: 1px solid #c7983b;

    border-radius: 4px;

    color: #080808;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .8px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.form-send button span {
    font-size: 19px;
}


.form-send button:hover {
    background: #dfb04e;

    transform:
        translateY(-2px);
}


.form-send button:disabled {
    opacity: .65;

    cursor: wait;

    transform: none;
}


.form-send .cancelar {
    color: rgba(255,255,255,.60);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


.form-send .cancelar:hover {
    color: #ffffff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .servicios {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 650px) {

    .form-header {
        min-height: 58px;

        padding: 0 15px;
    }


    .form-header a {
        font-size: 10px;
    }


    .form-header div {
        max-width: 150px;

        font-size: 9px;

        line-height: 1.3;

        text-align: right;
    }


    .emp-form-page {
        width: calc(100% - 24px);

        padding: 38px 0 60px;
    }


    .emp-form-heading {
        margin-bottom: 30px;
    }


    .emp-form-heading h1 {
        font-size: 38px;

        letter-spacing: -1.3px;
    }


    .emp-form-heading p {
        font-size: 13px;
    }


    .form-box {
        margin-bottom: 10px;

        padding: 23px 17px 25px;
    }


    .form-box h2 {
        margin-bottom: 22px;

        font-size: 18px;
    }


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

        gap: 16px;
    }


    .servicios {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }


    .servicio {
        min-height: 54px;

        padding: 10px 11px;
    }


    .servicio > span {
        font-size: 11px;
    }


    .emp-complementos-grid {
        grid-template-columns: 1fr;

        gap: 7px;
    }


    .emp-complemento {
        min-height: auto;

        padding: 14px 13px;
    }


    .form-send {
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }


    .form-send button {
        width: 100%;
    }


    .form-send .cancelar {
        padding: 5px;

        text-align: center;
    }

}


@media (max-width: 380px) {

    .servicios {
        grid-template-columns: 1fr;
    }


    .emp-form-heading h1 {
        font-size: 34px;
    }

}

/* =========================================
   BOTÓN REGRESAR FLOTANTE
========================================= */

.form-regresar-flotante {
    position: fixed;

    top: 85px;
    left: 22px;

    z-index: 100;

    min-height: 42px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    background: #c7983b;

    border: 1px solid #c7983b;
    border-radius: 3px;

    color: #080808;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .8px;

    text-decoration: none;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .35);

    transition:
        background .2s ease,
        transform .2s ease;
}


.form-regresar-flotante span {
    color: #080808;

    font-size: 18px;
}


.form-regresar-flotante:hover {
    background: #dfb04e;

    transform: translateX(-3px);
}


/* CELULAR */

@media (max-width: 650px) {

    .form-regresar-flotante {
        top: 70px;
        left: 12px;

        min-height: 38px;

        padding: 0 12px;

        font-size: 10px;
    }

}





/* =========================================
   TEMA CLARO EMP - 2026
   Mantiene la estructura responsive original
========================================= */

html {
    background: #f5f3ee;
}

body {
    background:
        radial-gradient(circle at top right, rgba(199,152,59,.10), transparent 35%),
        #f5f3ee;
    color: #242424;
}

.form-header {
    background: #ffffff;
    border-bottom: 1px solid #ded9cf;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.form-header div { color: #555555; }
.form-header a { color: #9a6e1d; }
.form-header a:hover { color: #6f4e12; }

.emp-form-heading h1 { color: #202020; }
.emp-form-heading p { color: #666666; }

.form-box {
    background: #ffffff;
    border: 1px solid #ddd8ce;
    box-shadow: 0 5px 18px rgba(0,0,0,.035);
}

.form-box h2 { color: #242424; }
.field label { color: #444444; }

.field input,
.field select,
.field textarea {
    background: #fbfaf7;
    border: 1px solid #d4cec2;
    color: #242424;
}

.field input::placeholder,
.field textarea::placeholder { color: #999999; }
.field select option { background: #ffffff; color: #242424; }
.field select:disabled { background: #efede8; color: #777777; }
.field input[type="date"] { color-scheme: light; }

.servicio-preseleccionado {
    background: #fbf5e8;
    border-color: #d7b56d;
}
.servicio-preseleccionado strong { color: #242424; }
.servicio-preseleccionado p { color: #666666; }

.servicio {
    background: #fbfaf7;
    border-color: #ddd8ce;
}
.servicio:hover,
.servicio-activo {
    background: #fbf5e8;
    border-color: #c7983b;
}
.servicio > span { color: #333333; }

.emp-complementos { border-top-color: #ddd8ce; }
.emp-complementos-heading h3 { color: #242424; }
.emp-complementos-heading p { color: #666666; }
.emp-complemento { background: #fbfaf7; border-color: #ddd8ce; }
.emp-complemento:hover { background: #fbf5e8; border-color: #c7983b; }
.emp-complemento strong { color: #242424; }
.emp-complemento small { color: #666666; }

.form-send .cancelar { color: #666666; }
.form-send .cancelar:hover { color: #222222; }

.form-regresar-flotante {
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
}