@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;

    --brand: #f44401;

}

/* ============================================

   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 .dropdown-floating-menu, body.light-mode .map-card,

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: #515154;

    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);

}

.logo-img { height: 84px; width: auto; }

.logo-light { display: none; }

body.light-mode .logo-dark { display: none; }

body.light-mode .logo-light { display: block; }

body.light-mode .desktop-menu a { color: #1d1d1f; font-weight: 700; }

body.light-mode .desktop-menu a:hover { color: var(--brand); }

body.light-mode .hamburger, body.light-mode .theme-toggle, body.light-mode .install-btn, body.light-mode .nav-icon-link { color: #1d1d1f; font-weight: 700; }

body.light-mode .theme-toggle:hover, body.light-mode .install-btn:hover, body.light-mode .nav-icon-link: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: #98989d; }

body.light-mode .hero-subtitle-white { color: #1d1d1f !important; }

body.light-mode .hero-subtitle-plus { color: var(--brand); }

body.light-mode .hero-cta-btn {

    background: var(--brand);

    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 12px 30px rgba(244,68,1,0.4);

    transform: translateY(-4px);

}

/* 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.90) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    color: #1d1d1f;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

    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: #515154; }

body.light-mode .wt-card-footer { background: rgba(0,0,0,0.85) !important; border-top-color: rgba(255,255,255,0.08) !important; }

body.light-mode .wt-card-footer .wt-footer-main { color: #fff !important; font-weight: 600 !important; }

body.light-mode .wt-card-footer .wt-footer-sub { color: #b0b0b5 !important; font-weight: 600 !important; }

/* Tip Cards */

body.light-mode .tip-card {

    background: rgba(255,255,255,0.90) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    color: #1d1d1f;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

    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: #1d1d1f; }

body.light-mode .tip-btn { color: #1d1d1f !important; }

body.light-mode .tip-card:hover .tip-btn { color: #1d1d1f; }

/* Folder Tabs - keep dark mode appearance */

body.light-mode .folder-tab {

    background: rgba(180, 130, 30, 0.95);

    border-color: rgba(220, 170, 50, 0.3);

    color: #ffffff;

    clip-path: polygon(

      0 100%,

      0 6%,

      2% 3%,

      4% 1%,

      6% 0,

      78% 0,

      84% 4%,

      89% 10%,

      93% 18%,

      96% 28%,

      100% 38%,

      100% 100%

    );

}

body.light-mode .folder-tab:hover { color: #fff; background: rgba(200, 150, 40, 1); }

body.light-mode .folder-tab.active {

    background: rgba(210, 160, 40, 1);

    color: #1a1a1a;

    border-color: rgba(220, 170, 50, 0.4);

    box-shadow: none;

    clip-path: polygon(

      0 100%,

      0 6%,

      2% 3%,

      4% 1%,

      6% 0,

      78% 0,

      84% 4%,

      89% 10%,

      93% 18%,

      96% 28%,

      100% 38%,

      100% 100%

    );

}

body.light-mode .folder-body {

    background: rgba(240, 200, 60, 0.98);

    border-color: rgba(220, 170, 50, 0.4);

    box-shadow: none;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}

/* Selector / Pills - keep dark */

body.light-mode .subservices-container-original { background: transparent; }

body.light-mode .subservice-btn-original {

    background: rgba(0, 0, 0, 0.1);

    color: #000;

    border-color: rgba(0, 0, 0, 0.08);

}

body.light-mode .subservice-btn-original:hover {

    background: rgba(0, 0, 0, 0.2);

    color: #000;

    box-shadow: none;

}

body.light-mode .subservice-btn-original.active {

    background: rgba(255,255,255,0.12);

    color: #fff;

}

/* Dropdown / Single Menu Pill - keep dark */

body.light-mode .single-menu-pill {

    background: rgba(30,30,32,0.98);

    border-color: rgba(255,255,255,0.08);

    box-shadow: none;

}

body.light-mode .single-menu-pill.has-value {

    background: rgba(30,30,32,0.98);

    border-color: rgba(255,255,255,0.08);

}

body.light-mode .single-menu-pill:not(.has-value):hover {

    border-color: rgba(255,255,255,0.15);

    background: rgba(30,30,32,0.98);

}

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.90) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    border-radius: 16px !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

    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: #515154 !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: #98989d !important;

    font-weight: 500;

}

body.light-mode .review-readmore:hover { color: var(--brand) !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 .reviews-count-original { color: #515154 !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;

}

/* Navigation Arrows - tips eliminadas */

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.90) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    color: #1d1d1f !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

}

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; }

body.light-mode .accordion-content-original { background: rgba(255,255,255,0.90); border: 1px solid rgba(0,0,0,0.12); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08); }

/* Map */

body.light-mode .map-card {

    background: #fff;

    border: 1px solid rgba(0,0,0,0.12) !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

    border-radius: 12px;

}

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); }

/* Footer */

body.light-mode .wt-footer {

    background: #fff;

    border-top-color: rgba(0,0,0,0.06);

}

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: var(--brand) !important;

    box-shadow: 0 2px 8px rgba(244,68,1,0.15);

}

body.light-mode .wt-copyright { color: #515154; }

body.light-mode .tips-disclaimer-inline { color: #515154; border-top-color: rgba(0,0,0,0.06); }

body.light-mode .orange-link { color: var(--brand) !important; }

/* Tooltips / Floats */

body.light-mode .share-float {

    background: rgba(255,255,255,0.90) !important;

    color: #515154;

    border: 1px solid rgba(0,0,0,0.12) !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

}

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, body.light-mode .mp-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 !important; border-bottom-color: rgba(0,0,0,0.06); font-weight: 700; }

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: var(--brand);

}

/* Dots */

body.light-mode .card-dots .dot { background: transparent; border-color: rgba(0, 0, 0, 0.25); }

body.light-mode .card-dots .dot.active { background: var(--brand); border-color: var(--brand); }

/* 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: var(--brand);

    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 var(--brand);

    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;

    padding-top: 55px;

}

/* Navbar */

.navbar {

    position: fixed; top: 0; width: 100%; z-index: 10; padding: 5px 0;

    background: rgba(18, 18, 20, 0.82);

    backdrop-filter: saturate(180%) blur(20px);

    -webkit-backdrop-filter: saturate(180%) blur(20px);

    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);

}

.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }

.desktop-menu { display: none; }

    .desktop-menu a { transition: color 0.25s ease, border-bottom-color 0.25s ease; border-bottom: 2px solid transparent; padding-bottom: 2px; }

    .desktop-menu a.active { color: var(--brand) !important; border-bottom-color: var(--brand); }

    .nav-right-btns { display: flex; align-items: center; gap: 24px; }

.hamburger { display: block; background: none; border: none; color: white; font-size: 1rem; cursor: pointer; }

.theme-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; color: white; font-size: 1rem; cursor: pointer; padding: 4px; border-radius: 8px; transition: color 0.25s, background 0.25s; }

.theme-toggle:hover { background: rgba(255,255,255,0.1); }

.install-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: white; font-size: 1rem; cursor: pointer; padding: 4px; border-radius: 8px; transition: color 0.25s, background 0.25s; }

.install-btn:hover { background: rgba(255,255,255,0.1); }

.nav-icon-link { display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; cursor: pointer; padding: 4px; border-radius: 8px; transition: color 0.25s, background 0.25s; text-decoration: none; }

.nav-icon-link: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.webp') no-repeat;

    background-size: cover;

    background-position: center center;

    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-subtitle {

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

    font-size: 11.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--brand);

    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: var(--brand) !important; /* Signo + en naranja */

    font-weight: 700 !important;

}

.hero-subtitle-white {

    color: #ffffff !important; /* "1000 REPARACIONES" en blanco */

    font-weight: 700 !important;

}

.hero-cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: var(--brand);

    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.25s ease;

}

.hero-cta-btn i {

    font-size: 16px;

    /* Color verde removido para que sea blanco original */

}

.hero-cta-btn:hover {

    background: #d93c00 !important;

    border-color: #fff !important;

    transform: translateY(-4px) !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;

}

.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;

}

/* Wrapper del Slider */

.tips-slider-wrapper {

    position: relative;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    overflow: hidden;

}

/* Flechas Tips */

.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: 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);

}

.tips-prev-btn { left: 5px; }

.tips-next-btn { right: 5px; }

.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;

    transform: translateY(-50%) scale(1.08) !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;

}

.tips-prev-btn:active, .tips-next-btn:active {

    transform: translateY(-50%) scale(0.95) !important;

}

.tips-container {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;

    overflow: hidden !important;

    padding: 0 !important;

    scrollbar-width: none !important;

    width: 100% !important;

}

.tips-container .tip-card {

    min-width: auto !important;

    max-width: none !important;

    width: auto !important;

    scroll-snap-align: unset;

}

.tips-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

}

.tips-pagination .wt-pagination-btn {

    width: 12px !important;

    height: 12px !important;

    min-width: 12px !important;

    max-width: 12px !important;

    border-radius: 50% !important;

    border: none !important;

    font-size: 0 !important;

    padding: 0 !important;

    color: transparent !important;

    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.2) !important;

}

.tips-pagination .wt-pagination-btn.active {

    background: #fff !important;

}

body.light-mode .tips-pagination .wt-pagination-btn {

    background: rgba(0, 0, 0, 0.3) !important;

}

body.light-mode .tips-pagination .wt-pagination-btn.active {

    background: #000 !important;

}

.tips-container .tips-page-hidden {

    display: none !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;

    height: 60px !important;

    min-height: 60px !important;

    max-height: 60px !important;

    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 {

    display: none !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: 60px !important;

    min-width: 60px !important;

    aspect-ratio: 1 / 1;

    height: 60px !important;

    border-radius: 10px;

    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: 14px;

    font-weight: 400;

    color: #fff;

    margin: 0 0 2px 0 !important;

    line-height: 1.2;

    text-align: left !important;

    flex-shrink: 0 !important;

}

.tip-desc { display: none !important; font-size: 13px; color: #d1d1d6;

    margin: 0 !important;

    padding: 0 !important;

    text-align: left !important;

    line-height: 1.5;

    flex-grow: 1 !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.25s, transform 0.25s;

    flex-shrink: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

}

.tip-card:hover .tip-btn {

    color: #fff !important;

}

/* Disclaimer / Letra chica */

.tips-disclaimer-inline {

    font-size: 11px;

    color: #9e9ea3;

    line-height: 1.5;

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

}

.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; }

}

/* Equipos (Reparaciones) Mobile */

.wt-devices-section { padding: 20px 0; }

@media (max-width: 767px) {

    .wt-devices-section { padding: 40px 0 20px 0; }

}

/* Menu Selector (Pill Style) */

@media (max-width: 767px) {

    .hero {

        height: 350px !important;

        padding-bottom: 10px !important;

    }


    .hero-bg {

        background-size: cover !important;

        background-position: center center !important;

    }

    .navbar .logo img {

        height: 50px !important;

        margin-top: 6px;

    }

    .hamburger {

        font-size: 1rem !important;

    }

    .theme-toggle {

        font-size: 1rem !important;

    }

    .install-btn .pc-icon { display: none; }

    .install-btn .movil-icon { display: inline; }

    .navbar {

        padding-top: 2px !important;

    }

}

/* ==================== 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;

    align-items: flex-end;

    max-width: 55%;

}

/* Cada solapa - mismo ancho (1/3 cada una) */

.folder-tab {

    position: relative;

    background: rgba(180, 130, 30, 0.95);

    border: 1px solid rgba(220, 170, 50, 0.3);

    border-bottom: none;

    padding: 0 20px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    cursor: pointer;

    transition: color 0.25s ease, background 0.25s ease;

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    border-radius: 0;

    flex: 1;

    min-width: 0;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    clip-path: polygon(

      0 100%,    /* esquina inferior izquierda */

      0 12%,     /* inicio curva izquierda - m�s alta */

      3% 8%,     /* curva */

      7% 4%,     /* curva */

      12% 1%,    /* curva */

      18% 0,     /* fin curva - borde superior */

      78% 0,     /* borde superior horizontal */

      84% 4%,    /* inicio curva derecha */

      89% 10%,   /* curva */

      93% 18%,   /* curva */

      96% 28%,   /* curva */

      100% 38%,  /* fin curva derecha */

      100% 100%  /* esquina inferior derecha */

    );

}

.folder-tab:hover {

    color: #fff;

    background: rgba(200, 150, 40, 1);

}

/* Solapa activa = mismo color que el cuerpo de la carpeta dorada, se fusiona */

.folder-tab.active {

    background: rgba(210, 160, 40, 1);

    color: #1a1a1a;

    font-weight: 600;

    border-color: rgba(220, 170, 50, 0.4);

    z-index: 3;

    clip-path: polygon(

      0 100%,

      0 12%,

      3% 8%,

      7% 4%,

      12% 1%,

      18% 0,

      78% 0,

      84% 4%,

      89% 10%,

      93% 18%,

      96% 28%,

      100% 38%,

      100% 100%

    );

}

/* Cuerpo de la carpeta */

.folder-body {

    position: relative;

    background: rgba(240, 200, 60, 0.98);

    border: 1px solid rgba(220, 170, 50, 0.4);

    border-radius: 0 0 12px 12px;

    box-shadow: 0 4px 24px rgba(180, 130, 30, 0.3);

    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: auto !important;

    min-height: 400px; /* Evitar achicamiento en Descargas/Ventas */

    opacity: 1;

    padding: 20px;

    overflow: visible !important;

}

.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: repeat(3, 1fr) !important;

    gap: 6px !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 8px !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: transparent !important;

    border: 1px solid transparent !important;

    color: #000 !important;

    padding: 12px 4px !important;

    font-size: 11px !important;

    font-weight: 400 !important;

    border-radius: 4px !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

    font-family: inherit !important;

    width: 100% !important;

    text-align: center !important;

    white-space: normal !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    -webkit-tap-highlight-color: transparent !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 4px !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: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    margin-right: 0 !important;

    font-size: 36px !important;

    width: auto !important;

    height: auto !important;

    filter: none !important;

    line-height: 1 !important;

    display: block !important;

    align-items: center !important;

    justify-content: center !important;

    color: #000 !important;

}

.folder-content .subservice-btn-original span {

    position: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    margin-right: 0 !important;

    font-size: 13px !important;

    width: auto !important;

    height: auto !important;

    filter: none !important;

    line-height: 1.2 !important;

    display: block !important;

    text-align: center !important;

    color: #000 !important;

}

.folder-content .subservice-btn-original:hover,

.folder-content > .subservices-container-original .subservice-btn-original:hover {

    color: #000 !important;

    border-color: rgba(0, 0, 0, 0.15) !important;

    background: rgba(0, 0, 0, 0.08) !important;

}

.folder-content .subservice-btn-original.active,

.folder-content > .subservices-container-original .subservice-btn-original.active {

    background: rgba(0, 0, 0, 0.15) !important;

    border-color: rgba(0, 0, 0, 0.2) !important;

    color: #000 !important;

    font-weight: 600 !important;

}

/* Mobile */

@media (max-width: 767px) {

    .folder-container {

        max-width: calc(100% - 20px);

    }

    .folder-tabs {

        height: 36px;

        gap: 0;

        max-width: 65%;

    }

    .folder-tab {

        padding: 0 14px;

        font-size: 12px;

        clip-path: polygon(

          0 100%,

          0 12%,

          3% 8%,

          7% 4%,

          12% 1%,

          18% 0,

          78% 0,

          84% 4%,

          89% 10%,

          93% 18%,

          96% 28%,

          100% 38%,

          100% 100%

        );

        flex: 1;

        min-width: 0;

    }

    .folder-tab:last-child {

        clip-path: polygon(

          0 100%,

          0 12%,

          3% 8%,

          7% 4%,

          12% 1%,

          18% 0,

          78% 0,

          84% 4%,

          89% 10%,

          93% 18%,

          96% 28%,

          100% 38%,

          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: auto !important;

        min-height: 300px; /* Evitar achicamiento en m�viles */

        overflow: visible !important;

    }

    .folder-content .subservices-container-original,

    .folder-content > .subservices-container-original {

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

        gap: 4px !important;

        padding: 6px !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: 10px 10px !important;

          font-size: 10px !important;

        height: auto !important;

        text-align: center !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 3px !important;

    }

    .folder-content .subservice-btn-original span {

        position: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        font-size: 11px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1.2 !important;

        display: block !important;

        text-align: center !important;

    }

.folder-content .subservice-btn-original i,

    .folder-content .subservice-btn-original svg {

        position: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        font-size: 28px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1 !important;

        display: block !important;

        align-items: center !important;

        justify-content: center !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;

    display: flex;

    background: rgba(30, 30, 32, 0.98) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 24px !important;

    overflow: visible !important;

    padding: 0;

    backdrop-filter: blur(20px) !important;

    -webkit-backdrop-filter: blur(20px) !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    width: 100% !important;

    max-width: 600px;

    box-sizing: border-box;

    z-index: 10000;

}

.single-menu-pill.has-value {

    background: rgba(30, 30, 32, 0.98) !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}

.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.25s ease;

}

/* Sticky Pill Clone - appears fixed at top */

.pill-sticky-clone {

    position: fixed !important;

    top: 65px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 9999 !important;

    max-width: 500px !important;

    width: calc(100% - 40px) !important;

    display: none;

    opacity: 0;

    transition: opacity 0.25s ease;

}

.pill-sticky-clone.visible {

    display: flex !important;

    opacity: 1;

}

.pill-sticky-clone .dropdown-floating-menu {

    position: fixed !important;

    top: calc(20px + 38px + 4px) !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    width: calc(100% - 40px) !important;

    max-width: 500px !important;

}

body.light-mode .pill-sticky-clone {

    background: rgba(255, 255, 255, 0.95) !important;

    border-color: rgba(0, 0, 0, 0.1) !important;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;

}

/* 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: 9999; /* Flota sobre todo */

    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(0, 0, 0, 0.1);

    border: 1px solid rgba(0, 0, 0, 0.08);

    color: #000;

    padding: 12px 24px 12px 48px;

    font-size: 14px;

    font-weight: 500;

    border-radius: 24px;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;

    width: 100%;

    text-align: center;

    white-space: normal;

    -webkit-tap-highlight-color: transparent;

}

.subservice-btn-original span {

    position: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    margin-right: 0 !important;

    font-size: 11px !important;

    width: auto !important;

    height: auto !important;

    filter: none !important;

    line-height: 1.2 !important;

    display: block !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    color: #000 !important;

}

.subservice-btn-original i,

.subservice-btn-original svg {

    position: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    margin-right: 0 !important;

    font-size: 36px !important;

    width: auto !important;

    height: auto !important;

    filter: none !important;

    line-height: 1 !important;

    display: block !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

}

.subservice-btn-original:hover {

    color: #000;

    border-color: rgba(0, 0, 0, 0.15);

    background: rgba(0, 0, 0, 0.2);

}

.subservice-btn-original.active {

    background: rgba(0, 0, 0, 0.2);

    border-color: rgba(0, 0, 0, 0.15);

    color: #000;

    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 */

    gap: 15px; padding: 20px 20px 15px;

    align-items: stretch;

    scrollbar-width: none;

}

.wt-grid-container::-webkit-scrollbar { display: none; }

.wt-grid-container.active-grid {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

}

.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;

    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;

}

/* ==========================================

   TARJETAS OCULTAS POR PAGINACI�N + PAGINACI�N

   ========================================== */

.wt-card.wt-page-hidden {

    display: none !important;

}

.wt-grid-placeholder {
    border: none;
    background: transparent;
    min-height: 120px;
    pointer-events: none;
}

body.light-mode .wt-grid-placeholder {
    background: transparent;
}

.wt-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 20px;

    flex-wrap: wrap;

}

.wt-pagination-btn {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(28, 28, 30, 0.75);

    color: #ccc;

    font-size: 13px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}

.wt-pagination-btn:hover {

    background: rgba(50, 50, 52, 0.85);

    border-color: rgba(255, 255, 255, 0.25);

    color: #fff;

    transform: translateY(-2px);

}

.wt-pagination-btn.active {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff;

    box-shadow: 0 4px 16px rgba(244, 68, 1, 0.4);

}

.wt-pagination-btn.pagination-arrow {

    font-size: 14px;

}

body.light-mode .wt-pagination-btn {

    background: rgba(255, 255, 255, 0.72);

    border-color: rgba(0, 0, 0, 0.06);

    color: #3a3a3c;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

}

body.light-mode .wt-pagination-btn:hover {

    background: rgba(255, 255, 255, 0.95);

    border-color: rgba(0, 0, 0, 0.12);

    color: #1d1d1f;

}

body.light-mode .wt-pagination-btn.active {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff;

    box-shadow: 0 4px 16px rgba(244, 68, 1, 0.35);

}

/* Hint de swipe en mobile */

.wt-swipe-hint {

    display: none;

    text-align: center;

    font-size: 12px;

    color: rgba(255, 255, 255, 0.4);

    margin-top: 8px;

    letter-spacing: 0.5px;

}

body.light-mode .wt-swipe-hint { color: rgba(0, 0, 0, 0.35); }

@media (max-width: 767px) {

    .wt-swipe-hint { display: block; }

}

.wt-info-box { padding: 0 20px 15px; flex-grow: 1; }

/* Tarjetas no disponibles */

.wt-card.no-disponible {

    position: relative !important;

    opacity: 0.7 !important;

}

.wt-card.no-disponible .wt-img-box img {

    filter: grayscale(100%) brightness(0.7) !important;

}

.wt-card.no-disponible .wt-img-box::after {

    content: 'NO DISPONIBLE' !important;

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    color: #fff !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    letter-spacing: 2px !important;

    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;

    z-index: 5 !important;

    pointer-events: none !important;

    white-space: nowrap !important;

}

.wt-card.no-disponible .wt-img-box {

    position: relative !important;

}

body.light-mode .wt-card.no-disponible .wt-img-box::after {

    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;

}

.wt-card-title { font-size: 16px; font-weight: 400; color: #fff; margin-bottom: 5px; }

.wt-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.3; }

.wt-card:not(.show-desc) .wt-card-desc { display: none; }

.wt-card.show-desc .wt-card-desc { display: block; }

.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: none; height: 0; margin: 0; padding: 0; }

/* Reviews */

.reviews-section { padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.05); overflow: visible; }

.reviews-layout { display: flex; flex-direction: column; gap: 25px; }

/* Badge centrado arriba */

.review-badge-original {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 15px !important;

    width: fit-content !important;

    min-width: unset !important;

    max-width: unset !important;

    padding: 0 !important;

    margin: 0 auto !important;

    text-align: center !important;

    position: relative;
    z-index: 1;

}

.badge-header-original {

    display: flex !important;

    align-items: center !important;

    gap: 12px !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;

}

.badge-body-original {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    align-items: center !important;

    padding-left: 0 !important;

}

.reviews-count-original {

    font-size: 13px !important;

    color: #98989d !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.25s, border-color 0.25s !important;

    font-family: inherit !important;

}

.btn-review-original:hover {

    background: rgba(255, 255, 255, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.5) !important;

}

/* Carousel: flechas fuera de las tarjetas */

.carousel-wrapper { position: relative; width: 100%; display: flex; align-items: center; padding: 0 50px; }

.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: 5px; }

.next-btn { right: 5px; }

.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;

    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;

    overflow: visible !important;

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s !important;

}

.review-card-original:hover {

    transform: translateY(-3px) !important;

    border-color: rgba(255, 255, 255, 0.2) !important;

    background: rgba(38, 38, 40, 0.85) !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;

}

.review-card-original:active {

    transform: scale(0.97) !important;

}

.review-header-original { display: flex !important; align-items: center !important; gap: 12px !important; position: relative !important; margin-bottom: 8px !important; overflow: visible !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; display: none !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;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    height: 66px !important;

    max-height: 66px !important;

}

.review-readmore {

    font-size: 12px !important;

    color: #98989d !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: visible;

    margin-bottom: 8px !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.25s 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.25s 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;

}

.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;

}

.seguime-btns a img {

    width: 24px;

    height: 24px;

    object-fit: contain;

}

.seguime-btns a[href*="mercadopago"] {

    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.3) !important;

}

.seguime-btns a[href*="mercadopago"] img {

    filter: invert(1);

}

body.light-mode .seguime-btns a[href*="mercadopago"] img {

    filter: none;

}

body.light-mode .seguime-btns a[href*="mercadopago"] {

    border-color: rgba(0,0,0,0.15) !important;

}

.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.25s ease;

    font-size: 20px;

}

.seguime-btns a:hover {

    background: rgba(255,255,255,0.1);

    border-color: #ffffff;

    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: #ffffff !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);

}

@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) {

    /* 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; }

        .desktop-menu { display: flex; gap: clamp(10px, 1.3vw, 25px); align-items: center; }

    .desktop-menu a { color: white; text-decoration: none; font-size: 13px; font-weight: 500; }

.install-btn .movil-icon { display: none; }

/* 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-slider-wrapper {

        max-width: 1200px !important;

        padding: 0 70px !important;

    }

    .tips-container {

        display: grid !important;

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

        gap: 16px !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

    }

    .tip-card {

        min-width: auto !important;

        max-width: none !important;

        width: auto !important;

        height: 60px !important;

        padding: 10px 10px 10px 14px !important;

        border-left: none !important;

        flex-direction: row !important;

        gap: 10px !important;

        position: relative !important;

    }

    .review-nav-btn {

        width: 48px;

        height: 48px;

    }

    .tip-card {

        min-width: auto !important;

        max-width: none !important;

        width: auto !important;

        height: 60px !important;

        padding: 10px 10px 10px 14px !important;

        border-left: none !important;

        flex-direction: row !important;

        gap: 10px !important;

        position: relative !important;

    }

    .tip-img-box {

        width: 60px !important;

        min-width: 60px !important;

        height: 60px !important;

        border-radius: 10px !important;

        flex-shrink: 0 !important;

    }

    /* 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: grid !important;

        grid-template-columns: repeat(4, 1fr) !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: hidden;

        transition: all 0.25s ease;

        text-decoration: none;

        color: inherit;

    }

    .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: 400 !important;

        margin: 0 0 3px 0 !important;

    }

    .wt-card-desc {

        color: #a1a1a6 !important;

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

        font-size: 14px !important;

        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);

        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: 13px !important;

    font-weight: 400;

        line-height: 1.3;

        display: block;

    }

    .wt-footer-sub {

        color: #98989d !important;

        font-size: 11px !important;

        font-weight: 700;

        display: none;

        height: 0;

        margin: 0;

        padding: 0;

    }

    /* 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: column;

        align-items: center;

        gap: 25px;

        padding: 0 !important;

    }

    .review-badge-original {

        padding: 0 !important;

        margin: 0 auto !important;

    }

    .badge-body-original {

        padding-left: 0 !important;

        align-items: center !important;

    }

    .carousel-wrapper {

        width: 100%;

        position: relative;

        padding: 0 70px;

    }

    .reviews-scroll-container {

        padding: 0;

        overflow-x: auto;

        scroll-snap-type: x mandatory !important;

        gap: 20px !important;

    }

    .review-card-original {

        min-width: calc((100% - 40px) / 3) !important;

        max-width: calc((100% - 40px) / 3) !important;

        width: calc((100% - 40px) / 3) !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.active { color: var(--brand) !important; border-bottom-color: var(--brand); }

    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-divider { color: #98989d; }

    body.light-mode .wt-card {

        background: rgba(255,255,255,0.90) !important;

        border: 1px solid rgba(0,0,0,0.12) !important;

        box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

        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: #515154 !important; }

    body.light-mode .wt-card-footer { background: rgba(0,0,0,0.85) !important; border-top-color: rgba(255,255,255,0.08) !important; }

    body.light-mode .wt-footer-main { color: #fff !important; font-weight: 600 !important; }

    body.light-mode .wt-footer-sub { color: #b0b0b5 !important; font-weight: 600 !important; }

    body.light-mode .reviews-section { border-top: none; }

    body.light-mode .review-card-original {

        background: rgba(255,255,255,0.90) !important;

        border: 1px solid rgba(0,0,0,0.12) !important;

        box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

        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: #515154 !important; }

    body.light-mode .review-text { color: #3a3a3c !important; }

    body.light-mode .review-readmore { color: #98989d !important; }

    body.light-mode .review-readmore:hover { color: var(--brand) !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 .reviews-count-original { color: #515154 !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.90) !important;

        border: 1px solid rgba(0,0,0,0.12) !important;

        color: #1d1d1f !important;

        box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !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 .accordion-content-original { background: rgba(255,255,255,0.90); border: 1px solid rgba(0,0,0,0.12); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08); }

    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 .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.90) !important;

        border: 1px solid rgba(0,0,0,0.12) !important;

        box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important;

    }

    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: #1d1d1f; }

    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(0, 0, 0, 0.2) !important;

        color: #000 !important;

        box-shadow: none;

    }

    body.light-mode .subservice-btn-original.active {

        background: rgba(0, 0, 0, 0.2) !important;

        color: #000 !important;

    }

    body.light-mode .folder-tab {

        background: rgba(180, 130, 30, 0.95) !important;

        border-color: rgba(220, 170, 50, 0.3) !important;

        color: #ffffff !important;

        clip-path: polygon(

          0 100%,

          0 12%,

          3% 8%,

          7% 4%,

          12% 1%,

          18% 0,

          78% 0,

          84% 4%,

          89% 10%,

          93% 18%,

          96% 28%,

          100% 38%,

          100% 100%

        ) !important;

    }

    body.light-mode .folder-tab.active {

        background: rgba(210, 160, 40, 1) !important;

        color: #1a1a1a !important;

        border-color: rgba(220, 170, 50, 0.4) !important;

        box-shadow: none !important;

        clip-path: polygon(

          0 100%,

          0 12%,

          3% 8%,

          7% 4%,

          12% 1%,

          18% 0,

          78% 0,

          84% 4%,

          89% 10%,

          93% 18%,

          96% 28%,

          100% 38%,

          100% 100%

        ) !important;

    }

    body.light-mode .folder-body {

        background: rgba(240, 200, 60, 0.98) !important;

        border-color: rgba(220, 170, 50, 0.4) !important;

    }

    body.light-mode .single-menu-pill {

        background: rgba(30,30,32,0.98) !important;

        border-color: rgba(255,255,255,0.08) !important;

    }

    body.light-mode .single-menu-pill.has-value {

        background: rgba(30,30,32,0.98) !important;

        border-color: rgba(255,255,255,0.08) !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: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08) !important; border-radius: 12px !important; }

    body.light-mode .map-iframe { filter: none !important; }

    body.light-mode .share-float { background: rgba(255,255,255,0.90) !important; color: #515154 !important; border: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 6px 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, body.light-mode .mp-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: 10000;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.share-float {

    position: fixed;

    bottom: 320px;

    right: 30px;

    width: 60px;

    height: 60px;

    background: rgba(42, 42, 46, 0.95);

    color: #98989d;

    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: 10000;

    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);

}

.mp-float {

    position: fixed;

    bottom: 250px;

    right: 30px;

    width: 60px;

    height: 60px;

    background-color: #009ee3;

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 6px 20px rgba(0, 158, 227, 0.3);

    z-index: 10000;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

}

.mp-float:hover {

    transform: scale(1.1) translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 158, 227, 0.5);

}

.mp-float img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.mp-float:active {

    transform: scale(0.95);

}

.mp-tooltip {

    position: absolute;

    right: 80px;

    background: #151515;

    color: #fff;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 13px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transform: translateX(10px);

    transition: all 0.25s ease;

}

.mp-float:hover .mp-tooltip {

    opacity: 1;

    transform: translateX(0);

}

.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.25s 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.25s 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;

}

.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.25s ease, border-color 0.25s 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;

}

/* 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 */

    }

}

.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: var(--brand);

    text-decoration: none;

    font-weight: 600;

    transition: color 0.25s 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;

}

@media (max-width: 767px) {

    .wt-footer-right-column {

        align-items: center;

        max-width: 100%;

    }

}

/* Scroll Reveal Animation for wt-card */

@keyframes slideUpReveal {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.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);

    }

}

.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;

}

/* 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.25s 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.25s ease, color 0.25s 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: var(--brand);

}

/* Animaci�n del bot�n hamburguesa */

.hamburger i {

    transition: transform 0.25s 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,

.mobile-menu-links a,

.hamburger,

.hero-cta-btn,

.whatsapp-float,

.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,

.hero-cta-btn:active,

.whatsapp-float:active,

.share-float:active,

.accordion-header-original:active {

    transform: scale(0.97) !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;

}

/* Tips: lista de 3 en m�vil con swipe t�ctil */

@media (max-width: 767px) {

    .tips-slider-wrapper {

        overflow: hidden !important;

        touch-action: pan-y !important;

    }

    .tips-container {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;

        overflow: hidden !important;

        width: 100% !important;

        transition: opacity 0.15s ease;

    }

    .tips-container .tip-card {

        min-width: auto !important;

        max-width: none !important;

        width: auto !important;

        height: 60px !important;

    }

    .review-card-original {

        height: auto !important;

        min-height: auto !important;

        max-height: none !important;

        overflow: visible !important;

        min-width: 100% !important;

        max-width: 100% !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 18px !important;

    }

    .reviews-scroll-container {

        padding: 0 16px 15px !important;

        gap: 16px !important;

        scroll-snap-type: x mandatory !important;

    }

    .review-nav-btn { display: none !important; }

    .tips-prev-btn, .tips-next-btn { display: none !important; }

    .review-text {

        -webkit-line-clamp: unset !important;

        overflow: visible !important;

        text-overflow: unset !important;

        display: block !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;

    }

    /* 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;

    }

    /* Carpeta: 3 columnas en m�vil (sobreescribe la regla general de 2 columnas) */

    .folder-content .subservices-container-original,

    .folder-content > .subservices-container-original {

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

        gap: 4px !important;

        padding: 6px !important;

        background: none !important;

        border: none !important;

        border-radius: 0 !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        box-shadow: none !important;

        max-width: none !important;

        width: 100% !important;

        margin: 0 !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;

    }

    /* Carpeta: botones estilo iconos escritorio en m�vil (3 columnas) */

    .folder-content .subservice-btn-original,

    .folder-content > .subservices-container-original .subservice-btn-original {

        padding: 12px 10px !important;

        font-size: 11px !important;

        height: auto !important;

        text-align: center !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 4px !important;

        border-radius: 4px !important;

        background: transparent !important;

        border: 1px solid transparent !important;

        color: #000 !important;

        font-weight: 400 !important;

        transition: all 0.15s ease !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !important;

        white-space: normal !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: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        margin-right: 0 !important;

        font-size: 32px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1 !important;

        display: block !important;

        align-items: center !important;

        justify-content: center !important;

        color: #000 !important;

    }

    .folder-content .subservice-btn-original span {

        position: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        margin-right: 0 !important;

        font-size: 13px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1.2 !important;

        display: block !important;

        text-align: center !important;

        color: #000 !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !important;

    }

    .folder-content .subservice-btn-original:hover,

    .folder-content > .subservices-container-original .subservice-btn-original:hover {

        color: #000 !important;

        border-color: rgba(0, 0, 0, 0.15) !important;

        background: rgba(0, 0, 0, 0.08) !important;

    }

    .folder-content .subservice-btn-original.active,

    .folder-content > .subservices-container-original .subservice-btn-original.active {

        background: rgba(0, 0, 0, 0.15) !important;

        border-color: rgba(0, 0, 0, 0.2) !important;

        color: #000 !important;

        font-weight: 600 !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: none !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: none !important;

        line-height: 1 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }

    /* ==========================================

       TARJETAS OPTIMIZADAS PARA M�VILES (CAROUSEL 1.5)

       ========================================== */

    /* Configurar el contenedor como grilla en m�vil */

    .wt-grid-container.active-grid {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 3vw !important;

        padding: 15px 4vw 20px 4vw !important;

    }

    /* Tarjetas en grilla: 2 por fila */

    .wt-card {

        min-width: 0 !important;

        max-width: none !important;

        border-radius: 18px !important;

        height: 310px !important;

        overflow: hidden !important;

    }

    /* Caja de imagen reducida */

    .wt-img-box {

    height: 180px !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 */

    .wt-card-footer {

        padding: 15px 20px !important;

        border-bottom-left-radius: 24px !important;

        border-bottom-right-radius: 24px !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 {

        max-width: 600px !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 */

    }

}

/* Desktop: Override para botones dentro de .folder-content (iconos estilo escritorio Windows) */

@media (min-width: 768px) {

    .folder-content .subservices-container-original,

    .folder-content > .subservices-container-original {

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

        gap: 6px !important;

        padding: 8px !important;

        background: none !important;

        border: none !important;

        border-radius: 0 !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        box-shadow: none !important;

        max-width: none !important;

        width: 100% !important;

        margin: 0 !important;

    }

    .folder-content .subservice-btn-original,

    .folder-content > .subservices-container-original .subservice-btn-original {

        background: transparent !important;

        border: 1px solid transparent !important;

        color: #000 !important;

        padding: 14px 6px !important;

        font-size: 13px !important;

        font-weight: 400 !important;

        border-radius: 6px !important;

        cursor: pointer !important;

        transition: all 0.15s ease !important;

        font-family: inherit !important;

        width: 100% !important;

        text-align: center !important;

        white-space: normal !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        -webkit-tap-highlight-color: transparent !important;

        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 4px !important;

        height: auto !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !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: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        margin-right: 0 !important;

        font-size: 36px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1 !important;

        display: block !important;

        align-items: center !important;

        justify-content: center !important;

        color: #000 !important;

    }

    .folder-content .subservice-btn-original span {

        position: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        margin-right: 0 !important;

        font-size: 13px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1.2 !important;

        display: block !important;

        text-align: center !important;

        color: #000 !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !important;

    }

    .folder-content .subservice-btn-original:hover,

    .folder-content > .subservices-container-original .subservice-btn-original:hover {

        color: #000 !important;

        border-color: rgba(0, 0, 0, 0.15) !important;

        background: rgba(0, 0, 0, 0.08) !important;

    }

    .folder-content .subservice-btn-original.active,

    .folder-content > .subservices-container-original .subservice-btn-original.active {

        background: rgba(0, 0, 0, 0.15) !important;

        border-color: rgba(0, 0, 0, 0.2) !important;

        color: #000 !important;

        font-weight: 600 !important;

    }

}

/* 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;

    }

    .wt-card-footer {

        margin-top: auto;

        margin-left: -14px !important;

        margin-right: -14px !important;

        padding: 15px 34px !important;

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

        border-bottom-left-radius: 18px !important;

        border-bottom-right-radius: 18px !important;

        flex-shrink: 0 !important;

        min-width: 0 !important;

    }

    .wt-text-container {

        padding-bottom: 0px !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: 10000;

    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.25s 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: 10000;

    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.25s 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,

.mp-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 p�ldora (hacia adentro, suave) */

@keyframes glow-pill {

    0% { box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.15); }

    50% { box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.15); }

    100% { box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.15); }

}

body.light-mode .glow-pill {

    animation: glow-pill-light 1s ease;

}

@keyframes glow-pill-light {

    0% { box-shadow: inset 0 0 4px rgba(255,255,255,0.15); }

    50% { box-shadow: inset 0 0 14px rgba(255,255,255,0.35), inset 0 0 20px rgba(255,255,255,0.15); }

    100% { box-shadow: inset 0 0 4px rgba(255,255,255,0.15); }

}

.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: 8px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 6px;

    z-index: 2;

    padding: 4px 8px;

    background: rgba(0, 0, 0, 0.3);

    border-radius: 10px;

}

.card-dots .dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: transparent;

    border: 1.5px solid rgba(255, 255, 255, 0.5);

    transition: all 0.3s ease;

    cursor: pointer;

    flex-shrink: 0;

}

.card-dots .dot.active {

    width: 20px;

    height: 8px;

    border-radius: 4px;

    background: #fff;

    border: 1.5px solid #fff;

}

/* ============================================

   UX IMPROVEMENTS

   ============================================ */

/* 3. Prefers Reduced Motion */

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

    *, *::before, *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

    .hero-logo-box { animation: none !important; }

}

/* 5. Skeleton Loading */

@keyframes skeletonShimmer {

    0% { background-position: -200px 0; }

    100% { background-position: calc(200px + 100%) 0; }

}

.wt-img-box img.loading,

.tip-img-box img.loading {

    opacity: 0;

}

.wt-img-box::before:not(.disabled .wt-img-box::before),

.tip-img-box::before {

    content: '';

    position: absolute;

    inset: 10px;

    border-radius: 12px;

}

.wt-img-box:not(.skeleton-active)::before,

.tip-img-box:not(.skeleton-active)::before {

    display: none;

}

/* 4. Floating FAB Mobile */

.fab-container {

    display: none;

}

@media (max-width: 767px) {

    .whatsapp-float, .telegram-float, .messenger-float, .share-float, .mp-float {

        display: none !important;

    }

    .fab-container {

        display: flex;

        position: fixed;

        bottom: 24px;

        right: 20px;

        z-index: 10001;

        flex-direction: column-reverse;

        align-items: center;

        gap: 10px;

    }

    .fab-main {

        width: 56px;

        height: 56px;

        border-radius: 50%;

        background: var(--brand);

        color: #fff;

        border: none;

        font-size: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        box-shadow: 0 4px 16px rgba(244, 68, 1, 0.4);

        transition: transform 0.25s ease, background 0.25s ease;

        z-index: 10002;

        -webkit-tap-highlight-color: transparent;

    }

    .fab-main:active {

        transform: scale(0.92);

    }

    .fab-main.open {

        transform: rotate(45deg);

        background: rgba(60, 60, 62, 0.95);

    }

    .fab-options {

        display: flex;

        flex-direction: column-reverse;

        gap: 10px;

        opacity: 0;

        pointer-events: none;

        transform: translateY(20px) scale(0.8);

        transition: opacity 0.25s ease, transform 0.25s ease;

    }

    .fab-options.open {

        opacity: 1;

        pointer-events: auto;

        transform: translateY(0) scale(1);

    }

    .fab-option {

        width: 46px;

        height: 46px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #fff;

        font-size: 20px;

        text-decoration: none;

        border: none;

        cursor: pointer;

        box-shadow: 0 2px 12px rgba(0,0,0,0.3);

        transition: transform 0.25s ease, opacity 0.25s ease;

        -webkit-tap-highlight-color: transparent;

        opacity: 0;

        transform: scale(0.5);

    }

    .fab-options.open .fab-option {

        opacity: 1;

        transform: scale(1);

    }

    .fab-options.open .fab-option:nth-child(1) { transition-delay: 0.05s; }

    .fab-options.open .fab-option:nth-child(2) { transition-delay: 0.1s; }

    .fab-options.open .fab-option:nth-child(3) { transition-delay: 0.15s; }

    .fab-options.open .fab-option:nth-child(4) { transition-delay: 0.2s; }

    .fab-options.open .fab-option:nth-child(5) { transition-delay: 0.25s; }

    .fab-option.whatsapp { background: #25d366; }

    .fab-option.messenger { background: #0084ff; }

    .fab-option.telegram { background: #0088cc; }

    .fab-option.share { background: #6e6e73; }

    .fab-option.mp { background: #009ee3; }

    .fab-option.mp img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

    .fab-option:active { transform: scale(0.9) !important; }

}

/* 7. Pill Tooltip */

.pill-tooltip {

    position: absolute;

    bottom: calc(100% + 8px);

    left: 50%;

    transform: translateX(-50%);

    background: rgba(30, 30, 32, 0.95);

    color: #a1a1a6;

    font-size: 12px;

    font-weight: 500;

    padding: 6px 14px;

    border-radius: 8px;

    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.25s ease;

    border: 1px solid rgba(255, 255, 255, 0.08);

    z-index: 101;

}

.pill-tooltip::after {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    border: 5px solid transparent;

    border-top-color: rgba(30, 30, 32, 0.95);

}

.single-menu-pill:not(.has-value):hover .pill-tooltip {

    opacity: 1;

}

body.light-mode .pill-tooltip {

    background: rgba(255, 255, 255, 0.95);

    border-color: rgba(0, 0, 0, 0.08);

    color: #515154;

}

body.light-mode .pill-tooltip::after {

    border-top-color: rgba(255, 255, 255, 0.95);

}

/* 2. Keyboard Focus for Folder Tabs */

.folder-tab:focus-visible,

.subservice-btn-original:focus-visible {

    outline: 2px solid var(--brand);

    outline-offset: 2px;

}

/* 10. Reduced blur for low-power devices */

@supports not (backdrop-filter: blur(1px)) {

    .single-menu-pill,

    .single-menu-pill.sticky,

    .folder-body,

    .subservices-container-original {

        background: rgba(30, 30, 32, 0.98) !important;

    }

    body.light-mode .single-menu-pill,

    body.light-mode .folder-body {

        background: rgba(255, 255, 255, 0.98) !important;

    }

}

/* ============================================

   MEJORAS VISUALES v2

   ============================================ */

/* --- Separadores de secci�n decorativos --- */

/* (eliminados - no se usan) */

/* --- Animaci�n de entrada en t�tulos h2 --- */

h2 {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}

h2.in-view {

    opacity: 1;

    transform: translateY(0);

}

/* --- Footer con gradiente sutil --- */

.wt-footer {

    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%) !important;

}

body.light-mode .wt-footer {

    background: linear-gradient(180deg, #f0f0f2 0%, #f5f5f7 100%) !important;

}

/* --- Efecto shimmer/brillo en wt-card al hover --- */

.wt-card {

    position: relative;

}

.wt-img-box {

    overflow: hidden;

}

.wt-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);

    transform: skewX(-15deg);

    opacity: 0;

    transition: none;

    pointer-events: none;

    z-index: 2;

}

.wt-card:hover::after {

    opacity: 1;

    animation: shimmerSweep 0.6s ease forwards;

}

@keyframes shimmerSweep {

    0% { left: -100%; opacity: 0; }

    20% { opacity: 1; }

    100% { left: 150%; opacity: 0; }

}

/* --- Card footer con gradiente --- */

.wt-card-footer {

    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 100%) !important;

}

/* --- Badge de rese�as hover --- */

.review-badge-original {

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.review-badge-original:hover {

    transform: scale(1.02);

    box-shadow: 0 8px 24px rgba(244, 68, 1, 0.15);

}

/* ============================================================

   OVERRIDE FINAL: Carpeta subservicios M�VIL (3 columnas, iconos desktop)

   Va al final para ganar cascada sobre TODO lo anterior

   ============================================================ */

@media (max-width: 767px) {

    .folder-content .subservices-container-original,

    .folder-content > .subservices-container-original {

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

        gap: 4px !important;

        padding: 6px !important;

        background: none !important;

        border: none !important;

        border-radius: 0 !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        box-shadow: none !important;

        max-width: none !important;

        width: 100% !important;

        margin: 0 !important;

    }

    .folder-content .subservice-btn-original,

    .folder-content > .subservices-container-original .subservice-btn-original {

        padding: 12px 10px !important;

        font-size: 12px !important;

        height: auto !important;

        text-align: center !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 4px !important;

        border-radius: 6px !important;

        background: transparent !important;

        border: 1px solid transparent !important;

        color: #000 !important;

        font-weight: 400 !important;

        transition: all 0.15s ease !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !important;

        min-width: 0 !important;

        width: 100% !important;

        margin: 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: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        font-size: 28px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1 !important;

        display: block !important;

        align-items: center !important;

        justify-content: center !important;

        color: #000 !important;

    }

    .folder-content .subservice-btn-original span {

        position: static !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        font-size: 12px !important;

        width: auto !important;

        height: auto !important;

        filter: none !important;

        line-height: 1.2 !important;

        display: block !important;

        text-align: center !important;

        color: #000 !important;

        word-break: break-word !important;

        overflow-wrap: anywhere !important;

    }

    .folder-content .subservice-btn-original:hover,

    .folder-content > .subservices-container-original .subservice-btn-original:hover {

        color: #000 !important;

        border-color: rgba(0, 0, 0, 0.15) !important;

        background: rgba(0, 0, 0, 0.08) !important;

    }

    .folder-content .subservice-btn-original.active,

    .folder-content > .subservices-container-original .subservice-btn-original.active {

        background: rgba(0, 0, 0, 0.15) !important;

        border-color: rgba(0, 0, 0, 0.2) !important;

        color: #000 !important;

        font-weight: 600 !important;

    }

}

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

   MARCA DE AGUA EN CONTENIDO PRINCIPAL (EFECTO FIXED PREMIUM)

   ========================================================================== */

.watermark-wrapper-original {

    position: relative;

    width: 100%;

}

/* El elemento marca de agua fijado en pantalla (detr�s del contenido) */

.watermark-sticky-original {

    position: fixed;

    top: 75px;

    left: 50%;

    transform: translateX(-50%) rotate(175deg) scale(1);    

    transform-origin: center center;

    width: 900px;

    height: 900px;

    background: url('images/watermark.webp') no-repeat;

    background-size: contain;

    background-position: center center;

    opacity: 0;

    z-index: 2;

    pointer-events: none;

    transition: transform 0.1s ease-out, opacity 0.1s ease-out;

    will-change: transform, opacity;

}



/* Evitar lag y bugs en celulares (iPhones) ajustando tama�o */

@media (max-width: 768px) {

    .watermark-sticky-original {

        left: 50%;

        width: 500px;

        height: 500px;

    }

}

.watermark-wrapper-original > section {

    position: relative;

    z-index: 1;

    background: transparent !important;

}

/* ==========================================================================
   TABLET RESPONSIVE OVERRIDES (768px - 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .wt-grid-container.active-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .tips-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   FULL HD (1500px - 1999px): Compact content via smaller base font & containers
   ========================================================================== */
@media (min-width: 1500px) and (max-width: 1999px) {
    html {
        font-size: 14.5px;
    }
    .nav-container, .hero-content {
        max-width: 1360px !important;
    }
    #equipos-section, .tips-header-row, .tips-slider-wrapper, .reviews-section,
    .faq-container-original, .map-container, .contact-card-container {
        max-width: 1360px !important;
    }
    .wt-grid-container.active-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .tips-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ==========================================================================
   HD LAPTOP (1000px - 1499px): Balanced compact layout
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1499px) {
    html {
        font-size: 13.5px;
    }
    .nav-container, .hero-content {
        max-width: 1140px !important;
    }
    #equipos-section, .tips-header-row, .tips-slider-wrapper, .reviews-section,
    .faq-container-original, .map-container, .contact-card-container {
        max-width: 1140px !important;
    }
    .wt-grid-container.active-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .tips-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    html {
        font-size: 13px;
    }
    .nav-container, .hero-content {
        max-width: 960px !important;
    }
    #equipos-section, .tips-header-row, .tips-slider-wrapper, .reviews-section,
    .faq-container-original, .map-container, .contact-card-container {
        max-width: 960px !important;
    }
    .wt-grid-container.active-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .tips-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================================================
   WIDESCREEN & FHD OVERRIDES (1200px+ screens)
   ========================================================================== */
@media (min-width: 1200px) {
    .nav-container, .hero-content {
        max-width: 1600px;
    }
    #equipos-section, .tips-header-row, .tips-slider-wrapper, .reviews-section, .faq-container-original, .map-container, .contact-card-container {
        max-width: 1600px !important;
    }
    .wt-grid-container.active-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .tips-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   HERO BRAND IMAGE (servicecode.webp) � integraci�n visual premium
   ========================================================================== */
.hero-brand-img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-bottom: 18px;
    object-fit: contain;

    /* Elimina el fondo blanco sobre fondos oscuros */
    mix-blend-mode: screen;

    /* Sombra luminosa que refuerza el efecto 3D del logo */
    filter:
        drop-shadow(0 0 18px rgba(255, 200, 80, 0.30))
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.60));

    /* Entrada suave */
    animation: heroLogoFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}

@keyframes heroLogoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
        filter:
            drop-shadow(0 0 0px rgba(255, 200, 80, 0))
            drop-shadow(0 0 0px rgba(0, 0, 0, 0));
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 0 18px rgba(255, 200, 80, 0.30))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.60));
    }
}

/* Modo claro: el logo es gris/blanco � invertirlo para que se vea sobre fondo claro */
body.light-mode .hero-brand-img {
    mix-blend-mode: multiply;
    filter:
        invert(1) brightness(0.15)
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .hero-brand-img {
        max-width: 310px;
        margin-bottom: 16px;
    }
}

/* Mobile grande (600px - 767px) */
@media (max-width: 767px) {
    .hero-brand-img {
        max-width: 260px;
        margin-bottom: 14px;
        /* Centrar en mobile */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile peque�o (<400px) */
@media (max-width: 400px) {
    .hero-brand-img {
        max-width: 200px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   WATERMARK STACKING � control quir�rgico por secci�n
   
   El watermark (position:fixed, z-index:2) debe ser:
     ? VISIBLE sobre hero-bg  (z-index:1) pero bajo hero-content (z-index:3)
     ? VISIBLE en la zona watermark-wrapper (detr�s de las tarjetas)
     ? TAPADO por todas las dem�s secciones (tips, reviews, map, faq, contact, footer)
   ========================================================================== */

/* Secciones que TAPAN el watermark: z-index:3 + fondo s�lido */
section#tips-section,
section#reviews-section,
section#map-section,
section#faq-section,
section#contact-section {
    position: relative;
    z-index: 3;
    background-color: var(--bg-color);
}

/* El footer tambi�n tapa el watermark */
footer.wt-footer {
    position: relative;
    z-index: 3;
}

/* El navbar siempre encima de todo */
header.navbar {
    z-index: 100;
}

/* Zona watermark-wrapper: sin stacking context propio para que el watermark fijo (z-index:2) pueda verse */
.watermark-wrapper-original {
    position: relative;
    z-index: auto;
}

/* La secci�n equipos (�Qu� necesitas? + tarjetas) TAPA el watermark con fondo s�lido */
section#equipos-section {
    position: relative;
    z-index: 3;
    background-color: var(--bg-color);
}