/* ============================================================
   Gloria Marra — home.css
   Homepage-specific styles, layout, and animations.
   ============================================================ */

/* Base resets for links inside the homepage context to prevent browser-default hovers */
a, 
a:hover, 
a:focus, 
a:active {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   THE "AGENCY" EXPENSIVE TOUCHES
   ═══════════════════════════════════════ */
.noise-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
  z-index: 99999;
  animation: grainAnimation 1.2s steps(6) infinite;
}

@keyframes grainAnimation {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -25%); }
  40% { transform:translate(-5%, 25%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 0%); }
  70% { transform:translate(0%, 15%); }
  80% { transform:translate(3%, 35%); }
  90% { transform:translate(-10%, 10%); }
}

/* Custom Cursor Aura - Aggressive Hiding of Native Browser Cursor */
html, body, *, a, button, input, select, textarea, [role="button"], ::before, ::after {
  cursor: none !important;
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--color-roxo-fenix);
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  /* Transform managed by JS */
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), height 0.4s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

.cursor-follower.is-hovering {
  width: 70px;
  height: 70px;
  background-color: rgba(123, 75, 143, 0.08);
  border: 1px solid rgba(123, 75, 143, 0.35);
  box-shadow: 0 8px 32px 0 rgba(123, 75, 143, 0.15), inset 0 0 12px rgba(123, 75, 143, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Smooth reveal text (Premium Blur) */
.reveal-up {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(8px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform, filter;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Staggered delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Cinematic Image Reveal (Subtle Inset Expansion) */
.reveal-image {
  clip-path: inset(5% 5% 5% 5%);
  opacity: 0;
  transition: clip-path 1.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: clip-path, opacity;
}
.reveal-image.is-visible {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.reveal-image img {
  transform: scale(1.1);
  transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform;
}
.reveal-image.is-visible img {
  transform: scale(1);
}

/* ══════════════════════════════════════
   GLOBAL ARTISTIC ELEMENTS
   ═══════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-roxo-fenix);
  display: block;
  margin-bottom: 2rem;
}

.huge-text {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-preto-editorial);
}

.huge-text i {
  font-style: italic;
  color: var(--color-roxo-fenix);
}

/* ══════════════════════════════════════
   NAVIGATION
   Fixed so it persists on scroll.
   Frosted glass once hero is passed.
   ═══════════════════════════════════════ */
.gloria-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.2rem 4rem;
  transition:
    background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    backdrop-filter 0.5s ease,
    border-color 0.5s ease,
    padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  border-bottom: 1px solid transparent;
}

/* Brand mark — left side */
.gloria-nav__brand {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-preto-editorial);
  text-decoration: none;
  transition: color 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none; /* invisible until scrolled */
}

.gloria-nav__logo {
  height: 1.8rem;
  max-height: 32px;
  width: auto;
  display: block;
  transition: filter 0.4s ease;
}

body.theme-dark-bg .gloria-nav.is-scrolled .gloria-nav__logo {
  filter: brightness(0) invert(1); /* Invert dark logo to white in dark mode sections */
}


/* Links — centered (flex trick: spacer on left via brand, spacer on right via cta) */
.gloria-nav__links {
  display: flex;
  gap: 5rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.gloria-nav__link {
  color: var(--color-preto-editorial) !important;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  position: relative;
  transition: color 0.4s ease, letter-spacing 0.3s ease, font-style 0.3s ease;
}

.gloria-nav__link:hover {
  color: var(--color-preto-editorial) !important;
  text-decoration: none !important;
  font-style: italic;
  letter-spacing: 0.3em;
}

.gloria-nav__link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-bordo-profundo);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.gloria-nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Spacer balances the layout so links stay centered */
.gloria-nav__spacer {
  flex: 0 0 auto;
  width: 120px; /* approximate width of brand name */
}

/* Scrolled state — frosted glass */
.gloria-nav.is-scrolled {
  background-color: rgba(243, 239, 234, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(27, 27, 27, 0.06);
  padding: 1.4rem 4rem;
}

.gloria-nav.is-scrolled .gloria-nav__brand {
  opacity: 1;
  pointer-events: auto;
}

/* Dark section nav state (Paris de Mulheres) */
body.theme-dark-bg .gloria-nav.is-scrolled {
  background-color: rgba(20, 20, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.04);
}

body.theme-dark-bg .gloria-nav__link {
  color: var(--color-off-white) !important;
}

body.theme-dark-bg .gloria-nav__link::after {
  background-color: var(--color-off-white);
}

/* ══════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════ */
.gloria-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.gloria-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
  position: relative;
  margin-top: 4rem;
  gap: 4rem;
}

.gloria-hero__text-column {
  flex: 1;
  position: relative;
  z-index: 10;
  animation: fadeUp 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
  transform: translateY(40px);
}

.gloria-hero__image-column {
  width: 46%;
  height: 76vh;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(27, 27, 27, 0.08);
  border: 1px solid rgba(27, 27, 27, 0.04);
}

.gloria-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gloria-hero__image-column:hover .gloria-hero__bg-image {
  transform: scale(1.05);
}

.gloria-hero__image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(27,27,27,0) 60%, rgba(27,27,27,0.3) 100%);
  pointer-events: none;
  z-index: 2;
}

.gloria-hero__image-caption {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--color-off-white-editorial, #F3EFEA);
  letter-spacing: 0.25em;
  opacity: 0.8;
  text-transform: uppercase;
  z-index: 3;
  transition: opacity 0.5s ease;
}

.gloria-hero__image-column:hover .gloria-hero__image-caption {
  opacity: 1;
}

.gloria-hero__title {
  margin: 0 0 3rem 0;
  width: 100%;
}

.gloria-hero__art-links {
  display: flex;
  gap: 3rem;
  margin-top: 5rem;
}

.art-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #1B1B1B !important;
  color: var(--color-preto-editorial, #1B1B1B) !important;
  /* Kill ALL text decorations at every level */
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: solid !important;
  text-decoration-thickness: 0 !important;
  -webkit-text-decoration: none !important;
  /* Kill borders and outlines */
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  /* Layout */
  position: relative;
  padding-bottom: 6px;
  display: inline-block;
  /* Isolate this element's stacking context */
  isolation: isolate;
}

.art-link:hover,
.art-link:focus,
.art-link:active,
.art-link:visited {
  color: #1B1B1B !important;
  color: var(--color-preto-editorial, #1B1B1B) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  -webkit-text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Explicitly kill the ::before pseudo-element — browser was computing it as display:inline
   which allows text-decoration to bleed through at the line-box painting level */
.art-link::before {
  content: none !important;
  display: none !important;
}

.art-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, var(--color-bordo-profundo, #7A1E2C) 50%, var(--color-preto-editorial, #1B1B1B) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), background-position 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  text-decoration: none !important;
}

.art-link:hover::after {
  transform: scaleX(1);
  background-position: 0% 0;
}

/* ══════════════════════════════════════
   EDITORIAL BUTTONS
   ═══════════════════════════════════════ */
.editorial-btn {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-preto-editorial);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 3.5rem;
  border: 1px solid rgba(27, 27, 27, 0.3);
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.editorial-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--color-preto-editorial);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}

.editorial-btn:hover {
  color: var(--color-off-white);
  border-color: var(--color-preto-editorial);
}

.editorial-btn:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.editorial-btn--light {
  color: var(--color-off-white);
  border-color: rgba(255, 255, 255, 0.3);
}

.editorial-btn--light::before {
  background-color: var(--color-off-white);
}

.editorial-btn--light:hover {
  color: var(--color-ameixa-escura);
  border-color: var(--color-off-white);
}

/* ══════════════════════════════════════
   INTRO SECTION (THE CURATOR)
   ═══════════════════════════════════════ */
.gloria-intro {
  padding: 15rem 4rem;
  position: relative;
  background-color: #FFFFFF;
}

.gloria-intro__grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 8rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

.gloria-intro__image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(27, 27, 27, 0.08);
  border: 1px solid rgba(27, 27, 27, 0.04);
  overflow: hidden;
}

.gloria-intro__portrait {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 2;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.gloria-intro__image-wrapper:hover .gloria-intro__portrait {
  transform: scale(1.05);
}

.gloria-intro__image-wrapper::before {
  content: '';
  position: absolute;
  top: -3rem;
  bottom: -3rem;
  left: -2rem;
  width: 1px;
  background-color: var(--color-roxo-fenix);
  opacity: 0.2;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

.gloria-intro__image-wrapper.is-visible::before {
  transform: scaleY(1);
}

.gloria-intro__content {
  padding-top: 4rem;
  position: relative;
}

.gloria-intro__text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-preto-editorial);
  position: relative;
}

.gloria-intro__text p:first-child::first-letter {
  font-family: var(--font-heading);
  font-size: 6rem;
  float: left;
  line-height: 0.8;
  margin-right: 1rem;
  margin-top: 0.5rem;
  color: var(--color-roxo-fenix);
  font-style: italic;
}

.gloria-intro__text p {
  margin-bottom: 2.5rem;
}

/* ══════════════════════════════════════
   FRANCE EXPERIENCE
   ═══════════════════════════════════════ */
.gloria-france {
  padding: 10rem 4rem;
  background-color: var(--color-creme-claro);
  position: relative;
}

.gloria-france__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
}

.gloria-france__content {
  background-color: var(--color-creme-claro);
  padding: 6rem 6rem 6rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.gloria-france__logo {
  max-width: 250px;
  margin-bottom: 4rem;
  mix-blend-mode: multiply;
}

.gloria-france__text {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: var(--color-preto-editorial);
  margin-bottom: 2rem;
}

.gloria-france__desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: #555;
  max-width: 400px;
}

.gloria-france__image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(27, 27, 27, 0.08);
  border: 1px solid rgba(27, 27, 27, 0.04);
  overflow: hidden;
}

.gloria-france__image img {
  position: absolute;
  top: -5rem;
  bottom: -5rem;
  right: 0;
  width: 100%;
  height: calc(100% + 10rem);
  object-fit: cover;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gloria-france__image:hover img {
  transform: scale(1.05);
}

/* ══════════════════════════════════════
   PARIS DE MULHERES
   ═══════════════════════════════════════ */
.gloria-paris {
  padding: 15rem 4rem;
  background-color: var(--color-off-white);
  position: relative;
}

.gloria-paris__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.gloria-paris__image {
  width: 60%;
  position: relative;
  z-index: 1;
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(27, 27, 27, 0.08);
  border: 1px solid rgba(27, 27, 27, 0.04);
  overflow: hidden;
}

.gloria-paris__image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: sepia(0.2) contrast(1.1);
  display: block;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1), filter 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gloria-paris__image:hover img {
  transform: scale(1.05);
}

.gloria-paris__content {
  width: 45%;
  background-color: var(--color-ameixa-escura);
  color: var(--color-off-white);
  padding: 8rem 5rem;
  position: absolute;
  right: 0;
  bottom: -5rem;
  z-index: 2;
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}

.gloria-paris__logo {
  max-width: 250px;
  margin-bottom: 4rem;
  filter: brightness(0) invert(1);
}

.gloria-paris__text {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 2rem;
  font-style: italic;
}

.gloria-paris__desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
}

.gloria-paris__content .art-link::after {
  background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255,255,255,0.4) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), background-position 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.gloria-paris__content .art-link:hover::after {
  background-position: 0% 0;
}

/* ══════════════════════════════════════
   HERO — scroll indicator
   ═══════════════════════════════════════ */
.gloria-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeIn 1s ease 1.4s forwards;
  pointer-events: none;
}

.gloria-hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(
    to bottom,
    rgba(27, 27, 27, 0) 0%,
    rgba(27, 27, 27, 0.3) 100%
  );
  animation: scrollPulse 2s ease-in-out infinite;
}

.gloria-hero__scroll-label {
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.35);
  writing-mode: vertical-rl;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.8; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════
   HERO — subtitle
   ═══════════════════════════════════════ */
.gloria-hero__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(27, 27, 27, 0.5);
  max-width: 380px;
  margin-bottom: 0;
}

/* ══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.gloria-footer {
  background-color: var(--color-preto-editorial);
  padding: 8rem 4rem 4rem;
}

.gloria-footer__inner {
  max-width: 1300px;
  margin: 0 auto;
}

.gloria-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 3rem;
  align-items: start;
}

.gloria-footer__brand {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-off-white);
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1;
}

.gloria-footer__tagline {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-roxo-fenix);
  opacity: 0.8;
}

.gloria-footer__col-label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243, 239, 234, 0.2);
  display: block;
  margin-bottom: 1.8rem;
}

.gloria-footer__sublinks {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.gloria-footer__sublink {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(243, 239, 234, 0.55);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  display: block;
}

.gloria-footer__sublink:hover {
  color: var(--color-off-white);
}

.gloria-footer__contact-item {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(243, 239, 234, 0.55);
  text-decoration: none;
  line-height: 2.2;
  letter-spacing: 0.03em;
  transition: color 0.3s ease;
}

.gloria-footer__contact-item:hover {
  color: var(--color-off-white);
}

.gloria-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.gloria-footer__legal {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: rgba(243, 239, 234, 0.18);
  letter-spacing: 0.08em;
}

.gloria-footer__back-top {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 239, 234, 0.25);
  text-decoration: none;
  transition: color 0.3s ease;
}

.gloria-footer__back-top:hover {
  color: var(--color-roxo-fenix);
}

/* ══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   RESPONSIVE — Tablet & below (≤1024px)
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Desktop-only decorative elements ── */
  .editorial-viewport-frame { display: none !important; }
  .editorial-grid-lines     { display: none !important; }
  .cursor-follower          { display: none !important; }
  /* Restore native cursor on touch screens */
  html, body, *, a, button, input, select, textarea, [role="button"], ::before, ::after {
    cursor: auto !important;
  }

  /* ── Navigation ── */
  .gloria-nav {
    padding: 1.8rem 0;
  }
  .gloria-nav__links {
    gap: 2rem;
    padding: 0 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .gloria-nav__link {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  /* ── Hero ──
     Stack text above image. Use dvh so the address bar on mobile
     doesn't cause overflow. Padding-top clears the absolute nav. */
  .gloria-hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
  }
  .gloria-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 7rem 1.5rem 4rem;
    margin-top: 0;
    gap: 2.5rem;
  }
  .gloria-hero__text-column {
    width: 100%;
  }
  .gloria-hero__title {
    margin-bottom: 0;
  }
  .gloria-hero__art-links {
    margin-top: 2rem;
    gap: 2rem;
    flex-wrap: wrap;
  }
  /* Image fills width; aspect-ratio keeps proportions without fixed vh */
  .gloria-hero__image-column {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 60vh;
    border-radius: 6px;
  }

  /* ── Intro / Sobre a Gloria ──
     Single column: portrait then text.
     Drop-cap scaled for narrow screens. */
  .gloria-intro {
    padding: 5rem 1.5rem 6rem;
  }
  .gloria-intro__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* Decorative vertical purple line doesn't work in single-column flow */
  .gloria-intro__image-wrapper::before {
    display: none;
  }
  .gloria-intro__content {
    padding-top: 0;
  }
  .gloria-intro__text {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    line-height: 1.65;
  }
  .gloria-intro__text p:first-child::first-letter {
    font-size: 4rem;
    margin-right: 0.5rem;
    margin-top: 0.2rem;
  }

  /* ── France Experience ──
     Image comes FIRST on mobile for visual impact, then content below.
     Full-bleed edge-to-edge image; no border-radius / box-shadow at edges. */
  .gloria-france {
    padding: 0;
  }
  .gloria-france__inner {
    grid-template-columns: 1fr;
  }
  .gloria-france__image {
    order: -1;               /* pull image above content in visual order */
    height: 62vw;
    min-height: 260px;
    max-height: 420px;
    border-radius: 0;
    box-shadow: none;
    border: none;
    position: relative;
    overflow: hidden;
  }
  .gloria-france__image img {
    position: absolute;
    top: 0;
    bottom: auto;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gloria-france__content {
    padding: 4rem 1.5rem 5rem;
    background-color: var(--color-creme-claro);
  }
  .gloria-france__logo {
    max-width: 180px;
    margin-bottom: 2.5rem;
  }
  .gloria-france__text {
    font-size: clamp(1.6rem, 5vw, 2rem);
    margin-bottom: 1.5rem;
  }
  .gloria-france__desc {
    max-width: 100%;
    font-size: 1rem;
  }

  /* ── Paris de Mulheres ──
     Full-bleed image (no border-radius, no padding around section),
     then solid purple panel flush below — no overlap gimmick on mobile. */
  .gloria-paris {
    padding: 0;
  }
  .gloria-paris__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .gloria-paris__image {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: none;
    position: relative;
    z-index: 1;
  }
  .gloria-paris__image img {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    width: 100%;
    height: auto;
  }
  .gloria-paris__content {
    width: 100%;
    position: static;   /* remove absolute — let it flow naturally */
    right: auto;
    bottom: auto;
    margin-top: 0;      /* flush directly below image */
    padding: 5rem 1.5rem 6rem;
    box-shadow: none;
  }
  .gloria-paris__logo {
    max-width: 180px;
    margin-bottom: 2.5rem;
  }
  .gloria-paris__text {
    font-size: clamp(1.7rem, 5.5vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 2.5rem;
  }
  .gloria-paris__desc {
    font-size: 1rem;
    line-height: 1.85;
  }

  /* ─────────────────────────────────────────────────────────
     LUXURY MOBILE POLISH
     Every touch should feel like a high-end object responding.
  ───────────────────────────────────────────────────────── */

  /* 1. Eliminate the browser's default blue/grey tap flash */
  * { -webkit-tap-highlight-color: transparent; }

  /* 2. Physical feedback on tap — brief scale-press, like a real surface */
  .editorial-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
    transition: transform 0.08s ease, opacity 0.08s ease;
  }
  .gloria-nav__link:active,
  .art-link:active {
    opacity: 0.35;
    transition: opacity 0.08s ease;
  }

  /* 3. Hero headline — tighter line-height makes multi-line titles feel monumental */
  .gloria-hero__title .huge-text,
  .huge-text {
    line-height: 1.0;
  }

  /* 4. Hero: thin roxo accent line — an editorial "entry mark" above the art-links.
        The desktop equivalent is the viewport border frame; this is its mobile analogue. */
  .gloria-hero__art-links {
    position: relative;
    padding-top: 2rem;
  }
  .gloria-hero__art-links::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background-color: var(--color-roxo-fenix);
    opacity: 0.4;
  }

  /* 5. Intro: cap portrait so it never dominates the full screen on large phones */
  .gloria-intro__portrait {
    max-height: 65vh;
    object-fit: cover;
  }

  /* 6. France: cinematic image height using aspect-ratio rather than fixed px —
        feels proportional at every screen size, not like a cropped thumbnail. */
  .gloria-france__image {
    height: auto;
    aspect-ratio: 4 / 5;
    min-height: 0;      /* clear the desktop 80vh minimum */
    max-height: 78vh;
  }

  /* 7. France: editorial thin rule — signals the transition into the text content.
        Replaces the desktop's side-by-side visual separation between columns. */
  .gloria-france__content::before {
    content: '';
    display: block;
    width: 3rem;
    height: 1px;
    background-color: var(--color-roxo-assinatura);
    opacity: 0.35;
    margin-bottom: 2.5rem;
    flex-shrink: 0;
  }

  /* 8. Paris: match section background to the content panel so no off-white gap
        can ever appear between the image and the purple card on any device. */
  .gloria-paris {
    background-color: var(--color-ameixa-escura);
  }

  /* Nav: hide spacer, tighten padding, show brand inline */
  .gloria-nav { padding: 1.4rem 1.5rem; }
  .gloria-nav__spacer { display: none; }
  .gloria-nav__brand { font-size: 0.75rem; letter-spacing: 0.12em; }

  /* Hero scroll indicator hidden on mobile */
  .gloria-hero__scroll { display: none; }

  /* Footer */
  .gloria-footer { padding: 5rem 1.5rem 3rem; }
  .gloria-footer__top { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
  .gloria-footer__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — Small phones (≤480px)
   ═══════════════════════════════════════ */
@media (max-width: 480px) {

  /* Navigation: squeeze links on very narrow screens */
  .gloria-nav__links { gap: 1.2rem; }
  .gloria-nav__link  { font-size: 0.55rem; letter-spacing: 0.08em; }

  /* Hero: tighter padding, smaller image cap */
  .gloria-hero__inner {
    padding: 6.5rem 1.2rem 3rem;
    gap: 2rem;
  }
  .gloria-hero__image-column { max-height: 55vh; }
  .gloria-hero__art-links { gap: 1.5rem; }

  /* Intro: tighten spacing and drop-cap */
  .gloria-intro { padding: 4rem 1.2rem 5rem; }
  .gloria-intro__text p:first-child::first-letter {
    font-size: 3rem;
  }

  /* France */
  .gloria-france__content { padding: 3.5rem 1.2rem 4.5rem; }

  /* Paris */
  .gloria-paris__content { padding: 4rem 1.2rem 5rem; }

  /* Buttons: slightly smaller on very narrow screens */
  .editorial-btn { padding: 1rem 2.5rem; font-size: 0.7rem; }

  /* On tiny phones the France 4:5 image can be very tall — switch to 3:4 */
  .gloria-france__image {
    aspect-ratio: 3 / 4;
    max-height: 72vh;
  }

  /* Headline: stay monumental but don't overflow on 320px screens */
  .huge-text { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  /* Hero accent line proportional to tighter padding */
  .gloria-hero__art-links::before { width: 2.5rem; }
}

/* ============================================================
   RESET AGRESSIVO ANTI-LINHA BRANCA (HERO)
   Garante 100% de transparência para qualquer comportamento
   nativo ou forçado do navegador.
   ============================================================ */
.gloria-hero__art-links,
.gloria-hero__art-links a,
.gloria-hero__art-links a:hover,
.gloria-hero__art-links a:focus,
.gloria-hero__art-links a:active,
.gloria-hero__art-links a::before,
.gloria-hero__art-links a:hover::before {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-text-decoration: none !important;
  -moz-text-decoration: none !important;
}

/* ============================================================
   PREMIUM LUXURY AGENCY FEATURES
   ============================================================ */

/* 1. Fine-Line Background Parallax Grid Accents (Idea 1) */
.editorial-grid-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 4rem;
}
.grid-line {
  width: 1px;
  height: 100%;
  background-color: var(--color-preto-editorial);
  opacity: 0.03;
}

/* 2. Interactive Typography Shift on Hover (Idea 3) */
.gloria-nav__link, .art-link, .editorial-btn, h1, h2 {
  transition: font-style 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
}
.gloria-nav__link:hover, .art-link:hover {
  font-style: italic;
  letter-spacing: 0.28em;
}

/* Elegant Brand Purple Text Selection */
::selection {
  background-color: rgba(123, 75, 143, 0.25); /* Translucent Roxo Fênix */
  color: var(--color-preto-editorial, #1B1B1B);
}
::-moz-selection {
  background-color: rgba(123, 75, 143, 0.25);
  color: var(--color-preto-editorial, #1B1B1B);
}

/* Elegant Selection for the dark Paris section */
.gloria-paris ::selection {
  background-color: rgba(243, 239, 234, 0.2);
  color: var(--color-off-white, #F6F2EE);
}
.gloria-paris ::-moz-selection {
  background-color: rgba(243, 239, 234, 0.2);
  color: var(--color-off-white, #F6F2EE);
}

/* ============================================================
   NEW EXPENSIVE LUXURY AGENCY SYSTEM
   ============================================================ */

/* 1. Body Background Color Fading (Idea 4) */
body {
  background-color: var(--color-off-white-editorial);
  transition: background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1), color 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Dark Palette Section Overrides (Theme Class) */
body.theme-dark-bg {
  color: var(--color-off-white, #F6F2EE);
}
body.theme-dark-bg .huge-text,
body.theme-dark-bg h1,
body.theme-dark-bg h2,
body.theme-dark-bg .gloria-nav__link,
body.theme-dark-bg .art-link {
  color: var(--color-off-white, #F6F2EE) !important;
}
body.theme-dark-bg .gloria-nav__link::after {
  background-color: var(--color-off-white, #F6F2EE);
}
body.theme-dark-bg .editorial-viewport-frame {
  border-color: rgba(246, 242, 238, 0.1);
}
body.theme-dark-bg .grid-line {
  background-color: var(--color-off-white, #F6F2EE);
  opacity: 0.02;
}

/* 2. Minimalist Viewport Border Frame (Idea 3) */
.editorial-viewport-frame {
  position: fixed;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid rgba(27, 27, 27, 0.05);
  pointer-events: none;
  z-index: 999999;
  transition: border-color 1.2s ease;
}

/* 3. Glass Light Reflection Sweeps on Images (Idea 5) */
.reveal-image, .gloria-hero__image-column {
  position: relative;
  overflow: hidden;
}
.reveal-image::after, .gloria-hero__image-column::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: none;
  z-index: 5;
  pointer-events: none;
}
.reveal-image:hover::after, .gloria-hero__image-column:hover::after {
  left: 150%;
  transition: left 2s cubic-bezier(0.19, 1, 0.22, 1);
}