/* ────────────────────────────────────────────────────────────────── */
  /* Tokens */
  :root {
    --bg: oklch(0.985 0.006 250);
    --bg-2: oklch(0.96 0.012 245);
    --bg-3: oklch(0.93 0.01 90);
    --ink: #15151A;
    --ink-2: #5A5A66;
    --rule: rgba(20,20,30,0.10);
    --accent: #6F3AE0;
    --green: #1E7A4D;
    --amber: #F4A422;
    --rose:  #D24A6E;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 0 rgba(20,20,30,0.04), 0 1px 2px rgba(20,20,30,0.03);
    --shadow-md: 0 4px 12px -2px rgba(20,20,30,0.08), 0 2px 4px rgba(20,20,30,0.04);
    --shadow-lg: 0 20px 40px -12px rgba(20,20,30,0.18), 0 6px 12px rgba(20,20,30,0.06);
    --font-sans: 'Manrope', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --maxw: 1440px;
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Base */
  *,*:before,*:after { box-sizing: border-box; }
  html,body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
  input { font: inherit; color: inherit; }
  ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

  .ct-shell { background: var(--bg); color: var(--ink); min-height: 100vh; }

  /* ────────────────────────────────────────────────────────────────── */
  /* Top bar */
  .ct-topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .ct-topbar-row {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px 28px;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .ct-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
  .ct-logo-mark { color: var(--accent); display: inline-flex; }
  .ct-logo-text { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
  .ct-logo-text b { font-weight: 800; }

  .ct-nav { display: flex; gap: 22px; }
  .ct-nav a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
  }
  .ct-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
  .ct-nav a:hover { color: var(--ink); }

  .ct-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 8px 12px;
    max-width: 520px;
    color: var(--ink-2);
    transition: border-color .15s, background .15s;
  }
  .ct-search:focus-within { border-color: var(--accent); background: var(--bg); }
  .ct-search input {
    border: 0; outline: 0; background: transparent;
    flex: 1; min-width: 0;
    color: var(--ink);
    font-size: 13px;
  }
  .ct-search input::placeholder { color: var(--ink-2); }
  .ct-search-kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--ink-2);
  }

  .ct-topbar-actions { display: flex; align-items: center; gap: 8px; }
  .ct-ic-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    color: var(--ink-2);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ct-ic-btn:hover { background: var(--bg-2); color: var(--ink); }
  .ct-dot {
    position: absolute; top: 7px; right: 8px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rose); box-shadow: 0 0 0 2px var(--bg);
  }
  .ct-cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--ink);
    font-weight: 600; font-size: 13px;
    border: 1px solid var(--rule);
  }
  .ct-cart-btn:hover { background: var(--bg-3); }
  .ct-cart-count {
    background: #ef4444; color: white;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    min-width: 20px;
    text-align: center;
  }

  .ct-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    border-radius: 8px;
    font-weight: 600; font-size: 13px;
    transition: transform .12s ease, background .15s, color .15s, border-color .15s;
  }
  .ct-btn.big { height: 44px; padding: 0 18px; font-size: 14px; }
  .ct-btn.primary { background: var(--accent); color: white; }
  .ct-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .ct-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
  .ct-btn.ghost:hover { border-color: var(--ink); }
  .ct-shell.tone-dark .ct-btn.ghost { background: #000; }
  .ct-btn.light { background: var(--bg); color: var(--ink); }
  .ct-btn.light:hover { background: white; }
  .ct-btn.outline { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
  .ct-btn.outline:hover { border-color: var(--ink); background: var(--bg-2); }
  .ct-btn.outline.small { height: 30px; padding: 0 10px; font-size: 12px; }
  .ct-btn.fullw { width: 100%; justify-content: center; }

  .ct-subnav {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 6px 28px 10px;
    display: flex; align-items: center; gap: 16px;
    font-size: 12px;
    color: var(--ink-2);
    overflow-x: auto;
    white-space: nowrap;
  }
  .ct-subnav-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
  .ct-subnav a { color: var(--ink-2); }
  .ct-subnav a:hover { color: var(--ink); }
  .ct-subnav-sep { flex: 1; }
  .ct-author-link { color: var(--accent) !important; font-weight: 600; }

  /* ────────────────────────────────────────────────────────────────── */
  /* Hero */
  .ct-hero {
    position: relative; overflow: hidden;
    background:
      radial-gradient(70% 90% at 22% 30%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
      var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .ct-hero-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 56px 28px 40px;
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 40px;
    align-items: start;
  }
  .ct-hero-text { position: relative; z-index: 2; }
  .ct-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 14px;
  }
  .ct-kicker.on-hero {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    color: var(--ink);
  }
  .ct-hero-h1 {
    font-family: var(--font-sans);
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    text-wrap: balance;
  }
  .ct-hero-h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
  }
  .ct-hero-sub {
    font-size: 16px;
    color: var(--ink-2);
    margin: 0 0 24px;
    max-width: 460px;
    text-wrap: pretty;
  }
  .ct-hero-ctas { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
  .ct-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    max-width: 540px;
  }
  .ct-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 12px;
  }
  .ct-stat + .ct-stat { border-left: 1px solid var(--rule); padding-left: 16px; }
  .ct-stat-n { font-family: var(--font-mono); font-weight: 600; font-size: 16px; }
  .ct-stat-l { font-size: 11px; color: var(--ink-2); letter-spacing: 0.04em; }

  .ct-hero-stack {
    position: relative;
    height: 460px;
  }
  .ct-float {
    position: absolute;
    width: 260px; aspect-ratio: 320/200;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    background: white;
    border: 1px solid rgba(20,20,30,0.08);
  }
  .ct-float.small { width: 200px; }
  .ct-float .cp-preview { position: relative; width: 100%; height: 100%; }
  .ct-float .cp-preview-tag {
    position: absolute; bottom: 8px; left: 8px;
    font-family: var(--font-mono); font-size: 10px;
    background: rgba(0,0,0,0.7); color: white;
    padding: 3px 7px; border-radius: 4px;
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase;
  }
  .ct-float .cp-preview-tag .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }

  .ct-hero-ticker {
    background: var(--ink);
    color: var(--bg);
    overflow: hidden;
    border-top: 1px solid var(--rule);
  }
  .ct-ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 60s linear infinite;
  }
  .ct-ticker-row {
    display: inline-flex; gap: 40px;
    padding: 12px 20px;
    align-items: center;
  }
  .ct-tick {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .ct-tick-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
  @keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.33%); }
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Category strip */
  .ct-cats {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px 28px 12px;
  }
  .ct-cats-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
  .ct-h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .ct-shell.tone-dark .ct-h2 { color: #fff; }
  .ct-link-btn {
    font-size: 13px; font-weight: 600;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 6px;
  }
  .ct-link-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .ct-cats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .ct-cat-tile {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 10px;
    min-height: 78px;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    text-align: left;
    transition: border-color .15s, background .15s, transform .15s;
  }
  .ct-cat-tile:hover {
    border-color: var(--ink);
    background: var(--bg);
    transform: translateY(-1px);
  }
  .ct-cat-tile.on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  }
  .ct-cat-label { font-weight: 600; font-size: 14px; }
  .ct-cat-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Main grid (sidebar + content) */
  .ct-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px 28px 80px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
  }
  .ct-content { min-width: 0; }
  .ct-sidebar { position: sticky; top: 96px; }

  /* Sidebar */
  .ct-side-block { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .ct-side-block:first-child { padding-top: 0; }
  .ct-side-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
  .ct-side-h { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
  .ct-price-row { display: flex; align-items: center; gap: 6px; }
  .ct-price-row input {
    width: 100%; padding: 6px 8px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--bg-2);
    font-family: var(--font-mono); font-size: 12px;
  }
  .ct-price-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .ct-price-quick button {
    font-size: 11px; padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    color: var(--ink-2);
  }
  .ct-price-quick button:hover { color: var(--ink); border-color: var(--ink); }
  .ct-radio, .ct-check {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-size: 13px; color: var(--ink-2);
    cursor: pointer;
  }
  .ct-radio:hover, .ct-check:hover { color: var(--ink); }
  .ct-radio input, .ct-check input { accent-color: var(--accent); }
  .ct-side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .ct-side-tag {
    font-size: 11px; padding: 3px 8px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-2);
  }
  .ct-side-cta {
    background:
      radial-gradient(80% 80% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
      var(--ink);
    color: var(--bg);
    border-radius: 10px;
    padding: 14px 14px 16px;
    border: 0;
    margin-top: 12px;
  }
  .ct-side-cta .ct-side-h { color: var(--bg); }
  .ct-side-cta p { font-size: 12px; opacity: 0.7; margin: 4px 0 10px; }
  .ct-side-price { font-family: var(--font-mono); margin-bottom: 12px; }
  .ct-side-price b { font-size: 26px; font-weight: 700; }
  .ct-side-price span { font-size: 12px; opacity: 0.7; }

  /* ────────────────────────────────────────────────────────────────── */
  /* Side categories list */
  .ct-side-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .ct-side-cat {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 8px;
    margin: 0 -8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    color: var(--ink-2);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-align: left;
  }
  .ct-side-cat:hover { background: var(--bg-2); color: var(--ink); }
  .ct-side-cat.on {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-weight: 600;
  }
  .ct-side-cat-c {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
    font-weight: 400;
  }
  .ct-side-cat.on .ct-side-cat-c { color: var(--accent); }

  /* "Ver más / menos": muestra solo 6 + 7ª difuminada hasta que se expanda */
  .ct-side-cats.is-collapsible .ct-side-cat-li.is-extra { display: none; }
  .ct-side-cats.is-collapsible .ct-side-cat-li.is-peek {
    opacity: 0.45;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 95%);
  }
  .ct-side-cats.is-expanded .ct-side-cat-li.is-extra { display: list-item; }
  .ct-side-cats.is-expanded .ct-side-cat-li.is-peek {
    opacity: 1;
    pointer-events: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ct-side-cat-toggle {
    display: block;
    width: fit-content;
    margin: -16px auto 0;   /* sube y centra horizontalmente, casi sobre la 7ª */
    padding: 4px 10px;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--accent);
    border-radius: 6px;
    position: relative; z-index: 2;
    transition: background .12s;
  }
  .ct-side-cat-toggle:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  /* Cuando ya está expandido, deja un poco de margen normal (no apretado) */
  .ct-side-cats.is-expanded + .ct-side-cat-toggle { margin-top: 6px; }
  .ct-side-cat-toggle .ct-side-cat-toggle-less { display: none; }
  .ct-side-cats.is-expanded + .ct-side-cat-toggle .ct-side-cat-toggle-more,
  .ct-side-cat-toggle[aria-expanded="true"] .ct-side-cat-toggle-more { display: none; }
  .ct-side-cats.is-expanded + .ct-side-cat-toggle .ct-side-cat-toggle-less,
  .ct-side-cat-toggle[aria-expanded="true"] .ct-side-cat-toggle-less { display: inline; }
  .ct-side-more {
    margin-top: 8px;
    font: inherit;
    background: transparent;
    border: 0;
    padding: 6px 0;
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .ct-side-more:hover { text-decoration: underline; }

  /* Theme detail overlay */
  .ct-detail {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: stretch; justify-content: center;
  }
  .ct-detail-overlay {
    position: absolute; inset: 0;
    background: rgba(20,20,30,0.55);
    backdrop-filter: blur(3px);
    animation: detailFadeIn .2s both;
  }
  @keyframes detailFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .ct-detail-panel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg);
    color: var(--ink);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px -20px rgba(20,20,30,0.4);
    animation: detailSlideUp .28s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes detailSlideUp {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .ct-detail-topbar {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .ct-detail-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
  }
  .ct-detail-crumbs a { color: var(--accent); }
  .ct-detail-crumbs a:hover { text-decoration: underline; }
  .ct-detail-crumb-current { color: var(--ink); font-weight: 600; }
  .ct-detail-close {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
  }
  .ct-detail-close:hover { background: var(--bg-2); color: var(--ink); }
  .ct-detail-scroll { overflow-y: auto; flex: 1; }

  .ct-detail-hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 36px;
    padding: 36px 36px 28px;
    border-bottom: 1px solid var(--rule);
  }
  .ct-detail-meta { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .ct-detail-title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
  }
  .ct-detail-byline {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: var(--ink-2);
  }
  .ct-detail-byline a { color: var(--ink); }
  .ct-detail-byline .dot { color: var(--ink-2); }
  .ct-detail-desc {
    font-size: 15px;
    color: var(--ink-2);
    margin: 0;
    text-wrap: pretty;
    max-width: 540px;
  }
  .ct-detail-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 4px;
  }
  .ct-detail-pricerow {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2);
    margin-top: 2px;
  }
  .ct-detail-pricerow .ct-price-eur { font-size: 18px; }
  .ct-detail-hero-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--bg-2);
    aspect-ratio: 16/10;
    align-self: start;
  }
  .ct-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .ct-detail-hero-chips {
    position: absolute; top: 12px; right: 12px;
    display: flex; gap: 6px;
  }
  .ct-detail-hero-tag {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    background: rgba(0,0,0,0.7); color: white;
    padding: 3px 7px; border-radius: 3px;
    text-transform: uppercase;
  }

  .ct-detail-section {
    padding: 32px 36px;
    border-bottom: 1px solid var(--rule);
  }
  .ct-section-kicker {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 14px;
  }
  .ct-detail-fullshot {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--bg-2);
  }
  .ct-detail-fullshot img {
    display: block;
    width: 100%;
    height: auto;
  }
  .ct-detail-fullshot-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
    background: linear-gradient(180deg, transparent, var(--bg) 95%);
    pointer-events: none;
  }

  /* Tabla de secciones (tabla.txt) */
  .ct-tabla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .ct-tabla-group {
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--bg-2);
    padding: 16px 18px;
  }
  .ct-tabla-page {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .ct-tabla-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ct-tabla-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    padding-left: 14px;
    position: relative;
  }
  .ct-tabla-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  @media (max-width: 720px) {
    .ct-tabla { grid-template-columns: 1fr; }
  }
  .ct-detail-helper {
    margin: 10px 0 0;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2);
  }

  .ct-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
    padding: 32px 36px;
    border-bottom: 1px solid var(--rule);
  }
  .ct-detail-block {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 22px;
  }
  .ct-ficha {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px 16px;
  }
  .ct-ficha dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    align-self: start;
    padding-top: 2px;
  }
  .ct-ficha dd { margin: 0; font-size: 14px; line-height: 1.45; }
  .ct-resumen {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .ct-resumen li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    padding: 6px 0;
    border-top: 1px dashed var(--rule);
  }
  .ct-resumen li:first-child { border-top: 0; }
  .ct-resumen-n {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 700;
  }

  .ct-prompt-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .ct-prompt-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .ct-prompt-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .ct-prompt-ta {
    display: block;
    width: 100%;
    min-height: 360px;
    max-height: 560px;
    padding: 18px 20px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: #E8E6E0;
    background: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 10px;
    resize: vertical;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .ct-shell.tone-dark .ct-prompt-ta { background: var(--accent); color: #fff; }
  .ct-prompt-foot {
    display: flex; justify-content: space-between;
    margin-top: 10px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2);
  }
  .ct-detail-footnav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 24px 36px 36px;
  }

  @media (max-width: 1024px) {
    .ct-detail-hero, .ct-detail-grid { padding: 28px 24px; gap: 20px; }
    .ct-detail-hero { grid-template-columns: 1fr; }
    .ct-detail-hero-img { order: -1; }
    .ct-detail-section { padding: 28px 24px; }
    .ct-detail-footnav { padding: 22px 24px 32px; }
    .ct-detail-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .ct-detail-topbar { padding: 12px 14px; }
    .ct-detail-hero, .ct-detail-grid, .ct-detail-section, .ct-detail-footnav {
      padding-left: 14px; padding-right: 14px;
    }
    .ct-detail-actions, .ct-prompt-head-actions { width: 100%; }
    .ct-detail-actions .ct-btn, .ct-prompt-head-actions .ct-btn { flex: 1; justify-content: center; }
    .ct-prompt-head { flex-direction: column; align-items: stretch; }
    .ct-prompt-ta { min-height: 280px; font-size: 11.5px; }
    .ct-detail-footnav { flex-direction: column; }
    .ct-detail-footnav .ct-btn { width: 100%; justify-content: center; }
    .ct-ficha { grid-template-columns: 1fr; gap: 4px 0; }
    .ct-ficha dd { margin-bottom: 8px; }
  }

  .ct-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .ct-blog-card {
    display: flex; flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, transform .15s, box-shadow .2s;
  }
  .ct-blog-card:hover {
    border-color: color-mix(in srgb, var(--ink) 25%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .ct-blog-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--bg-2);
  }
  .ct-blog-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .ct-blog-card:hover .ct-blog-thumb img { transform: scale(1.04); }
  .ct-blog-cat {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    background: var(--bg);
    color: var(--ink);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .ct-blog-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
  .ct-blog-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-wrap: balance;
  }
  .ct-blog-title a { color: var(--ink); }
  .ct-blog-title a:hover { color: var(--accent); }
  /* Section + grid */
  .ct-section { margin-bottom: 44px; }
  .ct-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 14px;
  }
  .ct-section-head .ct-kicker { margin-bottom: 4px; }
  .ct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .ct-grid.dense {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Card */
  .ct-card {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .2s, transform .2s;
  }
  .ct-card:hover {
    border-color: color-mix(in srgb, var(--ink) 25%, transparent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .ct-card-preview {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--bg-2);
    overflow: hidden;
    container-type: size;
  }
  .cp-image {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
  }
  .cp-image img {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    transition: transform 4s ease;
    transform: translateY(0);
  }
  .ct-card { cursor: pointer; }
  .ct-card:hover .cp-image img {
    /* Pan from top to bottom: img height − container height */
    transform: translateY(calc(100cqh - 100%));
  }
  @media (hover: none) {
    .ct-card:hover .cp-image img {
      transform: translateY(0) !important;
      transition: none !important;
    }
  }
  .cp-image img {
    object-position: center center !important;
  }
  .ct-overlay {
    position: absolute; inset: 0;
    background: rgba(20,20,30,0.0);
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    pointer-events: none;
  }
  .ct-overlay.on {
    opacity: 1;
    pointer-events: auto;
    background: rgba(20,20,30,0.25);
  }
  .ct-ov-btn.single {
    height: 42px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255,255,255,0.32);
    transition: background .15s, color .15s, border-color .15s, transform .12s;
  }
  .ct-ov-btn.single:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .cp-preview { width: 100%; height: 100%; position: relative; }
  .cp-image { background: var(--bg-2); }
  .cp-image img {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    transition: transform 4s ease;
    transform: translateY(0);
  }
  .ct-card:hover .cp-image img { transform: translateY(calc(100cqh - 100%)); }
  .cp-preview-tag {
    position: absolute; bottom: 6px; left: 6px;
    font-family: var(--font-mono); font-size: 9px;
    background: rgba(0,0,0,0.7); color: white;
    padding: 2px 6px; border-radius: 3px;
    display: flex; align-items: center; gap: 5px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .cp-preview-tag .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

  .ct-badge {
    position: absolute; top: 8px; left: 8px;
    z-index: 2;
    font-family: var(--font-mono); font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ink); color: var(--bg);
  }
  .ct-badge-bestseller, .ct-badge-top { background: var(--accent); color: white; }
  .ct-badge-trending, .ct-badge-tendencia  { background: var(--rose); color: white; }
  .ct-badge-new, .ct-badge-nuevo       { background: var(--green); color: white; }
  .ct-badge-updated, .ct-badge-actualizado   { background: var(--ink); color: var(--bg); }
  .ct-badge-sale, .ct-badge-destacado      { background: var(--amber); color: #1A1208; }
  .ct-badge-popular   { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); }

  .ct-card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }

  .ct-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
  }
  .ct-cat {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ct-compat { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .ct-chip-mini {
    font-size: 10px;
    padding: 1px 6px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink-2);
    font-weight: 500;
  }
  .ct-card-name {
    font-size: 14px;
    font-weight: 700;
    margin: 2px 0 0;
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
  }
  .ct-author { font-size: 12px; color: var(--ink-2); }
  .ct-author a { color: var(--ink); font-weight: 600; }
  .ct-author a:hover { color: var(--accent); }

  .ct-stats-row {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed var(--rule);
    margin-top: 2px;
  }
  .ct-stars {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px;
    color: var(--amber);
  }
  .ct-star.empty { color: var(--rule); }
  .ct-star.half  { color: var(--amber); opacity: 0.6; }
  .ct-rating-num {
    margin-left: 4px;
    font-family: var(--font-mono);
    color: var(--ink-2);
  }
  .ct-sales {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
  }
  .ct-buy-row {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 4px;
  }
  .ct-price {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
  }
  .ct-updated {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-2);
    text-align: right;
  }

  /* Dense card adjustments */
  .ct-card.dense .ct-card-body { padding: 8px 10px; }
  .ct-card.dense .ct-card-name { font-size: 13px; }
  .ct-card.dense .ct-price { font-size: 15px; }
  .ct-card.dense .ct-author { font-size: 11px; }

  /* ────────────────────────────────────────────────────────────────── */
  /* Flash promo */
  /* Banner/flash siempre oscuro, no cambia con el modo claro/oscuro */
  .ct-flash {
    position: relative; overflow: hidden;
    margin: 8px 0 36px;
    border-radius: 12px;
    padding: 28px 32px;
    background: #15151A;
    color: #f2f1ee;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }
  .ct-flash-left { position: relative; z-index: 2; }
  .ct-flash-right { position: relative; z-index: 2; }
  .ct-flash-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--amber); color: #1A1208;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .ct-flash h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .ct-flash p { margin: 0; color: rgba(255,255,255,0.7); font-size: 13px; }
  .ct-flash-bg {
    position: absolute; inset: 0; color: white;
    pointer-events: none;
    width: 100%; height: 100%;
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Dual CTA */
  .ct-dual {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 36px;
  }
  .ct-dual-card {
    position: relative; overflow: hidden;
    border-radius: 12px;
    padding: 28px 28px 28px;
    min-height: 180px;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    border: 1px solid var(--rule);
  }
  .ct-dual-card.dark { background: var(--ink); color: var(--bg); }
  .ct-dual-card.light { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--ink); }
  .ct-dual-tag {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    padding: 4px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.15);
    color: inherit;
    opacity: 0.9;
  }
  .ct-dual-card.light .ct-dual-tag {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
  }
  .ct-dual-card h3 {
    font-size: 22px; font-weight: 700; margin: 4px 0 4px;
    letter-spacing: -0.01em;
  }
  .ct-dual-card p { margin: 0 0 14px; opacity: 0.8; font-size: 14px; max-width: 90%; }
  .ct-dual-bg { position: absolute; inset: 0; pointer-events: none; }
  .ct-bg-stripe {
    position: absolute; width: 240px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
    opacity: 0.4;
    transform: rotate(-12deg);
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Authors */
  .ct-authors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .ct-author-card {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  }
  .ct-author-avatar {
    width: 48px; height: 48px; border-radius: 10px;
    border: 1.5px solid;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    position: relative;
  }
  .ct-author-dot {
    position: absolute; bottom: -3px; right: -3px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--bg);
  }
  .ct-author-name { font-weight: 700; font-size: 15px; }
  .ct-author-meta { font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }
  .ct-author-sales { display: flex; gap: 16px; width: 100%; padding: 8px 0; border-top: 1px dashed var(--rule); margin-top: 4px; }
  .ct-author-sales > span { display: flex; flex-direction: column; }
  .ct-author-sales b { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
  .ct-author-sales i { font-style: normal; font-size: 11px; color: var(--ink-2); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Popular searches */
  .ct-popular { padding: 12px 0; }
  .ct-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .ct-tag {
    font-size: 13px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    transition: border-color .15s, transform .12s, background .15s;
  }
  .ct-tag:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .ct-tag-hash { color: var(--accent); margin-right: 2px; font-family: var(--font-mono); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Author CTA */
  /* CTA siempre oscura, no cambia con el modo claro/oscuro */
  .ct-author-cta {
    margin: 16px 0 56px;
    border-radius: 14px;
    background:
      radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
      #15151A;
    color: #f2f1ee;
    padding: 40px;
    position: relative; overflow: hidden;
  }
  .ct-author-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .ct-author-cta .ct-kicker.on-hero {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #f2f1ee;
  }
  /* La caja del CTA es siempre oscura: el botón ghost necesita fondo blanco
     y texto negro para verse en ambos modos (claro y oscuro).
     El segundo selector sube la especificidad para ganar a
     '.ct-shell.tone-dark .ct-btn.ghost' en modo oscuro. */
  .ct-author-cta .ct-btn.ghost,
  .ct-shell.tone-dark .ct-author-cta .ct-btn.ghost {
    background: #fff;
    color: #15151A;
    border-color: #fff;
  }
  .ct-author-cta .ct-btn.ghost:hover,
  .ct-shell.tone-dark .ct-author-cta .ct-btn.ghost:hover {
    background: #e9e7e0;
    border-color: #e9e7e0;
  }
  .ct-h1-alt {
    font-size: 36px; font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 12px 0 16px;
    text-wrap: balance;
  }
  .ct-author-cta p { color: rgba(255,255,255,0.75); margin: 0 0 22px; max-width: 480px; font-size: 15px; }
  .ct-author-cta-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .ct-bigstat {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .ct-bigstat-n {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    display: block;
    letter-spacing: -0.02em;
  }
  .ct-bigstat-l { font-size: 12px; color: rgba(255,255,255,0.65); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Footer */
  /* El pie es siempre oscuro, no cambia con el modo claro/oscuro */
  .ct-footer {
    background: #15151A;
    color: #f2f1ee;
    padding: 48px 0 24px;
  }
  .ct-footer-top {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr;
    gap: 32px;
  }
  .ct-footer-brand .ct-logo { color: #f2f1ee; }
  .ct-footer-tag { color: rgba(255,255,255,0.7); margin: 16px 0; font-size: 13px; max-width: 280px; }
  .ct-newsletter {
    display: flex; gap: 8px; max-width: 320px;
  }
  .ct-newsletter input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--bg);
    font-size: 13px;
  }
  .ct-newsletter input::placeholder { color: rgba(255,255,255,0.45); }
  .ct-footer-small { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 12px; font-family: var(--font-mono); }
  .ct-footer-col { display: flex; flex-direction: column; gap: 8px; }
  .ct-footer-h {
    font-size: 11px; font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
  }
  .ct-footer-col a { font-size: 13px; color: rgba(255,255,255,0.85); }
  .ct-footer-col a:hover { color: var(--accent); }

  .ct-footer-bot {
    max-width: var(--maxw);
    margin: 32px auto 0;
    padding: 18px 28px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; gap: 18px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-family: var(--font-mono);
  }
  .ct-footer-bot-links { display: flex; gap: 16px; }
  .ct-footer-bot-links a { color: rgba(255,255,255,0.55); }
  .ct-footer-bot-links a:hover { color: #fff; }
  .ct-footer-lang { display: flex; gap: 6px; align-items: center; }

  /* ────────────────────────────────────────────────────────────────── */
  /* Floating cart */
  .ct-fcart {
    position: fixed; bottom: 20px; right: 20px; z-index: 60;
  }
  .ct-fcart-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--ink); color: var(--bg);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    font-weight: 600; font-size: 13px;
    transition: transform .15s;
  }
  .ct-fcart-pill:hover { transform: translateY(-2px); }
  .ct-fcart-total {
    font-family: var(--font-mono);
    background: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
  }
  .ct-fcart-chev { font-size: 10px; opacity: 0.6; }

  .ct-fcart-panel {
    width: 380px;
    background: var(--bg);
    color: var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .ct-fcart-h {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
  }
  .ct-fcart-close { font-size: 22px; color: var(--ink-2); }
  .ct-fcart-list { max-height: 340px; overflow: auto; padding: 8px; }
  .ct-fcart-item {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 10px; align-items: center;
    padding: 8px;
    border-radius: 8px;
  }
  .ct-fcart-item:hover { background: var(--bg-2); }
  .ct-fcart-thumb {
    width: 60px; aspect-ratio: 320/200;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--rule);
  }
  .ct-fcart-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
  .ct-fcart-meta { font-size: 11px; color: var(--ink-2); }
  .ct-fcart-price { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
  .ct-fcart-x { color: var(--ink-2); font-size: 18px; padding: 0 4px; }
  .ct-fcart-x:hover { color: var(--rose); }
  .ct-fcart-foot {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--rule);
    background: var(--bg-2);
  }
  .ct-fcart-totalrow {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; font-size: 14px;
  }
  .ct-fcart-totalrow b { font-family: var(--font-mono); font-size: 18px; }

  /* Dark tone overrides */
  .tone-dark .ct-card { background: var(--bg-2); }
  .tone-dark .ct-cat-tile { background: var(--bg-2); }
  .tone-dark .ct-chip-mini { background: var(--bg-3, var(--bg-2)); }
  .tone-dark .ct-hero {
    background: radial-gradient(70% 90% at 22% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg);
  }

  /* Card style variants (driven by Tweaks) */
  .card-shadow .ct-card { border-color: transparent; box-shadow: var(--shadow-md); }
  .card-shadow .ct-card:hover { box-shadow: var(--shadow-lg); }
  .card-flat .ct-card { border: 0; background: transparent; }
  .card-flat .ct-card:hover { box-shadow: none; transform: none; }
  .card-flat .ct-card .ct-card-body { padding-left: 0; padding-right: 0; }

  /* Tweaks hint */
  .ct-hint {
    position: fixed; top: 80px; right: 24px;
    z-index: 70;
    display: flex; align-items: center; gap: 12px;
    background: var(--ink);
    color: var(--bg);
    padding: 12px 14px 12px 16px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    animation: hintIn .4s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes hintIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ct-hint-body { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.35; min-width: 0; }
  .ct-hint-body b { font-weight: 700; font-size: 13px; }
  .ct-hint-body > span { color: rgba(255,255,255,0.72); }
  .ct-hint-cta {
    background: var(--accent); color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
  }
  .ct-hint-cta:hover { filter: brightness(1.08); }
  .ct-hint-x {
    margin-left: 2px;
    width: 22px; height: 22px;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ct-hint-x:hover { background: rgba(255,255,255,0.08); color: white; }

  /* Persistent FAB to open Tweaks */
  .ct-fab {
    position: fixed;
    bottom: 20px; left: 20px;
    z-index: 65;
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 14px 0 12px;
    background: var(--ink); color: var(--bg);
    border-radius: 999px;
    font-weight: 600; font-size: 13px;
    box-shadow: var(--shadow-lg);
    transition: transform .15s, background .15s;
  }
  .ct-fab:hover { transform: translateY(-2px); }
  .ct-fab.on { background: var(--accent); }
  .ct-fab svg { color: var(--accent); }
  .ct-fab.on svg { color: white; }

  /* Botón flotante de WhatsApp */
  .dp-wa-fab {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 70;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 22px rgba(37,211,102,0.45);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .dp-wa-fab:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(37,211,102,0.55); }
  .dp-wa-fab.dp-left { right: auto; left: 22px; }
  @media (max-width: 600px) {
    .dp-wa-fab { width: 50px; height: 50px; bottom: 16px; right: 16px; }
    .dp-wa-fab.dp-left { right: auto; left: 16px; }
    .dp-wa-fab svg { width: 24px; height: 24px; }
  }

  /* WebChat — widget captador de leads */
  /* La posición y el margen vienen del CRM como estilo inline en .dp-chat.
     Aquí solo dejamos los defaults por si no hay style="" definido. */
  .dp-chat { position: fixed; bottom: 22px; left: 22px; z-index: 71; }
  .dp-chat-launcher {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform .15s ease;
  }
  .dp-chat-launcher:hover { transform: scale(1.08); }
  .dp-chat-launcher .ico-close { display: none; }
  .dp-chat.open .dp-chat-launcher .ico-open { display: none; }
  .dp-chat.open .dp-chat-launcher .ico-close { display: block; }

  .dp-chat-panel {
    position: absolute;
    bottom: 70px; left: 0;
    width: 340px; max-width: calc(100vw - 44px);
    height: 460px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e6e6ef);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  /* FIX: el atributo [hidden] no oculta si CSS impone display:flex; forzamos */
  .dp-chat-panel[hidden],
  .dp-chat-panel.is-closed { display: none !important; }
  /* Posición derecha: el panel se ancla a la derecha del launcher */
  .dp-chat[data-position="right"] .dp-chat-panel { left: auto; right: 0; }
  .dp-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--accent); color: #fff;
  }
  .dp-chat-head strong { font-size: 15px; }
  .dp-chat-head button { color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
  .dp-chat-body {
    flex: 1; overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg, #f7f7fb);
  }
  .dp-msg {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14px; line-height: 1.45;
    white-space: pre-wrap; word-wrap: break-word;
  }
  .dp-msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
  .dp-msg-assistant { align-self: flex-start; background: #fff; color: var(--ink, #1a1a2e); border: 1px solid var(--line, #e6e6ef); border-bottom-left-radius: 4px; }
  .dp-typing { display: flex; gap: 4px; }
  .dp-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #b8b8c8;
    animation: dp-blink 1.2s infinite both;
  }
  .dp-typing span:nth-child(2) { animation-delay: .2s; }
  .dp-typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes dp-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
  .dp-chat-form {
    display: flex; gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--line, #e6e6ef);
    background: #fff;
  }
  .dp-chat-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6e6ef);
    border-radius: 999px;
    font-size: 14px;
  }
  .dp-chat-form input:focus { outline: none; border-color: var(--accent); }
  .dp-chat-form button {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    border-radius: 50%; cursor: pointer;
    flex-shrink: 0;
  }
  @media (max-width: 600px) {
    .dp-chat { bottom: 16px; left: 16px; }
    .dp-chat-launcher { width: 50px; height: 50px; }
    .dp-chat-panel { bottom: 64px; }
  }

  /* Price as Free badge */
  .ct-price { display: inline-flex; align-items: baseline; gap: 6px; }
  .ct-price-free {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    background: var(--accent);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
  }
  .ct-price-eur { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
  .card-flat .ct-price-eur { font-size: 14px; }

  /* Community (Telegram + WhatsApp) */
  .ct-community { margin: 18px 0 10px; max-width: 320px; }
  .ct-community-h {
    display: block;
    font-size: 11px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
  }
  .ct-community-btns { display: flex; flex-direction: column; gap: 8px; }
  .ct-comm-btn {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #f2f1ee;
    font-weight: 600;
    font-size: 13px;
    transition: background .15s, transform .15s, border-color .15s;
    text-decoration: none;
  }
  .ct-comm-btn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
  }
  .ct-comm-btn.tg svg { color: #26A5E4; }
  .ct-comm-btn.wa svg { color: #25D366; }
  .ct-comm-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
  }
  /* Skill generator hero promo */
  .ct-skill-flash {
    display: grid; text-decoration: none;
    background: linear-gradient(135deg, #0E1116 0%, #15151A 60%, #2A1B47 100%);
  }
  .ct-skill-flash:hover { transform: translateY(-1px); transition: transform .15s; }
  .ct-skill-flash .ct-flash-tag {
    background: var(--accent); color: white;
  }
  .ct-flash-url {
    position: absolute; right: 24px; top: 18px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.5);
  }

  /* Skill dual CTA glyph */
  .ct-skill-card { color: var(--bg); overflow: hidden; }
  .ct-skill-card .ct-btn.light { z-index: 2; position: relative; }
  .ct-skill-glyph {
    position: absolute;
    right: -28px; bottom: -36px;
    width: 220px; height: 220px;
    color: var(--accent);
    opacity: 0.7;
    pointer-events: none;
  }
  .ct-dual-card { text-decoration: none; }
  .ct-dual-card:hover { transform: translateY(-2px); transition: transform .2s; }

  /* Nav CTA pill */
  .ct-nav-cta {
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    padding: 4px 10px !important;
    border-radius: 999px;
    font-size: 12px !important;
  }
  .ct-nav-cta:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  /* Hamburger button (hidden on desktop) */
  .ct-burger {
    display: none;
    width: 38px; height: 38px;
    border-radius: 8px;
    align-items: center; justify-content: center;
    color: var(--ink);
    margin-right: 2px;
  }
  .ct-burger:hover { background: var(--bg-2); }

  /* Mobile drawer */
  .ct-drawer {
    position: fixed; inset: 0;
    z-index: 80;
    pointer-events: none;
    visibility: hidden;
  }
  .ct-drawer.on { pointer-events: auto; visibility: visible; }
  .ct-drawer-overlay {
    position: absolute; inset: 0;
    background: rgba(20,20,30,0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s;
  }
  .ct-drawer.on .ct-drawer-overlay { opacity: 1; }
  .ct-drawer-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--bg);
    color: var(--ink);
    display: flex; flex-direction: column;
    box-shadow: 6px 0 24px rgba(20,20,30,0.25);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
  }
  .ct-drawer.on .ct-drawer-panel { transform: translateX(0); }
  .ct-drawer-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
    gap: 12px;
  }
  .ct-drawer-head .ct-logo {
    order: 1;
    flex: 1;
    min-width: 0;
  }
  .ct-drawer-head .ct-drawer-close {
    order: 2;
    flex-shrink: 0;
  }
  .ct-drawer-title {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2);
  }
  .ct-drawer-close {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
  }
  .ct-drawer-close:hover { background: var(--bg-2); color: var(--ink); }
  .ct-drawer-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
  .ct-drawer-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 12px;
    border-radius: 8px;
    font-weight: 600; font-size: 16px;
    color: var(--ink);
  }
  .ct-drawer-nav a:hover { background: var(--bg-2); }
  .ct-drawer-nav a.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .ct-drawer-nav a > span { color: var(--ink-2); font-weight: 400; }
  .ct-drawer-nav.small a { font-size: 13px; padding: 10px 12px; color: var(--ink-2); }
  .ct-drawer-nav.small a:hover { color: var(--ink); }
  .ct-drawer-sec {
    padding: 14px 18px 8px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2);
    border-top: 1px solid var(--rule);
    margin-top: 4px;
  }
  .ct-drawer-foot {
    margin-top: auto;
    padding: 14px 14px 18px;
    border-top: 1px solid var(--rule);
  }
  .ct-drawer-actions {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .ct-drawer-cart {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px;
    background: var(--bg-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-weight: 600; font-size: 14px;
    width: 100%;
    justify-content: center;
    position: relative;
  }
  .ct-drawer-cart:hover { background: var(--bg-3, var(--bg-2)); border-color: var(--ink); }
  .ct-drawer-cart .ct-cart-count {
    position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  }
  @media (max-width: 1280px) {
    .ct-grid { grid-template-columns: repeat(3, 1fr); }
    .ct-grid.dense { grid-template-columns: repeat(4, 1fr); }
    .ct-cats-grid { grid-template-columns: repeat(4, 1fr); }
    .ct-authors { grid-template-columns: repeat(2, 1fr); }
    .ct-footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px; }
    .ct-footer-top .ct-footer-col:nth-child(n+5) { display: none; }
  }
  @media (max-width: 1024px) {
    .ct-nav { display: none; }
    .ct-burger { display: inline-flex; }
    .ct-topbar-row { grid-template-columns: auto auto 1fr auto; gap: 12px; }
    .ct-search { max-width: 340px; }
    /* Smaller floating cards but keep them visible on tablet — centered */
    .ct-hero-stack { height: 380px; transform: scale(0.95); transform-origin: 162px 0px; }
  }
  @media (max-width: 860px) {
    .ct-hero-inner {
      display: flex;
      flex-direction: column;
      padding: 24px 24px 20px;
      gap: 0;
    }
    .ct-hero-text { display: contents; }
    .ct-hero-h1       { order: 2; margin: 0 0 12px; }
    .ct-hero-sub      { order: 3; margin: 0 0 8px; }
    .ct-hero-stack    { order: 4; }
    .ct-hero-ctas     { order: 5; margin: 0; }
    /* Hide kicker pill and stats block on mobile — pure noise */
    .ct-hero-inner > .ct-hero-text > .ct-kicker.on-hero,
    .ct-kicker.on-hero,
    .ct-hero-stats { display: none !important; }

    .ct-hero-h1 { font-size: clamp(32px, 5.5vw, 48px); }
    .ct-main { grid-template-columns: 1fr; gap: 20px; }
    .ct-sidebar { display: none; }
    .ct-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .ct-grid, .ct-grid.dense { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .ct-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ct-dual { grid-template-columns: 1fr; }
    .ct-author-cta-inner { grid-template-columns: 1fr; gap: 24px; }
    .ct-footer-top { grid-template-columns: 1fr 1fr 1fr; }

    /* On mobile: keep only the vibe label inside .cp-preview-tag (drop "PROMPT" + dot) */
    .cp-preview-tag > span:nth-child(1),
    .cp-preview-tag > span.dot { display: none !important; }
    /* Irregular floating stack, tighter so it doesn't leave dead space */
    .ct-hero-stack {
      display: block !important;
      position: relative !important;
      width: calc(100% - 18px);
      height: 190px;
      margin: 8px 9px 14px;
      overflow: visible;
    }
    .ct-hero-stack .ct-float {
      width: 130px !important;
      aspect-ratio: 16/10;
      box-shadow: 0 10px 24px -10px rgba(20,20,30,0.22);
    }
    .ct-hero-stack .ct-float.small { width: 100px !important; }
    /* Hide the PROMPT · vibe label on mobile previews — visually noisy */
    .ct-hero-stack .cp-preview-tag { display: none !important; }
    /* Buttons centered with balanced 9px margins, full-width */
    .ct-hero-ctas {
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin: 4px 9px 0 !important;
      padding: 0;
      width: calc(100% - 18px);
    }
    .ct-hero-ctas .ct-btn {
      display: flex !important;
      width: 100% !important;
      justify-content: center !important;
      text-align: center;
    }
    /* Hero paragraph + title with same 9px gutters */
    .ct-hero-h1, .ct-hero-sub { margin-left: 9px; margin-right: 9px; }
  }
  @media (max-width: 760px) {
    /* Topbar: solo logo (izq) + hamburguesa (der) */
    .ct-topbar-row {
      grid-template-columns: 1fr auto;
      padding: 12px 14px;
      gap: 10px;
    }
    .ct-burger { order: 2; margin-right: 0; }
    .ct-logo { order: 1; }
    .ct-logo-text { font-size: 15px; }
    .ct-search,
    .ct-topbar-actions { display: none; }
    /* Subnav scrolls horizontally instead of overflowing */
    .ct-subnav {
      padding: 6px 14px 10px;
      gap: 12px;
      font-size: 12px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }
    .ct-subnav::-webkit-scrollbar { display: none; }
    .ct-subnav-sep,
    .ct-author-link { display: none; }
  }
  @media (max-width: 760px) {
    .ct-topbar-row { padding: 12px 14px; }
    .ct-subnav { padding: 6px 14px 10px; gap: 12px; font-size: 11px; }
    .ct-cats { padding: 28px 16px 8px; }
    .ct-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ct-cat-tile { padding: 10px; }
    .ct-main { padding: 18px 16px 60px; }
    .ct-grid, .ct-grid.dense { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ct-blog-grid { grid-template-columns: 1fr; gap: 12px; }
    .ct-section { margin-bottom: 32px; }
    .ct-section-head { flex-wrap: wrap; gap: 8px; }
    .ct-h2 { font-size: 18px; }
    .ct-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ct-stat + .ct-stat { border-left: 0; padding-left: 0; }
    .ct-stat { padding-right: 0; }
    .ct-flash, .ct-author-cta { padding: 20px 18px; border-radius: 10px; }
    .ct-flash { grid-template-columns: 1fr; gap: 12px; text-align: left; }
    .ct-flash-right { width: 100%; }
    .ct-flash-right .ct-btn { width: 100%; justify-content: center; }
    .ct-flash h3, .ct-h1-alt { font-size: 22px; }
    .ct-author-cta-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ct-bigstat-n { font-size: 28px; }
    .ct-footer { padding: 36px 0 18px; }
    .ct-footer-top { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 22px; }
    .ct-footer-brand { grid-column: 1 / -1; }
    .ct-footer-bot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px 0; }

    /* Card tweaks for narrow grid */
    .ct-card-body { padding: 10px; gap: 4px; }
    .ct-card-name { font-size: 13px; }
    .ct-author { font-size: 11px; }
    .ct-compat { display: none; }            /* hide chips, room is tight */
    .ct-overlay { display: none; }           /* hover doesn't exist on touch */
    .ct-price-eur { font-size: 14px; }
    /* Stats row — stack stars + descargas vertically so they don't collide */
    .ct-stats-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .ct-buy-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    .ct-updated { display: none; }
    .ct-stats-row { padding-top: 4px; }
    .ct-sales { font-size: 10px; }

    /* Floating cart pill — smaller */
    .ct-fcart-pill { padding: 10px 14px; font-size: 12px; }
    .ct-fcart-panel { width: calc(100vw - 32px); max-width: 380px; }

    .ct-popular { padding: 4px 0; }
    .ct-tag { font-size: 12px; padding: 5px 10px; }
  }
  @media (max-width: 420px) {
    .ct-hero-inner { padding: 28px 16px 22px; }
    .ct-hero-h1 { font-size: 30px; }
    .ct-hero-sub { font-size: 14px; }
    .ct-hero-ctas { flex-direction: column; align-items: stretch; }
    .ct-hero-ctas .ct-btn { width: 100%; justify-content: center; }
    .ct-cats-grid { grid-template-columns: 1fr 1fr; }
    .ct-cat-label { font-size: 12px; }
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Modo oscuro — variables de tema sobre el shell                      */
  /* ────────────────────────────────────────────────────────────────── */
  .ct-shell.tone-dark {
    --bg:   #0D0D10;
    --bg-2: #15151A;
    --bg-3: #1D1D24;
    --ink:  #F2F1EE;
    --ink-2:#A8A8AE;
    --rule: #26262C;
  }
  .ct-shell.tone-dark .ct-card,
  .ct-shell.tone-dark .ct-blog-card { background: var(--bg-2); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Banner de páginas interiores                                        */
  /* ────────────────────────────────────────────────────────────────── */
  .page-banner {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(60% 110% at 18% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
      var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .page-banner-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 44px 28px 36px;
  }
  .page-banner-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 10px;
  }
  .page-banner-title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
  }
  .page-banner-title em { font-style: italic; font-weight: 500; color: var(--accent); }
  .ct-shell.tone-dark .page-banner-title { color: #fff; }
  .page-banner-sub {
    font-size: 15px;
    color: var(--ink-2);
    margin: 12px 0 0;
    max-width: 560px;
    text-wrap: pretty;
  }
  .page-banner-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 14px;
  }
  .page-banner-crumbs a { color: var(--accent); }
  .page-banner-crumbs a:hover { text-decoration: underline; }

  /* Página genérica interior */
  .page-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 36px 28px 80px;
  }
  .page-prose { max-width: 760px; }
  .page-prose h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 32px 0 12px; }
  .page-prose h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
  .page-prose p { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.65; }
  .page-prose ul, .page-prose ol { color: var(--ink-2); font-size: 15px; line-height: 1.65; padding-left: 20px; }
  .page-prose a { color: var(--accent); }
  .page-prose a:hover { text-decoration: underline; }

  /* Directorio de herramientas */
  .dp-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .dp-tool-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-2);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .dp-tool-item:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
  }
  .dp-tool-cat {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .dp-tool-item h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink); }
  .dp-tool-item p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; }
  .dp-tool-go { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; }

  /* Ficha de una herramienta */
  .dp-tool-detail { max-width: 720px; }
  .dp-tool-desc { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 22px; }
  .dp-tool-box {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--bg-2);
    padding: 16px 18px;
    margin-bottom: 24px;
  }
  .dp-tool-box-h {
    display: block;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .dp-tool-box p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .dp-tool-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
  .dp-tool-note {
    margin: 16px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3, #999);
    word-break: break-all;
  }
  /* Ficha de herramienta (post + tutorial + FAQ) */
  .dp-tool-page { max-width: 800px; }
  .dp-tool-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--rule);
    margin-bottom: 28px;
  }
  .dp-tool-body { max-width: 100%; }
  /* Caja CTA oscura (landings: /crms/, /acceso/…) */
  .dp-cta-box {
    margin: 40px 0 0;
    background: #15151A;
    color: #f2f1ee;
    border-radius: 14px;
    padding: 34px 32px;
    text-align: center;
  }
  .dp-cta-box h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
  .dp-cta-box p { color: rgba(255,255,255,0.75); margin: 0 0 18px; max-width: 540px; margin-left: auto; margin-right: auto; }
  .dp-cta-box .ct-btn { margin: 4px; vertical-align: middle; }

  /* ── Embed responsivo (YouTube / vídeo) en fichas y posts ─────────── */
  .dp-yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 18px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #15151A;
    box-shadow: 0 6px 22px -12px rgba(0,0,0,0.25);
  }
  .dp-yt-embed iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }
  .dp-yt-embed-caption {
    display: block; margin: 8px 0 18px;
    font-size: 12.5px; color: var(--ink-2); text-align: center;
  }

  /* ── Rate-limit: banner de bloqueo en la ficha del theme ─────────── */
  .dp-rl-banner {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 16px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--rose) 12%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--rose) 35%, transparent);
    border-left: 4px solid var(--rose);
    border-radius: 12px;
    color: var(--ink);
  }
  .dp-rl-banner-ico { color: var(--rose); flex: 0 0 auto; }
  .dp-rl-banner-body { flex: 1; min-width: 0; }
  .dp-rl-banner-body strong { display: block; font-size: 15px; margin-bottom: 4px; }
  .dp-rl-banner-body p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
  .dp-rl-banner .ct-btn { flex: 0 0 auto; }
  @media (max-width: 700px) {
    .dp-rl-banner { flex-direction: column; align-items: flex-start; }
    .dp-rl-banner .ct-btn { width: 100%; justify-content: center; }
  }
  /* Textarea cuando el prompt está oculto: aspecto bloqueado */
  .ct-prompt-ta.is-blocked {
    background: color-mix(in srgb, var(--rose) 6%, var(--bg-2));
    color: color-mix(in srgb, var(--rose) 80%, var(--ink-2));
    border-color: color-mix(in srgb, var(--rose) 30%, var(--rule));
    font-family: var(--font-mono);
  }
  /* Botones deshabilitados (con disabled o aria-disabled) */
  [data-copy-prompt][disabled],
  [data-copy-prompt][aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed; pointer-events: none;
  }
  /* La caja dp-cta-box es siempre oscura: el botón ghost necesita fondo blanco
     y texto negro para verse en ambos modos (claro y oscuro). */
  .dp-cta-box .ct-btn.ghost,
  .ct-shell.tone-dark .dp-cta-box .ct-btn.ghost {
    background: #fff;
    color: #15151A;
    border-color: #fff;
  }
  .dp-cta-box .ct-btn.ghost:hover,
  .ct-shell.tone-dark .dp-cta-box .ct-btn.ghost:hover {
    background: #e9e7e0;
    border-color: #e9e7e0;
  }
  @media (max-width: 900px) { .dp-tools-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .dp-tools-grid { grid-template-columns: 1fr; } }

  @media (max-width: 760px) {
    .page-banner-inner { padding: 32px 16px 26px; }
    .page-wrap { padding: 28px 16px 60px; }
  }

  /* ────────────────────────────────────────────────────────────────── */
  /* Reveal on scroll                                                    */
  /* ────────────────────────────────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* FICHA DE THEME (página de detalle)                                */
  /* ════════════════════════════════════════════════════════════════ */
  .ct-page-detail { background: var(--bg); }
  .ct-page-detail-inner { max-width: 1200px; margin: 0 auto; padding: 0 0 56px; }
  .ct-page-crumbs {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 28px 6px;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  }
  .ct-page-crumbs a { color: var(--accent); }
  .ct-page-crumbs a:hover { text-decoration: underline; }

  /* 75 / 25 — captura + prompt + sidebar */
  .ct-detail-cols {
    display: grid;
    grid-template-columns: 75% 25%;
    border-top: 1px solid var(--rule);
  }
  .ct-detail-main { padding: 32px 28px; border-right: 1px solid var(--rule); min-width: 0; }
  .ct-detail-side {
    padding: 28px 24px;
    background: color-mix(in srgb, var(--bg-2) 70%, var(--bg));
    display: flex; flex-direction: column; gap: 22px;
  }
  .ct-side-card {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px;
  }
  .ct-side-card-h {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .ct-side-card-h i { color: var(--accent); font-size: 13px; }
  .ct-side-card.dark { background: var(--ink); color: var(--bg); border-color: transparent; }
  /* En modo oscuro --ink/--bg se invierten: la tarjeta «dark» debe seguir siendo oscura con texto claro */
  .ct-shell.tone-dark .ct-side-card.dark { background: var(--bg); color: var(--ink); }
  .ct-side-card.dark .ct-side-card-h { color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.1); }
  .ct-side-card.dark p { margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.45; }

  .ct-ficha-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .ct-ficha-row { display: flex; gap: 10px; align-items: flex-start; }
  .ct-ficha-ico {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
  }
  .ct-ficha-body { min-width: 0; flex: 1; }
  .ct-ficha-row dt {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  }
  .ct-ficha-row dd { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); word-wrap: break-word; }

  .ct-resumen-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .ct-resumen-list li {
    display: grid; grid-template-columns: 22px 1fr; gap: 8px;
    font-size: 12px; line-height: 1.45;
    padding-bottom: 8px; border-bottom: 1px dashed var(--rule);
  }
  .ct-resumen-list li:last-child { border-bottom: 0; }
  .ct-rn { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; padding-top: 1px; }

  /* Toast de copiado */
  .ct-copy-toast {
    position: fixed; top: 35px; right: 35px; z-index: 100;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: var(--accent); color: white;
    border-radius: 12px;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 45%, transparent);
    animation: copyToast .5s cubic-bezier(.2,.7,.2,1) both;
  }
  .ct-copy-toast.out { animation: copyToastOut .35s ease forwards; }
  .ct-copy-toast .tick {
    width: 24px; height: 24px; border-radius: 50%;
    background: white; color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
  }
  @keyframes copyToast { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes copyToastOut { to { opacity: 0; transform: translateX(20px); } }

  .ct-detail-footnav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 24px 28px 4px;
  }

  /* Grid de relacionados */
  .ct-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .ct-card-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
  .ct-card-stats {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 6px; border-top: 1px dashed var(--rule); margin-top: 2px;
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  }
  .ct-card-buy { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
  .ct-card-price { display: inline-flex; align-items: baseline; gap: 6px; }
  .ct-card-price .ct-price-eur { font-size: 15px; }

  @media (max-width: 1024px) {
    .ct-detail-cols { grid-template-columns: 1fr; }
    .ct-detail-main { border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px 20px; }
    .ct-detail-side { padding: 24px 20px; }
    .ct-related-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ct-page-crumbs, .ct-detail-footnav { padding-left: 20px; padding-right: 20px; }
  }
  @media (max-width: 760px) {
    .ct-page-crumbs, .ct-detail-footnav { padding-left: 14px; padding-right: 14px; }
    .ct-detail-footnav { flex-direction: column; }
    .ct-detail-footnav .ct-btn { width: 100%; justify-content: center; }
    .ct-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ct-copy-toast { top: 16px; right: 16px; left: 16px; }
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* LISTADO DE THEMES                                                 */
  /* ════════════════════════════════════════════════════════════════ */
  .ct-listing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .ct-listing-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
  .ct-listing-sort {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2);
  }
  .ct-listing-sort select {
    font: inherit; font-size: 13px;
    padding: 7px 10px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
  }
  .ct-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 60px 20px;
    color: var(--ink-2);
  }
  .ct-empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
  .ct-pagination {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 32px; flex-wrap: wrap;
  }
  .ct-pagination a, .ct-pagination span {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); border-radius: 8px;
    font-family: var(--font-mono); font-size: 13px;
    color: var(--ink-2);
  }
  .ct-pagination a:hover { border-color: var(--ink); color: var(--ink); }
  .ct-pagination .on { background: var(--accent); border-color: var(--accent); color: white; }
  .ct-pagination .disabled { opacity: 0.4; pointer-events: none; }

  /* ════════════════════════════════════════════════════════════════ */
  /* POST DE BLOG                                                      */
  /* ════════════════════════════════════════════════════════════════ */
  .post { max-width: 820px; margin: 0 auto; }
  .post-cover {
    display: block; width: 100%;
    border-radius: 12px;
    border: 1px solid var(--rule);
    margin-bottom: 20px;
  }
  .post-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
  }
  .post .page-prose { max-width: none; }
  .post .page-prose img { max-width: 100%; border-radius: 10px; }
  .post .page-prose blockquote {
    margin: 20px 0; padding: 6px 0 6px 20px;
    border-left: 3px solid var(--accent);
    font-size: 17px; color: var(--ink);
  }
  .post .page-prose code {
    font-family: var(--font-mono); font-size: 13px;
    background: var(--bg-2); border: 1px solid var(--rule);
    border-radius: 4px; padding: 1px 5px;
  }
  .post-foot {
    max-width: 820px; margin: 36px auto 0;
    padding-top: 24px; border-top: 1px solid var(--rule);
  }
  .post-related { margin-top: 48px; }
  .post-related .ct-section-kicker { margin-bottom: 14px; }

  /* Post con barra lateral */
  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
  }
  .post-layout .post { max-width: none; margin: 0; }
  .post-layout .post-foot { max-width: none; }
  .post-side {
    position: sticky; top: 96px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .post-side-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .post-side-theme {
    display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: center;
    color: var(--ink);
  }
  .post-side-theme img {
    width: 68px; aspect-ratio: 16/10; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--rule);
  }
  .post-side-theme-cat {
    display: block;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
  }
  .post-side-theme-name {
    display: block;
    font-weight: 700; font-size: 13px; line-height: 1.3;
    margin-top: 2px;
  }
  .post-side-theme:hover .post-side-theme-name { color: var(--accent); }
  @media (max-width: 1024px) {
    .post-layout { grid-template-columns: 1fr; gap: 32px; }
    .post-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .post-side > .ct-side-card { flex: 1; min-width: 240px; }
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* FORMULARIOS                                                       */
  /* ════════════════════════════════════════════════════════════════ */
  .form-grid { display: grid; gap: 14px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-field { display: flex; flex-direction: column; gap: 6px; }
  .form-field label { font-size: 13px; font-weight: 600; }
  .form-field input,
  .form-field textarea,
  .form-field select {
    font: inherit; font-size: 14px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
  }
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus { outline: none; border-color: var(--accent); background: var(--bg); }
  .form-field textarea { min-height: 150px; resize: vertical; }
  .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-note { font-size: 12px; color: var(--ink-2); }
  .form-note a { color: var(--accent); }

  .alert {
    padding: 12px 14px; border-radius: 8px;
    font-size: 14px; margin-bottom: 18px;
  }
  .alert.ok {
    background: color-mix(in srgb, var(--green) 12%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
    color: var(--green);
  }
  .alert.error {
    background: color-mix(in srgb, var(--rose) 12%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--rose) 35%, transparent);
    color: var(--rose);
  }

  /* Contacto a dos columnas */
  .contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 36px; align-items: start; }
  .contact-info { display: flex; flex-direction: column; gap: 4px; }
  .contact-info-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
  .contact-info-item:last-child { border-bottom: 0; }
  .contact-info-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
  .contact-info-item b { display: block; font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
  @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

  /* ════════════════════════════════════════════════════════════════ */
  /* FAQ (acordeón nativo)                                             */
  /* ════════════════════════════════════════════════════════════════ */
  .faq { max-width: 780px; }
  .faq-item { border-bottom: 1px solid var(--rule); }
  .faq-item summary {
    cursor: pointer; list-style: none;
    padding: 16px 0;
    font-weight: 700; font-size: 15px;
    display: flex; justify-content: space-between; gap: 16px;
    align-items: center;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; color: var(--accent); font-size: 22px; font-weight: 400; line-height: 1; }
  .faq-item[open] summary::after { content: '\2212'; }
  .faq-item summary:hover { color: var(--accent); }
  .faq-item .faq-body { padding: 0 0 16px; }
  .faq-item .faq-body p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

  /* Botón "Me gusta" de la ficha de theme */
  .ct-like-ico { color: var(--rose); font-size: 15px; }
  .ct-btn[data-like] { transition: border-color .15s, color .15s; }
  .ct-btn[data-like].liked { border-color: var(--rose); color: var(--rose); }
  .ct-btn[data-like].liked .ct-like-ico { color: var(--rose); }

  /* ────────────────────────────────────────────────────────────────── */
  /* Diccionario de comandos                                            */
  /* ────────────────────────────────────────────────────────────────── */
  /* .ct-main-comandos hereda el grid (sidebar+content) de .ct-main —
     aquí solo añadimos estilos específicos del listado de comandos.    */
  @media (max-width: 900px) {
    .ct-main-comandos .ct-sidebar-cmd { order: 2; }
  }

  .ct-sidebar-cmd .ct-side-block { margin-bottom: 22px; }
  .ct-sidebar-cmd .ct-side-head {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-2); margin: 0 0 10px;
  }
  .ct-sidebar-cmd .ct-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
  .ct-side-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 7px 10px;
    background: transparent; border: 0; border-radius: 8px;
    text-align: left; color: var(--ink); font-size: 13.5px; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .ct-side-btn em { font-style: normal; font-size: 11px; color: var(--ink-2); }
  .ct-side-btn:hover { background: var(--bg-2); }
  .ct-side-btn.on { background: var(--ink); color: var(--bg); }
  .ct-side-btn.on em { color: color-mix(in srgb, var(--bg) 80%, transparent); }

  .ct-sidebar-cmd .ct-side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .ct-tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--bg-2); color: var(--ink); border: 1px solid transparent;
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .ct-tag-chip em { font-style: normal; opacity: .55; font-size: 11px; }
  .ct-tag-chip:hover { border-color: var(--rule); }
  .ct-tag-chip.on { background: var(--accent); color: #fff; }
  .ct-tag-chip.on em { color: rgba(255,255,255,0.85); }

  /* Etiquetas dentro de la tarjeta */
  .ct-cmd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .ct-cmd-tag {
    font-size: 11px; color: var(--accent);
    font-weight: 600; letter-spacing: 0.01em;
  }


  .ct-comandos-toolbar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    justify-content: space-between;
    margin: 8px 0 22px;
  }
  .ct-comandos-search { display: flex; align-items: center; gap: 12px; flex: 1 1 360px; }
  .ct-comandos-search input[type="search"] {
    flex: 1; height: 42px; padding: 0 14px;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--bg); color: var(--ink); font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
  }
  .ct-comandos-search input[type="search"]:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .ct-comandos-count { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

  .ct-comandos-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .ct-comandos-filters select {
    height: 38px; padding: 0 36px 0 12px; font-size: 13px;
    border: 1px solid var(--rule); border-radius: 8px;
    background: var(--bg); color: var(--ink); cursor: pointer;
  }

  .ct-comandos-views { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
  .ct-vbtn {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
    transition: background .15s, color .15s;
  }
  .ct-vbtn:not(:last-child) { border-right: 1px solid var(--rule); }
  .ct-vbtn:hover { color: var(--ink); }
  .ct-vbtn.on { background: var(--ink); color: var(--bg); }
  .ct-vbtn svg { fill: currentColor; }

  /* Vista cuadrícula */
  .ct-comandos-wrap.grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  /* Vista lista (filas) */
  .ct-comandos-wrap.list { display: flex; flex-direction: column; gap: 10px; }
  .ct-comandos-wrap.list .ct-cmd-card { border-radius: 12px; }
  .ct-comandos-wrap.list .ct-cmd-row-top { padding: 10px 16px; }
  .ct-comandos-wrap.list .ct-cmd-row-bottom { padding: 10px 16px; }
  .ct-comandos-wrap.list .ct-cmd-when p {
    -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ct-comandos-wrap.list .ct-cmd-when-label { display: none; }
  .ct-comandos-wrap.list .ct-cmd-arrow { display: none; }

  /* Tarjeta — estructura común para grid y list */
  .ct-cmd-card {
    border: 1px solid var(--rule); border-radius: 14px;
    background: var(--bg); overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    position: relative;
  }
  .ct-cmd-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
    transform: translateY(-2px);
    box-shadow: 0 6px 24px -12px rgba(0,0,0,0.18);
  }
  .ct-cmd-card-link {
    display: flex; flex-direction: column; gap: 0;
    text-decoration: none; color: inherit; height: 100%;
  }

  /* ── Fila superior: nombre + #etiquetas ── */
  /* Estilo BASE (vista grid): contenedor neutro, sin fondo, nombre y tags
     como antes. La vista grid no se modifica respecto al diseño original. */
  .ct-cmd-row-top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 0;
  }
  .ct-cmd-name {
    margin: 0; font-family: var(--font-mono);
    font-size: 20px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em;
    background: transparent; padding: 0;
  }
  .ct-cmd-row-top .ct-cmd-tags {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
  }
  .ct-cmd-row-top .ct-cmd-tag {
    display: inline-block;
    background: transparent;
    color: var(--accent);
    padding: 0;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  }

  /* Por defecto (GRID): los elementos exclusivos de lista están ocultos */
  .ct-cmd-likes-top { display: none; }
  .ct-cmd-tags-bottom { display: none; }

  /* ── SOLO en vista LISTA: banda gris arriba con nombre + puntuación,
     fila inferior con tipo · cats · descripción · #etiquetas planas ── */
  .ct-comandos-wrap.list .ct-cmd-row-top {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--ink) 7%, var(--bg));
    border-bottom: 1px solid var(--rule);
  }
  .ct-comandos-wrap.list .ct-cmd-name {
    font-size: 16px;
    color: var(--ink);
    background: transparent; padding: 0;
    white-space: nowrap;
  }
  /* En lista: las etiquetas de row-top NO se ven (se muestran al final del row-bottom) */
  .ct-comandos-wrap.list .ct-cmd-row-top .ct-cmd-tags { display: none; }
  /* Puntuación arriba a la derecha */
  .ct-comandos-wrap.list .ct-cmd-likes-top {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: auto;
    color: var(--ink-2);
    font-size: 13px; font-weight: 500;
  }
  .ct-comandos-wrap.list .ct-cmd-likes-top svg { color: var(--accent); }
  /* Footer (likes + flecha) oculto: la puntuación ya está arriba */
  .ct-comandos-wrap.list .ct-cmd-foot { display: none; }
  /* Etiquetas planas al final de la descripción */
  .ct-comandos-wrap.list .ct-cmd-tags-bottom {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0;
    flex: 0 0 auto;
  }
  .ct-comandos-wrap.list .ct-cmd-tags-bottom .ct-cmd-tag {
    background: transparent; padding: 0;
    color: var(--accent); font-weight: 500; font-size: 12px;
  }

  /* ── Fila inferior: tipo · categorías · when · likes ── */
  .ct-cmd-row-bottom {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px;
    flex: 1;
  }
  .ct-cmd-tipo {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
    color: var(--accent); white-space: nowrap;
    flex: 0 0 auto;
  }
  .ct-cmd-tipo.big { font-size: 12px; padding: 4px 11px; }

  .ct-cmd-row-bottom .ct-cmd-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 0 0 auto; }
  .ct-cmd-cat {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    background: var(--bg-2); color: var(--ink-2);
    font-size: 11px; font-weight: 500;
  }

  .ct-cmd-row-bottom .ct-cmd-when {
    flex: 1; min-width: 200px;
    padding: 8px 0 0; border-top: 1px solid var(--rule);
  }
  .ct-cmd-when-label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-2); margin: 0 0 4px;
  }
  .ct-cmd-when p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
  /* En lista: sin separador ni label "Cuándo usarlo" — todo plano en una línea */
  .ct-comandos-wrap.list .ct-cmd-row-bottom .ct-cmd-when {
    padding: 0; border-top: 0;
  }
  .ct-comandos-wrap.list .ct-cmd-when-label { display: none; }

  .ct-cmd-row-bottom .ct-cmd-foot {
    display: inline-flex; align-items: center; gap: 12px;
    margin: 0 0 0 auto;
    padding: 0; border-top: 0;
    font-size: 12px;
    flex: 0 0 auto;
  }
  .ct-cmd-likes { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
  .ct-cmd-likes svg { color: var(--accent); }
  .ct-cmd-arrow { color: var(--accent); font-weight: 600; }

  /* ─── Vista GRID ────────────────────────────────────────────────── */
  /* Padding interno + nombre a la izquierda, puntuación a la derecha */
  .ct-comandos-wrap.grid .ct-cmd-row-top {
    padding: 18px 18px 0;
    align-items: center;
  }
  /* En grid las etiquetas NO van al lado del nombre — bajan tras la descripción */
  .ct-comandos-wrap.grid .ct-cmd-row-top .ct-cmd-tags { display: none; }
  /* Puntuación visible en grid, alineada a la derecha del nombre */
  .ct-comandos-wrap.grid .ct-cmd-likes-top {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: auto;
    color: var(--ink-2);
    font-size: 13px; font-weight: 500;
  }
  .ct-comandos-wrap.grid .ct-cmd-likes-top svg { color: var(--accent); }

  /* Fila inferior: tipo, cats, when, etiquetas, footer — apilados en columna */
  .ct-comandos-wrap.grid .ct-cmd-row-bottom {
    padding: 12px 18px 16px;
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .ct-comandos-wrap.grid .ct-cmd-row-bottom .ct-cmd-when {
    width: 100%; padding-top: 4px;
  }
  /* Etiquetas debajo de la descripción, planas (sin caja) */
  .ct-comandos-wrap.grid .ct-cmd-tags-bottom {
    display: flex; flex-wrap: wrap; gap: 8px;
    width: 100%; margin: 0; padding: 0;
  }
  .ct-comandos-wrap.grid .ct-cmd-tags-bottom .ct-cmd-tag {
    background: transparent; padding: 0;
    color: var(--accent); font-weight: 500; font-size: 11px;
  }
  /* Footer: ya no muestra la estrella (está arriba), solo "Ver ficha →" a la derecha */
  .ct-comandos-wrap.grid .ct-cmd-foot .ct-cmd-likes { display: none; }
  .ct-comandos-wrap.grid .ct-cmd-row-bottom .ct-cmd-foot {
    width: 100%; justify-content: flex-end; margin: 4px 0 0;
    padding-top: 10px; border-top: 1px dashed var(--rule);
  }

  .ct-cmd-empty-results {
    padding: 32px; text-align: center; color: var(--ink-2);
    border: 1px dashed var(--rule); border-radius: 12px;
    margin-top: 12px;
  }
  .ct-cmd-empty-results b { display: block; color: var(--ink); margin-bottom: 4px; }

  /* ── Ficha individual de comando ───────────────────────────────── */
  /* La ficha es un único bloque: reseteamos el grid heredado de .ct-main */
  .ct-main.ct-cmd-detail { display: block; }
  .ct-cmd-detail-grid {
    display: grid; gap: 32px;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  @media (max-width: 1000px) {
    .ct-cmd-detail-grid { grid-template-columns: 1fr; }
  }
  .ct-cmd-detail-head { margin: 0 0 24px; }
  .ct-cmd-detail-cmd {
    margin: 0 0 12px;
    font-family: var(--font-mono); font-size: 40px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--ink);
  }
  .ct-cmd-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; }

  .ct-cmd-section { margin: 0 0 32px; }
  .ct-cmd-section h2 {
    margin: 0 0 14px; font-size: 22px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .ct-cmd-prose { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
  .ct-cmd-prose p { margin: 0 0 12px; }
  .ct-cmd-prose code {
    font-family: var(--font-mono); font-size: 0.92em;
    background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
  }

  .ct-cmd-examples { display: flex; flex-direction: column; gap: 16px; }
  .ct-cmd-example { margin: 0; }
  .ct-cmd-example figcaption {
    font-size: 12px; font-weight: 600; color: var(--ink-2);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 6px;
  }
  /* Párrafo de situación encima del bloque de código de cada ejemplo */
  .ct-cmd-example-narrative {
    margin: 0 0 10px;
    font-size: 15px; line-height: 1.6; color: var(--ink-2);
  }
  .ct-cmd-example-narrative code {
    font-family: var(--font-mono); font-size: 0.92em;
    background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
    color: var(--ink);
  }
  .ct-cmd-when-box .ct-cmd-when-prose p { margin: 0 0 10px; }
  .ct-cmd-when-box .ct-cmd-when-prose p:last-child { margin-bottom: 0; }
  .ct-cmd-when-box .ct-cmd-when-prose code {
    font-family: var(--font-mono); background: rgba(255,255,255,0.5);
    padding: 2px 6px; border-radius: 4px;
  }
  .ct-cmd-code {
    position: relative; background: #15151A; border-radius: 10px;
    overflow: hidden;
  }
  .ct-cmd-code pre {
    margin: 0; padding: 16px 20px; overflow-x: auto;
    color: #f2f1ee; font-family: var(--font-mono); font-size: 13.5px;
    line-height: 1.55;
  }
  .ct-cmd-code code { background: transparent; padding: 0; color: inherit; }
  .ct-cmd-copy {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px;
    background: rgba(255,255,255,0.08); color: #f2f1ee;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background .15s;
  }
  .ct-cmd-copy:hover { background: rgba(255,255,255,0.18); }
  .ct-cmd-copy.copied { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* Bloque "Prompt listo para usar" */
  .ct-cmd-prompt-hint { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
  .ct-cmd-prompt-wrap {
    position: relative; background: #15151A; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
  }
  .ct-cmd-prompt-textarea {
    display: block; width: 100%; min-height: 200px;
    margin: 0; padding: 44px 20px 16px;
    background: transparent; border: none; outline: none; resize: vertical;
    color: #f2f1ee; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
    box-sizing: border-box; cursor: text;
  }
  .ct-cmd-prompt-textarea:focus { outline: none; box-shadow: none; }
  .ct-cmd-prompt-copy { z-index: 1; }

  /* Bloque de comandos relacionados al final de la ficha */
  .ct-cmd-related-intro { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; }
  /* Adaptativo: 2, 3 o 4 columnas según ancho — sin huecos.
     auto-fit (no auto-fill): las pocas tarjetas que haya se reparten todo el ancho. */
  .ct-cmd-related-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ct-cmd-related-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px;
    border: 1px solid var(--rule); border-radius: 12px;
    background: var(--bg);
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
  }
  .ct-cmd-related-card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -10px rgba(0,0,0,0.18);
  }
  .ct-cmd-related-card header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .ct-cmd-related-card h3 {
    margin: 0;
    font-family: var(--font-mono); font-size: 16px; font-weight: 700;
    color: var(--ink);
  }
  .ct-cmd-related-card p {
    margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45;
    flex: 1;
  }
  .ct-cmd-related-cta { font-size: 12px; font-weight: 600; color: var(--accent); }

  .ct-cmd-when-box {
    padding: 18px 20px; background: var(--bg-2);
    border-radius: 12px; border-left: 4px solid var(--accent);
  }
  .ct-cmd-when-box h2 { font-size: 15px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
  .ct-cmd-when-box p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; }

  /* Sidebar de la ficha */
  .ct-cmd-detail-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
  .ct-cmd-likebox {
    padding: 18px; border: 1px solid var(--rule); border-radius: 12px;
    text-align: center; background: var(--bg);
  }
  .ct-cmd-likebtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; padding: 0 18px;
    background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule);
    border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
  }
  .ct-cmd-likebtn:hover { transform: translateY(-1px); }
  .ct-cmd-likebtn.liked { background: var(--accent); border-color: var(--accent); color: #fff; }
  .ct-cmd-likebtn svg { color: currentColor; }
  .ct-cmd-likecount { font-family: var(--font-mono); font-weight: 700; }
  .ct-cmd-likelabel { font-size: 13px; }
  .ct-cmd-views { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); }

  .ct-cmd-ctabox {
    padding: 22px; border-radius: 14px; color: #f2f1ee;
    background:
      radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
      #15151A;
  }
  .ct-cmd-ctabox h3 { margin: 8px 0 6px; font-size: 18px; color: #fff; }
  .ct-cmd-ctabox p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.78); }
  .ct-cmd-ctabox .ct-kicker.on-hero {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #f2f1ee;
  }
  .ct-cmd-backbox { /* solo wrapper */ }

  /* Modo oscuro: el código y el CTA ya tienen colores fijos, los dejamos */
  .ct-shell.tone-dark .ct-cmd-code,
  .ct-shell.tone-dark .ct-cmd-ctabox { /* sin overrides — los hex se mantienen */ }

/* ── Prompt bloqueado (theme de pago) ─────────────────────────── */
.ct-prompt-locked {
  position: relative;
  min-height: 260px;
  border-radius: 12px;
  background: var(--surface-2, #f5f4f1);
  border: 1.5px dashed var(--border, #d8d6d0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ct-prompt-locked-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
}
.ct-prompt-locked-ico {
  font-size: 36px;
  color: var(--ink-2, #9b9992);
  opacity: .55;
}
.ct-prompt-locked-msg {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #9b9992);
}
.dp-buy-banner .dp-rl-banner-ico { color: var(--accent, #e05c2a); }

/* ── Botón de compra: fuente mono igual que .ct-price-free ───── */
.ct-btn-buy { font-family: var(--font-mono); letter-spacing: .02em; }

/* ── Toast "añadido al carrito" ───────────────────────────────── */
.dp-cart-toast {
  position: fixed; bottom: 28px; right: 24px; z-index: 9999;
  background: #1a1a18; color: #f2f1ee;
  border-radius: 14px; padding: 14px 16px 14px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  max-width: 340px; min-width: 260px;
  transform: translateY(16px) scale(.97);
  opacity: 0; transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
  pointer-events: none;
}
.dp-cart-toast.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.dp-cart-toast-ico { color: #ef4444; font-size: 18px; flex-shrink: 0; }
.dp-cart-toast-body { flex: 1; }
.dp-cart-toast-body strong { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; }
.dp-cart-toast-body span  { font-size: 12px; color: rgba(255,255,255,.55); }
.dp-cart-toast-link {
  white-space: nowrap; color: #ef4444; font-weight: 700;
  font-size: 12px; text-decoration: none; padding: 5px 8px;
  border: 1px solid rgba(239,68,68,.4); border-radius: 7px;
  transition: background .15s; flex-shrink: 0;
}
.dp-cart-toast-link:hover { background: rgba(239,68,68,.12); }
.dp-cart-toast-close {
  background: none; border: none; color: rgba(255,255,255,.3);
  cursor: pointer; font-size: 15px; padding: 0 0 0 6px;
  line-height: 1; flex-shrink: 0;
}
.dp-cart-toast-close:hover { color: rgba(255,255,255,.7); }