/* ==========================================================================
   Fofinjas 2.0 - Custom Styles
   Font: TT Commons Pro (Bold / Negrito)
   Theme: Pure Black (#000000)
   Animations: Individual Card Movement (Left to Right like fofinja.com)
   Dynamic Button: Configurable position & real-time video color sampling
   ========================================================================== */

/* --- Font Definitions: TT Commons Pro --- */
@font-face {
  font-family: 'TT Commons Pro';
  src: url('../fonts/78e74164a4ee09afd0188f20b378a44f.woff2') format('woff2'),
       url('../fonts/f98c9cf8d27ff8da33f2ad7ae703580c.woff2') format('woff2'),
       local('TT Commons Pro Bold'),
       local('TT Commons Bold');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Commons Pro';
  src: url('../fonts/98c4d2c0223fc8474641c77f923528e9.woff2') format('woff2'),
       local('TT Commons Pro SemiBold'),
       local('TT Commons SemiBold');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Commons Pro';
  src: url('../fonts/5505f71211e4b034e8c772ad6db3aad7.woff2') format('woff2'),
       url('../fonts/93fb6c909f280f040a9e1d40c2b7e86c.woff2') format('woff2'),
       local('TT Commons Pro Regular'),
       local('TT Commons Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-glow: rgba(255, 105, 180, 0.4);
  --accent-pink: #ff5e98;
  --accent-purple: #9c40ff;
  --dark-bg: #000000;
  --toggle-bg: rgba(16, 16, 18, 0.88);
  --toggle-border: rgba(255, 105, 180, 0.28);

  /* Configurable Sobre Mim Button Geometry */
  --btn-about-x: 473px;
  --btn-about-y: 407px;
  --btn-about-scale: 1.1;
  --btn-about-font-size: 16.5px;
  --btn-about-padding-x: 17px;
  --btn-about-padding-y: 5px;

  /* Dynamic Color with background video content */
  --btn-dynamic-color1: #ff5e98;
  --btn-dynamic-color2: #9c40ff;
  --btn-dynamic-glow: rgba(255, 94, 152, 0.55);

  /* Media Fit & Framing Variables */
  --fit-home_logo: cover;
  --pos-x-home_logo: 50%;
  --pos-y-home_logo: 50%;
  --scale-home_logo: 1.0;
  --shift-x-home_logo: 0px;
  --shift-y-home_logo: 0px;

  --fit-home_card_left: cover;
  --pos-x-home_card_left: 50%;
  --pos-y-home_card_left: 50%;
  --scale-home_card_left: 1;
  --shift-x-home_card_left: 0px;
  --shift-y-home_card_left: 0px;

  --fit-home_video_top: cover;
  --pos-x-home_video_top: 50%;
  --pos-y-home_video_top: 50%;
  --scale-home_video_top: 1.0;
  --shift-x-home_video_top: 0px;
  --shift-y-home_video_top: 0px;

  --fit-home_video_bottom: cover;
  --pos-x-home_video_bottom: 50%;
  --pos-y-home_video_bottom: 50%;
  --scale-home_video_bottom: 1;
  --shift-x-home_video_bottom: 0px;
  --shift-y-home_video_bottom: 0px;

  --fit-home_img_center_top: cover;
  --pos-x-home_img_center_top: 50%;
  --pos-y-home_img_center_top: 0%;
  --scale-home_img_center_top: 1;
  --shift-x-home_img_center_top: 0px;
  --shift-y-home_img_center_top: 0px;

  --fit-home_card_events: cover;
  --pos-x-home_card_events: 44%;
  --pos-y-home_card_events: 50%;
  --scale-home_card_events: 1;
  --shift-x-home_card_events: 0px;
  --shift-y-home_card_events: 0px;

  --fit-home_img_right_top: cover;
  --pos-x-home_img_right_top: 50%;
  --pos-y-home_img_right_top: 50%;
  --scale-home_img_right_top: 1.0;
  --shift-x-home_img_right_top: 0px;
  --shift-y-home_img_right_top: 0px;

  --fit-home_img_right_center: cover;
  --pos-x-home_img_right_center: 50%;
  --pos-y-home_img_right_center: 50%;
  --scale-home_img_right_center: 1.0;
  --shift-x-home_img_right_center: 0px;
  --shift-y-home_img_right_center: 0px;

  --fit-sobre_video: cover;
  --pos-x-sobre_video: 50%;
  --pos-y-sobre_video: 25%;
  --scale-sobre_video: 1.15;
  --shift-x-sobre_video: 0px;
  --shift-y-sobre_video: 0px;
}

* {
  box-sizing: border-box;
}

/* Force pure black background across all levels */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #000000 !important;
  background: #000000 !important;
  font-family: 'TT Commons Pro', 'TT Commons', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Eliminate any white flashes from Canva container divs */
._8jGYJw,
.rGeu6w,
.onhyOQ,
.twbtjQ,
.GDnEHQ,
.fMSICA,
.h517IA,
._5yhCRQ,
.viewport-outer,
.canva-stage-canvas {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Apply TT Commons Pro Bold across all texts */
body, p, span, h1, h2, h3, h4, h5, h6, a, button, div, .canva-stage-canvas * {
  font-family: 'TT Commons Pro', 'TT Commons', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Remove old black round background & Canva video overlays behind "Sobre Mim"
   ========================================================================== */
#LBz45V0gL29Nw2tV,
.Bu_D9Q,
.I4sCDQ,
.v4nAuw,
.n1_ZIg,
.Qy939g,
.thT2yw,
.foMqyw,
.OLvpgw {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   Configurable & Dynamic "Sobre Mim" Button
   ========================================================================== */
#LBLY9012t8l9wPdB {
  transform: translate(var(--btn-about-x, 473px), var(--btn-about-y, 376px)) scale(var(--btn-about-scale, 1)) !important;
  transform-origin: center center !important;
  transition: transform 0.2s ease-out !important;
}

.btn-sobre-mim {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--btn-about-padding-y, 8px) var(--btn-about-padding-x, 22px) !important;
  font-size: var(--btn-about-font-size, 14.5px) !important;
  font-weight: 700 !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, var(--btn-dynamic-color1, #ff5e98), var(--btn-dynamic-color2, #9c40ff)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px var(--btn-dynamic-glow, rgba(255, 94, 152, 0.45)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  text-decoration: none !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: normal !important;
}

.btn-sobre-mim:hover {
  transform: scale(1.06) translateY(-2px) !important;
  box-shadow: 0 6px 28px var(--btn-dynamic-glow, rgba(255, 94, 152, 0.75)), 0 0 20px rgba(156, 64, 255, 0.6) !important;
  filter: brightness(1.15) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.btn-sobre-mim:active {
  transform: scale(0.98) translateY(0) !important;
}

/* ==========================================================================
   Individual Card Entrance Animation (Page stays still, each card moves)
   ========================================================================== */

@keyframes cardSlideRight {
  0% {
    opacity: 0;
    transform: translate(-70px, 0);
  }
  35% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0);
  }
}

@keyframes linearFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Outer layout - FIXED AND SOLID, NO PAGE MOVEMENT */
.viewport-outer {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #000000 !important;
}

.canva-stage-canvas {
  width: 1440px;
  height: 768px;
  position: relative;
  transform-origin: center center;
  flex-shrink: 0;
  background-color: #000000 !important;
}

/* The section container is completely stationary */
.rGeu6w {
  width: 100%;
  height: 100%;
  background-color: #000000 !important;
}

/* ==========================================================================
   Top Navigation Bar with Sound & Volume Slider
   ========================================================================== */
.top-navigation-bar {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--toggle-bg);
  padding: 6px 12px;
  border-radius: 40px;
  border: 1px solid var(--toggle-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 105, 180, 0.15);
  animation: linearFade 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.top-navigation-bar:hover {
  border-color: rgba(255, 105, 180, 0.6);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 105, 180, 0.3);
}

/* Language Toggle Switch */
.lang-toggle-group {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 30px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lang-btn {
  background: transparent;
  border: none;
  outline: none;
  color: #a5a5b5;
  font-size: 13px;
  font-weight: 700 !important;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  text-decoration: none;
}

.lang-btn.active {
  background: linear-gradient(135deg, #ff5e98, #9c40ff);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(255, 94, 152, 0.45);
}

.lang-btn:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.lang-flag {
  font-size: 14px;
}

/* ==========================================================================
   Sound Control & Neon Volume Slider
   ========================================================================== */
.sound-control-group {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 3px 6px 3px 3px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sound-control-group:hover,
.sound-control-group.open {
  border-color: rgba(255, 105, 180, 0.4);
  background: rgba(255, 105, 180, 0.08);
}

.sound-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.sound-toggle-btn:hover {
  background: rgba(255, 105, 180, 0.25);
  transform: scale(1.08);
}

.sound-toggle-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Volume Slider Wrapper */
.volume-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
  margin-left: 0;
}

.sound-control-group.open .volume-slider-wrapper,
.sound-control-group:hover .volume-slider-wrapper {
  max-width: 150px;
  opacity: 1;
  margin-left: 4px;
}

/* Neon Range Slider Input */
.volume-slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

.volume-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5e98, #9c40ff);
  box-shadow: 0 0 8px rgba(255, 94, 152, 0.8);
  cursor: pointer;
  border: 1.5px solid #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.volume-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255, 94, 152, 1);
}

.volume-slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5e98, #9c40ff);
  box-shadow: 0 0 8px rgba(255, 94, 152, 0.8);
  cursor: pointer;
  border: 1.5px solid #fff;
}

.volume-percentage {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-pink);
  min-width: 30px;
  text-align: right;
  letter-spacing: 0.5px;
}

/* Hover effects for interactive buttons and links */
a[href] {
  transition: filter 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

a[href]:hover {
  filter: brightness(1.15);
}

/* Back button pulse effect */
a[href="index.html"] {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

a[href="index.html"]:hover {
  transform: scale(1.12) translateY(-2px);
  filter: drop-shadow(0 0 12px rgba(255, 105, 180, 0.7));
}

/* Social links hover */
a[target="_blank"]:hover {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 4px 12px rgba(255, 105, 180, 0.45));
}

/* Scrollbar styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 105, 180, 0.35);
  border-radius: 4px;
}


/* ==========================================================================
   Media Frame Reset & Universal Fit Engine (Photos and Videos)
   ========================================================================== */
.slot-frame {
  overflow: hidden !important;
}

.slot-frame ._4c2rDg,
.slot-frame .qhHTGg,
.slot-frame .jXCxjw,
.slot-frame .NI12hw {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

.slot-media,
.slot-frame img,
.slot-frame video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform-origin: center center !important;
  transition: transform 0.15s ease-out, object-position 0.15s ease-out !important;
}

#frame-home_logo .slot-media, #frame-home_logo img, #frame-home_logo video {
  object-fit: var(--fit-home_logo, cover) !important;
  object-position: var(--pos-x-home_logo, 50%) var(--pos-y-home_logo, 50%) !important;
  transform: scale(var(--scale-home_logo, 1)) translate(var(--shift-x-home_logo, 0px), var(--shift-y-home_logo, 0px)) !important;
}

#frame-home_card_left .slot-media, #frame-home_card_left img, #frame-home_card_left video {
  object-fit: var(--fit-home_card_left, cover) !important;
  object-position: var(--pos-x-home_card_left, 50%) var(--pos-y-home_card_left, 50%) !important;
  transform: scale(var(--scale-home_card_left, 1)) translate(var(--shift-x-home_card_left, 0px), var(--shift-y-home_card_left, 0px)) !important;
}

#frame-home_video_top .slot-media, #frame-home_video_top img, #frame-home_video_top video {
  object-fit: var(--fit-home_video_top, cover) !important;
  object-position: var(--pos-x-home_video_top, 50%) var(--pos-y-home_video_top, 50%) !important;
  transform: scale(var(--scale-home_video_top, 1)) translate(var(--shift-x-home_video_top, 0px), var(--shift-y-home_video_top, 0px)) !important;
}

#frame-home_video_bottom .slot-media, #frame-home_video_bottom img, #frame-home_video_bottom video {
  object-fit: var(--fit-home_video_bottom, cover) !important;
  object-position: var(--pos-x-home_video_bottom, 50%) var(--pos-y-home_video_bottom, 50%) !important;
  transform: scale(var(--scale-home_video_bottom, 1)) translate(var(--shift-x-home_video_bottom, 0px), var(--shift-y-home_video_bottom, 0px)) !important;
}

#frame-home_img_center_top .slot-media, #frame-home_img_center_top img, #frame-home_img_center_top video {
  object-fit: var(--fit-home_img_center_top, cover) !important;
  object-position: var(--pos-x-home_img_center_top, 50%) var(--pos-y-home_img_center_top, 50%) !important;
  transform: scale(var(--scale-home_img_center_top, 1)) translate(var(--shift-x-home_img_center_top, 0px), var(--shift-y-home_img_center_top, 0px)) !important;
}

#frame-home_card_events .slot-media, #frame-home_card_events img, #frame-home_card_events video {
  object-fit: var(--fit-home_card_events, cover) !important;
  object-position: var(--pos-x-home_card_events, 50%) var(--pos-y-home_card_events, 50%) !important;
  transform: scale(var(--scale-home_card_events, 1)) translate(var(--shift-x-home_card_events, 0px), var(--shift-y-home_card_events, 0px)) !important;
}

#frame-home_img_right_top .slot-media, #frame-home_img_right_top img, #frame-home_img_right_top video {
  object-fit: var(--fit-home_img_right_top, cover) !important;
  object-position: var(--pos-x-home_img_right_top, 50%) var(--pos-y-home_img_right_top, 50%) !important;
  transform: scale(var(--scale-home_img_right_top, 1)) translate(var(--shift-x-home_img_right_top, 0px), var(--shift-y-home_img_right_top, 0px)) !important;
}

#frame-home_img_right_center .slot-media, #frame-home_img_right_center img, #frame-home_img_right_center video {
  object-fit: var(--fit-home_img_right_center, cover) !important;
  object-position: var(--pos-x-home_img_right_center, 50%) var(--pos-y-home_img_right_center, 50%) !important;
  transform: scale(var(--scale-home_img_right_center, 1)) translate(var(--shift-x-home_img_right_center, 0px), var(--shift-y-home_img_right_center, 0px)) !important;
}

#frame-sobre_video .slot-media, #frame-sobre_video img, #frame-sobre_video video {
  object-fit: var(--fit-sobre_video, cover) !important;
  object-position: var(--pos-x-sobre_video, 50%) var(--pos-y-sobre_video, 50%) !important;
  transform: scale(var(--scale-sobre_video, 1)) translate(var(--shift-x-sobre_video, 0px), var(--shift-y-sobre_video, 0px)) !important;
}


/* ==========================================================================
   Mobile Responsive Experience (Smartphones & Tablets <= 769px)
   Native app-like vertical layout with 60 FPS videos, full-bleed cards & touch polish
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    background-color: #000000 !important;
    background: #000000 !important;
  }

  .viewport-outer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-top: 68px !important;
    padding-bottom: 60px !important;
    background-color: #000000 !important;
  }

  /* Intermediate wrappers - unconstrain all Canva artboard containers */
  .canva-stage-canvas,
  .rGeu6w,
  .rGeu6w > div,
  ._8jGYJw,
  .fMSICA,
  ._5yhCRQ,
  .onhyOQ,
  .twbtjQ,
  .GDnEHQ,
  .o2Yl2g {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    background: transparent !important;
  }

  /* Keep SVG defs active in DOM but visually hidden */
  svg._7KaXww {
    display: block !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Top Navigation Bar: Floating Frosted Pill */
  .top-navigation-bar {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 390px !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    z-index: 999999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 12px rgba(255, 105, 180, 0.2) !important;
  }

  /* Card animations on mobile */
  .card-animated-inner {
    animation-duration: 0.6s !important;
  }

  /* Main Container: 2-Column Responsive Grid */
  ._mXnjA {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
    position: relative !important;
    width: 100% !important;
    max-width: 410px !important;
    margin: 0 auto !important;
    padding: 0 16px 40px 16px !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Hide Canva spacer & absolute background elements */
  ._6t4CHA,
  ._mXnjA > div[style*="1286.4px"],
  #LBV4HrlR4dVgVhjp,
  #LBz45V0gL29Nw2tV,
  .Pr6LEA {
    display: none !important;
  }

  /* Universal card layout resets */
  ._mXnjA > div.DF_utQ {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .card-animated-inner,
  .m1aeoQ,
  .hWv4NA,
  .slot-frame {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
  }

  .slot-frame {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* 1. Header Logo Banner */
  #LBXJdwHyGl3ts9fy {
    grid-column: 1 / -1 !important;
    order: 1 !important;
    height: 140px !important;
    max-width: 250px !important;
    justify-self: center !important;
  }
  #LBXJdwHyGl3ts9fy .slot-frame {
    border: none !important;
    box-shadow: none !important;
  }

  /* 2. Featured Top Video */
  #LByLlLM0Yh6b1jWR {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    height: 480px !important;
  }
  #LByLlLM0Yh6b1jWR .slot-frame {
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 105, 180, 0.3) !important;
    box-shadow: 0 8px 32px rgba(255, 105, 180, 0.25) !important;
  }

  /* 3. Centered "Sobre Mim" / "About Me" Dynamic Button */
  html body #LBLY9012t8l9wPdB {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    justify-self: center !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    margin: 6px auto 14px auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  html body #LBLY9012t8l9wPdB *,
  html body #LBLY9012t8l9wPdB .DF_utQ,
  html body #LBLY9012t8l9wPdB .aF9o6Q,
  html body #LBLY9012t8l9wPdB .AModoQ,
  html body #LBLY9012t8l9wPdB .E8yZTA {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .btn-sobre-mim {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: normal !important;
    padding: 10px 30px !important;
    height: auto !important;
    min-height: 42px !important;
    border-radius: 30px !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px var(--btn-dynamic-glow) !important;
    text-align: center !important;
  }
  .btn-sobre-mim span {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* 4. Left Waifu Card (Lime Portrait) */
  #LBv6MDMM7Xx0Fx1W {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    height: 480px !important;
  }
  #LBv6MDMM7Xx0Fx1W .slot-frame {
    border-radius: 24px !important;
  }

  /* 5. Bottom Video / Media */
  #LBHMYDDyrzpHTgxX {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    height: 240px !important;
  }
  #LBHMYDDyrzpHTgxX .slot-frame {
    border-radius: 20px !important;
  }

  /* 6. Calendário Title */
  #LB7xQfltMdWxzkgY {
    grid-column: 1 / -1 !important;
    order: 6 !important;
    height: auto !important;
    margin-top: 15px !important;
    margin-bottom: -6px !important;
  }
  #LB7xQfltMdWxzkgY,
  #LB7xQfltMdWxzkgY * {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  #LB7xQfltMdWxzkgY p,
  #LB7xQfltMdWxzkgY span {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 26px !important;
    line-height: 32px !important;
  }

  /* 7. Events Card */
  #LBcskYFS7q36T4nL {
    grid-column: 1 / -1 !important;
    order: 7 !important;
    height: 480px !important;
  }
  #LBcskYFS7q36T4nL .slot-frame {
    border-radius: 24px !important;
  }

  /* 8. Gallery Top Center */
  #LB0hTw4qh33rDl5b {
    grid-column: 1 / -1 !important;
    order: 8 !important;
    height: 240px !important;
  }

  /* 9 & 10. Gallery Side-by-Side 2-Column Grid */
  #LBcHPC6xWw07zwv3 {
    grid-column: 1 !important;
    order: 9 !important;
    height: 180px !important;
  }
  #LBjRrNTMNhxlZ55p {
    grid-column: 2 !important;
    order: 10 !important;
    height: 180px !important;
  }

  /* 11. Social Links: VRChat */
  #__id29 {
    grid-column: 1 / -1 !important;
    order: 11 !important;
    height: 48px !important;
    max-width: 170px !important;
    justify-self: center !important;
    margin-top: 16px !important;
  }
  #__id29,
  #__id29 * {
    transform: none !important;
  }
  #__id29 .Izwocg,
  #__id29 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 12 & 13. Social Links: Discord & Twitter Tiles */
  #__id19 {
    grid-column: 1 !important;
    order: 12 !important;
    width: 60px !important;
    height: 60px !important;
    justify-self: end !important;
    margin-right: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #__id23 {
    grid-column: 2 !important;
    order: 13 !important;
    width: 60px !important;
    height: 60px !important;
    justify-self: start !important;
    margin-left: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #__id19,
  #__id23,
  #__id19 *,
  #__id23 * {
    transform: none !important;
  }
  #__id19 .Izwocg,
  #__id23 .Izwocg,
  #__id19 img,
  #__id23 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  #__id19 a._3zDNwA,
  #__id23 a._3zDNwA,
  #__id29 a._3zDNwA {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
  }

  /* ==========================================================================
     Sobre / About Page Mobile Styles
     ========================================================================== */
  #LBbxYT4XhjJtKgY7,
  #LB9MzNFQC6tqt8tY {
    grid-column: 1 / -1 !important;
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    text-align: center !important;
    margin-top: 12px !important;
  }
  #LBbxYT4XhjJtKgY7 .aF9o6Q,
  #LB9MzNFQC6tqt8tY .aF9o6Q,
  #LBbxYT4XhjJtKgY7 .E8yZTA,
  #LB9MzNFQC6tqt8tY .E8yZTA {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  #LBbxYT4XhjJtKgY7 p,
  #LB9MzNFQC6tqt8tY p,
  #LBbxYT4XhjJtKgY7 span,
  #LB9MzNFQC6tqt8tY span {
    font-size: 32px !important;
    line-height: 38px !important;
    text-align: center !important;
  }

  #LBHMJxzCxzZk2Nd3,
  #LBfCjkCPKzHFwNxl {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 220px !important;
    position: relative !important;
    transform: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  #LBHMJxzCxzZk2Nd3 > div,
  #LBfCjkCPKzHFwNxl > div,
  #frame-sobre_video {
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
  }

  #LBqdT815dMFBlgMy,
  #LBCvZYMSM6SRLnX0 {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    padding: 0 4px !important;
  }
  #LBqdT815dMFBlgMy .aF9o6Q,
  #LBCvZYMSM6SRLnX0 .aF9o6Q,
  #LBqdT815dMFBlgMy .E8yZTA,
  #LBCvZYMSM6SRLnX0 .E8yZTA {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  #LBqdT815dMFBlgMy p,
  #LBCvZYMSM6SRLnX0 p,
  #LBqdT815dMFBlgMy span,
  #LBCvZYMSM6SRLnX0 span {
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
  }

  #__id39,
  #__id50 {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 64px !important;
    height: 64px !important;
    position: relative !important;
    transform: none !important;
    justify-self: center !important;
    margin: 20px auto 40px auto !important;
  }
  #__id39 .Izwocg,
  #__id50 .Izwocg,
  #__id39 img,
  #__id50 img {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
}