/* ===== Contacto / Formulario de cotización ===== */

/* Cualquier elemento con el atributo "hidden" debe quedar oculto siempre,
   incluso si tiene su propia regla display:flex/grid (como .qf-section o
   .qf-field) — sin esto, el estilo del sitio le gana al atributo hidden del
   navegador y el elemento se sigue viendo aunque JS le haya puesto hidden=true. */
[hidden]{ display:none !important; }

/* El formulario va a la izquierda y "Tu solicitud" a la derecha — mismo orden
   que usa Caravista (`.config-layout` en styles.css ya trae "1fr 320px" por
   default), así que aquí no hace falta pisar el ancho de columnas.
   Header sin título/subtítulo: la ruta (breadcrumb) es la que indica en qué
   sección estás, en negritas y color de marca (ver .crumb-current abajo). */
.config-header-slim{ padding-bottom:20px; }
.crumb-current{ color:var(--brick); font-weight:700; }

.contact-mode-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
  padding:14px 16px;
  border:1px solid var(--line-on-dark);
  background:rgba(237,230,217,0.035);
}
.contact-mode-bar > div{ display:flex; flex-direction:column; gap:3px; }
.contact-mode-bar strong{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.contact-mode-bar span{ color:var(--mortar); font-size:12px; line-height:1.4; }
.contact-mode-toggle{
  flex-shrink:0;
  min-height:40px;
  padding:9px 13px;
  border:1px solid var(--sand);
  background:transparent;
  color:var(--sand);
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:background 0.15s ease, color 0.15s ease;
}
.contact-mode-toggle:hover{ background:var(--sand); color:var(--charcoal); }
.contact-mode-toggle:focus-visible,
.qr-empty-cart:focus-visible,
.cart-icon-btn:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

/* --- Panel "Tu solicitud" (antes "Tu selección") --- */
.qr-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.qr-panel-head h3{ margin:0; }
.qr-edit-link{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--brick);
}
.qr-edit-link svg{ width:13px; height:13px; }
.qr-edit-link:hover{ color:var(--sand); }
.qr-panel-sub{
  font-size:12px;
  color:var(--mortar);
  line-height:1.5;
  margin-top:-10px;
}

.cqty{
  font-family:'Space Grotesk', sans-serif;
  font-size:10px;
  color:var(--mortar);
  margin-top:2px;
}
.quote-request-panel .cart-list{ overflow-x:hidden; }
.quote-request-panel .cart-item{ flex-wrap:wrap; }
.quote-request-panel .cart-info{ flex:1 1 calc(100% - 64px); }
.cart-actions{
  display:flex;
  flex:1 0 100%;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  padding-left:64px;
  margin-top:-5px;
}
.cart-icon-btn{
  width:34px;
  min-width:34px;
  min-height:30px;
  padding:0;
  border-radius:4px;
  background:none;
  color:var(--mortar);
  display:flex; align-items:center; justify-content:center;
  gap:5px;
  font-family:'Space Grotesk', sans-serif;
  font-size:9px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  transition:color 0.15s ease, background 0.15s ease;
}
.cart-icon-btn svg{ width:13px; height:13px; }
.cart-icon-btn:hover{ color:var(--plaster); background:rgba(237,230,217,0.08); }
.cart-icon-btn.cart-del{ color:var(--brick); }
.cart-icon-btn.cart-del:hover{ color:#fff; background:rgba(184,75,49,0.22); }

.qr-cart-tools{
  padding-top:14px;
  border-top:1px solid var(--line-on-dark);
}
.qr-empty-cart{
  min-height:40px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(184,75,49,0.58);
  background:transparent;
  color:var(--brick);
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:background 0.15s ease, color 0.15s ease;
}
.qr-empty-cart svg{ width:14px; height:14px; }
.qr-empty-cart:hover{ background:var(--brick); color:#fff; }
.qr-cart-status{
  min-height:16px;
  margin-top:-12px;
  color:var(--sand);
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  line-height:1.4;
}

.qr-collapse-toggle{
  display:none;
  align-items:center;
  gap:6px;
  background:none;
  color:var(--sand);
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-top:-6px;
}
.qr-collapse-toggle svg{ width:12px; height:12px; transition:transform 0.2s ease; }
.qr-collapse-toggle[aria-expanded="false"] svg{ transform:rotate(-90deg); }
#qrCollapseBody.collapsed{ display:none; }

.qr-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
  margin-top:4px;
  border-top:1px solid var(--line-on-dark);
}
.qr-summary-icon{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line-on-dark);
  color:var(--sand);
  display:flex; align-items:center; justify-content:center;
}
.qr-summary-icon svg{ width:16px; height:16px; }
.qr-summary strong{ display:block; font-size:13px; }
.qr-summary span{ font-size:11.5px; color:var(--mortar); }

/* --- Formulario --- */
.quote-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.quote-layout > main{ min-width:0; }
.qf-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.qf-error-summary,
.qf-server-error{
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid var(--brick);
  background:rgba(184,75,49,0.12);
  color:var(--plaster);
  font-size:13px;
  line-height:1.5;
}
.qf-server-error{ margin-top:14px; }
.qf-required-note{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--mortar);
  margin:0 0 12px;
}
.qf-required-note span{ color:var(--brick); }
.qf-sections{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.qf-section{
  position:relative;
  display:grid;
  grid-template-columns:160px minmax(0, 1fr);
  column-gap:28px;
  row-gap:14px;
  align-items:start;
  padding:24px;
  border:1px solid var(--line-on-dark);
  background:rgba(237,230,217,0.025);
}
.qf-section::before{
  content:'';
  position:absolute;
  top:24px;
  bottom:24px;
  left:198px;
  width:1px;
  background:var(--line-on-dark);
}
.qf-section > .qf-row,
.qf-section > .qf-field{
  grid-column:2;
  width:100%;
}
.qf-section-head{
  grid-column:1;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.4;
  padding:1px 14px 0 0;
}
.qf-num{
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid var(--brick);
  color:var(--brick);
  font-size:11px;
  display:flex; align-items:center; justify-content:center;
}

.qf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 20px;
}
.qf-row-3{ grid-template-columns:1fr 1fr 1fr; }
.qf-row-single > .qf-field{ grid-column:1 / -1; }
.qf-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.qf-field-full{ grid-column:1 / -1; }
.qf-field span:first-child{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mortar);
}
.qf-field input,
.qf-field textarea,
.qf-field select{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  background:rgba(237,230,217,0.04);
  border:1px solid var(--line-on-dark);
  color:var(--plaster);
  transition:border-color 0.15s ease;
}
.qf-field select{ cursor:pointer; }
.qf-field select option{ background:var(--charcoal); color:var(--plaster); }
.qf-field input::placeholder,
.qf-field textarea::placeholder{ color:var(--mortar); opacity:0.7; }
.qf-field input:focus,
.qf-field textarea:focus,
.qf-field select:focus{ border-color:var(--sand); }
.qf-field input:focus-visible,
.qf-field textarea:focus-visible,
.qf-field select:focus-visible{
  outline:2px solid var(--sand);
  outline-offset:2px;
}
.qf-field textarea{ resize:vertical; min-height:88px; line-height:1.5; }

.qf-field.invalid input,
.qf-field.invalid textarea,
.qf-field.invalid select{ border-color:var(--brick); }
.qf-error{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  color:var(--brick);
  min-height:13px;
}
.qf-error:empty{ display:none; }

/* --- Radios "¿Requiere factura?" --- */
.qf-radio-row{ display:flex; gap:22px; padding-top:2px; }
.qf-radio{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  cursor:pointer;
  min-height:44px;
}
.qf-radio input{ accent-color:var(--brick); width:15px; height:15px; }
.qf-radio-row.invalid{ outline:1px solid var(--brick); outline-offset:6px; }

/* --- Adjuntar CSF --- */
.qf-dropzone{
  max-width:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:26px 16px;
  border:1px dashed var(--line-on-dark);
  background:rgba(237,230,217,0.02);
  color:var(--mortar);
  cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.qf-dropzone:hover,
.qf-dropzone.dragging{ border-color:var(--sand); background:rgba(237,230,217,0.05); }
.qf-dropzone svg{ width:22px; height:22px; color:var(--sand); }
.qf-dropzone span{ font-size:13px; color:var(--plaster); line-height:1.4; }
.qf-dropzone small{ font-family:'Space Grotesk', sans-serif; font-size:10px; color:var(--mortar); }
.qf-file-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  color:var(--sand);
}

/* --- Aviso de privacidad + envío: misma fila, checkbox a la izquierda y
   botón a la derecha (en mobile se apilan uno debajo del otro). --- */
.qf-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:20px 24px;
  border:1px solid var(--line-on-dark);
  background:rgba(237,230,217,0.025);
}
.qf-privacy{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12.5px;
  color:var(--mortar);
  line-height:1.5;
  cursor:pointer;
  flex:1 1 320px;
}
.qf-privacy input{ accent-color:var(--brick); width:15px; height:15px; margin-top:1px; flex-shrink:0; }
.qf-privacy a{ color:var(--sand); text-decoration:underline; }

.qf-footer .btn-block{
  flex:0 0 auto;
  width:auto;
  max-width:340px;
  gap:10px;
}
.qf-footer .btn-block svg{ width:16px; height:16px; }

.form-success{
  max-width:640px;
  margin-top:22px;
  padding:18px 20px;
  border:1px solid var(--line-on-dark);
  background:rgba(237,230,217,0.03);
}
.form-success h3{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:17px;
  margin-bottom:8px;
}
.form-success p{
  font-size:13px;
  color:var(--mortar);
  line-height:1.6;
}
.form-success a{ color:var(--sand); text-decoration:underline; }

@media (max-width: 860px){
  .contact-mode-bar{ align-items:stretch; flex-direction:column; }
  .contact-mode-toggle{ width:100%; }
  .cart-icon-btn{ width:44px; min-width:44px; min-height:44px; padding:0; }
  .qf-sections{ gap:10px; }
  .qf-row,
  .qf-row-3{ grid-template-columns:1fr; }
  .qf-footer{ flex-direction:column; align-items:stretch; gap:12px; }
  .qf-privacy{ flex:none; width:100%; min-height:0; }
  .qf-footer .btn-block{ width:100%; max-width:none; }
  .qr-collapse-toggle{ display:flex; }
}

@media (max-width: 720px){
  .quote-form{ gap:8px; }
  .qf-sections{ gap:8px; }
  .qf-section{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
  }
  .qf-section::before{ display:none; }
  .qf-section-head{
    grid-column:1;
    grid-row:auto;
    align-items:center;
    padding:0 0 10px;
    border-right:0;
    border-bottom:1px solid var(--line-on-dark);
  }
  .qf-section > .qf-row,
  .qf-section > .qf-field{ grid-column:1; }
  .qf-row,
  .qf-row-3{ gap:12px; }
  .qf-field{ gap:5px; }
  .qf-error:empty{ display:none; }
  .qf-field input,
  .qf-field select{ min-height:46px; padding:10px 12px; }
  .qf-field textarea{ min-height:82px; padding:10px 12px; }
  .qf-footer{ padding:14px 16px; }
}