/* ============================================================
   CUENTITOS – Estilos editoriales y de admin
   Fuentes: Georgia (serif) para títulos, sistema para cuerpo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ============================================================
   VARIABLES PROPIAS
   ============================================================ */
:root {
  --ct-bg:           #faf8f6;
  --ct-bg-card:      #ffffff;
  --ct-text:         #2c2a28;
  --ct-text-soft:    #7a7672;
  --ct-accent:       #c9957a;
  --ct-accent-soft:  #f0e6df;
  --ct-border:       #e8e2dd;
  --ct-serif:        'Lora', Georgia, 'Times New Roman', serif;
  --ct-sans:         'Poppins', system-ui, sans-serif;
  --ct-max-w:        720px;
  --ct-reading-lh:   1.85;

  /* Estados badge */
  --ct-borrador-bg:  #f5f5f0;
  --ct-borrador-fg:  #888;
  --ct-privado-bg:   #eef3fb;
  --ct-privado-fg:   #3a6bc9;
  --ct-publico-bg:   #edf7ee;
  --ct-publico-fg:   #2a7a3b;

  /* Sistema emocional unificado */
  --bg-base:   #fdfaf7;
  --bg-radial: rgba(201, 149, 122, 0.12);
  --acento:    #c9957a;
}

/* ── SISTEMA EMOCIONAL GLOBAL (body[data-emocion]) ─────────── */
body[data-emocion="melancolico"] { --bg-base: #f4f6f8; --bg-radial: rgba(110, 124, 140, 0.15); --acento: #6e7c8c; }
body[data-emocion="tierno"]      { --bg-base: #fdf7f9; --bg-radial: rgba(255, 182, 193, 0.18); --acento: #e89ab0; }
body[data-emocion="intenso"]     { --bg-base: #f7f1f3; --bg-radial: rgba(128,  32,  64, 0.18); --acento: #802040; }
body[data-emocion="reflexivo"]   { --bg-base: #f3f5f3; --bg-radial: rgba(110, 140, 120, 0.18); --acento: #6e8c78; }

/* ============================================================
   LAYOUT PÚBLICO – WRAPPING PAGE
   ============================================================ */
.cuentitos-public {
  background:
    radial-gradient(ellipse at top, var(--bg-radial), transparent 60%),
    var(--bg-base);
  transition: background 0.6s ease;
  font-family: var(--ct-sans);
  color: var(--ct-text);
}

.cuentitos-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEADER PÚBLICO
   ============================================================ */
.cuentitos-site-header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--ct-border);
  background: var(--ct-bg);
}

.cuentitos-back {
  font-size: 0.85rem;
  color: var(--ct-text-soft);
  text-decoration: none;
  transition: color .15s;
}

.cuentitos-back:hover { color: var(--ct-accent-ink, var(--ct-accent)); }

/* ============================================================
   LISTADO – HERO
   ============================================================ */
.cuentitos-listing-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  flex: 1;
}

.cuentitos-listing-hero {
  text-align: center;
  margin-bottom: 56px;
}

.cuentitos-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ct-accent-ink, var(--ct-accent));
  margin-bottom: 8px;
}

.cuentitos-listing-title {
  font-family: var(--ct-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  color: var(--ct-text);
  line-height: 1.1;
  margin-bottom: 16px;
}

.cuentitos-listing-subtitle {
  font-size: 1rem;
  color: var(--ct-text-soft);
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================
   CARDS DE LISTADO
   ============================================================ */
.cuentito-card {
  background: var(--ct-bg-card);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ct-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
  margin-bottom: 32px;
}

.cuentito-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,0,0,.09);
}

.cuentito-card--featured {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cuentito-card--featured {
    grid-template-columns: 1.4fr 1fr;
  }
}

.cuentito-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ct-accent-soft);
}

.cuentito-card--featured .cuentito-card__image {
  aspect-ratio: auto;
  min-height: 220px;
}

.cuentito-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cuentito-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuentito-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cuentito-card__title {
  font-family: var(--ct-serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ct-text);
  margin: 0;
}

.cuentito-card__title a {
  text-decoration: none;
  color: inherit;
}

.cuentito-card__title a:hover {
  color: var(--ct-accent-ink, var(--ct-accent));
}

.cuentito-card__resumen {
  font-size: 0.9rem;
  color: var(--ct-text-soft);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cuentito-card__fecha {
  font-size: 0.78rem;
  color: var(--ct-text-soft);
  letter-spacing: 0.03em;
  margin-top: auto;
  padding-top: 8px;
}

/* Grid de cards normales */
.cuentitos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.cuentitos-grid .cuentito-card {
  margin-bottom: 0;
}

/* ============================================================
   CHIPS: CATEGORÍA Y MOOD
   ============================================================ */
.cuentito-categoria {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--ct-accent-soft);
  color: var(--ct-accent-ink, var(--ct-accent));
  text-transform: uppercase;
}

.cuentito-mood {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--ct-text-soft);
  font-style: italic;
}

.cuentito-mood::before { content: '\2022\00A0'; }

/* ============================================================
   VISTA INDIVIDUAL – ARTÍCULO
   ============================================================ */
/* Background handled by .cuentitos-public + body[data-emocion] vars */

.cuentito-article {
  max-width: var(--ct-max-w);
  margin: 0 auto;
  padding: 0 24px 80px;
}

.cuentito-article__cover {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  max-height: 480px;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

.cuentito-article__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-radial);
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
  border-radius: inherit;
}

.cuentito-article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cuentito-article__inner {
  max-width: var(--ct-max-w);
  margin: 0 auto;
  padding-top: 40px;
}

.cuentito-article__header {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ct-border);
}

.cuentito-article__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-direction: column;
}

.cuentito-article__title {
  font-family: var(--ct-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ct-text);
  margin: 0 0 16px;
}

.cuentito-article__fecha {
  display: block;
  font-size: 0.82rem;
  color: var(--ct-text-soft);
  letter-spacing: 0.04em;
}

/* Compartir cuentito */
.ct-share {
  --ct-share-offset-right: 24px;
  --ct-share-offset-bottom: 24px;
  --ct-share-fab-size: 50px;
  position: fixed;
  right: var(--ct-share-offset-right);
  bottom: var(--ct-share-offset-bottom);
  z-index: 1150;
}

.ct-share-fab {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento, var(--ct-accent)) 42%, white);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--acento, var(--ct-accent)) 92%, #fff),
    color-mix(in srgb, var(--acento, var(--ct-accent)) 80%, #000)
  );
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(33, 20, 12, 0.24);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  padding: 0;
}

.ct-share-fab:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 30px rgba(33, 20, 12, 0.3);
  filter: brightness(1.02);
}

.ct-share-fab:focus-visible {
  outline: 2px solid var(--acento, var(--ct-accent));
  outline-offset: 3px;
}

.ct-share-fab .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.ct-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding:
    0
    max(10px, calc(var(--ct-share-offset-right) - 2px))
    calc(var(--ct-share-offset-bottom) + var(--ct-share-fab-size) + 14px)
    0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ct-share-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ct-share-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ct-share-modal__dialog {
  width: min(390px, calc(100vw - 32px));
  max-height: min(82vh, 520px);
  overflow: auto;
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--ct-border);
  border-top: 3px solid var(--acento, var(--ct-accent));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
  padding: 18px 16px 14px;
  transform: translateY(12px) scale(0.98);
  transition: transform .2s ease;
}

.ct-share-modal.is-open .ct-share-modal__dialog {
  transform: none;
}

.ct-share-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid var(--ct-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ct-text-soft);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ct-share-modal__close .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.ct-share-modal__close:hover {
  color: var(--acento, var(--ct-accent));
  border-color: color-mix(in srgb, var(--acento, var(--ct-accent)) 45%, var(--ct-border));
}

.ct-share__label {
  margin: 0 34px 12px 0;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento, var(--ct-accent));
  font-weight: 600;
}

.ct-share__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ct-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ct-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--acento, var(--ct-accent));
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
  min-height: 38px;
}

.ct-share__btn:hover {
  border-color: color-mix(in srgb, var(--acento, var(--ct-accent)) 45%, var(--ct-border));
  color: var(--acento, var(--ct-accent));
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.ct-share__btn:focus-visible {
  outline: 2px solid var(--acento, var(--ct-accent));
  outline-offset: 2px;
}

.ct-share__btn .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ct-share__btn-label {
  line-height: 1;
}

.ct-share__btn--native,
.ct-share__btn--copy {
  grid-column: 1 / -1;
}

.ct-share__btn--native {
  background: var(--acento, var(--ct-accent));
  border-color: var(--acento, var(--ct-accent));
  color: #fff;
  font-weight: 500;
}

.ct-share__btn--native:hover {
  filter: brightness(0.93);
  color: #fff;
}

.ct-share__btn--copy {
  font-weight: 500;
}

.ct-share__feedback {
  margin: 10px 2px 0;
  min-height: 1.2em;
  font-size: 0.78rem;
  color: var(--acento, var(--ct-accent));
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}

.ct-share__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ct-share__feedback.is-error {
  color: #b2453b;
}

/* ============================================================
   CUERPO DE LECTURA
   ============================================================ */
.cuentito-article__body {
  font-family: var(--ct-serif);
  font-size: 1.05rem;
  line-height: var(--ct-reading-lh);
  color: var(--ct-text);
}

.cuentito-article__body p {
  margin-bottom: 1.5em;
}

.cuentito-article__body h2 {
  font-family: var(--ct-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ct-text);
  margin: 2em 0 0.6em;
}

.cuentito-article__body blockquote {
  border-left: 3px solid var(--acento);
  padding: 12px 0 12px 20px;
  margin: 2em 0;
  font-style: italic;
}
.cuentito-article__body blockquote p{
  margin-bottom: 0px !important;
}
.cuentito-article__body ul,
.cuentito-article__body ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.cuentito-article__body li { margin-bottom: 0.4em; }

.cuentito-article__body a {
  color: var(--acento, var(--ct-accent));
  text-decoration-color: rgba(201, 149, 122, 0.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}

.cuentito-article__body a:hover {
  color: var(--ct-accent-ink, var(--ct-accent));
  text-decoration-color: currentColor;
}

/* ============================================================
   DISCLAIMER IA
   ============================================================ */
.cuentito-disclaimer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px dashed var(--ct-border);
}

.cuentito-disclaimer__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cuentito-disclaimer__icon {
  font-size: 1.2rem;
  color: var(--ct-accent-ink, var(--ct-accent));
  margin-bottom: 4px;
}

.cuentito-disclaimer p {
  font-size: 0.82rem;
  color: var(--ct-text-soft);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.cuentito-intervencion {
  margin-top: 8px;
}

.cuentito-intervencion small {
  font-size: 0.75rem;
  color: var(--ct-text-soft);
}

/* ============================================================
   BADGE DE ESTADO (PRIVADO EN VISTA)
   ============================================================ */
.cuentito-estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.cuentito-estado-badge.estado-borrador {
  background: var(--ct-borrador-bg);
  color: var(--ct-borrador-fg);
}

.cuentito-estado-badge.estado-privado {
  background: var(--ct-privado-bg);
  color: var(--ct-privado-fg);
}

.cuentito-estado-badge.estado-publico {
  background: var(--ct-publico-bg);
  color: var(--ct-publico-fg);
}

/* Dot de estado */
.estado-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.estado-borrador .estado-dot,
.estado-dot.estado-borrador { background: var(--ct-borrador-fg); }
.estado-privado  .estado-dot,
.estado-dot.estado-privado  { background: var(--ct-privado-fg);  }
.estado-publico  .estado-dot,
.estado-dot.estado-publico  { background: var(--ct-publico-fg);  }

/* ============================================================
   NAVEGACIÓN INFERIOR ARTÍCULO
   ============================================================ */
.cuentito-nav-bottom {
  max-width: var(--ct-max-w);
  margin: 0 auto;
  padding: 0 24px 40px;
}

.cuentito-nav-back {
  font-size: 0.88rem;
  color: var(--ct-text-soft);
  text-decoration: none;
  transition: color .15s;
}

.cuentito-nav-back:hover { color: var(--ct-accent-ink, var(--ct-accent)); }

/* ============================================================
   FOOTER PÚBLICO
   ============================================================ */
.cuentitos-site-footer {
  padding: 24px;
  text-align: center;
  border-top: 1px solid var(--ct-border);
  margin-top: auto;
}

.cuentitos-site-footer p {
  font-size: 0.78rem;
  color: var(--ct-text-soft);
  font-style: italic;
}

/* ============================================================
   ESTADO VACÍO
   ============================================================ */
.cuentitos-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--ct-text-soft);
  font-style: italic;
}

/* ============================================================
   ADMIN – HEADER DE SECCIÓN
   ============================================================ */
.cuentitos-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cuentitos-back-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--text-soft, #777);
  text-decoration: none;
  margin-bottom: 4px;
}

.cuentitos-btn-crear {
  display: inline-block;
  background: var(--primary, #e86aa6);
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(232,106,166,.3);
}

/* ============================================================
   ADMIN – FLASH MESSAGES
   ============================================================ */
.cuentitos-flash {
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.cuentitos-flash--ok {
  background: #edf7ee;
  color: #2a7a3b;
  border: 1px solid #b8e0bd;
}

.cuentitos-flash--error {
  background: #fdf0f0;
  color: #c0392b;
  border: 1px solid #f0b8b8;
}

/* ============================================================
   ADMIN – FILTROS
   ============================================================ */
.cuentitos-filtros {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.cuentitos-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-soft, #777);
  background: #f5f5f0;
  border: 1px solid transparent;
  transition: all .15s;
}

.cuentitos-filtro:hover {
  background: var(--accent, #f6c1d1);
  color: var(--text-main, #3a3a3a);
}

.cuentitos-filtro.active {
  background: var(--primary, #e86aa6);
  color: #fff;
  font-weight: 500;
}

/* ============================================================
   ADMIN – CARD DE CUENTITO EN LISTADO
   ============================================================ */
.cuentitos-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cuentito-admin-card {
  padding: 18px 20px;
}

.cuentito-admin-card__top {
  margin-bottom: 12px;
}

.cuentito-admin-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  align-items: center;
}

.cuentito-admin-card__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main, #3a3a3a);
  margin: 0;
}

.cuentito-admin-card__meta {
  font-size: 0.78rem;
  margin-top: 4px;
}

.cuentito-admin-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft, #f1dbe5);
}

.cuentito-estado-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Badges de categoría en admin */
.cuentito-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: #f0ede8;
  color: #888;
}

.cuentito-cat-badge--destacado {
  background: #fff8e6;
  color: #b8860b;
}

/* ============================================================
   ADMIN – BOTONES DE ACCIÓN
   Override sobre form button de app.css
   ============================================================ */
form .cuentito-action-btn,
.cuentito-action-btn {
  display: inline-block !important;
  width: auto !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none;
  cursor: pointer !important;
  border: 1px solid #f1dbe5 !important;
  background: #fff !important;
  color: #3a3a3a !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: background .15s;
}

form .cuentito-action-btn:hover,
.cuentito-action-btn:hover {
  background: #f6c1d1 !important;
  color: #3a3a3a !important;
}

form .cuentito-action-btn--publish,
.cuentito-action-btn--publish {
  background: #edf7ee !important;
  color: #2a7a3b !important;
  border-color: #b8e0bd !important;
}

form .cuentito-action-btn--publish:hover,
.cuentito-action-btn--publish:hover {
  background: #2a7a3b !important;
  color: #fff !important;
}

form .cuentito-action-btn--state,
.cuentito-action-btn--state {
  background: #f8f8f5 !important;
  border-color: #e0ddd8 !important;
}

form .cuentito-action-btn--danger,
.cuentito-action-btn--danger {
  background: #fdf0f0 !important;
  color: #c0392b !important;
  border-color: #f0b8b8 !important;
}

form .cuentito-action-btn--danger:hover,
.cuentito-action-btn--danger:hover {
  background: #c0392b !important;
  color: #fff !important;
}

/* ============================================================
   ADMIN – FORMULARIO CREAR/EDITAR
   Override sobre form input/select/textarea de app.css
   ============================================================ */
.cuentitos-form-card {
  margin-bottom: 0;
}

/* Normalizar inputs dentro del formulario de cuentitos */
.cuentitos-form-card input[type="text"],
.cuentitos-form-card input[type="file"],
.cuentitos-form-card select,
.cuentitos-form-card textarea {
  width: 100%;
  padding: 10px 14px;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid #e0d8d2;
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: var(--ct-sans, 'Poppins', sans-serif);
  background: #fff;
  color: #2c2a28;
  transition: border-color .15s;
  box-sizing: border-box;
}

.cuentitos-form-card input[type="text"]:focus,
.cuentitos-form-card select:focus,
.cuentitos-form-card textarea:focus {
  outline: none;
  border-color: var(--ct-accent, #c9957a);
  box-shadow: 0 0 0 3px rgba(201,149,122,.12);
}

.cuentitos-form-card input[type="file"] {
  padding: 6px 10px;
  font-size: 0.82rem;
  background: #faf8f6;
}

.cuentitos-form-card textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.6;
}

/* El botón guardar: override sobre form button */
form .cuentito-btn-save,
.cuentito-btn-save {
  display: inline-block !important;
  width: auto !important;
  background: var(--primary, #e86aa6) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 26px !important;
  border-radius: 14px !important;
  font-size: 0.93rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(232,106,166,.28) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

form .cuentito-btn-save:hover,
.cuentito-btn-save:hover {
  background: #d85b97 !important;
}

.cuentito-form-group {
  margin-bottom: 18px;
}

.cuentito-form-group label {
  display: block;
  font-size: 0.83rem;
  color: var(--text-soft, #777);
  margin-bottom: 6px;
  font-weight: 500;
}

.cuentito-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.cuentito-form-group--check {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

.cuentito-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-main, #3a3a3a);
  cursor: pointer;
}

.cuentito-check-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.cuentito-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cuentito-btn-save {
  background: var(--primary, #e86aa6);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232,106,166,.3);
  width: auto;
}

.cuentito-btn-save:hover {
  background: #d85b97;
}

.cuentito-btn-cancel {
  font-size: 0.88rem;
  color: var(--text-soft, #777);
  text-decoration: none;
}

/* ============================================================
   EDITOR RICO (contenteditable)
   Override agresivo sobre form button de app.css
   ============================================================ */
.cuentito-editor-wrap {
  border: 1px solid #e0d8d2;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.cuentito-editor-toolbar {
  background: #f8f6f3;
  border-bottom: 1px solid #e8e2dd;
  padding: 8px 12px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

/* Override total sobre form button de app.css */
form .cuentito-editor-toolbar button,
.cuentito-editor-toolbar button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 28px;
  height: 28px;
  background: transparent !important;
  color: #444 !important;
  border: 1px solid transparent !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: background .12s, border-color .12s;
}

form .cuentito-editor-toolbar button:hover,
.cuentito-editor-toolbar button:hover {
  background: #f0e6df !important;
  border-color: #d8c8bf !important;
  color: #2c2a28 !important;
}

.toolbar-sep {
  width: 1px;
  height: 18px;
  background: #e0d8d2;
  margin: 0 5px;
  flex-shrink: 0;
}

.cuentito-editor {
  min-height: 260px;
  max-height: 560px;
  overflow-y: auto;
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #2c2a28;
  outline: none;
  font-family: var(--ct-serif);
  background: #fff;
  cursor: text;
  word-break: break-word;
}

.cuentito-editor:focus {
  background: #fffdfb;
}

.cuentito-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  display: block;
}

/* Estilos del contenido dentro del editor */
.cuentito-editor p     { margin-bottom: 1em; }
.cuentito-editor h2    { font-size: 1.2rem; font-weight: 600; margin: 1.2em 0 0.5em; }
.cuentito-editor blockquote {
  border-left: 3px solid var(--ct-accent, #c9957a);
  padding: 8px 0 8px 16px;
  margin: 1em 0;
  color: #7a7672;
  font-style: italic;
}
.cuentito-editor ul    { padding-left: 1.4em; margin-bottom: 1em; }
.cuentito-editor li    { margin-bottom: 0.3em; }

/* ============================================================
   AUTOSAVE STATUS
   ============================================================ */
.cuentito-autosave-status {
  font-size: 0.75rem;
  color: var(--text-soft, #777);
  margin-top: 6px;
  min-height: 16px;
  transition: opacity .3s;
}

/* ============================================================
   ADMIN – VERSIONES
   ============================================================ */
.cuentito-version-card {
  margin-bottom: 12px;
}

.cuentito-version-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.cuentito-version-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cuentito-version-tipo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cuentito-version-tipo--original { background: #f0ede8; color: #888; }
.cuentito-version-tipo--publica  { background: var(--ct-publico-bg, #edf7ee); color: var(--ct-publico-fg, #2a7a3b); }
.cuentito-version-tipo--light    { background: #eef3fb; color: #3a6bc9; }
.cuentito-version-tipo--mensaje  { background: #fdf0f0; color: #c0392b; }

.cuentito-version-card__preview {
  font-size: 0.87rem;
  color: var(--text-soft, #777);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   IMAGEN PREVIEW EN EDITAR
   ============================================================ */
.cuentito-img-preview {
  margin-bottom: 10px;
}

.cuentito-img-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* ============================================================
   SLUG DISPLAY
   ============================================================ */
.cuentito-slug-display {
  display: block;
  font-family: monospace;
  font-size: 0.82rem;
  background: #f5f5f0;
  padding: 6px 12px;
  border-radius: 8px;
  color: #555;
  margin-top: 4px;
}

/* ============================================================
   HINT DE ESTADO EN FORMULARIO
   ============================================================ */
.cuentito-estado-hint {
  margin-top: 12px;
  font-size: 0.83rem;
  color: var(--ct-accent-ink, var(--ct-accent));
  font-style: italic;
  min-height: 20px;
}

/* ============================================================
   EMPTY ADMIN
   ============================================================ */
.cuentitos-empty-admin {
  text-align: center;
  padding: 32px;
}

/* ============================================================
   DASHBOARD ADMIN – DISEÑO RENOVADO
   ============================================================ */

/* Botón primario (sin heredar .button de app.css) */
a.ca-btn-primary,
button.ca-btn-primary,
.ca-btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  background: var(--primary, #e86aa6) !important;
  color: #fff !important;
  padding: 9px 18px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(232,106,166,.28) !important;
  white-space: nowrap;
  line-height: 1.4 !important;
}

a.ca-btn-primary:hover,
.ca-btn-primary:hover {
  background: #d85b97 !important;
}

/* Header de página */
.ca-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.ca-breadcrumb {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-soft, #777);
  text-decoration: none;
  margin-bottom: 4px;
}
.ca-breadcrumb:hover { color: var(--primary, #e86aa6); }

.ca-page-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 2px;
  line-height: 1.2;
  color: var(--text-main, #3a3a3a);
}

.ca-page-title span { font-size: 1.1rem; }

.ca-page-subtitle {
  font-size: 0.85rem;
  color: var(--text-soft, #777);
  margin: 0;
}

/* Contadores en filtros */
.ca-filtro-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(0,0,0,.07);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.cuentitos-filtro.active .ca-filtro-count {
  background: rgba(255,255,255,.25);
}

/* Vacío mejorado */
.ca-empty {
  text-align: center;
  padding: 40px 24px;
}
.ca-empty__msg {
  color: var(--text-soft, #777);
  font-size: 0.92rem;
}
.ca-empty__msg em { font-style: italic; }

/* Card de cuentito – nuevo diseño */
.ca-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0e8e2;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}

.ca-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
}

.ca-card__main {
  display: flex;
}

/* Barra lateral de estado */
.ca-card__estado-bar {
  width: 4px;
  flex-shrink: 0;
}
.ca-bar--borrador { background: #ccc; }
.ca-bar--privado  { background: #5b8dee; }
.ca-bar--publico  { background: #34a853; }

.ca-card__body {
  flex: 1;
  padding: 16px 18px;
  min-width: 0;
}

.ca-card__top {
  margin-bottom: 12px;
}

.ca-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  align-items: center;
}

.ca-card__title {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main, #3a3a3a);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ca-card__title:hover { color: var(--primary, #e86aa6); }

.ca-card__meta {
  font-size: 0.78rem;
  color: var(--text-soft, #888);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}

.ca-meta-sep { opacity: .4; }

/* Acciones de la card */
.ca-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed #f0e8e2;
}

.ca-card__actions-primary,
.ca-card__actions-states {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

/* Responsive dashboard */
@media (max-width: 600px) {
  .ca-page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .ca-card__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .cuentito-form-row {
    grid-template-columns: 1fr;
  }

  .cuentito-version-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   ANIMACIONES – FADE UP SUAVE
   ============================================================ */
@keyframes ctFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ct-fade-in {
  animation: ctFadeUp 0.65s ease both;
}

/* ============================================================
   HERO – TEXTO INTRODUCTORIO ÍNTIMO
   ============================================================ */
.ct-intro-text {
  max-width: 500px;
  margin: 28px auto 0;
}

.ct-intro-text p {
  font-family: var(--ct-serif);
  font-size: 0.96rem;
  color: var(--ct-text-soft);
  line-height: 1.95;
  font-style: italic;
  margin-bottom: 0.5em;
}

/* ============================================================
   SEPARADOR DECORATIVO  —✦—
   ============================================================ */
.ct-separator {
  display: block;
  text-align: center;
  color: var(--ct-accent-ink, var(--ct-accent));
  font-size: 0.88rem;
  letter-spacing: 0.25em;
  margin: 32px 0;
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   CARD – ENLACE "LEER"
   ============================================================ */
.ct-read-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-family: var(--ct-sans);
  color: var(--ct-accent-ink, var(--ct-accent));
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: gap .2s ease, opacity .2s ease;
  opacity: 0.85;
}

.ct-read-link:hover {
  gap: 10px;
  opacity: 1;
}

/* ============================================================
   ARTÍCULO – FIRMA DE AUTORA
   ============================================================ */
.ct-firma {
  display: block;
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ct-text-soft);
  margin-top: 52px;
  text-align: right;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* ============================================================
   ARTÍCULO – FRASE SUSURRO FINAL
   ============================================================ */
.ct-whisper {
  max-width: var(--ct-max-w);
  margin: 48px auto 0;
  padding: 0 24px 24px;
  text-align: center;
}

.ct-whisper p {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.87rem;
  color: var(--ct-text-soft);
  opacity: 0.65;
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   FOOTER PÚBLICO – VARIANTE ÍNTIMA
   ============================================================ */
.cuentitos-site-footer .ct-footer-text {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ct-text-soft);
  opacity: 0.7;
}

/* ============================================================
   LISTING – ANIMACIÓN STAGGERED EN GRID
   ============================================================ */
.cuentitos-grid .cuentito-card:nth-child(1) { animation-delay: .04s; }
.cuentitos-grid .cuentito-card:nth-child(2) { animation-delay: .11s; }
.cuentitos-grid .cuentito-card:nth-child(3) { animation-delay: .18s; }
.cuentitos-grid .cuentito-card:nth-child(4) { animation-delay: .25s; }
.cuentitos-grid .cuentito-card:nth-child(5) { animation-delay: .32s; }
.cuentitos-grid .cuentito-card:nth-child(6) { animation-delay: .39s; }

/* ============================================================
   MEDIA: prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ct-fade-in,
  .cuentito-card {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   EXPERIENCIA NARRATIVA INMERSIVA
   ============================================================ */

/* ── MODO NOCHE ────────────────────────────────────────────── */
.modo-noche {
  --ct-bg:          #1a1410;
  --ct-bg-card:     #231d18;
  --ct-text:        #f0e8d8;
  --ct-text-soft:   #a89880;
  --ct-border:      #3a2f25;
  --ct-accent:      #d4a574;
  --ct-accent-soft: #3a2a1e;

  /* Tokens EVOLUCIÓN 2026 — dark overrides */
  --ct-paper:          #231d18;
  --ct-paper-raised:   #2a2018;
  --ct-paper-tinted:   #281a10;
  --ct-border-warm:    #3a2f25;
  --ct-border-accent:  color-mix(in srgb, var(--ct-accent) 35%, var(--ct-border));
  --ct-shadow-xs:      0 1px 3px rgba(0,0,0,.22);
  --ct-shadow-sm:      0 2px 8px rgba(0,0,0,.28);
  --ct-shadow-md:      0 6px 24px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.22);
  --ct-shadow-lg:      0 12px 40px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  --ct-shadow-hover:   0 10px 36px rgba(0,0,0,.42), 0 2px 10px rgba(0,0,0,.28);
}

.modo-noche .cuentitos-public    { background: var(--ct-bg); }
.modo-noche .cuentitos-page      { background: var(--ct-bg); }
.modo-noche .cuentito-card       { background: var(--ct-bg-card); border-color: var(--ct-border); }
.modo-noche .cuentitos-site-header { background: var(--ct-bg); border-bottom-color: var(--ct-border); }
.modo-noche .cuentitos-site-footer { border-top-color: var(--ct-border); }
.modo-noche .cuentito-article__header { border-bottom-color: var(--ct-border); }
.modo-noche .cuentito-article__body a {
  color: #f0cda8;
  color: var(--ct-accent-ink-dark, color-mix(in srgb, var(--acento, var(--ct-accent)) 72%, white));
  text-decoration-color: rgba(240, 205, 168, 0.54);
}
.modo-noche .cuentito-article__body a:hover { color: #ffd9b3; }
.modo-noche .personaje-card {
  background: var(--ct-bg-card);
  border-color: var(--ct-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.modo-noche .personaje-card .cuentito-card__image {
  border-color: var(--ct-border);
}
.modo-noche .personaje-card .cuentito-categoria {
  background: var(--ct-accent-soft);
  background: color-mix(in srgb, var(--personaje-acento) 20%, transparent);
  color: var(--personaje-acento-ink-dark);
  border: 1px solid var(--ct-border);
  border-color: color-mix(in srgb, var(--personaje-acento) 35%, var(--ct-border));
}
.modo-noche .personaje-card .cuentito-card__title a:hover,
.modo-noche .personaje-card .ct-read-link {
  color: var(--personaje-acento-ink-dark);
}
.modo-noche .ct-share-fab {
  border-color: color-mix(in srgb, var(--ct-accent) 40%, var(--ct-border));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ct-accent) 75%, #1e1712),
    color-mix(in srgb, var(--ct-accent) 52%, #120d09)
  );
  color: #fff3e2;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.46);
}
.modo-noche .ct-share-modal__backdrop {
  background: transparent;
}
.modo-noche .ct-share-modal__dialog {
  background: linear-gradient(180deg, rgba(32, 25, 20, 0.96), rgba(24, 18, 14, 0.95));
  border-color: var(--ct-border);
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.55);
}
.modo-noche .ct-share-modal__close {
  border-color: var(--ct-border);
  background: rgba(18, 14, 11, 0.88);
  color: var(--ct-text-soft);
}
.modo-noche .ct-share__btn {
  border-color: var(--ct-border);
  background: rgba(26, 20, 16, 0.72);
  color: var(--ct-accent-ink, var(--ct-accent));
}
.modo-noche .ct-share__btn:hover {
  border-color: var(--ct-accent-ink, var(--ct-accent));
  background: rgba(58, 42, 30, 0.62);
  color: #f8dfc4;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
.modo-noche .ct-share__btn--native {
  background: var(--ct-accent);
  border-color: var(--ct-accent-ink, var(--ct-accent));
  color: #1a1410;
}
.modo-noche .ct-share__btn--native:hover { color: #1a1410; }
.modo-noche .ct-share__feedback.is-error { color: #f3a39a; }
.modo-noche .ca-subnav a {
  color: var(--ct-text-soft);
  border-color: var(--ct-border);
  background: rgba(0,0,0,.12);
}
.modo-noche .ca-subnav a.active {
  color: var(--ct-accent-ink, var(--ct-accent));
  border-color: var(--ct-accent-ink, var(--ct-accent));
  background: var(--ct-accent-soft);
}

/* ── Overrides directos para evitar que ct-estado-* gane en bg ── */
.modo-noche .ct-mood-pill {
  background: color-mix(in srgb, var(--acento, var(--ct-accent)) 14%, #231d18);
}
.modo-noche .cuentito-mood {
  background: #2a2018;
  color: var(--ct-text-soft);
  border-color: var(--ct-border);
}
.modo-noche .cuentito-categoria {
  background: color-mix(in srgb, var(--acento, var(--ct-accent)) 18%, #231d18);
  color: color-mix(in srgb, var(--acento, var(--ct-accent)) 80%, white);
  border-color: color-mix(in srgb, var(--acento, var(--ct-accent)) 30%, #3a2f25);
}
.modo-noche .ct-lore-nav {
  background: #2a2018;
}
.modo-noche .ct-lore-nav a:hover,
.modo-noche .ct-lore-nav a.is-active {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
}
.modo-noche .cuentito-article__body blockquote {
  background: color-mix(in srgb, var(--acento, var(--ct-accent)) 10%, #231d18);
}

/* Transición suave al activar/desactivar */
.cuentitos-public,
.cuentitos-public * {
  transition: background-color .5s ease, border-color .4s ease, color .4s ease;
}

/* ── FONDO AURORA ──────────────────────────────────────────── */
.cuentitos-page { position: relative; }

.cuentitos-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    var(--ct-bg)          0%,
    var(--ct-accent-soft) 45%,
    var(--ct-bg)          100%
  );
  background-size: 300% 300%;
  animation: ct-aurora 40s ease infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes ct-aurora {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}

.modo-noche .cuentitos-page::before {
  background: linear-gradient(135deg, #1a1410 0%, #2d1f14 45%, #1a1410 100%);
  background-size: 300% 300%;
}

@media (prefers-reduced-motion: reduce) {
  .cuentitos-page::before { animation: none; background-position: 0% 50%; }
}

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.ct-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}

.ct-reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ct-reveal { opacity: 1; transform: none; }
}

/* ── BARRA DE PROGRESO DE LECTURA ─────────────────────────── */
.ct-reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--ct-accent);
  z-index: 999;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── FECHA NARRATIVA ───────────────────────────────────────── */
.ct-fecha-narrativa {
  display: block;
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ct-text-soft);
  letter-spacing: 0.02em;
  margin-top: 6px;
}

/* ── MOOD PILL EMOCIONAL ───────────────────────────────────── */
.ct-mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  background: var(--ct-accent-soft);
  color: var(--acento, var(--ct-accent));
  margin-bottom: 18px;
  text-transform: lowercase;
}

.ct-mood-pill .icon {
  width: 14px; height: 14px;
  stroke-width: 2; flex-shrink: 0;
}

/* ── DROP CAP ──────────────────────────────────────────────── */
.ct-has-dropcap > p:first-of-type::first-letter {
  font-size: 3.6em;
  float: left;
  line-height: 0.78;
  margin: 0.04em 0.12em 0 0;
  font-family: var(--ct-serif);
  font-weight: 600;
  color: var(--acento, var(--ct-accent));
}

/* ── ANCHO LECTURA OPTIMIZADO ──────────────────────────────── */
.cuentitos-single .cuentito-article       { max-width: 680px; }
.cuentitos-single .cuentito-article__inner { max-width: 680px; }
.cuentitos-single .cuentito-article__body  { font-size: 1.06rem; line-height: 1.82; }
.cuentitos-single .cuentito-article__body p { margin-bottom: 1.6em; }

/* ── BOTÓN AMBIENTE SONORO ─────────────────────────────────── */
.ct-ambiente-btn {
  position: fixed;
  bottom: 28px; right: 88px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ct-border);
  background: var(--ct-bg-card);
  color: var(--ct-text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  transition: color .2s, border-color .2s, transform .15s, box-shadow .2s;
  z-index: 100;
  padding: 0;
  -webkit-appearance: none;
}

.ct-ambiente-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
}

.ct-ambiente-btn.active {
  color: var(--acento, var(--ct-accent));
  border-color: var(--acento, var(--ct-accent));
  background: var(--ct-accent-soft);
}

.ct-ambiente-btn .icon { width: 18px; height: 18px; stroke-width: 1.8; }

/* ── PERSISTENCIA ÍNTIMA ───────────────────────────────────── */
.ct-feelings {
  max-width: 680px;
  margin: 56px auto 0;
  padding: 28px 28px 20px;
  background: var(--ct-bg-card);
  border: 1px solid var(--ct-border);
  border-radius: 16px;
}

.ct-feelings__prompt {
  font-family: var(--ct-serif);
  font-style: italic;
  color: var(--ct-text-soft);
  font-size: 0.9rem;
  margin: 0 0 12px;
  line-height: 1.5;
}

.ct-feelings__input {
  width: 100%;
  min-height: 80px;
  background: var(--ct-bg);
  border: 1px solid var(--ct-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--ct-serif);
  font-size: 0.9rem;
  color: var(--ct-text);
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .2s ease;
}

.ct-feelings__input:focus {
  outline: none;
  border-color: var(--ct-accent-ink, var(--ct-accent));
}

.ct-feelings__input::placeholder {
  color: var(--ct-text-soft);
  font-style: italic;
}

.ct-feelings__saved {
  font-size: 0.75rem;
  color: var(--ct-accent-ink, var(--ct-accent));
  margin: 6px 0 0;
  opacity: 0;
  transition: opacity .3s ease;
  font-style: italic;
}

.ct-feelings__saved.visible { opacity: 1; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ct-ambiente-btn { bottom: 20px; right: 70px; width: 40px; height: 40px; }

  .ct-feelings {
    margin-left: 0; margin-right: 0;
    border-radius: 0;
    border-left: none; border-right: none;
    padding: 20px 16px;
  }

  .ct-mood-pill { font-size: 0.75rem; }
}


/* ============================================================
   CUENTITOS v2 – EXPERIENCIA NARRATIVA INMERSIVA
   ============================================================ */

/* ── A. AMBIENTACIÓN HORARIA ───────────────────────────────── */
/* Madrugada 0–5: más frío y quieto */
.ct-hora-madrugada:not(.modo-noche) {
  --ct-bg:     #f0ece6;
  --ct-accent: #b8845c;
}

/* Mañana 6–12: claro y fresco */
.ct-hora-manana {
  --ct-bg:          #fefdfb;
  --ct-accent:      #c09070;
  --ct-accent-soft: #f5ede5;
}

/* Tarde 13–18: cálido y dorado suave */
.ct-hora-tarde {
  --ct-bg:          #faf6ef;
  --ct-accent:      #c8906a;
  --ct-accent-soft: #f2e4d8;
}

/* Noche 19–23: cubierta por .modo-noche existente */

/* ── B. ESTADOS EMOCIONALES ────────────────────────────────── */
/* --ct-accent-soft ajustado por estado (para aurora bg compat) */
.ct-estado-melancolico { --ct-accent-soft: #e8eef5; }
.ct-estado-tierno      { --ct-accent-soft: #f5eaf0; }
.ct-estado-intenso     { --ct-accent-soft: #f5e8e2; }
.ct-estado-reflexivo   { --ct-accent-soft: #eaf0e6; }

/* Modo noche + estado: specificity 0,2,0 → gana sobre ct-estado-* suelto */
.modo-noche.ct-estado-melancolico { --ct-accent-soft: color-mix(in srgb, #6e7c8c 20%, #1a1410); }
.modo-noche.ct-estado-tierno      { --ct-accent-soft: color-mix(in srgb, #e89ab0 20%, #1a1410); }
.modo-noche.ct-estado-intenso     { --ct-accent-soft: color-mix(in srgb, #802040 20%, #1a1410); }
.modo-noche.ct-estado-reflexivo   { --ct-accent-soft: color-mix(in srgb, #6e8c78 20%, #1a1410); }

/* Barra de progreso usa --acento (definido por body[data-emocion]) */
.ct-reading-progress {
  background: var(--acento, var(--ct-accent));
}

/* Drop cap: color reactivo via --acento (var reemplaza hardcodes) */

/* Aurora tintada sutilmente por estado (solo day mode) */
/* opacity() eliminado: la opacidad base (0.6) ya permite ver el fondo emocional */
.ct-estado-melancolico:not(.modo-noche) .cuentitos-page::before { filter: hue-rotate(200deg) saturate(0.35); }
.ct-estado-tierno:not(.modo-noche)      .cuentitos-page::before { filter: hue-rotate(320deg) saturate(0.40); }
.ct-estado-intenso:not(.modo-noche)     .cuentitos-page::before { filter: hue-rotate(10deg)  saturate(0.50); }
.ct-estado-reflexivo:not(.modo-noche)   .cuentitos-page::before { filter: hue-rotate(90deg)  saturate(0.35); }

/* ── C. MODO LECTURA PROFUNDA ──────────────────────────────── */
.ct-deep-read-btn {
  background: none;
  border: 1px solid var(--ct-border);
  border-radius: 8px;
  padding: 5px 10px 5px 8px;
  color: var(--ct-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ct-sans);
  font-size: 0.75rem;
  transition: color .2s ease, border-color .2s ease;
  line-height: 1;
}

.ct-deep-read-btn:hover,
.ct-deep-read-btn[aria-pressed="true"] {
  color: var(--acento, var(--ct-accent));
  border-color: var(--acento, var(--ct-accent));
}

.ct-deep-read-btn .icon {
  width: 15px; height: 15px;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* Modo activo: ocultar elementos no esenciales */
.ct-deep-read .cuentitos-site-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
}

.ct-deep-read .cuentito-nav-bottom {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.ct-deep-read .cuentitos-site-footer {
  opacity: 0;
  transition: opacity .3s ease;
}

.ct-deep-read .ct-ambiente-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Tipografía más holgada */
.ct-deep-read .cuentito-article__body {
  font-size: 1.04em;
  line-height: 1.9;
  transition: font-size .4s ease, line-height .4s ease;
}

/* Fondo más concentrado */
.ct-deep-read .cuentitos-page::before {
  opacity: 0.12;
  transition: opacity .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ct-deep-read .cuentitos-site-header { transition: none; }
  .ct-deep-read .cuentito-article__body { transition: none; }
}

/* Ocultar label en móvil */
@media (max-width: 480px) {
  .ct-deep-read-label { display: none; }
  .ct-deep-read-btn { padding: 5px 8px; }
}

/* ── D. PAUSAS NARRATIVAS ──────────────────────────────────── */
.ct-pause {
  display: block;
  text-align: center;
  margin: 2.8em auto;
  color: var(--ct-text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.55em;
  opacity: 0.4;
  user-select: none;
}

@media (max-width: 480px) {
  .ct-pause { margin: 2em auto; letter-spacing: 0.4em; }
}

/* ── E. TRANSICIÓN DE SALIDA (listado → individual) ─────────── */
@keyframes ct-fade-out {
  0%   { opacity: 1; filter: blur(0px); }
  100% { opacity: 0; filter: blur(3px); }
}

.ct-exit {
  animation: ct-fade-out 350ms ease forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ct-exit { animation: none; }
}

/* ── F. CIERRE SUAVE ───────────────────────────────────────── */
.ct-whisper {
  text-align: center;
  margin: 52px auto 0;
  max-width: 420px;
  padding: 20px 0 8px;
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ct-text-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.ct-whisper.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ct-whisper { opacity: 1; transform: none; transition: none; }
}

/* ── H. BOTÓN FLOTANTE DE SALIDA DEL MODO LECTURA ─────────── */
.ct-deep-exit-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1010;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--ct-border);
  border-radius: 999px;
  background: var(--ct-bg-card);
  color: var(--ct-text-soft);
  font-family: var(--ct-sans);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, color .2s, border-color .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transform: translateY(-4px);
}

.ct-deep-exit-btn .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.ct-deep-exit-btn:hover {
  color: var(--acento, var(--ct-accent));
  border-color: var(--acento, var(--ct-accent));
}

/* Visible solo en modo lectura profunda */
.ct-deep-read .ct-deep-exit-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .ct-deep-exit-label { display: none; }
}

/* ── I. SECCIÓN "SEGUIR LEYENDO" ───────────────────────────── */
.ct-siguiendo {
  max-width: 680px;
  margin: 48px auto 0;
  padding: 32px 0;
  border-top: 1px solid var(--ct-border);
}

.ct-siguiendo__encabezado {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ct-text-soft);
  letter-spacing: 0.06em;
  margin: 0 0 20px;
  text-align: center;
}

.ct-siguiendo__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--ct-border);
  border-radius: 12px;
  background: var(--ct-bg-card);
  text-decoration: none;
  color: var(--ct-text);
  transition: border-color .2s, transform .2s;
}

.ct-siguiendo__item:hover {
  border-color: var(--acento, var(--ct-accent));
  transform: translateX(4px);
}

.ct-siguiendo__tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ct-text-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

.ct-siguiendo__tag--suggestion {
  color: var(--ct-accent-ink, var(--ct-accent));
}

.ct-siguiendo__titulo {
  flex: 1;
  font-family: var(--ct-serif);
  font-size: 0.95rem;
  color: var(--ct-text);
  text-decoration: none;
}

.ct-siguiendo__titulo:hover {
  color: var(--acento, var(--ct-accent));
}

.ct-siguiendo__arrow {
  color: var(--ct-text-soft);
  flex-shrink: 0;
  font-size: 1rem;
}

.ct-siguiendo__back {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--ct-text-soft);
  text-decoration: none;
  transition: color .2s;
}

.ct-siguiendo__back:hover {
  color: var(--acento, var(--ct-accent));
}

.ct-siguiendo__all-read {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ct-text-soft);
}

@media (max-width: 480px) {
  .ct-siguiendo { padding: 24px 0; }
  .ct-siguiendo__item { padding: 12px 14px; }
}

/* ── J. INDICADOR "YA LEÍDO" EN CARDS DEL LISTADO ─────────── */
.cuentito-card { position: relative; }

.cuentito-card.ct-leido { opacity: 0.68; }

.cuentito-card.ct-leido::after {
  content: 'Le\0000EDdo';
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ct-text-soft);
  background: var(--ct-bg);
  border: 1px solid var(--ct-border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── K. HERO EMOCIONAL (glow + línea acento por estado) ───── */
/* Unified via CSS vars — reemplaza 8 reglas hardcodeadas */
body[data-emocion] .cuentito-article__header {
  background: radial-gradient(ellipse at 50% 0%, var(--bg-radial), transparent 70%);
}

body[data-emocion] .cuentito-article__header::after {
  content: '';
  display: block;
  margin-top: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento, var(--ct-accent)), transparent);
  opacity: 0.4;
}

/* ── L. DROP CAP — ENTRADA ANIMADA (una sola vez) ─────────── */
@keyframes ct-dropcap-entrada {
  0%   { opacity: 0.2; }
  55%  { opacity: 1; text-shadow: 0 0 12px var(--acento, var(--ct-accent)), 0 0 24px var(--ct-accent-soft); }
  100% { opacity: 1; text-shadow: none; }
}

.ct-has-dropcap > p:first-of-type::first-letter {
  animation: ct-dropcap-entrada 1.4s ease-out 0.6s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .ct-has-dropcap > p:first-of-type::first-letter { animation: none; }
}

/* ── M. MICROANIMACIONES NARRATIVAS ────────────────────────── */
/* Revelación secuencial: meta → mood → título → fecha → párrafo */
@keyframes ct-appear-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cuentitos-single .cuentito-article__meta  { animation: ct-appear-up .55s ease both; animation-delay: .05s; }
.cuentitos-single .ct-mood-pill            { animation: ct-appear-up .55s ease both; animation-delay: .15s; }
.cuentitos-single .cuentito-article__title { animation: ct-appear-up .65s ease both; animation-delay: .26s; }
.cuentitos-single .ct-fecha-narrativa      { animation: ct-appear-up .55s ease both; animation-delay: .40s; }
.cuentitos-single .cuentito-article__body > p:first-of-type {
  animation: ct-appear-up .65s ease both;
  animation-delay: .54s;
}

@media (prefers-reduced-motion: reduce) {
  .cuentitos-single .cuentito-article__meta,
  .cuentitos-single .ct-mood-pill,
  .cuentitos-single .cuentito-article__title,
  .cuentitos-single .ct-fecha-narrativa,
  .cuentitos-single .cuentito-article__body > p:first-of-type { animation: none; }
}

/* ============================================================
   LORE DE MARYLAND (personajes + glosario)
   ============================================================ */
.lore-link{
  --lore-link-color:#ff7ad9;
  --lore-link-color-dark:color-mix(in srgb, var(--lore-link-color) 62%, white);
  --lore-link-border:rgba(255,122,217,.5);
  color:var(--lore-link-color);
  font-weight:600;
  cursor:pointer;
  border-bottom:1px dashed var(--lore-link-border);
}

.lore-link:hover{
  color:#e861c5;
  color:color-mix(in srgb, var(--lore-link-color) 78%, black);
}

.modo-noche .lore-link{
  color:var(--lore-link-color-dark);
  border-bottom-color:color-mix(in srgb, var(--lore-link-color-dark) 58%, white);
}

.modo-noche .lore-link:hover{
  color:#ffe3f1;
  color:color-mix(in srgb, var(--lore-link-color-dark) 78%, white);
}

.personajes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}

.personaje-card{
  --personaje-acento: var(--ct-accent);
  --personaje-acento-soft: var(--ct-accent-soft);
  --personaje-acento-ink: var(--ct-accent);
  --personaje-acento-ink-dark: color-mix(in srgb, var(--personaje-acento) 72%, white);
  background: var(--ct-paper-raised, white);
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:.3s;
  border:1px solid var(--ct-border);
  border-top:3px solid var(--personaje-acento);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.personaje-card:hover{
  transform:translateY(-4px);
}

.personaje-card .cuentito-card__image{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--personaje-acento-soft);
}

.personaje-card .cuentito-categoria{
  background:var(--personaje-acento-soft);
  color:var(--personaje-acento-ink);
}

.personaje-card .cuentito-card__title a:hover,
.personaje-card .ct-read-link{
  color:var(--personaje-acento-ink);
}

.ct-lore-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ct-lore-nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--ct-text-soft);
  font-size:.8rem;
  border:1px solid var(--ct-border);
  border-radius:999px;
  padding:5px 12px;
  transition:.2s;
}

.ct-lore-nav a:hover,
.ct-lore-nav a.is-active{
  border-color: var(--ct-accent-ink, var(--ct-accent));
  color: var(--ct-accent-ink, var(--ct-accent));
  background:var(--ct-accent-soft);
}

.ct-lore-nav a .icon,
.ca-subnav a .icon{
  width:14px;
  height:14px;
  stroke-width:1.9;
}

.ct-lore-nav--center{
  justify-content:center;
  margin:20px 0 6px;
}

.ct-lore-modal{
  --ct-lore-modal-accent-ui: var(--ct-accent-ink, var(--ct-accent));
  --ct-lore-modal-on-accent: var(--ct-accent-on, #ffffff);
  position:fixed;
  inset:0;
  background:rgba(24,24,28,.56);
  z-index:1400;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px 14px;
}

.ct-lore-modal.is-open{
  display:flex;
}

.ct-lore-modal__dialog{
  width:min(680px,95vw);
  max-height:88vh;
  overflow:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.97));
  border-radius:20px;
  border:1px solid var(--ct-border);
  border-top:3px solid color-mix(in srgb, var(--ct-lore-modal-accent-ui) 80%, white);
  box-shadow:0 26px 64px rgba(0,0,0,.28);
  padding:26px 24px 20px;
  position:relative;
}

.ct-lore-modal__title{
  font-family:var(--ct-serif);
  margin:0 36px 14px 0;
  font-size:1.6rem;
  line-height:1.2;
  color:var(--ct-text);
}

.ct-lore-modal__close{
  position:absolute;
  right:12px;
  top:12px;
  border:1px solid var(--ct-border);
  background:rgba(255,255,255,.9);
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:1.3rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  color:var(--ct-text-soft);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}

.ct-lore-modal__close:hover{
  color:var(--ct-lore-modal-accent-ui);
}

.ct-lore-modal__body{
  font-family:var(--ct-sans);
  color:var(--ct-text);
}

.ct-lore-modal__body p{
  margin:0 0 10px;
  line-height:1.6;
}

.ct-lore-modal__image{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 12px;
}

.ct-lore-modal__chips{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.ct-lore-modal__section-title{
  margin:14px 0 8px;
  font-size:.96rem;
  color:var(--ct-lore-modal-accent-ui);
}

.ct-lore-modal__list{
  margin:0 0 12px;
  padding-left:16px;
}

.ct-lore-modal__list a{
  color:var(--ct-lore-modal-accent-ui);
  text-decoration-color:rgba(201,149,122,.45);
  text-decoration-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 45%, transparent);
  text-underline-offset:2px;
}

.ct-lore-modal__list a:hover{
  text-decoration-color:currentColor;
}

.ct-lore-modal__list li{
  margin-bottom:6px;
}

.ct-lore-modal__link-wrap{
  margin:12px 0 0;
}

.ct-lore-modal .cuentito-categoria{
  background:var(--ct-accent-soft);
  color:var(--ct-lore-modal-accent-ui);
}

.ct-lore-modal--personaje .ct-lore-modal__dialog{
  width:min(560px,95vw);
  border-top:none;
  border-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 34%, var(--ct-border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--ct-accent-soft) 72%, white), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,.99), rgba(255,255,255,.95));
}

.ct-lore-modal--personaje .ct-lore-modal__title{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.ct-lore-personaje-card{
  display:flex;
  align-items:center;
  gap:16px;
}

.ct-lore-personaje-card__avatar{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid color-mix(in srgb, var(--ct-lore-modal-accent-ui) 42%, white);
  background:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 12%, white);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.ct-lore-personaje-card__avatar--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ct-serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--ct-lore-modal-accent-ui);
}

.ct-lore-personaje-card__content{
  min-width:0;
  flex:1;
}

.ct-lore-personaje-card__name{
  margin:0 0 10px;
  font-family:var(--ct-serif);
  font-size:1.48rem;
  line-height:1.18;
  color:var(--ct-lore-modal-accent-ui);
}

.ct-lore-personaje-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}

.ct-lore-personaje-card__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 10px;
  border:1px solid color-mix(in srgb, var(--ct-lore-modal-accent-ui) 30%, #fff);
  background:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 14%, #fff);
}

.ct-lore-personaje-card__chip-label{
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 80%, #6e5f53);
}

.ct-lore-personaje-card__chip-value{
  font-size:.78rem;
  color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 78%, #2a1c11);
  font-weight:600;
}

.ct-lore-personaje-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:.82rem;
  line-height:1;
  font-weight:600;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb, var(--ct-lore-modal-accent-ui) 38%, #fff);
  background:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 15%, #fff);
  color:var(--ct-lore-modal-accent-ui);
  transition:all .2s ease;
}

.ct-lore-personaje-card__cta:hover{
  background:var(--ct-lore-modal-accent-ui);
  border-color:var(--ct-lore-modal-accent-ui);
  color:var(--ct-lore-modal-on-accent);
  transform:translateY(-1px);
}

.modo-noche .ct-lore-modal{
  --ct-lore-modal-accent-ui:var(--ct-accent-ink-dark, color-mix(in srgb, var(--ct-accent) 72%, white));
  --ct-lore-modal-on-accent:var(--ct-accent-on, #1a1410);
  background:rgba(6,6,8,.72);
}

.modo-noche .ct-lore-modal__dialog{
  background:linear-gradient(180deg, rgba(33,27,22,.97), rgba(24,19,15,.95));
  border-color:var(--ct-border);
  box-shadow:0 28px 72px rgba(0,0,0,.55);
}

.modo-noche .ct-lore-modal__close{
  background:rgba(16,12,10,.86);
  border-color:var(--ct-border);
}

.modo-noche .ct-lore-modal__list a{
  color:var(--ct-lore-modal-accent-ui);
  text-decoration-color:rgba(240,205,168,.56);
  text-decoration-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 56%, white);
}

.modo-noche .ct-lore-modal--personaje .ct-lore-modal__dialog{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--ct-accent-soft) 40%, #211a15), transparent 70%),
    linear-gradient(175deg, rgba(33,27,22,.97), rgba(21,16,13,.96));
}

.modo-noche .ct-lore-personaje-card__avatar{
  border-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 36%, var(--ct-border));
  box-shadow:0 14px 26px rgba(0,0,0,.35);
}

.modo-noche .ct-lore-personaje-card__chip{
  border-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 34%, var(--ct-border));
  background:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 20%, #1f1814);
}

.modo-noche .ct-lore-personaje-card__chip-label{
  color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 68%, white);
}

.modo-noche .ct-lore-personaje-card__chip-value{
  color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 78%, white);
}

.modo-noche .ct-lore-personaje-card__cta{
  border-color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 34%, var(--ct-border));
  background:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 20%, #1f1814);
  color:color-mix(in srgb, var(--ct-lore-modal-accent-ui) 78%, white);
}

.modo-noche .ct-lore-personaje-card__cta:hover{
  color:var(--ct-lore-modal-on-accent);
}

@media (max-width: 560px){
  .ct-lore-personaje-card{
    align-items:flex-start;
    gap:12px;
  }

  .ct-lore-personaje-card__avatar{
    width:78px;
    height:78px;
  }

  .ct-lore-personaje-card__name{
    font-size:1.25rem;
  }

  .ct-lore-personaje-card__meta{
    gap:6px;
  }
}

.ct-relaciones-publicas{
  margin:0 0 14px;
  padding-left:18px;
}

.ct-relaciones-publicas li{
  margin-bottom:7px;
}

.ct-relaciones-publicas__sep{
  margin:0 6px;
  color:var(--ct-text-soft);
}

.ct-relaciones-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.ct-relacion-row{
  display:grid;
  grid-template-columns:minmax(180px, 240px) minmax(200px, 1fr) auto;
  gap:8px;
  align-items:center;
}

.ct-relacion-select,
.ct-relacion-input{
  width:100%;
  min-height:40px;
}

.ct-prompt-pane{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--ct-border);
  border-radius:12px;
  background:var(--ct-bg-card);
}

.ct-prompt-pane__title{
  margin:0 0 12px;
  font-size:1rem;
  color:var(--ct-text);
}

.ct-prompt-select-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ct-prompt-pill{
  --ct-pill-accent: var(--ct-accent);
  --ct-pill-accent-ink: var(--ct-pill-accent);
  --ct-pill-accent-ink-dark: color-mix(in srgb, var(--ct-pill-accent) 72%, white);
  --ct-pill-soft: var(--ct-accent-soft);
  --ct-pill-border: var(--ct-border);
  display:inline-flex;
  position:relative;
}

.ct-prompt-pill input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.ct-prompt-pill__text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ct-border);
  border-radius:999px;
  padding:6px 12px;
  background:var(--ct-bg);
  color:var(--ct-text-soft);
  font-size:.82rem;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
  transition:all .18s ease;
}

.ct-prompt-pill__text:hover{
  border-color:var(--ct-pill-border);
  color:var(--ct-pill-accent-ink);
}

.ct-prompt-pill input:checked + .ct-prompt-pill__text,
.ct-prompt-pill.is-active .ct-prompt-pill__text{
  border-color:var(--ct-pill-border);
  background:var(--ct-pill-soft);
  color:var(--ct-pill-accent-ink);
  font-weight:600;
}

.ct-prompt-pill input:focus-visible + .ct-prompt-pill__text{
  outline:2px solid var(--ct-pill-accent);
  outline-offset:2px;
}

.ct-prompt-pill--neutral{
  --ct-pill-accent: var(--ct-accent);
  --ct-pill-soft: var(--ct-accent-soft);
  --ct-pill-border: var(--ct-border);
}

.ct-prompt-output__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.ct-prompt-output textarea{
  width:100%;
  min-height:360px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.84rem;
  line-height:1.5;
}

.modo-noche .ct-prompt-pane{
  background:var(--ct-bg-card);
  border-color:var(--ct-border);
}

.modo-noche .ct-prompt-pill__text{
  background:rgba(0,0,0,.15);
  border-color:var(--ct-border);
  color:var(--ct-text-soft);
}

.modo-noche .ct-prompt-pill__text:hover{
  border-color:color-mix(in srgb, var(--ct-pill-accent) 38%, var(--ct-border));
  color:var(--ct-pill-accent-ink-dark);
}

.modo-noche .ct-prompt-pill input:checked + .ct-prompt-pill__text,
.modo-noche .ct-prompt-pill.is-active .ct-prompt-pill__text{
  background:color-mix(in srgb, var(--ct-pill-soft) 68%, #231d18);
  border-color:color-mix(in srgb, var(--ct-pill-accent) 38%, var(--ct-border));
  color:var(--ct-pill-accent-ink-dark);
}

@media (max-width: 760px){
  .ct-relacion-row{
    grid-template-columns:1fr;
  }
}

.ct-lore-open{
  overflow:hidden;
}

.ct-share-open{
  overflow:hidden;
}

.ca-subnav{
  display:flex;
  gap:8px;
  margin:8px 0 0;
  flex-wrap:wrap;
}

.ca-subnav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-size:.78rem;
  color:var(--text-soft, #777);
  border:1px solid var(--border-soft, #eee);
  border-radius:999px;
  padding:5px 11px;
}

.ca-subnav a.active{
  color:var(--primary, #e86aa6);
  border-color:rgba(232,106,166,.4);
  background:rgba(232,106,166,.08);
}

@media (max-width: 640px) {
  .ct-share {
    --ct-share-offset-right: 14px;
    --ct-share-offset-bottom: 14px;
    --ct-share-fab-size: 46px;
  }

  .ct-share-fab {
    width: 46px;
    height: 46px;
  }

  .ct-share-modal {
    padding: 12px;
    align-items: flex-end;
    justify-content: flex-end;
    padding:
      0
      max(8px, calc(var(--ct-share-offset-right) - 2px))
      calc(var(--ct-share-offset-bottom) + var(--ct-share-fab-size) + 12px)
      0;
  }

  .ct-share-modal__dialog {
    width: min(420px, calc(100vw - 18px));
    border-radius: 16px;
  }

  .ct-share__actions {
    gap: 6px;
  }

  .ct-share__btn {
    padding: 8px 10px;
    font-size: 0.76rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   EVOLUCIÓN 2026 — Papel vivo · Emoción · Coleccionable
   Appended to cuentitos.css — los tokens emocionales no se tocan
   ════════════════════════════════════════════════════════════════ */

/* ── Nuevos tokens ──────────────────────────────────────────────── */
:root {
  /* Superficies */
  --ct-paper:          #fffcf9;
  --ct-paper-raised:   #ffffff;
  --ct-paper-tinted:   #fdf5ef;

  /* Sombras cálidas */
  --ct-shadow-xs:    0 1px 3px rgba(120, 80, 40, .06);
  --ct-shadow-sm:    0 2px 8px rgba(120, 80, 40, .08);
  --ct-shadow-md:    0 6px 24px rgba(120, 80, 40, .10), 0 1px 4px rgba(120, 80, 40, .06);
  --ct-shadow-lg:    0 12px 40px rgba(120, 80, 40, .12), 0 2px 8px rgba(120, 80, 40, .06);
  --ct-shadow-hover: 0 10px 36px rgba(120, 80, 40, .14), 0 2px 10px rgba(120, 80, 40, .08);

  /* Bordes cálidos */
  --ct-border-warm:   #e6ddd5;
  --ct-border-accent: color-mix(in srgb, var(--ct-accent) 28%, white);

  /* Display font */
  --ct-display: 'Playfair Display', 'Lora', Georgia, serif;

  /* Radios orgánicos */
  --ct-r-card:  22px;
  --ct-r-chip:  999px;
  --ct-r-inner: 12px;

  /* Ornamentos */
  --ct-ornament-color: color-mix(in srgb, var(--ct-accent) 50%, transparent);
}

/* ── Dark overrides para tokens EVOLUCIÓN 2026 — debe ir DESPUÉS de :root ─ */
/* Misma especificidad 0,1,0 que :root; al estar después gana por orden.    */
.modo-noche {
  --ct-paper:          #231d18;
  --ct-paper-raised:   #2a2018;
  --ct-paper-tinted:   #281a10;
  --ct-border-warm:    #3a2f25;
  --ct-border-accent:  color-mix(in srgb, var(--ct-accent) 35%, var(--ct-border));
  --ct-shadow-xs:      0 1px 3px rgba(0,0,0,.22);
  --ct-shadow-sm:      0 2px 8px rgba(0,0,0,.28);
  --ct-shadow-md:      0 6px 24px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.22);
  --ct-shadow-lg:      0 12px 40px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  --ct-shadow-hover:   0 10px 36px rgba(0,0,0,.42), 0 2px 10px rgba(0,0,0,.28);
  --ct-ornament-color: color-mix(in srgb, var(--ct-accent) 40%, transparent);
}

/* ── Hero ornamento ─────────────────────────────────────────────── */
.ct-hero-ornament {
  display: block;
  font-size: 1.25rem;
  color: var(--ct-ornament-color);
  margin-bottom: 0.5rem;
  letter-spacing: 0.3em;
  user-select: none;
}

/* Título principal con Playfair */
.cuentitos-listing-title {
  font-family: var(--ct-display);
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ct-text);
}

/* ── Navegación de sección — "pestañas de diario" ───────────────── */
.ct-lore-nav {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--ct-border-warm);
  padding: 4px;
  border-radius: var(--ct-r-card);
  margin: 1.5rem auto 0;
}

.ct-lore-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ct-text-soft);
  text-decoration: none;
  border: none;
  transition: background .2s ease, color .2s ease;
}

.ct-lore-nav a:hover {
  background: var(--ct-paper-raised);
  color: var(--ct-text);
  border-color: transparent;
}

.ct-lore-nav a.is-active {
  background: var(--ct-paper-raised);
  color: var(--ct-accent-ink, var(--ct-accent));
  box-shadow: var(--ct-shadow-xs);
  border-color: transparent;
}

/* ── Cards — identidad "tarjeta coleccionable" ──────────────────── */
.cuentito-card {
  background: var(--ct-paper-raised);
  border-radius: var(--ct-r-card);
  border: 1.5px solid var(--ct-border-warm);
  box-shadow: var(--ct-shadow-sm);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease, transform .25s ease;
  position: relative;
}

/* Línea de acento emocional en top — visible solo en hover */
.cuentito-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--acento, var(--ct-accent));
  border-radius: var(--ct-r-card) var(--ct-r-card) 0 0;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}

.cuentito-card:hover::before { opacity: 1; }

.cuentito-card:hover {
  box-shadow: var(--ct-shadow-hover);
  border-color: color-mix(in srgb, var(--acento, var(--ct-accent)) 35%, var(--ct-border-warm));
  transform: translateY(-3px);
}

/* Imagen — ratio 4:3 coleccionable */
.cuentito-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ct-accent-soft);
}

.cuentito-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.cuentito-card:hover .cuentito-card__image img {
  transform: scale(1.03);
}

/* Cuerpo */
.cuentito-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Título con Playfair */
.cuentito-card__title a {
  font-family: var(--ct-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ct-text);
  text-decoration: none;
  transition: color .2s ease;
}

.cuentito-card:hover .cuentito-card__title a {
  color: var(--ct-accent-ink, var(--ct-accent));
}

/* Resumen */
.cuentito-card__resumen {
  font-family: var(--ct-serif);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ct-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Footer de card: fecha + leer */
.cuentito-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ct-border-warm);
}

.cuentito-card__fecha {
  font-size: 0.73rem;
  color: var(--ct-text-soft);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* CTA Leer — más delicado */
.ct-read-link {
  font-family: var(--ct-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ct-accent-ink, var(--ct-accent));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s ease, opacity .2s ease;
}

.ct-read-link:hover { gap: 8px; opacity: 0.85; }

/* ── Chips — estética "sticker editorial" ───────────────────────── */
.cuentito-categoria,
.cuentito-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--ct-r-chip);
  font-family: var(--ct-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.cuentito-categoria {
  background: var(--ct-accent-soft);
  color: var(--ct-accent-ink, var(--ct-accent));
  border-color: color-mix(in srgb, var(--ct-accent) 18%, transparent);
}

.cuentito-mood {
  display: inline-block;
  background: var(--ct-paper);
  color: var(--ct-text-soft);
  border-color: var(--ct-border-warm);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cuentito-mood::before {
  content: '·';
  color: var(--acento, var(--ct-accent));
  font-size: 1rem;
  line-height: 0;
  margin-right: 1px;
}

/* ── Card destacada ─────────────────────────────────────────────── */
.cuentito-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 340px;
  border-width: 2px;
}

.cuentito-card--featured .cuentito-card__image {
  aspect-ratio: auto;
  height: 100%;
  min-height: 240px;
}

.cuentito-card--featured .cuentito-card__body {
  padding: 1.75rem;
  justify-content: center;
}

.cuentito-card--featured .cuentito-card__title a {
  font-size: 1.5rem;
}

/* Ornamento de esquina en carta destacada */
.cuentito-card--featured::after {
  content: '✦';
  position: absolute;
  top: 14px; right: 16px;
  font-size: 0.9rem;
  color: var(--ct-ornament-color);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 600px) {
  .cuentito-card--featured {
    grid-template-columns: 1fr;
  }
  .cuentito-card--featured .cuentito-card__image {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ── Grid del listado ───────────────────────────────────────────── */
.cuentitos-grid {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}

.ct-separator {
  margin: 2rem 0 2.5rem;
  font-size: 0.9rem;
  color: var(--ct-ornament-color);
  opacity: 0.9;
}

/* ── Estado vacío ───────────────────────────────────────────────── */
.cuentitos-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--ct-text-soft);
}

.cuentitos-empty::before {
  content: '✦  ·  ✦';
  display: block;
  font-size: 1.1rem;
  color: var(--ct-ornament-color);
  letter-spacing: 0.4em;
  margin-bottom: 1.5rem;
}

.cuentitos-empty p {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.95rem;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ── Badge "leído" (refinado) ───────────────────────────────────── */
.cuentito-card.ct-leido {
  opacity: 0.6;
}

.cuentito-card.ct-leido::after {
  content: '✓ leído';
  position: absolute;
  top: 10px; right: 12px;
  font-size: 0.65rem;
  color: var(--ct-text-soft);
  background: var(--ct-paper);
  border: 1px solid var(--ct-border-warm);
  border-radius: 999px;
  padding: 2px 8px;
  pointer-events: none;
  z-index: 2;
}

/* ── Vista de detalle — portada con viñeta ──────────────────────── */
.cuentito-article__cover {
  border-radius: 0 0 var(--ct-r-card) var(--ct-r-card);
  overflow: hidden;
  max-height: 420px;
  position: relative;
}

.cuentito-article__cover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--bg-base, var(--ct-paper)));
  pointer-events: none;
}

/* ── Cabecera del artículo — centrada con borde punteado ────────── */
.cuentito-article__header {
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--ct-border-warm);
  text-align: center;
}

.cuentito-article__meta {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Mood pill */
.ct-mood-pill {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--acento, var(--ct-accent));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}

/* Título artículo: Playfair Display */
.cuentito-article__title {
  font-family: var(--ct-display);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ct-text);
  margin: 0 0 1rem;
}

/* Fecha narrativa */
.ct-fecha-narrativa {
  font-family: var(--ct-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ct-text-soft);
  letter-spacing: 0.03em;
  opacity: 0.8;
}

/* ── Cuerpo del artículo ────────────────────────────────────────── */
.cuentito-article__body {
  font-family: var(--ct-serif);
  font-size: 1.06rem;
  line-height: var(--ct-reading-lh, 1.85);
  color: var(--ct-text);
}

/* Drop cap libresco con Playfair */
.ct-has-dropcap > p:first-of-type::first-letter {
  font-family: var(--ct-display);
  font-size: 4rem;
  font-weight: 600;
  line-height: 0.8;
  float: left;
  margin: 0.1em 0.12em 0 0;
  color: var(--acento, var(--ct-accent));
}

/* Blockquote editorial */
.cuentito-article__body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--acento, var(--ct-accent));
  background: var(--ct-accent-soft);
  border-radius: 0 var(--ct-r-inner) var(--ct-r-inner) 0;
  font-style: italic;
  color: var(--ct-text);
}

/* ── Firma / cierre del artículo ────────────────────────────────── */
.ct-firma {
  font-family: var(--ct-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ct-text-soft);
  text-align: right;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--ct-border-warm);
  opacity: 0.85;
}

/* ── Navegación entre cuentitos (rediseño) ──────────────────────── */
.ct-siguiendo {
  max-width: var(--ct-max-w, 720px);
  margin: 3rem auto 0;
  padding: 0 clamp(1.25rem, 5vw, 2rem) 4rem;
}

.ct-siguiendo__encabezado {
  font-family: var(--ct-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ct-text-soft);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.ct-siguiendo__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ct-r-inner);
  background: var(--ct-paper-raised);
  border: 1.5px solid var(--ct-border-warm);
  text-decoration: none;
  margin-bottom: 0.6rem;
  color: var(--ct-text);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.ct-siguiendo__item:hover {
  box-shadow: var(--ct-shadow-md);
  border-color: var(--ct-border-accent);
  transform: translateX(3px);
}

.ct-siguiendo__tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ct-accent-ink, var(--ct-accent));
  background: var(--ct-accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ct-siguiendo__titulo {
  flex: 1;
  font-family: var(--ct-serif);
  font-size: 0.95rem;
  color: var(--ct-text);
  line-height: 1.4;
}

.ct-siguiendo__arrow {
  color: var(--ct-accent-ink, var(--ct-accent));
  font-size: 1.1rem;
  transition: transform .2s ease;
  flex-shrink: 0;
}

.ct-siguiendo__item:hover .ct-siguiendo__arrow { transform: translateX(4px); }

.ct-siguiendo__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ct-text-soft);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color .2s ease, gap .2s ease;
}

.ct-siguiendo__back:hover {
  color: var(--ct-accent-ink, var(--ct-accent));
  gap: 10px;
}

/* ── Tokens por categoría de card ───────────────────────────────── */
.ct-card--vivencia  { --acento: var(--ct-accent); }
.ct-card--sueno     { --acento: #9b8ec4; }
.ct-card--maryland  { --acento: #c9957a; }
.ct-card--carta     { --acento: #8aaa8f; }
.ct-card--humor     { --acento: #d4a04a; }
.ct-card--fantasia  { --acento: #a08ec4; }

/* ── Responsive mobile-first ────────────────────────────────────── */
@media (max-width: 480px) {
  .cuentitos-listing-hero  { padding: 2.5rem 1.25rem 1.75rem; }
  .cuentitos-grid          { grid-template-columns: 1fr; gap: 14px; }
  .cuentito-card__body     { padding: 1rem 1.1rem 1.1rem; }
  .cuentito-card__title a  { font-size: 1.08rem; }
  .cuentito-article__title { font-size: 1.6rem; }
  .ct-siguiendo__item      { gap: 0.75rem; padding: 0.85rem 1rem; }
}

@media (max-width: 360px) {
  .cuentito-card--featured .cuentito-card__body { padding: 1rem; }
  .ct-siguiendo__tag    { display: none; }
  .cuentito-card__fecha { display: none; }
}