/* -----------------------------------------------------------------------------
 * DGJC PRODUTOS DIGITAIS LTDA  -  dgjc.com.br
 * Arquivo....: assets/vendor/page-sobre-extra.css
 * Projeto....: Chef Pequenas Patas - pagina Sobre Nos (/sobre/)
 * Criado em..: 2026-08-31 (America/Sao_Paulo)
 * Proposito..: Layout novo da pagina institucional (identidade do site). Carrega
 *              DEPOIS de page-sobre.css (que ainda traz o CSS do header/footer
 *              do Elementor). So as classes .cps-* sao usadas aqui.
 * -------------------------------------------------------------------------- */

.cps{
  --brown:#5E240D; --brown-deep:#4a1c08; --cream:#F5F3F0; --orange:#F08046;
  --yellow:#FED16E; --olive:#A6B85A; --ink:#3a2a12; --line:#e6ddd6; --muted:#6f5442;
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--brown);
}
.cps *{box-sizing:border-box}
.cps-wrap{max-width:1040px;margin:0 auto;padding-left:20px;padding-right:20px}
.cps-sec{padding:52px 0}

.cps-mark{display:flex;align-items:center;gap:10px;font-family:"Lilita One",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.cps-sec-h{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.cps-sec-h svg{flex:0 0 auto}
.cps-sec-h h2{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--brown);font-size:clamp(21px,3vw,31px);line-height:1.1;margin:0}

/* ---- hero (fundo marrom) ---- */
.cps-hero{background:var(--brown);color:#fff;padding:56px 0 60px}
.cps-hero .cps-mark{color:var(--orange)}
.cps-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.cps-h1{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:36px;line-height:1.12;margin:16px 0 14px;color:#fff}   /* = titulos das secoes do site */
@media(max-width:768px){.cps-h1{font-size:26px}}
.cps-lead{font-size:19px;line-height:1.6;margin:0;color:#f3e3d8;max-width:34ch}
.cps-photo{margin:0}
.cps-photo img{
  width:100%;height:auto;display:block;
  /* sem contorno laranja nem recorte - a arte da foto ja tem borda */
}

/* ---- prosa ---- */
.cps-prose{max-width:760px;font-size:17px;line-height:1.7}
.cps-prose p{margin:0 0 16px}

/* ---- nossa historia: 2 colunas (video do instagram | texto) ---- */
.cps-hist{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start}
.cps-hist-txt .cps-sec-h{margin-top:0}
.cps-hist .cps-prose{max-width:none;margin-top:22px}
@media(max-width:900px){
  .cps-hist{grid-template-columns:1fr;gap:24px;justify-items:center}
  .cps-hist-video{order:2}
  .cps-hist-txt{order:1}
}

/* iframe do Instagram (/p/XXX/embed/) - sem depender do embed.js */
.cps-ig{width:100%;max-width:400px;height:560px;border:0;border-radius:12px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cps-hist-video .cps-ig{max-width:none}   /* mesmo tamanho dos videos de "Conheca a Chef" */

/* ---- citacao ---- */
.cps-quote-band{background:#efe9e3;padding:52px 0}
.cps-quote{
  margin:0 auto;max-width:900px;text-align:center;border:0;
  font-family:"Lilita One",sans-serif;font-weight:400;color:var(--brown);
  font-size:clamp(20px,2.9vw,30px);line-height:1.32;
}

/* ---- como fazemos a comida ---- */
.cps-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.cps-feats{grid-template-columns:repeat(2,1fr)}}
.cps-feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.cps-feat h3{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:17px;margin:0 0 8px;color:var(--brown)}
.cps-feat p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---- videos (YouTube vertical 9:16, facade click-to-play) ---- */
/* ---- Conheca a Chef: 3 videos do Instagram lado a lado ---- */
.cps-igrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cps-igrow .cps-ig{max-width:none}
@media(max-width:960px){.cps-igrow{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

.cps-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;max-width:900px}
.cps-video{margin:0}
.cps-video__play{
  display:block;position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:#000 center/cover no-repeat;border:1px solid var(--line);
}
.cps-video__btn{
  position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:rgba(240,128,70,.95);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.cps-video__play:hover .cps-video__btn{background:var(--orange)}
.cps-video iframe{width:100%;aspect-ratio:9/16;border:0;border-radius:18px;display:block}
.cps-video__cap{margin:8px 2px 0;font-size:14px;font-weight:700;color:var(--muted)}

/* ---- cta final ---- */
.cps-cta-band{background:var(--brown);color:#fff;padding:48px 0}
.cps-cta{text-align:center}
.cps-cta h2{font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px);margin:0 0 22px;color:#fff}
.cps-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cps-cta .cpp-btn{display:inline-block;font-weight:800;border-radius:22px;padding:13px 24px 11px;text-decoration:none}
.cps-cta .cpp-btn--wa{background:var(--olive);color:var(--ink);border:1px solid #86994a;border-bottom-width:5px}
.cps-cta .cpp-btn--ghost{background:#fff;color:var(--brown);border:1px solid #d9cabf;border-bottom-width:5px}

@media(max-width:800px){
  .cps-hero__grid{grid-template-columns:1fr;gap:30px}
  .cps-photo{max-width:360px}
  .cps-feats{grid-template-columns:1fr}
}