/*
Theme Name: Sammuel Custom Theme
Theme URI: https://sammuel.com.br
Author: Sammuel Gomes
Author URI: https://sammuel.com.br
Description: Um tema WordPress moderno construído com Tailwind CSS e Vite.
Version: 1.0.0
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
C:\Users\User\Local Sites\sammuel-local\app\public\wp-content\themes\SammuelCustomTheme
Text Domain: sammuel-theme
*/

/* ==========================================================================
   Importação das Fontes
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');

/* ==========================================================================
   Variáveis Globais (Root)
   ========================================================================== */
:root {
    --cor-primaria: #000000;
    --cor-secundaria: #ffffff;
    --cor-destaque: #40E0D0;
    --cor-fundo-transparente: rgba(0, 0, 0, 0.5);
    --cor-fundo-hero: rgba(0, 0, 0, 0.88);
    --glow-color-1-rgb: 64, 224, 208;
    --glow-color-2-rgb: 32, 210, 195;
    --glow-color-3-rgb: 0, 180, 170;
    --font-principal: 'Inter', Arial, sans-serif;
    --font-titulos: 'Platypi', serif;
    --cor-fundo-secoes: rgba(64, 224, 208, 0.15);
    --cor-fundo-campo: rgba(64, 224, 208, 0.15);
    --cor-borda-campo: rgba(64, 224, 208, 0.6);
    --cor-texto-input: #FFFFFF;
    --cor-icone-whatsapp: #25D366;
    --cor-cta-hover-bg: rgba(0, 0, 0, 0.8);
    --cor-bg-transparente-inativo: rgba(0, 0, 0, 0.3);
    --svg-invert-filter: invert(0);
    --glow-alpha-1: 0.9;
    --glow-alpha-2: 0.8;
    --glow-alpha-3: 0.7;
    --hamburger-bar-color: #ffffff;
    --mobile-menu-bg: #000000;
    --swiper-theme-color: #40E0D0;
    --swiper-navigation-color: #40E0D0;

    /* Variaveis especificas do Painel */
    --cor-texto-painel: #ffffff;
    --menu-bg: #000000;
    --menu-item-hover-bg: rgba(255, 255, 255, 0.05);
    --modal-bg: rgba(0, 0, 0, 0.7);
    --modal-content-bg: #1a1a1a;
}

/* ==========================================================================
   Estilos Base e Globais
   ========================================================================== */
body {
    font-family: var(--font-principal);
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titulos);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Ajuste para o breakpoint da admin bar do WP */
body.admin-bar header,
body.admin-bar #panel-header {
    top: 32px !important;
}

@media (max-width: 782px) {

    body.admin-bar header,
    body.admin-bar #panel-header {
        top: 46px !important;
    }
}

/* Scroll Padding Responsivo */
/* ALTERADO: De 768px para 1052px */
@media (max-width: 1052px) {
    html {
        scroll-padding-top: 80px;
    }

    body.admin-bar html {
        scroll-padding-top: calc(80px + 46px);
    }
}

@media (min-width: 1053px) {
    body.admin-bar html {
        scroll-padding-top: calc(100px + 32px);
    }
}

/* ==========================================================================
   Animações e Efeitos (Glow, Scroll, etc)
   ========================================================================== */
@keyframes pulse-glow {

    0%,
    100% {
        filter: var(--svg-invert-filter) drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    }

    50% {
        filter: var(--svg-invert-filter) drop-shadow(0 0 4px rgba(var(--glow-color-1-rgb), calc(var(--glow-alpha-1) * 0.6))) drop-shadow(0 0 10px rgba(var(--glow-color-2-rgb), calc(var(--glow-alpha-2) * 0.5))) drop-shadow(0 2px 15px rgba(var(--glow-color-3-rgb), calc(var(--glow-alpha-3) * 0.4)));
    }
}

.glow-image,
.glow-effect {
    filter: var(--svg-invert-filter) drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow 2s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.glow-image:hover {
    transform: scale(1.1);
    animation: pulse-glow 1s ease-in-out infinite;
}

@keyframes pulse-glow-icon {
    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    }

    50% {
        filter: drop-shadow(0 0 4px rgba(var(--glow-color-1-rgb), calc(var(--glow-alpha-1) * 0.6))) drop-shadow(0 0 10px rgba(var(--glow-color-2-rgb), calc(var(--glow-alpha-2) * 0.5))) drop-shadow(0 2px 15px rgba(var(--glow-color-3-rgb), calc(var(--glow-alpha-3) * 0.4)));
    }
}

.glow-icon {
    color: var(--cor-secundaria);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow-icon 2s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease;
}

.glow-icon:hover {
    transform: scale(1.1);
    animation: pulse-glow-icon 1s ease-in-out infinite;
}

.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Header e Menu Principal (Home)
   ========================================================================== */
header.scrolled {
    background-color: var(--cor-fundo-transparente);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    top: 0px;
}

.menu-link {
    border: 2px solid var(--cor-primaria);
    background: var(--cor-bg-transparente-inativo);
    transition: border-color 0.3s, filter 0.3s, background-color 0.3s;
}

.menu-link:hover {
    color: var(--cor-primaria);
    background-color: var(--cor-secundaria);
    border: 2px solid var(--cor-secundaria);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.menu-link.active {
    color: var(--cor-secundaria);
    background-color: var(--cor-primaria);
    border: 2px solid var(--cor-secundaria);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow 1.5s ease-in-out infinite;
}

#mobile-menu {
    top: 80px;
    transition: all 0.3s ease-in-out;
}

body.admin-bar #mobile-menu {
    top: calc(80px + 32px) !important;
}

@media (max-width: 782px) {
    body.admin-bar #mobile-menu {
        top: calc(80px + 46px) !important;
    }
}

/* ==========================================================================
   Componentes Home (Tabs, Testimonials, FAQ)
   ========================================================================== */
.tab-button {
    border: 2px solid var(--cor-primaria);
    background: var(--cor-bg-transparente-inativo);
    transition: border-color 0.3s, filter 0.3s, background-color 0.3s;
}

.tab-button:hover,
.tab-button.active {
    background-color: var(--cor-primaria);
    border-color: var(--cor-secundaria);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}

.familia-image-adjusted {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0rem);
    width: 16rem;
    height: auto;
    border-radius: 1.5rem 1.5rem 0 0;
    z-index: 0;
}

/* ALTERADO: De 768px para 1052px */
@media (min-width: 1052px) {
    .familia-image-adjusted {
        width: 18rem;
        height: auto;
        transform: translateX(-130%) translateY(0rem);
        border-radius: 1.5rem 1.5rem 0 0;
    }
}

.testimonial-item {
    background-color: var(--cor-bg-transparente-inativo);
    border: 2px solid var(--cor-secundaria);
    transition: all 0.3s ease;
}

.testimonial-item:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border: 2px solid var(--cor-secundaria);
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
}

.testimonial-item:hover .testimonial-content {
    filter: none !important;
    animation: none !important;
}

.testimonial-content {
    filter: none;
}

.faq-item {
    background: var(--cor-bg-transparente-inativo);
    border: 1px solid var(--cor-secundaria);
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: scale(1.05);
    border-color: var(--cor-secundaria);
    background-color: var(--cor-primaria);
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3)));
    animation: pulse-glow 1.5s ease-in-out infinite;
}

input::placeholder,
textarea::placeholder {
    color: var(--cor-texto-input);
    opacity: 0.7;
}

.whatsapp-icon {
    transition: transform 0.3s ease;
}

.whatsapp-icon:hover {
    transform: scale(1.15);
}

/* Theme Switcher & Swiper */
.theme-switcher {
    transition: all 0.3s ease;
    color: var(--cor-secundaria);
}

.theme-switcher:hover {
    transform: scale(1.1) rotate(15deg);
    color: var(--cor-destaque);
}

#theme-controls-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 9999px;
    margin-left: 20px;
    margin-right: 20px;
}

.color-dot {
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.color-dot.active {
    transform: scale(1.25);
    border-color: var(--cor-secundaria);
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.swiper-slide>div {
    width: 100%;
}

.swiper-pagination-bullet {
    background-color: var(--cor-secundaria) !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background-color: var(--cor-destaque) !important;
    opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--cor-destaque) !important;
    --swiper-navigation-color: var(--cor-destaque);
    --swiper-theme-color: var(--cor-destaque);
}

/* Marquee */
.marquee-fullwidth-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    padding: 1rem 0;
    background-color: var(--cor-primaria);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.marquee-fullwidth-container.grabbing {
    cursor: grabbing;
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.marquee-track span {
    display: inline-block;
    padding: 0 2rem;
    font-weight: 600;
    font-size: 1.125rem;
}

.marquee-fullwidth-container::before,
.marquee-fullwidth-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 2;
    pointer-events: none;
}

.marquee-fullwidth-container::before {
    left: 0;
    background: linear-gradient(to right, var(--cor-destaque) 40%, transparent 100%);
}

.marquee-fullwidth-container::after {
    right: 0;
    background: linear-gradient(to left, var(--cor-destaque) 40%, transparent 100%);
}

/* ==========================================================================
   FORMULARIO GLOBAL (.lcp-card)
   ========================================================================== */
.lcp-card {
    background: var(--cor-fundo-secoes) !important;
    color: var(--cor-secundaria) !important;
    border-radius: 1.5rem !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
}

.lcp-card .card-body {
    padding: 0 !important;
}

.lcp-card .lcp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
}

.lcp-card input[type="text"],
.lcp-card input[type="tel"],
.lcp-card input[type="email"] {
    background-color: var(--cor-fundo-campo) !important;
    border: 1px solid var(--cor-borda-campo) !important;
    color: var(--cor-texto-input) !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    transition: all 0.3s ease;
}

.lcp-card input::placeholder {
    color: var(--cor-texto-input) !important;
    opacity: 0.7 !important;
}

.lcp-card input[type="text"]:focus,
.lcp-card input[type="tel"]:focus,
.lcp-card input[type="email"]:focus {
    outline: none !important;
    border-color: var(--cor-destaque) !important;
    filter: drop-shadow(0 0 6px rgba(var(--glow-color-1-rgb), var(--glow-alpha-1))) drop-shadow(0 0 15px rgba(var(--glow-color-2-rgb), var(--glow-alpha-2))) drop-shadow(0 2px 25px rgba(var(--glow-color-3-rgb), var(--glow-alpha-3))) !important;
    animation: pulse-glow 1.5s ease-in-out infinite !important;
}

.lcp-card .row {
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
}

.lcp-card .row img {
    border: 1px solid var(--cor-secundaria) !important;
    box-shadow: none !important;
    border-radius: 0.25rem !important;
}

.lcp-card .row .lcp-captcha-operator,
.lcp-card .row .lcp-captcha-equals {
    color: var(--cor-destaque) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.lcp-card .row input#resposta {
    text-align: center !important;
    flex-grow: 1;
    max-width: 200px;
}

.lcp-card .success-message,
.lcp-card .error-message p {
    color: var(--cor-secundaria) !important;
    font-size: 1rem !important;
    text-align: center !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
}

.lcp-card .success-message+p {
    color: var(--cor-secundaria) !important;
    opacity: 0.8;
}

.lcp-card input[type="submit"] {
    border: 2px solid var(--cor-secundaria) !important;
    background-color: var(--cor-primaria) !important;
    color: var(--cor-secundaria) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 2.5rem !important;
    border-radius: 9999px !important;
    width: 100% !important;
    cursor: pointer !important;
    animation: pulse-glow 3s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
}

.lcp-card input[type="submit"]:hover {
    background: var(--cor-cta-hover-bg) !important;
    animation: pulse-glow 1.2s ease-in-out infinite !important;
    transform: scale(1.05) !important;
    border-radius: 9999px !important;
}

.logo {
    filter: var(--svg-invert-filter);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.iframe-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

a.cta-button {
    border: 2px solid var(--cor-secundaria) !important;
    background-color: var(--cor-primaria) !important;
    color: var(--cor-secundaria) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 2.5rem !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}

a.cta-button:hover {
    background: var(--cor-cta-hover-bg) !important;
    transform: scale(1.05) !important;
    border-radius: 9999px !important;
}


/* ==========================================================================
   PAINEL DO CLIENTE (.panel-card, .modal, .off-canvas)
   ========================================================================== */
/* Menu Off-Canvas */
#offcanvas-menu {
    background-color: var(--menu-bg);
    transition: transform 0.3s ease-in-out;
    border-right: 1px solid var(--cor-destaque);
}

#offcanvas-overlay {
    transition: opacity 0.3s ease-in-out;
}

.menu-item a,
.menu-item button {
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-item a:hover,
.menu-item button:hover {
    background-color: var(--menu-item-hover-bg);
    color: var(--cor-destaque);
}

.menu-item i {
    transition: color 0.2s ease-in-out;
}

/* Cards do Painel */
.panel-card {
    background-color: var(--cor-fundo-secoes);
    border: 1px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.panel-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-destaque);
}

.panel-card:hover .fas,
.panel-card:hover h3 {
    color: var(--cor-destaque) !important;
}

.panel-card .fas,
.panel-card h3 {
    transition: color 0.3s ease-in-out;
}

/* Seletor de Tema e Cores (Painel) */
.theme-switcher:hover {
    color: var(--cor-destaque);
}

#color-palette-container .color-dot.active {
    border: 2px solid var(--cor-destaque);
    transform: scale(1.2);
}

/* Estilo da Logo */
.theme-logo {
    transition: filter 0.3s ease-in-out;
}

/* Modais */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal-content {
    background-color: var(--modal-content-bg);
    padding: 2rem;
    border-radius: 0.75rem;
    position: relative;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--cor-destaque);
    transform: translateY(-20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.modal.open .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cor-texto-painel);
    transition: color 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--cor-destaque);
}

.modal-links a {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--cor-fundo-secoes);
    border-radius: 0.5rem;
    color: var(--cor-texto-painel);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

.modal-links a:hover {
    background-color: rgba(var(--glow-color-3-rgb), 0.2);
    color: var(--cor-destaque);
    border-color: var(--cor-destaque);
}