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

body {
    background-color: #070b12;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e0e0e0;
    overflow-x: hidden;
}

.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========== INTRO-BILDSCHIRM ========== */
#introScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #000b1a, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease;
}

.intro-logo img {
    width: 200px;
    animation: glowPulse 1s infinite alternate;
    filter: drop-shadow(0 0 20px #00aaff);
}

.intro-light {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,170,255,0.2) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    animation: rotateLight 3s linear;
}

@keyframes glowPulse {
    0% { filter: drop-shadow(0 0 5px #00aaff); transform: scale(1);}
    100% { filter: drop-shadow(0 0 30px #0077cc); transform: scale(1.05);}
}

@keyframes rotateLight {
    0% { transform: scale(1); opacity: 0.5;}
    100% { transform: scale(2); opacity: 0;}
}

/* ========== HEADER & MENÜ ========== */
#mainHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(7, 11, 18, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    transition: background 0.3s, backdrop-filter 0.3s;
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
}

.header-transparent {
    background: rgba(7, 11, 18, 0.4) !important;
    backdrop-filter: blur(4px);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo-area img {
    height: 70px;
}

.hList {
    display: flex;
    list-style: none;
    gap: 0;
}

.hList > li {
    position: relative;
}

.menu {
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.menu-title {
    display: block;
    width: 140px;
    height: 48px;
    padding: 12px 0 0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    color: white;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}

.menu-title:hover {
    border-color: #00aaff;
    box-shadow: 0 0 12px rgba(0, 170, 255, 0.8), inset 0 0 8px rgba(0, 170, 255, 0.4);
    animation: pulseBorder 1s infinite;
}

@keyframes pulseBorder {
    0% { border-color: #00aaff; box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); }
    50% { border-color: #33ccff; box-shadow: 0 0 18px rgba(0, 170, 255, 0.9); }
    100% { border-color: #00aaff; box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); }
}

.menu-title:before, .menu-title:after {
    display: none;
}

.dropdown-parent .menu-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0f1420;
    min-width: 100%;
    border-radius: 8px;
    padding: 0.5rem 0;
    list-style: none;
    text-align: center;
    z-index: 200;
    border: 1px solid #00aaff;
}

.dropdown-parent:hover .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-dropdown li {
    padding: 8px 12px;
    white-space: nowrap;
}

.menu-dropdown li a {
    color: #ddd;
    text-decoration: none;
    display: block;
}

.menu-dropdown li:hover {
    background: rgba(0, 170, 255, 0.2);
}

.menu-dropdown li:hover a {
    color: #00aaff;
}

/* ========== WARENKORB & SIDEBAR ========== */
.cart-icon-header {
    position: relative;
    cursor: pointer;
    font-size: 1.8rem;
    color: #ffaa00;
    margin-left: 1rem;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #ff3300;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 30%;
    height: 100vh;
    background: #0a0f18;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    z-index: 2000;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #00aaff;
}

.cart-sidebar.open { right: 0; }
.cart-header { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #00aaff; }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem; }
.cart-item { display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #333; }
.cart-item-actions button { background: none; border: none; color: #ff6600; cursor: pointer; margin: 0 5px; }
.cart-footer { padding: 1rem; display: flex; gap: 1rem; border-top: 1px solid #333; }
.cart-btn { flex: 1; padding: 0.6rem; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; }
.clear-btn { background: #ff3300; color: white; }
.checkout-btn { background: #00aaff; color: white; }

/* ========== SOCIAL MEDIA (HERO) ========== */
.social-vertical-hero {
    position: absolute;
    right: 20px;
    top: 26%;
    transform: translateY(-50%);
    z-index: 102;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #0f1420;
    border-radius: 50%;
    color: #00aaff;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0,170,255,0.3);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.social-circle:hover {
    transform: translateY(-5px);
    background: #00aaff;
    color: #fff;
    box-shadow: 0 8px 15px rgba(0,170,255,0.4);
}

.social-circle .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transform: scale(0);
    animation: ripple-effect 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-effect {
    to { transform: scale(4); opacity: 0; }
}

/* ========== HERO KARUSSELL ========== */
.hero-carousel {
    position: relative;
    margin-top: 80px;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 20px;
}

.carousel-container { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.slide.active { opacity: 1; z-index: 1; }
.slide video, .slide img { width: 100%; height: 150%; object-fit: cover; }
.slide-caption { position: absolute; bottom: 30px; left: 30px; background: rgba(0,0,0,0.7); padding: 15px; border-left: 5px solid #ff6600; z-index: 2; }
.slide-caption h3 { font-size: 1.8rem; color: #ffaa00; }
.slide-caption button { background: #00aaff; border: none; padding: 8px 20px; border-radius: 30px; color: white; cursor: pointer; }
.carousel-controls { position: absolute; bottom: 20px; right: 20px; z-index: 3; display: flex; gap: 10px; }
.carousel-controls button { background: rgba(0,0,0,0.5); border: none; color: white; font-size: 1.5rem; padding: 5px 12px; cursor: pointer; border-radius: 50%; }

/* ========== SECCIONES GENERALES & EFECTOS ========== */
.values-section,
.features-section,
.tech-showcase,
.integration-section,
.trust-section,
.support-section,
.balls-section,
.quality-section,
.company-intro,
.how-to-buy {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-radius: 25px;
    margin: 2rem 0;
    padding: 3rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: brightness(1) blur(0px);
}

.values-section::before,
.features-section::before,
.tech-showcase::before,
.integration-section::before,
.trust-section::before,
.support-section::before,
.balls-section::before,
.quality-section::before,
.company-intro::before,
.how-to-buy::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    border-radius: inherit;
    z-index: 1;
    transition: background 0.3s ease;
}

.values-section { background-image: url('assets/img9.jpg'); }
.features-section { background-image: url('https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.tech-showcase { background-image: url('assets/img7.jpeg'); }
.integration-section { background-image: url('https://images.pexels.com/photos/1181675/pexels-photo-1181675.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.trust-section { background-image: url('https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.support-section { background-image: url('assets/img5.png'); }
.balls-section { background-image: url('https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.quality-section { background-image: url('https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.company-intro { background-image: url('https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&cs=tinysrgb&w=1600'); }
.how-to-buy { background-image: url('assets/img2.png'); }

.values-section > *,
.features-section > *,
.tech-showcase > *,
.integration-section > *,
.trust-section > *,
.support-section > *,
.balls-section > *,
.quality-section > *,
.company-intro > *,
.how-to-buy > * {
    position: relative;
    z-index: 2;
}

.values-section:hover,
.features-section:hover,
.tech-showcase:hover,
.integration-section:hover,
.trust-section:hover,
.support-section:hover,
.balls-section:hover,
.quality-section:hover,
.company-intro:hover,
.how-to-buy:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(0, 170, 255, 0.3);
}

.section-title, h2, h3, p { text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: #ff6600; text-shadow: 0 0 5px #ff6600; }

/* ========== INTERIOR DE SECCIONES ========== */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; text-align: center; }
.value-card, .feature-item, .integration-card, .support-item, .step {
    background: rgba(16, 23, 37, 0.85);
    backdrop-filter: blur(4px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 170, 255, 0.1);
    transition: all 0.3s ease;
}
.value-card:hover, .feature-item:hover, .integration-card:hover, .support-item:hover, .step:hover {
    background: rgba(16, 23, 37, 0.95);
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0,170,255,0.2);
    border-color: #00aaff;
}

.value-icon { font-size: 3rem; color: #00aaff; margin-bottom: 1rem; }
.value-card h3 { font-size: 1.5rem; color: #ffaa00; margin-bottom: 1rem; }
.value-card p { color: #ccc; line-height: 1.5; }

.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { font-size: 2rem; color: #ff6600; margin-bottom: 1rem; }
.section-header p { color: #bbb; max-width: 700px; margin: 0 auto; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.feature-item i { font-size: 2.5rem; color: #00aaff; margin-bottom: 1rem; }
.feature-item h3 { font-size: 1.25rem; color: #ffaa00; margin-bottom: 0.5rem; }
.feature-item p { color: #ccc; font-size: 0.9rem; line-height: 1.4; }

.tech-showcase { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.tech-content { flex: 1; }
.tech-content h2 { font-size: 2rem; color: #00aaff; margin-bottom: 1rem; }
.tech-content p { color: #ccc; margin-bottom: 1.5rem; line-height: 1.6; }
.tech-content ul { list-style: none; padding-left: 0; }
.tech-content ul li { margin-bottom: 0.75rem; padding-left: 1.8rem; position: relative; color: #ddd; }
.tech-content ul li:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: #ff6600; }
.tech-media { flex: 1; }

.tech-placeholder {
    background: linear-gradient(135deg, #1a2538, #0f1420);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    border: 2px solid rgba(0, 170, 255, 0.3);
    transition: all 0.3s ease;
}
.tech-placeholder:hover { border-color: #00aaff; box-shadow: 0 0 20px rgba(0, 170, 255, 0.3); }
.tech-placeholder i { font-size: 4rem; color: #00aaff; margin-bottom: 1rem; }
.tech-placeholder p { color: #aaa; }

.integration-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.integration-card { padding: 1.5rem; text-align: center; }
.integration-card i { font-size: 2rem; color: #ff6600; margin-bottom: 1rem; }
.integration-card h3 { color: #00aaff; margin-bottom: 0.5rem; }
.integration-card p { color: #ccc; font-size: 0.85rem; }

.trust-section { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.trust-text { flex: 1; }
.trust-text h2 { font-size: 1.8rem; color: #ff6600; margin-bottom: 1rem; }
.trust-text p { color: #ccc; margin-bottom: 1.5rem; line-height: 1.6; }
.trust-text ul { list-style: none; padding-left: 0; }
.trust-text ul li { margin-bottom: 0.75rem; padding-left: 1.8rem; position: relative; color: #ddd; }
.trust-text ul li:before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: #00aaff; }
.trust-image { flex: 1; }
.trust-image img { width: 100%; border-radius: 20px; box-shadow: 0 0 25px rgba(0, 170, 255, 0.3); transition: transform 0.3s; }
.trust-image img:hover { transform: scale(1.02); }

.support-section { text-align: center; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.support-item { padding: 1.2rem; border-radius: 12px; }
.support-item i { font-size: 2rem; color: #ff6600; margin-bottom: 0.5rem; }
.support-item p { color: #ccc; font-size: 0.9rem; }

.balls-section { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.balls-content { flex: 1; }
.balls-content h2 { font-size: 1.8rem; color: #00aaff; margin-bottom: 1rem; }
.balls-content p { color: #ccc; margin-bottom: 1rem; line-height: 1.5; }
.btn-secondary { display: inline-block; background: transparent; border: 2px solid #ff6600; color: #ff6600; padding: 0.8rem 2rem; border-radius: 40px; font-weight: bold; text-decoration: none; transition: all 0.3s; margin-top: 1rem; }
.btn-secondary:hover { background: #ff6600; color: #fff; transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 102, 0, 0.5); }
.balls-image { flex: 1; }
.balls-image img { width: 100%; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 170, 255, 0.3); }

.quality-section { text-align: center; }
.quality-text i { font-size: 3rem; color: #00aaff; margin-bottom: 1rem; }
.quality-text h3 { font-size: 1.5rem; color: #ffaa00; margin-bottom: 1rem; }
.quality-text p { max-width: 700px; margin: 0 auto; color: #ccc; }

.company-intro { display: flex; align-items: center; gap: 2rem; }
.intro-text { flex: 1; }
.intro-text h2 { font-size: 2rem; color: #00aaff; margin-bottom: 1rem; }
.intro-image img { width: 100%; max-width: 350px; border-radius: 20px; box-shadow: 0 0 20px rgba(0,170,255,0.3); }

.how-to-buy { text-align: center; }
.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2rem; }
.step { padding: 1.5rem; border-radius: 30px; width: 200px; text-align: center; }
.step i { font-size: 2.5rem; color: #ff6600; margin-bottom: 1rem; }

/* ========== PRODUCTOS (TARJETAS ESTÁNDAR) ========== */
.products-section { padding: 2rem 0; background: transparent; margin: 2rem 0; }
.alt-bg { background: #0c1220; border-radius: 20px; margin: 1rem 0; padding: 2rem; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.card { background: #101725; border-radius: 15px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #00aaff44; }
.card:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0,170,255,0.2); }
.card img { width: 100%; height: 180px; object-fit: cover; }
.card-body { padding: 1rem; }
.card-body h3 { color: #ffaa00; }
.card-body p { margin: 0.5rem 0; color: #ccc; }
.card-body ul { padding-left: 1.2rem; font-size: 0.85rem; }
.card-buttons { display: flex; gap: 0.5rem; margin-top: 1rem; }
.card-buttons button { flex: 1; background: #00aaff; border: none; padding: 8px; border-radius: 30px; color: white; cursor: pointer; transition: 0.2s; }
.card-buttons button:last-child { background: #ff6600; }

/* ========== NUEVA SECCIÓN: TARJETAS HORIZONTALES ========== */
.horizontal-products-section {
    margin: 2rem 0 3rem 0;
}

.horizontal-cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.horizontal-card {
    display: flex;
    flex-wrap: wrap;
    background: #101725;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 35px -12px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 170, 255, 0.2);
}

.horizontal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 40px -12px rgba(0, 170, 255, 0.3);
    border-color: #00aaff;
}

.card-img-left {
    flex: 0 0 260px;
    background: #0a0f18;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-img-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.card-info-right {
    flex: 1;
    padding: 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #ffaa00;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ff6600;
    margin: 0.5rem 0;
}

.product-desc {
    color: #ccc;
    margin: 0.5rem 0;
    line-height: 1.4;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1rem 0;
}

.feature-list li {
    background: #1e2538;
    padding: 0.2rem 0.8rem;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ddd;
}

.card-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-more, .btn-add-cart {
    padding: 0.7rem 1.6rem;
    border-radius: 40px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
}

.btn-more {
    background: #2c3e50;
    color: white;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-more:hover {
    background: #00aaff;
    transform: scale(1.02);
}

.btn-add-cart {
    background: #ff6600;
    color: white;
}

.btn-add-cart:hover {
    background: #e67e22;
    transform: scale(1.02);
}

/* ========== FOOTER ========== */
.main-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #03060c;
    padding: 2rem;
    gap: 2rem;
    border-top: 1px solid #00aaff;
    border-radius: 20px 20px 0 0;
    margin-top: 2rem;
}
.footer-col { flex: 1; min-width: 200px; }
.footer-social a { display: block; color: #ccc; margin: 0.5rem 0; text-decoration: none; }
.promo-card-footer { display: flex; gap: 10px; align-items: center; }
.promo-card-footer img { width: 60px; height: 60px; border-radius: 10px; }
.promo-btn { background: #ff6600; padding: 4px 10px; border-radius: 20px; color: white; text-decoration: none; font-size: 0.8rem; }

/* ========== MODAL ========== */
.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
.modal-content { background: #0f1420; width: 90%; max-width: 500px; padding: 2rem; border-radius: 20px; border: 1px solid #00aaff; }
.close-modal { float: right; font-size: 1.5rem; cursor: pointer; }
.modal-content input, .modal-content select { width: 100%; padding: 10px; margin: 10px 0; background: #1e2538; border: 1px solid #00aaff; color: white; border-radius: 8px; }
.submit-order { background: #25d366; color: white; width: 100%; padding: 10px; border: none; border-radius: 30px; font-weight: bold; cursor: pointer; }

/* ========== RESPONSIVE (MEDIA QUERIES) ========== */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1100;
}
.hamburger-menu span {
    width: 28px;
    height: 3px;
    background: #fff;
    transition: 0.3s;
    border-radius: 2px;
}

@media (max-width: 992px) {
    .hamburger-menu { display: flex; }
    .main-nav {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 70px);
        background: rgba(7, 11, 18, 0.98);
        backdrop-filter: blur(12px);
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        padding: 1rem;
        border-right: 1px solid #00aaff;
    }
    .main-nav.active { left: 0; }
    .hList { flex-direction: column; gap: 0.5rem; }
    .menu-title { width: 100%; text-align: left; padding-left: 1rem; border: none; }
    .dropdown-parent .menu-dropdown {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: transparent; border: none; padding-left: 1.5rem; display: none;
    }
    .dropdown-parent.active-dropdown .menu-dropdown { display: block; }
    .dropdown-parent > a { display: flex; justify-content: space-between; align-items: center; }
    .dropdown-parent > a:after {
        content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
        margin-right: 1rem; transition: transform 0.3s;
    }
    .dropdown-parent.active-dropdown > a:after { transform: rotate(180deg); }
    .social-vertical-hero { top: 20%; right: 10px; gap: 0.5rem; }
    .social-circle { width: 40px; height: 40px; font-size: 1.2rem; }
    .cart-sidebar { width: 100%; }
    .company-intro { flex-direction: column; }
    .hero-carousel { height: 300px; }
    .values-section, .features-section, .tech-showcase, .integration-section, .trust-section, .support-section, .balls-section, .quality-section, .company-intro, .how-to-buy {
        padding: 2rem 1rem;
    }
}

@media (max-width: 768px) {
    .values-grid, .features-grid, .integration-section { gap: 1rem; }
    .tech-showcase, .trust-section, .balls-section { flex-direction: column; text-align: center; }
    .tech-content ul li, .trust-text ul li { text-align: left; }
    .section-header h2 { font-size: 1.5rem; }
    .support-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 750px) {
    .horizontal-card { flex-direction: column; }
    .card-img-left { flex: 0 0 220px; }
    .card-info-right { padding: 1.5rem; }
}
/* =========================================
   BOTÓN FLOTANTE TEMA CLARO/OSCURO
   ========================================= */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Situado a la izquierda para no estorbar con iconos de chat si los hay */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00aaff;
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 170, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    background: #ff6600;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.5);
}

/* =========================================
   ESTILOS TEMA CLARO (.light-mode)
   ========================================= */
body.light-mode {
    background-color: #f4f7f6;
    color: #333333;
}
.hamburger-menu span {
    width: 28px;
    height: 3px;
    background: #0400fe;
    transition: 0.3s;
    border-radius: 2px;
}
/* Cabecera y Menú */
body.light-mode #mainHeader {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
}
body.light-mode .header-transparent {
    background: rgba(255, 255, 255, 0.7) !important;
}
body.light-mode .menu-title {
    color: #111;
}
body.light-mode .dropdown-parent .menu-dropdown {
    background: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
body.light-mode .menu-dropdown li a {
    color: #333;
}

/* SECCIONES CON IMÁGENES DE FONDO (El truco para mantener las imágenes) */
body.light-mode .values-section::before,
body.light-mode .features-section::before,
body.light-mode .tech-showcase::before,
body.light-mode .integration-section::before,
body.light-mode .trust-section::before,
body.light-mode .support-section::before,
body.light-mode .balls-section::before,
body.light-mode .quality-section::before,
body.light-mode .company-intro::before,
body.light-mode .how-to-buy::before {
    /* Cambiamos el fondo oscuro a uno blanco semitransparente */
    background: rgba(255, 255, 255, 0.85); 
}

/* Textos generales para el modo claro */
body.light-mode h2,
body.light-mode h3,
body.light-mode .section-title,
body.light-mode .section-subtitle {
    text-shadow: none;
}
body.light-mode p, 
body.light-mode .card-body p, 
body.light-mode .product-desc, 
body.light-mode .tech-content ul li,
body.light-mode .trust-text ul li {
    color: #444;
    text-shadow: none;
}

/* Tarjetas (Productos, Valores, Promos, Ayuda, Instructivos) */
body.light-mode .value-card,
body.light-mode .feature-item,
body.light-mode .integration-card,
body.light-mode .support-item,
body.light-mode .step,
body.light-mode .card,
body.light-mode .horizontal-card,
body.light-mode .promo-card,
body.light-mode .instructivo-card,
body.light-mode .help-card,
body.light-mode .faq-item,
body.light-mode .step-item {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

body.light-mode .feature-list li,
body.light-mode .promo-features li {
    background: #e0e8f5;
    color: #333;
}

/* Fondos secundarios de componentes de tarjetas */
body.light-mode .card-img-left,
body.light-mode .promo-img,
body.light-mode .instructivo-img,
body.light-mode .alt-bg {
    background: #f4f7f6;
}

/* Carrito lateral */
body.light-mode .cart-sidebar {
    background: #f4f7f6;
    border-left: 2px solid #00aaff;
    color: #333;
}
body.light-mode .cart-item {
    border-bottom: 1px solid #ccc;
}

/* Formularios y Modales */
body.light-mode .modal-content,
body.light-mode .email-modal-content,
body.light-mode .contact-form-container {
    background: #ffffff;
    color: #333;
    border: 1px solid #ccc;
}
body.light-mode .modal-content input,
body.light-mode .modal-content select,
body.light-mode .email-modal-content input,
body.light-mode .contact-form-container input,
body.light-mode .contact-form-container textarea,
body.light-mode .contact-form-container select {
    background: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
}

/* Pie de página */
body.light-mode .main-footer {
    background: #e9ecef;
    border-top: 1px solid #ccc;
    color: #333;
}
body.light-mode .footer-social a {
    color: #555;
}

/* Mejor legibilidad en el caption del carrusel */
body.light-mode .slide-caption {
    background: rgba(255, 255, 255, 0.85);
}
body.light-mode .slide-caption h3 {
    color: #ff6600;
}