@font-face {
    font-family: 'Inter';
    src: url('fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

:root {
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #a1a1a6;
    --font-main: 'Inter', sans-serif;
}

/* ============================================
   LIGHT MODE - Apple-style clean & polished
   ============================================ */

/* Transicion suave al cambiar de tema */
body, body.light-mode .navbar, body.light-mode .wt-card, body.light-mode .tip-card,
body.light-mode .review-card-original, body.light-mode .accordion-header-original,
body.light-mode .single-menu-pill, body.light-mode .folder-tab, body.light-mode .folder-body,
body.light-mode .subservice-btn-original, body.light-mode .selector-btn-original,
body.light-mode .dropdown-floating-menu, body.light-mode .map-card,
body.light-mode .downloads-list-container, body.light-mode .downloads-item,
body.light-mode .btn-review-original, body.light-mode .share-float,
body.light-mode .wt-footer, body.light-mode .contact-card-section {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

body.light-mode {
    --bg-color: #f5f5f7;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    background-color: var(--bg-color);
    color: var(--text-primary);
}

/* Navbar - glassmorphism clean */
body.light-mode .navbar {
    background: rgba(245,245,247,0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
body.light-mode .logo-text { color: #1d1d1f; }
body.light-mode .logo-text span { color: #f44401; }
body.light-mode .desktop-menu a { color: #1d1d1f; font-weight: 500; }
body.light-mode .desktop-menu a:hover { color: #f44401; }
body.light-mode .hamburger, body.light-mode .theme-toggle { color: #1d1d1f; }
body.light-mode .theme-toggle:hover { background: rgba(0,0,0,0.05); }

/* Hero - clean gradient */
body.light-mode .hero-bg { filter: brightness(1.05) saturate(0.9); }
body.light-mode .hero-bg::after {
    background: linear-gradient(to bottom, rgba(245,245,247,0.15) 0%, rgba(245,245,247,0.05) 40%, rgba(245,245,247,0.6) 75%, #f5f5f7 100%);
}
body.light-mode .hero-content h1 { color: #1d1d1f; text-shadow: 0 1px 8px rgba(255,255,255,0.5); }
body.light-mode .hero-subtitle { color: #1d1d1f; }
body.light-mode .hero-subtitle-divider { color: #86868b; }
body.light-mode .hero-subtitle-white { color: #1d1d1f; }
body.light-mode .hero-subtitle-plus, body.light-mode .hero-orange-text { color: #f44401; }
body.light-mode .hero-cta-btn {
    background: #f44401;
    color: #fff;
    border: none;
    box-shadow: 0 2px 12px rgba(244,68,1,0.3);
}
body.light-mode .hero-cta-btn:hover {
    background: #e03e00;
    box-shadow: 0 4px 20px rgba(244,68,1,0.4);
}

/* Headings */
body.light-mode h2 { color: #1d1d1f; }
body.light-mode .sedes-section h2 { color: #1d1d1f; }

/* Cards - soft shadows Apple style */
body.light-mode .wt-card {
    background: rgba(255,255,255,0.72) !important;
    border: 0.5px solid rgba(0,0,0,0.06) !important;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode .wt-card:hover {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}
body.light-mode .wt-card h3, body.light-mode .wt-card-title { color: #1d1d1f; }
body.light-mode .wt-card-desc { color: #6e6e73; }
body.light-mode .wt-card-footer { background: rgba(0,0,0,0.02); border-top-color: rgba(0,0,0,0.06); }
body.light-mode .wt-card-footer .wt-footer-main { color: #1d1d1f; }
body.light-mode .wt-card-footer .wt-footer-sub { color: #86868b; }
body.light-mode .badge-mas-pedidos { background: #f44401; color: #fff; box-shadow: 0 2px 8px rgba(244,68,1,0.3); }

/* Tip Cards */
body.light-mode .tip-card {
    background: rgba(255,255,255,0.72) !important;
    border: 0.5px solid rgba(0,0,0,0.06) !important;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode .tip-card:hover {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}
body.light-mode .tip-card h3 { color: #1d1d1f; }
body.light-mode .tip-desc { color: #6e6e73; }
body.light-mode .tip-btn { color: #86868b; }
body.light-mode .tip-card:hover .tip-btn { color: #1d1d1f; }

/* Folder Tabs - keep dark mode appearance */
body.light-mode .folder-tab {
    background: rgba(42,42,46,0.98);
    border-color: rgba(255,255,255,0.08);
    color: #666;
}
body.light-mode .folder-tab:hover { color: #999; }
body.light-mode .folder-tab.active {
    background: rgba(30,30,32,0.98);
    color: #fff;
    border-color: rgba(30,30,32,0.98);
    box-shadow: none;
}
body.light-mode .folder-body {
    background: rgba(30,30,32,0.98);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Selector / Pills - keep dark */
body.light-mode .selector-pill-original {
    background: rgba(28,28,30,0.7);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}
body.light-mode .subservices-container-original { background: transparent; }
body.light-mode .subservice-btn-original {
    background: rgba(255,255,255,0.04);
    color: #a1a1a6;
    border-color: rgba(255,255,255,0.06);
}
body.light-mode .subservice-btn-original:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: none;
}
body.light-mode .subservice-btn-original.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
body.light-mode .selector-btn-original {
    background: rgba(255,255,255,0.04);
    color: #a1a1a6;
    border-color: rgba(255,255,255,0.06);
}
body.light-mode .selector-btn-original:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: none;
}

/* Dropdown / Single Menu Pill - keep dark */
body.light-mode .single-menu-pill {
    background: #131314;
    border-color: rgba(255,255,255,0.06);
    box-shadow: none;
}
body.light-mode .single-menu-pill.has-value {
    background: #131314;
    border-color: rgba(255,255,255,0.06);
}
body.light-mode .single-menu-pill:not(.has-value):hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
}
body.light-mode .dropdown-selected-value { color: #a1a1a6; }
body.light-mode .dropdown-selected-value.has-value { color: #fff; }
body.light-mode .dropdown-arrow-box { border-left-color: rgba(255,255,255,0.08); color: #a1a1a6; }
body.light-mode .single-menu-pill.has-value .dropdown-arrow-box { color: #fff; border-left-color: rgba(255,255,255,0.22); }
body.light-mode .dropdown-floating-menu {
    background: #0e0e0f;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.light-mode .dropdown-menu-item {
    color: #a1a1a6;
    background: #181819;
    border-color: rgba(255,255,255,0.06);
}
body.light-mode .dropdown-menu-item:hover { background: #202021; color: #fff; }
body.light-mode .dropdown-menu-item.active { background: #2b2b2c; color: #fff; }

/* Reviews Section - Premium Light Mode */
body.light-mode .reviews-section {
    background: transparent;
    border-top-color: rgba(0,0,0,0.06);
}
body.light-mode .review-card-original {
    background: rgba(255,255,255,0.75) !important;
    border: 0.5px solid rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}
body.light-mode .review-card-original:hover {
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .review-header-original { margin-bottom: 8px; }
body.light-mode .review-author-original h4 { color: #1d1d1f !important; font-weight: 600; }
body.light-mode .review-author-original span { color: #6e6e73 !important; }
body.light-mode .google-icon-original { color: #4285F4 !important; }
body.light-mode .review-text {
    color: #3a3a3c !important;
    line-height: 1.55;
}
body.light-mode .review-readmore {
    color: #86868b !important;
    font-weight: 500;
}
body.light-mode .review-readmore:hover { color: #f44401 !important; }
body.light-mode .stars-original { color: #fbbc04 !important; }
body.light-mode .verified-badge-original { color: #24b6f7 !important; }
body.light-mode .verified-badge-original i { color: #24b6f7 !important; }
body.light-mode .avatar-original { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Badge (Google rating) - Light Mode */
body.light-mode .badge-logo-container-original {
    background: #fff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    color: #1d1d1f !important;
}
body.light-mode .badge-title-container-original h4 { color: #1d1d1f !important; }
body.light-mode .rating-number-badge-original { color: #1d1d1f !important; }
body.light-mode .rating-text-original { color: #1d1d1f !important; }
body.light-mode .reviews-count-original { color: #6e6e73 !important; }
body.light-mode .btn-review-original {
    border-color: rgba(0,0,0,0.15) !important;
    color: #1d1d1f !important;
    background: transparent !important;
}
body.light-mode .btn-review-original:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.25) !important;
}
body.light-mode .btn-review-original:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.2);
}

/* Navigation Arrows */
body.light-mode .tips-prev-btn, body.light-mode .tips-next-btn {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.light-mode .tips-prev-btn:hover, body.light-mode .tips-next-btn:hover {
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .review-nav-btn {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-mode .review-nav-btn:hover {
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* FAQ / Accordion */
body.light-mode .faq-container-original { border-top-color: rgba(0,0,0,0.06) !important; }
body.light-mode .accordion-header-original {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1d1d1f !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.light-mode .accordion-header-original:hover {
    background: rgba(255,255,255,1) !important;
    border-color: rgba(0,0,0,0.12) !important;
}
body.light-mode .accordion-header-original i { color: #1d1d1f !important; }
body.light-mode .accordion-content-original p { color: #3a3a3c !important; }

/* Map */
body.light-mode .map-card {
    background: #fff;
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-mode .map-iframe { filter: none; }
body.light-mode .map-container h2 { color: #1d1d1f; }

/* Contact Card */
body.light-mode .contact-card-section { background: transparent; color: #1d1d1f; }
body.light-mode .contact-card-image-box { border-color: rgba(0,0,0,0.06); }

/* Downloads */
body.light-mode .downloads-list-container {
    background: rgba(255,255,255,0.5);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
body.light-mode .downloads-item {
    color: #1d1d1f;
    background: rgba(255,255,255,0.5);
    border-color: rgba(0,0,0,0.04);
}
body.light-mode .downloads-item:hover { background: rgba(255,255,255,0.8); }
body.light-mode .downloads-item i, body.light-mode .downloads-item svg { color: #6e6e73; }

/* Footer */
body.light-mode .wt-footer {
    background: #fff;
    border-top-color: rgba(0,0,0,0.06);
}
body.light-mode .footer-logo-text { color: #1d1d1f !important; }
body.light-mode .wt-footer span { color: #1d1d1f !important; }
body.light-mode .wt-footer-social span { color: #1d1d1f !important; }
body.light-mode .wt-footer-social .seguime-btns a {
    color: #1d1d1f !important;
    border-color: rgba(0,0,0,0.15) !important;
    background: rgba(0,0,0,0.04) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-mode .wt-footer-social .seguime-btns a:hover {
    background: rgba(244,68,1,0.08) !important;
    border-color: rgba(244,68,1,0.4) !important;
    color: #f44401 !important;
    box-shadow: 0 2px 8px rgba(244,68,1,0.15);
}
body.light-mode .wt-copyright { color: #6e6e73; }
body.light-mode .asterisk-link { color: rgba(0,0,0,0.35); }
body.light-mode .footer-disclaimer { color: #6e6e73; }
body.light-mode .tips-disclaimer, body.light-mode .tips-disclaimer-inline { color: #6e6e73; border-top-color: rgba(0,0,0,0.06); }

/* Tooltips / Floats */
body.light-mode .share-float {
    background: rgba(255,255,255,0.9);
    color: #6e6e73;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
body.light-mode .share-float:hover { color: #1d1d1f; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
body.light-mode .whatsapp-tooltip, body.light-mode .telegram-tooltip, body.light-mode .messenger-tooltip {
    background: rgba(255,255,255,0.95);
    color: #1d1d1f;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Mobile Menu */
body.light-mode .mobile-menu-overlay {
    background: rgba(245,245,247,0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(0,0,0,0.06);
}
body.light-mode .mobile-menu-links a { color: #1d1d1f; border-bottom-color: rgba(0,0,0,0.06); }
body.light-mode .mobile-menu-links a:hover, body.light-mode .mobile-menu-links a.active {
    background-color: rgba(244,68,1,0.06);
    color: #f44401;
}

/* Dots */
body.light-mode .card-dots .dot { background: rgba(0,0,0,0.15); }
body.light-mode .card-dots .dot.active { background: #1d1d1f; }

/* Disclaimer */
body.light-mode .footer-disclaimer-bottom { color: #6e6e73; }

/* Scrollbar light mode */
body.light-mode ::-webkit-scrollbar { width: 8px; }
body.light-mode ::-webkit-scrollbar-track { background: transparent; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* Accessibility: Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: #f44401;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* Accessibility: Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Focus-visible styles */
*:focus-visible {
    outline: 2px solid #f44401;
    outline-offset: 2px;
}

body, h1, h2, h3, h4, h5, h6, input, button, select, textarea, span, a {
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Navbar */
.navbar { position: absolute; top: 0; width: 100%; z-index: 10; padding: 25px 0; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }
.logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.7px;
    line-height: 1.05;
}
.logo-text span {
    color: #f44401;
    margin-left: 6px;
    font-weight: 500;
}
.desktop-menu { display: none; }
    .nav-right-btns { display: flex; align-items: center; gap: 24px; }
.hamburger { display: block; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }
.theme-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 6px; border-radius: 8px; transition: color 0.3s, background 0.3s; }
.theme-toggle:hover { background: rgba(255,255,255,0.1); }

/* Hero */
.hero { position: relative; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 40px; }
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('images/fondo.png') no-repeat;
    background-size: auto 150%;
    background-position: center 80%;
    z-index: 1; filter: brightness(1);
}
.hero-bg::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, #000000 100%); z-index: 2;
}
.hero-content { position: relative; z-index: 3; text-align: center; width: 100%; max-width: 1200px; padding: 0 20px; margin-top: 0; overflow: hidden !important; }
.hero-main-layout {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 16px;
    width: 100%;
}
.hero-logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 100% !important;
    flex-shrink: 0;
    overflow: hidden !important;
}
.hero-text-box {
    display: flex;
    flex-direction: column;
    align-items: center !important; /* Centrado interno del bloque */
    text-align: center !important;
    /* flex-grow eliminado para evitar que se separen */
}
@keyframes floatHeroLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.hero-content h1 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-align: center;
    margin-bottom: 6px;
}
.hero-orange-text {
    color: #f44401 !important;
}
.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f44401;
    margin-top: 0;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.4;
}
.hero-subtitle-divider {
    color: #ffffff !important; /* Barra divisoria en blanco */
    font-weight: 700 !important;
    margin: 0 4px !important;
}
.hero-subtitle-plus {
    color: #f44401 !important; /* Signo + en naranja */
    font-weight: 700 !important;
}
.hero-subtitle-white {
    color: #ffffff !important; /* "1000 EQUIPOS REPARADOS" en blanco */
    font-weight: 700 !important;
}
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f44401;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 0px;
    transition: all 0.3s ease;
}
.hero-cta-btn i {
    font-size: 16px;
    /* Color verde removido para que sea blanco original */
}
.hero-cta-btn:hover {
    background: #d93c00;
    border-color: #fff;
    transform: translateY(-2px);
}
.hero-cta-btn:active {
    transform: scale(0.96);
}

/* General Titles */
h2 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    padding: 0 20px;
    margin-bottom: 15px;
    color: #fff;
    letter-spacing: -0.7px;
}
#equipos-section h2 {
    margin-top: 10px !important; /* Pegar más el título a la sección de arriba */
    margin-bottom: 45px !important; /* Incrementar espacio libre hacia el menú */
}

/* Sedes Section */
/* Tips & Mantenimiento Section (Estilo Premium) */
.sedes-section {
    padding: 35px 0;
    position: relative;
    width: 100%;
    overflow: visible;
}
.tips-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 20px;
}
.tips-header-row h2 {
    padding: 0;
    margin: 0;
}
.slider-arrows {
    display: flex;
    gap: 8px;
}
.slider-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}
.slider-arrow:active {
    transform: scale(0.95);
}
/* Wrapper del Slider */
.tips-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Flechas en los Extremos */
.tips-prev-btn, .tips-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(21, 21, 21, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: none !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 768px) {
    .tips-prev-btn, .tips-next-btn {
        display: flex !important;
    }
}
.tips-prev-btn {
    left: 10px;
}
.tips-next-btn {
    right: 10px;
}
.tips-prev-btn:hover, .tips-next-btn:hover {
    background: rgba(38, 38, 40, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.08) !important; /* Mantiene centrado vertical y escala */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.tips-prev-btn:active, .tips-next-btn:active {
    background: rgba(24, 24, 26, 0.9) !important;
    transform: translateY(-50%) scale(0.95) !important;
}

.tips-container {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding: 0 20px 15px !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
    width: 100% !important;
    align-items: flex-start !important;
    scroll-snap-type: x mandatory !important;
}
.tips-container::-webkit-scrollbar {
    display: none;
}

/* Tip Card (Estilo Premium) */
.tip-card {
    background: rgba(28, 28, 30, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    border-radius: 16px;
    padding: 12px 12px 12px 17px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    width: 340px !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    scroll-snap-align: start;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
    position: relative !important;
}
.tip-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 7px !important;
    background: #f44401 !important;
    border-radius: 16px 0 0 16px !important;
}
.tip-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.25) !important; /* Borde blanco sutil como wt-card */
    background: rgba(38, 38, 40, 0.85) !important; /* Fondo hover de wt-card */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; /* Sombreado de wt-card */
}
.tip-card:active {
    transform: scale(0.97) translateY(-2px) !important;
    background: rgba(24, 24, 26, 0.9) !important;
}
.tip-img-box {
    width: 80px !important;
    min-width: 80px !important;
    height: 80px !important;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0 !important;
}
.tip-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.tip-card:hover .tip-img-box img {
    transform: scale(1.06);
}
.tip-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    text-align: left !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
}
.tip-card h3 {
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0 !important;
    line-height: 1.3;
    text-align: left !important;
    flex-shrink: 0 !important;
}
.tip-desc {
    font-size: 13px;
    color: #d1d1d6;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.5;
    flex-grow: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0 !important;
}
.tip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px;
    font-weight: 500;
    color: #b0b0b5 !important;
    text-align: left !important;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tip-card:hover .tip-btn {
    color: #fff !important;
}

/* Disclaimer / Letra chica */
.tips-disclaimer, .tips-disclaimer-inline {
    font-size: 11px;
    color: #9e9ea3;
    line-height: 1.5;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.tips-disclaimer { text-align: center; max-width: 90%; margin: 15px auto 0; padding: 0 20px; padding-top: 15px; }
.tips-disclaimer-inline { text-align: left; max-width: 100%; margin: 0 0 0 0; padding: 2px 20px 0 20px; }
#tips-section.sedes-section { padding-bottom: 0; }
@media (min-width: 768px) {
    .tips-disclaimer-inline { text-align: center; }
}
.desktop-only { display: none !important; }
.mobile-only { display: block !important; }

/* Equipos (Reparaciones) Mobile */
.wt-devices-section { padding: 20px 0; }

/* Menu Selector (Pill Style) */
.selector-container-original {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}
.selector-pill-original {
    position: relative;
    display: flex; /* Cambiado a flex para repartir el espacio */
    background: rgba(28, 28, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 4px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 320px; /* Ancho súper compacto y elegante para PC y Celular */
    max-width: calc(100% - 40px); /* Adaptable a pantallas muy chicas */
    box-sizing: border-box;
}
.selector-bg-slide-original {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: 0; /* Set dynamically by JS */
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    will-change: transform, width; /* Aceleración GPU */
}
.selector-pill-original.ready .selector-bg-slide-original {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.selector-btn-original {
    position: relative;
    background: transparent;
    border: none;
    color: #a1a1a6;
    padding: 10px 10px; /* Relleno ajustado */
    font-size: 14px;
    font-weight: 600;
    border-radius: 26px;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
    font-family: inherit;
    flex: 1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.selector-btn-original:hover {
    color: #fff;
}

/* ==================== ESTILO CARPETA CON PESTAÑAS ==================== */
/* ==================== CARPETA FÍSICA ==================== */
.folder-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px auto;
    position: relative;
}

/* Contenedor de las solapas (positioned above the body) */
.folder-tabs {
    display: flex;
    position: relative;
    z-index: 2;
    height: 38px;
    padding: 0;
    margin-bottom: -1px;
    gap: 0;
    padding-left: 6px;
    align-items: flex-end;
}

/* Cada solapa */
.folder-tab {
    position: relative;
    background: rgba(42, 42, 46, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    padding: 0 16px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 10px 10px 0 0;
}

.folder-tab:hover {
    color: #999;
}

/* Solapa activa = MISMO color que el cuerpo, SIN borde inferior = una misma hoja */
.folder-tab.active {
    background: rgba(30, 30, 32, 0.98);
    color: #fff;
    font-weight: 600;
    border-color: rgba(30, 30, 32, 0.98);
    z-index: 3;
}

/* Cuerpo de la carpeta */
.folder-body {
    position: relative;
    background: rgba(30, 30, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s ease, max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0 20px;
}

.folder-container.open .folder-body {
    max-height: none !important;
    height: 400px;
    opacity: 1;
    padding: 20px;
    overflow-y: auto;
}

.folder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Subservicios dentro de la carpeta */
.folder-content .subservices-container-original,
.folder-content > .subservices-container-original {
    position: relative !important;
    display: none !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.folder-content .subservices-container-original.active-folder-section,
.folder-content > .subservices-container-original.active-folder-section {
    display: grid !important;
}

.folder-content .subservice-btn-original,
.folder-content > .subservices-container-original .subservice-btn-original {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #a1a1a6 !important;
    padding: 10px 12px 10px 42px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-tap-highlight-color: transparent !important;
    min-width: 0 !important;
}

.folder-content .subservice-btn-original i,
.folder-content .subservice-btn-original svg,
.folder-content > .subservices-container-original .subservice-btn-original i,
.folder-content > .subservices-container-original .subservice-btn-original svg {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
}

.folder-content .subservice-btn-original:hover,
.folder-content > .subservices-container-original .subservice-btn-original:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.folder-content .subservice-btn-original.active,
.folder-content > .subservices-container-original .subservice-btn-original.active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .folder-container {
        max-width: calc(100% - 20px);
    }
    .folder-tabs {
        height: 36px;
        gap: 4px;
        padding-left: 6px;
    }
    .folder-tab {
        padding: 0 14px;
        font-size: 12px;
        clip-path: polygon(0% 100%, 0% 35%, 8% 0%, 100% 0%, 100% 100%);
    }
    .folder-tab:last-child {
        clip-path: polygon(0% 100%, 0% 0%, 92% 0%, 100% 35%, 100% 100%);
    }
    .folder-tab:first-child {
        padding-left: 16px;
    }
    .folder-body {
        border-radius: 0 10px 10px 10px;
    }
    .folder-container.open .folder-body {
        padding: 15px;
        height: 300px;
        overflow-y: auto;
    }
    .folder-content .subservices-container-original,
    .folder-content > .subservices-container-original {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .folder-content .subservice-btn-original,
    .folder-content > .subservices-container-original .subservice-btn-original {
        padding: 8px 8px 8px 34px !important;
        font-size: 11px !important;
        height: 36px !important;
        text-align: left !important;
    }
    .folder-content .subservice-btn-original span {
        left: 12px !important;
        top: 60% !important;
        transform: translateY(-50%) !important;
        font-size: 14px !important;
        width: 18px !important;
        height: 18px !important;
        filter: grayscale(100%) !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .folder-content .subservice-btn-original i,
    .folder-content .subservice-btn-original svg {
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        filter: grayscale(100%) !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Ocultar estilos viejos del selector */
.selector-container-original,
.selector-pill-original,
.selector-btn-original,
.selector-bg-slide-original {
    display: none !important;
}

/* Nuevo Menú Desplegable Flotante (Estilo Select con Ángulos Rectos) */
.single-menu-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 35px; /* Espacio cómodo con las tarjetas de abajo */
    width: 100%;
    position: relative; /* Requerido para crear contexto de apilamiento */
    z-index: 100 !important; /* Forzar a que flote sobre las tarjetas de abajo */
}
.single-menu-pill {
    position: relative; /* Clave para el posicionamiento absoluto del menú hijo */
    display: flex;
    background: #131314 !important; /* Pre-mezclado para igualar visualmente el fondo de los botones inactivos superiores */
    border: 1px solid rgba(255, 255, 255, 0.06) !important; /* Borde idéntico al inactivo */
    border-radius: 24px !important; /* Redondeado idéntico a Técnico Integral */
    overflow: visible !important; /* Permite mostrar el menú desplegable flotante sin recortarlo */
    padding: 0; /* Sin relleno para que la división toque los bordes */
    backdrop-filter: blur(20px) !important; /* Mismo efecto de vidrio que arriba */
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    width: 552px; /* Ancho idéntico a las listas */
    max-width: calc(100% - 40px); /* Adaptabilidad a móviles */
    box-sizing: border-box;
}
.single-menu-pill.has-value {
    background: #131314 !important; /* Siempre el color de fondo inactivo en la ficha */
    border-color: rgba(255, 255, 255, 0.06) !important; /* Borde tenue inactivo */
}
.dropdown-trigger-box {
    display: flex;
    width: 100%;
    align-items: center;
    height: 38px; /* Delgado y compacto */
}
.dropdown-selected-value {
    flex: 1;
    padding-left: 20px; /* Mayor padding por la curvatura */
    color: #a1a1a6 !important; /* Mismo gris que el menú de arriba */
    font-size: 14px !important; /* Misma fuente que el menú de arriba */
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    transition: color 0.25s ease;
}
.dropdown-selected-value.has-value {
    color: #fff !important; /* Blanco al seleccionar una opción */
    font-weight: 600 !important;
}
.dropdown-arrow-box {
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important; /* Línea divisoria vertical inactiva */
    color: #a1a1a6;
    transition: all 0.25s ease;
}
.single-menu-pill.has-value .dropdown-arrow-box {
    color: #fff !important;
    border-left-color: rgba(255, 255, 255, 0.22) !important; /* Línea divisoria activa */
}
.single-menu-pill:not(.has-value):hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important; /* Se ilumina a un gris inactivo ligeramente más claro al posar el cursor */
}
.single-menu-pill:not(.has-value):hover .dropdown-arrow-box {
    color: #fff;
    background: transparent !important; /* Evita que la zona de la flecha se oscurezca */
}
.dropdown-arrow-box i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Menú Flotante (Se superpone a las tarjetas de abajo) */
.dropdown-floating-menu {
    position: absolute;
    top: calc(100% + 4px); /* Justo debajo de la píldora */
    left: -1px;
    width: calc(100% + 2px); /* Cubrir todo el ancho incluyendo bordes */
    background: #0e0e0f !important; /* Color sólido equivalente a la lista superior sobre fondo negro */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borde idéntico al de la lista superior */
    border-radius: 24px !important; /* Bordes redondeados haciendo juego con el botón */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    z-index: 999; /* Flota sobre las tarjetas */
    display: none; /* Oculto por defecto e inicio cerrado */
    box-sizing: border-box;
    padding: 8px !important; /* Mismo relleno de la grilla de arriba */
    flex-direction: column;
    gap: 6px; /* Separación idéntica a la grilla de arriba */
}
.dropdown-menu-item {
    padding: 10px 16px !important;
    color: #a1a1a6 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    background: #181819 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
    text-align: center;
}
.dropdown-menu-item::first-letter {
    font-size: 18px !important;
}
.dropdown-menu-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; /* Mantener borde consistente */
}
.dropdown-menu-item:hover {
    background: #202021 !important; /* Hover sólido equivalente */
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
.dropdown-menu-item.active {
    background: #2b2b2c !important; /* Color sólido equivalente al botón activo sobre negro */
    border-color: rgba(255, 255, 255, 0.2) !important; /* Borde activo idéntico */
    color: #fff !important;
}
.dropdown-menu-item.empty-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.25) !important;
    padding: 20px !important;
    font-style: italic;
    cursor: default;
    border: 1px dashed rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}
.dropdown-menu-item.empty-placeholder:hover {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Subservices Sub-menu (Vertical Stack) */
.subservices-container-original {
    position: relative !important; /* Requerido para posicionamiento absoluto de la píldora */
    display: flex; /* Controlado por JS (flex o none) */
    flex-direction: column !important; /* Una abajo de la otra */
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 20px !important;
}
.subservice-bg-slide-original {
    display: none !important; /* Desactivado el efecto desplazable en las listas */
}
.subservices-container-original.ready .subservice-bg-slide-original {
    display: none !important;
}
.subservice-btn-original {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a1a1a6;
    padding: 12px 24px 12px 48px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    width: 100%;
    text-align: center;
    white-space: normal;
    -webkit-tap-highlight-color: transparent;
}
.subservice-btn-original span {
    position: absolute !important;
    left: 20px !important;
    top: 54% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
    font-size: 20px !important;
    width: 22px !important;
    height: 22px !important;
    filter: grayscale(100%) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.subservice-btn-original i,
.subservice-btn-original svg {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    filter: grayscale(100%) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.subservice-btn-original:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}
.subservice-btn-original.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
}

/* Mobile Scroll for Sub-services */
@media (max-width: 767px) {
    .subservices-container-original {
        max-width: 100% !important;
    }
}
.wt-grid-container { 
    display: none !important; /* Ocultar por defecto */
    overflow-x: auto; gap: 15px; padding: 20px 20px 15px; /* Aumentado padding superior a 20px */
    justify-content: flex-start !important; /* Garantizar alineación al inicio */
    scrollbar-width: none; scroll-behavior: smooth; align-items: stretch;
}
.wt-grid-container::-webkit-scrollbar { display: none; }
.wt-grid-container.active-grid {
    display: flex !important; /* Mostrar como flex en móvil si está activo */
}
.wt-card {
    background: rgba(28, 28, 30, 0.7); backdrop-filter: blur(20px);
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); 
    display: flex; flex-direction: column; min-width: 270px; max-width: 270px;
    scroll-snap-align: start;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.wt-text-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.wt-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(38, 38, 40, 0.8);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.wt-card:active {
    transform: scale(0.96) translateY(-2px);
    background: rgba(24, 24, 26, 0.9);
}
.wt-img-box { height: 185px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.wt-img-box img { width: 100% !important; height: 100% !important; max-width: 90% !important; max-height: 90% !important; object-fit: contain !important; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; }
.wt-card:hover .wt-img-box img { transform: scale(1.05) !important; }

/* Tarjetas Deshabilitadas / Pausadas */
.wt-card.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.7 !important;
    border-color: rgba(255, 255, 255, 0.03);
}
.wt-card.disabled .wt-img-box {
    position: relative !important;
}
.wt-card.disabled .wt-img-box::after {
    content: "No disponible";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff !important; /* Fuente blanca */
    font-size: 15px !important; /* Tamaño legible */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; /* Sombra negra para legibilidad sobre la imagen */
    pointer-events: none;
    z-index: 5 !important;
    white-space: nowrap !important;
}
.wt-card.disabled .wt-img-box img {
    filter: grayscale(100%) brightness(0.45) contrast(0.9) !important; /* Imagen más oscura para contraste */
}
.wt-card.disabled:hover {
    transform: none !important;
    background: rgba(28, 28, 30, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}
.wt-card.disabled:hover .wt-img-box img {
    transform: none !important;
}

/* Badge Más Pedidos (Sobresalido arriba a la derecha con forma de flecha/pico a la izquierda) */
.badge-mas-pedidos {
    position: absolute;
    top: -10px;
    right: -15px;
    background: #f44401; /* Naranja sólido sin desgaste */
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 14px 4px 20px; /* Tronco más largo (aumentado padding izquierdo y derecho) */
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    line-height: 1;
    clip-path: polygon(100% 0%, 8% 0%, 0% 50%, 8% 100%, 100% 100%); /* Pico más corto (reducido de 12% a 8%) */
    filter: drop-shadow(0 4px 6px rgba(255, 107, 0, 0.4));
}
/* Ajuste para los botones del sub-menú vertical */
.subservice-btn-original .badge-mas-pedidos {
    top: -8px;
    right: -10px;
    font-size: 8px;
    padding: 3px 10px 3px 16px; /* Tronco más largo en botón */
    clip-path: polygon(100% 0%, 10% 0%, 0% 50%, 10% 100%, 100% 100%); /* Pico más corto en botón */
}
.wt-info-box { padding: 0 20px 15px; flex-grow: 1; }
.wt-card-title { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.wt-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.3; }
.wt-card-footer { background: rgba(0, 0, 0, 0.2); padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.wt-footer-main { font-size: 13px; font-weight: 600; color: #fff; display: block; }
.wt-footer-sub { font-size: 11px; color: var(--text-secondary); display: block; margin-top: 2px; }

/* Reviews */
.reviews-section { padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.reviews-layout { display: flex; flex-direction: column; gap: 30px; }
/* Badge (Premium Style) */
.review-badge-original {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 0 20px !important;
    text-align: left !important;
}
.badge-header-original {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}
.badge-logo-container-original {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    background: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.badge-title-container-original h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}
.stars-container-badge-original {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.rating-number-badge-original {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.stars-container-badge-original .stars-original {
    color: #ffcc00 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}
.rating-text-original {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.badge-body-original {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding-left: 65px !important; /* Aligns with text under the 50px logo */
}
.reviews-count-original {
    font-size: 13px !important;
    color: #86868b !important;
    display: block !important;
}
.btn-review-original {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s !important;
    font-family: inherit !important;
    margin-top: 5px !important;
}
.btn-review-original:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Carousel Layout (Trustindex style) */
.carousel-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
.review-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(21, 21, 21, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
.review-nav-btn:hover {
    background: rgba(38, 38, 40, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.review-nav-btn:active {
    background: rgba(24, 24, 26, 0.9) !important;
    transform: translateY(-50%) scale(0.95) !important;
}

.reviews-scroll-container { 
    display: flex !important; 
    gap: 20px !important; 
    overflow-x: auto !important; 
    padding: 0 20px 15px !important; 
    scrollbar-width: none !important; 
    scroll-behavior: smooth !important; 
    width: 100% !important; 
    align-items: flex-start !important; 
    scroll-snap-type: x mandatory !important;
}
.reviews-scroll-container::-webkit-scrollbar { display: none !important; }
.review-card-original { 
    background: rgba(28, 28, 30, 0.75) !important; 
    border-radius: 16px !important; 
    padding: 24px !important; 
    min-width: 340px !important; 
    max-width: 340px !important; 
    width: 340px !important;
    height: 240px !important; 
    min-height: 240px !important;
    max-height: 240px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: space-between !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
}
.review-header-original { display: flex !important; align-items: center !important; gap: 12px !important; position: relative !important; margin-bottom: 8px !important; }
.avatar-original { width: 46px !important; height: 46px !important; border-radius: 50% !important; background-size: cover !important; background-position: center !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 17px !important; flex-shrink: 0 !important; }
.review-author-original h4 { font-size: 15.5px !important; font-weight: 600 !important; margin-bottom: 2px !important; color: #fff !important; }
.review-author-original span { font-size: 12.5px !important; color: var(--text-secondary) !important; }
.google-icon-original { position: absolute !important; right: 0 !important; top: 0 !important; color: #4285F4 !important; font-size: 18px !important; }
.review-text { 
    font-size: 14px !important; 
    color: #d1d1d6 !important; 
    line-height: 1.5 !important; 
    margin-top: 6px !important; 
    margin-bottom: 8px !important;
    flex-grow: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 66px !important;
    max-height: 66px !important;
}
.review-readmore {
    font-size: 12px !important;
    color: #86868b !important;
    text-decoration: none !important;
    margin-top: auto !important;
    font-weight: 500 !important;
    display: inline-block !important;
}
.review-readmore:hover {
    color: #fff;
}

/* Verified Badge Style (Premium) */
.stars-original {
    color: #fbbc04 !important;
    font-size: 16px !important;
    margin-bottom: 2px !important;
    display: inline-block !important;
}
.stars-container-original {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
}
.verified-badge-original {
    color: #24b6f7 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}
.verified-badge-original i {
    color: #24b6f7 !important;
}

/* FAQ Section */
.faq-section { padding: 25px 0; }
.faq-header { margin-bottom: 30px; text-align: left;}
.faq-header h2 { margin-bottom: 10px; padding: 0; }
.faq-header p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.faq-container-original {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 20px 0 20px; /* Reducido de 40px a 25px */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Línea alineada a 1200px */
    box-sizing: border-box;
}
.accordion-grid-original { display: flex; flex-direction: column; gap: 8px !important; }
.accordion-column { display: flex; flex-direction: column; gap: 8px !important; }
.accordion-item-original { 
    background: none !important; 
    border: none !important; 
    overflow: hidden; 
    margin-bottom: 0 !important; 
}
.accordion-header-original { 
    width: 100% !important; 
    text-align: left !important; 
    background: #1c1c1e !important; 
    border: 1px solid #2c2c2e !important; 
    border-radius: 8px !important; 
    color: #fff !important; 
    padding: 14px 16px !important; 
    font-size: 14px !important; 
    font-family: inherit !important; 
    font-weight: normal !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-start !important; 
    gap: 12px !important;
    transition: all 0.3s ease !important;
}
.accordion-header-original:hover {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
}
.accordion-header-original span {
    font-weight: normal !important;
}
.accordion-header-original i { 
    font-size: 4px !important; 
    color: #fff !important; 
    transition: all 0.3s ease !important; 
}

.accordion-content-original {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content-original p {
    font-size: 13px;
    color: #e2e2e7;
    line-height: 1.6;
    padding: 14px 4px 14px 4px; /* El padding se aplica al párrafo para evitar saltos y cortes */
}

/* Footer (Service PC Glew Style) */
.wt-footer {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 20px 30px;
    color: #fff;
}
.wt-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.wt-footer-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.wt-footer-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}
.footer-logo-text {
    font-size: 24px;
}
.wt-footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wt-footer-social span {
    font-size: 20px !important;
    color: #ffffff !important;
    font-weight: 500 !important; /* Grosor Medium exacto de Wiltech */
    font-family: 'Inter', sans-serif !important; /* Tipografía Inter exacta */
    letter-spacing: normal !important; /* Espaciado normal de Wiltech */
    text-shadow: none !important; /* Sin sombras (el color en la foto era por la cámara) */
    margin-bottom: 12px !important;
    display: inline-block !important;
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: #000000 !important; /* Icono negro */
    background: #ffffff !important; /* Fondo blanco sólido como en la captura */
    border: none !important; /* Sin bordes */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important; /* Icono más grande y visible */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none;
}
.social-icons a:hover {
    background: #ffffff !important; /* Mantiene el fondo blanco */
    color: #000000 !important; /* Mantiene el icono negro (sin pintar de naranja) */
    transform: translateY(2px) scale(0.95) !important; /* Efecto de hundido */
    box-shadow: none !important;
}
.social-icons a:active {
    transform: translateY(3px) scale(0.92) !important; /* Hundido más profundo al presionar */
}
.seguime-btns {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 15px;
}
.seguime-btns a {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 20px;
}
.seguime-btns a:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
}
.seguime-btns a:active {
    transform: translateY(3px) scale(0.92);
}
.seguime-btns img {
    border-radius: 4px;
}

/* Botones de reseña en footer */
.footer-review-btns a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px);
}
.footer-review-btns a:active {
    transform: scale(0.92);
}
.wt-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wt-privacy a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.wt-privacy a:hover {
    color: #fff;
}

@media (min-width: 768px) {
    .wt-footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .wt-footer-social {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .wt-footer-bottom {
        flex-direction: row !important; /* Volver al orden original: disclaimer a la izquierda, copyright a la derecha */
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    .wt-copyright {
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
}

/* =========================================
   DESKTOP / PC MODE EXACT MATCH
   ========================================= */
@media (min-width: 992px) {
    .desktop-only { display: flex !important; }
    .mobile-only { display: none !important; }
    
    /* Mostrar flechas solo en desktop para no dañar layout móvil */
    .review-nav-btn { display: flex; }
    
    /* Navbar */
    .hamburger { display: none; }
    .theme-toggle { display: flex; }
.nav-right-btns { display: flex; align-items: center; gap: 24px; }
    .nav-container { padding: 0 15px; }
    .logo-text {
        font-size: 25px;
    }
    .footer-logo-text {
        font-size: 28px;
    }
    .desktop-menu { display: flex; gap: 30px; align-items: center; }
    .desktop-menu a { color: white; text-decoration: none; font-size: 13px; font-weight: 500; }

    /* Hero */
    .hero {
        height: 480px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 70px;
    }
    .hero-bg {
        background-size: cover;
        background-position: center center;
    }
    .hero-bg::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, #000000 100%);
    }
    .hero-content {
        margin-top: 0;
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 20px;
        padding-left: 20px;
    }
    .hero-main-layout {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px !important;
        text-align: left !important;
    }
    .hero-text-box {
        align-items: center !important; /* Centrado en PC */
        text-align: center !important;
    }
    .hero-content h1 {
        font-size: 58px !important; /* Tamaño Wiltech en PC */
        letter-spacing: -1.5px !important;
        font-weight: 500 !important;
        text-align: center !important; /* Centrado en PC */
        margin-bottom: 10px !important;
    }
    h2 {
        font-size: 28px !important;
        padding: 0;
        letter-spacing: -1px !important;
        font-weight: 500 !important;
    }
    .hero-subtitle {
        font-size: 14px !important; /* Un poco más grande en PC manteniendo formato etiqueta */
        margin-top: 5px !important;
        margin-bottom: 12px !important; /* Reducido de 20px a 12px */
        letter-spacing: 1.5px !important; /* Espaciado elegante para PC */
        text-align: center !important; /* Centrado en PC */
    }
    .hero-cta-btn {
        padding: 12px 32px !important;
        font-size: 15px !important;
        margin-top: 0px !important; /* Reducido a 0 */
    }
    .hero-cta-btn i {
        font-size: 17px;
    }

    /* Servicios Section - Menu Vertical a la izquierda en PC */
    #equipos-section {
        display: block !important; /* Volver a block para que las tarjetas de productos vayan abajo */
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 35px 0 !important; /* Cambiado a 0 a los lados para permitir deslizamiento al ras */
        position: relative !important;
    }
    #equipos-section h2 {
        margin-bottom: 60px !important; /* Incrementado de 45px a 60px para dar aún más espacio abajo en PC */
        text-align: left !important;
        padding: 0 20px !important; /* Alineado exactamente a la cuadrícula de 1200px con 20px de margen */
    }
    /* Las tarjetas de productos van abajo */
    .subservices-container-original {
        /* Hereda el centrado y estilos por defecto de PC */
    }

    /* Tips & Mantenimiento Desktop */
    .sedes-section { 
        padding-top: 40px;
        width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
    }
    .tips-header-row {
        max-width: 1200px !important;
        margin: 0 auto 20px !important;
        padding: 0 20px !important;
    }
    .tips-container {
        display: flex !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 !important;
        padding: 0 20px 15px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        scroll-padding-left: 0 !important;
    }
    /* Posición de flechas de tips alineada con la estética de servicios */
    @media (min-width: 768px) {
        .tips-prev-btn { left: 10px !important; }
        .tips-next-btn { right: 10px !important; }
    }
    @media (min-width: 1240px) {
        .tips-prev-btn { left: -24px !important; }
        .tips-next-btn { right: -24px !important; }
    }
    .tips-prev-btn, .tips-next-btn, .review-nav-btn {
        width: 48px;
        height: 48px;
    }
    .tip-card {
        min-width: 340px !important;
        max-width: 340px !important;
        width: 340px !important;
        height: 110px !important;
        padding: 12px 12px 12px 17px !important;
        border-left: none !important;
        flex-direction: row !important;
        gap: 12px !important;
        position: relative !important;
    }
    .tip-img-box {
        width: 80px !important;
        min-width: 80px !important;
        height: 80px !important;
        border-radius: 12px !important;
        flex-shrink: 0 !important;
    }
    .tips-disclaimer {
        max-width: 1200px;
        margin: 25px auto 0;
    }

    /* Equipos Desktop (Premium Match) */
    .wt-devices-section {
        width: 100%;
        padding: 45px 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .wt-devices-section h2 { 
        text-align: left;
        padding: 0 80px;
        margin-bottom: 30px; 
    }
    .wt-grid-container.active-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 25px 0 20px 0 !important;
    }
    .wt-card {
        position: relative;
        height: 315px; 
        background: rgba(35, 35, 35, 0.75) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        overflow: visible;
        transition: all 0.3s ease;
        text-decoration: none;
        color: inherit;
        min-width: 250px;
        max-width: 250px;
    }
    .wt-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }
    .wt-card:active {
        transform: scale(0.97) translateY(-3px);
    }
    .wt-img-box {
        height: 195px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 10px 0 10px;
    }
    .wt-img-box img {
        width: 100% !important;
        height: 100% !important;
        max-width: 90% !important;
        max-height: 90% !important;
        object-fit: contain !important;
    }
    .wt-info-box {
        padding: 0 15px 15px 15px;
        flex-grow: 1;
        text-align: left;
    }
    .wt-card-title {
        color: #ffffff !important;
        font-family: 'Inter', sans-serif;
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 0 0 3px 0 !important;
    }
    .wt-card-desc {
        color: #a1a1a6 !important;
        font-family: 'Inter', sans-serif;
        font-size: 11px !important;
        line-height: 1.3;
    }
    .wt-card-footer {
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: auto;
        text-align: left;
        display: block;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    .wt-footer-main {
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600;
        line-height: 1.3;
        display: block;
    }
    .wt-footer-sub {
        color: #86868b !important;
        font-size: 11px !important;
        display: block;
        margin-top: 2px;
    }
    /* Reviews Desktop (Alineado a la cuadrícula de 1200px y centrado) */
    .reviews-section {
        border-top: none;
        padding: 40px 20px !important; /* Optimizado de 60px/40px, con padding lateral de 20px */
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important; /* Centrado */
        overflow: visible;
    }
    .reviews-layout {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
        padding: 0 !important; /* Elimina paddings innecesarios */
    }
    .review-badge-original { 
        padding: 0 !important; 
    }
    .badge-body-original {
        padding-left: 0 !important; /* Stack directly under logo on desktop */
        margin-top: 5px !important;
    }
    
    .carousel-wrapper { 
        flex: 1; 
        min-width: 0; 
        position: relative; 
        overflow: hidden; 
    }
    .reviews-scroll-container { 
        padding: 0 40px 15px 0; 
        overflow-x: hidden; 
        scroll-snap-type: none !important;
        gap: 20px !important;
    }

    /* FAQ Desktop (Espacios optimizados) */
    .faq-section {
        padding: 20px 0 !important;
        width: 100% !important;
    }
    .faq-container-original {
        max-width: 1200px !important;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 25px 20px 0 20px !important;
    }
    .faq-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 30px;
    }
    .faq-header h2 {
        flex-shrink: 0;
        margin-bottom: 0;
        padding: 0;
    }
    .faq-header p {
        font-size: 15px;
        max-width: 600px;
        margin-bottom: 0;
    }
    .accordion-grid-original {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .accordion-header-original {
        padding: 16px 20px !important;
        font-size: 15px !important;
        gap: 14px !important;
    }
    .accordion-header-original i {
        font-size: 4px !important;
    }
    .accordion-content-original {
        padding: 0;
    }
    .accordion-content-original p {
        font-size: 14px;
        padding: 16px 8px 16px 8px;
    }

    /* ===== LIGHT MODE OVERRIDES (Desktop) ===== */
    body.light-mode .desktop-menu a { color: #1d1d1f; }
    body.light-mode .desktop-menu a:hover { color: #f44401; }
    body.light-mode .hero-bg::after {
        background: linear-gradient(to bottom, rgba(245,245,247,0.15) 0%, rgba(245,245,247,0.05) 40%, rgba(245,245,247,0.6) 75%, #f5f5f7 100%) !important;
    }
    body.light-mode .hero-bg { filter: brightness(1.05) saturate(0.9); }
    body.light-mode .hero-content h1 { color: #1d1d1f; text-shadow: 0 1px 8px rgba(255,255,255,0.5); }
    body.light-mode .hero-subtitle { color: #1d1d1f; }
    body.light-mode .hero-subtitle-white { color: #1d1d1f; }
    body.light-mode .hero-subtitle-divider { color: #86868b; }
    body.light-mode .wt-card {
        background: rgba(255,255,255,0.72) !important;
        border: 0.5px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    body.light-mode .wt-card:hover {
        background: rgba(255,255,255,0.95) !important;
        border-color: rgba(0,0,0,0.1) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.04);
    }
    body.light-mode .wt-card-title { color: #1d1d1f !important; }
    body.light-mode .wt-card-desc { color: #6e6e73 !important; }
    body.light-mode .wt-card-footer { background: rgba(0,0,0,0.02) !important; border-top-color: rgba(0,0,0,0.06) !important; }
    body.light-mode .wt-footer-main { color: #1d1d1f !important; }
    body.light-mode .wt-footer-sub { color: #86868b !important; }
    body.light-mode .badge-mas-pedidos { background: #f44401; color: #fff; box-shadow: 0 2px 8px rgba(244,68,1,0.3); }
    body.light-mode .reviews-section { border-top: none; }
    body.light-mode .review-card-original {
        background: rgba(255,255,255,0.75) !important;
        border: 0.5px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
    }
    body.light-mode .review-card-original:hover {
        background: rgba(255,255,255,0.92) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.05);
    }
    body.light-mode .review-author-original h4 { color: #1d1d1f !important; }
    body.light-mode .review-author-original span { color: #6e6e73 !important; }
    body.light-mode .review-text { color: #3a3a3c !important; }
    body.light-mode .review-readmore { color: #86868b !important; }
    body.light-mode .review-readmore:hover { color: #f44401 !important; }
    body.light-mode .badge-logo-container-original {
        background: #fff !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    body.light-mode .badge-title-container-original h4 { color: #1d1d1f !important; }
    body.light-mode .rating-number-badge-original { color: #1d1d1f !important; }
    body.light-mode .rating-text-original { color: #1d1d1f !important; }
    body.light-mode .reviews-count-original { color: #6e6e73 !important; }
    body.light-mode .btn-review-original { border-color: rgba(0,0,0,0.15) !important; color: #1d1d1f !important; }
    body.light-mode .btn-review-original:hover { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.25) !important; }
    body.light-mode .accordion-header-original {
        background: rgba(255,255,255,0.7) !important;
        border-color: rgba(0,0,0,0.06) !important;
        color: #1d1d1f !important;
    }
    body.light-mode .accordion-header-original:hover {
        background: rgba(255,255,255,0.95) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }
    body.light-mode .accordion-header-original i { color: #1d1d1f !important; }
    body.light-mode .accordion-content-original p { color: #3a3a3c; }
    body.light-mode .tips-prev-btn, body.light-mode .tips-next-btn, body.light-mode .review-nav-btn {
        background: rgba(255,255,255,0.85) !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #1d1d1f !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    body.light-mode .tips-prev-btn:hover, body.light-mode .tips-next-btn:hover, body.light-mode .review-nav-btn:hover {
        background: rgba(255,255,255,1) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    body.light-mode .tip-card {
        background: rgba(255,255,255,0.72) !important;
        border: 0.5px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    }
    body.light-mode .tip-card:hover {
        background: rgba(255,255,255,0.95) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
    }
    body.light-mode .tip-card h3 { color: #1d1d1f; }
    body.light-mode .tip-desc { color: #6e6e73; }
    body.light-mode .subservice-btn-original {
        background: rgba(255,255,255,0.04) !important;
        color: #a1a1a6 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    body.light-mode .subservice-btn-original:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
        box-shadow: none;
    }
    body.light-mode .subservice-btn-original.active {
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
    }
    body.light-mode .selector-btn-original {
        background: rgba(255,255,255,0.04) !important;
        color: #a1a1a6 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    body.light-mode .selector-btn-original:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }
    body.light-mode .folder-tab {
        background: rgba(42,42,46,0.98) !important;
        border-color: rgba(255,255,255,0.08) !important;
        color: #666 !important;
    }
    body.light-mode .folder-tab.active {
        background: rgba(30,30,32,0.98) !important;
        color: #fff !important;
        border-color: rgba(30,30,32,0.98) !important;
        box-shadow: none !important;
    }
    body.light-mode .folder-body {
        background: rgba(30,30,32,0.98) !important;
        border-color: rgba(255,255,255,0.08) !important;
    }
    body.light-mode .single-menu-pill {
        background: #131314 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    body.light-mode .single-menu-pill.has-value {
        background: #131314 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    body.light-mode .dropdown-selected-value { color: #a1a1a6 !important; }
    body.light-mode .dropdown-selected-value.has-value { color: #fff !important; }
    body.light-mode .dropdown-arrow-box { border-left-color: rgba(255,255,255,0.08) !important; color: #a1a1a6 !important; }
    body.light-mode .single-menu-pill.has-value .dropdown-arrow-box { color: #fff !important; border-left-color: rgba(255,255,255,0.22) !important; }
    body.light-mode .dropdown-floating-menu {
        background: #0e0e0f !important;
        border-color: rgba(255,255,255,0.08) !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    }
    body.light-mode .dropdown-menu-item {
        color: #a1a1a6 !important;
        background: #181819 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    body.light-mode .dropdown-menu-item:hover { background: #202021 !important; color: #fff !important; }
    body.light-mode .dropdown-menu-item.active { background: #2b2b2c !important; color: #fff !important; }
    body.light-mode .map-card { background: #fff !important; border-color: rgba(0,0,0,0.06) !important; }
    body.light-mode .map-iframe { filter: none !important; }
    body.light-mode .downloads-list-container { background: rgba(255,255,255,0.5) !important; border-color: rgba(0,0,0,0.06) !important; }
    body.light-mode .downloads-item { color: #1d1d1f !important; background: rgba(255,255,255,0.5) !important; border-color: rgba(0,0,0,0.04) !important; }
    body.light-mode .downloads-item i, body.light-mode .downloads-item svg { color: #6e6e73 !important; }
    body.light-mode .share-float { background: rgba(255,255,255,0.9) !important; color: #6e6e73 !important; border-color: rgba(0,0,0,0.08) !important; }
    body.light-mode .share-float:hover { color: #1d1d1f !important; }
    body.light-mode .whatsapp-tooltip, body.light-mode .telegram-tooltip, body.light-mode .messenger-tooltip {
        background: rgba(255,255,255,0.95) !important;
        color: #1d1d1f !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
}

/* Botón Flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-float {
    position: fixed;
    bottom: 250px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: rgba(42, 42, 46, 0.95);
    color: #86868b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}
.share-float:hover {
    background: rgba(42, 42, 46, 0.95);
    color: #fff;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
}
.share-float:active {
    transform: scale(0.95);
}
.whatsapp-float:hover {
    background-color: #20ba5a;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}
.whatsapp-float:active {
    transform: scale(0.95);
}
/* Efecto de onda expansiva (Ripple) */
.whatsapp-float::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #25d366;
    opacity: 0.5;
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { opacity: 0.3; }
    100% { transform: scale(1.4); opacity: 0; }
}
/* Tooltip del Botón */
.whatsapp-tooltip {
    position: absolute;
    right: 80px;
    background: #151515;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}
/* Adaptabilidad en pantallas pequeñas */
@media (max-width: 767px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    .share-float {
        bottom: 215px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    .whatsapp-tooltip {
        display: none; /* Ocultar en móvil para evitar tapar contenido */
    }
}

/* Ocultar flechas de navegación en móvil (donde se desliza con el dedo) */
@media (max-width: 767px) {
    .wt-slider-btn,
    .review-nav-btn,
    .tips-prev-btn,
    .tips-next-btn {
        display: none !important;
    }
}

/* Slider wrapper for devices/downloads/sales */
.wt-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
}
.wt-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(21, 21, 21, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wt-prev-btn { left: 10px; }
.wt-next-btn { right: 10px; }
.wt-slider-btn:hover {
    background: rgba(38, 38, 40, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.wt-slider-btn:active {
    background: rgba(24, 24, 26, 0.9) !important;
    transform: translateY(-50%) scale(0.95) !important;
}

/* Desktop overrides */
@media (min-width: 768px) {
    .wt-prev-btn { left: 10px !important; }
    .wt-next-btn { right: 10px !important; }
}
@media (min-width: 1240px) {
    .wt-prev-btn { left: -24px !important; } /* Flotan hacia afuera en pantallas grandes */
    .wt-next-btn { right: -24px !important; }
}
@media (min-width: 992px) {
    .wt-slider-btn {
        width: 48px;
        height: 48px;
    }
}

/* Map Section */
.map-section {
    padding: 40px 0;
}
.map-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.map-container h2 {
    margin-bottom: 20px;
    color: #fff;
    padding: 0;
}
.map-card {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: #1c1c1e;
}
.map-iframe {
    width: 100%;
    height: 350px;
    border: none !important;
    display: block;
    /* CSS Filter to invert colors and create a perfect dark mode */
    filter: invert(90%) hue-rotate(180deg) grayscale(15%) contrast(95%);
    transition: filter 0.3s ease;
}
.map-iframe:hover {
    filter: invert(90%) hue-rotate(180deg) grayscale(0%) contrast(100%);
}

/* Desktop overrides for Map */
@media (min-width: 992px) {
    .map-section {
        padding: 35px 0 !important; /* Reducido de 60px a 35px para ahorrar espacio */
    }
    .map-container h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }
    .map-iframe {
        height: 450px;
    }
}

/* Contact Card Section */
.contact-card-section {
    padding: 10px 0 10px; /* Reducido padding superior ya que el contenedor tiene padding-top */
    background: #000;
}
.contact-card-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0 20px; /* Relleno superior para separar de la línea */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Línea de división alineada a 1200px */
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    box-sizing: border-box;
}
.contact-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 600px;
}
.contact-card-text h2 {
    margin-bottom: 15px;
    padding: 0;
    text-align: left;
}
.contact-card-text p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 35px;
}
.contact-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 500px;
}
.download-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    text-decoration: none;
    transition: all 0.2s ease !important;
    margin-bottom: 20px;
    align-self: center;
    padding: 0 !important;
}
.download-card-btn i {
    font-size: 16px;
}
.download-card-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.download-card-btn:active {
    transform: scale(0.96);
}
.download-card-btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s ease !important;
    margin-top: 5px;
    cursor: pointer;
}
.download-card-btn-premium i {
    font-size: 14px;
}
.download-card-btn-premium:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.download-card-btn-premium:active {
    transform: scale(0.97);
}
.contact-card-image-box {
    max-width: 320px; /* Aumentado de 158px para que la tarjeta sea legible */
    width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.contact-card-image-box:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
}
.contact-card-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

.asterisk-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    margin-left: 8px;
    transition: color 0.2s ease;
    cursor: pointer;
    display: inline-block;
}
.asterisk-link:hover, .asterisk-link:active {
    color: #f44401;
}

/* Desktop overrides for Contact Card */
@media (min-width: 768px) {
    .contact-card-section {
        padding: 20px 0 15px; /* Ajustado padding superior en PC */
    }
    .contact-card-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px; /* Reducido de 80px para que entre perfecto en pantallas medianas */
        max-width: 1200px; /* Alineado a 1200px con Mi Ubicación */
        padding: 40px 20px 0 20px; /* Mantiene padding superior de la línea */
    }
    .contact-card-text {
        text-align: left;
        flex: 1;
    }
    .contact-card-text h2 {
        text-align: left;
        padding: 0;
    }
    .contact-card-text p {
        font-size: 15px;
        max-width: 600px;
        margin-bottom: 25px;
    }
    .contact-card-right {
        flex: 0 0 320px; /* Aumentado a 320px para coincidir con la tarjeta */
    }
    .download-card-btn-premium {
        padding: 12px 28px;
        font-size: 14px;
        margin-top: 10px;
    }
    .download-card-btn-premium i {
        font-size: 15px;
    }
}

.wt-footer-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    max-width: 460px;
}
@media (max-width: 767px) {
    .wt-footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        text-align: center !important;
    }
    .wt-copyright {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

.orange-link {
    color: #f44401;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.orange-link:hover {
    color: #ff9500;
    text-decoration: underline;
}

/* Premium Scroll Reveal Animation */
.animate-element {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}
.animate-element.in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Slide In Right Animation */
.animate-element.slide-in-right {
    transform: translateX(45px);
}
.animate-element.slide-in-right.in-view {
    transform: translateX(0);
}
/* Staggered entry for the columns */
.accordion-column.animate-element:nth-child(2) {
    transition-delay: 0.15s;
}
.footer-disclaimer {
    font-size: 11px;
    color: #86868b;
    line-height: 1.5;
    text-align: right;
    margin: 0;
}
@media (max-width: 767px) {
    .wt-footer-right-column {
        align-items: center;
        max-width: 100%;
    }
    .footer-disclaimer {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

/* Scroll Reveal Animation for wt-card */
@keyframes slideUpReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wt-card {
    opacity: 0;
    will-change: transform, opacity;
}

.wt-card.in-view {
    animation: slideUpReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Staggered entry for wt-cards in the grid */
.wt-grid-container .wt-card.in-view:nth-child(1) { animation-delay: 0s; }
.wt-grid-container .wt-card.in-view:nth-child(2) { animation-delay: 0.05s; }
.wt-grid-container .wt-card.in-view:nth-child(3) { animation-delay: 0.1s; }
.wt-grid-container .wt-card.in-view:nth-child(4) { animation-delay: 0.15s; }
.wt-grid-container .wt-card.in-view:nth-child(5) { animation-delay: 0.2s; }
.wt-grid-container .wt-card.in-view:nth-child(6) { animation-delay: 0.25s; }
.wt-grid-container .wt-card.in-view:nth-child(7) { animation-delay: 0.3s; }
.wt-grid-container .wt-card.in-view:nth-child(8) { animation-delay: 0.35s; }
.wt-grid-container .wt-card.in-view:nth-child(9) { animation-delay: 0.4s; }
.wt-grid-container .wt-card.in-view:nth-child(10) { animation-delay: 0.45s; }

/* Hero Page Load Entrance Animation (Premium Style) */
@keyframes heroSlideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de entrada para los textos (logo estático) */
.hero-content h1 {
    animation: heroSlideInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.15s;
}

.hero-content .hero-subtitle {
    animation: heroSlideInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.3s;
}

.hero-content .hero-cta-btn {
    animation: heroSlideInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.45s;
}

/* Downloads Vertical List styling */
.downloads-list-container {
    max-width: 420px;
    margin: 30px auto;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-card);
}
.downloads-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.downloads-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    user-select: none;
}
.downloads-item i, .downloads-item svg {
    font-size: 20px;
    color: #94a3b8;
    transition: all 0.3s ease;
    width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.downloads-item:hover {
    color: #f44401;
    background: rgba(255, 107, 0, 0.08);
    border-color: rgba(255, 107, 0, 0.25);
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.15);
}
.downloads-item:hover i, .downloads-item:hover svg {
    color: #f44401;
    filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.5));
}

/* Mobile Menu Overlay (Premium style dropdown) */
.mobile-menu-overlay {
    position: fixed;
    top: 60px; /* Justo debajo del header */
    left: 0;
    width: 100%;
    max-height: 0;
    background: #1c1c1e; /* Fondo oscuro consistente con el sitio */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    z-index: 999;
}

.mobile-menu-overlay.active {
    max-height: 550px; /* Altura suficiente para contener todos los enlaces */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.mobile-menu-links a {
    display: block;
    color: #fff; /* Texto blanco sobre fondo oscuro */
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 24px; /* Alineado a la izquierda con padding */
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Inter', sans-serif;
}

.mobile-menu-links a:last-child {
    border-bottom: none;
}

.mobile-menu-links a:hover, .mobile-menu-links a.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f44401;
}

/* Animación del botón hamburguesa */
.hamburger i {
    transition: transform 0.3s ease;
}

.hamburger.active i {
    transform: rotate(90deg);
}

/* ==========================================
   OPTIMIZACIONES DE EXPERIENCIA MÓVIL (UX/UI)
   ========================================== */

/* 1. Prevenir bamboleo horizontal en pantallas táctiles */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. Eliminar el destello gris por defecto al tocar elementos en móviles y tablets */
.wt-card, 
.subservice-btn-original, 
.selector-btn-original, 
.mobile-menu-links a, 
.hamburger,
.hero-cta-btn,
.whatsapp-float,
.download-card-btn-premium,
.accordion-header-original {
    -webkit-tap-highlight-color: transparent !important;
}

/* 3. Feedback táctil (Efecto de presión física al pulsar) */
.subservice-btn-original:active, 
.selector-btn-original:active,
.hero-cta-btn:active,
.whatsapp-float:active,
.share-float:active,
.download-card-btn-premium:active,
.accordion-header-original:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

.wt-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* 4. Optimización de scroll táctil en carruseles (Móviles y Tablets) */
.wt-grid-container,
.tips-container {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Ocultar barra de scroll en navegadores basados en Webkit (Chrome, Safari, etc.) */
.wt-grid-container::-webkit-scrollbar,
.tips-container::-webkit-scrollbar {
    display: none !important;
}

/* 5. Aumento de tamaño de áreas táctiles (Touch Targets) en móvil y conversión a grilla compacta */
@media (max-width: 767px) {
    .mobile-menu-links a {
        padding: 16px 24px !important; /* Área de toque de 47px de altura */
    }
    
    /* Convertir el listado vertical en una grilla compacta de 2 columnas con recuadro de vidrio */
    .subservices-container-original {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        max-width: calc(100% - 30px) !important; /* Margen lateral cómodo */
        margin: 0 auto 20px auto !important;
        padding: 8px !important; /* Relleno interno para los botones */
        
        /* Estilo Recuadro de Vidrio idéntico al menú superior */
        background: rgba(28, 28, 30, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Solo el contenedor activo (que NO está oculto con display: none) se muestra como grilla en móvil */
    .subservices-container-original:not([style*="display: none"]) {
        display: grid !important;
    }
    
    /* La carpeta controla su propio display */
    .folder-content .subservices-container-original,
    .folder-content > .subservices-container-original {
        display: none !important;
    }
    .folder-content .subservices-container-original.active-folder-section,
    .folder-content > .subservices-container-original.active-folder-section {
        display: grid !important;
    }
    
    .subservice-btn-original {
        padding: 8px 10px !important;
        font-size: 11px !important;
        height: 38px !important; /* Altura fija para consistencia en la grilla */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Centrar el último botón de la grilla si queda solo (impar: casos de 3, 5 o 7 botones) */
    .subservice-btn-original:nth-child(4):last-child,
    .subservice-btn-original:nth-child(6):last-child,
    .subservice-btn-original:nth-child(8):last-child {
        grid-column: span 2 !important;
        width: 100% !important; /* Estirar para ocupar todo el ancho disponible */
        margin: 0 auto !important;
    }
    
    /* Adaptar el deslizador naranja a los nuevos bordes de los botones en móvil */
    .subservice-bg-slide-original {
        border-radius: 12px !important;
    }
    
    /* Achicar y alinear iconos de forma absoluta a la izquierda en móvil */
    .subservice-btn-original {
        padding-left: 32px !important; /* Espacio para el icono en móvil */
        padding-right: 8px !important;
    }
    
    .subservice-btn-original span {
        position: absolute !important;
        left: 14px !important;
        top: 60% !important;
        transform: translateY(-50%) !important;
        margin-right: 0 !important;
        font-size: 14px !important;
        width: 18px !important;
        height: 18px !important;
        filter: grayscale(100%) !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .subservice-btn-original i,
    .subservice-btn-original svg {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-right: 0 !important;
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        filter: grayscale(100%) !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Posicionar la etiqueta "Más pedidos" de forma compacta arriba a la derecha en móvil */
    .subservice-btn-original .badge-mas-pedidos {
        position: absolute !important;
        top: -6px !important;
        right: 2px !important;
        font-size: 7.5px !important;
        padding: 1px 4px !important;
        border-radius: 4px !important;
        line-height: 1 !important;
    }
    
    /* ==========================================
       TARJETAS OPTIMIZADAS PARA MÓVILES (CAROUSEL 1.5)
       ========================================== */
    
    /* Configurar el contenedor con espaciado proporcional en vw */
    .wt-grid-container {
        padding: 15px 4vw 20px 4vw !important;
        gap: 3vw !important;
    }
    
    /* Ancho matemático de 56vw para hacerlas más delgadas y mostrar exactamente 2/3 partes (66%) de la siguiente tarjeta */
    .wt-card {
        min-width: 56vw !important;
        max-width: 56vw !important;
        border-radius: 18px !important; /* Bordes proporcionales */
    }
    
    /* Caja de imagen reducida en la misma proporción vertical (de 185px a 150px) */
    .wt-img-box {
    height: 225px !important;
        padding: 8px !important;
    }
    
    /* Asegurar que la imagen sea lo más grande posible dentro de la caja */
    .wt-img-box img {
        max-width: 95% !important;
        max-height: 95% !important;
    }
    
    /* Ajuste de contenedor de textos de la tarjeta */
    .wt-text-container {
        padding: 12px 14px 14px 14px !important;
    }
    
    /* Título legible pero más compacto */
    .wt-card-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    /* Descripción altamente legible y compacta */
    .wt-card-desc {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
    }
    
    /* Footer de la tarjeta reducido */
    .wt-card-footer {
        padding: 10px 14px !important;
        border-bottom-left-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
    }
    
    .wt-card-footer span {
        font-size: 11.5px !important;
    }
}

/* ==========================================
   OPTIMIZACIÓN DE SUBMENÚS EN PC (GRILLA DE 2 COLUMNAS ANCHA)
   ========================================== */
@media (min-width: 768px) {
    /* Selector de diagnóstico de abajo con el mismo ancho exacto que la grilla de arriba */
    .single-menu-pill {
        width: 654px !important; /* Alineación perfecta con el nuevo ancho del contenedor de arriba */
        max-width: none !important; /* Permitir que ocupe todo el ancho en PC */
    }

    /* Forzar el centrado absoluto de todo el bloque en PC y Tablets */
    .wt-devices-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .subservices-container-original {
        grid-template-columns: repeat(2, 310px) !important; /* Columnas ensanchadas a 310px para dar más espacio de página */
        width: fit-content !important; /* El contenedor ocupa solo lo necesario */
        max-width: none !important; /* IMPORTANTE: Anula el max-width: 400px heredado */
        gap: 12px !important; /* Separación cómoda entre botones */
        margin: 0 auto 35px auto !important;
        padding: 10px !important; /* Relleno interno para que los botones no toquen el borde */
        
        /* Estilo Recuadro de Vidrio idéntico al menú superior */
        background: rgba(28, 28, 30, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 28px !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Solo el contenedor activo (que NO está oculto con display: none) se muestra como grilla en PC */
    .subservices-container-original:not([style*="display: none"]) {
        display: grid !important;
    }
    
    .subservice-btn-original {
        width: 100% !important;
        padding: 0 20px 0 45px !important; /* Centrado vertical con altura de 38px y espacio de 45px para el icono */
        font-size: 14px !important;
        border-radius: 24px !important;
        height: 38px !important; /* Más finos: altura idéntica a la del selector inferior */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    /* Centrar el último botón de la grilla si queda solo (impar: casos de 3, 5 o 7 botones) */
    .subservice-btn-original:nth-child(4):last-child,
    .subservice-btn-original:nth-child(6):last-child,
    .subservice-btn-original:nth-child(8):last-child {
        grid-column: span 2 !important;
        width: 100% !important; /* Ocupa el ancho completo de las dos columnas en PC */
    }
}



/* Ajustes de adaptabilidad móvil para el dropdown flotante */
@media (max-width: 767px) {
    .dropdown-selected-value {
        font-size: 11px !important;
    }
    .dropdown-menu-item {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
}

/* ==========================================
   BOTÓN FLOTANTE DE TELEGRAM
   ========================================== */
.telegram-float {
    position: fixed;
    bottom: 105px; /* Posicionado a 15px de espacio sobre el de WhatsApp (30px + 60px + 15px = 105px) */
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #0088cc; /* Color oficial de Telegram */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.telegram-float:hover {
    background-color: #0077b5;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 136, 204, 0.6);
}
.telegram-float:active {
    transform: scale(0.95);
}
.telegram-tooltip {
    position: absolute;
    right: 80px;
    background: #151515;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.telegram-float:hover .telegram-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .telegram-float {
        bottom: 85px; /* 20px (whatsapp bottom) + 50px (whatsapp height) + 15px gap = 85px */
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    .telegram-tooltip {
        display: none; /* Ocultar en móvil para evitar tapar contenido */
    }
}

/* ==========================================
   BOTÓN FLOTANTE DE MESSENGER
   ========================================== */
.messenger-float {
    position: fixed;
    bottom: 180px; /* Posicionado a 15px de espacio sobre el de Telegram (105px + 60px + 15px = 180px) */
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #0084ff; /* Color oficial de Messenger */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.messenger-float:hover {
    background-color: #0077e6;
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 132, 255, 0.6);
}
.messenger-float:active {
    transform: scale(0.95);
}
.messenger-tooltip {
    position: absolute;
    right: 80px;
    background: #151515;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.messenger-float:hover .messenger-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .messenger-float {
        bottom: 150px; /* 85px (telegram bottom) + 50px (telegram height) + 15px gap = 150px */
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    .messenger-tooltip {
        display: none; /* Ocultar en móvil */
    }
}

/* ==========================================
   REGLA GENERAL PARA OCULTAR BOTONES FLOTANTES (PC Y MÓVIL)
   ========================================== */
.whatsapp-float.hide-float,
.telegram-float.hide-float,
.messenger-float.hide-float,
.share-float.hide-float {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) translateY(15px) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Acelerada la desaparición a 0.2s */
}

/* Animación de sacudida para el dropdown */
@keyframes shake-pill {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake-pill {
    animation: shake-pill 0.5s ease;
}

/* Animación de brillo para descargas */
@keyframes glow-pill {
    0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3); }
    100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
}
.glow-pill {
    animation: glow-pill 1s ease;
}

/* Mini-carrusel de imágenes en tarjetas */
.card-carousel .wt-img-box {
    position: relative;
    overflow: hidden;
}
.card-carousel .wt-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.card-carousel .wt-img-box img.card-img-hidden {
    opacity: 0;
    z-index: 0;
}
.card-carousel .wt-img-box img:not(.card-img-hidden) {
    z-index: 1;
}
.card-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.card-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s ease;
}
.card-dots .dot.active {
    background: #fff;
}