/* MULTISERVICE Hogar & Empresa — cerrajeria.css — v1.0.0 */
/* ============================================
   RESET & BASE
============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* ============================================
   DESIGN TOKENS — corporate red & yellow
============================================ */
:root{
  /* brand palette — red + yellow only */
  --red: #E11D2E;
  --red-dark: #B81825;
  --red-soft: #FFF1F2;
  --yellow: #FFB800;
  --yellow-dark: #E0A200;
  --yellow-soft: #FFF8E5;

  /* neutrals */
  --ink: #0E0E0E;
  --ink-2: #1F1F1F;
  --graphite: #2A2A2A;
  --gray-700: #404040;
  --gray-500: #6B6B6B;
  --gray-400: #9A9A9A;
  --gray-300: #C9C9C9;
  --gray-200: #E5E5E5;
  --gray-100: #F1F1F1;
  --gray-50:  #F8F8F8;
  --white: #FFFFFF;

  /* typography */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans-narrow: 'Archivo Narrow', 'Archivo', Arial, sans-serif;

  /* layout */
  --max: 1280px;
  --maxNarrow: 1080px;
  --radius: 2px;
  --radius-lg: 4px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 14px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12), 0 10px 20px rgba(0,0,0,0.06);

  --transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

body{
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
  font-feature-settings: "ss01" on;
}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.container--narrow{max-width:var(--maxNarrow);margin:0 auto;padding:0 24px}

/* ============================================
   TYPOGRAPHY — Archivo, square, corporate
============================================ */
h1,h2,h3,h4{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-transform: none;
}
h1{font-weight: 900}
h2{font-size: clamp(30px, 4vw, 48px); font-weight: 800}
h3{font-size: clamp(22px, 2vw, 28px); font-weight: 700}
h4{font-size: 18px; font-weight: 700; letter-spacing: -0.01em}

.lead{
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--gray-700);
  font-weight: 400;
}

.eyebrow{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:24px;height:2px;
  background:var(--red);
}
.eyebrow--yellow{color:var(--yellow)}
.eyebrow--yellow::before{background:var(--yellow)}
.eyebrow--white{color:#fff}
.eyebrow--white::before{background:var(--yellow)}
.eyebrow--center{display:flex;justify-content:center}

/* ============================================
   TOP UTILITY BAR
============================================ */
.topbar{
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 2px solid var(--yellow);
}
.topbar__inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.topbar__left, .topbar__right{
  display:flex;
  align-items:center;
  gap: 22px;
}
.topbar__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
}
.topbar__item strong{color:#fff;font-weight:700}
.topbar__item svg{flex-shrink:0;opacity:.7}
.topbar__divider{width:1px;height:14px;background:rgba(255,255,255,0.18)}
.topbar__badge{
  background: var(--red);
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (max-width: 860px){
  .topbar__left .topbar__item:nth-child(n+3),
  .topbar__divider{display:none}
  .topbar__right .topbar__item:not(:last-child){display:none}
}

/* ============================================
   NAVIGATION
============================================ */
.nav{
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--transition);
}
.nav.scrolled{box-shadow: 0 2px 12px rgba(0,0,0,0.06)}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 150px;
  gap: 28px;
}
.nav__logo{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.nav__logo img{
  height: 128px;
  width: auto;
  transition: transform var(--transition);
}
.nav__logo:hover img{transform:scale(1.03)}
.nav__menu{
  display:flex;
  align-items:center;
  gap: 2px;
}
.nav__link{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 12px;
  position: relative;
  letter-spacing: -0.005em;
  transition: color var(--transition);
}
.nav__link::after{
  content:"";
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover{color:var(--red)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--red);
  color:#fff;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
  white-space:nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12.5px;
}
.nav__cta:hover{background:var(--red-dark);transform:translateY(-1px)}
.nav__cta svg{width:18px;height:18px}
.nav__toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.nav__toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--ink);
  position: relative;
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:"";
  position:absolute;left:0;
  width:18px;height:2px;
  background:var(--ink);
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}

@media (max-width: 1180px){
  .nav__menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding: 12px 20px 20px;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow);gap:0}
  .nav__menu.open{display:flex}
  .nav__link{padding: 14px 16px;font-size: 16px;border-bottom: 1px solid var(--gray-100)}
  .nav__link::after{display:none}
  .nav__toggle{display:flex}
  .nav__cta span{display:none}
  .nav__cta{padding: 12px 14px}
}
@media (max-width:560px){
  .nav__inner{height:104px;gap:14px}
  .nav__logo img{height: 82px}
}

/* ============================================
   HERO — minimal, single column, no card, no grid pattern
============================================ */
.hero{
  position: relative;
  min-height: 640px;
  background:
    linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.78) 100%),
    url('https://img.clemix.cl/uploads/chatgpt-image-27-may-2026--12_49_38-a-m.webp') center/cover no-repeat;
  background-attachment: scroll;
  color: #fff;
  display:flex;
  align-items:center;
  padding: 110px 0;
  overflow:hidden;
}
.hero__bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 50%, var(--yellow) 50%, var(--yellow) 100%);
  z-index: 3;
}
.hero__inner{
  position:relative;
  z-index:2;
  max-width: 880px;
}
.hero h1{
  font-family: var(--sans);
  color: #fff;
  font-size: clamp(40px, 5.8vw, 72px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  text-transform: none;
}
.hero h1 span{color: var(--yellow)}
.hero__sub{
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin-bottom: 40px;
  max-width: 640px;
  font-weight: 400;
}
.hero__ctas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 16px 28px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary{
  background: var(--red);
  color: #fff;
}
.btn--primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(225,29,46,0.4)}
.btn--ghost{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--graphite);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--ink);border:1px solid var(--gray-200)}
.btn--light:hover{background:var(--yellow);border-color:var(--yellow)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{background:var(--yellow-dark);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex-shrink:0}

@media (max-width: 760px){
  .hero{min-height:auto;padding: 80px 0 70px}
  .hero h1{font-size: clamp(34px, 9vw, 52px)}
}

/* ============================================
   TRUST STRIP — bold horizontal stats
============================================ */
.trust{
  background: var(--ink);
  padding: 0;
  color: #fff;
}
.trust__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: stretch;
}
.trust__item{
  text-align:left;
  padding: 32px 26px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
  transition: background var(--transition);
}
.trust__item:last-child{border-right:none}
.trust__item:hover{background: rgba(255,255,255,0.03)}
.trust__num{
  font-family: var(--sans);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.trust__num em{
  font-style: normal;
  color: var(--yellow);
}
.trust__num small{
  font-size: 16px;
  color: var(--gray-400);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 4px;
}
.trust__label{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-top: 8px;
}
@media (max-width: 880px){
  .trust__grid{grid-template-columns: repeat(3, 1fr)}
  .trust__item{padding: 26px 20px;border-bottom: 1px solid rgba(255,255,255,0.08)}
  .trust__item:nth-child(3n){border-right:none}
}
@media (max-width: 480px){
  .trust__grid{grid-template-columns: repeat(2, 1fr)}
  .trust__item:nth-child(3n){border-right: 1px solid rgba(255,255,255,0.08)}
  .trust__item:nth-child(2n){border-right:none}
}

/* ============================================
   BRAND BACKING STRIP
============================================ */
.brandstrip{
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 40px 0;
}
.brandstrip__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 48px;
}
.brandstrip__text{max-width: 640px}
.brandstrip__label{
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}
.brandstrip__text p{
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.55;
}
.brandstrip__text strong{color: var(--ink); font-weight: 700}
.brandstrip__logo{
  flex-shrink: 0;
  transition: transform var(--transition);
}
.brandstrip__logo img{
  height: 78px;
  width: auto;
}
.brandstrip__logo:hover{transform: scale(1.04)}
@media (max-width: 760px){
  .brandstrip__inner{flex-direction: column; text-align: center; gap: 28px}
  .brandstrip__logo img{height: 64px}
}

/* ============================================
   SECTION SCAFFOLDING
============================================ */
.section{padding: 110px 0}
.section--alt{background: var(--gray-50)}
.section--dark{background: var(--ink);color:#fff}
.section--dark h2{color:#fff}
.section--dark .lead{color: rgba(255,255,255,0.75)}

.section__head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
.section__head--center{
  text-align: center;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left:auto;margin-right:auto;
  align-items: center;
}
.section__head h2{margin-top: 16px}
.section__head .lead{padding-bottom: 6px}
@media (max-width: 800px){
  .section{padding: 80px 0}
  .section__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
}

/* color accent for h2 highlights */
.h-red{color: var(--red)}
.h-yellow{color: var(--yellow-dark)}

/* ============================================
   SERVICES GRID
============================================ */
.services{display:grid;grid-template-columns: repeat(12, 1fr);gap:20px}
.service-card{
  grid-column: span 4;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display:flex;flex-direction:column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.service-card::before{
  content:"";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.4,0,0.2,1);
  z-index: 3;
}
.service-card:hover::before{transform: scaleX(1)}
.service-card:nth-child(2)::before{background: var(--yellow)}
.service-card:nth-child(3)::before{background: var(--red)}
.service-card:nth-child(4)::before{background: var(--yellow)}
.service-card:nth-child(5)::before{background: var(--red)}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}
.service-card--wide{grid-column: span 6}
.service-card__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:var(--ink);
}
.service-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-card__media img{transform: scale(1.06)}
.service-card__tag{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.service-card__tag svg{width:13px;height:13px}
.service-card:nth-child(1) .service-card__tag svg{color:var(--red)}
.service-card:nth-child(2) .service-card__tag svg{color:var(--yellow-dark)}
.service-card:nth-child(3) .service-card__tag svg{color:var(--red)}
.service-card:nth-child(4) .service-card__tag svg{color:var(--yellow-dark)}
.service-card:nth-child(5) .service-card__tag svg{color:var(--red)}

.service-card__body{
  padding: 26px 26px 28px;
  flex: 1;
  display:flex;flex-direction:column;
}
.service-card__title{
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.service-card__desc{
  font-size: 14.5px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 18px;
}
.service-card__features{
  list-style:none;
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}
.service-card__features li{
  display:flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--gray-700);
  align-items: baseline;
  font-weight: 500;
}
.service-card__features li::before{
  content:"";
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 0;
  flex-shrink:0;
  transform: translateY(-2px);
}
.service-card:nth-child(2) .service-card__features li::before{background:var(--yellow-dark)}
.service-card:nth-child(3) .service-card__features li::before{background:var(--red)}
.service-card:nth-child(4) .service-card__features li::before{background:var(--yellow-dark)}
.service-card:nth-child(5) .service-card__features li::before{background:var(--red)}

.service-card__link{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
  align-self: flex-start;
  transition: color var(--transition), gap var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.service-card__link svg{
  width:14px;height:14px;
  transition: transform var(--transition);
}
.service-card__link:hover{color:var(--red);gap: 12px}
.service-card__link:hover svg{transform: translateX(3px)}

@media (max-width: 1000px){
  .service-card,.service-card--wide{grid-column: span 6}
}
@media (max-width: 620px){
  .service-card,.service-card--wide{grid-column: span 12}
}

/* ============================================
   ABOUT / GRUPO MULTISERVICE
============================================ */
.about__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.about__visual{position: relative}
.about__visual-main{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.about__visual-main img{
  width:100%;height:100%;object-fit:cover;
}
.about__visual-badge{
  position: absolute;
  bottom: -28px;
  right: -28px;
  background: var(--red);
  color: #fff;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 240px;
}
.about__visual-badge .num{
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  display:flex;
  align-items: baseline;
}
.about__visual-badge .num span{
  font-size: 20px;
  margin-left: 6px;
  font-weight: 700;
}
.about__visual-badge .txt{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 8px;
  opacity: .95;
}
.about__visual-deco{
  position: absolute;
  top: -20px;
  left: -20px;
  width: 60%;
  height: 30%;
  background: var(--yellow);
  z-index: -1;
}

.about__copy h2{margin-bottom: 22px}
.about__brand-logo{
  height: 64px;
  width: auto;
  margin-bottom: 24px;
}
.about__copy p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 18px;
}
.about__list{
  list-style:none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin: 28px 0;
}
.about__list li{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.about__list svg{
  flex-shrink:0;
  color: var(--red);
}
.about__list li:nth-child(2) svg{color:var(--yellow-dark)}
.about__list li:nth-child(3) svg{color:var(--red)}
.about__list li:nth-child(4) svg{color:var(--yellow-dark)}

@media (max-width: 960px){
  .about__grid{grid-template-columns: 1fr;gap: 60px}
  .about__visual{max-width: 480px;margin: 0 auto}
}

/* ============================================
   PROCESS / CÓMO TRABAJAMOS
============================================ */
.process__steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
  position: relative;
}
.process__step{
  padding: 0 20px;
  position: relative;
  counter-increment: step;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.process__step:first-child{border-left:none;padding-left:0}
.process__step-num{
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  display: block;
}
.process__step:nth-child(2) .process__step-num{color: var(--red)}
.process__step:nth-child(3) .process__step-num{color: var(--yellow)}
.process__step:nth-child(4) .process__step-num{color: var(--red)}
.process__step:nth-child(5) .process__step-num{color: var(--yellow)}
.process__step h4{
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.process__step p{
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
}
@media (max-width: 880px){
  .process__steps{grid-template-columns: repeat(2, 1fr); gap: 40px 16px}
  .process__step{border-left:none;padding:0}
}
@media (max-width: 480px){
  .process__steps{grid-template-columns: 1fr}
}

/* ============================================
   SPOTLIGHT
============================================ */
.spotlight__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}
.spotlight__row:last-child{margin-bottom: 0}
.spotlight__row--reverse .spotlight__media{order: 2}
.spotlight__media{
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.spotlight__media img{
  width:100%;height:100%;
  object-fit: cover;
}
.spotlight__media-tag{
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--ink);
  color:#fff;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spotlight__copy h3{
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  margin: 18px 0 18px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.spotlight__copy p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 24px;
}
.spotlight__list{
  list-style: none;
  display:grid;
  gap: 14px;
  margin-bottom: 32px;
}
.spotlight__list li{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}
.spotlight__list svg{
  flex-shrink:0;
  color: var(--red);
  margin-top: 4px;
}
@media (max-width: 900px){
  .spotlight__row,.spotlight__row--reverse{grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px}
  .spotlight__row--reverse .spotlight__media{order: 0}
}

/* ============================================
   COVERAGE
============================================ */
.coverage{background: var(--ink); color:#fff; position: relative; overflow:hidden}
.coverage__grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.coverage__copy h2{color:#fff;margin-bottom: 20px}
.coverage__copy .lead{color:rgba(255,255,255,0.78);margin-bottom: 32px}
.coverage__cities{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 30px 0;
}
.coverage__city{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 14.5px;
  font-weight: 600;
  transition: all var(--transition);
}
.coverage__city:hover{
  background: rgba(255,255,255,0.08);
  border-color: var(--yellow);
  transform: translateX(3px);
}
.coverage__city svg{color: var(--yellow); flex-shrink:0}
.coverage__city.preferent{
  background: var(--red);
  border-color: var(--red);
}
.coverage__city.preferent svg{color:#fff}
.coverage__note{
  font-size: 13.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
}
.coverage__map{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--graphite);
  border: 1px solid rgba(255,255,255,0.1);
}
.coverage__map-iframe{
  width:100%;height:100%;
  border:0;
  filter: invert(0.92) hue-rotate(180deg) contrast(0.85) saturate(0.4);
}
.coverage__map-overlay{
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--ink);
  border: 2px solid var(--yellow);
  padding: 16px 20px;
  max-width: 240px;
  z-index: 2;
  pointer-events: none;
}
.coverage__map-overlay strong{
  display:block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.coverage__map-overlay span{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 900px){
  .coverage__grid{grid-template-columns: 1fr;gap: 50px}
}

/* ============================================
   REVIEWS
============================================ */
.reviews__top{
  display:flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
  gap: 40px;
  flex-wrap: wrap;
}
.reviews__top h2{max-width: 480px}
.reviews__rating{
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  padding: 22px 28px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
}
.reviews__rating-num{
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.reviews__rating-stars{
  display:flex;
  gap: 3px;
  margin-bottom: 6px;
}
.reviews__rating-stars svg{color: var(--yellow); width: 16px; height: 16px}
.reviews__rating-info{font-size: 12px; color: var(--gray-500); font-weight: 500}
.reviews__rating-info strong{color: var(--ink); font-weight: 700; display:block}

.reviews__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.review-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.review-card:hover{
  border-color: var(--red);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.review-card__stars{
  display:flex;gap:2px;margin-bottom: 16px;
}
.review-card__stars svg{color: var(--yellow); width: 14px; height: 14px}
.review-card__text{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 500;
  flex: 1;
}
.review-card__author{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
  margin-top: auto;
}
.review-card__avatar{
  width: 40px;height: 40px;
  background: var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family: var(--sans);
  font-weight: 800;
  color: var(--yellow);
  font-size: 16px;
  flex-shrink:0;
}
.review-card:nth-child(2) .review-card__avatar{background:var(--red);color:#fff}
.review-card:nth-child(3) .review-card__avatar{background:var(--yellow);color:var(--ink)}
.review-card:nth-child(4) .review-card__avatar{background:var(--ink);color:var(--yellow)}
.review-card__name{
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.review-card__loc{
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}
.reviews__cta{
  text-align:center;
  margin-top: 50px;
}
@media (max-width: 1000px){
  .reviews__grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 540px){
  .reviews__grid{grid-template-columns: 1fr}
  .reviews__rating{padding: 18px 22px}
}

/* ============================================
   BLOG PREVIEW
============================================ */
.blog__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card{
  background: #fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  display:flex;flex-direction:column;
}
.blog-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}
.blog-card__media{
  aspect-ratio: 16 / 10;
  overflow:hidden;
  position: relative;
  display: block;
}
.blog-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover .blog-card__media img{transform: scale(1.05)}
.blog-card__cat{
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.blog-card:nth-child(2) .blog-card__cat{background:var(--ink)}
.blog-card:nth-child(3) .blog-card__cat{background:var(--yellow);color:var(--ink)}
.blog-card__body{
  padding: 24px 24px 26px;
  flex:1;
  display:flex;flex-direction:column;
}
.blog-card__meta{
  font-size: 11.5px;
  color: var(--gray-500);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.blog-card__title{
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.blog-card__excerpt{
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 18px;
}
.blog-card__link{
  margin-top: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--red);
  display:inline-flex;
  align-items:center;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-card__link svg{transition: transform var(--transition)}
.blog-card__link:hover svg{transform: translateX(4px)}
.blog__cta{text-align:center;margin-top: 50px}
@media (max-width: 900px){.blog__grid{grid-template-columns: 1fr 1fr}}
@media (max-width: 600px){.blog__grid{grid-template-columns: 1fr}}

/* ============================================
   LOCALES / TIENDAS
============================================ */
.locales__bar{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}
.locales__filter{
  display:flex;
  align-items:center;
  gap: 12px;
}
.locales__filter label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.locales__filter select{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 40px 12px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
.locales__filter select:focus{outline:none;border-color: var(--red)}
.locales__count{
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
}
.locales__count span{color: var(--red); font-weight: 800}

.locales__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.locale-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  display:flex;
  flex-direction: column;
  transition: all var(--transition);
}
.locale-card:hover{
  border-color: var(--gray-300);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.locale-card__top{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.locale-card__comuna{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.locale-card__status{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.locale-card__status .dot{width:7px;height:7px;border-radius:50%}
.locale-card__status.open{background: #E9F7EE; color: #157F3D}
.locale-card__status.open .dot{background:#1FA34A}
.locale-card__status.closed{background: var(--gray-100); color: var(--gray-500)}
.locale-card__status.closed .dot{background: var(--gray-400)}
.locale-card__name{
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.locale-card__info{
  display:grid;
  gap: 10px;
  margin-bottom: 20px;
  flex: 1;
}
.locale-card__row{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.4;
}
.locale-card__row svg{flex-shrink:0; color: var(--gray-400); margin-top: 2px}
.locale-card__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.locale-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 7px;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.locale-btn svg{width:15px;height:15px;flex-shrink:0}
.locale-btn--route{background: var(--ink); color:#fff}
.locale-btn--route:hover{background: var(--graphite)}
.locale-btn--call{background: #fff; color: var(--ink); border: 1.5px solid var(--gray-300)}
.locale-btn--call:hover{border-color: var(--red); color: var(--red)}
@media (max-width: 1000px){
  .locales__grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 620px){
  .locales__grid{grid-template-columns: 1fr}
}

/* ============================================
   FINAL CTA — red with yellow accents
============================================ */
.cta-final{
  background: var(--red);
  padding: 100px 0;
  color:#fff;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.cta-final::before{
  content:"";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--yellow);
}
.cta-final__inner{position: relative; z-index: 2; max-width: 740px; margin: 0 auto}
.cta-final h2{
  color: #fff;
  font-size: clamp(34px, 4.4vw, 52px);
  margin-bottom: 18px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.cta-final h2 span{color: var(--yellow)}
.cta-final p{
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 36px;
  color: rgba(255,255,255,0.95);
  font-weight: 400;
}
.cta-final__btns{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-final .btn--yellow:hover{background:var(--ink);color:#fff}
.cta-final .btn--ghost{
  border-color: rgba(255,255,255,0.5);
}
.cta-final .btn--ghost:hover{background:#fff;color:var(--red);border-color:#fff}

/* ============================================
   FOOTER
============================================ */
.footer{
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  padding: 80px 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}
.footer__logo img{
  height: 160px;
  width:auto;
  margin-bottom: 24px;
  margin-left: -8px;
}
.footer__about{
  font-size: 14px;
  line-height: 1.65;
  max-width: 380px;
  margin-bottom: 24px;
}
.footer__about strong{color:#fff;font-weight:700}
.footer__socials{
  display:flex;
  gap: 10px;
}
.footer__socials a{
  width: 38px;height: 38px;
  display:flex;align-items:center;justify-content:center;
  border: 1px solid rgba(255,255,255,0.15);
  transition: all var(--transition);
}
.footer__socials a:hover{
  background: var(--red);
  border-color: var(--red);
  color:#fff;
}
.footer__title{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__list{
  list-style: none;
  display:grid;
  gap: 10px;
}
.footer__list a{
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
  font-weight: 500;
}
.footer__list a:hover{color: var(--yellow)}
.footer__contact{display:grid;gap: 14px}
.footer__contact-item{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
}
.footer__contact-item svg{
  color: var(--yellow);
  flex-shrink:0;
  margin-top: 3px;
}
.footer__contact-item strong{display:block;color:#fff;font-weight: 700;margin-bottom: 2px}
.footer__contact-item a{color: rgba(255,255,255,0.85)}

.footer__bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0;
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 14px;
}
.footer__bottom a{color: rgba(255,255,255,0.7); transition: color var(--transition)}
.footer__bottom a:hover{color: var(--yellow)}
.footer__bottom-right{display:flex;gap: 20px}

@media (max-width: 900px){
  .footer__grid{grid-template-columns: 1fr 1fr;gap: 40px}
}
@media (max-width: 540px){
  .footer__grid{grid-template-columns: 1fr}
  .footer__bottom{justify-content:center;text-align:center}
}

/* ============================================
   FLOATING WHATSAPP
============================================ */
.fab-wa{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 62px;height: 62px;
  background: #25D366;
  border-radius: 50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 10px 30px rgba(37,211,102,0.45);
  z-index: 200;
  transition: transform var(--transition);
}
.fab-wa::before{
  content:"";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(37,211,102,0.4);
  z-index: -1;
  animation: wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform: scale(1); opacity:0.6}
  100%{transform: scale(1.4); opacity:0}
}
.fab-wa:hover{transform: scale(1.08)}
.fab-wa svg{width: 30px; height: 30px; color:#fff}
.fab-wa__label{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  letter-spacing: 0.02em;
}
.fab-wa__label::after{
  content:"";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;height: 10px;
  background: var(--ink);
}
.fab-wa:hover .fab-wa__label{opacity:1; transform: translateY(-50%) translateX(-4px)}
@media (max-width: 560px){
  .fab-wa{width: 58px;height: 58px;bottom: 18px;right: 18px}
  .fab-wa svg{width: 28px;height: 28px}
}

/* ============================================
   REVEAL ANIMATION
============================================ */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1{transition-delay: 100ms}
.reveal--delay-2{transition-delay: 200ms}
.reveal--delay-3{transition-delay: 300ms}

/* ===== SERVICE PAGE ===== */
.shero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.shero__bar{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--red) 0,var(--red) 50%,var(--yellow) 50%,var(--yellow) 100%);z-index:3}
.shero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding:80px 0}
.shero__breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:24px}
.shero__breadcrumb a{color:rgba(255,255,255,.5);transition:color var(--transition)}
.shero__breadcrumb a:hover{color:var(--yellow)}
.shero__breadcrumb svg{width:13px;height:13px;opacity:.5}
.shero h1{font-size:clamp(36px,4.8vw,60px);font-weight:900;line-height:1.02;letter-spacing:-.035em;color:#fff;margin-bottom:18px}
.shero h1 span{color:var(--yellow)}
.shero__lead{font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:28px;max-width:560px}
.shero__comunas{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,.8);margin-bottom:26px;line-height:1.5}
.shero__comunas svg{color:var(--red);flex-shrink:0;margin-top:3px}
.shero__check{list-style:none;display:grid;gap:11px;margin-bottom:32px}
.shero__check li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500;color:#fff}
.shero__check svg{color:var(--yellow);flex-shrink:0}
.shero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.shero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.shero__media img{width:100%;height:100%;object-fit:cover}
.shero__media-deco{position:absolute;top:-18px;right:-18px;width:120px;height:120px;background:var(--yellow);z-index:-1}
@media(max-width:900px){.shero__grid{grid-template-columns:1fr;gap:44px;padding:60px 0}.shero__media{order:-1}}

/* detail blocks */
.sdetail__row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:90px}
.sdetail__row:last-child{margin-bottom:0}
.sdetail__row--reverse .sdetail__media{order:2}
.sdetail__media{position:relative;aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.sdetail__media img{width:100%;height:100%;object-fit:cover}
.sdetail__copy h3{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.025em;margin:16px 0 16px;line-height:1.12}
.sdetail__copy p{font-size:16px;line-height:1.7;color:var(--gray-700);margin-bottom:22px}
.sdetail__list{list-style:none;display:grid;gap:13px;margin-bottom:28px}
.sdetail__list li{display:flex;align-items:flex-start;gap:13px;font-size:15px;font-weight:500;line-height:1.45}
.sdetail__list svg{flex-shrink:0;color:var(--red);margin-top:3px}
.sdetail__tail{font-size:15px;font-weight:700;color:var(--ink)}
@media(max-width:900px){.sdetail__row,.sdetail__row--reverse{grid-template-columns:1fr;gap:36px;margin-bottom:56px}.sdetail__row--reverse .sdetail__media{order:0}}

/* before / after */
.beforeafter{background:var(--ink);color:#fff}
.beforeafter__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.beforeafter__img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.beforeafter__img img{width:100%;display:block}
.beforeafter__img .tag{position:absolute;top:16px;left:16px;background:var(--yellow);color:var(--ink);padding:7px 14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.beforeafter__copy h2{color:#fff;margin-bottom:18px}
.beforeafter__copy p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:24px}
@media(max-width:820px){.beforeafter__grid{grid-template-columns:1fr;gap:36px}}

/* comparison table */
.compare{max-width:920px;margin:0 auto}
.compare__table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden}
.compare__table th,.compare__table td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--gray-100)}
.compare__table thead th{background:var(--ink);color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}
.compare__table thead th:first-child{background:var(--graphite)}
.compare__table thead th.hi{background:var(--red)}
.compare__table tbody td:first-child{font-weight:700;color:var(--ink)}
.compare__table tbody td{color:var(--gray-700)}
.compare__table tbody tr:last-child td{border-bottom:none}
.compare__table td.good{color:var(--ink);font-weight:600}
.compare__table .ic{display:inline-flex;align-items:center;gap:7px}
.compare__table .ic svg{flex-shrink:0}
.ic-no svg{color:var(--gray-400)}
.ic-yes svg{color:var(--red)}
@media(max-width:640px){.compare__table th,.compare__table td{padding:12px 12px;font-size:13px}}

/* gallery */
.sgallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sgallery__grid.cols3{grid-template-columns:repeat(3,1fr)}
.sgallery__item{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.sgallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.4,0,.2,1)}
.sgallery__item:hover img{transform:scale(1.06)}
@media(max-width:900px){.sgallery__grid,.sgallery__grid.cols3{grid-template-columns:repeat(2,1fr)}}

/* why choose strip */
.swhy__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.swhy__item{text-align:center;padding:8px}
.swhy__item .ico{width:60px;height:60px;margin:0 auto 18px;border:2px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--red)}
.swhy__item h4{font-size:16px;margin-bottom:8px}
.swhy__item p{font-size:13.5px;color:var(--gray-500);line-height:1.5}
@media(max-width:780px){.swhy__grid{grid-template-columns:1fr 1fr;gap:32px 16px}}

.nav__link.active{color:var(--red)}.nav__link.active::after{transform:scaleX(1)}

/* ============================================
   REELS — vertical video strip + lightbox
============================================ */
.reels{padding:100px 0;background:var(--white)}
.reels__strip{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.reel{flex:0 0 calc(20% - 13px);max-width:240px;aspect-ratio:9/16;position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:var(--ink);transition:transform var(--transition),box-shadow var(--transition)}
.reel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel__cat{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:2px;z-index:3;pointer-events:none}
.reel__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 40%,rgba(0,0,0,.65) 100%);transition:background var(--transition);z-index:2;pointer-events:none}
.reel:hover .reel__overlay{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 40%,rgba(0,0,0,.7) 100%)}
.reel__play{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;transform:scale(.92);transition:transform var(--transition)}
.reel:hover .reel__play{transform:scale(1.05)}
.reel__play svg{color:var(--red);width:22px;height:22px;margin-left:3px}
.reel__mute{position:absolute;bottom:12px;right:12px;width:30px;height:30px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:3;pointer-events:none}
.reel__mute svg{width:14px;height:14px}
@media(max-width:1000px){.reel{flex-basis:calc(33.333% - 11px)}}
@media(max-width:700px){.reel{flex-basis:calc(50% - 8px);max-width:none}}
@media(max-width:420px){.reel{flex-basis:100%;max-width:300px}}

/* reels lightbox modal — bigger, better */
.reel-modal{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reel-modal.open{display:flex}
.reel-modal__close{position:absolute;top:24px;right:24px;width:52px;height:52px;background:rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:10001;transition:background var(--transition);cursor:pointer;border:none}
.reel-modal__close:hover{background:rgba(255,255,255,.22)}
.reel-modal__close svg{width:24px;height:24px}
.reel-modal__content{width:auto;height:88vh;max-height:900px;aspect-ratio:9/16;background:#000;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:calc(88vh * 9 / 16)}
.reel-modal__content video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
@media(max-width:560px){.reel-modal{padding:0}.reel-modal__content{width:100%;height:100vh;max-height:none;max-width:none;border-radius:0;aspect-ratio:auto}.reel-modal__close{top:14px;right:14px;width:44px;height:44px;background:rgba(0,0,0,.55)}.reel-modal__close svg{width:22px;height:22px}}


/* topbar logo */
.topbar__logo{display:inline-flex;align-items:center;height:22px}
.topbar__logo img{height:22px;width:auto;filter:brightness(1.1)}
@media (max-width: 860px){.topbar__logo{display:none}}

/* nav bigger logo + tighter padding */
.nav__inner{height:140px !important}
.nav__logo img{height:172px !important;margin-left:-8px}
.nav__link{font-size:15px !important;font-weight:600;padding:10px 13px !important}
@media(max-width:1180px){
  .nav__inner{height:90px !important}
  .nav__logo img{height:96px !important}
  .nav__link{font-size:15px !important;padding:14px 16px !important}
}
@media(max-width:560px){
  .nav__inner{height:78px !important}
  .nav__logo img{height:80px !important}
}

/* about logo */
.about__brand-logo{height:80px !important;width:auto !important;margin-bottom:24px !important}

/* brandstrip logo */
.brandstrip__logo img{height:78px;width:auto}

/* CHIP GRID (services list with icons) */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.chip{display:flex;align-items:center;gap:12px;padding:18px 18px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink);transition:all var(--transition)}
.chip:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.chip__ico{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip__ico svg{width:18px;height:18px}
@media(max-width:880px){.chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.chips{grid-template-columns:1fr}}

/* MARKS BLOCK — high security brands */
.marks{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.marks__copy h2{margin-bottom:18px}
.marks__copy > p{font-size:16px;line-height:1.7;color:var(--gray-700);margin-bottom:16px}
.marks__list{list-style:none;display:grid;gap:14px;margin:24px 0}
.marks__list li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.45;font-weight:500}
.marks__list svg{flex-shrink:0;color:var(--red);margin-top:4px}
.marks__list strong{color:var(--ink);font-weight:700}
.marks__tail{font-size:18px;font-weight:700;color:var(--ink);margin-top:6px}
.marks__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:5/4}
.marks__media img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.marks{grid-template-columns:1fr;gap:40px}}

/* FAQ */
.faq{max-width:920px;margin:0 auto}
.faq__item{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden;transition:all var(--transition)}
.faq__item:hover{border-color:var(--gray-300)}
.faq__item[open]{border-color:var(--red);box-shadow:var(--shadow-sm)}
.faq__q{padding:20px 26px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.01em;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font-size:24px;font-weight:400;color:var(--red);line-height:1;transition:transform var(--transition)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 26px 22px;font-size:15px;line-height:1.65;color:var(--gray-700)}
.faq__a strong{color:var(--ink);font-weight:700}
.faq__a ul{list-style:none;margin:10px 0;display:grid;gap:6px}
.faq__a ul li{display:flex;gap:8px;align-items:baseline}
.faq__a ul li::before{content:"✓";color:var(--red);font-weight:800;flex-shrink:0}
@media(max-width:600px){.faq__q{padding:16px 18px;font-size:15px}.faq__a{padding:0 18px 18px;font-size:14.5px}}

/* TIENDAS GALLERY */
.tiendas-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.tiendas-gal__item{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink)}
.tiendas-gal__item img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.4,0,.2,1)}
.tiendas-gal__item:hover img{transform:scale(1.06)}
@media(max-width:780px){.tiendas-gal{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tiendas-gal{grid-template-columns:1fr}}

/* tiendas perks (what you find in stores) */
.tiendas-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0 0}
.tiendas-perk{padding:18px 20px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink)}
.tiendas-perk svg{color:var(--red);flex-shrink:0}
@media(max-width:780px){.tiendas-perks{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tiendas-perks{grid-template-columns:1fr}}

/* BIG BRANDS BANNER */
.brandsbanner{aspect-ratio:16/9;max-height:540px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink);margin:0 auto;max-width:1000px}
.brandsbanner img{width:100%;height:100%;object-fit:contain;background:#0a1729}

/* footer extra: contact split */
.footer__contact-split h5{font-family:var(--sans);font-size:11.5px;font-weight:800;color:var(--yellow);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px}
.footer__contact-split h5:first-child{margin-top:0}


/* HERO — left aligned, small margin from left edge, responsive */
.hero .container.hero__inner{
  max-width: 100% !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  margin: 0 !important;
}
.hero__inner{max-width: 920px !important; text-align: left !important}
.hero__inner h1, .hero__inner p, .hero__inner .hero__sub{text-align: left !important}
.hero__ctas{justify-content: flex-start !important}
@media (max-width: 1000px){
  .hero .container.hero__inner{padding-left: 40px !important; padding-right: 40px !important}
}
@media (max-width: 560px){
  .hero .container.hero__inner{padding-left: 20px !important; padding-right: 20px !important}
}

/* SERVICE PAGE HERO (shero) — left aligned similarly */
.shero .container.shero__grid{
  max-width: 100% !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  margin: 0 !important;
}
@media (max-width: 1000px){
  .shero .container.shero__grid{padding-left: 40px !important; padding-right: 40px !important}
}
@media (max-width: 560px){
  .shero .container.shero__grid{padding-left: 20px !important; padding-right: 20px !important}
}

/* LOCALES HERO */
.locales-hero > .container{
  max-width: 100% !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  margin: 0 !important;
}
@media (max-width: 1000px){
  .locales-hero > .container{padding-left: 40px !important; padding-right: 40px !important}
}
@media (max-width: 560px){
  .locales-hero > .container{padding-left: 20px !important; padding-right: 20px !important}
}


/* ============================================
   SERVICE CARDS — image + title + description
============================================ */
.svc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;border-bottom:3px solid var(--red);display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.svc-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.svc-card__body{padding:20px 18px 24px;text-align:center;display:flex;flex-direction:column;gap:10px}
.svc-card__body h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.svc-card__body p{font-size:13.5px;color:var(--gray-600);line-height:1.55}
@media(max-width:1000px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.svc-cards{grid-template-columns:1fr;max-width:340px;margin:0 auto}}


/* ============================================
   GALLERY LIGHTBOX — zoom + prev/next nav
============================================ */
.glb{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:10000;display:none;align-items:center;justify-content:center;animation:fadeIn .22s ease}
.glb.open{display:flex}
.glb__img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.6);user-select:none}
.glb__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .2s ease;z-index:10002}
.glb__btn:hover{background:var(--red)}
.glb__btn svg{width:24px;height:24px}
.glb__prev{left:22px}
.glb__next{right:22px}
.glb__close{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .2s ease;z-index:10002}
.glb__close:hover{background:var(--red)}
.glb__close svg{width:22px;height:22px}
.glb__count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:13.5px;font-weight:700;letter-spacing:.06em;z-index:10002}
.sgallery__item{cursor:pointer}
.sgallery__item:hover img{opacity:.88}
@media(max-width:640px){
  .glb__btn{width:42px;height:42px}
  .glb__prev{left:10px}
  .glb__next{right:10px}
  .glb__close{top:14px;right:14px;width:40px;height:40px}
}


/* sección ABUS */
.abus__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.abus__visual img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--gray-200);display:block}
@media(max-width:900px){.abus__grid{grid-template-columns:1fr;gap:36px}}


.shero__cobertura{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.78);margin:10px 0 20px}