/* Fuente */
  #cm-acc-home,
  #cm-acc-home *{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    box-sizing: border-box;
  }

  /* Contenedor general */
  .cm-acc{
    display: grid;
    gap: 14px;
  }

  /* Cada fila: 2 columnas */
  .cm-row{
    display: grid;
    grid-template-columns: 56% 43%;
    gap: 1%;
  }
  .cm-row.reverse{
    grid-template-columns: 43% 56%;
  }

  /* Card categoría */
  .cm-item{
    min-height: 250px;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: 0;
  }

  /* Overlay */
  .cm-item::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
    pointer-events: none;
  }

  /* Botón */
  .cm-toggle{
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
  }

  /* Título */
  .cm-title{
    color: #fff;
    font-weight: 600;
    font-size: 35px;
    line-height: 1.1;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 14px;
    text-align: center;
  }

  /* Flecha */
  .cm-arrow{
    color: #fff;
    font-size: 20px;
    opacity: .9;
    margin-top: 8px;
    transition: transform .2s ease;
  }

  /* Panel desplegable */
  .cm-panel{
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: 0;
    transition: height .28s ease;
    background: rgba(255,255,255,.92);

    /* micro-optimización: aisla repaints */
    contain: layout paint;
    will-change: height;
  }

  /* Grid subcategorías */
  .cm-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
    padding: 16px 18px 18px;
  }

  /* Subcategoría */
  .cm-sub{
    display: grid;
    justify-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111 !important;
    padding: 10px 8px;
  }
  .cm-sub:hover,
  .cm-sub:focus,
  .cm-sub:active{
    color: #111 !important;
  }

  .cm-sub img{
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
  }

  .cm-sub span{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    opacity: .9;
  }

  .cm-sub:hover{
    background: rgba(0,0,0,.04);
  }

  /* Abierto */
  .cm-item.is-open .cm-arrow{
    transform: rotate(180deg);
  }

  /* Responsive */
  @media (max-width: 767px){
    .cm-row,
    .cm-row.reverse{
      grid-template-columns: 100%;
      gap: 14px;
    }
    .cm-grid{
      grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .cm-title{
      font-size: 28px;
    }
  }

  /* Quitar rosa del tema */
  #cm-acc-home .cm-toggle,
  #cm-acc-home .cm-toggle:hover,
  #cm-acc-home .cm-toggle:focus,
  #cm-acc-home .cm-toggle:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
  }
  #cm-acc-home .cm-toggle:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
  #cm-acc-home .cm-item,
  #cm-acc-home .cm-toggle{
    -webkit-tap-highlight-color: transparent;
  }
      
      /* Desktop grande */
    @media (min-width: 1200px){
      .cm-grid{
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* más aire */
      }
    }
    
    /* Notebook / tablet horizontal */
    @media (max-width: 1100px){
      .cm-row{ gap: 12px; grid-template-columns: 1fr 1fr; }
      .cm-row.reverse{ grid-template-columns: 1fr 1fr; }
    
      .cm-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    
      .cm-title{ font-size: 30px; }
    }
    
    /* Tablet vertical */
    @media (max-width: 900px){
      .cm-row,
      .cm-row.reverse{
        grid-template-columns: 1fr; /* apila */
        gap: 14px;
      }
    
      .cm-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    
      .cm-item,
      .cm-toggle{
        min-height: 220px;
      }
    
      .cm-title{ font-size: 28px; }
    }
    
    /* Mobile */
    @media (max-width: 600px){
      .cm-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas se lee mejor */
        gap: 12px;
        padding: 14px;
      }
    
      .cm-item,
      .cm-toggle{
        min-height: 200px;
      }
    
      .cm-title{
        font-size: 24px;
        padding: 10px 12px;
      }
    
      .cm-sub span{
        font-size: 12px;
      }
    }
    
    /* Mobile chico */
    @media (max-width: 380px){
      .cm-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
    
      .cm-title{ font-size: 22px; }
    }

/* Mejoras mínimas de accesibilidad y estabilidad */
#cm-acc-home .cm-toggle:focus-visible,
#cm-acc-home .cm-sub:focus-visible,
.cm-side-icons__toggle:focus-visible,
.cm-side-icons__item:focus-visible{
  outline: 2px solid #1c3462 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.75) !important;
}

@media (prefers-reduced-motion: reduce){
  #cm-acc-home .cm-panel,
  #cm-acc-home .cm-arrow,
  .cm-side-icons__panel,
  .cm-side-icons__chev{
    transition: none !important;
  }
}

/* ===== Sidebar de subcategorías para Theme Builder ===== */
:root{ --cm-blue:#1c3462; }

.cm-side-icons,
.cm-side-icons *{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-sizing:border-box;
}

.cm-side-icons{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  padding:12px;
}

.cm-side-icons__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  background:transparent !important;
  padding:10px 6px;
  cursor:pointer;
  color:var(--cm-blue) !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color: transparent;
}

.cm-side-icons__title{
  font-weight:800;
  font-size:14px;
  color:var(--cm-blue) !important;
  text-transform:uppercase !important;
}

.cm-side-icons__chev{
  transition:transform .2s ease;
  color:var(--cm-blue) !important;
}

.cm-side-icons.is-open .cm-side-icons__chev{
  transform:rotate(180deg);
}

.cm-side-icons__panel{
  overflow:hidden;
  height:auto;
  transition:height .25s ease;
}

.cm-side-icons__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding-top:10px;
}

.cm-side-icons__item{
  display:grid;
  justify-items:center;
  gap:8px;
  text-decoration:none !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.08);
  padding:12px;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color: transparent;
}

.cm-side-icons__item:hover{
  border-color:rgba(28,52,98,.45);
  background:rgba(28,52,98,.04) !important;
  color:var(--cm-blue) !important;
}

.cm-side-icons__item:hover .cm-side-icons__name{
  color:var(--cm-blue) !important;
}

.cm-side-icons__item img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}

.cm-side-icons__name{
  font-size:12px;
  font-weight:700;
  text-align:center;
  line-height:1.2;
  opacity:.95;
}

.cm-side-icons__item.is-active,
.cm-side-icons__item.current-cat{
  border-color:rgba(28,52,98,.85) !important;
  background:rgba(28,52,98,.06) !important;
  color:var(--cm-blue) !important;
}

.cm-side-icons__item.is-active .cm-side-icons__name,
.cm-side-icons__item.current-cat .cm-side-icons__name{
  color:var(--cm-blue) !important;
}

.cm-side-icons__ph{
  width:44px;
  height:44px;
  border:1px dashed rgba(28,52,98,.35);
  border-radius:10px;
  display:block;
}

/* Versión dinámica: si queda una sola categoría en la fila, ocupa todo el ancho */
.cm-row.is-single{
  grid-template-columns: 1fr !important;
}

/* Fallback cuando una categoría padre todavía no tiene imagen asignada */
.cm-item:not([style*="--bg:url"]){
  background: #1c3462;
}

/* ===== Ajuste responsive v1.2.0 ===== */
#cm-acc-home .cm-grid{
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  align-items: stretch;
}

#cm-acc-home .cm-sub{
  min-width: 0;
  width: 100%;
  min-height: 92px;
  align-content: start;
  border-radius: 8px;
}

#cm-acc-home .cm-sub span{
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  line-height: 1.25;
}

#cm-acc-home .cm-sub img,
#cm-acc-home .cm-sub-placeholder{
  flex: 0 0 auto;
}

.cm-side-icons__grid{
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.cm-side-icons__item{
  min-width: 0;
  width: 100%;
  min-height: 96px;
  align-content: start;
  border-radius: 8px;
}

.cm-side-icons__name{
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Notebook: evita que textos largos se pisen cuando hay muchas hijas */
@media (max-width: 1366px){
  #cm-acc-home .cm-grid{
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 12px;
    padding: 14px;
  }

  #cm-acc-home .cm-sub{
    padding: 10px 6px;
  }

  #cm-acc-home .cm-sub span{
    font-size: 12.5px;
  }
}

@media (max-width: 1100px){
  #cm-acc-home .cm-grid,
  .cm-side-icons__grid{
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }
}

@media (max-width: 600px){
  #cm-acc-home .cm-grid,
  .cm-side-icons__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #cm-acc-home .cm-sub,
  .cm-side-icons__item{
    min-height: 88px;
  }
}