/* =====================================================================
   TENIS Y BRILLO — Index (sitio público)
   Archivo: /CSS/Index.css
   Depende de: variables.css (cargar antes que este archivo)
   Nota: esta página NO usa Shell.css — es el sitio público, no el ERP,
   así que tiene su propia navegación y no lleva sidebar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens propios de esta página (derivados de variables.css)
--------------------------------------------------------------------- */
:root{
  --hero-ink:      #0A0E17;
  --hero-ink-2:    #10151F;
  --hero-glow-a:   rgba(37, 99, 235, 0.55);
  --hero-glow-b:   rgba(20, 184, 166, 0.45);
  --on-ink:        #F4F6FA;
  --on-ink-dim:    #9AA4B8;
  --max-w: 1180px;
}

body{ background: var(--surface-0); overflow-x: hidden; }

.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }

section{ position: relative; }

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Navegación pública
--------------------------------------------------------------------- */
.pub-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--sp-4) 0;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.pub-nav.is-scrolled{
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) 0;
}
.pub-nav__inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}
.pub-nav__brand{ display:flex; align-items:center; gap: var(--sp-2); margin-right: auto; }
.pub-nav__brand-mark{
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
}
.pub-nav__brand-mark svg{ width: 17px; height: 17px; }
.pub-nav__brand-text{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--on-ink); letter-spacing: -0.01em;
}
.pub-nav.is-scrolled .pub-nav__brand-text{ color: var(--text-primary); }
.pub-nav__brand-text span{ color: var(--brand-teal); }

.pub-nav__links{ display:flex; align-items:center; gap: var(--sp-6); }
.pub-nav__links a{
  font-size: var(--fs-sm); font-weight: 600; color: var(--on-ink-dim);
  transition: color var(--dur-fast) var(--ease-out);
}
.pub-nav__links a:hover{ color: var(--on-ink); }
.pub-nav.is-scrolled .pub-nav__links a{ color: var(--text-secondary); }
.pub-nav.is-scrolled .pub-nav__links a:hover{ color: var(--text-primary); }

.pub-btn{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.pub-btn svg{ width: 14px; height: 14px; }
.pub-btn--primary{
  background: var(--brand-green);
  color: #062A20;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.pub-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 185, 129, 0.45); }
.pub-btn--ghost{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--on-ink);
  backdrop-filter: blur(6px);
}
.pub-btn--ghost:hover{ background: rgba(255,255,255,0.16); }
.pub-nav.is-scrolled .pub-btn--ghost{
  background: var(--surface-2); border-color: var(--border-soft); color: var(--text-primary);
}

.pub-nav__mobile-btn{ display:none; }

/* ---------------------------------------------------------------------
   Selector de sede (nav)
--------------------------------------------------------------------- */
.pub-nav__sede{
  display:flex; align-items:center; gap: 6px;
  padding: 0 var(--sp-3) 0 var(--sp-2);
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--on-ink);
}
.pub-nav.is-scrolled .pub-nav__sede{ border-color: var(--border-soft); background: var(--surface-1); color: var(--text-primary); }
.pub-nav__sede svg{ width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.pub-nav__sede select{
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  color: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  padding-right: var(--sp-1);
}
.pub-nav__sede select option{ color: #111; }

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hero{
  padding: 89px 0 96px;
  background:
    radial-gradient(560px 420px at 12% 0%, var(--hero-glow-a), transparent 60%),
    radial-gradient(620px 480px at 88% 20%, var(--hero-glow-b), transparent 60%),
    linear-gradient(180deg, var(--hero-ink) 0%, var(--hero-ink-2) 100%);
  color: var(--on-ink);
  overflow: hidden;
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-9);
  align-items: center;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
  color: #BFE7DF;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.35);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-5);
}
.hero__eyebrow svg{ width: 13px; height: 13px; }
.hero h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-5);
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(100deg, #67E8F9, var(--brand-teal) 45%, var(--brand-green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead{
  font-size: var(--fs-lg);
  color: var(--on-ink-dim);
  max-width: 480px;
  margin: 0 0 var(--sp-7);
  line-height: 1.6;
}
.hero__ctas{ display:flex; gap: var(--sp-3); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.hero__ctas .pub-btn{ padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }

.hero__stats{ display:flex; gap: var(--sp-8); flex-wrap: wrap; }
.hero__stat b{
  display:block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xl); color: var(--on-ink); letter-spacing: -0.02em;
}
.hero__stat span{ font-size: var(--fs-xs); color: var(--on-ink-dim); }

/* ---- Elemento firma: comparador antes / después ---- */
.compare{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  background: linear-gradient(155deg, #151B29, #0D1119);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-lg);
  user-select: none;
  -webkit-user-select: none;
}
.compare__layer{
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  padding: 8%;
}
.compare__layer svg{ width: 100%; height: 100%; }
.compare__after{ clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0); }
.compare__tag{
  position:absolute; top: 18px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}
.compare__tag--before{ left: 18px; background: rgba(148,163,184,0.18); color: #CBD5E1; border: 1px solid rgba(203,213,225,0.25); }
.compare__tag--after{ right: 18px; background: rgba(16,185,129,0.18); color: #86EFCC; border: 1px solid rgba(16,185,129,0.35); }

.compare__handle-input{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize; z-index: 5;
}
.compare__handle-input::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 0; height: 100%;
}
.compare__handle-input::-moz-range-thumb{ width: 0; height: 100%; border: 0; }
.compare__handle-input::-webkit-slider-runnable-track{ background: transparent; }

.compare__divider{
  position: absolute; top: 0; bottom: 0;
  left: var(--reveal, 50%);
  width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, #fff, var(--brand-teal));
  box-shadow: 0 0 16px rgba(20,184,166,0.6);
  pointer-events: none;
}
.compare__grip{
  position: absolute; top: 50%; left: var(--reveal, 50%);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.compare__grip svg{ width: 18px; height: 18px; color: var(--hero-ink); }

.compare__caption{
  text-align:center; font-size: var(--fs-xs); color: var(--on-ink-dim);
  margin-top: var(--sp-3);
}
.compare__caption b{ color: var(--on-ink); }

/* ---------------------------------------------------------------------
   Barra de confianza
--------------------------------------------------------------------- */
.trust{
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--sp-5) 0;
}
.trust__row{
  display:flex; align-items:center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
}
.trust__item{ display:flex; align-items:center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; }
.trust__item svg{ width: 16px; height: 16px; color: var(--brand-green); }

/* ---------------------------------------------------------------------
   Encabezados de sección
--------------------------------------------------------------------- */
.sec-head{ max-width: 620px; margin: 0 auto var(--sp-8); text-align:center; }
.sec-head .kicker{
  display:block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-teal-dark); margin-bottom: var(--sp-3);
}
.sec-head h2{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl);
  letter-spacing: -0.02em; margin: 0 0 var(--sp-3); color: var(--text-primary);
}
.sec-head p{ font-size: var(--fs-md); color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Cómo funciona
--------------------------------------------------------------------- */
.steps{ padding: 104px 0; background: var(--surface-1); }
.steps__row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
  position: relative;
}
.steps__row::before{
  content:'';
  position:absolute; top: 26px; left: 12.5%; right: 12.5%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
}
.step{ position: relative; text-align: left; }
.step__num{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-0);
  border: 2px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: var(--brand-blue-dark);
  margin-bottom: var(--sp-4);
  position: relative; z-index: 2;
}
.step:nth-child(1) .step__num{ border-color: var(--brand-blue); }
.step:nth-child(2) .step__num{ border-color: var(--brand-teal); color: var(--brand-teal-dark); }
.step:nth-child(3) .step__num{ border-color: var(--brand-green); color: var(--brand-green-dark); }
.step:nth-child(4) .step__num{ border-color: var(--brand-blue); }
.step h3{ font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.step p{ font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------------------
   Servicios — tarjetas con panel de color + producto flotante
--------------------------------------------------------------------- */
.services{ padding: 104px 0; background: var(--hero-ink); }
.services .sec-head .kicker{ color: #86EFCC; }
.services .sec-head h2{ color: var(--on-ink); }
.services .sec-head p{ color: var(--on-ink-dim); }

.services__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.svc-tile{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-0);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.svc-tile:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.svc-tile__top{
  position: relative;
  height: 168px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.svc-tile__top svg{
  width: 108px; height: 108px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.28));
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-tile__top img{
  max-width: 82%; max-height: 82%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.35));
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-tile:hover .svc-tile__top img{ transform: scale(1.06); }
.svc-tile:hover .svc-tile__top svg{ transform: scale(1.06) rotate(0deg) !important; }

.svc-tile__top--blue{ background: var(--brand-blue); }
.svc-tile__top--teal{ background: var(--brand-teal); }
.svc-tile__top--green{ background: var(--brand-green); }

.svc-tile__body{ padding: var(--sp-5); }
.svc-tile__title{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 3px;
  text-transform: uppercase;
}
.svc-tile__subtitle{
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--sp-4);
}
.svc-tile__price{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  color: var(--text-primary); letter-spacing: -0.02em;
}
.svc-tile__price span{ font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--text-tertiary); }
.svc-tile__combo{ font-size: var(--fs-2xs); font-weight: 700; color: var(--text-secondary); margin-top: var(--sp-2); }
.svc-tile__combo b{ color: var(--brand-green-dark); }

/* ---------------------------------------------------------------------
   Rastreo de pedido
--------------------------------------------------------------------- */
.tracking{
  padding: 96px 0;
  background: linear-gradient(155deg, var(--hero-ink), #121826);
  color: var(--on-ink);
}
.tracking__grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-9); align-items:center; }
.tracking h2{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  letter-spacing: -0.02em; margin: 0 0 var(--sp-4);
}
.tracking p{ color: var(--on-ink-dim); font-size: var(--fs-md); line-height: 1.6; margin: 0 0 var(--sp-6); max-width: 420px; }
.tracking__form{ display:flex; gap: var(--sp-3); max-width: 420px; }
.tracking__form input{
  flex: 1; height: 52px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--on-ink); padding: 0 var(--sp-4); font-size: var(--fs-sm);
  outline: none;
}
.tracking__form input::placeholder{ color: var(--on-ink-dim); }
.tracking__form input:focus{ border-color: var(--brand-teal); background: rgba(255,255,255,0.1); }
.tracking__hint{ margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--on-ink-dim); }

.track-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  backdrop-filter: blur(10px);
}
.track-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-5); }
.track-card__order{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--on-ink); font-weight: 600; }
.track-card__status{
  font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--brand-teal-light); color: var(--brand-teal-dark);
  padding: 4px 10px; border-radius: var(--radius-full);
}
.tl{ display:flex; flex-direction: column; }
.tl-item{ display:flex; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-6); }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{
  content:''; position:absolute; left: 11px; top: 26px; bottom: 0; width: 2px;
  background: rgba(255,255,255,0.14);
}
.tl-item:last-child::before{ display:none; }
.tl-item__dot{
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18);
  z-index: 1;
}
.tl-item.is-done .tl-item__dot{ background: var(--brand-green); border-color: var(--brand-green); }
.tl-item.is-done .tl-item__dot svg{ width: 12px; height: 12px; color: #062A20; }
.tl-item.is-current .tl-item__dot{ border-color: var(--brand-teal); box-shadow: 0 0 0 4px rgba(20,184,166,0.2); }
.tl-item.is-current .tl-item__dot::after{ content:''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); }
.tl-item__title{ font-size: var(--fs-sm); font-weight: 700; color: var(--on-ink); }
.tl-item.is-pending .tl-item__title{ color: var(--on-ink-dim); font-weight: 600; }
.tl-item__time{ font-size: var(--fs-2xs); color: var(--on-ink-dim); margin-top: 2px; }

/* ---------------------------------------------------------------------
   Testimonios
--------------------------------------------------------------------- */
.testis{ padding: 104px 0; }
.testis__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.testi{
  padding: var(--sp-6); border-radius: var(--radius-lg);
  background: var(--surface-1); border: 1px solid var(--border-soft);
}
.testi__stars{ display:flex; gap: 3px; margin-bottom: var(--sp-4); color: var(--brand-green); }
.testi__stars svg{ width: 14px; height: 14px; }
.testi p{ font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.65; margin: 0 0 var(--sp-5); }
.testi__author{ display:flex; align-items:center; gap: var(--sp-3); }
.testi__avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: var(--fs-xs);
}
.testi__name{ font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }
.testi__meta{ font-size: var(--fs-2xs); color: var(--text-tertiary); }

/* ---------------------------------------------------------------------
   CTA final
--------------------------------------------------------------------- */
.final-cta{
  margin: 0 var(--sp-6) 104px;
  max-width: var(--max-w);
  margin-left: auto; margin-right: auto;
  border-radius: var(--radius-xl);
  padding: 72px var(--sp-8);
  background: var(--gradient-brand);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta h2{
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--fs-3xl); letter-spacing: -0.02em; margin: 0 0 var(--sp-4);
}
.final-cta p{ color: rgba(255,255,255,0.88); font-size: var(--fs-md); margin: 0 0 var(--sp-7); }
.final-cta .pub-btn--primary{ background: #fff; color: var(--brand-blue-dark); box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.pub-footer{ background: var(--hero-ink); color: var(--on-ink-dim); padding: var(--sp-9) 0 var(--sp-6); }
.pub-footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-8); }
.pub-footer__brand{ display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pub-footer__brand-text{ font-family: var(--font-display); font-weight: 700; color: var(--on-ink); font-size: var(--fs-md); }
.pub-footer p.desc{ font-size: var(--fs-sm); line-height: 1.6; max-width: 260px; }
.pub-footer h4{ font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-ink); margin: 0 0 var(--sp-4); }
.pub-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-3); }
.pub-footer a{ font-size: var(--fs-sm); color: var(--on-ink-dim); transition: color var(--dur-fast) var(--ease-out); }
.pub-footer a:hover{ color: var(--on-ink); }
.pub-footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-3);
  padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--fs-2xs);
}

/* ---------------------------------------------------------------------
   Sedes
--------------------------------------------------------------------- */
.sedes{ padding: 104px 0; background: var(--surface-1); }
.sede-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.sede-card{
  background: var(--surface-0); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  transition: all var(--dur-base) var(--ease-out);
}
.sede-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sede-card__top{ display:flex; align-items:center; justify-content: space-between; margin-bottom: var(--sp-4); }
.sede-card__top svg{ width: 22px; height: 22px; color: var(--brand-blue); }
.sede-card__badge{
  font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--brand-blue-light); color: var(--brand-blue-dark);
  padding: 3px 9px; border-radius: var(--radius-full);
}
.sede-card__badge--new{ background: var(--brand-green-light); color: var(--brand-green-dark); }
.sede-card h3{ font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.sede-card__addr{ font-size: var(--fs-xs); color: var(--text-secondary); margin: 0 0 2px; }
.sede-card__hours{ font-size: var(--fs-2xs); color: var(--text-tertiary); margin: 0 0 var(--sp-4); }
.sede-card__link{ font-size: var(--fs-xs); font-weight: 700; color: var(--brand-blue-dark); }
.sede-card__link:hover{ text-decoration: underline; }

/* ---------------------------------------------------------------------
   Franquicias
--------------------------------------------------------------------- */
.franchise{ padding: 96px 0; background: var(--brand-blue); position: relative; overflow: hidden; }
.franchise::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(480px 380px at 90% 10%, rgba(255,255,255,0.14), transparent 60%);
}
.franchise__grid{ position: relative; display:grid; grid-template-columns: 1.5fr 0.9fr; gap: var(--sp-9); align-items:center; }
.franchise__kicker{
  display:block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); margin-bottom: var(--sp-3);
}
.franchise h2{
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--fs-2xl); letter-spacing: -0.02em; margin: 0 0 var(--sp-4);
}
.franchise p{ color: rgba(255,255,255,0.85); font-size: var(--fs-md); line-height: 1.6; margin: 0 0 var(--sp-6); max-width: 440px; }
.franchise__list{ list-style:none; margin: 0 0 var(--sp-7); padding: 0; display:flex; flex-direction:column; gap: var(--sp-3); }
.franchise__list li{ display:flex; align-items:flex-start; gap: var(--sp-3); color: #fff; font-size: var(--fs-sm); font-weight: 500; }
.franchise__list svg{ width: 18px; height: 18px; color: #fff; flex-shrink: 0; margin-top: 2px; }
.franchise .pub-btn--primary{ background: #fff; color: var(--brand-blue-dark); }

.franchise__stats{
  position: relative;
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.franchise__stat{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  backdrop-filter: blur(6px);
}
.franchise__stat b{
  display:block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  color: #fff; letter-spacing: -0.02em; margin-bottom: 4px;
}
.franchise__stat span{ font-size: var(--fs-xs); color: rgba(255,255,255,0.8); }

/* ---------------------------------------------------------------------
   Modal: Reservar lavado
--------------------------------------------------------------------- */
.booking-modal{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.booking-modal.is-open{ visibility: visible; opacity: 1; }
.booking-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(10, 14, 23, 0.62);
  backdrop-filter: blur(4px);
}
.booking-modal__dialog{
  position: relative;
  width: 100%; max-width: 460px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.booking-modal.is-open .booking-modal__dialog{ transform: translateY(0) scale(1); }

.booking-modal__close{
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-soft); background: var(--surface-1);
  color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}
.booking-modal__close svg{ width: 15px; height: 15px; }
.booking-modal__close:hover{ background: var(--surface-2); color: var(--text-primary); }

.booking-panel__kicker{
  display:block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-teal-dark); margin-bottom: var(--sp-2);
}
.booking-panel h3{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 var(--sp-2);
}
.booking-panel__lead{ font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--sp-6); }

.bk-field{ margin-bottom: var(--sp-4); }
.bk-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.bk-field label{
  display:block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.bk-field label span{ font-weight: 500; color: var(--text-tertiary); }
.bk-field input, .bk-field select, .bk-field textarea{
  width: 100%; height: 46px; padding: 0 var(--sp-4);
  border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  background: var(--surface-1); color: var(--text-primary);
  font-size: var(--fs-sm); font-family: var(--font-body);
  outline: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bk-field textarea{ height: auto; padding: var(--sp-3) var(--sp-4); resize: vertical; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus{
  border-color: var(--brand-blue); background: var(--surface-0); box-shadow: var(--shadow-focus);
}
.bk-field.has-error input, .bk-field.has-error select{ border-color: var(--state-danger); }

.bk-readonly{
  height: 46px; display:flex; align-items:center;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md); border: 1px dashed var(--border-strong);
  background: var(--surface-1); color: var(--text-primary);
  font-size: var(--fs-sm); font-weight: 700;
  transition: all var(--dur-fast) var(--ease-out);
}
.bk-readonly.is-free{
  border-style: solid; border-color: var(--brand-green);
  background: var(--brand-green-light); color: var(--brand-green-dark);
}

.bk-delivery-hint{
  display:flex; align-items:center; gap: var(--sp-2);
  font-size: var(--fs-2xs); color: var(--text-tertiary); font-weight: 600;
  margin: -6px 0 var(--sp-4);
}
.bk-delivery-hint svg{ width: 13px; height: 13px; color: var(--brand-teal); flex-shrink: 0; }
.bk-delivery-hint b{ color: var(--text-secondary); }
.bk-delivery-hint.is-free{ color: var(--brand-green-dark); }
.bk-delivery-hint.is-free svg{ color: var(--brand-green); }
.bk-delivery-hint.is-free b{ color: var(--brand-green-dark); }

.bk-submit{ width: 100%; justify-content: center; margin-top: var(--sp-2); padding: var(--sp-4); font-size: var(--fs-md); }
.booking-panel__note{ text-align:center; font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: var(--sp-3); }

.booking-panel--success{ text-align: center; padding-top: var(--sp-4); }
.bk-success-icon{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-green-light); color: var(--brand-green-dark);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto var(--sp-5);
}
.bk-success-icon svg{ width: 28px; height: 28px; }
.booking-panel--success p{ font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--sp-5); }
.booking-panel--success p b{ color: var(--text-primary); }
.bk-success-ref{
  display:flex; flex-direction: column; gap: 2px;
  background: var(--surface-1); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.bk-success-ref span{ font-size: var(--fs-2xs); color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.bk-success-ref b{ font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--text-primary); }
.bk-success-ref--domicilio{ margin-top: var(--sp-3); margin-bottom: var(--sp-6); }
.bk-success-ref--domicilio.is-free{ background: var(--brand-green-light); border-style: solid; border-color: var(--brand-green); }
.bk-success-ref--domicilio.is-free b{ font-family: var(--font-body); color: var(--brand-green-dark); }
.bk-success-close{ width: 100%; justify-content: center; }

@media (max-width: 520px){
  .bk-row{ grid-template-columns: 1fr; }
  .booking-modal__dialog{ padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero{ padding-top: 63px; }
  .steps__row{ grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-7); }
  .steps__row::before{ display:none; }
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
  .sede-grid{ grid-template-columns: repeat(2, 1fr); }
  .franchise__grid{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .tracking__grid{ grid-template-columns: 1fr; }
  .testis__grid{ grid-template-columns: 1fr; }
  .pub-footer__grid{ grid-template-columns: 1fr 1fr; }
  .pub-nav__links{ display:none; }
  .pub-nav__sede{ display:none; }
}
@media (max-width: 640px){
  .wrap{ padding: 0 var(--sp-4); }
  .services__grid{ grid-template-columns: 1fr; }
  .sede-grid{ grid-template-columns: 1fr; }
  .franchise__stats{ grid-template-columns: 1fr 1fr; }
  .hero__stats{ gap: var(--sp-6); }
  .final-cta{ margin: 0 var(--sp-4) 72px; padding: 56px var(--sp-5); }
  .pub-footer__grid{ grid-template-columns: 1fr; }
}