@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,500,0,0");@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap");@font-face{font-family:Nagel VF;src:url(../fonts/Nagel-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Nagel VF;src:url(../fonts/Nagel-Medium.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}@font-face{font-family:Nagel VF;src:url(../fonts/Nagel-Bold.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}:root{--primary-green: #063F85;--primary-green-hover: #052F66;--primary-blue-share: #063F85;--primary-blue-share-hover: #052F66;--text-dark: #111827;--text-muted: #6B7280;--bg-page: #EAECEF;--card-bg: #FFFFFF}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-page)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;width:100%;min-height:100vh;overflow-x:hidden;color:var(--text-dark);-webkit-font-smoothing:antialiased}.App{width:100%;min-height:100vh;display:flex;flex-direction:column;position:relative}.banner-container{width:100%;background:var(--bg-page);display:flex;justify-content:center;align-items:center;box-shadow:0 4px 12px #0000001a;overflow:hidden}.banner-picture{width:100%;display:flex;justify-content:center;align-items:center}.banner-img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;display:block}@media(max-width:768px){.banner-container{height:auto;padding:0}.banner-picture{width:100%;height:auto}.banner-img{width:100%;height:auto;max-width:100%;max-height:none;display:block}}.main-content{width:100%;max-width:480px;flex:1;display:flex;flex-direction:column;align-items:center;align-self:center;margin:0 auto;padding:28px 16px 48px}.title-section{text-align:center;margin-bottom:24px;padding:0 12px}.main-title{font-family:Nagel VF,Montserrat,sans-serif;font-size:clamp(1.3rem,6.4vw,1.9rem);font-weight:900;color:var(--text-dark);margin:0 0 8px;letter-spacing:-.02em;text-transform:uppercase;line-height:1.2;white-space:nowrap}.main-subtitle{font-family:Nagel VF,Montserrat,sans-serif;font-size:.95rem;color:var(--text-muted);margin:0 auto;max-width:360px;line-height:1.45;font-weight:400}.content-card{background:var(--card-bg);border-radius:24px;padding:19.282px 20.297px;width:342px;max-width:calc(100% - 24px);box-shadow:0 6px 24px #0000000f;display:flex;flex-direction:column;align-items:center;gap:10.148px;position:relative}.step-content{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}.big-icon-circle{width:92px;height:92px;background-color:var(--primary-blue-share);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 6px 16px #063F8540;transition:transform .2s ease}.big-icon-circle:hover{transform:scale(1.03)}.step-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}.step-badge{width:26px;height:26px;background-color:var(--primary-blue-share);color:#fff;border-radius:50%;font-family:Montserrat,sans-serif;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-title{font-family:Nagel VF,Montserrat,sans-serif;font-size:1.3rem;font-weight:800;color:var(--text-dark);margin:0;letter-spacing:-.01em}.step-subtitle{font-family:Nagel VF,Montserrat,sans-serif;font-size:.9rem;color:var(--text-muted);margin:0 0 24px}.primary-action-btn{background-color:var(--primary-blue-share);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-family:Montserrat,sans-serif;font-size:1.05rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:all .2s ease;box-shadow:0 4px 14px #063F8540}.btn-upload-icon{height:18px;width:auto;display:block}.primary-action-btn:hover{background-color:var(--primary-blue-share-hover);transform:translateY(-2px);box-shadow:0 6px 18px #063F8559}.primary-action-btn:active{transform:scale(.98)}.editor-state{width:100%;display:flex;flex-direction:column;align-items:center}.step-header-row{display:flex;align-items:flex-start;gap:10px;width:100%;margin-bottom:20px}.step-header-row .step-badge{margin-top:4px}.step-header-row .step-title{font-family:Montserrat,sans-serif;font-size:1.3rem;font-weight:800;color:var(--text-dark);line-height:1.2;margin:0;text-align:left}.frame-section{width:100%;display:flex;justify-content:center;align-items:center}.frame-section-inner{border-radius:20px;overflow:hidden;box-shadow:0 8px 30px #0000001f;width:fit-content;max-width:100%;margin:0 auto;display:block}.editor-controls{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:18px;gap:16px}.zoom-controls{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;background:#f8fafc;padding:8px 16px;border-radius:12px}.zoom-minus,.zoom-plus{color:#94a3b8;display:flex;align-items:center;justify-content:center}.zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:#cbd5e1;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary-blue-share);cursor:pointer;border:3px solid white;box-shadow:0 2px 6px #0003}.frame-selector-container{width:100%;text-align:center;margin:4px 0 6px}.frame-selector-label{font-family:Inter,sans-serif;font-size:.92rem;color:var(--text-muted);margin:0 0 12px}.frame-thumbnails-grid{display:flex;justify-content:center;gap:14px;width:100%}.frame-thumb-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s ease}.frame-thumb-img-wrapper{width:105px;height:105px;aspect-ratio:1/1;border-radius:14px;border:2.5px solid #e2e8f0;overflow:hidden;background-color:#f8fafc;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0px;transition:all .2s ease;box-shadow:0 2px 8px #0000000a}.frame-thumb-item:hover .frame-thumb-img-wrapper{border-color:#cbd5e1;transform:translateY(-2px)}.frame-thumb-item.active .frame-thumb-img-wrapper{border-color:var(--primary-blue-share);box-shadow:0 0 0 3px #063F8540;transform:scale(1.02)}.frame-thumb-img{width:100%;height:100%;object-fit:contain;display:block}.frame-thumb-label{font-family:Montserrat,sans-serif;font-size:.78rem;font-weight:700;color:var(--text-muted);transition:color .2s ease}.frame-thumb-item.active .frame-thumb-label{color:var(--primary-blue-share);font-weight:800}.action-buttons-group{display:flex;flex-direction:column;gap:10px;width:100%}.download-hint{font-size:13px;color:var(--text-muted);text-align:center;margin-top:14px;line-height:1.4;padding:0 8px}.secondary-outline-btn{background-color:#fff;color:var(--primary-blue-share);border:2px solid var(--primary-blue-share);border-radius:12px;padding:14px 20px;font-family:Montserrat,sans-serif;font-size:1.05rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;transition:all .2s ease}.secondary-outline-btn:hover{background-color:#e8f1ff;transform:translateY(-1px)}.secondary-outline-btn:active{transform:scale(.98)}.result-preview-container{width:100%;border-radius:18px;overflow:hidden;box-shadow:0 8px 30px #0000001f;margin-bottom:16px;background-color:#f8fafc}.result-preview-img{width:100%;height:auto;display:block}.blue-share-action-btn{background-color:var(--primary-blue-share);color:#fff;border:none;border-radius:12px;padding:14px 16px;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;width:100%;transition:all .2s ease;box-shadow:0 4px 14px #1b82b840}.blue-share-action-btn:hover{background-color:var(--primary-blue-share-hover);transform:translateY(-2px);box-shadow:0 6px 18px #1b82b859}.blue-share-action-btn:active{transform:scale(.98)}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#fff;width:100%;max-width:320px;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 20px 40px #0003;animation:modalIn .25s cubic-bezier(.16,1,.3,1)}@keyframes modalIn{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header h3{margin:0;font-family:Montserrat,sans-serif;font-size:1.2rem;font-weight:800;text-align:center;color:var(--text-dark)}.modal-options{display:flex;flex-direction:column;gap:10px}.modal-option{display:flex;align-items:center;padding:14px 18px;background:#f8fafc;border-radius:14px;gap:14px;cursor:pointer;transition:all .2s ease;border:1px solid #e2e8f0;width:100%;box-sizing:border-box;font-family:Montserrat,sans-serif;font-size:.95rem;font-weight:700;color:var(--text-dark)}.modal-option:hover{background:#e8f1ff;border-color:var(--primary-blue-share);color:var(--primary-blue-share)}.modal-icon{font-size:1.4rem}.modal-cancel{background:none;border:none;color:var(--text-muted);font-family:Inter,sans-serif;font-weight:600;padding:6px;cursor:pointer;display:block;margin:0 auto;transition:color .2s}.modal-cancel:hover{color:var(--text-dark)}@media(max-width:480px){.main-content{padding:20px 12px 48px}.main-subtitle{font-size:.88rem}.content-card{border-radius:20px}.big-icon-circle{width:80px;height:80px}.step-title{font-size:1.2rem}}.phone-shell{width:100%;display:flex;flex-direction:column}@media(min-width:769px){html,body{height:100%;overflow:hidden}body{background-color:transparent!important;background-image:radial-gradient(60% 70% at 100% 0%,#94d7948c,#94d79400 60%),linear-gradient(100deg,#ffffff,#cfe8c0 55%,#94d794);background-repeat:no-repeat}.App{height:100vh;align-items:center;padding:29px 20px 0;overflow:hidden}.phone-shell{width:390px;max-width:100%;height:calc(100vh - 58px);border-radius:18px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg-page);margin-bottom:29px;box-shadow:0 18px 40px #0000001a,0 73px 73px #00000017,0 164px 98px #0000000d,0 291px 117px #00000003}.phone-shell\u003e*{flex-shrink:0}.main-title{font-size:1.45rem}}#root{width:100%}.camera-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000;overflow-y:auto}.camera-card{width:100%;max-width:420px;background:#000;border-radius:24px;padding:20px 20px 16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 45px #000000bf;color:#f5f5f5;display:flex;flex-direction:column}.camera-header{text-align:center;margin-bottom:12px}.camera-header h2{font-size:18px;font-weight:700;margin-bottom:4px}.camera-header p{font-size:13px;opacity:.8}.camera-wrapper{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#000;max-height:60vh;margin-bottom:12px;flex:1 1 auto}.camera-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}.camera-actions{display:flex;gap:10px;margin-top:4px;flex-shrink:0}.btn{flex:1;border-radius:999px;border:none;padding:10px 18px;font-size:15px;cursor:pointer;font-weight:600;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.btn:active{transform:scale(.97);box-shadow:none;filter:brightness(.9)}.btn-primary{background:#28a745;color:#fff;box-shadow:0 6px 16px #28a74559}.btn-danger{background:#dc3545;color:#fff;box-shadow:0 6px 16px #dc354566}@media(max-width:480px){.camera-overlay{padding:0}.camera-card{border-radius:0;max-width:100%;min-height:100vh;padding:16px 12px 12px}.camera-wrapper{max-height:65vh}.camera-header h2{font-size:17px}.camera-header p{font-size:12px}.btn{font-size:14px;padding:9px 14px}}.site-footer{background:#063F85;width:100%}.site-footer-inner{width:100%;border-top:.667px solid rgba(255,255,255,.24);padding:28px 20px 20px;box-sizing:border-box}.site-footer-top{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:20px}.site-footer-logo{width:120px;height:auto;max-width:100%;display:block;margin:0 auto}.site-footer-nav{display:none}.site-footer-nav a{color:#fff;font-family:Inter,sans-serif;font-size:14.701px;font-weight:400;line-height:14.701px;letter-spacing:1.323px;text-transform:uppercase;text-decoration:none;transition:color .2s ease}.site-footer-nav a:hover{color:#4da3ff}.site-footer-cta{display:none}.site-footer-cta:hover{background:#063F85;color:#063F85}.site-footer-cta svg{width:14px;height:14px;flex-shrink:0}.site-footer-divider{width:100%;border-bottom:1px solid rgba(255,255,255,.24);margin:20px 0 14px}.site-footer-bottom{display:flex;flex-direction:column;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;padding:0 8px}.site-footer-legal{color:#ffffffb8;text-align:center;font-family:Inter,sans-serif;font-size:12.8px;font-weight:400;line-height:19.2px}.site-footer-copyright{color:#ffffff8c;text-align:center;font-family:Inter,sans-serif;font-size:12.48px;font-weight:400;line-height:18.72px;text-transform:uppercase}.site-footer-legal--desktop,.site-footer-copyright--desktop{display:none}.site-footer-legal--mobile,.site-footer-copyright--mobile{display:block}.site-footer-copyright--mobile{display:block!important;max-width:340px!important;white-space:normal!important;line-height:1.35!important;font-size:9.2px!important;letter-spacing:.01em!important}.site-footer-copyright--mobile br{display:block!important}.contato-modal-backdrop{position:fixed;inset:0;z-index:200;background:#0009;display:flex;align-items:flex-end;justify-content:center;padding:20px;animation:contatoFadeIn .2s ease}.contato-modal{position:relative;width:100%;max-width:340px;background:#063F85;border:1px solid rgba(246,237,209,.15);border-radius:18px;padding:22px;box-shadow:0 24px 60px #00000080;animation:contatoSlideUp .26s cubic-bezier(.16,1,.3,1)}@keyframes contatoFadeIn{0%{opacity:0}to{opacity:1}}@keyframes contatoSlideUp{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}.contato-modal-fechar{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#ffffff99;font-size:16px;cursor:pointer;padding:6px;line-height:1;transition:color .2s ease}.contato-modal-fechar:hover{color:#ffffff}.contato-modal-lista{display:flex;flex-direction:column}.contato-modal-opcao{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-radius:10px;text-decoration:none;color:#ffffff;transition:background .2s ease}.contato-modal-opcao:hover,.contato-modal-opcao:focus-visible{background:#4da3ff1a}.contato-modal-opcao+.contato-modal-opcao{border-top:1px solid rgba(246,237,209,.1)}.contato-modal-opcao svg{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:#4da3ff}.contato-modal-opcao strong{display:block;font-family:Montserrat,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:15px;color:#4da3ff;margin-bottom:3px}.contato-modal-opcao span{display:block;font-size:12.5px;color:#ffffffa6;line-height:1.4}.contato-modal-cta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding:14px 20px;border-radius:999px;background:#4da3ff;color:#063F85;font:800 13.5px/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:filter .2s ease,transform .2s ease}.contato-modal-cta:hover,.contato-modal-cta:focus-visible{filter:brightness(1.08);transform:translateY(-1px);color:#063F85}.contato-modal-cta-icone{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#063F852e;flex-shrink:0}.contato-modal-cta-icone svg{width:14px;height:14px;color:#063F85}

/* Ajuste solicitado: todo o conteúdo central do sistema de perfil em Montserrat */
.main-content,.main-content *{font-family:Montserrat,sans-serif!important}

/* Tipografia do miolo — referência aprovada (Inter). Topo/rodapé preservados. */
.main-content,.main-content button,.main-content input,.main-content select,.main-content textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.main-content .main-title{font-family:Inter,sans-serif;font-weight:900}
.main-content .main-subtitle{font-family:Inter,sans-serif;font-weight:400}
.main-content .step-title,.main-content .step-header-row .step-title{font-family:Inter,sans-serif;font-weight:800}
.main-content .step-badge{font-family:Inter,sans-serif;font-weight:800}
.main-content .step-subtitle,.main-content .frame-selector-label,.main-content .download-hint{font-family:Inter,sans-serif;font-weight:400}
.main-content .primary-action-btn,.main-content .secondary-outline-btn,.main-content .blue-share-action-btn{font-family:Inter,sans-serif;font-weight:700}
.main-content .frame-thumb-label{font-family:Inter,sans-serif;font-weight:700}
.main-content .modal-header h3{font-family:Inter,sans-serif;font-weight:800}
.main-content .modal-option{font-family:Inter,sans-serif;font-weight:700}
.main-content .modal-cancel{font-family:Inter,sans-serif;font-weight:500}

/* Novo layout da etapa 1 — referência enviada */
.step-content{gap:0}.upload-step-pill{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 16px;padding:7px 13px;border:1px solid #9fc4ff;border-radius:999px;background:#eff5ff;color:#063F85;font:700 .82rem/1 Inter,sans-serif;box-shadow:0 1px 4px #00000008}.upload-main-title{margin:0 0 8px;color:#111827;font:900 1.85rem/1.15 Inter,sans-serif;letter-spacing:-.035em}.upload-main-subtitle{margin:0 0 22px;color:#6b7280;font:400 1rem/1.4 Inter,sans-serif}.upload-dropzone{width:100%;padding:38px 28px 30px;border:2px dashed #063F85;border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center;text-align:center}.upload-icon-circle{width:94px;height:94px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#063F85,#0B5BBF);box-shadow:0 10px 20px #063F8533;margin-bottom:18px}.upload-drag-title{color:#111827;font:800 1.15rem/1.25 Inter,sans-serif;margin-bottom:5px}.upload-or-text{color:#6b7280;font:400 .92rem/1.4 Inter,sans-serif;margin-bottom:22px}.upload-new-btn{max-width:290px;min-height:58px;border-radius:14px;font-size:1.08rem;margin:0 auto}.upload-formats{margin-top:20px;color:#7b8190;font:400 .76rem/1.4 Inter,sans-serif}.content-card:has(.upload-dropzone){width:440px;max-width:calc(100% - 20px);padding:26px 24px;border-radius:24px}@media(max-width:480px){.content-card:has(.upload-dropzone){padding:22px 14px;width:100%;max-width:calc(100% - 20px)}.upload-main-title{font-size:1.6rem}.upload-main-subtitle{font-size:.92rem}.upload-dropzone{padding:30px 16px 24px}.upload-icon-circle{width:82px;height:82px}.upload-new-btn{min-height:54px}.upload-formats{font-size:.7rem}}

/* Tipografia final solicitada para o miolo — Inter. Topo e rodapé não alterados. */
.main-content,.main-content *{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important}
.main-content .main-title{font-weight:900!important}
.main-content .main-title .perfil-green{color:var(--primary-blue-share)!important;font-weight:900!important}
.main-content .step-title,.main-content .step-header-row .step-title,.main-content .upload-drag-title{font-weight:800!important}
.main-content .main-subtitle,.main-content .step-subtitle,.main-content .upload-main-subtitle,.main-content .upload-or-text,.main-content .upload-formats,.main-content .frame-selector-label,.main-content .download-hint{font-weight:400!important}
.main-content .primary-action-btn,.main-content .secondary-outline-btn,.main-content .blue-share-action-btn,.main-content .upload-new-btn,.main-content .modal-option,.main-content .frame-thumb-label{font-weight:700!important}
.main-content .step-badge{font-weight:800!important}

/* CORRECAO: titulo inteiro preto */
.main-title,.main-title .perfil-green{color:#111827!important;}

/* CORRECAO FINAL: titulo inteiro preto, inclusive PERFIL */
.main-content .main-title,
.main-content .main-title .perfil-green,
.main-content .main-title span,
.main-title .perfil-green {
  color: #111827 !important;
}

.upload-step-pill{display:inline-flex!important;align-items:center!important;gap:5px!important}.upload-step-camera{width:20px!important;height:20px!important;object-fit:contain!important;display:block!important}

/* Icone de camera tipografico no indicador Passo 1 de 3 */
.upload-step-camera-font{font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif!important;font-size:17px!important;line-height:1!important;color:#063F85!important;font-weight:400!important;display:inline-block!important;margin-right:6px!important;vertical-align:-1px!important;font-variant-emoji:text!important;}

/* Ajuste final: icone e texto do indicador PASSO 1 DE 3 */
.upload-step-pill{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;line-height:1!important;vertical-align:middle!important}
.upload-step-camera-font{font-size:20px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;vertical-align:middle!important}

.upload-step-camera-font{margin-top:-5px !important;}

.upload-photo-trigger{border:0!important;padding:0!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important}
.upload-new-btn svg{flex:0 0 auto;margin-right:8px!important}


/* V-mobile: icone de camera por fonte + largura fixa do botao Tirar foto */
.upload-step-camera-font{
  font-family:"Material Symbols Rounded"!important;
  font-weight:500!important;
  font-style:normal!important;
  font-size:20px!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  word-wrap:normal!important;
  direction:ltr!important;
  -webkit-font-feature-settings:"liga"!important;
  -webkit-font-smoothing:antialiased!important;
  font-feature-settings:"liga"!important;
  color:#063F85!important;
  margin-top:-5px!important;
  margin-right:0!important;
}
.upload-step-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  line-height:1!important;
}
.upload-new-btn{
  width:290px!important;
  max-width:100%!important;
  min-width:0!important;
  flex:0 0 auto!important;
  align-self:center!important;
  box-sizing:border-box!important;
}
@media(max-width:480px){
  .upload-new-btn{
    width:290px!important;
    max-width:100%!important;
  }
}

/* Ajuste final: alinhamento do selo e do botao de camera */
.upload-step-pill .upload-step-camera-font{
  font-size:20px!important;
  margin-top:0!important;
  margin-right:0!important;
  line-height:1!important;
  align-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.upload-step-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.upload-new-btn{
  width:320px!important;
  max-width:calc(100% - 24px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
@media(max-width:480px){
  .upload-new-btn{
    width:320px!important;
    max-width:calc(100% - 24px)!important;
  }
}


/* Ajuste mobile: botão "Tirar foto" alinhado visualmente com "Escolha da sua galeria" */
@media (max-width: 600px) {
  .main-content .content-card .primary-action-btn,
  .main-content .content-card .camera-action-btn,
  .main-content .content-card button.tirar-foto,
  .main-content .content-card .take-photo-btn {
    width: 72% !important;
    max-width: 290px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}


/* Aproxima o ícone da câmera do texto "Tirar foto" */
@media (max-width: 600px) {
  .main-content .content-card .primary-action-btn,
  .main-content .content-card .camera-action-btn,
  .main-content .content-card button.tirar-foto,
  .main-content .content-card .take-photo-btn {
    gap: 5px !important;
  }
}


/* Ajuste solicitado para a área de upload */
.upload-dropzone {
    border: 1px dashed #063F85 !important;
}


/* Ícone da câmera a 5px do texto "Tirar foto" */
.take-photo-btn,
.camera-action-btn,
button.tirar-foto,
.primary-action-btn {
    gap: 5px !important;
}

.take-photo-btn i,
.camera-action-btn i,
button.tirar-foto i,
.primary-action-btn i {
    margin-right: 0 !important;
}


/* Ajuste visual conforme referência enviada: câmera praticamente junto ao texto */
.take-photo-btn,
.camera-action-btn,
button.tirar-foto,
.primary-action-btn {
    gap: 2px !important;
}

.take-photo-btn i,
.camera-action-btn i,
button.tirar-foto i,
.primary-action-btn i,
.take-photo-btn svg,
.camera-action-btn svg,
button.tirar-foto svg,
.primary-action-btn svg {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Espaçamento vertical do título "CRIE SUA FOTO DE PERFIL" */
.profile-title,
.hero-title,
h1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Subtítulo principal mais equilibrado no mobile */
@media (max-width: 600px) {
  .profile-subtitle,
  .hero-subtitle {
    max-width: 620px !important;
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }
}


/* Mobile: manter títulos e ação solicitados em uma única linha */
@media (max-width: 600px) {
  .step-title,
  .editor-step-title,
  .result-step-title,
  .generate-profile-btn,
  .generate-btn {
    white-space: nowrap !important;
  }

  /* Reduz somente o necessário para caber no mobile */
  .step-title,
  .editor-step-title,
  .result-step-title {
    font-size: clamp(20px, 5.1vw, 28px) !important;
    line-height: 1.15 !important;
  }

  .generate-profile-btn,
  .generate-btn {
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.1 !important;
  }

  /* Caso os títulos estejam em headings genéricos dentro dos passos */
  .step-card h2,
  .step-card h3,
  .editor-card h2,
  .editor-card h3,
  .result-card h2,
  .result-card h3 {
    white-space: nowrap !important;
    font-size: clamp(20px, 5.1vw, 28px) !important;
    line-height: 1.15 !important;
  }
}

/* CORREÇÃO REAL: etapas 2 e 3 e botão em uma única linha */
@media (max-width: 600px) {
  .step-header-row {
    align-items: center !important;
    gap: 8px !important;
  }

  .step-header-row .step-badge {
    margin-top: 0 !important;
  }

  .step-header-row .step-title {
    white-space: nowrap !important;
    font-size: clamp(16px, 4.25vw, 20px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    flex: 1 1 auto !important;
  }

  .action-buttons-group .primary-action-btn {
    white-space: nowrap !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Trocar foto com exatamente a mesma largura/altura visual do botão Gerar foto de perfil */
@media (max-width: 600px) {
  .action-buttons-group {
    align-items: center !important;
  }

  .action-buttons-group .primary-action-btn,
  .action-buttons-group .secondary-action-btn {
    width: 100% !important;
    max-width: 410px !important;
    min-height: 74px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: força Trocar foto a usar exatamente a mesma caixa do Gerar foto de perfil */
@media (max-width: 600px) {
  .action-buttons-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .action-buttons-group .primary-action-btn,
  .action-buttons-group .secondary-action-btn {
    width: min(100%, 410px) !important;
    max-width: 410px !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    flex: 0 0 74px !important;
  }

  /* remove largura maior herdada especificamente do botão secundário */
  .action-buttons-group .secondary-action-btn {
    align-self: center !important;
  }
}

/* CORREÇÃO REAL — classes usadas pelo sistema */
@media (max-width: 600px) {
  .action-buttons-group .primary-action-btn,
  .action-buttons-group .secondary-outline-btn {
    width: 410px !important;
    max-width: calc(100% - 48px) !important;
    height: 74px !important;
    min-height: 74px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 74px !important;
  }
}

/* FINAL: os dois botões da etapa 2 usam exatamente a mesma geometria */
@media (max-width: 600px) {
  .editor-state .action-buttons-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .editor-state .action-buttons-group > button.primary-action-btn,
  .editor-state .action-buttons-group > button.secondary-outline-btn {
    width: 78% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    flex: 0 0 74px !important;
  }
}

/* ETAPA FINAL — Salvar e Compartilhar e Trocar foto exatamente do mesmo tamanho */
@media (max-width: 600px) {
  .result-state .action-buttons-group,
  .final-state .action-buttons-group,
  .result-actions,
  .share-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .result-state .action-buttons-group > button,
  .final-state .action-buttons-group > button,
  .result-actions > button,
  .share-actions > button,
  button.share-btn,
  button.save-share-btn,
  button.secondary-outline-btn {
    width: 78% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    flex: 0 0 74px !important;
  }
}

/* CORREÇÃO PELA CLASSE REAL DA ETAPA FINAL:
   Salvar e Compartilhar = .blue-share-action-btn
   Trocar foto = .secondary-outline-btn */
@media (max-width: 600px) {
  .main-content .blue-share-action-btn,
  .main-content .secondary-outline-btn {
    width: 78% !important;
    max-width: 410px !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    align-self: center !important;
  }
}

/* PASSO A PASSO PADRONIZADO NAS 3 ETAPAS */
.editor-state > .upload-step-pill {
  margin-bottom: 16px !important;
}

.step-title-centered {
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 20px !important;
}

/* Mantém o selo alinhado e igual em todas as etapas */
.upload-step-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 7px 13px !important;
  border: 1px solid #9fc4ff !important;
  border-radius: 999px !important;
  background: #eff5ff !important;
  color: #063F85 !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.upload-step-pill .upload-step-camera-font {
  font-family: "Material Symbols Rounded" !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #063F85 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

@media (max-width: 600px) {
  .step-title-centered {
    white-space: nowrap !important;
    font-size: clamp(17px, 4.7vw, 22px) !important;
    line-height: 1.12 !important;
  }
}

/* ÍCONES VETORIAIS DO MODAL DE SELEÇÃO — BOLD STROKE */
.modal-icon svg {
  stroke-width: 2.8px !important;
  display: block !important;
  color: var(--primary-blue-share) !important;
}

/* AI SPARKLES — animação Lottie no botão Gerar foto de perfil */
.primary-action-btn lottie-player,
.primary-action-btn .ai-animated-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  margin-right: 6px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* SUBTÍTULO PRINCIPAL — linhas equilibradas, sem efeito de cone */
.main-subtitle {
  width: calc(100% - 24px) !important;
  max-width: 610px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  line-height: 1.45 !important;
}

.main-subtitle br {
  display: block !important;
}

@media (max-width: 600px) {
  .main-subtitle {
    width: calc(100% - 20px) !important;
    max-width: 610px !important;
    font-size: clamp(14px, 3.7vw, 17px) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
  }
}

/* MOBILE — reduz somente o subtítulo principal para manter "amigos" na 2ª linha */
@media (max-width: 600px) {
  .main-subtitle {
    width: calc(100% - 16px) !important;
    max-width: 640px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }
  .main-subtitle br {
    display: block !important;
  }
}


/* PADRÃO FINAL — bloco branco com a mesma largura nas etapas 1, 2 e 3 */
.main-content > .content-card {
  width: 440px !important;
  max-width: calc(100% - 20px) !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 480px) {
  .main-content > .content-card,
  .main-content > .content-card:has(.upload-dropzone) {
    width: 100% !important;
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* MOBILE — padronização dos 3 espaçamentos verticais destacados */
@media (max-width: 600px) {
  /* título -> subtítulo */
  .main-title {
    margin-bottom: 28px !important;
  }

  /* subtítulo -> bloco branco */
  .main-subtitle {
    margin-bottom: 28px !important;
  }

  /* evita margens internas extras alterarem a distância visual */
  .main-subtitle {
    margin-top: 0 !important;
  }
}


/* MOBILE — espaçamento VISUAL igual entre imagem, título, subtítulo e card */
@media (max-width: 600px) {
  /* Zera margens que estavam se somando */
  .main-title,
  .main-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* O bloco de introdução passa a controlar os espaços de forma uniforme */
  .main-content,
  main {
    box-sizing: border-box !important;
  }

  /* distância título -> subtítulo */
  .main-title + .main-subtitle {
    margin-top: 24px !important;
  }

  /* distância subtítulo -> primeiro card branco */
  .main-subtitle + .content-card,
  .main-subtitle ~ .content-card:first-of-type {
    margin-top: 24px !important;
  }

  /* remove qualquer margem superior adicional do card */
  .content-card {
    box-sizing: border-box !important;
  }
}


/* CORREÇÃO EXATA DOS 3 ESPAÇAMENTOS — estrutura real do layout */
@media (max-width: 600px) {
  /* 1) Banner/imagem -> título */
  .main-content {
    padding-top: 30px !important;
  }

  /* 2) Título -> subtítulo */
  .main-title {
    margin: 0 0 30px 0 !important;
  }

  /* subtítulo sem margem própria adicional */
  .main-subtitle {
    margin: 0 auto !important;
  }

  /* 3) Subtítulo -> bloco branco */
  .title-section {
    margin-bottom: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* impede o card de acrescentar margem superior própria */
  .main-content > .content-card {
    margin-top: 0 !important;
  }
}


/* FIX FINAL: havia uma regra mais específica somando +24px entre título e subtítulo */
@media (max-width: 600px) {
  .main-content {
    padding-top: 30px !important;
  }

  .title-section .main-title {
    margin: 0 0 30px 0 !important;
  }

  /* neutraliza especificamente .main-title + .main-subtitle */
  .title-section .main-title + .main-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .title-section {
    margin-bottom: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .main-content > .content-card {
    margin-top: 0 !important;
  }
}


/* =========================================================
   FORÇA FINAL — 3 ESPAÇAMENTOS VISUAIS IGUAIS NO MOBILE (30PX)
   banner -> título | título -> texto | texto -> card
   ========================================================= */
@media screen and (max-width: 600px) {

  /* neutralização de regras antigas */
  body .main-content {
    padding-top: 30px !important;
  }

  body .main-content .title-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }

  body .main-content .title-section .main-title {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
    margin-left: 0 !important;
  }

  body .main-content .title-section .main-title + .main-subtitle,
  body .main-content .title-section .main-subtitle {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body .main-content > .content-card {
    margin-top: 0 !important;
  }
}


/* RESET TOTAL DE ESPAÇAMENTO — COMEÇAR DO ZERO */
@media screen and (max-width: 600px) {
  body .main-content {
    padding-top: 0 !important;
  }

  body .main-content .title-section {
    margin: 0 !important;
    padding: 0 !important;
  }

  body .main-content .title-section .main-title {
    margin: 0 !important;
    padding: 0 !important;
  }

  body .main-content .title-section .main-subtitle,
  body .main-content .title-section .main-title + .main-subtitle {
    margin: 0 !important;
    padding: 0 !important;
  }

  body .main-content > .content-card {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   MOBILE — ESPAÇOS VISUALMENTE IGUAIS (30PX)
   Um único container controla título/subtítulo e os espaços.
   ========================================================== */
@media screen and (max-width: 600px) {

  body .main-content {
    padding-top: 0 !important;
  }

  body .main-content .title-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* espaço visual entre título e subtítulo */
    gap: 30px !important;

    /* espaço 1: banner -> título | espaço 3: subtítulo -> card */
    padding-top: 30px !important;
    padding-bottom: 30px !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body .main-content .title-section .main-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  body .main-content .title-section .main-subtitle,
  body .main-content .title-section .main-title + .main-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
  }

  body .main-content > .content-card {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   DESKTOP LIVRE PARA VISUALIZAÇÃO / EDIÇÃO
   Remove apenas a trava desktop e a moldura fixa de 390px.
   Mobile (<=768px) permanece inalterado.
   ========================================================== */
@media (min-width: 769px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .App {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .phone-shell {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .main-content {
    overflow: visible !important;
  }
}


/* AJUSTE VALIDADO MANUALMENTE — MOBILE ATÉ 767PX */
@media screen and (max-width: 767px) {
  body .main-content .title-section .main-subtitle,
  body .main-content .title-section .main-title + .main-subtitle {
    margin: -6px 0 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
  }
}

/* AJUSTE MOLDURA QUADRADA (1:1) — Remove formato retangular/stories e sobras */
.frame-thumb-img-wrapper {
  width: 105px !important;
  height: 105px !important;
  aspect-ratio: 1 / 1 !important;
}

.frame-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== CONTADOR DE APOIADORES ===== */
.hero-access-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 18px;
  color: #00339a;
  font-family: Inter, Montserrat, sans-serif;
}
.hero-access-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}
.hero-access-count strong {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.hero-access-suffix {
  font-size: .72rem;
  font-weight: 600;
  opacity: .85;
}

.hero-access-count--below {
  margin: 18px auto 20px;
  max-width: var(--content-width);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: static;
  transform: none;
  background: #00339a;
  border-radius: 14px;
  min-height: 48px;
  box-shadow: none;
}
.hero-access-count--below strong {
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-access-count--below .hero-access-suffix {
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1;
  opacity: .96;
}
@media (max-width: 480px) {
  .hero-access-count--below {
    margin: 10px auto 10px;
    transform: translateY(-20px);
    padding: 0 12px;
    min-height: 46px;
  }
  .hero-access-count--below strong {
    font-size: 1.35rem;
  }
  .hero-access-count--below .hero-access-suffix {
    font-size: .8rem;
  }
}