/* ==========================================================================
   TuSitioWeb — demo sites shared stylesheet
   Each business gets its own theme block (colors + type) applied via a
   body class. Components below (.d-*) read only CSS variables, so adding
   a new theme never touches component code.
   ========================================================================== */

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family: var(--font-d); margin:0; letter-spacing: -0.01em; color: var(--text); }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
img{ max-width:100%; display:block; }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   Demo attribution banner
   ========================================================================== */
.demo-banner{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  flex-wrap:wrap;
  background:#0A0A0F; color:#F4F4F2;
  padding:.65rem 1.25rem; text-align:center;
  font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.demo-banner strong{ color:#C8FF4D; }
.demo-banner__cta{
  background:#C8FF4D; color:#0A0A0F; font-weight:700;
  padding:.4rem .9rem; border-radius:999px; font-size:.76rem;
  white-space:nowrap;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.d-nav{ position:sticky; top:var(--banner-h, 41px); z-index:50; background:var(--bg); border-bottom:1px solid var(--border); }
.d-nav__inner{
  max-width:1200px; margin:0 auto; padding:0 1.5rem; height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.d-nav__logo{ font-family:var(--font-d); font-weight:700; font-size:1.15rem; flex-shrink:0; }
.d-nav__links{ display:flex; align-items:center; gap:2rem; flex:1; justify-content:center; }
.d-nav__links a{ font-size:.9rem; color:var(--text-muted); transition:color .2s; }
.d-nav__links a:hover{ color:var(--text); }
.d-nav__cta{ flex-shrink:0; }

.d-nav__toggle{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.d-nav__toggle span{ width:22px; height:2px; background:var(--text); }

@media (max-width: 820px){
  .d-nav__links{
    position:fixed; top:calc(var(--banner-h, 41px) + 72px); left:0; right:0; bottom:0; z-index:45;
    background:var(--bg);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding:2rem 1.5rem; gap:1.5rem;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .d-nav__links.is-open{ transform:translateX(0); }
  .d-nav__links a{ font-size:1.2rem; color:var(--text); }
  .d-nav__cta{ display:none; }
  .d-nav__toggle{ display:flex; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.d-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.7rem; border-radius:var(--radius);
  font-family:var(--font-d); font-weight:600; font-size:.92rem;
  white-space:nowrap;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.d-btn:active{ transform:scale(.97); }
.d-btn--accent{ background:var(--primary); color:var(--primary-ink); }
.d-btn--accent:hover{ transform:translateY(-2px); }
.d-btn--outline{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
.d-btn--outline:hover{ box-shadow:inset 0 0 0 1px var(--primary); color:var(--primary); }

.link-arrow{
  font-family:var(--font-d); font-size:.9rem; font-weight:600; color:var(--primary); display:inline-block;
}
.link-arrow::after{ content:"→"; margin-left:.4rem; display:inline-block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.link-arrow:hover::after{ transform:translateX(3px); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.d-section{ padding:5.5rem 1.5rem; background:var(--bg); }
.d-section--alt{ background:var(--bg-alt); }
.d-section__inner{ max-width:1200px; margin:0 auto; }
.d-section__head{ max-width:640px; margin-bottom:3rem; }
.d-section__eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:.85rem; font-weight:600; }
.d-section__title{ font-size:clamp(1.7rem, 3vw, 2.3rem); }
.d-section__title + p{ margin-top:1rem; color:var(--text-muted); font-size:1rem; max-width:56ch; }

/* ==========================================================================
   Hero
   ========================================================================== */
.d-hero{ padding: 4.5rem 1.5rem 4.5rem; background:var(--bg); }
.d-hero__inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.d-hero__eyebrow{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:1.1rem; font-weight:600; }
.d-hero h1{ font-size:clamp(2rem, 4vw, 3.1rem); line-height:1.1; max-width:14ch; }
.d-hero__sub{ margin-top:1.25rem; color:var(--text-muted); font-size:1.05rem; max-width:42ch; }
.d-hero__actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.d-hero__visual{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; }
.d-hero__blob{
  position:absolute; inset:6%; border-radius:32px;
  background: linear-gradient(155deg, var(--primary), var(--bg-alt) 72%);
  opacity:.9;
}
.d-hero__card{
  position:relative; z-index:2;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem 1.8rem; width:min(280px, 80%);
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.d-hero__card-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:.4rem; }
.d-hero__stat{ display:flex; justify-content:space-between; align-items:baseline; padding:.7rem 0; }
.d-hero__stat + .d-hero__stat{ border-top:1px solid var(--border); }
.d-hero__stat b{ font-family:var(--font-d); font-size:1.3rem; }
.d-hero__stat span{ font-size:.8rem; color:var(--text-muted); }

@media (max-width: 900px){
  .d-hero__inner{ grid-template-columns:1fr; }
  .d-hero__visual{ order:-1; min-height:260px; }
}

/* ==========================================================================
   Cards grid (menu / services / products)
   ========================================================================== */
.d-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.d-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:2rem 1.75rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.d-card:hover{ transform:translateY(-4px); border-color:var(--primary); }
.d-card__icon{
  width:44px; height:44px; border-radius:12px;
  background:color-mix(in srgb, var(--primary) 16%, transparent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; color:var(--primary);
}
.d-card h3{ font-size:1.05rem; margin-bottom:.6rem; }
.d-card p{ color:var(--text-muted); font-size:.9rem; }
.d-card__price{ margin-top:1rem; font-family:var(--font-d); font-weight:700; color:var(--primary); font-size:1.05rem; }

@media (max-width: 900px){ .d-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .d-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   About strip (stats)
   ========================================================================== */
.d-about{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.d-about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }
.d-about__stat b{ display:block; font-family:var(--font-d); font-size:1.8rem; color:var(--primary); }
.d-about__stat span{ font-size:.8rem; color:var(--text-muted); }

@media (max-width: 820px){
  .d-about{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.d-quote{ max-width:680px; }
.d-quote p{ font-family:var(--font-d); font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.4; color:var(--text); }
.d-quote footer{ margin-top:1.5rem; display:flex; align-items:center; gap:.9rem; }
.d-quote__avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--primary); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:.95rem; flex-shrink:0;
}
.d-quote__name{ font-size:.9rem; font-weight:700; }
.d-quote__role{ font-size:.8rem; color:var(--text-muted); }

/* ==========================================================================
   CTA
   ========================================================================== */
.d-cta{ padding:5.5rem 1.5rem; background:var(--bg-alt); text-align:center; border-top:1px solid var(--border); }
.d-cta__inner{ max-width:600px; margin:0 auto; }
.d-cta h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:1rem; }
.d-cta p{ color:var(--text-muted); margin-bottom:2rem; }
.d-cta__hours{ margin-top:2rem; font-size:.85rem; color:var(--text-muted); }

/* ==========================================================================
   Tabs (reusable: áreas de práctica, categorías de menú, categorías de producto)
   ========================================================================== */
.d-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.d-tabs__btn{
  padding:.6rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--text-muted); box-shadow:inset 0 0 0 1px var(--border);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.d-tabs__btn:hover{ color:var(--text); }
.d-tabs__btn.is-active{ background:var(--primary); color:var(--primary-ink); box-shadow:none; }
.d-tab-panel{ display:none; }
.d-tab-panel.is-active{ display:block; animation:dFadeUp .5s cubic-bezier(.16,1,.3,1); }
@keyframes dFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .d-tab-panel.is-active{ animation:none; } }

/* ==========================================================================
   Timeline / process (reusable: cómo trabajamos)
   ========================================================================== */
.d-timeline{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.d-timeline__line{ position:absolute; top:27px; left:12.5%; right:12.5%; height:2px; background:var(--border); }
.d-timeline__line span{ display:block; height:100%; width:0%; background:var(--primary); transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.d-timeline__line.is-visible span{ width:100%; }
.d-timeline__step b{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; margin-bottom:1.3rem;
  background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-d); font-weight:700; font-size:1.1rem; font-style:normal;
}
.d-timeline__step h3{ font-size:1rem; margin-bottom:.5rem; }
.d-timeline__step p{ color:var(--text-muted); font-size:.86rem; }
@media (max-width:760px){
  .d-timeline{ grid-template-columns:1fr; gap:2.25rem; }
  .d-timeline__line{ display:none; }
}

/* ==========================================================================
   Animated counters (reusable: stats)
   ========================================================================== */
[data-count-to]{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   Testimonial carousel (reusable)
   ========================================================================== */
.d-carousel{ max-width:680px; }
.d-carousel__slide{ display:none; }
.d-carousel__slide.is-active{ display:block; animation:dFadeUp .5s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce){ .d-carousel__slide.is-active{ animation:none; } }
.d-carousel__controls{ display:flex; align-items:center; gap:1rem; margin-top:2rem; }
.d-carousel__arrow{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--border); font-size:1.1rem; color:var(--text);
  transition:box-shadow .25s, color .25s;
}
.d-carousel__arrow:hover{ box-shadow:inset 0 0 0 1px var(--primary); color:var(--primary); }
.d-carousel__dots{ display:flex; gap:.5rem; }
.d-carousel__dot{ width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .25s, transform .25s; }
.d-carousel__dot.is-active{ background:var(--primary); transform:scale(1.3); }

/* ==========================================================================
   Team grid (reusable: nuestro equipo)
   ========================================================================== */
.d-team__avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--primary); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:1.05rem; margin-bottom:1.1rem;
}
.d-team__role{ font-size:.8rem; color:var(--primary); font-weight:600; margin-bottom:.6rem; }

/* ==========================================================================
   Project gallery cards (reusable: proyectos destacados)
   ========================================================================== */
.d-project{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.d-project:hover{ transform:translateY(-4px); border-color:var(--primary); }
.d-project__media{
  height:150px; display:flex; align-items:flex-end; padding:1rem;
  background:linear-gradient(150deg, var(--primary), var(--bg-alt) 85%);
}
.d-project__tag{
  font-family:var(--font-d); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; background:rgba(0,0,0,.32); padding:.35rem .75rem; border-radius:999px;
}
.d-project__body{ padding:1.4rem 1.5rem; }
.d-project__body h3{ font-size:1rem; margin-bottom:.4rem; }
.d-project__body p{ color:var(--text-muted); font-size:.85rem; }

/* ==========================================================================
   Accordion (reusable: FAQ)
   ========================================================================== */
.d-accordion{ max-width:760px; }
.d-accordion__item{ border-bottom:1px solid var(--border); }
.d-accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem 0; text-align:left; font-family:var(--font-d); font-weight:600; font-size:1rem;
}
.d-accordion__icon{ position:relative; width:16px; height:16px; flex-shrink:0; margin-left:1rem; }
.d-accordion__icon::before, .d-accordion__icon::after{
  content:""; position:absolute; background:var(--primary); top:50%; left:50%; transform:translate(-50%,-50%);
}
.d-accordion__icon::before{ width:100%; height:2px; }
.d-accordion__icon::after{ width:2px; height:100%; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.d-accordion__item.is-open .d-accordion__icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.d-accordion__panel{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.d-accordion__panel p{ color:var(--text-muted); font-size:.92rem; line-height:1.6; padding-bottom:1.4rem; max-width:62ch; }
.d-accordion__item.is-open .d-accordion__panel{ max-height:240px; }

/* ==========================================================================
   Map placeholder (reusable: página de contacto)
   ========================================================================== */
.d-map{
  position:relative; aspect-ratio:16/8; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--bg-alt);
}
.d-map__pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.d-map__pin-icon{
  width:40px; height:40px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--primary); box-shadow:0 10px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.d-map__pin-icon svg{ transform:rotate(45deg); }
.d-map__pin-label{
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:.4rem .9rem; font-size:.78rem; font-weight:600; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* ==========================================================================
   Contact info rows (reusable: página de contacto)
   ========================================================================== */
.d-contact-info{ display:flex; flex-direction:column; gap:1.4rem; }
.d-contact-info__row{ display:flex; gap:1rem; align-items:flex-start; }
.d-contact-info__icon{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.d-contact-info__row h3{ font-size:.92rem; margin-bottom:.3rem; }
.d-contact-info__row p{ color:var(--text-muted); font-size:.88rem; }

/* ==========================================================================
   Chip list (reusable: categorías, etiquetas cortas)
   ========================================================================== */
.d-chip-list{ display:flex; flex-wrap:wrap; gap:.75rem; }
.d-chip{
  padding:.65rem 1.15rem; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); color:var(--text);
}

/* ==========================================================================
   Before / after slider (Construcciones Istmo)
   ========================================================================== */
.d-ba{
  position:relative; max-width:760px; margin:0 auto; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  user-select:none;
}
.d-ba__panel{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.5rem; }
.d-ba__panel--before{ background:linear-gradient(160deg,#2b2b28,#151513); }
.d-ba__panel--after{ background:linear-gradient(160deg,var(--primary),var(--bg-alt) 85%); }
.d-ba__after-wrap{
  position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}
.d-ba__after-wrap .d-ba__panel{ position:absolute; inset:0; }
.d-ba__label{
  font-family:var(--font-d); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; background:rgba(0,0,0,.35); padding:.4rem .8rem; border-radius:999px;
}
.d-ba__handle{
  position:absolute; top:0; bottom:0; left:var(--ba-pos, 50%); width:0;
  pointer-events:none;
}
.d-ba__handle::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff;
}
.d-ba__grip{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.3);
  pointer-events:none; color:#111; font-size:1rem;
}
.d-ba__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
}
.d-ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:100%; height:100%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.d-footer{ padding:2.5rem 1.5rem; background:var(--bg); border-top:1px solid var(--border); }
.d-footer__inner{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem;
}
.d-footer__name{ font-family:var(--font-d); font-weight:700; }
.d-footer p{ font-size:.78rem; color:var(--text-muted); }
.d-footer__credit{ font-size:.78rem; color:var(--text-muted); }
.d-footer__credit a{ color:var(--primary); font-weight:600; }

/* ==========================================================================
   THEMES
   ========================================================================== */

/* Fonda El Fogón — restaurante panameño. Black & tan, no beige/brass. */
.theme-restaurant{
  --bg:#161311; --bg-alt:#1D1712; --surface:#221B15; --text:#F4ECDF; --text-muted:#B8A98F;
  --primary:#D97A3F; --primary-ink:#1B0F06; --border:rgba(244,236,223,.1); --radius:14px;
  --font-d:'Playfair Display', serif; --font-b:'Manrope', sans-serif;
}
.theme-restaurant h1, .theme-restaurant .d-hero__eyebrow ~ h1{ font-style:italic; font-weight:600; }

/* Sushi Marea — cold charcoal + jade, minimal. */
.theme-sushi{
  --bg:#121415; --bg-alt:#191C1D; --surface:#1E2223; --text:#EDEFEE; --text-muted:#9AA6A2;
  --primary:#79C29A; --primary-ink:#0B1310; --border:rgba(237,239,238,.1); --radius:4px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}

/* Clínica Vitalis — cool teal clinical. */
.theme-clinic{
  --bg:#F5FAF9; --bg-alt:#E9F3F1; --surface:#FFFFFF; --text:#0F2E29; --text-muted:#537B73;
  --primary:#0E7C86; --primary-ink:#FFFFFF; --border:rgba(15,46,41,.12); --radius:16px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}

/* Sonrisa Total Dental — monochrome + electric blue pop. */
.theme-dental{
  --bg:#FFFFFF; --bg-alt:#F3F6FB; --surface:#FFFFFF; --text:#101317; --text-muted:#5B6270;
  --primary:#2F6FED; --primary-ink:#FFFFFF; --border:rgba(16,19,23,.1); --radius:16px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}

/* Barbería Diamante — true black + gold, bold. */
.theme-barber{
  --bg:#0B0B0C; --bg-alt:#141415; --surface:#1A1A1A; --text:#F3EEDF; --text-muted:#9C978A;
  --primary:#C9A227; --primary-ink:#0B0B0C; --border:rgba(243,238,223,.12); --radius:2px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}
.theme-barber .d-nav__logo, .theme-barber .d-hero h1, .theme-barber .d-section__title{ text-transform:uppercase; letter-spacing:.01em; }

/* Studio Bella Nails — blush + plum. */
.theme-nails{
  --bg:#FBEEF2; --bg-alt:#F5E1E7; --surface:#FFFFFF; --text:#3A1420; --text-muted:#8A5A68;
  --primary:#7A3350; --primary-ink:#FBEEF2; --border:rgba(58,20,32,.1); --radius:22px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}

/* ClimaFrío Panamá — cool white/steel + vivid orange, mono touches. */
.theme-climate{
  --bg:#F5F8FA; --bg-alt:#E9EFF3; --surface:#FFFFFF; --text:#12222E; --text-muted:#57707F;
  --primary:#FF7A33; --primary-ink:#12222E; --border:rgba(18,34,46,.12); --radius:8px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}
.theme-climate .d-hero__eyebrow, .theme-climate .d-section__eyebrow, .theme-climate .d-card__price{ font-family:'DM Mono', monospace; letter-spacing:.04em; }

/* Construcciones Istmo — concrete + safety yellow. */
.theme-construction{
  --bg:#EDEDE9; --bg-alt:#E2E2DC; --surface:#FFFFFF; --text:#1F1F1C; --text-muted:#5C5C55;
  --primary:#D9A400; --primary-ink:#1F1F1C; --border:rgba(31,31,28,.14); --radius:6px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}
.theme-construction .d-hero__eyebrow, .theme-construction .d-section__eyebrow{ font-family:'DM Mono', monospace; }

/* Boutique Luna — cream + coral, playful. */
.theme-shop{
  --bg:#FFF8F5; --bg-alt:#FCEBE6; --surface:#FFFFFF; --text:#3A1E1A; --text-muted:#8C6A62;
  --primary:#F1839C; --primary-ink:#3A1416; --border:rgba(58,30,26,.1); --radius:20px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}

/* Ferretería El Tornillo — white/steel + red, utilitarian. */
.theme-hardware{
  --bg:#F7F7F6; --bg-alt:#ECECEA; --surface:#FFFFFF; --text:#1A1A1A; --text-muted:#5C5C5C;
  --primary:#E14E3D; --primary-ink:#FFFFFF; --border:rgba(0,0,0,.12); --radius:4px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}
.theme-hardware .d-hero__eyebrow, .theme-hardware .d-section__eyebrow, .theme-hardware .d-card__price{ font-family:'DM Mono', monospace; }

/* Istmo Legal — proyecto real. Navy corporativo + acento cálido, formal serif. */
.theme-legal{
  --bg:#FFFFFF; --bg-alt:#F6F8FA; --surface:#FFFFFF; --text:#12212E; --text-muted:#4B5C68;
  --primary:#E6A15C; --primary-ink:#0F2A3F; --border:#DBE4EA; --radius:10px;
  --font-d:'Playfair Display', serif; --font-b:'Manrope', sans-serif;
}
.theme-legal .d-nav{ background:#173B57; color:#fff; }
.theme-legal .d-nav__logo, .theme-legal .d-nav__links a{ color:#fff; }
.theme-legal .d-nav__links a{ color:rgba(255,255,255,.75); }
.theme-legal .d-nav__links a:hover{ color:#fff; }
.theme-legal .d-hero{ background: linear-gradient(180deg, #0F2A3F, #173B57); }
.theme-legal .d-hero .d-hero__eyebrow{ color:#E6A15C; }
.theme-legal .d-hero h1, .theme-legal .d-hero__sub{ color:#fff; }
.theme-legal .d-hero__sub{ color:rgba(255,255,255,.72); }
.theme-legal .d-hero__card{ background:#fff; }
@media (max-width: 820px){
  .theme-legal .d-nav__links{ background:#0F2A3F; }
  .theme-legal .d-nav__links a{ color:#fff; }
}

/* Contadores Pinzón & Cía — deep forest green + soft gold. */
.theme-accounting{
  --bg:#123326; --bg-alt:#173F2F; --surface:#194533; --text:#EAF3EC; --text-muted:#9DC2AD;
  --primary:#E4B94B; --primary-ink:#123326; --border:rgba(234,243,236,.12); --radius:10px;
  --font-d:'Space Grotesk', sans-serif; --font-b:'Manrope', sans-serif;
}