:root{
  --bg:#f4efe7;
  --bg-soft:#efe6da;
  --paper:#fffaf6;
  --ink:#0d3d4e;
  --ink-soft:#5b6870;
  --brand:#d86c32;
  --brand-dark:#b9531d;
  --line:rgba(13,61,78,.12);
  --dark:#083847;
  --white:#ffffff;
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --shadow:0 18px 45px rgba(8,56,71,.12);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  background:linear-gradient(180deg,#f6f1eb 0%,#efe6da 100%);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4,p,ul,ol{margin-top:0}
.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}
.narrow{max-width:980px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:var(--dark);color:#fff;padding:10px 14px;border-radius:12px}
.topbar{background:var(--dark);color:#fff;padding:12px 0}
.topbar a,.topbar p{color:#fff;margin:0;font:700 1rem/1.45 Arial,sans-serif}
.topbar-inner{display:flex;justify-content:center;align-items:center;text-align:center}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,231,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}
.header-grid{
  display:grid;grid-template-columns:auto auto 1fr auto;
  gap:18px;align-items:center;min-height:86px
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand img{width:86px;height:86px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-copy strong{font:700 1.12rem/1.15 Arial,sans-serif;color:var(--ink)}
.brand-copy span{font:600 .95rem/1.2 Arial,sans-serif;color:var(--ink)}
.nav-toggle{
  display:none;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:1.2rem
}
.main-nav ul{
  display:flex;justify-content:center;align-items:center;gap:28px;
  list-style:none;margin:0;padding:0
}
.main-nav a{color:#111;font:700 .96rem/1.2 Arial,sans-serif}
.main-nav a.is-active,.main-nav a:hover{color:var(--brand)}
.header-actions,.hero-actions,.inline-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 24px;border-radius:999px;border:1px solid transparent;
  font:700 .96rem/1.2 Arial,sans-serif;transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  box-shadow:0 16px 32px rgba(216,108,50,.28)
}
.btn-primary:hover,.btn-dark:hover{color:#fff}
.btn-secondary{background:#edf1f3;color:var(--ink);border-color:rgba(13,61,78,.15)}
.btn-dark{background:var(--dark);color:#fff}
.hero{
  position:relative;overflow:hidden;padding:80px 0 60px
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(110deg, rgba(8,56,71,.94) 0%, rgba(8,56,71,.86) 44%, rgba(8,56,71,.42) 100%),
    url("assets/images/hero-granollers.webp") center/cover no-repeat
}
.hero-grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:34px;align-items:end
}
.hero-copy{color:#fffaf4}
.hero-copy h1{margin:0 0 18px;font-size:clamp(2.45rem,5vw,5rem);line-height:.97;color:#fff}
.hero-copy p{margin:0 0 16px;color:rgba(255,250,244,.92);font-size:1.08rem;max-width:760px}
.hero-copy a,.hero-copy strong{color:#fff}
.eyebrow{
  display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:999px;
  font:800 .78rem/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;
  background:#efdcd0;color:#9b4b16
}
.eyebrow-light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff!important}
.hero-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.hero-note{
  padding:20px;border-radius:20px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)
}
.hero-note strong{display:block;margin-bottom:6px;color:#fff;font:800 1.3rem/1.1 Arial,sans-serif}
.hero-note span{display:block;color:rgba(255,250,244,.88);font:600 .92rem/1.45 Arial,sans-serif}
.hero-panel,.card,.image-card{
  background:rgba(255,250,244,.97);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:30px;border:1px solid var(--line)
}
.hero-panel h2,.card h2,.card h3,.image-card h2{color:var(--ink);margin-bottom:14px}
.hero-panel p,.hero-panel li,.card p,.card li,.zone-card p,.faq-answer p{color:var(--ink-soft)}
.contact-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.contact-list a{
  display:block;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff
}
.contact-list small{display:block;margin-top:6px;color:var(--ink-soft);line-height:1.5}
.section{padding:76px 0}
.surface{background:rgba(255,255,255,.38);border-top:1px solid rgba(255,255,255,.42);border-bottom:1px solid rgba(255,255,255,.42)}
.section-title{max-width:960px;margin-bottom:28px}
.section-title h2{margin:12px 0 16px;font-size:clamp(2rem,4vw,4rem);line-height:.98;color:var(--ink)}
.section-title p{margin:0;color:var(--ink-soft);font-size:1.08rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.quick-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px
}
.quick-links a,.zone-card,.breadcrumbs ol,.faq-item,.map-wrap,.recommend-band{
  border-radius:24px
}
.quick-links a{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:84px;padding:16px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
  font:700 .98rem/1.35 Arial,sans-serif
}
.check-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.check-list li{position:relative;padding-left:28px}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--brand);font:900 1rem/1.6 Arial,sans-serif
}
.service-showcase{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px
}
.service-feature{
  position:relative;min-height:320px;border-radius:32px;overflow:hidden;display:flex;align-items:flex-end;
  background-image:var(--bg);background-position:center;background-size:cover;background-repeat:no-repeat;
  box-shadow:var(--shadow);transform:translateY(28px);opacity:0;
  transition:transform .7s ease, opacity .7s ease, box-shadow .28s ease
}
.service-feature.is-visible{transform:translateY(0);opacity:1}
.service-feature:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(16,41,56,.18)}
.service-feature__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,52,68,.14) 0%, rgba(10,52,68,.78) 100%)}
.service-feature__content{position:relative;z-index:2;width:100%;padding:28px}
.service-feature__content h3{margin:0 0 12px;color:#fff!important;font-size:2rem;line-height:1.06}
.service-feature__content p,.service-feature__content strong{color:rgba(255,250,244,.96)!important;margin:0;line-height:1.7}
.page-hero{
  padding:66px 0 28px;
  background:
    radial-gradient(circle at top left, rgba(216,108,50,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04))
}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(290px,.97fr);gap:26px;align-items:center}
.page-hero-copy h1{font-size:clamp(2.2rem,4vw,4rem);line-height:1.02;margin-bottom:18px}
.page-hero-copy p{color:var(--ink-soft);font-size:1.05rem}
.image-card{padding:0;overflow:hidden}
.image-card img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:32px}
.breadcrumbs{padding:18px 0 0}
.breadcrumbs ol{
  list-style:none;margin:0 auto;padding:12px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  width:min(var(--container),calc(100% - 32px));background:rgba(255,255,255,.6);border:1px solid var(--line)
}
.breadcrumbs li{font:700 .9rem/1.4 Arial,sans-serif;color:var(--ink-soft)}
.breadcrumbs li+li::before{content:"/";margin-right:10px;color:rgba(13,61,78,.35)}
.breadcrumbs a{color:var(--ink)}
.cta-band{
  border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:34px;
  background:linear-gradient(135deg,#0a4455 0%, #0e5065 100%);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center
}
.cta-band,.cta-band h2,.cta-band p,.cta-band strong,.cta-band span,.cta-band li,.cta-band a{color:#fff!important}
.cta-band a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35)}
.cta-band a:hover{color:#fff!important;text-decoration-color:#fff}
.recommend-band{grid-template-columns:1fr}
.faq-list{display:grid;gap:14px}
.faq-item{
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:22px 24px;font:700 1rem/1.45 Arial,sans-serif;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font:800 1.5rem/1 Arial,sans-serif;color:var(--brand)}
.faq-item[open] summary::after{content:"–"}
.faq-answer{padding:0 24px 22px}
.zone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.zone-card{
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:24px
}
.zone-card h3{margin-bottom:10px}
.map-wrap{overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.map-wrap iframe{display:block;width:100%}
.site-footer{
  padding:72px 0 24px;background:linear-gradient(180deg,#0c2e3b 0%, #081f29 100%)
}
.site-footer,.site-footer p,.site-footer li,.site-footer a,.site-footer h4,.site-footer strong,.site-footer span,.site-footer small{color:#fff!important}
.site-footer a:hover{color:#fff!important;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:34px}
.footer-brand img{width:160px;height:auto;object-fit:contain;margin-bottom:20px}
.footer-brand p{max-width:420px}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-map{margin-top:28px}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);font:600 .88rem/1.4 Arial,sans-serif
}
.mobile-cta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;gap:10px
}
.mobile-cta .btn{flex:1}
.reveal{will-change:transform,opacity}
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;grid-column:1 / -1;padding-bottom:16px}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-grid,.hero-notes,.grid-2,.grid-3,.service-showcase,.footer-grid,.page-hero-grid,.zone-grid{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width:820px){
  .topbar{display:none}
  .header-grid{grid-template-columns:auto auto 1fr;min-height:76px}
  .brand{gap:12px}
  .brand img{width:74px;height:74px}
  .brand-copy strong{font-size:1rem}
  .brand-copy span{font-size:.9rem}
  .header-actions{display:none!important}
  .section,.hero,.page-hero{padding:58px 0}
  .hero-panel,.card,.cta-band,.zone-card{padding:24px}
  .service-feature{min-height:260px}
  .mobile-cta{display:flex}
  body{padding-bottom:86px}
  .image-card img{min-height:260px}
  .breadcrumbs ol{padding:10px 14px}
}
.card img,.image-card img,.hero-panel img{height:auto}
.cta-band p,.cta-band a,.cta-band strong,.cta-band span{color:#fff!important}

.contact-list strong{display:block}
.site-footer .map-wrap{box-shadow:none;background:transparent;border-color:rgba(255,255,255,.18)}
.site-footer .map-wrap iframe{min-height:220px}
/* codex-local-fixes */
img, svg, video, iframe { max-width: 100%; }
iframe { display: block; }
.button-row, .hero-actions, .inline-actions, .top-actions, .footer-links, .footer-actions, .header-actions { gap: 12px; flex-wrap: wrap; }
.container, .wrap { width: min(100% - 32px, 1200px); }
details { margin-top: 14px; }
summary { cursor: pointer; }
.faq-answer p, p, li, a { overflow-wrap: anywhere; }


/* codex-global-route-fixes */
.brand img,
.site-header .brand img,
.navbar-brand img,
.header-logo img,
.logo img {
  width: min(220px, 100%);
  max-width: 100%;
  max-height: 120px;
  height: auto;
  object-fit: contain;
}

.footer-logo,
.site-footer .brand img,
.site-footer .logo img,
footer .brand img,
footer img[alt*="logo" i],
footer img[alt*="cerrajero" i] {
  width: min(180px, 100%);
  max-width: 100%;
  max-height: 140px;
  height: auto;
  object-fit: contain;
}

#nuevas-rutas-locales details {
  margin-top: 1rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(17, 36, 61, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(17, 36, 61, 0.08);
}

#nuevas-rutas-locales summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: 1.05rem;
  list-style: none;
}

#nuevas-rutas-locales summary::-webkit-details-marker {
  display: none;
}

#nuevas-rutas-locales .footer-links,
#nuevas-rutas-locales .quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

#nuevas-rutas-locales .footer-links a,
#nuevas-rutas-locales .quick-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(17, 36, 61, 0.12);
  box-shadow: 0 8px 20px rgba(17, 36, 61, 0.06);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
}

#nuevas-rutas-locales .footer-links a:hover,
#nuevas-rutas-locales .quick-links a:hover {
  transform: translateY(-1px);
}

.floating-actions .btn-whatsapp,
.floating-whatsapp,
a[href*="wa.me/34653373620"] {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .brand img,
  .site-header .brand img,
  .navbar-brand img,
  .header-logo img,
  .logo img {
    width: min(180px, 100%);
    max-height: 96px;
  }

  .footer-logo,
  .site-footer .brand img,
  .site-footer .logo img,
  footer .brand img,
  footer img[alt*="logo" i],
  footer img[alt*="cerrajero" i] {
    width: min(150px, 100%);
    max-height: 112px;
  }

  #nuevas-rutas-locales .footer-links a,
  #nuevas-rutas-locales .quick-links a {
    width: 100%;
    justify-content: flex-start;
  }
}

#nuevas-rutas-locales summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #c9b000;
}

#nuevas-rutas-locales details[open] summary::after {
  content: "−";
}

/* SEO FOOTER UPGRADE START */
.hg-section {
  padding: 2.4rem 0;
}

.hg-container {
  width: min(calc(100% - 2rem), var(--container));
  margin: 0 auto;
}

.hg-cta-band {
  padding: 1.8rem 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(15, 76, 92, 0.1), rgba(191, 91, 44, 0.12)), var(--paper);
  border: 1px solid rgba(15, 76, 92, 0.16);
  box-shadow: var(--shadow);
}

.hg-cta-band h2 {
  margin-bottom: 0.75rem;
}

.hg-cta-band p:last-child {
  margin-bottom: 0;
}

.site-footer {
  background:
    radial-gradient(circle at top left, rgba(231, 159, 111, 0.16), transparent 26%),
    linear-gradient(180deg, #161b25 0%, #11161f 100%);
}

.footer-shell {
  padding: 3.4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
}

.footer-card {
  min-width: 0;
  padding: 1.3rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
}

.site-footer .brand-name {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer .brand-copy {
  color: rgba(255, 248, 240, 0.78);
  font-size: 0.95rem;
}

.footer-brand .brand {
  margin-bottom: 0.9rem;
}

.footer-card h3 {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: 1.05rem;
}

.footer-note,
.footer-card p,
.footer-card a {
  color: rgba(255, 248, 240, 0.84);
}

.footer-note {
  margin-bottom: 1rem;
}

.footer-links {
  display: grid;
  gap: 0.65rem;
}

.footer-links a {
  line-height: 1.45;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.site-footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.2rem;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  text-decoration: none;
}

.site-footer .button-primary {
  background: linear-gradient(135deg, #bf5b2c, #e79f6f);
  color: #fff;
}

.site-footer .button-secondary {
  background: linear-gradient(135deg, #0f4c5c, #2d7f94);
  color: #fff;
}

.footer-legal {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 248, 240, 0.62);
  font-size: 0.92rem;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hg-cta-band,
  .footer-card {
    padding: 1.15rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* SEO FOOTER UPGRADE END */