:root{
    --navy-deep:#021024;
    --navy-mid:#052659;
    --navy-low:#011638;
    --ivory:#ffffff;
    --mist-1: rgba(255,255,255,.82);
    --mist-2: rgba(255,255,255,.58);
    --mist-3: rgba(255,255,255,.30);
    --line: rgba(255,255,255,.12);
    --gold: #d9c79a;
  }
  html{scroll-behavior:smooth;}
  body{
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:300;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 55%, var(--navy-low) 100%);
    background-attachment:fixed;
    color:var(--ivory);
    min-height:100vh;
  }
  .font-display{font-family:'Clash Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; letter-spacing:-0.01em;}
  .glass{
    background: rgba(255,255,255,.045);
    border:1px solid var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .hover-lift{transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;}
  .hover-lift:hover{transform: translateY(-4px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07);}
  .btn-primary{
    background:#fff; color:var(--navy-deep);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(255,255,255,.35);}
  .btn-ghost{
    border:1px solid rgba(255,255,255,.4);
    transition: background .25s ease, border-color .25s ease;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff;}

  /* marquee — driven by JS (auto-scroll + drag), not CSS keyframes, so it can be dragged */
  .marquee-track{
    display:flex;
    width:max-content;
    will-change: transform;
  }
  .marquee-wrap{ cursor: grab; touch-action: pan-y; user-select: none; }
  .marquee-wrap.dragging{ cursor: grabbing; }
  .marquee-wrap img, .marquee-wrap button{ -webkit-user-drag: none; }

  /* dropdown */
  .dropdown-panel{
    opacity:0; visibility:hidden; transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .dropdown-group:hover .dropdown-panel,
  .dropdown-panel.force-open{
    opacity:1; visibility:visible; transform: translateY(0);
  }

  ::selection{ background: rgba(255,255,255,.25); }

  a:focus-visible, button:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
  }

  #service-detail-view{ display:none; }
  #project-detail-view{ display:none; }
  #portfolio-page-view{ display:none; }
  #review-form-view{ display:none; }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .hover-lift:hover{transform:none;}
  }

  .star{ color: var(--gold); }

  /* liquid glass dock */
  .liquid-glass{
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
  }
  /* liquid glass for dropdown/flyout menus — more opaque so text behind never bleeds through */
  .liquid-glass-menu{
    background: linear-gradient(160deg, rgba(18,32,58,.92), rgba(4,14,32,.94));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  }
  #site-header{
    overflow: visible;
    transition: max-height .35s ease, opacity .3s ease;
    max-height: 96px;
  }
  html.scrolled #site-header{ max-height:0; opacity:0; overflow:hidden; pointer-events:none; }
  #nav-dock{
    opacity:0; pointer-events:none; transform: translate(-50%, 16px) scale(.92);
    transition: opacity .3s ease, transform .3s ease;
  }
  html.scrolled #nav-dock{ opacity:1; pointer-events:auto; transform: translate(-50%, 0) scale(1); }
  .dock-btn{
    position:relative;
    width:38px; height:38px;
    border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.75);
    transition: background .2s ease, color .2s ease;
  }
  .dock-btn svg{ width:16px; height:16px; }
  .dock-btn:hover{ background: rgba(255,255,255,.14); color:#fff; }
  .dock-btn::after{
    content: attr(data-tooltip);
    position:absolute; bottom:120%; left:50%;
    transform:translateX(-50%) translateY(4px);
    background:rgba(15,15,20,.95); color:#fff; font-size:11px;
    padding:5px 10px; border-radius:8px; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .dock-btn:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* social icon buttons (footer) — plain monochrome outline, no chrome */
  .icon-btn{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.4);
    transition: color .2s ease, transform .2s ease;
  }
  .icon-btn:hover{ color:rgba(255,255,255,.8); transform: translateY(-1px); }

  /* portfolio folder cards */
  .folder-badge{
    width:64px; height:64px; border-radius:16px; flex-shrink:0;
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
  }
  .folder-badge img{ width:100%; height:100%; object-fit:cover; }

  /* modal */
  .modal-overlay{
    position:fixed; inset:0; z-index:70;
    background: rgba(2,10,24,.75);
    backdrop-filter: blur(6px);
    display:none;
    align-items:center; justify-content:center;
    padding: 24px;
  }
  .modal-overlay.open{ display:flex; }
  .checkbox-row{ display:flex; align-items:flex-start; gap:10px; }

  /* service page: "qué puede incluir" tag pills */
  .tag-pill{
    display:inline-flex; align-items:center;
    padding:8px 16px; border-radius:9999px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.7);
    font-size:13.5px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .tag-pill:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); color:#fff; }

  /* problems section: chip buttons + chat bubbles */
  .problem-chip{
    text-align:left; padding:16px 18px; border-radius:16px;
    background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.8); font-size:14.5px; transition: background .2s ease, border-color .2s ease;
  }
  .problem-chip:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }
  .chat-bubble-bot{
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius: 14px 14px 14px 4px; padding: 10px 14px; max-width: 90%;
    color: rgba(255,255,255,.8); font-size: 14px; line-height:1.5;
  }
  .chat-bubble-user{
    background: rgba(255,255,255,.92); color:#021024;
    border-radius: 14px 14px 4px 14px; padding: 10px 14px; max-width: 85%;
    font-size: 14px; line-height:1.5; margin-left:auto;
  }
  #chat-messages::-webkit-scrollbar{ width:5px; }
  #chat-messages::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:10px; }

  /* service page: FAQ accordion */
  .faq-item{ border-bottom: 1px solid rgba(255,255,255,.1); }
  .faq-question{
    width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: 20px 4px; color:#fff; font-weight:500; cursor:pointer; background:none; border:none;
  }
  .faq-chevron{ transition: transform .25s ease; flex-shrink:0; color:rgba(255,255,255,.45); }
  .faq-item.open .faq-chevron{ transform: rotate(180deg); }
  .faq-answer{
    max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease;
    color: rgba(255,255,255,.6); font-size:14.5px; line-height:1.65;
  }
  .faq-item.open .faq-answer{ max-height:400px; padding-bottom:20px; }

  /* native <details>/<summary> FAQ used on the static service pages — works with zero JS */
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary{ list-style:none; }
  .faq-item[open] .faq-chevron{ transform: rotate(180deg); }
  .checkbox-row input[type="checkbox"]{
    margin-top:3px; width:16px; height:16px; accent-color:#ffffff; flex-shrink:0;
  }