/* =========================================================
   SCRATLOOP DIGITAL
   FORMULARIO DE COTIZACIÓN
   RESPONSIVE / LIMPIO / SIN ALTERAR EL DISEÑO
   OPTIMIZADO DESDE MÓVIL HASTA 4K
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #00C8FF;
    --secondary: #2563FF;
    --accent: #8B3DFF;

    --bg: #050816;
    --bg-deep: #020617;

    --surface: #0F172A;
    --surface-light: #1E293B;

    --text: #F8FAFC;
    --text-muted: #B8C5D6;
    --text-soft: #CBD5E1;

    --success: #10B981;
    --danger: #EF4444;


    /* =====================================================
       DEGRADADO GENERAL
    ====================================================== */

    --gradient:
        linear-gradient(
            90deg,
            #00C8FF 0%,
            #2563FF 50%,
            #8B3DFF 100%
        );


    /* =====================================================
       DEGRADADO DE TÍTULOS
       CONSERVADO EXACTAMENTE
    ====================================================== */

    --blog-gradient:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 15%,

            #bff7ff 22%,
            #00c8ff 30%,
            #00c8ff 35%,

            #9b6cff 45%,
            #8b3dff 50%,

            #ffffff 62%,
            #ffffff 70%,

            #bff7ff 77%,
            #00c8ff 84%,

            #8b3dff 94%,

            #ffffff 100%
        );


    --gradient-soft:
        linear-gradient(
            135deg,
            rgba(0, 200, 255, .15),
            rgba(37, 99, 255, .10),
            rgba(139, 61, 255, .15)
        );


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

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


    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;


    --shadow-md:
        0 15px 40px rgba(0, 0, 0, .25);

    --shadow-glow:
        0 0 35px rgba(0, 200, 255, .25);


    --font-main:
        "Inter",
        sans-serif;

    --font-heading:
        "Space Grotesk",
        sans-serif;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    width: 100%;

    max-width: 100%;

}


body {

    min-height: 100vh;

    width: 100%;

    max-width: 100%;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(0, 200, 255, .07),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(139, 61, 255, .08),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family: var(--font-main);

    line-height: 1.6;

    overflow-x: hidden;

}


/* =========================================================
   CONTAINER
   RESPONSIVE DESDE MÓVIL HASTA 4K
========================================================= */

.quote-container {

    width:
        min(
            calc(100% - 40px),
            1100px
        );

    margin-inline: auto;

    min-width: 0;

}


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

.quote-header {

    height: 90px;

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

    background:
        rgba(5, 8, 22, .85);

    backdrop-filter:
        blur(18px);

    position: sticky;

    top: 0;

    z-index: 100;

}


.quote-header .quote-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-width: 0;

}


.quote-logo img {

    width: 180px;

    max-width: 100%;

    height: auto;

    display: block;

}


.back-link {

    color: var(--text-muted);

    text-decoration: none;

    font-size: 14px;

    transition: .3s ease;

    white-space: nowrap;

}


.back-link:hover {

    color: var(--primary);

}


/* =========================================================
   MAIN
========================================================= */

.quote-main {

    padding:
        clamp(110px, 10vw, 170px)
        0
        clamp(80px, 8vw, 120px);

}


/* =========================================================
   INTRO
========================================================= */

.quote-intro {

    width: 100%;

    max-width: 760px;

    margin:
        0 auto
        clamp(40px, 5vw, 60px);

    text-align: center;

}


.section-label {

    display: inline-flex;

    padding:
        7px 16px;

    border:
        1px solid
        rgba(0, 200, 255, .25);

    border-radius: 999px;

    background:
        rgba(0, 200, 255, .06);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .04em;

}


/* =========================================================
   TÍTULO PRINCIPAL
   DEGRADADO CONSERVADO
========================================================= */

.quote-intro h1 {

    margin-top: 22px;

    font-family: var(--font-heading);

    font-size:
        clamp(
            42px,
            3.8vw,
            72px
        );

    line-height: 1.05;

    letter-spacing: -.045em;

    background:
        var(--blog-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    background-size: 100% 100%;

    overflow-wrap: break-word;

}


.quote-intro p {

    width: 100%;

    max-width: 680px;

    margin:
        24px auto 0;

    color: var(--text-soft);

    font-size:
        clamp(
            15px,
            1.05vw,
            18px
        );

}


/* =========================================================
   WHATSAPP INTRODUCCIÓN
========================================================= */

.quote-whatsapp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 18px;

    color: var(--text-soft);

    font-size: 14px;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.quote-whatsapp i {

    color: var(--primary);

    font-size: 17px;

}


.quote-whatsapp strong {

    color: #FFFFFF;

    font-weight: 600;

}


.quote-whatsapp:hover {

    color: var(--primary);

    transform:
        translateY(-2px);

}


.quote-whatsapp:hover strong {

    color: var(--primary);

}


/* =========================================================
   FORM
========================================================= */

.quote-form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap:
        clamp(
            24px,
            2vw,
            30px
        );

}


/* =========================================================
   FORM SECTION
========================================================= */

.form-section {

    width: 100%;

    padding:
        clamp(
            25px,
            2.5vw,
            35px
        );

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

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .9),
            rgba(15, 23, 42, .62)
        );

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .20);

    min-width: 0;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    margin-bottom: 30px;

    min-width: 0;

}


.step-number {

    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        var(--gradient);

    color: white;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 14px;

    box-shadow:
        0 0 25px
        rgba(0, 200, 255, .18);

}


.section-heading h2 {

    font-family: var(--font-heading);

    font-size:
        clamp(
            20px,
            1.5vw,
            24px
        );

    line-height: 1.2;

    overflow-wrap: break-word;

}


.section-heading p {

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 14px;

}


/* =========================================================
   PROJECT OPTIONS
========================================================= */

.option-grid {

    display: grid;

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

    gap: 15px;

    min-width: 0;

}


.option-card {

    position: relative;

    cursor: pointer;

    min-width: 0;

}


.option-card input {

    position: absolute;

    opacity: 0;

}


.option-content {

    min-height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;

    padding: 22px;

    border:
        3px solid
        transparent;

    border-radius:
        var(--radius-md);

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

    transition:
        .3s ease;

    min-width: 0;

}


.option-icon {

    font-size: 28px;

    margin-bottom: 5px;

}


.option-content strong {

    font-size: 16px;

    overflow-wrap: break-word;

}


.option-content small {

    color: var(--text-muted);

    font-size: 13px;

    overflow-wrap: break-word;

}


/* =========================================================
   HOVER PROJECT OPTIONS
========================================================= */

.option-card:hover .option-content {

    border-color:
        var(--primary);

    transform:
        translateY(-3px);

    box-shadow:
        0 0 25px
        rgba(0, 200, 255, .18);

}


/* =========================================================
   PROJECT OPTION SELECTED
========================================================= */

.option-card input:checked
+ .option-content {

    border-color:
        var(--primary);

    background:
        linear-gradient(
            135deg,
            rgba(0, 200, 255, .10),
            rgba(37, 99, 255, .08),
            rgba(139, 61, 255, .08)
        );

    box-shadow:
        0 0 30px
        rgba(0, 200, 255, .10);

}


/* =========================================================
   CHECKBOXES
========================================================= */

.checkbox-grid {

    display: grid;

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

    gap: 12px;

    min-width: 0;

}


.check-card {

    cursor: pointer;

    min-width: 0;

}


.check-card input {

    position: absolute;

    opacity: 0;

}


.check-card span {

    min-height: 58px;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        3px solid
        transparent;

    border-radius:
        var(--radius-sm);

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

    color: var(--text-soft);

    font-size: 14px;

    transition:
        .25s ease;

    min-width: 0;

}


.check-card span b {

    color: var(--primary);

    font-size: 16px;

    flex: 0 0 auto;

}


/* =========================================================
   HOVER CHECKBOXES
========================================================= */

.check-card:hover span {

    border-color:
        var(--primary);

    color:
        var(--text);

    box-shadow:
        0 0 20px
        rgba(0, 200, 255, .12);

}


/* =========================================================
   CHECKBOX SELECTED
========================================================= */

.check-card input:checked
+ span {

    border-color:
        var(--primary);

    color:
        var(--text);

    background:
        rgba(0, 200, 255, .08);

    box-shadow:
        inset 0 0 20px
        rgba(0, 200, 255, .03);

}


/* =========================================================
   HOSTING
========================================================= */

.hosting-options {

    display: grid;

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

    gap: 12px;

    min-width: 0;

}


.hosting-card {

    cursor: pointer;

    min-width: 0;

}


.hosting-card input {

    position: absolute;

    opacity: 0;

}


.hosting-card span {

    display: flex;

    align-items: center;

    min-height: 62px;

    padding:
        15px 18px;

    border:
        3px solid
        transparent;

    border-radius:
        var(--radius-sm);

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

    color: var(--text-soft);

    font-size: 14px;

    transition:
        .25s ease;

    min-width: 0;

}


/* =========================================================
   HOVER HOSTING
========================================================= */

.hosting-card:hover span {

    border-color:
        var(--primary);

    color:
        var(--text);

    box-shadow:
        0 0 20px
        rgba(0, 200, 255, .12);

}


/* =========================================================
   HOSTING SELECTED
========================================================= */

.hosting-card input:checked
+ span {

    border-color:
        var(--primary);

    color:
        white;

    background:
        rgba(0, 200, 255, .08);

}


/* =========================================================
   CONTACT FORM
========================================================= */

.form-grid {

    display: grid;

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

    gap: 20px;

    margin-bottom: 20px;

    min-width: 0;

}


.field {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;

    min-width: 0;

}


.field label {

    color: var(--text-soft);

    font-size: 14px;

    font-weight: 500;

}


.field input,
.field textarea {

    width: 100%;

    max-width: 100%;

    padding:
        15px 17px;

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

    border-radius:
        var(--radius-sm);

    outline: none;

    background:
        rgba(2, 6, 23, .55);

    color: white;

    font-family: inherit;

    font-size: 15px;

    transition:
        .25s ease;

}


.field textarea {

    resize: vertical;

    min-height: 140px;

}


.field input::placeholder,
.field textarea::placeholder {

    color:
        rgba(148, 163, 184, .55);

}


.field input:focus,
.field textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(0, 200, 255, .08);

}


/* =========================================================
   CONSENT
========================================================= */

.consent {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        10px 0 25px;

    color: var(--text-muted);

    font-size: 13px;

    cursor: pointer;

}


.consent input {

    accent-color:
        var(--primary);

    margin-top: 4px;

    flex: 0 0 auto;

}


/* =========================================================
   BUTTON
========================================================= */

.submit-button {

    width: 100%;

    padding:
        17px 25px;

    border: none;

    border-radius:
        var(--radius-md);

    background:
        var(--gradient);

    color: white;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 12px 35px
        rgba(0, 200, 255, .20);

    transition:
        .3s ease;

}


.submit-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 45px
        rgba(0, 200, 255, .30);

}


.submit-button:disabled {

    opacity: .6;

    cursor: wait;

    transform: none;

}


/* =========================================================
   FORM NOTE
========================================================= */

.form-note {

    margin-top: 18px;

    text-align: center;

    color: var(--text-muted);

    font-size: 12px;

}


/* =========================================================
   MENSAJES
========================================================= */

.form-message {

    display: none;

    padding:
        15px 18px;

    margin-bottom: 18px;

    border-radius:
        var(--radius-sm);

    font-size: 14px;

}


.form-message.success {

    display: block;

    color: #6EE7B7;

    border:
        1px solid
        rgba(16, 185, 129, .25);

    background:
        rgba(16, 185, 129, .08);

}


.form-message.error {

    display: block;

    color: #FCA5A5;

    border:
        1px solid
        rgba(239, 68, 68, .25);

    background:
        rgba(239, 68, 68, .08);

}


/* =========================================================
   FOOTER — REDES SOCIALES
========================================================= */

.footer-social {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    margin-bottom: 22px;

}


.footer-social a {

    width: 48px;

    height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition:
        transform .25s ease,
        filter .25s ease;

}


/* =========================================================
   FACEBOOK
========================================================= */

.footer-social .social-facebook {

    border-radius: 13px;

    position: relative;

}


.footer-social .social-facebook i {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    font-size: 1.65rem;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #bff7ff 22%,
            #00c8ff 40%,
            #9b6cff 60%,
            #8b3dff 80%,
            #ffffff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}


/* =========================================================
   INSTAGRAM
========================================================= */

.footer-social .social-instagram i {

    font-size: 2.25rem;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #bff7ff 22%,
            #00c8ff 40%,
            #9b6cff 60%,
            #8b3dff 80%,
            #ffffff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}


/* =========================================================
   WHATSAPP
========================================================= */

.footer-social .social-whatsapp i {

    font-size: 2.25rem;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #bff7ff 22%,
            #00c8ff 40%,
            #9b6cff 60%,
            #8b3dff 80%,
            #ffffff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}


/* =========================================================
   HOVER SOCIAL
========================================================= */

.footer-social a:hover {

    transform:
        translateY(-4px);

    filter:
        drop-shadow(
            0 0 10px
            rgba(0, 200, 255, .30)
        );

}


/* =========================================================
   4K / ULTRA WIDE
   1920px+
   
   NO CAMBIA EL DISEÑO.
   SOLAMENTE PERMITE QUE EL CONTENIDO APROVECHE
   MEJOR EL ESPACIO DISPONIBLE.
========================================================= */

@media (min-width: 1600px) {

    .quote-container {

        width:
            min(
                calc(100% - 80px),
                1320px
            );

    }


    .quote-intro {

        max-width: 900px;

    }


    .quote-intro h1 {

        font-size:
            clamp(
                60px,
                3.4vw,
                78px
            );

    }


    .quote-intro p {

        font-size:
            clamp(
                17px,
                1vw,
                19px
            );

    }


    .form-section {

        padding:
            clamp(
                35px,
                2vw,
                45px
            );

    }

}


/* =========================================================
   1920px+
========================================================= */

@media (min-width: 1920px) {

    .quote-container {

        width:
            min(
                calc(100% - 120px),
                1450px
            );

    }


    .quote-main {

        padding-top:
            clamp(
                150px,
                8vw,
                190px
            );

    }


    .quote-intro {

        max-width: 1000px;

        margin-bottom: 70px;

    }


    .quote-intro h1 {

        font-size:
            clamp(
                68px,
                3.2vw,
                88px
            );

    }


    .quote-intro p {

        max-width: 780px;

        font-size: 18px;

    }


    .section-heading h2 {

        font-size: 26px;

    }


    .option-content {

        min-height: 130px;

    }


    .field input,
    .field textarea {

        font-size: 16px;

    }

}


/* =========================================================
   2560px+
========================================================= */

@media (min-width: 2560px) {

    .quote-container {

        width:
            min(
                calc(100% - 160px),
                1550px
            );

    }


    .quote-intro h1 {

        font-size:
            clamp(
                76px,
                3vw,
                96px
            );

    }


    .quote-intro p {

        font-size: 19px;

    }


    .form-section {

        padding: 45px;

    }

}


/* =========================================================
   3840px — 4K
========================================================= */

@media (min-width: 3840px) {

    .quote-container {

        width:
            min(
                calc(100% - 200px),
                1650px
            );

    }


    .quote-intro {

        max-width: 1100px;

    }


    .quote-intro h1 {

        font-size: 96px;

    }


    .quote-intro p {

        max-width: 820px;

        font-size: 20px;

    }


    .form-section {

        padding: 48px;

    }


    .section-heading {

        gap: 20px;

        margin-bottom: 35px;

    }


    .section-heading h2 {

        font-size: 28px;

    }


    .option-content {

        min-height: 140px;

        padding: 25px;

    }


    .option-content strong {

        font-size: 17px;

    }


    .option-content small {

        font-size: 14px;

    }


    .field input,
    .field textarea {

        font-size: 16px;

    }


    .submit-button {

        font-size: 17px;

        padding:
            18px 28px;

    }

}


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

@media (max-width: 800px) {

    .quote-main {

        padding:
            160px 0 80px;

    }


    .quote-container {

        width:
            calc(100% - 40px);

    }


    .option-grid,
    .checkbox-grid,
    .hosting-options,
    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-section {

        padding:
            25px 20px;

        border-radius:
            20px;

    }


    .section-heading h2 {

        font-size: 20px;

    }


    .quote-intro {

        margin-bottom: 40px;

    }


    .quote-intro h1 {

        font-size:
            clamp(
                42px,
                8vw,
                58px
            );

    }


    .quote-intro p {

        font-size: 15px;

    }


    .quote-header {

        height: 75px;

    }


    .quote-logo img {

        width: 145px;

    }


    .back-link {

        font-size: 12px;

    }

}


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

@media (max-width: 500px) {

    .quote-main {

        padding:
            135px 0 65px;

    }


    .quote-container {

        width:
            calc(100% - 25px);

    }


    .quote-intro h1 {

        font-size:
            clamp(
                38px,
                11vw,
                48px
            );

        line-height: 1.05;

    }


    .quote-intro p {

        font-size: 15px;

    }


    .footer-social {

        gap: 20px;

    }


    .footer-social a {

        width: 44px;

        height: 44px;

    }


    .footer-social .social-facebook i {

        font-size: 1.5rem;

    }


    .footer-social .social-instagram i,
    .footer-social .social-whatsapp i {

        font-size: 2rem;

    }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .quote-container {

        width:
            calc(100% - 25px);

    }


    .quote-intro h1 {

        font-size: 42px;

    }


    .section-heading {

        gap: 12px;

    }


    .step-number {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

        border-radius: 11px;

        font-size: 12px;

    }


    .section-heading p {

        font-size: 13px;

    }


    .form-section {

        padding:
            22px 16px;

    }


    .option-content {

        padding: 18px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .quote-main {

        padding:
            120px 0 55px;

    }


    .quote-container {

        width:
            calc(100% - 20px);

    }


    .quote-intro h1 {

        font-size: 38px;

    }


    .quote-intro p {

        font-size: 14px;

    }


    .form-section {

        padding:
            20px 14px;

    }


    .section-heading {

        gap: 10px;

    }


    .section-heading h2 {

        font-size: 18px;

    }


    .step-number {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

    }

}


/* =========================================================
   EXTRA SAFETY
========================================================= */

img,
video,
canvas,
svg {

    max-width: 100%;

}


h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
a {

    max-width: 100%;

    overflow-wrap: break-word;

}


input,
textarea,
button,
select {

    max-width: 100%;

}


.option-grid > *,
.checkbox-grid > *,
.hosting-options > *,
.form-grid > * {

    min-width: 0;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    .option-content,
    .check-card span,
    .hosting-card span,
    .submit-button,
    .quote-whatsapp,
    .footer-social a {

        transition: none !important;

    }

}