/* ── Catálogo de prendas (hub): índice lateral + mosaico de categorías ──
   Misma paleta y radios que el resto del sitio (tarjetas blancas, borde fino, sombra suave). */
.lic-hub { --hub-ink: var(--dark, #17233c); --hub-muted: var(--muted-text, #64748b); --hub-borde: var(--border, #e3e4ec); --hub-cta: var(--magenta, #1090A0); --hub-gris: var(--surface, #f4f5f8);
  padding: 28px 0 70px; color: var(--hub-ink); }
.lic-hub .container { width: min(1240px, 92%); margin: 0 auto; }

.lic-hub__head { margin: 0 0 22px; }
.lic-hub__head h1 { font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 6px; line-height: 1.1; }
.lic-hub__head p { margin: 0; font-size: 16.5px; color: var(--hub-muted); max-width: 720px; line-height: 1.5; }

.lic-hub__layout { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }

/* ── Índice lateral ── */
.lic-hub__side { position: sticky; top: 150px; }
.lic-hub__side-box { background: #fff; border: 1px solid var(--hub-borde); border-radius: 16px; padding: 6px 14px 10px; box-shadow: 0 6px 20px rgba(23,35,60,.06); }
.lic-hub__side-box > summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 20px; padding: 10px 4px 8px; display: flex; align-items: baseline; gap: 8px; }
.lic-hub__side-box > summary::-webkit-details-marker { display: none; }
.lic-hub__side-box > summary span { font-size: 13.5px; font-weight: 600; color: var(--hub-cta); }
.lic-hub__list { list-style: none; margin: 0; padding: 0; }
.lic-hub__list > li { border-top: 1px solid var(--hub-borde); }
.lic-hub__acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; font-size: 14.5px; font-weight: 600; }
.lic-hub__acc > summary::-webkit-details-marker { display: none; }
.lic-hub__acc > summary a { color: var(--hub-ink); text-decoration: none; }
.lic-hub__acc > summary a:hover { color: var(--hub-cta); }
/* El «+» que en abierto gira a «×» */
.lic-hub__acc > summary i { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.lic-hub__acc > summary i::before, .lic-hub__acc > summary i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--hub-muted); transform: translate(-50%, -50%); transition: transform .2s ease; }
.lic-hub__acc > summary i::before { width: 12px; height: 2px; }
.lic-hub__acc > summary i::after { width: 2px; height: 12px; }
.lic-hub__acc[open] > summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.lic-hub__acc ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 12px; }
.lic-hub__acc ul li a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; font-size: 13.5px; color: var(--hub-muted); text-decoration: none; border-radius: 6px; }
.lic-hub__acc ul li a:hover { color: var(--hub-cta); background: var(--hub-gris); }
.lic-hub__acc ul li a small { color: #a3adbb; font-size: 12px; }
.lic-hub__acc ul li:first-child a { color: var(--hub-cta); font-weight: 600; }
.lic-hub__solo { display: block; padding: 10px 4px; font-size: 14.5px; font-weight: 600; color: var(--hub-ink); text-decoration: none; }
.lic-hub__solo:hover { color: var(--hub-cta); }
.lic-hub__solo--all { color: var(--hub-cta); }

/* ── Mosaico ── */
.lic-hub__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 14px; }
.lic-tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hub-borde); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--hub-ink); padding: 14px 16px 10px; box-shadow: 0 6px 20px rgba(23,35,60,.05); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lic-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,35,60,.12); border-color: var(--hub-cta); }
.lic-tile__t { font-weight: 700; font-size: 17px; line-height: 1.2; text-align: center; }
.lic-tile img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: center; margin-top: 6px; }
.lic-tile--big { grid-column: span 2; grid-row: span 2; }
.lic-tile--big .lic-tile__t { font-size: 26px; text-align: left; }
.lic-tile--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; }
.lic-tile--wide .lic-tile__t { font-size: 22px; text-align: left; flex: 0 0 42%; }
.lic-tile--wide img { flex: 1; height: 100%; margin: 0; }
.lic-tile--promo { background: linear-gradient(145deg, #0f8f9c, #12a7a5); color: #fff; border-color: transparent; }
.lic-tile--promo .lic-tile__t { text-align: left; font-size: 15px; opacity: .85; font-weight: 600; }
.lic-tile__promo { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.lic-tile__promo b { font-size: 20px; line-height: 1.15; }
.lic-tile__promo small { font-size: 12.5px; line-height: 1.4; opacity: .9; }
.lic-tile--all { background: var(--hub-gris); }

/* ── Texto SEO de la página, debajo del mosaico ── */
.lic-hub__content { margin-top: 56px; max-width: 900px; color: var(--hub-muted); font-size: 15.5px; line-height: 1.65; }
.lic-hub__content h2 { color: var(--hub-ink); font-size: 24px; margin: 30px 0 10px; }
.lic-hub__content h3 { color: var(--hub-ink); font-size: 18px; margin: 22px 0 8px; }

@media (max-width: 1080px) {
  .lic-hub__layout { grid-template-columns: 220px 1fr; }
  .lic-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 180px; }
}
@media (max-width: 820px) {
  .lic-hub__layout { grid-template-columns: 1fr; }
  .lic-hub__side-box > summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 400; color: var(--hub-muted); line-height: 1; }
  .lic-hub__side-box[open] > summary::after { content: "–"; }
  .lic-hub__side { position: static; }
  .lic-hub__side-box[open] { padding-bottom: 6px; }
  .lic-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 12px; }
  .lic-tile--big { grid-column: span 2; grid-row: span 2; }
  .lic-tile--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
  .lic-hub__grid { grid-auto-rows: 150px; }
  .lic-tile__t { font-size: 15px; }
  .lic-tile--big .lic-tile__t { font-size: 21px; }
  .lic-tile--wide .lic-tile__t { font-size: 17px; }
}