/* ZYX Preventa — detalle de producto (estilo neutral, acorde a los mockups). Hereda tipografía del tema. border #e3e3e6*/
.zyx-modo,
.zyx-reco {
  --zyx-bg: #ededed;
  --zyx-border: #e3e3e6;
  --zyx-muted: #444;
  --zyx-btn: #c0392b;
  --zyx-btn-dark: #12012C;
  background: var(--zyx-bg);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.zyx-modo-title { font-weight: 700; margin-bottom: 14px; font-size:16px; }

/* Selector: etiqueta a la izquierda, radio a la derecha */
.zyx-opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.zyx-opt {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 2px solid #12012C; border-radius: 8px;
  padding: 14px 16px; cursor: pointer; font-weight: 500; color:#000; font-size:18px;
}
.zyx-opt.is-active { background: #2f1948; color: #fff; border: 2px solid #12012C;  }
.zyx-opt input { accent-color: #fff; width: 18px; height: 18px; }

/* Paneles */
.zyx-panel[hidden] { display: none; }
.zyx-panel { border-top: 1px solid var(--zyx-border); padding-top: 16px; }
.zyx-tag { color: var(--zyx-muted); margin: 12px 0 48px; font-size:20px;}

/* Botones */
.zyx-btn {
  display: block; width: 100%; text-align: center;
  background: #CC2b2b; color: #fff; border: 0; border-radius: 5px;
  font-size: 1em; font-weight: bold; cursor: pointer;
  text-decoration: none;
  margin-bottom: 30px; height: 50px; 
  
}
.zyx-btn:hover { background: #E30613; color: #fff; }
.zyx-btn-outline { background: #22c15e; color: #fff; border: 2px solid #22c15e; font-weight:800; text-transform: uppercase;  display: flex; align-items: center; gap: 8px;
    justify-content: center;height: 50px; }
.zyx-btn-outline:hover { background: #10ae4c; color: #fff; border-color: #10ae4c; }
.zyx-btn-outline .wa-logo-svg{
    fill: #fff;
}

span.zyx-info svg {
    fill:#CC2B2B;
}

/* Cantidad */
.zyx-qty { display: inline-flex; align-items: center; border: 1px solid var(--zyx-border); border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 4px; }
.zyx-qty button { background: #fff; border: 0; width: 40px; height: 40px; font-size: 1.2em; cursor: pointer; }
.zyx-qty input { width: 52px; height: 40px; text-align: center; border: 0; border-left: 1px solid var(--zyx-border); border-right: 1px solid var(--zyx-border); -moz-appearance: textfield; }
.zyx-qty input::-webkit-outer-spin-button,
.zyx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Medios de pago */
.zyx-pagos { display: flex;  gap: 8px; margin-top: 14px; padding-bottom: 20px; }
.zyx-pagos span { font-size: 0.78em; color: #555; background: #fff; border: 1px solid var(--zyx-border); border-radius: 6px; padding: 4px 8px; }

.zyx-pagos {
    align-items: center;
  
   
}
a.add-request-quote-button.button{
    width: 100%;
    border-radius: 8px;
}

p.zyx-llegada{
   color: #858282;
}

img.ajax-loading {
    display: none !important;
}
.zyx-pagos img {
    height: 40px; /* ajusta el tamaño según tu diseño */
    width: auto;
    object-fit: contain;
    padding: 10px 5px 10px 5px;
    width: 100%;
    background-color: #f6f6f7;
    border-radius: 10px;
}

/* Reserva */
.zyx-reserva-label { font-weight: 700; margin: 0 0 12px; font-size: 20px; color:var(--zyx-muted);}
.zyx-montos { display: flex; align-items: center; gap: 12px; margin-bottom: 32px;   }

label.zyx-monto span {
    color: #666;
}
label.zyx-monto.is-active span {
    color: #12012C;
    
}

.zyx-monto {
  flex: 1; padding: 16px 8px; cursor: pointer; font-weight: 800; font-size: 1.4em; line-height: 1;
}
.zyx-monto input { display: none; }

.zyx-monto input[type=radio] {
    display: none;
}
/*precio woo**/
.zyx-montos span.woocommerce-Price-amount.amount {
    font-size: 30px;
}
.zyx-montos span.woocommerce-Price-currencySymbol {
    font-size: 20px;
}

button.single_add_to_cart_button.button.alt{
    background-color: #e30613;
    display: block !important;
}
.zyx-cal-fecha svg{
    fill: var(--muted);
}

.zyx-cal-fecha{
    display: flex;
    gap: 8px;
    color: var(--muted);
}


.zyx-o { color:#000; font-weight: 600; }
.zyx-llegada { margin: 8px 0; }
.zyx-cal { margin-right: 4px; }
.zyx-como { margin-top: 12px; font-size: 0.9em; font-size: 0.9em; background: #fff; padding: 10px; border: 2px solid #CC2B2B; border-radius: 8px;} 
.zyx-info { color: var(--zyx-muted); }

/* Estados */
.zyx-estado-title {margin-bottom: 24px; margin-top: 16px; }
.zyx-img-proxima { display: block; max-width: 100%; height: auto; margin: 12px 0; border-radius: 8px; margin-bottom: 48px;  }

/* FAQ */
.zyx-faq { margin-top: 48px; }
.zyx-faq-title { font-weight: 700; margin-bottom: 10px; }
.zyx-faq-item { background: #fff; border: 1px solid var(--zyx-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.zyx-faq-item summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between;}



.zyx-faqs-icon svg{
    transition: transform .35s ease;
}

.zyx-faq-item[open] .zyx-faqs-icon svg{
    transform: rotate(180deg);
}


.zyx-faq-item summary::-webkit-details-marker { display: none; }
.zyx-faq-item > div { margin-top: 10px; color: var(--zyx-muted); }
.zyx-faq-item ul { margin: 0; padding-left: 18px; color: #444; }

/* Recomendados */
.zyx-reco-title { font-weight: 700; margin-bottom: 12px; }
.zyx-reco-item { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--zyx-border); border-radius: 8px; padding: 10px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.zyx-reco-img img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.zyx-reco-info { display: flex; flex-direction: column; gap: 2px; }
.zyx-reco-cat { font-size: 0.7em; color: #999; letter-spacing: 0.04em; }
.zyx-reco-name { font-size: 0.92em; font-weight: 500; }
.zyx-reco-price { font-size: 0.9em; }
.zyx-reco-vermas { display: inline-block; margin-top: 4px; color:#e30613; }

/* ── Columnas IZQUIERDAS fijas mientras la de modo de compra baja con la página ──
   Añade la clase "zyx-sticky" a la columna de imagen Y a la de detalle.
   La columna de modo de compra NO lleva ninguna clase especial: fluye con el scroll. */
.zyx-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  align-self: flex-start !important; /* que no se estire a la altura de la fila */
}

/* Añade "zyx-sticky-row" a la FILA (row) que contiene las columnas: evita que se
   estiren a igual altura y que un overflow recorte el sticky. */
.zyx-sticky-row { align-items: flex-start !important; }
.zyx-sticky-row,
.zyx-sticky-row .col { overflow: visible !important; }

/* (Obsoleto) El scroll interno ya no se usa. Si esta clase quedó en la columna de
   modo de compra, se neutraliza para que la columna fluya con la página. */
.zyx-scroll-col {
  position: static;
  max-height: none;
  overflow: visible;
}

/* ── Modal "¿Cómo funciona la pre-venta?" ──────────────────────────────────── */
.zyx-como-trigger {
  text-transform: math-auto;
  display: flex;
  justify-content:center; gap: 4px;
  color: #CC2B2B;
  align-items: center;
  margin-bottom: 0px !important;
  font-size: 14px;
  text-transform: uppercase;
}
.zyx-como-trigger:hover{
    text-decoration: underline;
}
.zyx-modal[hidden] { display: none; }
.zyx-modal {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.zyx-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }

.zyx-contenedor-llegada{
    padding: 5px 20px;
    background: #fff;
    border-radius: 15px;
    margin: 30px 0px 30px 0px;
}


.zyx-modal-box {
  position: relative; background: #fff; border-radius: 12px;
  max-width: 520px; width: 100%; max-height: 90vh; overflow: auto;
  padding: 0 0 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.zyx-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: rgba(0,0,0,0.5); color: #fff; border: 0; border-radius: 50%;
  width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer;
  margin-right:0px !important; min-height: 0px !important; padding:0px !important;
}
.zyx-modal-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px 12px 0 0; overflow: hidden; }
.zyx-modal-video iframe,
.zyx-modal-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }




.zyx-modal-info { padding: 18px 20px 6px; color: #444; }
.zyx-modal-especialista {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 20px 0; padding-top: 14px; border-top: 1px solid #eee;
}
.zyx-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.zyx-modal-esp-text { display: flex; flex-direction: column; line-height: 1.3; }
.zyx-modal-esp-text a{
      
   color: #cc2b2b;
}