/* Portada en formato carta (borrador /inicio-borrador/) */
.page-carta { background: #F7F3EC; }
.ct { padding: 40px 16px 90px; }
.ct-letter {
  max-width: 680px; margin: 0 auto; padding: 56px 64px 64px;
  background: #FFFDF9; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 24px 60px -30px rgba(60, 45, 20, .35);
  font-size: 19px; font-weight: 500; line-height: 1.7; color: #000;
}
.ct-letter p { margin: 0 0 18px; }
.ct-letter b { font-weight: 700; }
.ct-letter a { color: var(--mk-blue, #1B5C9A); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Barra de lectura */
.ct-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.ct-progress span { display: block; height: 100%; background: #1B5C9A; transform: scaleX(0); transform-origin: 0 50%; }

.ct-meta { margin: 0 0 26px !important; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1B5C9A; }
.ct-meta span { color: #7A7064; font-weight: 600; }

.ct-hook { margin: 0 0 36px; font-family: "Gilda Display", serif; font-weight: 400; font-size: clamp(32px, 4.6vw, 44px); line-height: 1.18; color: #111; }
.ct-hook__main { display: block; text-align: center; }
.ct-hook__sub { display: block; font-size: .56em; line-height: 1.4; color: #1B5C9A; text-align: center; }
.ct-hook__main + .ct-hook__sub { margin-top: 16px; }

.ct-h { margin: 6px 0 22px; font-family: "Gilda Display", serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.25; color: #111; }
.ct-big { font-family: "Gilda Display", serif; font-size: clamp(24px, 3vw, 28px); line-height: 1.35; font-weight: 400; color: #111; }
.ct-list { padding-left: 18px; border-left: 3px solid #E4D9C8; color: #3A342C; }
.ct-aside { color: #6B6257; font-style: italic; }

/* Subrayado tipo rotulador */
.ct-letter mark { padding: 0 .1em; color: inherit; background: linear-gradient(transparent 58%, #CFE3F5 58%, #CFE3F5 92%, transparent 92%); }
/* Frases importantes y títulos de sección, centrados; subrayado azul más marcado en las frases grandes */
.ct-big, .ct-h { text-align: center; }
.ct-big { margin: 30px auto !important; max-width: 92%; }
.ct-big mark { background: linear-gradient(transparent 56%, #B5D3F0 56%, #B5D3F0 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.ct-sep { width: 60px; height: 0; margin: 42px auto; border: 0; border-top: 2px dotted #C9BBA5; }

.ct-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ct-steps span { padding: 6px 14px; border-radius: 999px; background: #F1ECE3; font-size: 16px; font-weight: 700; }
.ct-steps span + span::before { content: "→"; margin-right: 10px; margin-left: -4px; color: #A3927A; font-weight: 400; }
.ct-steps span:last-child { background: #14263A; color: #fff; }
.ct-steps span:last-child::before { color: #8FA7BF; }

/* Círculo miedo → tensión → dolor */
.ct-cycle { max-width: 340px; margin: 10px auto 26px; }
.ct-cycle svg { display: block; width: 100%; height: auto; overflow: visible; }
.ct-cycle__node circle { fill: #F1ECE3; stroke: #E4D9C8; stroke-width: 1.5; }
.ct-cycle__node text { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 700; fill: #000; }
.ct-cycle__node--dark circle { fill: #14263A; stroke: #14263A; }
.ct-cycle__node--dark text { fill: #fff; }
.ct-cycle__mid { font-family: "Gilda Display", serif; font-size: 17px; fill: #7A7064; }

.ct-talk { margin: 0 0 22px; padding: 18px 22px; border-radius: 14px; background: #F4EFE7; }
.ct-talk p { margin: 0 0 10px; font-size: 18px; }
.ct-talk p:last-child { margin: 0; }
.ct-talk b { color: #1B5C9A; }

.ct-photo { margin: 30px auto 34px; max-width: 420px; padding: 12px 12px 0; background: #fff; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.ct-photo img { display: block; width: 100%; height: auto; }
.ct-photo figcaption { padding: 12px 6px 16px; font-family: "Gilda Display", serif; font-size: 18px; line-height: 1.35; text-align: center; color: #3A342C; }

.ct-video { margin: 26px 0 30px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .4); }
.ct-checks { margin: 0 0 22px; padding: 0; list-style: none; }
.ct-checks li { position: relative; margin: 0 0 12px; padding-left: 34px; }
.ct-checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #1B5C9A; color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }

.ct-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px -30px 8px; }
.ct-wall figure { margin: 0; padding: 8px 8px 0; background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); }
.ct-wall figure:nth-child(1) { transform: rotate(-2deg); }
.ct-wall figure:nth-child(2) { transform: rotate(1.5deg) translateY(10px); }
.ct-wall figure:nth-child(3) { transform: rotate(-1deg); }
.ct-wall img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.ct-wall figcaption { padding: 8px 4px 10px; font-size: 13px; font-weight: 700; text-align: center; color: #3A342C; }

.ct-cta { margin: 30px 0 46px; text-align: center; }
.ct-btn { display: inline-block; padding: 18px 34px; border-radius: 999px; background: #FFA000; color: #000 !important; font-size: 18px; font-weight: 700; text-decoration: none !important; box-shadow: 0 10px 22px -10px rgba(255, 160, 0, .9); transition: transform .15s; }
.ct-btn:hover { transform: translateY(-2px); }
.ct-cta p { margin: 12px 0 0 !important; font-size: 14px; color: #6B6257; }

.ct-sign { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 30px; }
.ct-sign img { width: 96px; height: 96px; object-fit: cover; object-position: top; border-radius: 50%; background: #E9F1F9; }
.ct-sign p { margin: 0 !important; }
.ct-sign__name { font-family: "Gilda Display", serif; font-size: 44px; line-height: 1.1; color: #1B5C9A; }
.ct-sign__role { font-size: 14px; color: #6B6257; }

.ct-pd { padding-top: 22px; border-top: 1px solid #ECE3D5; font-size: 17px; }
.ct-pd p { margin: 0 0 12px; }

/* ---- Piezas extra (Sobre mí en formato carta) ---- */
.ct-photo--tilt { transform: rotate(-2deg); }
.ct-photo--tilt-r { transform: rotate(2deg); max-width: 360px; }

.ct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0 10px; }
.ct-stats div { padding: 18px 10px; border-radius: 14px; background: #14263A; color: #fff; text-align: center; }
.ct-stats b { display: block; font-family: "Gilda Display", serif; font-size: 34px; font-weight: 400; line-height: 1.1; color: #9CC6EE; }
.ct-stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; }

.ct-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 24px; padding: 0; list-style: none; }
.ct-tags li { padding: 8px 16px; border-radius: 999px; background: #F1ECE3; font-size: 15px; font-weight: 700; }

.ct-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 30px 0 10px; }
.ct-video--vertical { width: 100%; max-width: 300px; aspect-ratio: 5 / 9; margin: 0 auto; border: 0; border-radius: 14px; background: #14263A; }
.ct-book { margin: 0; text-align: center; }
.ct-book img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .4); }
.ct-book figcaption { margin-top: 14px; font-family: "Gilda Display", serif; font-size: 20px; line-height: 1.4; }
.ct-book figcaption a { font-family: "Poppins", sans-serif; font-size: 16px; }

.ct-h__sub { display: block; margin-top: 6px; font-size: .6em; line-height: 1.35; color: #6B6257; }
.ct-beliefs { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: cr; }
.ct-beliefs li { position: relative; margin: 0 0 14px; padding: 18px 20px 18px 64px; border-radius: 14px; background: #F4EFE7; counter-increment: cr; }
.ct-beliefs li::before { content: counter(cr); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: #1B5C9A; color: #fff; font-weight: 700; line-height: 32px; text-align: center; }
.ct-beliefs b { display: block; margin-bottom: 2px; }

.ct-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0 46px; }
.ct-path { display: flex; flex-direction: column; padding: 26px 24px; border: 2px solid #E4D9C8; border-radius: 18px; background: #fff; }
.ct-path--pro { border-color: #14263A; background: #14263A; color: #fff; }
.ct-path p { margin: 0 0 12px !important; font-size: 17px; }
.ct-path__who { font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1B5C9A; }
.ct-path--pro .ct-path__who { color: #9CC6EE; }
.ct-path__title { font-family: "Gilda Display", serif; font-size: 24px !important; line-height: 1.3; }
.ct-path .ct-btn { align-self: flex-start; margin-top: auto; padding: 14px 26px; font-size: 16px; }
.ct-path__alt { margin-top: 12px !important; font-size: 15px !important; }

@media (max-width: 700px) {
  .ct-stats { grid-template-columns: 1fr 1fr; }
  .ct-duo, .ct-paths { grid-template-columns: 1fr; }
  .ct-path .ct-btn { align-self: stretch; text-align: center; }
}

/* Ordenador: carta más ancha y letra algo mayor para que no parezca un móvil */
@media (min-width: 1000px) {
  .ct { padding-top: 56px; }
  .ct-letter { max-width: 900px; padding: 72px 96px 80px; font-size: 21px; }
  .ct-hook { font-size: 50px; }
  .ct-hook__main, .ct-hook__sub { white-space: nowrap; }
  .ct-hook__sub { font-size: .5em; }
  .ct-h { font-size: 36px; }
  .ct-big { font-size: 31px; }
  .ct-talk p { font-size: 20px; }
  .ct-photo { max-width: 520px; }
  .ct-photo--tilt-r { max-width: 380px; }
  .ct-cycle { max-width: 420px; }
  .ct-wall { margin-left: -40px; margin-right: -40px; gap: 26px; }
  .ct-wall figcaption { font-size: 15px; }
  .ct-pd { font-size: 18px; }
}

@media (max-width: 700px) {
  .ct { padding: 0 0 60px; }
  .ct-letter { padding: 34px 20px 40px; border-radius: 0; box-shadow: none; font-size: 18px; }
  .ct-wall { grid-template-columns: 1fr; margin: 10px 20px 8px; gap: 26px; }
  .ct-wall figure:nth-child(2) { transform: rotate(1.5deg); }
  .ct-photo { max-width: 92%; }
  .ct-sign__name { font-size: 38px; }
}