/* ============================================================
   Selector del catálogo · ankle.com.mx/catalogo/
   Complementa /assets/css/site.css
   ============================================================ */

.cat-intro{background:linear-gradient(180deg,#fff 0%,#F3F6F7 100%);padding:56px 0 44px;border-bottom:1px solid var(--linea);}
.cat-intro h1{font-size:clamp(30px,4vw,42px);margin-top:10px;}
.cat-intro .entrada{margin-top:14px;}

/* ---- barra de selección ---- */
.barra-sel{
  position:sticky;top:var(--header);z-index:50;background:#fff;border-bottom:1px solid var(--linea);
  box-shadow:0 6px 18px rgba(23,25,28,.05);
}
.barra-sel .fila{display:flex;align-items:center;gap:16px;padding:14px 0;flex-wrap:wrap;}
.barra-sel .cuenta{font-size:15px;font-weight:600;}
.barra-sel .cuenta b{color:var(--verde-osc);}
.barra-sel .cuenta span{display:block;font-size:12.5px;font-weight:400;color:var(--gris);margin-top:2px;}
.barra-sel .der{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}
.enlace-sec{
  background:none;border:1px solid var(--linea);border-radius:var(--radio);
  padding:11px 16px;font-size:13.5px;font-weight:600;color:#4A4E52;cursor:pointer;
}
.enlace-sec:hover{border-color:var(--tinta);color:var(--tinta);}

/* ---- familias ---- */
.fam-bloque{padding:44px 0 8px;}
.fam-bloque + .fam-bloque{border-top:1px solid var(--linea);}
.fam-cab{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;}
.fam-cab .tit{flex:1;min-width:260px;}
.fam-cab .fam-nombre{font-size:20px;font-weight:700;letter-spacing:1.4px;color:var(--verde);margin-top:0;line-height:1.3;}
.fam-cab .sub{font-size:13.5px;color:var(--gris);margin-top:8px;}
.fam-bloque.azul .fam-nombre{color:var(--azul);}
.fam-bloque.rojo .fam-nombre{color:var(--rojo);}

.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;}

.linea{
  border:1.5px solid var(--linea);border-radius:8px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s ease, box-shadow .18s ease;
}
.linea:hover{box-shadow:var(--sombra);}
.linea.marcada{border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,166,80,.12);}
.fam-bloque.azul .linea.marcada{border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,78,121,.12);}
.fam-bloque.rojo .linea.marcada{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(192,57,43,.12);}

.linea .sel{display:block;cursor:pointer;position:relative;}
.linea .sel input{position:absolute;opacity:0;pointer-events:none;}
.linea .foto{aspect-ratio:1100/772;background:#F0F2F3;overflow:hidden;position:relative;}
.linea .foto img{width:100%;height:100%;object-fit:cover;}
.marca-check{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  background:#fff;border:1.5px solid var(--linea);display:grid;place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.14);transition:.15s;
}
.marca-check svg{width:15px;height:15px;stroke:#fff;stroke-width:3.4;fill:none;opacity:0;}
.linea.marcada .marca-check{background:var(--verde);border-color:var(--verde);}
.fam-bloque.azul .linea.marcada .marca-check{background:var(--azul);border-color:var(--azul);}
.fam-bloque.rojo .linea.marcada .marca-check{background:var(--rojo);border-color:var(--rojo);}
.linea.marcada .marca-check svg{opacity:1;}

.linea .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.linea .clave{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--gris-cl);}
.linea h3{margin-top:5px;font-size:18px;}
.linea .desc{margin-top:8px;font-size:13.5px;color:#5B6064;line-height:1.5;}
.linea .meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--gris);}
.ver-mas{background:none;border:none;padding:0;font-size:12.5px;font-weight:700;color:var(--verde-osc);cursor:pointer;}
.ver-mas:hover{text-decoration:underline;}
.detalle{display:none;padding:0 18px 18px;font-size:13px;border-top:1px solid var(--linea);margin-top:-1px;}
.detalle.abierto{display:block;}
.detalle h4{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gris);margin:16px 0 7px;}
.detalle ul{list-style:none;display:grid;gap:4px;}
.detalle ul li{position:relative;padding-left:13px;line-height:1.45;color:#4A4E52;}
.detalle ul li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--verde);}
.fam-bloque.azul .detalle ul li::before{background:var(--azul);}
.fam-bloque.rojo .detalle ul li::before{background:var(--rojo);}
.detalle table{width:100%;border-collapse:collapse;}
.detalle th{text-align:left;vertical-align:top;font-size:10px;letter-spacing:.6px;color:var(--verde);
  width:96px;padding:6px 10px 6px 0;border-bottom:1px solid var(--linea);line-height:1.35;}
.fam-bloque.azul .detalle th{color:var(--azul);}
.fam-bloque.rojo .detalle th{color:var(--rojo);}
.detalle td{vertical-align:top;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--linea);line-height:1.45;color:#3C4044;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chips span{background:#F2F4F5;border:1px solid var(--linea);border-radius:4px;padding:4px 9px;font-size:11.5px;color:#4A4E52;}

/* ---- barra flotante móvil ---- */
.flotante{
  position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;
  border-top:1px solid var(--linea);box-shadow:0 -6px 20px rgba(23,25,28,.09);
  padding:12px 18px;display:none;align-items:center;gap:14px;
}
.flotante .txt{font-size:13.5px;font-weight:600;}
.flotante .btn{margin-left:auto;}

/* ---- modal ---- */
.modal{
  position:fixed;inset:0;z-index:90;background:rgba(23,25,28,.55);
  display:none;align-items:center;justify-content:center;padding:24px;
  backdrop-filter:blur(2px);
}
.modal.abierto{display:flex;}
.modal-caja{
  background:#fff;border-radius:10px;width:100%;max-width:520px;max-height:92vh;overflow:auto;
  box-shadow:var(--sombra-alta);padding:32px 34px 30px;position:relative;
}
.modal-caja h2{font-size:24px;}
.modal-caja .lead{font-size:14.5px;color:#5B6064;margin-top:10px;line-height:1.6;}
.modal-cerrar{
  position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;
  color:var(--gris-cl);cursor:pointer;padding:4px 8px;
}
.modal-cerrar:hover{color:var(--tinta);}
.resumen-sel{
  margin-top:18px;background:var(--verde-cl);border:1px solid #BFE8D2;border-radius:var(--radio);
  padding:13px 16px;font-size:13.5px;color:#0B6B3C;line-height:1.55;
}
.resumen-sel b{font-weight:700;}

@media (max-width:1024px){
  .rejilla{grid-template-columns:repeat(2,1fr);}
  .flotante{display:flex;}
  body{padding-bottom:72px;}
  .barra-sel .der .btn-principal{display:none;}
}
@media (max-width:640px){
  .rejilla{grid-template-columns:1fr;}
  .barra-sel .fila{padding:11px 0;}
  .modal-caja{padding:26px 22px 24px;}
}