:root {
            --otica-gia-bg: #F5F0EB;
            --otica-gia-gold: #C4A35A;
            --otica-gia-gold-light: #D4B36A;
            --otica-gia-green: #2D6B4F;
            --otica-gia-green-hover: #245a42;
            --otica-gia-text: #1A1A1A;
            --otica-gia-text-light: #555555;
            --otica-gia-white: #FFFFFF;
            --otica-gia-border: #E5E0D8;
            --otica-gia-overlay: rgba(0, 0, 0, 0.45);
            --otica-gia-drawer-width: 380px;
            --otica-gia-search-width: 460px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--otica-gia-bg);
            color: var(--otica-gia-text);
            overflow-x: hidden;
        }

        body.otica-gia-drawer-open {
            overflow: hidden;
        }

        /* ============================================
           OVERRIDE ELEMENTOR
        ============================================ */
         /* OVERRIDE DO ELEMENTOR */
        .e-con>.e-con-inner{
            max-width: 100% !important;
        }
        .e-con-full, .e-con>.e-con-inner{
            padding-block-start: 0 !important;
        }

        .e-con.e-flex>.e-con-inner{
            position: relative !important;
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        .e-con-boxed.e-flex{
            margin: 0 !important;
            padding: 0 !important;
        }

        .elementor hr {
                background-color: transparent;
                margin: unset;
                margin-top: 1rem !important;
                margin-bottom: 1rem !important;
        }
        .e-con{
            padding-inline-end: 0 !important;
            padding-inline-start: 0 !important;
            --padding-block-end: 0 !important;
            padding-block-end: 0 !important;
        }
        /* OVERRIDE DO ELEMENTOR */


        /* ============================================
           HEADER
        ============================================ */
        .otica-gia-header {
            width: 100%;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 100;
        }

        .otica-gia-header-left,
        .otica-gia-header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .otica-gia-menu-trigger {
            width: 44px;
            height: 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s ease;
            position: relative;
        }

        .otica-gia-menu-trigger:hover {
            background: rgba(0,0,0,0.04);
        }

        .otica-gia-menu-trigger span {
            display: block;
            width: 22px;
            height: 2px;
            background-color: var(--otica-gia-text);
            border-radius: 1px;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        .otica-gia-menu-trigger[aria-expanded="true"] span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .otica-gia-menu-trigger[aria-expanded="true"] span:nth-child(2) {
            opacity: 0;
        }

        .otica-gia-menu-trigger[aria-expanded="true"] span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .otica-gia-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .otica-gia-search-trigger {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s ease;
            color: var(--otica-gia-text);
        }

        .otica-gia-search-trigger:hover {
            background: rgba(0,0,0,0.04);
        }

        .otica-gia-search-trigger svg {
            width: 22px;
            height: 22px;
            stroke-width: 2;
        }

        .otica-gia-btn-comprar {
            padding: 10px 24px;
            border: 1px solid var(--otica-gia-text);
            border-radius: 24px;
            background: transparent;
            color: var(--otica-gia-text);
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .otica-gia-btn-comprar:hover {
            background: var(--otica-gia-text);
            color: var(--otica-gia-white);
        }

        /* ============================================
           OVERLAY GERAL
        ============================================ */
        .otica-gia-overlay {
            position: fixed;
            inset: 0;
            background: var(--otica-gia-overlay);
            backdrop-filter: blur(2px);
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .otica-gia-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* ============================================
           SIDEMENU ESQUERDO
        ============================================ */
        .otica-gia-sidemenu {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: var(--otica-gia-drawer-width);
            background: var(--otica-gia-white);
            z-index: 999;
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            flex-direction: column;
            box-shadow: 4px 0 24px rgba(0,0,0,0.08);
        }

        .otica-gia-sidemenu.active {
            transform: translateX(0);
        }

        .otica-gia-sidemenu-close {
            position: absolute;
            top: 16px;
            left: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--otica-gia-text);
            z-index: 10;
            border-radius: 50%;
            transition: background 0.2s ease;
        }

        .otica-gia-sidemenu-close:hover {
            background: rgba(0,0,0,0.05);
        }

        .otica-gia-sidemenu-close svg {
            width: 20px;
            height: 20px;
        }

        .otica-gia-sidemenu-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 72px 32px 32px;
            position: relative;
        }

        .otica-gia-sidemenu-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .otica-gia-sidemenu-item {
            position: relative;
        }

        .otica-gia-sidemenu-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            text-decoration: none;
            color: var(--otica-gia-text);
            font-size: 16px;
            font-weight: 600;
            font-family: 'Montserrat', sans-serif;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease;
            cursor: pointer;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
        }

        .otica-gia-sidemenu-link:hover {
            color: var(--otica-gia-gold);
        }

        .otica-gia-sidemenu-link-text {
            position: relative;
        }

        .otica-gia-sidemenu-link-text::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--otica-gia-gold);
            transition: width 0.3s ease;
        }

        .otica-gia-sidemenu-link:hover .otica-gia-sidemenu-link-text::after {
            width: 100%;
        }

        .otica-gia-sidemenu-arrow {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--otica-gia-text-light);
            transition: transform 0.2s ease, color 0.2s ease;
            opacity: 0.5;
        }

        .otica-gia-sidemenu-link:hover .otica-gia-sidemenu-arrow {
            transform: translateX(3px);
            color: var(--otica-gia-gold);
            opacity: 1;
        }

        .otica-gia-sidemenu-footer {
            padding: 24px 32px;
            border-top: 1px solid var(--otica-gia-border);
            display: flex;
            gap: 16px;
        }

        .otica-gia-sidemenu-social {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid var(--otica-gia-border);
            color: var(--otica-gia-text);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .otica-gia-sidemenu-social:hover {
            border-color: var(--otica-gia-gold);
            color: var(--otica-gia-gold);
            transform: translateY(-2px);
        }

        .otica-gia-sidemenu-social img{
            width: 18px;
            height: 18px;
        }

        /* Submenu */
        .otica-gia-sidemenu-submenu {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--otica-gia-white);
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 5;
            display: flex;
            flex-direction: column;
        }

        .otica-gia-sidemenu-submenu.active {
            transform: translateX(0);
        }

        .otica-gia-sidemenu-submenu-header {
            padding: 72px 32px 16px;
            border-bottom: 1px solid var(--otica-gia-border);
        }

        .otica-gia-sidemenu-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--otica-gia-text-light);
            cursor: pointer;
            padding: 4px 0;
            transition: color 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .otica-gia-sidemenu-back:hover {
            color: var(--otica-gia-gold);
        }

        .otica-gia-sidemenu-back svg {
            width: 16px;
            height: 16px;
        }

        .otica-gia-sidemenu-submenu-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--otica-gia-text-light);
            margin-top: 12px;
            opacity: 0.7;
        }

        .otica-gia-sidemenu-submenu-list {
            list-style: none;
            padding: 16px 32px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .otica-gia-sidemenu-submenu-link {
            display: block;
            padding: 12px 0;
            text-decoration: none;
            color: var(--otica-gia-text);
            font-size: 15px;
            font-weight: 600;
            font-family: 'Montserrat', sans-serif;
            transition: color 0.2s ease, padding-left 0.2s ease;
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }

        .otica-gia-sidemenu-submenu-link:hover {
            color: var(--otica-gia-gold);
            padding-left: 4px;
        }

        /* ============================================
           SIDEBAR BUSCA DIREITA
        ============================================ */
        .otica-gia-searchbar {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: var(--otica-gia-search-width);
            background: var(--otica-gia-white);
            z-index: 999;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            flex-direction: column;
            box-shadow: -4px 0 24px rgba(0,0,0,0.08);
        }

        .otica-gia-searchbar.active {
            transform: translateX(0);
        }

        .otica-gia-searchbar-header {
            padding: 24px 32px 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            border-bottom: 1px solid var(--otica-gia-border);
        }

        .otica-gia-searchbar-input-wrap {
            flex: 1;
            position: relative;
        }

        .otica-gia-searchbar-input {
            width: 100%;
            border: none;
            border-bottom: 1.5px solid var(--otica-gia-text);
            padding: 12px 0;
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: var(--otica-gia-text);
            outline: none;
            background: transparent;
            transition: border-color 0.2s ease;
        }

        .otica-gia-searchbar-input::placeholder {
            color: var(--otica-gia-text-light);
            font-weight: 400;
        }

        .otica-gia-searchbar-input:focus {
            border-color: var(--otica-gia-gold);
        }

        .otica-gia-searchbar-clear {
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--otica-gia-text-light);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 8px;
            text-transform: uppercase;
            transition: color 0.2s ease;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease, color 0.2s ease;
        }

        .otica-gia-searchbar-clear.visible {
            opacity: 1;
            visibility: visible;
        }

        .otica-gia-searchbar-clear:hover {
            color: var(--otica-gia-text);
        }

        .otica-gia-searchbar-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--otica-gia-text);
            border-radius: 50%;
            transition: background 0.2s ease;
            flex-shrink: 0;
        }

        .otica-gia-searchbar-close:hover {
            background: rgba(0,0,0,0.05);
        }

        .otica-gia-searchbar-close svg {
            width: 20px;
            height: 20px;
        }

        .otica-gia-searchbar-body {
            flex: 1;
            overflow-y: auto;
            padding: 0 32px 32px;
        }

        .otica-gia-searchbar-tabs {
            display: flex;
            gap: 24px;
            padding: 20px 0 16px;
            border-bottom: 1px solid var(--otica-gia-border);
            margin-bottom: 8px;
            position: sticky;
            top: 0;
            background: var(--otica-gia-white);
            z-index: 2;
        }

        .otica-gia-searchbar-tab {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--otica-gia-text-light);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 0;
            position: relative;
            transition: color 0.2s ease;
            text-transform: none;
        }

        .otica-gia-searchbar-tab:hover {
            color: var(--otica-gia-text);
        }

        .otica-gia-searchbar-tab.active {
            color: var(--otica-gia-text);
        }

        .otica-gia-searchbar-tab.active::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--otica-gia-text);
        }

        /* Skeleton Loading */
        .otica-gia-searchbar-skeleton {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-top: 8px;
        }

        .otica-gia-skeleton-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .otica-gia-skeleton-img {
            width: 64px;
            height: 64px;
            background: #f0ece6;
            border-radius: 8px;
            flex-shrink: 0;
            animation: otica-gia-skeleton-pulse 1.5s ease-in-out infinite;
        }

        .otica-gia-skeleton-lines {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 8px;
        }

        .otica-gia-skeleton-line {
            height: 10px;
            background: #f0ece6;
            border-radius: 4px;
            animation: otica-gia-skeleton-pulse 1.5s ease-in-out infinite;
        }

        .otica-gia-skeleton-line.short {
            width: 60%;
        }

        .otica-gia-skeleton-line.medium {
            width: 85%;
        }

        @keyframes otica-gia-skeleton-pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* Resultados */
        .otica-gia-searchbar-results {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-top: 8px;
        }

        .otica-gia-searchbar-result {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px;
            border-radius: 12px;
            text-decoration: none;
            transition: background 0.2s ease;
            cursor: pointer;
        }

        .otica-gia-searchbar-result:hover {
            background: #faf8f5;
        }

        .otica-gia-searchbar-result-img {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            object-fit: cover;
            background: #f0ece6;
            flex-shrink: 0;
        }

        .otica-gia-searchbar-result-info {
            flex: 1;
            min-width: 0;
        }

        .otica-gia-searchbar-result-name {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--otica-gia-text);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .otica-gia-searchbar-result-price {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            color: var(--otica-gia-text-light);
        }

        .otica-gia-searchbar-result-price .old {
            text-decoration: line-through;
            margin-right: 6px;
            opacity: 0.7;
        }

        .otica-gia-searchbar-result-count {
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            color: var(--otica-gia-text-light);
            margin-top: 2px;
        }

        .otica-gia-searchbar-empty {
            text-align: center;
            padding: 48px 16px;
            color: var(--otica-gia-text-light);
            font-size: 14px;
        }

        .otica-gia-searchbar-section-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--otica-gia-text-light);
            padding: 16px 0 8px;
            opacity: 0.7;
        }
           
        



        /* ============================================
   HEADER V2 — MENU HORIZONTAL CENTRAL
   ============================================ */

.otica-gia-header-v2 {
    width: 100%;
    position: relative;
    z-index: 100;
    background: transparent;
}

.otica-gia-header-v2-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* Logo */
.otica-gia-header-v2-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.otica-gia-header-v2-logo img {
    display: block;
    width: 160px;
    height: auto;
}

/* Desktop Nav */
.otica-gia-header-v2-desktop-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.otica-gia-header-v2-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.otica-gia-header-v2-menu-item {
    position: relative;
}

.otica-gia-header-v2-menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--otica-gia-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 8px;
    transition: color 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}

.otica-gia-header-v2-menu-link:hover {
    color: var(--otica-gia-gold);
    background: rgba(196, 163, 90, 0.06);
}

.otica-gia-header-v2-arrow {
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.otica-gia-header-v2-has-dropdown:hover .otica-gia-header-v2-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Dropdown Desktop */
.otica-gia-header-v2-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--otica-gia-white);
    border-radius: 14px;
    padding: 12px;
    min-width: 220px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 101;
    border: 1px solid var(--otica-gia-border);
}

/* Ponte invisível: cobre o gap de 8px entre o item do menu e o dropdown,
   para o :hover não ser perdido ao mover o mouse (dropdown não fecha mais) */
.otica-gia-header-v2-dropdown::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.otica-gia-header-v2-has-dropdown:hover .otica-gia-header-v2-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    /* Pequena tolerância ao sair: não fecha instantaneamente se o mouse
       "escapar" por alguns milissegundos */
    transition-delay: 0s, 0s, 0s;
}

.otica-gia-header-v2-dropdown {
    transition-delay: 0s, 0s, 0.15s; /* atraso só na saída (visibility) */
}

.otica-gia-header-v2-dropdown-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otica-gia-header-v2-dropdown-link {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--otica-gia-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
}

.otica-gia-header-v2-dropdown-link:hover {
    color: var(--otica-gia-gold);
    background: rgba(196, 163, 90, 0.06);
    padding-left: 18px;
}

/* Ações Direita */
.otica-gia-header-v2-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.otica-gia-header-v2-search-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s ease;
    color: var(--otica-gia-text);
}

.otica-gia-header-v2-search-btn:hover {
    background: rgba(0,0,0,0.04);
}

.otica-gia-header-v2-search-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.otica-gia-header-v2-whatsapp-btn {
    padding: 10px 24px;
    border: 1px solid var(--otica-gia-text);
    border-radius: 24px;
    background: transparent;
    color: var(--otica-gia-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.otica-gia-header-v2-whatsapp-btn:hover {
    background: var(--otica-gia-text);
    color: var(--otica-gia-white);
}

/* Mobile Toggle */
.otica-gia-header-v2-mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.otica-gia-header-v2-mobile-toggle:hover {
    background: rgba(0,0,0,0.04);
}

.otica-gia-header-v2-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--otica-gia-text);
    border-radius: 1px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.otica-gia-header-v2-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.otica-gia-header-v2-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.otica-gia-header-v2-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay V2 */
.otica-gia-header-v2-overlay {
    position: fixed;
    inset: 0;
    background: var(--otica-gia-overlay);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.otica-gia-header-v2-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Nav Drawer */
.otica-gia-header-v2-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 380px;
    background: var(--otica-gia-white);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
    overflow-y: auto;
}

.otica-gia-header-v2-mobile-nav.active {
    transform: translateX(0);
}

.otica-gia-header-v2-mobile-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--otica-gia-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.otica-gia-header-v2-mobile-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--otica-gia-text-light);
}

.otica-gia-header-v2-mobile-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--otica-gia-text);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.otica-gia-header-v2-mobile-close:hover {
    background: rgba(0,0,0,0.05);
}

.otica-gia-header-v2-mobile-close svg {
    width: 20px;
    height: 20px;
}

.otica-gia-header-v2-mobile-list {
    list-style: none;
    padding: 16px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otica-gia-header-v2-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    text-decoration: none;
    color: var(--otica-gia-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.otica-gia-header-v2-mobile-link:hover {
    color: var(--otica-gia-gold);
}

.otica-gia-header-v2-mobile-link svg {
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.otica-gia-header-v2-mobile-link:hover svg {
    opacity: 1;
    transform: translateX(3px);
}

/* Submenu Mobile */
.otica-gia-header-v2-mobile-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otica-gia-header-v2-mobile-submenu.open {
    max-height: 300px;
    padding-top: 4px;
    padding-bottom: 8px;
}

.otica-gia-header-v2-mobile-sublink {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: var(--otica-gia-text-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.otica-gia-header-v2-mobile-sublink:hover {
    color: var(--otica-gia-gold);
    padding-left: 4px;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-header-v2-container {
        padding: 16px 24px;
    }

    .otica-gia-header-v2-desktop-nav {
        display: none;
    }

    .otica-gia-header-v2-mobile-toggle {
        display: flex;
    }

    .otica-gia-header-v2-whatsapp-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .otica-gia-header-v2-container {
        padding: 14px 16px;
        gap: 16px;
    }

    .otica-gia-header-v2-logo img {
        width: 130px;
    }
}




        /* ============================================
           HERO SECTION (EXISTENTE)
        ============================================ */
        .otica-gia-hero {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 48px 80px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
        }

        .otica-gia-hero-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding-top: 20px;
        }

        .otica-gia-hero-tag {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 600;
            color: var(--otica-gia-gold);
            text-transform: uppercase;
        }

        .otica-gia-hero-tag::before {
            content: '';
            display: block;
            width: 32px;
            height: 1px;
            background-color: var(--otica-gia-gold);
        }

        .otica-gia-hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 56px;
            line-height: 1.1;
            font-weight: 400;
            color: var(--otica-gia-text);
            margin-top: 8px;
        }

        .otica-gia-hero-title-accent {
            color: var(--otica-gia-gold);
            font-style: italic;
        }

        .otica-gia-hero-subtitle {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            font-style: italic;
            font-weight: 400;
            color: var(--otica-gia-text);
            line-height: 1.5;
            max-width: 90%;
        }

        .otica-gia-hero-divider {
            width: 48px;
            height: 2px;
            background-color: var(--otica-gia-gold);
            margin: 8px 0;
        }

        .otica-gia-hero-text {
            font-size: 15px;
            line-height: 1.7;
            color: var(--otica-gia-text-light);
            max-width: 90%;
            font-weight: 400;
        }

        .otica-gia-hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background-color: var(--otica-gia-green);
            color: var(--otica-gia-white);
            padding: 18px 36px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            margin-top: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Montserrat', sans-serif;
            box-shadow: 0 4px 20px rgba(45, 107, 79, 0.3);
        }

        .otica-gia-hero-btn:hover {
            background-color: var(--otica-gia-green-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(45, 107, 79, 0.4);
        }

        .otica-gia-hero-btn-arrow {
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .otica-gia-hero-btn:hover .otica-gia-hero-btn-arrow {
            transform: translateX(4px);
        }

        .otica-gia-hero-features {
            display: flex;
            gap: 28px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .otica-gia-hero-feature {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--otica-gia-text-light);
            font-weight: 500;
        }

        .otica-gia-hero-feature-dot {
            width: 8px;
            height: 8px;
            background-color: var(--otica-gia-gold);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .otica-gia-hero-image-wrapper {
            position: relative;
            width: 100%;
            max-width: 540px;
            justify-self: end;
        }

        .otica-gia-hero-image {
            width: 100%;
            height: 620px;
            object-fit: cover;
            border-radius: 24px;
            display: block;
            position: relative;
            z-index: 2;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .otica-gia-hero-image-decor {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            border: 1px solid rgba(196, 163, 90, 0.3);
            border-radius: 50%;
            z-index: 3;
        }

        .otica-gia-hero-image-decor::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border: 1px solid rgba(196, 163, 90, 0.2);
            border-radius: 50%;
        }

        .otica-gia-hero-image-label {
            position: absolute;
            bottom: 24px;
            left: 24px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .otica-gia-hero-image-label-collection {
            font-size: 10px;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
            font-weight: 500;
        }

        .otica-gia-hero-image-label-name {
            font-family: 'Playfair Display', serif;
            font-size: 16px;
            color: var(--otica-gia-white);
            font-weight: 400;
        }

        .otica-gia-hero-image-badge {
            position: absolute;
            bottom: 24px;
            right: 24px;
            z-index: 3;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 12px;
            color: var(--otica-gia-white);
            font-weight: 500;
            letter-spacing: 0.5px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .otica-gia-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--otica-gia-gold), transparent);
            opacity: 0.5;
        }

        /* ============================================
           SEÇÃO PRÓXIMO PASSO (EXISTENTE)
        ============================================ */
        .otica-gia-next-step {
            width: 100%;
            padding: 100px 24px;
            position: relative;
            overflow: hidden;
        }

        .otica-gia-next-step::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--otica-gia-bg, #F5F0EB);
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(196, 163, 90, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(196, 163, 90, 0.04) 0%, transparent 50%);
            z-index: 0;
        }

        .otica-gia-next-step-container {
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .otica-gia-next-step-header {
            text-align: center;
            margin-bottom: 56px;
        }

        .otica-gia-next-step-tag {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            letter-spacing: 3px;
            font-weight: 600;
            color: var(--otica-gia-gold, #C4A35A);
            text-transform: uppercase;
            margin-bottom: 24px;
        }

        .otica-gia-next-step-tag-line {
            display: block;
            width: 32px;
            height: 1px;
            background-color: var(--otica-gia-gold, #C4A35A);
        }

        .otica-gia-next-step-title {
            font-family: 'Playfair Display', serif;
            font-size: 42px;
            line-height: 1.15;
            font-weight: 400;
            color: var(--otica-gia-text, #1A1A1A);
            margin-bottom: 16px;
        }

        .otica-gia-next-step-title-accent {
            color: var(--otica-gia-gold, #C4A35A);
            font-style: italic;
        }

        .otica-gia-next-step-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            color: var(--otica-gia-text-light, #555555);
            font-weight: 400;
        }

        .otica-gia-next-step-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            margin-bottom: 80px;
        }

        .otica-gia-next-step-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(196, 163, 90, 0.15);
            border-radius: 20px;
            padding: 48px 40px;
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .otica-gia-next-step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--otica-gia-gold, #C4A35A), transparent);
            opacity: 0.3;
        }

        .otica-gia-next-step-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.06);
            border-color: rgba(196, 163, 90, 0.3);
        }

        .otica-gia-next-step-card-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--otica-gia-gold, #C4A35A);
            opacity: 0.8;
        }

        .otica-gia-next-step-card-title {
            font-family: 'Playfair Display', serif;
            font-size: 26px;
            font-weight: 400;
            line-height: 1.3;
            color: var(--otica-gia-text, #1A1A1A);
            margin-bottom: 16px;
        }

        .otica-gia-next-step-card-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            line-height: 1.7;
            color: var(--otica-gia-text-light, #555555);
            margin-bottom: 32px;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        .otica-gia-next-step-card-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 320px;
            padding: 16px 28px;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 18px;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            margin-bottom: 16px;
        }

        .otica-gia-next-step-card-btn--dark {
            background-color: var(--otica-gia-text, #1A1A1A);
            color: var(--otica-gia-white, #FFFFFF);
            box-shadow: 0 4px 16px rgba(26, 26, 26, 0.2);
        }

        .otica-gia-next-step-card-btn--dark:hover {
            background-color: #000000;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 26, 26, 0.3);
        }

        .otica-gia-next-step-card-btn--green {
            background-color: var(--otica-gia-green, #2D6B4F);
            color: var(--otica-gia-white, #FFFFFF);
            box-shadow: 0 4px 16px rgba(45, 107, 79, 0.25);
        }

        .otica-gia-next-step-card-btn--green:hover {
            background-color: var(--otica-gia-green-hover, #245a42);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45, 107, 79, 0.35);
        }

        .otica-gia-next-step-card-footer {
            font-family: 'Montserrat', sans-serif;
            font-size: 10px;
            letter-spacing: 1.5px;
            font-weight: 600;
            color: var(--otica-gia-text-light, #555555);
            text-transform: uppercase;
            opacity: 0.7;
        }

        .otica-gia-next-step-features {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            max-width: 100%;
            margin: 0 auto;
        }

        .otica-gia-next-step-feature {
            text-align: center;
            padding: 24px 16px;
            transition: transform 0.3s ease;
            background: #fff;
            border-radius: 13px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
        }

        .otica-gia-next-step-feature:hover {
            transform: translateY(-4px);
        }

        .otica-gia-next-step-feature-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--otica-gia-gold, #C4A35A);
            opacity: 1;
            background: #faf6f0;
            border-radius: 100%;
            border: 1px solid #e8d8bf;
        }

        .otica-gia-next-step-feature-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--otica-gia-text, #1A1A1A);
            margin-bottom: 4px;
        }

        .otica-gia-next-step-feature-desc {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            color: var(--otica-gia-text-light, #555555);
            opacity: 0.8;
        }

        /* ============================================
           RESPONSIVO
        ============================================ */
        @media (max-width: 1024px) {
            .otica-gia-hero {
                gap: 40px;
            }
            
            .otica-gia-hero-title {
                font-size: 44px;
            }
            
            .otica-gia-hero-image {
                height: 520px;
            }

            .otica-gia-next-step-title {
                font-size: 36px;
            }
            
            .otica-gia-next-step-card {
                padding: 40px 32px;
            }
        }

        @media (max-width: 768px) {
            .otica-gia-header {
                padding: 16px 20px;
            }

            .otica-gia-header-left,
            .otica-gia-header-right {
                gap: 8px;
            }

            .otica-gia-menu-trigger,
            .otica-gia-search-trigger {
                width: 40px;
                height: 40px;
            }

            :root {
                --otica-gia-drawer-width: 320px;
                --otica-gia-search-width: 100%;
            }

            .otica-gia-sidemenu {
                max-width: 85vw;
            }

            .otica-gia-sidemenu-body,
            .otica-gia-sidemenu-submenu-header,
            .otica-gia-sidemenu-submenu-list {
                padding-left: 24px;
                padding-right: 24px;
            }

            .otica-gia-searchbar-header,
            .otica-gia-searchbar-body {
                padding-left: 20px;
                padding-right: 20px;
            }

            .otica-gia-hero {
                grid-template-columns: 1fr;
                padding: 30px 24px 60px;
                gap: 40px;
            }
            
            .otica-gia-hero-content {
                order: 2;
                padding-top: 0;
            }
            
            .otica-gia-hero-image-wrapper {
                order: 1;
                justify-self: center;
                max-width: 100%;
            }
            
            .otica-gia-hero-image {
                height: 420px;
                border-radius: 20px;
            }
            
            .otica-gia-hero-title {
                font-size: 38px;
            }
            
            .otica-gia-hero-subtitle {
                font-size: 18px;
                max-width: 100%;
            }
            
            .otica-gia-hero-text {
                max-width: 100%;
            }
            
            .otica-gia-hero-btn {
                width: 100%;
                justify-content: center;
            }
            
            .otica-gia-hero-features {
                justify-content: center;
                gap: 16px;
            }
            
            .otica-gia-hero-feature {
                font-size: 11px;
            }
            
            .otica-gia-hero-image-decor {
                width: 60px;
                height: 60px;
                top: -12px;
                right: -12px;
            }
            
            .otica-gia-hero-image-decor::after {
                width: 44px;
                height: 44px;
            }

            .otica-gia-next-step {
                padding: 60px 20px;
            }
            
            .otica-gia-next-step-title {
                font-size: 30px;
            }
            
            .otica-gia-next-step-cards {
                grid-template-columns: 1fr;
                gap: 24px;
                margin-bottom: 48px;
            }
            
            .otica-gia-next-step-card {
                padding: 36px 28px;
            }
            
            .otica-gia-next-step-card-title {
                font-size: 22px;
            }
            
            .otica-gia-next-step-features {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
            
            .otica-gia-next-step-feature {
                padding: 16px 8px;
            }
        }

        @media (max-width: 480px) {
            .otica-gia-hero-title {
                font-size: 32px;
            }
            
            .otica-gia-hero-image {
                height: 360px;
            }
            
            .otica-gia-hero-features {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .otica-gia-btn-comprar {
                padding: 8px 16px;
                font-size: 10px;
            }

            :root {
                --otica-gia-drawer-width: 100%;
            }

            .otica-gia-sidemenu {
                max-width: 100%;
            }

            .otica-gia-searchbar-tab {
                font-size: 12px;
            }

            .otica-gia-next-step-title {
                font-size: 26px;
            }
            
            .otica-gia-next-step-card {
                padding: 32px 20px;
            }
            
            .otica-gia-next-step-card-title {
                font-size: 20px;
            }
            
            .otica-gia-next-step-card-btn {
                font-size: 11px;
                padding: 14px 20px;
            }
            
            .otica-gia-next-step-features {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            
            .otica-gia-next-step-feature-title {
                font-size: 12px;
            }
            
            .otica-gia-next-step-feature-desc {
                font-size: 10px;
            }
        }




          /* ============================================
       SEÇÃO EXPERIÊNCIA DE LUXO
    ============================================ */
    .otica-gia-experience {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
        overflow: hidden;
    }

    .otica-gia-experience-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }

    /* -------- LADO ESQUERDO: Device -------- */
    .otica-gia-experience-media {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .otica-gia-experience-device {
        position: relative;
        width: 100%;
        max-width: 340px;
        aspect-ratio: 9 / 16;
        background: #0a0a0a;
        border-radius: 36px;
        padding: 10px;
        box-shadow: 
            0 40px 80px rgba(0, 0, 0, 0.18),
            0 0 0 1px rgba(0, 0, 0, 0.06),
            inset 0 0 0 2px rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

    .otica-gia-experience-device-notch {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 22px;
        background: #0a0a0a;
        border-radius: 0 0 14px 14px;
        z-index: 10;
    }

    .otica-gia-experience-device-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 28px;
        display: block;
        background: #111;
    }

    .otica-gia-experience-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
        color: var(--otica-gia-text, #1A1A1A);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .otica-gia-experience-play:hover {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--otica-gia-white, #FFFFFF);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    }

    .otica-gia-experience-play:active {
        transform: translate(-50%, -50%) scale(0.95);
    }

    /* Botão some suavemente quando o vídeo está rodando */
    .otica-gia-experience-play.is-playing {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.8);
    }

    /* Ao passar o mouse no device com vídeo rodando, o botão reaparece */
    .otica-gia-experience-device:hover .otica-gia-experience-play.is-playing {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    .otica-gia-experience-device-badge {
        position: absolute;
        bottom: 24px;
        left: 20px;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.5px;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(8px);
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    .otica-gia-experience-device-badge-dot {
        width: 6px;
        height: 6px;
        background: #e74c3c;
        border-radius: 50%;
        flex-shrink: 0;
        animation: otica-gia-pulse-dot 2s ease-in-out infinite;
    }

    @keyframes otica-gia-pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(0.85); }
    }

    .otica-gia-experience-device-badge-sep {
        opacity: 0.5;
    }

    /* -------- LADO DIREITO: Conteúdo -------- */
    .otica-gia-experience-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-experience-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
    }

    .otica-gia-experience-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-experience-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-experience-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-experience-divider {
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg, var(--otica-gia-gold, #C4A35A), transparent);
        margin: 4px 0;
    }

    .otica-gia-experience-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: var(--otica-gia-text-light, #555555);
        max-width: 520px;
    }

    .otica-gia-experience-features {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 12px;
    }

    .otica-gia-experience-feature {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .otica-gia-experience-feature-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1.5px solid rgba(196, 163, 90, 0.35);
        color: var(--otica-gia-gold, #C4A35A);
        flex-shrink: 0;
        transition: all 0.3s ease;
        background: rgba(196, 163, 90, 0.04);
    }

    .otica-gia-experience-feature:hover .otica-gia-experience-feature-icon {
        border-color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.08);
        transform: translateY(-2px);
    }

    .otica-gia-experience-feature-title {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 2px;
    }

    .otica-gia-experience-feature-desc {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.85;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-experience {
            padding: 80px 40px;
        }

        .otica-gia-experience-container {
            gap: 60px;
        }

        .otica-gia-experience-title {
            font-size: 36px;
        }

        .otica-gia-experience-device {
            max-width: 300px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-experience {
            padding: 60px 24px;
        }

        .otica-gia-experience-container {
            grid-template-columns: 1fr;
            gap: 48px;
            text-align: center;
        }

        .otica-gia-experience-media {
            order: 1;
        }

        .otica-gia-experience-content {
            order: 2;
            align-items: center;
        }

        .otica-gia-experience-title {
            font-size: 30px;
        }

        .otica-gia-experience-text {
            max-width: 100%;
            font-size: 14px;
        }

        .otica-gia-experience-features {
            align-items: center;
            width: 100%;
            max-width: 320px;
        }

        .otica-gia-experience-feature {
            text-align: left;
            width: 100%;
        }

        .otica-gia-experience-device {
            max-width: 260px;
            border-radius: 28px;
        }

        .otica-gia-experience-device-video {
            border-radius: 22px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-experience-title {
            font-size: 26px;
        }

        .otica-gia-experience-feature-title {
            font-size: 18px;
        }

        .otica-gia-experience-feature-icon {
            width: 46px;
            height: 46px;
        }

        .otica-gia-experience-device {
            max-width: 220px;
        }

        .otica-gia-experience-play {
            width: 52px;
            height: 52px;
        }
    }


     /* ============================================
       SEÇÃO PARA QUEM É
    ============================================ */
    .otica-gia-audience {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
    }

    .otica-gia-audience-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    /* -------- Header -------- */
    .otica-gia-audience-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-audience-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-audience-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-audience-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-audience-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Grid de Cards -------- */
    .otica-gia-audience-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .otica-gia-audience-card {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .otica-gia-audience-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.08);
    }

    .otica-gia-audience-card-image {
        width: 100%;
        height: 280px;
        overflow: hidden;
        position: relative;
    }

    .otica-gia-audience-card-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.04) 100%);
        pointer-events: none;
    }

    .otica-gia-audience-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

    .otica-gia-audience-card:hover .otica-gia-audience-card-image img {
        transform: scale(1.04);
    }

    .otica-gia-audience-card-body {
        padding: 36px 40px 40px;
    }

    .otica-gia-audience-card-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--otica-gia-gold, #C4A35A);
        margin-bottom: 16px;
    }

    .otica-gia-audience-card-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--otica-gia-gold, #C4A35A);
        opacity: 0.8;
    }

    .otica-gia-audience-card-title {
        font-family: 'Playfair Display', serif;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.3;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 16px;
    }

    .otica-gia-audience-card-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.75;
        color: var(--otica-gia-text-light, #555555);
        margin-bottom: 16px;
    }

    .otica-gia-audience-card-highlight {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.75;
        color: var(--otica-gia-text, #1A1A1A);
        font-weight: 600;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-audience {
            padding: 80px 40px;
        }

        .otica-gia-audience-title {
            font-size: 36px;
        }

        .otica-gia-audience-card-image {
            height: 240px;
        }

        .otica-gia-audience-card-body {
            padding: 28px 32px 32px;
        }

        .otica-gia-audience-card-title {
            font-size: 22px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-audience {
            padding: 60px 24px;
        }

        .otica-gia-audience-title {
            font-size: 30px;
        }

        .otica-gia-audience-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .otica-gia-audience-card-image {
            height: 220px;
        }

        .otica-gia-audience-card-body {
            padding: 24px 28px 28px;
        }

        .otica-gia-audience-card-title {
            font-size: 20px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-audience-title {
            font-size: 26px;
        }

        .otica-gia-audience-card-image {
            height: 200px;
        }

        .otica-gia-audience-card-body {
            padding: 20px 24px 24px;
        }

        .otica-gia-audience-card-title {
            font-size: 18px;
        }

        .otica-gia-audience-card-text,
        .otica-gia-audience-card-highlight {
            font-size: 13px;
        }
    }



    /* ============================================
       SEÇÃO PROVADOR VIRTUAL (TRY-ON)
    ============================================ */
    .otica-gia-tryon {
        width: 100%;
        padding: 120px 48px;
        background-color: #0a0a0a;
        position: relative;
        overflow: hidden;
    }

    /* Glow sutil no fundo */
    .otica-gia-tryon::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.06) 0%, transparent 70%);
        pointer-events: none;
    }

    .otica-gia-tryon::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .otica-gia-tryon-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    /* -------- LADO ESQUERDO: Conteúdo -------- */
    .otica-gia-tryon-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-tryon-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
    }

    .otica-gia-tryon-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-tryon-title {
        font-family: 'Playfair Display', serif;
        font-size: 48px;
        line-height: 1.1;
        font-weight: 400;
        color: var(--otica-gia-white, #FFFFFF);
    }

    .otica-gia-tryon-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-tryon-divider {
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg, var(--otica-gia-gold, #C4A35A), transparent);
        margin: 4px 0;
    }

    .otica-gia-tryon-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.65);
        max-width: 480px;
    }

    .otica-gia-tryon-filters {
        margin-top: 8px;
    }

    .otica-gia-tryon-filters-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 14px;
    }

    .otica-gia-tryon-filters-list {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .otica-gia-tryon-filter {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.7);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 24px;
        padding: 8px 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .otica-gia-tryon-filter:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.08);
    }

    .otica-gia-tryon-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #E8D5B5 0%, #C4A35A 50%, #B8944F 100%);
    background: linear-gradient(135deg, #B8944F 0%, #C4A35A 50%, #E8D5B5 100%);
    color: #1A1A1A;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(196, 163, 90, 0.3);
    width: fit-content;
}

.otica-gia-tryon-btn:hover {
    background: linear-gradient(135deg, #B8944F 0%, #C4A35A 50%, #E8D5B5 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(196, 163, 90, 0.4);
}

    .otica-gia-tryon-btn svg {
        transition: transform 0.3s ease;
    }

    .otica-gia-tryon-btn:hover svg {
        transform: translateX(3px);
    }

    /* -------- LADO DIREITO: Device -------- */
    .otica-gia-tryon-media {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .otica-gia-tryon-device {
        position: relative;
        width: 100%;
        max-width: 300px;
        aspect-ratio: 9 / 18;
        background: #1a1a1a;
        border-radius: 40px;
        padding: 10px;
        box-shadow: 
            0 40px 80px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.06),
            inset 0 0 0 2px rgba(255, 255, 255, 0.04);
        overflow: hidden;
    }

    .otica-gia-tryon-device-notch {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 24px;
        background: #1a1a1a;
        border-radius: 0 0 16px 16px;
        z-index: 10;
    }

    .otica-gia-tryon-device-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 32px;
        display: block;
    }

    .otica-gia-tryon-device-badge {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--otica-gia-text, #1A1A1A);
        text-transform: uppercase;
        background: var(--otica-gia-white, #FFFFFF);
        padding: 8px 18px;
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-tryon {
            padding: 100px 40px;
        }

        .otica-gia-tryon-container {
            gap: 60px;
        }

        .otica-gia-tryon-title {
            font-size: 40px;
        }

        .otica-gia-tryon-device {
            max-width: 260px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-tryon {
            padding: 80px 24px;
        }

        .otica-gia-tryon-container {
            grid-template-columns: 1fr;
            gap: 56px;
            text-align: center;
        }

        .otica-gia-tryon-content {
            align-items: center;
            order: 2;
        }

        .otica-gia-tryon-media {
            order: 1;
        }

        .otica-gia-tryon-title {
            font-size: 34px;
        }

        .otica-gia-tryon-text {
            max-width: 100%;
        }

        .otica-gia-tryon-filters-list {
            justify-content: center;
        }

        .otica-gia-tryon-btn {
            width: 100%;
            max-width: 340px;
            justify-content: center;
        }

        .otica-gia-tryon-device {
            max-width: 240px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-tryon-title {
            font-size: 28px;
        }

        .otica-gia-tryon-text {
            font-size: 14px;
        }

        .otica-gia-tryon-filter {
            font-size: 12px;
            padding: 6px 16px;
        }

        .otica-gia-tryon-btn {
            font-size: 11px;
            padding: 14px 24px;
        }

        .otica-gia-tryon-device {
            max-width: 200px;
            border-radius: 32px;
        }

        .otica-gia-tryon-device-img {
            border-radius: 24px;
        }
    }




     /* ============================================
       SEÇÃO DEPOIMENTOS / TESTEMUNHOS
    ============================================ */
    .otica-gia-testimonials {
        width: 100%;
        padding: 100px 0 80px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
        overflow: hidden;
    }

    .otica-gia-testimonials-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* -------- Badge -------- */
    .otica-gia-testimonials-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 28px;
        background: rgba(196, 163, 90, 0.08);
        border: 1px solid rgba(196, 163, 90, 0.18);
        border-radius: 50px;
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--otica-gia-text-light, #555555);
        margin-bottom: 32px;
    }

    .otica-gia-testimonials-badge-star {
        color: var(--otica-gia-gold, #C4A35A);
        font-size: 14px;
        line-height: 1;
    }

    /* -------- Título -------- */
    .otica-gia-testimonials-title {
        font-family: 'Playfair Display', serif;
        font-size: 36px;
        line-height: 1.25;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-testimonials-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Carrossel -------- */
    .otica-gia-testimonials-carousel {
        width: 100%;
        display: flex;
        gap: 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        cursor: grab;
        /* Esconde scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .otica-gia-testimonials-carousel::-webkit-scrollbar {
        display: none;
    }

    .otica-gia-testimonials-carousel:active {
        cursor: grabbing;
    }

    .otica-gia-testimonials-slide {
        flex: 0 0 calc(50% - 12px);
        scroll-snap-align: start;
    }

    /* -------- Card -------- */
    .otica-gia-testimonials-card {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 20px;
        padding: 36px 36px 32px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03);
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .otica-gia-testimonials-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .otica-gia-testimonials-stars {
        display: flex;
        gap: 3px;
    }

    .otica-gia-testimonials-stars span {
        color: var(--otica-gia-gold, #C4A35A);
        font-size: 16px;
        line-height: 1;
    }

    .otica-gia-testimonials-quote-icon {
        font-family: 'Playfair Display', serif;
        font-size: 64px;
        line-height: 0.6;
        color: rgba(196, 163, 90, 0.12);
        font-weight: 400;
        user-select: none;
        margin-top: -4px;
    }

    .otica-gia-testimonials-card-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.7;
        color: var(--otica-gia-text-light, #555555);
        flex: 1;
        margin-bottom: 24px;
    }

    .otica-gia-testimonials-card-footer {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-top: 20px;
        border-top: 1px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-testimonials-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--otica-gia-gold, #C4A35A);
        background: linear-gradient(135deg, #B8944F 0%, #C4A35A 50%, #E8D5B5 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--otica-gia-white, #FFFFFF);
        flex-shrink: 0;
    }

    .otica-gia-testimonials-author {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .otica-gia-testimonials-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-testimonials-location {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.8;
    }

    /* -------- Dots -------- */
    .otica-gia-testimonials-dots {
        display: flex;
        gap: 8px;
        margin-top: 36px;
        justify-content: center;
    }

    .otica-gia-testimonials-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(196, 163, 90, 0.25);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
    }

    .otica-gia-testimonials-dot.active {
        background: var(--otica-gia-gold, #C4A35A);
        width: 24px;
        border-radius: 4px;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-testimonials {
            padding: 80px 0 60px;
        }

        .otica-gia-testimonials-container {
            padding: 0 40px;
        }

        .otica-gia-testimonials-title {
            font-size: 32px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-testimonials {
            padding: 60px 0 50px;
        }

        .otica-gia-testimonials-container {
            padding: 0 24px;
        }

        .otica-gia-testimonials-title {
            font-size: 26px;
            margin-bottom: 40px;
        }

        .otica-gia-testimonials-badge {
            font-size: 10px;
            padding: 10px 20px;
            letter-spacing: 2px;
        }

        /* 1.5 colunas no mobile */
        .otica-gia-testimonials-slide {
            flex: 0 0 calc(66.666% - 8px);
        }

        .otica-gia-testimonials-card {
            padding: 28px 24px 24px;
        }

        .otica-gia-testimonials-card-text {
            font-size: 14px;
        }

        .otica-gia-testimonials-quote-icon {
            font-size: 48px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-testimonials-title {
            font-size: 22px;
        }

        .otica-gia-testimonials-slide {
            flex: 0 0 calc(85% - 6px);
        }

        .otica-gia-testimonials-card {
            padding: 24px 20px 22px;
        }

        .otica-gia-testimonials-card-text {
            font-size: 13px;
        }

        .otica-gia-testimonials-avatar {
            width: 36px;
            height: 36px;
            font-size: 13px;
        }
    }







     /* ============================================
       SEÇÃO LABORATÓRIO EXPRESSO
    ============================================ */
    .otica-gia-lab {
        width: 100%;
        padding: 100px 48px;
        background-color: #f0e6d5;
        position: relative;
    }

    .otica-gia-lab-container {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }

    .otica-gia-lab-left {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: sticky;
        top: 100px;
    }

    .otica-gia-lab-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
    }

    .otica-gia-lab-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-lab-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-lab-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-lab-image {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 16px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    }

    .otica-gia-lab-image img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
    }

    .otica-gia-lab-steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-lab-step {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 28px 32px;
        border: 1px solid rgba(0, 0, 0, 0.03);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .otica-gia-lab-step:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    }

    .otica-gia-lab-step-number {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #eccc85;
        display: block;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-weight: 400;
        color: #333;
        flex-shrink: 0;
        margin-top: 2px;
        /* background: linear-gradient(135deg, #D4B36A 0%, #C4A35A 100%); */
        padding-top: 0;
        line-height: 40px;
    }

    .otica-gia-lab-step-content {
        flex: 1;
    }

    .otica-gia-lab-step-title {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 6px;
    }

    .otica-gia-lab-step-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.7;
        color: var(--otica-gia-text-light, #555555);
    }

    /* ============================================
       SEÇÃO COMPARATIVO / ANCORAGEM DE PREÇO
    ============================================ */
    .otica-gia-compare {
        width: 100%;
        padding: 100px 48px;
        background-color: #eee4d3;
        position: relative;
    }

    .otica-gia-compare-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .otica-gia-compare-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .otica-gia-compare-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-compare-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-compare-title {
        font-family: 'Playfair Display', serif;
        font-size: 36px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-compare-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Tabela -------- */
    .otica-gia-compare-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    }

    .otica-gia-compare-table-wrap::-webkit-scrollbar {
        height: 4px;
    }

    .otica-gia-compare-table-wrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .otica-gia-compare-table-wrap::-webkit-scrollbar-thumb {
        background: var(--otica-gia-gold, #C4A35A);
        border-radius: 4px;
    }

    .otica-gia-compare-table {
        width: 100%;
        min-width: 700px;
        border-collapse: collapse;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 20px;
        overflow: hidden;
    }

    .otica-gia-compare-th {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 20px 24px;
        text-align: center;
        white-space: nowrap;
    }

    .otica-gia-compare-th--dark {
        background: #0a0a0a;
        color: rgba(255, 255, 255, 0.7);
    }

    .otica-gia-compare-th--gold {
        background: linear-gradient(135deg, #D4B36A 0%, #C4A35A 100%);
        color: var(--otica-gia-white, #FFFFFF);
    }

    .otica-gia-compare-th:first-child {
        text-align: left;
    }

    .otica-gia-compare-td {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        padding: 24px;
        text-align: center;
        border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
        vertical-align: middle;
    }

    .otica-gia-compare-td:first-child {
        text-align: left;
        font-weight: 500;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-compare-td:last-child {
        border-left: 2px solid var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.02);
    }

    .otica-gia-compare-td--strike span {
        text-decoration: line-through;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.7;
    }

    .otica-gia-compare-td--highlight {
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-compare-icon {
        margin-right: 8px;
        font-size: 16px;
        display: none;
    }

    .otica-gia-compare-price {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 2px;
    }

    .otica-gia-compare-note {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.8;
    }

    .otica-gia-compare-icon-inline {
        margin-left: 4px;
        font-size: 14px;
    }

    tbody tr:last-child .otica-gia-compare-td {
        border-bottom: none;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-lab {
            padding: 80px 40px;
        }

        .otica-gia-lab-container {
            gap: 48px;
        }

        .otica-gia-lab-title {
            font-size: 36px;
        }

        .otica-gia-compare {
            padding: 80px 40px;
        }

        .otica-gia-compare-title {
            font-size: 32px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-lab {
            padding: 60px 24px;
        }

        .otica-gia-lab-container {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .otica-gia-lab-left {
            position: static;
            text-align: center;
            align-items: center;
        }

        .otica-gia-lab-title {
            font-size: 30px;
        }

        .otica-gia-lab-image {
            max-width: 400px;
            margin-top: 8px;
        }

        .otica-gia-lab-image img {
            height: 220px;
        }

        .otica-gia-lab-step {
            padding: 24px;
        }

        .otica-gia-compare {
            padding: 60px 24px;
        }

        .otica-gia-compare-title {
            font-size: 26px;
        }

        .otica-gia-compare-table-wrap {
            border-radius: 16px;
            margin: 0 -4px;
        }

        .otica-gia-compare-th,
        .otica-gia-compare-td {
            padding: 16px 20px;
            font-size: 13px;
        }

        .otica-gia-compare-price {
            font-size: 14px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-lab-title {
            font-size: 26px;
        }

        .otica-gia-lab-step-number {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #eccc85;
            display: block;
            align-items: center;
            text-align: center;
            justify-content: center;
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 400;
            color: #333;
            flex-shrink: 0;
            margin-top: 2px;
            /* background: linear-gradient(135deg, #D4B36A 0%, #C4A35A 100%); */
            padding-top: 0;
            line-height: 40px;
        }

        .otica-gia-lab-step-title {
            font-size: 18px;
        }

        .otica-gia-lab-step-text {
            font-size: 13px;
        }

        .otica-gia-compare-title {
            font-size: 22px;
        }

        .otica-gia-compare-th,
        .otica-gia-compare-td {
            padding: 14px 16px;
            font-size: 12px;
        }
    }



     /* ============================================
       SEÇÃO GRID DE PRODUTOS
    ============================================ */
    .otica-gia-products {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
    }

    .otica-gia-products-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .otica-gia-products-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-products-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-products-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-products-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-products-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Grid -------- */
    .otica-gia-products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    /* -------- Card -------- */
    .otica-gia-products-card {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: transform 0.3s ease;
    }

    .otica-gia-products-card:hover {
        transform: translateY(-4px);
    }

    .otica-gia-products-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #ede8e2;
        border-radius: 16px;
        overflow: hidden;
    }

    .otica-gia-products-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.5s ease, transform 0.6s ease;
    }

    .otica-gia-products-img--default {
        opacity: 1;
        transform: scale(1);
    }

    .otica-gia-products-img--hover {
        opacity: 0;
        /* transform: scale(1.05); */
    }

    .otica-gia-products-card:hover .otica-gia-products-img--default {
        opacity: 0;
         /* transform: scale(1.05); */
    }

    .otica-gia-products-card:hover .otica-gia-products-img--hover {
        opacity: 1;
        transform: scale(1);
    }

    .otica-gia-products-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .otica-gia-products-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.4;
    }

    .otica-gia-products-price {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .otica-gia-products-price-current {
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-products-price-old {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: var(--otica-gia-text-light, #555555);
        text-decoration: line-through;
        opacity: 0.7;
    }

    .otica-gia-products-colors {
        display: flex;
        gap: 6px;
        margin-top: 2px;
    }

    .otica-gia-products-color {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .otica-gia-products-color:hover {
        transform: scale(1.2);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-products {
            padding: 80px 40px;
        }

        .otica-gia-products-title {
            font-size: 36px;
        }

        .otica-gia-products-grid {
            gap: 20px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-products {
            padding: 60px 24px;
        }

        .otica-gia-products-title {
            font-size: 30px;
        }

        .otica-gia-products-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .otica-gia-products-image {
            border-radius: 12px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-products-title {
            font-size: 26px;
        }

        .otica-gia-products-grid {
            gap: 12px;
        }

        .otica-gia-products-name {
            font-size: 13px;
        }

        .otica-gia-products-price-current,
        .otica-gia-products-price-old {
            font-size: 12px;
        }

        .otica-gia-products-color {
            width: 12px;
            height: 12px;
        }
    }




     /* ============================================
       SEÇÃO INSTITUCIONAL
    ============================================ */
    .otica-gia-institutional {
        width: 100%;
        padding: 120px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
        overflow: hidden;
    }

    .otica-gia-institutional::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .otica-gia-institutional-container {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 80px;
        align-items: start;
        position: relative;
        z-index: 1;
    }

    .otica-gia-institutional-content {
        max-width: 640px;
    }

    .otica-gia-institutional-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 24px;
    }

    .otica-gia-institutional-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-institutional-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 28px;
    }

    .otica-gia-institutional-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-institutional-headline {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.6;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 20px;
        padding-left: 24px;
        border-left: 2px solid var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-institutional-divider {
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg, var(--otica-gia-gold, #C4A35A), transparent);
        margin: 24px 0;
    }

    .otica-gia-institutional-texts {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-institutional-texts p {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: var(--otica-gia-text-light, #555555);
    }

    /* Decoração lateral */
    .otica-gia-institutional-deco {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding-top: 80px;
    }

    .otica-gia-institutional-deco-line {
        width: 1px;
        height: 120px;
        background: linear-gradient(to bottom, var(--otica-gia-gold, #C4A35A), transparent);
        opacity: 0.4;
    }

    .otica-gia-institutional-deco-quote {
        width: 80px;
        height: 80px;
        border: 1px solid rgba(196, 163, 90, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .otica-gia-institutional-deco-quote span {
        font-family: 'Playfair Display', serif;
        font-size: 48px;
        color: var(--otica-gia-gold, #C4A35A);
        opacity: 0.3;
        line-height: 1;
        margin-top: -8px;
    }

    /* ============================================
       SEÇÃO PALAVRAS-CHAVE
    ============================================ */
    .otica-gia-keywords {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-white, #FFFFFF);
        position: relative;
    }

    .otica-gia-keywords-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    .otica-gia-keywords-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-keywords-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-keywords-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-keywords-title {
        font-family: 'Playfair Display', serif;
        font-size: 36px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-keywords-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-keywords-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .otica-gia-keywords-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-keywords-group-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--otica-gia-text, #1A1A1A);
        padding-bottom: 12px;
        border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-keywords-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .otica-gia-keywords-pill {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--otica-gia-text-light, #555555);
        background: var(--otica-gia-bg, #F5F0EB);
        padding: 10px 18px;
        border-radius: 50px;
        border: 1px solid transparent;
        transition: all 0.3s ease;
        cursor: default;
        user-select: none;
    }

    .otica-gia-keywords-pill:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.04);
        transform: translateY(-2px);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-institutional {
            padding: 100px 40px;
        }

        .otica-gia-institutional-container {
            gap: 60px;
        }

        .otica-gia-institutional-title {
            font-size: 36px;
        }

        .otica-gia-keywords {
            padding: 80px 40px;
        }

        .otica-gia-keywords-title {
            font-size: 32px;
        }

        .otica-gia-keywords-grid {
            gap: 32px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-institutional {
            padding: 80px 24px;
        }

        .otica-gia-institutional-container {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .otica-gia-institutional-content {
            max-width: 100%;
        }

        .otica-gia-institutional-title {
            font-size: 30px;
        }

        .otica-gia-institutional-headline {
            font-size: 18px;
        }

        .otica-gia-institutional-deco {
            display: none;
        }

        .otica-gia-keywords {
            padding: 60px 24px;
        }

        .otica-gia-keywords-title {
            font-size: 26px;
        }

        .otica-gia-keywords-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-institutional-title {
            font-size: 26px;
        }

        .otica-gia-institutional-texts p {
            font-size: 14px;
        }

        .otica-gia-keywords-title {
            font-size: 22px;
        }

        .otica-gia-keywords-pill {
            font-size: 12px;
            padding: 8px 14px;
        }
    }



    /* ============================================
       SEÇÃO GRID DE PRODUTOS v2
    ============================================ */
    .otica-gia-new-grid {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
    }

    .otica-gia-new-grid-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .otica-gia-new-grid-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-new-grid-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-new-grid-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-new-grid-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-new-grid-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Track / Grid -------- */
    .otica-gia-new-grid-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .otica-gia-new-grid-slide {
        scroll-snap-align: start;
    }

    /* -------- Card -------- */
    .otica-gia-new-grid-card {
        position: relative;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }

    .otica-gia-new-grid-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

    /* Wishlist */
    .otica-gia-new-grid-wishlist {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--otica-gia-white, #FFFFFF);
        border: 1px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 50%;
        cursor: pointer;
        color: var(--otica-gia-text-light, #555555);
        z-index: 5;
        transition: all 0.2s ease;
    }

    .otica-gia-new-grid-wishlist:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        
    }

    /* Imagem */
    .otica-gia-new-grid-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f5f2ee;
        border-radius: 12px;
        overflow: hidden;
    }

    .otica-gia-new-grid-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.5s ease, transform 0.6s ease;
    }

    .otica-gia-new-grid-img--default {
        opacity: 1;
        transform: scale(1);
    }

    .otica-gia-new-grid-img--hover {
        opacity: 0;
       
    }

    .otica-gia-new-grid-card:hover .otica-gia-new-grid-img--default {
        opacity: 0;
      
    }

    .otica-gia-new-grid-card:hover .otica-gia-new-grid-img--hover {
        opacity: 1;
        transform: scale(1);
    }

    /* Badges */
    .otica-gia-new-grid-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
    }

    .otica-gia-new-grid-badge {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--otica-gia-white, #FFFFFF);
        background: var(--otica-gia-green, #2D6B4F);
        padding: 5px 10px;
        border-radius: 6px;
        line-height: 1;
    }

    .otica-gia-new-grid-badge--secondary {
        background: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-white, #FFFFFF);
    }

    /* Info */
    .otica-gia-new-grid-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
    }

    .otica-gia-new-grid-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }

    .otica-gia-new-grid-stars {
        display: flex;
        gap: 2px;
        font-size: 13px;
        line-height: 1;
    }

    .otica-gia-new-grid-stars span {
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-new-grid-star-empty {
        color: #ddd5c7 !important;
    }

    /* Preços */
    .otica-gia-new-grid-prices {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
    }

    .otica-gia-new-grid-old {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        text-decoration: line-through;
        opacity: 0.7;
    }

    .otica-gia-new-grid-discount {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 700;
        color: var(--otica-gia-white, #FFFFFF);
        background: #c0392b;
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1;
    }

    .otica-gia-new-grid-current {
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.2;
    }

    .otica-gia-new-grid-pix {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .otica-gia-new-grid-pix-highlight {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-new-grid-pix-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-new-grid-installment {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.85;
        margin-bottom: 4px;
    }

    /* Botão */
    .otica-gia-new-grid-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: var(--otica-gia-text, #1A1A1A);
        color: var(--otica-gia-white, #FFFFFF);
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.3s ease;
        margin-top: auto;
        border: none;
        cursor: pointer;
    }

    .otica-gia-new-grid-btn:hover {
        background: var(--otica-gia-green, #2D6B4F);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(45, 107, 79, 0.25);
    }

    /* Dots mobile */
    .otica-gia-new-grid-dots {
        display: none;
        justify-content: center;
        gap: 8px;
        margin-top: 28px;
    }

    .otica-gia-new-grid-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(196, 163, 90, 0.25);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
    }

    .otica-gia-new-grid-dot.active {
        background: var(--otica-gia-gold, #C4A35A);
        width: 24px;
        border-radius: 4px;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-new-grid {
            padding: 80px 40px;
        }

        .otica-gia-new-grid-title {
            font-size: 36px;
        }

        .otica-gia-new-grid-track {
            gap: 16px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-new-grid {
            padding: 60px 0 50px;
        }

        .otica-gia-new-grid-header {
            padding: 0 24px;
            margin-bottom: 32px;
        }

        .otica-gia-new-grid-title {
            font-size: 28px;
        }

        /* Carrossel: 1.5 colunas visíveis */
        .otica-gia-new-grid-track {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 4px 24px 16px;
            cursor: grab;
            scrollbar-width: none;
            -ms-overflow-scrolling: touch;
        }

        .otica-gia-new-grid-track::-webkit-scrollbar {
            display: none;
        }

        .otica-gia-new-grid-track:active {
            cursor: grabbing;
        }

        .otica-gia-new-grid-slide {
            flex: 0 0 calc(66.666% - 6px);
            min-width: 260px;
        }

        .otica-gia-new-grid-dots {
            display: flex;
        }

        .otica-gia-new-grid-card {
            padding: 12px;
        }

        .otica-gia-new-grid-current {
            font-size: 18px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-new-grid-title {
            font-size: 24px;
        }

        .otica-gia-new-grid-slide {
            flex: 0 0 calc(78% - 6px);
            min-width: 220px;
        }

        .otica-gia-new-grid-name {
            font-size: 12px;
        }

        .otica-gia-new-grid-current {
            font-size: 17px;
        }

        .otica-gia-new-grid-btn {
            font-size: 11px;
            padding: 10px;
        }
    }




    /* ============================================
       SEÇÃO TIKTOK / VÍDEOS REELS
    ============================================ */
    .otica-gia-tiktok {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
        overflow: hidden;
    }

    .otica-gia-tiktok-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .otica-gia-tiktok-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-tiktok-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-tiktok-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-tiktok-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-tiktok-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Grid Desktop -------- */
    .otica-gia-tiktok-track {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 99px;
    }

    .otica-gia-tiktok-slide {
        scroll-snap-align: start;
    }

    /* -------- Embed Wrapper -------- */
    .otica-gia-tiktok-embed-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 16;
        border-radius: 16px;
        overflow: hidden;
        background: #111;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

    .otica-gia-tiktok-embed-wrap blockquote.tiktok-embed {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        height: 100%;
    overflow: hidden;
    }

    .otica-gia-tiktok-embed-wrap iframe {
        width: 100% !important;
        height: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        border: none !important;
        display: block !important;
        overflow-y: hidden;
    }

    /* Dots mobile */
    .otica-gia-tiktok-dots {
        display: none;
        justify-content: center;
        gap: 8px;
        margin-top: 32px;
    }

    .otica-gia-tiktok-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(196, 163, 90, 0.25);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
    }

    .otica-gia-tiktok-dot.active {
        background: var(--otica-gia-gold, #C4A35A);
        width: 24px;
        border-radius: 4px;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-tiktok {
            padding: 80px 40px;
        }

        .otica-gia-tiktok-title {
            font-size: 36px;
        }

        .otica-gia-tiktok-track {
            gap: 12px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-tiktok {
            padding: 60px 0 50px;
        }

        .otica-gia-tiktok-header {
            padding: 0 24px;
            margin-bottom: 32px;
        }

        .otica-gia-tiktok-title {
            font-size: 28px;
        }

        /* Carrossel: 1.5 colunas visíveis */
        .otica-gia-tiktok-track {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 4px 24px 16px;
            cursor: grab;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .otica-gia-tiktok-track::-webkit-scrollbar {
            display: none;
        }

        .otica-gia-tiktok-track:active {
            cursor: grabbing;
        }

        .otica-gia-tiktok-slide {
            flex: 0 0 calc(66.666% - 6px);
            min-width: 220px;
        }

        .otica-gia-tiktok-dots {
            display: flex;
        }

        .otica-gia-tiktok-embed-wrap {
            border-radius: 12px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-tiktok-title {
            font-size: 24px;
        }

        .otica-gia-tiktok-slide {
            flex: 0 0 calc(78% - 6px);
            min-width: 200px;
        }
    }



     /* ============================================
       SEÇÃO GRID + TIKTOK HÍBRIDO
    ============================================ */
    .otica-gia-new-grid-combo {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
    }

    .otica-gia-new-grid-combo-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .otica-gia-new-grid-combo-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-new-grid-combo-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-new-grid-combo-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-new-grid-combo-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-new-grid-combo-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Layout Híbrido -------- */
    .otica-gia-new-grid-combo-layout {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 32px;
        align-items: start;
    }

    /* -------- Coluna TikTok (1/3) -------- */
    .otica-gia-new-grid-combo-video {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: sticky;
        top: 100px;
    }

    .otica-gia-new-grid-combo-embed-wrap {
        width: 100%;
        aspect-ratio: 9 / 16;
        border-radius: 20px;
        overflow: hidden;
        background: #111;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    }

    .otica-gia-new-grid-combo-embed-wrap blockquote.tiktok-embed {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        height: 100%;
    }

    .otica-gia-new-grid-combo-embed-wrap iframe {
        width: 100% !important;
        height: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        border: none !important;
        display: block !important;
    }

    .otica-gia-new-grid-combo-tiktok-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--otica-gia-text, #1A1A1A);
        text-decoration: none;
        padding: 14px;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 50px;
        transition: all 0.3s ease;
        text-align: center;
    }

    .otica-gia-new-grid-combo-tiktok-link:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.04);
    }

    .otica-gia-new-grid-combo-tiktok-link svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* -------- Coluna Produtos (2/3) -------- */
    .otica-gia-new-grid-combo-products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* -------- Card (reutilizado do new-grid) -------- */
    .otica-gia-new-grid-combo-card {
        position: relative;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }

    .otica-gia-new-grid-combo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

    .otica-gia-new-grid-combo-wishlist {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--otica-gia-white, #FFFFFF);
        border: 1px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 50%;
        cursor: pointer;
        color: var(--otica-gia-text-light, #555555);
        z-index: 5;
        transition: all 0.2s ease;
    }

    .otica-gia-new-grid-combo-wishlist:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        transform: scale(1.1);
    }

    .otica-gia-new-grid-combo-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f5f2ee;
        border-radius: 12px;
        overflow: hidden;
    }

    .otica-gia-new-grid-combo-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.5s ease, transform 0.6s ease;
    }

    .otica-gia-new-grid-combo-img--default {
        opacity: 1;
        transform: scale(1);
    }

    .otica-gia-new-grid-combo-img--hover {
        opacity: 0;
        transform: scale(1.05);
    }

    .otica-gia-new-grid-combo-card:hover .otica-gia-new-grid-combo-img--default {
        opacity: 0;
        transform: scale(1.05);
    }

    .otica-gia-new-grid-combo-card:hover .otica-gia-new-grid-combo-img--hover {
        opacity: 1;
        transform: scale(1);
    }

    .otica-gia-new-grid-combo-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 2px;
    }

    .otica-gia-new-grid-combo-badge {
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--otica-gia-white, #FFFFFF);
        background: var(--otica-gia-green, #2D6B4F);
        padding: 4px 8px;
        border-radius: 5px;
        line-height: 1;
    }

    .otica-gia-new-grid-combo-badge--secondary {
        background: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-new-grid-combo-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .otica-gia-new-grid-combo-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 34px;
    }

    .otica-gia-new-grid-combo-stars {
        display: flex;
        gap: 2px;
        font-size: 12px;
        line-height: 1;
    }

    .otica-gia-new-grid-combo-stars span {
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-new-grid-combo-star-empty {
        color: #ddd5c7 !important;
    }

    .otica-gia-new-grid-combo-prices {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 1px;
    }

    .otica-gia-new-grid-combo-old {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
        text-decoration: line-through;
        opacity: 0.7;
    }

    .otica-gia-new-grid-combo-discount {
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        font-weight: 700;
        color: var(--otica-gia-white, #FFFFFF);
        background: #c0392b;
        padding: 2px 5px;
        border-radius: 3px;
        line-height: 1;
    }

    .otica-gia-new-grid-combo-current {
        font-family: 'Montserrat', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.2;
    }

    .otica-gia-new-grid-combo-pix {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .otica-gia-new-grid-combo-pix-highlight {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-new-grid-combo-pix-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-new-grid-combo-installment {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.85;
        margin-bottom: 2px;
    }

    .otica-gia-new-grid-combo-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 10px;
        background: var(--otica-gia-text, #1A1A1A);
        color: var(--otica-gia-white, #FFFFFF);
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.3s ease;
        margin-top: auto;
        border: none;
        cursor: pointer;
    }

    .otica-gia-new-grid-combo-btn:hover {
        background: var(--otica-gia-green, #2D6B4F);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(45, 107, 79, 0.25);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-new-grid-combo {
            padding: 80px 40px;
        }

        .otica-gia-new-grid-combo-title {
            font-size: 36px;
        }

        .otica-gia-new-grid-combo-layout {
            gap: 24px;
        }

        .otica-gia-new-grid-combo-products {
            gap: 16px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-new-grid-combo {
            padding: 60px 24px;
        }

        .otica-gia-new-grid-combo-title {
            font-size: 28px;
        }

        .otica-gia-new-grid-combo-layout {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .otica-gia-new-grid-combo-video {
            position: static;
            max-width: 320px;
            margin: 0 auto;
            width: 100%;
        }

        .otica-gia-new-grid-combo-products {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .otica-gia-new-grid-combo-card {
            padding: 12px;
        }

        .otica-gia-new-grid-combo-current {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-new-grid-combo-title {
            font-size: 24px;
        }

        .otica-gia-new-grid-combo-products {
            gap: 12px;
        }

        .otica-gia-new-grid-combo-name {
            font-size: 11px;
            min-height: 30px;
        }

        .otica-gia-new-grid-combo-current {
            font-size: 15px;
        }

        .otica-gia-new-grid-combo-btn {
            font-size: 10px;
            padding: 9px;
        }
    }



     /* ============================================
       RODAPÉ
    ============================================ */
    .otica-gia-footer {
        width: 100%;
        background-color: #1a1a1a;
        position: relative;
        margin-top:55px;
    }

    .otica-gia-footer-topbar {
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--otica-gia-gold, #C4A35A), transparent);
        opacity: 0.6;
    }

    .otica-gia-footer-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 72px 48px 32px;
    }

    /* -------- Main Grid -------- */
    .otica-gia-footer-main {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
        gap: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Brand */
    .otica-gia-footer-brand {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-footer-logo {
        display: inline-block;
        
    }

    .otica-gia-footer-logo:hover {
        opacity: 1;
    }

    .otica-gia-footer-tagline {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.5);
        max-width: 280px;
    }

    .otica-gia-footer-socials {
        display: flex;
        gap: 12px;
        margin-top: 4px;
    }

    .otica-gia-footer-social {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .otica-gia-footer-social:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        transform: translateY(-3px);
        background: rgba(196, 163, 90, 0.08);
    }

    /* Colunas */
    .otica-gia-footer-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .otica-gia-footer-heading {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.85);
        margin: 0;
    }

    .otica-gia-footer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .otica-gia-footer-links a {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.45);
        text-decoration: none;
        transition: all 0.25s ease;
        position: relative;
        display: inline-block;
        width: fit-content;
    }

    .otica-gia-footer-links a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--otica-gia-gold, #C4A35A);
        transition: width 0.3s ease;
    }

    .otica-gia-footer-links a:hover {
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-footer-links a:hover::after {
        width: 100%;
    }

    /* Coluna Contato */
    .otica-gia-footer-contact {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .otica-gia-footer-whatsapp {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        background: rgba(45, 107, 79, 0.15);
        border: 1px solid rgba(45, 107, 79, 0.25);
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.3s ease;
        width: fit-content;
    }

    .otica-gia-footer-whatsapp:hover {
        background: rgba(45, 107, 79, 0.25);
        border-color: var(--otica-gia-green, #2D6B4F);
        transform: translateY(-2px);
    }

    .otica-gia-footer-whatsapp svg {
        color: #25d366;
        flex-shrink: 0;
    }

    .otica-gia-footer-whatsapp-label {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .otica-gia-footer-whatsapp-number {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--otica-gia-white, #FFFFFF);
    }

    .otica-gia-footer-hours {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.35);
        margin: 0;
    }

    /* Newsletter */
    .otica-gia-footer-newsletter {
        margin-top: 8px;
    }

    .otica-gia-footer-newsletter-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 10px;
    }

    .otica-gia-footer-form {
        display: flex;
        gap: 8px;
    }

    .otica-gia-footer-input {
        flex: 1;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-white, #FFFFFF);
        outline: none;
        transition: all 0.3s ease;
    }

    .otica-gia-footer-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    .otica-gia-footer-input:focus {
        border-color: var(--otica-gia-gold, #C4A35A);
        background: rgba(255, 255, 255, 0.08);
    }

    .otica-gia-footer-submit {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--otica-gia-gold, #C4A35A);
        border: none;
        border-radius: 50%;
        color: #1a1a1a;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .otica-gia-footer-submit:hover {
        background: var(--otica-gia-gold-light, #D4B36A);
        transform: translateX(2px);
    }

    /* -------- Selos -------- */
    .otica-gia-footer-badges {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 32px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-wrap: wrap;
    }

    .otica-gia-footer-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
    }

    .otica-gia-footer-badge-icon {
        font-size: 14px;
        line-height: 1;
        display:none;
    }

    /* -------- Bottom -------- */
    .otica-gia-footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 28px;
        position: relative;
    }

    .otica-gia-footer-copyright {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        margin: 0;
    }

    .otica-gia-footer-legal {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.25);
    }

    .otica-gia-footer-legal a {
        color: rgba(255, 255, 255, 0.35);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .otica-gia-footer-legal a:hover {
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-footer-backtop {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .otica-gia-footer-backtop:hover {
        background: var(--otica-gia-gold, #C4A35A);
        border-color: var(--otica-gia-gold, #C4A35A);
        color: #1a1a1a;
        transform: translateY(-3px);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-footer-container {
            padding: 60px 40px 32px;
        }

        .otica-gia-footer-main {
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .otica-gia-footer-brand {
            grid-column: 1 / -1;
            text-align: center;
            align-items: center;
        }

        .otica-gia-footer-tagline {
            max-width: 400px;
        }

        .otica-gia-footer-badges {
            gap: 24px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-footer-container {
            padding: 48px 24px 28px;
        }

        .otica-gia-footer-main {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            padding-bottom: 36px;
        }

        .otica-gia-footer-col--wide {
            grid-column: 1 / -1;
        }

        .otica-gia-footer-badges {
            flex-direction: column;
            align-items: center;
            gap: 16px;
            padding: 24px 0;
        }

        .otica-gia-footer-bottom {
            flex-direction: column;
            gap: 16px;
            text-align: center;
        }

        .otica-gia-footer-backtop {
            position: absolute;
            right: 0;
            top: 20px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-footer-main {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .otica-gia-footer-heading {
            font-size: 11px;
        }

        .otica-gia-footer-links a {
            font-size: 13px;
        }

        .otica-gia-footer-copyright {
            font-size: 11px;
        }

        .otica-gia-footer-legal {
            font-size: 11px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .otica-gia-footer-backtop {
            position: static;
            margin-top: 8px;
        }
    }


     /* ============================================
       SEÇÃO CARRINHO DE COMPRAS
    ============================================ */
    .otica-gia-cart {
        width: 100%;
        padding: 60px 48px 100px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        min-height: 100vh;
    }

    .otica-gia-cart-container {
        max-width: 1300px;
        margin: 0 auto;
    }

    .otica-gia-cart-title {
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 36px;
    }

    /* -------- Layout -------- */
    .otica-gia-cart-layout {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 32px;
        align-items: start;
    }

    /* -------- Coluna Esquerda -------- */
    .otica-gia-cart-left {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    @media(max-width:540px){
        .otica-gia-cart-left{
            width: 100%;
            min-width: 0;
        }
    }

    /* Item */
    .otica-gia-cart-item {
        display: grid;
        grid-template-columns: 80px 1fr auto auto auto;
        gap: 16px;
        align-items: center;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        margin-bottom: 16px;
    }

    .otica-gia-cart-item-image {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
        background: #f5f2ee;
    }

    .otica-gia-cart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .otica-gia-cart-item-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .otica-gia-cart-item-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-cart-item-seller {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.7;
        margin: 0;
    }

    .otica-gia-cart-item-lens {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-gold, #C4A35A);
        font-weight: 500;
        margin: 0;
    }

    .otica-gia-cart-item-qty {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 8px;
        padding: 4px;
    }

    .otica-gia-cart-qty-btn {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        color: var(--otica-gia-text, #1A1A1A);
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s ease;
    }

    .otica-gia-cart-qty-btn:hover {
        background: var(--otica-gia-bg, #F5F0EB);
    }

    .otica-gia-cart-qty-value {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        min-width: 20px;
        text-align: center;
    }

    .otica-gia-cart-item-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .otica-gia-cart-item-price-current {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-cart-item-price-old {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        text-decoration: line-through;
        opacity: 0.6;
    }

    .otica-gia-cart-item-remove {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--otica-gia-text-light, #555555);
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .otica-gia-cart-item-remove:hover {
        background: #fee;
        color: #c0392b;
    }

    /* Frete grátis */
    .otica-gia-cart-freight {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .otica-gia-cart-freight-text {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-cart-freight-text strong {
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-cart-freight-bar {
        width: 100%;
        height: 6px;
        background: var(--otica-gia-border, #E5E0D8);
        border-radius: 10px;
        overflow: hidden;
    }

    .otica-gia-cart-freight-progress {
        height: 100%;
        background: linear-gradient(90deg, var(--otica-gia-green, #2D6B4F), var(--otica-gia-gold, #C4A35A));
        border-radius: 10px;
        transition: width 0.5s ease;
    }

    .otica-gia-cart-freight-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-decoration: none;
        transition: color 0.2s ease;
        width: fit-content;
    }

    .otica-gia-cart-freight-link:hover {
        color: var(--otica-gia-green, #2D6B4F);
    }

    /* Shipping options */
    .otica-gia-cart-shipping {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .otica-gia-cart-shipping-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-text-light, #555555);
        margin: 0 0 4px 0;
    }

    .otica-gia-cart-shipping-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        background: transparent;
    }

    .otica-gia-cart-shipping-option:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.02);
    }

    .otica-gia-cart-shipping-option--selected {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: rgba(45, 107, 79, 0.03);
    }

    .otica-gia-cart-shipping-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .otica-gia-cart-shipping-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-cart-shipping-detail {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.8;
    }

    .otica-gia-cart-shipping-price {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-cart-shipping-free {
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-cart-shipping-price input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--otica-gia-green, #2D6B4F);
        cursor: pointer;
    }

    /* Share */
    .otica-gia-cart-share {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        padding: 0 4px;
    }

    .otica-gia-cart-share a {
        color: var(--otica-gia-gold, #C4A35A);
        font-weight: 600;
        text-decoration: none;
    }

    .otica-gia-cart-share a:hover {
        text-decoration: underline;
    }

    /* Upsell */
    .otica-gia-cart-upsell {
        margin-top: 8px;
    }

    .otica-gia-cart-upsell-title {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 16px;
    }

    .otica-gia-cart-upsell-title span {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-cart-upsell-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .otica-gia-cart-upsell-track::-webkit-scrollbar {
        display: none;
    }

    .otica-gia-cart-upsell-card {
        flex: 0 0 140px;
        scroll-snap-align: start;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 14px;
        padding: 12px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
    }

    .otica-gia-cart-upsell-card img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 10px;
        background: #f5f2ee;
    }

    .otica-gia-cart-upsell-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .otica-gia-cart-upsell-name {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .otica-gia-cart-upsell-price {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-cart-upsell-add {
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--otica-gia-text, #1A1A1A);
        color: var(--otica-gia-white, #FFFFFF);
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .otica-gia-cart-upsell-add:hover {
        background: var(--otica-gia-green, #2D6B4F);
        transform: scale(1.1);
    }

    /* -------- Coluna Direita -------- */
    .otica-gia-cart-right {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: sticky;
        top: 24px;
    }

    .otica-gia-cart-box {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .otica-gia-cart-box-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .otica-gia-cart-box-header h4 {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-cart-box-header a {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-decoration: none;
    }

    .otica-gia-cart-box-header a:hover {
        text-decoration: underline;
    }

    .otica-gia-cart-address {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-cart-address svg {
        color: var(--otica-gia-gold, #C4A35A);
        flex-shrink: 0;
    }

    .otica-gia-cart-coupon-hint {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.8;
    }

    .otica-gia-cart-coupon-btn {
        width: 100%;
        padding: 12px;
        background: transparent;
        border: 1.5px dashed var(--otica-gia-gold, #C4A35A);
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .otica-gia-cart-coupon-btn:hover {
        background: rgba(196, 163, 90, 0.06);
    }

    /* Summary */
    .otica-gia-cart-summary {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .otica-gia-cart-summary-row {
        display: flex;
        justify-content: space-between;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-cart-summary-row--discount {
        color: var(--otica-gia-green, #2D6B4F);
        font-weight: 600;
    }

    .otica-gia-cart-summary-row--total {
        font-size: 16px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        padding-top: 10px;
        border-top: 1px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-cart-summary-pix {
        text-align: center;
        padding: 10px;
        background: rgba(45, 107, 79, 0.06);
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-cart-summary-pix-highlight {
        font-size: 18px;
        font-weight: 700;
        color: var(--otica-gia-green, #2D6B4F);
        display: block;
        margin-bottom: 2px;
    }

    /* Cashback */
    .otica-gia-cart-cashback {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: rgba(196, 163, 90, 0.06);
        border: 1px solid rgba(196, 163, 90, 0.12);
        border-radius: 12px;
    }

    .otica-gia-cart-cashback-icon {
        font-size: 20px;
        line-height: 1;
    }

    .otica-gia-cart-cashback p {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-cart-cashback span {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
    }

    /* Buttons */
    .otica-gia-cart-buy {
        width: 100%;
        padding: 16px;
        background: var(--otica-gia-green, #2D6B4F);
        color: var(--otica-gia-white, #FFFFFF);
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
    }

    .otica-gia-cart-buy:hover {
        background: var(--otica-gia-green-hover, #245a42);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(45, 107, 79, 0.35);
    }

    .otica-gia-cart-continue {
        display: block;
        width: 100%;
        padding: 14px;
        text-align: center;
        background: transparent;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 12px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .otica-gia-cart-continue:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.04);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-cart {
            padding: 40px 24px 60px;
        }

        .otica-gia-cart-layout {
            grid-template-columns: 1fr;
        }

        .otica-gia-cart-right {
            position: static;
            max-width: 500px;
        }

        .otica-gia-cart-item {
            grid-template-columns: 70px 1fr auto;
            gap: 12px;
        }

        .otica-gia-cart-item-qty {
            grid-column: 2;
            justify-self: start;
        }

        .otica-gia-cart-item-price {
            grid-column: 3;
            grid-row: 1;
        }

        .otica-gia-cart-item-remove {
            grid-column: 3;
            grid-row: 2;
            justify-self: end;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-cart-title {
            font-size: 26px;
        }

        .otica-gia-cart-item {
            grid-template-columns: 60px 1fr;
        }

        .otica-gia-cart-item-image {
            width: 60px;
            height: 60px;
        }

        .otica-gia-cart-item-price {
            grid-column: 2;
            grid-row: 2;
            align-items: flex-start;
        }

        .otica-gia-cart-item-qty {
            grid-column: 1;
            grid-row: 2;
        }

        .otica-gia-cart-item-remove {
            grid-column: 2;
            grid-row: 3;
            justify-self: start;
        }

        .otica-gia-cart-shipping-option {
            padding: 12px;
        }

        .otica-gia-cart-shipping-name {
            font-size: 12px;
        }
    }




    /* ============================================
       CHECKOUT / CONFIRMAR COMPRA
    ============================================ */
    .otica-gia-checkout {
        width: 100%;
        padding: 60px 48px 100px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        min-height: 100vh;
    }

    .otica-gia-checkout-container {
        max-width: 1300px;
        margin: 0 auto;
    }

    .otica-gia-checkout-title {
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 32px;
    }

    /* -------- Layout -------- */
    .otica-gia-checkout-layout {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 32px;
        align-items: start;
    }

    /* -------- Steps -------- */
    .otica-gia-checkout-left {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    @media(max-width:540px){
        .otica-gia-checkout-left {
            min-width: 0px;
        }
    }

    .otica-gia-checkout-step {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 24px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
    }

    .otica-gia-checkout-step-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 23px;
        transition: margin-bottom 0.3s ease;
    }

    @media(max-width:540px){
        .otica-gia-checkout-step-header{
            display:block;
        }
    }

    .otica-gia-checkout-step-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--otica-gia-bg, #F5F0EB);
        color: var(--otica-gia-gold, #C4A35A);
        flex-shrink: 0;
    }

    .otica-gia-checkout-step-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-checkout-step-value {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text-light, #555555);
        margin-left: auto;
        margin-right: 12px;
    }

    .otica-gia-checkout-step-action {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .otica-gia-checkout-step-action:hover {
        color: var(--otica-gia-green, #2D6B4F);
        text-decoration: underline;
    }

    /* View mode */
    .otica-gia-checkout-step-view {
        display: block;
        margin-top: 16px;
        animation: otica-gia-checkout-fadeIn 0.3s ease;
    }

    .otica-gia-checkout-step-form {
        display: none;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--otica-gia-border, #E5E0D8);
        animation: otica-gia-checkout-fadeIn 0.3s ease;
    }

    .otica-gia-checkout-step.is-editing .otica-gia-checkout-step-view {
        display: none;
    }

    .otica-gia-checkout-step.is-editing .otica-gia-checkout-step-form {
        display: block;
    }

    .otica-gia-checkout-step.is-editing .otica-gia-checkout-step-header {
        margin-bottom: 0;
    }

    @keyframes otica-gia-checkout-fadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* -------- Formulários -------- */
    .otica-gia-checkout-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .otica-gia-checkout-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    .otica-gia-checkout-form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .otica-gia-checkout-form-group--sm {
        max-width: 120px;
    }

    .otica-gia-checkout-form-group--xs {
        max-width: 90px;
    }

    .otica-gia-checkout-form-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .otica-gia-checkout-form-input {
        padding: 12px 14px;
        background: var(--otica-gia-bg, #F5F0EB);
        border: 1.5px solid transparent;
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        color: var(--otica-gia-text, #1A1A1A);
        outline: none;
        transition: all 0.25s ease;
        width: 100%;
    }

    .otica-gia-checkout-form-input::placeholder {
        color: rgba(85, 85, 85, 0.4);
    }

    .otica-gia-checkout-form-input:focus {
        border-color: var(--otica-gia-gold, #C4A35A);
        background: var(--otica-gia-white, #FFFFFF);
        box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.1);
    }

    .otica-gia-checkout-form-actions {
        display: flex;
        gap: 12px;
        margin-top: 8px;
        justify-content: flex-end;
    }

    .otica-gia-checkout-form-btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
    }

    .otica-gia-checkout-form-btn--primary {
        background: var(--otica-gia-green, #2D6B4F);
        color: var(--otica-gia-white, #FFFFFF);
    }

    .otica-gia-checkout-form-btn--primary:hover {
        background: var(--otica-gia-green-hover, #245a42);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(45, 107, 79, 0.25);
    }

    .otica-gia-checkout-form-btn--outline {
        background: transparent;
        color: var(--otica-gia-text-light, #555555);
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-checkout-form-btn--outline:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
    }

    /* -------- Endereço -------- */
    .otica-gia-checkout-address-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .otica-gia-checkout-address-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }

    .otica-gia-checkout-address-card:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-checkout-address-card--selected {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: rgba(45, 107, 79, 0.02);
    }

    .otica-gia-checkout-address-card input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .otica-gia-checkout-address-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

    .otica-gia-checkout-address-info strong {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-checkout-address-info span {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-checkout-address-edit {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-decoration: none;
        margin-top: 4px;
        width: fit-content;
    }

    .otica-gia-checkout-address-edit:hover {
        text-decoration: underline;
    }

    .otica-gia-checkout-address-check {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--otica-gia-border, #E5E0D8);
        flex-shrink: 0;
        margin-top: 2px;
        transition: all 0.2s ease;
        position: relative;
    }

    .otica-gia-checkout-address-card--selected .otica-gia-checkout-address-check {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-checkout-address-card--selected .otica-gia-checkout-address-check::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 5px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .otica-gia-checkout-address-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    /* -------- Frete -------- */
    .otica-gia-checkout-shipping-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .otica-gia-checkout-shipping-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .otica-gia-checkout-shipping-option:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-checkout-shipping-option--selected {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: rgba(45, 107, 79, 0.02);
    }

    .otica-gia-checkout-shipping-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .otica-gia-checkout-shipping-info strong {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-checkout-shipping-info span {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-checkout-shipping-price {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-checkout-shipping-free {
        color: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-checkout-shipping-price input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--otica-gia-green, #2D6B4F);
        cursor: pointer;
    }

    /* -------- Pagamento -------- */
    .otica-gia-checkout-payment-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .otica-gia-checkout-payment-option {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }

    .otica-gia-checkout-payment-option:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-checkout-payment-option--selected {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: rgba(45, 107, 79, 0.02);
    }

    .otica-gia-checkout-payment-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--otica-gia-bg, #F5F0EB);
        border-radius: 10px;
        font-size: 18px;
        flex-shrink: 0;
    }

    .otica-gia-checkout-payment-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

    .otica-gia-checkout-payment-info strong {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-checkout-payment-info span {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-checkout-payment-option input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .otica-gia-checkout-payment-check {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--otica-gia-border, #E5E0D8);
        flex-shrink: 0;
        transition: all 0.2s ease;
        position: relative;
    }

    .otica-gia-checkout-payment-option--selected .otica-gia-checkout-payment-check {
        border-color: var(--otica-gia-green, #2D6B4F);
        background: var(--otica-gia-green, #2D6B4F);
    }

    .otica-gia-checkout-payment-option--selected .otica-gia-checkout-payment-check::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 5px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .otica-gia-checkout-payment-form {
        margin-top: 16px;
        padding: 20px;
        background: var(--otica-gia-bg, #F5F0EB);
        border-radius: 12px;
        animation: otica-gia-checkout-fadeIn 0.3s ease;
    }

    /* -------- Resumo -------- */
    .otica-gia-checkout-right {
        position: sticky;
        top: 24px;
    }

    .otica-gia-checkout-summary {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 24px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .otica-gia-checkout-summary-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .otica-gia-checkout-summary-header h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-checkout-summary-header a {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-decoration: none;
    }

    .otica-gia-checkout-summary-header a:hover {
        text-decoration: underline;
    }

    .otica-gia-checkout-summary-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .otica-gia-checkout-summary-row {
        display: flex;
        justify-content: space-between;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-checkout-summary-row--discount {
        color: var(--otica-gia-green, #2D6B4F);
        font-weight: 600;
    }

    .otica-gia-checkout-summary-row--total {
        font-size: 16px;
        font-weight: 700;
        color: var(--otica-gia-text, #1A1A1A);
        padding-top: 12px;
        border-top: 1px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-checkout-summary-pix {
        text-align: center;
        padding: 12px;
        background: rgba(45, 107, 79, 0.06);
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-checkout-summary-pix-highlight {
        font-size: 18px;
        font-weight: 700;
        color: var(--otica-gia-green, #2D6B4F);
        display: block;
        margin-bottom: 2px;
    }

    .otica-gia-checkout-buy-btn {
        width: 100%;
        padding: 16px;
        background: var(--otica-gia-green, #2D6B4F);
        color: var(--otica-gia-white, #FFFFFF);
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
    }

    .otica-gia-checkout-buy-btn:hover {
        background: var(--otica-gia-green-hover, #245a42);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(45, 107, 79, 0.35);
    }

    .otica-gia-checkout-secure {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
        opacity: 0.7;
    }

    .otica-gia-checkout-secure svg {
        color: var(--otica-gia-gold, #C4A35A);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-checkout {
            padding: 40px 24px 60px;
        }

        .otica-gia-checkout-layout {
            grid-template-columns: 1fr;
        }

        .otica-gia-checkout-right {
            position: static;
            max-width: 500px;
        }

        .otica-gia-checkout-form-row {
            grid-template-columns: 1fr;
        }

        .otica-gia-checkout-form-group--sm,
        .otica-gia-checkout-form-group--xs {
            max-width: 100%;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-checkout-title {
            font-size: 26px;
        }

        .otica-gia-checkout-step {
            padding: 20px;
        }

        .otica-gia-checkout-form-actions {
            flex-direction: column;
        }

        .otica-gia-checkout-form-btn {
            width: 100%;
            text-align: center;
        }

        .otica-gia-checkout-address-actions {
            flex-direction: column;
        }
    }



     /* ============================================
       HERO PRINCIPAL — HOMEPAGE
    ============================================ */
    .otica-gia-hero-main {
        width: 100%;
        min-height: 100vh;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 60px 48px 48px;
    }

    /* Decoração de fundo */
    .otica-gia-hero-main::before {
        content: '';
        position: absolute;
        top: -10%;
        right: -5%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.06) 0%, transparent 65%);
        pointer-events: none;
    }

    .otica-gia-hero-main::after {
        content: '';
        position: absolute;
        bottom: -15%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(45, 107, 79, 0.04) 0%, transparent 65%);
        pointer-events: none;
    }

    .otica-gia-hero-main-container {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    /* -------- Conteúdo -------- */
    .otica-gia-hero-main-content {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-top: 20px;
    }

    .otica-gia-hero-main-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
    }

    .otica-gia-hero-main-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-hero-main-title {
        font-family: 'Playfair Display', serif;
        font-size: 56px;
        line-height: 1.1;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-hero-main-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-hero-main-subtitle {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: var(--otica-gia-text-light, #555555);
        max-width: 460px;
        margin: 0;
    }

    /* CTAs */
    .otica-gia-hero-main-ctas {
        display: flex;
        gap: 14px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .otica-gia-hero-main-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 32px;
        border-radius: 50px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .otica-gia-hero-main-btn--primary {
        background: var(--otica-gia-green, #2D6B4F);
        color: var(--otica-gia-white, #FFFFFF);
        box-shadow: 0 8px 32px rgba(45, 107, 79, 0.3);
    }

    .otica-gia-hero-main-btn--primary:hover {
        background: var(--otica-gia-green-hover, #245a42);
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(45, 107, 79, 0.4);
    }

    .otica-gia-hero-main-btn--primary svg {
        transition: transform 0.3s ease;
    }

    .otica-gia-hero-main-btn--primary:hover svg {
        transform: translateX(3px);
    }

    .otica-gia-hero-main-btn--secondary {
        background: transparent;
        color: var(--otica-gia-text, #1A1A1A);
        border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-hero-main-btn--secondary:hover {
        border-color: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.04);
    }

    /* Stats */
    .otica-gia-hero-main-stats {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 16px;
        padding-top: 32px;
        border-top: 1px solid var(--otica-gia-border, #E5E0D8);
    }

    .otica-gia-hero-main-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .otica-gia-hero-main-stat-number {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1;
    }

    .otica-gia-hero-main-stat-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--otica-gia-text-light, #555555);
    }

    .otica-gia-hero-main-stat-divider {
        width: 1px;
        height: 36px;
        background: var(--otica-gia-border, #E5E0D8);
    }

    /* -------- Visual -------- */
    .otica-gia-hero-main-visual {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .otica-gia-hero-main-image-wrap {
        position: relative;
        width: 100%;
        max-width: 440px;
    }

    .otica-gia-hero-main-image {
        width: 100%;
        height: 580px;
        object-fit: cover;
        border-radius: 200px 200px 20px 20px;
        display: block;
        position: relative;
        z-index: 2;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
    }

    .otica-gia-hero-main-image-frame {
        position: absolute;
        top: -16px;
        left: -16px;
        right: 16px;
        bottom: 16px;
        border: 1px solid rgba(196, 163, 90, 0.25);
        border-radius: 200px 200px 20px 20px;
        z-index: 1;
        pointer-events: none;
    }

    /* Card flutuante */
    .otica-gia-hero-main-float {
        position: absolute;
        bottom: 60px;
        left: -40px;
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.03);
        z-index: 10;
        max-width: 240px;
        animation: otica-gia-hero-main-float 4s ease-in-out infinite;
    }

    @keyframes otica-gia-hero-main-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    .otica-gia-hero-main-float-stars {
        color: var(--otica-gia-gold, #C4A35A);
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }

    .otica-gia-hero-main-float-text {
        font-family: 'Playfair Display', serif;
        font-size: 14px;
        font-style: italic;
        color: var(--otica-gia-text, #1A1A1A);
        line-height: 1.5;
        margin: 0 0 12px 0;
    }

    .otica-gia-hero-main-float-author {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .otica-gia-hero-main-float-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--otica-gia-gold, #C4A35A);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--otica-gia-white, #FFFFFF);
    }

    .otica-gia-hero-main-float-name {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
    }

    .otica-gia-hero-main-float-loc {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        color: var(--otica-gia-text-light, #555555);
    }

    /* Badge flutuante */
    .otica-gia-hero-main-badge {
        position: absolute;
        top: 40px;
        right: -20px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--otica-gia-white, #FFFFFF);
        padding: 10px 18px;
        border-radius: 50px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--otica-gia-text, #1A1A1A);
        z-index: 10;
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .otica-gia-hero-main-badge-dot {
        width: 8px;
        height: 8px;
        background: var(--otica-gia-green, #2D6B4F);
        border-radius: 50%;
        animation: otica-gia-hero-main-pulse 2s ease-in-out infinite;
    }

    @keyframes otica-gia-hero-main-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(0.85); }
    }

    /* Animação de entrada */
    .otica-gia-hero-main-content {
        opacity: 0;
        transform: translateY(30px);
        animation: otica-gia-hero-main-reveal 0.9s ease forwards;
        animation-delay: 0.2s;
    }

    .otica-gia-hero-main-visual {
        opacity: 0;
        transform: translateY(30px);
        animation: otica-gia-hero-main-reveal 0.9s ease forwards;
        animation-delay: 0.4s;
    }

    @keyframes otica-gia-hero-main-reveal {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-hero-main {
            min-height: auto;
            padding: 100px 40px 60px;
        }

        .otica-gia-hero-main-container {
            gap: 48px;
        }

        .otica-gia-hero-main-title {
            font-size: 44px;
        }

        .otica-gia-hero-main-image {
            height: 480px;
        }

        .otica-gia-hero-main-float {
            left: -20px;
            bottom: 40px;
            max-width: 200px;
            padding: 16px 20px;
        }

        .otica-gia-hero-main-badge {
            right: -10px;
            top: 20px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-hero-main {
            padding: 80px 24px 60px;
        }

        .otica-gia-hero-main-container {
            grid-template-columns: 1fr;
            gap: 48px;
            text-align: center;
        }

        .otica-gia-hero-main-content {
            align-items: center;
            order: 2;
            padding-top: 0;
        }

        .otica-gia-hero-main-title {
            font-size: 36px;
        }

        .otica-gia-hero-main-subtitle {
            max-width: 100%;
        }

        .otica-gia-hero-main-ctas {
            justify-content: center;
        }

        .otica-gia-hero-main-stats {
            justify-content: center;
            width: 100%;
            max-width: 400px;
        }

        .otica-gia-hero-main-visual {
            order: 1;
        }

        .otica-gia-hero-main-image-wrap {
            max-width: 320px;
        }

        .otica-gia-hero-main-image {
            height: 420px;
            border-radius: 160px 160px 16px 16px;
        }

        .otica-gia-hero-main-image-frame {
            border-radius: 160px 160px 16px 16px;
        }

        .otica-gia-hero-main-float {
            left: -10px;
            bottom: 30px;
            max-width: 180px;
            padding: 14px 16px;
        }

        .otica-gia-hero-main-float-text {
            font-size: 13px;
        }

        .otica-gia-hero-main-badge {
            right: 0;
            top: 10px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-hero-main-title {
            font-size: 30px;
        }

        .otica-gia-hero-main-btn {
            width: 100%;
            justify-content: center;
            padding: 14px 24px;
            font-size: 12px;
        }

        .otica-gia-hero-main-stats {
            gap: 16px;
        }

        .otica-gia-hero-main-stat-number {
            font-size: 22px;
        }

        .otica-gia-hero-main-image {
            height: 360px;
        }

        .otica-gia-hero-main-float {
            display: none;
        }
    }



      /* ============================================
       SEÇÃO INSTITUCIONAL — CENTRALIZADA
    ============================================ */
    .otica-gia-about {
        width: 100%;
        padding: 120px 48px;
        background-color: var(--otica-gia-white, #FFFFFF);
        position: relative;
        overflow: hidden;
    }

    .otica-gia-about::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.03) 0%, transparent 70%);
        pointer-events: none;
    }

    .otica-gia-about-container {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    /* -------- Header -------- */
    .otica-gia-about-header {
        margin-bottom: 36px;
    }

    .otica-gia-about-tag {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 24px;
    }

    .otica-gia-about-tag-line {
        display: block;
        width: 40px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
        opacity: 0.5;
    }

    .otica-gia-about-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-about-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    /* -------- Body -------- */
    .otica-gia-about-body {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 48px;
        max-width: 680px;
    }

    .otica-gia-about-lead {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.7;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-about-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.9;
        color: var(--otica-gia-text-light, #555555);
        margin: 0;
    }

    /* -------- Quote -------- */
    .otica-gia-about-quote {
        position: relative;
        max-width: 600px;
        margin: 0 0 56px 0;
        padding: 40px 48px;
        background: var(--otica-gia-bg, #F5F0EB);
        border-radius: 20px;
        border: none;
        text-align: center;
    }

    .otica-gia-about-quote-mark {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background: var(--otica-gia-white, #FFFFFF);
        border: 1px solid var(--otica-gia-border, #E5E0D8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        color: var(--otica-gia-gold, #C4A35A);
        line-height: 1;
    }

    .otica-gia-about-quote p {
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-style: italic;
        line-height: 1.7;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0 0 16px 0;
    }

    .otica-gia-about-quote cite {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--otica-gia-text-light, #555555);
        font-style: normal;
    }

    /* -------- Pillars -------- */
    .otica-gia-about-pillars {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 32px;
        width: 100%;
        max-width: 900px;
    }

    .otica-gia-about-pillar {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .otica-gia-about-pillar-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1.5px solid rgba(196, 163, 90, 0.25);
        color: var(--otica-gia-gold, #C4A35A);
        transition: all 0.3s ease;
        background: rgba(196, 163, 90, 0.03);
    }

    .otica-gia-about-pillar:hover .otica-gia-about-pillar-icon {
        border-color: var(--otica-gia-gold, #C4A35A);
        background: rgba(196, 163, 90, 0.08);
        transform: translateY(-3px);
    }

    .otica-gia-about-pillar-title {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin: 0;
    }

    .otica-gia-about-pillar-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        line-height: 1.7;
        color: var(--otica-gia-text-light, #555555);
        max-width: 240px;
        margin: 0;
    }

    .otica-gia-about-pillar-divider {
        width: 1px;
        height: 80px;
        background: linear-gradient(to bottom, transparent, var(--otica-gia-border, #E5E0D8), transparent);
        margin-top: 28px;
        opacity: 0.6;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-about {
            padding: 100px 40px;
        }

        .otica-gia-about-title {
            font-size: 36px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-about {
            padding: 80px 24px;
        }

        .otica-gia-about-title {
            font-size: 30px;
        }

        .otica-gia-about-lead {
            font-size: 18px;
        }

        .otica-gia-about-quote {
            padding: 36px 28px;
        }

        .otica-gia-about-quote p {
            font-size: 16px;
        }

        .otica-gia-about-pillars {
            flex-direction: column;
            gap: 40px;
        }

        .otica-gia-about-pillar-divider {
            width: 60px;
            height: 1px;
            margin: 0 auto;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-about-title {
            font-size: 26px;
        }

        .otica-gia-about-text {
            font-size: 14px;
        }

        .otica-gia-about-quote {
            padding: 32px 24px;
            border-radius: 16px;
        }

        .otica-gia-about-pillar-icon {
            width: 48px;
            height: 48px;
        }

        .otica-gia-about-pillar-title {
            font-size: 18px;
        }
    }


     /* ============================================
       SEÇÃO FAQ — PERGUNTAS FREQUENTES
    ============================================ */
    .otica-gia-faq {
        width: 100%;
        padding: 100px 48px;
        background-color: var(--otica-gia-bg, #F5F0EB);
        position: relative;
    }

    .otica-gia-faq-container {
        max-width: 800px;
        margin: 0 auto;
    }

    /* -------- Header -------- */
    .otica-gia-faq-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .otica-gia-faq-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .otica-gia-faq-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-faq-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--otica-gia-text, #1A1A1A);
        margin-bottom: 16px;
    }

    .otica-gia-faq-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-faq-subtitle {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        color: var(--otica-gia-text-light, #555555);
        margin: 0;
    }

    .otica-gia-faq-subtitle a {
        color: var(--otica-gia-gold, #C4A35A);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

    .otica-gia-faq-subtitle a:hover {
        border-bottom-color: var(--otica-gia-gold, #C4A35A);
    }

    /* -------- Lista -------- */
    .otica-gia-faq-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .otica-gia-faq-item {
        background: var(--otica-gia-white, #FFFFFF);
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
        overflow: hidden;
        transition: box-shadow 0.3s ease;
    }

    .otica-gia-faq-item:hover {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
    }

    .otica-gia-faq-item.is-open {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }

    /* Pergunta */
    .otica-gia-faq-question {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 22px 28px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--otica-gia-text, #1A1A1A);
        transition: color 0.25s ease;
        position: relative;
    }

    .otica-gia-faq-question:hover {
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-faq-question span:first-child {
        flex: 1;
        padding-right: 12px;
    }

    .otica-gia-faq-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--otica-gia-bg, #F5F0EB);
        color: var(--otica-gia-text-light, #555555);
        flex-shrink: 0;
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .otica-gia-faq-item.is-open .otica-gia-faq-icon {
        background: var(--otica-gia-gold, #C4A35A);
        color: var(--otica-gia-white, #FFFFFF);
        transform: rotate(180deg);
    }

    /* Resposta */
    .otica-gia-faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .otica-gia-faq-item.is-open .otica-gia-faq-answer {
        max-height: 300px;
    }

    .otica-gia-faq-answer-inner {
        padding: 0 28px 24px;
    }

    .otica-gia-faq-answer-inner p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        line-height: 1.8;
        color: var(--otica-gia-text-light, #555555);
        margin: 0;
    }

    .otica-gia-faq-answer-inner strong {
        color: var(--otica-gia-text, #1A1A1A);
        font-weight: 600;
    }

    /* Linha sutil no topo da resposta */
    .otica-gia-faq-answer-inner::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: var(--otica-gia-border, #E5E0D8);
        margin-bottom: 20px;
        opacity: 0.5;
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-faq {
            padding: 80px 40px;
        }

        .otica-gia-faq-title {
            font-size: 36px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-faq {
            padding: 60px 24px;
        }

        .otica-gia-faq-title {
            font-size: 30px;
        }

        .otica-gia-faq-question {
            padding: 18px 22px;
            font-size: 14px;
        }

        .otica-gia-faq-answer-inner {
            padding: 0 22px 20px;
        }

        .otica-gia-faq-answer-inner p {
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-faq-title {
            font-size: 26px;
        }

        .otica-gia-faq-question {
            padding: 16px 18px;
        }

        .otica-gia-faq-icon {
            width: 28px;
            height: 28px;
        }

        .otica-gia-faq-answer-inner {
            padding: 0 18px 18px;
        }
    }



    /* ============================================
       SEÇÃO INSTITUCIONAL — FUNDO ESCURO
    ============================================ */
    .otica-gia-dark {
        width: 100%;
        padding: 120px 48px;
        background-color: #0a0a0a;
        position: relative;
        overflow: hidden;
    }

    /* Glows decorativos */
    .otica-gia-dark::before {
        content: '';
        position: absolute;
        top: -15%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.07) 0%, transparent 65%);
        pointer-events: none;
    }

    .otica-gia-dark::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(196, 163, 90, 0.04) 0%, transparent 65%);
        pointer-events: none;
    }

    .otica-gia-dark-container {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 80px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    /* -------- LADO ESQUERDO: Imagem -------- */
    .otica-gia-dark-media {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .otica-gia-dark-image-wrap {
        position: relative;
        width: 100%;
        max-width: 420px;
    }

    .otica-gia-dark-image {
        width: 100%;
        height: 540px;
        object-fit: cover;
        border-radius: 20px;
        display: block;
        position: relative;
        z-index: 2;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    }

    .otica-gia-dark-image-frame {
        position: absolute;
        top: -14px;
        left: -14px;
        right: 14px;
        bottom: 14px;
        border: 1px solid rgba(196, 163, 90, 0.2);
        border-radius: 20px;
        z-index: 1;
        pointer-events: none;
    }

    /* Card flutuante */
    .otica-gia-dark-float {
        position: absolute;
        bottom: 40px;
        right: -20px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 20px 28px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        animation: otica-gia-dark-float 5s ease-in-out infinite;
    }

    @keyframes otica-gia-dark-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    .otica-gia-dark-float-number {
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        font-weight: 400;
        color: var(--otica-gia-gold, #C4A35A);
        line-height: 1;
    }

    .otica-gia-dark-float-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        color:#333;
        opacity: 0.55;
    }

    /* -------- LADO DIREITO: Conteúdo -------- */
    .otica-gia-dark-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .otica-gia-dark-tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 3px;
        font-weight: 600;
        color: var(--otica-gia-gold, #C4A35A);
        text-transform: uppercase;
    }

    .otica-gia-dark-tag-line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-dark-title {
        font-family: 'Playfair Display', serif;
        font-size: 44px;
        line-height: 1.15;
        font-weight: 400;
        color: #ffffff;
        margin: 0;
    }

    .otica-gia-dark-title-accent {
        color: var(--otica-gia-gold, #C4A35A);
        font-style: italic;
    }

    .otica-gia-dark-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.6);
        max-width: 480px;
        margin: 0;
    }

    /* Quote */
    .otica-gia-dark-quote {
        position: relative;
        margin: 8px 0;
        padding: 20px 0 20px 24px;
        border-left: 2px solid var(--otica-gia-gold, #C4A35A);
        text-align: left;
    }

    .otica-gia-dark-quote-mark {
        position: absolute;
        top: -6px;
        left: 24px;
        font-family: 'Playfair Display', serif;
        font-size: 48px;
        color: var(--otica-gia-gold, #C4A35A);
        opacity: 0.25;
        line-height: 1;
        pointer-events: none;
    }

    .otica-gia-dark-quote p {
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-style: italic;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        margin: 0;
        position: relative;
        z-index: 1;
    }

    /* Values */
    .otica-gia-dark-values {
        display: flex;
        gap: 40px;
        margin-top: 8px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .otica-gia-dark-value {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .otica-gia-dark-value-num {
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 1;
    }

    .otica-gia-dark-value-num span {
        font-size: 18px;
        color: var(--otica-gia-gold, #C4A35A);
    }

    .otica-gia-dark-value-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
    }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .otica-gia-dark {
            padding: 100px 40px;
        }

        .otica-gia-dark-container {
            gap: 60px;
        }

        .otica-gia-dark-title {
            font-size: 38px;
        }

        .otica-gia-dark-image {
            height: 460px;
        }
    }

    @media (max-width: 768px) {
        .otica-gia-dark {
            padding: 80px 24px;
        }

        .otica-gia-dark-container {
            grid-template-columns: 1fr;
            gap: 48px;
            text-align: center;
        }

        .otica-gia-dark-media {
            order: 1;
            max-width: 340px;
            margin: 0 auto;
        }

        .otica-gia-dark-image {
            height: 400px;
        }

        .otica-gia-dark-float {
            right: -10px;
            bottom: 30px;
            padding: 16px 22px;
        }

        .otica-gia-dark-content {
            order: 2;
            align-items: center;
        }

        .otica-gia-dark-text {
            max-width: 100%;
        }

        .otica-gia-dark-quote {
            text-align: left;
            max-width: 480px;
        }

        .otica-gia-dark-values {
            justify-content: center;
            width: 100%;
            max-width: 400px;
        }
    }

    @media (max-width: 480px) {
        .otica-gia-dark-title {
            font-size: 32px;
        }

        .otica-gia-dark-image {
            height: 360px;
        }

        .otica-gia-dark-float {
            display: none;
        }

        .otica-gia-dark-values {
            gap: 24px;
        }

        .otica-gia-dark-value-num {
            font-size: 26px;
        }

        .otica-gia-dark-quote p {
            font-size: 16px;
        }
    }




    /* ============================================
   SEÇÃO DETALHE DO PRODUTO
   ============================================ */
.otica-gia-product-detail {
    width: 100%;
    padding: 60px 48px 100px;
    background-color: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-product-detail-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ---------- Galeria ---------- */
.otica-gia-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

.otica-gia-product-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    cursor: zoom-in;
}

.otica-gia-product-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.4s ease;
}

.otica-gia-product-gallery-main:hover .otica-gia-product-gallery-main-img {
    transform: scale(1.03);
}

.otica-gia-product-gallery-zoom-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-text, #1A1A1A);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-4px);
}

.otica-gia-product-gallery-main:hover .otica-gia-product-gallery-zoom-btn {
    opacity: 1;
    transform: translateY(0);
}

.otica-gia-product-gallery-zoom-btn:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.otica-gia-product-gallery-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 0px solid transparent;
    background: #fff;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    position: relative;
}

.otica-gia-product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 5px;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.otica-gia-product-gallery-thumb:hover img {
    transform: scale(1.08);
}

.otica-gia-product-gallery-thumb.active {
    border-color: var(--otica-gia-gold, #C4A35A);
    box-shadow: 0 4px 12px rgba(196, 163, 90, 0.15);
}

.otica-gia-product-gallery-thumb.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid var(--otica-gia-gold, #C4A35A);
    pointer-events: none;
}

/* ---------- Informações do Produto ---------- */
.otica-gia-product-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 8px;
}

.otica-gia-product-info-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--otica-gia-text, #1A1A1A);
}

/* Preço */
.otica-gia-product-info-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.otica-gia-product-info-price-old {
    font-size: 14px;
    color: var(--otica-gia-text-light, #555555);
    text-decoration: line-through;
    opacity: 0.7;
}

.otica-gia-product-info-price-current {
    font-size: 32px;
    font-weight: 700;
    color: var(--otica-gia-text, #1A1A1A);
    letter-spacing: -0.5px;
}

.otica-gia-product-info-price-cashback {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: middle;
}

.otica-gia-product-info-price-installment {
    font-size: 13px;
    color: var(--otica-gia-text-light, #555555);
    margin-top: 4px;
}

/* Cores */
.otica-gia-product-info-color {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.otica-gia-product-info-color-label {
    font-size: 14px;
    color: var(--otica-gia-text-light, #555555);
}

.otica-gia-product-info-color-label strong {
    color: var(--otica-gia-text, #1A1A1A);
    font-weight: 500;
}

.otica-gia-product-info-color-options {
    display: flex;
    gap: 12px;
}

.otica-gia-product-info-color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.otica-gia-product-info-color-option:hover {
    transform: scale(1.1);
}

.otica-gia-product-info-color-option.active {
    border-color: var(--otica-gia-text, #1A1A1A);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--otica-gia-text, #1A1A1A);
}

.otica-gia-product-info-color-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.otica-gia-product-info-color-option.active .otica-gia-product-info-color-check {
    opacity: 1;
}

/* Oferta */
.otica-gia-product-info-offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.otica-gia-product-info-offer-tag {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--otica-gia-text-light, #555555);
    text-align: right;
}

.otica-gia-product-info-offer-box {
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.otica-gia-product-info-offer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-product-info-offer-option:last-child {
    border-bottom: none;
}

.otica-gia-product-info-offer-option:hover {
    background: rgba(196, 163, 90, 0.03);
}

.otica-gia-product-info-offer-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.otica-gia-product-info-offer-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--otica-gia-border, #E5E0D8);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.otica-gia-product-info-offer-option input:checked + .otica-gia-product-info-offer-radio {
    border-color: var(--otica-gia-text, #1A1A1A);
    background: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-product-info-offer-radio::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.otica-gia-product-info-offer-option input:checked + .otica-gia-product-info-offer-radio::after {
    opacity: 1;
    transform: scale(1);
}

.otica-gia-product-info-offer-text {
    flex: 1;
    font-size: 14px;
    color: var(--otica-gia-text, #1A1A1A);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otica-gia-product-info-offer-save {
    font-size: 12px;
    color: var(--otica-gia-green, #2D6B4F);
    font-weight: 500;
}

.otica-gia-product-info-offer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    white-space: nowrap;
}

.otica-gia-product-info-offer-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Botão */
.otica-gia-product-info-add-btn {
    width: 100%;
    padding: 18px 24px;
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(26, 26, 26, 0.2);
}

.otica-gia-product-info-add-btn:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(26, 26, 26, 0.3);
}


.otica-gia-product-info-add-btn.btn-provador-virtual{
    background: #f2f2f2;
    color: #333;
    margin-bottom: 30px;
    margin-top: -13px;
}

.otica-gia-product-info-add-btn.btn-no-provador {
    margin-bottom: 30px;
}

/* Benefícios */
.otica-gia-product-info-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.otica-gia-product-info-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    color: var(--otica-gia-text-light, #555555);
    line-height: 1.5;
}

.otica-gia-product-info-benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
    flex-shrink: 0;
    margin-top: 2px;
}

.otica-gia-product-info-benefit div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otica-gia-product-info-benefit strong {
    color: var(--otica-gia-text, #1A1A1A);
    font-weight: 600;
    font-size: 13px;
}

.otica-gia-product-info-benefit span {
    font-size: 12px;
    opacity: 0.85;
}

/* Accordion */
.otica-gia-product-info-accordion {
    border-top: 1px solid var(--otica-gia-border, #E5E0D8);
    margin-top: 8px;
}

.otica-gia-product-info-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    cursor: pointer;
    transition: color 0.2s ease;
}

.otica-gia-product-info-accordion-header:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-product-info-accordion-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--otica-gia-bg, #F5F0EB);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.otica-gia-product-info-accordion-header:hover .otica-gia-product-info-accordion-icon {
    background: rgba(196, 163, 90, 0.1);
}

.otica-gia-product-info-accordion.open .otica-gia-product-info-accordion-icon {
    transform: rotate(45deg);
}

.otica-gia-product-info-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.otica-gia-product-info-accordion.open .otica-gia-product-info-accordion-body {
    max-height: 500px;
    padding-bottom: 24px;
}

.otica-gia-product-info-accordion-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.otica-gia-product-info-measures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.otica-gia-product-info-measure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-product-info-measure-label {
    font-size: 12px;
    color: var(--otica-gia-text-light, #555555);
}

.otica-gia-product-info-measure-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    text-align: right;
}

.otica-gia-product-info-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--otica-gia-text-light, #555555);
}

/* Guia de tamanhos: imagens em largura total, uma abaixo da outra */
.otica-gia-product-info-accordion + .otica-gia-product-info-accordion {
    margin-top: 0;
}
.otica-gia-product-info-accordion--guia .otica-gia-product-info-description p + p {
    margin-top: 10px;
}
.otica-gia-product-info-guia-imagens {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.otica-gia-product-info-guia-imagem {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    cursor: zoom-in;
}
.otica-gia-product-info-guia-imagem img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.otica-gia-lightbox {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.otica-gia-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.otica-gia-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245, 240, 235, 0.8);
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-text, #1A1A1A);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.otica-gia-lightbox-close:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
    transform: rotate(90deg);
}

.otica-gia-lightbox-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
}

.otica-gia-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.otica-gia-lightbox.active .otica-gia-lightbox-img {
    opacity: 1;
    transform: scale(1);
}

.otica-gia-lightbox-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.otica-gia-lightbox-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-text, #1A1A1A);
    cursor: pointer;
    transition: all 0.2s ease;
}

.otica-gia-lightbox-arrow:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-lightbox-counter {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--otica-gia-text-light, #555555);
    min-width: 50px;
    text-align: center;
    user-select: none;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-product-detail {
        padding: 40px 32px 80px;
    }
    
    .otica-gia-product-detail-container {
        gap: 40px;
    }
    
    .otica-gia-product-info-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .otica-gia-product-detail {
        padding: 24px 20px 60px;
    }
    
    .otica-gia-product-detail-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .otica-gia-product-gallery {
        position: relative;
        top: 0;
        gap: 12px;
    }
    
    .otica-gia-product-gallery-main {
        border-radius: 16px;
    }
    
    .otica-gia-product-gallery-main-img {
        padding: 24px;
    }
    
    .otica-gia-product-gallery-zoom-btn {
        opacity: 1;
        transform: translateY(0);
        width: 36px;
        height: 36px;
    }
    
    .otica-gia-product-gallery-thumbs {
        gap: 8px;
    }
    
    .otica-gia-product-info {
        gap: 24px;
    }
    
    .otica-gia-product-info-title {
        font-size: 26px;
    }
    
    .otica-gia-product-info-price-current {
        font-size: 28px;
    }
    
    .otica-gia-product-info-offer-tag {
        text-align: center;
    }
    
    .otica-gia-product-info-measures {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-lightbox-stage {
        padding: 60px 20px;
    }
    
    .otica-gia-lightbox-close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
    
    .otica-gia-lightbox-nav {
        bottom: 20px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .otica-gia-product-info-title {
        font-size: 22px;
    }
    
    .otica-gia-product-info-price-current {
        font-size: 24px;
    }
    
    .otica-gia-product-info-add-btn {
        padding: 16px 20px;
        font-size: 12px;
    }
    
    .otica-gia-product-gallery-main-img {
        padding: 16px;
    }
}



/* ============================================
   SEÇÃO AVALIAÇÕES / COMENTÁRIOS
   ============================================ */
.otica-gia-reviews {
    width: 100%;
    padding: 10px 48px 100px;
    background-color: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-reviews-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Header */
.otica-gia-reviews-header {
    text-align: center;
    margin-bottom: 48px;
}

.otica-gia-reviews-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.otica-gia-reviews-tag-line {
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-reviews-title {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-reviews-title-accent {
    color: var(--otica-gia-gold, #C4A35A);
    font-style: italic;
}

/* Layout */
.otica-gia-reviews-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}

/* ---------- Resumo Sidebar ---------- */
.otica-gia-reviews-summary {
    position: sticky;
    top: 24px;
}

.otica-gia-reviews-summary-box {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.04);
}

.otica-gia-reviews-summary-score {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
    margin-bottom: 24px;
}

.otica-gia-reviews-summary-number {
    display: block;
    font-size: 52px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    line-height: 1;
    margin-bottom: 8px;
}

.otica-gia-reviews-summary-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    color: var(--otica-gia-gold, #C4A35A);
    margin-bottom: 8px;
}

.otica-gia-reviews-summary-count {
    font-size: 12px;
    color: var(--otica-gia-text-light, #555555);
    opacity: 0.8;
}

/* Barras */
.otica-gia-reviews-summary-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.otica-gia-reviews-summary-bar {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;
    gap: 10px;
}

.otica-gia-reviews-summary-bar-label {
    font-size: 11px;
    color: var(--otica-gia-text-light, #555555);
    font-weight: 500;
}

.otica-gia-reviews-summary-bar-track {
    height: 6px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 10px;
    overflow: hidden;
}

.otica-gia-reviews-summary-bar-fill {
    height: 100%;
    background: var(--otica-gia-gold, #C4A35A);
    border-radius: 10px;
    transition: width 0.8s ease;
}

.otica-gia-reviews-summary-bar-value {
    font-size: 11px;
    color: var(--otica-gia-text-light, #555555);
    text-align: right;
    font-weight: 500;
}

/* Botão escrever */
.otica-gia-reviews-summary-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 50px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(45, 107, 79, 0.25);
}

.otica-gia-reviews-summary-btn:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 107, 79, 0.35);
}

/* ---------- Lista ---------- */
.otica-gia-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Filtros */
.otica-gia-reviews-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.otica-gia-reviews-filter {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--otica-gia-text-light, #555555);
    cursor: pointer;
    transition: all 0.3s ease;
}

.otica-gia-reviews-filter:hover {
    border-color: var(--otica-gia-gold, #C4A35A);
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-reviews-filter.active {
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    border-color: var(--otica-gia-text, #1A1A1A);
}

/* Item */
.otica-gia-reviews-item {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    animation: otica-gia-reviews-fade-in 0.4s ease;
}

@keyframes otica-gia-reviews-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.otica-gia-reviews-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.otica-gia-reviews-item-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.otica-gia-reviews-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--otica-gia-border, #E5E0D8);
    flex-shrink: 0;
}

.otica-gia-reviews-item-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.otica-gia-reviews-item-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.otica-gia-reviews-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-reviews-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--otica-gia-green, #2D6B4F);
    background: rgba(45, 107, 79, 0.08);
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.otica-gia-reviews-item-stars {
    display: flex;
    gap: 2px;
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-reviews-item-date {
    font-size: 12px;
    color: var(--otica-gia-text-light, #555555);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: auto;
}

.otica-gia-reviews-item-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    margin-bottom: 8px;
    line-height: 1.4;
}

.otica-gia-reviews-item-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--otica-gia-text-light, #555555);
    margin-bottom: 16px;
}

/* Fotos */
.otica-gia-reviews-item-photos {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.otica-gia-reviews-item-photo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: all 0.3s ease;
    position: relative;
}

.otica-gia-reviews-item-photo:hover {
    border-color: var(--otica-gia-gold, #C4A35A);
    transform: scale(1.05);
}

.otica-gia-reviews-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer */
.otica-gia-reviews-item-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-reviews-item-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--otica-gia-text-light, #555555);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.otica-gia-reviews-item-like:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-reviews-item-like.liked {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-reviews-item-like-count {
    opacity: 0.7;
}

/* Ver mais */
.otica-gia-reviews-more {
    text-align: center;
    margin-top: 40px;
}

.otica-gia-reviews-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    border: 1px solid var(--otica-gia-text, #1A1A1A);
    background: transparent;
    color: var(--otica-gia-text, #1A1A1A);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.otica-gia-reviews-more-btn:hover {
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-reviews {
        padding: 60px 32px 80px;
    }
    
    .otica-gia-reviews-title {
        font-size: 32px;
    }
    
    .otica-gia-reviews-layout {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .otica-gia-reviews {
        padding: 48px 20px 60px;
    }
    
    .otica-gia-reviews-title {
        font-size: 26px;
    }
    
    .otica-gia-reviews-layout {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-reviews-summary {
        position: relative;
        top: 0;
        order: -1;
    }
    
    .otica-gia-reviews-summary-box {
        padding: 24px;
    }
    
    .otica-gia-reviews-summary-number {
        font-size: 42px;
    }
    
    .otica-gia-reviews-item {
        padding: 20px;
    }
    
    .otica-gia-reviews-item-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .otica-gia-reviews-item-date {
        margin-left: 0;
        width: 100%;
        padding-left: 58px;
        margin-top: -6px;
    }
    
    .otica-gia-reviews-filters {
        gap: 6px;
    }
    
    .otica-gia-reviews-filter {
        padding: 6px 14px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .otica-gia-reviews-title {
        font-size: 22px;
    }
    
    .otica-gia-reviews-item-photos {
        gap: 8px;
    }
    
    .otica-gia-reviews-item-photo {
        width: 64px;
        height: 64px;
    }
    
    .otica-gia-reviews-summary-bar-label {
        font-size: 10px;
    }
}


/* ============================================
   ERRO 404
   ============================================ */
.otica-gia-404 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--otica-gia-bg, #F5F0EB);
    padding: 80px 24px;
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-404-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Visual — Óculos desalinhados */
.otica-gia-404-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.otica-gia-404-glasses {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    margin-bottom: 8px;
}

.otica-gia-404-lens {
    width: 80px;
    height: 56px;
    border: 3px solid var(--otica-gia-gold, #C4A35A);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: rgba(196, 163, 90, 0.04);
    position: relative;
}

.otica-gia-404-lens--left {
    transform: rotate(-8deg);
    animation: otica-gia-404-float-left 4s ease-in-out infinite;
}

.otica-gia-404-lens--right {
    transform: rotate(12deg) translateY(6px);
    border-color: #ccc;
    animation: otica-gia-404-float-right 4s ease-in-out infinite;
}

.otica-gia-404-bridge {
    width: 24px;
    height: 3px;
    background: var(--otica-gia-gold, #C4A35A);
    opacity: 0.3;
    transform: rotate(-5deg);
}

/* Hastes sutis */
.otica-gia-404-lens::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 32px;
    height: 3px;
    background: var(--otica-gia-gold, #C4A35A);
    opacity: 0.25;
}

.otica-gia-404-lens--left::after {
    right: 100%;
    margin-right: -2px;
    transform: rotate(-20deg);
    transform-origin: right center;
}

.otica-gia-404-lens--right::after {
    left: 100%;
    margin-left: -2px;
    transform: rotate(20deg);
    transform-origin: left center;
    background: #ccc;
}

.otica-gia-404-number {
    font-family: 'Playfair Display', serif;
    font-size: 272px;
    font-weight: 400;
    color: rgba(196, 163, 90, 0.15);
    line-height: 1;
    letter-spacing: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Conteúdo */
.otica-gia-404-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.otica-gia-404-title {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-404-title em {
    color: var(--otica-gia-gold, #C4A35A);
    font-style: italic;
}

.otica-gia-404-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--otica-gia-text-light, #555555);
    max-width: 420px;
}

/* Ações */
.otica-gia-404-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.otica-gia-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.otica-gia-404-btn--primary {
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
}

.otica-gia-404-btn--primary:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 107, 79, 0.35);
}

.otica-gia-404-btn--outline {
    background: transparent;
    color: var(--otica-gia-text, #1A1A1A);
    border: 1.5px solid var(--otica-gia-text, #1A1A1A);
}

.otica-gia-404-btn--outline:hover {
    background: var(--otica-gia-text, #1A1A1A);
    color: #fff;
    transform: translateY(-2px);
}

/* Footer */
.otica-gia-404-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--otica-gia-text-light, #555555);
    font-weight: 500;
    opacity: 0.7;
}

.otica-gia-404-dot {
    width: 6px;
    height: 6px;
    background: var(--otica-gia-gold, #C4A35A);
    border-radius: 50%;
}

/* Animações */
@keyframes otica-gia-404-float-left {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-6deg) translateY(-4px); }
}

@keyframes otica-gia-404-float-right {
    0%, 100% { transform: rotate(12deg) translateY(6px); }
    50% { transform: rotate(10deg) translateY(2px); }
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 768px) {
    .otica-gia-404 {
        padding: 60px 20px;
    }
    
    .otica-gia-404-title {
        font-size: 30px;
    }
    
    .otica-gia-404-number {
        font-size: 224px;
    }
    
    .otica-gia-404-lens {
        width: 64px;
        height: 46px;
    }
    
    .otica-gia-404-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .otica-gia-404-btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .otica-gia-404-title {
        font-size: 26px;
    }
    
    .otica-gia-404-number {
        font-size: 48px;
    }
    
    .otica-gia-404-text {
        font-size: 14px;
    }
    
    .otica-gia-404-lens {
        width: 56px;
        height: 40px;
        border-width: 2px;
    }
}




/* ============================================
   BOTÃO TRIGGER
   ============================================ */
.otica-gia-virtual-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--otica-gia-gold, #C4A35A), var(--otica-gia-gold-light, #D4B36A));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(196, 163, 90, 0.3);
}

.otica-gia-virtual-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(196, 163, 90, 0.4);
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.otica-gia-virtual-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.otica-gia-virtual-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Modal */
.otica-gia-virtual-modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.otica-gia-virtual-overlay.active .otica-gia-virtual-modal {
    transform: scale(1) translateY(0);
}

/* Header */
.otica-gia-virtual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-virtual-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--otica-gia-text, #1A1A1A);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.otica-gia-virtual-header-icon {
    width: 28px;
    height: 28px;
    border: 2px solid var(--otica-gia-gold, #C4A35A);
    border-radius: 50%;
    position: relative;
    display: none;
}

.otica-gia-virtual-header-icon::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    border: 2px solid var(--otica-gia-gold, #C4A35A);
    border-radius: 50% 50% 0 0;
    border-bottom: none;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.otica-gia-virtual-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.otica-gia-virtual-close:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
    transform: rotate(90deg);
}

/* Body */
.otica-gia-virtual-body {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* Steps */
.otica-gia-virtual-step {
    display: none;
    padding: 32px;
    animation: otica-gia-virtual-fade-in 0.4s ease;
}

.otica-gia-virtual-step.active {
    display: block;
}

@keyframes otica-gia-virtual-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   STEP 1: START
   ============================================ */
.otica-gia-virtual-start {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.otica-gia-virtual-start-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
    margin-bottom: 4px;
}

.otica-gia-virtual-start-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
}

.otica-gia-virtual-start-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 340px;
}

.otica-gia-virtual-start-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    width: 100%;
}

.otica-gia-virtual-start-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    background: #fff;
    border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-virtual-start-btn:hover {
    border-color: var(--otica-gia-gold, #C4A35A);
    box-shadow: 0 8px 24px rgba(196, 163, 90, 0.1);
    transform: translateY(-3px);
}

.otica-gia-virtual-start-btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.06);
    border: 1px solid rgba(196, 163, 90, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-virtual-start-btn-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.otica-gia-virtual-start-btn-desc {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

/* ============================================
   STEP 2: PREVIEW
   ============================================ */
.otica-gia-virtual-preview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.otica-gia-virtual-preview-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 380px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-virtual-preview-video,
.otica-gia-virtual-preview-canvas,
.otica-gia-virtual-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.otica-gia-virtual-preview-video.active,
.otica-gia-virtual-preview-canvas.active,
.otica-gia-virtual-preview-img.active {
    display: block;
}

.otica-gia-virtual-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
}

.otica-gia-virtual-preview-placeholder.active {
    display: none;
}

.otica-gia-virtual-preview-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.otica-gia-virtual-preview-capture,
.otica-gia-virtual-preview-retake,
.otica-gia-virtual-preview-upload {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.otica-gia-virtual-preview-capture {
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    box-shadow: 0 4px 16px rgba(45, 107, 79, 0.2);
}

.otica-gia-virtual-preview-capture:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
}

.otica-gia-virtual-preview-retake {
    background: #fff;
    color: #1a1a1a;
    border: 1.5px solid #1a1a1a;
    display: none;
}

.otica-gia-virtual-preview-retake.active {
    display: inline-flex;
}

.otica-gia-virtual-preview-retake:hover {
    background: #1a1a1a;
    color: #fff;
}

.otica-gia-virtual-preview-upload {
    background: #fff;
    color: #1a1a1a;
    border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    position: relative;
    overflow: hidden;
}

.otica-gia-virtual-preview-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.otica-gia-virtual-preview-upload:hover {
    border-color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-virtual-preview-upload.active {
    display: none;
}

/* ============================================
   STEP 3: CARROSSEL
   ============================================ */
.otica-gia-virtual-carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.otica-gia-virtual-carousel-hint {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    text-align: center;
}

.otica-gia-virtual-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.otica-gia-virtual-carousel-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.otica-gia-virtual-carousel-arrow:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-virtual-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.otica-gia-virtual-carousel-track::-webkit-scrollbar {
    display: none;
}

.otica-gia-virtual-carousel-item {
    flex: 0 0 auto;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    scroll-snap-align: start;
}

.otica-gia-virtual-carousel-item:hover {
    border-color: var(--otica-gia-border, #E5E0D8);
}

.otica-gia-virtual-carousel-item.active {
    border-color: var(--otica-gia-gold, #C4A35A);
    box-shadow: 0 4px 16px rgba(196, 163, 90, 0.12);
}

.otica-gia-virtual-carousel-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-virtual-carousel-item-name {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-virtual-generate {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
    margin-top: 4px;
}

.otica-gia-virtual-generate:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 107, 79, 0.35);
}

/* ============================================
   STEP 4: LOADING
   ============================================ */
.otica-gia-virtual-loading {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
}

/*
.otica-gia-virtual-loading-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
    animation: otica-gia-virtual-spin 2s linear infinite;
}

@keyframes otica-gia-virtual-spin {
    to { transform: rotate(360deg); }
}
*/

.otica-gia-virtual-loading-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08); /* Fundo dourado suave */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto; /* Garante que fique perfeitamente centralizado */
}

/* O anel animado fica no pseudo-elemento, rodando por fora sem girar o ícone interno! */
.otica-gia-virtual-loading-icon::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 2px solid rgba(196, 163, 90, 0.15); /* Rastro transparente */
    border-top-color: var(--otica-gia-gold, #C4A35A); /* Cor da ponta do anel */
    border-right-color: var(--otica-gia-gold, #C4A35A); /* Deixa o brilho mais longo */
    animation: otica-gia-virtual-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Pulsação do ícone interno para dar efeito de "IA pensando" */
.otica-gia-virtual-loading-icon svg {
    animation: otica-gia-virtual-pulse 1.5s ease-in-out infinite;
}

@keyframes otica-gia-virtual-spin {
    to { transform: rotate(360deg); }
}

@keyframes otica-gia-virtual-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px rgba(196,163,90,0.6)); }
}




.otica-gia-virtual-loading-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
}

.otica-gia-virtual-loading-text {
    font-size: 13px;
    color: #888;
    max-width: 300px;
    line-height: 1.6;
}

.otica-gia-virtual-loading-bar {
    width: 100%;
    max-width: 280px;
    height: 6px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.otica-gia-virtual-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--otica-gia-gold, #C4A35A), var(--otica-gia-gold-light, #D4B36A));
    border-radius: 10px;
    transition: width 0.3s ease;
}

.otica-gia-virtual-loading-percent {
    font-size: 12px;
    font-weight: 700;
    color: var(--otica-gia-gold, #C4A35A);
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   STEP 5: RESULTADO
   ============================================ */
.otica-gia-virtual-result {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.otica-gia-virtual-result-frame {
    width: 100%;
    aspect-ratio: 4 / 5; /* mobile: retrato (o JS ajusta para a proporção real da imagem ao carregar) */
    max-height: 540px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-virtual-result-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.otica-gia-virtual-result-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.otica-gia-virtual-result-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.otica-gia-virtual-result-btn:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
}

.otica-gia-virtual-result-btn--secondary {
    background: transparent;
    color: #1a1a1a;
    border: 1.5px solid #1a1a1a;
}

.otica-gia-virtual-result-btn--secondary:hover {
    background: #1a1a1a;
    color: #fff;
}

/* Resultado no desktop: paisagem (câmera do computador é 16:9) e modal mais largo nessa etapa */
@media (min-width: 641px) {
    .otica-gia-virtual-result-frame {
        aspect-ratio: 16 / 9;
    }
    .otica-gia-virtual-modal.is-step-result {
        max-width: 760px;
    }
}
.otica-gia-virtual-modal {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.3s ease;
}

/* Enviar para o WhatsApp: linha inteira; Baixar/Reiniciar dividem a linha de baixo */
.otica-gia-virtual-result-actions {
    flex-wrap: wrap;
}
.otica-gia-virtual-result-btn--whatsapp {
    flex: 1 1 100%;
    background: #25D366;
}
.otica-gia-virtual-result-btn--whatsapp:hover {
    background: #1EBE5A;
}
.otica-gia-virtual-result-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* "Baixar" só no desktop (mouse/trackpad); no celular o salvar não funciona no iOS */
.otica-gia-virtual-result-btn--download {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .otica-gia-virtual-result-btn--download {
        display: inline-flex;
    }
}

/* Janela "Receber no WhatsApp" (sobre o provador) */
.otica-gia-virtual-wa {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 26, 26, 0.45);
}
.otica-gia-virtual-wa.active {
    display: flex;
    animation: otica-gia-virtual-wa-in 0.25s ease;
}
@keyframes otica-gia-virtual-wa-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.otica-gia-virtual-wa-box {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 32px 28px 28px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
.otica-gia-virtual-wa-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #999;
    cursor: pointer;
}
.otica-gia-virtual-wa-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
}
.otica-gia-virtual-wa-icon--ok {
    background: rgba(45, 107, 79, 0.12);
    color: var(--otica-gia-green, #2D6B4F);
}
.otica-gia-virtual-wa-title {
    margin: 0 0 6px;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
}
.otica-gia-virtual-wa-text {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
.otica-gia-virtual-wa-label {
    display: block;
    margin-bottom: 6px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a1a1a;
}
.otica-gia-virtual-wa-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--otica-gia-bg, #F5F0EB);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; /* 16px evita o zoom automático no iOS */
    color: #1a1a1a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.otica-gia-virtual-wa-input:focus {
    border-color: #25D366;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}
.otica-gia-virtual-wa-input.is-invalid {
    border-color: #C0392B;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.otica-gia-virtual-wa-feedback {
    display: none;
    margin: 8px 0 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #C0392B;
}
.otica-gia-virtual-wa-send {
    width: 100%;
    margin-top: 18px;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 640px) {
    .otica-gia-virtual-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .otica-gia-virtual-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }
    
    .otica-gia-virtual-overlay.active .otica-gia-virtual-modal {
        transform: translateY(0);
    }
    
    .otica-gia-virtual-step {
        padding: 24px;
    }
    
    .otica-gia-virtual-start-actions {
        flex-direction: column;
    }
    
    .otica-gia-virtual-start-btn {
        flex-direction: row;
        justify-content: flex-start;
        padding: 18px 20px;
        text-align: left;
    }
    
    .otica-gia-virtual-preview-frame {
        max-height: 320px;
    }
    
    .otica-gia-virtual-result-frame {
        max-height: 62vh; /* era 320px: com o frame no formato da imagem, a foto retrato aparece maior */
    }
    
    .otica-gia-virtual-result-actions {
        flex-direction: column;
    }
    
    .otica-gia-virtual-carousel-item {
        width: 90px;
    }
}


/* ============================================
   BLOG
   ============================================ */
.otica-gia-blog {
    width: 100%;
    padding: 60px 48px 100px;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-blog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Layout */
.otica-gia-blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

/* ============================================
   MAIN
   ============================================ */
.otica-gia-blog-section {
    margin-bottom: 48px;
}

.otica-gia-blog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.otica-gia-blog-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

.otica-gia-blog-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7a9cc6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.otica-gia-blog-section-link:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

/* Post Destaque */
.otica-gia-blog-featured {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    overflow: hidden;
    padding: 16px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.otica-gia-blog-featured:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.otica-gia-blog-featured-img-wrap {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    min-height: 200px;
}

.otica-gia-blog-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.otica-gia-blog-featured:hover .otica-gia-blog-featured-img {
    transform: scale(1.05);
}

.otica-gia-blog-featured-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 8px 8px 0;
}

.otica-gia-blog-featured-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.otica-gia-blog-featured-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a1a;
}

.otica-gia-blog-featured-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.otica-gia-blog-featured-title a:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-blog-featured-excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otica-gia-blog-featured-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
    margin-top: auto;
    padding-top: 8px;
}

.otica-gia-blog-featured-dot {
    width: 4px;
    height: 4px;
    background: #ccc;
    border-radius: 50%;
}

/* Grid Posts */
.otica-gia-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.otica-gia-blog-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 12px;
    overflow: hidden;
    padding: 12px;
    transition: all 0.3s ease;
}

.otica-gia-blog-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.otica-gia-blog-card-img-wrap {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    height: 80px;
}

.otica-gia-blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.otica-gia-blog-card:hover .otica-gia-blog-card-img-wrap img {
    transform: scale(1.08);
}

.otica-gia-blog-card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.otica-gia-blog-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}

.otica-gia-blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.otica-gia-blog-card-title a:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-blog-card-date {
    font-size: 11px;
    color: #aaa;
    font-weight: 500;
}

/* Banner */
.otica-gia-blog-banner {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 24px;
    background: #f2f2f2;
    min-height: 200px;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.otica-gia-blog-banner-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.otica-gia-blog-banner-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1.3;
}

.otica-gia-blog-banner-text {
    font-size: 14px;
    color: #4a7fb5;
    font-style: italic;
}

.otica-gia-blog-banner-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: #f4a261;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    width: fit-content;
    margin-top: 4px;
    transition: all 0.2s ease;
}

.otica-gia-blog-banner-btn:hover {
    background: #e08e4f;
    transform: translateY(-1px);
}

.otica-gia-blog-banner-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.otica-gia-blog-banner-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    transform: rotate(-5deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ============================================
   SIDEBAR
   ============================================ */
.otica-gia-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 24px;
}

.otica-gia-blog-widget {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    padding: 24px;
}

.otica-gia-blog-widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

/* Socials */
.otica-gia-blog-socials {
    display: flex;
    gap: 10px;
}

.otica-gia-blog-social {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #000;
}

.otica-gia-blog-social--fb {
    background: #3b5998;
}

.otica-gia-blog-social--fb:hover {
    background: #344e86;
    transform: translateY(-2px);
}

.otica-gia-blog-social--ig {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.otica-gia-blog-social--ig:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Trending */
.otica-gia-blog-trending {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.otica-gia-blog-trending-main {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.otica-gia-blog-trending-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.otica-gia-blog-trending-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #3b5bdb;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
}

.otica-gia-blog-trending-main-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
}

.otica-gia-blog-trending-main-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
}

.otica-gia-blog-trending-main-content span {
    font-size: 11px;
    opacity: 0.8;
}

/* Trending List */
.otica-gia-blog-trending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.otica-gia-blog-trending-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 8px;
}

.otica-gia-blog-trending-item:hover {
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-blog-trending-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.otica-gia-blog-trending-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.otica-gia-blog-trending-item h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otica-gia-blog-trending-item span {
    font-size: 11px;
    color: #aaa;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-blog {
        padding: 48px 32px 80px;
    }
    
    .otica-gia-blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .otica-gia-blog-sidebar {
        position: relative;
        top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    .otica-gia-blog-featured {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 768px) {
    .otica-gia-blog {
        padding: 32px 20px 60px;
    }
    
    .otica-gia-blog-featured {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    
    .otica-gia-blog-featured-img-wrap {
        min-height: 180px;
    }
    
    .otica-gia-blog-featured-content {
        padding: 8px 4px;
    }
    
    .otica-gia-blog-grid {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-blog-banner {
        grid-template-columns: 1fr;
        padding: 24px;
    }
    
    .otica-gia-blog-banner-visual {
        display: none;
    }
    
    .otica-gia-blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-blog-section-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .otica-gia-blog-featured-title {
        font-size: 16px;
    }
    
    .otica-gia-blog-card {
        grid-template-columns: 80px 1fr;
    }
    
    .otica-gia-blog-card-img-wrap {
        height: 64px;
    }
    
    .otica-gia-blog-card-title {
        font-size: 13px;
    }
    
    .otica-gia-blog-socials {
        flex-direction: column;
    }
}




/* ============================================
   SINGLE POST
   ============================================ */
.otica-gia-single {
    width: 100%;
    padding: 48px 48px 100px;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-single-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Breadcrumb */
.otica-gia-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    font-size: 12px;
    color: #888;
}

.otica-gia-single-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.otica-gia-single-breadcrumb-link:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-single-breadcrumb-separator {
    color: #ccc;
}

.otica-gia-single-breadcrumb-current {
    color: #1a1a1a;
    font-weight: 600;
}

/* Header */
.otica-gia-single-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.otica-gia-single-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.otica-gia-single-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
}

.otica-gia-single-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #888;
}

.otica-gia-single-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.otica-gia-single-meta-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-single-meta-name {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 13px;
}

.otica-gia-single-meta-role {
    display: block;
    font-size: 11px;
    color: #aaa;
}

.otica-gia-single-meta-dot {
    width: 4px;
    height: 4px;
    background: #ccc;
    border-radius: 50%;
}

/* Hero Image */
.otica-gia-single-hero-img {
    margin: 0 0 48px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.otica-gia-single-hero-img img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.otica-gia-single-hero-caption {
    display: block;
    text-align: center;
    padding: 14px;
    font-size: 12px;
    color: #888;
    font-style: italic;
    background: var(--otica-gia-bg, #F5F0EB);
}

/* Layout */
.otica-gia-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    align-items: start;
}

/* ============================================
   CONTEÚDO
   ============================================ */
.otica-gia-single-content {
    font-size: 16px;
    line-height: 1.9;
    color: #444;
}

.otica-gia-single-lead {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.7;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-single-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 40px 0 16px;
    line-height: 1.3;
}

.otica-gia-single-content p {
    margin-bottom: 20px;
}

/* Blockquote */
.otica-gia-single-quote {
    position: relative;
    margin: 36px 0;
    padding: 36px 32px 28px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 16px;
    text-align: center;
}

.otica-gia-single-quote-mark {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--otica-gia-gold, #C4A35A);
    font-style: italic;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.otica-gia-single-quote p {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: italic;
    color: #333;
    line-height: 1.7;
    margin-bottom: 16px;
}

.otica-gia-single-quote cite {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-style: normal;
}

/* Inline Image */
.otica-gia-single-inline-img {
    margin: 32px 0;
    border-radius: 16px;
    overflow: hidden;
}

.otica-gia-single-inline-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.otica-gia-single-inline-img figcaption {
    display: block;
    padding: 12px 16px;
    font-size: 12px;
    color: #888;
    font-style: italic;
    background: var(--otica-gia-bg, #F5F0EB);
    text-align: center;
}

/* List */
.otica-gia-single-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.otica-gia-single-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 1.7;
}

.otica-gia-single-list-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Share */
.otica-gia-single-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0 24px;
    padding-top: 24px;
    border-top: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-single-share-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 6px;
}

.otica-gia-single-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.otica-gia-single-share-btn:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    border-color: var(--otica-gia-gold, #C4A35A);
    transform: translateY(-2px);
}

/* Tags */
.otica-gia-single-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.otica-gia-single-tags span {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.otica-gia-single-tags a {
    padding: 6px 14px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
}

.otica-gia-single-tags a:hover {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
}

/* Autor */
.otica-gia-single-author {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    margin-bottom: 8px;
}

.otica-gia-single-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--otica-gia-border, #E5E0D8);
    flex-shrink: 0;
}

.otica-gia-single-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.otica-gia-single-author-label {
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.otica-gia-single-author-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.otica-gia-single-author-bio {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin-top: 4px;
}

/* ============================================
   SIDEBAR
   ============================================ */
.otica-gia-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 24px;
}

.otica-gia-single-widget {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    padding: 24px;
}

.otica-gia-single-widget--highlight {
    background: var(--otica-gia-bg, #F5F0EB);
    border-color: transparent;
}

.otica-gia-single-widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

/* TOC */
.otica-gia-single-toc {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.otica-gia-single-toc li {
    border-bottom: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-single-toc li:last-child {
    border-bottom: none;
}

.otica-gia-single-toc a {
    display: block;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
}

.otica-gia-single-toc a:hover {
    color: var(--otica-gia-gold, #C4A35A);
    padding-left: 8px;
}

/* Related Mini */
.otica-gia-single-related-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.otica-gia-single-related-mini {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 8px;
}

.otica-gia-single-related-mini:hover {
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-single-related-mini img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.otica-gia-single-related-mini div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.otica-gia-single-related-mini h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otica-gia-single-related-mini span {
    font-size: 11px;
    color: #aaa;
}

/* Newsletter */
.otica-gia-single-widget-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 14px;
}

.otica-gia-single-newsletter {
    display: flex;
    gap: 0;
    overflow: hidden;
    border-radius: 50px;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    background: #fff;
}

.otica-gia-single-newsletter input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    background: none;
}

.otica-gia-single-newsletter input::placeholder {
    color: #bbb;
}

.otica-gia-single-newsletter button {
    padding: 12px 20px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.otica-gia-single-newsletter button:hover {
    background: var(--otica-gia-green-hover, #245a42);
}

/* ============================================
   POSTS RELACIONADOS
   ============================================ */
.otica-gia-single-related-section {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--otica-gia-border, #E5E0D8);
}

.otica-gia-single-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.otica-gia-single-related-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.otica-gia-single-related-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #7a9cc6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.otica-gia-single-related-link:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-single-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.otica-gia-single-related-card {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.otica-gia-single-related-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

.otica-gia-single-related-img-wrap {
    display: block;
    height: 180px;
    overflow: hidden;
}

.otica-gia-single-related-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.otica-gia-single-related-card:hover .otica-gia-single-related-img-wrap img {
    transform: scale(1.08);
}

.otica-gia-single-related-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.otica-gia-single-related-cat {
    font-size: 10px;
    font-weight: 700;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.otica-gia-single-related-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}

.otica-gia-single-related-content h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.otica-gia-single-related-content h4 a:hover {
    color: var(--otica-gia-gold, #C4A35A);
}

.otica-gia-single-related-date {
    font-size: 12px;
    color: #aaa;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-single {
        padding: 40px 32px 80px;
    }
    
    .otica-gia-single-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .otica-gia-single-sidebar {
        position: relative;
        top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .otica-gia-single-title {
        font-size: 34px;
    }
    
    .otica-gia-single-hero-img img {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .otica-gia-single {
        padding: 32px 20px 60px;
    }
    
    .otica-gia-single-title {
        font-size: 28px;
    }
    
    .otica-gia-single-hero-img img {
        height: 260px;
    }
    
    .otica-gia-single-hero-caption {
        font-size: 11px;
        padding: 10px;
    }
    
    .otica-gia-single-content h2 {
        font-size: 20px;
    }
    
    .otica-gia-single-lead {
        font-size: 17px;
    }
    
    .otica-gia-single-author {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .otica-gia-single-sidebar {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-single-related-grid {
        grid-template-columns: 1fr;
    }
    
    .otica-gia-single-related-img-wrap {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .otica-gia-single-title {
        font-size: 24px;
    }
    
    .otica-gia-single-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .otica-gia-single-meta-dot {
        display: none;
    }
    
    .otica-gia-single-quote {
        padding: 32px 20px 24px;
    }
    
    .otica-gia-single-quote p {
        font-size: 16px;
    }
    
    .otica-gia-single-inline-img img {
        height: 200px;
    }
}



/* ============================================
   VIDEO COM SOUND TOGGLE — CLASSES EXCLUSIVAS
   ============================================ */

.otica-gia-video-sound-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
}

.otica-gia-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

/* Botão de Som */
.otica-gia-video-sound-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
}

.otica-gia-video-sound-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

.otica-gia-video-sound-btn:active {
    transform: scale(0.95);
}

.otica-gia-video-sound-icon {
    width: 22px;
    height: 22px;
    position: absolute;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.otica-gia-video-sound-icon-muted {
    opacity: 1;
    transform: scale(1);
}

.otica-gia-video-sound-icon-active {
    opacity: 0;
    transform: scale(0.6);
}

/* Estado quando o som está ATIVO */
.otica-gia-video-sound-btn.som-ativo .otica-gia-video-sound-icon-muted {
    opacity: 0;
    transform: scale(0.6);
}

.otica-gia-video-sound-btn.som-ativo .otica-gia-video-sound-icon-active {
    opacity: 1;
    transform: scale(1);
}

/* Pulse sutil no botão quando está muted (chama atenção) */
@keyframes oticaGiaVideoSoundPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

.otica-gia-video-sound-btn:not(.som-ativo) {
    animation: oticaGiaVideoSoundPulse 2.5s ease-in-out infinite;
}

/* Mobile */
@media (max-width: 768px) {
    .otica-gia-video-sound-btn {
        width: 42px;
        height: 42px;
        bottom: 14px;
        right: 14px;
    }
    .otica-gia-video-sound-icon {
        width: 20px;
        height: 20px;
    }
}






/* ============================================
   SHOWCASE DE VÍDEOS — CARROSSEL + STORIES
   ============================================ */

.otica-gia-video-showcase-section {
    width: 100%;
    padding: 60px 0;
    background: var(--otica-gia-bg, #F5F0EB);
    overflow: hidden;
}

.otica-gia-video-showcase-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.otica-gia-video-showcase-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--otica-gia-text, #1A1A1A);
    margin-top: 50px;
    text-align: center;
    padding-bottom: 62px;
}

/* Carrossel */
.otica-gia-video-showcase-carousel-wrap {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.otica-gia-video-showcase-carousel-wrap:active {
    cursor: grabbing;
}

.otica-gia-video-showcase-track {
    display: flex;
    align-items: center;          /* centraliza verticalmente para o scale */
    gap: 20px;
    padding: 40px 0;              /* espaço para o card ativo crescer sem cortar */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Card individual */
.otica-gia-video-showcase-card {
    flex: 0 0 calc((100% - 120px) / 4.8);
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    
    /* INATIVO: menor e opaco */
    transform: scale(0.88);
    opacity: 0.55;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.5s ease,
                box-shadow 0.35s ease;
}

/* ATIVO: maior, opaco total e em destaque */
.otica-gia-video-showcase-card.ativo {
    transform: scale(1.06);
    opacity: 1;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.otica-gia-video-showcase-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.otica-gia-video-showcase-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
    pointer-events: none;
}

/* Mini card do produto dentro do carousel */
.otica-gia-video-showcase-card-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    pointer-events: none;
}

.otica-gia-video-showcase-card-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-video-showcase-card-text {
    min-width: 0;
}

.otica-gia-video-showcase-card-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}

.otica-gia-video-showcase-card-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-video-showcase-card-oldprice {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--otica-gia-text-light, #555);
    text-decoration: line-through;
    margin-left: 4px;
    opacity: 0.7;
}

/* Indicador de play no centro */
.otica-gia-video-showcase-play-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.otica-gia-video-showcase-card:hover .otica-gia-video-showcase-play-hint {
    opacity: 1;
}

/* ============================================
   LIGHTBOX STORIES
   ============================================ */
.otica-gia-video-showcase-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.otica-gia-video-showcase-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.otica-gia-video-showcase-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
}

.otica-gia-video-showcase-lightbox-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 85vh;
    max-height: 800px;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* Progresso */
.otica-gia-video-showcase-progress-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    z-index: 10;
}

.otica-gia-video-showcase-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.otica-gia-video-showcase-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.otica-gia-video-showcase-progress-fill.active {
    width: 100%;
    transition: width linear;
}

/* Header */
.otica-gia-video-showcase-lightbox-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    z-index: 10;
    pointer-events: none;
}

.otica-gia-video-showcase-lightbox-header button {
    pointer-events: auto;
}

.otica-gia-video-showcase-sound-toggle,
.otica-gia-video-showcase-close-lightbox {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.otica-gia-video-showcase-sound-toggle:hover,
.otica-gia-video-showcase-close-lightbox:hover {
    background: rgba(255,255,255,0.3);
}

.otica-gia-video-showcase-sound-toggle svg,
.otica-gia-video-showcase-close-lightbox svg {
    width: 18px;
    height: 18px;
}

.otica-gia-video-showcase-icon-muted,
.otica-gia-video-showcase-icon-active {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.otica-gia-video-showcase-icon-muted { opacity: 1; transform: scale(1); }
.otica-gia-video-showcase-icon-active { opacity: 0; transform: scale(0.7); }

.otica-gia-video-showcase-sound-toggle.som-ativo .otica-gia-video-showcase-icon-muted { opacity: 0; transform: scale(0.7); }
.otica-gia-video-showcase-sound-toggle.som-ativo .otica-gia-video-showcase-icon-active { opacity: 1; transform: scale(1); }

/* Zonas de navegação */
.otica-gia-video-showcase-nav-zone {
    position: absolute;
    top: 60px;
    bottom: 140px;
    width: 30%;
    z-index: 5;
    cursor: pointer;
}

.otica-gia-video-showcase-nav-prev { left: 0; }
.otica-gia-video-showcase-nav-next { right: 0; }

/* Vídeo */
.otica-gia-video-showcase-lightbox-media {
    flex: 1;
    position: relative;
    background: #000;
}

.otica-gia-video-showcase-lightbox-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card do produto no stories */
.otica-gia-video-showcase-product-card {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 10;
    animation: oticaGiaVideoShowcaseSlideUp 0.4s ease;
}

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

.otica-gia-video-showcase-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.otica-gia-video-showcase-product-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-video-showcase-product-text {
    min-width: 0;
}

.otica-gia-video-showcase-product-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--otica-gia-text, #1A1A1A);
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.otica-gia-video-showcase-product-prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.otica-gia-video-showcase-product-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--otica-gia-text, #1A1A1A);
}

.otica-gia-video-showcase-product-oldprice {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--otica-gia-text-light, #555);
    text-decoration: line-through;
    opacity: 0.7;
}

.otica-gia-video-showcase-product-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.otica-gia-video-showcase-product-btn {
    flex: 1;
    padding: 11px 20px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.25s ease;
    letter-spacing: 0.3px;
}

.otica-gia-video-showcase-product-btn:hover {
    background: var(--otica-gia-green-hover, #245a42);
}

.otica-gia-video-showcase-product-icons {
    display: flex;
    gap: 6px;
}

.otica-gia-video-showcase-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--otica-gia-bg, #F5F0EB);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--otica-gia-text, #1A1A1A);
    transition: all 0.2s ease;
    text-decoration: none;
}

.otica-gia-video-showcase-icon-btn:hover {
    background: var(--otica-gia-border, #E5E0D8);
    transform: scale(1.08);
}

.otica-gia-video-showcase-icon-btn svg {
    width: 18px;
    height: 18px;
}

.otica-gia-video-showcase-wa-btn {
    background: #25D366;
    color: #fff;
}

.otica-gia-video-showcase-wa-btn:hover {
    background: #128C7E;
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1200px) {
    .otica-gia-video-showcase-card {
        flex: 0 0 calc((100% - 80px) / 5);
    }
}

@media (max-width: 768px) {
    .otica-gia-video-showcase-section {
        padding: 40px 0;
    }
    .otica-gia-video-showcase-container {
        padding: 0 16px;
    }
    .otica-gia-video-showcase-title {
        font-size: 24px;
        margin-bottom: 28px;
    }
    .otica-gia-video-showcase-track {
        padding: 24px 0;
        gap: 12px;
    }
    .otica-gia-video-showcase-card {
        flex: 0 0 70%;
        max-width: 260px;
        transform: scale(0.92);
        opacity: 0.6;
    }
    .otica-gia-video-showcase-card.ativo {
        transform: scale(1.04);
        opacity: 1;
    }
    .otica-gia-video-showcase-lightbox-inner {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .otica-gia-video-showcase-product-card {
        left: 12px;
        right: 12px;
        bottom: 24px;
        padding: 12px;
    }
    .otica-gia-video-showcase-product-name {
        font-size: 12px;
    }
    .otica-gia-video-showcase-product-price {
        font-size: 14px;
    }
}




/* ============================================
   HERO VÍDEO FULL-WIDTH — CLASSES EXCLUSIVAS
   ============================================ */

.otica-gia-hero-video-wrap {
    position: relative;
    width: 100%;
    /* 50% da altura de um 16:9 = aspect-ratio 32:9 */
    aspect-ratio: 44 / 9;
    overflow: hidden;
    background: var(--otica-gia-bg, #F5F0EB);
}

.otica-gia-hero-video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* Overlay sutil — remova esta regra se não quiser nenhum filtro */
.otica-gia-hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.35);
    pointer-events: none;
}

/* Fallback para navegadores sem aspect-ratio */
@supports not (aspect-ratio: 32 / 9) {
    .otica-gia-hero-video-wrap {
        height: 28.125vw; /* 9/32 = 0.28125 */
        min-height: 220px;
    }
}

/* Mobile: um pouco mais alto para não ficar muito baixo */
@media (max-width: 768px) {
    .otica-gia-hero-video-wrap {
        aspect-ratio: 16 / 7;
    }
    @supports not (aspect-ratio: 16 / 7) {
        .otica-gia-hero-video-wrap {
            height: 43.75vw;
        }
    }
}








/* ============================================
   CATEGORIAS — BANNERS GRID (SERIF + MÁSCARA)
   ============================================ */
.otica-gia-cats {
    width: 100%;
    padding: 80px 48px;
    background-color: var(--otica-gia-bg, #F5F0EB);
    font-family: 'Montserrat', sans-serif;
}

.otica-gia-cats-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Grid */
.otica-gia-cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    aspect-ratio: 2 / 1;
}

/* Card */
.otica-gia-cats-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    background: #e8e8e8;
}

/* Background Image */
.otica-gia-cats-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.otica-gia-cats-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zoom no hover */
.otica-gia-cats-card:hover .otica-gia-cats-card-bg img {
    transform: scale(1.08);
}

/* MÁSCARA DE GRADIENTE — elimina rivalidade com texto */
.otica-gia-cats-card-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(245, 240, 235, 0.92) 0%,
        rgba(245, 240, 235, 0.75) 35%,
        rgba(245, 240, 235, 0.2) 65%,
        rgba(245, 240, 235, 0.0) 100%
    );
    transition: background 0.5s ease;
}

/* Hover: máscara suaviza ainda mais */
.otica-gia-cats-card:hover .otica-gia-cats-card-mask {
    background: linear-gradient(
        135deg,
        rgba(245, 240, 235, 0.88) 0%,
        rgba(245, 240, 235, 0.65) 40%,
        rgba(245, 240, 235, 0.15) 70%,
        rgba(245, 240, 235, 0.0) 100%
    );
}

/* Conteúdo centralizado */
.otica-gia-cats-card-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

/* Título — SERIF (Playfair Display) */
.otica-gia-cats-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.otica-gia-cats-card-title em {
    color: var(--otica-gia-gold, #C4A35A);
    font-style: italic;
    text-transform: lowercase;
    font-size: 0.85em;
    letter-spacing: 0;
}

/* Botão */
.otica-gia-cats-card-btn {
    display: inline-flex;
    padding: 12px 32px;
    background: #1a1a1a;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.otica-gia-cats-card:hover .otica-gia-cats-card-btn {
    background: var(--otica-gia-gold, #C4A35A);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(196, 163, 90, 0.3);
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .otica-gia-cats {
        padding: 60px 32px;
    }
    
    .otica-gia-cats-card-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .otica-gia-cats {
        padding: 40px 20px;
    }
    
    .otica-gia-cats-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 240px);
        aspect-ratio: auto;
        gap: 16px;
    }
    
    .otica-gia-cats-card-title {
        font-size: 28px;
    }
    
    .otica-gia-cats-card-btn {
        padding: 10px 28px;
    }
    
    .otica-gia-cats-card-mask {
        background: linear-gradient(
            135deg,
            rgba(245, 240, 235, 0.9) 0%,
            rgba(245, 240, 235, 0.7) 45%,
            rgba(245, 240, 235, 0.25) 75%,
            rgba(245, 240, 235, 0.0) 100%
        );
    }
}

@media (max-width: 480px) {
    .otica-gia-cats-grid {
        grid-template-rows: repeat(4, 200px);
        gap: 12px;
    }
    
    .otica-gia-cats-card-title {
        font-size: 24px;
    }
    
    .otica-gia-cats-card-btn {
        font-size: 9px;
        padding: 8px 24px;
    }
    
    .otica-gia-cats-card-content {
        gap: 14px;
        padding: 20px;
    }
}



























































/* ============================================
   CARTÃO DE GARANTIA — RESGATE
   ============================================ */
.gia-cupom-garantia {
    width: 100%;
    min-height: 100vh;
    padding: 80px 24px;
    background-color: var(--otica-gia-bg, #F5F0EB);
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gia-cupom-garantia-container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* Header */
.gia-cupom-garantia-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gia-cupom-garantia-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
}

.gia-cupom-garantia-tag-line {
    display: block;
    width: 32px;
    height: 1px;
    background: var(--otica-gia-gold, #C4A35A);
}

.gia-cupom-garantia-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
}

.gia-cupom-garantia-title em {
    color: var(--otica-gia-gold, #C4A35A);
    font-style: italic;
}

.gia-cupom-garantia-subtitle {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    max-width: 420px;
    margin: 0 auto;
}

/* Steps */
.gia-cupom-garantia-step {
    display: none;
    animation: gia-cupom-fade-in 0.5s ease;
}

.gia-cupom-garantia-step.active {
    display: block;
}

@keyframes gia-cupom-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   FORMULÁRIO
   ============================================ */
.gia-cupom-garantia-form {
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 20px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}

.gia-cupom-garantia-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gia-cupom-garantia-field label {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gia-cupom-garantia-field input {
    padding: 14px 18px;
    border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: all 0.3s ease;
}

.gia-cupom-garantia-field input:focus {
    border-color: var(--otica-gia-gold, #C4A35A);
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.1);
}

.gia-cupom-garantia-field input::placeholder {
    color: #bbb;
}

.gia-cupom-garantia-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #aaa;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gia-cupom-garantia-divider::before,
.gia-cupom-garantia-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--otica-gia-border, #E5E0D8);
}

.gia-cupom-garantia-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
    margin-top: 4px;
}

.gia-cupom-garantia-submit:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 107, 79, 0.35);
}

/* ============================================
   LOADING
   ============================================ */
.gia-cupom-garantia-loading {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
}

.gia-cupom-garantia-loading-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
    animation: gia-cupom-spin 2s linear infinite;
}

@keyframes gia-cupom-spin {
    to { transform: rotate(360deg); }
}

.gia-cupom-garantia-loading-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
}

.gia-cupom-garantia-loading-text {
    font-size: 14px;
    color: #888;
    max-width: 300px;
    line-height: 1.6;
}

.gia-cupom-garantia-loading-bar {
    width: 100%;
    max-width: 280px;
    height: 6px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.gia-cupom-garantia-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--otica-gia-gold, #C4A35A), var(--otica-gia-gold-light, #D4B36A));
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* ============================================
   RESULTADO
   ============================================ */
.gia-cupom-garantia-result {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
}

/* Sucesso */
.gia-cupom-garantia-success {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(45, 107, 79, 0.08);
    border: 1px solid rgba(45, 107, 79, 0.15);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--otica-gia-green, #2D6B4F);
}

.gia-cupom-garantia-success-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   TICKET / CUPOM
   ============================================ */
.gia-cupom-garantia-ticket {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
    border: 1px solid var(--otica-gia-border, #E5E0D8);
}

/* Perforações (círculos nas bordas) */
.gia-cupom-garantia-ticket-perfs {
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    position: relative;
    z-index: 2;
}

.gia-cupom-garantia-ticket-perfs--top {
    margin-top: -8px;
}

.gia-cupom-garantia-ticket-perfs--bottom {
    margin-bottom: -8px;
}

.gia-cupom-garantia-ticket-perfs span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--otica-gia-bg, #F5F0EB);
    flex-shrink: 0;
}

/* Linha de corte tracejada */
.gia-cupom-garantia-ticket-cut {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    position: relative;
}

.gia-cupom-garantia-ticket-cut span {
    width: 8px;
    height: 2px;
    background: var(--otica-gia-border, #E5E0D8);
    flex-shrink: 0;
}

/* Inner */
.gia-cupom-garantia-ticket-inner {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header do ticket */
.gia-cupom-garantia-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gia-cupom-garantia-ticket-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.gia-cupom-garantia-ticket-logo {
    width: 28px;
    height: 28px;
    border: 2px solid var(--otica-gia-gold, #C4A35A);
    border-radius: 50%;
    position: relative;
}


/*
.gia-cupom-garantia-ticket-logo::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    border: 2px solid var(--otica-gia-gold, #C4A35A);
    border-radius: 50% 50% 0 0;
    border-bottom: none;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}
*/
.gia-cupom-garantia-ticket-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--otica-gia-gold, #C4A35A);
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid rgba(196, 163, 90, 0.3);
    border-radius: 20px;
}

/* Valor */
.gia-cupom-garantia-ticket-value {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px dashed var(--otica-gia-border, #E5E0D8);
    border-bottom: 1px dashed var(--otica-gia-border, #E5E0D8);
}

.gia-cupom-garantia-ticket-percent {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 400;
    color: var(--otica-gia-gold, #C4A35A);
    line-height: 1;
}

.gia-cupom-garantia-ticket-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Código */
.gia-cupom-garantia-ticket-code-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gia-cupom-garantia-ticket-code-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gia-cupom-garantia-ticket-code {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #1a1a1a;
    padding: 12px 28px;
    background: var(--otica-gia-bg, #F5F0EB);
    border-radius: 12px;
    border: 1.5px dashed var(--otica-gia-gold, #C4A35A);
    user-select: all;
}

.gia-cupom-garantia-ticket-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #fff;
    border: 1.5px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gia-cupom-garantia-ticket-copy:hover {
    border-color: var(--otica-gia-gold, #C4A35A);
    color: var(--otica-gia-gold, #C4A35A);
}

.gia-cupom-garantia-ticket-copy.copied {
    border-color: var(--otica-gia-green, #2D6B4F);
    color: var(--otica-gia-green, #2D6B4F);
}

/* Regras */
.gia-cupom-garantia-ticket-rules {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gia-cupom-garantia-ticket-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
}

.gia-cupom-garantia-ticket-rule svg {
    width: 18px;
    height: 18px;
    color: var(--otica-gia-gold, #C4A35A);
    flex-shrink: 0;
    margin-top: 1px;
}

.gia-cupom-garantia-ticket-rule strong {
    color: #1a1a1a;
}

/* ============================================
   BENEFÍCIOS
   ============================================ */
.gia-cupom-garantia-benefits {
    width: 100%;
}

.gia-cupom-garantia-benefits-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px;
}

.gia-cupom-garantia-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gia-cupom-garantia-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--otica-gia-border, #E5E0D8);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.gia-cupom-garantia-benefit:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.gia-cupom-garantia-benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otica-gia-gold, #C4A35A);
    flex-shrink: 0;
}

.gia-cupom-garantia-benefit div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gia-cupom-garantia-benefit div strong {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.gia-cupom-garantia-benefit div span {
    font-size: 12px;
    color: #888;
}

/* ============================================
   AÇÕES
   ============================================ */
.gia-cupom-garantia-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.gia-cupom-garantia-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.gia-cupom-garantia-btn--whatsapp {
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2);
}

.gia-cupom-garantia-btn--whatsapp:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.gia-cupom-garantia-btn--primary {
    background: var(--otica-gia-green, #2D6B4F);
    color: #fff;
    box-shadow: 0 4px 20px rgba(45, 107, 79, 0.25);
}

.gia-cupom-garantia-btn--primary:hover {
    background: var(--otica-gia-green-hover, #245a42);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 107, 79, 0.35);
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 640px) {
    .gia-cupom-garantia {
        padding: 40px 20px;
    }
    
    .gia-cupom-garantia-title {
        font-size: 28px;
    }
    
    .gia-cupom-garantia-form {
        padding: 24px;
    }
    
    .gia-cupom-garantia-ticket-inner {
        padding: 24px;
    }
    
    .gia-cupom-garantia-ticket-percent {
        font-size: 44px;
    }
    
    .gia-cupom-garantia-ticket-code {
        font-size: 18px;
        letter-spacing: 2px;
        padding: 10px 20px;
    }
    
    .gia-cupom-garantia-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .gia-cupom-garantia-actions {
        flex-direction: column;
    }
    
    .gia-cupom-garantia-ticket-perfs span {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .gia-cupom-garantia-title {
        font-size: 24px;
    }
    
    .gia-cupom-garantia-ticket-percent {
        font-size: 38px;
    }
    
    .gia-cupom-garantia-ticket-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .gia-cupom-garantia-ticket-rule {
        font-size: 11px;
    }
}



#oticaGiaHeaderV2Toggle{
    display:none !important;
}





/* ============================================================
   ÓTICAS GIACON — WIZARD DE COMPRA
   Prefixo de classes: giacon-wizard-compra-
   ============================================================ */
:root {
  --giacon-wizard-compra-cream: #f6f1e8;
  --giacon-wizard-compra-cream-2: #efe8db;
  --giacon-wizard-compra-surface: #fffdf8;
  --giacon-wizard-compra-ink: #211d16;
  --giacon-wizard-compra-muted: #7a7263;
  --giacon-wizard-compra-green: #1e5c3f;
  --giacon-wizard-compra-green-dark: #164731;
  --giacon-wizard-compra-gold: #b8934a;
  --giacon-wizard-compra-gold-soft: #d9c295;
  --giacon-wizard-compra-border: #e4dccc;
  --giacon-wizard-compra-serif: 'Playfair Display', Georgia, serif;
  --giacon-wizard-compra-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------- TELA DE ENTRADA ---------------- */
.giacon-wizard-compra-entrada {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  gap: 18px;
}
.giacon-wizard-compra-entrada-selo {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-gold);
  display: flex;
  align-items: center;
  gap: 14px;
}
.giacon-wizard-compra-entrada-selo::before,
.giacon-wizard-compra-entrada-selo::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--giacon-wizard-compra-gold-soft);
}
.giacon-wizard-compra-entrada-titulo {
  font-family: var(--giacon-wizard-compra-serif);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  max-width: 640px;
}
.giacon-wizard-compra-entrada-titulo em {
  color: var(--giacon-wizard-compra-gold);
  font-style: italic;
}
.giacon-wizard-compra-entrada-sub {
  color: var(--giacon-wizard-compra-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
}
.giacon-wizard-compra-btn-iniciar {
  margin-top: 14px;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--giacon-wizard-compra-green);
  color: #fff;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 18px 46px;
  border-radius: 999px;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 14px 34px rgba(30, 92, 63, .28);
}
.giacon-wizard-compra-btn-iniciar:hover {
  background: var(--giacon-wizard-compra-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(30, 92, 63, .34);
}

/* ---------------- OVERLAY / CONTAINER ---------------- */
.giacon-wizard-compra-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--giacon-wizard-compra-cream);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.22, .9, .28, 1);
  visibility: hidden;
}
.giacon-wizard-compra-overlay.giacon-wizard-compra-aberto {
  transform: translateX(0);
  visibility: visible;
}
.giacon-wizard-compra-overlay.giacon-wizard-compra-fechando {
  transform: translateX(100%);
  visibility: visible;
}

.giacon-wizard-compra-layout {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  height: 100vh;
  height: 100dvh;
}

/* ---------------- PAINEL VISUAL (ESQUERDA) ---------------- */
.giacon-wizard-compra-visual {
  position: relative;
  background: linear-gradient(160deg, var(--giacon-wizard-compra-cream) 0%, var(--giacon-wizard-compra-cream-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow: hidden;
}
.giacon-wizard-compra-visual::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 380px;
  height: 380px;
  border: 1px solid var(--giacon-wizard-compra-gold-soft);
  border-radius: 50%;
  opacity: .5;
}
.giacon-wizard-compra-visual::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  border: 1px solid var(--giacon-wizard-compra-gold-soft);
  border-radius: 50%;
  opacity: .35;
}
.giacon-wizard-compra-marca {
  position: absolute;
  top: 34px;
  left: 40px;
  font-family: var(--giacon-wizard-compra-serif);
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--giacon-wizard-compra-ink);
  z-index: 2;
}
.giacon-wizard-compra-marca span { color: var(--giacon-wizard-compra-gold); font-style: italic; }
.giacon-wizard-compra-visual-img-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
}
.giacon-wizard-compra-visual-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 30px 50px rgba(33, 29, 22, .16));
  transition: transform .6s ease, opacity .4s ease;
}
.giacon-wizard-compra-visual:hover .giacon-wizard-compra-visual-img { transform: scale(1.02); }
.giacon-wizard-compra-visual-info {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  text-align: center;
}
.giacon-wizard-compra-visual-nome {
  font-family: var(--giacon-wizard-compra-serif);
  font-size: 22px;
  font-weight: 500;
}
.giacon-wizard-compra-visual-preco {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
}
.giacon-wizard-compra-visual-preco strong {
  color: var(--giacon-wizard-compra-green);
  font-size: 16px;
  letter-spacing: 0;
}

/* ---------------- PAINEL DE ETAPAS (DIREITA) ---------------- */
.giacon-wizard-compra-painel {
  background: var(--giacon-wizard-compra-surface);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--giacon-wizard-compra-border);
}
.giacon-wizard-compra-topo {
  padding: 28px 44px 0;
  flex-shrink: 0;
}
.giacon-wizard-compra-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.giacon-wizard-compra-etapa-label {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-gold);
}
.giacon-wizard-compra-fechar {
  appearance: none;
  border: 1px solid var(--giacon-wizard-compra-border);
  background: transparent;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--giacon-wizard-compra-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.giacon-wizard-compra-fechar:hover {
  background: var(--giacon-wizard-compra-ink);
  color: #fff;
  border-color: var(--giacon-wizard-compra-ink);
}
.giacon-wizard-compra-progresso {
  margin-top: 16px;
  height: 3px;
  background: var(--giacon-wizard-compra-border);
  border-radius: 999px;
  overflow: hidden;
}
.giacon-wizard-compra-progresso-barra {
  height: 100%;
  background: linear-gradient(90deg, var(--giacon-wizard-compra-gold), var(--giacon-wizard-compra-green));
  border-radius: 999px;
  width: 0;
  transition: width .5s cubic-bezier(.22, .9, .28, 1);
}

.giacon-wizard-compra-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 30px 44px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--giacon-wizard-compra-gold-soft) transparent;
}
.giacon-wizard-compra-corpo::-webkit-scrollbar { width: 5px; }
.giacon-wizard-compra-corpo::-webkit-scrollbar-thumb { background: var(--giacon-wizard-compra-gold-soft); border-radius: 999px; }

/* animação de troca de etapa */
.giacon-wizard-compra-etapa {
  animation: giacon-wizard-compra-slide-etapa .45s cubic-bezier(.22, .9, .28, 1) both;
}
.giacon-wizard-compra-etapa.giacon-wizard-compra-voltando {
  animation-name: giacon-wizard-compra-slide-etapa-volta;
}
@keyframes giacon-wizard-compra-slide-etapa {
  from { opacity: 0; transform: translateX(46px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes giacon-wizard-compra-slide-etapa-volta {
  from { opacity: 0; transform: translateX(-46px); }
  to   { opacity: 1; transform: translateX(0); }
}

.giacon-wizard-compra-voltar {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 20px;
  transition: color .2s ease;
}
.giacon-wizard-compra-voltar:hover { color: var(--giacon-wizard-compra-ink); }
.giacon-wizard-compra-voltar svg { transition: transform .2s ease; }
.giacon-wizard-compra-voltar:hover svg { transform: translateX(-3px); }

.giacon-wizard-compra-titulo {
  font-family: var(--giacon-wizard-compra-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 8px;
}
.giacon-wizard-compra-titulo em { color: var(--giacon-wizard-compra-gold); font-style: italic; }
.giacon-wizard-compra-subtitulo {
  color: var(--giacon-wizard-compra-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 26px;
}

/* ---------------- CARDS DE OPÇÃO ---------------- */
.giacon-wizard-compra-opcoes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.giacon-wizard-compra-opcao {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  background: var(--giacon-wizard-compra-surface);
  border: 1.5px solid var(--giacon-wizard-compra-border);
  border-radius: 16px;
  padding: 20px 22px;
  font-family: var(--giacon-wizard-compra-sans);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.giacon-wizard-compra-opcao:hover {
  border-color: var(--giacon-wizard-compra-gold);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(33, 29, 22, .07);
}
.giacon-wizard-compra-opcao.giacon-wizard-compra-selecionada {
  border-color: var(--giacon-wizard-compra-green);
  background: #f4f8f4;
  box-shadow: 0 10px 26px rgba(30, 92, 63, .10);
}
.giacon-wizard-compra-opcao-radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--giacon-wizard-compra-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.giacon-wizard-compra-opcao-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--giacon-wizard-compra-green);
  transform: scale(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.giacon-wizard-compra-selecionada .giacon-wizard-compra-opcao-radio {
  border-color: var(--giacon-wizard-compra-green);
}
.giacon-wizard-compra-selecionada .giacon-wizard-compra-opcao-radio::after { transform: scale(1); }

.giacon-wizard-compra-opcao-conteudo { flex: 1; min-width: 0; }
.giacon-wizard-compra-opcao-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.giacon-wizard-compra-opcao-nome {
  font-size: 15px;
  font-weight: 600;
  color: var(--giacon-wizard-compra-ink);
}
.giacon-wizard-compra-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--giacon-wizard-compra-ink);
  color: #fff;
}
.giacon-wizard-compra-badge.giacon-wizard-compra-badge-incluso {
  background: #e2f0e6;
  color: var(--giacon-wizard-compra-green);
}
.giacon-wizard-compra-badge.giacon-wizard-compra-badge-ouro {
  background: linear-gradient(90deg, var(--giacon-wizard-compra-gold), #cba95e);
  color: #fff;
}
.giacon-wizard-compra-opcao-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--giacon-wizard-compra-muted);
}
.giacon-wizard-compra-opcao-desc ul { list-style: none; margin-top: 4px; }
.giacon-wizard-compra-opcao-desc li { padding-left: 18px; position: relative; margin-top: 3px; }
.giacon-wizard-compra-opcao-desc li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--giacon-wizard-compra-green);
  font-weight: 700;
  font-size: 11px;
}
.giacon-wizard-compra-opcao-preco {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--giacon-wizard-compra-ink);
  white-space: nowrap;
  margin-top: 2px;
}
.giacon-wizard-compra-opcao-preco.giacon-wizard-compra-preco-incluso {
  color: var(--giacon-wizard-compra-green);
  font-size: 12px;
  letter-spacing: .08em;
}

/* ---------------- FORMULÁRIO DE RECEITA ---------------- */
.giacon-wizard-compra-receita-form {
  margin-top: 22px;
  border-top: 1px dashed var(--giacon-wizard-compra-border);
  padding-top: 22px;
  animation: giacon-wizard-compra-slide-etapa .4s ease both;
}
.giacon-wizard-compra-receita-form-titulo {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-gold);
  margin-bottom: 16px;
}
.giacon-wizard-compra-receita-grade {
  display: grid;
  grid-template-columns: 110px repeat(var(--giacon-wizard-compra-receita-cols, 3), 1fr);
  gap: 10px 14px;
  align-items: center;
}
.giacon-wizard-compra-campo-rotulo { display: none; }
.giacon-wizard-compra-receita-grade-cab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
  text-align: center;
}
.giacon-wizard-compra-receita-grade-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--giacon-wizard-compra-ink);
}
.giacon-wizard-compra-campo {
  width: 100%;
  appearance: none;
  border: 1.5px solid var(--giacon-wizard-compra-border);
  border-radius: 12px;
  background: var(--giacon-wizard-compra-surface);
  padding: 12px 14px;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 14px;
  color: var(--giacon-wizard-compra-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
  text-align: center;
}
.giacon-wizard-compra-campo:focus {
  outline: none;
  border-color: var(--giacon-wizard-compra-green);
  box-shadow: 0 0 0 3px rgba(30, 92, 63, .12);
}

/* ---------------- BOTÃO CONTINUAR ---------------- */
.giacon-wizard-compra-acoes { margin-top: 28px; }
.giacon-wizard-compra-btn-continuar {
  width: 100%;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--giacon-wizard-compra-green);
  color: #fff;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 18px 24px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .25s ease, transform .2s ease, opacity .2s ease;
}
.giacon-wizard-compra-btn-continuar:hover:not(:disabled) {
  background: var(--giacon-wizard-compra-green-dark);
  transform: translateY(-1px);
}
.giacon-wizard-compra-btn-continuar:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* "Pular esta etapa" (etapas com select: combos e graus) — secundário, abaixo do Continuar */
.giacon-wizard-compra-btn-pular {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 24px;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.giacon-wizard-compra-btn-pular:hover {
  color: var(--giacon-wizard-compra-green);
}

/* ---------------- RESUMO ---------------- */
.giacon-wizard-compra-resumo-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--giacon-wizard-compra-border);
  border-radius: 16px;
  overflow: hidden;
}
.giacon-wizard-compra-resumo-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--giacon-wizard-compra-surface);
}
.giacon-wizard-compra-resumo-item + .giacon-wizard-compra-resumo-item {
  border-top: 1px solid var(--giacon-wizard-compra-border);
}
.giacon-wizard-compra-resumo-item-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
  margin-bottom: 4px;
}
.giacon-wizard-compra-resumo-item-valor { font-size: 14px; font-weight: 600; }
.giacon-wizard-compra-resumo-item-detalhe { font-size: 12px; color: var(--giacon-wizard-compra-muted); margin-top: 3px; line-height: 1.5; }
.giacon-wizard-compra-resumo-item-preco { font-size: 14px; font-weight: 700; white-space: nowrap; }
.giacon-wizard-compra-resumo-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--giacon-wizard-compra-ink);
  color: #fff;
}
.giacon-wizard-compra-resumo-total-label {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-gold-soft);
}
.giacon-wizard-compra-resumo-total-valor {
  font-family: var(--giacon-wizard-compra-serif);
  font-size: 26px;
  font-weight: 600;
}
.giacon-wizard-compra-resumo-nota {
  margin-top: 14px;
  font-size: 12px;
  color: var(--giacon-wizard-compra-muted);
  line-height: 1.6;
  text-align: center;
  padding-bottom: 15px;
}
.giacon-wizard-compra-btn-whatsapp {
  width: 100%;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--giacon-wizard-compra-green);
  color: #fff;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 18px 24px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: background .25s ease, transform .2s ease;
  margin-top: 24px;
}
.giacon-wizard-compra-btn-whatsapp:hover {
  background: var(--giacon-wizard-compra-green-dark);
  transform: translateY(-1px);
}
.giacon-wizard-compra-btn-recomecar {
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--giacon-wizard-compra-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
  padding: 16px;
  margin-top: 4px;
  transition: color .2s ease;
}
.giacon-wizard-compra-btn-recomecar:hover { color: var(--giacon-wizard-compra-ink); }

/* ---------------- RODAPÉ / TOTAL PARCIAL ---------------- */
.giacon-wizard-compra-rodape {
  flex-shrink: 0;
  padding: 14px 44px;
  border-top: 1px solid var(--giacon-wizard-compra-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--giacon-wizard-compra-surface);
}
.giacon-wizard-compra-rodape-label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--giacon-wizard-compra-muted);
}
.giacon-wizard-compra-rodape-valor {
  font-family: var(--giacon-wizard-compra-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--giacon-wizard-compra-green);
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 860px) {
  .giacon-wizard-compra-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .giacon-wizard-compra-visual {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 18px 20px;
    min-height: 0;
  }
  .giacon-wizard-compra-visual::before,
  .giacon-wizard-compra-visual::after { display: none; }
  .giacon-wizard-compra-marca {
    position: static;
    font-size: 16px;
    margin-right: auto;
    flex-shrink: 0;
  }
  .giacon-wizard-compra-visual-img-wrap {
    max-width: 120px;
    order: -1;
    flex-shrink: 0;
  }
  .giacon-wizard-compra-visual-img {
    border-radius: 6px;
    filter: drop-shadow(0 8px 16px rgba(33, 29, 22, .14));
  }
  .giacon-wizard-compra-visual-info { margin-top: 0; text-align: left; }
  .giacon-wizard-compra-visual-nome { font-size: 14px; }
  .giacon-wizard-compra-visual-preco { font-size: 11px; margin-top: 3px; }
  .giacon-wizard-compra-visual-preco strong { font-size: 14px; }
  .giacon-wizard-compra-painel { border-left: none; border-top: 1px solid var(--giacon-wizard-compra-border); }
  .giacon-wizard-compra-topo { padding: 18px 20px 0; }
  .giacon-wizard-compra-corpo { padding: 20px 20px 16px; }
  .giacon-wizard-compra-rodape { padding: 12px 20px; }
  /* Receita: um campo por linha, com rótulo visível */
  .giacon-wizard-compra-receita-grade {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .giacon-wizard-compra-receita-grade-cab,
  .giacon-wizard-compra-receita-grade-rotulo { display: none; }
  .giacon-wizard-compra-campo-rotulo {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--giacon-wizard-compra-muted);
    margin-bottom: 6px;
  }
  .giacon-wizard-compra-campo { text-align: left; }
  .giacon-wizard-compra-opcao { padding: 16px; gap: 12px; }
  .giacon-wizard-compra-opcao-preco { font-size: 13px; }
}
@media (max-width: 400px) {
  .giacon-wizard-compra-visual-nome { font-size: 12px; }
  .giacon-wizard-compra-marca { font-size: 14px; }
}