/* El Padrenuestro, palabra por palabra — se apoya en styles.css */

.pn { --d: #ffd58a; --n: #fff6e6; --a: #f4a08c; }

.pn-back {
  position: fixed; z-index: 60; top: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 38px); height: 46px;
  display: flex; align-items: center; gap: 10px; color: var(--ui); text-decoration: none; transition: color .5s;
}
.pn-back i { font: italic 400 1.25rem/1 var(--serif); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.pn-back span { transition: transform .5s var(--ease); }
.pn-back:hover span { transform: translateX(-6px); }

/* ── cabecera ── */
.pn-hero { padding: clamp(130px, 22vh, 220px) 0 clamp(50px, 9vh, 110px); }
.pn-title { font: 400 clamp(2.5rem, 7.3vw, 8rem)/.98 var(--serif); letter-spacing: -.04em; margin-bottom: clamp(34px, 6vh, 70px); }
.pn-title span, .pn-title em { display: block; }
.pn-title span { animation: pnrise 1.3s var(--ease) .1s both; }
.pn-title em { color: var(--coral-deep); padding-left: clamp(0px, 7vw, 130px); animation: pnrise 1.3s var(--ease) .28s both; }
@keyframes pnrise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.pn-hero__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 100px); align-items: end; }
.pn-lede { font: 300 clamp(1.15rem, 1.7vw, 1.5rem)/1.5 var(--sans); letter-spacing: -.015em; max-width: 34rem; }
.pn-lede b { font: italic 400 1.15em/1 var(--serif); color: var(--coral-deep); }
.pn-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(21, 38, 77, .35); }
.pn-facts li { padding: 16px 0 0; }
.pn-facts b { display: block; font: 400 clamp(2rem, 3.6vw, 3.4rem)/1 var(--serif); letter-spacing: -.03em; }
.pn-facts span { font: 600 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }

/* ── tres claves ── */
.pn-keys { padding: clamp(40px, 8vh, 90px) 0 clamp(60px, 11vh, 130px); }
.pn-kicker { font: 600 .72rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin-bottom: clamp(26px, 4vh, 44px); }
.pn-keys__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.6vw, 60px); }
.pn-keys article { border-top: 1px solid rgba(21, 38, 77, .3); padding-top: 20px; }
.pn-keys article:nth-child(2) { transition-delay: .1s; }
.pn-keys article:nth-child(3) { transition-delay: .2s; }
.pn-keys span { font: italic 400 1.4rem/1 var(--serif); color: var(--coral-deep); }
.pn-keys h2 { font: 400 clamp(1.7rem, 2.8vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.02em; margin: .35em 0 .5em; }
.pn-keys p { font-size: .97rem; color: var(--navy-soft); }
.pn-keys p em { font: italic 400 1.08em/1 var(--serif); color: var(--navy); }

/* ── el atril ── */
.atril { padding: clamp(30px, 6vh, 70px) 0 clamp(70px, 12vh, 150px); scroll-margin-top: 20px; }
.atril__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 350px); gap: clamp(30px, 5vw, 90px); align-items: start; }

.verso { padding: clamp(26px, 5vh, 54px) 0; border-top: 1px solid rgba(21, 38, 77, .28); }
.verso:last-child { border-bottom: 1px solid rgba(21, 38, 77, .28); }
.verso header { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(12px, 2vh, 22px); }
.verso header b { font: italic 400 1.15rem/1 var(--serif); color: var(--coral-deep); min-width: 2.4em; }
.verso__play {
  background: none; border: 1px solid rgba(21, 38, 77, .45); border-radius: 999px; padding: .55em 1.1em .55em .95em; cursor: pointer;
  font: 600 .62rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; transition: background .3s, color .3s, transform .4s var(--ease);
}
.verso__play::before { content: "♪"; margin-right: .6em; font-size: 1.2em; letter-spacing: 0; }
.verso__play:hover { background: var(--navy); color: var(--cream); transform: translateY(-2px); }
.no-voice .verso__play, .no-voice .ficha__play { display: none; }
.verso__es { font: 400 clamp(1.9rem, 3.7vw, 3.5rem)/1.2 var(--serif); letter-spacing: -.025em; }
.verso__en { margin-top: .9em; font: italic 400 1.1rem/1.4 var(--serif); color: var(--navy-soft); transition: opacity .5s; }
.atril:not([data-lens="sentido"]) .verso__en { opacity: 0; }

/* cada palabra */
.pw-wrap { display: inline-flex; align-items: flex-start; white-space: nowrap; margin: 0 .04em .18em 0; }
.pw {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1em; padding: .04em .14em .1em; margin: 0 -.06em; border: 0; border-radius: .16em;
  background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  transition: background .45s, opacity .45s, transform .45s var(--ease), box-shadow .45s;
}
.pw:hover { transform: translateY(-3px); }
.pw.is-sel { background: var(--navy) !important; color: var(--cream); box-shadow: 0 12px 24px -12px rgba(21, 38, 77, .7); opacity: 1 !important; }
.pw.is-sel .pw__sub { color: var(--cream); }
.pw__top { display: block; }
.pw__syl, .pw__mem { display: none; }
.pw__syl i { font-style: normal; opacity: .4; margin: 0 .04em; }
.tonica { font-weight: 600; color: var(--coral-deep); }
.pw.is-sel .tonica { color: var(--gold); }
.pw__p { align-self: flex-start; }
.pw__sub {
  display: block; min-height: 1.3em; font: 500 .74rem/1.3 var(--sans); letter-spacing: .02em; color: var(--navy-soft); white-space: nowrap;
}
.pw__en, .pw__tag { display: none; }

/* lente: sentido */
[data-lens="sentido"] .pw__en { display: inline; animation: pnsub .5s var(--ease) both; }
@keyframes pnsub { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* lente: gramática — subrayadores por papel */
[data-lens="gramatica"] .pw--d { background: var(--d); }
[data-lens="gramatica"] .pw--n { background: var(--n); }
[data-lens="gramatica"] .pw--a { background: var(--a); }
[data-lens="gramatica"] .pw--m { box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
[data-lens="gramatica"] .pw--e { opacity: .42; }
[data-lens="gramatica"] .pw__tag { display: inline; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .6rem; animation: pnsub .5s var(--ease) both; }

/* lente: sonido */
[data-lens="sonido"] .pw__es { display: none; }
[data-lens="sonido"] .pw__syl { display: inline; }

/* lente: memoria */
[data-lens="memoria"] .pw.is-hid .pw__es { display: none; }
[data-lens="memoria"] .pw.is-hid .pw__mem { display: inline; opacity: .45; letter-spacing: .02em; }
[data-lens="memoria"] .pw.is-hid.is-peek .pw__es { display: inline; color: var(--coral-deep); }
[data-lens="memoria"] .pw.is-hid.is-peek .pw__mem { display: none; }

/* columna de herramientas */
.atril__side { position: sticky; top: clamp(78px, 11vh, 110px); display: grid; gap: 14px; }
.lentes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lentes__t { grid-column: 1 / -1; font: 600 .64rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.lente {
  display: block; text-align: left; padding: 12px 14px 13px; border: 1px solid rgba(21, 38, 77, .4); border-radius: 3px; background: rgba(255, 246, 230, .35);
  cursor: pointer; transition: background .4s, color .4s, transform .5s var(--ease), border-color .4s;
}
.lente b { display: block; font: italic 400 1.3rem/1.1 var(--serif); }
.lente span { font: 600 .56rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.lente:hover { transform: translateY(-2px); border-color: var(--navy); }
.lente.is-on { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.lente-extra { display: none; padding: 14px 16px; background: rgba(255, 246, 230, .55); border-radius: 3px; font-size: .84rem; line-height: 1.5; }
[data-lens="gramatica"] .lente-extra--gramatica, [data-lens="sonido"] .lente-extra--sonido, [data-lens="memoria"] .lente-extra--memoria { display: block; animation: pnsub .5s var(--ease) both; }
.leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: .74rem; }
.leyenda b { font: italic 400 1.05rem/1 var(--serif); margin-right: .35em; }
.k { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.k--d { background: var(--d); } .k--n { background: var(--n); box-shadow: inset 0 0 0 1px rgba(21, 38, 77, .2); } .k--a { background: var(--a); }
.k--m { box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
.lente-extra--memoria label { display: flex; justify-content: space-between; font: 600 .64rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.lente-extra--memoria output { font: italic 400 1.05rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--coral-deep); }
.lente-extra--memoria input { width: 100%; margin: 14px 0 8px; accent-color: var(--navy); }
.lente-extra--memoria p { opacity: .75; font-size: .8rem; }

.ficha {
  position: relative; background: var(--paper); padding: 22px 22px 24px; min-height: 180px; transform: rotate(-.8deg);
  box-shadow: 0 2px 3px rgba(21, 38, 77, .12), 0 34px 50px -30px rgba(21, 38, 77, .55);
}
.ficha.is-open .ficha__body { animation: pnsub .55s var(--ease) both; }
.ficha__x { display: none; }
.ficha__hint { font: 600 1.5rem/1.2 var(--hand); color: var(--coral-deep); padding-top: 40px; text-align: center; }
.ficha__role { display: inline-block; font: 600 .58rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .6em .8em; border-radius: 2px; margin-bottom: 12px; }
.ficha__role--d { background: var(--d); } .ficha__role--n { background: #fff; box-shadow: inset 0 0 0 1px rgba(21, 38, 77, .2); } .ficha__role--a { background: var(--a); }
.ficha__role--m { box-shadow: inset 0 0 0 1px var(--navy); } .ficha__role--e { background: rgba(21, 38, 77, .08); }
.ficha__word { font: 400 clamp(2.2rem, 3.4vw, 3rem)/1 var(--serif); letter-spacing: -.03em; }
.ficha__syl { margin-top: 6px; font: 400 1.05rem/1.2 var(--sans); letter-spacing: .04em; }
.ficha__syl i { font-style: normal; opacity: .4; margin: 0 .1em; }
.ficha__en { margin-top: 12px; font: 600 1.7rem/1.1 var(--hand); color: var(--coral-deep); }
.ficha__note { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: rgba(21, 38, 77, .82); }
.ficha__play { margin-top: 16px; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; cursor: pointer; font: italic 400 1.1rem/1 var(--serif); }

/* ── cierre ── */
.pn-fin { padding: clamp(50px, 10vh, 130px) 0 clamp(90px, 16vh, 190px); }
.pn-fin__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: end; }
.pn-fin h2 { margin-bottom: .4em; }
.pn-fin__p { max-width: 27rem; color: rgba(21, 38, 77, .82); }
.pn-fin__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 2em; }
.pn-link { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; cursor: pointer; font: italic 400 1.15rem/1 var(--serif); }
.semana { border-top: 1px solid rgba(21, 38, 77, .4); }
.semana li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(21, 38, 77, .4); }
.semana b { font: italic 400 1.35rem/1 var(--serif); }
.semana span { font-size: .95rem; color: rgba(21, 38, 77, .85); }
.semana em { font: italic 400 1.08em/1 var(--serif); }
.pn-next { margin-top: clamp(70px, 12vh, 140px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.pn-next p { font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1.2 var(--serif); letter-spacing: -.02em; max-width: 30ch; }
.pn-pie .pie__verse { max-width: none; }

/* ── pantallas pequeñas ── */
@media (max-width: 900px) {
  .pn-hero__row, .pn-keys__grid, .pn-fin__grid { grid-template-columns: 1fr; }
  .atril__grid { grid-template-columns: 1fr; }
  .atril__side { position: static; order: -1; }
  .lentes { position: static; grid-template-columns: repeat(4, 1fr); }
  .lente { padding: 10px 8px; text-align: center; }
  .lente b { font-size: 1.02rem; }
  .lente span { display: none; }
  /* la ficha sube desde abajo */
  .ficha {
    position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px; min-height: 0; transform: translateY(130%); transition: transform .6s var(--ease);
    box-shadow: 0 -10px 60px rgba(21, 38, 77, .35);
  }
  .ficha.is-open { transform: none; }
  .ficha__x { display: block; position: absolute; right: 8px; top: 4px; background: none; border: 0; font-size: 1.9rem; line-height: 1; padding: 8px 12px; cursor: pointer; }
  .ficha__hint { display: none; }
}
@media (max-width: 640px) {
  .pn-back i { font-size: 1.05rem; }
  .lentes { gap: 5px; }
  .lente { padding: 10px 2px; min-width: 0; }
  .lente b { font-size: .9rem; }
  .pn-facts { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .pw__sub { font-size: .66rem; }
  .semana li { grid-template-columns: 6rem 1fr; }
}

/* ── para imprimir: una hoja de trabajo limpia ── */
@media print {
  .sky, .mark, .pn-back, .atril__side, .verso__play, .pn-fin, .pie, .pn-keys, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .pn-hero { padding: 0 0 20px; }
  .pn-title { font-size: 34pt; }
  .pn-title span, .pn-title em { animation: none; }
  .pn-hero__row { display: none; }
  .atril { padding: 0; }
  .atril__grid { display: block; }
  .verso { padding: 14px 0 34px; break-inside: avoid; border-color: #999; }
  .verso__es { font-size: 19pt; }
  .verso__en { opacity: 1 !important; font-size: 10pt; }
  .pw__es { display: inline !important; }
  .pw__syl, .pw__mem, .pw__tag { display: none !important; }
  .pw__en { display: inline !important; }
  .pw { background: none !important; color: #000 !important; opacity: 1 !important; box-shadow: none !important; }
}