/* Ficha de producto: precio "desde", sellos, calculadora, barra fija y relacionados.
   Lo inyecta scripts/mejoras_seo.py solo en producto/*.html. */

.precio-desde{margin:-4px 0 14px;font-family:var(--font-head);color:var(--navy);display:flex;align-items:baseline;gap:8px}
.precio-desde span{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--gray-700);text-transform:uppercase;letter-spacing:.8px}
.precio-desde strong{font-size:30px;font-weight:800;letter-spacing:-.5px}
.precio-desde:empty{display:none}

.sellos-confianza{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--gray-200)}
.sellos-confianza li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gray-700)}
.sellos-confianza svg{color:var(--red);flex-shrink:0}

.calc-pintura{margin-top:14px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--gray-50)}
.calc-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;background:none;border:0;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--navy);text-align:left}
.calc-toggle svg{color:var(--red)}
.calc-toggle::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.calc-toggle[aria-expanded="true"]::after{transform:rotate(-135deg)}
.calc-body{padding:0 16px 16px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}
.calc-body label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gray-700)}
.calc-body label span{display:flex;align-items:center;gap:6px;font-size:14px;text-transform:none;letter-spacing:0}
.calc-body input,.calc-body select{padding:10px 12px;border:2px solid var(--gray-200);border-radius:var(--radius);font-family:var(--font-body);font-size:16px;background:#fff;color:var(--black)}
.calc-body input{width:110px}
.calc-body input:focus,.calc-body select:focus{outline:none;border-color:var(--red)}
.calc-res{flex-basis:100%;font-size:14px;line-height:1.6;color:var(--gray-700);margin:0}
.calc-res strong{color:var(--navy)}
.calc-usar{margin-left:4px;background:none;border:0;padding:0;color:var(--red-dark);font-weight:700;font-size:14px;text-decoration:underline;cursor:pointer}

/* Barra de compra fija (solo celular) */
.barra-compra{display:none}
@media (max-width:768px){
  .barra-compra{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:997;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
    box-shadow:0 -6px 24px rgba(0,0,0,.12);transform:translateY(110%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .barra-compra.visible{transform:none}
  .barra-compra div{flex:1;min-width:0;display:flex;flex-direction:column}
  .barra-compra strong{font-family:var(--font-head);font-size:14px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-compra span{font-size:13px;font-weight:700;color:var(--red-dark)}
  .barra-compra button{flex-shrink:0;padding:12px 22px;border:0;border-radius:var(--radius);background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px}
  .barra-compra button:active{transform:scale(.96)}
  /* que el boton flotante de WhatsApp no quede tapado por la barra */
  body.con-barra-compra .fab-wa{bottom:84px;transition:bottom .3s}

  /* Relacionados en carrusel horizontal en vez de 4 tarjetas gigantes apiladas */
  .related-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 16px 8px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .related-grid::-webkit-scrollbar{display:none}
  .related-card{flex:0 0 58%;scroll-snap-align:start}
  .detail-section{padding-left:16px;padding-right:16px}

  .sellos-confianza li{font-size:12px}
}