/* ============================================================
   Innova Seguridad - Tienda estatica de cerraduras
   Prefijo it-* para no chocar con el tema (Bootstrap 4).
   Todo el CSS vive aqui: nunca en <style> ni en atributos style.
   ============================================================ */

:root{
  --it-rojo:#CC0000;
  --it-rojo-osc:#a80000;
  --it-wa:#25D366;
  --it-wa-osc:#1da851;
  --it-texto:#333;
  --it-borde:#e8e8e8;
}

.it-wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* El tema fija la barra de navegacion: damos aire al contenido */
main#contenido{ padding-top:74px; }

/* Accesibilidad: saltar al contenido y foco visible por teclado */
.is-skip{
  position:absolute; left:-9999px; top:8px; z-index:2147483647;
  background:var(--it-rojo); color:#fff; padding:10px 16px; border-radius:6px;
  font-weight:bold; text-decoration:none;
}
.is-skip:focus{ left:8px; outline:3px solid #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--it-rojo); outline-offset:2px;
}

/* ---------------- Miga de pan ---------------- */
.it-breadcrumb{ padding:18px 0 6px; font-size:13.5px; color:#888; }
.it-breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.it-breadcrumb li::after{ content:'/'; margin-left:6px; color:#ccc; }
.it-breadcrumb li:last-child::after{ content:''; }
.it-breadcrumb a{ color:#666; text-decoration:none; }
.it-breadcrumb a:hover{ color:var(--it-rojo); text-decoration:underline; }
.it-breadcrumb [aria-current]{ color:#1a1a1a; font-weight:600; }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.it-product{
  display:grid; grid-template-columns:minmax(300px,1.05fr) minmax(320px,.95fr);
  gap:38px; align-items:start; margin:14px 0 46px;
}

/* ---- Galeria ---- */
.it-gallery-main{
  position:relative; background:#fff; border:1px solid var(--it-borde);
  border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.it-gallery-main img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  background:#fff; display:block; padding:18px;
}
.it-gallery-thumbs{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
.it-gallery-thumbs button{
  width:100%; padding:0; background:#fff; cursor:pointer;
  border:2px solid var(--it-borde); border-radius:10px; overflow:hidden;
  transition:border-color .15s ease;
}
.it-gallery-thumbs img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.it-gallery-thumbs button:hover{ border-color:#bbb; }
.it-gallery-thumbs button[aria-current="true"]{ border-color:var(--it-rojo); }

/* ---- Caja de compra ---- */
.it-buy{ padding-top:4px; }
.it-brand{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#6b6b6b; background:#f3f3f3;
  border-radius:999px; padding:6px 14px; margin-bottom:14px;
}
.it-buy h1{
  font-size:31px; line-height:1.2; font-weight:800; color:#1a1a1a;
  margin:0 0 12px;
}
.it-resumen{ font-size:15.5px; line-height:1.6; color:#555; margin:0 0 20px; }

.it-price-box{
  background:#fafafa; border:1px solid var(--it-borde); border-radius:14px;
  padding:20px 20px 18px; margin:0 0 20px;
}
.it-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.it-price-desde{ font-size:14px; color:#777; }
.it-price-valor{ font-size:36px; font-weight:800; color:#1a1a1a; line-height:1; font-variant-numeric:tabular-nums; }
.it-price-moneda{ font-size:14px; color:#777; font-weight:600; }
.it-price-nota{ font-size:13px; color:#888; line-height:1.5; margin:0; }

.it-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:#1b7a3d; margin:12px 0 0;
}
.it-stock::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:#2e7d32; box-shadow:0 0 0 3px rgba(46,125,50,.18);
}

.it-actions{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.it-btn-wa{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--it-wa); color:#fff !important; text-decoration:none;
  font-size:16.5px; font-weight:700; padding:16px 22px; border:0; border-radius:11px;
  cursor:pointer; box-shadow:0 4px 14px rgba(37,211,102,.3);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  font-family:inherit;
}
.it-btn-wa:hover{ background:var(--it-wa-osc); color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,211,102,.36); }
.it-btn-wa svg{ width:23px; height:23px; fill:#fff; flex:0 0 auto; }
.it-btn-tel{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#fff; color:#1a1a1a !important; text-decoration:none;
  font-size:15px; font-weight:700; padding:14px 22px;
  border:2px solid #ddd; border-radius:11px;
  transition:border-color .15s ease, color .15s ease;
}
.it-btn-tel:hover{ border-color:var(--it-rojo); color:var(--it-rojo) !important; }

.it-ventajas{ list-style:none; margin:0; padding:0; }
.it-ventajas li{
  position:relative; padding:0 0 0 28px; margin:0 0 9px;
  font-size:14.5px; line-height:1.5; color:#444;
}
.it-ventajas li::before{
  content:'\2713'; position:absolute; left:0; top:0;
  width:19px; height:19px; border-radius:50%;
  background:#e8f5e9; color:#2e7d32; font-size:12px; font-weight:700;
  line-height:19px; text-align:center;
}
.it-pagos{
  font-size:13px; color:#888; line-height:1.55; margin:16px 0 0;
  padding-top:14px; border-top:1px solid #eee;
}
.it-pagos a{ color:var(--it-rojo); font-weight:600; text-decoration:none; }
.it-pagos a:hover{ text-decoration:underline; }

/* ---- Secciones inferiores ---- */
.it-seccion{ margin:0 0 44px; }
.it-seccion h2{
  font-size:24px; line-height:1.25; font-weight:700; color:#1a1a1a;
  margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #f0f0f0;
}
.it-seccion h3{ font-size:19px; font-weight:700; color:#1a1a1a; margin:24px 0 10px; }
.it-seccion p{ font-size:15px; line-height:1.7; color:#444; margin:0 0 14px; }

/* Encabezado de la portada del catalogo */
.it-cat-h1{
  font-size:33px; line-height:1.2; font-weight:800; color:#1a1a1a; margin:6px 0 12px;
}
.it-cat-lead{
  font-size:16.5px !important; line-height:1.65; color:#555; max-width:820px; margin:0 0 26px !important;
}
@media (max-width:600px){
  .it-cat-h1{ font-size:25px; }
  .it-cat-lead{ font-size:15.5px !important; }
}

/* Tabla de ficha tecnica */
.it-specs{ width:100%; border-collapse:collapse; background:#fff; }
.it-specs th, .it-specs td{
  text-align:left; padding:13px 16px; font-size:14.5px; line-height:1.5;
  border-bottom:1px solid #eee; vertical-align:top;
}
.it-specs th{ width:32%; font-weight:700; color:#1a1a1a; background:#fafafa; }
.it-specs td{ color:#444; }
.it-specs tr:last-child th, .it-specs tr:last-child td{ border-bottom:0; }
.it-specs-wrap{ border:1px solid var(--it-borde); border-radius:14px; overflow:hidden; }

/* Envio, garantia e instalacion */
.it-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.it-trust-card{
  background:#fff; border:1px solid var(--it-borde); border-radius:14px;
  padding:22px 20px; box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.it-trust-card h3{ font-size:17px; font-weight:700; color:#1a1a1a; margin:0 0 8px; }
.it-trust-card p{ font-size:14px; line-height:1.6; color:#555; margin:0; }

/* ============================================================
   CATALOGO (portada de /productos/ y bloques de relacionados)
   ============================================================ */
.it-filtros{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px; list-style:none; padding:0; }
.it-filtros button{
  font-size:13.5px; font-weight:600; color:#333; background:#f4f4f4;
  border:1px solid #e6e6e6; border-radius:999px; padding:8px 16px;
  cursor:pointer; font-family:inherit;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.it-filtros button:hover{ background:#eaeaea; }
.it-filtros button[aria-pressed="true"]{ background:var(--it-rojo); border-color:var(--it-rojo); color:#fff; }

.it-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:24px; margin:0 0 20px;
}
.it-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--it-borde); border-radius:14px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.it-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.1); }
.it-card-img{ display:block; background:#fff; border-bottom:1px solid #f2f2f2; }
.it-card-img img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  display:block; padding:14px;
}
.it-card-body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.it-card-brand{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#999; margin:0 0 6px;
}
.it-card h3{ font-size:15.5px; line-height:1.35; font-weight:700; margin:0 0 8px; }
.it-card h3 a{ color:#1a1a1a !important; text-decoration:none; }
.it-card h3 a:hover{ color:var(--it-rojo) !important; }
.it-card-desc{ font-size:13.5px; line-height:1.5; color:#666; margin:0 0 14px; flex:1; }
.it-card-price{
  font-size:20px; font-weight:800; color:#1a1a1a; line-height:1;
  margin:0 0 12px; font-variant-numeric:tabular-nums;
}
.it-card-price span{ font-size:12.5px; font-weight:600; color:#888; }
.it-card-btns{ display:flex; flex-direction:column; gap:8px; }
.it-card-wa{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--it-wa); color:#fff !important; text-decoration:none;
  font-size:14px; font-weight:700; padding:11px 14px; border:0; border-radius:9px;
  cursor:pointer; font-family:inherit; transition:background .15s ease;
}
.it-card-wa:hover{ background:var(--it-wa-osc); color:#fff !important; }
.it-card-wa svg{ width:18px; height:18px; fill:#fff; flex:0 0 auto; }
.it-card-ver{
  display:block; text-align:center; font-size:13.5px; font-weight:700;
  color:#555 !important; text-decoration:none; padding:9px 14px;
  border:1px solid #e0e0e0; border-radius:9px; transition:border-color .15s ease, color .15s ease;
}
.it-card-ver:hover{ border-color:var(--it-rojo); color:var(--it-rojo) !important; }
.it-card.it-oculto{ display:none; }

.it-nota-precios{
  font-size:13px; color:#888; line-height:1.6; background:#fafafa;
  border:1px solid #eee; border-radius:10px; padding:14px 16px; margin:8px 0 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width:991px){
  .it-product{ grid-template-columns:1fr; gap:28px; }
  .it-trust{ grid-template-columns:1fr; gap:16px; }
  .it-buy h1{ font-size:26px; }
}
@media (max-width:600px){
  .it-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
  .it-card-body{ padding:13px 13px 15px; }
  .it-card h3{ font-size:14px; }
  .it-card-desc{ display:none; }
  .it-card-price{ font-size:17px; }
  .it-buy h1{ font-size:23px; }
  .it-price-valor{ font-size:30px; }
  .it-gallery-thumbs{ grid-template-columns:repeat(4,1fr); }
  .it-seccion h2{ font-size:21px; }
  .it-specs th{ width:40%; }
}