/* Estilo: Controla a aparência de campos de formulário. */
/* GUIA DO ARQUIVO: Define cores, tamanhos, espaçamentos e apresentação visual de registration experience. */
.rx-form{--rx-accent:#176a60;--rx-light:#edf7f3;max-width:1120px;margin:0 auto;color:#233c40}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form [hidden]{display:none!important}/* Estilo: Controla a aparência de cabeçalho. */ .rx-header{background:linear-gradient(120deg,#edf7f3,#f4f6fc);border:1px solid #d8e9e3;border-radius:20px;padding:28px;margin-bottom:24px}/* Estilo: Define a aparência dos elementos identificados por "rx-eyebrow". */ .rx-eyebrow{color:#176a60;font-size:.75rem;letter-spacing:.12em;font-weight:800}/* Estilo: Controla a aparência de cabeçalho. */ .rx-header h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:10px 0}/* Estilo: Controla a aparência de cabeçalho. */ .rx-header p{color:#52676a}/* Estilo: Define a aparência dos elementos identificados por "rx-nav". */ .rx-nav{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 16px}/* Estilo: Controla a aparência de botões. */ .rx-button{border:1px solid #bdcfcb;background:white;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;color:#22554f;cursor:pointer;line-height:1.4}/* Estilo: Controla a aparência de botões. */ .rx-button:hover{background:#e4f2ec}/* Estilo: Controla a aparência de botões. */ .rx-button:focus-visible,.rx-form input:focus-visible,.rx-form select:focus-visible,.rx-form textarea:focus-visible,summary:focus-visible{outline:3px solid #c08927;outline-offset:3px}/* Estilo: Define a aparência dos elementos identificados por "rx-nav". */ .rx-nav .rx-button{font-size:.83rem;text-align:left}/* Estilo: Define a aparência dos elementos identificados por "rx-nav". */ .rx-nav [aria-current=step],.rx-chips [aria-pressed=true],.rx-primary{background:#176a60;color:white;border-color:#176a60}/* Estilo: Define a aparência dos elementos identificados por "rx-progress". */ .rx-progress{width:100%;height:8px;accent-color:#176a60}/* Estilo: Define a aparência dos elementos identificados por "rx-section". */ .rx-section{display:block!important;background:white;border:1px solid #dfe8e6;border-radius:18px;padding:26px;margin-bottom:20px;box-shadow:0 5px 22px #173d3610}/* Estilo: Define a aparência dos elementos identificados por "rx-section". */ .rx-section[hidden]{display:none!important}/* Estilo: Define a aparência dos elementos identificados por "rx-section". */ .rx-section h4,.rx-section h3{color:#235c53;margin-bottom:20px;font-weight:700}/* Estilo: Define a aparência dos elementos identificados por "rx-section". */ .rx-section h4:before{content:'✦';display:inline-block;color:#b37b27;margin-right:10px}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form .form-control,.rx-form .form-select{border-radius:9px;min-height:44px;border-color:#c6d4d1;background:#fcfdfd}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form textarea.form-control{min-height:100px}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form label{font-weight:600}/* Estilo: Controla a aparência de rodapé. */ .rx-footer{display:flex;gap:12px;justify-content:flex-end;padding:18px 0 28px;position:sticky;bottom:0;background:#ffffffed;z-index:5;border-top:1px solid #e0e9e6}/* Estilo: Controla a aparência de rodapé. */ .rx-footer>button:first-child{margin-right:auto}/* Estilo: Define a aparência dos elementos identificados por "rx-hint". */ .rx-hint{display:block;color:#627473;font-size:.8rem;margin-top:7px;line-height:1.5}/* Estilo: Define a aparência dos elementos identificados por "rx-status". */ .rx-status{font-size:.85rem;min-height:1.3em}/* Estilo: Define a aparência dos elementos identificados por "rx-draft". */ .rx-draft:not(:empty){padding:16px;border:1px solid #d6b56b;border-radius:12px;background:#fff9e9;margin-bottom:16px}/* Estilo: Define a aparência dos elementos identificados por "rx-draft". */ .rx-draft button{margin:4px}/* Estilo: Define a aparência dos elementos identificados por "rx-chips". */ .rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}/* Estilo: Define a aparência dos elementos identificados por "rx-chips". */ .rx-chips button{padding:7px 14px}/* Estilo: Define a aparência dos elementos identificados por "rx-contact". */ .rx-contact{border:1px solid #d7e4df;border-radius:12px;margin:12px 0;padding:15px}/* Estilo: Define a aparência dos elementos identificados por "rx-contact". */ .rx-contact summary{cursor:pointer;font-weight:700;color:#226054;padding:4px}/* Estilo: Define a aparência dos elementos identificados por "rx-contact". */ .rx-contact[open] summary{margin-bottom:18px}/* Estilo: Define a aparência dos elementos identificados por "rx-field-label". */ .rx-field-label{display:block;font-size:.85rem;margin-bottom:7px}/* Estilo: Controla a aparência de cartões de informações. */ .rx-review-card{border-bottom:1px solid #dce6e2;padding:18px 0}/* Estilo: Define a aparência dos elementos identificados por "rx-review-title". */ .rx-review-title{display:flex;justify-content:space-between;align-items:center;gap:16px}/* Estilo: Define a aparência dos elementos identificados por "rx-review-title". */ .rx-review-title h4{margin:0}/* Estilo: Define a aparência dos elementos identificados por "rx-data". */ .rx-data{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:10px 20px;margin-top:20px}/* Estilo: Define a aparência dos elementos identificados por "rx-data". */ .rx-data dt{color:#61716f;font-weight:500}/* Estilo: Define a aparência dos elementos identificados por "rx-data". */ .rx-data dd{margin:0;overflow-wrap:anywhere}/* Estilo: Define a aparência dos elementos identificados por "rx-alert". */ .rx-alert:not(:empty){padding:15px;border-radius:10px;background:#fff0eb;color:#923c25;margin-bottom:12px}/* Estilo: Define a aparência dos elementos identificados por "rx-invalid". */ .rx-invalid{border-color:#b9472e!important}/* Estilo: Define a aparência dos elementos identificados por "ux-receipt". */ .ux-receipt{max-width:1120px;margin:22px auto;padding:22px;background:#e9f6ed;border:1px solid #acd2b6;border-radius:14px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}/* Estilo: Ajusta a aparência em diferentes tamanhos de tela (celular, tablet ou computador). */ @media(max-width:640px){.rx-header,.rx-section{padding:18px 14px;border-radius:12px}.rx-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.rx-nav button{flex:0 0 145px}.rx-footer{gap:8px}.rx-footer button{padding:10px 12px;font-size:.9rem}.rx-data{grid-template-columns:1fr;gap:4px}.rx-data dd{margin-bottom:12px}}
/* Estilo: Define a aparência dos elementos identificados por "rx-photo-preview". */
.rx-photo-preview{display:block;width:112px;height:112px;object-fit:cover;border-radius:16px;margin-top:12px;border:3px solid #d9e9e3}/* Estilo: Define a aparência dos elementos identificados por "rx-contact". */ .rx-contact>.rx-button{margin:10px 8px 0 0}/* Estilo: Define a aparência dos elementos identificados por "ux-presencial-page". */ .ux-presencial-page .inscricao-card.form-card{max-width:1180px}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form{scroll-margin-top:20px}
/* Estilo: Define a aparência dos elementos identificados por "ux-online-page". */
.ux-online-page .registration-layout>*{min-width:0}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form,.rx-header,.rx-section,.rx-nav{min-width:0;max-width:100%;box-sizing:border-box}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form *{box-sizing:border-box}/* Estilo: Define a aparência dos elementos identificados por "rx-section". */ .rx-section{opacity:1!important;transform:none!important;animation:none!important}/* Estilo: Controla a aparência de rodapé. */ .rx-footer{height:auto!important;min-height:0!important}/* Estilo: Define a aparência dos elementos identificados por "ux-presencial-page". */ .ux-presencial-page .form-card{min-width:0}/* Estilo: Controla a aparência de campos de formulário. */ .rx-form input,.rx-form select,.rx-form textarea{max-width:100%}/* Estilo: Ajusta a aparência em diferentes tamanhos de tela (celular, tablet ou computador). */ @media(max-width:640px){.ux-online-page .registration-layout{grid-template-columns:minmax(0,1fr)}.ux-online-page .registration-form-card{padding:14px}.ux-presencial-page .inscricao-card{padding:14px!important}.rx-header h2,.rx-header p{overflow-wrap:anywhere}}


/* Escolhas únicas Sim/Não na inscrição online e presencial. */
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-native-switch {display:none!important}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-native-choice {
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  border:0!important;white-space:nowrap!important;opacity:0!important;
}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-binary-chips,.rx-form .rx-chips:has(+ .rx-binary-chips){gap:12px}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-chips button {
  min-width:104px;min-height:48px;padding:11px 24px;border-radius:13px;
  border:2px solid #b8d0ca;font-weight:750;font-size:1rem;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s;
}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-chips button[aria-pressed="true"] {background:#176a60;border-color:#176a60;color:#fff;box-shadow:0 4px 13px rgba(23,106,96,.17)}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-chips button[aria-pressed="false"] {background:#f6faf9;color:#26544d}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-chips.rx-invalid {outline:2px solid #b9472e;outline-offset:4px;border-radius:12px}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] {display:flex;flex-wrap:wrap;gap:12px!important;margin-top:10px}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] >label.form-check {
  display:inline-flex;position:relative;min-width:104px;min-height:48px;
  padding:11px 22px!important;margin:0!important;align-items:center;justify-content:center;
  border:2px solid #b8d0ca;border-radius:13px;background:#f6faf9;color:#26544d;
  font-weight:750;font-size:1rem;cursor:pointer;line-height:1.25;
}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] >label.form-check input {
  position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;pointer-events:none;
}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] >label.form-check:has(input:checked) {background:#176a60;border-color:#176a60;color:#fff;box-shadow:0 4px 13px rgba(23,106,96,.17)}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] >label.form-check:focus-within {outline:3px solid #c08927;outline-offset:2px}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form [data-yesno-group] .form-check-label {margin:0!important;color:inherit;font-weight:750;cursor:pointer}
/* Estilo: Ajusta a aparência em diferentes tamanhos de tela (celular, tablet ou computador). */
@media(max-width:480px){.rx-form .rx-chips button,.rx-form [data-yesno-group] >label.form-check{flex:1 1 115px}}

/* Grade de tamanhos: cinco opções por linha em telas largas, responsiva no celular. */
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-shirt-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:10px;margin-top:12px}
/* Estilo: Controla a aparência de campos de formulário. */
.rx-form .rx-shirt-sizes button{width:100%;min-width:0;padding:10px 8px;white-space:nowrap;font-size:.94rem;min-height:48px}
/* Estilo: Ajusta a aparência em diferentes tamanhos de tela (celular, tablet ou computador). */
@media(max-width:480px){.rx-form .rx-shirt-sizes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}