/* ==================================================
   PARADAS SIV — Design tokens
   ================================================== */
:root{
  --black: #000000;
  --bg: #050505;
  --bg-soft: #0d0d0f;
  --gray-800: #1c1c1f;
  --white: #ffffff;
  --off-white: #e7e7ea;
  --mustard: #FAB912;
  --mustard-light: #ffcb3d;
  --gold: #FABA12; /* logo amber, used for running text/labels */
  --gold-bright: #f7c948; /* vivid gold for the couple of spots that should really pop */
  --line: rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.06);
  --line-hover: rgba(255,255,255,0.22);
  --text-dim: rgba(231,231,234,0.62);

  --glass: rgba(255,255,255,0.035);
  --glass-hover: rgba(255,255,255,0.06);

  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", sans-serif;

  --container: 1180px;
  --radius-sm: 12px;
  --radius: 20px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-card: transform 380ms var(--ease), background 300ms ease, box-shadow 380ms var(--ease), border-color 300ms ease;
  --shadow-card: 0 1px 1px rgba(0,0,0,0.2), 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-card-hover: 0 1px 1px rgba(0,0,0,0.25), 0 20px 40px -12px rgba(0,0,0,0.6);
}

/* Shared glass-card contract: background/border/radius/shadow + hover lift.
   Components below add only their layout-specific properties. */
.card{
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}
/* While GSAP drives transform/opacity for a scroll reveal, the CSS transition
   above fights it (both animate `transform` at once, so the element visually
   lags/gets stuck). Reveals toggle this class to hand transform fully to GSAP. */
.card.is-animating{ transition: background 300ms ease, box-shadow 380ms var(--ease), border-color 300ms ease; }
.card:hover{
  transform: translateY(-6px);
  background: var(--glass-hover);
  box-shadow: var(--shadow-card-hover);
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: auto; overflow-x: hidden; max-width: 100%; }

::selection{ background: var(--mustard); color: var(--black); }

:focus-visible{ outline: 2px solid var(--mustard); outline-offset: 3px; border-radius: 4px; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.4em;
}

h2{ font-size: clamp(1.9rem, 4vw, 3rem); color: var(--white); }
h3{ font-size: 1.3rem; color: var(--white); letter-spacing: -0.01em; }

p{ margin: 0 0 1em; }
.lead{ font-size: 1.15rem; color: var(--text-dim); }

.kicker{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.8em;
}
.kicker.center{ text-align: center; }

/* Grain overlay for texture */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:100%;
  background: var(--mustard);
  transform: scaleX(0); transform-origin: left; z-index: 300;
}

/* ==================================================
   Buttons
   ================================================== */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  padding: 0.7em 1.45em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 320ms var(--ease), background 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 320ms var(--ease);
}
/* Same fight as .card.is-animating above: a reveal that targets a .btn as a
   direct child drives `transform` via GSAP, and this CSS transition on
   `transform` fights it every frame instead of letting the tween settle. */
.btn.is-animating{ transition: background 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 320ms var(--ease); }
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--white); color: var(--black);
  box-shadow: 0 4px 18px -6px rgba(0,0,0,.4);
}
.btn-primary:hover{
  background: #e9e9ec;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,.5);
}
.btn-ghost{ border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn-ghost:hover{ border-color: var(--white); background: rgba(255,255,255,0.06); }
.btn-block{ width: 100%; }

.btn-text{
  padding: 0.95em 0.2em;
  border-radius: 0;
  color: var(--white);
  gap: 8px;
}
.btn-text::after{ content:"→"; transition: transform 220ms var(--ease); }
.btn-text:hover{ transform: none; color: var(--off-white); }
.btn-text:hover::after{ transform: translateX(4px); }

/* ==================================================
   Header
   ================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 18px 0;
  transition: background 300ms ease, padding 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 0;
  border-bottom-color: var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brand{ display:flex; align-items:center; gap: 10px; }
.brand-logo{ height: 56px; width:auto; transition: height 300ms ease; }
.site-header.scrolled .brand-logo{ height: 46px; }
.brand-text{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--white);
}
.brand-text b{ color: var(--gold-bright); font-weight: inherit; }

.main-nav{ display:flex; align-items:center; gap: 32px; }
.main-nav a{
  font-size: 0.92rem; font-weight: 600; color: var(--off-white);
  position: relative; padding: 4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--mustard); transition: width 220ms ease;
}
.main-nav a:hover::after{ width:100%; }
.lang-switch{
  display:inline-flex; align-items:center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft);
  font-size: 0.82rem;
}
.lang-switch::after{ display:none; }
.lang-switch:hover{ background: var(--glass-hover); border-color: var(--line-hover); }
.lang-flag{ font-size: 1rem; line-height:1; }

.burger{
  display:none; flex-direction: column; justify-content:center; gap:5px;
  width: 40px; height: 40px; background: none; border:none; cursor:pointer; padding:0;
}
.burger span{ height:2px; width:100%; background: var(--white); border-radius: 2px; transition: transform 250ms ease, opacity 250ms ease; }

/* ==================================================
   Hero
   ================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-media{
  position:absolute; inset: -10% 0; z-index:-2;
  will-change: transform;
  /* Closed-door state: only a narrow strip of the video (the door itself)
     shows at first. JS widens this open as the intro plays; reduced-motion
     users get the full frame immediately (see media query below). */
  clip-path: inset(0% 40% 0% 40%);
}
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit: cover; }
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    /* cinematic bottom fade into the page background */
    linear-gradient(180deg, rgba(5,5,5,.08) 30%, rgba(5,5,5,.32) 68%, rgba(5,5,5,.62) 88%, var(--bg) 100%),
    /* side vignette: just enough behind the text column to keep it readable,
       lets the video read clearly everywhere else */
    linear-gradient(90deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.5) 50%, rgba(5,5,5,.18) 78%, rgba(5,5,5,.3) 100%),
    radial-gradient(120% 90% at 28% 38%, transparent 30%, rgba(5,5,5,.22) 100%);
}
/* .hero is a flex container (for vertical centering), and a flex item's
   width shrinks to fit its content by default. That leaves .container's
   margin:auto with free space to consume on both sides, centering the
   whole shrunk box in the viewport instead of just capping its max-width —
   width:100% makes it fill the row like a normal block .container would,
   so it lines up with the header logo and every other section below it. */
.hero-content{ width: 100%; padding-bottom: 100px; }
.eyebrow{
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-bright); font-size: 0.85rem; margin-bottom: 1em;
}
.hero-title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 0.3em;
  max-width: 700px;
}
.hero-sub{ font-size: 1rem; color: rgba(231,231,234,0.82); max-width: 560px; }
.hero-actions{ display:flex; gap: 16px; margin-top: 1.6em; flex-wrap: wrap; }

.sound-toggle{
  position: absolute; right: 24px; bottom: 24px; z-index: 2;
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft); color: var(--white);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.sound-toggle:hover{ background: var(--glass-hover); border-color: var(--line-hover); transform: translateY(-2px); }
.sound-toggle .icon-on{ display:none; }
.sound-toggle.is-playing .icon-off{ display:none; }
.sound-toggle.is-playing .icon-on{ display:block; }

/* Draws the eye to the button while sound is off, since browsers won't
   let it start playing on its own — this is the closest thing to "it
   turns on by itself" that autoplay policies allow. Stops once tapped. */
.sound-toggle:not(.is-playing){ animation: sound-toggle-pulse 2.2s ease-out infinite; }
@keyframes sound-toggle-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(250,185,18,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(250,185,18,0); }
  100% { box-shadow: 0 0 0 0 rgba(250,185,18,0); }
}
@media (prefers-reduced-motion: reduce){
  .sound-toggle:not(.is-playing){ animation: none; }
}

.word{ overflow:hidden; display:inline-block; }
.word > span{ display:inline-block; }

/* ==================================================
   Sections
   ================================================== */
.section{ padding: 120px 0; position: relative; }
.section-dark{ background: var(--bg-soft); }
.section-head{ max-width: 640px; margin-bottom: 3.5rem; }
/* The Equipamiento intro line is long enough to wrap inside the shared
   640px cap — widen just this one and keep it on a single line. */
#equipamiento .section-head{ max-width: 760px; }
#equipamiento .section-head .lead{ white-space: nowrap; }
@media (max-width: 720px){
  #equipamiento .section-head .lead{ white-space: normal; }
}

/* reveal fallback: always visible, JS animates FROM this state */
.reveal, .reveal-fade{ opacity: 1; }

/* ==================================================
   Split layout (Nosotros / Contacto)
   ================================================== */
.split{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items:center;
}
.split-reverse .split-text{ order: 1; }
.split-text .lead{ margin-bottom: 1.2em; }

.stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card{
  padding: 30px 20px 26px;
  text-align:center;
}
.stat-num, .stat-word{
  display:block; font-family: var(--font-display);
  font-size: 3rem; color: var(--gold); line-height:1;
}
.stat-label{
  display:block; margin-top: 0.6em; font-size: 0.78rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em;
}

/* ==================================================
   Services grid
   ================================================== */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.service-card{
  position: relative;
  padding: 20px 20px 28px;
}
.service-card:hover{ border-color: var(--line-hover); }
.service-media{
  display: block;
  position: relative; overflow:hidden; border-radius: var(--radius-sm);
  width: 96px; aspect-ratio: 1/1; margin-bottom: 20px;
  background: var(--bg);
}
.service-media img{
  width:100%; height:100%; object-fit: cover; display:block;
  filter: grayscale(1);
  transition: transform 600ms var(--ease), filter 500ms ease;
}
.service-card:hover .service-media img{ transform: scale(1.06); filter: grayscale(0); }
.service-card h3{ margin-bottom: 0.3em; }
.service-card p{ color: var(--text-dim); font-size: 0.95rem; margin: 0; }

/* Dossier download banner — warm/gold so it reads as the one "grab this"
   moment in an otherwise dark, neutral section. */
.dossier-cta{
  display:flex; align-items:center; gap: 24px; flex-wrap: wrap;
  margin-top: 20px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(250,185,18,0.16), rgba(250,185,18,0.03) 65%);
  border: 1px solid rgba(250,185,18,0.35);
  cursor: pointer;
  transition: border-color 240ms ease, background 240ms ease, transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.dossier-cta:hover{
  border-color: var(--mustard);
  background: linear-gradient(120deg, rgba(250,185,18,0.24), rgba(250,185,18,0.05) 65%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.dossier-cta-icon{
  flex-shrink: 0;
  display:inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--mustard); color: var(--black);
}
.dossier-cta-icon svg{ width: 26px; height: 26px; }
.dossier-cta-text{ display:flex; flex-direction:column; gap: 4px; flex: 1; min-width: 220px; }
.dossier-cta-text strong{ font-size: 1.15rem; color: var(--white); letter-spacing: -0.01em; }
.dossier-cta-text span{ font-size: 0.9rem; color: var(--text-dim); }
.dossier-cta-btn{
  flex-shrink: 0;
  display:inline-flex; align-items:center; gap: 8px;
  padding: 0.8em 1.6em; border-radius: 999px;
  background: var(--white); color: var(--black);
  font-weight: 700; font-size: 0.86rem; white-space: nowrap;
  transition: background 220ms ease;
}
.dossier-cta:hover .dossier-cta-btn{ background: var(--mustard); }

/* ==================================================
   Carousel arrow buttons — used inside .gallery-scrollbar
   ================================================== */
.carousel-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft); color: var(--white);
  cursor: pointer; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.carousel-arrow:hover{ background: var(--glass-hover); border-color: var(--line-hover); transform: translateY(-2px); }

/* ==================================================
   Gallery (trabajos destacados) — bento + lightbox
   ================================================== */
.gallery-filters{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-bottom: 2.25rem;
}
.filter-pill{
  padding: 0.55em 1.2em; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft); color: var(--text-dim);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.filter-pill:hover{ border-color: var(--line-hover); color: var(--white); }
.filter-pill.active{ background: var(--mustard); border-color: var(--mustard); color: var(--black); }

.gallery-tag{
  display:inline-block; font-size: 0.72rem; font-weight:700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.6em;
}

/* Horizontal drag-scroll row: two-and-a-bit cards visible, photo up top
   with the title and description sitting directly beneath it (no hover
   state needed — everything is already visible), a thin progress bar
   underneath standing in for dots. */
.gallery-carousel{ margin-top: 0.5rem; }
.gallery-track{
  display:flex; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  cursor: grab;
  padding-bottom: 2px; /* keeps focus outlines on the last card from clipping */
  -ms-overflow-style: none; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.gallery-card{
  flex: 0 0 auto; scroll-snap-align: start;
  width: clamp(260px, 42vw, 420px);
  cursor: pointer;
}
.gallery-card-media{
  position: relative; overflow:hidden; border-radius: var(--radius);
  aspect-ratio: 4/3; margin-bottom: 20px;
  background: var(--bg);
  box-shadow: var(--shadow-card);
}
.gallery-card-media img{
  width:100%; height:100%; object-fit: cover; display:block;
  -webkit-user-drag: none; user-select: none;
  transition: transform 500ms var(--ease);
}
.gallery-card:hover .gallery-card-media img{ transform: scale(1.05); }
.gallery-card .gallery-tag{ font-size: 0.72rem; margin-bottom: 0.5em; }
.gallery-card h3{ font-size: 1.2rem; color: var(--white); margin-bottom: 0.3em; letter-spacing: -0.01em; }
.gallery-card p{ font-size: 0.9rem; color: var(--text-dim); margin:0; }

.gallery-scrollbar{
  display:flex; align-items:center; gap: 18px;
  max-width: 640px; margin: 2.5rem auto 0;
}
.gallery-progress-track{
  flex:1; height: 3px; border-radius: 999px;
  background: var(--line-soft); overflow:hidden;
}
.gallery-progress-fill{
  height:100%; width:0%; border-radius: 999px;
  background: var(--mustard);
  transition: width 180ms ease;
}
.gallery-progress-count{
  font-size: 0.8rem; color: var(--text-dim); white-space:nowrap;
  min-width: 3.5em; text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .gallery-card-media img{ transition: none; }
}

/* ---- Lightbox ---- */
.lightbox{
  position: fixed; inset: 0; z-index: 500;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,6,7,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease);
  padding: 24px;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-figure{
  margin:0; max-width: 1000px; width:100%;
  display:flex; flex-direction:column; align-items:center;
  transform: scale(0.96); transition: transform 320ms var(--ease);
}
.lightbox.is-open .lightbox-figure{ transform: scale(1); }
.lightbox-figure img{
  max-width: 100%; max-height: 62vh; width:auto; height:auto;
  border-radius: var(--radius-sm); display:block;
  box-shadow: var(--shadow-card-hover);
}
.lightbox-photos{ display:flex; gap: 10px; margin-top: 14px; }
.lightbox-photos[hidden]{ display:none; }
.lightbox-photo-dot{
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.lightbox-photo-dot::before{
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  background: var(--line);
  transition: background 220ms ease, transform 220ms ease;
}
.lightbox-photo-dot.is-active::before{ background: var(--mustard); transform: scale(1.3); }
.lightbox-figure figcaption{ max-width: 640px; text-align:center; margin-top: 22px; }
.lightbox-figure h3{ font-size: 1.6rem; color: var(--white); margin-bottom: 0.25em; }
.lightbox-figure p{ color: var(--text-dim); margin: 0 0 1.2em; }
.lightbox-album[hidden]{ display:none; }

.lightbox-close, .lightbox-nav{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft); color: var(--white);
  cursor:pointer; transition: background 220ms ease, border-color 220ms ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--glass-hover); border-color: var(--line-hover); }
.lightbox-close{ top: 20px; right: 20px; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }

.map-card{
  position: relative;
  overflow: hidden;
  height: 190px;
  margin-top: 1.75rem;
}
.map-card iframe{
  width: 100%; height: 100%; border: 0; display:block;
  filter: grayscale(1) invert(0.92) contrast(0.9);
  transition: filter 400ms ease;
}
.map-card:hover iframe{ filter: grayscale(0.15) invert(0) contrast(1); }
.map-card-cta{
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(10,10,11,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-soft);
  color: var(--white); font-size: 0.82rem; font-weight: 600;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.map-card-cta:hover{ background: var(--mustard); color: var(--black); border-color: transparent; transform: translateY(-2px); }

/* ==================================================
   Brands marquee
   ================================================== */
.brands-section{ padding: 90px 0; }
.marquee{
  overflow:hidden; margin-top: 2rem; padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap: 56px; width: max-content;
  animation: scroll-left 28s linear infinite;
}
/* Fixed box per logo (not just a shared height) so a wide wordmark like
   d&b audiotechnik and a compact mark like Grand MA take up the same
   footprint in the row instead of throwing off its rhythm. */
.marquee-track span{ display:flex; align-items:center; justify-content:center; width: 110px; height: 40px; flex-shrink:0; }
.marquee-track img{
  max-width: 100%; max-height: 100%; width:auto; height:auto;
  object-fit: contain;
  /* Every logo forced to the same pale silhouette (regardless of its
     original colour) so ~14 different brand marks read as one quiet row
     instead of a noisy rainbow strip. */
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 220ms ease;
}
.marquee-track span:hover img{ opacity: 0.85; }
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==================================================
   Contact
   ================================================== */
.section-contact{ background: var(--bg-soft); }
.contact-list{ list-style:none; padding:0; margin: 2em 0 0; display:flex; flex-direction:column; gap: 18px; }
.contact-list li{ display:flex; align-items:flex-start; gap: 12px; font-size: 1.05rem; line-height: 1.4; }
.contact-label{
  font-size: 0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--gold); min-width: 90px; padding-top: 2px; flex-shrink: 0;
}
.contact-list a{ transition: color 200ms ease; }
.contact-list a:hover{ color: var(--gold); }
.contact-address{ font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 900px){
  .contact-address{ white-space: normal; font-size: 1.05rem; }
}

.official-badges{
  display:flex; align-items:center; flex-wrap:wrap; gap: 10px 14px;
  margin-top: 1.1rem;
}
.official-badges-label{
  font-size: 0.78rem; font-weight:600; color: var(--text-dim);
}
.official-badge{
  display:inline-flex; align-items:center; gap: 8px;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--mustard);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.official-badge:hover{ background: var(--glass-hover); border-color: var(--line-hover); transform: translateY(-2px); }
.official-badge-logo{ height: 20px; width:auto; flex-shrink:0; }
/* Cartuja's mark is a compact square glyph (no wordmark), reads smaller
   than FIBES's icon+text lockup at the same height — bump it up so both
   feel equally present. */
.official-badge-logo-cartuja{ height: 26px; }
.official-badge-text{ font-size: 0.8rem; font-weight:600; color: var(--text-dim); white-space:nowrap; }

.social-links{ display:flex; align-items:center; flex-wrap:wrap; gap: 12px; margin-top: 1.75rem; }
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft); color: var(--white);
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.social-link:hover{ background: var(--mustard); border-color: var(--mustard); color: var(--black); transform: translateY(-2px); }

.contact-form{
  padding: 32px;
  display:flex; flex-direction:column; gap: 18px;
}
.careers-form{ max-width: 560px; margin: 0 auto; }
.form-row input[type="file"]{ padding: 10px 14px; cursor: pointer; }
.form-row input[type="file"]::file-selector-button{
  background: var(--mustard); color: var(--black); border: none;
  border-radius: var(--radius-sm); padding: 8px 14px; margin-right: 12px;
  font-weight: 700; font-family: var(--font-body); cursor: pointer;
  transition: background 200ms ease;
}
.form-row input[type="file"]::file-selector-button:hover{ background: var(--mustard-light); }

/* Standalone pages (no hero) need clearance under the fixed header. */
.page-section{ padding-top: 200px; }
@media (max-width: 980px){ .page-section{ padding-top: 160px; } }
.contact-form:hover{ transform: none; } /* a form shouldn't lift under the cursor while being filled */
.form-note{ margin: 4px 0 0; font-size: 0.82rem; color: var(--text-dim); text-align: center; }
.form-row{ display:flex; flex-direction:column; gap: 8px; }
.form-row label{ font-size: 0.82rem; font-weight:600; color: var(--text-dim); }
.form-row input, .form-row select, .form-row textarea{
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover{ border-color: var(--line-hover); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none; border-color: rgba(250,185,18,0.6);
  box-shadow: 0 0 0 4px rgba(250,185,18,0.14);
  background: rgba(255,255,255,0.06);
}

/* ==================================================
   Footer
   ================================================== */
.site-footer{ padding: 48px 0; border-top: 1px solid var(--line); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap; }
.footer-nav{ display:flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a{ font-size: 0.88rem; color: var(--text-dim); }
.footer-nav a:hover{ color: var(--gold); }
.footer-contact{ display:flex; gap: 20px; flex-wrap: wrap; }
.footer-contact a{ font-size: 0.88rem; color: var(--text-dim); font-weight: 600; }
.footer-contact a:hover{ color: var(--gold); }
.footer-copy{ margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--text-dim); }

/* ==================================================
   Responsive
   ================================================== */
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
  .split-reverse .split-text{ order: 0; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--bg-soft); flex-direction: column; align-items:flex-start;
    padding: 100px 32px 32px; gap: 26px;
    transform: translateX(100%); transition: transform 320ms ease;
    border-left: 1px solid var(--line);
  }
  .main-nav.open{ transform: translateX(0); }
  .burger{ display:flex; }

  .services-grid{ grid-template-columns: 1fr; }
  .section{ padding: 80px 0; }
  .hero-content{ padding-bottom: 70px; }
  .footer-inner{ flex-direction: column; align-items:flex-start; }

  .lightbox-close, .lightbox-nav{ width: 40px; height: 40px; }
  .lightbox-close{ top: 12px; right: 12px; }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
  .lightbox-figure img{ max-height: 50vh; }
}

@media (prefers-reduced-motion: reduce){
  .reveal > *, .reveal-fade{ opacity: 1 !important; transform: none !important; }
  .marquee-track{ animation: none; }
  .hero-media{ clip-path: inset(0% 0% 0% 0%) !important; }
}