/* Tarjetas y banner alimentados por api.zerocomics.net — reutiliza Inter/Poppins del sitio */
.pc-card-list{flex-wrap:nowrap!important}
.zc-card{flex:1 1 0;min-width:0;display:block}
.zc-card .zc-img{transition:transform .25s}
.zc-card:hover .zc-img{transform:scale(1.05)}
.zc-grad{background:linear-gradient(180deg,#0000 0%,#00000080 33%,#000000D9 70%,#000 100%)}
.zc-title{margin:0;padding:0 8px;text-align:center;color:#fff;font-family:var(--font-poppins);font-weight:600;font-size:15px;line-height:19px;letter-spacing:-.2px;text-shadow:0 1px 4px #0009;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
.zc-sub{max-width:100%;padding:0 8px;color:#ffffffc0;font-family:var(--font-inter);font-weight:700;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zc-skel{flex:1 1 0;min-width:0}
.bg-zc-dark{background:#111}
.bg-zc-adult{background:#1b1b1b}

/* Banner grande */
.zc-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.zc-slide.on{opacity:1;pointer-events:auto}
.zc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.55);transform:scale(1.15)}
.zc-hero-art{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 28%);mask-image:linear-gradient(90deg,#0000 0%,#000 28%)}
.zc-hero-left{position:absolute;left:0;top:0;height:100%;width:62%;background:linear-gradient(90deg,#000000d0 0%,#00000080 60%,#0000 100%)}
.zc-hero-txt{position:absolute;left:32px;top:0;height:100%;width:400px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.zc-hero-title{margin:0;color:#fff;font-family:var(--font-poppins);font-weight:600;font-size:34px;line-height:40px;letter-spacing:-.5px;text-shadow:0 2px 8px #0008;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zc-hero-syn{margin:0;width:300px}
.zc-pager{z-index:2}
.zc-nav{background:none;border:0;padding:0;cursor:pointer;display:flex}

@media (max-width:768px){
  .pc-card-list{overflow-x:auto}
  .zc-card,.zc-skel{flex:0 0 32%}
  .zc-hero-txt{width:auto;right:16px;left:16px;justify-content:flex-end;padding-bottom:56px}
  .zc-hero-art{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 40%,#0000 100%);mask-image:linear-gradient(180deg,#000 40%,#0000 100%)}
  .zc-hero-left{width:100%;background:linear-gradient(0deg,#000000e0 0%,#0000 70%)}
  .zc-hero-title{font-size:24px;line-height:30px}
  .zc-hero-syn{width:auto}
}

/* Efectos de titulo por comic */
.zc-title,.zc-hero-title{font-weight:400;letter-spacing:0}
.zc-fx-plain{color:#fff;text-shadow:0 2px 6px #000c}
.zc-fx-glow{color:#fff;text-shadow:0 0 10px color-mix(in srgb,var(--zc-c) 70%,transparent),0 2px 6px #000c}
.zc-fx-stroke{color:var(--zc-c);-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 3px 0 #000,0 4px 10px #000a;letter-spacing:.5px}
.zc-fx-pop{color:var(--zc-c);-webkit-text-stroke:4px #1a1030;paint-order:stroke fill;text-shadow:2px 3px 0 #1a1030}
.zc-fx-blood{color:#e11d2e;-webkit-text-stroke:2px #1a0000;paint-order:stroke fill;text-shadow:0 0 12px #ff000080,0 2px 4px #000}
.zc-fx-gold{background:linear-gradient(180deg,#fff7d1 0%,#f5d77a 38%,#c8962e 62%,#fff1b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 3px #000d)}
.zc-hero-title.zc-fx-stroke{-webkit-text-stroke:6px #000}
.zc-hero-title.zc-fx-pop{-webkit-text-stroke:7px #1a1030;text-shadow:4px 5px 0 #1a1030}

/* Daily: cuadricula de 8 columnas que salta de linea */
.zc-wrap{flex-wrap:wrap!important}
.zc-wrap>.zc-card,.zc-wrap>.zc-skel{flex:0 0 calc((100% - 28px)/8)}
@media (max-width:768px){.zc-wrap>.zc-card,.zc-wrap>.zc-skel{flex:0 0 calc((100% - 8px)/3)}}

/* ===================== Responsive (el escritorio de Tapas es fijo a 1010px) ===================== */
html,body{overflow-x:hidden}
@media (max-width:1040px){
  .w-1010{width:100%!important;max-width:1010px}
}
@media (max-width:768px){
  /* header: logo + botones arriba, menu deslizable abajo */
  nav .bg-bg10.px-18{height:auto!important;padding:12px 16px 6px!important}
  nav .justify-between.space-x-20{flex-wrap:wrap;height:auto!important;row-gap:6px}
  nav .justify-between.space-x-20>*{margin-left:0!important}
  nav .justify-between.space-x-20>.flex-1{order:3;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none}
  nav .justify-between.space-x-20>.flex-1::-webkit-scrollbar{display:none}
  nav .justify-between.space-x-20>form{margin-left:auto!important}
  nav .justify-between.space-x-20>form input{width:110px}
  nav .justify-between.space-x-20>.space-x-12{margin-left:8px!important}
  /* pestañas Spotlight/Daily/... y filas deslizables */
  .overflow-x-visible{overflow-x:auto!important;scrollbar-width:none}
  .px-11{padding-left:12px!important;padding-right:12px!important}
  .px-18{padding-left:14px!important;padding-right:14px!important}
  /* banner grande */
  #zc-hero,#zc-rank1{height:300px!important}
  /* franja NEW to / App: apilada */
  .flex.w-full.space-x-4.px-11:has(> article){flex-direction:column;gap:6px}
  .flex.w-full.space-x-4.px-11:has(> article)>*{margin-left:0!important}
  /* listas horizontales: 3 tarjetas visibles y scroll */
  .pc-card-list:not(.zc-wrap){overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pc-card-list:not(.zc-wrap)>*{flex:0 0 31%!important;scroll-snap-align:start}
  .zc-wrap>.zc-card,.zc-wrap>.zc-skel{flex:0 0 calc((100% - 8px)/3)!important}
  .zc-title{font-size:min(15px,4vw)}
}
@media (max-width:420px){
  nav .justify-between.space-x-20>form{display:none}
  .zc-hero-syn{display:none}
}

/* H1 visible de cada listado (SEO) */
.zc-h1{align-self:stretch;margin:6px 0 2px;padding:0 18px;color:#15131f;font:700 22px/1.3 var(--font-poppins),sans-serif;letter-spacing:-.2px}
@media (max-width:560px){.zc-h1{font-size:18px;padding:0 14px}}