/* ==========================================================================
   SKYVEX™ — Briefing de contacto

   Usa exclusivamente los tokens de styles.css: colores, tipografía, radios,
   easings y tiempos salen del sistema de diseño, no de valores sueltos.
   Vive sobre el fondo oscuro de la sección de contacto.
   ========================================================================== */

.brief{
  margin-top:clamp(2.5rem,5vw,4rem);
  width:min(100%,44rem);
  margin-inline:auto;
  text-align:left;
}

.brief__intro{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.62);
  text-align:center;
  margin-bottom:1.5rem;
}

/* ---------- Formulario ---------- */
.brief__form{
  border:1px solid var(--line-on-dark);
  border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2.25rem);
  background:rgba(255,255,255,.035);
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.brief__contador{
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:0;
}

.brief__paso{ border:0; padding:0; margin:0; }
.brief__paso legend{
  font-size:var(--fs-lead);
  font-weight:600;
  letter-spacing:-.015em;
  color:#fff;
  margin-bottom:1rem;
  padding:0;
}

/* ---------- Opciones ---------- */
.brief__opciones{ display:grid; gap:.6rem; }

/* Contact Form 7 arma cada opcion como
     <span class="wpcf7-list-item"><label><input><span class="wpcf7-list-item-label">
   y no deja ponerle una clase propia a cada <label>. Ese <label> es el que
   antes llevaba .brief__op, asi que el estilo se ancla en esa estructura. La
   caja del radio, que era un <span class="brief__caja">, pasa a ::before. */
.brief__opciones .wpcf7-radio{ display:grid; gap:.6rem; }
.brief__opciones .wpcf7-list-item{ display:block; margin:0; }
.brief__opciones .wpcf7-list-item-label::before,
.brief__opciones .wpcf7-list-item-label::after{ content:none; }

.brief__opciones .wpcf7-list-item > label{
  position:relative;
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.85rem 1.1rem;
  border:1px solid var(--line-on-dark);
  border-radius:var(--r-md);
  cursor:pointer;
  color:rgba(255,255,255,.86);
  font-size:var(--fs-small);
  line-height:1.4;
  transition:border-color var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft);
}
.brief__opciones .wpcf7-list-item > label:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.045);
}

/* El radio real queda accesible pero invisible: el foco se dibuja en la caja. */
.brief__opciones .wpcf7-list-item input{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* La caja: aro en ::before, punto en ::after sobre el aro. */
.brief__opciones .wpcf7-list-item > label::before{
  content:"";
  width:1.05rem; height:1.05rem;
  flex:none;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-pill);
  transition:border-color var(--t-fast) var(--ease-soft);
}
.brief__opciones .wpcf7-list-item > label::after{
  content:"";
  position:absolute;
  left:calc(1.1rem + 3px);
  top:50%;
  width:calc(1.05rem - 6px); height:calc(1.05rem - 6px);
  border-radius:var(--r-pill);
  background:var(--lime);
  transform:translateY(-50%) scale(0);
  transition:transform var(--t-fast) var(--ease);
}

.brief__opciones .wpcf7-list-item > label:has(input:checked){
  border-color:var(--lime);
  background:rgba(223,255,57,.08);
  color:#fff;
}
.brief__opciones .wpcf7-list-item > label:has(input:checked)::before{ border-color:var(--lime); }
.brief__opciones .wpcf7-list-item > label:has(input:checked)::after{ transform:translateY(-50%) scale(1); }
.brief__opciones .wpcf7-list-item > label:has(input:focus-visible){ outline:2px solid var(--lime); outline-offset:2px; }

/* ---------- Campos ---------- */
.brief__campo{ display:flex; flex-direction:column; gap:.4rem; }
.brief__campo + .brief__campo{ margin-top:1rem; }

.brief__campo label{
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.brief__campo label span{ text-transform:none; letter-spacing:0; opacity:.7; }

.brief__campo input,
.brief__campo textarea{
  font-family:var(--font);
  font-size:var(--fs-body);
  color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-on-dark);
  border-radius:var(--r-md);
  padding:.8rem 1rem;
  width:100%;
  transition:border-color var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft);
}
.brief__campo textarea{ resize:vertical; min-height:5.5rem; }
.brief__campo input:hover,
.brief__campo textarea:hover{ border-color:rgba(255,255,255,.3); }
.brief__campo input:focus-visible,
.brief__campo textarea:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:1px;
  border-color:transparent;
  background:rgba(255,255,255,.08);
}
.brief__campo small{ font-size:var(--fs-micro); color:rgba(255,255,255,.45); }

/* ---------- Navegación ---------- */
.brief__nav{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }

/* ---------- Avisos y confirmación ---------- */
.brief__err{
  font-size:var(--fs-small);
  color:var(--lime);
  margin:0;
}

.brief__done{
  border:1px solid var(--line-on-dark);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.5rem);
  background:rgba(223,255,57,.07);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}
.brief__done h3{ font-size:var(--fs-h2); font-weight:600; letter-spacing:-.025em; color:#fff; }
.brief__done p{ color:rgba(255,255,255,.7); max-width:46ch; }
.brief__done strong{ color:#fff; }
.brief__done .btn{ margin-top:.5rem; }

/* ---------- Campo trampa ---------- */
/* Fuera de pantalla, no display:none: hay robots que ignoran lo oculto. */
.brief__trampa{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------- Modo por pasos (solo con JavaScript) ---------- */
.js .brief__form.is-pasos .brief__paso{ display:none; }
.js .brief__form.is-pasos .brief__paso.is-activo{ display:block; }

@media (prefers-reduced-motion:reduce){
  .brief__opciones .wpcf7-list-item > label,
  .brief__opciones .wpcf7-list-item > label::before,
  .brief__opciones .wpcf7-list-item > label::after,
  .brief__campo input,.brief__campo textarea{ transition:none; }
}

/* ==========================================================================
   Puente con Contact Form 7

   CF7 envuelve cada control y agrega sus propios avisos. Aca se le quita el
   estilo de fabrica y se le da el del sistema de diseno. Nada de esto cambia
   el aspecto del formulario: solo evita que el del plugin se cuele.
   ========================================================================== */

/* El <span> que CF7 pone alrededor de cada control no debe contar como caja
   propia dentro del flex de .brief__campo ni del grid de opciones. */
.brief__form .wpcf7-form-control-wrap{ display:block; }

/* Aviso por campo. Va donde iba el <small> de ayuda, con el lima del sistema
   en vez del rojo del plugin. */
.wpcf7 form.brief__form .wpcf7-not-valid-tip{
  font-size:var(--fs-micro);
  line-height:1.4;
  color:var(--lime);
  margin-top:.35rem;
}
.brief__campo .wpcf7-not-valid{ border-color:rgba(223,255,57,.5); }

/* Aviso general. Ocupa el lugar del antiguo <p class="brief__err">, con su
   mismo aspecto: sin recuadro, sin margenes propios. */
.wpcf7 form.brief__form .wpcf7-response-output{
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--lime);
  border:0;
  margin:0;
  padding:0;
}

/* Mientras el envio esta en vuelo el boton no admite un segundo clic. CF7
   marca el formulario con .submitting durante ese rato. */
.brief__form.submitting [data-brief-enviar]{ opacity:.55; pointer-events:none; }

/* Los botones de paso se ocultan con el atributo hidden, y .btn declara un
   display que gana al de la hoja del navegador. */
.brief__nav .btn[hidden]{ display:none; }