/* ============================================================
   Master project form — "Have a Project?"  (look & narrative from Formulario_NEW_PROJECT.pdf)
   Used two ways by assets/js/project.js: as a full-screen overlay on any page, and inline on project.html
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500&family=Space+Grotesk:wght@300;400;500&display=swap');

:root{
  --pf-bg:#050506;
  --pf-ink:#c9c9c9;
  --pf-dim:#5d5d60;
  --pf-blue:#0aa5ff;
  --pf-scribble:#1414e6;
}
html.pf-lock, html.pf-lock body{ overflow:hidden !important; }

.pf-overlay{
  position:fixed; inset:0; z-index:5000; background:var(--pf-bg); color:var(--pf-ink);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:none; opacity:0; transform:translateY(18px); transition:opacity .28s ease, transform .28s ease;
}
.pf-overlay.show{ display:block; }
.pf-overlay.in{ opacity:1; transform:none; }

.pf-root{ font-family:'Space Grotesk','Inter Tight',sans-serif; background:var(--pf-bg); color:var(--pf-ink); min-height:100%; }
.pf-root *{ box-sizing:border-box; }

/* --- top bar: back / wordmark / close --- */
.pf-bar{
  position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:16px 5vw; background:linear-gradient(180deg, var(--pf-bg) 70%, rgba(5,5,6,0));
}
.pf-bar .pf-back, .pf-bar .pf-close{
  font-family:'Inter Tight',sans-serif; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  color:var(--pf-ink); background:none; border:1px solid rgba(201,201,201,.28); border-radius:99px;
  padding:10px 18px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s, background .2s;
}
.pf-bar .pf-back{ justify-self:start; }
.pf-bar .pf-close{ justify-self:end; }
.pf-bar .pf-back:hover, .pf-bar .pf-close:hover{ border-color:var(--pf-blue); color:#fff; background:rgba(10,165,255,.08); }
.pf-bar .pf-logo img{ height:26px; width:auto; display:block; }
@media (max-width:520px){
  .pf-bar{ padding:14px 4vw; }
  .pf-bar .pf-back .t, .pf-bar .pf-close .t{ display:none; }
  .pf-bar .pf-back, .pf-bar .pf-close{ padding:10px 14px; font-size:1rem; }
}

.pf-wrap{ max-width:1040px; margin:0 auto; padding:2vh 6vw 70px; }
.pf-title{
  font-family:'Inter Tight','Helvetica Neue',Arial,sans-serif; font-weight:300; text-transform:uppercase;
  font-size:clamp(3.3rem, 10.4vw, 9rem); line-height:.98; letter-spacing:-.025em; color:#c4c4c4; margin:3vh 0 0;
}
.pf-star{ display:block; width:clamp(64px,9vw,104px); height:auto; margin:clamp(24px,5vw,48px) 0 clamp(18px,3vw,34px); overflow:visible; }
.pf-star line{ stroke:var(--pf-blue); stroke-width:2; stroke-linecap:round; }

/* --- narrative --- */
.pf-form{ font-size:clamp(1.55rem, 3.1vw, 2.55rem); line-height:2.05; font-weight:300; color:var(--pf-ink); letter-spacing:-.005em; }
.pf-form p{ margin:0 0 .15em; }
.pf-hi{ font-family:'Inter Tight',sans-serif; font-weight:200; }
.pf-hi .sub{ margin-left:.7em; color:#9c9c9f; font-size:.82em; }
.pf-blue{ color:var(--pf-blue); }

.pf-slot{ display:inline-flex; align-items:center; vertical-align:middle; position:relative; margin:0 .08em; border-radius:6px; }
.pf-slot > i{ font-style:normal; color:var(--pf-blue); font-weight:200; font-family:'Inter Tight',sans-serif; font-size:1.55em; line-height:1; padding:0 .12em; transform:skewX(-6deg); user-select:none; }
.pf-slot input{
  background:none; border:0; outline:0; padding:0; margin:0; color:#fff; font-family:'Inter Tight',sans-serif; font-weight:300;
  font-size:.86em; letter-spacing:.015em; text-transform:uppercase; min-width:3ch; height:2.1em;
}
.pf-slot input[type="email"], .pf-slot input[type="tel"]{ text-transform:none; }
.pf-slot input::placeholder{ color:var(--pf-dim); opacity:1; text-transform:uppercase; }
.pf-slot:focus-within{ box-shadow:0 0 0 1px rgba(10,165,255,.55); }
.pf-slot.bad{ box-shadow:0 0 0 1px #ff5a5a; }

/* custom dropdowns (project type / volume) */
.pf-dd{ display:inline-block; position:relative; vertical-align:middle; }
.pf-dd-btn{
  display:inline-flex; align-items:center; gap:.5em; background:none; border:0; cursor:pointer; padding:0 .1em; margin:0;
  font-family:'Inter Tight',sans-serif; font-weight:300; font-size:.86em; letter-spacing:.015em; text-transform:uppercase; color:var(--pf-dim); height:2.1em; border-radius:6px;
}
.pf-dd-btn:focus-visible{ outline:1px solid rgba(10,165,255,.7); outline-offset:3px; }
.pf-dd-btn.has{ color:#fff; }
.pf-dd-btn svg{ width:.55em; height:.4em; flex:none; fill:#c4c4c4; }
.pf-dd.box .pf-dd-btn{ background:#252526; color:var(--pf-blue); padding:0 .9em; min-width:min(15em,100%); justify-content:space-between; border-radius:2px; text-transform:uppercase; }
.pf-dd.box .pf-dd-btn.has{ color:#fff; }
.pf-dd-list{
  display:block; position:absolute; z-index:20; left:0; top:calc(100% + 2px); min-width:100%; margin:0; padding:.5em 0; background:#5f5f61; color:#ececec; text-align:center;
  font-family:'Inter Tight',sans-serif; font-weight:300; font-size:.8em; letter-spacing:-.01em; text-transform:none; box-shadow:0 24px 50px rgba(0,0,0,.55); border-radius:2px; line-height:1.55;
}
.pf-dd:not(.box) .pf-dd-list{ min-width:14em; background:#2b2b2d; text-align:left; }
.pf-dd-list[hidden]{ display:none; }
.pf-dd-list [role="option"]{ display:block; padding:.35em 1.3em; cursor:pointer; white-space:nowrap; }
.pf-dd-list [role="option"]:hover, .pf-dd-list [role="option"]:focus, .pf-dd-list [role="option"][aria-selected="true"]{ background:rgba(10,165,255,.28); color:#fff; }

/* budget slider */
.pf-budget-line{ margin-top:.3em; }
.pf-slider{ position:relative; height:clamp(120px,15vw,150px); margin:.4em 0 1em; user-select:none; touch-action:pan-y; }
.pf-track{ position:absolute; left:2%; right:2%; top:calc(clamp(120px,15vw,150px) * .27); height:1px; background:#3a3a3d; }
.pf-track::before, .pf-track::after{ content:''; position:absolute; top:-2.5px; width:6px; height:6px; border-radius:50%; background:#3a3a3d; }
.pf-track::before{ left:-3px; } .pf-track::after{ right:-3px; }
.pf-knob{ position:absolute; top:0; bottom:0; width:25%; padding:0 3.4%; transition:left .28s cubic-bezier(.3,.8,.3,1); pointer-events:none; }
.pf-knob > div{ position:relative; height:100%; border:1px solid #2a2a2c; border-radius:clamp(26px,4.4vw,44px); background:#09090a; box-shadow:0 12px 30px rgba(0,0,0,.6); }
.pf-knob > div::after{ content:''; position:absolute; left:50%; bottom:13%; width:clamp(34px,5.2vw,52px); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:#07a8ff; box-shadow:0 0 22px rgba(7,168,255,.55); }
.pf-stops{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); }
.pf-stop{
  background:none; border:0; cursor:pointer; color:#bdbdc0; font-family:'Inter Tight',sans-serif; font-weight:300; font-size:clamp(.78rem,1.55vw,1.05rem); line-height:1.15; padding-top:calc(clamp(120px,15vw,150px) * .27 - .6em);
  display:flex; flex-direction:column; align-items:center; align-self:stretch; letter-spacing:.01em; position:relative; z-index:2; text-align:center; border-radius:20px;
}
.pf-stop .lb{ display:flex; flex-direction:column; align-items:center; background:var(--pf-bg); padding:.1em .7em .15em; border-radius:6px; }
.pf-stop small{ font-size:.78em; opacity:.85; }
.pf-stop[aria-checked="true"]{ color:#fff; }
.pf-stop:focus-visible{ outline:1px solid rgba(10,165,255,.7); outline-offset:-4px; }

/* date + phone */
.pf-date .pf-cal{ background:none; border:0; padding:0 .15em; margin-left:.1em; cursor:pointer; color:#9a9a9d; display:inline-flex; align-items:center; border-radius:6px; font:inherit; font-size:1em; }
.pf-date .pf-cal:hover{ color:var(--pf-blue); }
.pf-date .pf-cal svg{ width:.95em; height:.95em; display:block; }
.pf-date input[type="date"]{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; right:0; bottom:0; }
.pf-cc{ position:relative; display:inline-flex; align-items:center; gap:.3em; height:2.1em; padding:0 .3em; color:#e0e0e0; font-family:'Inter Tight',sans-serif; font-weight:300; font-size:.86em; }
.pf-cc select{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; font-size:16px; }
.pf-cc .flag{ font-size:1.15em; line-height:1; }
.pf-cc svg{ width:.5em; height:.36em; fill:#9a9a9d; }
.pf-cc:focus-within{ box-shadow:0 0 0 1px rgba(10,165,255,.55); border-radius:6px; }
.pf-phone-num{ min-width:9ch; }

/* submit */
.pf-actions{ display:flex; flex-direction:column; align-items:center; margin:clamp(36px,7vw,80px) 0 0; }
.pf-thanks{ align-self:flex-start; }
.pf-submit{
  position:relative; background:none; border:0; cursor:pointer; color:#c9c9c9; font-family:'Inter Tight',sans-serif; font-weight:300; text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:.02em; padding:clamp(34px,6vw,64px) clamp(60px,11vw,120px); margin:clamp(14px,3vw,34px) 0 0; transition:color .2s;
}
.pf-submit svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.pf-submit svg path{ fill:none; stroke:var(--pf-scribble); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:0; transition:stroke-dashoffset .9s ease; }
.pf-submit:hover{ color:#fff; }
.pf-submit:hover svg path{ stroke:#2b2bff; }
.pf-submit:focus-visible{ outline:1px dashed rgba(10,165,255,.7); outline-offset:4px; border-radius:50%; }
.pf-submit[disabled]{ opacity:.55; cursor:default; }
.pf-err{ font-family:'Inter Tight',sans-serif; font-size:.95rem; line-height:1.5; color:#ff8a8a; margin-top:10px; min-height:1.4em; text-align:center; }

.pf-done{ display:none; padding:6vh 0 4vh; }
.pf-done h2{ font-family:'Inter Tight',sans-serif; font-weight:300; text-transform:uppercase; font-size:clamp(2.4rem,7vw,5.4rem); line-height:1; margin:0 0 .5em; color:#c4c4c4; }
.pf-done p{ font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.6; font-weight:300; max-width:34ch; margin:0 0 1.4em; }
.pf-done .pf-back2{ display:inline-block; font-family:'Inter Tight',sans-serif; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; border:1px solid var(--pf-blue); padding:12px 22px; border-radius:99px; background:none; cursor:pointer; text-decoration:none; }
.pf-root.is-done .pf-form, .pf-root.is-done .pf-star{ display:none; }
.pf-root.is-done .pf-done{ display:block; }

/* contact & info block (from the master) */
.pf-info{ margin-top:clamp(56px,9vw,110px); text-align:center; font-family:'Inter Tight',sans-serif; text-transform:uppercase; color:#e6e6e6; }
.pf-info .lbl{ color:#6f6f73; letter-spacing:.04em; font-size:1rem; margin-bottom:22px; }
.pf-info a{ display:block; color:#fff; text-decoration:none; font-size:1.05rem; line-height:2; font-weight:300; letter-spacing:.01em; }
.pf-info a:hover{ color:var(--pf-blue); }
.pf-info a.mute{ pointer-events:none; }
.pf-social{ display:flex; justify-content:center; gap:22px; margin:34px 0 36px; }
.pf-social a, .pf-social span{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; font-weight:700; text-transform:none; }
.pf-social svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pf-social .off{ color:#4a4a4e; cursor:default; }
.pf-news{ max-width:640px; margin:46px auto 0; text-align:left; }
.pf-news .lbl{ text-align:center; color:#8d8d91; font-size:.95rem; }
.pf-news form{ display:flex; align-items:center; border-bottom:1px solid #d9d9d9; padding:0 0 12px; }
.pf-news input{ flex:1; background:none; border:0; outline:0; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.3rem,3vw,2rem); font-weight:300; text-transform:none; padding:8px 0; min-width:0; }
.pf-news input::placeholder{ color:#58585c; }
.pf-news button{ background:none; border:0; color:var(--pf-blue); cursor:pointer; padding:0 4px; }
.pf-news button svg{ width:46px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pf-news .ok{ text-align:center; color:var(--pf-blue); font-size:.9rem; margin-top:10px; min-height:1.2em; text-transform:none; }
.pf-clocks{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:28px; margin:56px 0 0; padding-top:10px; }
.pf-clk{ display:flex; flex-direction:column; align-items:center; gap:16px; text-transform:uppercase; font-size:1.05rem; font-weight:300; line-height:1.3; color:#fff; min-width:140px; }
.pf-clk small{ display:block; color:#a8a8ac; font-size:.95rem; }
.pf-clock{ position:relative; width:clamp(64px,9vw,88px); aspect-ratio:1; border:1px solid #d6d6d6; border-radius:50%; }
.pf-clock .h{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; background:var(--pf-blue); border-radius:2px; }
.pf-clock .hr{ width:2.5px; height:26%; } .pf-clock .mn{ width:2px; height:36%; }
.pf-foot{ text-align:center; color:#6f6f73; font-family:'Inter Tight',sans-serif; font-size:.78rem; margin-top:50px; }

/* inline mount on project.html: no overlay chrome offset */
.pf-inline .pf-bar{ position:static; }