/* Obrena — página Sites Criados (/sites-criados/). Só o que é desta página; o compartilhado das internas vive em interna.css.
   Composição: os sete sites em três duplas comparativas e um solo; no computador, a tela rola no mouse (captura inteira). */

/* ===== Hero curto + índice ===== */
.sc-hero{padding:64px 0 28px;background:var(--bg)}
.sc-hero h1{margin:0;max-width:900px;font-size:clamp(40px,4.8vw,68px);line-height:1;letter-spacing:-.045em}
.sc-hero h1 span{color:var(--accent)}
.sc-hero-text{max-width:760px;margin:22px 0 0;color:#4c515b;font-size:17px;line-height:1.7}
.sc-indice{display:flex;flex-wrap:wrap;gap:6px 0;margin:28px 0 0;padding:14px 0 0;border-top:1.5px solid var(--ink)}
.sc-indice a{position:relative;padding:6px 14px 6px 0;margin-right:14px;color:#4c515b;font-size:14px;font-weight:750;letter-spacing:-.01em;text-decoration:none}
.sc-indice a::after{content:"";position:absolute;right:0;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--line)}
.sc-indice a:last-child::after{display:none}
.sc-indice a:hover,.sc-indice a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.sc-indice-guia{color:var(--accent)!important}

/* ===== Duplas ===== */
.sc-galeria{padding:24px 0 96px;background:var(--bg)}
.sc-dupla{padding:64px 0 24px;border-top:1.5px solid var(--line)}
.sc-dupla:first-child{border-top:0;padding-top:36px}
.sc-dupla-cabeca{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:32px;margin-bottom:30px}
.sc-dupla-cabeca h2{margin:0;font-size:clamp(30px,3.2vw,46px);line-height:1.04;letter-spacing:-.04em}
.sc-dupla-cabeca h2 span{color:var(--accent);font-weight:500;padding:0 .12em}
.sc-dupla-cabeca p:not(.eyebrow){margin:0;color:#4c515b;font-size:16px;line-height:1.65}
.sc-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.sc-solo .sc-par{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.sc-site{margin:0;min-width:0}
.sc-tela{position:relative;display:block;height:auto;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(14,18,32,.7);outline-offset:4px}
.sc-tela::before{content:"";position:absolute;left:0;right:0;top:0;z-index:2;height:22px;background:#eceef4;border-bottom:1px solid var(--line);background-image:radial-gradient(circle,#c9cdd8 3px,transparent 3.5px),radial-gradient(circle,#c9cdd8 3px,transparent 3.5px),radial-gradient(circle,#c9cdd8 3px,transparent 3.5px);background-size:14px 14px;background-repeat:no-repeat;background-position:10px 7px,24px 7px,38px 7px}
.sc-tela img{display:block;width:100%;height:auto;padding-top:22px;box-sizing:border-box}
.sc-tela.is-rolando img{transition:transform var(--dur,7s) linear}
.sc-tela.is-voltando img{transition:transform .9s ease-out}
.sc-tela:focus-visible{outline:3px solid var(--accent)}
.sc-site figcaption{padding:18px 4px 0}
.sc-site figcaption b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.03em;line-height:1.1}
.sc-site figcaption span{display:block;margin-top:4px;color:var(--accent-text);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sc-site figcaption p{margin:12px 0 0;color:#3f4553;font-size:15px;line-height:1.65}
.sc-abrir{display:inline-block;margin-top:12px;white-space:nowrap;color:var(--ink);font-size:14.5px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--accent)}
.sc-site figcaption .sc-abrir span{display:inline;margin:0;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none}
.sc-abrir:hover,.sc-abrir:focus-visible{color:var(--accent)}
.sc-nota{display:none;max-width:720px;margin:14px 0 0;color:#666c77;font-size:13px;line-height:1.55}
.sc-vivo .sc-nota{display:block}

/* Solo: texto ao lado da tela */
.sc-solo .sc-site{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;gap:36px}
.sc-solo .sc-site figcaption{padding:0}

/* ===== Larguras ===== */
@media (max-width:1180px){
  .sc-par{gap:24px}
}
@media (max-width:960px){
  .sc-dupla-cabeca{grid-template-columns:1fr;gap:12px;margin-bottom:22px}
  .sc-par{grid-template-columns:1fr;gap:34px}
  .sc-solo .sc-par{grid-template-columns:1fr}
  .sc-solo .sc-site{display:block}
  .sc-solo .sc-site figcaption{padding:18px 4px 0}
}
@media (max-width:700px){
  .sc-hero{padding:48px 0 20px}
  .sc-hero-text{font-size:15.5px}
  .sc-indice a{padding:5px 10px 5px 0;margin-right:10px;font-size:13px}
  .sc-dupla{padding:48px 0 16px}
  .sc-dupla-cabeca h2{font-size:clamp(28px,7.6vw,38px)}
  .sc-site figcaption b{font-size:22px}
  /* Celular: a captura é a primeira tela de um telefone (390×844) — mostra inteira, numa moldura de celular, sem a barra de navegador */
  .sc-tela{aspect-ratio:780/1688;max-height:none;width:min(100%,300px);margin:0 auto;border-radius:30px;border-width:6px;border-color:#111623;background:#111623;box-shadow:0 30px 50px -30px rgba(14,18,32,.6)}
  .sc-tela::before{display:none}
  .sc-tela img{padding-top:0;border-radius:24px}
  .sc-site figcaption{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .sc-tela img{transition:none!important;transform:none!important}
}