:root {
  --peach: #fbd0a1; --peach-soft: #fde8d2; --teal: #00808d; --coral: #d9867e; --pink: #fbe3e4;
  --mint: #e3eff0; --green: #e3f1e8; --green-ink: #3f7f5b; --sun: #fdf0c8; --ink: #3a2a31; --ink-soft: #6b5560;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #efe6dc; color: var(--ink);
  font-family: "Shantell Sans", system-ui, sans-serif; font-variation-settings: "BNCE" 40, "INFM" 0;
  line-height: 1.5; font-size: 15px;
}
.bar {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 12px; background: rgba(239, 230, 220, .92); backdrop-filter: blur(8px);
}
.bar button, .bar a {
  font: 600 15px "Fredoka", sans-serif; border: 0; border-radius: 99px; padding: 10px 20px;
  cursor: pointer; text-decoration: none; color: var(--ink); background: #fff;
}
.bar button { background: var(--teal); color: #fff; box-shadow: 0 4px 0 #005f69; }
.bar a[aria-current] { background: var(--ink); color: #fff; }
.bar a.dl { background: var(--coral); color: #fff; box-shadow: 0 4px 0 #b4645c; }

.page {
  width: min(210mm, 100% - 24px); min-height: 297mm; margin: 18px auto; padding: 16mm 16mm 22mm;
  background: #fff; border-radius: 6px; box-shadow: 0 20px 40px -24px rgba(58, 42, 49, .4);
  position: relative; overflow: hidden;
}
h1 { font: 400 76px/0.95 "Delicious Handrawn", "Fredoka", cursive; color: var(--teal); margin: 0; }
h2 { font-size: 27px; line-height: 1.12; margin: 0 0 10px; font-variation-settings: "BNCE" 60, "INFM" 20; }
h3 { font-size: 17px; line-height: 1.2; margin: 0 0 5px; }
p { margin: 0 0 9px; }
ul, ol { margin: 0 0 8px; padding-left: 1.15em; }
li { margin: 3px 0; }
em.hi { font-style: normal; color: var(--teal); font-weight: 700; }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 600; color: var(--coral); margin-bottom: 6px; }
.intro { font-size: 16.5px; color: var(--ink-soft); max-width: 60ch; }

/* portada */
.cover { display: flex; flex-direction: column; }
.cover .kicker { font-size: 13px; }
.cover__sub { font-size: 30px; line-height: 1.1; font-weight: 700; margin: 10px 0 0; font-variation-settings: "BNCE" 80, "INFM" 20; }
.cover__img { margin: 26px auto 22px; width: 78%; }
.cover__img img { width: 100%; display: block; }
.cover__img.photo { border: 10px solid #fff; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; overflow: hidden; box-shadow: 0 18px 30px -20px rgba(58, 42, 49, .5); rotate: -1.5deg; }
.cover__img.blend img { mix-blend-mode: multiply; }
.cover .intro { font-size: 17.5px; }
.cover__for { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font: 600 13px "Fredoka", sans-serif; background: rgba(255, 255, 255, .7); border-radius: 99px; padding: 6px 14px; }
.t-peach { background: var(--peach); } .t-mint { background: var(--mint); } .t-green { background: var(--green); } .t-sun { background: var(--sun); }

.box { border-radius: 16px; padding: 14px 16px; margin: 0 0 11px; break-inside: avoid; }
.box > :last-child { margin-bottom: 0; }
.peach { background: var(--peach-soft); } .mint { background: var(--mint); } .pink { background: var(--pink); }
.green { background: var(--green); } .sun { background: var(--sun); }
.line { border: 2px dashed #e3cfc3; background: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.two > .box, .three > .box { margin: 0; }
.num { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.num b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font: 700 15px "Fredoka", sans-serif; }

/* para rellenar */
.frame { border: 3px dashed #e3cfc3; border-radius: 22px; display: grid; place-items: start center; padding-top: 10px; color: #c9b5ab; font-size: 18px; }
.write i { display: block; border-bottom: 1.5px solid #eadfd6; height: 30px; }
.write span { display: block; font-size: 14px; color: var(--ink-soft); padding-top: 8px; }
.fill { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: end; }
.fill i { border-bottom: 1.5px solid #eadfd6; height: 26px; }
.check { list-style: none; padding: 0; columns: 2; column-gap: 20px; }
.check li { break-inside: avoid; padding-left: 28px; position: relative; margin: 7px 0; }
.check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border: 2px solid var(--teal); border-radius: 5px; }
.say { list-style: none; padding: 0; }
.say li { background: #fff; border-radius: 12px; padding: 7px 12px; margin: 6px 0; }
.say li::before { content: "«"; color: var(--teal); font-weight: 700; } .say li::after { content: "»"; color: var(--teal); font-weight: 700; }

/* diccionario */
.dict dt { font: 400 30px/1 "Delicious Handrawn", cursive; color: var(--green-ink); margin-top: 10px; }
.dict dd { margin: 2px 0 0; }

/* emociones */
.faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; font-size: 13.5px; }
.faces svg { width: 100%; max-width: 86px; display: block; margin: 0 auto 4px; }

/* corazón para rellenar */
.heart { position: relative; width: 82%; margin: 6px auto 0; }
.heart svg { width: 100%; display: block; }

table.plan { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
table.plan th { text-align: left; width: 34%; font-size: 14.5px; padding: 10px 12px; border-radius: 12px 0 0 12px; vertical-align: top; }
table.plan td { border-bottom: 1.5px solid #eadfd6; }

.help { border-left: 5px solid var(--coral); background: var(--pink); }
.help strong { white-space: nowrap; }

.foot {
  position: absolute; left: 16mm; right: 16mm; bottom: 9mm; font-size: 10.5px; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 10px;
}

/* elegir guía */
.pick { display: grid; gap: 14px; margin-top: 26px; }
.pick a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; text-decoration: none; color: inherit; border-radius: 22px; padding: 20px 22px; }
.pick a h2 { margin: 0 0 4px; }
.pick a p { margin: 0; color: var(--ink-soft); }
.pick a span { font: 700 26px "Fredoka", sans-serif; color: var(--teal); }

@media (max-width: 640px) {
  .two, .three { grid-template-columns: 1fr; }
  .check { columns: 1; }
  .faces { grid-template-columns: repeat(3, 1fr); }
  .page { padding: 26px 20px 60px; min-height: 0; }
  h1 { font-size: 56px; }
  .foot { left: 20px; right: 20px; }
}
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .bar { display: none; }
  .page { width: 210mm; height: 297mm; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; page-break-after: always; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}