/* =========================================================
   WeConnect · Panel de contacto con cotizador por pasos
   Se usa en la portada (#contacto) y en /contacto.
   ========================================================= */

.contact-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: linear-gradient(135deg, rgba(10,124,255,.28), rgba(0,194,168,.14)), rgba(5,14,50,.85); border: 1px solid rgba(61,155,255,.4); }
.contact-panel > * { min-width: 0; }
.lines { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.line { container-type: inline-size; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(3,10,38,.5); border: 1px solid var(--line); }
.line div { min-width: 0; }
.line small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.line > div > span { user-select: all; overflow-wrap: anywhere; }
/* Correo: la letra se ajusta al ancho de la tarjeta (máx. 14px, mín. 12px) para que quepa
   en una línea sin cambiar el tamaño de la tarjeta. Si aun así no cabe, se corta tras la @. */
.line--email > div > span { font-size: clamp(12px, calc((100cqi - 96px) / 17.6), 14px); letter-spacing: -.01em; }
.copy { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-body); color: var(--text); background: rgba(234,242,255,.08); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.copy i { font-size: 12px; }
.copy.ok { color: #9ff0e2; border-color: rgba(0,194,168,.5); }
/* Tarjeta angosta: el botón queda solo con el ícono para dejar espacio al dato */
@container (max-width: 345px) {
  .copy { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .copy .lbl { display: none; }
  .line--email > div > span { font-size: clamp(12px, calc((100cqi - 48px) / 17.6), 14px); }
}
.copy:hover { background: rgba(234,242,255,.16); }

.wz { display: flex; flex-direction: column; gap: 18px; }
.wz label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.wz input, .wz select, .wz textarea { font: 15px/1.4 var(--f-body); color: var(--text); background: rgba(3,10,38,.6); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.wz select option { background: var(--deep); }
.wz textarea { min-height: 110px; resize: vertical; }
.wz input:focus, .wz select:focus, .wz textarea:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(10,124,255,.25); }
.wz .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-head { display: flex; flex-direction: column; gap: 10px; }
.wz-head span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.wz-bar { height: 4px; border-radius: 4px; background: rgba(234,242,255,.1); overflow: hidden; }
.wz-bar i { display: block; height: 100%; width: 16.6%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .5s cubic-bezier(.7,0,.2,1); }
.wz-step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; flex-direction: column; gap: 20px; }
.wz-step.active { display: flex; animation: stepin .5s cubic-bezier(.2,.8,.2,1); }
.wz-step.back.active { animation-name: stepback; }
@keyframes stepin { from { transform: translateX(40px); filter: blur(3px); } to { transform: none; filter: none; } }
@keyframes stepback { from { transform: translateX(-40px); filter: blur(3px); } to { transform: none; filter: none; } }
.wz-step legend { font: 700 22px/1.2 var(--f-body); padding: 0; margin-bottom: 4px; }
.q { display: flex; flex-direction: column; gap: 8px; }
.q > p { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.q > p small { font-weight: 400; color: var(--muted); }
.q.bad > p { color: #ff9aa5; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wz label.pill { display: inline-block; position: relative; gap: 0; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: block; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3,10,38,.55); font-size: 14px; line-height: 1.3; color: var(--text); cursor: pointer; transition: background .2s, border-color .2s; }
.pill span:hover { border-color: rgba(61,155,255,.6); }
.pill input:checked + span { background: rgba(10,124,255,.32); border-color: var(--primary-2); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wz label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--primary); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wz-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.err { margin: 0; font-size: 14px; color: #ffb3bc; padding: 10px 14px; border-radius: 12px; background: rgba(255,90,110,.1); border: 1px solid rgba(255,90,110,.35); }
.done { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.done h3 { font-size: 24px; }
.done > p { margin: 0; color: var(--muted); }

.contact-panel h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 14px 0 0; text-wrap: balance; }
.contact-panel .social { margin-top: 18px; }

@media (max-width: 960px) {
  .contact-panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wz .row { grid-template-columns: 1fr; }
}