/* ================================================
   Características literarias — estilos de página
   ================================================ */

/* Hero */
.cl-hero{padding:34px 0 18px}
.cl-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 10px}
.cl-hero__lede{max-width:62ch;color:var(--text-muted,#9aaac4);font-size:1.05rem;line-height:1.6;margin:0 0 22px}
.cl-hero__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Download button */
.cl-btn-pdf{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:linear-gradient(135deg,var(--primary,#8b6bff),var(--secondary,#5ef2e0));color:#fff;font-weight:700;font-size:.9rem;border:none;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(139,107,255,.3)}
.cl-btn-pdf:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,107,255,.45)}
.cl-btn-pdf:focus-visible{outline:3px solid var(--secondary,#5ef2e0);outline-offset:3px}
.cl-btn-pdf svg{flex-shrink:0}

/* Quick nav */
.cl-quicknav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:16px;border:1px solid var(--border-soft,rgba(130,190,255,.2));border-radius:16px;background:var(--bf-surface,rgba(14,21,40,.4))}
html.theme-light .cl-quicknav{background:rgba(255,255,255,.7)}
.cl-quicknav__label{width:100%;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted,#9aaac4);margin-bottom:4px}
.cl-qlink{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;border:1px solid var(--border-soft,rgba(130,190,255,.2));color:var(--text-main,#eaf2ff);font-size:.83rem;font-weight:600;text-decoration:none;transition:border-color .16s,background .16s}
.cl-qlink:hover{border-color:var(--primary,#8b6bff);background:rgba(139,107,255,.1)}
.cl-qlink:focus-visible{outline:3px solid var(--secondary,#5ef2e0);outline-offset:2px}
.cl-qlink__num{font-size:.7rem;opacity:.65;font-weight:700}

/* Section */
.cl-section{margin-bottom:48px;scroll-margin-top:80px}
.cl-section__header{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.cl-section__badge{flex-shrink:0;display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:12px;background:linear-gradient(135deg,var(--primary,#8b6bff),var(--secondary,#5ef2e0));color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.04em;width:max-content;line-height:1.2;text-align:center}
.cl-section__meta{display:flex;flex-direction:column;gap:4px}
.cl-section__eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--secondary,#5ef2e0);margin:0}
.cl-section h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:0;line-height:1.2}
.cl-section__genre{display:inline-block;font-size:.72rem;color:var(--text-muted,#9aaac4);font-style:italic;margin-top:2px}

/* Sub-section (Realismo/Naturalismo, Novela/Poesía…) */
.cl-sub{margin:0 0 20px;padding:18px 20px;border:1px solid var(--border-soft,rgba(130,190,255,.2));border-radius:16px;background:var(--bf-surface,rgba(14,21,40,.5))}
html.theme-light .cl-sub{background:rgba(255,255,255,.8)}
.cl-sub__title{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary,#8b6bff);margin:0 0 12px}
html.theme-light .cl-sub__title{color:var(--primary,#6757f5)}

/* Intro text inside section */
.cl-intro{font-size:.93rem;color:var(--text-muted,#9aaac4);line-height:1.6;margin:0 0 14px}
.cl-intro strong{color:var(--text-main,#eaf2ff)}

/* Tables */
.cl-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--border-soft,rgba(130,190,255,.15))}
.cl-table{width:100%;border-collapse:collapse;font-size:.88rem}
.cl-table thead tr{background:rgba(139,107,255,.15)}
html.theme-light .cl-table thead tr{background:rgba(103,87,245,.1)}
.cl-table th{padding:10px 14px;text-align:left;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#9aaac4);border-bottom:1px solid var(--border-soft,rgba(130,190,255,.2))}
.cl-table td{padding:9px 14px;line-height:1.5;border-bottom:1px solid var(--border-soft,rgba(130,190,255,.08));vertical-align:top}
.cl-table tbody tr:last-child td{border-bottom:none}
.cl-table tbody tr:hover{background:rgba(139,107,255,.06)}
.cl-table td:first-child{font-weight:600;color:var(--text-main,#eaf2ff);width:45%}
.cl-table td:last-child{color:var(--text-muted,#9aaac4)}
html.theme-light .cl-table td:last-child{color:#4a5568}

/* Two-col layout for métrica+características */
.cl-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:540px){.cl-two-col{grid-template-columns:1fr}}
.cl-list-box{border:1px solid var(--border-soft,rgba(130,190,255,.15));border-radius:12px;padding:14px 16px}
.cl-list-box__title{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#9aaac4);margin:0 0 8px}
.cl-list-box ul{margin:0;padding:0 0 0 16px}
.cl-list-box li{font-size:.88rem;margin-bottom:4px;color:var(--text-main,#eaf2ff)}

/* Ísmos table — alternating colors per ismo */
.cl-ismo-table td:first-child{color:var(--secondary,#5ef2e0)}

/* Tremendismo temas block */
.cl-temas-block{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cl-tema-tag{display:inline-block;padding:5px 13px;border-radius:999px;border:1px solid var(--border-soft,rgba(130,190,255,.2));font-size:.82rem;color:var(--text-muted,#9aaac4)}

/* Separator between sections */
.cl-divider{border:none;border-top:1px solid var(--border-soft,rgba(130,190,255,.12));margin:0 0 32px}

/* Back to top */
.cl-back-top{display:flex;justify-content:center;margin:24px 0 48px}
.cl-back-top a{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted,#9aaac4);font-size:.85rem;text-decoration:none;transition:color .18s}
.cl-back-top a:hover{color:var(--secondary,#5ef2e0)}

/* ── Responsive: mobile card rows ── */
@media(max-width:600px){
  .cl-table thead{display:none}
  .cl-table tbody tr{display:block;margin-bottom:10px;border:1px solid var(--border-soft,rgba(130,190,255,.15));border-radius:12px;overflow:hidden}
  .cl-table td{display:block;border-bottom:1px solid var(--border-soft,rgba(130,190,255,.08));padding:8px 12px}
  .cl-table td:first-child{background:rgba(139,107,255,.1);font-size:.82rem}
  .cl-table td:first-child::before{content:"Característica / técnica · ";font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#9aaac4);display:block;margin-bottom:2px}
  .cl-table td:last-child::before{content:"Función · ";font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#9aaac4);display:block;margin-bottom:2px}
  .cl-ismo-table td:first-child::before{content:"Movimiento · "}
  .cl-table tbody tr:last-child td{border-bottom:none}
  .cl-table tbody tr:last-child td:last-child{border-bottom:none}
}

/* ── Print / PDF ── */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;color:#111!important}
  .bf-header,.bf-skip-link,.btn-back,.cl-hero__actions,.cl-quicknav,.cl-back-top,
  #cookie-banner,.bf-cookie,.page-transition,button[class*="bf-"]{display:none!important}
  .container{max-width:100%;padding:0 16px}
  .cl-hero{padding:8px 0 6px}
  .cl-section{margin-bottom:28px;page-break-inside:avoid}
  .cl-sub{border:1px solid #ccc;background:#fff!important;padding:10px 12px}
  .cl-section h2{font-size:14pt;color:#111}
  .cl-section__eyebrow{color:#555;font-size:7pt}
  .cl-section__badge{background:linear-gradient(135deg,#8b6bff,#5ef2e0)!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .cl-table{font-size:8.5pt;border-collapse:collapse}
  .cl-table th,.cl-table td{padding:5px 8px;border:1px solid #ccc;color:#111!important}
  .cl-table thead tr{background:#eee!important}
  .cl-table tbody tr:hover{background:transparent}
  .cl-table-wrap{border:none;overflow:visible}
  .cl-intro{color:#444;font-size:8.5pt}
  .cl-sub__title{color:#6757f5;font-size:7.5pt}
  .cl-list-box{border:1px solid #ccc;padding:8px 10px}
  .cl-list-box li{color:#111;font-size:8.5pt}
  .cl-tema-tag{border:1px solid #ccc;color:#444;font-size:8pt}
  @page{margin:1.5cm 2cm;size:A4}
  .cl-section__badge{-webkit-print-color-adjust:exact}
}