:root{--card:#f8f9fa;--ink:#0f0f10;--muted:#6c727f;--line:#e7e9ee;--radius:22px}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}
.appbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em}
.brand img{height:clamp(40px,6vw,64px);width:auto}
.hero{padding:3rem 0}
.app-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.section{padding:3rem 0}
.icon-wrap{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#f1f3f5,#e9ecef);display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}
.form-illustration{width:88px;height:88px;border-radius:22px;background:#eceef2;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.input-icon{position:relative}.input-icon>img{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:.8}.input-icon>input,.input-icon>select,.input-icon>textarea{padding-left:44px!important}
.progress-slim{height:6px;background:#e9ecef;border-radius:999px;overflow:hidden}.progress-slim>span{display:block;height:100%;background:var(--primary);width:0;transition:width .3s ease}
.btn-cta{background:var(--primary)!important;color:#fff!important;border:1px solid var(--primary)!important;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.footer{padding:2rem 0;color:var(--muted);border-top:1px solid var(--line)}
#map{border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.form-control:focus,.form-select:focus,.form-check-input:focus{box-shadow:0 0 0 .15rem rgba(0,0,0,.12);border-color:var(--primary);align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.35rem .6rem;border:1px solid var(--line);border-radius:999px;background:linear-gradient(180deg,#fff,#f6f7f9);color:#222}
@media (max-width:480px){.brand img{height:48px}}



:root{
  --brand:#FF5200; /* naranja PST */
  --brand2:#5E17EB; /* violeta acento */
}
.brand img{height:64px;width:auto}
@media (max-width: 480px){.brand img{height:48px}}
.btn-cta{
  background: linear-gradient(90deg, var(--brand), var(--brand2)) !important;
  border: none !important;
  color: #fff !important;
}
.btn-cta:hover{filter:saturate(110%);opacity:.98}
.icon-wrap{
  background: linear-gradient(180deg, rgba(255,82,0,.10), rgba(94,23,235,.10));
  border-color: rgba(0,0,0,.06);
}
.form-illustration{
  background: linear-gradient(180deg, rgba(255,82,0,.12), rgba(94,23,235,.12));
}
.hero{
  position: relative;
  padding: 3.2rem 0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,82,0,.12), transparent),
    radial-gradient(1000px 600px at 110% 10%, rgba(94,23,235,.12), transparent);
}


/* === v0.3 polish (sober, app-like) === */
:root{
  --ink:#0f0f10;
  --muted:#6b7280;
  --line:#e7e9ee;
  --surface:#ffffff;
  --radius:20px;
}
/* Logo bigger */
.brand img{height:80px;width:auto}
@media (max-width: 480px){.brand img{height:64px}}

/* App bar button visibility */
#headerCta{transition:opacity .25s ease, transform .25s ease}
#headerCta.cta-hidden{opacity:0;pointer-events:none;transform:translateY(-6px)}

/* CTA minimal */
.btn-cta{
  background:var(--primary) !important;
  color:#fff !important;
  border:1px solid var(--primary) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.btn-cta:hover{opacity:.96}
/* Quiet secondary link */
 .link-quiet{color:var(--primary);text-decoration:underline;text-underline-offset:3px} 
.link-quiet:hover{color:#004a7f}

/* Cards & sections */
.app-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.section{padding:3.2rem 0}
.hero{
  padding:3.2rem 0;
  background:linear-gradient(180deg,#fafbff 0%, #ffffff 100%);
}
.form-illustration{
  background:#f6f7fb;
  border:1px solid var(--line);
}
.icon-wrap{
  background:#f6f7fb;
  border:1px solid var(--line);
}

/* Type tweaks */
h1, h2, h3{letter-spacing:-.02em}
.lead{font-weight:500}


/* === v0.4 brand tokens === */
:root{
  --primary:#0063a8; /* azul PST */
  --secondary:#f9a54f; /* naranja PST */
}

/* brand accents */

.icon-wrap, .form-illustration{background:#f6f8fb;border-color:#e7e9ee}
.badge-accent{background:var(--secondary);color:#222}


/* Eyebrow pill tag */
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--primary) 12%, #e7e9ee);
  background: color-mix(in oklab, #fff 90%, var(--primary) 10%);
  color:#1f2937;
}


/* Input focus polish */
.form-control,.form-select, .form-check-input{
  font-family:inherit !important;
  font-size:1rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  box-shadow:0 0 0 .15rem color-mix(in oklab, var(--primary) 18%, transparent);
  border-color: var(--primary);
}
.input-icon>input,.input-icon>select,.input-icon>textarea{
  font-family:inherit !important;
  width:100%;
}

/* Mobile/tap stability */
html, body{-webkit-text-size-adjust:100%}
input,select,textarea{font-size:16px}
.form-control,.form-select{border-width:1px}

/* Progress bar visual */
.progress-slim{height:6px;background:#eef2f7;border-radius:999px}
.progress-slim>span{display:block;height:100%;background:var(--primary);border-radius:999px;width:0;transition:width .3s ease}


/* Checkbox: caja tildable clara */
.form-check-input{
  width:1.125rem;height:1.125rem;
  border-radius:4px;
  border:1.5px solid #d6dbe3;
  accent-color: var(--primary);
  cursor:pointer;
}
.form-check-label{cursor:pointer}



/* === Mobile app-like adjustments (preserve responsive, avoid zoom) === */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* iOS zoom prevention: >=16px */
input,select,textarea,button,.btn{font-size:16px}
/* Comfortable hit targets */
.form-control,.form-select,.btn{min-height:44px}
/* Keep width stable on focus */
.form-control,.form-select{border-width:1px}
.form-control:focus,.form-select:focus{border-width:1px;outline-offset:2px}
/* Images fluid */
img{max-width:100%;height:auto}