/* ==========================================================================
   OFF IMPORT — components.css
   Componentes de UI reutilizaveis. Depende de tokens.css (carregar depois).
   ========================================================================== */

/* == BOTOES == */
.oi-btn{
  --oi-btn-py:.9rem;
  --oi-btn-px:1.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--oi-s2);
  padding:var(--oi-btn-py) var(--oi-btn-px);
  font-family:var(--oi-font-body);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--oi-radius);
  background:transparent;
  color:var(--oi-graphite);
  cursor:pointer;
  transition:background-color var(--oi-t), color var(--oi-t),
             border-color var(--oi-t), transform var(--oi-t),
             box-shadow var(--oi-t), opacity var(--oi-t);
  -webkit-appearance:none;
  appearance:none;
}

.oi-btn:hover{ color:var(--oi-graphite); }

.oi-btn:active{ transform:translateY(1px); }

.oi-btn:focus-visible{
  outline:2px solid var(--oi-gold);
  outline-offset:2px;
}

.oi-btn svg{
  width:1.05em;
  height:1.05em;
  flex:0 0 auto;
}

/* Primario — grafite solido, texto creme */
.oi-btn--primary{
  background-color:var(--oi-graphite);
  border-color:var(--oi-graphite);
  color:var(--oi-cream);
}

.oi-btn--primary:hover,
.oi-btn--primary:focus-visible{
  background-color:var(--oi-ink);
  border-color:var(--oi-ink);
  color:var(--oi-white);
  box-shadow:var(--oi-shadow-md);
}

/* Secundario / ghost — contorno grafite, inverte no hover */
.oi-btn--ghost{
  background-color:transparent;
  border-color:var(--oi-graphite);
  color:var(--oi-graphite);
}

.oi-btn--ghost:hover,
.oi-btn--ghost:focus-visible{
  background-color:var(--oi-graphite);
  border-color:var(--oi-graphite);
  color:var(--oi-cream);
}

/* Ghost sobre fundo escuro */
.oi-btn--ghost-light{
  background-color:transparent;
  border-color:var(--oi-cream);
  color:var(--oi-cream);
}

.oi-btn--ghost-light:hover,
.oi-btn--ghost-light:focus-visible{
  background-color:var(--oi-cream);
  border-color:var(--oi-cream);
  color:var(--oi-graphite);
}

/* Dourado — destaque comercial, usar com parcimonia */
.oi-btn--gold{
  background-color:var(--oi-gold);
  border-color:var(--oi-gold);
  color:var(--oi-white);
}

.oi-btn--gold:hover,
.oi-btn--gold:focus-visible{
  background-color:var(--oi-gold-ink);
  border-color:var(--oi-gold-ink);
  color:var(--oi-white);
  box-shadow:var(--oi-shadow-md);
}

/* Link discreto com sublinhado dourado */
.oi-btn--link{
  padding:0;
  border:0;
  letter-spacing:.14em;
  color:var(--oi-gold-ink);
  border-bottom:1px solid var(--oi-gold-soft);
  border-radius:0;
}

.oi-btn--link:hover{
  color:var(--oi-graphite);
  border-bottom-color:var(--oi-graphite);
}

/* Tamanhos */
.oi-btn--sm{
  --oi-btn-py:.6rem;
  --oi-btn-px:1.15rem;
  font-size:.72rem;
  letter-spacing:.12em;
}

.oi-btn--lg{
  --oi-btn-py:1.15rem;
  --oi-btn-px:2.5rem;
  font-size:.875rem;
}

.oi-btn--block{
  display:flex;
  width:100%;
}

/* Estados */
.oi-btn:disabled,
.oi-btn[disabled],
.oi-btn[aria-disabled="true"],
.oi-btn--disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

.oi-btn--loading{
  position:relative;
  color:transparent;
  pointer-events:none;
}

.oi-btn--loading::after{
  content:"";
  position:absolute;
  width:1em;
  height:1em;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  color:var(--oi-cream);
  animation:oi-spin .7s linear infinite;
}

@keyframes oi-spin{ to{ transform:rotate(360deg); } }

/* Grupo de botoes */
.oi-btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--oi-s3);
}

@media (max-width:639px){
  .oi-btn-group > .oi-btn{ flex:1 1 100%; }
}

/* == CARD == */
.oi-card{
  display:flex;
  flex-direction:column;
  background-color:var(--oi-white);
  border:1px solid var(--oi-line);
  border-radius:var(--oi-radius-lg);
  transition:border-color var(--oi-t), box-shadow var(--oi-t), transform var(--oi-t);
}

.oi-card__media{
  position:relative;
  overflow:hidden;
  background-color:var(--oi-cream);
}

.oi-card__media img{
  width:100%;
  transition:transform 480ms cubic-bezier(.4,0,.2,1);
}

.oi-card__body{
  padding:var(--oi-s5);
  display:flex;
  flex-direction:column;
  gap:var(--oi-s2);
  flex:1 1 auto;
}

.oi-card__title{
  font-family:var(--oi-font-display);
  font-size:1.3125rem;
  font-weight:500;
  line-height:1.25;
  color:var(--oi-graphite);
}

.oi-card__text{
  font-size:.9375rem;
  color:var(--oi-muted);
}

.oi-card__footer{
  margin-top:auto;
  padding:var(--oi-s4) var(--oi-s5);
  border-top:1px solid var(--oi-line);
}

.oi-card--cream{
  background-color:var(--oi-cream);
  border-color:transparent;
}

.oi-card--flat{ border-color:transparent; }

.oi-card--hover:hover,
.oi-card--hover:focus-within{
  border-color:var(--oi-gold-soft);
  box-shadow:var(--oi-shadow-md);
}

.oi-card--hover:hover .oi-card__media img{ transform:scale(1.04); }

/* == BARRA DE CONFIANCA == */
.oi-trust{
  background-color:var(--oi-graphite);
  color:var(--oi-cream);
  padding-block:var(--oi-s5);
}

.oi-trust__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--oi-s5) var(--oi-s4);
}

@media (min-width:900px){
  .oi-trust__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.oi-trust__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--oi-s2);
  text-align:center;
  padding-inline:var(--oi-s2);
}

@media (min-width:900px){
  .oi-trust__item + .oi-trust__item{
    border-left:1px solid rgba(247,245,240,.14);
  }
}

.oi-trust__icon{
  width:22px;
  height:22px;
  color:var(--oi-gold-soft);
}

.oi-trust__title{
  font-family:var(--oi-font-body);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.4;
  color:var(--oi-cream);
}

.oi-trust__text{
  font-size:.8125rem;
  line-height:1.5;
  color:rgba(247,245,240,.68);
}

/* == BADGE == */
.oi-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--oi-s1);
  padding:.3rem .7rem;
  border:1px solid var(--oi-gold-soft);
  border-radius:999px;
  background-color:rgba(201,169,97,.10);
  color:var(--oi-gold-ink);
  font-family:var(--oi-font-body);
  font-size:.68rem;
  font-weight:600;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.14em;
  white-space:nowrap;
}

.oi-badge--solid{
  background-color:var(--oi-gold);
  border-color:var(--oi-gold);
  color:var(--oi-white);
}

.oi-badge--graphite{
  background-color:var(--oi-graphite);
  border-color:var(--oi-graphite);
  color:var(--oi-cream);
}

.oi-badge--ok{
  background-color:rgba(47,107,79,.10);
  border-color:var(--oi-ok);
  color:var(--oi-ok);
}

.oi-badge--danger{
  background-color:rgba(163,58,42,.08);
  border-color:var(--oi-danger);
  color:var(--oi-danger);
}

/* == DIVIDER (linha fina com ponto dourado ao centro) == */
.oi-divider{
  display:flex;
  align-items:center;
  gap:var(--oi-s3);
  width:100%;
  margin-block:var(--oi-s5);
  border:0;
}

.oi-divider::before,
.oi-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background-color:var(--oi-line);
}

.oi-divider__dot{
  flex:0 0 auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:var(--oi-gold);
}

/* Variante sem markup interno: o ponto vem do gradiente central.
   Altura de 5px porque background nao vaza da caixa — o traco de 1px
   fica centralizado verticalmente dentro dela. */
.oi-divider--auto{
  display:block;
  height:5px;
  background:
    radial-gradient(circle at center, var(--oi-gold) 0 2.5px, transparent 2.6px)
      center / 100% 5px no-repeat,
    linear-gradient(to right,
      transparent 0,
      var(--oi-line) 12%,
      var(--oi-line) calc(50% - 14px),
      transparent calc(50% - 14px),
      transparent calc(50% + 14px),
      var(--oi-line) calc(50% + 14px),
      var(--oi-line) 88%,
      transparent 100%)
      center / 100% 1px no-repeat;
}

.oi-divider--auto::before,
.oi-divider--auto::after{ content:none; }

.oi-divider--short{
  max-width:180px;
  margin-inline:auto;
}

.oi-divider--light::before,
.oi-divider--light::after{ background-color:rgba(247,245,240,.20); }

.oi-divider--light .oi-divider__dot{ background-color:var(--oi-gold-soft); }

/* == NOTICE / MENSAGENS == */
.oi-notice{
  display:flex;
  align-items:flex-start;
  gap:var(--oi-s3);
  padding:var(--oi-s4) var(--oi-s5);
  border:1px solid var(--oi-line);
  border-left:3px solid var(--oi-gold);
  border-radius:var(--oi-radius);
  background-color:var(--oi-cream-2);
  color:var(--oi-ink);
  font-size:.9375rem;
  line-height:1.55;
}

.oi-notice__icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:.22em;
  color:var(--oi-gold);
}

/* Envolver titulo + texto: sem isso viram itens flex irmaos e ficam lado a lado */
.oi-notice__body{
  flex:1 1 auto;
  min-width:0;
}

.oi-notice__title{
  display:block;
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.02em;
  color:var(--oi-graphite);
  margin-bottom:var(--oi-s1);
}

.oi-notice a{ text-decoration:underline; }

.oi-notice--success{
  border-left-color:var(--oi-ok);
  background-color:rgba(47,107,79,.06);
}

.oi-notice--success .oi-notice__icon{ color:var(--oi-ok); }

.oi-notice--error{
  border-left-color:var(--oi-danger);
  background-color:rgba(163,58,42,.06);
}

.oi-notice--error .oi-notice__icon{ color:var(--oi-danger); }

.oi-notice--muted{
  border-left-color:var(--oi-line);
  background-color:var(--oi-cream);
  color:var(--oi-muted);
}

/* == FORMULARIOS == */
.oi-field{
  display:flex;
  flex-direction:column;
  gap:var(--oi-s2);
  margin-bottom:var(--oi-s4);
}

.oi-label,
.oi-field > label{
  font-family:var(--oi-font-body);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--oi-graphite);
}

.oi-label .oi-req{ color:var(--oi-gold); }

.oi-help{
  font-size:.8125rem;
  line-height:1.5;
  color:var(--oi-muted);
}

.oi-error{
  font-size:.8125rem;
  line-height:1.5;
  color:var(--oi-danger);
}

.oi-input,
.oi-select,
.oi-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea{
  width:100%;
  min-height:48px;
  padding:.75rem var(--oi-s4);
  font-family:var(--oi-font-body);
  font-size:1rem;
  line-height:1.5;
  color:var(--oi-ink);
  background-color:var(--oi-white);
  border:1px solid var(--oi-line);
  border-radius:var(--oi-radius);
  box-shadow:none;
  transition:border-color var(--oi-t), box-shadow var(--oi-t), background-color var(--oi-t);
  -webkit-appearance:none;
  appearance:none;
}

textarea,
.oi-textarea{
  min-height:140px;
  padding-block:var(--oi-s3);
  line-height:1.6;
}

.oi-select,
select{
  padding-right:2.75rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A716A' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--oi-s4) center;
  background-size:12px 8px;
  cursor:pointer;
}

::placeholder{
  color:var(--oi-muted);
  opacity:.75;
}

.oi-input:hover,
.oi-select:hover,
.oi-textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover{
  border-color:var(--oi-gold-soft);
}

.oi-input:focus,
.oi-select:focus,
.oi-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--oi-gold);
  box-shadow:0 0 0 3px rgba(168,130,60,.14);
}

.oi-input:disabled,
.oi-select:disabled,
.oi-textarea:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  background-color:var(--oi-cream);
  color:var(--oi-muted);
  cursor:not-allowed;
}

.oi-input[aria-invalid="true"],
.oi-textarea[aria-invalid="true"],
.oi-select[aria-invalid="true"],
.oi-field--error .oi-input,
.oi-field--error .oi-select,
.oi-field--error .oi-textarea{
  border-color:var(--oi-danger);
}

.oi-input[aria-invalid="true"]:focus,
.oi-field--error .oi-input:focus{
  box-shadow:0 0 0 3px rgba(163,58,42,.14);
}

/* Check / radio */
.oi-check{
  display:flex;
  align-items:flex-start;
  gap:var(--oi-s3);
  font-size:.9375rem;
  line-height:1.5;
  color:var(--oi-ink);
  cursor:pointer;
}

.oi-check input[type="checkbox"],
.oi-check input[type="radio"]{
  flex:0 0 auto;
  width:18px;
  height:18px;
  min-height:0;
  margin-top:.18em;
  padding:0;
  accent-color:var(--oi-gold);
  border:1px solid var(--oi-line);
  cursor:pointer;
}

.oi-check input[type="radio"]{ border-radius:50%; }

/* Honeypot antispam — invisivel e fora do fluxo/tab order (ver skill antispam-forms) */
.oi-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Linha de campos lado a lado */
.oi-field-row{
  display:grid;
  grid-template-columns:1fr;
  gap:0 var(--oi-s4);
}

@media (min-width:640px){
  .oi-field-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .oi-field-row--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}