:root{
    --bg: #0a0a0a;
    --bg-soft: #121212;
    --card: #161616;
    --line: #262626;
    --ink: #f2f0ec;
    --muted: #9a958c;
    --red: #e2231a;
    --red-dim: #7a1410;
    --green: #4ade80;
    --green-bg: rgba(74,222,128,0.1);
    --red-bg: rgba(248,113,113,0.1);
    --red-light: #f87171;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- Texture ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  }

  .vignette{
    position:fixed; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(ellipse at 50% 0%, rgba(226,35,26,.05), transparent 55%);
  }

  /* ---------- Typography ---------- */
  h1,h2,h3,h4{
    font-family:'Arial Black','Helvetica Neue',sans-serif;
    font-weight:900;
    letter-spacing:-0.02em;
    line-height:0.95;
    text-transform:uppercase;
  }

  .eyebrow{
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--red);
    font-weight:700;
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{scroll-behavior:auto;}
  }

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vh 6vw 10vh;
    overflow:hidden;
  }

  .hero-bg{
    position:absolute; inset:0; z-index:0;
    background:
      linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.96) 78%, var(--bg) 100%),
      url('assets/banner.jpg') center 30%/cover no-repeat;
    filter:saturate(.55) contrast(1.05);
    transform:scale(1.04);
  }

  .hero-content{ position:relative; z-index:1; max-width:1100px; }

  .brand-row{
    display:flex; align-items:center; gap:14px;
    margin-bottom:3.5rem;
    animation:fadeDown 1s cubic-bezier(.16,1,.3,1) both;
  }
  .brand-mark{
    width:150px; 
    height:150px;     
  }
  .brand-name{ font-size:.85rem; letter-spacing:.08em; color:var(--muted); }
  .brand-name b{ color:var(--ink); font-weight:700; }

  .hero h1{
    font-size:clamp(2.6rem, 7.2vw, 6.4rem);
    color:var(--ink);
    animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:.1s;
  }
  .hero h1 span{ color:var(--red); }

  .hero-sub{
    margin-top:1.6rem;
    max-width:560px;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--muted);
    animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:.25s;
  }

  .hero-meta{
    margin-top:3.2rem;
    display:flex; gap:2.6rem; flex-wrap:wrap;
    animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:.4s;
  }
  .hero-meta .num{ font-family:'Arial Black',sans-serif; font-size:2.1rem; color:var(--ink); }
  .hero-meta .lbl{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

  .scroll-cue{
    position:absolute; bottom:3rem; left:6vw; z-index:1;
    display:flex; align-items:center; gap:10px;
    font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
    animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay:.6s;
  }
  .scroll-line{ width:1px; height:36px; background:linear-gradient(var(--red), transparent); animation:pulseLine 2.2s ease-in-out infinite; }

  @keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
  @keyframes fadeDown{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:translateY(0);} }
  @keyframes pulseLine{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

  /* ================= INTRO STRIP ================= */
  .intro{
    padding:7rem 6vw 4rem;
    border-top:1px solid var(--line);
    display:grid; grid-template-columns:1fr 1.4fr; gap:4rem;
  }
  .intro .eyebrow{ margin-bottom:1rem; display:block; }
  .intro h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--ink); }
  .intro p{ color:var(--muted); font-size:1.02rem; line-height:1.75; max-width:520px; }
  .intro-stats{ display:flex; flex-direction:column; gap:1.6rem; justify-content:center; }
  .stat-row{ display:flex; align-items:baseline; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:1.1rem;align-items: center }
  .stat-row .num{ font-family:'Arial Black',sans-serif; font-size:1.8rem; color:var(--red); min-width:64px; }
  .stat-row .desc{ color:var(--muted); font-size:.92rem; }

  /* ================= TABS SYSTEM ================= */
  .portfolio-wrapper{
    position:relative;
  }
  .tabs-header{
    position:sticky;
    top:0;
    z-index:100;
    height:10dvh;
    min-height:70px;
    background:rgba(10,10,10,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:0 6vw;
  }
  .tab-btn{
    background:var(--card);
    color:var(--muted);
    border:1px solid var(--line);
    padding:0.8rem 1.6rem;
    border-radius:8px;
    font-family:'Arial Black',sans-serif;
    font-size:0.85rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    cursor:pointer;
    transition:all 0.3s ease;
  }
  .tab-btn:hover{
    border-color:var(--muted);
    color:var(--ink);
  }
  .tab-btn.active{
    background:var(--red);
    color:#fff;
    border-color:var(--red);
    box-shadow:0 4px 14px rgba(226,35,26,0.3);
  }
  
  .tabs-body{
    min-height:90dvh;
  }
  .tab-pane{
    display:none;
    animation:tabFadeIn 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .tab-pane.active{
    display:block;
  }
  @keyframes tabFadeIn{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ================= GRID SECTION ================= */
  .panels{
    padding:3rem 6vw 6rem;
  }

  .panel{
    border-top:1px solid var(--line);
    padding:5.5rem 0;
    display:grid;
    grid-template-columns:340px 1fr;
    gap:3.5rem;
    align-items:start;
  }
  .panel:first-child{ border-top:none; padding-top:2rem; }
  .panel:last-child{ border-bottom:1px solid var(--line); }

  .panel-id{
    display:flex; align-items:baseline; gap:.6rem;
    margin-bottom:0.8rem;
  }
  .panel-id .code{
    font-family:'Arial Black',sans-serif;
    font-size:2.6rem;
    color:var(--ink);
    letter-spacing:-0.02em;
  }

  .tags-group {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-bottom: 1.2rem;
  }

  .tag{
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
    color:#ffd9a8; background:rgba(255,180,60,.08);
    border:1px solid rgba(255,180,60,.25);
    padding:.3rem .6rem; border-radius:100px;
    width:fit-content;
  }
  .tag.iluminado::before{ content:''; width:6px; height:6px; border-radius:50%; background:#ffb43c; box-shadow:0 0 8px #ffb43c; }

  .tag-status{
    font-weight: 700;
  }
  .tag-status.status-avail {
    color: var(--green);
    background: var(--green-bg);
    border-color: rgba(74,222,128,0.2);
  }
  .tag-status.status-avail::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
  
  .tag-status.status-unavail {
    color: var(--red-light);
    background: var(--red-bg);
    border-color: rgba(248,113,113,0.2);
  }
  .tag-status.status-unavail::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--red-light); box-shadow:0 0 8px var(--red-light); }

  .panel-meta{ display:flex; flex-direction:column; gap:.55rem; }
  .meta-line{ font-size:.9rem; color:var(--muted); display:flex; gap:.6rem; }
  .meta-line .k{ color:var(--ink); font-weight:600; min-width:78px; flex-shrink:0; }

  .panel-city{ margin-top:1.6rem; font-size:1.1rem; font-weight:700; color:var(--ink); }
  .panel-addr{ margin-top:.35rem; font-size:.92rem; color:var(--muted); line-height:1.55; }

  .location-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--red);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--line);
    transition: opacity 0.2s ease;
  }
  .location-link:hover {
    opacity: 0.8;
  }
  .location-link svg {
    flex-shrink: 0;
  }

  .panel-media{
    display:grid; gap:1rem;
  }
  .media-grid-1{ grid-template-columns:1fr; }
  .media-grid-2{ grid-template-columns:1fr 1fr; }
  .media-grid-3{ grid-template-columns:1fr 1fr 1fr; }

  .shot{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--line);
    /* aspect-ratio:4/3; */
  }
  .shot img{
    width:100%; height:100%; object-fit:cover;
    display:block;
    filter:saturate(.92) contrast(1.02);
    transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
  }
  .shot:hover img{ transform:scale(1.045); filter:saturate(1.05) contrast(1.05); }
  .shot::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45) 100%);
    pointer-events:none;
  }
  .shot-label{
    position:absolute; bottom:.6rem; left:.7rem; z-index:1;
    font-family:'Arial Black',sans-serif;
    font-size:.78rem; color:#fff; letter-spacing:.04em;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
  }

  /* LED Combo Banner */
  .combo-banner {
    background: linear-gradient(135deg, var(--card), #220505);
    border: 1px solid var(--red-dim);
    border-radius: 12px;
    padding: 3rem 6vw;
    margin-top: 2rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  }
  .combo-banner h4 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
  }
  .combo-banner p {
    color: var(--muted);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }
  .combo-price {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.2rem;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .combo-price span {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
  }
  .intro p {    margin-bottom: 20px;}
  @media (max-width: 880px){
    .panel{ grid-template-columns:1fr; gap:1.8rem; }
    .intro{ grid-template-columns:1fr; gap:2rem; }
    .media-grid-3{ grid-template-columns:1fr 1fr; }
    .intro p {    margin-bottom: 40px;}
  }
  @media (max-width: 520px){
    .media-grid-2, .media-grid-3{ grid-template-columns:1fr; }
    .hero{ padding:7vh 6vw 8vh; }
    .hero-meta{ gap:1.6rem; }
    .tabs-header{ height:12dvh; flex-direction:column; gap:0.5rem; justify-content:center; }
    .tab-btn{ width:100%; text-align:center; padding:0.6rem; }
  }

  /* ================= CTA / FOOTER ================= */
  .cta{
    position:relative;
    padding:8rem 6vw;
    border-top:1px solid var(--line);
    text-align:center;
    overflow:hidden;
  }
  .cta::before{
    content:'';
    position:absolute; top:-40%; left:50%; transform:translateX(-50%);
    width:900px; height:900px;
    background:radial-gradient(circle, rgba(226,35,26,.14), transparent 65%);
    pointer-events:none;
  }
  .cta h2{
    position:relative; z-index:1;
    font-size:clamp(2.2rem,6vw,4.2rem);
    color:var(--ink);
  }
  .cta h2 span{ color:var(--red); }
  .cta p{ position:relative; z-index:1; margin-top:1.2rem; color:var(--muted); font-size:1.05rem; }

  .cta-actions{
    position:relative; z-index:1;
    margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  }
  .btn{
    font-family:inherit; font-weight:700; font-size:.92rem;
    padding:1rem 2.1rem; border-radius:8px;
    text-decoration:none; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:.5rem;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn-primary{
    background:var(--red); color:#fff;
    box-shadow:0 0 0 0 rgba(226,35,26,.5);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(226,35,26,.55); }
  .btn-ghost{
    background:transparent; color:var(--ink); border:1px solid var(--line);
  }
  .btn-ghost:hover{ border-color:var(--muted); transform:translateY(-2px); }

  footer{
    padding:2.4rem 6vw 3rem;
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--line);
    flex-wrap:wrap; gap:1rem;
  }
  footer .fmark{ display:flex; align-items:center; gap:10px; }
  footer .brand-mark{height: fit-content;}
  footer .fmark .brand-mark img{ width:90px; height:60px; }
  footer .fname{ font-size:.8rem; color:var(--muted); }
  footer .fnote{ font-size:.78rem; color:var(--muted); opacity:.7; }