/* public/themes/modern-white/assets/css/blocks_v3.css
   Blocks v3 (token-first): section, columns
*/

/* ==========================================================================
   SECTION v3
   ========================================================================== */

.cp-section{
  width: 100%;
}

/* inner = frame/container configurable por clases */
.cp-section__inner{
  width: 100%;
  max-width: var(--mw-xl, var(--container));
  margin: 0 auto;
}

/* maxWidth mapping */
.cp-section--mw-sm   > .cp-section__inner{ max-width: var(--mw-sm, 40rem); }
.cp-section--mw-md   > .cp-section__inner{ max-width: var(--mw-md, 52rem); }
.cp-section--mw-lg   > .cp-section__inner{ max-width: var(--mw-lg, 64rem); }
.cp-section--mw-xl   > .cp-section__inner{ max-width: var(--mw-xl, var(--container)); }
.cp-section--mw-full > .cp-section__inner{ max-width: var(--mw-full, 100%); }

/* padding mapping */
.cp-section--pad-none > .cp-section__inner{ padding: var(--sec-pad-none, 0); }
.cp-section--pad-xs   > .cp-section__inner{ padding: var(--sec-pad-xs, var(--space-1)); }
.cp-section--pad-sm   > .cp-section__inner{ padding: var(--sec-pad-sm, var(--space-2)); }
.cp-section--pad-md   > .cp-section__inner{ padding: var(--sec-pad-md, var(--space-3)); }
.cp-section--pad-lg   > .cp-section__inner{ padding: var(--sec-pad-lg, var(--space-4)); }
.cp-section--pad-xl   > .cp-section__inner{ padding: var(--sec-pad-xl, var(--space-5)); }
.cp-section--pad-2xl  > .cp-section__inner{ padding: var(--sec-pad-2xl, var(--space-6)); }

/* items stack (aquí vive el “aire” entre blocks internos) */
.cp-section__items{
  display: grid;
  align-content: start;
}

/* gap mapping (vertical stack) */
.cp-section--gap-xs  .cp-section__items{ gap: var(--sec-gap-xs,  var(--space-1)); }
.cp-section--gap-sm  .cp-section__items{ gap: var(--sec-gap-sm,  var(--space-2)); }
.cp-section--gap-md  .cp-section__items{ gap: var(--sec-gap-md,  var(--space-3)); }
.cp-section--gap-lg  .cp-section__items{ gap: var(--sec-gap-lg,  var(--space-4)); }
.cp-section--gap-xl  .cp-section__items{ gap: var(--sec-gap-xl,  var(--space-5)); }
.cp-section--gap-2xl .cp-section__items{ gap: var(--sec-gap-2xl, var(--space-6)); }

/* radius mapping */
.cp-section--rad-none > .cp-section__inner{ border-radius: var(--sec-radius-none, 0); }
.cp-section--rad-sm   > .cp-section__inner{ border-radius: var(--sec-radius-sm, var(--radius-sm)); }
.cp-section--rad-md   > .cp-section__inner{ border-radius: var(--sec-radius-md, var(--radius-md)); }
.cp-section--rad-lg   > .cp-section__inner{ border-radius: var(--sec-radius-lg, var(--radius-lg)); }
.cp-section--rad-xl   > .cp-section__inner{ border-radius: var(--sec-radius-xl, var(--radius-xl)); }
.cp-section--rad-2xl  > .cp-section__inner{ border-radius: var(--sec-radius-2xl, var(--radius-2xl)); }

/* shadow mapping */
.cp-section--shadow-none > .cp-section__inner{ box-shadow: none; }
.cp-section--shadow-sm   > .cp-section__inner{ box-shadow: var(--shadow-sm); }
.cp-section--shadow-md   > .cp-section__inner{ box-shadow: var(--shadow-md, var(--shadow-sm)); }

/* border flag */
.cp-section--border > .cp-section__inner{
  border: 1px solid var(--border);
}

/* variants */
.cp-section--variant-default > .cp-section__inner{
  background: var(--surface, #fff);
}
.cp-section--variant-plain > .cp-section__inner{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Mobile tightening opcional (sin romper nada): reduce gaps grandes */
@media (max-width: 520px){
  .cp-section--gap-xl  .cp-section__items{ gap: var(--sec-gap-lg, var(--space-4)); }
  .cp-section--gap-2xl .cp-section__items{ gap: var(--sec-gap-xl, var(--space-5)); }
}


/* ==========================================================================
   COLUMNS v3
   ========================================================================== */

.cp-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* gap entre columnas */
.cp-cols--gap-sm{ gap: var(--cols-gap-sm, var(--space-2)); }
.cp-cols--gap-md{ gap: var(--cols-gap-md, var(--space-3)); }
.cp-cols--gap-lg{ gap: var(--cols-gap-lg, var(--space-4)); }

/* ✅ aire entre blocks internos dentro de cada columna */
.cp-col{
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

/* responsive: 1 columna en pantallas pequeñas */
@media (max-width: 760px){
  .cp-cols{ grid-template-columns: 1fr; }
  .cp-col{ gap: var(--space-3); }
}

/* ----------------------------------------------------------
   Columns v3: frame package (como card)
   - sin tocar layout base ni gaps existentes
   ---------------------------------------------------------- */

/* maxWidth (centrado) */
.cp-cols--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-cols--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-cols--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-cols--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-cols--mw-full{ max-width: var(--mw-full); }

/* padding presets */
.cp-cols--pad-none{ padding: 0; }
.cp-cols--pad-xs{ padding: var(--space-1); }
.cp-cols--pad-sm{ padding: var(--space-2); }
.cp-cols--pad-md{ padding: var(--space-3); }
.cp-cols--pad-lg{ padding: var(--space-4); }
.cp-cols--pad-xl{ padding: var(--space-5); }
.cp-cols--pad-2xl{ padding: var(--space-6); }

/* radius presets */
.cp-cols--rad-none{ border-radius: 0; }
.cp-cols--rad-sm{ border-radius: var(--radius-sm); }
.cp-cols--rad-md{ border-radius: var(--radius-md); }
.cp-cols--rad-lg{ border-radius: var(--radius-lg); }
.cp-cols--rad-xl{ border-radius: var(--radius-xl); }
.cp-cols--rad-2xl{ border-radius: var(--radius-2xl); }

/* shadow */
.cp-cols--sh-none{ box-shadow: none; }
.cp-cols--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-cols--sh-md{ box-shadow: var(--shadow-md); }

/* border */
.cp-cols--border{ border: 1px solid var(--border); }

/* tones (token-driven) */
.cp-cols--tone-default{
  background: transparent;
  border-color: var(--border);
}
.cp-cols--tone-muted{
  background: var(--surface-2);
  border-color: var(--border);
}
.cp-cols--tone-info{
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}
.cp-cols--tone-success{
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}
.cp-cols--tone-warning{
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
}
.cp-cols--tone-danger{
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
}
.cp-cols--tone-accent{
  background: var(--tone-accent-bg);
  border-color: var(--tone-accent-border);
}

/* si hay frame (tono o border), respeta radius con overflow */
.cp-cols--border,
.cp-cols[class*="cp-cols--tone-"]{
  overflow: hidden;
}

/* (Opcional) si quieres que cuando el sidebar esté abierto colapse antes,
   deja tus reglas existentes; no chocan con esto. */


/* ==========================================================================
   CARD v3 (token-first)
   ========================================================================== */

.cp-card{
  width: 100%;
  background: var(--surface);
}

/* max widths (centrado) */
.cp-card--w-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-card--w-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-card--w-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-card--w-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-card--w-full{ max-width: var(--mw-full); }

/* padding presets */
.cp-card--pad-none{ padding: 0; }
.cp-card--pad-xs{ padding: var(--space-1); }
.cp-card--pad-sm{ padding: var(--space-2); }
.cp-card--pad-md{ padding: var(--space-3); }
.cp-card--pad-lg{ padding: var(--space-4); }
.cp-card--pad-xl{ padding: var(--space-5); }
.cp-card--pad-2xl{ padding: var(--space-6); }

/* radius presets */
.cp-card--rad-none{ border-radius: 0; }
.cp-card--rad-sm{ border-radius: var(--radius-sm); }
.cp-card--rad-md{ border-radius: var(--radius-md); }
.cp-card--rad-lg{ border-radius: var(--radius-lg); }
.cp-card--rad-xl{ border-radius: var(--radius-xl); }
.cp-card--rad-2xl{ border-radius: var(--radius-2xl); }

/* shadow */
.cp-card--sh-none{ box-shadow: none; }
.cp-card--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-card--sh-md{ box-shadow: var(--shadow-md); }

/* border (fuente de verdad; evita border negro) */
.cp-card--border{ border: 1px solid var(--border); }

/* tones (100% token-driven) */
.cp-card--tone-default{
  background: var(--surface);
  border-color: var(--border);
}
.cp-card--tone-muted{
  background: var(--surface-2);
  border-color: var(--border);
}
.cp-card--tone-info{
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}
.cp-card--tone-success{
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}
.cp-card--tone-warning{
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
}
.cp-card--tone-danger{
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
}
.cp-card--tone-accent{
  background: var(--tone-accent-bg);
  border-color: var(--tone-accent-border);
}

/* =========================================================
   Card v3: spacing entre blocks hijos
   ========================================================= */

/* El card v3 contiene blocks renderizados uno tras otro.
   Lo convertimos en un "stack" vertical con aire consistente. */
.cp-card{
  display: grid;
  gap: var(--space-4); /* aire base */
}

/* En mobile, un poco menos */
@media (max-width: 520px){
  .cp-card{ gap: var(--space-3); }
}

/* Si por alguna razón un child trae margin-top grande, evitamos doble aire */
.cp-card > :first-child{ margin-top: 0 !important; }
.cp-card > :last-child{ margin-bottom: 0 !important; }

/* Bloques comunes: aseguran separación consistente aunque el child no tenga margin */
.cp-card > .cp-block,
.cp-card > .cp-callout,
.cp-card > .cp-ad,
.cp-card > .cp-assess,
.cp-card > .cp-prose,
.cp-card > .cp-code,
.cp-card > .cp-table-wrap,
.cp-card > .cp-media,
.cp-card > .cp-image,
.cp-card > .cp-file{
  margin: 0; /* el gap ya manda */
}

/* Si un bloque interno usa margin-bottom (p.ej. prose), que no “infle” el gap */
.cp-card > *{ margin-bottom: 0; }


/* ==========================================================================
   TABLE v3  ✅ cp-block se mantiene pero NO aporta visual; la tabla controla todo.
   ========================================================================== */

/* ✅ Neutralizar el frame del sistema SOLO en table */
.cp-block.cp-tablev3{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Root */
.cp-tablev3{
  width: 100%;
}

/* caption/note */
.cp-tablev3__caption{
  font-weight: 900;
  margin: 0 0 var(--space-2) 0;
}
.cp-tablev3__note{
  margin: var(--space-2) 0 0 0;
  font-size: var(--text-sm);
}

/* ✅ Frame real (dueño de bg/border/radius/shadow) */
.cp-tablev3__frame{
  width: 100%;
}

/* bg */
.cp-tablev3--bg-surface .cp-tablev3__frame{ background: var(--surface); }
.cp-tablev3--bg-surface-2 .cp-tablev3__frame{ background: var(--surface-2); }
.cp-tablev3--bg-white .cp-tablev3__frame{ background: #fff; }
.cp-tablev3--bg-transparent .cp-tablev3__frame{ background: transparent; }

/* default bg si no especificas bg: no forzamos (queda transparente) */

/* border exterior */
.cp-tablev3--border .cp-tablev3__frame{
  border: 1px solid var(--border);
}

/* radius (independiente de border) */
.cp-tablev3--rad-none .cp-tablev3__frame{ border-radius: 0; }
.cp-tablev3--rad-sm   .cp-tablev3__frame{ border-radius: var(--radius-sm); }
.cp-tablev3--rad-md   .cp-tablev3__frame{ border-radius: var(--radius-md); }
.cp-tablev3--rad-lg   .cp-tablev3__frame{ border-radius: var(--radius-lg); }
.cp-tablev3--rad-xl   .cp-tablev3__frame{ border-radius: var(--radius-xl); }
.cp-tablev3--rad-2xl  .cp-tablev3__frame{ border-radius: var(--radius-2xl); }

/* para que el radius recorte el contenido */
.cp-tablev3--rad-sm .cp-tablev3__frame,
.cp-tablev3--rad-md .cp-tablev3__frame,
.cp-tablev3--rad-lg .cp-tablev3__frame,
.cp-tablev3--rad-xl .cp-tablev3__frame,
.cp-tablev3--rad-2xl .cp-tablev3__frame{
  overflow: hidden;
}

/* shadow (en frame) */
.cp-tablev3--sh-none .cp-tablev3__frame{ box-shadow: none; }
.cp-tablev3--sh-sm   .cp-tablev3__frame{ box-shadow: var(--shadow-sm); }
.cp-tablev3--sh-md   .cp-tablev3__frame{ box-shadow: var(--shadow-md); }

/* wrapper overflow */
.cp-tablev3__wrap{
  width: 100%;
}
.cp-tablev3--ov-auto .cp-tablev3__wrap{ overflow:auto; }
.cp-tablev3--ov-scroll .cp-tablev3__wrap{ overflow:scroll; }
.cp-tablev3--ov-hidden .cp-tablev3__wrap{ overflow:hidden; }
.cp-tablev3--ov-wrap .cp-tablev3__wrap{ overflow:visible; }

/* base table */
.cp-tablev3__table{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

/* density */
.cp-tablev3--density-sm .cp-tablev3__cell{ padding: 8px 10px; }
.cp-tablev3--density-md .cp-tablev3__cell{ padding: 12px 10px; }
.cp-tablev3--density-lg .cp-tablev3__cell{ padding: 14px 12px; }

/* cells base (sin líneas por default) */
.cp-tablev3__cell{
  vertical-align: top;
}

/* alignment */
.cp-tablev3__cell--left{ text-align: left !important; }
.cp-tablev3__cell--center{ text-align: center !important; }
.cp-tablev3__cell--right{ text-align: right !important; }

/* header look */
.cp-tablev3__table thead .cp-tablev3__cell{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
}

/* striped */
.cp-tablev3--striped .cp-tablev3__table tbody tr:nth-child(even){
  background: rgba(0,0,0,.03);
}

/* -------------------------
   ✅ lines: none | rows | all
   ------------------------- */

/* none */
.cp-tablev3--lines-none .cp-tablev3__cell{
  border: 0;
}

/* rows: solo líneas horizontales internas */
.cp-tablev3--lines-rows .cp-tablev3__cell{
  border-bottom: 1px solid var(--border);
}
.cp-tablev3--lines-rows .cp-tablev3__table tbody tr:last-child > .cp-tablev3__cell{
  border-bottom: 0;
}

/* all: grid completo interno */
.cp-tablev3--lines-all .cp-tablev3__cell{
  border: 1px solid var(--border);
}

/* ✅ Si hay border exterior, NO duplicar perímetro del grid */
.cp-tablev3--lines-all.cp-tablev3--border .cp-tablev3__table tr > .cp-tablev3__cell:first-child{ border-left: 0; }
.cp-tablev3--lines-all.cp-tablev3--border .cp-tablev3__table tr > .cp-tablev3__cell:last-child{ border-right: 0; }
.cp-tablev3--lines-all.cp-tablev3--border .cp-tablev3__table thead tr:first-child > .cp-tablev3__cell{ border-top: 0; }
.cp-tablev3--lines-all.cp-tablev3--border .cp-tablev3__table tbody tr:first-child > .cp-tablev3__cell{ border-top: 0; }
.cp-tablev3--lines-all.cp-tablev3--border .cp-tablev3__table tbody tr:last-child > .cp-tablev3__cell{ border-bottom: 0; }

/* mobile tighten */
@media (max-width: 520px){
  .cp-tablev3--density-lg .cp-tablev3__cell{ padding: 12px 10px; }
}

/* =========================================================
   FILE v3 — Layout Pro (3 columnas)
   ========================================================= */

.cp-file__grid{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  align-items:center;
  gap: var(--space-4);
}

.cp-file__icon-col{
  display:flex;
  align-items:center;
  justify-content:center;
}

.cp-file__icon{
  width:36px;
  height:36px;
  color: var(--primary);
}

.cp-file__content{
  min-width:0;
}

.cp-file__title{
  font-weight:900;
  margin:0;
}

.cp-file__desc{
  margin-top:6px;
}

.cp-file__actions{
  display:flex;
  justify-content:flex-end;
}

.cp-file__actions .btn{
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 640px){

  .cp-file__grid{
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }

  .cp-file__actions{
    grid-column: 1 / -1;
    justify-content:flex-start;
    margin-top: var(--space-2);
  }

}

/* Upload progress (reusable) */
.cp-progressline{
  width:100%;
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.06);
  overflow:hidden;
}
.cp-progressline__bar{
  height:100%;
  width:0%;
  background: rgba(37,99,235,.70);
  transition: width .12s ease;
}
.cp-progressline__meta{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================================
   IMAGE v3  ✅ (sin frame propio)
   - NO padding
   - NO border
   - NO variant
   - radius/shadow opcionales
   ========================================================================== */

.cp-image{
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

/* maxWidth */
.cp-image--mw-sm{ max-width: var(--mw-sm); }
.cp-image--mw-md{ max-width: var(--mw-md); }
.cp-image--mw-lg{ max-width: var(--mw-lg); }
.cp-image--mw-xl{ max-width: var(--mw-xl); }
.cp-image--mw-full{ max-width: 100%; }

/* align */
.cp-image--align-left{ margin-right:auto; }
.cp-image--align-center{ margin-left:auto; margin-right:auto; }
.cp-image--align-right{ margin-left:auto; }

.cp-image__media{
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* radius solo en la caja media */
.cp-image--rad-none{ border-radius: 0; }
.cp-image--rad-sm{ border-radius: var(--radius-sm); }
.cp-image--rad-md{ border-radius: var(--radius-md); }
.cp-image--rad-lg{ border-radius: var(--radius-lg); }
.cp-image--rad-xl{ border-radius: var(--radius-xl); }
.cp-image--rad-2xl{ border-radius: var(--radius-2xl); }

/* shadow solo en la caja media */
.cp-image--sh-none{ box-shadow: none; }
.cp-image--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-image--sh-md{ box-shadow: var(--shadow-md); }

/* IMG */
.cp-image__img{
  display:block;
  width:100%;
  height:auto;
}

/* text */
.cp-image__caption{
  font-size: var(--text-sm);
  line-height: 1.45;
  margin: 0;
  padding: 0 var(--space-1);
}
.cp-image__meta{ font-size: 12px; }
.cp-image__link{ display:block; }

/* ==========================================================================
   LIST v3 (frame + gap)
   ========================================================================== */

.cp-list-wrap{
  width: 100%;
}

/* max widths (centrado) */
.cp-list-wrap--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-list-wrap--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-list-wrap--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-list-wrap--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-list-wrap--mw-full{ max-width: var(--mw-full); }

/* align (cuando maxWidth=full también puede alinear visualmente el bloque) */
.cp-list-wrap--align-left{ margin-right:auto; }
.cp-list-wrap--align-center{ margin-left:auto; margin-right:auto; }
.cp-list-wrap--align-right{ margin-left:auto; }

/* padding */
.cp-list-wrap--pad-none{ padding: 0; }
.cp-list-wrap--pad-xs{ padding: var(--space-1); }
.cp-list-wrap--pad-sm{ padding: var(--space-2); }
.cp-list-wrap--pad-md{ padding: var(--space-3); }
.cp-list-wrap--pad-lg{ padding: var(--space-4); }
.cp-list-wrap--pad-xl{ padding: var(--space-5); }
.cp-list-wrap--pad-2xl{ padding: var(--space-6); }

/* radius */
.cp-list-wrap--rad-none{ border-radius: 0; }
.cp-list-wrap--rad-sm{ border-radius: var(--radius-sm); }
.cp-list-wrap--rad-md{ border-radius: var(--radius-md); }
.cp-list-wrap--rad-lg{ border-radius: var(--radius-lg); }
.cp-list-wrap--rad-xl{ border-radius: var(--radius-xl); }
.cp-list-wrap--rad-2xl{ border-radius: var(--radius-2xl); }

/* si hay radius, recorta el fondo */
.cp-list-wrap--rad-sm,
.cp-list-wrap--rad-md,
.cp-list-wrap--rad-lg,
.cp-list-wrap--rad-xl,
.cp-list-wrap--rad-2xl{ overflow: hidden; }

/* shadow */
.cp-list-wrap--sh-none{ box-shadow: none; }
.cp-list-wrap--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-list-wrap--sh-md{ box-shadow: var(--shadow-md); }

/* border */
.cp-list-wrap--border{ border: 1px solid var(--border); }

/* tones (bg + border tokens) */
.cp-list-wrap--tone-default{
  background: var(--surface);
  border-color: var(--border);
}
.cp-list-wrap--tone-muted{
  background: var(--surface-2);
  border-color: var(--border);
}
.cp-list-wrap--tone-info{
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}
.cp-list-wrap--tone-success{
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}
.cp-list-wrap--tone-warning{
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
}
.cp-list-wrap--tone-danger{
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
}
.cp-list-wrap--tone-accent{
  background: var(--tone-accent-bg);
  border-color: var(--tone-accent-border);
}

/* LIST base: usamos grid para gap perfecto */
.cp-list{
  margin: 0;
  padding-left: 1.1em; /* bullets/numbers */
  display: grid;
  align-content: start;
}

.cp-list--gap-xs{ gap: var(--space-1); }
.cp-list--gap-sm{ gap: var(--space-2); }
.cp-list--gap-md{ gap: var(--space-3); }
.cp-list--gap-lg{ gap: var(--space-4); }
.cp-list--gap-xl{ gap: var(--space-5); }
.cp-list--gap-2xl{ gap: var(--space-6); }

/* items */
.cp-list__item{
  margin: 0; /* el gap manda */
  padding-left: .7em; /* separa texto de bullet/número */
}

/* icons variant: quitamos bullets y hacemos layout bonito */
.cp-list--icons{
  padding-left: 0;
  list-style: none;
}

.cp-list--icons .cp-list__item{
  display: grid;
  grid-template-columns: 1.2em 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cp-list__icon{
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1;
  font-weight: 700;
  transform: translateY(.15em);
}

/* content: evitar doble margen del markdown */
.cp-list__content > :first-child{ margin-top: 0 !important; }
.cp-list__content > :last-child{ margin-bottom: 0 !important; }
.cp-list__content p{ margin: 0; } /* opcional: compacta más */

.cp-list__icon--svg svg{
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.cp-list__icon--svg{
  color: var(--primary);
}

.cp-list__item--icon{
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

/* ==========================================================================
   STEPS v3
   ========================================================================== */

.cp-steps-wrap{
  width: 100%;
}

/* max widths */
.cp-steps-wrap--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-steps-wrap--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-steps-wrap--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-steps-wrap--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-steps-wrap--mw-full{ max-width: var(--mw-full); }

/* padding */
.cp-steps-wrap--pad-none{ padding: 0; }
.cp-steps-wrap--pad-xs{ padding: var(--space-1); }
.cp-steps-wrap--pad-sm{ padding: var(--space-2); }
.cp-steps-wrap--pad-md{ padding: var(--space-3); }
.cp-steps-wrap--pad-lg{ padding: var(--space-4); }
.cp-steps-wrap--pad-xl{ padding: var(--space-5); }
.cp-steps-wrap--pad-2xl{ padding: var(--space-6); }

/* radius */
.cp-steps-wrap--rad-none{ border-radius: 0; }
.cp-steps-wrap--rad-sm{ border-radius: var(--radius-sm); }
.cp-steps-wrap--rad-md{ border-radius: var(--radius-md); }
.cp-steps-wrap--rad-lg{ border-radius: var(--radius-lg); }
.cp-steps-wrap--rad-xl{ border-radius: var(--radius-xl); }
.cp-steps-wrap--rad-2xl{ border-radius: var(--radius-2xl); }

.cp-steps-wrap--rad-sm,
.cp-steps-wrap--rad-md,
.cp-steps-wrap--rad-lg,
.cp-steps-wrap--rad-xl,
.cp-steps-wrap--rad-2xl{ overflow: hidden; }

/* shadow */
.cp-steps-wrap--sh-none{ box-shadow: none; }
.cp-steps-wrap--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-steps-wrap--sh-md{ box-shadow: var(--shadow-md); }

/* border */
.cp-steps-wrap--border{ border: 1px solid var(--border); }

/* tones */
.cp-steps-wrap--tone-default{
  background: var(--surface);
  border-color: var(--border);
}
.cp-steps-wrap--tone-muted{
  background: var(--surface-2);
  border-color: var(--border);
}
.cp-steps-wrap--tone-info{
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}
.cp-steps-wrap--tone-success{
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}
.cp-steps-wrap--tone-warning{
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
}
.cp-steps-wrap--tone-danger{
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
}
.cp-steps-wrap--tone-accent{
  background: var(--tone-accent-bg);
  border-color: var(--tone-accent-border);
}

/* list */
.cp-steps{
  display: grid;
  align-content: start;
}

.cp-steps--gap-xs{ gap: var(--space-2); }
.cp-steps--gap-sm{ gap: var(--space-3); }
.cp-steps--gap-md{ gap: var(--space-4); }
.cp-steps--gap-lg{ gap: var(--space-5); }
.cp-steps--gap-xl{ gap: var(--space-6); }
.cp-steps--gap-2xl{ gap: calc(var(--space-6) + var(--space-2)); }

/* each row */
.cp-step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: start;
}

/* marker */
.cp-step__marker{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  margin-top: 2px;
}

.cp-steps--timeline .cp-step__marker{
  border-radius: var(--radius-md);
}

/* body */
.cp-step__body{
  min-width: 0;
}

.cp-step__title{
  margin: 0;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--text);
}

.cp-step__text{
  margin-top: var(--space-2);
  color: var(--text);
}

/* prose cleanup */
.cp-step__text > :first-child{ margin-top: 0 !important; }
.cp-step__text > :last-child{ margin-bottom: 0 !important; }

.cp-step__text p{
  margin: 0;
  line-height: 1.65;
}

.cp-step__text pre,
.cp-step__text .cp-codebox{
  margin-top: var(--space-2);
}

.cp-step__text code{
  white-space: break-spaces;
}

/* timeline feel */
.cp-steps--timeline .cp-step{
  position: relative;
}

.cp-steps--timeline .cp-step:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: calc(var(--space-3) * -1);
  width: 2px;
  background: var(--border);
  opacity: .9;
}


/* mobile */
@media (max-width: 520px){
  .cp-step{
    grid-template-columns: 36px 1fr;
    gap: var(--space-2);
  }

  .cp-step__marker{
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }

  .cp-step__title{
    font-size: 0.98rem;
  }

  .cp-steps--timeline .cp-step:not(:last-child)::after{
    left: 14px;
    top: 36px;
  }
}

/* ==========================================================================
   CALLOUT v3.3
   ========================================================================== */

.cp-callout{
  width: 100%;
  color: var(--text);
  border: 0;
  box-sizing: border-box;
}

.cp-callout,
.cp-callout *{
  box-sizing: border-box;
}

.cp-callout:not(.cp-callout--border){
  border: 0 !important;
}

.cp-callout--border{
  border: 1px solid var(--border);
}

.cp-callout--border.cp-callout--info{ border-color: var(--tone-info-border); }
.cp-callout--border.cp-callout--warning{ border-color: var(--tone-warning-border); }
.cp-callout--border.cp-callout--success{ border-color: var(--tone-success-border); }
.cp-callout--border.cp-callout--danger{ border-color: var(--tone-danger-border); }

/* width */
.cp-callout--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-callout--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-callout--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-callout--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-callout--mw-full{ max-width: var(--mw-full); }

/* padding */
.cp-callout--pad-none{ padding: 0; }
.cp-callout--pad-xs{ padding: var(--space-1); }
.cp-callout--pad-sm{ padding: var(--space-2); }
.cp-callout--pad-md{ padding: var(--space-3); }
.cp-callout--pad-lg{ padding: var(--space-4); }
.cp-callout--pad-xl{ padding: var(--space-5); }
.cp-callout--pad-2xl{ padding: var(--space-6); }

/* radius */
.cp-callout--rad-none{ border-radius: 0; }
.cp-callout--rad-sm{ border-radius: var(--radius-sm); }
.cp-callout--rad-md{ border-radius: var(--radius-md); }
.cp-callout--rad-lg{ border-radius: var(--radius-lg); }
.cp-callout--rad-xl{ border-radius: var(--radius-xl); }
.cp-callout--rad-2xl{ border-radius: var(--radius-2xl); }

.cp-callout--rad-sm,
.cp-callout--rad-md,
.cp-callout--rad-lg,
.cp-callout--rad-xl,
.cp-callout--rad-2xl{
  overflow: hidden;
}

/* shadow */
.cp-callout--sh-none{ box-shadow: none; }
.cp-callout--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-callout--sh-md{ box-shadow: var(--shadow-md); }

/* backgrounds */
.cp-callout--bg-tone.cp-callout--info{ background: var(--tone-info-bg); }
.cp-callout--bg-tone.cp-callout--warning{ background: var(--tone-warning-bg); }
.cp-callout--bg-tone.cp-callout--success{ background: var(--tone-success-bg); }
.cp-callout--bg-tone.cp-callout--danger{ background: var(--tone-danger-bg); }

.cp-callout--bg-surface{ background: var(--surface); }
.cp-callout--bg-surface-2{ background: var(--surface-2); }
.cp-callout--bg-transparent{ background: transparent; }

/* layout */
.cp-callout__inner{
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.cp-callout--noicon .cp-callout__inner{
  grid-template-columns: minmax(0, 1fr);
}

.cp-callout__icon{
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  line-height: 1;
  margin-top: .1rem;
  opacity: .95;
}

.cp-callout__icon--svg svg{
  width: 100%;
  height: 100%;
  display: block;
}

.cp-callout__icon--missing{
  font-weight: 900;
  opacity: .7;
}

.cp-callout__body{
  min-width: 0;
}

/* header */
.cp-callout__title{
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 var(--space-2) 0;
}

.cp-callout__description{
  margin: 0 0 var(--space-2) 0;
  color: var(--muted);
}

.cp-callout__description > :first-child,
.cp-callout__item-content > :first-child{
  margin-top: 0 !important;
}

.cp-callout__description > :last-child,
.cp-callout__item-content > :last-child{
  margin-bottom: 0 !important;
}

/* items: sin listas nativas */
.cp-callout__items{
  display: grid;
  margin: 0;
  padding: 0;
}

/* gap */
.cp-callout--gap-none .cp-callout__items{ gap: 0; }
.cp-callout--gap-xs .cp-callout__items{ gap: var(--space-1); }
.cp-callout--gap-sm .cp-callout__items{ gap: var(--space-2); }
.cp-callout--gap-md .cp-callout__items{ gap: var(--space-3); }
.cp-callout--gap-lg .cp-callout__items{ gap: var(--space-4); }

/*
  Alineación profesional:
  - El contenido textual arranca en la misma coordenada que title/description.
  - El marcador vive a la izquierda con posición absoluta.
  - El item NO se divide por palabras porque el contenido vive en bloque normal.
*/

.cp-callout--list-none .cp-callout__marker{
  display: none;
}

.cp-callout__item{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .5rem;
  align-items: baseline;
  min-width: 0;
}

.cp-callout__marker{
  position: static;
  width: auto;
  min-width: 1.25rem;
  text-align: left;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.cp-callout__item-content{
  min-width: 0;
}

.cp-callout__item-content p{
  margin: 0;
}

.cp-callout__item-content p + p{
  margin-top: var(--space-1);
}

/* en pantallas pequeñas acercamos el marcador */
@media (max-width: 520px){
  .cp-callout__inner{
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cp-callout__icon{
    width: 1.25rem;
    height: 1.25rem;
  }

}
/* ==========================================================================
   HEADING v3
   ========================================================================== */

.cp-heading{
  width: 100%;
}

.cp-heading--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-heading--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-heading--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-heading--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-heading--mw-full{ max-width: var(--mw-full); }

.cp-heading--align-left{ text-align: left; }
.cp-heading--align-center{ text-align: center; }
.cp-heading--align-right{ text-align: right; }

.cp-heading--margin-none{ margin: 0; }
.cp-heading--margin-xs{ margin: var(--space-1) 0; }
.cp-heading--margin-sm{ margin: var(--space-2) 0; }
.cp-heading--margin-md{ margin: var(--space-3) 0; }
.cp-heading--margin-lg{ margin: var(--space-4) 0; }
.cp-heading--margin-xl{ margin: var(--space-5) 0; }

.cp-heading--tone-default{ color: inherit; }
.cp-heading--tone-muted{ color: var(--muted); }
.cp-heading--tone-info{ color: var(--tone-info-border); }
.cp-heading--tone-success{ color: var(--tone-success-border); }
.cp-heading--tone-warning{ color: var(--tone-warning-border); }
.cp-heading--tone-danger{ color: var(--tone-danger-border); }
.cp-heading--tone-accent{ color: var(--tone-accent-border); }

.cp-heading__subtitle > :first-child,
.cp-heading__kicker > :first-child{ margin-top: 0 !important; }

.cp-heading__subtitle > :last-child,
.cp-heading__kicker > :last-child{ margin-bottom: 0 !important; }

.cp-heading__divider{
  width: 72px;
  max-width: 100%;
  height: 2px;
  background: currentColor;
  opacity: .18;
  margin-top: var(--space-3);
}

.cp-heading--align-center .cp-heading__divider{
  margin-left: auto;
  margin-right: auto;
}

.cp-heading--align-right .cp-heading__divider{
  margin-left: auto;
}

.cp-heading--tone-default{ color: var(--text); }
.cp-heading--tone-muted{ color: var(--muted); }
.cp-heading--tone-info{ color: var(--tone-info-text); }
.cp-heading--tone-success{ color: var(--tone-success-text); }
.cp-heading--tone-warning{ color: var(--tone-warning-text); }
.cp-heading--tone-danger{ color: var(--tone-danger-text); }
.cp-heading--tone-accent{ color: var(--tone-accent-text); }

.cp-heading__kicker{
  color: currentColor;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-1) 0;
  opacity: 1;
}

.cp-heading__title{
  margin: 0;
  line-height: var(--line-tight);
  font-weight: 800;
  color: currentColor;
}

.cp-heading__subtitle{
  margin-top: var(--space-2);
  color: var(--muted);
  line-height: var(--line-base);
  font-weight: 500;
}

/* ==========================================================================
   Dibujar formulas matématicas
   ========================================================================== */

.cp-math--block {
  margin: 1rem 0;
  overflow-x: auto;
}

.cp-math--inline {
  white-space: nowrap;
}

/* ==========================================================================
   CODE block v3
   Complementa estilos legacy sin romper cursos existentes
   ========================================================================== */

.cp-codeblock{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.cp-codeblock .cp-codebox{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: static; /* anula el position:relative legacy dentro del block v3 */
}

.cp-codeblock .cp-codebox__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
  min-width: 0;
}

.cp-codeblock .cp-codebox__meta{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.cp-codeblock .cp-codebox__title{
  font-weight: 700;
  min-width: 0;
}

.cp-codeblock .cp-codebox__file{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 0.125rem var(--space-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.cp-codeblock .cp-codebadge{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 0.125rem var(--space-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.cp-codeblock .cp-codebadge__dot{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  opacity: .5;
  display: inline-block;
  flex: 0 0 auto;
}

/* El botón deja de ser flotante solo dentro del block code v3 */
.cp-codeblock .cp-codecopy{
  position: static;
  top: auto;
  right: auto;
  flex: 0 0 auto;

  font: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0.4375rem 0.625rem;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  opacity: .85;
}

.cp-codeblock .cp-codecopy:hover{
  opacity: 1;
}

/* Contención */
.cp-codeblock pre.cp-code{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: auto;
}

/* Override del legacy: default SIN wrap para el block code v3 */
.cp-codeblock pre.cp-code > code{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  padding-left: 0 !important;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;

  font-size: var(--text-sm);
  line-height: var(--line-base);
}

/* Si el block trae wrap=true */
.cp-codeblock .cp-code--wrap > code{
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.cp-codeblock,
.cp-codeblock .cp-codebox,
.cp-codeblock pre.cp-code{
  max-width: 100%;
  min-width: 0;
}

.cp-block,
.cp-card,
.cp-col,
.cp-section__items > *,
.cp-card > *{
  min-width: 0;
}

pre.cp-code,
.cp-codebox,
.cp-codebox pre {
  max-width: 100%;
  overflow-x: auto;
}

pre.cp-code code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

/* Block md / text -> markdown */

.cp-md-p{
  margin:0 0 1rem 0;
  line-height:1.7;
}

.cp-md-p br{
  display:block;
  content:"";
  margin-top:.25rem;
}

.cp-md-blank{
  height:1rem;
}

/* Render para preguntas de tipo 'code' */

/* ==========================================================================
   Assessment · Code question block
   ========================================================================== */

.cp-code-block {
  margin: var(--space-2) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp-code-block__header {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-tight);
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.cp-code-block__pre {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  white-space: pre;

  color: var(--text);
  background: var(--surface);

  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: var(--text-sm);
  line-height: var(--line-base);
}

.cp-code-block__pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: inherit;
}

/* ==========================================================================
   AD v3
   ========================================================================== */

.cp-ad{
  position: relative;

  padding: var(--space-5);

  border: 1px solid
    color-mix(in srgb, var(--primary) 35%, var(--border) 65%);

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 10%, var(--surface) 90%),
      var(--surface)
    );

  box-shadow: var(--shadow-md, var(--shadow-sm));

  overflow: hidden;
}

/* Glow decorativo sutil */
.cp-ad::before{
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;

  width:220px;
  height:220px;

  border-radius:999px;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--primary) 18%, transparent),
      transparent 70%
    );

  pointer-events:none;
}

/* badge */
.cp-ad__badge{
  display:inline-flex;
  align-items:center;

  margin-bottom: var(--space-3);

  padding: 5px 12px;

  border-radius:999px;

  background: var(--primary);
  color:#fff;

  font-size:11px;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;
}

/* body */
.cp-ad__body{
  position:relative;
  z-index:1;

  font-size:1.02rem;
  line-height:1.7;
}

.cp-ad__body > :first-child{
  margin-top:0 !important;
}

.cp-ad__body > :last-child{
  margin-bottom:0 !important;
}

/* meta */
.cp-ad__meta{
  position:relative;
  z-index:1;

  margin-top: var(--space-4);

  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2);

  color: var(--muted);
  font-size:12px;
}

/* ==========================================================================
   HERO v3
   ========================================================================== */

.cp-hero-block{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  align-items: center;

  padding: var(--space-5);

  background: var(--tone-accent-bg);
  color: var(--text);

  overflow: hidden;
  border: 0;
  box-shadow: none;
  gap: var(--space-4);
}

/* tones */
.cp-hero-block--tone-default{ background: var(--surface); border-color: var(--border); }
.cp-hero-block--tone-muted{ background: var(--surface-2); border-color: var(--border); }
.cp-hero-block--tone-info{ background: var(--tone-info-bg); border-color: var(--tone-info-border); }
.cp-hero-block--tone-success{ background: var(--tone-success-bg); border-color: var(--tone-success-border); }
.cp-hero-block--tone-warning{ background: var(--tone-warning-bg); border-color: var(--tone-warning-border); }
.cp-hero-block--tone-danger{ background: var(--tone-danger-bg); border-color: var(--tone-danger-border); }
.cp-hero-block--tone-accent{ background: var(--tone-accent-bg); border-color: var(--tone-accent-border); }

/* layout */
.cp-hero-block--layout-media_left .cp-hero-block__media{
  order: -1;
}

.cp-hero-block--layout-media_top,
.cp-hero-block--layout-text_only{
  grid-template-columns: 1fr;
}

/* align */
.cp-hero-block--align-center{
  text-align: center;
}

.cp-hero-block--align-right{
  text-align: right;
}

/* gap */
.cp-hero-block--gap-sm{ gap: var(--space-2); }
.cp-hero-block--gap-md{ gap: var(--space-3); }
.cp-hero-block--gap-lg{ gap: var(--space-4); }
.cp-hero-block--gap-xl{ gap: var(--space-5); }
.cp-hero-block--gap-2xl{ gap: var(--space-6); }

/* hero radius */
.cp-hero-block--rad-none{ border-radius: 0; }
.cp-hero-block--rad-sm{ border-radius: var(--radius-sm); }
.cp-hero-block--rad-md{ border-radius: var(--radius-md); }
.cp-hero-block--rad-lg{ border-radius: var(--radius-lg); }
.cp-hero-block--rad-xl{ border-radius: var(--radius-xl); }
.cp-hero-block--rad-2xl{ border-radius: var(--radius-2xl); }

/* hero shadow */
.cp-hero-block--sh-none{ box-shadow: none; }
.cp-hero-block--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-hero-block--sh-md{ box-shadow: var(--shadow-md); }

/* hero border */
.cp-hero-block--border{
  border: 1px solid var(--tone-accent-border);
}

.cp-hero-block--tone-default.cp-hero-block--border{ border-color: var(--border); }
.cp-hero-block--tone-muted.cp-hero-block--border{ border-color: var(--border); }
.cp-hero-block--tone-info.cp-hero-block--border{ border-color: var(--tone-info-border); }
.cp-hero-block--tone-success.cp-hero-block--border{ border-color: var(--tone-success-border); }
.cp-hero-block--tone-warning.cp-hero-block--border{ border-color: var(--tone-warning-border); }
.cp-hero-block--tone-danger.cp-hero-block--border{ border-color: var(--tone-danger-border); }
.cp-hero-block--tone-accent.cp-hero-block--border{ border-color: var(--tone-accent-border); }

/* content */
.cp-hero-block__title{
  margin: 0;
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  line-height: var(--line-tight);
  font-weight: 900;
}

.cp-hero-block__subtitle{
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
  color: var(--muted);
}

.cp-hero-block__desc{
  margin-top: var(--space-3);
  line-height: 1.7;
}

.cp-hero-block__desc > :first-child{ margin-top: 0 !important; }
.cp-hero-block__desc > :last-child{ margin-bottom: 0 !important; }

/* actions */
.cp-hero-block__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* media */
.cp-hero-block__media{
  margin: 0;
  min-width: 0;
}

.cp-hero-block__media-frame{
  overflow: hidden;
  box-shadow: none;
}

.cp-hero-block__media-frame--rad-none{ border-radius: 0; }
.cp-hero-block__media-frame--rad-sm{ border-radius: var(--radius-sm); }
.cp-hero-block__media-frame--rad-md{ border-radius: var(--radius-md); }
.cp-hero-block__media-frame--rad-lg{ border-radius: var(--radius-lg); }
.cp-hero-block__media-frame--rad-xl{ border-radius: var(--radius-xl); }
.cp-hero-block__media-frame--rad-2xl{ border-radius: var(--radius-2xl); }

.cp-hero-block__img{
  width: 100%;
  height: auto;
  display: block;
}

.cp-hero-block .cp-video{
  margin: 0;
}

/* responsive */
@media (max-width: 760px){
  .cp-hero-block{
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  .cp-hero-block__media{
    order: 0;
  }
}

/* ==========================================================================
   NOTE v3.3
   ========================================================================== */

.cp-note{
  width: 100%;
  color: var(--text);
  border: 0;
  box-sizing: border-box;
}

.cp-note,
.cp-note *{
  box-sizing: border-box;
}

.cp-note:not(.cp-note--border){
  border: 0 !important;
}

/* max width */
.cp-note--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-note--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-note--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-note--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-note--mw-full{ max-width: var(--mw-full); }

/* padding */
.cp-note--pad-none{ padding: 0; }
.cp-note--pad-xs{ padding: var(--space-1); }
.cp-note--pad-sm{ padding: var(--space-2); }
.cp-note--pad-md{ padding: var(--space-3); }
.cp-note--pad-lg{ padding: var(--space-4); }
.cp-note--pad-xl{ padding: var(--space-5); }
.cp-note--pad-2xl{ padding: var(--space-6); }

/* radius */
.cp-note--rad-none{ border-radius: 0; }
.cp-note--rad-sm{ border-radius: var(--radius-sm); }
.cp-note--rad-md{ border-radius: var(--radius-md); }
.cp-note--rad-lg{ border-radius: var(--radius-lg); }
.cp-note--rad-xl{ border-radius: var(--radius-xl); }
.cp-note--rad-2xl{ border-radius: var(--radius-2xl); }

.cp-note--rad-sm,
.cp-note--rad-md,
.cp-note--rad-lg,
.cp-note--rad-xl,
.cp-note--rad-2xl{
  overflow: hidden;
}

/* shadow */
.cp-note--sh-none{ box-shadow: none; }
.cp-note--sh-sm{ box-shadow: var(--shadow-sm); }
.cp-note--sh-md{ box-shadow: var(--shadow-md); }

/* border */
.cp-note--border{
  border: 1px solid var(--border);
}

.cp-note--border.cp-note--tone-default{ border-color: var(--border); }
.cp-note--border.cp-note--tone-muted{ border-color: var(--border); }
.cp-note--border.cp-note--tone-info{ border-color: var(--tone-info-border); }
.cp-note--border.cp-note--tone-success{ border-color: var(--tone-success-border); }
.cp-note--border.cp-note--tone-warning{ border-color: var(--tone-warning-border); }
.cp-note--border.cp-note--tone-danger{ border-color: var(--tone-danger-border); }
.cp-note--border.cp-note--tone-accent{ border-color: var(--tone-accent-border); }
.cp-note--border.cp-note--tone-transparent{ border-color: var(--border); }

/* tones */
.cp-note--tone-default{
  background: var(--surface);
}

.cp-note--tone-muted{
  background: var(--surface-2);
}

.cp-note--tone-info{
  background: var(--tone-info-bg);
}

.cp-note--tone-success{
  background: var(--tone-success-bg);
}

.cp-note--tone-warning{
  background: var(--tone-warning-bg);
}

.cp-note--tone-danger{
  background: var(--tone-danger-bg);
}

.cp-note--tone-accent{
  background: var(--tone-accent-bg);
}

.cp-note--tone-transparent{
  background: transparent;
}

/* layout */
.cp-note__inner{
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.cp-note--noicon .cp-note__inner{
  grid-template-columns: minmax(0, 1fr);
}

.cp-note__icon{
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  line-height: 1;
  margin-top: .1rem;
  opacity: .95;
}

.cp-note__icon--svg svg{
  width: 100%;
  height: 100%;
  display: block;
}

.cp-note__icon--missing{
  font-weight: 900;
  opacity: .7;
}

.cp-note__body{
  min-width: 0;
}

.cp-note__title{
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 var(--space-2) 0;
}

.cp-note__text{
  min-width: 0;
}

.cp-note__text > :first-child{
  margin-top: 0 !important;
}

.cp-note__text > :last-child{
  margin-bottom: 0 !important;
}

.cp-note__text p{
  margin-top: 0;
}

.cp-note__text p + p{
  margin-top: var(--space-2);
}

.cp-note__text ul,
.cp-note__text ol{
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  padding-left: 1.25rem;
}

.cp-note__text li + li{
  margin-top: var(--space-1);
}

.cp-note__text .cp-codebox,
.cp-note__text .cp-table-wrap,
.cp-note__text .cp-math--block{
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.cp-note__text .cp-inline-code{
  font-size: .95em;
}

@media (max-width: 520px){
  .cp-note__inner{
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cp-note__icon{
    width: 1.25rem;
    height: 1.25rem;
  }
}