/*
 * /criar-site/ (cs-): the team builds a website for a professional.
 * Loaded only on that page (Assets), on top of institucional.css, whose in-
 * pieces (steps, FAQ, actions) it reuses.
 *
 * Mobile first: designed at 390px, widened from there. Yellow stays geometry:
 * the rule beside the hero prices and the 3px mark over the bigger plan. The
 * one green block (.cs-final) carries a white button, never a yellow one.
 */

/* ---------------------------------------------------------------- hero
   A photo under the site's dark green (owner, 2026-09-25: "uma imagem com
   overlay de fundo no header"). The <picture> is the first child, the
   overlay is ::after (after the picture in paint order, under the
   z-index:1 grid), the content sits above both. Where text is, the overlay
   is never lighter than petrol-ink at .76, which holds white (and the .8
   white of the small print) at AA even over a pure white pixel; the
   measured worst point is in docs/diario.md.
   Without the photo files the section is the same green, plain. */
.cs-hero{position:relative;overflow:hidden;background:var(--petrol-ink);color:#fff;padding:30px 0 40px}
.cs-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.cs-hero-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.cs-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,38,28,.84) 0%,rgba(7,38,28,.76) 50%,rgba(7,38,28,.88) 100%)}
.cs-hero-grid{position:relative;z-index:1;display:grid;gap:30px}
.cs-hero .kicker{font-size:17px;margin-bottom:8px;color:#fff}
.cs-hero .kicker > svg{color:var(--coral)}
.cs-hero .h-page{max-width:16ch;text-wrap:balance;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.cs-hero .lead{margin:14px 0 0;color:rgba(255,255,255,.9)}

.cs-prices{list-style:none;margin:22px 0 0;padding:0 0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  border-left:3px solid var(--coral)}
.cs-prices li{display:grid;gap:2px}
.cs-prices b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:30px;line-height:1.05;
  color:#fff;font-variant-numeric:tabular-nums}
.cs-prices span{font-size:14px;line-height:1.4;color:rgba(255,255,255,.86)}
.cs-once{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.8);max-width:52ch}
.cs-hero .in-actions{margin-top:22px}
.cs-hero .btn svg{width:18px;height:18px}
/* On the green the body's green button would vanish: white, as on the
   ProBand and the final CTA; the second one is a white outline. */
.cs-hero .btn-primary{background:#fff;color:var(--petrol-ink)}
.cs-hero .btn-primary:hover{background:var(--petrol-soft);color:var(--petrol-ink)}
.cs-hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cs-hero .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.cs-hero .btn:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
/* The illustration on a phone: under the buttons it only lengthens the hero
   by a screen of photo, and the photo already says "site". From 720px it
   comes back as the white card over the photo. */
@media (max-width:719px){ .cs-hero .cs-mock{display:none} }

/* The illustration: a phone-width browser, grey bars, a placeholder address. */
.cs-mock{position:relative;max-width:420px;width:100%;justify-self:center;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.cs-mock-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0}
.cs-mock-dots{display:flex;gap:5px;flex:none}
.cs-mock-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.cs-mock-url{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:5px 10px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.cs-mock-url svg{width:12px;height:12px;color:var(--ok);flex:none}
.cs-mock-body{padding:16px;display:grid;gap:16px}
.cs-mock-top{display:flex;align-items:center;justify-content:space-between}
.cs-mock-logo{width:34px;height:34px;border-radius:var(--r-sm);background:var(--petrol)}
.cs-mock-nav{display:flex;gap:8px}
.cs-mock-nav i{width:30px;height:7px;border-radius:4px;background:var(--line)}
.cs-mock-hero{display:grid;gap:8px;padding:16px;border-radius:var(--r-md);background:var(--petrol-wash)}
.cs-mock-l{display:block;height:10px;border-radius:5px;background:var(--line-2)}
.cs-mock-l1{width:78%;height:14px;background:var(--petrol-deep);opacity:.85}
.cs-mock-l2{width:92%}
.cs-mock-l3{width:60%}
.cs-mock-wa{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:7px 12px;
  border-radius:var(--radius-btn);background:var(--wa-btn);color:#fff;font-size:12.5px;font-weight:600}
.cs-mock-wa svg{width:14px;height:14px}
/* The photo tiles only from 720px: on a phone they add a screen of scroll. */
.cs-mock-tiles{display:none;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:720px){ .cs-mock-tiles{display:grid} }
.cs-mock-tiles i{aspect-ratio:1;border-radius:var(--r-sm);background:var(--bg-2)}
/* A search result floating over the corner: where the site gets found. */
.cs-mock-search{position:absolute;left:-10px;bottom:-16px;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.cs-mock-search svg{width:16px;height:16px;color:var(--azul);flex:none}
.cs-mock-search span{display:grid;gap:5px}
.cs-mock-search i{display:block;width:110px;height:7px;border-radius:4px;background:var(--azul-soft)}
.cs-mock-search i:first-child{width:140px;background:var(--azul);opacity:.7}

/* ------------------------------------------------------------ benefits */
.cs-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-benefit{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-content:start;padding:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.cs-benefit .in-ico{grid-row:1 / span 2}
.cs-benefit h3{margin:0;font-size:17px;line-height:1.3;align-self:center}
.cs-benefit p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* --------------------------------------------------------------- plans */
.cs-plans{display:grid;gap:16px}
.cs-plan{display:flex;flex-direction:column;gap:18px;padding:22px 20px;border-radius:var(--r-lg)}
.cs-plan.is-wide{box-shadow:inset 0 3px 0 var(--coral),var(--shadow-2);border-color:var(--line-2)}
.cs-plan-head h3{margin:0;font-size:19px;line-height:1.25}
.cs-plan-price{display:flex;align-items:baseline;gap:10px;margin:8px 0 0}
.cs-plan-price b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:40px;line-height:1;
  color:var(--petrol-ink);font-variant-numeric:tabular-nums}
.cs-plan-price span{font-size:14px;color:var(--muted)}
.cs-plan-list{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;flex:1}
.cs-plan-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;line-height:1.5}
.cs-plan-list svg{width:18px;height:18px;margin-top:2px;color:var(--petrol)}
.cs-plan .btn{width:100%}
.cs-note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:70ch}
.cs-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--azul)}

/* ---------------------------------------------------------- final CTA */
.cs-final{margin-top:40px;padding:28px 22px;display:grid;gap:20px;border-radius:var(--r-xl);
  background:var(--petrol-deep);color:#fff}
.cs-final .h-sec{color:#fff;font-size:clamp(24px,3vw,32px);max-width:24ch;text-wrap:balance}
.cs-final p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:56ch}
.cs-final-btn{width:100%;background:#fff;color:var(--petrol-deep)}
.cs-final-btn:hover{background:var(--petrol-wash);color:var(--petrol-ink)}
.cs-final-btn svg{width:18px;height:18px}
.cs-final-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ------------------------------------------------------------- wider */
@media (min-width:720px){
  .cs-hero{padding:56px 0 64px}
  .cs-prices{gap:28px;grid-template-columns:auto auto;justify-content:start}
  .cs-prices b{font-size:36px}
  .cs-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .cs-benefit{grid-template-columns:1fr;padding:24px}
  .cs-benefit .in-ico{grid-row:auto;margin-bottom:16px}
  .cs-benefit h3{align-self:auto}
  .cs-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
  .cs-plan{padding:28px}
  .cs-plan .btn{width:auto;align-self:flex-start}
  .cs-final{grid-template-columns:1fr auto;align-items:center;gap:32px;padding:40px}
  .cs-final-btn{width:auto}
}
@media (min-width:1000px){
  .cs-hero{padding:72px 0 84px}
  /* Text on the left, the card on the right. The photo is mirrored here so
     its dark side (the shoulder) sits behind the text and the lit phone and
     laptop behind the card, where the overlay thins out and nothing has to
     be read on the photo itself. Nothing in it reads backwards: no text. */
  .cs-hero::after{background:linear-gradient(100deg,rgba(7,38,28,.92) 0%,rgba(7,38,28,.84) 48%,rgba(12,59,43,.3) 100%)}
  .cs-hero-media img{object-position:50% 50%;transform:scaleX(-1)}
  .cs-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
  .cs-mock{justify-self:end}
  .cs-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
}