/* ================================================================
   JrFunk — Cinematic 3D Storytelling redesign
   Palette: deep navy-black ground + warm gold/copper metallic accent
   ================================================================ */
:root{
  --bg-deep:#05070a;
  --bg-soft:#0b0f14;
  --panel:#0d1218;
  --panel-2:#10161d;
  --line:rgba(244,234,213,0.09);
  --accent-bright:#d4af37;
  --accent-mid:#c9a961;
  --accent-dark:#8a6f33;
  --accent-ice:#5ec8e8;
  --text:#f4ead5;
  --text-muted:rgba(244,234,213,0.72);
  --text-dim:rgba(244,234,213,0.42);
  --scrim-tint:5,7,10;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4{font-family:'Playfair Display', serif; font-weight:600;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace;}
.grad-text{
  background:linear-gradient(90deg, var(--accent-bright), var(--accent-ice));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:4px;
  font-weight:600; font-size:0.92rem; letter-spacing:0.3px;
  cursor:pointer; border:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  font-family:'Inter', sans-serif;
}
.btn-primary{
  background:linear-gradient(90deg, var(--accent-dark), var(--accent-bright));
  color:#100c02;
  box-shadow:0 0 30px rgba(212,175,55,0.25);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 10px 32px rgba(212,175,55,0.4);}
.btn-outline{
  background:rgba(244,234,213,0.03);
  border:1px solid rgba(212,175,55,0.5);
  color:var(--text);
}
.btn-outline:hover{background:rgba(212,175,55,0.1); transform:translateY(-3px);}

/* ============== FIXED 3D SCENE + CONTRAST LAYERS ============== */
#bg-fallback{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(212,175,55,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(94,200,232,0.08), transparent 55%),
    var(--bg-deep);
}
#webgl-canvas{ position:fixed; inset:0; z-index:0; display:block; outline:none; }
.scrim{ position:fixed; inset:0; z-index:1; background:rgba(var(--scrim-tint),0.32); pointer-events:none; }
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(var(--scrim-tint),0.42) 72%, rgba(var(--scrim-tint),0.85) 100%),
    linear-gradient(180deg, rgba(var(--scrim-tint),0.6) 0%, transparent 28%, transparent 72%, rgba(var(--scrim-tint),0.72) 100%);
}
.grain{
  position:fixed; inset:0; z-index:2; opacity:0.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* Hero video background layer (behind 3D canvas visually but same fixed stack, sits at z 0, canvas draws over/blends) */
.hero-video-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:transparent;
}
#heroVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0.55;
}

/* All real content sits above the fixed layers */
header, main, footer, .whatsapp-float{ position:relative; z-index:3; }

/* ============== NAV ============== */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:blur(16px);
  background:rgba(5,7,10,0.72);
  border-bottom:1px solid var(--line);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.logo{ font-family:'Playfair Display', serif; font-weight:700; font-style:italic; font-size:1.55rem; display:flex; align-items:center; gap:10px; }
.logo span{ color:var(--accent-bright); }
.logo-mark{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, rgba(212,175,55,0.18), rgba(212,175,55,0.03));
  border:1.5px solid rgba(212,175,55,0.5);
  display:flex; align-items:center; justify-content:center;
}
.ico{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; fill:currentColor; flex-shrink:0; }
.sax-emoji{ width:20px; height:20px; color:var(--accent-bright); filter:drop-shadow(0 0 4px rgba(212,175,55,0.5)); }
.sax-mini{ width:16px; height:16px; }
.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{ font-size:0.86rem; font-weight:600; color:var(--text-muted); transition:color .2s; letter-spacing:0.2px; }
.nav-links a:hover{ color:var(--accent-bright); }
.lang-dropdown{ position:relative; }
.lang-current{
  display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:6px; cursor:pointer; font-family:'Inter', sans-serif;
}
.lang-current:hover{ border-color:rgba(212,175,55,0.5); }
.flag-icon{ width:20px; height:14px; border-radius:2px; flex-shrink:0; display:block; overflow:hidden; box-shadow:0 0 0 1px rgba(244,234,213,0.15); }
.lang-current svg{ width:12px; height:12px; color:var(--text-dim); transition:transform .2s ease; }
.lang-dropdown.open .lang-current svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:6px; min-width:170px; box-shadow:0 12px 34px rgba(0,0,0,0.55);
  display:none; flex-direction:column; gap:2px; z-index:50;
}
.lang-dropdown.open .lang-menu{ display:flex; }
.lang-option{
  display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer;
  color:var(--text-dim); font-family:'Inter', sans-serif; font-size:0.86rem; font-weight:600;
  padding:9px 10px; border-radius:6px; text-align:left; width:100%;
}
.lang-option:hover{ background:rgba(244,234,213,0.05); color:var(--text); }
.lang-option.active{ color:var(--accent-bright); background:rgba(212,175,55,0.08); }
.lang-row-mobile{ display:flex; gap:10px; margin:14px 24px; }
.lang-row-mobile button{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px; cursor:pointer;
}
.lang-row-mobile button.active{ border-color:var(--accent-bright); background:rgba(212,175,55,0.1); }
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.burger span{ width:26px; height:2px; background:var(--text); }
.mobile-menu{ display:none; flex-direction:column; gap:0; background:var(--bg-soft); border-top:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:16px 24px; border-bottom:1px solid var(--line); font-weight:600; }
@media (max-width:900px){ .nav-links{ display:none; } .burger{ display:flex; } }

/* ============== HERO ============== */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative;
  padding:150px 0 90px; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; align-items:center; width:100%; }
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }
.kicker{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px;
  border:1px solid rgba(212,175,55,0.35); border-radius:2px;
  background:rgba(212,175,55,0.05);
  font-size:0.72rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-mid); margin-bottom:28px;
}
.kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 10px var(--accent-bright); }
.hero h1{
  font-style:italic; font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1.08; margin-bottom:20px;
}
.hero p.lead{ font-size:1.12rem; color:var(--text-muted); max-width:520px; margin-bottom:36px; line-height:1.7; font-family:'Inter'; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats{ display:flex; gap:40px; flex-wrap:wrap; }
.hero-stats div h3{ font-family:'Playfair Display', serif; font-size:2.1rem; font-weight:700; color:var(--accent-bright); }
.hero-stats div span{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.vinyl{
  width:min(360px, 78vw); height:min(360px, 78vw); border-radius:50%;
  background:repeating-radial-gradient(circle, #14110a 0px, #14110a 2px, #0a0805 3px, #0a0805 6px);
  box-shadow:0 0 90px rgba(212,175,55,0.18), 0 0 40px rgba(94,200,232,0.1);
  display:flex; align-items:center; justify-content:center;
  animation:spin 9s linear infinite; border:1px solid rgba(212,175,55,0.18);
}
@keyframes spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.vinyl-label{
  width:34%; height:34%; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display'; font-style:italic; font-weight:700; color:#100c02; font-size:0.95rem; text-align:center;
  box-shadow:inset 0 0 15px rgba(0,0,0,0.4);
}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-dim); font-family:'JetBrains Mono'; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:30px; background:linear-gradient(180deg, var(--accent-bright), transparent); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0.3); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 100%{ transform:scaleY(0.3); transform-origin:bottom;} }

/* ============== SECTIONS ============== */
.section{ padding:110px 0; position:relative; }
.section-panel{
  background:rgba(11,15,20,0.82);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section-head .kicker{ margin-bottom:18px; }
.section-head h2{ font-size:clamp(2rem, 4vw, 2.7rem); font-weight:600; font-style:italic; margin-bottom:18px; }
.section-head p{ color:var(--text-muted); font-size:1.03rem; line-height:1.7; font-family:'Inter'; }

/* reveal-on-scroll defensive base: always visible by default */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.reveal.pre{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; }

/* ============== ABOUT ============== */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio:4/5; border-radius:6px;
  background:linear-gradient(160deg, rgba(212,175,55,0.14), rgba(94,200,232,0.06)), linear-gradient(135deg, #171310, #08070a);
  border:1px solid rgba(212,175,55,0.35);
  box-shadow:0 0 0 8px rgba(5,7,10,0.7), 0 40px 80px rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:14px;
}
.about-photo-frame{ position:relative; width:100%; height:100%; border-radius:2px; overflow:hidden; border:1px solid rgba(212,175,55,0.4); }
.about-img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; filter:sepia(0.18) contrast(1.08) saturate(1.05) brightness(0.96); }
.about-fallback{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; background:linear-gradient(160deg, rgba(212,175,55,0.14), rgba(94,200,232,0.06)), linear-gradient(135deg, #171310, #08070a); }
.about-photo .initials{
  font-family:'Playfair Display'; font-style:italic; font-weight:700; font-size:6rem;
  background:linear-gradient(135deg, var(--accent-bright), var(--accent-ice));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0.9;
}
.about-photo-badge{
  position:absolute; left:20px; right:20px; bottom:20px; display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:2px; background:rgba(5,7,10,0.6); backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,0.4); font-size:0.82rem; font-weight:600; color:var(--text); z-index:2;
}
.about-photo::before{ content:""; position:absolute; inset:0; border-radius:6px; box-shadow:inset 0 0 50px rgba(0,0,0,0.55); pointer-events:none; z-index:3; }
.about-text h3{ font-size:1.9rem; font-weight:700; font-style:italic; margin-bottom:8px; }
.about-text .role{ color:var(--accent-bright); font-weight:600; letter-spacing:0.4px; margin-bottom:24px; display:block; font-family:'JetBrains Mono'; font-size:0.82rem; text-transform:uppercase; }
.about-text p{ color:var(--text-muted); line-height:1.8; margin-bottom:18px; font-size:1.02rem; }
.about-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.badge{ padding:10px 18px; border-radius:2px; background:var(--panel); border:1px solid var(--line); font-size:0.83rem; font-weight:500; color:var(--text-muted); }
.badge strong{ color:var(--accent-bright); }

/* ============== SERVICES ============== */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
@media (max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:38px 30px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-6px); border-color:rgba(212,175,55,0.4); box-shadow:0 20px 40px rgba(0,0,0,0.4); }
.service-icon{
  width:54px; height:54px; border-radius:4px; margin-bottom:22px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(212,175,55,0.16), rgba(94,200,232,0.1)); border:1px solid var(--line); color:var(--accent-bright);
}
.service-icon .ico{ width:26px; height:26px; }
.service-card h4{ font-size:1.2rem; font-weight:700; font-style:italic; margin-bottom:12px; }
.service-card p{ color:var(--text-muted); font-size:0.94rem; line-height:1.65; font-family:'Inter'; }

/* ============== COVERAGE MAP ============== */
.coverage{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:860px){ .coverage{ grid-template-columns:1fr; } }
.coverage-map{
  aspect-ratio:1/1; border-radius:6px; border:1px solid var(--line);
  background:radial-gradient(circle at 30% 20%, rgba(212,175,55,0.09), transparent 55%), linear-gradient(160deg, #10141a, #08090c);
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:28px;
}
.coverage-map::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(244,234,213,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,234,213,0.04) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, black, transparent 75%);
  mask-image:radial-gradient(circle at 50% 50%, black, transparent 75%);
}
.map-corner{ position:absolute; width:22px; height:22px; border-color:rgba(212,175,55,0.55); border-style:solid; border-width:0; z-index:3; }
.map-corner.tl{ top:14px; left:14px; border-top-width:2px; border-left-width:2px; }
.map-corner.tr{ top:14px; right:14px; border-top-width:2px; border-right-width:2px; }
.map-corner.bl{ bottom:14px; left:14px; border-bottom-width:2px; border-left-width:2px; }
.map-corner.br{ bottom:14px; right:14px; border-bottom-width:2px; border-right-width:2px; }
.map-svg{ position:relative; z-index:2; width:78%; height:78%; }
.map-shape{ fill:rgba(212,175,55,0.07); stroke:rgba(212,175,55,0.55); stroke-width:1.6; }
.map-pin-dot{ fill:var(--accent-ice); }
.map-pin-dot.main{ fill:var(--accent-bright); }
.map-pin-ring{ fill:none; stroke:rgba(212,175,55,0.5); stroke-width:1; transform-origin:center; animation:mappulse 2.2s ease-out infinite; }
@keyframes mappulse{ 0%{ opacity:0.9; r:4; } 100%{ opacity:0; r:16; } }
.map-label{ font-family:'JetBrains Mono', monospace; font-size:6.5px; font-weight:600; fill:var(--text-dim); letter-spacing:0.3px; }
.map-label.main{ fill:var(--text); font-size:7.5px; }
.map-badge{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:2px; background:rgba(5,7,10,0.75); border:1px solid rgba(212,175,55,0.35);
  font-family:'JetBrains Mono'; font-size:0.68rem; font-weight:600; letter-spacing:1.5px; color:var(--text-muted); z-index:3; backdrop-filter:blur(6px);
}
.coverage-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip{ padding:8px 16px; border-radius:2px; font-size:0.83rem; font-weight:500; background:rgba(244,234,213,0.04); border:1px solid var(--line); color:var(--text-muted); }

/* ============== PRICING (React) ============== */
#pricing-root{ width:100%; }
.pricing-card{
  background:linear-gradient(160deg, rgba(212,175,55,0.07), rgba(94,200,232,0.03));
  border:1px solid var(--line); border-radius:6px; padding:46px; max-width:760px; margin:0 auto;
  backdrop-filter:blur(10px);
}
.pricing-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:32px; }
.price-from{ font-family:'JetBrains Mono'; font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.price-value{ font-family:'Playfair Display'; font-style:italic; font-weight:700; font-size:3rem; color:var(--text); }
.price-value span{ font-size:1.05rem; font-weight:500; color:var(--text-dim); font-family:'Inter'; }
.slider-wrap{ margin:26px 0 10px; }
.slider-wrap label{ display:flex; justify-content:space-between; font-size:0.88rem; color:var(--text-muted); margin-bottom:10px; font-weight:600; }
input[type=range]{
  width:100%; -webkit-appearance:none; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--accent-dark), var(--accent-bright)); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#100c02; border:4px solid var(--accent-bright); cursor:pointer; box-shadow:0 0 14px rgba(212,175,55,0.6);
}
.pricing-note{ color:var(--text-dim); font-size:0.86rem; margin-top:20px; line-height:1.7; }
.pricing-extras{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.extra-pill{ padding:12px 16px; border-radius:4px; background:rgba(5,7,10,0.5); border:1px solid var(--line); font-size:0.84rem; color:var(--text-muted); flex:1; min-width:150px; }
.extra-pill strong{ display:block; color:var(--accent-bright); font-size:0.92rem; margin-bottom:4px; font-family:'JetBrains Mono'; letter-spacing:0.3px; }

/* ============== TESTIMONIALS ============== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background:rgba(13,18,24,0.7); border:1px solid var(--line); border-radius:6px; padding:34px;
  backdrop-filter:blur(12px);
}
.stars{ display:flex; gap:3px; color:var(--accent-bright); margin-bottom:18px; }
.stars .ico{ width:1rem; height:1rem; }
.testi-card p{ color:var(--text-muted); line-height:1.75; margin-bottom:22px; font-size:0.95rem; font-style:italic; }
.testi-author{ font-weight:700; font-size:0.9rem; font-family:'JetBrains Mono'; }
.testi-author span{ display:block; font-weight:500; color:var(--text-dim); font-size:0.78rem; margin-top:2px; font-family:'Inter'; }

/* ============== CONTACT / CTA ============== */
.cta-final{
  background:linear-gradient(120deg, rgba(212,175,55,0.08), rgba(94,200,232,0.05));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; padding:110px 0;
}
.cta-final h2{ font-size:clamp(2rem,4.5vw,3.2rem); font-weight:600; font-style:italic; margin-bottom:20px; }
.cta-final p{ color:var(--text-muted); max-width:520px; margin:0 auto 36px; font-size:1.03rem; line-height:1.7; }
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:28px; text-align:center; }
.contact-card .icon{ margin-bottom:12px; color:var(--accent-bright); }
.contact-card .icon .ico{ width:1.7rem; height:1.7rem; }
.contact-card h4{ font-size:0.98rem; margin-bottom:6px; font-family:'JetBrains Mono'; font-weight:600; letter-spacing:0.3px; }
.contact-card p, .contact-card a{ color:var(--text-muted); font-size:0.94rem; word-break:break-word; }
.contact-card a:hover{ color:var(--accent-bright); }

/* ============== CONTACT FORM ============== */
.form-wrap{ margin-top:64px; }
.form-card{
  max-width:720px; margin:0 auto; background:rgba(13,18,24,0.85); border:1px solid var(--line);
  border-radius:8px; padding:46px; text-align:left; backdrop-filter:blur(10px);
}
.form-card h3{ font-size:1.5rem; font-weight:700; font-style:italic; margin-bottom:10px; text-align:center; }
.form-sub{ color:var(--text-muted); font-size:0.94rem; text-align:center; margin-bottom:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:0.8rem; font-weight:600; color:var(--text-dim); margin-bottom:8px; font-family:'JetBrains Mono'; letter-spacing:0.3px; text-transform:uppercase; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:12px 14px; border-radius:4px; background:rgba(5,7,10,0.6); border:1px solid var(--line); color:var(--text);
  font-family:'Inter', sans-serif; font-size:0.95rem; resize:vertical;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:rgba(212,175,55,0.55); }
.form-submit{ width:100%; justify-content:center; margin-top:6px; border:none; }
.form-submit:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
.form-status{ text-align:center; margin-top:16px; font-size:0.9rem; font-weight:600; min-height:1.2em; }
.form-status.ok{ color:#8fd6a3; }
.form-status.err{ color:#e58080; }

footer{ padding:44px 0; text-align:center; color:var(--text-dim); font-size:0.84rem; border-top:1px solid var(--line); background:rgba(11,15,20,0.85); }
footer strong{ color:var(--accent-bright); }

/* ============== EQUIPO — SPEC CARD (reemplaza el antiguo mockup 3D) ============== */
.gear-section{ position:relative; overflow:hidden; }
.spec-wrap{ display:flex; justify-content:center; margin-top:48px; }
.spec-card{
  position:relative; width:min(640px, 100%); background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:44px 40px 36px; overflow:hidden;
}
.spec-ghost{
  position:absolute; top:-0.35em; right:18px; font-family:'Playfair Display'; font-style:italic; font-weight:700;
  font-size:6.5rem; line-height:1; color:rgba(212,175,55,0.1); pointer-events:none; user-select:none;
}
.spec-badge{ display:flex; align-items:center; gap:14px; margin-bottom:28px; position:relative; z-index:2; }
.spec-badge .sax-mini{ width:1.6rem; height:1.6rem; color:var(--accent-bright); }
.spec-badge-text{ display:flex; flex-direction:column; }
.spec-brand{ font-family:'Playfair Display'; font-style:italic; font-weight:700; font-size:1.2rem; color:var(--text); }
.spec-model{ font-family:'JetBrains Mono'; font-weight:600; font-size:0.78rem; letter-spacing:1.5px; color:var(--accent-bright); }
.spec-list{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; }
.spec-list li{ display:flex; align-items:center; gap:14px; color:var(--text-muted); font-size:0.98rem; line-height:1.5; }
.spec-list li:not(:last-child){ padding-bottom:16px; border-bottom:1px solid var(--line); }
.spec-ico{ flex-shrink:0; width:38px; height:38px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(212,175,55,0.16), rgba(94,200,232,0.1)); border:1px solid var(--line); color:var(--accent-bright); }
.spec-ico .ico{ width:18px; height:18px; }
.controller-caption{ text-align:center; margin-top:32px; color:var(--text-muted); font-size:0.9rem; }
.controller-caption strong{ color:var(--accent-bright); }
@media (max-width:700px){
  .spec-card{ padding:34px 24px 28px; }
  .spec-ghost{ font-size:4.5rem; }
  .spec-list li{ font-size:0.92rem; }
}

.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:999; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, #25D366, #128C7E); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,0.4); color:#fff; animation:float 3s ease-in-out infinite;
}
.whatsapp-float .ico{ width:28px; height:28px; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* Defensive: any hidden-until-revealed content must never stay invisible */
[data-i18n], [data-i18n-placeholder]{ opacity:1 !important; }
noscript{ display:block; }

/* ============== GALERÍA PAGE ============== */
.gallery-hero{ min-height:60vh; display:flex; align-items:center; padding:150px 0 60px; }
.gallery-hero .container{ position:relative; z-index:2; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-card{
  position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(155deg, rgba(212,175,55,0.16), rgba(94,200,232,0.05)), linear-gradient(135deg, #171310, #08070a);
  display:flex; align-items:flex-end; justify-content:flex-start;
  transition:transform .3s ease, border-color .3s ease;
}
.gallery-card:hover{ transform:translateY(-6px); border-color:rgba(212,175,55,0.45); }
.gallery-card img, .gallery-card video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.gallery-card .gallery-overlay{
  position:relative; z-index:2; width:100%; padding:22px;
  background:linear-gradient(0deg, rgba(5,7,10,0.85), transparent 70%);
}
.gallery-card .gallery-type{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono'; font-size:0.65rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:8px;
}
.gallery-card .gallery-caption{ font-family:'Playfair Display'; font-style:italic; font-weight:600; font-size:1.05rem; color:var(--text); }
.gallery-card.placeholder{
  align-items:center; justify-content:center; text-align:center; padding:30px;
}
.gallery-card.placeholder::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(244,234,213,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244,234,213,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, black, transparent 80%);
  mask-image:radial-gradient(circle at 50% 50%, black, transparent 80%);
}
.gallery-card.placeholder .ph-icon{ margin-bottom:14px; opacity:0.8; position:relative; z-index:2; color:var(--accent-bright); }
.gallery-card.placeholder .ph-icon .ico{ width:2.2rem; height:2.2rem; }
.gallery-card.placeholder .gallery-caption{ position:relative; z-index:2; }
.gallery-card.placeholder .ph-tag{
  position:relative; z-index:2; margin-top:10px;
  font-family:'JetBrains Mono'; font-size:0.65rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);
}

/* ============== COOKIE CONSENT BANNER ============== */
.jrfunk-cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:2000;
  max-width:820px; margin:0 auto;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:rgba(10,14,19,0.96); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:8px;
  padding:22px 26px; box-shadow:0 20px 50px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.jrfunk-cookie-banner.jrfunk-cookie-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.jrfunk-cookie-banner.jrfunk-cookie-hidden{ display:none; }
.jrfunk-cookie-text{ flex:1 1 380px; min-width:240px; }
.jrfunk-cookie-main{ color:var(--text); font-size:0.9rem; line-height:1.6; margin-bottom:6px; }
.jrfunk-cookie-details{ color:var(--text-muted); font-size:0.82rem; line-height:1.6; }
.jrfunk-cookie-details summary{
  cursor:pointer; color:var(--accent-ice); font-weight:600; font-size:0.8rem;
  font-family:'JetBrains Mono', monospace; letter-spacing:0.3px; list-style:none;
}
.jrfunk-cookie-details summary::-webkit-details-marker{ display:none; }
.jrfunk-cookie-details p{ margin-top:8px; }
.jrfunk-cookie-actions{ display:flex; gap:12px; flex:0 0 auto; }
.jrfunk-cookie-btn{
  flex:1; padding:12px 22px; border-radius:4px; border:1px solid var(--line);
  font-family:'Inter', sans-serif; font-weight:700; font-size:0.86rem; letter-spacing:0.2px;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  white-space:nowrap;
}
.jrfunk-cookie-accept{
  background:linear-gradient(90deg, var(--accent-dark), var(--accent-bright)); color:#100c02; border-color:transparent;
  box-shadow:0 0 24px rgba(212,175,55,0.22);
}
.jrfunk-cookie-accept:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(212,175,55,0.35); }
.jrfunk-cookie-reject{
  background:rgba(244,234,213,0.04); color:var(--text); border-color:rgba(244,234,213,0.22);
}
.jrfunk-cookie-reject:hover{ transform:translateY(-2px); background:rgba(244,234,213,0.09); border-color:rgba(244,234,213,0.4); }
@media (max-width:640px){
  .jrfunk-cookie-banner{ flex-direction:column; align-items:stretch; left:12px; right:12px; bottom:12px; padding:20px; }
  .jrfunk-cookie-actions{ width:100%; }
  .jrfunk-cookie-btn{ flex:1; }
}

/* Footer "Preferencias de cookies" link */
.footer-cookie-link{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--text-dim); font-size:inherit; font-family:inherit;
  text-decoration:underline; text-underline-offset:3px; transition:color .2s ease;
}
.footer-cookie-link:hover{ color:var(--accent-bright); }

/* ============== FAQ ACCORDION ============== */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; transition:border-color .25s ease;
}
.faq-item.open{ border-color:rgba(212,175,55,0.4); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:22px 26px; color:var(--text); font-family:'Inter', sans-serif;
  font-weight:700; font-size:1rem;
}
.faq-question:hover{ color:var(--accent-bright); }
.faq-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--accent-bright); font-size:1rem; font-weight:700;
  transition:transform .25s ease, background .25s ease;
}
.faq-item.open .faq-icon{ transform:rotate(45deg); background:rgba(212,175,55,0.12); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.faq-answer-inner{ padding:0 26px 24px; color:var(--text-muted); font-size:0.94rem; line-height:1.7; }
.faq-cta{ text-align:center; margin-top:60px; }
.faq-cta p{ color:var(--text-muted); max-width:520px; margin:0 auto 28px; font-size:1rem; line-height:1.7; }
.faq-cta-buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }