/* Critical Tailwind-compatible utilities for above-the-fold layout.
   The full Tailwind CDN remains enabled and executes before GEEK modules. */
.hidden{display:none!important}
.relative{position:relative}
.absolute{position:absolute}
.top-0{top:0}
.right-0{right:0}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.justify-center{justify-content:center}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.text-xs{font-size:.75rem;line-height:1rem}
.font-bold{font-weight:700}
.leading-none{line-height:1}
.text-red-100{color:#fee2e2}
.bg-red-600{background-color:#dc2626}
.rounded-full{border-radius:9999px}
.transform{transform:translateZ(0)}
.translate-x-1\/2.-translate-y-1\/2{transform:translate(50%,-50%)}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}

/* ===== ORIGINAL styles.css ===== */

/*
 * GEEK Frontend V19.0 — CSS depurado
 * Base: V18.1 con flip 3D corregido y sombra estática de alto rendimiento.
 * Se eliminaron selectores sin referencia en HTML/JavaScript, declaraciones
 * reemplazadas por reglas posteriores y animaciones que ya no se utilizan.
 */

html {
    scroll-behavior: smooth;
}

:root {
    --color-teal: #2E5E55;
    --color-mint: #5EC8AA;
    --color-geek-text: #222;
    --color-tagline: #2E5E55;
    --color-nav-text: #666;
    --header-height: 80px;
    --color-bg-light: #ffffff;
    --color-bg-section-light: #f9fafb;
    --color-text-dark: #1f2937;
    --color-text-mid: #6b7280;
}

body.dark-mode {
    --color-bg-light: #1f1f1f;
    --color-bg-section-light: #121212;
    --color-text-dark: #f4f4f4;
    --color-text-mid: #a0a0a0;
    --color-nav-text: #ccc;
    background-color: var(--color-bg-section-light);
    color: var(--color-text-mid);
}

.theme-sunset {
    --color-teal: #1D4C66;
    --color-mint: #52F5FF;
}

body.dark-mode.theme-sunset {
    --color-teal: #226182;
    --color-mint: #81FFFF;
    background-color: #121212;
}

.theme-ocean {
    --color-teal: #34495E;
    --color-mint: #3498DB;
}

body.dark-mode.theme-ocean {
    --color-teal: #2C3E50;
    --color-mint: #2980B9;
    background-color: #121212;
}

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

body {
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
}

.text-primary {
    color: var(--color-teal);
}

.text-secondary {
    color: var(--color-mint);
}

.bg-teal-custom {
    background-color: var(--color-teal) !important;
}

.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 40px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: var(--header-height);
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-nav-text);
    font-size: 15px;
    font-weight: 400;
    padding: 5px 0;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--color-teal);
}

.theme-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    margin-left: auto;
    margin-right: 20px;
}

.mode-toggle-btn {
    background-color: transparent;
    border: none;
    color: var(--color-teal);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.mode-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.color-switcher {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 1010;
    min-width: 50px;
    transform: translateY(10px);
    transition: background-color 0.3s;
}

.color-switcher.open {
    display: flex;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.default {
    background-color: #2E5E55;
}

.color-swatch.active {
    border-color: #222;
}

body.dark-mode .main-header {
    background-color: var(--color-bg-light);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.dark-mode .mode-toggle-btn {
    color: var(--color-mint);
}

body.dark-mode .mode-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .color-switcher {
    background-color: #2e2e2e;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

body.dark-mode .color-swatch.active {
    border-color: var(--color-text-dark);
}

.burger-menu {
    display: none;
    background-color: var(--color-mint);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    width: 48px;
    height: 48px;
    position: relative;
    transition: background-color 0.3s ease;
}

.burger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    margin: 4px 0;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .main-nav {
        display: block;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: auto;
        max-height: 0;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: max-height 0.4s ease-out;
    }

    .main-nav.open {
        max-height: 300px;
        border-top: 1px solid #eee;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 20px 40px;
        gap: 0;
    }

    .main-nav a {
        font-size: 16px;
        color: var(--color-teal);
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #f4f4f4;
    }

    .main-nav li:last-child a {
        border-bottom: none;
    }

    .main-nav li {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .main-nav.open li {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav.open li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .main-nav.open li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .main-nav.open li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .burger-menu {
        display: block;
        background-color: var(--color-mint);
    }

    .burger-menu.open {
        background-color: var(--color-mint);
        border: none;
    }

    .burger-menu.open .burger-line {
        background-color: white;
    }

    .burger-menu.open .burger-line:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.open .burger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .burger-menu.open .burger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

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

    .theme-controls {
        margin-right: 10px;
    }

    body.dark-mode .main-nav {
        background-color: var(--color-bg-light);
        box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
        border-top: 1px solid #333;
    }

    body.dark-mode .main-nav a {
        color: var(--color-mint);
        border-bottom: 1px solid #333;
    }

    .footer-logo {
        text-align: center;
    }

    .logo-img {
        display: block;
        margin: 0 auto;
    }
}

#inicio,
    #servicios {
    transition: background-color 0.3s;
}

body.dark-mode #inicio,
    body.dark-mode #servicios {
    background-color: var(--color-bg-section-light) !important;
}

#quienes-somos {
    background-color: var(--color-bg-section-light) !important;
    padding: 20px 0 28px;
    transition: background-color 0.3s;
}

#quienes-somos .text-4xl {
    color: var(--color-text-dark);
    font-family: "Poppins", sans-serif;
}

#quienes-somos .text-primary {
    color: var(--color-teal);
}

#quienes-somos .text-xl {
    color: var(--color-text-mid);
}

body.dark-mode .text-gray-900 {
    color: var(--color-text-dark) !important;
}

body.dark-mode .text-gray-600 {
    color: var(--color-text-mid) !important;
}

.service-card {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .service-card {
        width: calc(50% - 10px);
    }
}

@media (min-width: 1024px) {
    .service-card {
        width: calc(33.333% - 13.333px);
    }
}

.service-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.service-dot.active-dot {
    background-color: var(--color-teal);
}

body.dark-mode .service-dot {
    background-color: #555;
}

body.dark-mode .service-dot.active-dot {
    background-color: var(--color-mint);
}

#resenas {
    background-color: var(--color-mint);
    transition: background-color 0.3s;
}

#resenas h2,
    #resenas {
    color: white;
}

#resenas h2 span {
    color: var(--color-teal);
}

body.dark-mode #resenas {
    background-color: #173833 !important;
    color: var(--color-text-dark);
}

body.dark-mode #resenas h2 span {
    color: var(--color-mint);
}

body.dark-mode #resenas p.mt-4.text-xl {
    color: var(--color-text-dark) !important;
}

.review-text-container {
    flex-grow: 1;
    margin-top: auto;
    overflow: hidden;
    position: relative;
}

.review-text-container p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
    transition: -webkit-line-clamp 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

.review-text-container.expanded p {
    -webkit-line-clamp: unset;
    max-height: 1000px;
}

.toggle-btn {
    display: block;
    margin-top: 10px;
    color: var(--color-teal);
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
}

body.dark-mode .review-text-container p.text-xl.text-gray-700 {
    color: #ccc !important;
}

#contactanos {
    background-color: var(--color-teal);
    transition: background-color 0.3s;
}

#contactanos h2 {
    color: white;
}

#contactanos h2 .text-secondary {
    color: var(--color-mint);
}

#contactanos {
    color: white;
    opacity: 0.9;
}

body.dark-mode #contactanos {
    background-color: var(--color-bg-light) !important;
}

body.dark-mode #contactanos h2 {
    color: var(--color-text-dark);
}

body.dark-mode #contactanos h2 .text-secondary {
    color: var(--color-mint);
}

body.dark-mode #contactanos p {
    color: var(--color-text-mid);
    opacity: 1;
}

.contact-card {
    position: relative;
    padding: 10px;
    background-color: var(--color-bg-light);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.contact-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.contact-calendly-container {
    border-radius: 8px;
    overflow: hidden;
    width: 100% !important;
}

body.dark-mode .contact-card {
    background-color: var(--color-bg-light);
    border-color: #333;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
}

body.dark-mode .contact-card .text-primary {
    color: var(--color-teal) !important;
}

body.dark-mode .contact-card h3 {
    color: var(--color-text-dark) !important;
}

body.dark-mode .contact-card p {
    color: var(--color-text-mid) !important;
    opacity: 1;
}

._cUP1np9gMvFQrcPftuf.xahN8AEzyAvQtVj17TPv {
    margin-top: 0 !important;
    margin-bottom: 30px;
}

.whatsapp-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 999;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    text-decoration: none;
}

.whatsapp-fab:hover {
    background-color: #1FAF59;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

body.dark-mode .whatsapp-fab {
    background-color: #25D366;
}

body.dark-mode .whatsapp-fab:hover {
    background-color: #1FAF59;
}

.main-footer {
    background-color: white;
    color: var(--color-teal);
    padding: 40px 20px 20px;
    font-family: "Poppins", sans-serif;
    border-top: 1px solid #eee;
    transition: background-color 0.3s, border-top 0.3s;
}

.footer-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-mint);
}

.footer-item {
    padding: 10px;
}

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

.footer-contact h3,
    .footer-social h3 {
    margin-top: 0;
    font-size: 1.2em;
    margin-bottom: 15px;
    color: var(--color-teal);
}

.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--color-mint);
    text-decoration: none;
    font-size: 24px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #3b5998;
}

.social-links a:hover:nth-child(2) {
    color: #E1306C;
}

.footer-copyright {
    text-align: center;
    padding-top: 20px;
}

.footer-copyright p {
    margin: 0;
    font-size: 0.9em;
    color: #666;
}

@media (max-width: 768px) {
    .footer-content-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-item {
        margin-bottom: 20px;
    }

    .social-links {
        justify-content: center;
    }
}

body.dark-mode .main-footer {
    background-color: var(--color-bg-light);
    border-top: 1px solid #333;
}

body.dark-mode .footer-contact h3,
    body.dark-mode .footer-social h3 {
    color: var(--color-mint);
}

body.dark-mode .footer-contact ul li {
    color: var(--color-text-mid);
}

body.dark-mode .footer-copyright p {
    color: #999;
}

.logo-light {
    display: block !important;
}

.logo-dark {
    display: none !important;
}

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

body.dark-mode .logo-dark {
    display: block !important;
}

.logo-container img {
    height: 60px !important;
    width: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.footer-logo .logo-light {
    display: block !important;
}

.footer-logo .logo-dark {
    display: none !important;
}

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

body.dark-mode .footer-logo .logo-dark {
    display: block !important;
}

.footer-logo img {
    max-width: 150px;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.typewriter-cursor {
    display: inline-block;
    color: var(--color-teal);
    animation: blink 0.7s step-end infinite;
}

.typewriter-cursor.done {
    display: none;
}

@keyframes blink {
    50% {
            opacity: 0;
        }
}

.inicio-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: inicioFadeUp 0.7s ease forwards;
}

.inicio-fade-left {
    opacity: 0;
    transform: translateX(30px);
    animation: inicioFadeLeft 0.8s ease forwards;
}

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

@keyframes inicioFadeLeft {
    to {
            opacity: 1;
            transform: translateX(0);
        }
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

#splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

#splash img {
    width: clamp(100px, 12vw, 250px);
    height: auto;
    display: block;
}

@keyframes fadeOutSplash {
    to {
            opacity: 0;
            pointer-events: none;
        }
}

#services-dots-container {
    align-items: center;
}

#services-dots-container button {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background-color: #c4c7cc !important;
    opacity: 0.9;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

#services-dots-container button.active,
    #services-dots-container button.bg-primary {
    width: 14px;
    height: 14px;
    background-color: #2e5e55 !important;
    opacity: 1;
    transform: scale(1.1);
}

:root {
    --geek-green-indicator: var(--color-teal, #2e5e55);
    --geek-gray-indicator: #9ca3af;
}

#services-dots-container,
    #indicators {
    align-items: center;
}

#services-dots-container .service-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background-color: var(--geek-gray-indicator) !important;
    opacity: 0.85;
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

#services-dots-container .service-dot.active-dot {
    width: 14px;
    height: 14px;
    background-color: var(--geek-green-indicator) !important;
    opacity: 1;
    transform: scale(1.08);
}

#resenas .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

#resenas .testimonial-grid-card {
    background-color: var(--color-bg-light, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.5rem;
    padding: 2rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 45px rgba(20, 40, 35, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#resenas .testimonial-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(20, 40, 35, 0.18);
    border-color: rgba(46, 94, 85, 0.2);
}

#resenas .testimonial-grid-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#resenas .testimonial-grid-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

#resenas .testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid rgba(46, 94, 85, 0.25);
    background-color: #eef5f1;
}

#resenas .testimonial-name {
    color: #111827;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: 1rem;
}

#resenas .testimonial-role {
    color: #6b7280;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.25;
    margin-top: 0.25rem;
}

#resenas .testimonial-stars {
    color: #fbbc04;
    font-size: 1.05rem;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

#resenas .testimonials-grid .review-text-container {
    flex-grow: 1;
    margin-top: 0;
    overflow: hidden;
    position: relative;
}

#resenas .testimonials-grid .review-text {
    color: #374151;
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
    transition: -webkit-line-clamp 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

#resenas .testimonials-grid .review-text-container.expanded .review-text {
    -webkit-line-clamp: unset;
    max-height: 1000px;
}

#resenas .testimonials-grid .toggle-btn {
    color: var(--color-teal, #2e5e55);
    font-weight: 800;
    margin-top: 1rem;
}

body.dark-mode #resenas .testimonial-grid-card {
    background-color: #2e2e2e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

body.dark-mode #resenas .testimonial-name {
    color: #ffffff;
}

body.dark-mode #resenas .testimonial-role,
    body.dark-mode #resenas .testimonials-grid .review-text {
    color: #d1d5db;
}

@media (max-width: 1024px) {
    #resenas .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #resenas .testimonials-grid {
        grid-template-columns: 1fr;
    }

    #resenas .testimonial-grid-card {
        padding: 1.5rem;
    }

    #resenas .testimonial-grid-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.region-toggle-btn {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    border: 2px solid rgba(46, 94, 85, 0.22);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.region-toggle-btn:hover {
    transform: translateY(-1px) scale(1.04);
    border-color: var(--color-teal, #2e5e55);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
}

.region-toggle-btn img,
    .region-flag-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.region-flag-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: #f8fafc;
}

.region-modal.hidden,
    .region-toggle-btn .hidden,
    .region-option-flag-wrap .hidden {
    display: none !important;
}

.region-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.region-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
}

.region-modal-card {
    position: relative;
    width: min(920px, 100%);
    background: #ffffff;
    border-radius: 1.4rem;
    padding: 2rem;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
    animation: regionModalIn 0.25s ease-out;
}

@keyframes regionModalIn {
    from {
            opacity: 0;
            transform: translateY(16px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
}

.region-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: none;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.region-modal-close:hover {
    background: #e2e8f0;
    transform: scale(1.04);
}

.region-modal-heading {
    max-width: 720px;
    margin-bottom: 1.5rem;
}

.region-modal-eyebrow {
    color: var(--color-teal, #2e5e55);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
}

.region-modal-heading h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #0f172a;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.region-modal-heading p,
    .region-modal-helper {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
}

.region-options-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.region-option {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 1.1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    min-height: 166px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.region-option:hover,
    .region-option:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(46, 94, 85, 0.45);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    outline: none;
}

.region-option.active {
    border-color: var(--color-teal, #2e5e55);
    background: rgba(46, 94, 85, 0.06);
    box-shadow: 0 12px 28px rgba(46, 94, 85, 0.13);
}

.region-option-flag-wrap {
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.region-option-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.region-option-fallback {
    font-size: 1.8rem;
}

.region-option-copy strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.2;
}

.region-option-copy small {
    display: block;
    color: #64748b;
    margin-top: 0.3rem;
    font-size: 0.88rem;
    line-height: 1.35;
}

.region-modal-helper {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

body.region-modal-open {
    overflow: hidden;
}

body.dark-mode .region-toggle-btn,
    body.dark-mode .region-modal-card,
    body.dark-mode .region-option {
    background: #1f2937;
    color: #f8fafc;
}

body.dark-mode .region-modal-heading h2,
    body.dark-mode .region-option-copy strong,
    body.dark-mode .region-modal-close {
    color: #f8fafc;
}

body.dark-mode .region-modal-heading p,
    body.dark-mode .region-modal-helper,
    body.dark-mode .region-option-copy small {
    color: #cbd5e1;
}

body.dark-mode .region-modal-close {
    background: #334155;
}

body.dark-mode .region-option {
    border-color: #334155;
}

body.dark-mode .region-option.active {
    background: rgba(92, 200, 170, 0.12);
    border-color: var(--color-mint, #a8e6cf);
}

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

@media (max-width: 520px) {
    .region-modal {
        align-items: flex-end;
        padding: 0;
    }

    .region-modal-card {
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 1.4rem 1.4rem 0 0;
        padding: 1.5rem;
    }

    .region-options-grid {
        grid-template-columns: 1fr;
    }

    .region-option {
        min-height: auto;
        flex-direction: row;
        align-items: center;
    }

    .region-toggle-btn {
        width: 38px;
        height: 38px;
    }
}

html[data-language="zh"] body {
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
}

.geek-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 18% 18%, rgba(94, 200, 170, 0.22), transparent 34%),
        radial-gradient(circle at 82% 22%, rgba(46, 94, 85, 0.14), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfa 52%, #ffffff 100%);
    isolation: isolate;
}

.geek-hero-gradient {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(46, 94, 85, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 94, 85, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 78%, transparent 100%);
    z-index: -3;
}

.geek-hero-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(4px);
    opacity: 0.8;
    z-index: -2;
    animation: geekOrbFloat 9s ease-in-out infinite alternate;
}

.geek-hero-orb-one {
    width: 360px;
    height: 360px;
    left: -140px;
    top: 18%;
    background: radial-gradient(circle, rgba(94, 200, 170, 0.28), rgba(94, 200, 170, 0));
}

.geek-hero-orb-two {
    width: 430px;
    height: 430px;
    right: -190px;
    bottom: 4%;
    background: radial-gradient(circle, rgba(46, 94, 85, 0.2), rgba(46, 94, 85, 0));
    animation-delay: 1.5s;
}

.geek-hero-inner {
    position: relative;
    display: grid;
    align-items: center;
}

.geek-hero-copy {
    max-width: 660px;
    animation: geekHeroCopyIn 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.geek-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(46, 94, 85, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-teal);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
    backdrop-filter: blur(14px);
}

.geek-hero-kicker::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--color-mint);
    box-shadow: 0 0 0 6px rgba(94, 200, 170, 0.16);
}

.geek-hero-title {
    margin-top: 1.6rem;
    font-weight: 900;
    color: #101827;
}

.geek-hero-title .text-primary {
    position: relative;
    display: inline-block;
    color: var(--color-teal);
}

.geek-hero-title .text-primary::after {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 0.02em;
    bottom: 0.06em;
    height: 0.16em;
    border-radius: 999px;
    background: rgba(94, 200, 170, 0.28);
    z-index: -1;
}

.geek-hero-description {
    margin-top: 1.5rem;
    color: #5d6678;
}

.geek-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.1rem;
}

.geek-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.95rem 1.35rem;
    border-radius: 999px;
    font-weight: 850;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.geek-hero-btn:hover {
    transform: translateY(-2px);
}

.geek-hero-btn-primary {
    color: white;
    background: linear-gradient(135deg, var(--color-teal), #2b7569);
    box-shadow: 0 18px 36px rgba(46, 94, 85, 0.24);
}

.geek-hero-btn-primary:hover {
    box-shadow: 0 24px 46px rgba(46, 94, 85, 0.32);
}

.geek-hero-btn-secondary {
    color: var(--color-teal);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(46, 94, 85, 0.18);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.06);
    backdrop-filter: blur(14px);
}

.geek-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 2.35rem;
    max-width: 570px;
}

.geek-proof-item {
    padding: 1rem 0.9rem;
    border: 1px solid rgba(46, 94, 85, 0.12);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.05);
    backdrop-filter: blur(14px);
}

.geek-proof-item strong {
    display: block;
    color: var(--color-teal);
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 900;
}

.geek-proof-item span {
    display: block;
    margin-top: 0.35rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
}

body.dark-mode .geek-hero {
    background: radial-gradient(circle at 18% 18%, rgba(94, 200, 170, 0.16), transparent 34%),
        radial-gradient(circle at 82% 22%, rgba(94, 200, 170, 0.10), transparent 30%),
        linear-gradient(180deg, #121212 0%, #151917 58%, #121212 100%);
}

body.dark-mode .geek-hero-title {
    color: #f8fafc;
}

body.dark-mode .geek-hero-description,
    body.dark-mode .geek-proof-item span {
    color: #cbd5e1;
}

body.dark-mode .geek-hero-kicker,
    body.dark-mode .geek-hero-btn-secondary,
    body.dark-mode .geek-proof-item {
    background: rgba(31, 41, 55, 0.58);
    border-color: rgba(94, 200, 170, 0.14);
}

@keyframes geekHeroCopyIn {
    from { opacity: 0; transform: translateY(26px); }
        to { opacity: 1; transform: translateY(0); }
}

@keyframes geekVisualIn {
    from { opacity: 0; transform: translateY(28px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes geekOrbFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
        to { transform: translate3d(28px, -18px, 0) scale(1.04); }
}

@media (max-width: 1180px) {
    .geek-hero-copy {
        max-width: 900px;
        text-align: center;
        margin: 0 auto;
    }

    .geek-hero-description,
        .geek-hero-proof {
        margin-left: auto;
        margin-right: auto;
    }

    .geek-hero-actions {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .geek-hero-title {
        font-size: clamp(2.65rem, 13vw, 4.2rem);
        letter-spacing: -0.065em;
    }

    .geek-hero-proof {
        grid-template-columns: 1fr;
    }

    .geek-hero-actions {
        flex-direction: column;
    }

    .geek-hero-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geek-hero-copy,
        .geek-hero-orb {
        animation: none !important;
    }
}

.geek-hero {
    min-height: auto;
    padding: 7.2rem 0 5.2rem;
}

.geek-hero-inner {
    max-width: 1480px !important;
    grid-template-columns: minmax(430px, 0.82fr) minmax(680px, 1.18fr);
    gap: 3.4rem;
}

.geek-hero-title {
    font-size: clamp(3.2rem, 5.05vw, 5.25rem);
    line-height: 0.96;
    letter-spacing: -0.072em;
}

.geek-hero-description {
    max-width: 590px;
    font-size: clamp(1.02rem, 1.28vw, 1.22rem);
    line-height: 1.62;
}

@media (min-width: 1440px) {
    .geek-hero-inner {
        grid-template-columns: minmax(440px, 0.78fr) minmax(760px, 1.22fr);
    }
}

@media (max-width: 1180px) {
    .geek-hero-inner {
        grid-template-columns: 1fr;
        max-width: 980px !important;
    }
}

@media (max-width: 720px) {
    .geek-hero {
        padding: 6.8rem 0 4rem;
    }
}

.geek-hero-image-wrap {
    position: relative;
    width: 100%;
    min-height: 540px;
    border-radius: 2.15rem;
    overflow: hidden;
    border: 1px solid rgba(46, 94, 85, 0.12);
    box-shadow: 0 28px 80px rgba(17, 24, 39, 0.12);
    background: #eef5f1;
    isolation: isolate;
    transform: translateZ(0);
    animation: geekVisualIn 950ms 180ms cubic-bezier(.16, 1, .3, 1) both;
}

.geek-hero-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(46, 94, 85, 0.08)),
        radial-gradient(circle at 24% 18%, rgba(94, 200, 170, 0.18), transparent 36%);
}

.geek-hero-image-wrap::after {
    content: "";
    position: absolute;
    inset: 1rem;
    z-index: 2;
    border-radius: 1.65rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    pointer-events: none;
}

.geek-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

body.dark-mode .geek-hero-image-wrap {
    border-color: rgba(94, 200, 170, 0.16);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.30);
    background: #111827;
}

body.dark-mode .geek-hero-image-wrap::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(46, 94, 85, 0.18)),
        radial-gradient(circle at 24% 18%, rgba(94, 200, 170, 0.16), transparent 36%);
}

@media (max-width: 1180px) {
    .geek-hero-image-wrap {
        max-width: 860px;
        margin: 0 auto;
    }
}

@media (max-width: 720px) {
    .geek-hero-image-wrap,
        .geek-hero-image {
        min-height: 420px;
    }

    .geek-hero-image-wrap {
        border-radius: 1.7rem;
    }
}

.geek-services-story-section {
    position: relative;
    overflow: clip;
}

.geek-story {
    --story-accent: #5ff0c4;
    --story-progress: 0;
    position: relative;
}

.geek-story::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 82%, transparent 100%);
}

.geek-story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
}

.geek-story-track {
    position: relative;
}

.geek-story-sticky {
    position: sticky;
    top: var(--header-height, 80px);
    display: grid;
    align-items: center;
    overflow: hidden;
}

.geek-story-layout {
    margin: 0 auto;
    display: grid;
    align-items: center;
}

.geek-story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: .1em;
}

.geek-story-eyebrow > span {
    width: 36px;
    height: 1px;
}

.geek-story-copy h3 {
    margin: 0;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-weight: 600;
    text-wrap: balance;
}

.geek-story-copy > p {
    color: rgba(222, 237, 231, .68);
}

.geek-story-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: rgba(223, 239, 233, .48);
    font-size: .78rem;
    letter-spacing: .03em;
}

.geek-story-scroll-cue > span {
    position: relative;
    width: 18px;
    height: 30px;
    border: 1px solid rgba(126, 244, 200, .32);
    border-radius: 999px;
}

.geek-story-scroll-cue > span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 3px;
    height: 6px;
    border-radius: 999px;
    background: var(--story-accent);
    transform: translateX(-50%);
    animation: geekStoryScrollCue 1.65s ease-in-out infinite;
}

@keyframes geekStoryScrollCue {
    0% { opacity: 0; transform: translate(-50%, 0); }
        28% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, 10px); }
}

.geek-story-device-wrap {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}

.geek-story-device-glow {
    position: absolute;
    width: 84%;
    aspect-ratio: 1.25;
    border-radius: 50%;
    transform: translate3d(7%, 4%, 0) scale(calc(.92 + var(--story-progress) * .1));
    transition: background .45s ease;
}

.geek-story-device {
    --story-rotate: -3.2deg;
    --story-lift: 0px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.geek-story-device-layer {
    position: absolute;
    inset: 3% 3% 0;
    border: 1px solid rgba(188, 250, 225, .10);
    border-radius: 46px;
    transform-origin: 50% 100%;
}

.geek-story-window {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border: 1px solid rgba(195, 250, 229, .16);
}

.geek-story-window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.geek-story-window-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 7px 10px;
}

.geek-story-window-header span {
    border-radius: 50%;
}

.geek-story-window-header i {
    height: 1px;
    flex: 1;
    margin-left: 8px;
}

.geek-story-core {
    position: relative;
    z-index: 2;
    display: flex;
    border: 1px solid rgba(194, 247, 225, .10);
    transition: background .5s ease, border-color .5s ease;
}

.geek-story-core::before {
    content: "";
    position: absolute;
    inset: -45%;
    background: conic-gradient(from 180deg at 50% 50%, transparent, var(--story-accent), transparent 32%);
    animation: geekStoryCoreSpin 18s linear infinite;
}

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

.geek-story-core-grid {
    position: absolute;
    inset: 0;
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at 75% 30%, #000, transparent 72%);
}

.geek-story-orbit {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent);
    border-radius: 50%;
    opacity: .42;
    transition: border-color .45s ease;
}

.geek-story-orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 50%;
    left: -4px;
    border-radius: 50%;
    background: var(--story-accent);
    box-shadow: 0 0 18px var(--story-accent);
}

.geek-story-orbit-one {
    width: 265px;
    height: 265px;
    top: -95px;
    right: -62px;
    animation: geekStoryOrbit 14s linear infinite;
}

.geek-story-orbit-two {
    width: 170px;
    height: 170px;
    top: 8px;
    right: 10px;
    animation: geekStoryOrbit 10s linear reverse infinite;
}

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

.geek-story-core-label,
    .geek-story-counter {
    color: var(--story-accent);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: .095em;
    text-transform: uppercase;
    transition: color .45s ease;
}

.geek-story-counter {
    letter-spacing: .04em;
}

.geek-story-flow {
    position: relative;
    z-index: 3;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.geek-story-flow::-webkit-scrollbar {
    display: none;
}

.geek-story-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(218, 241, 232, .12);
    border-radius: 999px;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.geek-story-pill.is-active {
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .geek-story-layout {
        grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
        gap: 2.5rem;
    }

    .geek-story-copy h3 {
        font-size: clamp(2.75rem, 5vw, 4.5rem);
    }

    .geek-story-core {
        min-height: 305px;
    }
}

@media (max-width: 860px) {
    .geek-services-story-section {
        padding-top: 4.5rem;
    }

    .geek-story-copy {
        max-width: 680px;
    }

    .geek-story-copy h3 {
        max-width: 640px;
        line-height: .98;
    }

    .geek-story-copy > p {
        margin-top: 1rem;
        font-size: .94rem;
        line-height: 1.55;
    }

    .geek-story-scroll-cue {
        display: none;
    }

    .geek-story-device {
        padding: 10px;
    }

    .geek-story-window {
        padding: 14px;
        border-radius: 30px;
    }

    .geek-story-core {
        min-height: min(38svh, 285px);
        padding: 1.55rem;
        border-radius: 23px;
    }

    .geek-story-flow {
        padding-top: 12px;
    }

    .geek-story-pill {
        min-height: 38px;
        padding: .62rem .85rem;
        font-size: .68rem;
    }
}

@media (max-width: 520px) {
    .geek-story-layout {
        width: calc(100% - 20px);
        gap: 1.2rem;
        padding-top: 1.15rem;
    }

    .geek-story-eyebrow {
        margin-bottom: .85rem;
        font-size: .66rem;
    }

    .geek-story-copy h3 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .geek-story-copy > p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .geek-story-core {
        min-height: 240px;
    }

    .geek-story-device-layer {
        border-radius: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geek-story-device,
        .geek-story-pill {
        transition-duration: .01ms !important;
    }
}

.geek-story-sticky {
    min-height: calc(100svh - var(--header-height, 80px)) !important;
}

.geek-story-eyebrow {
    margin-bottom: 1.05rem !important;
    font-size: .72rem !important;
}

.geek-story-copy h3 {
    max-width: 520px !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
}

.geek-story-copy > p {
    max-width: 500px !important;
    margin-top: 1.35rem !important;
    font-size: clamp(.94rem, 1.15vw, 1.08rem) !important;
    line-height: 1.62 !important;
}

.geek-story-scroll-cue {
    margin-top: 1.55rem !important;
}

.geek-story-device-wrap {
    perspective: none !important;
}

.geek-story-device {
    transform: translate3d(0, var(--story-lift), 0) rotateZ(0deg) rotateY(0deg) !important;
}

.geek-story-device-layer-one {
    transform: translate3d(13px, -14px, 0) rotate(0deg) !important;
    opacity: .32 !important;
}

.geek-story-device-layer-two {
    transform: translate3d(-10px, 10px, 0) rotate(0deg) !important;
    opacity: .18 !important;
}

.geek-story-window-header {
    height: 25px !important;
    padding-bottom: 8px !important;
}

.geek-story-window-header span {
    width: 8px !important;
    height: 8px !important;
}

.geek-story-core {
    border-radius: 25px !important;
}

.geek-story-core-label,
    .geek-story-counter {
    font-size: .68rem !important;
}

.geek-story-flow {
    padding-top: 14px !important;
}

.geek-story-pill {
    font-size: .7rem !important;
}

@media (max-width: 1180px) {
    .geek-story-layout {
        width: min(1040px, calc(100% - 44px)) !important;
    }

    .geek-story-copy h3 {
        font-size: clamp(2.55rem, 4.35vw, 3.85rem) !important;
    }
}

@media (max-height: 760px) and (min-width: 861px) {
    .geek-story-layout {
        padding: 1.1rem 0 !important;
    }

    .geek-story-eyebrow {
        margin-bottom: .75rem !important;
    }

    .geek-story-copy h3 {
        font-size: clamp(2.35rem, 4vw, 3.65rem) !important;
    }

    .geek-story-copy > p {
        margin-top: 1rem !important;
        line-height: 1.5 !important;
    }

    .geek-story-device {
        width: min(100%, 470px) !important;
    }
}

@media (max-width: 860px) {
    .geek-story-track {
        height: auto !important;
    }

    .geek-story-sticky {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
    }

    .geek-story-layout {
        width: min(100% - 28px, 720px) !important;
        grid-template-columns: 1fr !important;
        gap: 1.4rem !important;
        padding: 3rem 0 !important;
    }

    .geek-story-copy h3 {
        font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
    }

    .geek-story-device {
        width: min(100%, 560px) !important;
    }
}

.geek-services-story-section {
    padding-top: 0 !important;
}

.geek-services-story-section > .max-w-7xl {
    display: none !important;
}

.geek-story-core:focus-visible {
    outline: 2px solid var(--story-accent);
    outline-offset: 4px;
}

.geek-story-more-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    margin-top: 1.25rem;
    padding: .72rem 1rem;
    border: 1px solid color-mix(in srgb, var(--story-accent) 42%, transparent);
    border-radius: 999px;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.geek-story-more-link::after {
    content: "↗";
    font-size: .82rem;
    line-height: 1;
    opacity: .9;
}

.geek-story-more-link:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--story-accent) 72%, transparent);
    background: color-mix(in srgb, var(--story-accent) 20%, rgba(5, 28, 20, .72));
    box-shadow: 0 0 30px color-mix(in srgb, var(--story-accent) 18%, transparent);
}

.geek-story-pill::after {
    content: "↗";
    margin-left: .38rem;
    font-size: .72em;
    opacity: .62;
}

@media (max-height: 760px) and (min-width: 861px) {
    .geek-story-more-link {
        margin-top: .9rem !important;
        padding: .58rem .84rem !important;
        font-size: .68rem !important;
    }
}

#quienes-somos {
    position: relative;
    overflow: hidden;
}

#quienes-somos::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 18%, rgba(94, 200, 170, 0.12), transparent 34%),
        radial-gradient(circle at 88% 28%, rgba(124, 99, 255, 0.08), transparent 30%);
}

.mission-growth-board {
    position: relative;
    max-width: 1180px;
    margin: 4.25rem auto 0;
    padding: 2.1rem 2.2rem 1.35rem;
    border-radius: 2.25rem;
    border: 1px solid rgba(46, 94, 85, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248, 253, 251, 0.94)),
        radial-gradient(circle at 50% 36%, rgba(94, 200, 170, 0.14), transparent 40%);
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.92);
    overflow: hidden;
    isolation: isolate;
}

.mission-growth-board::before,
    .mission-growth-board::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(46, 94, 85, 0.07);
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.mission-growth-board::before {
    top: -110px;
    left: -94px;
}

.mission-growth-board::after {
    top: -110px;
    right: -94px;
}

.mission-growth-orbit {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.mission-growth-orbit-one {
    width: 340px;
    height: 340px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(94, 200, 170, 0.13);
    box-shadow: 0 0 70px rgba(94, 200, 170, 0.10);
}

.mission-growth-orbit-two {
    width: 470px;
    height: 470px;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(59, 130, 246, 0.13);
}

.mission-growth-head {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.mission-growth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .36rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f8f76, #11a389);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(17, 163, 137, 0.22);
}

.mission-growth-head h3 {
    margin-top: .6rem;
    font-size: clamp(2.1rem, 4vw, 3.35rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -0.055em;
    color: #0f172a;
}

.mission-growth-title-line {
    display: block;
    width: 86px;
    height: 4px;
    border-radius: 999px;
    margin: .65rem auto .8rem;
    background: linear-gradient(90deg, #13a88d, #5ec8aa);
}

.mission-growth-head p {
    margin: 0 auto;
    color: #52627a;
    font-size: 1.02rem;
    line-height: 1.55;
}

.mission-growth-map {
    position: relative;
    z-index: 2;
    min-height: 395px;
    margin-top: 1.4rem;
}

.mission-growth-lines {
    position: absolute;
    inset: 0 4% auto 4%;
    width: 92%;
    height: 360px;
    z-index: 1;
    pointer-events: none;
}

.mission-line {
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 6 8;
    opacity: .78;
    animation: missionLineFlow 20s linear infinite;
}

.mission-line-green {
    stroke: rgba(17, 163, 137, 0.8);
}

.mission-line-blue {
    stroke: rgba(59, 130, 246, 0.72);
}

.mission-line-purple {
    stroke: rgba(124, 99, 255, 0.7);
}

.mission-line-soft {
    stroke: rgba(94, 200, 170, 0.24);
    stroke-dasharray: 2 10;
}

@keyframes missionLineFlow {
    from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: -140; }
}

.mission-growth-core {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #fbfffd),
        radial-gradient(circle at 50% 0%, rgba(94, 200, 170, 0.16), transparent 58%);
    border: 1px solid rgba(46, 94, 85, 0.12);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.11),
        0 0 0 14px rgba(94, 200, 170, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 4;
    animation: missionCoreFloat 6s ease-in-out infinite;
}

.mission-growth-core-aura {
    position: absolute;
    inset: -28px;
    border-radius: inherit;
    border: 1px solid rgba(94, 200, 170, 0.12);
    box-shadow: inset 0 0 26px rgba(94, 200, 170, 0.07);
    opacity: .9;
    pointer-events: none;
}

@keyframes missionCoreFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-6px); }
}

.mission-core-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    margin-bottom: .42rem;
    background: linear-gradient(135deg, #5ec8aa, #2e5e55);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(46, 94, 85, 0.16);
}

.mission-growth-core small {
    display: block;
    color: #15977f;
    font-weight: 900;
    letter-spacing: .32em;
    font-size: .78rem;
    margin-bottom: .42rem;
}

.mission-growth-core strong {
    display: block;
    max-width: 112px;
    color: #0f172a;
    font-size: 1.08rem;
    line-height: 1.12;
    font-weight: 900;
}

.mission-growth-cards {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
    z-index: 5;
}

.mission-growth-card {
    position: relative;
    min-height: 174px;
    border-radius: 1.45rem;
    padding: 1.55rem 1.45rem 1.35rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.95);
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 1rem;
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.mission-growth-card:hover {
    transform: translateY(-7px);
    border-color: rgba(94, 200, 170, 0.28);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.11);
}

.mission-card-number {
    position: absolute;
    left: 1.05rem;
    top: 1rem;
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    border-radius: 999px;
    font-weight: 900;
    color: #15977f;
    background: rgba(94, 200, 170, 0.12);
}

.mission-card-icon {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin-top: 1.35rem;
}

.mission-card-icon svg {
    width: 38px;
    height: 38px;
}

.mission-card-icon-green {
    color: #13a88d;
    background: rgba(19, 168, 141, 0.12);
}

.mission-card-icon-blue {
    color: #2f7de1;
    background: rgba(47, 125, 225, 0.12);
}

.mission-card-icon-purple {
    color: #7058d8;
    background: rgba(112, 88, 216, 0.12);
}

.mission-card-copy h4 {
    color: #111827;
    font-weight: 900;
    font-size: 1.28rem;
    line-height: 1.08;
    margin-bottom: .62rem;
}

.mission-card-accent {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    margin-bottom: .72rem;
    background: #13a88d;
}

.mission-growth-card-two .mission-card-accent {
    background: #2f7de1;
}

.mission-growth-card-three .mission-card-accent {
    background: #7058d8;
}

.mission-card-copy p {
    color: #52627a;
    font-size: .89rem;
    line-height: 1.45;
    margin: 0;
}

.mission-growth-chipbar {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .72rem;
    padding: .72rem;
    margin: .4rem auto 0;
    border-radius: 1.45rem;
    max-width: 1040px;
    background: rgba(248, 253, 251, 0.92);
    border: 1px solid rgba(94, 200, 170, 0.16);
    box-shadow: 0 18px 45px rgba(46, 94, 85, 0.08);
}

.mission-growth-chipbar span {
    min-height: 52px;
    border-radius: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.mission-growth-chipbar b {
    font-style: normal;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(94, 200, 170, 0.10);
    color: #15977f;
    font-weight: 900;
}

.mission-growth-chipbar em {
    font-style: normal;
    color: #1f2937;
    font-weight: 800;
    font-size: .85rem;
}

body.dark-mode #quienes-somos {
    background-color: #111827 !important;
}

body.dark-mode .mission-growth-board {
    background: linear-gradient(180deg, rgba(248, 253, 251, 0.96), rgba(235, 249, 244, 0.92)),
        radial-gradient(circle at 50% 36%, rgba(94, 200, 170, 0.12), transparent 42%);
    border-color: rgba(94, 200, 170, 0.14);
}

body.dark-mode .mission-growth-head h3,
    body.dark-mode .mission-growth-core strong,
    body.dark-mode .mission-card-copy h4 {
    color: #0f172a;
}

body.dark-mode .mission-growth-head p,
    body.dark-mode .mission-card-copy p {
    color: #52627a;
}

@media (max-width: 1120px) {
    .mission-growth-board {
        padding: 2rem 1.35rem 1.25rem;
    }

    .mission-growth-cards {
        gap: 1.1rem;
        left: 1.5%;
        right: 1.5%;
    }

    .mission-growth-card {
        grid-template-columns: 62px 1fr;
        padding: 1.35rem 1.1rem 1.2rem;
    }

    .mission-card-icon {
        width: 58px;
        height: 58px;
    }

    .mission-growth-chipbar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .mission-growth-board {
        margin-top: 3rem;
        border-radius: 1.65rem;
        padding: 1.65rem 1rem 1rem;
    }

    .mission-growth-map {
        min-height: auto;
        margin-top: 1.6rem;
    }

    .mission-growth-lines,
        .mission-growth-orbit,
        .mission-growth-core-aura {
        display: none;
    }

    .mission-growth-core {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 1.35rem;
        animation: none;
    }

    .mission-growth-cards {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mission-growth-card {
        min-height: 150px;
    }

    .mission-growth-chipbar {
        margin-top: 1.1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .mission-growth-chipbar span {
        justify-content: flex-start;
        padding: 0 .8rem;
    }
}

@media (max-width: 460px) {
    .mission-growth-chipbar {
        grid-template-columns: 1fr;
    }
}

.geek-story:not(.is-story-active) .geek-story-core::before,
    .geek-story:not(.is-story-active) .geek-story-orbit-one,
    .geek-story:not(.is-story-active) .geek-story-orbit-two,
    .geek-story:not(.is-story-active) .geek-story-scroll-cue > span::after {
    animation-play-state: paused !important;
}

#quienes-somos .mission-growth-board {
    padding: 2.35rem 2.2rem 1.55rem !important;
}

#quienes-somos .mission-growth-map {
    min-height: 505px !important;
    margin-top: 1.9rem !important;
}

#quienes-somos .mission-growth-lines {
    height: 455px !important;
    inset: 0 3.5% auto 3.5% !important;
    width: 93% !important;
}

#quienes-somos .mission-growth-core {
    top: 8px !important;
    width: 168px !important;
    height: 168px !important;
    overflow: visible !important;
    z-index: 7 !important;
    isolation: isolate;
}

#quienes-somos .mission-growth-core::before,
    #quienes-somos .mission-growth-core::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
    transform-origin: 50% 50%;
    animation: missionCorePulse 3.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

#quienes-somos .mission-growth-core::before {
    border: 1px solid rgba(46, 94, 85, 0.18);
    box-shadow: 0 0 42px rgba(94, 200, 170, 0.09);
}

#quienes-somos .mission-growth-core::after {
    border: 1px solid rgba(94, 200, 170, 0.24);
    animation-delay: 1.45s;
}

#quienes-somos .mission-growth-core-aura {
    inset: -40px !important;
    opacity: .62 !important;
    z-index: 0 !important;
}

#quienes-somos .mission-core-mark,
    #quienes-somos .mission-growth-core small,
    #quienes-somos .mission-growth-core strong {
    position: relative;
    z-index: 2;
}

@keyframes missionCorePulse {
    0% {
            opacity: .46;
            transform: scale(.98);
        }
        58% {
            opacity: .12;
            transform: scale(1.48);
        }
        100% {
            opacity: 0;
            transform: scale(1.72);
        }
}

#quienes-somos .mission-growth-cards {
    bottom: 58px !important;
    left: 3.2% !important;
    right: 3.2% !important;
    gap: 2rem !important;
    align-items: stretch;
}

#quienes-somos .mission-growth-card {
    min-height: 182px !important;
    padding: 1.65rem 1.55rem 1.4rem !important;
    z-index: 6;
}

#quienes-somos .mission-growth-card-two {
    transform: translateY(18px);
}

#quienes-somos .mission-growth-card-two:hover {
    transform: translateY(10px);
}

#quienes-somos .mission-growth-chipbar {
    margin-top: .75rem !important;
}

body.dark-mode #quienes-somos .mission-growth-core::before {
    border-color: rgba(46, 94, 85, 0.20);
}

body.dark-mode #quienes-somos .mission-growth-core::after {
    border-color: rgba(94, 200, 170, 0.26);
}

@media (max-width: 1120px) {
    #quienes-somos .mission-growth-map {
        min-height: 545px !important;
    }

    #quienes-somos .mission-growth-cards {
        gap: 1rem !important;
        left: 1.6% !important;
        right: 1.6% !important;
    }

    #quienes-somos .mission-growth-card {
        min-height: 205px !important;
        grid-template-columns: 58px 1fr !important;
        padding: 1.55rem 1.05rem 1.25rem !important;
    }

    #quienes-somos .mission-card-copy h4 {
        font-size: 1.12rem !important;
    }

    #quienes-somos .mission-card-copy p {
        font-size: .84rem !important;
    }
}

@media (max-width: 780px) {
    #quienes-somos .mission-growth-map {
        min-height: auto !important;
    }

    #quienes-somos .mission-growth-core {
        width: 152px !important;
        height: 152px !important;
        top: auto !important;
        overflow: visible !important;
    }

    #quienes-somos .mission-growth-core::before,
        #quienes-somos .mission-growth-core::after {
        animation: none !important;
        opacity: 0 !important;
    }

    #quienes-somos .mission-growth-card-two,
        #quienes-somos .mission-growth-card-two:hover {
        transform: none !important;
    }

    #quienes-somos .mission-growth-card {
        min-height: 150px !important;
    }
}

.geek-services-story-section {
    background: linear-gradient(180deg, #f8fcfb 0%, #eef8f4 100%) !important;
}

.geek-story {
    color: #111827 !important;
    background: radial-gradient(circle at 75% 40%, color-mix(in srgb, var(--story-accent) 16%, transparent), transparent 30%),
        radial-gradient(circle at 14% 12%, rgba(94, 200, 170, 0.12), transparent 28%),
        linear-gradient(145deg, #f9fffd 0%, #eff9f5 54%, #f7fbff 100%) !important;
    border-top: 1px solid rgba(46, 94, 85, 0.08) !important;
}

.geek-story::before {
    opacity: .42 !important;
    background-image: linear-gradient(rgba(46, 94, 85, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 94, 85, .045) 1px, transparent 1px) !important;
}

.geek-story::after {
    opacity: .10 !important;
    mix-blend-mode: multiply !important;
}

.geek-story-layout {
    width: min(1240px, calc(100% - 56px)) !important;
    grid-template-columns: minmax(0, .78fr) minmax(560px, 1.18fr) !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
    padding: clamp(1.25rem, 2.3vh, 2rem) 0 !important;
}

.geek-story-copy {
    max-width: 510px !important;
}

.geek-story-eyebrow {
    color: #148c77 !important;
}

.geek-story-eyebrow > span {
    background: linear-gradient(90deg, #18a48b, transparent) !important;
    box-shadow: 0 0 14px rgba(24, 164, 139, .24) !important;
}

.geek-story-copy h3 {
    color: #0f172a !important;
    font-size: clamp(2.65rem, 4.25vw, 4.35rem) !important;
}

.geek-story-copy > p,
    .geek-story-scroll-cue {
    color: rgba(44, 61, 78, .68) !important;
}

.geek-story-scroll-cue > span {
    border-color: rgba(20, 140, 119, .28) !important;
}

.geek-story-device-glow {
    background: color-mix(in srgb, var(--story-accent) 22%, rgba(94, 200, 170, .10)) !important;
    filter: blur(28px) !important;
    opacity: .28 !important;
}

.geek-story-device {
    width: min(100%, 710px) !important;
    padding: 14px !important;
}

.geek-story-device-layer {
    border-color: rgba(46, 94, 85, .10) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(219, 244, 235, .64)) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .10) !important;
}

.geek-story-window {
    padding: 16px !important;
    border-radius: 34px !important;
    border-color: rgba(46, 94, 85, .14) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(232, 248, 242, .88) 68%),
        #f8fffc !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.95),
        0 0 0 1px rgba(46, 94, 85, .05) !important;
    backdrop-filter: blur(4px) !important;
}

.geek-story-window::after {
    background: linear-gradient(120deg, rgba(255,255,255,.38), transparent 25%, transparent 70%, color-mix(in srgb, var(--story-accent) 8%, transparent)) !important;
}

.geek-story-window-header span {
    background: rgba(46, 94, 85, .26) !important;
}

.geek-story-window-header i {
    background: linear-gradient(90deg, rgba(46, 94, 85, .13), transparent) !important;
}

.geek-story-core {
    border-color: rgba(46, 94, 85, .11) !important;
    background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--story-accent) 18%, transparent), transparent 32%),
        radial-gradient(circle at 16% 96%, rgba(94, 200, 170, .13), transparent 42%),
        linear-gradient(150deg, rgba(255,255,255,.96), rgba(233, 248, 242, .94)) !important;
    box-shadow: inset 0 0 34px rgba(94, 200, 170, .10),
        0 14px 34px rgba(15, 23, 42, .10) !important;
}

.geek-story-core-grid {
    opacity: .26 !important;
    background-image: linear-gradient(rgba(46, 94, 85, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 94, 85, .08) 1px, transparent 1px) !important;
}

.geek-story-core-label {
    color: #168b77 !important;
}

.geek-story-counter {
    color: rgba(15, 23, 42, .45) !important;
}

.geek-story-more-link {
    color: #0f2f2a !important;
    border-color: color-mix(in srgb, var(--story-accent) 48%, rgba(46,94,85,.10)) !important;
    background: color-mix(in srgb, var(--story-accent) 17%, rgba(255,255,255,.72)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--story-accent) 10%, transparent) !important;
}

.geek-story-flow {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: .58rem !important;
    overflow: visible !important;
    padding: 14px 1px 1px !important;
}

.geek-story-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center !important;
    padding: .62rem .55rem !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(31, 45, 61, .64) !important;
    border-color: rgba(46, 94, 85, .11) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
}

.geek-story-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.geek-story-pill:hover {
    color: #0f2f2a !important;
    border-color: color-mix(in srgb, var(--story-accent) 32%, rgba(46,94,85,.12)) !important;
}

.geek-story-pill.is-active {
    color: #0f2f2a !important;
    border-color: color-mix(in srgb, var(--story-accent) 60%, transparent) !important;
    background: color-mix(in srgb, var(--story-accent) 20%, rgba(255,255,255,.84)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--story-accent) 10%, transparent),
        0 10px 24px color-mix(in srgb, var(--story-accent) 12%, transparent) !important;
}

body.dark-mode .geek-services-story-section {
    background: #0d1110 !important;
}

body.dark-mode .geek-story {
    color: #f7fbf9 !important;
    background: radial-gradient(circle at 77% 43%, color-mix(in srgb, var(--story-accent) 18%, transparent), transparent 28%),
        radial-gradient(circle at 20% 4%, rgba(49, 116, 95, 0.16), transparent 29%),
        linear-gradient(145deg, #06100d 0%, #030806 53%, #07100d 100%) !important;
    border-top-color: rgba(126, 244, 200, 0.08) !important;
}

body.dark-mode .geek-story::before {
    opacity: .24 !important;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
}

body.dark-mode .geek-story::after {
    opacity: .18 !important;
    mix-blend-mode: soft-light !important;
}

body.dark-mode .geek-story-eyebrow {
    color: #79f0c9 !important;
}

body.dark-mode .geek-story-copy h3 {
    color: #fff !important;
}

body.dark-mode .geek-story-copy > p,
    body.dark-mode .geek-story-scroll-cue {
    color: rgba(222, 237, 231, .68) !important;
}

body.dark-mode .geek-story-device-glow {
    background: color-mix(in srgb, var(--story-accent) 24%, transparent) !important;
    filter: blur(34px) !important;
    opacity: .32 !important;
}

body.dark-mode .geek-story-device-layer {
    border-color: rgba(188, 250, 225, .10) !important;
    background: linear-gradient(145deg, rgba(33, 61, 52, .72), rgba(10, 24, 19, .76)) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.28) !important;
}

body.dark-mode .geek-story-window {
    border-color: rgba(195, 250, 229, .14) !important;
    background: linear-gradient(145deg, rgba(39, 68, 59, .91), rgba(13, 30, 24, .96) 65%),
        #10251e !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(6px) !important;
}

body.dark-mode .geek-story-window-header span {
    background: rgba(228, 240, 235, .34) !important;
}

body.dark-mode .geek-story-window-header i {
    background: linear-gradient(90deg, rgba(207, 242, 229, .12), transparent) !important;
}

body.dark-mode .geek-story-core {
    border-color: rgba(194, 247, 225, .10) !important;
    background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--story-accent) 25%, transparent), transparent 28%),
        radial-gradient(circle at 65% 80%, rgba(54, 140, 111, .14), transparent 38%),
        linear-gradient(150deg, rgba(8, 28, 21, .96), rgba(3, 12, 9, .98)) !important;
    box-shadow: inset 0 0 38px rgba(10, 52, 39, .24),
        0 16px 36px rgba(0,0,0,.22) !important;
}

body.dark-mode .geek-story-core-grid {
    opacity: .17 !important;
    background-image: linear-gradient(rgba(124, 241, 198, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 241, 198, .12) 1px, transparent 1px) !important;
}

body.dark-mode .geek-story-core-label,
    body.dark-mode .geek-story-counter {
    color: var(--story-accent) !important;
}

body.dark-mode .geek-story-more-link {
    color: #eafff7 !important;
    border-color: color-mix(in srgb, var(--story-accent) 42%, transparent) !important;
    background: color-mix(in srgb, var(--story-accent) 14%, rgba(5, 28, 20, .68)) !important;
}

body.dark-mode .geek-story-pill {
    color: rgba(231, 242, 238, .57) !important;
    border-color: rgba(218, 241, 232, .12) !important;
    background: rgba(235, 248, 242, .045) !important;
    box-shadow: none !important;
}

body.dark-mode .geek-story-pill:hover {
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(126, 244, 200, .3) !important;
}

body.dark-mode .geek-story-pill.is-active {
    color: #dffff4 !important;
    border-color: color-mix(in srgb, var(--story-accent) 58%, transparent) !important;
    background: color-mix(in srgb, var(--story-accent) 17%, rgba(5, 28, 20, .78)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--story-accent) 12%, transparent),
        0 0 14px color-mix(in srgb, var(--story-accent) 10%, transparent) !important;
}

@media (max-width: 1180px) {
    .geek-story-layout {
        grid-template-columns: minmax(0, .74fr) minmax(520px, 1.1fr) !important;
        gap: 1.8rem !important;
    }

    .geek-story-device {
        width: min(100%, 650px) !important;
    }

    .geek-story-pill {
        font-size: .64rem !important;
        padding-inline: .42rem !important;
    }
}

@media (max-width: 980px) {
    .geek-story-layout {
        width: min(100% - 36px, 860px) !important;
        grid-template-columns: 1fr !important;
        gap: 1.35rem !important;
        padding: 2rem 0 !important;
    }

    .geek-story-copy {
        max-width: 780px !important;
    }

    .geek-story-copy h3 {
        max-width: 780px !important;
        font-size: clamp(2.35rem, 6vw, 3.4rem) !important;
    }

    .geek-story-copy > p {
        max-width: 720px !important;
    }

    .geek-story-device {
        width: min(100%, 720px) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 640px) {
    .geek-story-flow {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .geek-story-pill {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        padding-inline: .85rem !important;
    }

    .geek-story-core {
        min-height: 250px !important;
    }
}

.geek-story {
    contain: layout paint style;
    isolation: isolate;
}

.geek-story-core {
    isolation: isolate;
    overflow: hidden !important;
}

.geek-story-webgl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .68;
    transition: opacity .35s ease;
}

body.dark-mode .geek-story-webgl-canvas {
    opacity: .74;
}

.geek-story:not(.is-webgl-running) .geek-story-webgl-canvas {
    opacity: .14;
}

.geek-story-core-grid,
    .geek-story-orbit,
    .geek-story-more-link {
    position: relative;
    z-index: 2;
}

.geek-story.is-webgl-ready .geek-story-core::before {
    animation: none !important;
    opacity: .06 !important;
}

.geek-story.is-webgl-ready .geek-story-orbit {
    animation: none !important;
    opacity: .08 !important;
}

.geek-story.is-webgl-ready .geek-story-orbit::after {
    display: none !important;
}

.geek-story.is-webgl-ready .geek-story-core-grid {
    opacity: .16 !important;
}

.geek-story.is-webgl-ready .geek-story-device-glow {
    filter: blur(22px) !important;
    opacity: .22 !important;
}

body.dark-mode .geek-story.is-webgl-ready .geek-story-device-glow {
    filter: blur(26px) !important;
    opacity: .28 !important;
}

.geek-story.is-webgl-ready .geek-story-window {
    backdrop-filter: blur(2px) !important;
}

body.dark-mode .geek-story.is-webgl-ready .geek-story-window {
    backdrop-filter: blur(3px) !important;
}

.geek-story.story-webgl-fallback .geek-story-webgl-canvas,
    .geek-story.story-webgl-disabled .geek-story-webgl-canvas {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .geek-story-webgl-canvas {
        display: none !important;
    }

    .geek-story-core::before,
        .geek-story-orbit,
        .geek-story-scroll-cue > span::after {
        animation: none !important;
    }
}

.geek-story-track {
    height: 335vh !important;
}

.geek-story-core {
    align-items: center !important;
    padding: clamp(1.1rem, 2.8vw, 1.85rem) !important;
    min-height: clamp(310px, 50vh, 390px) !important;
    cursor: default !important;
}

.geek-story-core::before {
    opacity: .08 !important;
}

.geek-story-wheel-stage {
    position: relative;
    z-index: 4;
    width: 100%;
    min-height: clamp(280px, 45vh, 350px);
    perspective: 950px;
    transform-style: preserve-3d;
    isolation: isolate;
}

.geek-story-wheel-meta {
    position: absolute;
    z-index: 18;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}

.geek-story-card {
    position: absolute;
    top: 50%;
    left: clamp(.5rem, 3.2vw, 2rem);
    right: clamp(.5rem, 3.2vw, 2rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(.9rem, 2vw, 1.35rem);
    align-items: start;
    padding: clamp(1.05rem, 2.4vw, 1.55rem);
    border: 1px solid color-mix(in srgb, var(--story-accent) 20%, rgba(15, 41, 33, .18));
    border-radius: 1.55rem;
    color: #102720;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(244, 252, 248, .78)),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--story-accent) 13%, transparent), transparent 42%);
    box-shadow: 0 18px 44px rgba(21, 74, 59, .11),
        inset 0 1px 0 rgba(255,255,255,.72);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    overflow: hidden;
}

.geek-story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .72;
    background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 32%, transparent 72%, color-mix(in srgb, var(--story-accent) 10%, transparent)),
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--story-accent) 9%, transparent), transparent 36%);
}

.geek-story-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 108px;
    height: 108px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--story-accent) 18%, transparent);
    opacity: .65;
}

.geek-story-card > * {
    position: relative;
    z-index: 2;
}

.geek-story-card-index {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--story-accent) 72%, #16493c);
    background: color-mix(in srgb, var(--story-accent) 13%, rgba(255,255,255,.84));
    border: 1px solid color-mix(in srgb, var(--story-accent) 24%, transparent);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.geek-story-card small {
    display: inline-flex;
    margin-bottom: .5rem;
    color: color-mix(in srgb, var(--story-accent) 58%, #1b5145);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.geek-story-card h4 {
    margin: 0;
    max-width: 13ch;
    color: #102720;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(2rem, 3.9vw, 3.45rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.055em;
}

.geek-story-card p {
    max-width: 46ch;
    margin: .75rem 0 0;
    color: rgba(31, 55, 48, .68);
    font-size: clamp(.82rem, 1.05vw, .98rem);
    line-height: 1.52;
}

.geek-story-card .geek-story-more-link {
    margin-top: 1rem !important;
    padding: .64rem .9rem !important;
    color: #10342b !important;
    border-color: color-mix(in srgb, var(--story-accent) 34%, rgba(46, 94, 85, .18)) !important;
    background: color-mix(in srgb, var(--story-accent) 18%, rgba(255,255,255,.86)) !important;
    box-shadow: none !important;
}

.geek-story-card.is-active {
    border-color: color-mix(in srgb, var(--story-accent) 42%, rgba(46, 94, 85, .22));
    box-shadow: 0 24px 58px color-mix(in srgb, var(--story-accent) 13%, rgba(21, 74, 59, .12)),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.geek-story.is-gsap-story .geek-story-card:not(.is-active) {
    filter: saturate(.88);
}

.geek-story-flow {
    justify-content: center !important;
}

body.dark-mode .geek-story-card {
    color: #eafff7;
    border-color: color-mix(in srgb, var(--story-accent) 19%, rgba(255,255,255,.08));
    background: linear-gradient(135deg, rgba(20, 43, 35, .92), rgba(8, 19, 15, .78)),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--story-accent) 13%, transparent), transparent 42%);
    box-shadow: 0 18px 44px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.06);
}

body.dark-mode .geek-story-card h4 {
    color: #f5fff9;
}

body.dark-mode .geek-story-card p {
    color: rgba(222, 237, 231, .63);
}

body.dark-mode .geek-story-card-index {
    color: #dffff4;
    background: color-mix(in srgb, var(--story-accent) 14%, rgba(5, 28, 20, .82));
    border-color: color-mix(in srgb, var(--story-accent) 27%, transparent);
}

body.dark-mode .geek-story-card .geek-story-more-link {
    color: #eafff7 !important;
    border-color: color-mix(in srgb, var(--story-accent) 38%, transparent) !important;
    background: color-mix(in srgb, var(--story-accent) 15%, rgba(5, 28, 20, .74)) !important;
}

body.dark-mode .geek-story-card.is-active {
    box-shadow: 0 24px 58px color-mix(in srgb, var(--story-accent) 13%, rgba(0,0,0,.32)),
        inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-height: 760px) and (min-width: 861px) {
    .geek-story-track {
        height: 315vh !important;
    }

    .geek-story-core {
        min-height: 285px !important;
    }

    .geek-story-wheel-stage {
        min-height: 260px !important;
    }

    .geek-story-card {
        padding: .95rem 1.05rem !important;
    }

    .geek-story-card h4 {
        font-size: clamp(1.75rem, 3.2vw, 2.65rem) !important;
    }

    .geek-story-card p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    .geek-story-wheel-stage {
        min-height: auto !important;
        display: grid !important;
        gap: .95rem !important;
        perspective: none !important;
    }

    .geek-story-wheel-meta {
        position: relative !important;
        margin-bottom: .9rem !important;
    }

    .geek-story-card {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        grid-template-columns: auto 1fr !important;
    }

    .geek-story-card h4 {
        max-width: none !important;
        font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    }

    .geek-story-card p {
        max-width: none !important;
    }
}

@media (max-width: 520px) {
    .geek-story-card {
        grid-template-columns: 1fr !important;
        gap: .7rem !important;
        border-radius: 1.25rem !important;
    }

    .geek-story-card-index {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (min-width: 981px) {
    .geek-story-device {
        margin-inline: auto !important;
    }

    .geek-story-core {
        display: grid !important;
        align-items: center !important;
        justify-items: stretch !important;
    }

    .geek-story-wheel-stage {
        min-width: 0 !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-card p {
        -webkit-line-clamp: 2 !important;
    }
}

@media (min-width: 981px) {
    .geek-story-device {
        width: min(100%, 880px) !important;
        padding: 12px !important;
    }

    .geek-story-window {
        padding: 12px !important;
        border-radius: 30px !important;
    }

    .geek-story-window-header {
        padding-bottom: 6px !important;
    }

    .geek-story-core {
        min-height: clamp(235px, 27vh, 285px) !important;
        padding: clamp(.8rem, 1.3vw, 1.05rem) !important;
        border-radius: 24px !important;
    }

    .geek-story-card-media {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
    }

    .geek-story-card-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 20%, rgba(255,255,255,.32), transparent 34%),
            linear-gradient(180deg, transparent, color-mix(in srgb, var(--story-accent) 10%, transparent));
        pointer-events: none;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .geek-story-device {
        width: min(100%, 780px) !important;
    }

    .geek-story-core {
        min-height: 230px !important;
    }

    .geek-story-card p {
        -webkit-line-clamp: 2 !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-core {
        min-height: 220px !important;
    }

    .geek-story-card {
        padding: .72rem .85rem !important;
    }

    .geek-story-card h4 {
        font-size: clamp(1.35rem, 2vw, 2rem) !important;
    }

    .geek-story-card p {
        font-size: .75rem !important;
        line-height: 1.32 !important;
    }

    .geek-story-card .geek-story-more-link {
        margin-top: .5rem !important;
    }
}

@media (max-width: 860px) {
    .geek-story-card-media {
        display: none !important;
    }
}

body.dark-mode .geek-story-card-media {
    background: linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 18%, rgba(9, 28, 22, .72)), rgba(5, 18, 14, .56)),
        var(--card-img, none) center / cover no-repeat !important;
    border-color: color-mix(in srgb, var(--story-accent) 24%, rgba(255,255,255,.08)) !important;
}

@media (min-width: 981px) {
    .geek-story-sticky {
        min-height: calc(100vh - var(--header-height, 80px)) !important;
        align-items: center !important;
    }

    .geek-story-layout {
        padding: clamp(2rem, 4vh, 3.25rem) 0 !important;
    }

    .geek-story-copy > p {
        max-width: 560px !important;
        margin-top: 1.35rem !important;
        font-size: clamp(.95rem, 1.15vw, 1.08rem) !important;
        line-height: 1.62 !important;
    }

    .geek-story-scroll-cue {
        margin-top: 1.45rem !important;
    }

    .geek-story-device-glow {
        width: 72% !important;
        aspect-ratio: 1.75 / 1 !important;
        filter: blur(32px) !important;
        opacity: .26 !important;
    }

    .geek-story-device,
        body.dark-mode .geek-story-device {
        margin-inline: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .geek-story-device-layer {
        display: none !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        box-sizing: border-box !important;
    }

    .geek-story-window-header span {
        width: 8px !important;
        height: 8px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        box-sizing: border-box !important;
    }

    .geek-story-core-grid,
        .geek-story-orbit {
        opacity: .08 !important;
    }

    .geek-story-wheel-stage {
        align-self: center !important;
        justify-self: stretch !important;
    }

    .geek-story-wheel-meta {
        height: 20px !important;
    }

    .geek-story-core-label,
        .geek-story-counter {
        font-size: .62rem !important;
    }

    .geek-story-card-body {
        align-self: center !important;
    }

    .geek-story-card-media {
        max-height: none !important;
    }

    .geek-story-flow {
        box-sizing: border-box !important;
    }

    .geek-story-pill {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .geek-story-pill span {
        max-width: 100% !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .geek-story-copy h3 {
        font-size: clamp(2.25rem, 4vw, 3.6rem) !important;
    }

    .geek-story-card {
        padding: .68rem .75rem !important;
        gap: .62rem !important;
    }

    .geek-story-card h4 {
        font-size: clamp(1.22rem, 2vw, 1.85rem) !important;
    }

    .geek-story-card p {
        font-size: .68rem !important;
    }

    .geek-story-card .geek-story-more-link {
        padding: .36rem .56rem !important;
        font-size: .6rem !important;
    }
}

@media (min-width: 981px) {
    .geek-story-device-wrap {
        align-self: center !important;
    }

    .geek-story-webgl-canvas,
        .geek-story-core-grid,
        .geek-story-orbit {
        z-index: 0 !important;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .geek-story-layout {
        grid-template-columns: minmax(320px, .74fr) minmax(660px, 1.26fr) !important;
        width: min(1240px, calc(100% - 36px)) !important;
        gap: 1.6rem !important;
    }

    .geek-story-device-wrap {
        transform: translate3d(10px, -10px, 0) !important;
    }

    .geek-story-device,
        body.dark-mode .geek-story-device {
        width: min(100%, 800px) !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        height: 376px !important;
        min-height: 376px !important;
        max-height: 376px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        flex-basis: 274px !important;
        height: 274px !important;
        min-height: 274px !important;
        max-height: 274px !important;
    }

    .geek-story-wheel-stage {
        height: 218px !important;
        min-height: 218px !important;
        max-height: 218px !important;
    }

    .geek-story-card {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        grid-template-columns: 38px minmax(0, 7fr) minmax(135px, 3fr) !important;
    }
}

@media (min-width: 981px) {
    .geek-story-track {
        height: 238vh !important;
    }

    .geek-story-layout {
        width: min(1500px, calc(100% - 64px)) !important;
        grid-template-columns: minmax(430px, .78fr) minmax(820px, 1.22fr) !important;
        gap: clamp(2.2rem, 3.4vw, 4.3rem) !important;
        align-items: center !important;
        padding-top: clamp(2rem, 4vh, 3rem) !important;
        padding-bottom: clamp(2rem, 4vh, 3rem) !important;
    }

    .geek-story-copy {
        max-width: 590px !important;
    }

    .geek-story-copy h3 {
        font-size: clamp(3rem, 4.55vw, 5.45rem) !important;
        line-height: .96 !important;
    }

    .geek-story-device-wrap {
        width: 100% !important;
        display: grid !important;
        place-items: center !important;
    }

    .geek-story-device,
        body.dark-mode .geek-story-device {
        padding: 12px !important;
        overflow: visible !important;
        aspect-ratio: auto !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        border-radius: 28px !important;
    }

    .geek-story-window-header {
        padding: 0 6px 7px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        border-radius: 22px !important;
        isolation: isolate !important;
    }

    .geek-story-card {
        overflow: hidden !important;
        backface-visibility: visible !important;
        will-change: transform, opacity;
    }

    .geek-story-card-body {
        padding-right: .25rem !important;
    }

    .geek-story-card small {
        letter-spacing: .07em !important;
    }

    .geek-story-card-media {
        position: relative !important;
        z-index: 2 !important;
    }

    .geek-story-pill {
        min-height: 40px !important;
        height: 40px !important;
        padding: .6rem .58rem !important;
        font-size: .68rem !important;
        justify-content: center !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-layout {
        width: min(1220px, calc(100% - 36px)) !important;
        grid-template-columns: minmax(320px, .68fr) minmax(650px, 1.32fr) !important;
        gap: 1.55rem !important;
    }

    .geek-story-copy h3 {
        font-size: clamp(2.65rem, 4vw, 4rem) !important;
    }

    .geek-story-card {
        padding: .78rem .88rem !important;
    }

    .geek-story-card .geek-story-more-link {
        font-size: .58rem !important;
        padding: .38rem .58rem !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-card {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }
}

@media (min-width: 981px) {
    .geek-story-card {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 188px !important;
        min-height: 188px !important;
        max-height: 188px !important;
        display: none !important;
        grid-template-columns: 44px minmax(0, 7fr) minmax(190px, 3fr) !important;
        align-items: center !important;
        gap: clamp(.9rem, 1.35vw, 1.35rem) !important;
        padding: 1rem 1.15rem !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        filter: none !important;
        z-index: 20 !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
        border-radius: 1.25rem !important;
    }

    .geek-story-card.is-active {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        z-index: 160 !important;
        pointer-events: auto !important;
    }

    .geek-story-card-index {
        width: 38px !important;
        height: 38px !important;
        font-size: .68rem !important;
        align-self: start !important;
    }

    .geek-story-card-body {
        height: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .geek-story-card small {
        margin-bottom: .28rem !important;
        font-size: .62rem !important;
        line-height: 1 !important;
    }

    .geek-story-card h4 {
        max-width: none !important;
        width: auto !important;
        font-size: clamp(1.8rem, 2.28vw, 2.7rem) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .geek-story-card p {
        max-width: none !important;
        margin-top: .42rem !important;
        font-size: clamp(.78rem, .88vw, .94rem) !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .geek-story-card .geek-story-more-link {
        margin-top: .58rem !important;
        padding: .5rem .78rem !important;
        font-size: .68rem !important;
        width: max-content !important;
        max-width: 100% !important;
        line-height: 1 !important;
    }

    .geek-story-card-media {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 150px !important;
        border-radius: .95rem !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 16%, rgba(255,255,255,.74)), rgba(255,255,255,.30)),
            var(--card-img, none) center / cover no-repeat !important;
        border: 1px solid color-mix(in srgb, var(--story-accent) 24%, rgba(46,94,85,.13)) !important;
    }

    .geek-story-flow {
        padding-top: 10px !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-card {
        height: 172px !important;
        min-height: 172px !important;
        max-height: 172px !important;
        grid-template-columns: 38px minmax(0, 7fr) minmax(145px, 3fr) !important;
    }

    .geek-story-card h4 {
        font-size: clamp(1.45rem, 2.05vw, 2.15rem) !important;
    }

    .geek-story-card p {
        font-size: .72rem !important;
    }
}

@media (min-width: 981px) {
    .geek-story-window,
        body.dark-mode .geek-story-window {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .geek-story-webgl-canvas,
        .geek-story-core-grid,
        .geek-story-orbit,
        .geek-story-core::before {
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .geek-story-wheel-stage {
        align-items: center !important;
        justify-content: center !important;
        isolation: isolate !important;
    }

    .geek-story-wheel-meta {
        position: absolute !important;
        pointer-events: none !important;
    }

    .geek-story-wheel-stage > .geek-story-card {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .geek-story-card-view {
        align-items: center !important;
        border-radius: 1.22rem !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        color: var(--text-dark) !important;
        background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
            radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--story-accent) 20%, transparent), transparent 38%) !important;
        border: 1px solid color-mix(in srgb, var(--story-accent) 34%, rgba(46,94,85,.14)) !important;
        box-shadow: 0 20px 52px rgba(15, 45, 42, .11),
            inset 0 1px 0 rgba(255,255,255,.68) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        will-change: transform, opacity;
    }

    .geek-story-card-view::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, color-mix(in srgb, var(--story-accent) 14%, transparent), transparent 46%),
            radial-gradient(circle at 18% 22%, rgba(255,255,255,.68), transparent 34%);
        opacity: .8;
        pointer-events: none;
        z-index: 0;
    }

    .geek-story-card-view > * {
        position: relative;
        z-index: 1;
    }

    .geek-story-card-view-index {
        border-radius: 999px !important;
        display: grid !important;
        place-items: center !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
        color: color-mix(in srgb, var(--story-accent) 76%, #12372f) !important;
        background: color-mix(in srgb, var(--story-accent) 13%, rgba(255,255,255,.82)) !important;
        border: 1px solid color-mix(in srgb, var(--story-accent) 24%, rgba(46,94,85,.14)) !important;
    }

    .geek-story-card-view-body {
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .geek-story-card-view small {
        margin-bottom: .28rem !important;
        font-size: .62rem !important;
        line-height: 1 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
        font-weight: 900 !important;
        color: color-mix(in srgb, var(--story-accent) 70%, #2e5e55) !important;
    }

    .geek-story-card-view h4 {
        margin: 0 !important;
        max-width: none !important;
        width: auto !important;
        color: #10241f !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .geek-story-card-view p {
        max-width: none !important;
        margin: .42rem 0 0 !important;
        color: rgba(47, 64, 76, .78) !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .geek-story-card-view-more {
        margin-top: .58rem !important;
        padding: .52rem .8rem !important;
        border-radius: 999px !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        width: max-content !important;
        max-width: 100% !important;
        color: #143b35 !important;
        background: color-mix(in srgb, var(--story-accent) 12%, rgba(255,255,255,.84)) !important;
        border: 1px solid color-mix(in srgb, var(--story-accent) 34%, rgba(46,94,85,.12)) !important;
        box-shadow: 0 10px 24px rgba(18, 64, 54, .08) !important;
    }

    .geek-story-card-view-more::after {
        content: "↗";
        margin-left: .45rem;
    }

    .geek-story-card-view-media {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 16%, rgba(255,255,255,.72)), rgba(255,255,255,.30)),
            var(--card-img, none) center / cover no-repeat !important;
        border: 1px solid color-mix(in srgb, var(--story-accent) 24%, rgba(46,94,85,.13)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
    }

    .geek-story-flow {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(118px, 1fr)) !important;
        gap: .7rem !important;
        align-items: center !important;
        overflow: visible !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-card-view-more {
        font-size: .6rem !important;
        padding: .42rem .62rem !important;
    }
}

@media (max-width: 860px) {
    .geek-story-card-view {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1.1rem !important;
        border-radius: 1.25rem !important;
        text-decoration: none !important;
        background: rgba(255,255,255,.82) !important;
        border: 1px solid rgba(46,94,85,.16) !important;
        box-shadow: 0 18px 42px rgba(15,45,42,.08) !important;
        color: var(--text-dark) !important;
    }

    .geek-story-wheel-stage > .geek-story-card {
        display: none !important;
    }

    .geek-story-card-view-index,
        .geek-story-card-view-media {
        display: none !important;
    }

    .geek-story-card-view h4 {
        font-size: 2rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

body.dark-mode .geek-story-card-view {
    color: #f9fafb !important;
    background: linear-gradient(135deg, rgba(18, 37, 34, .88), rgba(9, 18, 17, .72)),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--story-accent) 20%, transparent), transparent 38%) !important;
    border-color: color-mix(in srgb, var(--story-accent) 32%, rgba(255,255,255,.14)) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.dark-mode .geek-story-card-view h4 {
    color: #ffffff !important;
}

body.dark-mode .geek-story-card-view p {
    color: rgba(226, 232, 240, .78) !important;
}

body.dark-mode .geek-story-card-view-more {
    color: #eafff7 !important;
    background: color-mix(in srgb, var(--story-accent) 16%, rgba(15,23,42,.6)) !important;
    border-color: color-mix(in srgb, var(--story-accent) 32%, rgba(255,255,255,.12)) !important;
}

body.dark-mode .geek-story-card-view-media {
    background: linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 18%, rgba(15,23,42,.72)), rgba(15,23,42,.36)),
        var(--card-img, none) center / cover no-repeat !important;
    border-color: color-mix(in srgb, var(--story-accent) 26%, rgba(255,255,255,.12)) !important;
}

@media (min-width: 981px) {
    .geek-story-core,
        body.dark-mode .geek-story-core {
        align-items: stretch !important;
        justify-content: center !important;
    }

    .geek-story-card-view {
        position: absolute !important;
        top: 50% !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 194px !important;
        min-height: 194px !important;
        max-height: 194px !important;
        transform: translate3d(0, -50%, 0) !important;
        display: grid !important;
        grid-template-columns: 48px minmax(0, 7fr) minmax(230px, 3fr) !important;
        gap: clamp(1rem, 1.5vw, 1.6rem) !important;
        padding: 1.08rem 1.16rem !important;
        z-index: 220 !important;
    }

    .geek-story-card-view.is-changing {
        animation: geekStoryCardViewWideIn .34s cubic-bezier(.2,.8,.2,1) both !important;
    }

    @keyframes geekStoryCardViewWideIn {
        0% {
                    opacity: .58;
                    transform: translate3d(0, calc(-50% + 14px), 0) scale(.988);
                    filter: blur(1.5px);
                }
                100% {
                    opacity: 1;
                    transform: translate3d(0, -50%, 0) scale(1);
                    filter: none;
                }
    }

    .geek-story-card-view-index {
        width: 42px !important;
        height: 42px !important;
        align-self: start !important;
    }

    .geek-story-card-view h4 {
        font-size: clamp(2.05rem, 2.55vw, 3rem) !important;
        line-height: .96 !important;
        letter-spacing: -.052em !important;
        -webkit-line-clamp: 2 !important;
    }

    .geek-story-card-view p {
        font-size: clamp(.82rem, .92vw, 1rem) !important;
        line-height: 1.36 !important;
        -webkit-line-clamp: 2 !important;
    }

    .geek-story-card-view-media {
        min-height: 156px !important;
        height: 100% !important;
        border-radius: 1rem !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-device-wrap {
        transform: translate3d(30px, -30px, 0) !important;
    }

    .geek-story-card-view {
        left: 14px !important;
        right: 14px !important;
        height: 178px !important;
        min-height: 178px !important;
        max-height: 178px !important;
        grid-template-columns: 42px minmax(0, 7fr) minmax(185px, 3fr) !important;
        gap: .95rem !important;
        padding: .95rem 1rem !important;
    }

    .geek-story-card-view h4 {
        font-size: clamp(1.62rem, 2.18vw, 2.28rem) !important;
    }

    .geek-story-card-view p {
        font-size: .76rem !important;
    }

    .geek-story-card-view-media {
        min-height: 140px !important;
    }
}

@media (min-width: 981px) {
    .geek-story-wheel-stage {
        display: block !important;
        flex: 1 1 auto !important;
    }

    .geek-story-card-view,
        .geek-story-wheel-stage > .geek-story-card {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .geek-story-motion-stack {
        pointer-events: none !important;
    }

    .geek-story-motion-card {
        position: absolute !important;
        top: 50% !important;
        min-width: 0 !important;
        display: grid !important;
        align-items: center !important;
        overflow: hidden !important;
        text-decoration: none !important;
        color: var(--text-dark) !important;
        background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
            radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 21%, transparent), transparent 38%) !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 36%, rgba(46,94,85,.14)) !important;
        box-shadow: 0 20px 52px rgba(15, 45, 42, .10),
            inset 0 1px 0 rgba(255,255,255,.70) !important;
        will-change: transform, opacity, filter !important;
        transform-origin: 50% 50% !important;
        pointer-events: none !important;
        transition: box-shadow .22s ease, border-color .22s ease !important;
    }

    .geek-story-motion-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 15%, transparent), transparent 46%),
            radial-gradient(circle at 18% 22%, rgba(255,255,255,.72), transparent 34%);
        opacity: .82;
        pointer-events: none;
        z-index: 0;
    }

    .geek-story-motion-card > * {
        position: relative !important;
        z-index: 1 !important;
    }

    .geek-story-motion-card.is-active {
        box-shadow: 0 26px 62px rgba(15, 45, 42, .14),
            0 0 0 1px color-mix(in srgb, var(--card-accent, var(--story-accent)) 8%, transparent),
            inset 0 1px 0 rgba(255,255,255,.78) !important;
    }

    .geek-story-motion-index {
        border-radius: 999px !important;
        display: grid !important;
        place-items: center !important;
        align-self: start !important;
        font-weight: 900 !important;
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 76%, #12372f) !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 13%, rgba(255,255,255,.82)) !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 24%, rgba(46,94,85,.14)) !important;
    }

    .geek-story-motion-body {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .geek-story-motion-category {
        text-transform: uppercase !important;
        font-weight: 900 !important;
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 70%, #2e5e55) !important;
    }

    .geek-story-motion-title {
        margin: 0 !important;
        color: #10241f !important;
    }

    .geek-story-motion-desc {
        margin: .42rem 0 0 !important;
        color: rgba(47, 64, 76, .78) !important;
    }

    .geek-story-motion-media {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 16%, rgba(255,255,255,.72)), rgba(255,255,255,.30)),
            var(--card-img, none) center / cover no-repeat !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 24%, rgba(46,94,85,.13)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
    }

    .geek-story-flow {
        position: relative !important;
        z-index: 260 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-motion-card {
        left: 14px !important;
        right: 14px !important;
    }
}

@media (max-width: 860px) {
    .geek-story-card-view,
        .geek-story-motion-card.is-active {
        display: grid !important;
    }

    .geek-story-motion-stack {
        position: relative !important;
        min-height: 0 !important;
    }

    .geek-story-motion-card {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1.1rem !important;
        border-radius: 1.25rem !important;
        text-decoration: none !important;
        background: rgba(255,255,255,.82) !important;
        border: 1px solid rgba(46,94,85,.16) !important;
        box-shadow: 0 18px 42px rgba(15,45,42,.08) !important;
        color: var(--text-dark) !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }

    .geek-story-motion-card.is-active {
        display: grid !important;
        pointer-events: auto !important;
    }

    .geek-story-motion-index,
        .geek-story-motion-media {
        display: none !important;
    }

    .geek-story-motion-title {
        font-size: 2rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

body.dark-mode .geek-story-motion-card {
    color: #f9fafb !important;
    background: linear-gradient(135deg, rgba(18, 37, 34, .88), rgba(9, 18, 17, .72)),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 20%, transparent), transparent 38%) !important;
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 32%, rgba(255,255,255,.14)) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.dark-mode .geek-story-motion-title {
    color: #ffffff !important;
}

body.dark-mode .geek-story-motion-desc {
    color: rgba(226, 232, 240, .78) !important;
}

body.dark-mode .geek-story-motion-more {
    color: #eafff7 !important;
    background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 16%, rgba(15,23,42,.6)) !important;
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 32%, rgba(255,255,255,.12)) !important;
}

body.dark-mode .geek-story-motion-media {
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 26%, rgba(255,255,255,.12)) !important;
}

@media (min-width: 981px) {
    .geek-story-device-wrap {
        transform: translate3d(64px, -34px, 0) !important;
    }

    .geek-story-device,
        body.dark-mode .geek-story-device {
        width: min(100%, 1120px) !important;
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        height: 476px !important;
        min-height: 476px !important;
        max-height: 476px !important;
        padding: 18px !important;
    }

    .geek-story-window-header {
        flex: 0 0 26px !important;
        height: 26px !important;
        min-height: 26px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        flex: 0 0 360px !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
    }

    .geek-story-wheel-stage {
        max-width: none !important;
    }

    .geek-story-motion-index {
        width: 44px !important;
        height: 44px !important;
        font-size: .7rem !important;
    }

    .geek-story-motion-body {
        justify-content: center !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    .geek-story-motion-category {
        margin-bottom: .36rem !important;
        font-size: .68rem !important;
        line-height: 1.05 !important;
        letter-spacing: .09em !important;
    }

    .geek-story-motion-desc {
        margin-top: .52rem !important;
        max-width: 100% !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .geek-story-motion-media {
        border-radius: 1.08rem !important;
    }

    .geek-story-flow {
        flex: 0 0 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 9px 18px 0 !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-device,
        body.dark-mode .geek-story-device {
        width: min(100%, 980px) !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        height: 446px !important;
        min-height: 446px !important;
        max-height: 446px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        flex-basis: 334px !important;
        height: 334px !important;
        min-height: 334px !important;
        max-height: 334px !important;
    }

    .geek-story-wheel-stage {
        height: 282px !important;
        min-height: 282px !important;
        max-height: 282px !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-device,
        body.dark-mode .geek-story-device {
        height: 438px !important;
        min-height: 438px !important;
        max-height: 438px !important;
    }

    .geek-story-window,
        body.dark-mode .geek-story-window {
        height: 414px !important;
        min-height: 414px !important;
        max-height: 414px !important;
    }

    .geek-story-core,
        body.dark-mode .geek-story-core {
        flex-basis: 306px !important;
        height: 306px !important;
        min-height: 306px !important;
        max-height: 306px !important;
    }

    .geek-story-wheel-stage {
        height: 254px !important;
        min-height: 254px !important;
        max-height: 254px !important;
    }
}

@media (min-width: 981px) {
    .geek-story-core,
        body.dark-mode .geek-story-core {
        position: relative !important;
        display: block !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .geek-story-webgl-canvas,
        .geek-story-core-grid,
        .geek-story-orbit {
        pointer-events: none !important;
    }

    .geek-story-wheel-stage {
        position: absolute !important;
        left: 26px !important;
        right: 26px !important;
        top: 88px !important;
        bottom: 24px !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        perspective: none !important;
        transform-style: flat !important;
        z-index: 20 !important;
    }

    .geek-story-motion-stack {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
        z-index: 220 !important;
    }

    .geek-story-motion-card {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 218px !important;
        min-height: 218px !important;
        max-height: 218px !important;
        grid-template-columns: 52px minmax(0, 7fr) minmax(235px, 3fr) !important;
        gap: clamp(1rem, 1.35vw, 1.55rem) !important;
        padding: 1.08rem 1.16rem !important;
        border-radius: 1.35rem !important;
        box-sizing: border-box !important;
    }

    .geek-story-motion-card.is-active {
        pointer-events: auto !important;
    }

    .geek-story-motion-title {
        font-size: clamp(2rem, 2.2vw, 2.65rem) !important;
        line-height: .98 !important;
        letter-spacing: -.052em !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        max-width: none !important;
    }

    .geek-story-motion-desc {
        font-size: clamp(.84rem, .92vw, 1rem) !important;
        line-height: 1.36 !important;
        -webkit-line-clamp: 3 !important;
    }

    .geek-story-motion-media {
        min-height: 176px !important;
        height: 100% !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-wheel-stage {
        left: 22px !important;
        right: 22px !important;
        top: 82px !important;
        bottom: 22px !important;
    }

    .geek-story-motion-card {
        height: 196px !important;
        min-height: 196px !important;
        max-height: 196px !important;
        grid-template-columns: 46px minmax(0, 7fr) minmax(190px, 3fr) !important;
        padding: .96rem 1.02rem !important;
        gap: .95rem !important;
    }

    .geek-story-motion-title {
        font-size: clamp(1.75rem, 2.08vw, 2.34rem) !important;
    }

    .geek-story-motion-desc {
        font-size: .8rem !important;
        line-height: 1.33 !important;
    }

    .geek-story-motion-media {
        min-height: 156px !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-wheel-stage {
        top: 78px !important;
        bottom: 20px !important;
    }

    .geek-story-motion-card {
        height: 184px !important;
        min-height: 184px !important;
        max-height: 184px !important;
    }

    .geek-story-motion-title {
        font-size: clamp(1.55rem, 1.95vw, 2.15rem) !important;
    }

    .geek-story-motion-desc {
        -webkit-line-clamp: 2 !important;
    }

    .geek-story-motion-media {
        min-height: 146px !important;
    }
}

@media (min-width: 981px) {
    .geek-story-wheel-stage {
        --story-meta-distance: 138px;
    }

    .geek-story-wheel-meta {
        top: calc(50% - var(--story-meta-distance)) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 .35rem !important;
        align-items: center !important;
        z-index: 320 !important;
    }

    .geek-story-core-label,
        .geek-story-counter {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 1.25rem !important;
        color: #0b8b75 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
    }

    .geek-story-counter {
        color: rgba(31, 55, 48, .58) !important;
    }

    .geek-story-motion-card {
        z-index: 260 !important;
    }
}

@media (min-width: 1281px) {
    .geek-story-wheel-stage {
        --story-meta-distance: 142px;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-wheel-stage {
        --story-meta-distance: 128px;
    }

    .geek-story-wheel-meta {
        padding-inline: .2rem !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-wheel-stage {
        --story-meta-distance: 118px;
    }
}

body.dark-mode .geek-story-core-label,
    body.dark-mode .geek-story-counter {
    text-shadow: none !important;
}

body.dark-mode .geek-story-counter {
    color: rgba(222, 237, 231, .62) !important;
}

.geek-story-motion-media {
    position: relative !important;
    background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06)),
        color-mix(in srgb, var(--card-accent, var(--story-accent)) 9%, rgba(255,255,255,.55)) !important;
}

.geek-story-motion-media-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
    opacity: .92 !important;
    filter: saturate(.96) contrast(.98) brightness(1.02) !important;
}

body.dark-mode .geek-story-motion-media {
    background: linear-gradient(135deg, rgba(8, 28, 24, .18), rgba(8, 28, 24, .04)),
        color-mix(in srgb, var(--card-accent, var(--story-accent)) 10%, rgba(10, 36, 32, .45)) !important;
}

body.dark-mode .geek-story-motion-media-img {
    opacity: .88 !important;
    filter: saturate(.92) contrast(1.02) brightness(.88) !important;
}

@media (min-width: 769px) {
    .geek-story-motion-card {
        contain: layout style !important;
    }

    .geek-story-motion-card,
        .geek-story-motion-flip,
        .geek-story-motion-face {
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }
}

@media (min-width: 981px) {
    .geek-story-motion-card,
        body.dark-mode .geek-story-motion-card {
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: none !important;
        will-change: transform, opacity !important;
    }

    .geek-story-motion-card::before {
        display: none !important;
    }

    .geek-story-motion-flip {
        z-index: 2 !important;
        transform-origin: 50% 100% !important;
    }

    .geek-story-motion-face {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 7fr) minmax(235px, 3fr) !important;
        align-items: center !important;
        gap: clamp(1rem, 1.35vw, 1.55rem) !important;
        padding: 1.08rem 1.16rem !important;
        border-radius: 1.35rem !important;
        overflow: hidden !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 36%, rgba(46,94,85,.14)) !important;
        box-shadow: 0 24px 58px rgba(15, 45, 42, .12),
            inset 0 1px 0 rgba(255,255,255,.74) !important;
    }

    .geek-story-motion-face::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .geek-story-motion-face > * {
        position: relative !important;
        z-index: 1 !important;
    }

    .geek-story-motion-front {
        background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.57)),
            radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 21%, transparent), transparent 38%) !important;
    }

    .geek-story-motion-front::before {
        background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 15%, transparent), transparent 46%),
            radial-gradient(circle at 18% 22%, rgba(255,255,255,.72), transparent 34%);
        opacity: .82;
    }

    .geek-story-motion-back {
        background: linear-gradient(132deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 20%, #f8fffc), rgba(245,255,251,.96) 58%, rgba(255,255,255,.90)),
            #f7fffc !important;
    }

    .geek-story-motion-back::before {
        background: radial-gradient(circle at 13% 18%, rgba(255,255,255,.84), transparent 34%),
            linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 14%, transparent), transparent 62%);
        opacity: .92;
    }

    .geek-story-motion-back-body {
        justify-content: center !important;
        overflow: visible !important;
    }

    .geek-story-motion-back-label {
        margin-bottom: .34rem !important;
    }

    .geek-story-motion-back-title {
        font-size: clamp(1.55rem, 1.72vw, 2rem) !important;
        line-height: 1 !important;
        letter-spacing: -.045em !important;
        -webkit-line-clamp: 1 !important;
    }

    .geek-story-motion-back-detail {
        max-width: 100% !important;
        margin: .48rem 0 0 !important;
        color: rgba(35, 58, 53, .78) !important;
        font-size: clamp(.76rem, .82vw, .9rem) !important;
        line-height: 1.38 !important;
    }

    .geek-story-motion-more {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: 100% !important;
        margin-top: .68rem !important;
        padding: .58rem .92rem !important;
        border-radius: 999px !important;
        color: #113e35 !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 17%, rgba(255,255,255,.92)) !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 42%, rgba(46,94,85,.12)) !important;
        box-shadow: 0 11px 26px rgba(18,64,54,.10) !important;
        font-family: "Space Grotesk", "Poppins", sans-serif !important;
        font-size: .7rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transition: transform .24s cubic-bezier(.16,1,.3,1), background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
    }

    .geek-story-motion-more::after {
        content: "↗";
        margin-left: .45rem;
    }

    .geek-story-motion-more:hover,
        .geek-story-motion-more:focus-visible {
        transform: translate3d(0, -2px, 0) !important;
        border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 68%, rgba(46,94,85,.14)) !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 24%, #fff) !important;
        box-shadow: 0 15px 32px color-mix(in srgb, var(--card-accent, var(--story-accent)) 18%, rgba(18,64,54,.10)) !important;
        outline: none !important;
    }

    .geek-story-motion-back-media {
        position: relative !important;
        isolation: isolate !important;
    }

    .geek-story-motion-back-media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 30%, transparent), rgba(5,35,28,.46)),
            linear-gradient(to top, rgba(4,28,22,.38), transparent 62%);
        pointer-events: none;
    }

    .geek-story-motion-back-media-img {
        transform: scale(1.035) !important;
        filter: saturate(.9) contrast(1.01) brightness(.92) !important;
    }

    .geek-story-motion-back-arrow {
        position: absolute !important;
        right: 14px !important;
        bottom: 12px !important;
        z-index: 3 !important;
        width: 38px !important;
        height: 38px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 999px !important;
        color: #ecfff8 !important;
        background: rgba(5, 34, 27, .58) !important;
        border: 1px solid rgba(255,255,255,.34) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
        font-size: 1.02rem !important;
        backdrop-filter: blur(8px) !important;
    }

    .geek-story-motion-card:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 78%, #0a6d5d) !important;
        outline-offset: 5px !important;
    }

    body.dark-mode .geek-story-motion-front {
        background: linear-gradient(135deg, rgba(18,37,34,.91), rgba(9,18,17,.77)),
            radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 20%, transparent), transparent 38%) !important;
        border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 32%, rgba(255,255,255,.14)) !important;
        box-shadow: 0 24px 58px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    body.dark-mode .geek-story-motion-back {
        background: linear-gradient(132deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 16%, #10251f), rgba(8,24,20,.97) 58%, rgba(6,16,14,.95)),
            #081814 !important;
        border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 33%, rgba(255,255,255,.14)) !important;
        box-shadow: 0 24px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
    }

    body.dark-mode .geek-story-motion-back-detail {
        color: rgba(226, 239, 234, .76) !important;
    }

    body.dark-mode .geek-story-motion-more {
        color: #eafff7 !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 17%, rgba(10,30,25,.84)) !important;
        border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 38%, rgba(255,255,255,.13)) !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .geek-story-motion-face {
        grid-template-columns: 46px minmax(0, 7fr) minmax(190px, 3fr) !important;
        gap: .95rem !important;
        padding: .96rem 1.02rem !important;
    }

    .geek-story-motion-back-title {
        font-size: clamp(1.35rem, 1.6vw, 1.75rem) !important;
    }

    .geek-story-motion-back-detail {
        font-size: .73rem !important;
        line-height: 1.34 !important;
        -webkit-line-clamp: 4 !important;
    }

    .geek-story-motion-more {
        margin-top: .54rem !important;
        padding: .5rem .78rem !important;
        font-size: .64rem !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .geek-story-motion-back-title {
        font-size: clamp(1.22rem, 1.5vw, 1.55rem) !important;
    }

    .geek-story-motion-back-detail {
        margin-top: .36rem !important;
        font-size: .68rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
    }

    .geek-story-motion-more {
        margin-top: .42rem !important;
        padding: .46rem .72rem !important;
        font-size: .61rem !important;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .geek-story-motion-card,
        body.dark-mode .geek-story-motion-card {
        display: block !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.84) !important;
        border: 1px solid rgba(46,94,85,.16) !important;
        box-shadow: 0 18px 42px rgba(15,45,42,.08) !important;
    }

    .geek-story-motion-card::before,
        .geek-story-motion-back {
        display: none !important;
    }

    .geek-story-motion-flip,
        .geek-story-motion-front {
        position: absolute !important;
        inset: 0 !important;
        transform: none !important;
    }

    .geek-story-motion-front {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 7fr) minmax(165px, 3fr) !important;
        align-items: center !important;
        gap: .85rem !important;
        padding: .9rem !important;
        box-sizing: border-box !important;
    }

    .geek-story-motion-card.is-flipped .geek-story-motion-flip {
        transform: none !important;
    }

    body.dark-mode .geek-story-motion-card {
        background: rgba(14,31,27,.88) !important;
        border-color: rgba(255,255,255,.12) !important;
    }
}

@media (min-width: 769px) and (max-width: 860px) {
    .geek-story-motion-card.is-active {
        display: block !important;
    }

    .geek-story-motion-front {
        position: relative !important;
        grid-template-columns: 1fr !important;
        padding: 1.1rem !important;
    }

    .geek-story-motion-front .geek-story-motion-index,
        .geek-story-motion-front .geek-story-motion-media {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geek-story-motion-flip {
        transition-duration: .01ms !important;
    }
}

@media (min-width: 981px) {
    .geek-story-motion-card,
        body.dark-mode .geek-story-motion-card {
        perspective: 1350px !important;
        perspective-origin: 50% 50% !important;
        transform-style: preserve-3d !important;
        contain: none !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .geek-story-motion-flip {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        transform-style: preserve-3d !important;
        transition: none !important;
        will-change: auto !important;
    }

    .geek-story-motion-face {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        transform-origin: 50% 50% !important;
        transform-style: preserve-3d !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
    }

    .geek-story-motion-front {
        transform: rotateX(0deg) translateZ(1px) !important;
        pointer-events: auto !important;
    }

    .geek-story-motion-back {
        transform: rotateX(-180deg) translateZ(1px) !important;
        pointer-events: none !important;
    }

    .geek-story-motion-card.is-flipped .geek-story-motion-front {
        transform: rotateX(180deg) translateZ(1px) !important;
        pointer-events: none !important;
    }

    .geek-story-motion-card.is-flipped .geek-story-motion-back {
        transform: rotateX(0deg) translateZ(1px) !important;
        pointer-events: auto !important;
    }

    .geek-story-motion-card.is-flipped .geek-story-motion-flip {
        transform: none !important;
    }

    .geek-story-motion-card.is-flipped {
        z-index: 340 !important;
        box-shadow: none !important;
    }

    .geek-story-motion-card.is-flipped .geek-story-motion-back {
        box-shadow: 0 30px 72px color-mix(in srgb, var(--card-accent, var(--story-accent)) 12%, rgba(15,45,42,.18)),
            inset 0 1px 0 rgba(255,255,255,.78) !important;
    }

    .geek-story-motion-back-body {
        min-width: 0 !important;
        padding-right: .2rem !important;
    }

    .geek-story-motion-back-detail {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;
    }

    .geek-story-motion-more {
        position: relative !important;
        z-index: 5 !important;
        cursor: pointer !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
    .geek-story-motion-face {
        transition-duration: .01ms !important;
    }
}

@media (min-width: 981px) {
    .geek-story-motion-face,
        body.dark-mode .geek-story-motion-front,
        body.dark-mode .geek-story-motion-back,
        .geek-story-motion-card.is-flipped .geek-story-motion-back {
        box-shadow: none !important;
    }

    .geek-story-motion-face {
        transition: transform .78s cubic-bezier(.22, .72, .18, 1) !important;
    }

    .geek-story-motion-stack::after {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 50%;
        height: 62px;
        transform: translateY(66px);
        background: radial-gradient(
            ellipse at center,
            rgba(15, 45, 42, .16) 0%,
            rgba(15, 45, 42, .07) 42%,
            transparent 74%
        );
        opacity: .65;
        pointer-events: none;
        z-index: 0;
    }
}

/* =========================================================
   GEEK V19.6 — OPTIMIZACIÓN INTERNA DEL STORYTELLING
   Mantiene la apariencia y dimensiones; reduce capas permanentes.
   ========================================================= */
@media (min-width: 981px) {
    .geek-story-motion-card,
    body.dark-mode .geek-story-motion-card {
        will-change: auto !important;
    }

    .geek-story-motion-card.is-motion-visible {
        will-change: transform, opacity !important;
    }

    .geek-story-motion-face {
        will-change: auto !important;
    }

    .geek-story-motion-card.is-active .geek-story-motion-face,
    .geek-story-motion-card.is-flipped .geek-story-motion-face {
        will-change: transform !important;
    }

    .geek-story-motion-media-img {
        will-change: auto !important;
    }
}


/* ===== ORIGINAL catalogo.css ===== */

html {
    scroll-behavior: smooth;
}

:root {
    --color-teal: #2E5E55;
    --color-mint: #5EC8AA;
    --color-geek-text: #222;
    --color-tagline: #2E5E55;
    --color-nav-text: #666;
    --header-height: 80px;
    --color-bg-light: #ffffff;
    --color-bg-section-light: #f9fafb;
    --color-text-dark: #1f2937;
    --color-text-mid: #6b7280;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}

body.dark-mode {
    --color-bg-light: #1f1f1f;
    --color-bg-section-light: #121212;
    --color-text-dark: #f4f4f4;
    --color-text-mid: #a0a0a0;
    --color-nav-text: #ccc;
    background-color: var(--color-bg-section-light);
    color: var(--color-text-mid);
}

.theme-sunset {
    --color-teal: #1D4C66;
    --color-mint: #52F5FF;
}

body.dark-mode.theme-sunset {
    --color-teal: #226182;
    --color-mint: #81FFFF;
    background-color: #121212;
}

.theme-ocean {
    --color-teal: #34495E;
    --color-mint: #3498DB;
}

body.dark-mode.theme-ocean {
    --color-teal: #2C3E50;
    --color-mint: #2980B9;
    background-color: #121212;
}

#catalogo-ecommerce {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
}

#catalogo-ecommerce h2,
#catalogo-ecommerce h3 {
    color: var(--color-text-dark);
}

#catalogo-ecommerce p {
    color: var(--color-text-mid);
}

.product-card {
    background-color: var(--color-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body.dark-mode .product-card {
    background-color: #2c2c2c;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.btn-theme-color {
    background-color: var(--color-mint);
    color: white !important;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-theme-color:hover:not(:disabled) {
    background-color: var(--color-teal);
    transform: translateY(-1px);
}

.add-to-cart {
    background-color: var(--color-mint);
    color: white;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: block;
    width: 100%;
}

.add-to-cart:hover:not(:disabled) {
    background-color: var(--color-teal);
    color: white;
    transform: translateY(-1px);
}

#service-detail-container button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}

#cart-modal {
    padding-top: calc(var(--header-height) + 20px);
    align-items: flex-start;
    justify-content: center;
}

.modal-content-geek {
    background-color: var(--color-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 95%;
    max-width: 1024px;
    margin: 20px auto;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .modal-content-geek {
    background-color: #242424;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-modal-content-geek {
    padding: 1.5rem;
    background-color: var(--color-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .quick-modal-content-geek {
    background-color: #242424;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header-geek {
    border-color: var(--color-text-mid);
}

.modal-content-geek .text-primary {
    color: var(--color-mint) !important;
}

.input-field-geek {
    background-color: var(--color-bg-section-light);
    border-color: #d1d5db;
    color: var(--color-text-dark);
    transition: all 0.2s ease;
}

.input-field-geek::placeholder {
    color: var(--color-text-mid);
}

.input-field-geek:focus {
    border-color: var(--color-mint);
    box-shadow: 0 0 0 2px rgba(94, 200, 170, 0.5);
    background-color: var(--color-bg-light);
}

body.dark-mode .input-field-geek {
    background-color: #1f1f1f;
    border-color: #444;
}

body.dark-mode .input-field-geek:focus {
    background-color: #121212;
}

.cart-item {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--color-text-mid);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

.cart-item-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cart-item-name {
    font-weight: 600;
    color: var(--color-text-dark);
}

.remove-from-cart {
    background: none;
    border: none;
    color: #ef4444;
    padding: 0;
    transition: color 0.2s ease, transform 0.1s ease;
    font-size: 1.25rem;
    margin-left: auto;
}

.remove-from-cart:hover {
    color: var(--color-teal);
    transform: scale(1.1);
}

body.dark-mode .remove-from-cart {
    color: #fca5a5;
}

body.dark-mode .remove-from-cart:hover {
    color: var(--color-mint);
}

.btn-whatsapp-geek {
    background-color: #25d366;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-whatsapp-geek:hover:not(:disabled) {
    background-color: #128c7e;
    transform: translateY(-2px);
}

#cart-toggle-btn {
    position: relative;
}

#cart-count {
    top: 7px;
    right: 9px;
    transform: translate(50%, -50%);
    z-index: 10;
}

.text-dark-text-geek {
    color: var(--color-text-dark);
}

.text-theme-color {
    color: var(--color-mint);
}

/* ESTILOS PARA EL BOTÓN ROJO DE VACIAR CARRITO */
#clear-cart-btn {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

#clear-cart-btn:hover:not(:disabled) {
    background-color: #b91c1c !important;
    transform: translateY(-2px);
}

body.dark-mode #clear-cart-btn {
    background-color: #991b1b !important;
    color: #ffffff !important;
}

body.dark-mode #clear-cart-btn:hover:not(:disabled) {
    background-color: #7f1d1d !important;
}
/* ============================= */
/* CATÁLOGO: TARJETAS DINÁMICAS */
/* ============================= */
.catalog-dynamic-grid {
    align-items: stretch;
}

.catalog-dynamic-card {
    min-height: 350px;
    isolation: isolate;
    cursor: default;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.catalog-dynamic-card .card-image {
    transition: transform 0.45s ease, filter 0.35s ease, opacity 0.35s ease;
}

.catalog-dynamic-card:hover,
.catalog-dynamic-card:focus-within {
    transform: translateY(-8px);
    border-color: rgba(94, 200, 170, 0.55);
    box-shadow: 0 18px 35px rgba(17, 24, 39, 0.14);
}

.catalog-dynamic-card:hover .card-image,
.catalog-dynamic-card:focus-within .card-image {
    transform: scale(1.04);
    filter: brightness(0.75);
}

.catalog-card-body {
    padding-bottom: 4.75rem;
}

.catalog-hover-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 1.15rem 4.6rem 1.1rem 1.25rem;
    text-align: left;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(46, 94, 85, 0.92), rgba(33, 76, 69, 0.98));
    transform: translateY(calc(100% - 8px));
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.catalog-dynamic-card:hover .catalog-hover-panel,
.catalog-dynamic-card:focus-within .catalog-hover-panel {
    transform: translateY(0);
    opacity: 1;
}

.catalog-hover-title {
    margin: 0 0 0.45rem 0;
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 800;
    color: #ffffff !important;
}

.catalog-hover-list {
    list-style: none;
    margin: 0 0 0.9rem 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.catalog-hover-list li {
    position: relative;
    padding-left: 1.05rem;
    font-size: 0.84rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.92);
}

.catalog-hover-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 9999px;
    background: var(--color-mint);
}

.catalog-more-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border-radius: 0.85rem;
    background-color: #ffffff;
    color: var(--color-teal) !important;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.catalog-more-info-btn:hover,
.catalog-more-info-btn:focus {
    background-color: var(--color-mint);
    color: #ffffff !important;
    transform: translateY(-2px);
}

.catalog-cart-icon-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    width: 3.15rem !important;
    height: 3.15rem;
    min-width: 3.15rem;
    border-radius: 9999px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
    background: #ffffff !important;
    border: 2px solid rgba(94, 200, 170, 0.45);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.catalog-cart-icon-btn:hover:not(:disabled),
.catalog-cart-icon-btn:focus:not(:disabled) {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--color-mint);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.22);
}

.catalog-cart-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.catalog-cart-icon-btn.is-added {
    opacity: 0.68;
    cursor: not-allowed;
    filter: grayscale(1);
}

.catalog-cart-icon-btn.is-added::after {
    content: "✓";
    position: absolute;
    right: -0.2rem;
    top: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--color-mint);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.18);
}

body.dark-mode .catalog-dynamic-card:hover,
body.dark-mode .catalog-dynamic-card:focus-within {
    border-color: rgba(94, 200, 170, 0.65);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.42);
}

body.dark-mode .catalog-cart-icon-btn {
    background: #ffffff !important;
}

@media (max-width: 768px) {
    .catalog-dynamic-card {
        min-height: auto;
    }

    .catalog-card-body {
        padding-bottom: 1.25rem;
    }

    .catalog-hover-panel {
        position: relative;
        transform: none;
        opacity: 1;
        padding: 1rem 4.6rem 1rem 1.25rem;
    }

    .catalog-cart-icon-btn {
        bottom: 0.9rem;
        right: 0.9rem;
        width: 2.9rem !important;
        height: 2.9rem;
        min-width: 2.9rem;
    }
}


/* ===== ORIGINAL byte.css ===== */

/* =========================================================
   BYTE V1 - AGENTE INTELIGENTE GEEK
   ========================================================= */
:root {
    --byte-primary: #2e5e55;
    --byte-secondary: #5ec8aa;
    --byte-ink: #111827;
    --byte-muted: #6b7280;
    --byte-card: rgba(255, 255, 255, 0.94);
    --byte-border: rgba(46, 94, 85, 0.14);
}

.byte-launcher,
.byte-nudge,
.byte-modal {
    font-family: 'Poppins', sans-serif;
}

.byte-launcher {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background:
        radial-gradient(circle at 32% 22%, rgba(94, 200, 170, 0.95), rgba(46, 94, 85, 0.96) 58%, #234b45 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 22px 55px rgba(46, 94, 85, 0.28);
    z-index: 70;
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.byte-launcher:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 26px 70px rgba(46, 94, 85, 0.36);
}

.byte-launcher span {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.byte-launcher::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid rgba(94, 200, 170, 0.30);
    animation: bytePulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
}

@keyframes bytePulse {
    0% { opacity: 0.65; transform: scale(0.96); }
    70% { opacity: 0; transform: scale(1.28); }
    100% { opacity: 0; transform: scale(1.28); }
}

.byte-nudge {
    position: fixed;
    left: 1.25rem;
    bottom: 5.6rem;
    width: min(360px, calc(100vw - 2.5rem));
    background: var(--byte-card);
    color: var(--byte-ink);
    border: 1px solid var(--byte-border);
    border-radius: 1.35rem;
    box-shadow: 0 28px 85px rgba(17, 24, 39, 0.18);
    padding: 1rem;
    z-index: 70;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(18px);
}

.byte-nudge.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.byte-nudge-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.byte-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 0.82rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--byte-primary), var(--byte-secondary));
    box-shadow: 0 12px 28px rgba(46, 94, 85, 0.22);
}

.byte-nudge h3 {
    margin: 0 1.6rem 0.25rem 0;
    font-size: 0.98rem;
    font-weight: 900;
    color: var(--byte-ink);
}

.byte-nudge p {
    margin: 0;
    color: var(--byte-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.byte-nudge-actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.byte-nudge-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.byte-btn {
    border: none;
    border-radius: 999px;
    padding: 0.76rem 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.byte-btn:hover { transform: translateY(-1px); }

.byte-btn-primary {
    background: var(--byte-primary);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(46, 94, 85, 0.24);
}

.byte-btn-primary:hover { background: #244e47; }

.byte-btn-soft {
    background: rgba(46, 94, 85, 0.08);
    color: var(--byte-primary);
}

.byte-btn-ghost {
    background: transparent;
    color: var(--byte-muted);
}

.byte-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.3rem;
    background: rgba(17, 24, 39, 0.64);
    backdrop-filter: blur(10px);
}

.byte-modal.is-open { display: flex; }

.byte-modal-card {
    width: min(1080px, 100%);
    max-height: min(92vh, 880px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    background: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.44);
}

.byte-panel-left {
    position: relative;
    padding: 2rem;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 22%, rgba(94, 200, 170, 0.55), transparent 36%),
        linear-gradient(145deg, #234b45 0%, #2e5e55 56%, #173630 100%);
    overflow: hidden;
}

.byte-panel-left::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    right: -170px;
    bottom: -120px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 74px rgba(255, 255, 255, 0.025);
}

.byte-modal-avatar {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 1.25rem;
}

.byte-panel-left h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
    margin: 0 0 1rem;
}

.byte-panel-left p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    font-size: 0.96rem;
}

.byte-mini-steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.byte-mini-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
}

.byte-mini-step span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 900;
}

.byte-panel-right {
    position: relative;
    padding: 2rem;
    overflow-y: auto;
    background:
        radial-gradient(circle at 82% 0%, rgba(94, 200, 170, 0.12), transparent 34%),
        #ffffff;
}

.byte-modal-close {
    position: absolute;
    top: 1.05rem;
    right: 1.05rem;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: none;
    background: rgba(17, 24, 39, 0.06);
    color: #6b7280;
    font-size: 1.4rem;
    cursor: pointer;
}

.byte-form-header {
    padding-right: 2.5rem;
    margin-bottom: 1.2rem;
}

.byte-form-header h3 {
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 900;
    color: var(--byte-ink);
    margin: 0 0 0.45rem;
}

.byte-form-header p {
    color: var(--byte-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.byte-fieldset {
    border: none;
    padding: 0;
    margin: 1.15rem 0;
}

.byte-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 900;
    color: var(--byte-ink);
    margin-bottom: 0.65rem;
}

.byte-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.byte-choice {
    position: relative;
}

.byte-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.byte-choice span {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 0.78rem 0.85rem;
    border-radius: 1rem;
    background: rgba(46, 94, 85, 0.045);
    border: 1px solid rgba(46, 94, 85, 0.10);
    color: #374151;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.32;
    cursor: pointer;
    transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.byte-choice input:checked + span {
    background: rgba(46, 94, 85, 0.13);
    border-color: rgba(46, 94, 85, 0.48);
    color: var(--byte-primary);
    box-shadow: 0 12px 30px rgba(46, 94, 85, 0.10);
}

.byte-choice span:hover {
    transform: translateY(-1px);
    border-color: rgba(46, 94, 85, 0.26);
}

.byte-textarea {
    width: 100%;
    min-height: 128px;
    resize: vertical;
    border-radius: 1.1rem;
    border: 1px solid rgba(46, 94, 85, 0.16);
    background: rgba(249, 250, 251, 0.9);
    color: var(--byte-ink);
    padding: 0.95rem 1rem;
    outline: none;
    font-size: 0.9rem;
    line-height: 1.55;
}

.byte-textarea:focus {
    border-color: rgba(46, 94, 85, 0.55);
    box-shadow: 0 0 0 4px rgba(46, 94, 85, 0.10);
}

.byte-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
}

.byte-helper-text {
    color: var(--byte-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.byte-loading {
    display: none;
    align-items: center;
    gap: 0.6rem;
    color: var(--byte-primary);
    font-weight: 800;
    font-size: 0.86rem;
}

.byte-loading.is-visible { display: flex; }

.byte-loader {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 3px solid rgba(46, 94, 85, 0.14);
    border-top-color: var(--byte-primary);
    animation: byteSpin 0.75s linear infinite;
}

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

.byte-results {
    display: none;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(46, 94, 85, 0.10);
}

.byte-results.is-visible { display: block; }

.byte-result-summary {
    background: rgba(46, 94, 85, 0.07);
    border: 1px solid rgba(46, 94, 85, 0.12);
    border-radius: 1.2rem;
    padding: 1rem;
    color: #374151;
    line-height: 1.6;
    font-size: 0.9rem;
}

.byte-recommendations {
    display: grid;
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.byte-rec-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(46, 94, 85, 0.12);
    background: rgba(255, 255, 255, 0.92);
    padding: 0.95rem;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 12px 35px rgba(17, 24, 39, 0.055);
}

.byte-rec-img {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(46, 94, 85, 0.08);
}

.byte-rec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.byte-rec-card h4 {
    margin: 0 0 0.25rem;
    color: var(--byte-primary);
    font-size: 0.96rem;
    font-weight: 900;
}

.byte-rec-card p {
    margin: 0;
    color: var(--byte-muted);
    font-size: 0.79rem;
    line-height: 1.48;
}

.byte-rec-card .byte-btn {
    white-space: nowrap;
    padding: 0.65rem 0.85rem;
}

.byte-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.9rem;
}

.byte-next-step {
    margin: 0.8rem 0 0;
    color: var(--byte-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.byte-error {
    display: none;
    margin-top: 0.85rem;
    border-radius: 1rem;
    padding: 0.85rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.14);
    color: #991b1b;
    font-size: 0.84rem;
    line-height: 1.5;
}

.byte-error.is-visible { display: block; }

body.dark-mode .byte-nudge,
body.dark-mode .byte-modal-card,
body.dark-mode .byte-panel-right,
body.dark-mode .byte-rec-card {
    background: rgba(31, 41, 55, 0.97);
    color: #f9fafb;
}

body.dark-mode .byte-nudge h3,
body.dark-mode .byte-form-header h3,
body.dark-mode .byte-label,
body.dark-mode .byte-panel-right,
body.dark-mode .byte-rec-card h4 {
    color: #f9fafb;
}

body.dark-mode .byte-nudge p,
body.dark-mode .byte-form-header p,
body.dark-mode .byte-helper-text,
body.dark-mode .byte-rec-card p,
body.dark-mode .byte-next-step {
    color: #d1d5db;
}

body.dark-mode .byte-choice span,
body.dark-mode .byte-textarea,
body.dark-mode .byte-result-summary {
    background: rgba(17, 24, 39, 0.58);
    color: #e5e7eb;
    border-color: rgba(94, 200, 170, 0.18);
}

body.dark-mode .byte-choice input:checked + span {
    background: rgba(94, 200, 170, 0.14);
    border-color: rgba(94, 200, 170, 0.46);
    color: #a7f3d0;
}

@media (max-width: 900px) {
    .byte-modal-card {
        grid-template-columns: 1fr;
        max-height: 92vh;
    }

    .byte-panel-left {
        padding: 1.5rem;
    }

    .byte-panel-left p,
    .byte-mini-steps {
        display: none;
    }

    .byte-panel-left h2 {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .byte-panel-right {
        padding: 1.45rem;
    }
}

@media (max-width: 620px) {
    .byte-launcher {
        left: 1rem;
        bottom: 1rem;
        width: 56px;
        height: 56px;
    }

    .byte-nudge {
        left: 1rem;
        bottom: 4.9rem;
        width: calc(100vw - 2rem);
    }

    .byte-choice-grid {
        grid-template-columns: 1fr;
    }

    .byte-form-actions,
    .byte-result-actions,
    .byte-nudge-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .byte-rec-card {
        grid-template-columns: 46px 1fr;
    }

    .byte-rec-card .byte-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .byte-rec-img {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }
}


/* =========================================================
   AJUSTE V13.1 - MODAL BYTE CON SCROLL INTERNO
   Evita que los resultados queden cortados en pantallas medianas.
   ========================================================= */
.byte-modal-card {
    height: min(92vh, 880px);
    max-height: min(92vh, 880px);
    min-height: 0;
}

.byte-panel-left,
.byte-panel-right {
    min-height: 0;
}

.byte-panel-right {
    max-height: min(92vh, 880px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 94, 85, 0.42) rgba(46, 94, 85, 0.08);
    padding-bottom: 2.4rem;
}

.byte-panel-right::-webkit-scrollbar {
    width: 9px;
}

.byte-panel-right::-webkit-scrollbar-track {
    background: rgba(46, 94, 85, 0.06);
    border-radius: 999px;
}

.byte-panel-right::-webkit-scrollbar-thumb {
    background: rgba(46, 94, 85, 0.36);
    border-radius: 999px;
}

.byte-results {
    scroll-margin-top: 1rem;
}

@media (max-width: 900px) {
    .byte-modal-card {
        height: 92vh;
        max-height: 92vh;
        overflow-y: auto;
        display: block;
    }

    .byte-panel-right {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 620px) {
    .byte-modal {
        padding: 0.75rem;
    }

    .byte-modal-card {
        height: 94vh;
        max-height: 94vh;
        border-radius: 1.45rem;
    }
}

/* Icono visual de Byte */
.byte-launcher,
.byte-avatar,
.byte-modal-avatar {
    overflow: hidden;
}

.byte-icon-img {
    display: block;
    width: 68%;
    height: 68%;
    object-fit: contain;
}

.byte-avatar .byte-icon-img {
    width: 72%;
    height: 72%;
}

.byte-modal-avatar .byte-icon-img {
    width: 74%;
    height: 74%;
}



/* ===== ORIGINAL geek-booking.css ===== */

.geek-booking {
  width: 100%;
  color: #172033;
  text-align: left;
}
.geek-booking .hidden { display: none !important; }
.geek-booking-loading,
.geek-booking-error {
  width: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 1px dashed #c9d7d3;
  border-radius: 1.25rem;
  color: #51625f;
  background: #f7faf9;
  text-align: center;
  font-weight: 700;
}
.geek-booking-error { color: #9f2d20; background: #fff7f5; border-color: #efc9c2; }
.geek-booking-main { width: 100%; }
.geek-booking-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.12fr) minmax(260px, .88fr);
  gap: 1rem;
}
.geek-booking-calendar,
.geek-booking-slots,
.geek-booking-form,
.geek-booking-success {
  border: 1px solid #dfe8e5;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 8px 28px rgba(28, 65, 57, .06);
}
.geek-booking-calendar,
.geek-booking-slots { padding: 1.15rem; }
.geek-booking-month-head {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}
.geek-booking-month-head strong {
  text-align: center;
  color: #2e5e55;
  font-size: 1.08rem;
  text-transform: capitalize;
}
.geek-booking-nav {
  width: 42px;
  height: 42px;
  border: 1px solid #d7e2df;
  border-radius: 999px;
  background: #f6faf9;
  color: #2e5e55;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.geek-booking-nav:hover { transform: translateY(-1px); background: #e8f5f1; }
.geek-booking-nav:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.geek-booking-weekdays,
.geek-booking-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
}
.geek-booking-weekdays { margin-bottom: .35rem; }
.geek-booking-weekdays span {
  text-align: center;
  color: #6b7a77;
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.geek-booking-day-empty { aspect-ratio: 1; }
.geek-booking-day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: .85rem;
  background: transparent;
  color: #263633;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.geek-booking-day::after {
  content: "";
  position: absolute;
  bottom: .28rem;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: transparent;
}
.geek-booking-day.is-available { background: #f1faf7; color: #216456; }
.geek-booking-day.is-available::after { background: #42b99c; }
.geek-booking-day.is-available:hover { border-color: #66cbb3; transform: translateY(-1px); }
.geek-booking-day.is-selected { background: #2e5e55; color: #fff; border-color: #2e5e55; }
.geek-booking-day.is-selected::after { background: #9ff1d7; }
.geek-booking-day.is-unavailable { color: #8b9795; background: #f7f8f8; }
.geek-booking-day.is-unavailable:hover { background: #f0f3f2; }
.geek-booking-day:disabled { opacity: .28; cursor: not-allowed; }
.geek-booking-privacy {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid #e8efed;
  color: #687875 !important;
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
}
.geek-booking-panel-head h4 {
  margin: 0;
  color: #2e5e55;
  font-size: 1.05rem;
}
.geek-booking-panel-head p {
  margin: .35rem 0 1rem;
  color: #687875 !important;
  font-size: .82rem;
  line-height: 1.45;
}
.geek-booking-slot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.geek-booking-slot {
  min-height: 46px;
  border: 1px solid #cfe0db;
  border-radius: .8rem;
  background: #f8fbfa;
  color: #2e5e55;
  font-weight: 850;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.geek-booking-slot:hover { transform: translateY(-1px); background: #e8f5f1; }
.geek-booking-slot.is-selected { background: #2e5e55; color: #fff; border-color: #2e5e55; }
.geek-booking-empty {
  grid-column: 1 / -1;
  min-height: 130px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 1rem;
  background: #f7f8f8;
  color: #667572;
  text-align: center;
  font-size: .85rem;
  line-height: 1.55;
}
.geek-booking-form { margin-top: 1rem; padding: 1.25rem; }
.geek-booking-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2ebe8;
}
.geek-booking-form-head div { display: grid; gap: .2rem; }
.geek-booking-form-head span { color: #6d7b78; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.geek-booking-form-head strong { color: #2e5e55; font-size: 1rem; }
.geek-booking-form-head button,
.geek-booking-success button {
  border: 0;
  background: transparent;
  color: #2e5e55;
  font-weight: 850;
  cursor: pointer;
}
.geek-booking-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.geek-booking-fields label { display: grid; gap: .38rem; }
.geek-booking-fields label > span { color: #455753; font-size: .76rem; font-weight: 820; }
.geek-booking-fields input,
.geek-booking-fields select,
.geek-booking-fields textarea {
  width: 100%;
  border: 1px solid #cbd9d5;
  border-radius: .8rem;
  padding: .76rem .82rem;
  background: #fff;
  color: #172033;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.geek-booking-fields input:focus,
.geek-booking-fields select:focus,
.geek-booking-fields textarea:focus { border-color: #48a98f; box-shadow: 0 0 0 3px rgba(72, 169, 143, .14); }
.geek-booking-fields textarea { resize: vertical; min-height: 92px; }
.geek-booking-full { grid-column: 1 / -1; }
.geek-booking-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.geek-booking-consent { display: flex !important; grid-template-columns: 20px 1fr; align-items: flex-start; gap: .7rem !important; padding: .75rem; border-radius: .8rem; background: #f6faf9; }
.geek-booking-consent input { width: 18px; height: 18px; margin-top: .1rem; accent-color: #2e5e55; }
.geek-booking-consent span { line-height: 1.5; font-weight: 650 !important; }
.geek-booking-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 1rem;
  border: 0;
  border-radius: 999px;
  background: #2e5e55;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(46, 94, 85, .2);
}
.geek-booking-submit:disabled { opacity: .55; cursor: wait; }
.geek-booking-form-note { margin: .75rem 0 0 !important; color: #687875 !important; text-align: center; font-size: .74rem; }
.geek-booking-success { margin-top: 1rem; padding: 2rem; text-align: center; }
.geek-booking-success-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: #dff6ef; color: #24725f; font-size: 1.65rem; font-weight: 900; }
.geek-booking-success h4 { margin: 0 0 .65rem; color: #2e5e55; font-size: 1.35rem; }
.geek-booking-success p { margin: 0 auto .75rem !important; max-width: 580px; color: #566763 !important; }
.geek-booking-success strong { display: block; margin-bottom: 1rem; color: #172033; }

body.dark-mode .geek-booking { color: var(--color-text-dark); }
body.dark-mode .geek-booking-calendar,
body.dark-mode .geek-booking-slots,
body.dark-mode .geek-booking-form,
body.dark-mode .geek-booking-success { background: var(--color-bg-light); border-color: #33413f; }
body.dark-mode .geek-booking-day { color: var(--color-text-dark); }
body.dark-mode .geek-booking-day.is-available { background: rgba(74, 178, 150, .12); color: var(--color-mint); }
body.dark-mode .geek-booking-day.is-unavailable,
body.dark-mode .geek-booking-empty { background: rgba(255,255,255,.035); color: var(--color-text-mid); }
body.dark-mode .geek-booking-slot { background: rgba(255,255,255,.035); color: var(--color-mint); border-color: #40504c; }
body.dark-mode .geek-booking-fields input,
body.dark-mode .geek-booking-fields select,
body.dark-mode .geek-booking-fields textarea { background: #182320; color: #f5fbf9; border-color: #40504c; }
body.dark-mode .geek-booking-consent { background: rgba(255,255,255,.035); }

@media (max-width: 800px) {
  .contact-card.card-booking { padding: 1.35rem .85rem !important; }
  .geek-booking-grid { grid-template-columns: 1fr; }
  .geek-booking-fields { grid-template-columns: 1fr; }
  .geek-booking-full { grid-column: auto; }
  .geek-booking-calendar,
  .geek-booking-slots,
  .geek-booking-form { padding: .9rem; }
}

@media (max-width: 390px) {
  .geek-booking-weekdays,
  .geek-booking-days { gap: .18rem; }
  .geek-booking-day { border-radius: .65rem; font-size: .82rem; }
  .geek-booking-slot-list { grid-template-columns: 1fr 1fr; }
}


.geek-booking-verification {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #bcded4;
  border-radius: 1rem;
  background: #f1faf7;
}
.geek-booking-verification-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .85rem;
}
.geek-booking-verification-head div { display: grid; gap: .2rem; }
.geek-booking-verification-head strong { color: #214f46; font-size: 1rem; }
.geek-booking-verification-head p { margin: 0 !important; color: #5b706a !important; font-size: .78rem; }
.geek-booking-verification-badge {
  flex: 0 0 auto;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #dff6ef;
  color: #216456;
  font-size: .68rem;
  font-weight: 850;
}
.geek-booking-code-label { display: grid; gap: .38rem; }
.geek-booking-code-label span { color: #455753; font-size: .76rem; font-weight: 820; }
.geek-booking-code-label input {
  width: 100%;
  border: 1px solid #9fcfc1;
  border-radius: .8rem;
  padding: .82rem;
  background: #fff;
  color: #172033;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: .45rem;
  outline: none;
}
.geek-booking-code-label input:focus { border-color: #48a98f; box-shadow: 0 0 0 3px rgba(72,169,143,.14); }
.geek-booking-resend {
  display: block;
  margin: .75rem 0 0 auto;
  border: 0;
  background: transparent;
  color: #2e5e55;
  font-weight: 820;
  cursor: pointer;
}
.geek-booking-resend:disabled { opacity: .5; cursor: not-allowed; }
body.dark-mode .geek-booking-verification { background: rgba(74,178,150,.08); border-color: #3f665c; }
body.dark-mode .geek-booking-code-label input { background: #182320; color: #f5fbf9; border-color: #4c756a; }

/* V19.9.1 — referencia horaria visible */
.geek-booking-timezone-note { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(46,111,98,.14); color: #5f746f; font-size: .78rem; font-weight: 700; text-align: center; }
.dark .geek-booking-timezone-note { color: #b9ccc7; border-top-color: rgba(255,255,255,.12); }

/* V19.10.1 — contacto alternativo: requisito dinámico según canal */
.geek-booking-channel {
  margin: 0;
  padding: .9rem;
  border: 1px solid #d5e3df;
  border-radius: 1rem;
  background: #fbfdfc;
}
.geek-booking-channel legend {
  padding: 0 .35rem;
  color: #455753;
  font-size: .78rem;
  font-weight: 850;
}
.geek-booking-channel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.geek-booking-channel-option {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 42px 1fr;
  align-items: center;
  gap: .7rem !important;
  min-height: 82px;
  padding: .8rem;
  border: 1px solid #cbd9d5;
  border-radius: .9rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.geek-booking-channel-option:hover { border-color: #72bca8; }
.geek-booking-channel-option:has(input:checked) { border-color: #2e5e55; background: #eff9f6; box-shadow: 0 0 0 3px rgba(72,169,143,.12); }
.geek-booking-channel-option.is-disabled { display: none !important; }
.geek-booking-channel-option input { width: 17px; height: 17px; accent-color: #2e5e55; }
.geek-booking-channel-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5f6f0;
  color: #24725f;
  font-size: 1.15rem;
}
.geek-booking-channel-option > span:last-child { display: grid; gap: .18rem; }
.geek-booking-channel-option strong { color: #214f46; font-size: .9rem; }
.geek-booking-channel-option small { color: #667873; font-size: .72rem; line-height: 1.4; }

.geek-booking-whatsapp-verification {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #9ed8c4;
  border-radius: 1rem;
  background: #effaf6;
}
.geek-booking-whatsapp-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: #1e9d66;
  color: #fff !important;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(30,157,102,.2);
}
.geek-booking-whatsapp-open:hover { background: #188454; transform: translateY(-1px); }
.geek-booking-whatsapp-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .8rem;
  color: #486861;
  font-size: .78rem;
  font-weight: 750;
}
.geek-booking-whatsapp-waiting.is-verified { color: #176c4c; }
.geek-booking-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(36,114,95,.2);
  border-top-color: #24725f;
  border-radius: 50%;
  animation: geek-booking-spin .8s linear infinite;
}
.geek-booking-whatsapp-waiting.is-verified .geek-booking-spinner { animation: none; border: 0; }
.geek-booking-whatsapp-waiting.is-verified .geek-booking-spinner::before { content: '✓'; font-weight: 950; }
@keyframes geek-booking-spin { to { transform: rotate(360deg); } }

body.dark-mode .geek-booking-channel { background: rgba(255,255,255,.025); border-color: #40504c; }
body.dark-mode .geek-booking-channel-option { background: #182320; border-color: #40504c; }
body.dark-mode .geek-booking-channel-option:has(input:checked) { background: rgba(74,178,150,.12); border-color: #64b9a1; }
body.dark-mode .geek-booking-channel-option strong,
body.dark-mode .geek-booking-channel legend { color: #d8eee7; }
body.dark-mode .geek-booking-channel-option small { color: #b7c8c3; }
body.dark-mode .geek-booking-whatsapp-verification { background: rgba(30,157,102,.08); border-color: #3f665c; }
body.dark-mode .geek-booking-whatsapp-waiting { color: #c0d8d1; }

@media (max-width: 680px) {
  .geek-booking-channel-options { grid-template-columns: 1fr; }
  .geek-booking-channel-option { min-height: 72px; }
}


/* ===== ORIGINAL geek-voice.css ===== */

/* =========================================================
   GEEK VOICE BETA V19.7 — GEMINI LIVE
   Se carga como CSS liviano; el motor de voz se descarga solo
   cuando el visitante abre la pestaña de voz.
   ========================================================= */

.byte-modal [hidden] {
    display: none !important;
}

.geek-voice-actions .byte-btn:disabled,
.byte-mode-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}

.byte-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0 3rem 1.25rem 0;
    padding: 0.35rem;
    border: 1px solid rgba(46, 94, 85, 0.12);
    border-radius: 1rem;
    background: rgba(46, 94, 85, 0.055);
}

.byte-mode-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 0;
    border-radius: 0.78rem;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.byte-mode-btn:hover {
    color: #2e5e55;
    transform: translateY(-1px);
}

.byte-mode-btn.is-active {
    color: #234b45;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(46, 94, 85, 0.12);
}

.byte-mode-btn small {
    padding: 0.18rem 0.38rem;
    border-radius: 999px;
    background: rgba(94, 200, 170, 0.17);
    color: #2e5e55;
    font-size: 0.58rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.byte-mode-panel {
    display: none;
}

.byte-mode-panel.is-active {
    display: block;
    animation: geekVoicePanelIn 0.28s ease both;
}

.byte-mode-panel[hidden] {
    display: none !important;
}

@keyframes geekVoicePanelIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.byte-voice-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.72rem;
    margin-top: 1.65rem;
}

.byte-voice-feature-list[hidden] {
    display: none;
}

.byte-voice-feature-list .byte-mini-step span {
    font-size: 0.68rem;
}

.geek-voice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.geek-voice-header h3 {
    margin: 0.25rem 0 0.35rem;
    color: #111827;
    font-size: 1.45rem;
    line-height: 1.15;
    font-weight: 900;
}

.geek-voice-header p {
    max-width: 580px;
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.55;
}

.geek-voice-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: #2e5e55;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.geek-voice-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.46rem 0.66rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    font-size: 0.67rem;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.geek-voice-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.geek-voice-status[data-state="online"] {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.geek-voice-status[data-state="busy"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.11);
}

.geek-voice-status[data-state="offline"] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
}

.geek-voice-status[data-state="checking"]::before {
    animation: geekVoiceStatusPulse 1.1s ease-in-out infinite;
}

@keyframes geekVoiceStatusPulse {
    50% { opacity: 0.3; transform: scale(0.72); }
}

.geek-voice-stage {
    --voice-level: 0;
    position: relative;
    min-height: 235px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    overflow: hidden;
    padding: 1.45rem 1rem 1.2rem;
    border: 1px solid rgba(46, 94, 85, 0.12);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 50% 35%, rgba(94, 200, 170, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(246, 252, 250, 0.97), rgba(239, 247, 245, 0.94));
    isolation: isolate;
}

.geek-voice-stage::before,
.geek-voice-stage::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.geek-voice-stage::before {
    width: 300px;
    height: 300px;
    left: -165px;
    top: -180px;
    border: 1px solid rgba(46, 94, 85, 0.08);
    box-shadow: 0 0 0 32px rgba(46, 94, 85, 0.025), 0 0 0 68px rgba(46, 94, 85, 0.018);
}

.geek-voice-stage::after {
    width: 210px;
    height: 210px;
    right: -125px;
    bottom: -145px;
    background: rgba(94, 200, 170, 0.08);
    filter: blur(2px);
}

.geek-voice-orbit {
    position: relative;
    width: 102px;
    height: 102px;
    display: grid;
    place-items: center;
}

.geek-voice-orbit > span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(46, 94, 85, 0.18);
    border-radius: 50%;
    transform: scale(calc(1 + var(--voice-level) * 0.16));
    transition: transform 80ms linear, opacity 0.2s ease;
}

.geek-voice-orbit > span:nth-child(2) {
    inset: -13px;
    opacity: 0.58;
    animation: geekVoiceRing 2.8s ease-in-out infinite;
}

.geek-voice-orbit > span:nth-child(3) {
    inset: -26px;
    opacity: 0.3;
    animation: geekVoiceRing 2.8s 0.45s ease-in-out infinite;
}

.geek-voice-core {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(145deg, #2e5e55, #5ec8aa);
    box-shadow: 0 18px 42px rgba(46, 94, 85, 0.26);
    transform: scale(calc(1 + var(--voice-level) * 0.07));
    transition: transform 80ms linear;
}

.geek-voice-core img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

@keyframes geekVoiceRing {
    0%, 100% { transform: scale(0.94); opacity: 0.22; }
    50% { transform: scale(1.06); opacity: 0.6; }
}

.geek-voice-stage[data-state="listening"] .geek-voice-orbit > span,
.geek-voice-stage[data-state="speaking"] .geek-voice-orbit > span,
.geek-voice-stage[data-state="processing"] .geek-voice-orbit > span {
    border-color: rgba(94, 200, 170, 0.48);
}

.geek-voice-stage[data-state="speaking"] .geek-voice-core {
    animation: geekVoiceSpeaking 0.9s ease-in-out infinite alternate;
}

.geek-voice-stage[data-state="processing"] .geek-voice-core {
    animation: geekVoiceThinking 1.5s ease-in-out infinite;
}

.geek-voice-stage[data-state="muted"] .geek-voice-core,
.geek-voice-stage[data-state="ended"] .geek-voice-core,
.geek-voice-stage[data-state="error"] .geek-voice-core {
    filter: saturate(0.35);
    opacity: 0.72;
}

@keyframes geekVoiceSpeaking {
    to { transform: scale(1.065); box-shadow: 0 24px 54px rgba(46, 94, 85, 0.34); }
}

@keyframes geekVoiceThinking {
    0%, 100% { transform: rotate(-2deg) scale(0.98); }
    50% { transform: rotate(2deg) scale(1.04); }
}

.geek-voice-state-copy {
    display: grid;
    justify-items: center;
    gap: 0.22rem;
    text-align: center;
}

.geek-voice-state-copy strong {
    color: #173630;
    font-size: 1rem;
    font-weight: 900;
}

.geek-voice-state-copy span {
    max-width: 450px;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.45;
}

.geek-voice-timer {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    min-width: 58px;
    padding: 0.38rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: #2e5e55;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 7px 18px rgba(46, 94, 85, 0.08);
}

.geek-voice-timer.is-ending {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.88);
    animation: geekVoiceTimerWarning 1s ease-in-out infinite;
}

@keyframes geekVoiceTimerWarning {
    50% { transform: scale(1.05); }
}

.geek-voice-transcript {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    margin-top: 0.8rem;
}

.geek-voice-transcript article {
    min-height: 82px;
    padding: 0.75rem 0.82rem;
    border: 1px solid rgba(46, 94, 85, 0.1);
    border-radius: 1rem;
    background: rgba(46, 94, 85, 0.035);
}

.geek-voice-transcript article > span {
    display: block;
    margin-bottom: 0.3rem;
    color: #2e5e55;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.geek-voice-transcript p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.48;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.geek-voice-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.78rem;
    padding: 0.72rem 0.82rem;
    border-radius: 1rem;
    background: rgba(15, 118, 110, 0.065);
    color: #365c55;
}

.geek-voice-privacy i {
    margin-top: 0.12rem;
    color: #2e5e55;
}

.geek-voice-privacy p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.48;
}

.geek-voice-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.58rem;
    margin-top: 0.72rem;
    color: #475569;
    font-size: 0.72rem;
    line-height: 1.45;
    cursor: pointer;
}

.geek-voice-consent input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 0.05rem;
    accent-color: #2e5e55;
}

.geek-voice-error {
    display: none;
    margin-top: 0.72rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 0.9rem;
    background: rgba(220, 38, 38, 0.075);
    color: #991b1b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.geek-voice-error.is-visible {
    display: block;
}

.geek-voice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.geek-voice-actions .byte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
}

.geek-voice-start {
    min-width: 185px;
}

.geek-voice-end {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

.geek-voice-end:hover {
    background: rgba(220, 38, 38, 0.15);
}

body.dark-mode .byte-mode-switch {
    border-color: rgba(94, 200, 170, 0.14);
    background: rgba(17, 24, 39, 0.45);
}

body.dark-mode .byte-mode-btn {
    color: #94a3b8;
}

body.dark-mode .byte-mode-btn.is-active {
    color: #a7f3d0;
    background: rgba(46, 94, 85, 0.32);
    box-shadow: none;
}

body.dark-mode .geek-voice-header h3,
body.dark-mode .geek-voice-state-copy strong {
    color: #f8fafc;
}

body.dark-mode .geek-voice-header p,
body.dark-mode .geek-voice-state-copy span,
body.dark-mode .geek-voice-consent,
body.dark-mode .geek-voice-transcript p {
    color: #cbd5e1;
}

body.dark-mode .geek-voice-stage {
    border-color: rgba(94, 200, 170, 0.15);
    background:
        radial-gradient(circle at 50% 35%, rgba(94, 200, 170, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(23, 54, 48, 0.58));
}

body.dark-mode .geek-voice-timer {
    background: rgba(17, 24, 39, 0.72);
    color: #a7f3d0;
}

body.dark-mode .geek-voice-transcript article {
    border-color: rgba(94, 200, 170, 0.13);
    background: rgba(17, 24, 39, 0.48);
}

body.dark-mode .geek-voice-privacy {
    background: rgba(94, 200, 170, 0.08);
    color: #c7e9df;
}

@media (max-width: 900px) {
    .byte-voice-feature-list {
        display: none;
    }
}

@media (max-width: 620px) {
    .byte-mode-switch {
        margin-right: 2.55rem;
    }

    .byte-mode-btn {
        min-height: 41px;
        padding: 0.58rem 0.45rem;
        font-size: 0.69rem;
    }

    .byte-mode-btn i {
        display: none;
    }

    .geek-voice-header {
        display: grid;
    }

    .geek-voice-header h3 {
        font-size: 1.25rem;
    }

    .geek-voice-status {
        justify-self: start;
    }

    .geek-voice-stage {
        min-height: 215px;
    }

    .geek-voice-transcript {
        grid-template-columns: 1fr;
    }

    .geek-voice-transcript article {
        min-height: 70px;
    }

    .geek-voice-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .geek-voice-actions .byte-btn,
    .geek-voice-start {
        width: 100%;
        min-width: 0;
        padding-inline: 0.65rem;
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geek-voice-orbit > span,
    .geek-voice-core,
    .geek-voice-timer,
    .byte-mode-panel.is-active {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== ORIGINAL mobile-responsive.css ===== */

/* =========================================================
   GEEK V16.17 - RESPONSIVE MOBILE FIRST
   Esta hoja solo redefine la experiencia en pantallas móviles.
   El diseño de escritorio existente permanece intacto.
   ========================================================= */

.geek-story-mobile,
.mobile-calendly-cta,
.mobile-calendly-note {
    display: none;
}

@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* -----------------------------------------------------
       HEADER MÓVIL
       ----------------------------------------------------- */
    .main-header {
        min-height: var(--header-height);
        padding-left: max(0.85rem, env(safe-area-inset-left));
        padding-right: max(0.85rem, env(safe-area-inset-right));
        gap: 0.55rem;
    }

    .logo-container {
        min-width: 0;
        flex: 1 1 auto;
    }

    .logo-text-wrapper {
        min-width: 0;
    }

    .logo-text-wrapper img {
        max-width: min(38vw, 190px);
        height: auto;
    }

    .theme-controls {
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    .mode-toggle-btn,
    .region-toggle-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .burger-menu {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 0.85rem;
    }

    .main-nav {
        max-height: 0;
        z-index: 1200;
    }

    .main-nav.open {
        max-height: min(70dvh, 430px);
        overflow-y: auto;
    }

    .main-nav ul {
        padding: 0.65rem 1rem 1rem;
    }

    .main-nav a {
        display: block;
        padding: 0.85rem 0.9rem;
        border-radius: 0.75rem;
        font-size: 0.98rem;
    }

    /* -----------------------------------------------------
       HERO: composición vertical propia para móvil
       ----------------------------------------------------- */
    .geek-hero {
        min-height: auto !important;
        padding: 2.35rem 0 3rem !important;
        overflow: hidden;
    }

    .geek-hero-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.45rem !important;
        padding-inline: 1rem !important;
    }

    .geek-hero-copy {
        display: contents !important;
    }

    .geek-hero-kicker {
        order: 1;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.72rem 0.9rem !important;
        line-height: 1.35;
        letter-spacing: 0.1em;
        font-size: clamp(0.72rem, 3vw, 0.88rem) !important;
    }

    .geek-hero-title {
        order: 2;
        margin: 0 !important;
        text-align: center;
        font-size: clamp(2.45rem, 11vw, 4rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.055em !important;
        text-wrap: balance;
    }

    .geek-hero-description {
        order: 3;
        margin: 0 auto !important;
        max-width: 38rem !important;
        text-align: center;
        font-size: clamp(1rem, 4.5vw, 1.22rem) !important;
        line-height: 1.65 !important;
    }

    .geek-hero-actions {
        order: 4;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        margin-top: 0.2rem !important;
        width: 100%;
    }

    .geek-hero-btn {
        width: 100%;
        min-height: 54px;
        justify-content: center;
        padding-inline: 1rem !important;
    }

    .geek-hero-image-wrap {
        order: 5;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 1.55rem !important;
        overflow: hidden;
    }

    .geek-hero-image {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: min(72vh, 620px);
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center;
    }

    .geek-hero-proof {
        order: 6;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        margin-top: 0 !important;
        width: 100%;
        max-width: none !important;
    }

    .geek-proof-item {
        min-width: 0;
        padding: 0.75rem 0.35rem !important;
        border-radius: 1rem !important;
        text-align: center;
    }

    .geek-proof-item strong {
        font-size: clamp(1.25rem, 6vw, 1.7rem) !important;
    }

    .geek-proof-item span {
        margin-top: 0.3rem !important;
        font-size: clamp(0.62rem, 2.8vw, 0.78rem) !important;
        line-height: 1.25;
    }

    .geek-hero-orb {
        animation: none !important;
        opacity: 0.45;
    }

    /* -----------------------------------------------------
       STORYTELLING: desactivar experiencia desktop y usar
       carrusel táctil móvil sin sticky/285vh/WebGL.
       ----------------------------------------------------- */
    .geek-services-story-section {
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden;
    }

    .geek-story {
        display: none !important;
    }

    .geek-story-mobile {
        display: block;
        position: relative;
        padding: 3.75rem 0 4rem;
        background:
            radial-gradient(circle at 20% 12%, rgba(94, 200, 170, 0.18), transparent 34%),
            linear-gradient(180deg, #f3fcf9 0%, #edf8f5 52%, #f8fbfa 100%);
        overflow: hidden;
    }

    .geek-story-mobile-intro {
        padding: 0 1.15rem;
        max-width: 42rem;
        margin: 0 auto 1.8rem;
    }

    .geek-story-mobile-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        color: #15977f;
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        font-weight: 900;
        text-transform: uppercase;
    }

    .geek-story-mobile-eyebrow > span {
        width: 38px;
        height: 1px;
        background: #5ec8aa;
    }

    .geek-story-mobile-intro h3 {
        margin: 1rem 0 1rem;
        color: #0f172a;
        font-size: clamp(2.35rem, 10.5vw, 3.8rem);
        line-height: 0.98;
        letter-spacing: -0.055em;
        font-weight: 900;
        text-wrap: balance;
    }

    .geek-story-mobile-intro > p {
        margin: 0;
        color: #64748b;
        font-size: 1.02rem;
        line-height: 1.7;
    }

    .geek-story-mobile-hint {
        display: inline-block;
        margin-top: 1rem;
        color: #2e5e55;
        font-weight: 800;
        font-size: 0.8rem;
    }

    .geek-story-mobile-track {
        display: flex;
        gap: 1rem;
        width: 100%;
        padding: 0.4rem max(1rem, calc((100vw - 430px) / 2)) 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .geek-story-mobile-track::-webkit-scrollbar {
        display: none;
    }

    .geek-story-mobile-card {
        position: relative;
        flex: 0 0 min(86vw, 390px);
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        min-height: 550px;
        border-radius: 1.7rem;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(46, 94, 85, 0.12);
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.11);
        color: inherit;
        text-decoration: none;
    }

    .geek-story-mobile-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        padding: 1rem 1rem 0.75rem;
    }

    .geek-story-mobile-index {
        display: inline-grid;
        place-items: center;
        min-height: 32px;
        padding: 0.25rem 0.65rem;
        border-radius: 999px;
        background: rgba(94, 200, 170, 0.13);
        color: #15977f;
        font-size: 0.75rem;
        font-weight: 900;
    }

    .geek-story-mobile-card-top small {
        color: #15977f;
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: right;
    }

    .geek-story-mobile-card > img {
        display: block;
        width: calc(100% - 2rem);
        height: 220px;
        margin: 0 1rem;
        border-radius: 1.2rem;
        object-fit: cover;
        object-position: center;
        background: #eef8f5;
    }

    .geek-story-mobile-card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 1.2rem 1.15rem 1.25rem;
    }

    .geek-story-mobile-card-body h4 {
        margin: 0;
        color: #0f172a;
        font-size: clamp(1.7rem, 7.5vw, 2.25rem);
        line-height: 1.05;
        letter-spacing: -0.035em;
        font-weight: 900;
    }

    .geek-story-mobile-card-body p {
        margin: 0.75rem 0 1rem;
        color: #64748b;
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .geek-story-mobile-card-body > span {
        margin-top: auto;
        color: #2e5e55;
        font-weight: 900;
        font-size: 0.9rem;
    }

    .geek-story-mobile-dots {
        display: flex;
        justify-content: center;
        gap: 0.55rem;
        margin-top: 0.9rem;
    }

    .geek-story-mobile-dots span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(46, 94, 85, 0.2);
        transition: width 0.25s ease, background 0.25s ease;
    }

    .geek-story-mobile-dots span.is-active {
        width: 28px;
        background: #15977f;
    }

    .geek-story-mobile-swipe {
        margin: 0.75rem 0 0;
        text-align: center;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 700;
    }

    /* -----------------------------------------------------
       MISIÓN / ECOSISTEMA
       ----------------------------------------------------- */
    #quienes-somos {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #quienes-somos > div > .text-center h2 {
        font-size: clamp(2.2rem, 9.5vw, 3.25rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em;
        text-wrap: balance;
    }

    #quienes-somos > div > .text-center p {
        font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
        line-height: 1.65 !important;
    }

    .mission-growth-board {
        margin-top: 2.25rem !important;
        padding: 1.45rem 0.8rem 1rem !important;
    }

    .mission-growth-head h3 {
        font-size: clamp(2.15rem, 9vw, 3rem) !important;
        line-height: 1 !important;
        text-wrap: balance;
    }

    .mission-growth-head p {
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
    }

    .mission-growth-cards {
        gap: 0.9rem !important;
    }

    .mission-growth-card {
        min-height: 0 !important;
        padding: 1.15rem !important;
        border-radius: 1.4rem !important;
    }

    .mission-growth-chipbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        padding: 0.6rem !important;
        margin-top: 1rem !important;
    }

    .mission-growth-chipbar span {
        min-height: 54px !important;
        justify-content: flex-start !important;
        padding: 0.55rem 0.65rem !important;
        gap: 0.45rem !important;
    }

    .mission-growth-chipbar b {
        flex: 0 0 28px;
    }

    .mission-growth-chipbar em {
        min-width: 0;
        font-size: 0.76rem !important;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    /* -----------------------------------------------------
       TESTIMONIOS: carrusel horizontal táctil
       ----------------------------------------------------- */
    #resenas {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important;
        overflow: hidden;
    }

    #resenas .max-w-7xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #resenas .text-center {
        padding-inline: 1rem;
    }

    #resenas h2 {
        font-size: clamp(2.4rem, 10vw, 3.6rem) !important;
        line-height: 1 !important;
        letter-spacing: -0.045em;
        text-wrap: balance;
    }

    #resenas .text-center > p {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    #resenas .testimonials-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 1rem !important;
        margin-top: 2.5rem !important;
        padding: 0.25rem 1rem 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #resenas .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    #resenas .testimonial-grid-card {
        flex: 0 0 min(86vw, 390px) !important;
        scroll-snap-align: center;
        min-height: 520px !important;
        padding: 1.35rem !important;
        border-radius: 1.6rem !important;
        transform: none !important;
    }

    #resenas .testimonial-grid-card:hover {
        transform: none !important;
    }

    #resenas .testimonial-grid-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }

    #resenas .testimonial-grid-profile {
        align-items: center;
    }

    #resenas .testimonial-name {
        font-size: 1.05rem !important;
    }

    #resenas .testimonial-role {
        font-size: 0.9rem !important;
        line-height: 1.35;
    }

    #resenas .testimonials-grid .review-text {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
        -webkit-line-clamp: 10;
    }

    /* -----------------------------------------------------
       CONTACTO / CALENDLY: CTA simple en móvil
       ----------------------------------------------------- */
    #contactanos {
        padding-top: 3.75rem !important;
        padding-bottom: 3.75rem !important;
    }

    #contactanos > div {
        padding-inline: 1rem !important;
    }

    #contactanos h2 {
        font-size: clamp(2.45rem, 10vw, 3.65rem) !important;
        line-height: 1 !important;
        letter-spacing: -0.045em;
        text-wrap: balance;
    }

    #contactanos > div > p {
        margin-bottom: 2rem !important;
        font-size: 1.05rem !important;
        line-height: 1.55;
    }

    .contact-card.card-calendly {
        padding: 1.5rem 1.1rem !important;
        border-radius: 1.65rem !important;
    }

    .contact-card.card-calendly h3 {
        margin-bottom: 1rem !important;
        font-size: clamp(2rem, 8vw, 2.7rem) !important;
        line-height: 1.05;
    }

    .contact-card.card-calendly > p {
        margin-bottom: 1.4rem !important;
        font-size: 1rem !important;
        line-height: 1.6;
    }

    .contact-calendly-container {
        display: none !important;
    }

    .mobile-calendly-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 56px;
        padding: 0.85rem 1rem;
        border-radius: 999px;
        background: #2e5e55;
        color: #fff !important;
        font-weight: 900;
        text-decoration: none;
        box-shadow: 0 14px 30px rgba(46, 94, 85, 0.2);
    }

    .mobile-calendly-note {
        display: block;
        margin: 0.75rem 0 0;
        color: #6b7280;
        font-size: 0.78rem;
        text-align: center;
    }

    /* -----------------------------------------------------
       BOTONES FLOTANTES Y SAFE AREA
       ----------------------------------------------------- */
    .whatsapp-fab {
        width: 56px !important;
        height: 56px !important;
        right: max(0.85rem, env(safe-area-inset-right)) !important;
        bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
        font-size: 27px !important;
        z-index: 999 !important;
    }

    .byte-launcher {
        width: 52px !important;
        height: 52px !important;
        left: max(0.85rem, env(safe-area-inset-left)) !important;
        bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
    }

    .byte-nudge {
        left: 0.85rem !important;
        right: 0.85rem !important;
        bottom: calc(4.9rem + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-height: min(58dvh, 440px);
        overflow-y: auto;
    }

    .byte-modal {
        padding:
            max(0.65rem, env(safe-area-inset-top))
            max(0.65rem, env(safe-area-inset-right))
            max(0.65rem, env(safe-area-inset-bottom))
            max(0.65rem, env(safe-area-inset-left)) !important;
    }

    .byte-modal-card {
        width: 100% !important;
        height: min(94dvh, 760px) !important;
        max-height: min(94dvh, 760px) !important;
        border-radius: 1.25rem !important;
    }

    .byte-panel-left {
        padding: 1rem !important;
    }

    .byte-panel-left h2 {
        font-size: 1.5rem !important;
    }

    .byte-panel-right {
        padding: 1.1rem !important;
    }

    /* -----------------------------------------------------
       CATÁLOGO: ajustes generales móviles sin tocar desktop
       ----------------------------------------------------- */
    body[data-page="catalog"] {
        overflow-x: hidden;
    }

    body[data-page="catalog"] main,
    body[data-page="catalog"] .catalog-container,
    body[data-page="catalog"] .catalog-wrapper {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    body[data-page="catalog"] img {
        max-width: 100%;
        height: auto;
    }

    /* -----------------------------------------------------
       REDUCCIÓN DE MOVIMIENTO
       ----------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Móviles especialmente pequeños */
@media (max-width: 430px) {
    .main-header {
        gap: 0.28rem;
    }

    .logo-text-wrapper img {
        max-width: 36vw;
    }

    .mode-toggle-btn,
    .region-toggle-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.95rem;
    }

    .burger-menu {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .geek-hero-inner {
        padding-inline: 0.85rem !important;
    }

    .geek-hero-title {
        font-size: clamp(2.2rem, 10.5vw, 3.25rem) !important;
    }

    .geek-proof-item {
        padding-inline: 0.2rem !important;
    }

    .geek-proof-item span {
        font-size: 0.58rem !important;
    }

    .mission-growth-chipbar {
        grid-template-columns: 1fr 1fr !important;
    }

    .geek-story-mobile-card,
    #resenas .testimonial-grid-card {
        flex-basis: 88vw !important;
    }
}

/* Teléfonos en horizontal: priorizar altura útil y evitar bloques gigantes */
@media (max-width: 900px) and (orientation: landscape) {
    .geek-hero {
        padding-top: 1.6rem !important;
    }

    .geek-hero-image {
        max-height: 68vh;
        aspect-ratio: 16 / 8;
    }

    .geek-story-mobile {
        padding-top: 2.5rem;
    }

    .geek-story-mobile-card {
        min-height: 440px;
    }

    .geek-story-mobile-card > img {
        height: 160px;
    }

    .byte-modal-card {
        height: 92dvh !important;
        max-height: 92dvh !important;
    }
}

/* Dark mode móvil */
@media (max-width: 768px) {
    body.dark-mode .geek-story-mobile {
        background:
            radial-gradient(circle at 20% 12%, rgba(94, 200, 170, 0.09), transparent 34%),
            linear-gradient(180deg, #111827 0%, #101b1a 52%, #111827 100%);
    }

    body.dark-mode .geek-story-mobile-intro h3,
    body.dark-mode .geek-story-mobile-card-body h4 {
        color: #f8fafc;
    }

    body.dark-mode .geek-story-mobile-intro > p,
    body.dark-mode .geek-story-mobile-card-body p,
    body.dark-mode .geek-story-mobile-swipe {
        color: #cbd5e1;
    }

    body.dark-mode .geek-story-mobile-card {
        background: rgba(31, 41, 55, 0.94);
        border-color: rgba(94, 200, 170, 0.16);
    }

    body.dark-mode .mobile-calendly-note {
        color: #cbd5e1;
    }
}


/* =========================================================
   GEEK V16.18 - MOBILE WARM / EDITORIAL
   Inspiración: jerarquía visual limpia, contenido resumido,
   espacios intencionales y CTA claros. Solo afecta móvil.
   ========================================================= */
@media (max-width: 768px) {
    /* Fondo base más cálido y separadores estrechos entre bloques,
       evitando "pantallas vacías" accidentales. */
    body {
        background: #f5f5f7;
    }

    main {
        background: #f5f5f7;
    }

    .geek-hero,
    .geek-story-mobile,
    #quienes-somos,
    #resenas,
    #contactanos {
        margin: 0 0 8px !important;
    }

    .geek-story-mobile {
        padding-top: 3rem !important;
        padding-bottom: 2.2rem !important;
    }

    .geek-story-mobile-intro {
        margin-bottom: 1.25rem !important;
    }

    .geek-story-mobile-swipe {
        margin-bottom: 0 !important;
    }

    /* Nuestra misión: ocultamos únicamente la experiencia desktop
       en móvil y reemplazamos por un bloque editorial interactivo. */
    #quienes-somos {
        padding: 3rem 0 2.75rem !important;
        background:
            radial-gradient(circle at 85% 8%, rgba(110, 108, 255, 0.08), transparent 30%),
            radial-gradient(circle at 5% 30%, rgba(94, 200, 170, 0.14), transparent 34%),
            #f5f7f8 !important;
        overflow: hidden;
    }

    #quienes-somos > .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #quienes-somos > div > .text-center {
        max-width: 36rem !important;
    }

    #quienes-somos > div > .text-center h2 {
        margin: 0 !important;
        font-size: clamp(2.35rem, 10.5vw, 3.65rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.055em !important;
    }

    #quienes-somos > div > .text-center > p {
        display: none !important;
    }

    #quienes-somos .mission-growth-board {
        display: none !important;
    }

    .mobile-mission-experience {
        display: block;
        max-width: 430px;
        margin: 2rem auto 0;
    }

    .mobile-mission-copy {
        text-align: center;
    }

    .mobile-mission-eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: rgba(46, 94, 85, 0.08);
        color: #2e5e55;
        font-size: 0.68rem;
        font-weight: 900;
        letter-spacing: 0.14em;
    }

    .mobile-mission-copy h3 {
        margin: 1rem auto 0;
        color: #111827;
        font-size: clamp(2rem, 8.8vw, 2.8rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
        font-weight: 900;
        text-wrap: balance;
    }

    .mobile-mission-copy h3 span {
        color: #2e5e55;
    }

    .mobile-mission-copy p {
        max-width: 32rem;
        margin: 1rem auto 0;
        color: #667085;
        font-size: 1rem;
        line-height: 1.6;
    }

    .mobile-mission-visual {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 315px;
        margin: 1.5rem 0 1.15rem;
        border-radius: 2rem;
        overflow: hidden;
        background:
            radial-gradient(circle at center, rgba(94, 200, 170, 0.17) 0 20%, transparent 21%),
            linear-gradient(145deg, #ffffff 0%, #f8fbfa 100%);
        border: 1px solid rgba(46, 94, 85, 0.08);
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
    }

    .mobile-mission-orbit {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(46, 94, 85, 0.10);
    }

    .mobile-mission-orbit.orbit-a {
        width: 230px;
        height: 230px;
    }

    .mobile-mission-orbit.orbit-b {
        width: 300px;
        height: 300px;
        border-style: dashed;
        border-color: rgba(94, 200, 170, 0.16);
    }

    .mobile-mission-core {
        position: relative;
        z-index: 3;
        width: 138px;
        height: 138px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.8rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 15px 40px rgba(46, 94, 85, 0.14);
        text-align: center;
    }

    .mobile-mission-core img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        object-fit: cover;
    }

    .mobile-mission-core small {
        color: #15977f;
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.22em;
    }

    .mobile-mission-core strong {
        color: #111827;
        font-size: 0.85rem;
        line-height: 1.03;
        max-width: 96px;
    }

    .mobile-mission-float {
        position: absolute;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0.4rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #2e5e55;
        border: 1px solid rgba(46, 94, 85, 0.08);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
        font-size: 0.72rem;
        font-weight: 900;
    }

    .float-strategy {
        top: 58px;
        left: 20px;
    }

    .float-management {
        bottom: 48px;
        left: 26px;
    }

    .float-tech {
        top: 66px;
        right: 20px;
    }

    .mobile-mission-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.3rem;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.05);
    }

    .mobile-mission-tabs button {
        min-width: 0;
        min-height: 44px;
        padding: 0.55rem 0.35rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #667085;
        font-size: 0.75rem;
        font-weight: 900;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-mission-tabs button.is-active {
        background: #ffffff;
        color: #2e5e55;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
    }

    .mobile-mission-detail {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 0.85rem;
        align-items: start;
        margin-top: 0.8rem;
        padding: 1.15rem;
        border-radius: 1.5rem;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(46, 94, 85, 0.08);
    }

    .mobile-mission-detail-icon {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(94, 200, 170, 0.13);
        color: #15977f;
        font-size: 1.25rem;
        font-weight: 900;
    }

    .mobile-mission-detail small {
        display: block;
        color: #15977f;
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.09em;
    }

    .mobile-mission-detail h4 {
        margin: 0.3rem 0 0;
        color: #111827;
        font-size: 1.18rem;
        line-height: 1.08;
        letter-spacing: -0.025em;
        font-weight: 900;
    }

    .mobile-mission-detail p {
        margin: 0.55rem 0 0;
        color: #667085;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .mobile-mission-actions {
        display: grid;
        gap: 0.65rem;
        margin-top: 1rem;
    }

    .mobile-mission-actions a {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 900;
    }

    .mobile-mission-primary {
        background: #2e5e55;
        color: #ffffff !important;
    }

    .mobile-mission-secondary {
        background: #ffffff;
        color: #2e5e55 !important;
        border: 1px solid rgba(46, 94, 85, 0.14);
    }

    /* Menos huecos entre misión -> testimonios -> contacto */
    #resenas {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    #contactanos {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Carruseles conservados, pero con bloques visualmente más cerrados */
    #resenas .testimonials-grid {
        margin-top: 2rem !important;
    }

    #resenas .testimonial-grid-card {
        min-height: 500px !important;
    }

    /* El contacto funciona como una "feature card" compacta */
    .contact-card.card-calendly {
        box-shadow: none !important;
        border: 1px solid rgba(46, 94, 85, 0.08);
    }
}

@media (min-width: 769px) {
    .mobile-mission-experience {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .mobile-mission-visual {
        min-height: 290px;
    }

    .mobile-mission-orbit.orbit-a {
        width: 210px;
        height: 210px;
    }

    .mobile-mission-orbit.orbit-b {
        width: 270px;
        height: 270px;
    }

    .mobile-mission-float {
        font-size: 0.66rem;
    }

    .float-strategy {
        left: 12px;
    }

    .float-management {
        left: 14px;
    }

    .float-tech {
        right: 12px;
    }
}

/* Dark mode móvil para el bloque nuevo */
@media (max-width: 768px) {
    body.dark-mode #quienes-somos {
        background:
            radial-gradient(circle at 85% 8%, rgba(110, 108, 255, 0.08), transparent 30%),
            radial-gradient(circle at 5% 30%, rgba(94, 200, 170, 0.08), transparent 34%),
            #111827 !important;
    }

    body.dark-mode .mobile-mission-copy h3,
    body.dark-mode .mobile-mission-detail h4,
    body.dark-mode .mobile-mission-core strong {
        color: #f8fafc;
    }

    body.dark-mode .mobile-mission-copy p,
    body.dark-mode .mobile-mission-detail p {
        color: #cbd5e1;
    }

    body.dark-mode .mobile-mission-visual,
    body.dark-mode .mobile-mission-detail,
    body.dark-mode .mobile-mission-tabs button.is-active,
    body.dark-mode .mobile-mission-secondary {
        background: rgba(31, 41, 55, 0.94);
    }

    body.dark-mode .mobile-mission-float {
        background: rgba(31, 41, 55, 0.96);
        color: #d1fae5;
    }

    body.dark-mode .mobile-mission-tabs {
        background: rgba(255, 255, 255, 0.06);
    }
}


/* =========================================================
   GEEK V16.19 - MOBILE REFINEMENT
   Ajustes solicitados: misión más limpia, 4 nodos y CTAs compactos.
   Solo afecta pantallas móviles.
   ========================================================= */
@media (max-width: 768px) {
    /* ---------------------------------------------
       HERO: botones compactos tipo Apple
       --------------------------------------------- */
    .geek-hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: 100%;
        margin-top: 0.15rem !important;
    }

    .geek-hero-btn {
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0.62rem 1.05rem !important;
        border-radius: 999px !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    /* ---------------------------------------------
       MISIÓN: eliminar capa textual redundante
       --------------------------------------------- */
    .mobile-mission-experience {
        margin-top: 0.85rem !important;
    }

    .mobile-mission-copy {
        margin-top: 0 !important;
    }

    .mobile-mission-eyebrow,
    .mobile-mission-copy h3 {
        display: none !important;
    }

    .mobile-mission-copy p {
        max-width: 32rem !important;
        margin: 0.8rem auto 0 !important;
        padding: 0 0.35rem;
        color: #667085;
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
        text-align: center;
    }

    /* Visual con cuatro nodos alrededor del núcleo Geek */
    .mobile-mission-visual {
        min-height: 315px;
        margin-top: 1.35rem !important;
        margin-bottom: 0.95rem !important;
    }

    .float-strategy {
        top: 54px !important;
        left: 18px !important;
    }

    .float-tech {
        top: 54px !important;
        right: 18px !important;
    }

    .float-management {
        bottom: 48px !important;
        left: 18px !important;
    }

    .float-measurement {
        bottom: 48px;
        right: 18px;
    }

    /* Ya no existe el bloque de tabs/detalle.
       Estas reglas quedan como salvaguarda visual. */
    .mobile-mission-tabs,
    .mobile-mission-detail {
        display: none !important;
    }

    /* CTAs compactos tipo Apple */
    .mobile-mission-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.65rem !important;
        margin-top: 0.85rem !important;
    }

    .mobile-mission-actions a {
        width: auto !important;
        min-height: 42px !important;
        padding: 0.62rem 1.05rem !important;
        border-radius: 999px !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .mobile-mission-primary {
        min-width: 0 !important;
    }

    .mobile-mission-secondary {
        min-width: 0 !important;
    }
}

@media (max-width: 390px) {
    .geek-hero-actions,
    .mobile-mission-actions {
        gap: 0.5rem !important;
    }

    .geek-hero-btn,
    .mobile-mission-actions a {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
        font-size: 0.76rem !important;
    }

    .mobile-mission-float {
        font-size: 0.62rem !important;
        padding-inline: 0.58rem !important;
    }

    .float-strategy,
    .float-management {
        left: 10px !important;
    }

    .float-tech,
    .float-measurement {
        right: 10px !important;
    }
}


/* =========================================================
   GEEK V16.20 - MOBILE HERO + CALENDLY
   Solo afecta pantallas móviles.
   ========================================================= */
@media (max-width: 768px) {
    /* Botones del Hero en una sola fila, estilo compacto */
    .geek-hero-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .geek-hero-actions .geek-hero-btn {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0.62rem 1rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    /* Restaurar Calendly embebido en móvil como en la versión inicial */
    .mobile-calendly-cta,
    .mobile-calendly-note {
        display: none !important;
    }

    .contact-calendly-container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 720px !important;
        min-height: 720px !important;
        overflow: hidden !important;
        border-radius: 1.2rem;
    }

    .contact-calendly-container iframe {
        width: 100% !important;
        min-width: 0 !important;
        height: 720px !important;
        min-height: 720px !important;
    }
}

@media (max-width: 390px) {
    .geek-hero-actions {
        gap: 0.5rem !important;
    }

    .geek-hero-actions .geek-hero-btn {
        padding-left: 0.82rem !important;
        padding-right: 0.82rem !important;
        font-size: 0.74rem !important;
    }

    .contact-calendly-container,
    .contact-calendly-container iframe {
        height: 700px !important;
        min-height: 700px !important;
    }
}


/* =========================================================
   GEEK V16.21 - DARK MODE MOBILE MISSION CORE
   Corrige contraste del nodo central de Geek en modo oscuro.
   Solo afecta la experiencia móvil.
   ========================================================= */
@media (max-width: 768px) {
    body.dark-mode .mobile-mission-core {
        background: rgba(31, 41, 55, 0.98) !important;
        border: 1px solid rgba(94, 200, 170, 0.18) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28) !important;
    }

    body.dark-mode .mobile-mission-core small {
        color: #5ec8aa !important;
    }

    body.dark-mode .mobile-mission-core strong {
        color: #f8fafc !important;
    }

    body.dark-mode .mobile-mission-core img {
        background: #ffffff;
        border-radius: 10px;
    }

    body.dark-mode .mobile-mission-orbit {
        border-color: rgba(94, 200, 170, 0.14) !important;
    }

    body.dark-mode .mobile-mission-orbit.orbit-b {
        border-color: rgba(94, 200, 170, 0.20) !important;
    }
}


/* =========================================================
   GEEK V16.22 - MOBILE HERO IMAGE
   Imagen principal más horizontal y compacta en celulares.
   Solo afecta pantallas móviles.
   ========================================================= */
@media (max-width: 768px) {
    .geek-hero-image-wrap {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 1.45rem !important;
        overflow: hidden !important;
    }

    .geek-hero-image {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center 46% !important;
        border-radius: inherit !important;
    }
}

@media (max-width: 430px) {
    .geek-hero-image-wrap {
        aspect-ratio: 3 / 2 !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .geek-hero-image-wrap {
        aspect-ratio: 16 / 7 !important;
    }

    .geek-hero-image {
        max-height: none !important;
    }
}


/* =========================================================
   GEEK V16.23 - MOBILE HERO IMAGE FLOW FIX
   Muestra la fotografía completa y la devuelve al flujo normal
   del documento para eliminar el espacio vacío superior.
   Solo afecta pantallas móviles.
   ========================================================= */
@media (max-width: 768px) {
    .geek-hero-image-wrap {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;

        display: block !important;
        position: relative !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 1.45rem !important;
        overflow: hidden !important;
        line-height: 0 !important;
    }

    .geek-hero-image {
        display: block !important;
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;

        transform: none !important;
        border-radius: inherit !important;
    }
}


/* ===== ORIGINAL page-navigation.css ===== */

/* =========================================================
   GEEK V19.4 — INTERCAMBIO COMPLETO A 55 %
   - La barra de progreso permanece fija arriba.
   - Al alcanzar el 55 %, la cabecera completa baja.
   - Las burbujas Geek y WhatsApp suben simultáneamente.
   - Cada burbuja conserva su esquina y solo cambia en el eje Y.
   - El intercambio funciona en escritorio, tablet y móvil.
   ========================================================= */

:root {
    --geek-anchor-offset: calc(var(--header-height, 80px) + 28px);
}

.geek-page-progress {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 3px;
    z-index: 11000;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    opacity: 1;
    transform: translateZ(0);
}

.geek-page-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-teal, #2e5e55);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.main-header {
    top: var(--geek-nav-top, 0px) !important;
    left: var(--geek-nav-inset, 0px) !important;
    right: var(--geek-nav-inset, 0px) !important;
    width: auto !important;
    border: 1px solid transparent;
    border-radius: var(--geek-nav-radius, 0px) !important;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition:
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease;
}

body.is-page-nav-ready .main-header {
    transition:
        transform .88s cubic-bezier(.22, 1, .36, 1),
        left .72s cubic-bezier(.22, 1, .36, 1),
        right .72s cubic-bezier(.22, 1, .36, 1),
        border-radius .72s cubic-bezier(.22, 1, .36, 1),
        padding-left .72s cubic-bezier(.22, 1, .36, 1),
        padding-right .72s cubic-bezier(.22, 1, .36, 1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease;
}

body.is-nav-swapped .main-header {
    transform: translate3d(0, var(--geek-nav-swap-y, 0px), 0);
}

@media (min-width: 769px) {
    .main-header {
        padding-left: var(--geek-nav-padding, 40px) !important;
        padding-right: var(--geek-nav-padding, 40px) !important;
    }
}

.main-header.is-floating {
    background-color: rgba(255, 255, 255, .78) !important;
    border-color: rgba(46, 94, 85, .14);
    box-shadow:
        0 16px 38px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: blur(12px) saturate(128%);
    backdrop-filter: blur(12px) saturate(128%);
}

.main-header.is-post-story {
    background-color: rgba(255, 255, 255, .84) !important;
    border-color: rgba(46, 94, 85, .17);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, .15),
        inset 0 1px 0 rgba(255, 255, 255, .84) !important;
}

body.dark-mode .main-header.is-floating,
body.dark-mode .main-header.is-post-story {
    background-color: rgba(22, 28, 26, .82) !important;
    border-color: rgba(94, 200, 170, .17);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* ---------------------------------------------------------
   BURBUJAS FLOTANTES
   Mantienen izquierda/derecha y solo cambian en el eje Y.
   --------------------------------------------------------- */
.byte-launcher {
    --geek-byte-shift-y: 0px;
    --geek-byte-hover-y: 0px;
    z-index: 1005 !important;
    transform: translate3d(
        0,
        calc(var(--geek-byte-shift-y) + var(--geek-byte-hover-y)),
        0
    ) !important;
    will-change: transform;
    transition:
        box-shadow .28s ease,
        opacity .2s ease !important;
}

.whatsapp-fab {
    --geek-whatsapp-shift-y: 0px;
    --geek-whatsapp-hover-scale: 1;
    z-index: 1005 !important;
    transform: translate3d(0, var(--geek-whatsapp-shift-y), 0)
        scale(var(--geek-whatsapp-hover-scale)) !important;
    transform-origin: center;
    will-change: transform;
    transition:
        background-color .3s ease,
        box-shadow .28s ease !important;
}

body.is-page-nav-ready .byte-launcher,
body.is-page-nav-ready .whatsapp-fab {
    transition:
        transform .88s cubic-bezier(.22, 1, .36, 1),
        background-color .3s ease,
        box-shadow .28s ease,
        opacity .2s ease !important;
}

.byte-launcher:hover {
    --geek-byte-hover-y: -3px;
}

.whatsapp-fab:hover {
    --geek-whatsapp-hover-scale: 1.05;
}

body.is-nav-swapped .byte-launcher {
    box-shadow:
        0 18px 46px rgba(46, 94, 85, .30),
        0 0 0 1px rgba(255, 255, 255, .36);
}

body.is-nav-swapped .whatsapp-fab {
    box-shadow:
        0 16px 38px rgba(37, 211, 102, .30),
        0 0 0 1px rgba(255, 255, 255, .30);
}

body.is-nav-swapped .byte-nudge {
    opacity: 0 !important;
    pointer-events: none !important;
}

html {
    scroll-padding-top: var(--geek-anchor-offset);
}

#inicio,
#quienes-somos,
#servicios,
#resenas,
#contactanos,
#catalogo-ecommerce {
    scroll-margin-top: var(--geek-anchor-offset);
}

@media (max-width: 1100px) and (min-width: 769px) {
    .main-header.is-floating,
    .main-header.is-post-story {
        -webkit-backdrop-filter: blur(10px) saturate(122%);
        backdrop-filter: blur(10px) saturate(122%);
    }
}

@media (max-width: 768px) {
    .geek-page-progress {
        height: 2px;
    }

    .main-header.is-floating,
    .main-header.is-post-story {
        background-color: rgba(255, 255, 255, .90) !important;
        border-color: rgba(46, 94, 85, .13);
        box-shadow:
            0 12px 28px rgba(15, 23, 42, .13),
            inset 0 1px 0 rgba(255, 255, 255, .82) !important;
        -webkit-backdrop-filter: blur(9px) saturate(122%);
        backdrop-filter: blur(9px) saturate(122%);
    }

    body.dark-mode .main-header.is-floating,
    body.dark-mode .main-header.is-post-story {
        background-color: rgba(22, 28, 26, .90) !important;
        border-color: rgba(94, 200, 170, .15);
    }

    .main-header.is-floating .main-nav,
    .main-header.is-post-story .main-nav {
        left: 0 !important;
        width: 100% !important;
        border: 1px solid rgba(46, 94, 85, .12);
        border-radius: 1rem;
        overflow: hidden;
        background-color: rgba(255, 255, 255, .96);
        box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    }

    /* Cuando la cabecera está abajo, el menú móvil se abre hacia arriba. */
    body.is-nav-swapped .main-header .main-nav {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        transform-origin: bottom center;
    }

    body:not(.is-nav-swapped) .main-header.is-floating .main-nav {
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        transform-origin: top center;
    }

    body.dark-mode .main-header.is-floating .main-nav,
    body.dark-mode .main-header.is-post-story .main-nav {
        background-color: rgba(31, 31, 31, .97);
        border-color: rgba(94, 200, 170, .14);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-header,
    .geek-page-progress-bar,
    .byte-launcher,
    .whatsapp-fab {
        transition: none !important;
    }
}

/* =========================================================
   V19.9.2 — TECLADO VIRTUAL EN MÓVIL
   Cuando un campo de texto abre el teclado, la cabecera flotante
   y las burbujas salen del área visible para no cubrir el formulario.
   ========================================================= */
@media (max-width: 768px) {
    html.is-mobile-keyboard-open .main-header,
    body.is-mobile-keyboard-open .main-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 120vh, 0) !important;
        transition:
            opacity .12s ease,
            visibility 0s linear .12s !important;
    }

    html.is-mobile-keyboard-open .byte-launcher,
    body.is-mobile-keyboard-open .byte-launcher,
    html.is-mobile-keyboard-open .whatsapp-fab,
    body.is-mobile-keyboard-open .whatsapp-fab {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 120vh, 0) !important;
        transition:
            opacity .1s ease,
            visibility 0s linear .1s !important;
    }

    html.is-mobile-keyboard-open .byte-nudge,
    body.is-mobile-keyboard-open .byte-nudge {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* ===== ORIGINAL desktop-preloader.css ===== */

/* =========================================================
   GEEK V19.6 — PRECARGA COMPLETA SOLO EN ESCRITORIO
   ========================================================= */

html.geek-desktop-preload,
html.geek-desktop-preload body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

#splash {
    transition: opacity .62s cubic-bezier(.22, .72, .18, 1),
                visibility .62s step-end;
}

html.geek-desktop-preload #splash {
    z-index: 12050;
    display: grid;
    place-items: center;
    padding: 2rem;
    isolation: isolate;
}

html.geek-desktop-preload #splash::before,
html.geek-desktop-preload #splash::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
}

html.geek-desktop-preload #splash::before {
    width: min(46vw, 680px);
    height: min(46vw, 680px);
    left: -14vw;
    top: -20vw;
    background: radial-gradient(circle, rgba(94, 200, 170, .20), transparent 68%);
}

html.geek-desktop-preload #splash::after {
    width: min(52vw, 760px);
    height: min(52vw, 760px);
    right: -18vw;
    bottom: -24vw;
    background: radial-gradient(circle, rgba(46, 94, 85, .14), transparent 70%);
}

.geek-preloader-shell {
    width: min(520px, calc(100vw - 48px));
    display: grid;
    justify-items: center;
    text-align: center;
}

html.geek-desktop-preload #splash-logo {
    width: clamp(150px, 15vw, 230px);
    margin-bottom: 2.2rem;
    animation: geekLoaderLogoIn .72s cubic-bezier(.16, 1, .3, 1) both;
}

.geek-preloader-desktop-copy {
    display: none;
}

html.geek-desktop-preload .geek-preloader-desktop-copy {
    width: 100%;
    display: grid;
    justify-items: center;
    animation: geekLoaderCopyIn .72s .10s cubic-bezier(.16, 1, .3, 1) both;
}

.geek-preloader-kicker {
    margin: 0 0 .55rem;
    color: var(--color-teal, #2e5e55);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .22em;
}

.geek-preloader-desktop-copy h2 {
    margin: 0;
    color: #0f172a;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: 800;
}

.geek-preloader-stage {
    min-height: 1.5em;
    margin: .8rem 0 1.35rem;
    color: #667085;
    font-size: .88rem;
}

.geek-preloader-track {
    width: min(360px, 100%);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(46, 94, 85, .10);
}

.geek-preloader-track > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-teal, #2e5e55), var(--color-mint, #5ec8aa));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.geek-preloader-value {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 5.2rem;
    margin-top: 1rem;
    color: #0f172a;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
}

.geek-preloader-value strong {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.06em;
}

.geek-preloader-value span {
    margin: .12rem 0 0 .18rem;
    color: var(--color-teal, #2e5e55);
    font-size: .75rem;
    font-weight: 900;
}

body.dark-mode .geek-preloader-desktop-copy h2,
html.geek-desktop-preload[data-geek-loader-dark="true"] .geek-preloader-desktop-copy h2,
html.geek-desktop-preload[data-geek-loader-dark="true"] .geek-preloader-value {
    color: #f8fafc;
}

body.dark-mode .geek-preloader-stage,
html.geek-desktop-preload[data-geek-loader-dark="true"] .geek-preloader-stage {
    color: #aeb8b4;
}

html.geek-desktop-preload[data-geek-loader-dark="true"] .geek-preloader-track {
    background: rgba(94, 200, 170, .14);
}

#splash.is-complete .geek-preloader-track > span {
    box-shadow: 0 0 18px rgba(94, 200, 170, .26);
}

#splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes geekLoaderLogoIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes geekLoaderCopyIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
    .geek-preloader-desktop-copy {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.geek-desktop-preload #splash-logo,
    html.geek-desktop-preload .geek-preloader-desktop-copy {
        animation: none !important;
    }

    #splash {
        transition-duration: .12s !important;
    }
}


/* ===== LOCAL ICON SUBSET (replaces the original Font Awesome CDN loaded after local CSS) ===== */

i.fas,i.fab{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;font-style:normal;line-height:1}i.fas::before,i.fab::before{content:none!important}
i.fa-arrow-left{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.2%20288%20416%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-306.7%200L214.6%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.2%20288%20416%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-306.7%200L214.6%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22/%3E%3C/svg%3E")}
i.fa-broadcast-tower{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M80.3%2044C69.8%2069.9%2064%2098.2%2064%20128s5.8%2058.1%2016.3%2084c6.6%2016.4-1.3%2035-17.7%2041.7s-35-1.3-41.7-17.7C7.4%20202.6%200%20166.1%200%20128S7.4%2053.4%2020.9%2020C27.6%203.6%2046.2-4.3%2062.6%202.3S86.9%2027.6%2080.3%2044zM555.1%2020C568.6%2053.4%20576%2089.9%20576%20128s-7.4%2074.6-20.9%20108c-6.6%2016.4-25.3%2024.3-41.7%2017.7S489.1%20228.4%20495.7%20212c10.5-25.9%2016.3-54.2%2016.3-84s-5.8-58.1-16.3-84C489.1%2027.6%20497%209%20513.4%202.3s35%201.3%2041.7%2017.7zM352%20128c0%2023.7-12.9%2044.4-32%2055.4L320%20480c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-296.6c-19.1-11.1-32-31.7-32-55.4c0-35.3%2028.7-64%2064-64s64%2028.7%2064%2064zM170.6%2076.8C163.8%2092.4%20160%20109.7%20160%20128s3.8%2035.6%2010.6%2051.2c7.1%2016.2-.3%2035.1-16.5%2042.1s-35.1-.3-42.1-16.5c-10.3-23.6-16-49.6-16-76.8s5.7-53.2%2016-76.8c7.1-16.2%2025.9-23.6%2042.1-16.5s23.6%2025.9%2016.5%2042.1zM464%2051.2c10.3%2023.6%2016%2049.6%2016%2076.8s-5.7%2053.2-16%2076.8c-7.1%2016.2-25.9%2023.6-42.1%2016.5s-23.6-25.9-16.5-42.1c6.8-15.6%2010.6-32.9%2010.6-51.2s-3.8-35.6-10.6-51.2c-7.1-16.2%20.3-35.1%2016.5-42.1s35.1%20.3%2042.1%2016.5z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M80.3%2044C69.8%2069.9%2064%2098.2%2064%20128s5.8%2058.1%2016.3%2084c6.6%2016.4-1.3%2035-17.7%2041.7s-35-1.3-41.7-17.7C7.4%20202.6%200%20166.1%200%20128S7.4%2053.4%2020.9%2020C27.6%203.6%2046.2-4.3%2062.6%202.3S86.9%2027.6%2080.3%2044zM555.1%2020C568.6%2053.4%20576%2089.9%20576%20128s-7.4%2074.6-20.9%20108c-6.6%2016.4-25.3%2024.3-41.7%2017.7S489.1%20228.4%20495.7%20212c10.5-25.9%2016.3-54.2%2016.3-84s-5.8-58.1-16.3-84C489.1%2027.6%20497%209%20513.4%202.3s35%201.3%2041.7%2017.7zM352%20128c0%2023.7-12.9%2044.4-32%2055.4L320%20480c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-296.6c-19.1-11.1-32-31.7-32-55.4c0-35.3%2028.7-64%2064-64s64%2028.7%2064%2064zM170.6%2076.8C163.8%2092.4%20160%20109.7%20160%20128s3.8%2035.6%2010.6%2051.2c7.1%2016.2-.3%2035.1-16.5%2042.1s-35.1-.3-42.1-16.5c-10.3-23.6-16-49.6-16-76.8s5.7-53.2%2016-76.8c7.1-16.2%2025.9-23.6%2042.1-16.5s23.6%2025.9%2016.5%2042.1zM464%2051.2c10.3%2023.6%2016%2049.6%2016%2076.8s-5.7%2053.2-16%2076.8c-7.1%2016.2-25.9%2023.6-42.1%2016.5s-23.6-25.9-16.5-42.1c6.8-15.6%2010.6-32.9%2010.6-51.2s-3.8-35.6-10.6-51.2c-7.1-16.2%20.3-35.1%2016.5-42.1s35.1%20.3%2042.1%2016.5z%22/%3E%3C/svg%3E")}
i.fa-cart-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M0%2024C0%2010.7%2010.7%200%2024%200L69.5%200c22%200%2041.5%2012.8%2050.6%2032l411%200c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3l-288.5%200%205.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5L488%20336c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-288.3%200c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5L24%2048C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96zM252%20160c0%2011%209%2020%2020%2020l44%200%200%2044c0%2011%209%2020%2020%2020s20-9%2020-20l0-44%2044%200c11%200%2020-9%2020-20s-9-20-20-20l-44%200%200-44c0-11-9-20-20-20s-20%209-20%2020l0%2044-44%200c-11%200-20%209-20%2020z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M0%2024C0%2010.7%2010.7%200%2024%200L69.5%200c22%200%2041.5%2012.8%2050.6%2032l411%200c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3l-288.5%200%205.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5L488%20336c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-288.3%200c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5L24%2048C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96zM252%20160c0%2011%209%2020%2020%2020l44%200%200%2044c0%2011%209%2020%2020%2020s20-9%2020-20l0-44%2044%200c11%200%2020-9%2020-20s-9-20-20-20l-44%200%200-44c0-11-9-20-20-20s-20%209-20%2020l0%2044-44%200c-11%200-20%209-20%2020z%22/%3E%3C/svg%3E")}
i.fa-check-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM369%20209L241%20337c-9.4%209.4-24.6%209.4-33.9%200l-64-64c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L335%20175c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM369%20209L241%20337c-9.4%209.4-24.6%209.4-33.9%200l-64-64c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L335%20175c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22/%3E%3C/svg%3E")}
i.fa-envelope{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48L48%2064zM0%20176L0%20384c0%2035.3%2028.7%2064%2064%2064l384%200c35.3%200%2064-28.7%2064-64l0-208L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48L48%2064zM0%20176L0%20384c0%2035.3%2028.7%2064%2064%2064l384%200c35.3%200%2064-28.7%2064-64l0-208L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22/%3E%3C/svg%3E")}
i.fa-facebook-f{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20d=%22M80%20299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7%2020.3-71.5%2072.7-71.5c16.3%200%2029.4%20.4%2037%201.2V7.9C291.4%204%20256.4%200%20236.2%200C129.3%200%2080%2050.5%2080%20159.4v42.1H14v97.8H80z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20d=%22M80%20299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7%2020.3-71.5%2072.7-71.5c16.3%200%2029.4%20.4%2037%201.2V7.9C291.4%204%20256.4%200%20236.2%200C129.3%200%2080%2050.5%2080%20159.4v42.1H14v97.8H80z%22/%3E%3C/svg%3E")}
i.fa-instagram{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22/%3E%3C/svg%3E")}
i.fa-keyboard{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M64%2064C28.7%2064%200%2092.7%200%20128L0%20384c0%2035.3%2028.7%2064%2064%2064l448%200c35.3%200%2064-28.7%2064-64l0-256c0-35.3-28.7-64-64-64L64%2064zm16%2064l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM64%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zm80-176c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM160%20336c0-8.8%207.2-16%2016-16l224%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-224%200c-8.8%200-16-7.2-16-16l0-32zM272%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM256%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zM368%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM352%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zM464%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM448%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M64%2064C28.7%2064%200%2092.7%200%20128L0%20384c0%2035.3%2028.7%2064%2064%2064l448%200c35.3%200%2064-28.7%2064-64l0-256c0-35.3-28.7-64-64-64L64%2064zm16%2064l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM64%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zm80-176c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM160%20336c0-8.8%207.2-16%2016-16l224%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-224%200c-8.8%200-16-7.2-16-16l0-32zM272%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM256%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zM368%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM352%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zM464%20128l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16zM448%20240c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32zm16%2080l32%200c8.8%200%2016%207.2%2016%2016l0%2032c0%208.8-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16l0-32c0-8.8%207.2-16%2016-16z%22/%3E%3C/svg%3E")}
i.fa-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M144%20144l0%2048%20160%200%200-48c0-44.2-35.8-80-80-80s-80%2035.8-80%2080zM80%20192l0-48C80%2064.5%20144.5%200%20224%200s144%2064.5%20144%20144l0%2048%2016%200c35.3%200%2064%2028.7%2064%2064l0%20192c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20256c0-35.3%2028.7-64%2064-64l16%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M144%20144l0%2048%20160%200%200-48c0-44.2-35.8-80-80-80s-80%2035.8-80%2080zM80%20192l0-48C80%2064.5%20144.5%200%20224%200s144%2064.5%20144%20144l0%2048%2016%200c35.3%200%2064%2028.7%2064%2064l0%20192c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20256c0-35.3%2028.7-64%2064-64l16%200z%22/%3E%3C/svg%3E")}
i.fa-microphone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20384%20512%22%3E%3Cpath%20d=%22M192%200C139%200%2096%2043%2096%2096l0%20160c0%2053%2043%2096%2096%2096s96-43%2096-96l0-160c0-53-43-96-96-96zM64%20216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2089.1%2066.2%20162.7%20152%20174.4l0%2033.6-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l72%200%2072%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-33.6c85.8-11.7%20152-85.3%20152-174.4l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2070.7-57.3%20128-128%20128s-128-57.3-128-128l0-40z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20384%20512%22%3E%3Cpath%20d=%22M192%200C139%200%2096%2043%2096%2096l0%20160c0%2053%2043%2096%2096%2096s96-43%2096-96l0-160c0-53-43-96-96-96zM64%20216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2089.1%2066.2%20162.7%20152%20174.4l0%2033.6-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l72%200%2072%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-33.6c85.8-11.7%20152-85.3%20152-174.4l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2070.7-57.3%20128-128%20128s-128-57.3-128-128l0-40z%22/%3E%3C/svg%3E")}
i.fa-microphone-slash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M38.8%205.1C28.4-3.1%2013.3-1.2%205.1%209.2S-1.2%2034.7%209.2%2042.9l592%20464c10.4%208.2%2025.5%206.3%2033.7-4.1s6.3-25.5-4.1-33.7L472.1%20344.7c15.2-26%2023.9-56.3%2023.9-88.7l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2021.2-5.1%2041.1-14.2%2058.7L416%20300.8%20416%2096c0-53-43-96-96-96s-96%2043-96%2096l0%2054.3L38.8%205.1zM344%20430.4c20.4-2.8%2039.7-9.1%2057.3-18.2l-43.1-33.9C346.1%20382%20333.3%20384%20320%20384c-70.7%200-128-57.3-128-128l0-8.7L144.7%20210c-.5%201.9-.7%203.9-.7%206l0%2040c0%2089.1%2066.2%20162.7%20152%20174.4l0%2033.6-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l72%200%2072%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-33.6z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M38.8%205.1C28.4-3.1%2013.3-1.2%205.1%209.2S-1.2%2034.7%209.2%2042.9l592%20464c10.4%208.2%2025.5%206.3%2033.7-4.1s6.3-25.5-4.1-33.7L472.1%20344.7c15.2-26%2023.9-56.3%2023.9-88.7l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2021.2-5.1%2041.1-14.2%2058.7L416%20300.8%20416%2096c0-53-43-96-96-96s-96%2043-96%2096l0%2054.3L38.8%205.1zM344%20430.4c20.4-2.8%2039.7-9.1%2057.3-18.2l-43.1-33.9C346.1%20382%20333.3%20384%20320%20384c-70.7%200-128-57.3-128-128l0-8.7L144.7%20210c-.5%201.9-.7%203.9-.7%206l0%2040c0%2089.1%2066.2%20162.7%20152%20174.4l0%2033.6-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l72%200%2072%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-33.6z%22/%3E%3C/svg%3E")}
i.fa-moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20384%20512%22%3E%3Cpath%20d=%22M223.5%2032C100%2032%200%20132.3%200%20256S100%20480%20223.5%20480c60.6%200%20115.5-24.2%20155.8-63.4c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-9.8%201.7-19.8%202.6-30.1%202.6c-96.9%200-175.5-78.8-175.5-176c0-65.8%2036-123.1%2089.3-153.3c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20384%20512%22%3E%3Cpath%20d=%22M223.5%2032C100%2032%200%20132.3%200%20256S100%20480%20223.5%20480c60.6%200%20115.5-24.2%20155.8-63.4c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-9.8%201.7-19.8%202.6-30.1%202.6c-96.9%200-175.5-78.8-175.5-176c0-65.8%2036-123.1%2089.3-153.3c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z%22/%3E%3C/svg%3E")}
i.fa-phone-slash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M228.9%2024.6c-7.7-18.6-28-28.5-47.4-23.2l-88%2024C76.1%2030.2%2064%2046%2064%2064c0%20107.4%2037.8%20206%20100.8%20283.1L9.2%20469.1c-10.4%208.2-12.3%2023.3-4.1%2033.7s23.3%2012.3%2033.7%204.1l592-464c10.4-8.2%2012.3-23.3%204.1-33.7s-23.3-12.3-33.7-4.1L253%20278c-17.8-21.5-32.9-45.2-45-70.7L257.3%20167c13.7-11.2%2018.4-30%2011.6-46.3l-40-96zm96.8%20319l-91.3%2072C310.7%20476%20407.1%20512%20512%20512c18%200%2033.8-12.1%2038.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3%2011.6L368.7%20368c-15-7.1-29.3-15.2-43-24.3z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M228.9%2024.6c-7.7-18.6-28-28.5-47.4-23.2l-88%2024C76.1%2030.2%2064%2046%2064%2064c0%20107.4%2037.8%20206%20100.8%20283.1L9.2%20469.1c-10.4%208.2-12.3%2023.3-4.1%2033.7s23.3%2012.3%2033.7%204.1l592-464c10.4-8.2%2012.3-23.3%204.1-33.7s-23.3-12.3-33.7-4.1L253%20278c-17.8-21.5-32.9-45.2-45-70.7L257.3%20167c13.7-11.2%2018.4-30%2011.6-46.3l-40-96zm96.8%20319l-91.3%2072C310.7%20476%20407.1%20512%20512%20512c18%200%2033.8-12.1%2038.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3%2011.6L368.7%20368c-15-7.1-29.3-15.2-43-24.3z%22/%3E%3C/svg%3E")}
i.fa-shield-alt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%200c4.6%200%209.2%201%2013.4%202.9L457.7%2082.8c22%209.3%2038.4%2031%2038.3%2057.2c-.5%2099.2-41.3%20280.7-213.6%20363.2c-16.7%208-36.1%208-52.8%200C57.3%20420.7%2016.5%20239.2%2016%20140c-.1-26.2%2016.3-47.9%2038.3-57.2L242.7%202.9C246.8%201%20251.4%200%20256%200zm0%2066.8l0%20378.1C394%20378%20431.1%20230.1%20432%20141.4L256%2066.8s0%200%200%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%200c4.6%200%209.2%201%2013.4%202.9L457.7%2082.8c22%209.3%2038.4%2031%2038.3%2057.2c-.5%2099.2-41.3%20280.7-213.6%20363.2c-16.7%208-36.1%208-52.8%200C57.3%20420.7%2016.5%20239.2%2016%20140c-.1-26.2%2016.3-47.9%2038.3-57.2L242.7%202.9C246.8%201%20251.4%200%20256%200zm0%2066.8l0%20378.1C394%20378%20431.1%20230.1%20432%20141.4L256%2066.8s0%200%200%200z%22/%3E%3C/svg%3E")}
i.fa-shopping-basket{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M253.3%2035.1c6.1-11.8%201.5-26.3-10.2-32.4s-26.3-1.5-32.4%2010.2L117.6%20192%2032%20192c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032L83.9%20463.5C91%20492%20116.6%20512%20146%20512L430%20512c29.4%200%2055-20%2062.1-48.5L544%20256c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-85.6%200L365.3%2012.9C359.2%201.2%20344.7-3.4%20332.9%202.7s-16.3%2020.6-10.2%2032.4L404.3%20192l-232.6%200L253.3%2035.1zM192%20304l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016zm96-16c8.8%200%2016%207.2%2016%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16zm128%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M253.3%2035.1c6.1-11.8%201.5-26.3-10.2-32.4s-26.3-1.5-32.4%2010.2L117.6%20192%2032%20192c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032L83.9%20463.5C91%20492%20116.6%20512%20146%20512L430%20512c29.4%200%2055-20%2062.1-48.5L544%20256c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-85.6%200L365.3%2012.9C359.2%201.2%20344.7-3.4%20332.9%202.7s-16.3%2020.6-10.2%2032.4L404.3%20192l-232.6%200L253.3%2035.1zM192%20304l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016zm96-16c8.8%200%2016%207.2%2016%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16zm128%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016z%22/%3E%3C/svg%3E")}
i.fa-shopping-cart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M0%2024C0%2010.7%2010.7%200%2024%200L69.5%200c22%200%2041.5%2012.8%2050.6%2032l411%200c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3l-288.5%200%205.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5L488%20336c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-288.3%200c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5L24%2048C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20576%20512%22%3E%3Cpath%20d=%22M0%2024C0%2010.7%2010.7%200%2024%200L69.5%200c22%200%2041.5%2012.8%2050.6%2032l411%200c26.3%200%2045.5%2025%2038.6%2050.4l-41%20152.3c-8.5%2031.4-37%2053.3-69.5%2053.3l-288.5%200%205.4%2028.5c2.2%2011.3%2012.1%2019.5%2023.6%2019.5L488%20336c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-288.3%200c-34.6%200-64.3-24.6-70.7-58.5L77.4%2054.5c-.7-3.8-4-6.5-7.9-6.5L24%2048C10.7%2048%200%2037.3%200%2024zM128%20464a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zm336-48a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96z%22/%3E%3C/svg%3E")}
i.fa-sun{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M361.5%201.2c5%202.1%208.6%206.6%209.6%2011.9L391%20121l107.9%2019.8c5.3%201%209.8%204.6%2011.9%209.6s1.5%2010.7-1.6%2015.2L446.9%20256l62.3%2090.3c3.1%204.5%203.7%2010.2%201.6%2015.2s-6.6%208.6-11.9%209.6L391%20391%20371.1%20498.9c-1%205.3-4.6%209.8-9.6%2011.9s-10.7%201.5-15.2-1.6L256%20446.9l-90.3%2062.3c-4.5%203.1-10.2%203.7-15.2%201.6s-8.6-6.6-9.6-11.9L121%20391%2013.1%20371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7%201.6-15.2L65.1%20256%202.8%20165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6%2011.9-9.6L121%20121%20140.9%2013.1c1-5.3%204.6-9.8%209.6-11.9s10.7-1.5%2015.2%201.6L256%2065.1%20346.3%202.8c4.5-3.1%2010.2-3.7%2015.2-1.6zM160%20256a96%2096%200%201%201%20192%200%2096%2096%200%201%201%20-192%200zm224%200a128%20128%200%201%200%20-256%200%20128%20128%200%201%200%20256%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M361.5%201.2c5%202.1%208.6%206.6%209.6%2011.9L391%20121l107.9%2019.8c5.3%201%209.8%204.6%2011.9%209.6s1.5%2010.7-1.6%2015.2L446.9%20256l62.3%2090.3c3.1%204.5%203.7%2010.2%201.6%2015.2s-6.6%208.6-11.9%209.6L391%20391%20371.1%20498.9c-1%205.3-4.6%209.8-9.6%2011.9s-10.7%201.5-15.2-1.6L256%20446.9l-90.3%2062.3c-4.5%203.1-10.2%203.7-15.2%201.6s-8.6-6.6-9.6-11.9L121%20391%2013.1%20371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7%201.6-15.2L65.1%20256%202.8%20165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6%2011.9-9.6L121%20121%20140.9%2013.1c1-5.3%204.6-9.8%209.6-11.9s10.7-1.5%2015.2%201.6L256%2065.1%20346.3%202.8c4.5-3.1%2010.2-3.7%2015.2-1.6zM160%20256a96%2096%200%201%201%20192%200%2096%2096%200%201%201%20-192%200zm224%200a128%20128%200%201%200%20-256%200%20128%20128%200%201%200%20256%200z%22/%3E%3C/svg%3E")}
i.fa-times-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200l47%2047%2047-47c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-47%2047%2047%2047c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-47-47-47%2047c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l47-47-47-47c-9.4-9.4-9.4-24.6%200-33.9z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200l47%2047%2047-47c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-47%2047%2047%2047c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-47-47-47%2047c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l47-47-47-47c-9.4-9.4-9.4-24.6%200-33.9z%22/%3E%3C/svg%3E")}
i.fa-trash-alt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M135.2%2017.7C140.6%206.8%20151.7%200%20163.8%200L284.2%200c12.1%200%2023.2%206.8%2028.6%2017.7L320%2032l96%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l96%200%207.2-14.3zM32%20128l384%200%200%20320c0%2035.3-28.7%2064-64%2064L96%20512c-35.3%200-64-28.7-64-64l0-320zm96%2064c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16zm96%200c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16zm96%200c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M135.2%2017.7C140.6%206.8%20151.7%200%20163.8%200L284.2%200c12.1%200%2023.2%206.8%2028.6%2017.7L320%2032l96%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l96%200%207.2-14.3zM32%20128l384%200%200%20320c0%2035.3-28.7%2064-64%2064L96%20512c-35.3%200-64-28.7-64-64l0-320zm96%2064c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16zm96%200c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16zm96%200c-8.8%200-16%207.2-16%2016l0%20224c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-224c0-8.8-7.2-16-16-16z%22/%3E%3C/svg%3E")}
i.fa-wave-square{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M128%2064c0-17.7%2014.3-32%2032-32l160%200c17.7%200%2032%2014.3%2032%2032l0%20352%2096%200%200-160c0-17.7%2014.3-32%2032-32l128%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-96%200%200%20160c0%2017.7-14.3%2032-32%2032l-160%200c-17.7%200-32-14.3-32-32l0-352-96%200%200%20160c0%2017.7-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32s14.3-32%2032-32l96%200%200-160z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20640%20512%22%3E%3Cpath%20d=%22M128%2064c0-17.7%2014.3-32%2032-32l160%200c17.7%200%2032%2014.3%2032%2032l0%20352%2096%200%200-160c0-17.7%2014.3-32%2032-32l128%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-96%200%200%20160c0%2017.7-14.3%2032-32%2032l-160%200c-17.7%200-32-14.3-32-32l0-352-96%200%200%20160c0%2017.7-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32s14.3-32%2032-32l96%200%200-160z%22/%3E%3C/svg%3E")}
i.fa-whatsapp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M380.9%2097.1C339%2055.1%20283.2%2032%20223.9%2032c-122.4%200-222%2099.6-222%20222%200%2039.1%2010.2%2077.3%2029.6%20111L0%20480l117.7-30.9c32.4%2017.7%2068.9%2027%20106.1%2027h.1c122.3%200%20224.1-99.6%20224.1-222%200-59.3-25.2-115-67.1-157zm-157%20341.6c-33.2%200-65.7-8.9-94-25.7l-6.7-4-69.8%2018.3L72%20359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2%200-101.7%2082.8-184.5%20184.6-184.5%2049.3%200%2095.6%2019.2%20130.4%2054.1%2034.8%2034.9%2056.2%2081.2%2056.1%20130.5%200%20101.8-84.9%20184.6-186.6%20184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5%202.8-3.7%205.6-14.3%2018-17.6%2021.8-3.2%203.7-6.5%204.2-12%201.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8%205.7-9.1%2016.3-30.3%201.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7%200-9.7%201.4-14.8%206.9-5.1%205.6-19.4%2019-19.4%2046.3%200%2027.3%2019.9%2053.7%2022.6%2057.4%202.8%203.7%2039.1%2059.7%2094.8%2083.8%2035.2%2015.2%2049%2016.5%2066.6%2013.9%2010.7-1.6%2032.8-13.4%2037.4-26.4%204.6-13%204.6-24.1%203.2-26.4-1.3-2.5-5-3.9-10.5-6.6z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M380.9%2097.1C339%2055.1%20283.2%2032%20223.9%2032c-122.4%200-222%2099.6-222%20222%200%2039.1%2010.2%2077.3%2029.6%20111L0%20480l117.7-30.9c32.4%2017.7%2068.9%2027%20106.1%2027h.1c122.3%200%20224.1-99.6%20224.1-222%200-59.3-25.2-115-67.1-157zm-157%20341.6c-33.2%200-65.7-8.9-94-25.7l-6.7-4-69.8%2018.3L72%20359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2%200-101.7%2082.8-184.5%20184.6-184.5%2049.3%200%2095.6%2019.2%20130.4%2054.1%2034.8%2034.9%2056.2%2081.2%2056.1%20130.5%200%20101.8-84.9%20184.6-186.6%20184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5%202.8-3.7%205.6-14.3%2018-17.6%2021.8-3.2%203.7-6.5%204.2-12%201.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8%205.7-9.1%2016.3-30.3%201.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7%200-9.7%201.4-14.8%206.9-5.1%205.6-19.4%2019-19.4%2046.3%200%2027.3%2019.9%2053.7%2022.6%2057.4%202.8%203.7%2039.1%2059.7%2094.8%2083.8%2035.2%2015.2%2049%2016.5%2066.6%2013.9%2010.7-1.6%2032.8-13.4%2037.4-26.4%204.6-13%204.6-24.1%203.2-26.4-1.3-2.5-5-3.9-10.5-6.6z%22/%3E%3C/svg%3E")}
/* =========================================================
   V20.2.0 · RESEÑAS PÚBLICAS + CARRUSEL + VERIFICACIÓN
   ========================================================= */
#resenas .reviews-section-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}

#resenas .reviews-open-form {
    appearance: none;
    border: 1px solid rgba(46, 94, 85, 0.18);
    background: linear-gradient(135deg, var(--color-teal, #2e5e55), #3f7e70);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    box-shadow: 0 14px 32px rgba(46, 94, 85, 0.2);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

#resenas .reviews-open-form:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(46, 94, 85, 0.28);
}

#resenas .reviews-open-form:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

#resenas .reviews-carousel {
    position: relative;
    margin-top: 3.5rem;
}

#resenas .testimonials-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1.5rem !important;
    margin-top: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: .35rem .15rem 1rem;
}

#resenas .testimonials-grid::-webkit-scrollbar { display: none; }

#resenas .testimonial-grid-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
    min-height: 405px;
    scroll-snap-align: start;
}

#resenas .reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(46, 94, 85, .14);
    background: rgba(255, 255, 255, .96);
    color: var(--color-teal, #2e5e55);
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(20, 40, 35, .16);
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

#resenas .reviews-carousel-arrow:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 16px 34px rgba(20, 40, 35, .22);
}

#resenas .reviews-carousel-arrow:disabled {
    opacity: .28;
    cursor: default;
}

#resenas .reviews-carousel-prev { left: -58px; }
#resenas .reviews-carousel-next { right: -58px; }

#resenas .reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 18px;
    margin-top: 1rem;
}

#resenas .reviews-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(46, 94, 85, .32);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

#resenas .reviews-dot.is-active {
    width: 26px;
    background: var(--color-teal, #2e5e55);
}

body.dark-mode #resenas .reviews-carousel-arrow {
    background: #2f3433;
    color: #dff5ee;
    border-color: rgba(255,255,255,.08);
}

/* Modal */
body.review-modal-open { overflow: hidden; }

.review-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(17, 24, 39, .72);
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.review-modal.hidden { display: none !important; }

.review-modal-dialog {
    position: relative;
    width: min(880px, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    border-radius: 1.6rem;
    background: #fff;
    border: 1px solid rgba(46, 94, 85, .12);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .3);
    padding: 2rem;
}

.review-modal-close {
    position: sticky;
    float: right;
    top: 0;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f8faf9;
    color: #334155;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.review-modal-head {
    padding-right: 3rem;
    margin-bottom: 1.6rem;
}

.review-modal-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #e9f5f1;
    color: #2e5e55;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.review-modal-head h3 {
    color: #16231f;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    line-height: 1.12;
    font-weight: 900;
    margin-top: .7rem;
}

.review-modal-head p {
    color: #66756f;
    line-height: 1.6;
    margin-top: .45rem;
}

.review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.review-form label,
.review-rating-field {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    color: #40564e;
    font-size: .86rem;
    font-weight: 800;
}

.review-form-full { grid-column: 1 / -1; }

.review-form input[type="text"],
.review-form input[type="email"],
.review-form input[type="tel"],
.review-form input[type="file"],
.review-form textarea,
.review-code-row input {
    width: 100%;
    border: 1px solid #d5e1dd;
    background: #fff;
    color: #1f2937;
    border-radius: .9rem;
    padding: .8rem .9rem;
    outline: none;
    font: inherit;
    font-weight: 500;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.review-form input:focus,
.review-form textarea:focus,
.review-code-row input:focus {
    border-color: #4b8d7d;
    box-shadow: 0 0 0 3px rgba(75, 141, 125, .12);
}

.review-form textarea { resize: vertical; min-height: 128px; }
.review-text-field { position: relative; }
.review-text-field small { align-self: flex-end; color: #7b8b85; font-weight: 600; }

.review-photo-control {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 1rem;
    align-items: center;
    border: 1px dashed #b9cec7;
    border-radius: 1rem;
    background: #f8fbfa;
    padding: .9rem;
}

.review-photo-preview {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid rgba(46, 94, 85, .2);
    background: #e8f2ef;
}

.review-photo-preview.is-empty {
    background: radial-gradient(circle at 50% 35%, #a9c5bc 0 14%, transparent 15%),
                radial-gradient(circle at 50% 86%, #a9c5bc 0 30%, transparent 31%), #e8f2ef;
}

.review-photo-control small {
    display: block;
    color: #718078;
    font-weight: 500;
    line-height: 1.45;
    margin-top: .35rem;
}

.review-stars-input {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.review-star-button {
    border: 0;
    background: transparent;
    color: #d5d8da;
    font-size: 2rem;
    line-height: 1;
    padding: .1rem .12rem;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

.review-star-button:hover { transform: scale(1.08); }
.review-star-button.is-active { color: #fbbc04; }

.review-verification-channel {
    margin-top: 1.2rem;
    border: 1px solid #dce8e4;
    border-radius: 1rem;
    background: #fbfdfc;
    padding: .85rem;
}

.review-verification-channel legend {
    padding: 0 .4rem;
    color: #4a6159;
    font-size: .86rem;
    font-weight: 900;
}

.review-channel-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.review-channel-option {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: .7rem !important;
    min-height: 74px;
    border: 1px solid #d8e4e0;
    border-radius: .9rem;
    background: #fff;
    padding: .75rem;
    cursor: pointer;
}

.review-channel-option:has(input:checked) {
    border-color: #4b8d7d;
    box-shadow: inset 0 0 0 1px #4b8d7d;
    background: #eef8f5;
}

.review-channel-option input { accent-color: #2e6f62; }
.review-channel-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #edf6f3;
    color: #2e6f62;
}

.review-channel-option strong { display: block; color: #38695d; font-size: .9rem; }
.review-channel-option small { display: block; color: #788881; font-size: .72rem; font-weight: 600; line-height: 1.35; margin-top: .15rem; }
.review-contact-grid { margin-top: 1rem; }
.review-form .hidden { display: none !important; }
.review-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.review-verification-panel {
    margin-top: 1rem;
    border: 1px solid #cfe2dc;
    background: #f4faf8;
    border-radius: 1rem;
    padding: 1rem;
    color: #476159;
}

.review-verification-panel strong { color: #2f6659; font-weight: 900; }
.review-verification-panel p { font-size: .84rem; line-height: 1.45; margin-top: .25rem; }

.review-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    margin-top: .8rem;
}

.review-code-row input { letter-spacing: .35em; text-align: center; font-weight: 800; }
.review-code-row button,
.review-secondary-button {
    border: 1px solid #b8d2ca;
    border-radius: .8rem;
    background: #fff;
    color: #356e60;
    font-weight: 800;
    padding: .7rem .9rem;
    cursor: pointer;
}

.review-code-row button:disabled { opacity: .5; cursor: default; }

.review-whatsapp-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .8rem;
    border-radius: .9rem;
    background: #2f7d6d;
    color: #fff;
    font-weight: 900;
    padding: .82rem 1rem;
    text-decoration: none;
}

.review-whatsapp-waiting {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .75rem 0;
    color: #63766f;
    font-size: .82rem;
    font-weight: 700;
}

.review-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #c8dad4;
    border-top-color: #2e6f62;
    animation: reviewSpin .8s linear infinite;
}

.review-whatsapp-waiting.is-verified .review-spinner {
    animation: none;
    border: 0;
    display: grid;
    place-items: center;
}
.review-whatsapp-waiting.is-verified .review-spinner::before { content: '✓'; color: #2e7d63; font-weight: 900; }
@keyframes reviewSpin { to { transform: rotate(360deg); } }

.review-consent {
    flex-direction: row !important;
    align-items: flex-start;
    gap: .65rem !important;
    margin-top: 1rem;
    border-radius: .9rem;
    background: #f7faf9;
    padding: .8rem;
    font-size: .78rem !important;
    line-height: 1.45;
}
.review-consent input { margin-top: .15rem; accent-color: #2e6f62; }

.review-form-status {
    min-height: 1.4rem;
    margin-top: .75rem;
    color: #5d7169;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}
.review-form-status.is-error { color: #b42318; }
.review-form-status.is-success { color: #19704f; }

.review-submit {
    width: 100%;
    margin-top: .45rem;
    border: 0;
    border-radius: 999px;
    background: #39796a;
    color: #fff;
    font: inherit;
    font-weight: 900;
    padding: .9rem 1.25rem;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(46, 111, 98, .2);
}
.review-submit:disabled { opacity: .58; cursor: wait; }

body.dark-mode .review-modal-dialog { background: #252a29; border-color: rgba(255,255,255,.08); }
body.dark-mode .review-modal-head h3 { color: #fff; }
body.dark-mode .review-modal-head p,
body.dark-mode .review-form label,
body.dark-mode .review-rating-field { color: #cbd5d1; }
body.dark-mode .review-form input[type="text"],
body.dark-mode .review-form input[type="email"],
body.dark-mode .review-form input[type="tel"],
body.dark-mode .review-form input[type="file"],
body.dark-mode .review-form textarea,
body.dark-mode .review-code-row input,
body.dark-mode .review-channel-option,
body.dark-mode .review-code-row button,
body.dark-mode .review-secondary-button {
    background: #303635;
    color: #f4f7f6;
    border-color: #47524f;
}
body.dark-mode .review-verification-channel,
body.dark-mode .review-verification-panel,
body.dark-mode .review-consent,
body.dark-mode .review-photo-control { background: #2b302f; border-color: #46524e; }

@media (max-width: 1180px) {
    #resenas .reviews-carousel-prev { left: -18px; }
    #resenas .reviews-carousel-next { right: -18px; }
}

@media (max-width: 1023px) {
    #resenas .testimonial-grid-card { flex-basis: calc((100% - 1.5rem) / 2); }
    #resenas .reviews-carousel-arrow { width: 42px; height: 42px; }
}

@media (max-width: 699px) {
    #resenas .reviews-section-actions { margin-top: 1.25rem; }
    #resenas .reviews-open-form { width: 100%; max-width: 330px; }
    #resenas .reviews-carousel { margin-top: 2.4rem; }
    #resenas .testimonials-grid { gap: 1rem !important; padding-inline: .15rem !important; }
    #resenas .testimonial-grid-card {
        flex-basis: calc(100% - 1.5rem) !important;
        min-height: 470px !important;
        padding: 1.35rem !important;
    }
    #resenas .reviews-carousel-arrow {
        top: auto;
        bottom: -58px;
        transform: none;
        width: 38px;
        height: 38px;
    }
    #resenas .reviews-carousel-arrow:hover:not(:disabled) { transform: scale(1.04); }
    #resenas .reviews-carousel-prev { left: calc(50% - 86px); }
    #resenas .reviews-carousel-next { right: calc(50% - 86px); }
    #resenas .reviews-dots { margin-top: 1.35rem; padding: 0 48px; }

    .review-modal { padding: 0; align-items: flex-end; }
    .review-modal-dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 1.4rem 1.4rem 0 0;
        padding: 1.25rem 1rem 1.5rem;
    }
    .review-form-grid,
    .review-channel-options,
    .review-code-row { grid-template-columns: 1fr; }
    .review-photo-control { grid-template-columns: 62px 1fr; }
    .review-photo-preview { width: 62px; height: 62px; }
    .review-channel-option { grid-template-columns: auto auto 1fr; }
    .review-star-button { font-size: 2.15rem; }
}