/* =====================================================
   DEMOS — Shared utilities for demo/conceptual pages
   MasterCodeWeb · css/pages/demos.css
===================================================== */

/* ─── DEMO DISCLAIMER BANNER ─────────────────── */

.demo-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(13, 108, 242, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.demo-banner__text {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.demo-banner__text strong {
  color: #fff;
  font-weight: 700;
}

.demo-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  text-decoration: none;
  padding: 0.3rem 0.875rem;
  border-radius: 2rem;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  font-family: 'Inter', -apple-system, sans-serif;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.demo-back:hover {
  background: rgba(255, 255, 255, 0.28);
}

.demo-back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* Keep banner as single row — never stack to column (stacking breaks sticky header top values) */
  .demo-banner {
    flex-wrap: nowrap;
    gap: 0.625rem;
  }
  .demo-banner__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 540px) {
  .demo-banner {
    padding: 0.5rem 0.875rem;
    gap: 0.5rem;
  }
  .demo-banner__text {
    font-size: 0.72rem;
  }
  .demo-back {
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
  }
}

/* ─── GLOBAL MOBILE PROTECTION ───────────────────── */

/* Prevent horizontal scroll on all demo pages */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Contain content inside preview wrapper */
#demoPreviewWrap {
  overflow-x: hidden;
}

/* Images never exceed their container */
#demoPreviewWrap img,
#demoPreviewWrap video {
  max-width: 100%;
  height: auto;
}

/* Forms and inputs never overflow */
#demoPreviewWrap input,
#demoPreviewWrap textarea,
#demoPreviewWrap select,
#demoPreviewWrap button {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── DEMO CONTROLS PANEL ───────────────────────── */

/* Smooth color transitions when switching palette */
html.dcp-changing * {
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    color 280ms ease,
    box-shadow 280ms ease !important;
}

.demo-controls-panel {
  background: #06060e;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ─── Card ──────────────────────────────────────── */

.dcp__card {
  max-width: 60rem;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ─── Head ──────────────────────────────────────── */

.dcp__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dcp__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--demo-primary, #0d6cf2);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dcp__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* ─── Controls row ──────────────────────────────── */

.dcp__controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
}

/* ─── Block ─────────────────────────────────────── */

.dcp__block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dcp__block-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.32);
  margin: 0;
}

/* ─── Carousel ──────────────────────────────────── */

.dcp__carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dcp__carousel-center {
  flex: 1;
  min-width: 0;
}

.dcp__carousel-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--demo-primary, #0d6cf2) inset, 0 0 10px -4px var(--demo-primary, #0d6cf2);
}

.dcp__carousel-strip {
  display: flex;
  height: 4px;
  width: 100%;
  pointer-events: none;
}

.dcp__strip-seg {
  flex: 1;
  display: block;
  font-style: normal;
}

.dcp__carousel-body {
  padding: 0.5rem 0.75rem 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.dcp__carousel-dots {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.dcp__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  font-style: normal;
}

.dcp__carousel-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcp__pal-counter {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ─── Nav buttons ───────────────────────────────── */

.dcp__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  flex-shrink: 0;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.dcp__nav:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.dcp__nav:focus-visible {
  outline: 2px solid var(--demo-primary, #0d6cf2);
  outline-offset: 2px;
}

/* ─── Screen-reader live region ─────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Viewport segmented control ───────────────── */

.dcp__vp-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.dcp__vp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  min-height: 36px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.dcp__vp-tab:last-child {
  border-right: none;
}

.dcp__vp-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}

.dcp__vp-tab--active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.dcp__vp-tab:focus-visible {
  outline: 2px solid var(--demo-primary, #0d6cf2);
  outline-offset: -2px;
}

/* ─── Divider ───────────────────────────────────── */

.dcp__hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0;
}

/* ─── Footer / CTA ──────────────────────────────── */

.dcp__foot {
  display: flex;
  justify-content: flex-end;
}

.dcp__foot-ctas {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.dcp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  background: var(--demo-primary, #0d6cf2);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.dcp__cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.dcp__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.dcp__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  min-height: 44px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #25d366;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dcp__wa:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.55);
  transform: translateY(-1px);
}

.dcp__wa:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}

/* ─── Viewport preview wrap — frame + transition ─── */

#demoPreviewWrap {
  border: 1px solid transparent;
  transition:
    max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-demo-vp="mobile"] #demoPreviewWrap {
  max-width: 390px;
  margin-inline: auto;
  overflow-x: hidden;
  border-radius: 1.75rem;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.025),
    0 48px 120px rgba(0, 0, 0, 0.75),
    0 8px 32px rgba(0, 0, 0, 0.5);
}

body[data-demo-vp="tablet"] #demoPreviewWrap {
  max-width: 768px;
  margin-inline: auto;
  overflow-x: hidden;
  border-radius: 1rem;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.02),
    0 32px 80px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════
   VIEWPORT PREVIEW SIMULATION
   Replicates the layout changes that @media queries
   trigger at real viewport widths. Needed because
   #demoPreviewWrap's max-width doesn't fire the
   demos' media queries — those respond to actual
   browser viewport width, not container width.
   ─────────────────────────────────────────────────
   mobile  ≈  390px  → replicates ≤1024 + ≤768 + ≤640 + ≤480px rules
   tablet  ≈  768px  → replicates ≤1024 + ≤768px rules only
═══════════════════════════════════════════════════ */

/* ── Shared: hide all demo navs in mobile / tablet ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .r-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .d-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .e-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .header__nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .im-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-nav,
body[data-demo-vp="mobile"] #demoPreviewWrap .az-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .r-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .d-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .g-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .e-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .header__nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .im-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .bf-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .cn-nav,
body[data-demo-vp="tablet"] #demoPreviewWrap .az-nav { display: none; }

/* ── Restaurante Málaga — Tablet (≤768px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .r-about__grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .r-grid-3,
body[data-demo-vp="tablet"] #demoPreviewWrap .r-info__grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .r-footer__inner { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .r-footer__bottom { flex-direction: column; }
body[data-demo-vp="tablet"] #demoPreviewWrap .r-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .r-hero__inner { padding: 3.5rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .r-about__visual { height: 260px; }

/* ── Restaurante Málaga — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .r-about__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .r-grid-3,
body[data-demo-vp="mobile"] #demoPreviewWrap .r-info__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .r-footer__inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .r-form-row { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .r-footer__bottom { flex-direction: column; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-hero__inner { padding: 3rem 1rem; text-align: center; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-hero__sub { margin-inline: auto; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-hero__actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; }
body[data-demo-vp="mobile"] #demoPreviewWrap .r-about__visual { height: 200px; }

/* ── Clínica Dental — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .d-hero__inner { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .d-grid-4 { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .d-why__grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .d-footer__inner { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .d-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .d-hero { padding: 3.5rem 1.25rem 3rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .d-hero__inner { gap: 2rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .d-hero__visual { height: 240px; }

/* ── Clínica Dental — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .d-grid-4,
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .d-why__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .d-footer__inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .d-form-row { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .d-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero { padding: 2.5rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-form { padding: 1.75rem 1.25rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__visual { height: 180px; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__sub { margin-inline: auto; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; }
body[data-demo-vp="mobile"] #demoPreviewWrap .d-hero__stats { gap: 1.25rem; }

/* ── Tienda Gourmet — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .g-products { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-cats__grid { grid-template-columns: repeat(3, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-hero__inner,
body[data-demo-vp="tablet"] #demoPreviewWrap .g-story__grid { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-footer__inner { grid-template-columns: 1fr 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .g-section { padding: 3.5rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-section__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-hero__inner { padding: 3.5rem 1.25rem; gap: 2.5rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-hero__visual { height: 220px; }
body[data-demo-vp="tablet"] #demoPreviewWrap .g-hero__actions { flex-direction: column; align-items: flex-start; }

/* ── Tienda Gourmet — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .g-products,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-cats__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-hero__inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-story__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-footer__inner { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .g-section { padding: 2.5rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-section__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-hero__inner { padding: 3rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-hero__sub { max-width: 100%; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-hero__actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-news__form { flex-direction: column; }
body[data-demo-vp="mobile"] #demoPreviewWrap .g-news__input,
body[data-demo-vp="mobile"] #demoPreviewWrap .g-news__btn { width: 100%; }

/* ── Electricista Málaga — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .e-services { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .e-zones__grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .e-footer__inner { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .e-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .e-hero { padding: 3.5rem 1.25rem 3rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .e-hero__trust { flex-direction: column; gap: 0.875rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .e-emergency { margin: 0; border-radius: 0; }
body[data-demo-vp="tablet"] #demoPreviewWrap .e-zones__list { columns: 1; }

/* ── Electricista Málaga — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .e-services,
body[data-demo-vp="mobile"] #demoPreviewWrap .e-zones__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .e-footer__inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .e-form-row { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .e-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .e-hero { padding: 3rem 1rem 2.5rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .e-hero__trust { flex-direction: column; gap: 0.875rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .e-hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-call,
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-quote { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 48px; }
body[data-demo-vp="mobile"] #demoPreviewWrap .e-emergency { margin: 0; border-radius: 0; }
body[data-demo-vp="mobile"] #demoPreviewWrap .e-zones__list { columns: 1; }

/* ── Landing SaaS — Tablet (≤768px / ≤900px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .hero__grid { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .hero__visual { display: none; }
body[data-demo-vp="tablet"] #demoPreviewWrap .features-grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .pricing-grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .testimonials-grid { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .footer__grid { grid-template-columns: 1fr 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .hero { padding: 3.5rem 1.25rem 4rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .features-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .how-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .pricing-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .testimonials-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .cta-section { padding: 3rem 1.25rem; }

/* ── Landing SaaS — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .hero__grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .features-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .steps-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .pricing-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .testimonials-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .hero__visual { display: none; }
body[data-demo-vp="mobile"] #demoPreviewWrap .steps-grid::before { display: none; }
body[data-demo-vp="mobile"] #demoPreviewWrap .hero { padding: 3rem 1rem 3.5rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-primary,
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-secondary { display: flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; }
body[data-demo-vp="mobile"] #demoPreviewWrap .features-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .how-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .pricing-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .testimonials-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .cta-section { padding: 2.5rem 1rem; }

/* ── Centro Deportivo — Tablet (≤768px / ≤900px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .classes-grid { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .facilities-inner,
body[data-demo-vp="tablet"] #demoPreviewWrap .signup-inner,
body[data-demo-vp="tablet"] #demoPreviewWrap .form-row { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .hero__content { max-width: 100%; }
body[data-demo-vp="tablet"] #demoPreviewWrap .hero__figure,
body[data-demo-vp="tablet"] #demoPreviewWrap .hero__bg-right { display: none; }
body[data-demo-vp="tablet"] #demoPreviewWrap .classes-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .facilities-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .schedule-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .testimonials-section,
body[data-demo-vp="tablet"] #demoPreviewWrap .signup-section { padding: 3rem 1.25rem; }

/* ── Centro Deportivo — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .classes-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .facilities-inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .signup-inner,
body[data-demo-vp="mobile"] #demoPreviewWrap .form-row { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .hero__content { max-width: 100%; }
body[data-demo-vp="mobile"] #demoPreviewWrap .hero__figure,
body[data-demo-vp="mobile"] #demoPreviewWrap .hero__bg-right { display: none; }
body[data-demo-vp="mobile"] #demoPreviewWrap .hero__stats { gap: 0.875rem; flex-wrap: wrap; }
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-primary,
body[data-demo-vp="mobile"] #demoPreviewWrap .btn-ghost { display: flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; }
body[data-demo-vp="mobile"] #demoPreviewWrap .classes-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .facilities-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .schedule-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .testimonials-section,
body[data-demo-vp="mobile"] #demoPreviewWrap .signup-section { padding: 2.5rem 1rem; }

/* ── Inmobiliaria — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .im-grid-3,
body[data-demo-vp="tablet"] #demoPreviewWrap .im-servicios-grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .im-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .im-why-grid { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .im-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .im-hero__inner { padding: 3.5rem 1.25rem; }

/* ── Inmobiliaria — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .im-grid-3,
body[data-demo-vp="mobile"] #demoPreviewWrap .im-servicios-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .im-why-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .im-form-row,
body[data-demo-vp="mobile"] #demoPreviewWrap .im-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .im-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .im-hero__inner { padding: 3rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .im-hero__actions { flex-direction: column; align-items: flex-start; }
body[data-demo-vp="mobile"] #demoPreviewWrap .im-hero__stats { gap: 1.25rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .im-form-wrap { padding: 1.75rem 1.1rem; }

/* ── Bufete Legal — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .bf-areas,
body[data-demo-vp="tablet"] #demoPreviewWrap .bf-footer-grid { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .bf-about-grid { grid-template-columns: 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .bf-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .bf-hero { padding: 3.5rem 1.25rem 3rem; }

/* ── Bufete Legal — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .bf-areas,
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-process,
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-about-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-form-row,
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-footer-grid { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .bf-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-hero { padding: 3rem 1rem 2.5rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-hero__actions { justify-content: center; flex-direction: column; align-items: center; }
body[data-demo-vp="mobile"] #demoPreviewWrap .bf-hero__stats { gap: 1.25rem; flex-wrap: wrap; }

/* ── Construcción — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .cn-services-grid { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .cn-projects-grid,
body[data-demo-vp="tablet"] #demoPreviewWrap .cn-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .cn-proceso-grid { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .cn-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .cn-hero { padding: 3.5rem 1.25rem 3rem; }

/* ── Construcción — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .cn-services-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-projects-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-proceso-grid,
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .cn-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-hero { padding: 3rem 1rem 2.5rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-hero__actions { flex-direction: column; align-items: stretch; }
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-hero__stats { gap: 1.25rem; flex-wrap: wrap; }
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-form-row { grid-template-columns: 1fr; }
body[data-demo-vp="mobile"] #demoPreviewWrap .cn-footer__bottom { flex-direction: column; text-align: center; }

/* ── Amazon Afiliados — Tablet (≤768px / ≤1024px) ── */

body[data-demo-vp="tablet"] #demoPreviewWrap .az-cats { grid-template-columns: repeat(2, 1fr); }
body[data-demo-vp="tablet"] #demoPreviewWrap .az-comparativa { grid-template-columns: 1fr 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .az-guides { grid-template-columns: 1fr 1fr; }
body[data-demo-vp="tablet"] #demoPreviewWrap .az-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="tablet"] #demoPreviewWrap .az-section { padding: 3rem 1.25rem; }
body[data-demo-vp="tablet"] #demoPreviewWrap .az-hero { padding: 3.5rem 1.25rem 3rem; }

/* ── Amazon Afiliados — Mobile (≤390px) ── */

body[data-demo-vp="mobile"] #demoPreviewWrap .az-cats,
body[data-demo-vp="mobile"] #demoPreviewWrap .az-comparativa,
body[data-demo-vp="mobile"] #demoPreviewWrap .az-guides,
body[data-demo-vp="mobile"] #demoPreviewWrap .az-footer__grid { grid-template-columns: 1fr; }

body[data-demo-vp="mobile"] #demoPreviewWrap .az-section { padding: 2.25rem 1rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .az-hero { padding: 3rem 1rem 2.5rem; }
body[data-demo-vp="mobile"] #demoPreviewWrap .az-hero__actions { flex-direction: column; align-items: flex-start; }

/* ─── Responsive ─────────────────────────────────── */

@media (max-width: 640px) {
  .dcp__controls { grid-template-columns: 1fr; gap: 1rem; }
  .dcp__vp-seg { width: 100%; }
  .dcp__vp-tab { flex: 1; justify-content: center; }
  .dcp__foot { justify-content: stretch; }
  .dcp__foot-ctas { width: 100%; }
  .dcp__cta, .dcp__wa { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
  .dcp__head { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .dcp__nav { width: 40px; height: 40px; min-width: 40px; }
  .dcp__carousel-name { font-size: 0.75rem; }
}