/* ============================================================
   CONEX361° — contacto.css
   Encargo por pasos y panel de briefing en vivo.
   ============================================================ */

.encargo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start;}
@media(max-width:980px){.encargo{grid-template-columns:1fr;}}

/* --- Indicador de pasos --- */
.pasos-ind{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:clamp(1.6rem,3vw,2.4rem);}
.pasos-ind__n{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--t-xs);font-weight:500;color:var(--ink-3);
  padding:.5rem .9rem;border:1px solid var(--rule);border-radius:var(--r-pill);
  min-height:40px;transition:border-color var(--d-1),color var(--d-1),background var(--d-1);
}
.pasos-ind__n::before{
  content:attr(data-n);font-family:var(--f-mono);font-size:var(--t-micro);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--rule);color:var(--ink-2);flex:none;
}
.pasos-ind__n[data-estado='activo']{border-color:var(--export);color:var(--ink);}
.pasos-ind__n[data-estado='activo']::before{background:var(--export);color:var(--mar);}
.pasos-ind__n[data-estado='hecho']{color:var(--ink-2);cursor:pointer;border-color:var(--ink-3);}
.pasos-ind__n[data-estado='hecho']::before{background:var(--mar);color:#fff;content:'✓';}
@media(max-width:640px){
  .pasos-ind__n{font-size:0;gap:0;padding:.5rem;}
  .pasos-ind__n::before{font-size:var(--t-micro);}
}

/* --- Pantallas --- */
.paso-pant{border:1px solid var(--rule);padding:clamp(1.4rem,2.8vw,2.2rem);background:var(--bg);}
.paso-pant[hidden]{display:none;}
.paso-pant__t{font-size:var(--t-lg);margin-bottom:.6rem;outline:none;}
.paso-pant__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;max-width:56ch;margin-bottom:1.8rem;}
.paso-pant__nav{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--rule);}
.paso-pant__nav .btn{flex:0 0 auto;}
.paso-pant__nav .der{margin-left:auto;}
@media(max-width:520px){.paso-pant__nav .btn{flex:1 1 100%;}.paso-pant__nav .der{margin-left:0;}}

/* --- Grupos de opciones --- */
.opgrupo{margin-bottom:1.9rem;}
.opgrupo > legend,.opgrupo__t{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.9rem;display:block;padding:0;
}
.opgrupo[data-invalid='1'] > legend,.opgrupo[data-invalid='1'] .opgrupo__t{color:#C4351F;}
.opgrupo[data-invalid='1'] .opgrupo__err{display:block;}
.opgrupo__err{display:none;font-size:var(--t-xs);color:#C4351F;margin-top:.6rem;}
.opgrupo__ayuda{font-size:var(--t-xs);color:var(--ink-3);margin-top:.7rem;line-height:1.55;}

/* Tarjetas de opción: más grandes que un chip, con su explicación */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.6rem;}
.opcion{position:relative;display:block;}
.opcion input{position:absolute;opacity:0;width:0;height:0;}
.opcion > div{
  border:1px solid var(--rule);padding:1rem 1.05rem;height:100%;
  display:flex;flex-direction:column;gap:.35rem;cursor:pointer;
  transition:border-color var(--d-1),background var(--d-1),transform var(--d-1) var(--e-out);
}
.opcion > div::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--export);
  transform:scaleY(0);transform-origin:top;transition:transform var(--d-2) var(--e-out);
}
.opcion:hover > div{border-color:var(--ink-3);transform:translateY(-2px);}
.opcion input:checked + div{border-color:var(--mar);background:var(--bg-alt);}
.opcion input:checked + div::before{transform:scaleY(1);}
.opcion input:focus-visible + div{outline:2px solid var(--export);outline-offset:2px;}
.opcion span{font-family:var(--f-brand);font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;color:var(--ink);}
.opcion em{font-style:normal;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;}

/* --- Panel de briefing en vivo --- */
.brief{
  border:1px solid var(--rule);background:var(--bg-alt);
  position:sticky;top:calc(var(--header-h) + 1.4rem);
}
@media(max-width:980px){.brief{position:static;}}
.brief__cab{
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brief__cab h2{font-size:var(--t-sm);font-family:var(--f-brand);letter-spacing:-.01em;}
.brief__cuerpo{padding:1.3rem;display:flex;flex-direction:column;gap:0;max-height:52vh;overflow-y:auto;}
.brief__vacio{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;}
.brief__l{padding:.8rem 0;border-bottom:1px solid var(--rule);}
.brief__l:last-child{border-bottom:0;}
.brief__l dt{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem;}
.brief__l dd{margin:0;font-size:var(--t-sm);color:var(--ink);line-height:1.55;}
.brief__pie{padding:1.1rem 1.3rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.6rem;}

/* Vista de impresión del encargo */
#brief-print{display:none;}
#brief-print h1{font-size:20pt;margin-bottom:1.2rem;}
#brief-print p{font-size:11pt;margin-bottom:.5rem;}

/* --- Bloque de WhatsApp destacado --- */
.wa{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  border:1px solid var(--rule);border-left:3px solid #25D366;
  padding:clamp(1.2rem,2.6vw,1.9rem);
}
@media(max-width:760px){.wa{grid-template-columns:auto 1fr;}.wa__cta{grid-column:1/-1;}.wa__cta .btn{width:100%;}}
.wa__ico{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(37,211,102,.12);color:#128C4A;
}
.wa__ico svg{width:26px;height:26px;}
.wa__t{font-family:var(--f-brand);font-weight:700;font-size:var(--t-md);letter-spacing:-.02em;}
.wa__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-top:.3rem;max-width:56ch;}