/* ==========================================================================
   Conceptual client sites (illustration subsystem)
   Each site has its own palette and display face. Sizes are in container
   units so the same markup reads as desktop in a browser frame and as
   mobile in a phone frame. Stages (wire > type > color > full) are the
   steps of the build shown in the hero.
   ========================================================================== */
.site-view { container: site / inline-size; position: relative; }

.site {
  /* theme defaults (clinic) */
  --th-bg: #f4f7f5; --th-ink: #11302a; --th-soft: #566b65; --th-accent: #2e7a69; --th-on: #ffffff; --th-panel: #e5eeea; --th-line: rgba(17, 48, 42, 0.12);
  --th-disp: "Gloock", Georgia, serif; --th-dispw: 400; --th-case: none; --th-track: -0.015em; --th-r: 1.6cqi;
  --bg: var(--th-bg); --ink: var(--th-ink); --soft: var(--th-soft); --accent: var(--th-accent); --on: var(--th-on); --panel: var(--th-panel); --line: var(--th-line);
  --pad: 5cqi;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 3.6cqi;
  line-height: 1.45;
  perspective: 1400px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease);
}
.site[data-theme="eletrica"] {
  --th-bg: #1a2bd6; --th-ink: #ffffff; --th-soft: #c8cfff; --th-accent: #ffe14a; --th-on: #0f1460; --th-panel: #2438ea; --th-line: rgba(255, 255, 255, 0.16);
  --th-disp: "Bricolage Grotesque", sans-serif; --th-dispw: 800; --th-track: -0.035em; --th-r: 0.4cqi;
}
.site[data-theme="empresa"] {
  --th-bg: #080b12; --th-ink: #f3f5f9; --th-soft: #98a1b3; --th-accent: #ffb547; --th-on: #120c02; --th-panel: #111826; --th-line: rgba(243, 245, 249, 0.12);
  --th-disp: "Bricolage Grotesque", sans-serif; --th-dispw: 800; --th-track: -0.045em; --th-r: 1.4cqi;
}
.site[data-theme="barbearia"] {
  --th-bg: #12251a; --th-ink: #efe5cf; --th-soft: #b8af94; --th-accent: #c99f57; --th-on: #12251a; --th-panel: #1a3424; --th-line: rgba(239, 229, 207, 0.14);
  --th-disp: "Big Shoulders Display", sans-serif; --th-dispw: 800; --th-case: uppercase; --th-track: 0.005em; --th-r: 0.6cqi;
}

/* Build stages ---------------------------------------------------------- */
.site[data-stage="wire"] { --bg: transparent; --ink: rgba(244, 243, 239, 0.9); --soft: rgba(244, 243, 239, 0.6); --accent: transparent; --on: transparent; --panel: transparent; --line: rgba(244, 243, 239, 0.22); }
.site[data-stage="type"] { --bg: #f7f7f5; --ink: #141414; --soft: #6a6a6a; --accent: #141414; --on: #ffffff; --panel: #ebebe8; --line: rgba(0, 0, 0, 0.1); }

.site .t { transition: color 0.6s var(--ease), background-color 0.6s var(--ease); border-radius: 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.site[data-stage="wire"] .t { color: transparent; background-color: rgba(244, 243, 239, 0.16); }
.site[data-stage="wire"] .s-h1 .t, .site[data-stage="wire"] .s-h2 .t { background-color: rgba(244, 243, 239, 0.26); }

.site [data-piece] { outline: 1px dashed transparent; outline-offset: 0.6cqi; transition: outline-color 0.6s var(--ease), background-color 0.7s var(--ease), border-color 0.7s var(--ease), color 0.7s var(--ease); }
.site[data-stage="wire"] [data-piece] { outline-color: rgba(244, 243, 239, 0.32); }
.site [data-piece].is-snap { animation: snap 0.7s var(--ease-out); }
@keyframes snap {
  0% { outline: 2px solid rgba(143, 162, 255, 0.95); outline-offset: 0.2cqi; }
  100% { outline: 1px solid rgba(143, 162, 255, 0); outline-offset: 1.4cqi; }
}

/* 12-column guide, visible while the structure is being laid out */
.site::after {
  content: ""; position: absolute; inset: 0 var(--pad); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(143, 162, 255, 0.025) 0 calc((100% - 11 * 2cqi) / 12), transparent 0 calc((100% - 11 * 2cqi) / 12 + 2cqi));
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.site[data-stage="wire"]::after { opacity: 1; }

/* Images: hidden until the photo stage, then wiped in */
.s-img { position: relative; overflow: hidden; background: var(--panel); border-radius: var(--th-r); transition: background-color 0.7s var(--ease); }
.s-img img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out), transform 1.4s var(--ease-out); }
.site:not([data-stage="full"]) .s-img img { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
.site[data-stage="wire"] .s-img { background: transparent; }
.site[data-stage="wire"] .s-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(244, 243, 239, 0.22) 50%, transparent calc(50% + 1px)),
              linear-gradient(to top left, transparent calc(50% - 1px), rgba(244, 243, 239, 0.22) 50%, transparent calc(50% + 1px));
}

/* Layout: mobile first (phone frames) ------------------------------------ */
.s-nav { display: flex; align-items: center; gap: 3cqi; padding: 4cqi var(--pad); border-bottom: 1px solid var(--line); }
.s-logo { font-family: var(--th-disp); font-weight: var(--th-dispw); text-transform: var(--th-case); letter-spacing: var(--th-track); font-size: 5.4cqi; line-height: 1; white-space: nowrap; }
.s-links { display: none; }
.s-nav > .s-btn { display: none; }
.s-burger { margin-left: auto; display: grid; gap: 1.4cqi; width: 6cqi; }
.s-burger i { display: block; height: 0.7cqi; border-radius: 1cqi; background: var(--ink); transition: background-color 0.7s var(--ease); }

.s-hero { display: grid; gap: 6cqi; padding: 7cqi var(--pad) 6cqi; }
.s-tag { font-size: 3.2cqi; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; transition: color 0.7s var(--ease); }
.site[data-stage="wire"] .s-tag, .site[data-stage="type"] .s-tag { color: var(--soft); }
.s-h1 { margin-top: 2.5cqi; font-family: var(--th-disp); font-weight: var(--th-dispw); text-transform: var(--th-case); letter-spacing: var(--th-track); font-size: 9.6cqi; line-height: 1.02; text-wrap: balance; }
.site[data-theme="barbearia"] .s-h1 { font-size: 12.5cqi; line-height: 0.92; }
.s-lede { margin-top: 3.5cqi; color: var(--soft); font-size: 3.7cqi; max-width: 40ch; }
.s-actions { margin-top: 5cqi; display: flex; flex-wrap: wrap; gap: 2.5cqi; }
.s-btn {
  display: inline-flex; align-items: center; padding: 2.6cqi 4.4cqi; border-radius: calc(var(--th-r) * 0.8 + 0.6cqi);
  background: var(--accent); color: var(--on); font-weight: 600; font-size: 3.4cqi; white-space: nowrap;
  border: 1px solid var(--accent);
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease), border-color 0.7s var(--ease);
}
.s-btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.s-btn--inv { background: var(--on); color: var(--accent); border-color: var(--on); }
.site[data-stage="wire"] .s-btn { border-color: rgba(244, 243, 239, 0.3); }

.s-hero-media { position: relative; }
.s-hero-img { aspect-ratio: 4 / 3.3; }
/* Halo Energia: dusk glow behind the photo, sun-amber accents */
.site[data-theme="empresa"][data-stage="full"] .s-hero { background: radial-gradient(60% 80% at 78% 40%, rgba(255, 181, 71, 0.16), transparent 70%); }
.site[data-theme="empresa"] .s-hero-img { aspect-ratio: 4 / 3.6; }
.site[data-theme="empresa"][data-stage="full"] .s-hero-img { box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.25), 0 4cqi 10cqi -3cqi rgba(255, 140, 40, 0.35); }
.site[data-theme="empresa"][data-stage="full"] .s-tag { display: inline-flex; padding: 0.4em 0.9em; border-radius: 99em; border: 1px solid rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.08); }
.site[data-theme="empresa"] .s-h1 { font-size: 10.6cqi; line-height: 0.96; }
.site[data-theme="empresa"][data-stage="full"] .s-card { border: 1px solid var(--line); }
.site[data-theme="empresa"][data-stage="full"] .s-cta { background: linear-gradient(120deg, #ffb547, #ff7a2f); }
.s-chip {
  position: absolute; left: 3cqi; bottom: 3cqi; display: inline-flex; gap: 1.6cqi; align-items: baseline;
  padding: 2cqi 3.2cqi; border-radius: 99cqi; background: var(--bg); color: var(--ink); font-size: 3cqi;
  box-shadow: 0 1.4cqi 4cqi -1.6cqi rgba(0, 0, 0, 0.35);
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease);
}
.site[data-stage="wire"] .s-chip { box-shadow: none; outline: 1px solid rgba(244, 243, 239, 0.3); }

.s-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 3.2cqi; font-weight: 500; }
.s-facts li { padding: 3.4cqi 2cqi 3.4cqi 0; }
.s-facts li:nth-child(even) { padding-left: 3cqi; border-left: 1px solid var(--line); }
.s-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }

.s-services { padding: 9cqi var(--pad) 4cqi; }
.s-h2 { font-family: var(--th-disp); font-weight: var(--th-dispw); text-transform: var(--th-case); letter-spacing: var(--th-track); font-size: 7.4cqi; line-height: 1.05; text-wrap: balance; }
.s-cards { margin-top: 5cqi; display: grid; gap: 3cqi; }
.s-card { position: relative; display: grid; gap: 1.6cqi; padding: 5cqi; border-radius: var(--th-r); background: var(--panel); }
.s-card-img { aspect-ratio: 16 / 9; margin: -5cqi -5cqi 2cqi; border-radius: var(--th-r) var(--th-r) 0 0; }
.s-num { font-size: 3cqi; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; transition: color 0.7s var(--ease); }
.site[data-stage="wire"] .s-num, .site[data-stage="type"] .s-num { color: var(--soft); }
.s-h3 { font-family: var(--th-disp); font-weight: var(--th-dispw); text-transform: var(--th-case); letter-spacing: var(--th-track); font-size: 5.4cqi; line-height: 1.1; }
.s-p { color: var(--soft); }
.s-more { margin-top: 1.4cqi; font-weight: 600; font-size: 3.2cqi; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

.s-about { display: grid; gap: 6cqi; padding: 7cqi var(--pad); }
.s-about-img { aspect-ratio: 4 / 3; }
.s-about-copy .s-p { margin-top: 3cqi; }
.s-list { margin-top: 4cqi; display: grid; gap: 2cqi; }
.s-list li { position: relative; padding-left: 5cqi; }
.s-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 2.6cqi; height: 1.3cqi; border-left: 0.5cqi solid var(--accent); border-bottom: 0.5cqi solid var(--accent); transform: rotate(-45deg); transition: border-color 0.7s var(--ease); }
.site[data-stage="wire"] .s-list li::before { border-color: rgba(244, 243, 239, 0.4); }

.s-cta { margin: 4cqi var(--pad) 7cqi; padding: 8cqi 6cqi; border-radius: calc(var(--th-r) * 1.5); background: var(--accent); color: var(--on); display: grid; gap: 5cqi; justify-items: start; }
.site[data-stage="wire"] .s-cta { color: var(--ink); }
.s-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2cqi; padding: 5cqi var(--pad); background: var(--ink); color: var(--bg); font-size: 3cqi; }
.s-foot .s-logo { font-size: 4.6cqi; }
.site[data-stage="wire"] .s-foot { background: transparent; color: var(--ink); }

/* Desktop layout (browser frames) --------------------------------------- */
@container site (min-width: 620px) {
  .site { font-size: 1.32cqi; --pad: 4.6cqi; }
  .s-nav { padding: 1.8cqi var(--pad); gap: 3cqi; }
  .s-logo { font-size: 2cqi; }
  .s-links { display: flex; gap: 2.6cqi; margin-left: auto; color: var(--soft); font-size: 1.25cqi; }
  .s-nav > .s-btn { display: inline-flex; }
  .s-burger { display: none; }
  .s-btn { padding: 1cqi 1.8cqi; font-size: 1.25cqi; }
  .s-hero { grid-template-columns: 1.05fr 1fr; gap: 4.6cqi; align-items: center; padding: 5.5cqi var(--pad) 5cqi; }
  .s-tag { font-size: 1.2cqi; }
  .s-h1 { margin-top: 1.2cqi; font-size: 4.6cqi; }
  .site[data-theme="barbearia"] .s-h1 { font-size: 6.6cqi; }
  .site[data-theme="empresa"] .s-h1 { font-size: 5.2cqi; }
  .s-lede { margin-top: 1.8cqi; font-size: 1.45cqi; }
  .s-actions { margin-top: 2.6cqi; gap: 1cqi; }
  .s-chip { left: -2cqi; bottom: 2.4cqi; padding: 0.9cqi 1.5cqi; gap: 0.6cqi; font-size: 1.15cqi; }
  .s-facts { grid-template-columns: repeat(4, 1fr); font-size: 1.2cqi; }
  .s-facts li { padding: 1.6cqi 1.4cqi; }
  .s-facts li:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.6cqi; }
  .s-facts li:first-child { border-left: 0; padding-left: 0; }
  .s-services { padding: 6cqi var(--pad) 2cqi; }
  .s-h2 { font-size: 3cqi; }
  .s-cards { margin-top: 2.6cqi; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.4cqi; }
  .s-card { padding: 2cqi; gap: 0.7cqi; align-content: start; }
  .s-card:first-child { grid-row: span 2; }
  .s-card-img { margin: -2cqi -2cqi 1cqi; aspect-ratio: 16 / 10; }
  .s-num { font-size: 1.1cqi; }
  .s-h3 { font-size: 1.9cqi; }
  .s-more { font-size: 1.15cqi; }
  .s-about { grid-template-columns: 1fr 1fr; gap: 4.6cqi; align-items: center; padding: 5cqi var(--pad); }
  .s-about-copy .s-p { margin-top: 1.4cqi; }
  .s-list { margin-top: 1.8cqi; gap: 0.8cqi; }
  .s-list li { padding-left: 2cqi; }
  .s-list li::before { width: 1cqi; height: 0.5cqi; border-width: 0.2cqi; }
  .s-cta { margin: 2cqi var(--pad) 5cqi; padding: 3.6cqi 4cqi; grid-template-columns: 1fr auto; align-items: center; gap: 3cqi; }
  .s-cta .s-h2 { max-width: 22ch; }
  .s-foot { padding: 2cqi var(--pad); font-size: 1.15cqi; }
  .s-foot .s-logo { font-size: 1.7cqi; }
}

/* Frames ----------------------------------------------------------------- */
.browser {
  position: relative; border-radius: 14px; overflow: hidden; background: #0f1013;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -50px rgba(0, 0, 0, 0.95);
}
.browser-bar {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px;
  background: #16181c; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px; color: #8a8e97;
}
.browser-dots { display: inline-flex; gap: 6px; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2c2f36; }
.browser-url {
  flex: 1; max-width: 340px; margin-inline: auto; padding: 4px 12px; border-radius: 999px; background: #0f1013;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.browser-viewport { position: relative; overflow: hidden; }
.browser-scroll { will-change: transform; }

.phone {
  position: relative; border-radius: 38px; padding: 10px; background: #0b0c0e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 100px -40px rgba(0, 0, 0, 0.95);
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; border-radius: 20px; background: #0b0c0e; z-index: 3;
}
.phone .browser-viewport { border-radius: 28px; }