/* ============================================================
   Vidres Manresa — GLASS THEME (capa de rediseño inmersivo)
   ------------------------------------------------------------
   Glassmorphism luminoso: fondo cremoso con orbes de degradado
   iridiscente (lima · menta · brass · verd) y paneles de vidre
   esmerilat (frosted glass) a tota la web.

   Carrega DESPRÉS de styles.css → guanya per ordre de cascada.
   No toca el layout (grids, paddings) — només la "pell": fons,
   vores, blur, ombres i color quan cal contrast.
   ============================================================ */

:root {
  /* Superfície de vidre clar (text fosc a sobre) */
  --glass-bg:        rgba(255, 255, 255, .52);
  --glass-bg-strong: rgba(255, 255, 255, .68);
  --glass-border:    rgba(255, 255, 255, .65);
  --glass-blur:      blur(20px) saturate(1.6);
  --glass-shadow:
    0 10px 40px -14px rgba(15, 42, 27, .28),
    0 2px 8px rgba(15, 42, 27, .06),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .25);

  /* Superfície de vidre fosc (text clar a sobre) */
  --glass-dark-bg:     rgba(13, 38, 25, .55);
  --glass-dark-border: rgba(184, 213, 95, .20);
  --glass-dark-shadow:
    0 14px 50px -18px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .10);

  --iris: linear-gradient(100deg, #2F8B4F 0%, #7DC8A2 30%, #B8D55F 55%, #C9A86B 80%, #2F8B4F 100%);
}

/* ============================================================
   1 · FONS VIU — malla de degradats animada darrere de tot
   ============================================================ */
body {
  background: var(--bg);
  position: relative;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -10;
  pointer-events: none;
  will-change: transform;
}
/* Capa A — orbes càlids/lima, gir lent */
body::before {
  background:
    radial-gradient(36vmax 36vmax at 10% 14%, rgba(184, 213, 95, .92), transparent 58%),
    radial-gradient(34vmax 34vmax at 90% 20%, rgba(110, 205, 165, .82), transparent 60%),
    radial-gradient(40vmax 40vmax at 74% 86%, rgba(206, 170, 104, .72), transparent 58%),
    radial-gradient(32vmax 32vmax at 22% 94%, rgba(47, 139, 79, .68), transparent 60%),
    radial-gradient(28vmax 28vmax at 50% 50%, rgba(146, 213, 10, .30), transparent 64%);
  filter: blur(6px) saturate(1.25);
  animation: meshDriftA 38s ease-in-out infinite alternate;
}
/* Capa B — orbes freds/verd, deriva contrària */
body::after {
  background:
    radial-gradient(30vmax 30vmax at 58% 28%, rgba(146, 213, 10, .42), transparent 60%),
    radial-gradient(34vmax 34vmax at 16% 62%, rgba(110, 205, 165, .52), transparent 60%),
    radial-gradient(28vmax 28vmax at 94% 68%, rgba(206, 170, 104, .46), transparent 58%);
  filter: blur(12px) saturate(1.2);
  animation: meshDriftB 46s ease-in-out infinite alternate;
  opacity: .9;
}
@keyframes meshDriftA {
  0%   { transform: rotate(0deg) scale(1) translate3d(0, 0, 0); }
  50%  { transform: rotate(8deg) scale(1.08) translate3d(2%, -1%, 0); }
  100% { transform: rotate(-6deg) scale(1.04) translate3d(-2%, 2%, 0); }
}
@keyframes meshDriftB {
  0%   { transform: rotate(0deg) scale(1.05) translate3d(0, 0, 0); }
  100% { transform: rotate(10deg) scale(1.12) translate3d(3%, -3%, 0); }
}

/* Vel fina de "gra" per donar textura premium */
body { isolation: isolate; }

/* Seccions clares → transparents perquè es vegi la malla */
.carta, .carta--icons,
.process, .process--v2,
.projects, .projects--cards,
.reviews,
.about, .about--v2,
.faq,
.contact {
  background: transparent !important;
}

/* ============================================================
   2 · CAPÇALERA — topbar + nav de vidre flotant
   ============================================================ */
.topbar {
  background: rgba(7, 20, 12, .58);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(184, 213, 95, .14);
}
.nav {
  background: rgba(250, 247, 238, .55) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 4px 30px -10px rgba(15, 42, 27, .18);
}
.nav--scrolled {
  background: rgba(250, 247, 238, .72) !important;
  box-shadow: 0 8px 34px -12px rgba(15, 42, 27, .28);
}

/* ============================================================
   3 · UTILITAT GLASS — superfícies clares
   ============================================================ */
.svc,
.info-card,
.faq__item,
.review,
.about__media,
.reviews__hero,
.contact__info,
.bot {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Brillantor superior a la vora (reflex de vidre) */
.svc, .info-card, .faq__item, .review, .about__media, .contact__info {
  position: relative;
}

/* Hover: el vidre s'aixeca i s'il·lumina */
.svc:hover,
.review:hover,
.info-card:hover,
.faq__item:hover {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(184, 213, 95, .55) !important;
  box-shadow:
    0 26px 60px -22px rgba(15, 42, 27, .40),
    0 0 0 1px rgba(184, 213, 95, .25),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* Icona de servei: pastilla de vidre amb lima */
.svc__icon {
  background: linear-gradient(135deg, #C7E36A 0%, #9CB849 100%) !important;
  box-shadow:
    0 10px 24px -8px rgba(145, 213, 10, .6),
    inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

/* ============================================================
   4 · SUPERFÍCIES FOSQUES — vidre fosc (text clar)
   ============================================================ */
.trust,
.glass-section,
.footer {
  background:
    linear-gradient(135deg, rgba(15, 42, 27, .72) 0%, rgba(7, 20, 12, .82) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.trust { border-block: 1px solid rgba(184, 213, 95, .16); }

.material {
  background: var(--glass-dark-bg) !important;
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--glass-dark-border) !important;
  box-shadow: var(--glass-dark-shadow) !important;
}
.material:hover {
  border-color: rgba(184, 213, 95, .5) !important;
  box-shadow:
    0 18px 44px -16px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* Targeta de procés (pv2) — pastilla de vidre subtil */
.pv2 {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow) !important;
  padding: 24px 24px 24px 22px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.pv2:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 213, 95, .5) !important;
}
.pv2__num {
  background: var(--iris);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   5 · PROJECTES — marc de vidre sobre la foto fosca
   ============================================================ */
.proj {
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    0 16px 50px -20px rgba(15, 42, 27, .5),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}
.proj:hover {
  border-color: rgba(184, 213, 95, .55);
  box-shadow:
    0 36px 70px -22px rgba(15, 42, 27, .6),
    0 0 0 1px rgba(184, 213, 95, .3),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.proj__open {
  background: rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   6 · FORMULARI — camps de vidre
   ============================================================ */
.form :where(input, textarea, select) {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: inset 0 1px 3px rgba(15, 42, 27, .06);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form :where(input, textarea, select):focus {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(156, 184, 73, .8) !important;
  box-shadow:
    0 0 0 4px rgba(184, 213, 95, .25),
    inset 0 1px 3px rgba(15, 42, 27, .06) !important;
  outline: none;
}

/* La columna del formulari, com un gran panell de vidre */
.contact__grid > form,
.contact form {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  padding: clamp(20px, 3vw, 34px);
}

/* ============================================================
   7 · ELEMENTS FLOTANTS — sticky CTA, FAB, lightbox
   ============================================================ */
.sticky-cta__bar {
  background:
    linear-gradient(135deg, rgba(15, 42, 27, .82) 0%, rgba(7, 20, 12, .9) 100%) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(184, 213, 95, .35) !important;
}
.fab {
  box-shadow:
    0 12px 30px -8px rgba(37, 211, 102, .6),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}
.lightbox {
  background: rgba(7, 20, 12, .72) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.lightbox__btn,
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  background: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .25) !important;
}

/* ============================================================
   8 · ACCENTS IRIDISCENTS — eyebrow i accent-serif
   ============================================================ */
.eyebrow:not(.eyebrow--light) {
  background: var(--iris);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: irisShift 8s linear infinite;
}
.accent-serif {
  background: var(--iris);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: irisShift 9s linear infinite;
}
@keyframes irisShift { to { background-position: 200% 0; } }

/* ============================================================
   9 · REVELAT PREMIUM en scroll (.reveal) — més cinematogràfic
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }
.reveal--delay-4 { transition-delay: .32s; }
.reveal--delay-5 { transition-delay: .40s; }

/* ============================================================
   10 · DETALLS — scrollbar, selecció
   ============================================================ */
::selection { background: rgba(184, 213, 95, .45); color: #0F2A1B; }

/* ============================================================
   11 · RESPONSIVE — alleugerim el blur a mòbil (rendiment)
   ============================================================ */
@media (max-width: 640px) {
  :root { --glass-blur: blur(14px) saturate(1.5); }
  body::before { filter: blur(6px); }
  body::after  { filter: blur(10px); }
}

/* ============================================================
   13 · HERO REDISSENY — escena de vidre flotant sobre la malla
   ============================================================ */
.hero--glass {
  min-height: clamp(620px, 90vh, 900px) !important;
  color: #fff !important;
  overflow: hidden;
  isolation: isolate;
}
.hero--glass::before, .hero--glass::after { display: none !important; }

/* La foto a sang amb un lleu zoom continu (sobredimensionada pel parallax) */
.hero--photo .hero__image { position: absolute; inset: -12% 0; z-index: -1; }
.hero--photo .hero__image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%;
  animation: heroKen 28s ease-in-out infinite alternate;
}
@keyframes heroKen { from { transform: scale(1.03); } to { transform: scale(1.13); } }

/* Capa fosca: enfosqueix l'esquerra (text) i deixa veure el vidre a la dreta */
.hero--photo .hero__overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,20,12,.90) 0%, rgba(7,20,12,.62) 38%, rgba(7,20,12,.22) 66%, rgba(7,20,12,.04) 100%),
    linear-gradient(180deg, rgba(7,20,12,.45) 0%, transparent 26%, rgba(7,20,12,.5) 100%),
    radial-gradient(60vmax 40vmax at 80% 30%, rgba(146,213,10,.10), transparent 60%);
}

.hero__inner { z-index: 3 !important; position: relative; }

/* ---- Tipografia clara sobre la foto ---- */
.hero--glass .hero__title { color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,.5) !important; }
/* Acento en lima sólido (a prueba de balas: sin background-clip:text) */
.hero--glass .hero__title .accent {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #C7E36A !important;
  color: #C7E36A !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45) !important;
}
.hero--glass .hero__lead {
  color: rgba(255,255,255,.9) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55) !important;
  max-width: 560px;
}

/* BADGE — SEMPRE VISIBLE (vidre fosc translúcid + text blanc forçat) */
.hero--glass .hero__badge {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.hero--glass .hero__badge span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.hero--glass .hero__micro { color: rgba(255,255,255,.9) !important; }
.hero--glass .hero__micro svg { color: var(--lime) !important; }

.hero--glass .hero__rating {
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.26) !important;
  color: rgba(255,255,255,.92) !important;
}
.hero--glass .hero__rating strong { color: #fff !important; }
.hero--glass .hero__scroll { color: rgba(255,255,255,.72) !important; }
.hero--glass .hero__scroll:hover { color: var(--lime) !important; }

/* CTA secundari sobre la foto */
.hero--glass .btn--ghost-light {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.hero--glass .btn--ghost-light:hover {
  background: rgba(255,255,255,.24) !important;
  border-color: #fff !important;
}

/* Raig de llum suau que travessa el hero (s'anima amb GSAP) */
.hero__beam {
  position: absolute; top: -20%; left: 28%;
  width: 26%; height: 150%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.20) 50%, transparent);
  filter: blur(30px); opacity: .7; mix-blend-mode: screen;
}

/* ---- Responsive del hero ---- */
@media (max-width: 720px) {
  .hero--glass { min-height: clamp(560px, 86vh, 740px) !important; }
  .hero--photo .hero__image img { object-position: 62% 34%; }
  .hero--photo .hero__overlay {
    background: linear-gradient(180deg, rgba(7,20,12,.55) 0%, rgba(7,20,12,.4) 38%, rgba(7,20,12,.82) 100%);
  }
  .hero--glass .hero__lead { max-width: 100%; }
}

/* ============================================================
   12 · ACCESSIBILITAT — sense moviment
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .eyebrow, .accent-serif, .pv2__num { animation: none !important; }
  .hero--photo .hero__image img { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}