Nos vemos em
BREVE
Quem somos
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Famílias Anfitriãs — Distrito Rotário 4530 | Rotary International</title>
<style>
:root{
--navy:#0C2D5E;
--navy-dark:#081F42;
--gold:#C9A23B;
--gold-light:#FBF6E8;
--bg:#F4F6F9;
--card:#FFFFFF;
--border:#D7DCE3;
--text:#1A1A1A;
--text-muted:#5B6472;
--error:#B3261E;
--success:#1D9E75;
--radius:10px;
}
*{box-sizing:border-box;}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:840px;margin:0 auto;padding:24px 16px 80px;}
.form-header{
text-align:center;
padding:36px 24px 28px;
background:var(--navy);
border-radius:var(--radius) var(--radius) 0 0;
color:#fff;
}
.form-header .eyebrow{
letter-spacing:3px;
font-size:12px;
font-weight:bold;
color:var(--gold);
margin:0 0 10px;
text-transform:uppercase;
}
.form-header h1{
font-size:24px;
margin:0 0 8px;
font-weight:bold;
line-height:1.3;
}
.form-header p{
margin:0;
font-size:15px;
color:#CBD8EA;
}
.gold-rule{height:3px;background:var(--gold);}
.progress-bar{
display:flex;
background:var(--card);
border-left:1px solid var(--border);
border-right:1px solid var(--border);
padding:18px 24px;
gap:8px;
flex-wrap:wrap;
}
.progress-step{
flex:1;
min-width:140px;
text-align:center;
font-size:12px;
font-weight:bold;
color:var(--text-muted);
padding:8px 4px;
border-bottom:3px solid var(--border);
transition:all .2s ease;
}
.progress-step.active{color:var(--navy);border-bottom-color:var(--gold);}
.progress-step.done{color:var(--success);border-bottom-color:var(--success);}
.form-body{
background:var(--card);
border-left:1px solid var(--border);
border-right:1px solid var(--border);
padding:8px 28px 4px;
}
.section{
padding:28px 0 8px;
border-top:1px solid var(--border);
}
.section:first-child{border-top:none;}
.section-title{
display:flex;
align-items:center;
gap:10px;
margin:0 0 6px;
}
.section-title .num{
width:28px;height:28px;
background:var(--navy);
color:#fff;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:bold;
flex-shrink:0;
}
.section-title h2{
font-size:17px;
margin:0;
color:var(--navy);
font-weight:bold;
}
.section-sub{
font-size:13.5px;
color:var(--text-muted);
margin:0 0 20px 38px;
}
.row{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-bottom:18px;
}
.row > .field{
flex:1 1 240px;
min-width:0;
}
.row.single > .field{
flex:1 1 100%;
}
@media(max-width:600px){
.row > .field{flex:1 1 100%;}
}
.field label{
display:block;
font-size:13px;
font-weight:bold;
color:var(--navy);
margin-bottom:6px;
}
.field .hint{
display:block;
font-weight:normal;
color:var(--text-muted);
font-size:11.5px;
margin-top:2px;
}
.req{color:var(--error);}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea{
width:100%;
padding:10px 12px;
font-size:14px;
font-family:inherit;
border:1px solid var(--border);
border-radius:6px;
background:#fff;
color:var(--text);
transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical;min-height:70px;}
input:focus, select:focus, textarea:focus{
outline:none;
border-color:var(--navy);
box-shadow:0 0 0 3px rgba(12,45,94,0.12);
}
input.invalid, select.invalid, textarea.invalid{
border-color:var(--error);
box-shadow:0 0 0 3px rgba(179,38,30,0.10);
}
.err-msg{
display:none;
font-size:12px;
color:var(--error);
margin-top:5px;
}
.field.has-error .err-msg{display:block;}
.choice-group{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-top:4px;
}
.choice-group.vertical{flex-direction:column;gap:10px;}
.choice{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
cursor:pointer;
user-select:none;
}
.choice input[type="radio"],
.choice input[type="checkbox"]{
width:18px;height:18px;
accent-color:var(--navy);
cursor:pointer;
flex-shrink:0;
}
.person-card{
border:1px solid var(--border);
border-radius:8px;
padding:18px 20px 6px;
margin-bottom:20px;
background:#FAFBFC;
}
.person-card h3{
font-size:14px;
color:var(--navy);
margin:0 0 14px;
display:flex;
align-items:center;
gap:8px;
}
.person-card h3 .badge{
background:var(--navy);
color:#fff;
font-size:11px;
font-weight:bold;
padding:2px 9px;
border-radius:20px;
}
.sig-wrap{
border:1px dashed var(--border);
border-radius:8px;
padding:10px;
background:#FCFCFD;
}
.sig-wrap canvas{
width:100%;
height:140px;
display:block;
border-radius:6px;
background:#fff;
border:1px solid var(--border);
touch-action:none;
cursor:crosshair;
}
.sig-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:8px;
}
.sig-actions span{font-size:11.5px;color:var(--text-muted);}
.btn-clear{
background:none;
border:1px solid var(--border);
border-radius:6px;
padding:6px 12px;
font-size:12px;
color:var(--text-muted);
cursor:pointer;
}
.btn-clear:hover{background:#F1F3F5;}
.clause-box{
border:1px solid var(--border);
border-radius:8px;
padding:16px 18px;
margin-bottom:14px;
font-size:13.5px;
line-height:1.65;
color:var(--text);
background:#FCFCFD;
}
.clause-box .clause-num{
font-weight:bold;
color:var(--navy);
margin-right:6px;
}
.recommend-list{
margin:0;
padding-left:20px;
}
.recommend-list li{
font-size:13.5px;
line-height:1.65;
margin-bottom:12px;
color:var(--text);
}
.recommend-list li.warn{
color:#7A2E1F;
}
.obs-box{
background:var(--gold-light);
border:1px solid var(--gold);
border-radius:8px;
padding:18px 20px;
margin:24px 0;
font-size:13.5px;
line-height:1.6;
}
.obs-box h3{
margin:0 0 10px;
font-size:14px;
color:var(--navy);
}
.consent{
display:flex;
gap:10px;
align-items:flex-start;
background:#F4F6F9;
border-radius:8px;
padding:16px 18px;
margin:20px 0;
font-size:13px;
color:var(--text-muted);
line-height:1.5;
}
.consent input{margin-top:3px;flex-shrink:0;width:18px;height:18px;accent-color:var(--navy);}
.nav-buttons{
display:flex;
justify-content:space-between;
padding:22px 0 30px;
}
.btn{
padding:12px 26px;
border-radius:8px;
font-size:14px;
font-weight:bold;
cursor:pointer;
border:none;
transition:opacity .15s, transform .1s;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-secondary{background:#fff;color:var(--navy);border:1px solid var(--border);}
.btn-secondary:hover{background:#F4F6F9;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-add{
background:#fff;
color:var(--navy);
border:1px dashed var(--navy);
border-radius:8px;
padding:10px 18px;
font-size:13px;
font-weight:bold;
cursor:pointer;
margin-bottom:20px;
}
.btn-add:hover{background:var(--gold-light);}
.btn-remove{
background:none;
border:none;
color:var(--error);
font-size:12px;
font-weight:bold;
cursor:pointer;
margin-left:auto;
}
.form-footer{
background:var(--card);
border:1px solid var(--border);
border-top:none;
border-radius:0 0 var(--radius) var(--radius);
padding:18px 24px;
text-align:center;
font-size:12px;
color:var(--text-muted);
}
.success-screen{
display:none;
text-align:center;
padding:60px 24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
}
.success-screen.show{display:block;}
.success-icon{
width:64px;height:64px;
border-radius:50%;
background:#E1F5EE;
color:var(--success);
display:flex;align-items:center;justify-content:center;
margin:0 auto 20px;
font-size:32px;
}
.success-screen h2{color:var(--navy);font-size:22px;margin:0 0 10px;}
.success-screen p{color:var(--text-muted);font-size:14px;max-width:420px;margin:0 auto;}
.hidden{display:none !important;}
.step{display:none;}
.step.active{display:block;}
</style>
</head>
<body>
<div class="wrap">
<div class="form-header">
<p class="eyebrow">Rotary International — Distrito 4530</p>
<h1>Programa de Intercâmbio de Jovens</h1>
<p>Identificação e Termo de Compromisso da Família Anfitriã</p>
</div>
<div class="gold-rule"></div>
<div class="progress-bar" id="progressBar">
<div class="progress-step active" data-step="1">1. Famílias Anfitriãs</div>
<div class="progress-step" data-step="2">2. Termo de Compromisso</div>
<div class="progress-step" data-step="3">3. Maiores no Domicílio</div>
<div class="progress-step" data-step="4">4. Recomendações</div>
</div>
<form id="anfitriaForm" class="form-body" novalidate>
<!-- ============ STEP 1 — ANEXO 1 ============ -->
<div class="step active" data-step="1">
<div class="section">
<div class="section-title"><span class="num">1</span><h2>Anexo 1 — Identificação das famílias anfitriãs</h2></div>
<p class="section-sub">Informe os dados dos responsáveis das três famílias indicadas para o rodízio de hospedagem. Apenas a Família 01 é de preenchimento obrigatório neste momento.</p>
<div class="person-card">
<h3><span class="badge">Família 01</span> Pai / Mãe / Responsável (1)</h3>
<div class="row">
<div class="field">
<label for="f1r1Nome">Nome completo <span class="req">*</span></label>
<input type="text" id="f1r1Nome" name="f1r1Nome" required>
<span class="err-msg">Informe o nome completo.</span>
</div>
<div class="field">
<label for="f1r1Nacionalidade">Nacionalidade <span class="req">*</span></label>
<input type="text" id="f1r1Nacionalidade" name="f1r1Nacionalidade" placeholder="Brasileira" required>
<span class="err-msg">Campo obrigatório.</span>
</div>
</div>
<div class="row">
<div class="field">
<label for="f1r1EstadoCivil">Estado civil</label>
<select id="f1r1EstadoCivil" name="f1r1EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f1r1Profissao">Profissão</label>
<input type="text" id="f1r1Profissao" name="f1r1Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f1r1RG">Carteira de identidade (RG)</label>
<input type="text" id="f1r1RG" name="f1r1RG">
</div>
<div class="field">
<label for="f1r1CPF">CPF <span class="req">*</span></label>
<input type="text" id="f1r1CPF" name="f1r1CPF" placeholder="000.000.000-00" required>
<span class="err-msg">Informe um CPF válido.</span>
</div>
</div>
<div class="row single">
<div class="field">
<label for="f1r1Endereco">Endereço completo <span class="req">*</span></label>
<input type="text" id="f1r1Endereco" name="f1r1Endereco" required>
<span class="err-msg">Campo obrigatório.</span>
</div>
</div>
</div>
<div class="person-card">
<h3><span class="badge">Família 01</span> Pai / Mãe / Responsável (2)</h3>
<div class="row">
<div class="field">
<label for="f1r2Nome">Nome completo</label>
<input type="text" id="f1r2Nome" name="f1r2Nome">
</div>
<div class="field">
<label for="f1r2Nacionalidade">Nacionalidade</label>
<input type="text" id="f1r2Nacionalidade" name="f1r2Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="f1r2EstadoCivil">Estado civil</label>
<select id="f1r2EstadoCivil" name="f1r2EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f1r2Profissao">Profissão</label>
<input type="text" id="f1r2Profissao" name="f1r2Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f1r2RG">Carteira de identidade (RG)</label>
<input type="text" id="f1r2RG" name="f1r2RG">
</div>
<div class="field">
<label for="f1r2CPF">CPF</label>
<input type="text" id="f1r2CPF" name="f1r2CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="f1r2Endereco">Endereço completo</label>
<input type="text" id="f1r2Endereco" name="f1r2Endereco">
</div>
</div>
</div>
<div class="person-card">
<h3><span class="badge">Família 02</span> Pai / Mãe / Responsável (1) <span style="font-weight:normal;color:var(--text-muted);font-size:12px;">— família voluntária de rodízio</span></h3>
<div class="row">
<div class="field">
<label for="f2r1Nome">Nome completo</label>
<input type="text" id="f2r1Nome" name="f2r1Nome">
</div>
<div class="field">
<label for="f2r1Nacionalidade">Nacionalidade</label>
<input type="text" id="f2r1Nacionalidade" name="f2r1Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="f2r1EstadoCivil">Estado civil</label>
<select id="f2r1EstadoCivil" name="f2r1EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f2r1Profissao">Profissão</label>
<input type="text" id="f2r1Profissao" name="f2r1Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f2r1RG">Carteira de identidade (RG)</label>
<input type="text" id="f2r1RG" name="f2r1RG">
</div>
<div class="field">
<label for="f2r1CPF">CPF</label>
<input type="text" id="f2r1CPF" name="f2r1CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="f2r1Endereco">Endereço completo</label>
<input type="text" id="f2r1Endereco" name="f2r1Endereco">
</div>
</div>
</div>
<div class="person-card">
<h3><span class="badge">Família 02</span> Pai / Mãe / Responsável (2)</h3>
<div class="row">
<div class="field">
<label for="f2r2Nome">Nome completo</label>
<input type="text" id="f2r2Nome" name="f2r2Nome">
</div>
<div class="field">
<label for="f2r2Nacionalidade">Nacionalidade</label>
<input type="text" id="f2r2Nacionalidade" name="f2r2Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="f2r2EstadoCivil">Estado civil</label>
<select id="f2r2EstadoCivil" name="f2r2EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f2r2Profissao">Profissão</label>
<input type="text" id="f2r2Profissao" name="f2r2Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f2r2RG">Carteira de identidade (RG)</label>
<input type="text" id="f2r2RG" name="f2r2RG">
</div>
<div class="field">
<label for="f2r2CPF">CPF</label>
<input type="text" id="f2r2CPF" name="f2r2CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="f2r2Endereco">Endereço completo</label>
<input type="text" id="f2r2Endereco" name="f2r2Endereco">
</div>
</div>
</div>
<div class="person-card">
<h3><span class="badge">Família 03</span> Pai / Mãe / Responsável (1) <span style="font-weight:normal;color:var(--text-muted);font-size:12px;">— família voluntária de rodízio</span></h3>
<div class="row">
<div class="field">
<label for="f3r1Nome">Nome completo</label>
<input type="text" id="f3r1Nome" name="f3r1Nome">
</div>
<div class="field">
<label for="f3r1Nacionalidade">Nacionalidade</label>
<input type="text" id="f3r1Nacionalidade" name="f3r1Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="f3r1EstadoCivil">Estado civil</label>
<select id="f3r1EstadoCivil" name="f3r1EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f3r1Profissao">Profissão</label>
<input type="text" id="f3r1Profissao" name="f3r1Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f3r1RG">Carteira de identidade (RG)</label>
<input type="text" id="f3r1RG" name="f3r1RG">
</div>
<div class="field">
<label for="f3r1CPF">CPF</label>
<input type="text" id="f3r1CPF" name="f3r1CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="f3r1Endereco">Endereço completo</label>
<input type="text" id="f3r1Endereco" name="f3r1Endereco">
</div>
</div>
</div>
<div class="person-card">
<h3><span class="badge">Família 03</span> Pai / Mãe / Responsável (2)</h3>
<div class="row">
<div class="field">
<label for="f3r2Nome">Nome completo</label>
<input type="text" id="f3r2Nome" name="f3r2Nome">
</div>
<div class="field">
<label for="f3r2Nacionalidade">Nacionalidade</label>
<input type="text" id="f3r2Nacionalidade" name="f3r2Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="f3r2EstadoCivil">Estado civil</label>
<select id="f3r2EstadoCivil" name="f3r2EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="f3r2Profissao">Profissão</label>
<input type="text" id="f3r2Profissao" name="f3r2Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="f3r2RG">Carteira de identidade (RG)</label>
<input type="text" id="f3r2RG" name="f3r2RG">
</div>
<div class="field">
<label for="f3r2CPF">CPF</label>
<input type="text" id="f3r2CPF" name="f3r2CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="f3r2Endereco">Endereço completo</label>
<input type="text" id="f3r2Endereco" name="f3r2Endereco">
</div>
</div>
</div>
</div>
</div>
<!-- ============ STEP 2 — ANEXO 2 ============ -->
<div class="step" data-step="2">
<div class="section">
<div class="section-title"><span class="num">2</span><h2>Anexo 2 — Termo de compromisso da família anfitriã</h2></div>
<p class="section-sub">Preencha os dados da família e do candidato e revise as cláusulas do compromisso antes de assinar.</p>
<div class="person-card">
<h3>Identificação da família — Pai / Mãe / Responsável (1)</h3>
<div class="row">
<div class="field">
<label for="t1Nome">Nome completo <span class="req">*</span></label>
<input type="text" id="t1Nome" name="t1Nome" required>
<span class="err-msg">Informe o nome completo.</span>
</div>
<div class="field">
<label for="t1Nacionalidade">Nacionalidade <span class="req">*</span></label>
<input type="text" id="t1Nacionalidade" name="t1Nacionalidade" placeholder="Brasileira" required>
<span class="err-msg">Campo obrigatório.</span>
</div>
</div>
<div class="row">
<div class="field">
<label for="t1EstadoCivil">Estado civil</label>
<select id="t1EstadoCivil" name="t1EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="t1Profissao">Profissão</label>
<input type="text" id="t1Profissao" name="t1Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="t1RG">Carteira de identidade (RG)</label>
<input type="text" id="t1RG" name="t1RG">
</div>
<div class="field">
<label for="t1CPF">CPF <span class="req">*</span></label>
<input type="text" id="t1CPF" name="t1CPF" placeholder="000.000.000-00" required>
<span class="err-msg">Informe um CPF válido.</span>
</div>
</div>
<div class="row single">
<div class="field">
<label for="t1Endereco">Endereço completo <span class="req">*</span></label>
<input type="text" id="t1Endereco" name="t1Endereco" required>
<span class="err-msg">Campo obrigatório.</span>
</div>
</div>
</div>
<div class="person-card">
<h3>Pai / Mãe / Responsável (2)</h3>
<div class="row">
<div class="field">
<label for="t2Nome">Nome completo</label>
<input type="text" id="t2Nome" name="t2Nome">
</div>
<div class="field">
<label for="t2Nacionalidade">Nacionalidade</label>
<input type="text" id="t2Nacionalidade" name="t2Nacionalidade" placeholder="Brasileira">
</div>
</div>
<div class="row">
<div class="field">
<label for="t2EstadoCivil">Estado civil</label>
<select id="t2EstadoCivil" name="t2EstadoCivil">
<option value="">Selecione</option>
<option>Solteiro(a)</option>
<option>Casado(a)</option>
<option>Divorciado(a)</option>
<option>Viúvo(a)</option>
<option>União estável</option>
</select>
</div>
<div class="field">
<label for="t2Profissao">Profissão</label>
<input type="text" id="t2Profissao" name="t2Profissao">
</div>
</div>
<div class="row">
<div class="field">
<label for="t2RG">Carteira de identidade (RG)</label>
<input type="text" id="t2RG" name="t2RG">
</div>
<div class="field">
<label for="t2CPF">CPF</label>
<input type="text" id="t2CPF" name="t2CPF" placeholder="000.000.000-00">
</div>
</div>
<div class="row single">
<div class="field">
<label for="t2Endereco">Endereço completo</label>
<input type="text" id="t2Endereco" name="t2Endereco">
</div>
</div>
</div>
<div class="person-card">
<h3>Candidato(a) ao intercâmbio</h3>
<div class="row">
<div class="field">
<label for="candNome">Nome completo <span class="req">*</span></label>
<input type="text" id="candNome" name="candNome" required>
<span class="err-msg">Informe o nome completo.</span>
</div>
<div class="field">
<label for="candNacionalidade">Nacionalidade <span class="req">*</span></label>
<input type="text" id="candNacionalidade" name="candNacionalidade" required>
<span class="err-msg">Campo obrigatório.</span>
</div>
</div>
<div class="row">
<div class="field">
<label for="candNasc">Data de nascimento <span class="req">*</span></label>
<input type="date" id="candNasc" name="candNasc" required>
<span class="err-msg">Informe a data de nascimento.</span>
</div>
<div class="field">
<label for="candRG">Carteira de identidade (RG)</label>
<input type="text" id="candRG" name="candRG">
</div>
</div>
<div class="row">
<div class="field">
<label for="candCPF">CPF</label>
<input type="text" id="candCPF" name="candCPF" placeholder="000.000.000-00">
</div>
<div class="field">
<label for="candEndereco">Endereço completo</label>
<input type="text" id="candEndereco" name="candEndereco">
</div>
</div>
</div>
<h3 style="font-size:14px;color:var(--navy);margin:24px 0 12px;">Cláusulas do termo de compromisso</h3>
<div class="clause-box">
As partes acima identificadas concordam de livre e espontânea vontade, com o presente Termo de Compromisso da Família Anfitriã (doravante "Termo"), que se regerá pelas cláusulas e condições seguintes:
</div>
<div class="clause-box">
<span class="clause-num">1.</span>Os Responsáveis (doravante "Família") concordam em participar voluntariamente no ato de acolher jovens estrangeiros participantes do Programa de Intercâmbio de Jovens do Distrito Rotário 4530 (doravante "Programa") por um período de 12 meses. Esse compromisso tem validade a partir da aceitação do Candidato no Programa, e continua válido mesmo se o Candidato não completar o Programa.
</div>
<div class="clause-box">
<span class="clause-num">2.</span>A Família declara estar ciente dos termos do Regulamento Geral do Programa e se compromete a cumpri-lo, inclusive garantindo seu cumprimento também pelo jovem estrangeiro acolhido pela Família.
</div>
<div class="clause-box">
<span class="clause-num">3.</span>A Família se compromete a completar o Anexo 1 deste documento, indicando duas outras Famílias Anfitriãs Voluntárias para auxiliar no rodízio de famílias. A Família reconhece que pode ser requisitada a indicar imediatamente outra Família Voluntária em circunstâncias extraordinárias para garantir que não haja interrupção no desenvolvimento do Programa. As Famílias Anfitriãs indicadas devem também estar cientes do Regulamento Geral do Programa e deste Termo.
</div>
<div class="clause-box">
<span class="clause-num">4.</span>A Família se compromete a completar o Anexo 3 deste documento, identificando todas as pessoas maiores de idade que residam ou trabalhem no domicílio da Família acima identificado.
</div>
<div class="clause-box">
<span class="clause-num">5.</span>A Família se compromete a auxiliar o jovem estrangeiro acolhido pela família em sua adaptação no país, assumindo, para tanto, as seguintes responsabilidades:
<ul style="margin:10px 0 0; padding-left:20px;">
<li style="margin-bottom:8px;">Auxiliar o jovem estrangeiro acolhido pela Família na sua adaptação à sociedade brasileira, com vistas a superar as dificuldades do choque cultural, e auxiliar a aprendizagem da língua portuguesa;</li>
<li style="margin-bottom:8px;">Providenciar a matrícula e a manutenção do jovem estrangeiro em escola de Ensino Médio durante todo o período do Programa, providenciar transporte por sua conta e ônus, prover livros, material escolar e uniforme escolar, e acompanhar o desenvolvimento escolar e a ambientação do jovem;</li>
<li style="margin-bottom:8px;">Proporcionar atividades extraescolares, buscando manter ocupado o jovem estrangeiro acolhido pela Família, mesmo que seus pais e irmãos tenham outras atividades;</li>
<li style="margin-bottom:8px;">Somente programar viagens ao exterior ou outras viagens por longos períodos durante os meses de hospedagem se o jovem estrangeiro acolhido pela Família possa dela participar;</li>
<li style="margin-bottom:8px;">Providenciar, em um prazo de 30 (trinta) dias, o documento de identidade do jovem estrangeiro junto à Polícia Federal;</li>
<li>Providenciar vacina contra febre amarela para o jovem estrangeiro acolhido pela Família.</li>
</ul>
</div>
<div class="clause-box">
<span class="clause-num">6.</span>O Rotary se reserva ao direito de suspender o Programa em caso de determinação legal em função da pandemia do coronavírus ou outra.
</div>
<div class="row">
<div class="field">
<label for="localData">Local e data <span class="req">*</span></label>
<input type="text" id="localData" name="localData" placeholder="Brasília/DF, __ de ______ de 20__" required>
<span class="err-msg">Informe local e data.</span>
</div>
</div>
<div class="row">
<div class="field">
<label>Assinatura do(a) responsável (1) <span class="req">*</span></label>
<div class="sig-wrap">
<canvas id="sigResp1"></canvas>
<div class="sig-actions">
<span>Assine com o mouse, caneta ou o dedo.</span>
<button type="button" class="btn-clear" data-clear="sigResp1">Limpar</button>
</div>
</div>
<span class="err-msg" id="sigResp1Err">A assinatura do responsável é obrigatória.</span>
</div>
<div class="field">
<label>Assinatura do(a) responsável (2)</label>
<div class="sig-wrap">
<canvas id="sigResp2"></canvas>
<div class="sig-actions">
<span>Opcional, caso aplicável.</span>
<button type="button" class="btn-clear" data-clear="sigResp2">Limpar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============ STEP 3 — ANEXO 3 ============ -->
<div class="step" data-step="3">
<div class="section">
<div class="section-title"><span class="num">3</span><h2>Anexo 3 — Maiores de idade residentes/colaboradores no domicílio</h2></div>
<p class="section-sub">Identifique todas as pessoas maiores de idade que residam ou trabalhem no domicílio da família. Informe ao menos uma pessoa; use o botão abaixo para adicionar mais.</p>
<div id="residentesContainer"></div>
<button type="button" class="btn-add" id="btnAddResidente">+ Adicionar outra pessoa</button>
</div>
</div>
<!-- ============ STEP 4 — ANEXO 4 ============ -->
<div class="step" data-step="4">
<div class="section">
<div class="section-title"><span class="num">4</span><h2>Anexo 4 — Guia de recomendações do programa</h2></div>
<p class="section-sub">Leia atentamente as recomendações do Distrito Rotário 4530 para a convivência entre a família anfitriã e o jovem intercambista.</p>
<ol class="recommend-list">
<li>É importante tratar os jovens estrangeiros acolhidos como se filhos verdadeiros da Família Anfitriã.</li>
<li>Para facilitar um rápido entrosamento com a família anfitriã, sugere-se que o estudante chame os seus pais anfitriões de "pai" e "mãe", na língua local.</li>
<li>O estudante deve se integrar como membro da família anfitriã assumindo os deveres e obrigações normais para um estudante de sua idade naquela comunidade. Não deverá, no entanto, fazer nada contrário aos seus princípios morais e éticos.</li>
<li>O estudante deverá escolher seus amigos vagarosa e sabiamente, nas oportunidades de encontros sociais. Não é obrigado a aceitar os primeiros convites. Recomenda-se confiar na orientação da família anfitriã para ampliar o seu círculo de amizades.</li>
<li class="warn">Consumo de bebidas alcoólicas é proibido no ano de intercâmbio e, em alguns Distritos, poderá ser motivo de retorno antecipado.</li>
<li class="warn">O estudante não pode envolver-se romanticamente.</li>
<li class="warn">Não é permitido ao jovem a prática de atos sexuais com outras pessoas de qualquer sexo ou qualquer idade, durante o ano de intercâmbio. Isso tem como base a própria segurança do intercambista.</li>
<li>O comparecimento às Reuniões de Rotary é recomendado a todo estudante de intercâmbio.</li>
<li>O estudante deve ter compreensão perfeita das condições e destas regras do Programa e deve segui-las na sua íntegra. Caso contrário, o estudante poderá ter seu retorno antecipado.</li>
</ol>
<div class="obs-box">
<h3>Antes de enviar</h3>
<p style="margin:0;">Confira se os dados da Família 01 (Anexo 1), do Termo de Compromisso (Anexo 2) e de ao menos um residente maior de idade (Anexo 3) foram preenchidos corretamente. Após o envio, a Comissão de Intercâmbio do Distrito entrará em contato para validar as informações.</p>
</div>
<div class="consent">
<input type="checkbox" id="consentLeitura" name="consentLeitura" required>
<label for="consentLeitura">Declaro que li e compreendi o Guia de Recomendações acima e me comprometo, junto à minha família, a zelar pelo seu cumprimento durante o período de hospedagem do(a) intercambista. <span class="req">*</span></label>
</div>
<span class="err-msg" id="consentLeituraErr" style="margin-left:2px;">É necessário confirmar a leitura do guia para enviar.</span>
<div class="consent">
<input type="checkbox" id="consentLgpd" name="consentLgpd" required>
<label for="consentLgpd">Declaro que as informações prestadas neste formulário são verdadeiras e autorizo o Rotary International e o Distrito 4530 a tratarem os dados pessoais aqui informados exclusivamente para fins de avaliação e gestão do Programa de Intercâmbio de Jovens, nos termos da Lei Geral de Proteção de Dados (Lei nº 13.709/2018). <span class="req">*</span></label>
</div>
<span class="err-msg" id="consentLgpdErr" style="margin-left:2px;">É necessário aceitar os termos para enviar.</span>
</div>
</div>
<div class="nav-buttons">
<button type="button" class="btn btn-secondary" id="btnPrev">Voltar</button>
<button type="button" class="btn btn-primary" id="btnNext">Avançar</button>
<button type="submit" class="btn btn-primary hidden" id="btnSubmit">Enviar formulário</button>
</div>
</form>
<div class="success-screen" id="successScreen">
<div class="success-icon">✓</div>
<h2>Formulário enviado com sucesso</h2>
<p>Obrigado! As informações da família anfitriã foram registradas. A Comissão de Intercâmbio do Distrito 4530 entrará em contato para os próximos passos.</p>
</div>
<div class="form-footer">
Rotary International — Distrito 4530 · Programa de Intercâmbio de Jovens · Identificação e Termo de Compromisso da Família Anfitriã
</div>
</div>
<script>
(function(){
"use strict";
var steps = Array.prototype.slice.call(document.querySelectorAll('.step'));
var progressSteps = Array.prototype.slice.call(document.querySelectorAll('.progress-step'));
var currentStep = 1;
var totalSteps = steps.length;
var btnPrev = document.getElementById('btnPrev');
var btnNext = document.getElementById('btnNext');
var btnSubmit = document.getElementById('btnSubmit');
var form = document.getElementById('anfitriaForm');
var successScreen = document.getElementById('successScreen');
var residentesContainer = document.getElementById('residentesContainer');
var residenteCount = 0;
function addResidente(isFirst){
residenteCount++;
var idx = residenteCount;
var card = document.createElement('div');
card.className = 'person-card';
card.dataset.residenteIdx = idx;
card.innerHTML =
'<h3><span class="badge">Pessoa ' + idx + '</span>Residente / Colaborador(a)' +
(isFirst ? '' : '<button type="button" class="btn-remove" data-remove-residente="' + idx + '">Remover</button>') +
'</h3>' +
'<div class="row">' +
'<div class="field">' +
'<label for="res' + idx + 'Nome">Nome completo' + (isFirst ? ' <span class="req">*</span>' : '') + '</label>' +
'<input type="text" id="res' + idx + 'Nome" name="res' + idx + 'Nome"' + (isFirst ? ' required' : '') + '>' +
'<span class="err-msg">Informe o nome completo.</span>' +
'</div>' +
'<div class="field">' +
'<label for="res' + idx + 'Nacionalidade">Nacionalidade</label>' +
'<input type="text" id="res' + idx + 'Nacionalidade" name="res' + idx + 'Nacionalidade" placeholder="Brasileira">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="field">' +
'<label for="res' + idx + 'EstadoCivil">Estado civil</label>' +
'<select id="res' + idx + 'EstadoCivil" name="res' + idx + 'EstadoCivil">' +
'<option value="">Selecione</option>' +
'<option>Solteiro(a)</option>' +
'<option>Casado(a)</option>' +
'<option>Divorciado(a)</option>' +
'<option>Viúvo(a)</option>' +
'<option>União estável</option>' +
'</select>' +
'</div>' +
'<div class="field">' +
'<label for="res' + idx + 'Profissao">Profissão</label>' +
'<input type="text" id="res' + idx + 'Profissao" name="res' + idx + 'Profissao">' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="field">' +
'<label for="res' + idx + 'RG">Carteira de identidade (RG)</label>' +
'<input type="text" id="res' + idx + 'RG" name="res' + idx + 'RG">' +
'</div>' +
'<div class="field">' +
'<label for="res' + idx + 'CPF">CPF</label>' +
'<input type="text" id="res' + idx + 'CPF" name="res' + idx + 'CPF" placeholder="000.000.000-00">' +
'</div>' +
'</div>';
residentesContainer.appendChild(card);
var removeBtn = card.querySelector('[data-remove-residente]');
if(removeBtn){
removeBtn.addEventListener('click', function(){
card.remove();
});
}
}
addResidente(true);
document.getElementById('btnAddResidente').addEventListener('click', function(){
addResidente(false);
});
function showStep(n){
steps.forEach(function(s){
s.classList.toggle('active', parseInt(s.getAttribute('data-step'),10) === n);
});
progressSteps.forEach(function(p){
var pn = parseInt(p.getAttribute('data-step'),10);
p.classList.remove('active','done');
if(pn === n) p.classList.add('active');
else if(pn < n) p.classList.add('done');
});
btnPrev.style.visibility = (n === 1) ? 'hidden' : 'visible';
if(n === totalSteps){
btnNext.classList.add('hidden');
btnSubmit.classList.remove('hidden');
} else {
btnNext.classList.remove('hidden');
btnSubmit.classList.add('hidden');
}
window.scrollTo({top: document.querySelector('.form-header').offsetTop, behavior:'smooth'});
}
function getStepEl(n){
return steps.filter(function(s){ return parseInt(s.getAttribute('data-step'),10) === n; })[0];
}
function validateStep(n){
var stepEl = getStepEl(n);
var valid = true;
var fields = Array.prototype.slice.call(stepEl.querySelectorAll('[required]'));
var seenRadioGroups = {};
fields.forEach(function(f){
var fieldWrap = f.closest('.field');
if(f.type === 'radio'){
if(seenRadioGroups[f.name]) return;
seenRadioGroups[f.name] = true;
var checked = stepEl.querySelector('input[name="'+f.name+'"]:checked');
if(!checked) valid = false;
return;
}
if(f.type === 'checkbox'){
var errElCb = document.getElementById(f.id + 'Err');
if(!f.checked){
valid = false;
if(errElCb) errElCb.style.display = 'block';
} else {
if(errElCb) errElCb.style.display = 'none';
}
return;
}
var ok = f.value.trim().length > 0;
if(fieldWrap){
fieldWrap.classList.toggle('has-error', !ok);
}
f.classList.toggle('invalid', !ok);
if(!ok) valid = false;
});
if(n === 2){
var sigCanvas = document.getElementById('sigResp1');
var sigErr = document.getElementById('sigResp1Err');
var sigField = sigCanvas.closest('.field');
if(sigCanvas.dataset.empty !== 'false'){
valid = false;
if(sigErr) sigErr.style.display = 'block';
if(sigField) sigField.classList.add('has-error');
} else {
if(sigErr) sigErr.style.display = 'none';
if(sigField) sigField.classList.remove('has-error');
}
}
return valid;
}
btnNext.addEventListener('click', function(){
if(!validateStep(currentStep)) return;
if(currentStep < totalSteps){
currentStep++;
showStep(currentStep);
}
});
btnPrev.addEventListener('click', function(){
if(currentStep > 1){
currentStep--;
showStep(currentStep);
}
});
form.addEventListener('input', function(e){
var t = e.target;
if(t.matches('input, select, textarea')){
var fieldWrap = t.closest('.field');
if(fieldWrap) fieldWrap.classList.remove('has-error');
t.classList.remove('invalid');
}
});
form.addEventListener('change', function(e){
var t = e.target;
if(t.type === 'checkbox'){
var errElCb = document.getElementById(t.id + 'Err');
if(errElCb) errElCb.style.display = 'none';
}
});
function initSignaturePad(canvasId){
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext('2d');
var drawing = false;
var last = null;
canvas.dataset.empty = 'true';
function resize(){
var ratio = window.devicePixelRatio || 1;
var rect = canvas.getBoundingClientRect();
canvas.width = rect.width * ratio;
canvas.height = rect.height * ratio;
ctx.scale(ratio, ratio);
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = '#0C2D5E';
}
resize();
window.addEventListener('resize', resize);
function pos(e){
var rect = canvas.getBoundingClientRect();
var clientX = e.touches ? e.touches[0].clientX : e.clientX;
var clientY = e.touches ? e.touches[0].clientY : e.clientY;
return { x: clientX - rect.left, y: clientY - rect.top };
}
function start(e){
drawing = true;
last = pos(e);
e.preventDefault();
}
function move(e){
if(!drawing) return;
var p = pos(e);
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(p.x, p.y);
ctx.stroke();
last = p;
canvas.dataset.empty = 'false';
e.preventDefault();
}
function end(){ drawing = false; last = null; }
canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', move);
window.addEventListener('mouseup', end);
canvas.addEventListener('touchstart', start, {passive:false});
canvas.addEventListener('touchmove', move, {passive:false});
canvas.addEventListener('touchend', end);
return {
clear: function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
canvas.dataset.empty = 'true';
},
isEmpty: function(){ return canvas.dataset.empty !== 'false'; },
toDataURL: function(){ return canvas.toDataURL('image/png'); }
};
}
var sigIds = ['sigResp1','sigResp2'];
var pads = {};
sigIds.forEach(function(id){ pads[id] = initSignaturePad(id); });
document.querySelectorAll('.btn-clear').forEach(function(btn){
btn.addEventListener('click', function(){
var target = btn.getAttribute('data-clear');
if(pads[target]) pads[target].clear();
if(target === 'sigResp1'){
var sigErr = document.getElementById('sigResp1Err');
if(sigErr) sigErr.style.display = 'none';
}
});
});
form.addEventListener('submit', function(e){
e.preventDefault();
if(!validateStep(currentStep)) return;
var data = {};
new FormData(form).forEach(function(value, key){ data[key] = value; });
sigIds.forEach(function(id){
if(!pads[id].isEmpty()) data[id + '_png'] = pads[id].toDataURL();
});
console.log('Dados do formulário:', data);
form.style.display = 'none';
document.getElementById('progressBar').style.display = 'none';
successScreen.classList.add('show');
});
showStep(currentStep);
})();
</script>
</body>
</html>
Entre na lista
Inscreva-se para saber quando ficarmos online.
