@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&display=swap');

html,
body {

    width: 100%;

    margin: 0;
    padding: 0;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: #050505;
    color: #fff;
    font-family: 'Oswald', sans-serif;
}


/* SCROLL */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #e30613;
    border-radius: 20px;
}


/* CONTAINER */

.container {
    width: 100%;
    max-width: 1900px;
    margin: auto;
}


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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: rgba(0, 0, 0, .96);
    backdrop-filter: blur(10px);
    z-index: 999;
    border-bottom: 1px solid rgba(255, 0, 0, .35);
}

.header-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
}

.logo {
    width: 85px;
    display: block;
}

.desktop-nav {
    margin-left: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 55px;
}

.nav a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: .3s;
    position: relative;
}

.nav a:hover,
.nav a.active {
    color: #ffb800;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0%;
    height: 2px;
    background: #e30613;
    transition: .3s;
}

.nav a:hover::after {
    width: 100%;
}


/* ================= HERO ================= */

.hero {
    padding-top: 170px;
    padding-bottom: 50px;

    background:
        radial-gradient(circle at left,
            rgba(180, 0, 0, .35),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 0, 0, .18),
            transparent 35%),

        linear-gradient(90deg,
            #250000 0%,
            #000000 35%,
            #000000 65%,
            #4d0000 100%);

    position: relative;
    overflow: hidden;
}

.hero-container {
    width: 100%;
    padding: 0 40px;
}


/* ================= BANNER ================= */

.hero-banner {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-banner img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 35px;

    object-fit: contain;

    max-height: calc(100vh - 120px);
}


/* ================= CONTACTO ================= */

.contacto-rapido {
    padding: 40px;
    background: #000;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 75% 25%;
    align-items: center;
    gap: 40px;
    max-width: 1900px;
    margin: auto;
}

.contacto-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contacto-img img {
    width: 100%;
    border-radius: 28px;
    display: block;

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


/* ================= PANEL ================= */

.contacto-panel {
    background:
        linear-gradient(180deg,
            rgba(20, 20, 20, .98),
            rgba(5, 5, 5, .98));

    padding: 40px;
    border-radius: 28px;
    border: 1px solid #1f1f1f;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .4);
}

.panel-tag {
    display: inline-block;

    background: #e30613;
    color: white;

    padding: 10px 18px;

    border-radius: 50px;

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

    margin-bottom: 25px;
}

.contacto-panel h2 {
    font-family: 'Anton', sans-serif;
    font-size: 58px;
    line-height: .95;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contacto-panel p {
    color: #cfcfcf;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}


/* FEATURES */

.panel-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 30px;
}

.panel-feature {
    background: #111;
    border: 1px solid #222;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
}


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

.pedido-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pedido-form input,
.pedido-form select,
.pedido-form textarea {
    width: 100%;
    background: #111;
    border: 1px solid #222;
    padding: 16px;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: .3s;
}

.pedido-form textarea {
    height: 140px;
    resize: none;
}

.pedido-form input:focus,
.pedido-form select:focus,
.pedido-form textarea:focus {
    border-color: #ffb800;

    box-shadow:
        0 0 15px rgba(255, 184, 0, .2);
}


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

.pedido-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn {
    flex: 1;

    background: #e30613;
    color: #fff;

    text-decoration: none;

    padding: 16px 20px;

    border-radius: 14px;

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

    text-align: center;

    transition: .3s;

    border: 2px solid #e30613;
}

.btn:hover {
    background: #ffb800;
    color: #000;
    border-color: #ffb800;

    transform: translateY(-4px);
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}


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

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 70px;
    height: 70px;

    background: #25D366;

    border-radius: 50%;

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

    color: #fff;

    font-size: 32px;

    text-decoration: none;

    z-index: 999;

    box-shadow:
        0 0 25px rgba(37, 211, 102, .5);

    transition: .3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}


/* ================= COOKIES ================= */

.cookies {
    position: fixed;
    bottom: 20px;
    left: 20px;

    background: #111;

    border: 2px solid #e30613;

    padding: 18px 22px;

    border-radius: 16px;

    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 15px;
}

.cookies p {
    font-size: 14px;
}

.cookies button {
    background: #e30613;
    border: none;
    color: #fff;

    padding: 10px 18px;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 700;
}


/* ================= TOP BTN ================= */

#topBtn {
    position: fixed;
    bottom: 115px;
    right: 32px;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    background: #e30613;
    color: #fff;

    font-size: 22px;

    cursor: pointer;

    z-index: 999;
}


/* ================= RESPONSIVE ================= */

@media(max-width:1200px) {

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

    .contacto-panel {
        max-width: 900px;
        width: 100%;
        margin: auto;
    }

}


@media(max-width:768px) {

    .header {
        height: 95px;
    }

    .header-container {
        padding: 0 20px;
    }

    .logo {
        width: 70px;
    }

    .nav {
        gap: 20px;
    }

    .nav a {
        font-size: 14px;
    }

    .hero {
        padding-top: 120px;
    }

    .hero-container {
        padding: 0 15px;
    }

    .hero-banner img {
        border-radius: 18px;
    }

    .contacto-rapido {
        padding: 20px;
    }

    .contacto-panel {
        padding: 25px;
    }

    .contacto-panel h2 {
        font-size: 42px;
    }

    .panel-features {
        grid-template-columns: 1fr;
    }

    .pedido-buttons {
        flex-direction: column;
    }

    .cookies {
        left: 10px;
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

}

/* ================= GLOBAL BACKGROUND ================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;

    background:
        radial-gradient(circle at left,
            rgba(180, 0, 0, .28),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 0, 0, .14),
            transparent 35%),

        linear-gradient(90deg,
            #250000 0%,
            #000000 35%,
            #000000 65%,
            #4d0000 100%);

    color: #fff;
    font-family: 'Oswald', sans-serif;
}


/* ================= HERO ================= */

.hero {
    padding-top: 170px;
    padding-bottom: 60px;

    background: transparent;

    position: relative;
    overflow: hidden;
}


/* ================= QUICK CONTACT ================= */

/* ================= QUICK CONTACT ================= */

.quick-contact {
    max-width: 1850px;
    margin: 35px auto 70px;
    padding: 0 40px;
}

.quick-contact-box {

    position: relative;

    background:
        linear-gradient(135deg,
            rgba(35, 0, 0, .92),
            rgba(0, 0, 0, .96));

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

    border-radius: 32px;

    padding: 45px 55px;

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

    overflow: hidden;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .45);

}


/* GLOW */

.quick-contact-box::before {

    content: '';

    position: absolute;

    top: -120px;
    left: -120px;

    width: 320px;
    height: 320px;

    background:
        radial-gradient(circle,
            rgba(227, 6, 19, .28),
            transparent 70%);

    pointer-events: none;

}


/* TEXTO */

.quick-contact-text {

    position: relative;
    z-index: 2;

}

.quick-contact-text h3 {

    font-family: 'Anton', sans-serif;

    font-size: 72px;

    line-height: .9;

    text-transform: uppercase;

    margin-bottom: 15px;

    letter-spacing: 1px;

    color: #fff;

}

.quick-contact-text p {

    font-size: 20px;

    color: #d4d4d4;

    max-width: 700px;

    line-height: 1.6;

}


/* BOTONES */

.quick-contact-buttons {

    display: flex;
    gap: 18px;

    position: relative;
    z-index: 2;

}

.quick-contact-buttons .btn {

    min-width: 240px;

    height: 68px;

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

    border-radius: 18px;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: .3s;

}


/* BOTON PRINCIPAL */

.quick-contact-buttons .btn:first-child {

    background:
        linear-gradient(90deg,
            #e30613,
            #ff1f2d);

    border: none;

    box-shadow:
        0 0 25px rgba(227, 6, 19, .45);

}

.quick-contact-buttons .btn:first-child:hover {

    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 0 40px rgba(227, 6, 19, .6);

}


/* BOTON SECUNDARIO */

.quick-contact-buttons .btn-outline {

    background: transparent;

    border: 2px solid rgba(255, 255, 255, .2);

    color: #fff;

}

.quick-contact-buttons .btn-outline:hover {

    background: #fff;
    color: #000;

    transform: translateY(-4px);

}


/* ================= CONTACTO ================= */

.contacto-rapido {

    padding: 20px 40px 80px;

    background: transparent;

}

.contacto-grid {

    display: grid;
    grid-template-columns: 70% 30%;

    align-items: stretch;

    gap: 35px;

    max-width: 1850px;
    margin: auto;

}

.contacto-img {

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

}

.contacto-img img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 28px;

    display: block;

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

}


/* ================= PANEL ================= */

.contacto-panel {

    background:
        linear-gradient(180deg,
            rgba(18, 18, 18, .96),
            rgba(5, 5, 5, .96));

    padding: 40px;

    border-radius: 28px;

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

    box-shadow:
        0 0 40px rgba(0, 0, 0, .45);

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* ================= FORMULARIO PREMIUM ================= */

.pedido-form {
    margin-top: 35px;
}

.form-section h3 {

    font-size: 30px;

    font-family: 'Anton', sans-serif;

    text-transform: uppercase;

    margin-bottom: 25px;

    letter-spacing: 1px;

    color: #fff;

}


/* INPUTS */

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pedido-form input,
.pedido-form textarea {

    width: 100%;

    background:
        linear-gradient(180deg,
            rgba(18, 18, 18, .98),
            rgba(8, 8, 8, .98));

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

    padding: 20px 22px;

    border-radius: 18px;

    color: #fff;

    font-size: 16px;

    font-family: 'Oswald', sans-serif;

    transition: .3s;

    outline: none;

    box-shadow:
        inset 0 0 0 rgba(0, 0, 0, 0);

}


/* PLACEHOLDER */

.pedido-form input::placeholder,
.pedido-form textarea::placeholder {

    color: #8f8f8f;

    font-size: 15px;

    letter-spacing: .3px;

}


/* FOCUS */

.pedido-form input:focus,
.pedido-form textarea:focus {

    border: 1px solid #ffb800;

    background: #101010;

    box-shadow:
        0 0 20px rgba(255, 184, 0, .18);

}


/* TEXTAREA */

.pedido-form textarea {

    min-height: 170px;

    resize: none;

    margin-top: 22px;

    line-height: 1.7;

}


/* BOTONES */

.pedido-buttons {

    display: flex;

    gap: 18px;

    margin-top: 28px;

}

.pedido-buttons .btn {

    flex: 1;

    height: 64px;

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

    border-radius: 18px;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: .3s;

}


/* WHATSAPP */

.pedido-buttons .btn {

    background:
        linear-gradient(90deg,
            #e30613,
            #ff1f2d);

    border: none;

    box-shadow:
        0 0 30px rgba(227, 6, 19, .35);

}

.pedido-buttons .btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 45px rgba(227, 6, 19, .5);

}


/* EMAIL */

.pedido-buttons .btn-outline {

    background: transparent;

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

    color: #fff;

}

.pedido-buttons .btn-outline:hover {

    background: #fff;

    color: #000;

    transform: translateY(-4px);

}


/* PANEL GENERAL */

.contacto-panel {

    background:
        linear-gradient(180deg,
            rgba(12, 12, 12, .98),
            rgba(4, 4, 4, .98));

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

    border-radius: 32px;

    padding: 45px;

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

}


/* TAG */

.panel-tag {

    background:
        linear-gradient(90deg,
            #e30613,
            #ff1f2d);

    color: #fff;

    padding: 12px 20px;

    border-radius: 50px;

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

    display: inline-block;

    margin-bottom: 25px;

    box-shadow:
        0 0 25px rgba(227, 6, 19, .3);

}

/* =========================
   FOOTER FULL WIDTH REAL
========================= */

footer.footer {

    position: relative;

    left: 50%;

    right: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    width: 100vw;

    padding: 90px 0 40px;

    background:
        radial-gradient(circle at left,
            rgba(227, 6, 19, .18),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 184, 0, .10),
            transparent 35%),

        #050505;

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

}


/* CONTENEDOR INTERIOR */

.footer-container {

    width: 100%;

    max-width: 1700px;

    margin: auto;

    padding: 0 80px;

    box-sizing: border-box;

}


/* GRID */

.footer-grid {

    display: grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap: 120px;

}


/* TITULOS */

.footer h3 {

    font-family: 'Anton', sans-serif;

    font-size: 56px;

    color: #fff;

    margin-bottom: 30px;

    text-transform: uppercase;

}


/* TEXTO */

.footer p {

    color: #d2d2d2;

    font-size: 18px;

    line-height: 1.7;

}


/* LINKS */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.footer-links a {

    color: #d8d8d8;

    text-decoration: none;

    font-size: 18px;

    transition: .3s;

}

.footer-links a:hover {

    color: #ffb800;

    transform: translateX(6px);

}


/* CONTACTO */

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.footer-contact span {

    color: #fff;

    font-size: 18px;

    display: flex;

    align-items: center;

    gap: 12px;

}


/* BOTTOM */

.footer-bottom {

    margin-top: 70px;

    padding-top: 30px;

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

}

.footer-copy {

    color: #8f8f8f;

    font-size: 15px;

}


/* RESPONSIVE */

@media(max-width:900px) {

    .footer-container {

        padding: 0 30px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .footer h3 {

        font-size: 40px;

    }

}

footer.footer {

    width: 100%;

    padding: 90px 0 40px;

    background:
        radial-gradient(circle at left,
            rgba(227, 6, 19, .18),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 184, 0, .10),
            transparent 35%),

        #050505;

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

}

/* =========================
   FOOTER PERFECTO
========================= */

.footer {

    width: 100%;

    padding: 90px 0 40px;

    background:
        radial-gradient(circle at left,
            rgba(227, 6, 19, .18),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 184, 0, .10),
            transparent 35%),

        #050505;

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

}


/* CONTENEDOR */

.footer-container {

    width: 100%;

    max-width: 1600px;

    margin: auto;

    padding: 0 60px;

    box-sizing: border-box;

}


/* GRID */

.footer-grid {

    display: grid;

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

    gap: 80px;

    align-items: flex-start;

}


/* BLOQUES */

.footer-grid>div {

    width: 100%;

}


/* TITULOS */

.footer h3 {

    font-family: 'Anton', sans-serif;

    font-size: 54px;

    color: #fff;

    margin-bottom: 28px;

    text-transform: uppercase;

    line-height: 1;

}


/* TEXTO */

.footer p {

    color: #d4d4d4;

    font-size: 17px;

    line-height: 1.8;

    max-width: 420px;

}


/* LINKS */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.footer-links a {

    color: #e1e1e1;

    text-decoration: none;

    font-size: 18px;

    transition: .3s;

    width: fit-content;

}

.footer-links a:hover {

    color: #ffb800;

    transform: translateX(6px);

}


/* CONTACTO */

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.footer-contact span {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #f0f0f0;

    font-size: 18px;

    line-height: 1.6;

}


/* BOTTOM */

.footer-bottom {

    margin-top: 65px;

    padding-top: 28px;

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

}


/* COPYRIGHT */

.footer-copy {

    color: #9a9a9a;

    font-size: 15px;

}


/* RESPONSIVE */

@media(max-width:1000px) {

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .footer h3 {

        font-size: 42px;

    }

}

@media(max-width:768px) {

    .footer-container {

        padding: 0 25px;

    }

}

/* =========================
   PAGINA GRACIAS
========================= */

.gracias-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.gracias-box {
    width: 100%;
    max-width: 700px;

    background: rgba(0, 0, 0, .88);

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

    border-radius: 30px;

    padding: 70px 50px;

    text-align: center;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .5),
        0 0 80px rgba(255, 0, 0, .08);

    backdrop-filter: blur(10px);
}

.gracias-icon {
    font-size: 90px;
    margin-bottom: 25px;
}

.gracias-title {
    font-size: 58px;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1;
}

.gracias-text {
    font-size: 18px;
    color: #cfcfcf;
    line-height: 1.8;
    max-width: 550px;
    margin: auto;
}

.gracias-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-top: 40px;

    padding: 18px 40px;

    border-radius: 14px;

    background: #ff002b;

    color: #fff;
    text-decoration: none;

    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;

    transition: .3s;
}

.gracias-btn:hover {
    transform: translateY(-3px);
    background: #ff1f45;
}

/* =========================
   PAGINA GRACIAS PREMIUM
========================= */

.gracias-body {

    margin: 0;
    min-height: 100vh;

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

    padding: 40px;

    background:
        radial-gradient(circle at left,
            rgba(227, 6, 19, .25),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 184, 0, .12),
            transparent 35%),

        #050505;

    font-family: Arial, sans-serif;
}

.gracias-overlay {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gracias-card {

    width: 100%;
    max-width: 850px;

    background:
        linear-gradient(145deg,
            rgba(10, 10, 10, .98),
            rgba(0, 0, 0, .94));

    border: 1px solid rgba(255, 0, 43, .18);

    border-radius: 35px;

    padding: 70px 60px;

    text-align: center;

    box-shadow:
        0 0 60px rgba(0, 0, 0, .6),
        0 0 120px rgba(255, 0, 43, .08);

    position: relative;

    overflow: hidden;
}

.gracias-card::before {

    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(circle,
            rgba(255, 0, 43, .2),
            transparent 70%);

    border-radius: 50%;
}

.check-circle {

    width: 130px;
    height: 130px;

    margin: auto auto 35px;

    border-radius: 50%;

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

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

    color: #fff;

    background:
        linear-gradient(135deg,
            #00c853,
            #00e676);

    box-shadow:
        0 0 40px rgba(0, 230, 118, .35);
}

.gracias-title {

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

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 25px;

    line-height: 1;
}

.gracias-description {

    max-width: 650px;

    margin: auto;

    font-size: 20px;
    line-height: 1.9;

    color: #cfcfcf;
}

.gracias-info {

    display: flex;
    gap: 20px;

    justify-content: center;
    flex-wrap: wrap;

    margin-top: 45px;
}

.info-box {

    padding: 16px 24px;

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

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

    border-radius: 14px;

    color: #fff;

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

.gracias-button {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    margin-top: 50px;

    padding: 20px 45px;

    border-radius: 16px;

    background:
        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

    text-decoration: none;

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

    text-transform: uppercase;

    transition: .3s;

    box-shadow:
        0 0 30px rgba(255, 0, 43, .3);
}

.gracias-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 45px rgba(255, 0, 43, .45);
}

/* ===================================
   PAGINA GRACIAS FULL PREMIUM
=================================== */

.gracias-body {

    margin: 0;
    min-height: 100vh;

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

    overflow: hidden;

    background:
        radial-gradient(circle at left,
            rgba(227, 6, 19, .30),
            transparent 35%),

        radial-gradient(circle at right,
            rgba(255, 184, 0, .12),
            transparent 35%),

        #050505;

    font-family: Arial, sans-serif;
}

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

.gracias-container {

    width: 100%;

    min-height: 100vh;

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

    padding: 40px 60px;
}


/* =========================
   CARD HORIZONTAL
========================= */

.gracias-card {

    width: 100%;
    max-width: 1700px;

    min-height: 650px;

    background:
        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .94));

    border:
        1px solid rgba(255, 0, 43, .18);

    border-radius: 45px;

    padding: 80px;

    position: relative;

    overflow: hidden;

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

    gap: 80px;

    box-shadow:
        0 0 80px rgba(0, 0, 0, .6),
        0 0 120px rgba(255, 0, 43, .08);
}

.gracias-card::before {

    content: "";

    position: absolute;

    top: -150px;
    right: -150px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 0, 43, .22),
            transparent 70%);
}

.gracias-check {

    width: 150px;
    height: 150px;

    margin: auto auto 40px;

    border-radius: 50%;

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

    background:
        linear-gradient(135deg,
            #00c853,
            #00e676);

    color: #fff;

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

    box-shadow:
        0 0 60px rgba(0, 230, 118, .55),
        0 0 120px rgba(0, 230, 118, .18);
}

.gracias-title {

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

    color: #fff;

    text-transform: uppercase;

    margin-bottom: 30px;

    line-height: 9;
}

.gracias-text {

    max-width: 700px;

    margin: auto;

    font-size: 21px;
    line-height: 2;

    color: #d4d4d4;
}

.gracias-features {

    margin-top: 50px;

    display: flex;
    gap: 20px;

    justify-content: center;

    flex-wrap: wrap;
}

.feature-box {

    padding: 18px 28px;

    border-radius: 16px;

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

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

    color: #fff;

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

    backdrop-filter: blur(10px);
}

.gracias-btn {

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

    margin-top: 55px;

    padding: 22px 50px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

    text-decoration: none;

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

    text-transform: uppercase;

    transition: .3s;

    box-shadow:
        0 0 35px rgba(255, 0, 43, .35);

    letter-spacing: .5px;
    min-width: 320px;
}

.gracias-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 55px rgba(255, 0, 43, .55);
}

.gracias-card {

    animation: fadeUp .8s ease;
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================
   LADO IZQUIERDO
========================= */

.gracias-left {

    flex: 0 0 340px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gracias-check {

    width: 220px;
    height: 220px;

    border-radius: 50%;

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

    background:
        linear-gradient(135deg,
            #00c853,
            #00e676);

    color: #fff;

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

    box-shadow:
        0 0 60px rgba(0, 230, 118, .55),
        0 0 120px rgba(0, 230, 118, .18);
}

/* =========================
   LADO DERECHO
========================= */

.gracias-right {

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gracias-title {

    font-size: 110px;

    line-height: .9;

    margin-bottom: 35px;

    text-align: left;
}

.gracias-text {

    max-width: 900px;

    font-size: 26px;

    line-height: 1.9;

    margin: 0 0 45px;

    text-align: left;
}

.gracias-features {

    justify-content: flex-start;

    margin-bottom: 50px;
}

.gracias-btn {

    width: 380px;

    height: 78px;

    font-size: 20px;

    margin: auto;
}

.gracias-card {

    width: 100%;
    max-width: 1600px;

    min-height: 700px;

    background:
        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .94));

    border:
        1px solid rgba(255, 0, 43, .18);

    border-radius: 45px;

    padding: 90px 110px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 120px;

    box-shadow:
        0 0 80px rgba(0, 0, 0, .6),
        0 0 120px rgba(255, 0, 43, .08);
}

.gracias-right {

    flex: 1;

    max-width: 950px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.gracias-title {

    font-size: 95px;

    line-height: .95;

    margin-bottom: 35px;

    text-align: left;
}

.gracias-text {

    max-width: 760px;

    font-size: 24px;

    line-height: 1.8;

    margin: 0 0 45px;

    text-align: left;
}

.gracias-content {

    max-width: 850px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===================================
   HERO 5 GRANDES LIGAS
=================================== */

.ligas-hero {

    position: relative;

    min-height: 520px;

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

    text-align: center;

    overflow: hidden;

    padding: 180px 40px 120px;

    background:

        radial-gradient(circle at top left,
            rgba(255, 0, 43, .55),
            transparent 42%),

        radial-gradient(circle at bottom left,
            rgba(180, 0, 25, .38),
            transparent 38%),

        radial-gradient(circle at top right,
            rgba(255, 120, 0, .16),
            transparent 34%),

        linear-gradient(145deg,
            #070707,
            #000000);
}


.ligas-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, .65));
}


.ligas-hero-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;
}


.hero-badge {

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

    padding: 14px 24px;

    border-radius: 50px;

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

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

    color: #fff;

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

    letter-spacing: 1px;

    margin-bottom: 30px;

    backdrop-filter: blur(10px);
}


.ligas-hero h1 {

    font-size: 110px;

    line-height: .9;

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 35px;

    text-shadow:
        0 0 30px rgba(255, 255, 255, .08);
}


.ligas-hero p {

    max-width: 760px;

    margin: auto;

    color: #d8d8d8;

    font-size: 24px;

    line-height: 1.8;
}



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

.ligas-wrapper {

    padding: 120px 60px;

    background:

        radial-gradient(circle at left,
            rgba(255, 0, 43, .16),
            transparent 38%),

        radial-gradient(circle at right,
            rgba(120, 0, 0, .10),
            transparent 35%),

        linear-gradient(180deg,
            #050505,
            #000000);
}


.ligas-grid {

    max-width: 1600px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 35px;
}



/* ===================================
   CARD LIGA
=================================== */

.liga-card {

    position: relative;

    min-height: 420px;

    border-radius: 35px;

    overflow: hidden;

    padding: 50px 40px;

    text-decoration: none;

    background:
        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .95));

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

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: .4s ease;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .35);
}


.liga-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(145deg,
            rgba(255, 0, 43, .08),
            transparent);

    opacity: 0;

    transition: .4s;
}


.liga-card:hover {

    transform:
        translateY(-12px) scale(1.02);

    border:
        1px solid rgba(255, 0, 43, .22);

    box-shadow:
        0 0 60px rgba(255, 0, 43, .12);
}


.liga-card:hover::before {

    opacity: 1;
}


.liga-card img {

    width: 140px;
    height: 140px;

    object-fit: contain;

    margin-bottom: 35px;

    filter:
        drop-shadow(0 0 20px rgba(255, 255, 255, .08));

    transition: .4s;
}


.liga-card:hover img {

    transform: scale(1.08);
}


.liga-card h2 {

    color: #fff;

    font-size: 42px;

    text-transform: uppercase;

    margin-bottom: 14px;

    text-align: center;
}


.liga-card span {

    color: #bdbdbd;

    font-size: 18px;

    letter-spacing: 1px;
}



/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1100px) {

    .ligas-hero h1 {

        font-size: 80px;
    }

    .ligas-hero p {

        font-size: 21px;
    }
}


@media(max-width:768px) {

    .ligas-wrapper {

        padding: 90px 25px;
    }

    .ligas-hero {

        padding:
            170px 25px 90px;
    }

    .ligas-hero h1 {

        font-size: 58px;
    }

    .ligas-hero p {

        font-size: 18px;
    }

    .liga-card {

        min-height: 340px;
    }

    .liga-card h2 {

        font-size: 34px;
    }

    .liga-card img {

        width: 110px;
        height: 110px;
    }
}

/* ===================================
   HERO LALIGA
=================================== */

.liga-page-hero {

    position: relative;

    min-height: 500px;

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

    text-align: center;

    overflow: hidden;

    padding: 180px 40px 120px;

    background:

        radial-gradient(circle at top left,
            rgba(255, 0, 43, .45),
            transparent 40%),

        radial-gradient(circle at top right,
            rgba(255, 180, 0, .12),
            transparent 35%),

        linear-gradient(145deg,
            #070707,
            #000000);
}


.liga-page-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, .72));
}


.liga-page-content {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.liga-page-content img {

    width: 170px;

    margin-bottom: 35px;

    filter:
        drop-shadow(0 0 35px rgba(255, 255, 255, .15));
}


.liga-page-content h1 {

    font-size: 110px;

    line-height: .9;

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 25px;
}


.liga-page-content p {

    color: #d5d5d5;

    font-size: 24px;

    line-height: 1.8;
}



/* ===================================
   EQUIPOS
=================================== */

.equipos-section {

    padding: 120px 60px;

    background:

        radial-gradient(circle at left,
            rgba(255, 0, 43, .12),
            transparent 35%),

        linear-gradient(180deg,
            #050505,
            #000000);
}


.equipos-grid {

    max-width: 1700px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 35px;
}



/* ===================================
   CARD EQUIPO
=================================== */

.equipo-card {

    position: relative;

    min-height: 320px;

    border-radius: 35px;

    overflow: hidden;

    text-decoration: none;

    background:

        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .96));

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

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 40px;

    transition: .4s ease;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .35);
}


.equipo-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(145deg,
            rgba(255, 0, 43, .12),
            transparent);

    opacity: 0;

    transition: .4s;
}


.equipo-card:hover {

    transform:
        translateY(-12px) scale(1.02);

    border:
        1px solid rgba(255, 0, 43, .22);

    box-shadow:
        0 0 55px rgba(255, 0, 43, .12);
}


.equipo-card:hover::before {

    opacity: 1;
}


.equipo-card img {

    width: 140px;
    height: 140px;

    object-fit: contain;

    margin-bottom: 35px;

    transition: .4s;

    filter:
        drop-shadow(0 0 20px rgba(255, 255, 255, .08));
}


.equipo-card:hover img {

    transform: scale(1.08);
}


.equipo-card h2 {

    color: #fff;

    font-size: 34px;

    text-align: center;

    line-height: 1.3;

    text-transform: uppercase;
}



/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1100px) {

    .liga-page-content h1 {

        font-size: 80px;
    }

    .liga-page-content p {

        font-size: 20px;
    }
}


@media(max-width:768px) {

    .liga-page-hero {

        padding:
            170px 25px 90px;
    }

    .liga-page-content img {

        width: 120px;
    }

    .liga-page-content h1 {

        font-size: 58px;
    }

    .liga-page-content p {

        font-size: 18px;
    }

    .equipos-section {

        padding: 90px 25px;
    }

    .equipo-card {

        min-height: 260px;
    }

    .equipo-card img {

        width: 100px;
        height: 100px;
    }

    .equipo-card h2 {

        font-size: 26px;
    }
}

/* ===================================
   HERO EQUIPO
=================================== */

.team-hero {

    position: relative;

    min-height: 500px;

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

    text-align: center;

    overflow: hidden;

    padding: 180px 40px 120px;

    background:

        radial-gradient(circle at top left,
            rgba(255, 0, 43, .45),
            transparent 40%),

        radial-gradient(circle at top right,
            rgba(255, 255, 255, .08),
            transparent 30%),

        linear-gradient(145deg,
            #070707,
            #000000);
}


.team-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, .72));

    pointer-events: none;
}


.team-content {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.team-content img {

    width: 180px;

    margin-bottom: 35px;

    filter:
        drop-shadow(0 0 35px rgba(255, 255, 255, .12));
}


.team-content h1 {

    font-size: 110px;

    line-height: .9;

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 25px;
}


.team-content p {

    color: #d5d5d5;

    font-size: 24px;

    line-height: 1.8;
}



/* ===================================
   CAMISETAS
=================================== */

.shirts-section {

    padding: 120px 60px;

    background:

        radial-gradient(circle at left,
            rgba(255, 0, 43, .12),
            transparent 35%),

        linear-gradient(180deg,
            #050505,
            #000000);
}


.shirts-grid {

    max-width: 1700px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(340px, 1fr));

    gap: 40px;
}



/* ===================================
   CARD CAMISETA
=================================== */

.shirt-card {

    position: relative;

    border-radius: 35px;

    overflow: hidden;

    padding: 45px 35px;

    background:

        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .96));

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

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transition: .4s ease;

    box-shadow:
        0 0 40px rgba(0, 0, 0, .35);
}


.shirt-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(145deg,
            rgba(255, 0, 43, .12),
            transparent);

    opacity: 0;

    transition: .4s;

    pointer-events: none;
}


.shirt-card:hover {

    transform:
        translateY(-12px) scale(1.02);

    border:
        1px solid rgba(255, 0, 43, .22);

    box-shadow:
        0 0 55px rgba(255, 0, 43, .12);
}


.shirt-card:hover::before {

    opacity: 1;
}



/* ===================================
   BADGE
=================================== */

.shirt-badge {

    position: absolute;

    top: 22px;
    right: 22px;

    padding: 10px 18px;

    border-radius: 50px;

    background:
        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

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

    letter-spacing: 1px;

    z-index: 3;

    box-shadow:
        0 0 25px rgba(255, 0, 43, .35);
}



/* ===================================
   IMAGEN
=================================== */

.shirt-card img {

    width: 100%;

    max-width: 280px;

    height: 340px;

    object-fit: contain;

    margin-bottom: 35px;

    transition: .4s;

    filter:
        drop-shadow(0 0 25px rgba(255, 255, 255, .08));
}


.shirt-card:hover img {

    transform:
        scale(1.08) rotate(-2deg);
}



/* ===================================
   TITULO
=================================== */

.shirt-card h2 {

    color: #fff;

    font-size: 30px;

    line-height: 1.3;

    margin-bottom: 15px;

    text-transform: uppercase;
}


.shirt-card span {

    color: #bdbdbd;

    font-size: 17px;

    margin-bottom: 35px;

    line-height: 1.7;
}



/* ===================================
   BOTON
=================================== */

.shirt-btn {

    width: 100%;

    height: 65px;

    border-radius: 18px;

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

    background:

        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

    text-decoration: none;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: .3s;

    box-shadow:
        0 0 30px rgba(255, 0, 43, .25);
}


.shirt-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 45px rgba(255, 0, 43, .45);
}



/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1100px) {

    .team-content h1 {

        font-size: 80px;
    }

    .team-content p {

        font-size: 20px;
    }
}


@media(max-width:768px) {

    .team-hero {

        padding:
            170px 25px 90px;
    }

    .team-content img {

        width: 120px;
    }

    .team-content h1 {

        font-size: 58px;
    }

    .team-content p {

        font-size: 18px;
    }

    .shirts-section {

        padding: 90px 25px;
    }

    .shirt-card {

        padding: 35px 25px;
    }

    .shirt-card img {

        height: 260px;
    }

    .shirt-card h2 {

        font-size: 24px;
    }
}

.shirt-select {

    width: 100%;

    height: 60px;

    border-radius: 16px;

    border: none;

    outline: none;

    background: #111;

    color: #fff;

    padding: 0 20px;

    margin-bottom: 20px;

    font-size: 16px;

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

}

.pedido-link {

    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;
}


#contador-pedido {

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ff002b;

    color: #fff;

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

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

    box-shadow:
        0 0 20px rgba(255, 0, 43, .4);
}

/* ===================================
   HERO PEDIDO
=================================== */

.pedido-hero {

    padding: 180px 40px 100px;

    text-align: center;

    background:

        radial-gradient(circle at top left,
            rgba(255, 0, 43, .35),
            transparent 40%),

        linear-gradient(145deg,
            #070707,
            #000);
}


.pedido-hero h1 {

    font-size: 90px;

    color: #fff;

    margin-bottom: 25px;

    text-transform: uppercase;
}


.pedido-hero p {

    color: #cfcfcf;

    font-size: 22px;
}



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

.pedido-section {

    padding: 80px 60px;

    background: #050505;

    min-width:0;
}


.pedido-grid {

    max-width: 1500px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 35px;
}



/* ===================================
   CARD PEDIDO
=================================== */

.pedido-card {

    background:

        linear-gradient(145deg,
            rgba(15, 15, 15, .98),
            rgba(0, 0, 0, .96));

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

    border-radius: 30px;

    padding: 35px;

    transition: .4s;

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


.pedido-card:hover {

    transform:
        translateY(-8px);

    border:
        1px solid rgba(255, 0, 43, .22);

    box-shadow:
        0 0 45px rgba(255, 0, 43, .12);
}


.pedido-card h2 {

    color: #fff;

    font-size: 28px;

    margin-bottom: 20px;

    line-height: 1.4;
}


.pedido-card p {

    color: #c7c7c7;

    margin-bottom: 14px;

    font-size: 17px;
}



/* ===================================
   BOTON ELIMINAR
=================================== */

.eliminar-btn {

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 16px;

    background:

        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

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

    cursor: pointer;

    margin-top: 25px;

    transition: .3s;
}


.eliminar-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 0 30px rgba(255, 0, 43, .35);
}



/* ===================================
   PEDIDO VACIO
=================================== */

.pedido-vacio {

    color: #fff;

    font-size: 24px;

    text-align: center;

    padding: 80px 20px;
}



/* ===================================
   FORMULARIO FINAL
=================================== */

.pedido-form-section {

    padding: 80px 60px 120px;

    background: #050505;
}


.pedido-final-form {

    max-width: 900px;

    margin: auto;

    display: flex;
    flex-direction: column;

    gap: 25px;
}


.pedido-final-form input,
.pedido-final-form textarea {

    width: 100%;

    border: none;

    outline: none;

    background: #101010;

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

    border-radius: 18px;

    padding: 22px;

    color: #fff;

    font-size: 16px;
}


.pedido-final-form textarea {

    min-height: 180px;

    resize: none;
}



/* ===================================
   BOTON FINAL
=================================== */

.pedido-submit {

    width: 100%;

    height: 70px;

    border: none;

    border-radius: 18px;

    background:

        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

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

    text-transform: uppercase;

    cursor: pointer;

    transition: .3s;
}


.pedido-submit:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 40px rgba(255, 0, 43, .35);
}



/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:768px) {

    .pedido-hero h1 {

        font-size: 58px;
    }

    .pedido-hero p {

        font-size: 18px;
    }

    .pedido-section,
    .pedido-form-section {

        padding: 70px 25px;
    }

}

.vaciar-container {

    width: 100%;

    display: flex;
    justify-content: center;

    margin-top: 50px;
}


.vaciar-btn {

    width: 320px;

    height: 65px;

    border: none;

    border-radius: 18px;

    background: #111;

    color: #fff;

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

    cursor: pointer;

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

    transition: .3s;
}


.vaciar-btn:hover {

    background: #ff002b;

    transform: translateY(-4px);

    box-shadow:
        0 0 35px rgba(255, 0, 43, .35);
}

/* ===================================
   CATALOGO PREMIUM
=================================== */

.catalogo-info {

    width: 100%;

    padding: 70px;

    border-radius: 35px;

    background:

        linear-gradient(145deg,
            rgba(10, 10, 10, .98),
            rgba(0, 0, 0, .95));

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

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


.catalogo-badge {

    display: inline-flex;

    padding: 14px 22px;

    border-radius: 100px;

    background:
        rgba(255, 0, 43, .14);

    color: #ff002b;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;

    margin-bottom: 30px;
}


.catalogo-info h2 {

    color: #fff;

    font-size: 72px;

    line-height: 1.05;

    margin-bottom: 35px;

    text-transform: uppercase;
}


.catalogo-text {

    color: #cfcfcf;

    font-size: 22px;

    line-height: 1.7;

    margin-bottom: 50px;

    max-width: 850px;
}



/* GRID */

.catalogo-grid {

    display: grid;

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

    gap: 22px;

    margin-bottom: 50px;
}


.catalogo-box {

    background: #101010;

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

    border-radius: 20px;

    padding: 28px;

    color: #fff;

    font-size: 18px;
    font-weight: 600;

    transition: .3s;
}


.catalogo-box:hover {

    transform: translateY(-5px);

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

    box-shadow:
        0 0 30px rgba(255, 0, 43, .12);
}



/* HIGHLIGHT */

.catalogo-highlight {

    padding: 35px;

    border-radius: 25px;

    background:

        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

    font-size: 22px;

    line-height: 1.6;

    font-weight: 600;

    box-shadow:
        0 0 40px rgba(255, 0, 43, .25);
}



/* RESPONSIVE */

@media(max-width:992px) {

    .catalogo-info {

        padding: 40px 25px;
    }

    .catalogo-info h2 {

        font-size: 48px;
    }

    .catalogo-grid {

        grid-template-columns: 1fr;
    }

    .catalogo-text {

        font-size: 18px;
    }

    .catalogo-highlight {

        font-size: 18px;
    }

}

.pedido-form {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:

        linear-gradient(145deg,
            rgba(10, 10, 10, .98),
            rgba(0, 0, 0, .95));

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

    border-radius: 35px;

    padding: 40px;
}

.contacto-grid {

    align-items: stretch;
}

.hero {

    width: 100%;

    padding: 120px 20px 20px;

    background: #050505;
}

.hero {

    width: 100%;

    padding: 120px 30px 30px;

    background: #050505;

    display: flex;

    justify-content: center;
}



.hero-container {

    width: 100%;

    max-width: 1800px;

    margin: auto;
}



.hero-banner {

    width: 100%;

    border-radius: 35px;

    overflow: hidden;

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



.hero-banner img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 35px;

    max-height: calc(100vh - 150px);

    object-fit: contain;
}

/* ===================================
   MOBILE RESPONSIVE
=================================== */

@media(max-width:768px) {


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

    .header {

        padding: 15px 20px;
    }


    .header-container {

        flex-direction: column;

        gap: 20px;
    }


    .logo {

        width: 180px;
    }


    .nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px;
    }


    .nav a {

        font-size: 14px;

        padding: 10px 14px;
    }



    /* =========================
   HERO
========================= */

    .hero {

        padding: 120px 10px 10px;
    }


    .hero-banner img {

        width: 100%;

        border-radius: 20px;

        max-height: none;
    }



    /* =========================
   CONTACTO
========================= */

    .contacto-grid {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .catalogo-info {

        padding: 35px 25px;
    }


    .catalogo-info h2 {

        font-size: 44px;

        line-height: 1.1;
    }


    .catalogo-text {

        font-size: 18px;
    }


    .catalogo-grid {

        grid-template-columns: 1fr;
    }


    .catalogo-highlight {

        font-size: 18px;

        padding: 25px;
    }



    /* =========================
   FORMULARIO
========================= */

    .pedido-form {

        padding: 30px 20px;
    }


    .form-grid {

        grid-template-columns: 1fr;
    }


    .pedido-buttons {

        flex-direction: column;
    }


    .btn {

        width: 100%;

        justify-content: center;
    }



    /* =========================
   HERO LIGAS
========================= */

    .ligas-hero {

        padding: 150px 20px 80px;
    }


    .ligas-hero h1 {

        font-size: 52px;
    }


    .ligas-hero p {

        font-size: 18px;
    }



    /* =========================
   CARDS LIGAS
========================= */

    .ligas-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .liga-card {

        padding: 35px 20px;
    }



    /* =========================
   TEAM HERO
========================= */

    .team-hero {

        min-height: 55vh;

        padding: 140px 20px 80px;
    }


    .team-content h1 {

        font-size: 52px;
    }


    .team-content p {

        font-size: 18px;
    }



    /* =========================
   SHIRTS
========================= */

    .shirts-section {

        padding: 60px 15px;
    }


    .shirts-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .shirt-card {

        padding: 25px 20px;
    }


    .shirt-card h2 {

        font-size: 28px;
    }



    /* =========================
   PEDIDO
========================= */

    .pedido-hero {

        padding: 150px 20px 70px;
    }


    .pedido-hero h1 {

        font-size: 54px;
    }


    .pedido-section {

        padding: 50px 15px;
    }


    .pedido-grid {

        grid-template-columns: 1fr;
    }


    .pedido-form-section {

        padding: 40px 15px 80px;
    }



    /* =========================
   FOOTER
========================= */

    .footer {

        padding: 70px 20px 40px;
    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .footer-bottom {

        text-align: center;
    }


}

/* ===================================
   MOBILE MENU
=================================== */

.menu-toggle {

    display: none;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 14px;

    background: #111;

    color: #fff;

    font-size: 30px;

    cursor: pointer;

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



/* ===================================
   MOBILE
=================================== */

@media(max-width:768px) {

    .header-container {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;
    }


    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .desktop-nav {

        position: absolute;

        top: 100px;

        left: 0;

        width: 100%;

        background: #050505;

        padding: 25px;

        display: none;

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

        z-index: 999;
    }


    .desktop-nav.active {

        display: block;
    }


    .nav {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 12px;
    }


    .nav a {

        width: 100%;

        text-align: center;

        padding: 16px;

        border-radius: 14px;
    }

}

/* ===================================
   MOBILE MENU
=================================== */

.menu-toggle {

    display: none;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 14px;

    background: #111;

    color: #fff;

    font-size: 30px;

    cursor: pointer;

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



/* ===================================
   MOBILE
=================================== */

@media(max-width:768px) {

    .header {

        padding: 15px 20px;
    }


    .header-container {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;
    }

    .header a {

        display: flex;

        align-items: center;
    }


    .logo {

        width: 110px;

        max-height: 70px;

        object-fit: contain;

        display: block;
    }




    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .desktop-nav {

        position: absolute;

        top: 100px;

        left: 0;

        width: 100%;

        background: #050505;

        padding: 25px;

        display: none;

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

        z-index: 999;
    }


    .desktop-nav.active {

        display: block;
    }


    .nav {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 12px;
    }


    .nav a {

        width: 100%;

        text-align: center;

        padding: 16px;

        border-radius: 14px;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;
    }

}

/* ===================================
   LEGAL
=================================== */

.legal-body{

    background:#050505;

    color:#fff;

    min-height:100vh;
}


.legal-section{

    width:100%;

    padding:160px 20px 100px;
}


.legal-container{

    max-width:1000px;

    margin:auto;

    background:

    linear-gradient(
    145deg,
    rgba(10,10,10,.98),
    rgba(0,0,0,.95)
    );

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

    border-radius:35px;

    padding:70px;

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


.legal-container h1{

    font-size:72px;

    margin-bottom:40px;

    text-transform:uppercase;
}


.legal-container h2{

    font-size:34px;

    margin-top:50px;

    margin-bottom:20px;

    color:#ff002b;
}


.legal-container p{

    color:#d0d0d0;

    font-size:19px;

    line-height:1.8;

    margin-bottom:20px;
}


.legal-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:50px;

    width:260px;

    height:65px;

    border-radius:18px;

    background:#ff002b;

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.3s;
}


.legal-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 35px rgba(255,0,43,.35);
}



/* MOBILE */

@media(max-width:768px){

    .legal-section{

        padding:140px 15px 70px;
    }

    .legal-container{

        padding:40px 25px;
    }

    .legal-container h1{

        font-size:46px;
    }

    .legal-container h2{

        font-size:28px;
    }

    .legal-container p{

        font-size:17px;
    }

    .legal-btn{

        width:100%;
    }

}

/* ===================================
   FOOTER LEGAL
=================================== */

.footer-legal{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-top:20px;

    flex-wrap:wrap;
}


.footer-legal a{

    color:#9f9f9f;

    text-decoration:none;

    font-size:15px;

    transition:.3s;
}


.footer-legal a:hover{

    color:#ff002b;
}

/* ===================================
   LEGAL MODERNO
=================================== */

.legal-body{

    background:#050505;

    color:#fff;

    min-height:100vh;
}



/* HERO */

.legal-hero{

    width:100%;

    padding:180px 20px 100px;

    text-align:center;
}


.legal-hero h1{

    font-size:82px;

    margin-bottom:25px;

    text-transform:uppercase;
}


.legal-hero p{

    color:#bdbdbd;

    font-size:22px;

    max-width:800px;

    margin:auto;

    line-height:1.7;
}



/* SECTION */

.legal-cards-section{

    width:100%;

    padding:0 20px 120px;
}


.legal-cards-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

    margin-bottom:60px;
}



/* CARD */

.legal-card{

    background:

    linear-gradient(
    145deg,
    rgba(10,10,10,.98),
    rgba(0,0,0,.95)
    );

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

    border-radius:30px;

    padding:45px;

    transition:.3s;
}


.legal-card:hover{

    transform:translateY(-6px);

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

    box-shadow:
    0 0 35px rgba(255,0,43,.12);
}


.legal-card h2{

    font-size:34px;

    margin-bottom:25px;

    color:#ff002b;
}


.legal-card p{

    color:#d0d0d0;

    font-size:18px;

    line-height:1.8;

    margin-bottom:20px;
}



/* BOTON */

.legal-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    width:320px;

    height:70px;

    border-radius:20px;

    background:#ff002b;

    color:#fff;

    text-decoration:none;

    font-size:20px;

    font-weight:700;

    transition:.3s;
}


.legal-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 35px rgba(255,0,43,.35);
}



/* MOBILE */

@media(max-width:992px){

    .legal-hero{

        padding:150px 20px 70px;
    }

    .legal-hero h1{

        font-size:52px;
    }

    .legal-hero p{

        font-size:18px;
    }

    .legal-cards-grid{

        grid-template-columns:1fr;
    }

    .legal-card{

        padding:35px 25px;
    }

    .legal-btn{

        width:100%;
    }

}

.back-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin:140px 30px 30px;

    padding:16px 28px;

    border-radius:18px;

    background:

    linear-gradient(
    135deg,
    #ff002b,
    #ff2348
    );

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:
    0 0 30px rgba(255,0,43,.22);

    transition:.3s;

    z-index:20;
}


.back-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 40px rgba(255,0,43,.4);
}

/* ===================================
   PEDIDO NUEVO
=================================== */

.pedido-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:

    linear-gradient(
    145deg,
    rgba(10,10,10,.98),
    rgba(0,0,0,.95)
    );

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

    border-radius:30px;

    padding:25px;

    transition:.3s;

    position:relative;
}


.pedido-card:hover{

    transform:translateY(-5px);

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

    box-shadow:
    0 0 35px rgba(255,0,43,.12);
}



/* IMAGEN */

.pedido-img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:20px;

    transition:.3s;
}


.pedido-img:hover{

    transform:scale(1.04);
}



/* INFO */

.pedido-info{

    flex:1;
}


.pedido-info h2{

    font-size:28px;

    margin-bottom:15px;
}


.pedido-info p{

    color:#d0d0d0;

    margin-bottom:10px;

    font-size:17px;
}



/* ELIMINAR */

.eliminar-btn{

    border:none;

    background:#ff002b;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}


.eliminar-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 25px rgba(255,0,43,.35);
}



/* MOBILE */

@media(max-width:768px){

    .pedido-card{

        flex-direction:column;

        text-align:center;
    }

    .pedido-img{

        width:100%;

        max-width:260px;

        height:auto;
    }

}

.pedido-card .eliminar-btn{

    width:auto;

    min-width:140px;

    align-self:center;
}

/* ===================================
   PEDIDO NUEVO
=================================== */

.pedido-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:50px;

    
}



/* CARD */

.pedido-card{

    background:
    linear-gradient(
    145deg,
    rgba(10,10,10,.98),
    rgba(0,0,0,.95)
    );

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

    border-radius:30px;

    padding:25px;

    transition:.3s;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:20px;
}


.pedido-card:hover{

    transform:translateY(-6px);

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

    box-shadow:
    0 0 35px rgba(255,0,43,.12);
}



/* IMAGEN */

.pedido-img{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:22px;

    transition:.3s;
}


.pedido-img:hover{

    transform:scale(1.03);
}



/* INFO */

.pedido-info{

    width:100%;
}


.pedido-info h2{

    font-size:24px;

    line-height:1.3;

    margin-bottom:18px;
}



/* SELECTS */

.pedido-edit{

    margin-bottom:14px;
}


.pedido-edit label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-weight:700;
}


.pedido-edit select{

    width:100%;

    padding:12px;

    border-radius:12px;

    border:none;

    background:#111;

    color:#fff;

    font-size:15px;
}



/* ELIMINAR */

.eliminar-btn{

    width:100%;

    border:none;

    background:#ff002b;

    color:#fff;

    padding:14px;

    border-radius:14px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}


.eliminar-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 25px rgba(255,0,43,.35);
}

/* ===================================
   CUSTOM ALERT
=================================== */

.custom-alert{

    position:fixed;

    top:120px;

    right:30px;

    background:

    linear-gradient(
    135deg,
    #111,
    #1a1a1a
    );

    color:#fff;

    padding:18px 26px;

    border-radius:18px;

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

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

    font-weight:700;

    font-size:15px;

    z-index:99999;

    opacity:0;

    transform:
    translateY(-20px);

    transition:.4s;

    pointer-events:none;
}



/* ACTIVA */

.custom-alert.show{

    opacity:1;

    transform:
    translateY(0);
}

.pedido-card{

    background:#0a0a0a;
    border:1px solid #1f1f1f;
    border-radius:20px;
    padding:25px;
    margin-bottom:30px;

    box-shadow:
    0 0 20px rgba(255,0,0,0.08);

}

.pedido-info h2{

    color:white;
    font-size:28px;
    margin-bottom:25px;

}

.pedido-edit{

    margin-bottom:18px;

}

.pedido-edit label{

    display:block;
    color:white;
    font-weight:700;
    margin-bottom:8px;
    font-size:15px;

}

.pedido-edit select,
.pedido-edit input{

    width:100%;
    background:#111;
    border:1px solid #2c2c2c;
    color:white;

    padding:14px;
    border-radius:12px;

    font-size:15px;

    transition:0.3s;

}

.pedido-edit select:focus,
.pedido-edit input:focus{

    border-color:red;
    outline:none;

    box-shadow:
    0 0 10px rgba(255,0,0,0.3);

}

.personalizacion-title{

    color:red;
    font-size:18px;
    font-weight:800;
    margin-top:25px;
    margin-bottom:20px;

}

.checkbox-group{

    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:12px;

}

.checkbox-item{

    background:#111;
    border:1px solid #2c2c2c;
    padding:10px 14px;
    border-radius:12px;

    display:flex;
    align-items:center;
    gap:8px;

    color:white;

}

.eliminar-btn{

    margin-top:25px;

    background:#ff003c;
    border:none;

    padding:14px 28px;

    color:white;
    font-weight:700;

    border-radius:14px;

    cursor:pointer;

    transition:0.3s;

}

.eliminar-btn:hover{

    transform:scale(1.05);

    background:#ff174f;

}

.eliminar-btn{

    background: #111;
    color: #ff004c;

    border: 1px solid #ff004c;

    padding: 10px 22px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

    margin-top: 20px;

}

.eliminar-btn:hover{

    background: #ff004c;
    color: white;

    transform: translateY(-2px);

}

.vaciar-btn{

    background: #111;

    color: #bbb;

    border: 1px solid #333;

    padding: 14px 35px;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

    margin: 30px auto 40px auto;

    display: block;

}

.vaciar-btn:hover{

    border-color: #ff004c;

    color: white;

}

.formulario-final{

    background: #0d0d0d;

    border: 1px solid #1f1f1f;

    border-radius: 24px;

    padding: 35px;

    margin-top: 30px;

    box-shadow: 0 0 30px rgba(255,0,76,0.08);

}

.formulario-final h2{

    text-align: center;

    margin-bottom: 25px;

    font-size: 28px;

    color: white;

}

/* ===================================
   CHECKOUT LAYOUT
=================================== */

.checkout-layout{

    width:95%;
    max-width:1600px;

    margin:40px auto;

    display:flex;

    gap:35px;

    align-items:flex-start;

}



/* ===================================
   PEDIDOS
=================================== */

.pedido-section{

    flex:2;

}



/* ===================================
   FORMULARIO LATERAL
=================================== */

.pedido-form-section{

    flex:1;

    position:sticky;

    top:120px;

}



/* ===================================
   FORMULARIO
=================================== */

.pedido-final-form{

    background:#0d0d0d;

    border:1px solid #1f1f1f;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 0 30px rgba(255,0,76,0.08);

}



.pedido-final-form h2{

    color:white;

    font-size:30px;

    margin-bottom:25px;

    text-align:center;

}



/* ===================================
   INPUTS
=================================== */

.pedido-final-form input{

    width:100%;

    background:#111;

    border:1px solid #2c2c2c;

    color:white;

    padding:16px;

    border-radius:14px;

    margin-bottom:18px;

    font-size:15px;

}



.pedido-final-form input:focus{

    outline:none;

    border-color:#ff004c;

    box-shadow:
    0 0 10px rgba(255,0,76,0.2);

}



/* ===================================
   BOTON ENVIAR
=================================== */

.pedido-submit{

    width:100%;

    background:
    linear-gradient(
    135deg,
    #ff003c,
    #ff174f
    );

    border:none;

    color:white;

    padding:18px;

    border-radius:16px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

}



.pedido-submit:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(255,0,76,0.25);

}



/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1000px){

    .checkout-layout{

        flex-direction:column;

    }

    .pedido-form-section{

        width:100%;

        position:static;

    }

}

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

.pedido-botones{

    display:flex;

    gap:12px;

    margin-top:25px;

}



/* ===================================
   GUARDAR
=================================== */

.guardar-btn{

    flex:1;

    background:
    linear-gradient(
    135deg,
    #00b140,
    #00d26a
    );

    border:none;

    color:white;

    padding:12px;

    border-radius:12px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

}



.guardar-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(0,210,106,0.25);

}



/* ===================================
   ELIMINAR
=================================== */

.eliminar-btn{

    flex:1;

}

/* =========================
   PEDIDO RESPONSIVE
========================= */

@media(max-width:768px){

    .checkout-layout{

        display:flex;
        flex-direction:column;
        gap:30px;

    }

    .pedido-section{

        width:100%;
        padding:20px 15px;

    }

    .pedido-form-section{

        width:100%;
        padding:20px 15px 50px;

    }

    .pedido-grid{

        display:flex;
        flex-direction:column;
        gap:20px;

    }

    .pedido-card{

        width:100%;
        max-width:100%;

    }

}

@media(max-width:768px){

    .gracias-container{

        padding:20px;

    }

    .gracias-card{

        flex-direction:column;

        padding:40px 25px;

        gap:40px;

        min-height:auto;

    }

    .gracias-left,
    .gracias-right{

        width:100%;
        max-width:100%;

    }

    .gracias-title{

        font-size:42px;

        text-align:center;

        line-height:1.1;

    }

    .gracias-text{

        font-size:18px;

        text-align:center;

        margin:auto;

    }

    .gracias-features{

        justify-content:center;

    }

    .gracias-btn{

        width:100%;

        max-width:320px;

    }

    .gracias-check{

        width:120px;
        height:120px;

        font-size:70px;

    }

}

.checkout-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 350px;

    gap:35px;

    align-items:start;

    max-width:1800px;

    margin:auto;

}

.pedido-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}
.pedido-precio{

    font-size:22px;

    font-weight:bold;

    color:#ff003c;

    margin-bottom:15px;

}

.pedido-total{

    margin-top:30px;

    background:#111;

    color:white;

    padding:25px;

    border-radius:15px;

    text-align:center;

}

.pedido-total h3{

    color:#00d26a;

    font-size:28px;

}

.pedido-total{

    margin-top:25px;

    background:#fff;

    border:2px solid #ececec;

    border-radius:16px;

    padding:25px;

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

}

.pedido-total h2{

    font-size:22px;

    margin-bottom:20px;

    color:#111;

}

.total-linea{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    font-size:16px;

}

.total-final{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

    padding-top:15px;

    border-top:2px solid #eee;

    font-size:26px;

    font-weight:bold;

    color:#ff003c;

}

.pedido-total{

    margin-top:30px;

    background:white;

    border-radius:18px;

    padding:25px;

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

    border:1px solid #ececec;

}

.pedido-total h2{

    text-align:center;

    margin-bottom:20px;

    color:#111;

}

.total-linea{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    font-size:16px;

}

.total-final{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;

    padding-top:15px;

    border-top:2px solid #eee;

    font-size:26px;

    font-weight:bold;

    color:#ff003c;

}

.pedido-total{

    background:linear-gradient(
        135deg,
        #111,
        #1d1d1d
    );

    color:white;

    border-radius:20px;

    padding:30px;

    margin-top:30px;

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

}

.pedido-total h2{

    text-align:center;

    font-size:28px;

    margin-bottom:25px;

    color:white;

}

.total-linea{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    font-size:18px;

}

.total-final{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:20px;

    border-top:2px solid rgba(
        255,
        255,
        255,
        .15
    );

    font-size:34px;

    font-weight:800;

    color:#00e676;

}

.total-envio-gratis{

    color:#00e676;

    font-weight:bold;

}

/* ===================================
   CHECKOUT RESPONSIVE DEFINITIVO
=================================== */

.checkout-layout{

    max-width:1800px;

    margin:auto;

    display:grid;

    grid-template-columns: 1.5fr 450px;

    gap:40px;

    padding:0 40px 80px;

    align-items:start;

}

.pedido-section{

    padding:0;

}

.pedido-form-section{

    padding:0;

    position:sticky;

    top:140px;

}

.pedido-final-form{

    max-width:none;

    background:
        linear-gradient(145deg,
        rgba(15,15,15,.98),
        rgba(0,0,0,.96));

    border-radius:30px;

    padding:35px;

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

}

.pedido-grid{

    max-width:none;
}

.pedido-card{

    width:100%;
}

.pedido-card img{

    max-width:100%;

    height:auto;

}

/* =========================
   MOVIL
========================= */

@media(max-width:992px){

    .checkout-layout{

        grid-template-columns:1fr;

        padding:0 15px 50px;

    }

    .pedido-form-section{

        position:static;

        order:-1;

    }

    .pedido-final-form{

        padding:25px;

    }

    .pedido-grid{

        grid-template-columns:1fr;

    }

}

/* =========================
   MOVIL PEQUEÑO
========================= */

@media(max-width:768px){

    .pedido-hero{

        padding:140px 20px 50px;

    }

    .pedido-hero h1{

        font-size:42px;

    }

    .pedido-card{

        padding:20px;

    }

    .pedido-card h2{

        font-size:22px;

    }

    .vaciar-btn{

        width:100%;

    }

    .pedido-submit{

        height:60px;

        font-size:16px;

    }

}

.search-container{

    max-width:700px;

    margin:30px auto 50px;

    padding:0 15px;

}

#buscador{

    width:100%;

    height:65px;

    padding:0 25px;

    border:none;

    border-radius:18px;

    background:#111;

    color:white;

    font-size:18px;

    outline:none;

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

    transition:.3s;

}

#buscador:focus{

    border-color:#ff003c;

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

}

.info-envio{

    margin:20px 0;

    padding:18px;

    background:#111;

    border:1px solid #ff003c;

    border-radius:12px;

    color:#fff;

    text-align:center;

    font-weight:600;

    line-height:1.6;

}

@media(max-width: 768px){

    .checkout-layout{

        display:flex;

        flex-direction:column;

    }

    .pedido-section{

        order:1;

    }

    .pedido-total{

        order:2;

    }

    .pedido-form-section{

        order:3;

    }

}

.footer-contact a{
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    transition:all .3s ease;
}

.footer-contact a:hover{
    color:#ff4d4d;
    text-decoration:none;
}

.footer-contact span{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.footer-legal{
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}

.footer-legal a{
    color:#ffffff;
    text-decoration:none;
    transition:all .3s ease;
}

.footer-legal a:hover{
    color:#ff4d4d;
}

.instagram-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
    padding:8px 14px;
    border-radius:25px;
    color:#fff !important;
    font-weight:700;
    margin-top:5px;
    transition:transform .3s ease;
}

.instagram-link:hover{
    transform:translateY(-2px);
    color:#fff !important;
}

.catalogo-info{

    max-width:1000px;

    margin:25px auto 35px;

    padding:25px;

    border-radius:20px;

}

.catalogo-info h2{

    font-size:2rem;

    margin-bottom:10px;

}

.catalogo-text{

    font-size:1rem;

    line-height:1.5;

    margin-bottom:15px;

}

.catalogo-grid{

    gap:10px;

    margin-top:15px;

}

.catalogo-box{

    padding:10px;

    font-size:0.95rem;

}

.catalogo-highlight{

    margin-top:15px;

    padding:12px;

    font-size:0.95rem;

}

.liga-card{

    position:relative;
    overflow:hidden;

}

.liga-card::before{

    content:"";

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:.18;

}

.liga-card:nth-child(1)::before{
    background-image:url('../img/entrenamientocorto.jpg');
}

.liga-card:nth-child(2)::before{
    background-image:url('../img/entrenamientolargo.jpg');
}

.liga-card:nth-child(3)::before{
    background-image:url('../img/mediacremallera.jpg');
}

.liga-card{

    background:linear-gradient(
        135deg,
        #111,
        #1a1a1a
    );

    border:1px solid #333;

}

.catalogo-info{

    width:95%;

    max-width:1700px;

    margin:40px auto;

    padding:35px 40px;

    box-sizing:border-box;

}

.catalogo-grid{

    display:grid;

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

    gap:15px;

}

.version-fija,
.sin-personalizacion{

    padding:14px;

    background:#111;

    border:1px solid #333;

    border-radius:10px;

    color:#fff;

    font-weight:700;

    text-align:center;

}

.cookies a {
    color: #ffb800;
    font-weight: 700;
    text-decoration: none;
}

.cookies a:hover {
    text-decoration: underline;
}

.cookies {

    position: fixed;

    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 9999;

    width: calc(100% - 40px);
    max-width: 700px;
}

.cookies-content {

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

    padding: 18px 25px;

    background:
        rgba(15,15,15,.95);

    backdrop-filter: blur(15px);

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

    border-radius: 18px;

    box-shadow:
        0 0 40px rgba(0,0,0,.4);
}

.cookies span {

    color: #d4d4d4;

    font-size: 15px;

    line-height: 1.5;
}

.cookies a {

    color: #ffb800;

    text-decoration: none;

    font-weight: 700;
}

.cookies a:hover {

    text-decoration: underline;
}

.cookies button {

    border: none;

    min-width: 130px;

    height: 48px;

    border-radius: 12px;

    background:
        linear-gradient(135deg,
            #ff002b,
            #ff2348);

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;
}

.cookies button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 25px rgba(255,0,43,.35);
}

@media(max-width:768px){

    .cookies-content{

        flex-direction: column;

        text-align: center;
    }

    .cookies button{

        width: 100%;
    }

}

/* ================= TRUST BAR ================= */

.trust-bar {
    padding: 30px 40px;
    background: #050505;
}

.trust-grid {
    max-width: 1800px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.trust-item {
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.95));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 24px;
    text-align: center;
    transition: .3s;
}

.trust-item:hover {
    transform: translateY(-6px);
    border-color: rgba(255,0,43,.22);
    box-shadow: 0 0 35px rgba(255,0,43,.12);
}

.trust-item span {
    font-size: 34px;
    display: block;
    margin-bottom: 12px;
}

.trust-item p {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

@media(max-width:900px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:520px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

.trust-item h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.trust-item p {
    color: #cfcfcf;
    font-size: 17px;
    font-weight: 600;
}

.cta-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.cta-prices span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

.cta-prices strong {
    color: #ffb800;
}

.cta-social {

    margin-top: 15px;

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

    font-size: 16px;
}

.cta-social a {

    color: #ffb800;

    text-decoration: none;

    font-weight: 700;
}

.cta-social a:hover {

    color: #fff;
}

/* ================= HOME CATEGORIES ================= */

.home-categories {
    padding: 100px 60px;
    background:
        radial-gradient(circle at left, rgba(255, 0, 43, .12), transparent 35%),
        linear-gradient(180deg, #050505, #000);
}

.home-categories-title {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.home-categories-title span {
    display: inline-block;
    color: #ff002b;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.home-categories-title h2 {
    color: #fff;
    font-size: 64px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.home-categories-title p {
    color: #cfcfcf;
    font-size: 20px;
    line-height: 1.7;
}

.home-categories-grid {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.home-category-card {
    min-height: 260px;
    padding: 35px;
    border-radius: 30px;
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: .35s;
}

.home-category-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255,0,43,.25);
    box-shadow: 0 0 45px rgba(255,0,43,.14);
}

.home-category-card h3 {
    color: #fff;
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.home-category-card p {
    color: #cfcfcf;
    font-size: 18px;
}

@media(max-width:1000px) {
    .home-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:600px) {
    .home-categories {
        padding: 70px 20px;
    }

    .home-categories-title h2 {
        font-size: 42px;
    }

    .home-categories-grid {
        grid-template-columns: 1fr;
    }
}

.home-category-card {
    min-height: 340px;
    padding: 38px;
    border-radius: 34px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 0, 43, .20), transparent 35%),
        linear-gradient(145deg, rgba(18,18,18,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: .35s;
}

.home-category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,0,43,.14), transparent);
    opacity: 0;
    transition: .35s;
}

.home-category-card:hover::before {
    opacity: 1;
}

.home-category-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(255,0,43,.28);
    box-shadow: 0 0 55px rgba(255,0,43,.18);
}

.home-category-card span {
    position: absolute;
    top: 28px;
    right: 30px;
    font-size: 52px;
    filter: drop-shadow(0 0 18px rgba(255,255,255,.15));
}

.home-category-card h3,
.home-category-card p,
.home-category-card strong {
    position: relative;
    z-index: 2;
}

.home-category-card h3 {
    color: #fff;
    font-size: 38px;
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1.1;
}

.home-category-card p {
    color: #cfcfcf;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.home-category-card strong {
    color: #ffb800;
    font-size: 17px;
    text-transform: uppercase;
}

/* ================= HERO TAGS 5 GRANDES LIGAS ================= */

.ligas-hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}

.ligas-hero-tags span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

.ligas-hero-tags span:hover {
    border-color: rgba(255,0,43,.28);
    color: #ffb800;
}

/* ================= MEJORA CARDS LIGAS ================= */

.liga-card {
    gap: 25px;
}

.liga-card-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.liga-card-content p {
    color: #cfcfcf;
    font-size: 17px;
    line-height: 1.6;
    margin: 14px 0 24px;
}

.liga-card-content span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 13px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff002b, #ff2348);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 0 25px rgba(255, 0, 43, .25);
    transition: .3s;
}

.liga-card:hover .liga-card-content span {
    background: #ffb800;
    color: #000;
    transform: translateY(-3px);
}

.liga-page-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.liga-page-tags span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

.liga-page-tags span:hover {
    color: #ffb800;
    border-color: rgba(255,0,43,.28);
}

.quick-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 25px 20px 10px;
    background: #050505;
}

.quick-filters button {
    border: 1px solid rgba(255,255,255,.08);
    background: #111;
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.quick-filters button:hover {
    background: #ff002b;
    border-color: #ff002b;
    transform: translateY(-3px);
}

/* ================= SELECCIONES INFO ================= */

.selecciones-info {
    padding: 35px 60px 20px;
    background: #050505;
}

.selecciones-info-grid {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.selecciones-info-grid div {
    background:
        linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 26px;
    text-align: center;
}

.selecciones-info-grid strong {
    display: block;
    color: #fff;
    font-size: 36px;
    margin-bottom: 8px;
}

.selecciones-info-grid span {
    color: #cfcfcf;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

@media(max-width:900px) {
    .selecciones-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:520px) {
    .selecciones-info {
        padding: 25px 20px 10px;
    }

    .selecciones-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ================= PRECIOS CAMISETAS ================= */

.shirt-price {
    width: 100%;
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
}

.shirt-price p {
    color: #cfcfcf;
    font-size: 15px;
    margin-bottom: 6px;
}

.shirt-price p:last-child {
    margin-bottom: 0;
}

.shirt-price strong {
    color: #ffb800;
}

.no-resultados {
    display: none;
    text-align: center;
    color: #ffb800;
    font-size: 18px;
    font-weight: 700;
    padding: 25px;
    background: #050505;
}

.hero-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:25px;
}

.hero-tags span{
    padding:12px 20px;
    background:#111;
    border:1px solid #222;
    border-radius:30px;
    font-weight:700;
    color:white;
}

.retro-info {
    padding: 35px 60px 20px;
    background: #050505;
}

.retro-info-grid {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.retro-info-grid div {
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 26px;
    text-align: center;
}

.retro-info-grid strong {
    display: block;
    color: #fff;
    font-size: 30px;
    margin-bottom: 8px;
}

.retro-info-grid span {
    color: #cfcfcf;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

.no-resultados {
    display: none;
    text-align: center;
    color: #ffb800;
    font-size: 18px;
    font-weight: 700;
    padding: 25px;
    background: #050505;
}

.retro-whatsapp-box {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 35px;
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 28px;
    text-align: center;
}

.retro-whatsapp-box h3 {
    color: #fff;
    font-size: 34px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.retro-whatsapp-box p {
    color: #cfcfcf;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.retro-whatsapp-box a {
    display: inline-block;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 15px 28px;
    border-radius: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.conjuntos-info {
    padding: 35px 60px 20px;
    background: #050505;
}

.conjuntos-info-grid {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.conjuntos-info-grid div {
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 26px;
    text-align: center;
}

.conjuntos-info-grid strong {
    display: block;
    color: #fff;
    font-size: 34px;
    margin-bottom: 8px;
}

.conjuntos-info-grid span {
    color: #cfcfcf;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

@media(max-width:900px) {
    .conjuntos-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:520px) {
    .conjuntos-info {
        padding: 25px 20px 10px;
    }

    .conjuntos-info-grid {
        grid-template-columns: 1fr;
    }
}

.conjuntos-whatsapp {
    padding: 40px 60px 100px;
    background: #050505;
}

.conjuntos-whatsapp-box {
    max-width: 1200px;
    margin: auto;
    padding: 45px;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.06);
}

.conjuntos-whatsapp-box h2 {
    color: #fff;
    font-size: 42px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.conjuntos-whatsapp-box p {
    color: #cfcfcf;
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.conjuntos-whatsapp-box a {
    display: inline-block;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 16px 30px;
    border-radius: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.check-politica {
    display: block;
    color: #cfcfcf;
    font-size: 15px;
    line-height: 1.6;
    margin: 20px 0;
}

.check-politica input {
    margin-right: 8px;
}

.check-politica a {
    color: #ffb800;
    font-weight: 700;
    text-decoration: none;
}

.check-politica a:hover {
    text-decoration: underline;
}

/* ================= LEGAL PEDIDO ================= */

.pedido-legal-box{
    margin: 25px 0;
    padding: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
}

.pedido-check{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
}

.pedido-check input{
    width:20px;
    height:20px;
    margin-top:2px;
    accent-color:#ffb800;
}

.pedido-check span{
    color:#d8d8d8;
    font-size:15px;
    line-height:1.7;
}

.pedido-check a{
    color:#ffb800;
    text-decoration:none;
    font-weight:700;
}

.pedido-check a:hover{
    color:#ffffff;
}

.pedido-confianza{
    margin-top:18px;
    text-align:center;
    color:#9f9f9f;
    font-size:14px;
    line-height:1.6;
}

.pedido-vacio {
    grid-column: 1 / -1;
    padding: 50px 30px;
    text-align: center;
    background: linear-gradient(145deg, rgba(15,15,15,.98), rgba(0,0,0,.96));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
}

.pedido-vacio h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pedido-vacio p {
    color: #cfcfcf;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.pedido-vacio a {
    display: inline-block;
    background: #ff002b;
    color: #fff;
    text-decoration: none;
    padding: 15px 28px;
    border-radius: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.modal-error-pedido {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-error-pedido.active {
    display: flex;
}

.modal-error-box {
    max-width: 520px;
    width: 100%;
    background: #111;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 40px;
    text-align: center;
}

.modal-error-box h2 {
    color: #ff003c;
    font-size: 34px;
    margin-bottom: 14px;
}

.modal-error-box p {
    color: #d8d8d8;
    font-size: 17px;
    line-height: 1.7;
}

.modal-error-box button {
    margin-top: 28px;
    background: #ff003c;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.btn-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}

.pedido-submit.enviando {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    opacity: .85;
    cursor: not-allowed;
}

.pedido-submit.enviando .btn-loader {
    display: inline-block;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

.aduana-info {
    margin: 18px 0;
    padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}

.aduana-info summary {
    color: #ffb800;
    font-weight: 800;
    cursor: pointer;
}

.aduana-info p {
    color: #cfcfcf;
    font-size: 14px;
    line-height: 1.7;
    margin-top: 12px;
}

.pedido-submit{
    margin-top: 40px;
    position: sticky;
    bottom: 20px;
}