/* ============================================================
     TOKENS
     Layout: one-page corporate scroll — sticky anchor nav, alternating
     light / soft-peach / dark sections, generous whitespace, single
     disciplined accent (orange) carried from the real Avenza logo.
     ============================================================ */
  :root{
    --bg:#FFFFFF;
    --bg-soft:#FFF4EC;
    --surface:#FFFFFF;
    --fg:#171717;
    --muted:#6B6B6B;
    --border:#E4E4E4;
    --primary:#FF6801;
    --primary-deep:#C9480A;
    --dark:#141414;
    --dark-surface:#1D1D1D;
    --on-dark:#F4F1EC;
    --on-dark-muted:#A8A39B;
    --on-primary:#FFFFFF;
    --font-display:'Poppins', 'Segoe UI', Arial, sans-serif;
    --font-body:'Inter', 'Segoe UI', Arial, sans-serif;
    --shadow:0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.05);
    --radius:4px;
    --logo-on-light:block; --logo-on-dark:none;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#141414; --bg-soft:#1A1714; --surface:#1D1D1D;
      --fg:#F4F1EC; --muted:#A8A39B; --border:#303030;
      --primary:#FF7A1F; --primary-deep:#FFA063;
      --dark:#0B0B0B; --dark-surface:#161616;
      --on-dark:#F4F1EC; --on-dark-muted:#9A958C; --on-primary:#141414;
      --logo-on-light:none; --logo-on-dark:block;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#141414; --bg-soft:#1A1714; --surface:#1D1D1D;
    --fg:#F4F1EC; --muted:#A8A39B; --border:#303030;
    --primary:#FF7A1F; --primary-deep:#FFA063;
    --dark:#0B0B0B; --dark-surface:#161616;
    --on-dark:#F4F1EC; --on-dark-muted:#9A958C; --on-primary:#141414;
    --logo-on-light:none; --logo-on-dark:block;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--fg); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-0.01em;}
  p{margin:0;}
  .ico{display:inline-flex; width:30px; height:30px;}
  .ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

  .wrap{max-width:1180px; margin:0 auto; padding-inline:24px;}
  section{padding-block:88px;}
  @media (max-width:720px){ section{padding-block:56px;} }

  .eyebrow{font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);}
  .h2{font-size:clamp(28px,4vw,42px); font-weight:800;}
  .lead{color:var(--muted); font-size:17px; max-width:620px;}
  .section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:48px;}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:var(--radius); font-family:var(--font-body); font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;}
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--primary); color:var(--on-primary);}
  .btn-primary:hover{background:var(--primary-deep);}
  .btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45);}
  .btn-ghost-light:hover{border-color:#fff;}
  .btn-ghost-dark{background:transparent; color:var(--fg); border-color:var(--border);}
  .btn-ghost-dark:hover{border-color:var(--fg);}

  /* ---------- header ---------- */
  header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:76px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand img{height:46px; width:auto;}
  .brand .logo-l{display:var(--logo-on-light);} .brand .logo-d{display:var(--logo-on-dark);}
  nav.links{display:flex; gap:32px; align-items:center;}
  nav.links a{font-weight:600; font-size:14.5px; text-decoration:none; color:var(--fg); opacity:.82;}
  nav.links a:hover{opacity:1;}
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .menu-btn{display:none; background:none; border:none; color:var(--fg); cursor:pointer; padding:6px;}
  @media (max-width:900px){
    nav.links{position:fixed; inset:76px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
    nav.links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
    nav.links a{padding:12px 0; width:100%; border-bottom:1px solid var(--border);}
    .menu-btn{display:inline-flex;}
    .nav-cta .btn{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden; padding-block:96px 80px;}
  .hero::before{content:"";position:absolute; inset:0; background:
      radial-gradient(620px 420px at 85% 18%, rgba(255,104,1,.16), transparent 60%);
      pointer-events:none;}
  .hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(34px,5.2vw,58px); font-weight:800; line-height:1.08; margin-bottom:22px;}
  .hero .lead{color:var(--on-dark-muted); font-size:18px; max-width:540px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-wave{width:100%; height:auto; opacity:.95;}

  /* ---------- experiencias / servicios cards ---------- */
  .grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
  @media (max-width:900px){ .grid-cards{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .grid-cards{grid-template-columns:1fr;} }
  .card{background:var(--surface); padding:32px 28px; display:flex; flex-direction:column; gap:14px; min-width:0;}
  .card .ico{color:var(--primary);}
  .card h3{font-size:17px; font-weight:700;}
  .card p{color:var(--muted); font-size:14.5px;}
  .card-cta{background:var(--dark); color:var(--on-dark);}
  .card-cta p{color:var(--on-dark-muted);}
  .card-cta h3{color:#fff; font-size:18px;}

  /* ---------- proyectos ---------- */
  .proj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  @media (max-width:720px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
  .proj-media{aspect-ratio:16/9; background:
      repeating-linear-gradient(135deg, var(--bg-soft), var(--bg-soft) 10px, var(--surface) 10px, var(--surface) 20px);
      display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.03em; text-align:center; padding:16px;}
  .proj-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px;}
  .proj-tag{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary);}
  .proj-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--muted);}
  .proj-meta b{color:var(--fg); font-weight:600;}
  .proj-note{margin-top:28px; font-size:14px; color:var(--muted); border-left:3px solid var(--primary); padding-left:14px;}

  /* ---------- avenza / proceso ---------- */
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  @media (max-width:900px){ .process{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .process{grid-template-columns:1fr;} }
  .process-step{display:flex; flex-direction:column; gap:10px;}
  .process-num{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--primary); letter-spacing:.08em;}
  .process-step h3{font-size:18px; font-weight:700;}
  .process-step p{color:var(--muted); font-size:14.5px;}
  .founder{margin-top:64px; display:grid; grid-template-columns:.4fr .6fr; gap:36px; align-items:center; background:var(--bg-soft); border-radius:var(--radius); padding:36px;}
  @media (max-width:720px){ .founder{grid-template-columns:1fr;} }
  .founder h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); font-weight:700; margin-bottom:10px;}
  .founder p{color:var(--fg); font-size:15px;}
  .founder .role{color:var(--muted); font-size:13.5px; margin-top:10px;}

  /* ---------- clientes ---------- */
  .clients-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
  @media (max-width:860px){ .clients-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:480px){ .clients-grid{grid-template-columns:repeat(2,1fr);} }
  .client-slot{aspect-ratio:16/9; border:1px dashed var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--muted); text-align:center; padding:8px;}

  /* ---------- reel ---------- */
  .reel{background:var(--dark); color:var(--on-dark);}
  .reel .wrap{display:flex; flex-direction:column; gap:36px;}
  .reel h2{color:#fff;}
  .reel-frame{position:relative; aspect-ratio:16/9; border-radius:var(--radius); background:linear-gradient(135deg,#1d1d1d,#0b0b0b); border:1px solid #2b2b2b; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .reel-play{width:76px; height:76px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff;}
  .reel-caption{position:absolute; bottom:18px; left:18px; right:18px; font-size:12.5px; color:var(--on-dark-muted); letter-spacing:.03em;}

  /* ---------- contacto ---------- */
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }
  .contact-info{display:flex; flex-direction:column; gap:22px;}
  .contact-line{display:flex; flex-direction:column; gap:4px;}
  .contact-line .k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .contact-line .v{font-size:16px; font-weight:600;}
  .copy-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .copy-btn{border:1px solid var(--border); background:var(--surface); color:var(--fg); font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:var(--radius); cursor:pointer;}
  .copy-btn:hover{border-color:var(--primary); color:var(--primary);}

  form.quote{display:flex; flex-direction:column; gap:16px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.03em;}
  .field input, .field select, .field textarea{font-family:var(--font-body); font-size:15px; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--fg); width:100%;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
  .check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px;}
  @media (max-width:560px){ .check-grid{grid-template-columns:1fr;} }
  .check-item{display:flex; align-items:center; gap:8px; font-size:14px;}
  .check-item input{width:16px; height:16px; accent-color:var(--primary);}
  #formOk{display:none; background:var(--bg-soft); border:1px solid var(--primary); border-radius:var(--radius); padding:18px 20px; font-size:14.5px;}
  #formOk strong{display:block; margin-bottom:4px;}

  /* ---------- footer ---------- */
  footer{background:var(--dark-surface); color:var(--on-dark); border-top:1px solid #2b2b2b;}
  footer .wrap{padding-block:52px 34px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px;}
  @media (max-width:720px){ footer .wrap{grid-template-columns:1fr; gap:28px;} }
  footer h5{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:14px; font-weight:700;}
  footer p, footer a{font-size:14px; color:var(--on-dark-muted); text-decoration:none;}
  footer a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid #2b2b2b; padding-block:18px; font-size:12.5px; color:#766f66; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
  .foot-bottom .wrap{display:flex; justify-content:space-between; width:100%; flex-wrap:wrap; gap:8px; padding-block:0;}

  :focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

  /* ---------- componentes añadidos (paquete) ---------- */
  .proj-media img{width:100%; height:100%; object-fit:cover;}
  .proj-desc{color:var(--muted); font-size:14px;}
  .proj-link{font-size:13.5px; font-weight:700; color:var(--primary); text-decoration:none;}
  .client-real img{max-height:60%; max-width:80%; object-fit:contain; filter:grayscale(1); opacity:.8;}
  .client-slot.client-real{border-style:solid;}
  .reel-link{position:absolute; inset:0;}
  .wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; display:inline-flex; align-items:center; gap:8px; background:var(--dark); color:#fff; border:1px solid #333; padding:12px 16px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.18);}
  .wa-float .ico{width:20px; height:20px; color:var(--primary);}
  .wa-float:hover{border-color:var(--primary);}
  @media (max-width:560px){ .wa-float span.t{display:none;} .wa-float{padding:12px;} }
  .btn-wa{background:transparent; color:var(--fg); border-color:var(--border); align-self:flex-start;}
  .btn-wa .ico{width:20px; height:20px; color:var(--primary);}
  .btn-wa:hover{border-color:var(--primary);}

  .h1-eyebrow{display:block; font-family:var(--font-body); line-height:1.5; margin-bottom:18px; letter-spacing:.14em;}

/* ---------- fotografía real ---------- */
.hero-media{margin:0; position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; max-width:100%; background:#1d1d1d;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 16px 12px; font-size:12px; letter-spacing:.03em; color:#e9e4dc; background:linear-gradient(transparent, rgba(0,0,0,.72));}

.xp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .xp-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .xp-grid{grid-template-columns:1fr;} }
.xp-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; min-width:0;}
.xp-media{aspect-ratio:3/2; overflow:hidden; background:var(--bg-soft);}
.xp-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.xp-card:hover .xp-media img{transform:scale(1.03);}
.xp-empty{display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:var(--muted); font-size:13px; font-weight:600; background:repeating-linear-gradient(135deg, var(--bg-soft), var(--bg-soft) 10px, var(--surface) 10px, var(--surface) 20px);}
.xp-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px;}
.xp-body .ico{color:var(--primary); width:26px; height:26px;}
.xp-body h3{font-size:17px; font-weight:700;}
.xp-body p{color:var(--muted); font-size:14.5px;}

.proj-media{padding:0;}
.proj-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; margin:4px 0 0; padding-top:14px; border-top:1px solid var(--border);}
.proj-meta div{min-width:0;}
.proj-meta .full{grid-column:1/-1;}
.proj-meta dt{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.proj-meta dd{margin:0; font-size:13.5px; color:var(--fg); font-weight:600;}
@media (max-width:480px){ .proj-meta{grid-template-columns:1fr 1fr;} }
.proj-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:4px;}
button.proj-link{background:none; border:0; padding:0; cursor:pointer; font-family:inherit;}

.h3{font-size:22px; font-weight:800;}
.gal-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:64px 0 20px;}
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media (max-width:900px){ .gal-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }
.gal-item{position:relative; aspect-ratio:1/1; padding:0; border:0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; background:#1d1d1d; display:block; width:100%;}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gal-item:hover img{transform:scale(1.04);}
.gal-cap{position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; font-size:11.5px; line-height:1.35; color:#fff; text-align:left; background:linear-gradient(transparent, rgba(0,0,0,.75)); opacity:0; transition:opacity .2s ease;}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap{opacity:1;}
@media (hover:none){ .gal-cap{opacity:1;} }

.reel-frame{background-size:cover; background-position:center;}

.lightbox{position:fixed; inset:0; z-index:100; background:rgba(8,8,8,.94); display:flex; align-items:center; justify-content:center; padding:56px 16px calc(24px + env(safe-area-inset-bottom,0px));}
.lightbox[hidden]{display:none !important;}
.lightbox figure{margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:10px;}
.lightbox img{max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; border-radius:var(--radius);}
.lightbox figcaption{color:#cfc9c0; font-size:13px; text-align:center;}
.lb-close{position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:14px; background:none; border:0; color:#fff; font-size:34px; line-height:1; cursor:pointer; padding:6px 10px;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:30px; width:46px; height:46px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lb-prev{left:12px;} .lb-next{right:12px;}
.lb-nav[hidden]{display:none;}

.proj-media img, .xp-media img{object-position:50% 35%;}
.proj-more-row{display:flex; justify-content:center; margin-top:24px;}
.proj-more-row .btn[hidden]{display:none;}
.gal-grid{grid-template-columns:repeat(6,1fr);}
@media (max-width:900px){ .gal-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }
[hidden]{display:none !important;}
.proj-featured{grid-column:1/-1; display:grid; grid-template-columns:1.25fr 1fr;}
.proj-featured .proj-media{aspect-ratio:auto; min-height:100%;}
.proj-featured .proj-body{padding:32px 34px 34px; justify-content:center;}
@media (max-width:860px){ .proj-featured{grid-template-columns:1fr;} .proj-featured .proj-media{aspect-ratio:16/10;} }
.proj-badge{align-self:flex-start; background:var(--primary); color:var(--on-primary); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:var(--radius);}
.proj-client{font-size:clamp(22px,2.6vw,30px); font-weight:800; margin:-2px 0 2px;}
.clients-grid.clients-real{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.client-slot.client-real{flex-direction:column; gap:4px; background:var(--surface);}
.client-name{font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--fg); letter-spacing:-.01em; text-align:center;}
.client-note{font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted);}