/* AperClau · Cerrajeros Badalona 24h
   Sistema visual compartido */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:        #0B0B0B;
  --ink-2:      #1F1F1D;
  --ink-3:      #2A2A27;
  --mostaza:    #E5B83A;
  --mostaza-2:  #C99B22;
  --crema:      #F5F1E8;
  --crema-2:    #EDE6D3;
  --white:      #FFFFFF;
  --line:       rgba(245,241,232,.12);
  --line-ink:   rgba(11,11,11,.14);

  --display:  'Archivo Black', 'Barlow Condensed', system-ui, sans-serif;
  --display2: 'Barlow Condensed', system-ui, sans-serif;
  --body:     'Inter', system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, monospace;

  --page-w: 1440px;
  --pad-x: 96px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--ink);
  color: var(--crema);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.page{
  width: var(--page-w);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.wrap{
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---------- Typography ---------- */
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mostaza);
}
.kicker--ink{ color: var(--ink); }
.kicker--mute{ color: rgba(245,241,232,.55); }

.eyebrow{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(245,241,232,.7);
}

.display{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: .9;
  text-transform: uppercase;
}
.display2{
  font-family: var(--display2);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: .92;
  text-transform: uppercase;
}

.h-mega   { font-family: var(--display); font-weight: 900; font-size: 168px; line-height: .85; letter-spacing: -.02em; text-transform: uppercase; }
.h-jumbo  { font-family: var(--display); font-weight: 900; font-size: 128px; line-height: .86; letter-spacing: -.015em; text-transform: uppercase; }
.h-xl     { font-family: var(--display); font-weight: 900; font-size: 96px;  line-height: .9;  letter-spacing: -.01em;  text-transform: uppercase; }
.h-l      { font-family: var(--display); font-weight: 900; font-size: 64px;  line-height: .95; letter-spacing: -.005em; text-transform: uppercase; }
.h-m      { font-family: var(--display2); font-weight: 800; font-size: 44px; line-height: 1;   text-transform: uppercase; }
.h-s      { font-family: var(--display2); font-weight: 700; font-size: 28px; line-height: 1.05;text-transform: uppercase; }

.body-l   { font-size: 20px; line-height: 1.45; }
.body     { font-size: 16px; line-height: 1.55; }
.body-s   { font-size: 14px; line-height: 1.5; }

/* ---------- Surfaces ---------- */
.bg-ink{   background: var(--ink);   color: var(--crema); }
.bg-ink2{  background: var(--ink-2); color: var(--crema); }
.bg-crema{ background: var(--crema); color: var(--ink); }
.bg-mostaza{ background: var(--mostaza); color: var(--ink); }
.text-mostaza{ color: var(--mostaza); }
.text-mute{ color: rgba(245,241,232,.6); }
.text-mute-ink{ color: rgba(11,11,11,.55); }

.hr-line{
  height:1px; background: var(--line); width: 100%;
}
.hr-line.dark{ background: var(--line-ink); }

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
  border-bottom: 1px solid var(--line);
  padding: 0 var(--pad-x);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topbar .left{ display:flex; gap:36px; align-items:center; }
.topbar .right{ display:flex; gap:18px; align-items:center; color: rgba(245,241,232,.7); }
.topbar .brand-logo{
  border-radius: 999px;
  display: block;
}
.topbar .nav-sep{
  width: 1px; height: 28px; background: var(--line); align-self:center;
}
.topbar .nav-link{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,241,232,.75);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.topbar .nav-link:hover{ color: var(--mostaza); border-bottom-color: var(--mostaza); }
.topbar .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px;
  border: 1px solid var(--mostaza);
  color: var(--mostaza);
  border-radius: 999px;
}
.topbar .pill::before{
  content:""; width:7px; height:7px; border-radius:999px; background: var(--mostaza);
  box-shadow: 0 0 0 4px rgba(229,184,58,.15);
  animation: blip 1.6s ease-in-out infinite;
}
.topbar .btn--tel{
  font-family: var(--display2);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  border-radius: 0;
  text-transform: none;
}
@keyframes blip { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Brand mark ---------- */
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--display2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.brand .lockup{
  display:flex; flex-direction:column; line-height:.95;
}
.brand .lockup .l1{ font-size: 18px; }
.brand .lockup .l2{ font-size: 11px; color: var(--mostaza); font-family: var(--mono); letter-spacing:.16em; text-transform:uppercase; font-weight:500; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 0;
  white-space: nowrap;
}
.btn--solid{
  background: var(--mostaza); color: var(--ink); border-color: var(--mostaza);
}
.btn--ink{
  background: var(--ink); color: var(--crema); border-color: var(--ink);
}
.btn--ghost{
  background: transparent; color: var(--crema); border-color: var(--line);
}
.btn .arrow{
  width: 14px; height: 14px; display:inline-block; position: relative;
}
.btn .arrow::before, .btn .arrow::after{
  content:""; position:absolute; background: currentColor;
}
.btn .arrow::before{ left:0; right:0; top:50%; height:1.5px; transform: translateY(-50%); }
.btn .arrow::after{ right:0; top:50%; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }

/* ---------- Footer ---------- */
.footer{
  background: var(--ink);
  color: var(--crema);
  padding: 80px var(--pad-x) 40px;
  border-top: 1px solid var(--line);
}
.footer .row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer h4{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mostaza);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ padding: 6px 0; font-size: 15px; color: rgba(245,241,232,.78); }
.footer li a:hover{ color: var(--mostaza); }
.footer .legal{
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(245,241,232,.45);
}

/* ---------- Seal (circular badge motif) ---------- */
.seal{
  position: relative;
  width: 260px; height: 260px;
  display:inline-grid; place-items:center;
}
.seal svg{ position:absolute; inset:0; width:100%; height:100%; }
.seal .center{
  position: relative; z-index: 2;
  text-align:center;
  font-family: var(--display2);
  font-weight: 800;
  text-transform: uppercase;
  line-height:.95;
}

/* number stamps */
.stamp{
  width: 56px; height: 56px;
  border-radius: 999px;
  display:inline-grid; place-items:center;
  border: 1.5px solid var(--mostaza);
  color: var(--mostaza);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
}
.stamp--solid{ background: var(--mostaza); color: var(--ink); border-color: var(--mostaza); }
.stamp--ink{ border-color: var(--ink); color: var(--ink); }
.stamp--lg{ width: 84px; height: 84px; font-size: 18px; }

/* phone display */
.tel{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--mostaza);
  text-decoration: none;
  white-space: nowrap;
}
.tel--mega{ font-size: 132px; line-height: .9; }
.tel--xl  { font-size: 84px;  line-height: .9; }
.tel--l   { font-size: 56px;  line-height: 1; }

/* ticker / marquee */
.ticker{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 18px 0;
  font-family: var(--display2);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(245,241,232,.85);
  white-space: nowrap;
  display:flex; gap: 48px;
  position: relative;
}
.ticker .dot{ color: var(--mostaza); }

/* image placeholder */
.img-ph{
  background:
    repeating-linear-gradient(135deg, rgba(229,184,58,.08) 0 1px, transparent 1px 14px),
    var(--ink-2);
  border: 1px solid var(--line);
  position: relative;
  overflow:hidden;
}
.img-ph.crema{
  background:
    repeating-linear-gradient(135deg, rgba(11,11,11,.07) 0 1px, transparent 1px 14px),
    var(--crema-2);
  border-color: var(--line-ink);
}
.img-ph .tag{
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(245,241,232,.55);
}
.img-ph.crema .tag{ color: rgba(11,11,11,.4); }

/* page nav (cross-link bar between mock pages) */
.pagenav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,11,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pagenav .inner{
  display:flex; align-items:center; gap: 18px;
  padding: 10px var(--pad-x);
  color: rgba(245,241,232,.55);
}
.pagenav a{
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: rgba(245,241,232,.8);
}
.pagenav a:hover{ border-color: var(--mostaza); color: var(--mostaza); }
.pagenav a.active{ background: var(--mostaza); color: var(--ink); border-color: var(--mostaza); }
.pagenav .sep{ opacity: .35; }

/* QA — heading order */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}