/* Complementa assets/css/style.css (design system original del sitio) solo
   con lo que no existia en la version estatica: la ficha de producto
   individual, que antes no existia como pagina propia. */

.product-detail{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:40px; align-items:start;
}
@media (max-width:820px){ .product-detail{ grid-template-columns:1fr; } }

.product-detail__media.p-photo{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:var(--shadow);
}
.product-detail__media img{ width:100%; height:100%; object-fit:contain; padding:24px; }

.product-detail__info .p-tags{ margin-bottom:10px; }
.product-detail__desc{ font-size:0.98rem; }
.product-detail__specs{ margin:0 0 22px; font-size:0.92rem; }
.product-detail__info .btn-whatsapp{ margin-bottom:16px; }

/* Formulario de contacto (pagina Contacto) reutiliza .field/.form-card ya
   definidos en style.css; wpcf7/Contact Form no se usa, es HTML simple. */

/* ---------- Filtro por marca ---------- */
.marca-filter{ display:flex; align-items:center; gap:10px; margin:-8px 0 26px; flex-wrap:wrap; }
.marca-filter label{ font-size:0.82rem; font-weight:700; color:var(--ink-soft); }
.marca-filter select{
  font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
}
.marca-filter__clear{ font-size:0.82rem; color:var(--teal); font-weight:600; }

/* ---------- Paginacion ---------- */
.ibest-pagination{ margin-top:36px; }
.ibest-pagination ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; justify-content:center; }
.ibest-pagination a, .ibest-pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  padding:0 10px; border-radius:var(--radius); border:1px solid var(--line);
  font-size:0.86rem; font-weight:600; color:var(--ink-soft); background:var(--surface);
}
.ibest-pagination a:hover{ border-color:var(--teal); color:var(--teal); }
.ibest-pagination span.current{ background:var(--teal); border-color:var(--teal); color:#04231F; }
.ibest-pagination span.dots{ border:none; background:none; }

/* ---------- Banner Decare (look tecnologico) ---------- */
.decare-banner{
  position:relative; overflow:hidden; border-radius:14px; padding:40px;
  background:radial-gradient(900px 400px at 100% 0%, rgba(63,217,206,0.20), transparent 60%), linear-gradient(135deg,#0A1A26,#0F2436 55%,#086B68);
  color:#fff;
}
.decare-banner__circuit{
  position:absolute; inset:0; width:100%; height:100%; color:rgba(63,217,206,0.18); z-index:0;
}
.decare-banner__content{ position:relative; z-index:1; max-width:62ch; }
.decare-banner__badge{
  display:inline-flex; align-items:center; gap:8px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:#7FE0CB;
  border:1px solid rgba(127,224,203,0.35); background:rgba(63,217,206,0.08);
  padding:6px 12px; border-radius:20px; margin-bottom:16px;
}
.decare-banner__pulse{
  width:7px; height:7px; border-radius:50%; background:#3FD9CE; box-shadow:0 0 0 rgba(63,217,206,0.6);
  animation:decarePulse 1.8s infinite;
}
@keyframes decarePulse{
  0%{ box-shadow:0 0 0 0 rgba(63,217,206,0.6); }
  70%{ box-shadow:0 0 0 8px rgba(63,217,206,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,217,206,0); }
}
.decare-banner h3{ font-size:2rem; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:-0.02em; margin-bottom:2px; }
.decare-banner__sub{ color:#B9CBC7; font-weight:700; margin-bottom:14px; }
.decare-banner p{ color:rgba(255,255,255,0.82); }
.decare-banner__stats{ display:flex; gap:26px; margin:18px 0 22px; flex-wrap:wrap; }
.decare-banner__stats b{ display:block; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:1.3rem; color:#3FD9CE; }
.decare-banner__stats span{ font-size:0.72rem; color:#8FA6A0; text-transform:uppercase; letter-spacing:0.04em; }
@media (prefers-reduced-motion: reduce){ .decare-banner__pulse{ animation:none; } }

/* ---------- Paginas legales ---------- */
.legal-content h2{ font-size:1.15rem; margin-top:1.6em; }
.legal-content h3{ font-size:1rem; margin-top:1.2em; }
.legal-content p, .legal-content li{ color:var(--ink-soft); font-size:0.94rem; }
.legal-content ul, .legal-content ol{ padding-left:1.3em; }
.legal-content strong{ color:var(--ink); }

/* ---------- Lista de cotizacion (boton "Agregar") ---------- */
/* .btn tiene white-space:nowrap (bueno para botones de nav); en tarjetas
   angostas con .btn-block el texto puede no caber en pantallas muy
   pequenas y desbordarse visualmente — aqui si dejamos que se envuelva. */
.btn-block{ white-space:normal; text-align:center; }
.cotizacion-add{ margin-top:6px; }
.cotizacion-add.is-added{ border-color:var(--teal); color:var(--teal-deep); background:var(--teal-tint); }

/* ---------- Boton flotante "Mi cotizacion" ---------- */
.cotizacion-float{
  position:fixed; left:20px; bottom:20px; z-index:59;
  display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
  border:none; border-radius:30px; padding:12px 18px 12px 14px; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.25); font:inherit; font-weight:700; font-size:0.86rem;
}
.cotizacion-float[hidden]{ display:none; }
.cotizacion-float svg{ width:20px; height:20px; }
.cotizacion-float__count{
  background:var(--teal); color:#04231F; border-radius:50%; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; font-size:0.78rem;
}
@media (max-width:640px){ .cotizacion-float{ left:12px; bottom:88px; } }

/* ---------- Drawer de cotizacion ---------- */
.cotizacion-drawer__overlay{ position:fixed; inset:0; background:rgba(10,26,38,0.55); z-index:70; }
.cotizacion-drawer__panel{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--surface);
  z-index:71; padding:28px 24px; overflow-y:auto; box-shadow:-8px 0 30px rgba(0,0,0,0.2);
}
.cotizacion-drawer__close{
  position:absolute; top:16px; right:16px; background:none; border:none; font-size:1.6rem;
  line-height:1; cursor:pointer; color:var(--ink-soft);
}
.cotizacion-drawer__ayuda{ font-size:0.86rem; }
.cotizacion-drawer__lista{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; }
.cotizacion-drawer__lista li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 12px; font-size:0.88rem; color:var(--ink);
}
.cotizacion-drawer__quitar{ background:none; border:none; color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; flex:0 0 auto; }
.cotizacion-drawer__quitar:hover{ color:var(--amber); }
.cotizacion-drawer__vacio{ color:var(--ink-soft); font-size:0.88rem; }
.cotizacion-drawer__form .field{ margin-bottom:12px; }
.cotizacion-drawer__acciones{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.cotizacion-drawer__mensaje{ font-size:0.86rem; margin-top:12px; }