/* =====================================================================
   CreaTuLibro · Rediseño "Editorial de vanguardia"
   Hoja de estilos de la maqueta. Todo lo global está en :root (tokens).
   Prefijo de clases: ctl-
   ===================================================================== */

/* Tipografías (Google Fonts). En producción, preferir <link> en el <head>:
   https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500&display=swap */

/* ---------- 1. TOKENS GLOBALES ---------- */
:root {
  /* Paleta */
  --ctl-accent: #087f75;          /* Verde petróleo. Primario: botones, links, estados activos */
  --ctl-accent-strong: #06675f;   /* Hover del primario y texto chico sobre fondos claros */
  --ctl-accent-2: #e96a55;        /* Coral. Solo acentos decorativos (filetes, subrayados, formas) */
  --ctl-accent-2-strong: #c4492f; /* Coral oscuro. Fondo de botón con texto blanco */
  --ctl-ink: #153247;             /* Texto principal y bloques oscuros */
  --ctl-muted: #5e6c73;           /* Texto secundario */
  --ctl-canvas: #f7f2e8;          /* Fondo general (papel) */
  --ctl-panel: #fffdf8;           /* Tarjetas, header, footer */
  --ctl-soft: #e7f3ed;            /* Fondos suaves, chips */
  --ctl-line: #d9ded8;            /* Bordes y divisores */

  /* Estados */
  --ctl-success: #087f75;  --ctl-success-bg: #e7f3ed;
  --ctl-error: #b3261e;    --ctl-error-bg: #fbe9e7;
  --ctl-warning: #8a5200;  --ctl-warning-bg: #fff0d9;
  --ctl-info: #1f4e79;     --ctl-info-bg: #e8f0f7;

  /* Tipografía */
  --ctl-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ctl-display: 'Fraunces', Georgia, serif;

  /* Radios */
  --ctl-radius-xs: 5px;   /* marcos "editoriales" (mini-UIs, tapas) */
  --ctl-radius-sm: 8px;   /* inputs, selects, filas */
  --ctl-radius-md: 11px;  /* botones */
  --ctl-radius-lg: 13px;  /* tarjetas y paneles */
  --ctl-radius-xl: 18px;  /* contenedores grandes */

  /* Sombras */
  --ctl-shadow-card: 0 10px 28px rgba(24, 43, 50, .08);
  --ctl-shadow-float: 0 12px 30px rgba(25, 46, 54, .14);
  --ctl-shadow-btn: 0 7px 18px rgba(8, 127, 117, .24);
  --ctl-shadow-offset: 9px 10px 0 rgba(233, 106, 85, .13); /* sombra "desplazada" editorial */

  /* Layout */
  --ctl-max: 1200px;
  --ctl-gutter: 58px;
  --ctl-header-h: 78px;
}
@media (max-width: 860px) { :root { --ctl-gutter: 26px; --ctl-header-h: 68px; } }
@media (max-width: 560px) { :root { --ctl-gutter: 18px; --ctl-header-h: 64px; } }

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ctl-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ctl-ink);
  background:
    radial-gradient(circle at 83% 4%, rgba(8, 127, 117, .10), transparent 28rem),
    radial-gradient(circle at 8% 22%, rgba(233, 106, 85, .06), transparent 22rem),
    var(--ctl-canvas);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ctl-accent-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--ctl-display); font-weight: 500; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ctl-accent) 45%, transparent); outline-offset: 2px; }
[data-lucide], .lucide { width: 18px; height: 18px; stroke-width: 1.9; flex-shrink: 0; }

.ctl-container { width: 100%; max-width: var(--ctl-max); margin-inline: auto; padding-inline: var(--ctl-gutter); }

/* Utilidades que hoy aporta Tailwind y el JS actual usa (mantener) */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 3. HEADER GLOBAL ---------- */
.ctl-topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ctl-panel) 94%, transparent);
  border-bottom: 1px solid var(--ctl-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ctl-topbar-inner { height: var(--ctl-header-h); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.ctl-brand { display: flex; align-items: center; gap: 11px; min-width: max-content; color: var(--ctl-ink); text-decoration: none; }





.ctl-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.ctl-nav a:not(.ctl-primary):not(.ctl-secondary) { color: var(--ctl-ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.ctl-nav a:not(.ctl-primary):not(.ctl-secondary):hover,
.ctl-nav a[aria-current="page"] { border-bottom-color: var(--ctl-accent-2); }
.ctl-nav .ctl-primary { padding: 10px 16px; }

.ctl-user { display: inline-flex; align-items: center; gap: 8px; color: var(--ctl-muted); font-size: 14px; }
.ctl-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-soft); color: var(--ctl-accent-strong); font-weight: 600; font-size: 13px; }

#mobile-menu-button > span { display: grid; place-items: center; }
#mobile-menu-button { display: none; appearance: none; border: 1px solid var(--ctl-line); background: var(--ctl-panel); width: 42px; height: 42px; border-radius: var(--ctl-radius-md); place-items: center; cursor: pointer; }
#mobile-menu { border-top: 1px solid var(--ctl-line); background: var(--ctl-panel); }
#mobile-menu nav { display: grid; gap: 4px; padding: 14px var(--ctl-gutter) 20px; }
#mobile-menu a:not(.ctl-primary):not(.ctl-secondary) { color: var(--ctl-ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ctl-line); font-size: 16px; }
#mobile-menu .ctl-primary, #mobile-menu .ctl-secondary { margin-top: 10px; width: 100%; }

@media (max-width: 960px) {
  .ctl-nav { display: none; }
  #mobile-menu-button { display: grid; }
}
@media (min-width: 961px) { #mobile-menu { display: none !important; } }


/* ---------- 4. BOTONES ---------- */
.ctl-primary, .ctl-secondary, .ctl-ghost, .ctl-coral {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--ctl-radius-md); padding: 13px 20px;
  font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  border: 1px solid transparent; text-align: center;
}
.ctl-primary { color: #fff; background: var(--ctl-accent); border-color: var(--ctl-accent); box-shadow: var(--ctl-shadow-btn); }
.ctl-primary:hover { background: var(--ctl-accent-strong); border-color: var(--ctl-accent-strong); }
@media (hover: hover) { .ctl-primary:hover { transform: translateY(-1px); } }
.ctl-secondary { color: var(--ctl-ink); background: var(--ctl-panel); border-color: var(--ctl-line); }
.ctl-secondary:hover { border-color: color-mix(in srgb, var(--ctl-accent) 50%, var(--ctl-line)); }
.ctl-ghost { color: var(--ctl-accent-strong); background: transparent; padding-inline: 4px; }
.ctl-ghost:hover { text-decoration: underline; }
.ctl-coral { color: #fff; background: var(--ctl-accent-2-strong); border-color: var(--ctl-accent-2-strong); }
.ctl-coral:hover { filter: brightness(.95); }
.ctl-btn-block { width: 100%; }
.ctl-btn-sm { padding: 9px 13px; font-size: 14px; }
.ctl-primary:disabled, .ctl-primary[disabled], .ctl-secondary:disabled, .ctl-secondary[disabled] {
  background: var(--ctl-line); border-color: var(--ctl-line); color: var(--ctl-muted); box-shadow: none; cursor: not-allowed; transform: none;
}
.ctl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 560px) { .ctl-actions > .ctl-primary, .ctl-actions > .ctl-secondary, .ctl-actions > .ctl-coral { width: 100%; } }

/* ---------- 5. TIPOGRAFÍA DE SECCIÓN ---------- */
.ctl-eyebrow, .ctl-section-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ctl-accent-strong); font-size: 12px; line-height: 1.3; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px;
}
.ctl-eyebrow::before, .ctl-section-kicker::before { content: ''; width: 27px; height: 2px; background: var(--ctl-accent-2); flex-shrink: 0; }
.ctl-h1 { font-size: 54px; line-height: 1.03; letter-spacing: -.045em; margin: 0 0 20px; max-width: 640px; }
.ctl-h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 14px; }
.ctl-h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.ctl-lead { font-size: 18px; line-height: 1.55; color: var(--ctl-muted); max-width: 580px; }
.ctl-section-intro { max-width: 720px; color: var(--ctl-muted); font-size: 17px; line-height: 1.55; }
@media (max-width: 860px) { .ctl-h1 { font-size: 42px; } .ctl-h2 { font-size: 34px; } }
@media (max-width: 560px) { .ctl-h1 { font-size: 36px; } .ctl-h2 { font-size: 30px; } .ctl-lead { font-size: 16px; } }

/* ---------- 6. SECCIONES ---------- */
.ctl-section { padding-block: 84px; border-top: 1px solid var(--ctl-line); position: relative; overflow: hidden; overflow: clip; /* clip: no rompe position:sticky */ }
.ctl-section--rule { background-image: linear-gradient(90deg, transparent 49.95%, color-mix(in srgb, var(--ctl-line) 44%, transparent) 50%, transparent 50.05%); }
.ctl-section--panel { background-color: var(--ctl-panel); }
.ctl-section--soft { background-color: var(--ctl-soft); }



@media (max-width: 860px) { .ctl-section { padding-block: 60px; } }
@media (max-width: 560px) { .ctl-section { padding-block: 46px; } }

/* ---------- 7. HERO (Inicio) ---------- */
.ctl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: 42px; padding-block: 72px 52px; position: relative; }
.ctl-hero-copy { position: relative; z-index: 2; max-width: 620px; }
.ctl-hero-copy .ctl-lead { margin-bottom: 28px; }
.ctl-hero-art { min-height: 410px; position: relative; display: grid; place-items: center; }
.ctl-orbit { position: absolute; inset: 6% 0 0 8%; border-radius: 46% 54% 49% 51%; background: color-mix(in srgb, var(--ctl-accent) 13%, var(--ctl-panel)); transform: rotate(-4deg); }
.ctl-book-shadow { position: absolute; width: 280px; height: 40px; bottom: 20px; border-radius: 50%; background: rgba(24, 42, 48, .18); filter: blur(12px); transform: rotate(-5deg); transition: transform .35s ease, opacity .35s ease; }
.ctl-book {
  width: 258px; height: 346px; border-radius: 9px 18px 18px 9px;
  background: linear-gradient(145deg, var(--ctl-accent), color-mix(in srgb, var(--ctl-accent) 72%, #102841));
  color: #fff; padding: 29px 25px; position: relative; transform: rotate(-6deg);
  box-shadow: 20px 24px 40px rgba(26, 39, 48, .28), inset 9px 0 0 rgba(255, 255, 255, .12);
  overflow: hidden; transition: transform .35s ease, box-shadow .35s ease;
}
.ctl-float-note {
  position: absolute; display: flex; align-items: center; gap: 9px;
  background: var(--ctl-panel); border: 1px solid var(--ctl-line); padding: 11px 14px;
  border-radius: var(--ctl-radius-lg); box-shadow: var(--ctl-shadow-float);
  font-size: 13px; font-weight: 500; transition: transform .3s ease;
}
.ctl-float-note [data-lucide], .ctl-float-note .lucide { color: var(--ctl-accent); }
.ctl-note-a { right: 0; top: 43px; transform: rotate(2deg); }
.ctl-note-b { left: 0; bottom: 68px; transform: rotate(-2deg); }
@media (hover: hover) {
  .ctl-hero-art:hover .ctl-book { transform: rotate(-2deg) translateY(-9px); box-shadow: 26px 32px 48px rgba(26, 39, 48, .32), inset 9px 0 0 rgba(255, 255, 255, .12); }
  .ctl-hero-art:hover .ctl-book-shadow { transform: rotate(-5deg) scaleX(.92); opacity: .75; }
  .ctl-hero-art:hover .ctl-note-a { transform: rotate(0) translateY(-5px); }
  .ctl-hero-art:hover .ctl-note-b { transform: rotate(0) translateY(4px); }
}
/* Cuando JS anima el hero (ver index.twig), la transición CSS se desactiva para no interferir */
.ctl-hero-art.js-driven { perspective: 1100px; }
.ctl-hero-art.js-driven .ctl-book,
.ctl-hero-art.js-driven .ctl-book-shadow,
.ctl-hero-art.js-driven .ctl-float-note { transition: none !important; }

/* Variante con foto (Cómo funciona) */
.ctl-photo-frame { position: relative; width: min(100%, 470px); }
.ctl-photo-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ctl-radius-xs); box-shadow: 18px 20px 0 color-mix(in srgb, var(--ctl-accent) 16%, transparent); transform: rotate(-1.5deg); }
.ctl-photo-frame .ctl-float-note { bottom: -18px; left: -14px; right: auto; top: auto; transform: rotate(-2deg); }

@media (max-width: 860px) {
  .ctl-hero { grid-template-columns: 1fr; padding-block: 44px 28px; }
  .ctl-hero-art { min-height: 380px; }
}
@media (max-width: 560px) {
  .ctl-hero-art { transform: scale(.88); margin: -18px -22px; }
}

/* ---------- 8. BANDA DE DATOS CLAVE ---------- */
.ctl-benefit-band { border-top: 1px solid var(--ctl-line); border-bottom: 1px solid var(--ctl-line); background: var(--ctl-panel); }
.ctl-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ctl-benefit { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 26px 28px; align-items: start; }
.ctl-benefit + .ctl-benefit { border-left: 1px solid var(--ctl-line); }
.ctl-benefit > [data-lucide], .ctl-benefit > .lucide { width: 27px; height: 27px; color: var(--ctl-accent); }
.ctl-benefit strong { display: block; font-family: var(--ctl-display); font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.ctl-benefit span { display: block; color: var(--ctl-muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 860px) {
  .ctl-benefit-grid { grid-template-columns: 1fr; }
  .ctl-benefit + .ctl-benefit { border-left: 0; border-top: 1px solid var(--ctl-line); }
  .ctl-benefit { padding: 20px 0; }
}

/* ---------- 9. CÓMO FUNCIONA (3 pasos con mini-interfaces) ---------- */
.ctl-how { background-color: color-mix(in srgb, var(--ctl-panel) 80%, var(--ctl-canvas)); }




.ctl-how-num { font-family: var(--ctl-display); color: color-mix(in srgb, var(--ctl-accent) 30%, var(--ctl-canvas)); font-size: 60px; line-height: .8; letter-spacing: -.07em; }










.ctl-mini-meter { margin-top: 10px; height: 6px; border-radius: 99px; background: var(--ctl-line); overflow: hidden; }
.ctl-mini-meter span { display: block; height: 100%; background: var(--ctl-accent); border-radius: 99px; }













@media (max-width: 560px) {  .ctl-how-num { font-size: 48px; } }

/* ---------- 10. RESULTADO (bloque oscuro con libro + índice) ---------- */

















/* ---------- 11. VALORES / BENEFICIOS (3 o 4 columnas con divisores) ---------- */
.ctl-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }

.ctl-value-item { padding: 8px 26px 4px 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.ctl-value-item + .ctl-value-item { border-left: 1px solid color-mix(in srgb, var(--ctl-accent) 22%, var(--ctl-line)); padding-left: 26px; }
.ctl-value-item > [data-lucide], .ctl-value-item > .lucide { width: 31px; height: 31px; color: var(--ctl-accent); }
.ctl-value-item strong { display: block; font-family: var(--ctl-display); font-size: 19px; font-weight: 500; margin-bottom: 6px; line-height: 1.2; }
.ctl-value-item p { color: var(--ctl-muted); font-size: 15px; line-height: 1.5; }

@media (max-width: 860px) {
  .ctl-value-grid { grid-template-columns: 1fr; gap: 22px; }
  .ctl-value-item + .ctl-value-item { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ctl-accent) 22%, var(--ctl-line)); padding-left: 0; padding-top: 22px; }
}

/* ---------- 12. PREGUNTAS FRECUENTES (acordeón nativo <details>) ---------- */
.ctl-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.ctl-faq-aside { position: sticky; top: calc(var(--ctl-header-h) + 24px); }
.ctl-help-card { margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--ctl-accent); color: #fff; border-radius: var(--ctl-radius-lg); box-shadow: var(--ctl-shadow-float); max-width: 380px; }
.ctl-help-card a { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.ctl-help-card p { font-size: 14px; line-height: 1.45; }
.ctl-faq { border-top: 1px solid var(--ctl-line); }
.ctl-faq details { border-bottom: 1px solid var(--ctl-line); }
.ctl-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 4px; font-family: var(--ctl-display); font-weight: 500; font-size: 19px; line-height: 1.25;
}
.ctl-faq summary::-webkit-details-marker { display: none; }
.ctl-faq summary::after { content: '+'; font-family: var(--ctl-font); font-size: 24px; line-height: 1; color: var(--ctl-accent); transition: transform .2s ease; }
.ctl-faq details[open] summary::after { transform: rotate(45deg); }
.ctl-faq details > div { padding: 0 4px 22px; color: var(--ctl-muted); font-size: 16px; line-height: 1.6; max-width: 680px; }
.ctl-faq details > div strong { color: var(--ctl-ink); font-weight: 500; }
@media (max-width: 860px) { .ctl-faq-layout { grid-template-columns: 1fr; gap: 30px; } .ctl-faq-aside { position: static; } }

/* ---------- 13. CTA FINAL ---------- */
.ctl-final { background: var(--ctl-accent); color: #fff; padding-block: 72px; }
.ctl-final::after { content: ''; position: absolute; width: 310px; height: 310px; right: -80px; top: -150px; border: 60px solid color-mix(in srgb, var(--ctl-accent-2) 76%, transparent); border-radius: 50%; opacity: .72; pointer-events: none; }
.ctl-final-copy { position: relative; z-index: 1; max-width: 760px; }
.ctl-final .ctl-section-kicker { color: #fff; }
.ctl-final .ctl-h2 { font-size: 44px; }
.ctl-final .ctl-section-intro { color: rgba(255, 255, 255, .86); }
.ctl-final .ctl-actions { margin-top: 26px; }
.ctl-final .ctl-primary { background: #fff; border-color: #fff; color: var(--ctl-accent-strong); box-shadow: none; }
.ctl-final .ctl-secondary { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
@media (max-width: 560px) { .ctl-final .ctl-h2 { font-size: 32px; } }

/* ---------- 14. FOOTER GLOBAL ---------- */
.ctl-footer { background: var(--ctl-panel); border-top: 1px solid var(--ctl-line); padding-block: 48px 30px; font-size: 14px; }
.ctl-footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 36px; }
.ctl-footer-brand p { color: var(--ctl-muted); line-height: 1.55; margin: 16px 0 14px; max-width: 360px; }
.ctl-footer-mail { display: inline-flex; align-items: center; gap: 8px; color: var(--ctl-ink); text-decoration: none; font-weight: 500; }
.ctl-footer-mail:hover { color: var(--ctl-accent-strong); }
.ctl-footer h3 { font-family: var(--ctl-font); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ctl-ink); margin-bottom: 14px; }
.ctl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ctl-footer ul a { color: var(--ctl-muted); text-decoration: none; }
.ctl-footer ul a:hover { color: var(--ctl-accent-strong); }
.ctl-footer-publishers { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--ctl-line); display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: center; }
.ctl-publisher { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ctl-publisher img { height: 36px; width: auto; }
.ctl-social { display: flex; gap: 12px; }
.ctl-social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ctl-line); color: var(--ctl-muted); text-decoration: none; font-size: 15px; }
.ctl-social a:hover { color: var(--ctl-accent-strong); border-color: var(--ctl-accent); }
.ctl-footer-legal { margin-top: 26px; color: var(--ctl-muted); font-size: 12px; }
@media (max-width: 860px) { .ctl-footer-grid { grid-template-columns: 1fr 1fr; } .ctl-footer-brand { grid-column: 1 / -1; } }

/* ---------- 15. CABECERA DE PÁGINA INTERNA ---------- */
.ctl-page-head { padding-block: 64px 44px; }
.ctl-page-head--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .ctl-page-head { padding-block: 42px 30px; } .ctl-page-head--split { grid-template-columns: 1fr; } }

/* Pasos con imagen (Cómo funciona) */








/* ---------- 16. FORMULARIOS (estilo; la estructura del HTML actual se respeta) ---------- */
.ctl-field { margin-bottom: 16px; }
.ctl-field label, .ctl-label { display: block; font-size: 14px; font-weight: 500; color: var(--ctl-ink); margin-bottom: 6px; }
.ctl-field label .ctl-req, .ctl-req { color: var(--ctl-accent-2-strong); }
.ctl-input, .ctl-select, .ctl-textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  background: var(--ctl-canvas); color: var(--ctl-ink);
  border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-sm);
  font-size: 16px; /* 16px evita el zoom automático en iOS */
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ctl-input::placeholder, .ctl-textarea::placeholder { color: #8a969c; }
.ctl-input:focus, .ctl-select:focus, .ctl-textarea:focus { outline: none; background: #fff; border-color: var(--ctl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 18%, transparent); }
.ctl-input.is-invalid, .ctl-input[aria-invalid="true"] { border-color: var(--ctl-error); background: #fff; }
.ctl-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e6c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; }
.ctl-input-wrap { position: relative; }
.ctl-input-wrap .ctl-input { padding-right: 46px; }
.ctl-input-wrap > [data-lucide]:first-child, .ctl-input-wrap > .lucide:first-child { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ctl-muted); pointer-events: none; }
.ctl-input-wrap--icon .ctl-input { padding-left: 42px; padding-right: 13px; }
.ctl-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ctl-muted); border-radius: 6px; cursor: pointer; }
.ctl-eye:hover { color: var(--ctl-accent-strong); background: var(--ctl-soft); }
[data-error-for] { color: var(--ctl-error); font-size: 13px; margin-top: 5px; min-height: 0; }
[data-error-for]:empty { display: none; }
.ctl-form-errors:not(:empty) { background: var(--ctl-error-bg); color: var(--ctl-error); border: 1px solid color-mix(in srgb, var(--ctl-error) 25%, transparent); border-radius: var(--ctl-radius-sm); padding: 11px 13px; font-size: 14px; margin-bottom: 16px; }
.ctl-check-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.ctl-check-row input[type="checkbox"], .ctl-check-row input[type="radio"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ctl-accent); flex-shrink: 0; cursor: pointer; }
.ctl-check-row label { margin: 0; font-weight: 400; font-size: 14px; }
.ctl-help { color: var(--ctl-muted); font-size: 13px; line-height: 1.5; }
.ctl-link-btn { background: none; border: 0; padding: 0; color: var(--ctl-accent-strong); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.ctl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .ctl-grid-2 { grid-template-columns: 1fr; } }

/* ---------- 17. ACCESO (login / registro) ---------- */
.ctl-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ctl-auth-side { position: relative; overflow: hidden; background: var(--ctl-ink); color: var(--ctl-panel); padding: 40px 56px; display: flex; flex-direction: column; gap: 40px; }
.ctl-auth-side::after { content: ''; position: absolute; width: 360px; height: 360px; right: -140px; bottom: -120px; border: 64px solid color-mix(in srgb, var(--ctl-accent-2) 70%, transparent); border-radius: 50%; opacity: .6; }
.ctl-auth-side .ctl-brand { color: var(--ctl-panel); }

.ctl-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 253, 248, .82); text-decoration: none; font-size: 14px; }
.ctl-back:hover { color: #fff; }
.ctl-auth-side .ctl-h2 { color: #fff; }
.ctl-auth-side p { color: rgba(255, 253, 248, .78); font-size: 17px; line-height: 1.55; max-width: 420px; }
.ctl-auth-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.ctl-auth-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255, 253, 248, .88); }
.ctl-auth-list li span.ctl-auth-num { font-family: var(--ctl-display); font-size: 22px; line-height: 1; color: #f6b1a3; width: 26px; flex-shrink: 0; }
.ctl-auth-main { padding: 48px 56px; display: grid; place-items: center; }
.ctl-auth-card { width: 100%; max-width: 480px; background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-xl); box-shadow: var(--ctl-shadow-card); padding: 34px 34px 30px; }
#auth-header { margin-bottom: 22px; }
#auth-header h3, .ctl-auth-card h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 4px; }
#auth-header p { color: var(--ctl-muted); font-size: 15px; }
#tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--ctl-canvas); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-md); margin-bottom: 24px; }
#tabs button { appearance: none; border: 0; background: transparent; padding: 10px; border-radius: 8px; font-weight: 500; font-size: 15px; color: var(--ctl-muted); cursor: pointer; }
#tabs button.is-active, #tabs button[aria-selected="true"] { background: var(--ctl-panel); color: var(--ctl-ink); box-shadow: 0 2px 8px rgba(21, 50, 71, .08); }
[data-tab-content] { display: none; }
[data-tab-content].is-active { display: block; }
.ctl-auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ctl-muted); display: grid; gap: 8px; }
.ctl-auth-foot a { color: var(--ctl-muted); }
.ctl-form-title { margin-bottom: 18px; }
.ctl-form-title h3 { margin-bottom: 4px; }
.ctl-form-title p { color: var(--ctl-muted); font-size: 15px; }
@media (max-width: 960px) {
  .ctl-auth { grid-template-columns: 1fr; }
  .ctl-auth-side { padding: 26px var(--ctl-gutter) 34px; gap: 24px; }
  .ctl-auth-side .ctl-auth-list, .ctl-auth-side .ctl-hide-mobile, .ctl-auth-side::after { display: none; }
  .ctl-auth-main { padding: 28px var(--ctl-gutter) 48px; place-items: start center; }
}
@media (max-width: 560px) { .ctl-auth-card { padding: 24px 18px; border-radius: var(--ctl-radius-lg); } }

/* ---------- 18. CREACIÓN DEL LIBRO: indicador de pasos ---------- */
.ctl-progress { background: var(--ctl-panel); border-bottom: 1px solid var(--ctl-line); }
.ctl-progress ol { list-style: none; margin: 0; padding: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ctl-progress-item { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ctl-muted); position: relative; }
.ctl-progress-item:not(:last-child)::after { content: ''; height: 1px; background: var(--ctl-line); position: absolute; left: 42px; right: 6%; top: 15px; }
.ctl-progress-label { position: relative; z-index: 1; background: var(--ctl-panel); padding-right: 14px; }
.ctl-progress-num { width: 31px; height: 31px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; background: var(--ctl-panel); z-index: 1; font-weight: 500; flex-shrink: 0; }
.ctl-progress-item.is-active { color: var(--ctl-accent-strong); font-weight: 600; }
.ctl-progress-item.is-active .ctl-progress-num { background: var(--ctl-accent); border-color: var(--ctl-accent); color: #fff; }
.ctl-progress-item.is-done { color: var(--ctl-ink); }
.ctl-progress-item.is-done .ctl-progress-num { background: var(--ctl-soft); border-color: var(--ctl-accent); color: var(--ctl-accent-strong); }
.ctl-progress-item.is-done::after { background: var(--ctl-accent); }
.ctl-progress-now { display: none; }
@media (max-width: 640px) {
  .ctl-progress ol { padding: 14px 0 8px; }
  .ctl-progress-label { display: none; }
  .ctl-progress-now { display: block; padding-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ctl-accent-strong); }
}

/* ---------- 19. SELECCIÓN DE CONTENIDOS ---------- */
.ctl-builder-head { padding-block: 34px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ctl-builder-head .ctl-h2 { font-size: 34px; margin-bottom: 8px; }
.ctl-builder-head p { color: var(--ctl-muted); font-size: 16px; max-width: 640px; }
.ctl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--ctl-soft); color: var(--ctl-accent-strong); border-radius: 999px; font-size: 14px; font-weight: 500; }

/* Sub-paso 1: elegir materia */






.ctl-pick-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.4fr); gap: 14px; }   /* v5.4: Materia · Año · Buscar */





@media (max-width: 860px) {
  .ctl-pick-fields { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ctl-pick-fields > .ctl-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .ctl-pick-fields { grid-template-columns: 1fr; }
}

/* Sub-paso 2: capítulos + panel del libro */
.ctl-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; padding-bottom: 64px; }
.ctl-list-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ctl-list-tools .ctl-input-wrap { flex: 1; min-width: 220px; }
.ctl-list-caption { font-size: 14px; color: var(--ctl-muted); margin: 6px 0 12px; }
.ctl-list-caption strong { color: var(--ctl-ink); font-weight: 500; }
#chapter-list { display: grid; gap: 10px; }
.ctl-chapter {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 14px 16px 14px 14px; background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg);
  cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .ctl-chapter:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--ctl-accent) 45%, var(--ctl-line)); } }
.ctl-chapter.is-selected { border-color: var(--ctl-accent); box-shadow: inset 4px 0 0 var(--ctl-accent); }
.ctl-chapter-cover { width: 74px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 1px solid var(--ctl-line); box-shadow: 4px 5px 10px rgba(28, 45, 52, .12); background: var(--ctl-soft); }
.ctl-chapter-book { display: flex; align-items: center; gap: 6px; color: var(--ctl-accent-strong); font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.ctl-chapter-book [data-lucide], .ctl-chapter-book .lucide { width: 15px; height: 15px; }
.ctl-chapter h3 { font-family: var(--ctl-font); font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.chapter-pages-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ctl-muted); }
.ctl-pages { display: inline-flex; align-items: center; gap: 5px; }
.ctl-pages [data-lucide], .ctl-pages .lucide { width: 14px; height: 14px; }
.view-contents-btn, .flip-preview-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--ctl-accent-strong); cursor: pointer; }
.view-contents-btn:hover, .flip-preview-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.view-contents-btn [data-lucide], .flip-preview-btn [data-lucide], .view-contents-btn .lucide, .flip-preview-btn .lucide { width: 14px; height: 14px; }
.contents-dropdown { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; font-size: 14px; line-height: 1.5; color: var(--ctl-muted); border-left: 2px solid var(--ctl-accent-2); padding-left: 12px; margin-top: 4px; }
.contents-dropdown.open { max-height: 600px; margin: 8px 0 4px; }
.contents-dropdown li { margin-bottom: 4px; }
.contents-dropdown ul { margin: 0; padding-left: 16px; }
.toggle-chapter-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ctl-line); background: var(--ctl-canvas); color: transparent; cursor: pointer; transition: all .2s ease; flex-shrink: 0; }
.toggle-chapter-btn [data-lucide], .toggle-chapter-btn .lucide { width: 18px; height: 18px; }
.ctl-chapter:hover .toggle-chapter-btn { border-color: var(--ctl-accent); color: color-mix(in srgb, var(--ctl-accent) 45%, transparent); }
.ctl-chapter.is-selected .toggle-chapter-btn, .toggle-chapter-btn.bg-success { background: var(--ctl-accent); border-color: var(--ctl-accent); color: #fff; }
.ctl-empty { text-align: center; padding: 34px 16px; color: var(--ctl-muted); background: var(--ctl-panel); border: 1px dashed var(--ctl-line); border-radius: var(--ctl-radius-lg); }
@media (max-width: 560px) {
  .ctl-chapter { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; position: relative; padding-right: 14px; }
  .ctl-chapter-cover { width: 56px; }
  .toggle-chapter-btn { position: absolute; top: 10px; right: 10px; }
  .ctl-chapter h3 { padding-right: 40px; font-size: 16px; }
}

/* Panel lateral "Tu libro" */
.ctl-book-panel { position: sticky; top: calc(var(--ctl-header-h) + 16px); background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); box-shadow: var(--ctl-shadow-card); overflow: hidden; }
.ctl-book-panel-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--ctl-line); }
.ctl-book-panel-head h2 { font-size: 21px; margin-bottom: 10px; }
#progress-text { display: block; font-size: 14px; color: var(--ctl-ink); font-weight: 500; }
#progress-status { display: block; font-size: 13px; margin-top: 4px; }
#progress-status.text-success { color: var(--ctl-success); }
.ctl-page-meter { margin: 12px 0 6px; height: 8px; border-radius: 99px; background: var(--ctl-line); overflow: hidden; position: relative; }
#progress-bar { height: 100%; width: 0; border-radius: 99px; background: var(--ctl-muted); transition: width .3s ease, background .3s ease; }
#progress-bar.bg-blue-500 { background: var(--ctl-info); }
#progress-bar.bg-success { background: var(--ctl-accent); }
#progress-bar.bg-error { background: var(--ctl-error); }
.ctl-meter-min { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ctl-ink); opacity: .35; }
.ctl-meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ctl-muted); }
#validation-message { margin: 14px 20px 0; padding: 11px 13px; border-radius: var(--ctl-radius-sm); font-size: 14px; line-height: 1.45; border: 1px solid transparent; }
#validation-message.bg-blue-50 { background: var(--ctl-info-bg); color: var(--ctl-info); border-color: color-mix(in srgb, var(--ctl-info) 18%, transparent); }
#validation-message.bg-red-50 { background: var(--ctl-error-bg); color: var(--ctl-error); border-color: color-mix(in srgb, var(--ctl-error) 22%, transparent); }
#selected-chapters-panel { padding: 16px 20px 6px; }
#selected-chapters-panel h3 { font-family: var(--ctl-font); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
#selected-chapters-panel > p { font-size: 13px; color: var(--ctl-muted); margin-bottom: 12px; }
#selected-chapters-list { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.ctl-selected-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; background: var(--ctl-canvas); border: 1px solid transparent; border-radius: var(--ctl-radius-sm); cursor: grab; }
.ctl-selected-row:hover { border-color: var(--ctl-line); }
.ctl-selected-row > [data-lucide], .ctl-selected-row > .lucide { width: 16px; height: 16px; color: var(--ctl-muted); }
.ctl-selected-row p { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ctl-selected-row small { display: block; font-size: 12px; color: var(--ctl-muted); margin-top: 2px; }
.ctl-selected-row .flip-preview-btn { padding: 2px 0 0; font-size: 12px; }
.remove-chapter-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 6px; color: var(--ctl-muted); cursor: pointer; }
.remove-chapter-btn:hover { background: var(--ctl-error-bg); color: var(--ctl-error); }
.sortable-ghost { opacity: .4; }
.handle, .handle * { -webkit-user-select: none; user-select: none; }
.ctl-panel-empty { font-size: 14px; color: var(--ctl-muted); text-align: center; padding: 18px 10px 12px; }
#actions-panel { padding: 14px 20px 20px; }
#price-container { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 0 6px; border-top: 1px solid var(--ctl-line); }
#price-container .ctl-price-label { font-size: 13px; color: var(--ctl-muted); }
#price-text { font-size: 22px; font-weight: 600; color: var(--ctl-accent-strong); white-space: nowrap; }
.ctl-fine { font-size: 12px; line-height: 1.45; color: var(--ctl-muted); margin-top: 6px; }
.ctl-panel-buttons { display: grid; gap: 8px; margin-top: 16px; }
#save-draft-button { width: 100%; }
@media (max-width: 1024px) { .ctl-builder-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 860px) {
  .ctl-builder-grid { grid-template-columns: 1fr; }
  .ctl-book-panel { position: static; }
}

/* Barra fija en móvil con el resumen (solo visible < 860px) */
.ctl-mobile-summary { display: none; }
@media (max-width: 860px) {
  .ctl-mobile-summary { display: flex; position: sticky; bottom: 0; z-index: 30; align-items: center; gap: 8px; padding: 10px var(--ctl-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--ctl-panel); border-top: 1px solid var(--ctl-line); box-shadow: 0 -8px 20px rgba(21, 50, 71, .08); font-size: 14px; }
  .ctl-ms-info { flex: 1; min-width: 0; line-height: 1.25; }
  .ctl-ms-info strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ctl-ms-info span { display: block; font-size: 12px; color: var(--ctl-muted); }
  .ctl-ms-info span.is-ok { color: var(--ctl-accent-strong); }
  .ctl-ms-info span.is-error { color: var(--ctl-error); }
  .ctl-mobile-summary .ctl-btn-sm { padding-inline: 12px; }
  .ctl-builder-grid { padding-bottom: 24px; }
}

/* Diálogo de confirmación */
#dialog-backdrop { position: fixed; inset: 0; background: rgba(21, 50, 71, .45); z-index: 60; }
#dialog { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); background: var(--ctl-panel); border-radius: var(--ctl-radius-xl); padding: 26px; box-shadow: 0 30px 70px rgba(21, 50, 71, .3); }
#dialog h2 { font-size: 22px; }
#dialog .ctl-dialog-title { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--ctl-warning); }
#dialog p { color: var(--ctl-muted); font-size: 15px; margin-bottom: 20px; }
#dialog .ctl-actions { justify-content: flex-end; }
.btn-delete-confirm { color: var(--ctl-error); background: transparent; border: 1px solid var(--ctl-error); }
.btn-delete-confirm:hover { background: var(--ctl-error); color: #fff; }

/* ---------- 20. DATOS DEL LIBRO (paso 2) ---------- */

.ctl-card { background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); padding: 26px 28px; }
.ctl-card + .ctl-card { margin-top: 16px; }
.ctl-card-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.ctl-card-title span { font-family: var(--ctl-display); color: color-mix(in srgb, var(--ctl-accent) 45%, var(--ctl-canvas)); font-size: 30px; line-height: 1; }
.ctl-card-title h2 { font-size: 22px; }







.ctl-cover-a { background: linear-gradient(145deg, #087f75, #0b5a5a); }
.ctl-cover-b { background: linear-gradient(145deg, #e96a55, #b8442f); }
.ctl-cover-c { background: linear-gradient(145deg, #153247, #22506f); }
.ctl-cover-d { background: #fffdf8; color: var(--ctl-ink) !important; border-left: 7px solid var(--ctl-accent) !important; }










.ctl-summary { margin-top: 16px; }
.ctl-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.ctl-summary dt { color: var(--ctl-muted); }
.ctl-summary dd { margin: 0; text-align: right; font-weight: 500; }
.ctl-form-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 560px) {  .ctl-card { padding: 20px 18px; } }

/* ---------- 21. LIBRO LISTO (paso 3) ---------- */
.ctl-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: start; padding-block: 48px 72px; }
.ctl-done-badge { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-accent); color: #fff; margin-bottom: 22px; box-shadow: 0 0 0 10px var(--ctl-soft); }
.ctl-done-badge [data-lucide], .ctl-done-badge .lucide { width: 28px; height: 28px; }
.ctl-timeline-v { list-style: none; margin: 0; padding: 0; }
.ctl-timeline-v li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; position: relative; padding-bottom: 24px; }
.ctl-timeline-v li:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--ctl-line); }
.ctl-timeline-v li.is-done:not(:last-child)::before { background: var(--ctl-accent); }
.ctl-tl-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ctl-line); background: var(--ctl-panel); color: var(--ctl-muted); }
.ctl-tl-dot [data-lucide], .ctl-tl-dot .lucide { width: 16px; height: 16px; }
.ctl-timeline-v li.is-done .ctl-tl-dot { background: var(--ctl-accent); border-color: var(--ctl-accent); color: #fff; }
.ctl-timeline-v li.is-current .ctl-tl-dot { border: 2px solid var(--ctl-accent); color: var(--ctl-accent-strong); background: var(--ctl-soft); }
.ctl-timeline-v strong { display: block; font-size: 16px; font-weight: 600; margin-top: 5px; }
.ctl-timeline-v p { color: var(--ctl-muted); font-size: 14px; line-height: 1.5; margin-top: 3px; }
.ctl-timeline-v .ctl-tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--ctl-warning-bg); color: var(--ctl-warning); vertical-align: middle; }
@media (max-width: 860px) { .ctl-done { grid-template-columns: 1fr; } }

/* ---------- 22. MIS LIBROS ---------- */
.ctl-library-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding-block: 44px 26px; }
.ctl-library-head .ctl-h2 { font-size: 36px; margin-bottom: 6px; }
.ctl-library-head p { color: var(--ctl-muted); }
.ctl-library-stats { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.ctl-stat { min-width: 160px; padding: 14px 16px; border: 1px solid var(--ctl-line); background: var(--ctl-panel); border-radius: var(--ctl-radius-lg); }
.ctl-stat strong { display: block; font-family: var(--ctl-display); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--ctl-accent-strong); }
.ctl-stat span { font-size: 14px; color: var(--ctl-muted); }
.ctl-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ctl-filter-tabs button { appearance: none; border: 1px solid var(--ctl-line); background: var(--ctl-panel); padding: 8px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.ctl-filter-tabs button[aria-pressed="true"] { background: var(--ctl-ink); border-color: var(--ctl-ink); color: #fff; }
.ctl-book-list { display: grid; gap: 12px; padding-bottom: 72px; }
.ctl-book-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 170px 130px auto; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--ctl-line); background: var(--ctl-panel); border-radius: var(--ctl-radius-lg); }
.ctl-mini-cover { height: 100px; overflow: hidden; overflow-wrap: anywhere; border-radius: 3px 6px 6px 3px; color: #fff; padding: 10px 8px; font-family: var(--ctl-display); font-size: 11px; line-height: 1.1; box-shadow: 5px 7px 12px rgba(28, 50, 43, .16); }
.ctl-book-info strong { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.ctl-book-info span, .ctl-book-detail span { display: block; font-size: 13px; color: var(--ctl-muted); line-height: 1.6; }
.ctl-status { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ctl-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ctl-status--draft { background: #eef0f1; color: #4f5b61; }
.ctl-status--review { background: var(--ctl-warning-bg); color: var(--ctl-warning); }
.ctl-status--published { background: var(--ctl-success-bg); color: var(--ctl-accent-strong); }
.ctl-timeline { margin-top: 10px; display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ctl-muted); }
.ctl-timeline span { width: 34px; height: 4px; border-radius: 9px; background: var(--ctl-line); }
.ctl-timeline span.is-on { background: var(--ctl-accent); }
.ctl-orders { font-size: 13px; color: var(--ctl-muted); }
.ctl-orders b { color: var(--ctl-ink); }
.ctl-orders .ctl-mini-meter { width: 120px; }
.ctl-row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 960px) {
  .ctl-book-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .ctl-book-detail, .ctl-book-row .ctl-orders { display: none; }
  .ctl-row-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) { .ctl-book-row { grid-template-columns: 56px minmax(0, 1fr); } .ctl-book-row .ctl-status { grid-column: 2; } .ctl-mini-cover { height: 78px; font-size: 8.5px; overflow-wrap: normal; padding: 8px 6px; } .ctl-library-stats { flex-wrap: nowrap; gap: 8px; } .ctl-stat { min-width: 0; flex: 1; padding: 12px; } .ctl-stat strong { font-size: 24px; } .ctl-stat span { font-size: 13px; } }

/* ---------- 23. PÁGINAS LEGALES ---------- */
.ctl-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 80px; }
.ctl-toc { position: sticky; top: calc(var(--ctl-header-h) + 24px); font-size: 14px; }
.ctl-toc h2 { font-family: var(--ctl-font); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 12px; }
.ctl-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--ctl-line); }
.ctl-toc a { display: block; padding: 6px 0 6px 14px; color: var(--ctl-muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.ctl-toc a:hover { color: var(--ctl-ink); border-left-color: var(--ctl-accent-2); }
.ctl-article { max-width: 720px; }
.ctl-article section { padding-block: 26px; border-top: 1px solid var(--ctl-line); scroll-margin-top: calc(var(--ctl-header-h) + 16px); }
.ctl-article h2 { font-size: 25px; letter-spacing: -.015em; margin-bottom: 12px; }
.ctl-article h3 { font-family: var(--ctl-font); font-size: 16px; font-weight: 600; margin: 14px 0 4px; }
.ctl-article p, .ctl-article li { color: #34495a; font-size: 16px; line-height: 1.7; }
.ctl-article p + p { margin-top: 10px; }
.ctl-article ul, .ctl-article ol { padding-left: 20px; margin: 8px 0; }
.ctl-article strong { color: var(--ctl-ink); font-weight: 600; }
.ctl-updated { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ctl-muted); margin-top: 14px; }
.ctl-updated > [data-lucide], .ctl-updated > .lucide { margin-top: 2px; }
@media (max-width: 860px) { .ctl-legal { grid-template-columns: 1fr; gap: 20px; } .ctl-toc { position: static; } }

/* ---------- 24. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .ctl-hero-art:hover .ctl-book, .ctl-hero-art:hover .ctl-book-shadow, .ctl-chapter:hover { transform: none; }
}
.ctl-section-kicker em, .ctl-eyebrow em { font-style: normal; }

/* Íconos ilustrados (SVG propios en /public/assets/iconos/) para secciones de beneficios */
.ctl-spot { display: block; flex-shrink: 0; }
.ctl-benefit > .ctl-spot { width: 56px; height: 56px; margin-top: -4px; }
.ctl-value-item > .ctl-spot { width: 64px; height: 64px; margin-top: -6px; }

/* ---------- 25. MÓVIL Y PANTALLAS TÁCTILES ----------
   Áreas táctiles de al menos 44 × 44 px (pauta de Apple y WCAG 2.5.5) sin cambiar el aspecto en escritorio. */
@media (pointer: coarse), (max-width: 860px) {
  #mobile-menu-button { width: 44px; height: 44px; }
  .ctl-brand { min-height: 44px; }
  .toggle-chapter-btn, .remove-chapter-btn { width: 44px; height: 44px; }
  .view-contents-btn, .flip-preview-btn { min-height: 44px; padding: 0 4px; margin: 0 -4px; }
  .chapter-pages-top { gap: 4px 14px; }
  .ctl-eye { width: 44px; height: 44px; right: 1px; }
  .ctl-input-wrap .ctl-input { padding-right: 50px; }
  .ctl-link-btn { display: inline-block; padding: 12px 2px; margin: -12px 0; }
  .ctl-back, .ctl-footer-mail { min-height: 44px; display: inline-flex; align-items: center; }
  .ctl-auth-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .ctl-footer ul { gap: 0; }
  .ctl-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .ctl-social { gap: 6px; }
  .ctl-social a { width: 44px; height: 44px; }
  .ctl-publisher > a { display: inline-flex; align-items: center; min-height: 44px; }
  .ctl-filter-tabs button, .ctl-btn-sm, #tabs button { min-height: 44px; }
  .ctl-nav a, #mobile-menu a { min-height: 44px; }
}

/* Índice de páginas legales: en móvil pasa a una fila de chips con desplazamiento lateral */
@media (max-width: 860px) {
  .ctl-toc { margin-inline: calc(var(--ctl-gutter) * -1); }
  .ctl-toc h2 { padding-inline: var(--ctl-gutter); }
  .ctl-toc ol { display: flex; gap: 8px; overflow-x: auto; border-left: 0; padding: 2px var(--ctl-gutter) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ctl-toc ol::-webkit-scrollbar { display: none; }
  .ctl-toc li { flex-shrink: 0; }
  .ctl-legal { grid-template-columns: minmax(0, 1fr); }
  .ctl-toc { min-width: 0; }
  .ctl-toc a { margin: 0; border: 1px solid var(--ctl-line); border-radius: 999px; background: var(--ctl-panel); padding: 0 15px; line-height: 42px; white-space: nowrap; color: var(--ctl-ink); display: inline-block; }
}

/* Datos del libro en móvil: vista previa compacta ARRIBA del formulario, junto al resumen */

@media (max-width: 560px) {
  .ctl-final::after { width: 170px; height: 170px; border-width: 32px; right: -80px; top: -95px; }
  
}

/* ---------- 26. LOS 5 PASOS (Inicio: tira horizontal · Cómo funciona: filas alternadas) ---------- */
.ctl-steps5 { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.ctl-steps5::before { content: ''; position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: repeating-linear-gradient(90deg, var(--ctl-line) 0 8px, transparent 8px 14px); }
.ctl-step5 { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ctl-step5-num { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-accent); color: #fff; font-family: var(--ctl-display); font-size: 18px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ctl-panel) 80%, var(--ctl-canvas)); margin-bottom: 16px; }
.ctl-step5:nth-child(3) .ctl-step5-num, .ctl-step5:nth-child(4) .ctl-step5-num { background: var(--ctl-ink); }
.ctl-step5:nth-child(5) .ctl-step5-num { background: var(--ctl-accent-2-strong); }
.ctl-step5-img { border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-xs); overflow: hidden; background: #f4efe3; box-shadow: 6px 7px 0 rgba(233, 106, 85, .12); margin-bottom: 14px; }
.ctl-step5-img img { width: 100%; aspect-ratio: 800 / 447; object-fit: cover; }
.ctl-step5 h3 { font-size: 18px; line-height: 1.2; margin-bottom: 6px; }
.ctl-step5 p { font-size: 14px; line-height: 1.5; color: var(--ctl-muted); }
.ctl-who { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ctl-who--vos { background: var(--ctl-soft); color: var(--ctl-accent-strong); }
.ctl-who--equipo { background: #e3e8ee; color: var(--ctl-ink); }
.ctl-who--alumnos { background: #fbe4dd; color: #9a3a26; }
@media (max-width: 1100px) and (min-width: 861px) {
  .ctl-steps5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .ctl-steps5::before { display: none; }
}
@media (max-width: 860px) {
  .ctl-steps5 { grid-template-columns: 1fr; gap: 0; }
  .ctl-steps5::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ctl-line) 0 8px, transparent 8px 14px); }
  .ctl-step5 { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding-bottom: 30px; }
  .ctl-step5-num { grid-row: 1 / span 4; margin: 0; }
  .ctl-step5 > :not(.ctl-step5-num) { grid-column: 2; }
  .ctl-step5-img { order: 5; margin: 12px 0 0; max-width: 340px; }
  .ctl-step5 h3 { margin-top: 6px; }
}

/* Cómo funciona: filas alternadas con ilustración grande */
.ctl-zz { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 34px; }
.ctl-zz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.ctl-zz-row:nth-child(even) .ctl-zz-img { order: 2; }
.ctl-zz-img { border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-xs); overflow: hidden; background: #f4efe3; box-shadow: var(--ctl-shadow-offset); }
.ctl-zz-img img { width: 100%; aspect-ratio: 800 / 447; object-fit: cover; }
.ctl-zz-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.ctl-zz-body h3 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 4px 0 8px; }
.ctl-zz-body p { color: var(--ctl-muted); font-size: 17px; line-height: 1.6; max-width: 460px; }
.ctl-zz-body .ctl-how-num { font-size: 72px; }
@media (max-width: 860px) {
  .ctl-zz { gap: 40px; }
  .ctl-zz-row { grid-template-columns: 1fr; gap: 18px; }
  .ctl-zz-row:nth-child(even) .ctl-zz-img { order: 0; }
  .ctl-zz-body .ctl-how-num { font-size: 54px; }
  .ctl-zz-body h3 { font-size: 22px; }
  .ctl-zz-body p { font-size: 16px; }
}

/* ---------- 27. CALENDARIO DE PLAZOS ---------- */
.ctl-cal { background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); padding: 24px 24px 20px; box-shadow: var(--ctl-shadow-card); }
.ctl-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ctl-cal-head h3 { font-size: 22px; }
.ctl-cal-head p { color: var(--ctl-muted); font-size: 14px; }
.ctl-cal-row { display: grid; grid-template-columns: 210px repeat(10, minmax(0, 1fr)); align-items: center; min-height: 44px; border-top: 1px solid var(--ctl-line); }
.ctl-cal-row--days { border-top: 0; min-height: 0; padding-bottom: 6px; }
.ctl-cal-week { grid-column: span 5; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ctl-muted); padding: 0 6px 4px; }
.ctl-cal-week + .ctl-cal-week { border-left: 2px solid var(--ctl-line); }
.ctl-cal-day { text-align: center; font-size: 12px; color: var(--ctl-muted); line-height: 1.25; padding: 2px 0; }
.ctl-cal-day b { display: block; font-size: 14px; color: var(--ctl-ink); font-weight: 600; }
.ctl-cal-day.is-week2 { border-left: 2px solid var(--ctl-line); }
.ctl-cal-row > :nth-child(7):not(.ctl-cal-label) { }
.ctl-cal-label { grid-column: 1; display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; padding: 8px 10px 8px 0; }
.ctl-cal-label span { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--ctl-accent); }
.ctl-cal-label span.is-equipo { background: var(--ctl-ink); }
.ctl-cal-label span.is-alumnos { background: var(--ctl-accent-2-strong); }
.ctl-cal-track { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); height: 100%; min-height: 44px; align-items: center; }
.ctl-cal-track > .is-week2 { border-left: 2px solid var(--ctl-line); align-self: stretch; }
.ctl-cal-bar { height: 22px; border-radius: 6px; margin: 0 3px; position: relative; font-size: 12px; font-weight: 600; color: #fff; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.ctl-cal-bar--vos { background: var(--ctl-accent); }
.ctl-cal-bar--equipo { background: var(--ctl-ink); }
.ctl-cal-bar--revision { background: linear-gradient(90deg, var(--ctl-ink) 50%, transparent 50%), repeating-linear-gradient(135deg, rgba(21, 50, 71, .55) 0 6px, rgba(21, 50, 71, .25) 6px 12px); }
.ctl-cal-bar--quizas { background: repeating-linear-gradient(135deg, rgba(21, 50, 71, .55) 0 6px, rgba(21, 50, 71, .25) 6px 12px); color: var(--ctl-ink); }
.ctl-cal-bar--ventana { background: repeating-linear-gradient(135deg, rgba(196, 73, 47, .85) 0 6px, rgba(196, 73, 47, .55) 6px 12px); }
.ctl-cal-bar--alumnos { background: linear-gradient(90deg, var(--ctl-accent-2-strong), rgba(196, 73, 47, .15)); }
.ctl-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--ctl-muted); }
.ctl-cal-legend i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.ctl-cal-note { margin-top: 10px; font-size: 13px; color: var(--ctl-muted); line-height: 1.5; }
.ctl-cal-dates { margin-top: 14px; display: grid; gap: 6px; font-size: 15px; }
.ctl-cal-dates strong { font-weight: 600; }
@media (max-width: 860px) {
  .ctl-cal { padding: 18px 14px 16px; }
  .ctl-cal-row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ctl-cal-row--days > :first-child { display: none; }
  .ctl-cal-label { grid-column: 1 / -1; padding: 10px 0 4px; }
  .ctl-cal-track { grid-column: 1 / -1; min-height: 32px; }
  .ctl-cal-bar { height: 18px; font-size: 0; padding: 0; margin: 0 2px; }
  .ctl-cal-day { font-size: 10px; }
  .ctl-cal-day b { font-size: 12px; }
  .ctl-cal-week { font-size: 10px; }
}

/* Línea de tiempo de 5 tramos (Mis libros) */
.ctl-timeline span { width: 26px; }
.ctl-timeline span.is-now { background: repeating-linear-gradient(90deg, var(--ctl-accent) 0 4px, var(--ctl-soft) 4px 6px); }

.ctl-tl-est { display: block; margin-top: 6px; color: var(--ctl-ink); }
.ctl-tl-est b { font-weight: 600; }
.ctl-mini-cover { font-size: 10px; padding: 9px 6px; overflow-wrap: normal; }
@media (max-width: 860px) { .ctl-step5-img { max-width: 260px; } }

/* ---------- 28. CARTEL DE CONFIRMACIÓN (Datos del libro) ---------- */
.ctl-modal { width: min(92vw, 500px); max-height: 90vh; border: 0; border-radius: var(--ctl-radius-xl); padding: 30px 30px 26px; background: var(--ctl-panel); color: var(--ctl-ink); box-shadow: 0 30px 70px rgba(21, 50, 71, .3); }
.ctl-modal::backdrop { background: rgba(21, 50, 71, .5); backdrop-filter: blur(2px); }
.ctl-modal[open] { animation: ctl-modal-in .18s ease-out; }
@keyframes ctl-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ctl-modal-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-warning-bg); color: var(--ctl-warning); margin-bottom: 16px; }
.ctl-modal-icon [data-lucide], .ctl-modal-icon .lucide { width: 26px; height: 26px; }
.ctl-modal h2 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 12px; }
.ctl-modal p { color: var(--ctl-muted); font-size: 16px; line-height: 1.55; }
.ctl-modal p + p { margin-top: 10px; }
.ctl-modal-summary { background: var(--ctl-canvas); border: 1px solid var(--ctl-line); border-left: 4px solid var(--ctl-accent); border-radius: var(--ctl-radius-sm); padding: 12px 14px; }
.ctl-modal-summary strong { color: var(--ctl-ink); font-weight: 600; }
.ctl-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .ctl-modal { padding: 24px 18px 18px; }
  .ctl-modal h2 { font-size: 22px; }
  .ctl-modal-actions { flex-direction: column; }
  .ctl-modal-actions .ctl-primary, .ctl-modal-actions .ctl-secondary { width: 100%; }
}

/* ---------- 29. SELECCIÓN DE CONTENIDOS · VERSIÓN GUIADA (v5) ----------
   Capa de estilo sobre la sección 19. No cambia IDs ni clases-gancho del JS.
   - Guía de 3 pasos arriba (.ctl-guide) + número en cada zona de la pantalla (.ctl-guide-num).
   - Consigna repetida arriba de la lista (.ctl-list-guide), fija al bajar en escritorio.
   - Botón «Agregar / Agregado» con texto (las dos etiquetas van en la plantilla; el CSS muestra una según .bg-success).
   - Panel «Tu libro» en otro color (verde suave con cabecera verde) y capítulos numerados en el orden del libro.
   - Variante opcional con el panel a la izquierda: clase .ctl-builder-grid--izq (en la maqueta: ?panel=izquierda). */

/* Número de paso (círculo) */
.ctl-guide-num { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ctl-accent-2-strong); color: #fff; font-size: 15px; font-weight: 600; line-height: 1; }

/* Guía de 3 pasos */
.ctl-builder-head { padding-bottom: 16px; }
.ctl-guide { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.ctl-guide-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); transition: border-color .2s ease, background .2s ease; }
.ctl-guide-step strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ctl-ink); }
.ctl-guide-step span:not(.ctl-guide-num) { display: block; font-size: 13px; line-height: 1.4; color: var(--ctl-muted); margin-top: 3px; }
.ctl-guide-step .ctl-guide-num { background: var(--ctl-panel); color: var(--ctl-accent-2-strong); border: 1.5px solid var(--ctl-accent-2-strong); }
.ctl-guide-step.is-now { border-color: var(--ctl-accent-2-strong); background: #fff4ef; box-shadow: 0 0 0 1px var(--ctl-accent-2-strong) inset; }
.ctl-guide-step.is-now .ctl-guide-num { background: var(--ctl-accent-2-strong); color: #fff; }
.ctl-guide-step.is-done .ctl-guide-num { background: var(--ctl-accent); border-color: var(--ctl-accent); color: transparent; position: relative; }
.ctl-guide-step.is-done .ctl-guide-num::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; }

/* Zona 1: materia */
.ctl-zone-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ctl-zone-title h2 { font-size: 21px; letter-spacing: -.01em; }
.ctl-optional { font-weight: 400; color: var(--ctl-muted); }

/* Zona 2: consigna sobre la lista */
.ctl-list-guide { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 12px; background: #fff4ef; border: 1px solid color-mix(in srgb, var(--ctl-accent-2-strong) 35%, transparent); border-left: 4px solid var(--ctl-accent-2-strong); border-radius: var(--ctl-radius-lg); position: sticky; top: calc(var(--ctl-header-h) + 10px); z-index: 5; box-shadow: 0 8px 18px rgba(24, 43, 50, .07); }
.ctl-list-guide p { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; color: var(--ctl-ink); }
.ctl-list-guide p strong { font-weight: 600; }
.ctl-list-guide p span { display: block; font-size: 13px; color: #5a4a44; margin-top: 2px; }
.ctl-list-guide-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ctl-accent-strong); text-decoration: none; white-space: nowrap; }
.ctl-list-guide-link [data-lucide], .ctl-list-guide-link .lucide { width: 16px; height: 16px; }
.ctl-list-tools { justify-content: space-between; margin-bottom: 10px; }
.ctl-list-tools .ctl-list-caption { margin: 0; }

/* Tarjeta de capítulo: estado elegido bien visible */
.ctl-chapter { grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; }
.ctl-chapter.is-selected, .ctl-chapter:has(.toggle-chapter-btn.bg-success) { background: #f0f8f4; border-color: var(--ctl-accent); box-shadow: inset 5px 0 0 var(--ctl-accent); }
@media (hover: hover) { .ctl-chapter:hover { background: #fbfdfa; } }

/* Botón «Agregar / Agregado» (misma clase-gancho .toggle-chapter-btn) */
.toggle-chapter-btn { width: auto; min-width: 124px; height: 42px; padding: 0 14px; border-radius: var(--ctl-radius-md); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--ctl-accent); background: var(--ctl-panel); color: var(--ctl-accent-strong); font: 600 15px/1 var(--ctl-font); }
.toggle-chapter-btn [data-lucide], .toggle-chapter-btn .lucide { width: 17px; height: 17px; }
.toggle-chapter-btn > span { display: inline-flex; align-items: center; gap: 6px; }
.toggle-chapter-btn .ctl-added-label { display: none; }
.toggle-chapter-btn.bg-success .ctl-add-label { display: none; }
.toggle-chapter-btn.bg-success .ctl-added-label { display: inline-flex; }
.ctl-chapter:hover .toggle-chapter-btn { color: var(--ctl-accent-strong); background: var(--ctl-soft); }
.ctl-chapter.is-selected .toggle-chapter-btn, .toggle-chapter-btn.bg-success, .ctl-chapter:hover .toggle-chapter-btn.bg-success { background: var(--ctl-accent); border-color: var(--ctl-accent); color: #fff; }
.toggle-chapter-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ctl-accent) 45%, transparent); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 860px) { .toggle-chapter-btn { width: auto; height: 44px; } }
@media (max-width: 560px) {
  .ctl-chapter { align-items: start; }
  .toggle-chapter-btn { position: static; grid-column: 2; justify-self: start; margin-top: 2px; }
  .ctl-chapter h3 { padding-right: 0; }
}

/* Zona 3: panel «Tu libro» en otro color */
.ctl-book-panel { background: var(--ctl-soft); border: 2px solid var(--ctl-accent); }
.ctl-book-panel-title { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ctl-accent); color: #fff; }
.ctl-book-panel-title .ctl-guide-num { background: #fff; color: var(--ctl-accent-strong); }
.ctl-book-panel-title > div { flex: 1; min-width: 0; }
.ctl-book-panel-title h2 { font-size: 22px; line-height: 1.1; color: #fff; }
.ctl-book-panel-title span:not(.ctl-guide-num) { display: block; font-size: 13px; color: rgba(255, 255, 255, .88); margin-top: 2px; }
.ctl-book-panel-title > [data-lucide], .ctl-book-panel-title > .lucide { width: 26px; height: 26px; opacity: .9; }
.ctl-book-panel-head { border-bottom-color: color-mix(in srgb, var(--ctl-accent) 22%, transparent); padding-top: 14px; }
#progress-text { font-size: 15px; font-weight: 600; }
.ctl-page-meter { height: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--ctl-accent) 25%, transparent); }
.ctl-meter-label { color: #4e5d63; }
#progress-status.text-success { color: var(--ctl-accent-strong); font-weight: 500; }
#selected-chapters-panel > p { color: #4e5d63; }
#selected-chapters-list { counter-reset: ctl-cap; }
.ctl-selected-row { grid-template-columns: auto auto minmax(0, 1fr) auto; background: var(--ctl-panel); border-color: color-mix(in srgb, var(--ctl-accent) 18%, transparent); counter-increment: ctl-cap; }
.ctl-selected-row::before { content: counter(ctl-cap); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ctl-soft); color: var(--ctl-accent-strong); font-size: 13px; font-weight: 600; grid-column: 1; grid-row: 1; }
.ctl-selected-row > [data-lucide], .ctl-selected-row > .lucide { grid-column: 2; }
.ctl-selected-row:hover { border-color: var(--ctl-accent); }
.ctl-panel-empty { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; margin-bottom: 10px; background: var(--ctl-panel); border: 1.5px dashed color-mix(in srgb, var(--ctl-accent) 40%, transparent); border-radius: var(--ctl-radius-lg); }
.ctl-panel-empty > [data-lucide], .ctl-panel-empty > .lucide { width: 38px; height: 38px; color: var(--ctl-accent); }
.ctl-panel-empty strong { font-size: 15px; font-weight: 600; color: var(--ctl-ink); }
.ctl-panel-empty p { font-size: 14px; color: #4e5d63; margin: 0; }
#price-container { border-top-color: color-mix(in srgb, var(--ctl-accent) 22%, transparent); }
#actions-panel .ctl-fine { color: #4e5d63; }
.ctl-continue-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: #4e5d63; margin: 8px 0 0; }
.ctl-continue-hint [data-lucide], .ctl-continue-hint .lucide { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
#final-continue-button:enabled ~ .ctl-continue-hint { display: none; }
.ctl-back-to-list { display: none; }

/* Aviso visual al agregar o quitar un capítulo */
@keyframes ctl-bump-ring { from { box-shadow: 0 0 0 0 rgba(8, 127, 117, .45); } to { box-shadow: 0 0 0 14px rgba(8, 127, 117, 0); } }
@keyframes ctl-bump-text { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.ctl-book-panel.ctl-bump { animation: ctl-bump-ring .6s ease-out; }
#ctl-mobile-summary-text.ctl-bump { animation: ctl-bump-text .45s ease-out; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .ctl-book-panel.ctl-bump, #ctl-mobile-summary-text.ctl-bump { animation: none; } }

/* Variante: panel a la izquierda (solo escritorio) */
@media (min-width: 861px) {
  .ctl-builder-grid--izq { grid-template-columns: 360px minmax(0, 1fr); }
  .ctl-builder-grid--izq > .ctl-book-panel { order: -1; }
  .ctl-builder-grid--izq .ctl-list-guide-link { flex-direction: row-reverse; }
  .ctl-builder-grid--izq .ctl-list-guide-link .lucide { transform: rotate(180deg); }
}
@media (min-width: 861px) and (max-width: 1024px) { .ctl-builder-grid--izq { grid-template-columns: 320px minmax(0, 1fr); } }

/* Móvil */
@media (max-width: 860px) {
  .ctl-guide { grid-template-columns: 1fr; gap: 6px; }
  .ctl-guide-step { padding: 10px 12px; }
  .ctl-list-guide { position: static; box-shadow: none; }
  .ctl-list-guide-link { display: none; }
  .ctl-back-to-list { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ctl-accent-strong); text-decoration: none; }
  .ctl-back-to-list [data-lucide], .ctl-back-to-list .lucide { width: 16px; height: 16px; }
  .ctl-book-panel { scroll-margin-top: calc(var(--ctl-header-h) + 10px); }
}
@media (max-width: 560px) {
  .ctl-guide-step span:not(.ctl-guide-num) { display: none; }
  .ctl-list-guide { align-items: flex-start; padding: 12px 13px; }
  .ctl-list-tools { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- 30. INDICADOR DE LOS 5 PASOS (reemplaza al de 3 en Selección, Datos del libro y Libro listo) ---------- */
.ctl-progress ol { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 18px 0; }
.ctl-progress-item { align-items: flex-start; }
.ctl-progress-label { line-height: 1.25; padding-top: 5px; }
.ctl-progress-label small { display: block; font-size: 12px; font-weight: 400; color: var(--ctl-muted); margin-top: 2px; }
.ctl-progress-item.is-others:not(.is-active) .ctl-progress-num { border-style: dashed; }
.ctl-progress-item:not(:last-child)::after { right: 4%; }
@media (max-width: 1024px) { .ctl-progress-item { font-size: 13px; gap: 8px; } .ctl-progress-label { padding-right: 8px; } .ctl-progress-item:not(:last-child)::after { left: 38px; } }
@media (max-width: 640px) {
  .ctl-progress ol { padding: 14px 0 8px; }
  .ctl-progress-item { justify-content: center; }
  .ctl-progress-item:not(:last-child)::after { left: calc(50% + 20px); right: calc(-50% + 20px); }
}
#price-container.invisible { display: none; }   /* v5: sin hueco vacío cuando todavía no hay capítulos */

/* ---------- 31. SELECCIÓN · AVISOS, BARRA Y PANEL SIEMPRE A MANO (v5) ---------- */
/* Avisos: «faltan páginas» como alerta (ámbar) y «te pasaste» como error (rojo), con ícono.
   Usan las mismas clases que ya pone el JS: bg-blue-50 (faltan) y bg-red-50 (sobran). */
.ctl-book-panel #validation-message { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; border-width: 1px 1px 1px 5px; }
.ctl-book-panel #validation-message::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--ctl-ico-alert) center / contain no-repeat; mask: var(--ctl-ico-alert) center / contain no-repeat; }
.ctl-book-panel #validation-message.bg-blue-50 { background: var(--ctl-warning-bg); color: #6e4100; border-color: color-mix(in srgb, var(--ctl-warning) 35%, transparent); border-left-color: #d48a00; }
.ctl-book-panel #validation-message.bg-red-50 { background: var(--ctl-error-bg); color: var(--ctl-error); border-color: color-mix(in srgb, var(--ctl-error) 35%, transparent); border-left-color: var(--ctl-error); --ctl-ico-alert: var(--ctl-ico-error); }
:root {
  --ctl-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ctl-ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

/* Barra de páginas: el tramo que falta hasta el mínimo va rayado; el color sigue al estado */
.ctl-page-meter { background:
  linear-gradient(90deg, transparent 0 26.47%, #fff 26.47%),
  repeating-linear-gradient(-45deg, rgba(212, 138, 0, .32) 0 4px, transparent 4px 8px), #fff; }
.ctl-meter-min { width: 3px; opacity: .7; }
#progress-bar.bg-blue-500 { background: #d48a00; }
.ctl-page-meter:has(#progress-bar.bg-blue-500) { border-color: #d48a00; }
.ctl-page-meter:has(#progress-bar.bg-error) { border-color: var(--ctl-error); background: var(--ctl-error-bg); }
.ctl-page-meter:has(#progress-bar.bg-success) { background: #fff; }
.ctl-book-panel:has(#progress-bar.bg-error) { border-color: var(--ctl-error); }
.ctl-ms-info span.is-warn { color: #8a5200; font-weight: 600; }
.ctl-ms-info span.is-error { font-weight: 600; }

/* Subir / bajar capítulos sin arrastrar */
.ctl-selected-row { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.ctl-move { display: flex; flex-direction: column; gap: 2px; }
.ctl-move-btn { width: 28px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ctl-line); background: #fff; border-radius: 6px; color: var(--ctl-accent-strong); cursor: pointer; padding: 0; }
.ctl-move-btn [data-lucide], .ctl-move-btn .lucide { width: 16px; height: 16px; }
.ctl-move-btn:hover:not(:disabled) { border-color: var(--ctl-accent); background: var(--ctl-soft); }
.ctl-move-btn:disabled { opacity: .3; cursor: default; }
@media (pointer: coarse), (max-width: 860px) {
  .ctl-move { flex-direction: row; gap: 4px; }
  .ctl-move-btn { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
  .ctl-selected-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .ctl-selected-row > [data-lucide], .ctl-selected-row > .lucide { display: none; }
  .ctl-selected-row > div:not(.ctl-move) { grid-column: 2 / 4; }
  .ctl-move { grid-column: 2; grid-row: 2; }
  .ctl-selected-row .remove-chapter-btn { grid-column: 3; grid-row: 2; }
}

/* Panel «Tu libro» siempre a mano en escritorio: entra entero en la pantalla, la lista de capítulos elegidos
   tiene su propio desplazamiento y el precio + «Continuar» quedan siempre visibles abajo. */
@media (min-width: 861px) {
  .ctl-book-panel { display: flex; flex-direction: column; max-height: calc(100vh - var(--ctl-header-h) - 32px); overflow-y: auto; }
  .ctl-book-panel > * { flex-shrink: 0; }
  #selected-chapters-panel { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding-bottom: 12px; }
  #selected-chapters-list { max-height: none; overflow: visible; }
  #actions-panel { padding-top: 4px; background: var(--ctl-soft); border-top: 1px solid color-mix(in srgb, var(--ctl-accent) 22%, transparent); box-shadow: 0 -10px 18px rgba(8, 80, 70, .08); }
  #actions-panel .ctl-fine { font-size: 11.5px; margin-top: 3px; }
  #price-container { border-top: 0; padding-top: 10px; }
  .ctl-panel-buttons { margin-top: 10px; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .ctl-book-panel-head { padding-top: 10px; padding-bottom: 10px; }
  .ctl-book-panel-title { padding-top: 10px; padding-bottom: 10px; }
  #selected-chapters-panel > p { display: none; }
}
.ctl-price-info { margin-top: 2px; }
#price-breakdown { margin-top: 8px; font-weight: 500; }
#price-margin { margin-top: 2px; }
.ctl-price-info summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ctl-accent-strong); list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.ctl-price-info summary::-webkit-details-marker { display: none; }
.ctl-price-info summary::after { content: '+'; font-weight: 600; }
.ctl-price-info[open] summary::after { content: '–'; }
@media (pointer: coarse), (max-width: 860px) { .ctl-price-info summary { min-height: 44px; } }
/* El aviso de «Continuar» solo hace falta si no hay otro mensaje arriba */
.ctl-book-panel:has(#validation-message:not(.hidden)) .ctl-continue-hint { display: none; }
@media (min-width: 861px) { #selected-chapters-panel { min-height: 190px; } }

/* ---------- 32. DATOS DEL LIBRO (v5, sobre la estructura real) ---------- */
.ctl-container.ctl-narrow { max-width: calc(900px + 2 * var(--ctl-gutter)); }
#datos-libro .ctl-builder-head p.ctl-help { font-size: 14px; margin-top: 4px; }
.ctl-back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ctl-accent-strong); text-decoration: none; min-height: 32px; }
.ctl-back-link [data-lucide], .ctl-back-link .lucide { width: 16px; height: 16px; }
.ctl-back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ctl-data-form { padding-bottom: 64px; }

/* Resumen destacado */
.ctl-book-summary { background: var(--ctl-accent); color: #fff; border-radius: var(--ctl-radius-lg); padding: 22px 26px 24px; margin-bottom: 16px; box-shadow: var(--ctl-shadow-card); }
.ctl-book-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ctl-book-summary-head h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; color: #fff; }
.ctl-book-summary-head h2 [data-lucide], .ctl-book-summary-head h2 .lucide { width: 24px; height: 24px; opacity: .9; }
.ctl-book-summary-edit { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.ctl-book-summary-edit [data-lucide], .ctl-book-summary-edit .lucide { width: 15px; height: 15px; }
.ctl-book-summary-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ctl-book-summary-data > div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--ctl-radius-md); padding: 14px 16px; }
.ctl-book-summary-data dt { font-size: 14px; color: rgba(255, 255, 255, .88); margin-bottom: 4px; }
.ctl-book-summary-data dd { margin: 0; font-family: var(--ctl-display); font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.ctl-book-summary-data .is-price { background: #fff; border-color: #fff; }
.ctl-book-summary-data .is-price dt { color: var(--ctl-muted); }
.ctl-book-summary-data .is-price dd { color: var(--ctl-accent-strong); }
.ctl-book-summary-breakdown { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.ctl-book-summary-breakdown.is-margin { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .78); }

#datos-libro .ctl-card + .ctl-card { margin-top: 16px; }
.ctl-card-intro { color: var(--ctl-muted); margin: -8px 0 20px; }

/* Portadas (mismas clases que hoy: .cover-template, .selection-box, border-primary / border-border, .check-icon) */
.ctl-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cover-template { cursor: pointer; }
.cover-template > div { display: flex; justify-content: center; }
.selection-box { position: relative; width: min(100%, 210px); padding: 7px; background: #fff; border: 2px solid var(--ctl-line); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.selection-box img { display: block; width: 100%; height: auto; aspect-ratio: 301 / 393; object-fit: cover; border-radius: 6px; }
@media (hover: hover) { .cover-template:hover .selection-box.border-border { border-color: color-mix(in srgb, var(--ctl-accent) 50%, var(--ctl-line)); transform: translateY(-3px); } }
.selection-box.border-primary { border-color: var(--ctl-accent); background: var(--ctl-soft); box-shadow: 0 0 0 4px rgba(8, 127, 117, .16), var(--ctl-shadow-card); }
.check-icon { position: absolute; top: -13px; right: -13px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-accent); color: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(21, 50, 71, .2); }
.check-icon [data-lucide], .check-icon .lucide, .check-icon svg { width: 16px; height: 16px; }

/* Sección 02: diseño + color + datos impresos (ttapas → public/assets/covers/) */
.ctl-tapa-card { padding: 30px 32px; }
.ctl-tapa-sub { margin: -6px 0 24px; font-size: 15px; color: var(--ctl-muted); }
.ctl-tapa-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 44px; align-items: start; }
.ctl-tapa-left { min-width: 0; }
.ctl-tapa-block { margin-top: 26px; }
.ctl-tapa-block:first-child { margin-top: 0; }
.ctl-tapa-label { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--ctl-ink); }
.ctl-tapa-label small { font-weight: 500; color: var(--ctl-muted); }

/* Diseños: 4 miniaturas en fila, nombre debajo; seleccionado con borde y nombre en color */
.ctl-tapa-designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctl-tapa-design { position: relative; padding: 0; background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: center; min-width: 0; }
.ctl-tapa-design img { display: block; width: 100%; height: auto; aspect-ratio: 301 / 393; object-fit: cover; border: 2px solid var(--ctl-line); border-radius: 9px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
@media (hover: hover) { .ctl-tapa-design:hover img { border-color: color-mix(in srgb, var(--ctl-accent) 50%, var(--ctl-line)); transform: translateY(-2px); } }
.ctl-tapa-design.is-selected img { border-color: var(--ctl-accent); box-shadow: 0 0 0 3px rgba(8, 127, 117, .14); }
.ctl-tapa-design-name { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ctl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-tapa-design.is-selected .ctl-tapa-design-name { color: var(--ctl-accent-strong); }

/* Colores: círculos con nombre debajo del seleccionado */
.ctl-tapa-colors { display: flex; flex-wrap: wrap; gap: 10px 0; }
.ctl-tapa-color-item { display: flex; flex-direction: column; align-items: center; width: 52px; }
.ctl-tapa-color { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(21, 50, 71, .14), 0 0 0 3px var(--ctl-panel), 0 0 0 4px transparent; cursor: pointer; transition: transform .15s ease; }
@media (hover: hover) { .ctl-tapa-color:hover { transform: scale(1.12); } }
.ctl-tapa-color.is-selected { box-shadow: inset 0 0 0 1px rgba(21, 50, 71, .14), 0 0 0 2px var(--ctl-panel), 0 0 0 4px var(--ctl-accent); }
.ctl-tapa-color-name { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--ctl-accent-strong); line-height: 1.2; visibility: hidden; }
.ctl-tapa-color-item:has(.ctl-tapa-color.is-selected) .ctl-tapa-color-name { visibility: visible; }
.ctl-tapa-color:focus-visible, .ctl-tapa-design:focus-visible, .ctl-tapa-tab:focus-visible { outline: 2px solid var(--ctl-accent); outline-offset: 2px; }

/* Datos en la tapa: casillas + inputs crema redondeados, ancho de la columna izquierda */
.ctl-tapa-optional { display: grid; gap: 18px; max-width: 420px; }
.ctl-tapa-opt .ctl-check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14.5px; font-weight: 500; color: var(--ctl-ink); cursor: pointer; }
.ctl-tapa-opt .ctl-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ctl-accent); cursor: pointer; flex-shrink: 0; }
.ctl-tapa-opt .ctl-input { background: var(--ctl-canvas); border-color: var(--ctl-line); border-radius: 10px; padding: 11px 14px; font-size: 15px; color: var(--ctl-ink); }
.ctl-tapa-opt .ctl-input::placeholder { color: #9aa5aa; }
.ctl-tapa-opt .ctl-input:disabled { opacity: .55; cursor: not-allowed; }
.ctl-tapa-opt .ctl-input:focus { background: #fff; border-color: var(--ctl-accent); }

/* Columna derecha: tabs pill + preview con sombra + nota de impresión */
.ctl-tapa-right { display: flex; flex-direction: column; align-items: center; }
.ctl-tapa-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--ctl-soft); border: 1px solid var(--ctl-line); border-radius: 999px; align-self: flex-start; }
.ctl-tapa-tab { padding: 7px 20px; font-size: 13.5px; font-weight: 600; color: var(--ctl-muted); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ctl-tapa-tab.is-active { background: #fff; color: var(--ctl-ink); box-shadow: 0 1px 3px rgba(21, 50, 71, .14); }
.ctl-tapa-preview { width: 100%; max-width: 330px; margin-top: 16px; }
.ctl-tapa-preview img { display: none; width: 100%; height: auto; border: 1px solid var(--ctl-line); border-radius: 10px; box-shadow: var(--ctl-shadow-card); }
.ctl-tapa-preview img[src]:not([src=""]) { display: block; }
.ctl-tapa-print { margin-top: 16px; max-width: 330px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ctl-muted); }

@media (max-width: 900px) {
  .ctl-tapa-card { padding: 22px 18px; }
  .ctl-tapa-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ctl-tapa-right { order: -1; } /* preview arriba en mobile */
  .ctl-tapa-preview, .ctl-tapa-print { max-width: 260px; }
}
@media (max-width: 480px) {
  .ctl-tapa-designs { gap: 8px; }
  .ctl-tapa-design-name { font-size: 11px; }
  .ctl-tapa-colors { gap: 8px 0; }
  .ctl-tapa-color-item { width: 46px; }
}

#datos-libro #validation-message { margin: 18px 0 0; padding: 0; background: none; border: 0; display: flex; justify-content: center; }
#datos-libro #validation-message p { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: #6e4100; background: var(--ctl-warning-bg); padding: 8px 14px; border-radius: 999px; }
#datos-libro #validation-message [data-lucide], #datos-libro #validation-message .lucide { width: 17px; height: 17px; }
.ctl-final-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-left: 4px solid #d48a00; border-radius: var(--ctl-radius-sm); }
.ctl-final-note p { margin: 0; font-size: 15px; color: var(--ctl-ink); }
.ctl-final-note > [data-lucide], .ctl-final-note > .lucide { width: 20px; height: 20px; color: #b37400; flex-shrink: 0; margin-top: 1px; }
.ctl-form-nav { align-items: center; }
.ctl-form-nav-main { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ctl-form-nav-main .ctl-ghost { order: -1; }

/* Cartel (#publish-dialog y #chapters-dialog son <div>, no <dialog>: se posicionan a mano) */
#publish-dialog-backdrop, #chapters-dialog-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(21, 50, 71, .5); backdrop-filter: blur(2px); }
#publish-dialog, #chapters-dialog { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; overflow-y: auto; animation: ctl-pd-in .18s ease-out; }
@keyframes ctl-pd-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
#publish-dialog-summary { color: var(--ctl-muted); }
#publish-dialog-summary .ctl-modal-summary { display: block; margin-bottom: 12px; color: var(--ctl-ink); }
#publish-dialog-summary > strong { color: var(--ctl-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #publish-dialog, #chapters-dialog { animation: none; } }

@media (max-width: 760px) {
  .ctl-book-summary { padding: 18px 16px; }
  .ctl-book-summary-data { grid-template-columns: 1fr; gap: 8px; }
  .ctl-book-summary-data > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; }
  .ctl-book-summary-data dt { margin: 0; }
  .ctl-book-summary-data dd { font-size: 22px; }
  .ctl-covers { gap: 12px; }
  .selection-box { padding: 4px; border-radius: 9px; }
  .check-icon { width: 28px; height: 28px; top: -10px; right: -10px; }
  .ctl-form-nav { flex-direction: column-reverse; align-items: stretch; }
  .ctl-form-nav-main { flex-direction: column; align-items: stretch; }
  .ctl-form-nav-main .ctl-ghost { order: 1; }
  .ctl-form-nav .ctl-primary, .ctl-form-nav .ctl-secondary, .ctl-form-nav .ctl-ghost { width: 100%; justify-content: center; }
}
@media (pointer: coarse), (max-width: 860px) { .ctl-back-link, .ctl-book-summary-edit { min-height: 44px; } }

.ctl-avatar [data-lucide], .ctl-avatar .lucide { width: 17px; height: 17px; }
a.ctl-user { text-decoration: none; }

/* ---------- 33. LOGO ORIGINAL (v5.1) ----------
   Se vuelve al logo actual (logo-horiz-menu.png, 116 × 91 px). Las clases .ctl-brand-mark / -name / -by quedan sin uso.
   ⚠ El PNG actual es chico: en pantallas retina se ve algo borroso. Conviene pedir una versión @2x (232 × 182) o SVG. */
.ctl-brand { gap: 0; }
.ctl-brand-logo { display: block; height: 58px; width: auto; }
.ctl-footer .ctl-brand-logo { height: 72px; }
.ctl-auth-side .ctl-brand { background: #fff; border-radius: 14px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); align-self: flex-start; }
.ctl-auth-side .ctl-brand-logo { height: 62px; }
@media (max-width: 860px) { .ctl-brand-logo { height: 50px; } }
@media (max-width: 560px) { .ctl-brand-logo { height: 46px; } .ctl-footer .ctl-brand-logo { height: 60px; } }

/* ---------- 34. v5.1: sellos en datos clave, plazos después del enlace ---------- */
.ctl-benefit--sellos { grid-template-columns: 1fr; gap: 10px; }
.ctl-sellos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctl-sellos img { height: 26px; width: auto; display: block; }
.ctl-cal-after { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--ctl-line); }
.ctl-cal-after-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ctl-muted); margin: 0 0 8px; }
.ctl-cal-phases { display: flex; gap: 4px; }
.ctl-cal-phase { flex-basis: 0; min-width: 0; padding: 10px 12px; border-radius: 8px; color: #fff; }
.ctl-cal-phase b { display: block; font-size: 14px; font-weight: 600; }
.ctl-cal-phase span { display: block; font-size: 12.5px; line-height: 1.35; opacity: .92; margin-top: 2px; }
.ctl-cal-phase.is-compra { background: var(--ctl-accent-2-strong); }
.ctl-cal-phase.is-imprenta { background: var(--ctl-ink); }
.ctl-cal-phase.is-entrega { background: var(--ctl-accent); }
@media (max-width: 640px) {
  .ctl-cal-phases { flex-direction: column; }
  .ctl-cal-phase { flex-grow: 1 !important; }
}

/* Autorizaciones obligatorias dentro del cartel de confirmación (v5.1) */
.ctl-legal-check { margin: 18px 0 0; padding: 14px 16px 4px; border: 1px solid var(--ctl-line); border-left: 4px solid var(--ctl-ink); border-radius: var(--ctl-radius-sm); background: var(--ctl-canvas); }
.ctl-legal-check legend { padding: 0 6px; margin-left: -6px; font-size: 14px; font-weight: 600; color: var(--ctl-ink); }
.ctl-legal-check .ctl-check-row { font-size: 14px; color: var(--ctl-ink); cursor: pointer; }
.ctl-legal-check .ctl-check-row strong { font-weight: 600; }
.ctl-legal-check a { color: var(--ctl-accent-strong); }
.ctl-legal-hint { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 13px; color: var(--ctl-muted); }
.ctl-legal-hint [data-lucide], .ctl-legal-hint .lucide { width: 15px; height: 15px; }
#publish-dialog-confirm:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (pointer: coarse), (max-width: 860px) {
  .ctl-legal-check .ctl-check-row { min-height: 44px; }
  .ctl-legal-check .ctl-check-row input[type="checkbox"] { width: 24px; height: 24px; }
}

/* ---------- 35. PÁGINAS SUMADAS (v5.2): perfil, error 404 y visor FlipBook ---------- */
/* Perfil */
.ctl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.ctl-grid-3 > .ctl-field:last-child:nth-child(3n + 1) { grid-column: 1 / 2; }
@media (max-width: 760px) { .ctl-grid-3 { grid-template-columns: 1fr; } .ctl-grid-3 > .ctl-field:last-child { grid-column: auto; } }
.ctl-profile-card + .ctl-profile-card { margin-top: 16px; }
#perfil { padding-bottom: 64px; }
.ctl-card-title--sub { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--ctl-line); }
.ctl-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ctl-account-actions { display: grid; gap: 10px; }
.ctl-account-action { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; background: var(--ctl-canvas); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-md); cursor: pointer; font: inherit; color: var(--ctl-ink); }
.ctl-account-action:hover { border-color: var(--ctl-accent); background: var(--ctl-soft); }
.ctl-account-action > span:nth-child(2) { flex: 1; min-width: 0; }
.ctl-account-action strong { display: block; font-weight: 600; font-size: 15px; }
.ctl-account-action small { display: block; color: var(--ctl-muted); font-size: 13px; }
.ctl-account-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ctl-soft); color: var(--ctl-accent-strong); flex-shrink: 0; }
.ctl-account-icon [data-lucide], .ctl-account-icon .lucide { width: 19px; height: 19px; }
.ctl-account-action > .lucide:last-child, .ctl-account-action > [data-lucide]:last-child { width: 18px; height: 18px; color: var(--ctl-muted); }
.ctl-account-action.is-danger strong { color: var(--ctl-error); }
.ctl-account-action.is-danger .ctl-account-icon { background: var(--ctl-error-bg); color: var(--ctl-error); }
.ctl-account-action.is-danger:hover { border-color: var(--ctl-error); background: var(--ctl-error-bg); }
/* Ventanas de perfil (div.hidden → visible, igual que hoy) */
.ctl-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(21, 50, 71, .5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ctl-overlay.hidden { display: none !important; }
.ctl-modal--inline { position: relative; margin: 0; width: min(100%, 460px); max-height: 90vh; overflow-y: auto; }
.ctl-modal-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 8px; font-size: 24px; line-height: 1; color: var(--ctl-muted); cursor: pointer; }
.ctl-modal-x:hover { background: var(--ctl-canvas); color: var(--ctl-ink); }
.ctl-modal--inline p { margin-bottom: 14px; }
.ctl-modal-icon.is-danger { background: var(--ctl-error-bg); color: var(--ctl-error); }
.ctl-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--ctl-radius-md); border: 0; background: var(--ctl-error); color: #fff; font: 600 15px/1 var(--ctl-font); cursor: pointer; }
.ctl-danger:hover { filter: brightness(.92); }
@media (pointer: coarse), (max-width: 860px) { .ctl-modal-x { width: 44px; height: 44px; top: 8px; right: 8px; } }

/* Error 404 */
.ctl-error-page { padding: 64px 0 80px; }
.ctl-error-card { max-width: 520px; margin: 0 auto; text-align: center; background: var(--ctl-panel); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-xl); padding: 36px 28px 34px; box-shadow: var(--ctl-shadow-card); display: grid; justify-items: center; gap: 10px; }
.ctl-error-logo { height: 72px; width: auto; }
.ctl-error-code { margin: 4px 0 0; font-family: var(--ctl-display); font-size: 88px; line-height: 1; letter-spacing: -.05em; color: var(--ctl-accent); }
.ctl-error-card .ctl-h2 { margin: 0; }
.ctl-error-card p:not(.ctl-error-code) { color: var(--ctl-muted); max-width: 40ch; margin: 0 0 8px; }

/* Visor FlipBook: se deja su HTML, su JS y su flipbook.css. Solo se reasignan sus variables a la paleta nueva.
   «:root .flip-fov» gana aunque flipbook.css se cargue después. */
:root .flip-fov {
  --flip-bg: var(--ctl-canvas);
  --flip-surface: var(--ctl-panel);
  --flip-surface2: #efe9dc;
  --flip-border: var(--ctl-line);
  --flip-accent: var(--ctl-accent);
  --flip-accent2: var(--ctl-accent-strong);
  --flip-text: var(--ctl-ink);
  --flip-text2: var(--ctl-muted);
  --flip-text3: #7d8a90;
  --flip-sh: var(--ctl-shadow-card);
  font-family: var(--ctl-font);
}
:root .flip-ftb-book { font-family: var(--ctl-display); font-weight: 500; font-size: 1.1rem; }
:root .flip-fbtn:focus-visible, :root .flip-fcls:focus-visible, :root .flip-th:focus-visible { outline: 3px solid color-mix(in srgb, var(--ctl-accent) 45%, transparent); outline-offset: 2px; }
/* FlipBook en pantallas táctiles: botones de 44 px y número de página a 16 px (evita el zoom automático del iPhone) */
@media (pointer: coarse), (max-width: 860px) {
  :root .flip-fbtn, :root .flip-fcls { min-height: 44px; min-width: 44px; }
  :root .flip-fpinp { height: 44px; }
  :root .flip-fpinp input { font-size: 16px; }
}
@media (pointer: coarse), (max-width: 860px) {
  :root .flip-mobile-nav-bar button { width: 44px; height: 44px; }
  :root .flip-th { min-width: 44px; }
  .ctl-profile-card .ctl-check-row { min-height: 44px; align-items: center; }
}

/* ---------- 36. v5.3: estado «Cerrado» en Mis libros (estado real «deshabilitado») ---------- */
.ctl-status--closed { background: #eef0f1; color: #5e6c73; }
.ctl-book-row.is-closed .ctl-book-info strong, .ctl-book-row.is-closed .ctl-book-detail { color: var(--ctl-muted); }
.ctl-timeline.is-closed span.is-on { background: #b9c2c6; }

/* ---------- 37. v5.3: dirección de entrega en Datos del libro (ver también el final de la sección 38) ---------- */
#datos-libro .ctl-help { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
#datos-libro .ctl-help [data-lucide], #datos-libro .ctl-help .lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ctl-accent); }
.ctl-modal-delivery { display: inline-flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-weight: 500; }
.ctl-modal-delivery [data-lucide], .ctl-modal-delivery .lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--ctl-accent); }
.ctl-delivery-line { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 14px; color: var(--ctl-ink); }

.ctl-delivery-line [data-lucide], .ctl-delivery-line .lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ctl-accent); }

/* /libro-listo: portada elegida + datos impresos en la tapa */
.ctl-done-cover { width: 96px; height: auto; display: block; border: 1px solid var(--ctl-line); border-radius: 6px; box-shadow: 5px 7px 12px rgba(28, 50, 43, .16); }
.ctl-tapa-datos-line { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 14px; color: var(--ctl-ink); }
.ctl-tapa-datos-line [data-lucide], .ctl-tapa-datos-line .lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ctl-accent); }

/* ---------- 38. v5.4: Selección · combo de años, búsqueda en contenidos y resaltado celeste ---------- */
:root { --ctl-hl: #c9e8fb; --ctl-hl-ink: #0b4a6f; }
/* Resaltado de las palabras encontradas (fondo celeste) */
mark.ctl-hl { background: var(--ctl-hl); color: inherit; border-radius: 2px; padding: 0; box-shadow: 0 1px 0 #7cc4ee; }
/* Aviso cuando la coincidencia está en los contenidos (el desplegable viene abierto) */
.ctl-match-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--ctl-hl-ink); }
.ctl-match-note [data-lucide], .ctl-match-note .lucide { width: 14px; height: 14px; flex-shrink: 0; }
.ctl-match-note + .contents-dropdown.open { margin-top: 6px; border-left-color: #7cc4ee; }
/* Año del capítulo, al lado del libro */
.ctl-chapter-year { color: var(--ctl-muted); font-weight: 500; white-space: nowrap; }
/* Sin resultados */
.ctl-empty strong { display: block; color: var(--ctl-ink); margin-bottom: 4px; }
.ctl-empty span { display: block; }
/* v5.4: dirección de entrega simplificada (desplegables de escuela + texto abierto) */
.ctl-textarea { resize: vertical; line-height: 1.45; font-family: inherit; }
.ctl-textarea[aria-invalid="true"], .ctl-select[aria-invalid="true"] { border-color: var(--ctl-error); background-color: #fff; }
.ctl-field-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--ctl-muted); }

/* ---------- 39. Mis libros · modal de capítulos incluidos ---------- */
#chapters-dialog { max-height: 88vh; overflow-y: auto; }
.ctl-chapters-list { display: grid; gap: 10px; margin: 16px 0 4px; }
.ctl-chapter-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; background: var(--ctl-canvas); border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-sm); }
.ctl-chapter-num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ctl-soft); color: var(--ctl-accent-strong); font-size: 13px; font-weight: 600; }
.ctl-chapter-row p { margin: 0; font-size: 15px; color: var(--ctl-ink); }
.ctl-chapter-row small { display: block; font-size: 13px; color: var(--ctl-muted); margin-top: 2px; }
.ctl-chapter-row .contents-dropdown ul { margin: 0; padding-left: 16px; }
.ctl-chapter-row .contents-dropdown li { font-size: 14px; color: var(--ctl-muted); margin-bottom: 4px; }

/* ---------- 40. Selección · rendimiento sin cambiar la UI ---------- */
/* El navegador omite el render de tarjetas fuera de pantalla (listas de 100+ capítulos). */
.ctl-chapter { content-visibility: auto; contain-intrinsic-size: auto 140px; }
/* ---------- 7b. HERO CON TAPA REAL (v5.5) ----------
   Reemplaza la tapa dibujada con CSS por la imagen de una tapa real del sistema.
   Mantiene el tilt 3D, la sombra y los dos carteles flotantes. */
.ctl-book.ctl-book--tapa {
  width: 264px; height: 346px;            /* proporcion real 210 x 275 mm */
  padding: 0; background: #fff;
  border-radius: 3px 7px 7px 3px;
}
.ctl-book--tapa .ctl-book-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El ::after de la tapa dibujada (el arco coral) pasa a ser el brillo del lomo y del papel */
.ctl-book.ctl-book--tapa::after {
  content: ''; position: absolute; inset: 0; width: auto; height: auto;
  border: 0; border-radius: inherit; transform: none; opacity: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24) 0, rgba(255, 255, 255, .22) 4px, rgba(0, 0, 0, .10) 8px, rgba(0, 0, 0, 0) 16px),
    linear-gradient(155deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 38%);
}
/* Carteles: se corren a zonas vacias de la tapa para no tapar titulo, nombres ni logos */
.ctl-hero-art--tapa .ctl-note-a { top: 70px; }
.ctl-hero-art--tapa .ctl-note-b { bottom: 86px; }