/* =============================================================
   SWITCHERMODE.CSS  —  Light Mode Global
   Todos os estilos html.light-mode consolidados aqui,
   mais os componentes base partilhados (Before/After, Toggle).

   Secções:
     01 · Theme Toggle (base + light mode)
     02 · Logo (dark & light)
     03 · Body & Layout Global
     04 · Textos — Parágrafos & Subtítulos
     05 · Títulos
     06 · Boxes & Cards
     07 · Botões Outline & Secundários
     08 · Navbar & Nav Links
     09 · Footer
     10 · Social Icons
     11 · Skills Box
     12 · Hero
     13 · Featured Projects
     14 · Switcher do Álbum
     15 · Before / After (base + light mode)
     16 · Testimonials
     17 · Portfolio — Cabeçalho & Toolbar
     17.1 · Portfolio — Aviso Instagram
     18 · Portfolio — Zona de Filtros & Pesquisa
     19 · Portfolio — Badges de Categoria
     20 · Portfolio — Items & Tags
     21 · Services
     22 · Contact & About
     23 · Audio Player Persistente
     24 · Toast do Player
     25 · Page Loader
     26 · Mapa (Leaflet)
     27 · Responsivo — Mobile (≤ 768px)
     28 · Responsivo — Pequeno (≤ 640px)
============================================================= */


/* ─────────────────────────────────────────────────────────────
   01 · THEME TOGGLE
───────────────────────────────────────────────────────────── */
.theme-toggle {
  width: 55px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #8b641c;
  background: #3a2c13;
  display: flex;
  align-items: center;
  padding: 3px;
  cursor: pointer;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.theme-toggle span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d5a83d;
  color: #1b1408;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    color 0.35s ease;
}

html.light-mode .theme-toggle {
  background: #ead9b0;
  border-color: #d5a83d;
}

html.light-mode .theme-toggle span {
  transform: translateX(25px);
}


/* ─────────────────────────────────────────────────────────────
   02 · LOGO (NAVBAR & FOOTER)
───────────────────────────────────────────────────────────── */
.logo img,
.logo-footer {
  transition: filter 0.35s ease;
}

html:not(.light-mode) .logo img,
html:not(.light-mode) .logo-footer {
  filter: brightness(0) invert(1);
}

html.light-mode .logo img,
html.light-mode .logo-footer {
  filter: brightness(0);
}


/* ─────────────────────────────────────────────────────────────
   03 · BODY & LAYOUT GLOBAL
───────────────────────────────────────────────────────────── */
html.light-mode body {
  background: #f6f1e8;
  color: #15100f;
}

html.light-mode .navbar,
html.light-mode .footer,
html.light-mode .hero,
html.light-mode .featured-projects,
html.light-mode .about-hero,
html.light-mode .work-section,
html.light-mode .values-section,
html.light-mode .tools-section,
html.light-mode .instagram-section,
html.light-mode .contact-cta,
html.light-mode .services-section,
html.light-mode .portfolio-page,
html.light-mode .portfolio-section,
html.light-mode .portfolio-list,
html.light-mode .portfolio-item {
  background: #f6f1e8;
  color: #15100f;
}


/* ─────────────────────────────────────────────────────────────
   04 · TEXTOS — PARÁGRAFOS & SUBTÍTULOS
───────────────────────────────────────────────────────────── */
html.light-mode nav a,
html.light-mode .hero p,
html.light-mode .section-title p,
html.light-mode .project-info p,
html.light-mode .footer-column p,
html.light-mode .footer-links a,
html.light-mode .social-link,
html.light-mode .footer-bottom p,
html.light-mode .footer-bottom span,
html.light-mode .about-content p,
html.light-mode .about-stats span,
html.light-mode .work-content p,
html.light-mode .section-heading p,
html.light-mode .value-card p,
html.light-mode .instagram-section p,
html.light-mode .contact-cta p,
html.light-mode .services-header p,
html.light-mode .service-card p,
html.light-mode .service-card ul li,
html.light-mode .services-cta p,
html.light-mode .portfolio-header p,
html.light-mode .portfolio-info p,
html.light-mode .portfolio-toolbar,
html.light-mode .filter-group-label,
html.light-mode .contact-card p,
html.light-mode .contact-header p {
  color: #5f5750;
}


/* ─────────────────────────────────────────────────────────────
   05 · TÍTULOS
───────────────────────────────────────────────────────────── */
html.light-mode .hero h1,
html.light-mode .section-title h2,
html.light-mode .project-info h3,
html.light-mode .about-content h1,
html.light-mode .work-content h2,
html.light-mode .section-heading h2,
html.light-mode .value-card h3,
html.light-mode .instagram-section h2,
html.light-mode .contact-cta h2,
html.light-mode .services-header h2,
html.light-mode .service-card h3,
html.light-mode .services-cta h3,
html.light-mode .portfolio-header h1,
html.light-mode .portfolio-info h2,
html.light-mode .portfolio-info h3,
html.light-mode .contact-header h1,
html.light-mode .contact-card strong {
  color: #15100f;
}


/* ─────────────────────────────────────────────────────────────
   06 · BOXES & CARDS
───────────────────────────────────────────────────────────── */
html.light-mode .value-card,
html.light-mode .contact-cta,
html.light-mode .service-card,
html.light-mode .services-cta,
html.light-mode .skills-box,
html.light-mode .portfolio-item {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(217, 165, 47, 0.2);
}

html.light-mode .tools-box {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(217, 165, 47, 0.2);
}

html.light-mode .service-card:hover,
html.light-mode .value-card:hover {
  border-color: rgba(176, 125, 19, 0.4);
}


/* ─────────────────────────────────────────────────────────────
   07 · BOTÕES OUTLINE & SECUNDÁRIOS
───────────────────────────────────────────────────────────── */
html.light-mode .btn-secondary,
html.light-mode .btn-outline,
html.light-mode .projects-button a,
html.light-mode .youtube-btn {
  color: #15100f;
  border-color: rgba(176, 125, 19, 0.45);
}

html.light-mode .btn-secondary:hover,
html.light-mode .projects-button a:hover,
html.light-mode .youtube-btn:hover {
  border-color: #b07d13;
}


/* ─────────────────────────────────────────────────────────────
   08 · NAVBAR & NAV LINKS
───────────────────────────────────────────────────────────── */
html.light-mode .navbar {
  border-bottom-color: rgba(217, 165, 47, 0.15);
}

html.light-mode .navbar.scrolled {
  background: rgba(246, 241, 232, 0.8);
  border-bottom-color: rgba(217, 165, 47, 0.25);
}

html.light-mode nav a:hover,
html.light-mode nav a.nav-active { color: #b07d13; }

html.light-mode .contact .phone a        { color: #b07d13; }
html.light-mode .contact .phone a:hover  { color: #8a5c00; }
html.light-mode .contact .phone span     { color: #9a8b7a; }

html.light-mode #nav-indicator { background: #b07d13; }

html.light-mode #nav-drawer {
  background: #f6f1e8;
  border-left-color: rgba(176, 125, 19, 0.2);
}

html.light-mode #nav-drawer nav a {
  color: #6b6055;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

html.light-mode #nav-drawer nav a:hover,
html.light-mode #nav-drawer nav a.nav-active { color: #b07d13; }

html.light-mode #nav-drawer #nav-indicator {
  background: #b07d13;
  box-shadow: 0 0 6px rgba(176, 125, 19, 0.5);
}

html.light-mode #hamburger { border-color: rgba(176, 125, 19, 0.35); }
html.light-mode #hamburger span { background: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   09 · FOOTER
───────────────────────────────────────────────────────────── */
html.light-mode .footer {
  background: #ede5d5;
  border-top-color: rgba(217, 165, 47, 0.35);
}

html.light-mode .footer-column h3   { color: #9a8b7a; }
html.light-mode .footer-column span { color: #b07d13; }

html.light-mode .footer-links a:hover,
html.light-mode .social-link:hover  { color: #b07d13; }

html.light-mode .social-link span   { color: #b07d13; }

html.light-mode .footer-bottom {
  border-top-color: rgba(176, 125, 19, 0.25);
}


/* ─────────────────────────────────────────────────────────────
   10 · SOCIAL ICONS
───────────────────────────────────────────────────────────── */
html.light-mode .social-icon {
  filter: brightness(0);
  opacity: 0.9;
}

html.light-mode .social-link:hover .social-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(69%)
    sepia(42%)
    saturate(694%)
    hue-rotate(6deg)
    brightness(93%)
    contrast(90%);
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   11 · SKILLS BOX
───────────────────────────────────────────────────────────── */
html.light-mode .skills-box::before {
  background: linear-gradient(to right, #f6f1e8, transparent);
}

html.light-mode .skills-box::after {
  background: linear-gradient(to left, #f6f1e8, transparent);
}


/* ─────────────────────────────────────────────────────────────
   12 · HERO
───────────────────────────────────────────────────────────── */
html.light-mode .hero-tag {
  color: #b07d13;
  border-color: rgba(176, 125, 19, 0.4);
}

html.light-mode .hero h1 span { color: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   13 · FEATURED PROJECTS
───────────────────────────────────────────────────────────── */
html.light-mode .project-info h4 { color: #b07d13; }

html.light-mode .project img,
html.light-mode .portfolio-item img {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

html.light-mode .featured-projects {
  border-top-color: rgba(217, 165, 47, 0.2);
}

html.light-mode .section-title span {
  background: linear-gradient(90deg, transparent, #b07d13, transparent);
}


/* ─────────────────────────────────────────────────────────────
   14 · SWITCHER DO ÁLBUM
───────────────────────────────────────────────────────────── */
html.light-mode .switcher__track   { background-color: rgba(0, 0, 0, 0.07); }
html.light-mode .switcher__btn     { color: #6d6259; }
html.light-mode .switcher__btn.active { color: #15100f; }
html.light-mode .switcher__pill    { background-color: #b07d13; }

html.light-mode .tracks {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(217, 165, 47, 0.2);
}

html.light-mode .track            { border-bottom-color: rgba(0, 0, 0, 0.06); }
html.light-mode .track-label      { color: #5f5750; }
html.light-mode .track audio      { accent-color: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   15 · BEFORE / AFTER
───────────────────────────────────────────────────────────── */
.before-after-wrapper  { width: 100%; margin-top: 40px; }
.before-after-header   { display: flex; gap: 12px; margin-bottom: 24px; }

.before-after-btn {
  height: 42px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease;
}

.before-after-btn.active { background: #d9a52f; color: #111; }

.before-after-content         { display: none; }
.before-after-content.active  { display: block; }

.before-after-content img,
.before-after-content video {
  width: 100%;
  border-radius: 18px;
  display: block;
}

html.light-mode .before-after-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #15100f;
}

html.light-mode .before-after-btn.active {
  background: #b07d13;
  color: #fff8ee;
}


/* ─────────────────────────────────────────────────────────────
   16 · TESTIMONIALS
───────────────────────────────────────────────────────────── */
html.light-mode .testimonials-section {
  background: rgba(0, 0, 0, 0.025);
}

html.light-mode .testimonials-header h2,
html.light-mode .testimonial-text,
html.light-mode .testimonial-name { color: #15100f; }

html.light-mode .testimonial-role { color: #5f5750; }

html.light-mode .tc-btn {
  color: #b07d13;
  border-color: rgba(176, 125, 19, 0.3);
}

html.light-mode .tc-dot        { background: rgba(176, 125, 19, 0.2); }
html.light-mode .tc-dot.active { background: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   17 · PORTFOLIO — CABEÇALHO & TOOLBAR
───────────────────────────────────────────────────────────── */
html.light-mode .portfolio-header > .header-divider {
  background: linear-gradient(90deg, transparent, #b07d13, transparent);
}

html.light-mode .portfolio-item {
  border-top-color: rgba(176, 125, 19, 0.15);
}

html.light-mode .portfolio-toolbar {
  color: #9a8b7a;
}

html.light-mode .portfolio-toolbar select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(176, 125, 19, 0.28);
  color: #15100f;
}

html.light-mode .portfolio-toolbar select:hover {
  border-color: rgba(176, 125, 19, 0.5);
}


/* ─────────────────────────────────────────────────────────────
   17.1 · PORTFOLIO — AVISO INSTAGRAM
───────────────────────────────────────────────────────────── */
html.light-mode .ig-notice {
  background: rgba(176, 125, 19, 0.08);
  border-color: rgba(176, 125, 19, 0.35);
  color: #7a4f00;
}

html.light-mode .ig-notice strong {
  color: #5e3d00;
}

html.light-mode .ig-notice:hover {
  background: rgba(176, 125, 19, 0.14);
  border-color: rgba(176, 125, 19, 0.6);
  box-shadow: 0 4px 18px rgba(176, 125, 19, 0.18);
}

html.light-mode .ig-notice-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(69%)
    sepia(42%)
    saturate(694%)
    hue-rotate(6deg)
    brightness(93%)
    contrast(90%);
}


/* ─────────────────────────────────────────────────────────────
   18 · PORTFOLIO — ZONA DE FILTROS & PESQUISA
───────────────────────────────────────────────────────────── */
html.light-mode .filters-zone {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(176, 125, 19, 0.2);
}

/* Barra de pesquisa */
html.light-mode .search-box {
  background: #ffffff;
  border-color: rgba(176, 125, 19, 0.28);
}

html.light-mode .search-box:focus-within {
  border-color: rgba(176, 125, 19, 0.55);
  box-shadow: 0 0 0 3px rgba(176, 125, 19, 0.08);
}

html.light-mode .search-box input {
  color: #15100f;
}

html.light-mode .search-box input::placeholder {
  color: #9a8b7a;
}

html.light-mode .search-box span {
  color: #9a8b7a;
}

/* Label de grupo */
html.light-mode .filter-group-label {
  color: #9a8b7a;
}

/* Separador */
html.light-mode .filter-separator {
  border-top-color: rgba(176, 125, 19, 0.15);
}

/* Botões de filtro — estado normal */
html.light-mode .filters-zone button {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(176, 125, 19, 0.25);
  color: #5f5750;
}

/* Hover */
html.light-mode .filters-zone button:hover {
  background: rgba(176, 125, 19, 0.1);
  border-color: rgba(176, 125, 19, 0.45);
  color: #8a5c00;
  box-shadow: 0 0 10px rgba(176, 125, 19, 0.12);
}

/* Activo (JS inline style sobrescreve — esta regra garante fallback via .active) */
html.light-mode .filters-zone button.active {
  background: rgba(176, 125, 19, 0.15);
  border-color: rgba(176, 125, 19, 0.6);
  color: #7a4f00;
  box-shadow: 0 0 12px rgba(176, 125, 19, 0.2);
}

/* Botões de categoria — cor de borda diferenciada no light */
html.light-mode .btn-cat-ia   { border-color: rgba(176, 125, 19, 0.4) !important; color: #8a5c00; }
html.light-mode .btn-cat-noai { border-color: rgba(100, 90, 80, 0.3) !important; color: #6b5f55; }
html.light-mode .btn-cat-vid  { border-color: rgba(37, 99, 160, 0.3) !important; color: #2563a0; }


/* ─────────────────────────────────────────────────────────────
   19 · PORTFOLIO — BADGES DE CATEGORIA
───────────────────────────────────────────────────────────── */

/* Com IA */
html.light-mode .badge-ai {
  background: rgba(176, 125, 19, 0.1);
  border-color: rgba(176, 125, 19, 0.35);
  color: #8a5c00;
}

/* Sem IA */
html.light-mode .badge-no-ai {
  background: rgba(100, 90, 80, 0.07);
  border-color: rgba(100, 90, 80, 0.22);
  color: #6b6055;
}

/* Vídeo */
html.light-mode .badge-video {
  background: rgba(37, 99, 160, 0.08);
  border-color: rgba(37, 99, 160, 0.28);
  color: #1a5fa0;
}

/* Fotografia */
html.light-mode .badge-photo {
  background: rgba(60, 110, 20, 0.08);
  border-color: rgba(60, 110, 20, 0.28);
  color: #3a6e12;
}

/* Música */
html.light-mode .badge-music {
  background: rgba(110, 70, 180, 0.08);
  border-color: rgba(110, 70, 180, 0.28);
  color: #6040aa;
}


/* ─────────────────────────────────────────────────────────────
   20 · PORTFOLIO — ITEMS & TAGS
───────────────────────────────────────────────────────────── */
html.light-mode .portfolio-info h4 {
  color: #b07d13;
}

html.light-mode .tags span {
  color: #8a5c00;
  background: rgba(176, 125, 19, 0.09);
  border-color: rgba(176, 125, 19, 0.25);
}

html.light-mode .tags span:hover {
  color: #7a4f00;
  background: rgba(176, 125, 19, 0.16);
  border-color: rgba(176, 125, 19, 0.5);
  box-shadow: 0 0 8px rgba(176, 125, 19, 0.15);
}


/* ─────────────────────────────────────────────────────────────
   21 · SERVICES
───────────────────────────────────────────────────────────── */
html.light-mode .services-section {
  border-top-color: rgba(217, 165, 47, 0.15);
}

html.light-mode .service-icon {
  background: rgba(176, 125, 19, 0.08);
  border-color: rgba(176, 125, 19, 0.2);
}

html.light-mode .service-card ul li::before { background: #b07d13; }

html.light-mode .services-cta a {
  background: #b07d13;
  color: #fff8ee;
}

html.light-mode .services-cta a:hover { filter: brightness(1.08); }


/* ─────────────────────────────────────────────────────────────
   22 · CONTACT & ABOUT
───────────────────────────────────────────────────────────── */
html.light-mode .contact-card {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(217, 165, 47, 0.2);
}

html.light-mode .about-stats strong { color: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   23 · AUDIO PLAYER PERSISTENTE
───────────────────────────────────────────────────────────── */
html.light-mode #persistent-player {
  background: rgba(246, 241, 232, 0.95);
  border-top-color: rgba(217, 165, 47, 0.3);
}

html.light-mode .pp-icon        { color: #b07d13; }
html.light-mode .pp-title       { color: #15100f; }
html.light-mode .pp-sub         { color: #9a8b7a; }
html.light-mode .pp-btn         { color: #b07d13; }
html.light-mode .pp-btn:hover   { color: #8a5c00; }
html.light-mode .pp-time        { color: #9a8b7a; }
html.light-mode .pp-close       { color: #9a8b7a; }
html.light-mode .pp-close:hover { color: #15100f; }
html.light-mode .pp-seek,
html.light-mode .pp-vol         { accent-color: #b07d13; }


/* ─────────────────────────────────────────────────────────────
   24 · TOAST DO PLAYER
───────────────────────────────────────────────────────────── */
html.light-mode #pp-toast {
  background: #fff8ec;
  color: #15100f;
  border-color: rgba(217, 165, 47, 0.4);
}


/* ─────────────────────────────────────────────────────────────
   25 · PAGE LOADER
───────────────────────────────────────────────────────────── */
html.light-mode #page-loader {
  background: #f6f1e8;
}

html.light-mode #page-loader .loader-left,
html.light-mode #page-loader .loader-right {
  background: #f6f1e8;
}

html.light-mode .loader-logo { filter: brightness(0); }

html.light-mode .loader-logo.pulse {
  animation: loader-pulse-light 0.4s ease forwards;
}

@keyframes loader-pulse-light {
  0%   { transform: scale(1);    filter: brightness(0); }
  50%  { transform: scale(1.08); filter: brightness(0) drop-shadow(0 0 18px rgba(176, 125, 19, 0.9)); }
  100% { transform: scale(1);    filter: brightness(0) drop-shadow(0 0 8px rgba(176, 125, 19, 0.45)); }
}

html.light-mode .loader-line {
  background: linear-gradient(90deg, transparent, #b07d13, transparent);
}

html.light-mode .loader-label { color: #9a8b7a; }


/* ─────────────────────────────────────────────────────────────
   26 · MAPA (LEAFLET)
───────────────────────────────────────────────────────────── */
html.light-mode .map-box {
  background: #f5f5f5;
  border: 2px solid rgba(214, 143, 20, 0.55);
  box-shadow:
    0 0 18px rgba(214, 143, 20, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.08);
}

html.light-mode #map,
html.light-mode .leaflet-container { background: #f5f5f5 !important; }

html.light-mode .leaflet-tile {
  filter:
    grayscale(0.6)
    brightness(0.95)
    contrast(1.1)
    sepia(0.5)
    hue-rotate(-8deg)
    saturate(1.6);
}

html.light-mode .map-box::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12));
}

html.light-mode .leaflet-control-zoom {
  border-color: rgba(214, 143, 20, 0.45) !important;
  box-shadow: 0 0 12px rgba(214, 143, 20, 0.08);
}

html.light-mode .leaflet-control-zoom a {
  background: #ffffff !important;
  color: #c27b00 !important;
}

html.light-mode .leaflet-control-zoom a:hover {
  background: #f2f2f2 !important;
  color: #ffae00 !important;
}

html.light-mode .custom-marker-pin {
  background: radial-gradient(circle at 35% 35%, #ffd978, #d68f14 60%, #9b6500 100%);
  border-color: #ffffff;
}

html.light-mode .custom-marker-pin::after { background: #ffffff; }

html.light-mode .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(214, 143, 20, 0.2);
}

html.light-mode .map-popup strong      { color: #c27b00; }
html.light-mode .leaflet-popup-tip     { background: #ffffff; }
html.light-mode .leaflet-popup-close-button { color: #9a8b7a !important; }


/* ─────────────────────────────────────────────────────────────
   27 · RESPONSIVO — MOBILE (≤ 768px)
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .footer            { padding: 45px 24px; }
  .footer-container  { flex-direction: column; gap: 45px; }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .footer-bottom p,
  .footer-bottom span,
  .logo-footer { justify-self: center; }

  .pp-info  { min-width: unset; }
  .pp-title { max-width: 110px; }
  .pp-vol   { display: none; }
  .pp-time  { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   28 · RESPONSIVO — PEQUENO (≤ 640px)
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .testimonials-header h2 { font-size: 28px; }
  .testimonial-text       { font-size: 16px; }
}