/* ==========================================================================
   Portal de Cotización — réplica de la estructura de "getaquotew2" de Ally
   Moving (card sobre fondo de página, section-label subrayado por pregunta,
   pills compactos, icon-box en los inputs, sub-panel con borde izquierdo,
   fila de confirmación separada del footer), con la paleta de BINARK:
   fondo de página con la imagen de marca (bg.png), header oscuro #333333,
   y cuerpo del formulario en tema BLANCO (como Ally Moving) con bordes y
   textos combinando #333333 (dominante) y #5FB901 (acento).
   ========================================================================== */

body{
  background:url('../img/bg.png') #000000 no-repeat center top / cover fixed;
}

.cotiz-topbar{
  max-width:var(--container); margin:0 auto; padding:26px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cotiz-topbar img{ height:34px; width:auto; }
.cotiz-back{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--ink-dim); transition:color .3s var(--ease-fluid);
}
.cotiz-back:hover{ color:var(--accent); }

.cotiz-wrap{ max-width:680px; margin:0 auto; padding:10px 24px 120px; }
@media (max-width:640px){ .cotiz-wrap{ padding:0 16px 100px; } }

.cotiz-card{
  background:#ffffff; border-radius:var(--radius-card); overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
}

/* -------- Header -------- */
.cotiz-header{ background:#333333; padding:26px 30px 22px; text-align:center; }
.cotiz-header h1{
  color:#ffffff; font-size:1.6rem; font-weight:700; margin:0; line-height:1.3;
  text-transform:none; letter-spacing:0;
}
.cotiz-header h1 span{ color:var(--accent); }
.cotiz-header h1 i{ color:var(--accent); font-size:.85em; margin-right:6px; }
.cotiz-header__desc{
  color:rgba(255,255,255,.62); font-size:9px; line-height:1.6; font-style:normal;
  margin:10px 0 0;
}
.cotiz-header__title--success{ display:none; }
body.is-sent .cotiz-header__title--default{ display:none; }
body.is-sent .cotiz-header__title--success{ display:block; }
body.is-sent .cotiz-header__desc{ display:none; }

/* -------- Cuerpo del formulario: tema blanco (como Ally Moving) -------- */
.cotiz-body{ background:#ffffff; padding:28px 30px 8px; }
@media (max-width:640px){ .cotiz-body{ padding:20px 18px 6px; } }

/* -------- Paso: etiqueta de sección (subrayada, sin banner de color) -------- */
.q-step{ margin-bottom:26px; }
.q-step__banner{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#333333; margin:0 0 10px; padding-bottom:6px;
  border-bottom:2px solid rgba(95,185,1,.35);
}
.q-step__banner .q-num{ display:none; }
.q-step__banner i{ font-size:13px; color:var(--accent); }

/* -------- Chips de opción (radio) -------- */
.q-options{ display:flex; flex-wrap:wrap; gap:8px; }
.q-chip{ position:relative; display:inline-flex; }
.q-chip input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.q-chip .chip-ui{
  display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:50px;
  border:1.5px solid #d8d8d8; background:#fafafa; color:#444;
  font-size:12.5px; font-weight:500; transition:background .18s, border-color .18s, color .18s;
  white-space:nowrap;
}
.q-chip .chip-ui i{ font-size:12px; }
.q-chip input:hover + .chip-ui{ border-color:#333333; color:#333333; }
.q-chip input:checked + .chip-ui{ background:#333333; border-color:#333333; color:#ffffff; }
.q-chip input:focus-visible + .chip-ui{ outline:2px solid var(--accent); outline-offset:2px; }

/* -------- Modo "enfocado": al elegir un servicio se ocultan los demás -------- */
.q-options.is-locked .q-chip{ display:none; }
.q-options.is-locked .q-chip.is-selected-only{ display:inline-flex; }
.q-change-btn{
  display:none; align-items:center; gap:6px; margin:-4px 0 16px; padding:0; background:none; border:none;
  color:var(--accent); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer;
}
.q-change-btn.is-visible{ display:inline-flex; }
.q-change-btn:hover{ text-decoration:underline; }
.q-change-btn i{ font-size:10.5px; }

/* -------- Revelado condicional: caja con borde izquierdo verde -------- */
.q-reveal{
  display:none; background:#fafafa; border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:14px 16px; margin-top:12px;
}
.q-reveal.is-open{ display:block; animation:qRevealIn .2s ease; }
@keyframes qRevealIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.q-sub-label{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#333333; margin-bottom:10px;
}
/* El ícono parpadea para que el cliente note las nuevas opciones que
   acaban de aparecer tras elegir algo. Al estar dentro de un .q-reveal
   (display:none hasta que se abre), el parpadeo arranca solo al mostrarse. */
.q-sub-label i{ font-size:12px; color:var(--accent); animation:qSubLabelParpadeo 1.3s ease-in-out infinite; }
@keyframes qSubLabelParpadeo{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.3; transform:scale(1.25); } }
@media (prefers-reduced-motion:reduce){ .q-sub-label i{ animation:none; } }

/* -------- Inputs con icon-box (igual que Ally: caja de color + input unidos) -------- */
.cotiz-body .field{ position:relative; }
.cotiz-body .field-row{ display:flex; align-items:stretch; gap:0; }
.cotiz-body .field-icon-box{
  flex-shrink:0; width:34px; display:flex; align-items:center; justify-content:center;
  background:#333333; color:#ffffff; border-radius:var(--radius-input) 0 0 var(--radius-input);
  font-size:13px;
}
.cotiz-body .field-row:has(textarea) .field-icon-box{ align-items:flex-start; padding-top:9px; }
.cotiz-body .field input,
.cotiz-body .field select,
.cotiz-body .field textarea{
  flex:1; min-width:0; background:#ffffff; border:1px solid #ddd;
  color:#333333; border-radius:0 var(--radius-input) var(--radius-input) 0; border-left:none;
  padding:9px 13px;
}
.cotiz-body .field input::placeholder,
.cotiz-body .field textarea::placeholder{ color:#9a9a9a; }
.cotiz-body .field input:focus,
.cotiz-body .field select:focus,
.cotiz-body .field textarea:focus{
  border-color:var(--accent); background:#ffffff; box-shadow:0 0 0 3px rgba(95,185,1,.16);
}

/* -------- Confirmación + envío (misma caja, como en Ally) -------- */
.cotiz-confirm-row{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 20px; margin:6px 0 22px;
  background:rgba(95,185,1,.08); border:1.5px solid rgba(95,185,1,.3); border-radius:10px;
}
.cotiz-confirm-check{ display:flex; align-items:center; gap:10px; align-self:stretch; }
.cotiz-confirm-check input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.cotiz-confirm-check label{ font-size:12.5px; color:#333333; cursor:pointer; margin:0; }
.cotiz-confirm-row .btn{
  padding:13px 40px; background:#333333; color:#ffffff; border-color:#333333;
}
.cotiz-confirm-row .btn:hover{ background:#000000; border-color:#000000; }
.cotiz-confirm-row .btn:disabled{ opacity:.4; cursor:not-allowed; }
.cotiz-confirm-row .btn:disabled .btn-icon{ animation:none !important; }
.cotiz-status{ font-size:12.5px; color:#8a8a8a; min-height:16px; }

.cotiz-note{ font-size:12.5px; color:var(--ink-faint); margin-top:10px; text-align:center; }

.q-hint{ font-size:10px; line-height:1.6; color:#8a8a8a; font-style:italic; margin:8px 0 0; }
.q-hint strong{ font-style:normal; font-weight:700; color:#666; }

/* -------- Fondo animado al enviar: "Matrix" (mismo efecto del formulario de
   contacto del sitio) y luego red de nodos, ambos sobre el fondo de la
   PÁGINA completa (no del cuerpo del formulario) -------- */
#cotizHackBg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease;
}
body.is-sending #cotizHackBg,
body.is-sent #cotizHackBg{ opacity:.6; }
.cotiz-topbar, .cotiz-wrap{ position:relative; z-index:1; }

body.is-sent .cotiz-body > form{ display:none; }

/* -------- Pantalla de éxito (mismo diseño de la confirmación de Ally Moving
   tras enviar su cotización, con los colores de BINARK) -------- */
.cotiz-success{
  display:none; flex-direction:column; align-items:center; text-align:center;
  padding:36px 8px 14px; gap:0;
}
body.is-sent .cotiz-success{ display:flex; }
.cotiz-success .pulse-wrap{ position:relative; width:84px; height:84px; margin:0 auto 22px; }
.cotiz-success .pulse-ring{
  position:absolute; inset:0; border-radius:50%; background:rgba(95,185,1,.22);
  animation:cotizPulseRing 2s ease-out infinite;
}
.cotiz-success .pulse-ring:nth-child(2){ animation-delay:.6s; }
.cotiz-success .pulse-ring:nth-child(3){ animation-delay:1.2s; }
@keyframes cotizPulseRing{
  0%{ transform:scale(.82); opacity:.85; }
  100%{ transform:scale(1.75); opacity:0; }
}
.cotiz-success .pulse-core{
  position:absolute; inset:16px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(95,185,1,.35);
}
.cotiz-success .pulse-core i{ color:#ffffff; font-size:1.7rem; }
.cotiz-success__box{
  background:rgba(95,185,1,.08); border:1.5px solid rgba(95,185,1,.3); border-radius:14px;
  padding:18px 24px; margin:4px 0 16px; max-width:440px;
}
.cotiz-success__box p{ font-size:13.5px; line-height:1.75; color:#444444; margin:0 0 12px; max-width:none; }
.cotiz-success__box p:last-child{ margin-bottom:0; }
.cotiz-success__box strong{ color:#222222; font-weight:700; }
.cotiz-success__note{ font-size:12px; line-height:1.6; color:#8a8a8a; max-width:420px; margin:0 0 24px; }
.cotiz-success__note strong{ color:#666; }
.cotiz-success .btn{
  padding:12px 30px; background:#333333; color:#ffffff; border-color:#333333;
}
.cotiz-success .btn:hover{ background:#000000; border-color:#000000; }
.cotiz-success .btn .btn-icon{ background:rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce){
  .cotiz-success .pulse-ring{ animation:none !important; opacity:0 !important; }
  #cotizHackBg{ display:none !important; }
}