/*
Theme Name: Currículo Incrível
Theme URI: https://curriculoincrivel.local
Author: OpenAI
Description: Tema WordPress elegante e responsivo para o site Currículo Incrível.
Version: 1.1.5
Text Domain: curriculo-incrivel
*/

:root{
  --ci-bg:#363636;
  --ci-bg-soft:#404040;
  --ci-text:#f5f5f5;
  --ci-muted:#d5d5d5;
  --ci-accent:#FF8C00;
  --ci-accent-hover:#e67e00;
  --ci-shadow:0 18px 40px rgba(0,0,0,.14);
  --ci-shadow-soft:0 12px 28px rgba(33,38,51,.08);
  --ci-radius:24px;
  --ci-max:1320px;
  --ci-hero-bg:#eef0f5;
  --ci-line:#dde2ec;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#eceff4 0%,#f5f7fb 100%);
  color:#212529;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.container{
  width:min(calc(100% - 32px), var(--ci-max));
  margin-inline:auto;
}
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--ci-bg);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.header-inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
}
.brand{display:flex;align-items:center;min-width:0}
.brand-logo{display:block;line-height:0;flex:0 0 auto}
.brand-logo img{display:block;width:auto;height:40px;max-width:none}
.brand-text{display:none}
.menu-toggle{
  display:none;
  border:0;
  background:var(--ci-accent);
  color:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.main-navigation ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
}
.main-navigation a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 10px;
  background:transparent;
  color:var(--ci-accent);
  border-radius:0;
  font-weight:700;
  font-size:1rem;
  box-shadow:none;
  text-decoration:underline;
  transition:color .18s ease, font-weight .18s ease;
}
.main-navigation a:hover,.main-navigation a:focus{
  background:transparent;
  color:#fff;
  font-weight:900;
  text-decoration:underline;
  transform:none;
  box-shadow:none;
}
.hero{padding:34px 0 80px}
.hero-card{
  background:var(--ci-hero-bg);
  border-radius:32px;
  box-shadow:var(--ci-shadow);
  overflow:hidden;
  padding:40px 38px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px, 610px);
  gap:28px;
  align-items:end;
}
.hero-copy{padding:8px 0 48px}
.hero-copy h1{
  margin:0 0 18px;
  max-width:680px;
  font-size:clamp(2.7rem,4.4vw,5rem);
  line-height:.98;
  letter-spacing:-.045em;
  color:#1f232b;
  font-weight:900;
}
.hero-copy p{
  margin:0 0 28px;
  max-width:690px;
  color:#4f5561;
  font-size:1.05rem;
  line-height:1.65;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 26px;
  border-radius:18px;
  font-weight:900;
  font-size:1rem;
  border:0;
  cursor:pointer;
}
.btn-primary{background:var(--ci-accent);color:#fff;box-shadow:0 10px 24px rgba(255,140,0,.18)}
.btn-secondary{background:#e9ebf2;color:#252c36;box-shadow:0 10px 24px rgba(41,52,75,.08)}
.btn-ghost{background:#fff;color:#1f232b;box-shadow:0 10px 24px rgba(41,52,75,.08)}
.btn-outline{background:transparent;color:#1f232b;border:1px solid rgba(31,35,43,.12)}
.hero-visual{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:560px;
  background:transparent;
}
.hero-visual img{
  width:min(100%, 620px);
  height:auto;
  object-fit:contain;
  object-position:bottom right;
}
.site-footer{padding:28px 0 40px;color:#6f7682;text-align:center;font-size:.95rem}

.builder-page{padding:32px 0 70px}
.builder-shell{
  display:grid;
  gap:24px;
}
.builder-head{
  text-align:center;
  max-width:860px;
  margin:0 auto;
}
.builder-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  color:#6c7280;
  font-size:.92rem;
  font-weight:700;
  box-shadow:var(--ci-shadow-soft);
}
.builder-head h1{
  margin:16px 0 12px;
  color:#1f232b;
  font-size:clamp(2.2rem,4vw,4.3rem);
  line-height:1;
  letter-spacing:-.04em;
}
.builder-head p{
  margin:0;
  color:#5b6270;
  font-size:1.05rem;
  line-height:1.75;
}
.template-picker{
  background:var(--ci-hero-bg);
  border-radius:32px;
  padding:30px;
  box-shadow:var(--ci-shadow);
}
.template-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.template-card{
  position:relative;
  border:1.5px solid rgba(31,35,43,.08);
  background:#fff;
  border-radius:20px;
  padding:14px 14px 16px;
  box-shadow:0 6px 20px rgba(28,37,56,.05);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  cursor:pointer;
}
.template-card:hover,.template-card.is-active{
  transform:translateY(-2px);
  border-color:rgba(255,140,0,.38);
  box-shadow:0 18px 34px rgba(255,140,0,.14);
}
.template-badge{
  position:absolute;
  top:14px;
  right:14px;
  background:rgba(255,140,0,.12);
  color:#c56b00;
  font-size:.78rem;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
}
/* ─── SVG THUMBNAIL SYSTEM ─────────────────────────────────── */
.template-mini{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(31,35,43,.1);
  margin-bottom:14px;
  display:block;
  line-height:0;
  box-shadow:0 4px 16px rgba(28,37,56,.08);
}
.template-mini svg{
  display:block;
  width:100%;
  height:auto;
}
/* ─── CARD FOOTER ─────────────────────────────────────────── */
.template-card h3{
  margin:0 0 14px;
  font-size:.95rem;
  font-weight:700;
  color:#1f232b;
  letter-spacing:-.01em;
}
.template-card p{display:none}
.template-card .btn-choose{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 20px;
  border-radius:14px;
  border:none;
  font-family:inherit;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  background:#f1f3f7;
  color:#4b5563;
  position:relative;
  box-sizing:border-box;
}
.template-card .btn-choose:hover{
  background:#1f232b;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(31,35,43,.18);
}
.template-classic .btn-choose{
  background:#FF8C00;
  color:#fff;
  box-shadow:0 6px 20px rgba(255,140,0,.32);
}
.template-classic .btn-choose:hover{
  background:#e67e00;
  box-shadow:0 10px 28px rgba(255,140,0,.45);
}
.btn-choose-arrow{
  display:inline-flex;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  flex-shrink:0;
  transition:transform .22s ease;
}
.template-classic .btn-choose-arrow{background:rgba(255,255,255,.25)}
.template-card .btn-choose:hover .btn-choose-arrow{transform:translateX(3px)}

.builder-workspace{
  display:grid;
  grid-template-columns:minmax(360px, 580px) minmax(360px, 500px);
  gap:24px;
  align-items:start;
  justify-content:center;
}
.builder-workspace[hidden],.download-panel[hidden]{display:none !important}
.preview-panel{
  position:sticky;
  top:96px;
  background:var(--ci-hero-bg);
  border-radius:32px;
  padding:24px;
  box-shadow:var(--ci-shadow);
}
.preview-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.preview-toolbar strong{font-size:1.05rem;color:#1f232b}
.preview-toolbar span{color:#707785;font-size:.94rem}
.preview-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  color:#6b7280;
  box-shadow:0 6px 18px rgba(35,42,57,.07);
  font-size:.85rem;
  font-weight:800;
}
.cv-preview{
  --preview-accent:#FF8C00;
  --preview-accent-soft:rgba(255,140,0,.14);
  --preview-dark:#1f232b;
  --preview-muted:#667085;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  min-height:780px;
  box-shadow:0 18px 36px rgba(23,29,41,.08);
  border:1px solid rgba(31,35,43,.06);
  display:flex;
  flex-direction:column;
}
.cv-preview[data-template="classic"]{--preview-accent:#FF8C00;--preview-accent-soft:rgba(255,140,0,.14)}
.cv-preview[data-template="executive"]{--preview-accent:#0f172a;--preview-accent-soft:rgba(15,23,42,.1)}
.cv-preview[data-template="modern"]{--preview-accent:#4f46e5;--preview-accent-soft:rgba(79,70,229,.12)}
.cv-preview[data-template="premium"]{--preview-accent:#c98a00;--preview-accent-soft:rgba(201,138,0,.12)}
.cv-preview[data-template="soft"]{--preview-accent:#0f766e;--preview-accent-soft:rgba(15,118,110,.12)}
.cv-preview[data-template="impact"]{--preview-accent:#dc2626;--preview-accent-soft:rgba(220,38,38,.12)}
.cv-preview[data-template="executive"] .cv-layout,
.cv-preview[data-template="premium"] .cv-layout{grid-template-columns:1fr}
.cv-preview[data-template="executive"] .cv-sidebar,
.cv-preview[data-template="premium"] .cv-sidebar{display:flex;flex-wrap:wrap;gap:16px;padding:28px 30px;background:#f7f8fc;border-bottom:1px solid var(--ci-line)}
.cv-preview[data-template="executive"] .cv-main,
.cv-preview[data-template="premium"] .cv-main{padding-top:24px}
.cv-preview[data-template="executive"] .cv-avatar,
.cv-preview[data-template="premium"] .cv-avatar{margin-bottom:0}
.cv-preview[data-template="impact"] .cv-sidebar{background:linear-gradient(180deg,#1f232b 0%,#2b3140 100%)}
.cv-preview[data-template="soft"] .cv-sidebar{background:linear-gradient(180deg,#0f766e 0%,#115e59 100%)}
.cv-layout{display:grid;grid-template-columns:230px 1fr;min-height:780px}
.cv-sidebar{background:var(--preview-accent);color:#fff;padding:30px 24px}
.cv-avatar{
  width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);font-size:1.8rem;font-weight:900;
  margin-bottom:18px;letter-spacing:-.04em;
}
.cv-sidebar h4,.cv-section h3{margin:0 0 10px;letter-spacing:-.02em}
.cv-sidebar p{margin:0 0 8px;line-height:1.55;font-size:.92rem;color:rgba(255,255,255,.9)}
.cv-sidebar-block + .cv-sidebar-block{margin-top:24px}
.cv-main{padding:30px 30px 34px}
.cv-headline{padding-bottom:18px;border-bottom:1px solid var(--ci-line);margin-bottom:20px}
.cv-name{margin:0;color:var(--preview-dark);font-size:2rem;letter-spacing:-.04em;line-height:1}
.cv-role{margin:8px 0 0;color:var(--preview-accent);font-weight:800;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.cv-section + .cv-section{margin-top:18px}
.cv-section h3{font-size:.96rem;color:var(--preview-dark);text-transform:uppercase}
.cv-line{height:1px;background:var(--ci-line);margin:10px 0 14px}
.cv-section p,.cv-item p{margin:0;color:#535b68;line-height:1.6;font-size:.94rem}
.cv-item + .cv-item{margin-top:14px}
.cv-item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}
.cv-item strong{color:var(--preview-dark);display:block}
.cv-item span{color:#6b7280;font-size:.9rem}
.cv-skill-list{display:flex;flex-wrap:wrap;gap:8px}
.cv-skill-list i{
  font-style:normal;padding:8px 12px;border-radius:999px;
  background:var(--preview-accent-soft);color:var(--preview-dark);font-size:.86rem;font-weight:700;
}

.builder-form-panel{
  background:var(--ci-hero-bg);
  border-radius:32px;
  padding:22px;
  box-shadow:var(--ci-shadow);
}
.timeline{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  margin-bottom:20px;
  overflow:visible;
  padding:0;
  position:relative;
}
/* linha conectora entre círculos */
.timeline::before{
  content:'';
  position:absolute;
  top:14px;
  left:calc(50% / var(--tl-steps, 4) );
  right:calc(50% / var(--tl-steps, 4) );
  height:1px;
  background:#e2e5ea;
  z-index:0;
}
.timeline-step{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:0 4px 0;
  min-width:0;
}
/* círculo com número */
.timeline-step::before{
  content:attr(data-step);
  position:relative;
  z-index:1;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#e8eaf0;color:#8a94a6;font-weight:800;font-size:.75rem;
  border:2px solid #dde1ea;
  flex-shrink:0;
  margin-bottom:6px;
}
.timeline-step strong{display:block;font-size:.72rem;color:#8a94a6;line-height:1.2;font-weight:600}
.timeline-step span{display:none}
.timeline-step.is-active::before{background:var(--ci-accent);color:#fff;border-color:var(--ci-accent);box-shadow:0 0 0 3px rgba(255,140,0,.15)}
.timeline-step.is-active strong{color:var(--ci-accent);font-weight:700}
.timeline-step.is-complete::before{background:var(--ci-accent);color:#fff;border-color:var(--ci-accent)}
.timeline-step.is-complete strong{color:#1f232b;font-weight:600}
.form-step[hidden]{display:none !important}
.form-step-head h2{margin:0 0 6px;color:#1f232b;font-size:1.55rem;letter-spacing:-.03em}
.form-step-head p{margin:0 0 18px;color:#606775;line-height:1.65}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:8px;margin-bottom:14px}
.field label{font-size:.93rem;font-weight:800;color:#2b3340}
.field input,.field textarea, .field select{
  width:100%;border:1px solid rgba(31,35,43,.1);background:#fff;color:#212529;
  border-radius:16px;padding:14px 16px;outline:none;transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(255,140,0,.38);box-shadow:0 0 0 4px rgba(255,140,0,.1)}
.help-text{font-size:.85rem;color:#707785;margin-top:-4px}
.summary-card{
  background:#fff;border-radius:22px;padding:18px;border:1px solid rgba(31,35,43,.06);box-shadow:var(--ci-shadow-soft);
}
.summary-card ul{margin:10px 0 0;padding-left:18px;color:#5e6573;line-height:1.7}
.payment-actions,.download-actions,.builder-nav{display:flex;flex-wrap:wrap;gap:12px}
.builder-nav{justify-content:space-between;margin-top:20px;padding-top:18px;border-top:1px solid rgba(31,35,43,.08)}
.builder-nav .btn{min-height:52px;padding-inline:22px}
.builder-nav .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.inline-note{color:#67707e;font-size:.92rem;line-height:1.65}
.download-panel{
  background:var(--ci-hero-bg);
  border-radius:32px;
  padding:26px;
  box-shadow:var(--ci-shadow);
}
.download-card{
  background:#fff;border-radius:26px;padding:26px;border:1px solid rgba(31,35,43,.06);box-shadow:var(--ci-shadow-soft);
}
.download-card h2{margin:0 0 8px;color:#1f232b;font-size:1.9rem}
.download-card p{margin:0 0 16px;color:#59606d;line-height:1.7}
.small-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.small-meta span{padding:8px 12px;border-radius:999px;background:#f4f6fb;color:#5c6470;font-size:.88rem;font-weight:800}
.template-classic{--tpl-accent:#FF8C00}
.template-executive{--tpl-accent:#0f172a}
.template-modern{--tpl-accent:#4f46e5}
.template-premium{--tpl-accent:#c98a00}
.template-soft{--tpl-accent:#0f766e}
.template-impact{--tpl-accent:#dc2626}

@media (max-width: 1200px){
  .builder-workspace{grid-template-columns:1fr}
  .preview-panel{position:relative;top:auto}
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 960px){
  .brand-logo img{height:36px}
  .hero{padding:28px 0 56px}
  .hero-card{padding:28px 24px 0}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-copy{padding:0}
  .hero-copy h1,.hero-copy p{max-width:none}
  .hero-visual{min-height:auto;justify-content:center}
  .hero-visual img{width:min(100%, 620px)}
  .field-grid{grid-template-columns:1fr}
  .cv-layout{grid-template-columns:1fr}
  .cv-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cv-sidebar-block + .cv-sidebar-block{margin-top:0}
}
@media (max-width: 760px){
  .header-inner{min-height:auto;align-items:flex-start;flex-direction:column;gap:12px;padding:10px 0}
  .menu-toggle{display:inline-flex}
  .main-navigation{width:100%}
  .main-navigation ul{width:100%;display:none;flex-direction:column;align-items:stretch;padding-top:12px}
  .main-navigation.is-open ul{display:flex}
  .main-navigation a{width:100%}
  .brand-logo img{height:34px}
  .hero-card,.template-picker,.preview-panel,.builder-form-panel,.download-panel{padding:20px 18px;border-radius:26px}
  .hero-copy h1{font-size:clamp(2.15rem,9vw,3.25rem)}
  .hero-copy p{font-size:1rem;margin-bottom:22px}
  .btn{min-height:58px;width:100%}
  .hero-actions,.builder-nav,.payment-actions,.download-actions{display:grid;grid-template-columns:1fr;gap:12px}
  .builder-nav{justify-content:stretch}
  .template-grid{grid-template-columns:1fr}
  .cv-sidebar{grid-template-columns:1fr}
  .cv-main{padding:24px 18px 26px}
}


.models-page{padding:34px 0 74px}
.models-shell{display:grid;gap:24px}
.models-shell .template-picker{padding:32px}
.models-note{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-radius:22px;background:#fff;border:1px solid rgba(31,35,43,.06);box-shadow:var(--ci-shadow-soft);
}
.models-note strong{display:block;color:#1f232b;font-size:1.02rem}
.models-note span{display:block;margin-top:4px;color:#68707d;font-size:.94rem;line-height:1.6}
.models-note .btn{min-height:50px;white-space:nowrap}
.editor-page{padding:32px 0 70px}
.editor-shell{display:grid;gap:24px}
.timeline--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.preview-panel .btn{min-height:48px}
@media (max-width: 960px){
  .models-page,.editor-page{padding:28px 0 60px}
}
@media (max-width: 760px){
  .models-note{align-items:stretch}
  .models-note{display:grid}
  .models-note .btn{width:100%}
}



/* ── Typewriter effect ── */
.typewriter-text{
  display:inline-block;
  position:relative;
  min-height:1.2em;
}
.typewriter-text::after{
  content:'|';
  display:inline-block;
  margin-left:2px;
  color:var(--ci-accent);
  font-weight:900;
  animation:tw-blink .75s step-start infinite;
}
@keyframes tw-blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* ════════════════════════════════════════════
   TEMPLATE PREVIEW STYLES
   Cada .tpl-* define um layout visual distinto
════════════════════════════════════════════ */
.cv-preview-area { font-family: Inter, 'Segoe UI', Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #1f232b; min-height: 600px; flex: 1; display: flex; flex-direction: column; }
.cv-preview-area h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; }
.cv-preview-area h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.cv-preview-area h4 { margin: 0 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.cv-preview-area p  { margin: 0 0 6px; font-size: 12px; line-height: 1.55; }
.cv-preview-area strong { display: block; font-size: 12px; }

/* ── 1. Clássico Laranja ── */
.tpl-classic { display: flex; align-items: stretch; flex: 1; border-radius: 10px; overflow: hidden; }
.tpl-c-side  { background: #FF8C00; color: #fff; padding: 20px 14px; flex: 0 0 31.5%; }
.tpl-c-av    { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 900; font-size: 18px; margin: 0 auto 14px; }
.tpl-c-sb    { margin-bottom: 14px; }
.tpl-c-sb h4 { color: rgba(255,255,255,.7); }
.tpl-c-sb p  { color: rgba(255,255,255,.9); font-size: 11px; margin: 0 0 3px; }
.tpl-c-tags span { display: inline-block; padding: 2px 7px; background: rgba(255,255,255,.2); border-radius: 20px; font-size: 10px; margin: 2px 1px; color: #fff; }
.tpl-c-main  { padding: 20px 18px; }
.tpl-c-head h2 { font-size: 18px; color: #1a1a2e; }
.tpl-c-head p  { color: #FF8C00; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 2px 0 14px; }
.tpl-c-sec   { margin-bottom: 14px; }
.tpl-c-sec h3 { color: #FF8C00; border-bottom: 2px solid #FF8C00; padding-bottom: 4px; margin-bottom: 8px; }
.tpl-c-row   { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tpl-c-row strong { font-size: 12px; }
.tpl-c-row span   { font-size: 10px; color: #999; }
.tpl-c-co    { font-size: 11px; color: #FF8C00; margin: 0 0 4px; }

/* ── 2. Executivo ── */
.tpl-executive { border-radius: 10px; overflow: hidden; flex: 1; background: #fff; display: flex; flex-direction: column; }
.tpl-e-hd   { background: #0f172a; color: #fff; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tpl-e-hd h2 { font-size: 17px; margin: 0 0 3px; }
.tpl-e-hd p  { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.tpl-e-ct   { text-align: right; }
.tpl-e-ct span { display: block; font-size: 10px; color: #cbd5e1; margin-bottom: 2px; }
.tpl-e-body { display: flex; align-items: stretch; flex: 1; }
.tpl-e-left { padding: 16px 16px; border-right: 1px solid #e2e8f0; flex: 0 0 62.3%; }
.tpl-e-right { padding: 16px 14px; flex: 1; }
.tpl-e-sec  { margin-bottom: 14px; }
.tpl-e-sec h3 { color: #0f172a; border-bottom: 2px solid #0f172a; padding-bottom: 4px; margin-bottom: 8px; font-size: 10px; }
.tpl-e-row  { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tpl-e-row strong { font-size: 12px; color: #0f172a; }
.tpl-e-row span   { font-size: 10px; color: #64748b; }
.tpl-e-co   { font-size: 11px; color: #64748b; margin: 0 0 5px; }
.tpl-e-sk   { list-style: none; padding: 0; margin: 0; }
.tpl-e-sk li { padding: 4px 0; font-size: 11px; border-bottom: 1px solid #f1f5f9; color: #1e293b; }
.tpl-e-sk li::before { content: "▸ "; color: #0f172a; font-size: 9px; }

/* ── 3. Moderno ── */
.tpl-modern { border-left: 6px solid #4f46e5; border-radius: 10px; overflow: hidden; background: #fff; flex: 1; display: flex; flex-direction: column; }
.tpl-m-top  { padding: 18px 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ede9fe; }
.tpl-m-av   { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(135deg,#4f46e5,#7c3aed); display: grid; place-items: center; font-weight: 900; font-size: 17px; color: #fff; flex-shrink: 0; }
.tpl-m-nm   { margin: 0 0 2px; font-size: 17px; background: linear-gradient(90deg,#4f46e5,#7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tpl-m-rl   { margin: 0 0 6px; font-size: 10px; color: #7c3aed; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tpl-m-ct span { display: inline-block; font-size: 10px; color: #6b7280; margin-right: 8px; }
.tpl-m-bd   { display: flex; align-items: stretch; flex: 1; }
.tpl-m-main { padding: 14px 16px; flex: 0 0 74.6%; }
.tpl-m-side { padding: 14px 12px; background: #f5f3ff; border-left: 1px solid #ede9fe; flex: 1; }
.tpl-m-sec  { margin-bottom: 12px; }
.tpl-m-sec h3 { color: #4f46e5; font-size: 10px; letter-spacing: .1em; border-bottom: none; margin-bottom: 6px; }
.tpl-m-exp  { display: flex; gap: 8px; }
.tpl-m-dot  { width: 8px; height: 8px; border-radius: 50%; background: #4f46e5; flex-shrink: 0; margin-top: 3px; }
.tpl-m-exp strong { font-size: 12px; color: #1f1a3d; }
.tpl-m-co   { font-size: 10px; color: #7c3aed; margin: 2px 0 4px; }
.tpl-m-side h3 { color: #4f46e5; font-size: 10px; letter-spacing: .1em; }
.tpl-m-pills span { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #ede9fe; color: #4f46e5; font-size: 10px; font-weight: 700; margin: 2px 1px; }

/* ── 4. Premium Dourado ── */
.tpl-premium { border-radius: 10px; overflow: hidden; background: #fff; flex: 1; display: flex; flex-direction: column; }
.tpl-p-hd   { background: #1c1410; color: #fff; padding: 20px; text-align: center; }
.tpl-p-hd::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg,transparent,#c98a00,transparent); margin-top: 14px; }
.tpl-p-av   { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #c98a00; background: #2d2418; display: grid; place-items: center; font-size: 17px; font-weight: 900; color: #c98a00; margin: 0 auto 10px; }
.tpl-p-nm   { font-size: 17px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.tpl-p-rl   { color: #c98a00; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.tpl-p-ct   { display: flex; justify-content: center; gap: 12px; }
.tpl-p-ct span { font-size: 10px; color: #a0916e; }
.tpl-p-bd   { display: flex; align-items: stretch; flex: 1; }
.tpl-p-left { padding: 14px 16px; border-right: 1px solid #f3e8c8; flex: 0 0 62.3%; }
.tpl-p-right { padding: 14px 12px; background: #faf7f0; flex: 1; }
.tpl-p-sec  { margin-bottom: 12px; }
.tpl-p-sec h3 { color: #c98a00; border-bottom: 1px solid #e8d9aa; padding-bottom: 4px; margin-bottom: 8px; font-size: 10px; }
.tpl-p-row  { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tpl-p-row strong { font-size: 12px; color: #1c1410; }
.tpl-p-row span   { font-size: 10px; color: #a0916e; }
.tpl-p-co   { font-size: 11px; color: #c98a00; margin: 0 0 4px; }
.tpl-p-sk   { list-style: none; padding: 0; margin: 0; }
.tpl-p-sk li { padding: 4px 0; font-size: 11px; color: #3a2e1e; border-bottom: 1px solid #f3e8c8; }
.tpl-p-sk li::before { content: "◆ "; font-size: 8px; color: #c98a00; }

/* ── 5. Soft Green ── */
.tpl-soft   { display: flex; align-items: stretch; flex: 1; border-radius: 10px; overflow: hidden; }
.tpl-s-main { padding: 18px 16px; border-right: 1px solid #ccfbf1; flex: 1; }
.tpl-s-head h2 { color: #0f766e; font-size: 17px; margin: 0 0 3px; }
.tpl-s-head p  { color: #64748b; font-size: 11px; margin: 0 0 14px; }
.tpl-s-sec  { margin-bottom: 12px; }
.tpl-s-sec h3 { color: #0f766e; font-size: 10px; letter-spacing: .1em; border-left: 3px solid #0f766e; padding-left: 7px; }
.tpl-s-card { background: #f0fdf4; border-radius: 7px; padding: 10px 12px; }
.tpl-s-card strong { font-size: 12px; color: #134e4a; }
.tpl-s-sub  { font-size: 10px; color: #0f766e; display: block; margin: 2px 0 4px; }
.tpl-s-aside { background: linear-gradient(180deg,#0f766e,#115e59); color: #fff; padding: 18px 14px; flex: 0 0 44.2%; }
.tpl-s-av   { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 17px; font-weight: 900; margin: 0 auto 14px; }
.tpl-s-abl  { margin-bottom: 14px; }
.tpl-s-abl h4 { color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: .1em; margin-bottom: 6px; }
.tpl-s-abl p  { font-size: 10px; opacity: .88; margin: 0 0 3px; }
.tpl-s-bitem { margin-bottom: 6px; }
.tpl-s-bitem span { font-size: 10px; display: block; margin-bottom: 3px; }
.tpl-s-bar  { height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; }
.tpl-s-bar div { height: 3px; background: #fff; border-radius: 2px; width: 70%; }

/* ── 6. Impacto ── */
.tpl-impact { display: flex; align-items: stretch; flex: 1; border-radius: 10px; overflow: hidden; }
.tpl-i-left { background: #111827; padding: 18px 14px; border-right: 1px solid rgba(220,38,38,.2); flex: 0 0 36.2%; }
.tpl-i-av   { width: 52px; height: 52px; border: 2px solid #dc2626; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: #dc2626; margin: 0 0 12px; }
.tpl-i-nm   { font-size: 14px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 5px; }
.tpl-i-rl   { color: #dc2626; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin: 0 0 10px; }
.tpl-i-div  { height: 2px; background: linear-gradient(90deg,#dc2626,transparent); margin-bottom: 12px; }
.tpl-i-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); margin: 0 0 5px; }
.tpl-i-left p { font-size: 10px; color: rgba(255,255,255,.72); margin: 0 0 3px; }
.tpl-i-tags span { display: inline-block; padding: 2px 7px; border: 1px solid rgba(220,38,38,.4); color: rgba(255,255,255,.78); border-radius: 2px; font-size: 9px; margin: 2px 1px; }
.tpl-i-right { background: #1f2937; padding: 18px 14px; }
.tpl-i-sec  { margin-bottom: 12px; }
.tpl-i-sec h3 { color: #dc2626; border-bottom: 1px solid rgba(220,38,38,.3); padding-bottom: 4px; margin-bottom: 8px; font-size: 9px; }
.tpl-i-sec p  { color: rgba(255,255,255,.65); font-size: 11px; }
.tpl-i-row  { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tpl-i-row strong { font-size: 12px; color: #fff; }
.tpl-i-row span   { font-size: 10px; color: rgba(255,255,255,.44); }
.tpl-i-co   { font-size: 11px; color: #dc2626; margin: 0 0 4px; }

/* ── Photo Upload Block ── */
/* ── Bloco principal de upload de foto ── */
.photo-upload-block{
  display:flex;
  align-items:flex-start;
  gap:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,35,43,.08);
  border-radius:16px;
  padding:20px;
  margin-bottom:18px;
}

/* Coluna única: avatar → controles → botão */
.photo-col-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}

/* Wrapper do avatar (mantém tamanho fixo) */
.photo-avatar-wrap{
  position:relative;
  width:160px;
  height:200px;
}

/* Frame do avatar (contém bg + overlay da foto) */
.photo-avatar-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.photo-avatar-bg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ── Overlay circular (foto do usuário recortada em círculo) ── */
/* Ajuste top/left/width/height para encaixar exatamente no rosto do avatar redondo */
.photo-avatar-overlay--circle{
  position:absolute;
  top:6%;
  left:14%;
  width:72%;
  height:57%;
  border-radius:50%;
  overflow:hidden;
  background:transparent;
  display:grid;
  place-items:center;
}

/* ── Overlay quadrado (foto do usuário recortada com bordas arredondadas) ── */
/* Ajuste top/left/width/height para encaixar na moldura quadrada do avatar */
.photo-avatar-overlay--square{
  position:absolute;
  top:13%;
  left:20%;
  width:60%;
  height:48%;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  display:grid;
  place-items:center;
  transform:rotate(-6deg);
  transform-origin:center center;
}

/* Foto do usuário dentro do overlay */
.photo-avatar-overlay--circle img,
.photo-avatar-overlay--square img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Esconde os elementos .photo-preview antigos (mantidos apenas para o JS) */
.photo-preview{ display:none !important; }
.photo-preview-initials{ display:none !important; }

/* Botão principal grande (laranja, abaixo do avatar) */
.btn-photo-main-upload{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:var(--ci-accent);
  color:#fff;
  border-radius:12px;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  width:100%;
  justify-content:center;
  transition:opacity .15s;
  white-space:nowrap;
}
.btn-photo-main-upload:hover{ opacity:.88; }

.photo-hint-center{
  font-size:.75rem;
  color:#9aa0ae;
  margin:0;
  text-align:center;
}

/* Controles de seleção de formato (entre avatar e botão) */
.photo-shape-below{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
}
.photo-shape-label strong{ font-size:.88rem; color:#2b3340; }
.photo-shape-toggle{
  display:flex;
  gap:14px;
  justify-content:center;
}
.shape-opt{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  font-size:.85rem;
  color:#3a4252;
  font-weight:600;
}
.shape-opt input[type="radio"]{ accent-color:var(--ci-accent); width:15px; height:15px; cursor:pointer; }
/* Mantém compatibilidade caso .photo-upload-controls ainda apareça */
.photo-upload-controls{ display:none; }

.btn-photo-remove{
  background:none;
  border:none;
  color:#e05252;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  padding:0;
  text-align:center;
  width:fit-content;
}
.btn-photo-remove:hover{ text-decoration:underline; }

/* avatar com foto no preview */
.tpl-c-av img,.tpl-p-av img,.tpl-m-av img,.tpl-s-av img,.tpl-i-av img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tpl-c-av.has-photo,.tpl-p-av.has-photo,.tpl-s-av.has-photo{ background:transparent; }
.tpl-m-av.has-photo{ background:transparent; }
.tpl-i-av.has-photo{ background:transparent; }