/* Landing del libro «Método Ave Fénix» · sobre el mundo de /maf/ (css/maf.css): el libro junto al fuego, el libro que gira
   (CSS 3D, sin librerías), los cuatro cuerpos del índice real, los ocho pasos de la contraportada encendidos por el hilo
   de luz, el índice como dos páginas de papel. v1 · 22 oct 2026 */

/* ---------- 1 · Portada ---------- */
.libro-hero { padding-block: clamp(84px, 11vh, 110px) 56px; }
.libro-luz { background-image: url("../img/libro/luz.webp"); background-position: center top; opacity: 1; }
.libro-hero .hero-veil { background: radial-gradient(70% 70% at 50% 30%, rgba(248, 242, 230, 0), rgba(248, 242, 230, .55) 60%, var(--rock) 100%); }
.libro-hero-dentro { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.libro-hero-txt { display: grid; justify-items: start; text-align: left; }
.libro-hero-txt .crest { justify-items: start; }
.libro-hero h1 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); max-width: 34ch; }
.libro-hero .hook { margin-top: 16px; }
.libro-hero .hero-sub { margin-top: 14px; max-width: 50ch; }
.libro-hero .poco { color: var(--parchment); border-left: 1px solid var(--gold-lo); padding-left: 16px; }
.libro-hero .cta-row { justify-content: flex-start; }

/* El libro que gira: portada, contraportada, lomo y canto */
.libro-3d-marco { display: grid; justify-items: center; gap: 14px; }
.libro-3d { position: relative; width: min(62vw, 300px); aspect-ratio: 700 / 1096; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; perspective: 1400px; }
.libro-3d:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 10px; }
.libro-3d-cuerpo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--giro, -14deg)); transition: transform 1.1s var(--e); will-change: transform; animation: flotar 7s ease-in-out infinite alternate; }
@keyframes flotar { from { translate: 0 0; } to { translate: 0 -10px; } }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: block; overflow: hidden; }
.cara img { width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 40px 50px rgba(70, 55, 24, .4)); }
.cara.frente { transform: translateZ(5px); }
.cara.dorso { transform: rotateY(180deg) translateZ(5px); background: #F6F2E7; }
.cara.lomo { width: 10px; left: 50%; margin-left: -5px; transform: rotateY(-90deg) translateZ(calc(min(62vw, 300px) / 2)); background: linear-gradient(90deg, #ECE5D6, #F7F3EA 50%, #E4DCCB); display: grid; place-items: center; }
.cara.lomo i { display: none; font-family: var(--cinzel); font-style: normal; font-size: 6px; letter-spacing: .18em; text-transform: uppercase; color: #8A6528; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cara.canto { width: 10px; left: 50%; margin-left: -5px; transform: rotateY(90deg) translateZ(calc(min(62vw, 300px) / 2)); background: repeating-linear-gradient(90deg, #F3EBDD 0 1px, #D9CFB8 1px 2px); }
.libro-3d.vuelto .libro-3d-cuerpo { animation: none; transform: rotateY(180deg) scale(1.22); }
.libro-3d-pista { margin: 0; text-align: center; color: var(--muted-2); font-size: .62rem; }

/* ---------- 3 · Los cuatro cuerpos ---------- */
.cuerpos-libro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cuerpo-libro { display: grid; justify-items: center; gap: 6px; padding: 28px 18px 24px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(36, 20, 7, .5), rgba(18, 10, 6, .8)); color: var(--parchment); font-family: var(--serif); text-align: center; cursor: pointer; position: relative; transition: border-color .4s, transform .5s var(--e), box-shadow .5s; }
.cuerpo-libro::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(214, 174, 90, .1); pointer-events: none; }
.cuerpo-libro:hover { transform: translateY(-3px); border-color: var(--gold-lo); }
.cuerpo-libro[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 50px -24px rgba(214, 174, 90, .9); transform: translateY(-6px); }
.cuerpo-libro .seal { margin-bottom: 8px; }
.cuerpo-nombre { font-family: var(--cinzel); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.cuerpo-sub { font-style: italic; color: var(--muted); font-size: 1rem; line-height: 1.3; }
.cuerpo-pag { font-family: var(--cinzel); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-top: 8px; }
.cuerpo-respuesta { max-width: 760px; margin: 26px auto 0; padding: 28px 30px; text-align: center; border-color: var(--gold-lo); }
.cuerpo-respuesta[hidden] { display: none; }
.cuerpo-respuesta .hook { margin-top: 4px; font-size: clamp(1.25rem, 2.8vw, 1.7rem); }
.cuerpo-respuesta .quiet { margin-top: 14px; }
.cuerpo-respuesta .cta-row { margin-top: 20px; }
.cuerpos-nota { margin: 26px auto 0; max-width: 60ch; font-style: italic; }

/* ---------- 4 · Los ocho pasos ---------- */
.ocho { list-style: none; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; max-width: 1040px; }
.ocho { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px 10px; }
.ocho li { display: grid; justify-items: center; text-align: center; gap: 4px; }
.ocho li .seal { margin-bottom: 10px; }
.ocho b { font-family: var(--cinzel); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.ocho span { font-size: .98rem; color: var(--muted); font-style: italic; line-height: 1.4; max-width: 24ch; }
#pasos .hook.grande { margin-top: 40px; }

/* ---------- 5 · El índice como papel ---------- */
.paginas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 900px; margin: 36px auto 0; background: #F6F2E7; color: #2a2316; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(214, 174, 90, .35); position: relative; }
.paginas::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .18) 15%, rgba(0, 0, 0, .18) 85%, transparent); }
.paginas::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, 0) 56%); }
.pagina-indice { list-style: none; margin: 0; padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 44px); font-family: var(--serif); font-size: 1.02rem; line-height: 1.35; counter-reset: cap; }
.pagina-indice li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted rgba(42, 35, 22, .3); }
.pagina-indice li::before { counter-increment: cap; content: "Capítulo " counter(cap); grid-column: 1 / -1; font-family: var(--cinzel); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: #8A6528; margin-bottom: -4px; }
.pagina-indice li.sin-numero::before { content: ""; display: none; }
.pagina-indice li.sin-numero { padding-top: 14px; }
.pagina-indice li span { text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; }
.pagina-indice li i { font-style: normal; font-variant-numeric: tabular-nums; color: #8A6528; }
#indice .col.center .cta-row { margin-top: 34px; }

/* ---------- 6 · Ayuda y lectura ---------- */
.ayuda { max-width: 820px; margin-inline: auto; }
.ayuda li span { color: var(--parchment); }
#ayuda .eyebrow + .steps { margin-top: 24px; }
#ayuda .col { max-width: 1040px; }
#ayuda .ayuda { max-width: 820px; }

/* ---------- 8 y 9 · Lo que no es + puente a M.A.F. ---------- */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.noes { max-width: none; margin-left: 0; }
.noes li span { color: var(--muted); }
.puente { padding: 30px 30px 32px; display: grid; gap: 14px; text-align: left; }
.puente h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.puente p { color: var(--muted); font-size: 1.04rem; }
.puente .cta-row { justify-content: flex-start; margin-top: 8px; }
.paso-nace { left: 28px; top: 40px; }
.paso-ayuda-a { left: 6%; top: 8%; }
.paso-ayuda-b { left: 6%; top: 62%; }

.luz-libro #preguntas { padding-bottom: 0; }
.luz-libro #preguntas::after { content: ""; display: block; height: 180px; margin-top: 64px; background: linear-gradient(to bottom, var(--rock), #120A06); }
.luz-libro .final { padding-top: 48px; border-top: 0; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .libro-hero { padding-top: 92px; }
  .libro-hero-dentro, .cuerpos-libro, .ocho, .dos-columnas, .paginas { grid-template-columns: 1fr; }
  .libro-hero-txt { justify-items: center; text-align: center; }
  .libro-hero-txt .crest { justify-items: center; }
  .libro-hero .cta-row { justify-content: center; }
  .libro-hero .poco { text-align: left; }
  .libro-3d-marco { order: -1; margin-bottom: 10px; }
  .libro-3d { width: min(46vw, 180px); }
  .cara.lomo { transform: rotateY(-90deg) translateZ(calc(min(46vw, 180px) / 2)); }
  .cara.canto { transform: rotateY(90deg) translateZ(calc(min(46vw, 180px) / 2)); }
  .cuerpos-libro { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cuerpo-libro { padding: 20px 12px 18px; }
  .ocho { grid-template-columns: repeat(4, 1fr); gap: 22px 8px; }
  .ocho b { font-size: .66rem; letter-spacing: .08em; }
  .paginas::before, .paginas::after { display: none; }
  .puente .cta-row { justify-content: center; }
  .puente { text-align: center; }
  .paso-nace { left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .libro-3d-cuerpo { animation: none; transition: none; }
}

/* Cierre: la pregunta centrada también aquí */
.libro-pagina .pregunta-final, .libro-pagina .pregunta-final .pregunta { text-align: center; }

/* ---------- Registro claro (marfil y oro), el de su creatividad del libro y del tramo claro de la landing que le gustó ---------- */
.luz-libro { --rock: #F8F2E6; --rock-2: #F2E8D6; --rock-3: #EFE4CE; --parchment: #463718; --muted: #655229; --muted-2: #6F5B31; --gold: #A87F2C; --gold-hi: #6F5217; --gold-lo: #785919; --line: rgba(120, 89, 25, .26); --line-soft: rgba(120, 89, 25, .13); color-scheme: light; }
.luz-libro .pagina::before { background: radial-gradient(120% 60% at 50% -8%, rgba(168, 127, 44, .08), transparent 62%), radial-gradient(90% 50% at 50% 108%, rgba(120, 89, 25, .06), transparent 64%); opacity: 1; }
.luz-libro .chispas { opacity: .5; }
.luz-libro :focus-visible { outline-color: var(--gold-lo); }
.luz-libro .gilt { background: linear-gradient(176deg, #9A7428 0%, #7C5C1C 55%, #5E4512 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
.luz-libro .cabecera { background: linear-gradient(to bottom, rgba(248, 242, 230, .97), rgba(248, 242, 230, .75) 55%, transparent 100%); }
.luz-libro .menu a { color: var(--muted-2); } .luz-libro .menu a:hover, .luz-libro .menu a[aria-current] { color: var(--gold-lo); }
.luz-libro .rule .ln { stroke: url(#gfadeDark); }
.luz-libro .btn { background: rgba(168, 127, 44, .08); border-color: var(--gold); color: var(--gold-hi); }
.luz-libro .btn::after { border-color: rgba(168, 127, 44, .25); }
.luz-libro .btn:hover { color: #3b2a12; box-shadow: 0 0 34px -10px rgba(168, 127, 44, .55); }
.luz-libro .btn-fire, .luz-libro a.btn-fire { background: linear-gradient(180deg, #E8C579, #C1913C 58%, #9A6D26); color: #1B0F05; border-color: #B98F35; }
.luz-libro .creed { background: rgba(255, 255, 255, .45); border-color: var(--line-soft); }
.luz-libro .way, .luz-libro .cuerpo-libro { background: #FBF8F1; border-color: rgba(168, 127, 44, .3); }
.luz-libro .way--lead { border-color: var(--gold); box-shadow: 0 30px 60px -40px rgba(120, 89, 25, .45); }
.luz-libro .cuerpo-libro[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 30px 50px -30px rgba(120, 89, 25, .5); }
.luz-libro .seal { background: var(--rock); border-color: var(--line); }
.luz-libro .seal.maf-encendido { box-shadow: 0 0 0 4px rgba(168, 127, 44, .1), 0 0 22px rgba(168, 127, 44, .45); border-color: var(--gold); color: var(--gold-lo); }
.luz-libro .way.maf-encendido { border-color: var(--gold); box-shadow: 0 0 34px rgba(168, 127, 44, .22); }
.luz-libro .maf-hilo-cabeza { fill: #B98F35; } .luz-libro .maf-hilo-halo { opacity: .35; }
.luz-libro .paginas { background: #FFFDF8; box-shadow: 0 40px 70px -40px rgba(70, 55, 24, .45), 0 0 0 1px rgba(168, 127, 44, .25); }
.luz-libro .libro-hero .poco { border-left-color: var(--gold); }
.luz-libro .libro-3d { filter: none; }
.luz-libro .cara.lomo { background: linear-gradient(90deg, #E8E0CF, #F7F3EA 50%, #DDD4C0); }
.luz-libro .gate { border-color: var(--line); } .luz-libro .chev { border-color: var(--gold); }
.luz-libro .cta-movil { background: linear-gradient(to top, rgba(248, 242, 230, .97), rgba(248, 242, 230, .85)); border-color: var(--line); }
.luz-libro .pie-pagina { color: var(--muted-2); border-color: var(--line); } .luz-libro .pie-pagina a { color: var(--gold-lo); }
.luz-libro ::selection { background: var(--gold); color: #fff; }
.luz-libro .quien-foto img { filter: saturate(.85) contrast(1.05); }
/* El cierre vuelve al amanecer: tokens oscuros solo en esa sección */
.luz-libro .final { --rock: #120A06; --parchment: #F3E8D3; --muted: #BEA882; --muted-2: #9C8A6A; --gold: #D6AE5A; --gold-hi: #F6E6BC; --gold-lo: #8E6224; --line: rgba(214, 174, 90, .18); --line-soft: rgba(214, 174, 90, .09); background: #120A06; }
.luz-libro .final .gilt { background: linear-gradient(177deg, #FBF0D2 4%, #F6E6BC 26%, #D6AE5A 55%, #A9762C 82%, #7C5520 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)); }
.luz-libro .final .way { background: linear-gradient(180deg, rgba(36, 20, 7, .62), rgba(18, 10, 6, .86)); border-color: var(--line-soft); }
.luz-libro .final .rule .ln { stroke: url(#gfade); }
.luz-libro .final .btn { background: linear-gradient(180deg, rgba(246, 230, 188, .08), rgba(142, 98, 36, .14)); border-color: var(--gold-lo); color: var(--gold-hi); }
.luz-libro .final a:not(.btn) { color: var(--gold); }
.luz-libro .final .maf-lema { color: var(--gold); }
.luz-libro .banda { background: linear-gradient(180deg, rgba(168, 127, 44, .08), transparent 70%); box-shadow: none; border-top: 1px solid var(--line-soft); }
.luz-libro .quien-foto::after { display: none; }
.luz-libro .quien-foto img { box-shadow: none; -webkit-mask-image: linear-gradient(to right, #000 42%, transparent 76%), linear-gradient(to bottom, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 42%, transparent 76%), linear-gradient(to bottom, #000 78%, transparent 100%); mask-composite: intersect; }

.cara.dorso img { object-fit: contain; background: #fff; }

/* Contraste sobre marfil: los rótulos pequeños en oro oscuro (5,8:1), no en oro medio (4,1:1) */
.luz-libro .eyebrow, .luz-libro .maf-lema, .luz-libro .cuerpo-pag, .luz-libro .crest span, .luz-libro .libro-3d-pista { color: var(--gold-lo); }
.luz-libro .final .eyebrow, .luz-libro .final .maf-lema { color: var(--gold); }
.pagina-indice-b { counter-reset: cap 7; }
.cuerpos-nota { margin-top: 30px; }

/* Al girar, el libro crece: la pista baja para no quedar debajo */
.libro-3d-marco:has(.vuelto) .libro-3d-pista { margin-top: 64px; }
.libro-3d.vuelto .libro-3d-cuerpo { transform-origin: 50% 45%; }