:root{--red:#e21b23;--red2:#ff3131;--dark:#0b0d10;--dark2:#15181d;--light:#f6f7f9;--muted:#aeb4bf;--white:#fff;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:#16191d;background:#fff;line-height:1.65}
a{color:inherit}img{max-width:100%;display:block}.wrap{width:min(var(--max),calc(100% - 34px));margin:auto}
.topbar{background:#070809;color:#fff;font-size:.92rem}.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:8px 0;flex-wrap:wrap}
header{position:sticky;top:0;z-index:50;background:rgba(11,13,16,.96);backdrop-filter:blur(10px);border-bottom:1px solid #292d33}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}.brand img{width:300px;height:92px;object-fit:contain;background:transparent;border-radius:0;padding:0}
nav{display:flex;align-items:center;gap:18px}nav a{color:#fff;text-decoration:none;font-weight:700;font-size:.93rem}.cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 18px;text-decoration:none;font-weight:900}
.cta,.btn.red{background:var(--red);color:#fff}.btn.dark{background:#111;color:#fff}.btn.ghost{border:1px solid #fff;color:#fff}.hero{background:linear-gradient(90deg,rgba(5,6,8,.94),rgba(5,6,8,.74),rgba(5,6,8,.2)),url('img/cerrajero-girona-emergencias-24-horas-girokey.webp') center/cover;min-height:690px;color:#fff;display:flex;align-items:center}
.hero .content{max-width:760px;padding:85px 0}.eyebrow{color:#ff5258;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hero h1{font-size:clamp(2.6rem,6vw,5.25rem);line-height:.98;margin:.18em 0}.hero p{font-size:1.18rem;max-width:700px;color:#e4e6ea}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#30343b}.trust div{background:#111419;color:#fff;padding:24px;text-align:center}.trust strong{display:block;font-size:1.3rem;color:#fff}.trust span{color:#bbc1ca;font-size:.9rem}
section{padding:78px 0}.kicker{color:var(--red);font-weight:900;text-transform:uppercase;letter-spacing:.09em}.section-title{font-size:clamp(2rem,4vw,3.3rem);line-height:1.08;margin:.15em 0 .45em}.lead{font-size:1.12rem;color:#565d67;max-width:850px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.06)}.card img{height:245px;width:100%;object-fit:cover}.card .pad{padding:24px}.card h3{margin:0 0 8px;font-size:1.35rem}.card a.more{color:var(--red);font-weight:900;text-decoration:none}
.dark-section{background:#0c0e11;color:#fff}.dark-section .lead{color:#c2c7cf}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.split img{border-radius:22px;max-height:650px;width:100%;object-fit:cover}.checks{display:grid;gap:12px;margin-top:22px}.check{display:flex;gap:12px}.check b{color:var(--red)}
.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}.area{background:#f1f3f5;padding:20px;border-radius:14px;text-align:center;font-weight:900}
.map iframe{width:100%;height:430px;border-radius:20px}.faq{max-width:900px}.faq details{border-bottom:1px solid #ddd;padding:17px 0}.faq summary{font-weight:900;cursor:pointer}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px}.contact-box{background:#101216;color:#fff;padding:34px;border-radius:20px}.contact-box a{color:#fff}.notice{background:#fff3f3;border-left:4px solid var(--red);padding:15px 18px;border-radius:8px}
footer{background:#070809;color:#d5d8dd;padding:48px 0 90px}.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .9fr;gap:30px}footer h3{color:#fff}footer a{color:#d5d8dd;text-decoration:none}.legal{border-top:1px solid #292d33;margin-top:32px;padding-top:20px;font-size:.88rem}
.pagehero{background:#0c0e11;color:#fff;padding:70px 0}.pagehero h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.03;margin:.2em 0}.content-page{max-width:900px}.content-page h2{margin-top:42px}.content-page h3{margin-top:30px}.content-page li{margin:8px 0}
.floating{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}.floating a{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 8px 25px rgba(0,0,0,.3)}
@media(max-width:900px){nav a:not(.cta){display:none}.grid3,.split,.contact-grid,.footer-grid{grid-template-columns:1fr}.trust{grid-template-columns:1fr 1fr}.area-grid{grid-template-columns:1fr 1fr}.hero{min-height:620px}.hero .content{padding:65px 0}.brand img{width:300px;height:92px;object-fit:contain;background:transparent;border-radius:0;padding:0}.nav{min-height:70px}}
@media(max-width:520px){.trust{grid-template-columns:1fr 1fr}.area-grid{grid-template-columns:1fr}.topbar .wrap{justify-content:center}.hero h1{font-size:2.65rem}section{padding:58px 0}}

/* Girokey V3: header de alto contraste para logotipo */
.site-header{background:#f7f7f7!important;border-bottom:1px solid #d7d7d7!important}
.site-header .nav a{color:#111!important}
.site-header .nav .btn{color:#fff!important}
.brand img{width:340px!important;height:104px!important;object-fit:contain!important;background:transparent!important;border-radius:0!important;padding:0!important}
@media(max-width:760px){.brand img{width:245px!important;height:80px!important}}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.chip{display:inline-block;padding:9px 13px;border:1px solid #ddd;border-radius:999px;background:#fff;color:#111;font-weight:700}

/* V3 header Girokey */
.site-header{background:#ffffff!important;border-bottom:1px solid #e3e3e3!important}
.site-header .nav a:not(.btn){color:#111!important}
.brand img{width:360px!important;height:108px!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}
@media(max-width:760px){.brand img{width:255px!important;height:82px!important}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.chip{display:inline-block;padding:9px 13px;border:1px solid #ddd;border-radius:999px;background:#fff;color:#111;font-weight:700}

/* =========================================================
   GIROKEY FINAL — FRANJAS DORADO BRILLANTE
   ========================================================= */
.topbar,
.site-header,
.site-footer{
  background:linear-gradient(
    90deg,
    #7a5700 0%,
    #c99700 8%,
    #ffd700 20%,
    #fff3a6 32%,
    #d4af37 46%,
    #ffdf32 58%,
    #fff3a6 70%,
    #d4af37 84%,
    #8a6500 100%
  )!important;
  color:#111!important;
}
.topbar{border-bottom:1px solid #fff0a0!important;}
.site-header{border-bottom:2px solid #b8860b!important;}
.site-footer{border-top:2px solid #b8860b!important;}
.topbar a,
.site-header .nav a:not(.btn),
.site-footer a,
.site-footer p,
.site-footer small{color:#111!important;}
.site-header .nav .btn{color:#fff!important;}

/* ==========================================================
   GIROKEY V5 — DORADO EN HEADER REAL + FOOTER COMPLETO
   ========================================================== */
:root{
  --giro-gold: linear-gradient(90deg,
    #8a6500 0%, #c99700 7%, #ffd700 18%, #fff2a0 31%,
    #d4af37 47%, #ffe45c 60%, #fff2a0 72%, #d4af37 87%, #8a6500 100%);
}

/* Franja superior */
.topbar{
  background:var(--giro-gold)!important;
  color:#111!important;
}

/* ESTA es la franja donde está el logo y el menú */
.site-header,
header.site-header,
header{
  background:var(--giro-gold)!important;
  border-bottom:2px solid #8a6500!important;
}
.site-header .container{
  min-height:145px!important;
}
.site-header .nav a:not(.btn){color:#111!important;}

/* Logo mucho más grande */
.brand{
  display:flex!important;
  align-items:center!important;
  min-width:430px!important;
}
.brand img{
  width:420px!important;
  max-width:420px!important;
  height:130px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.35))!important;
}

/* Footer COMPLETO dorado */
.site-footer,
footer.site-footer,
footer{
  background:var(--giro-gold)!important;
  color:#111!important;
  border-top:2px solid #8a6500!important;
}
.site-footer *,
footer *{
  color:#111!important;
}
.site-footer a,
footer a{
  color:#111!important;
  text-decoration-color:#111!important;
}

/* Mantener CTA rojo */
.site-header .btn,
header .btn{
  color:#fff!important;
}

@media(max-width:900px){
  .brand{min-width:auto!important}
  .brand img{width:300px!important;max-width:300px!important;height:100px!important}
  .site-header .container{min-height:115px!important}
}
@media(max-width:600px){
  .brand img{width:235px!important;max-width:235px!important;height:82px!important}
}

/* GIROKEY V6 — ajustes finales */
.topbar{
  background:#d71920!important;
  color:#fff!important;
  border-bottom:1px solid #b30f15!important;
}
.topbar a,.topbar span,.topbar *{color:#fff!important}

/* Menú rojo sobre header dorado */
.site-header .nav a:not(.btn),
header.site-header .nav a:not(.btn){
  color:#d71920!important;
  font-weight:800!important;
}
.site-header .nav a:not(.btn):hover{color:#a50d13!important}

/* Títulos del contenido en dorado */
main h1,main h2,main h3,main h4,
.section h1,.section h2,.section h3,.section h4{
  color:#d4af37!important;
}

/* Footer: logo grande y legible */
.site-footer .footer-logo{
  display:block!important;
  width:300px!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 0 22px 0!important;
}

/* ==========================================================
   GIROKEY V7 — NEGRO + ROJO + GRAFITO / PLATA
   Sustituye visualmente todo el dorado anterior.
   ========================================================== */
:root{
  --giro-red:#e31b23;
  --giro-red-dark:#a90f15;
  --giro-black:#0b0c0e;
  --giro-graphite:#17191d;
  --giro-silver:#d7d9dd;
  --giro-silver-dark:#9da2aa;
}
.topbar{
  background:var(--giro-red)!important;
  color:#fff!important;
  border-bottom:1px solid var(--giro-red-dark)!important;
}
.topbar,.topbar a,.topbar span,.topbar *{color:#fff!important}
.site-header,header.site-header,header{
  background:linear-gradient(90deg,#090a0c 0%,#17191d 50%,#090a0c 100%)!important;
  border-bottom:2px solid var(--giro-red)!important;
}
.site-header .nav a:not(.btn),header.site-header .nav a:not(.btn){
  color:#fff!important;font-weight:800!important;
}
.site-header .nav a:not(.btn):hover{color:var(--giro-red)!important}
.site-header .btn,header .btn{background:var(--giro-red)!important;color:#fff!important}
.site-footer,footer.site-footer,footer{
  background:linear-gradient(90deg,#090a0c 0%,#1a1c20 50%,#090a0c 100%)!important;
  color:#fff!important;border-top:3px solid var(--giro-red)!important;
}
.site-footer *,footer *{color:#fff!important}
.site-footer a,footer a{color:var(--giro-silver)!important}
main h1,main h2,main h3,main h4,
.section h1,.section h2,.section h3,.section h4{
  color:var(--giro-red)!important;
}
.eyebrow{color:var(--giro-silver-dark)!important}
.card{border-top:2px solid var(--giro-red)!important}