@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* ============================================================
   GROW LOCAL — Shared Stylesheet
   Samuel Siles Villeda — Consultor SEO Local Barcelona
   ============================================================ */

:root{
  --k:#002FA7;--kd:#001F78;
  --cr:#FCF9DA;--c2:#F0ECC0;
  --wh:#ffffff;--bg:#F4F4F2;
  --ink:#080808;--i2:#1a1a1a;--mu:#686868;
  --bd:rgba(0,0,0,0.09);
  --fh:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fb:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--wh);color:var(--ink);overflow-x:hidden;font-size:18px}

/* Animations */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-dot{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--wh);border-bottom:1px solid var(--bd);height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 52px;transition:background .3s,box-shadow .3s,border-color .3s}
nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 28px rgba(0,0,0,.07);border-bottom-color:transparent}
.nlogo{font-family:var(--fh);font-weight:800;font-size:18px;color:var(--k);text-decoration:none;display:inline-flex;align-items:center}
.nlogo span{color:var(--ink)}
.nlogo img{height:68px;width:auto;max-width:260px;object-fit:contain;display:block}
.nlinks{display:flex;gap:2px;list-style:none;align-items:center}
.nlinks a{font-family:var(--fb);font-size:14px;font-weight:400;color:var(--mu);padding:7px 13px;border-radius:6px;cursor:pointer;transition:color .2s,background .25s;text-decoration:none;display:inline-block}
.nlinks a:hover{color:var(--ink);background:var(--bg)}
.nlinks a.cur{color:var(--k);font-weight:600;background:rgba(0,47,167,.1)}
.ncta{background:var(--k)!important;color:var(--wh)!important;padding:8px 20px!important;font-weight:600!important;border-radius:3px!important;font-size:13px!important}
.ncta:hover,.ncta.cur{background:var(--kd)!important;color:var(--wh)!important}
.hambtn{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:101}
.hambtn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.hambtn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hambtn.open span:nth-child(2){opacity:0}
.hambtn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pt{padding-top:80px}

/* ── Typography ── */
.stag{font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--k);margin-bottom:16px;display:block}
h1{font-family:var(--fh);font-weight:800;font-size:clamp(42px,5.2vw,68px);line-height:1.02;letter-spacing:-2.5px;color:var(--ink)}
h1 .ak{color:var(--k)}
h2{font-family:var(--fh);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-1.8px;color:var(--ink)}
h2 .ak{color:var(--k)}
.ak{color:var(--k)}
.sub{font-size:20px;font-weight:300;line-height:1.78;color:var(--mu);max-width:520px;margin-top:14px}

/* ── Reveal animation ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
a.src{cursor:pointer;text-decoration:none;font-size:11px;color:var(--mu);display:block;margin-top:8px;font-style:italic;opacity:.65}
a.src:hover{opacity:1;text-decoration:underline}

/* ── Buttons ── */
.bp{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:var(--k);color:var(--wh);font-family:var(--fh);font-size:14px;font-weight:600;border:none;border-radius:3px;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none}
.bp:hover{background:var(--kd);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,47,167,.32)}
.bp:active{transform:scale(.97);box-shadow:none}
.bg{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:transparent;color:var(--mu);font-family:var(--fb);font-size:13px;font-weight:500;border:1px solid rgba(0,0,0,.22);border-radius:3px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;text-decoration:none}
.bg:hover{border-color:var(--ink);color:var(--ink)}
.bgk{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:transparent;color:var(--k);font-family:var(--fb);font-size:13px;font-weight:500;border:1px solid rgba(0,47,167,.35);border-radius:3px;cursor:pointer;transition:background .2s,color .2s;text-decoration:none}
.bgk:hover{background:var(--k);color:var(--wh)}
.bcr{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:var(--cr);color:var(--k);font-family:var(--fh);font-size:14px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .15s;text-decoration:none}
.bcr:hover{background:var(--c2);transform:translateY(-1px)}
.bcr:active{transform:scale(.97);box-shadow:none}
.bfull{width:100%;justify-content:center}

/* ── Forms ── */
.fi{width:100%;padding:13px 16px;font-family:var(--fb);font-size:14px;background:var(--wh);border:1px solid var(--bd);border-radius:8px;color:var(--ink);outline:none;transition:border-color .2s;appearance:none}
.fi::placeholder{color:#767676}.fi:focus{border-color:var(--k)}
.fd{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--cr)}
.fd::placeholder{color:rgba(252,249,218,.45)}.fd:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.11)}
.fd option{background:var(--kd);color:var(--cr)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#heroForm,#ctaForm,#svcForm,#webForm,#aiForm,#contactoForm,#e404Form{display:flex;flex-direction:column;gap:11px}

/* ── Footer ── */
footer{background:var(--k);padding:40px 52px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.fl{font-family:var(--fh);font-weight:800;font-size:16px;color:var(--cr);text-decoration:none;display:inline-flex;align-items:center}
.fl span{color:rgba(252,249,218,.55)}
.fl img{max-width:140px;height:auto;object-fit:contain;display:block}
.fls{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
.fls a{font-family:var(--fb);font-size:14px;color:rgba(252,249,218,.4);text-decoration:none;transition:color .2s}
.fls a:hover{color:var(--cr)}
.fc{font-size:11.5px;color:rgba(252,249,218,.25)}
.footer-contact a{color:rgba(252,249,218,.35);text-decoration:none;font-size:11.5px;transition:color .2s}
.footer-contact a:hover{color:var(--cr)}

/* ── Modal ── */
.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center}
.mov.open{display:flex}
.mb{background:var(--wh);border-radius:6px;padding:44px;max-width:420px;width:90%;position:relative;animation:pageIn .25s ease;border:1px solid var(--bd)}
.mc2{position:absolute;top:14px;right:18px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--mu);line-height:1}
.mb h3{font-family:var(--fh);font-size:21px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.mb p{font-size:14px;color:var(--mu);margin-bottom:22px;line-height:1.6}
.mf{display:flex;flex-direction:column;gap:10px}

/* ── Toast ── */
.toast{display:none;position:fixed;bottom:28px;right:28px;background:var(--k);color:var(--cr);padding:20px 26px;border-radius:4px;font-family:var(--fh);font-size:14px;font-weight:500;z-index:300;animation:fup .35s ease;border-left:3px solid var(--cr);max-width:300px;line-height:1.45;box-shadow:0 8px 32px rgba(0,47,167,.3)}
.toast-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:5px}
.toast.on{display:block}

/* ── Form success state ── */
.form-success{display:none;flex-direction:column;gap:16px;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.form-success.vis{opacity:1;transform:translateY(0)}
.fs-icon{width:44px;height:44px;border-radius:50%;border:2px solid var(--k);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--k);flex-shrink:0}
.fs-tag{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mu)}
.fs-heading{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.6px;line-height:1.2;margin:0}
.fs-sub{font-size:16px;font-weight:300;line-height:1.75;color:var(--mu);margin:0}
.fs-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--k);text-decoration:none;margin-top:4px;transition:gap .2s}
.fs-cta:hover{gap:10px}
/* Dark variant — fondos azules (contacto, home-cta) */
.form-success--dark .fs-icon{border-color:var(--cr);color:var(--cr)}
.form-success--dark .fs-tag{color:rgba(252,249,218,.42)}
.form-success--dark .fs-heading{color:var(--cr)}
.form-success--dark .fs-sub{color:rgba(252,249,218,.55)}
.form-success--dark .fs-cta{color:var(--cr)}

/* ── FAQ ── */
.faq-section{padding:88px 52px;background:var(--bg);border-top:1px solid var(--bd)}
.faq-head{margin-bottom:48px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{background:var(--wh);padding:32px 28px;border-radius:8px;border:1px solid rgba(0,0,0,0.13);box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.faq-item h3{font-family:var(--fh);font-size:17px;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-.3px;line-height:1.3}
.faq-item p{font-size:15px;font-weight:300;color:var(--mu);line-height:1.78}
.faq-section--dark{background:var(--k);border-top:1px solid rgba(255,255,255,.1)}
.faq-section--dark .faq-head .stag{color:rgba(252,249,218,.45)}
.faq-section--dark .faq-head h2{color:var(--cr)}
.faq-section--dark .faq-item{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.faq-section--dark .faq-item h3{color:var(--cr)}
.faq-section--dark .faq-item p{color:rgba(252,249,218,.55)}

/* ── Scroll progress bar ── */
.gl-progress{position:fixed;top:0;left:0;height:2px;background:var(--k);z-index:201;width:0%;pointer-events:none;transition:width .1s linear}

/* ── Responsive ── */
@media(max-width:768px){
  .faq-section{padding:56px 20px}
  .faq-grid{grid-template-columns:1fr}
  nav{padding:0 20px;height:64px}
  .nlinks{display:none;position:fixed;top:64px;left:0;right:0;background:var(--wh);border-bottom:1px solid var(--bd);flex-direction:column;padding:16px 20px 24px;gap:4px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.06)}
  .nlinks.open{display:flex}
  .nlinks li{width:100%}
  .nlinks a{width:100%;text-align:left;font-size:15px;padding:12px 16px}
  .nlinks a.ncta{text-align:center;margin-top:8px}
  .nlogo img{height:52px;max-width:180px}
  .pt{padding-top:64px}
  .hambtn{display:flex}
  footer{padding:32px 20px;flex-direction:column;align-items:flex-start;gap:20px}
  .r2{grid-template-columns:1fr}
}
@media(max-width:480px){h1{font-size:34px}}