/* Fase 4 · Biblioteca SEO.
   Archivo separado para no convertir styles.css en otro punto de conflicto
   entre agentes. Solo lo cargan /tarot/carta/, /suenos/ y biblioteca.html. */

.phase4-page{max-width:1180px}
.phase4-page .breadcrumbs{line-height:1.6}
.reference-hero{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:70px;align-items:center;margin-top:30px}
.reference-visual{margin:0}
.reference-visual img{display:block;width:100%;height:auto;border-radius:24px;border:1px solid rgba(223,191,117,.28);box-shadow:0 28px 70px rgba(0,0,0,.42)}
.reference-visual figcaption{padding:12px 4px 0;color:#81778f;font-size:.68rem;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.reference-intro h1{font-size:clamp(3.8rem,7vw,6.8rem);line-height:.9;margin:18px 0 26px}
.reference-intro .page-intro{margin-bottom:28px}
.meaning-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px}
.meaning-pair section{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.meaning-pair section:last-child{border-color:rgba(158,107,255,.28)}
.meaning-pair span{display:block;margin-bottom:7px;color:var(--gold);font-size:.62rem;font-weight:700;letter-spacing:.14em}
.meaning-pair p{margin:0;color:#cfc4dd;font-size:.78rem;line-height:1.55}
.reference-content{margin-top:90px}
.reference-question{margin:26px 0;padding:26px 30px;border-left:3px solid var(--gold);border-radius:0 18px 18px 0;background:rgba(223,191,117,.06);color:#f1e9ff;font-family:"Cormorant Garamond",serif;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.25}
.related-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-links a{display:flex;min-height:118px;flex-direction:column;justify-content:flex-end;padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025);transition:.2s ease}
.related-links a:hover{transform:translateY(-2px);border-color:rgba(158,107,255,.5);background:rgba(158,107,255,.07)}
.related-links span{margin-bottom:7px;color:var(--gold);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.related-links strong{color:#f3edff;font-family:"Cormorant Garamond",serif;font-size:1.35rem;line-height:1.1}
.reference-pagination{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:60px}
.reference-pagination a{display:flex;flex-direction:column;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
.reference-pagination a:last-child{text-align:right}
.reference-pagination span{margin-bottom:6px;color:#8f84a0;font-size:.68rem;text-transform:uppercase}
.reference-pagination strong{color:#e9e1f4;font-family:"Cormorant Garamond",serif;font-size:1.35rem}

.library-hero{max-width:940px!important}
.library-jumps{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.library-jumps a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:#c7bbe0;font-size:.74rem;background:rgba(255,255,255,.025)}
.library-jumps a:hover{border-color:rgba(158,107,255,.5);color:#fff}
.library-section{padding:74px 0 14px;scroll-margin-top:105px}
.library-section .section-heading{margin-bottom:28px}
.reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.reference-card{display:flex;min-width:0;flex-direction:column;padding:12px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.022);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.reference-card:hover{transform:translateY(-4px);border-color:rgba(158,107,255,.5);background:rgba(158,107,255,.065)}
.reference-card img{display:block;width:100%;height:auto;border-radius:12px;background:#100d1c}
.reference-card span{margin:13px 2px 5px;color:var(--gold);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}
.reference-card strong{margin:0 2px;color:#f2ecfb;font-family:"Cormorant Garamond",serif;font-size:1.2rem;line-height:1.05}
.reference-card em{margin:7px 2px 2px;color:#8f849c;font-size:.65rem;font-style:normal;line-height:1.4}
.library-final-cta{max-width:780px;margin:80px auto 0;text-align:center}
.library-final-cta h2{margin-top:0;font-size:clamp(2.3rem,4vw,3.7rem)}

.dream-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dream-reference-card{display:flex;min-height:260px;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(158,107,255,.075),rgba(255,255,255,.02));transition:.22s ease}
.dream-reference-card:hover{transform:translateY(-3px);border-color:rgba(158,107,255,.5)}
.dream-reference-card>span{margin-bottom:16px;color:var(--gold);font-size:.62rem;letter-spacing:.14em}
.dream-reference-card strong{color:#f2ecfb;font-family:"Cormorant Garamond",serif;font-size:2rem;line-height:1.05}
.dream-reference-card p{flex:1;color:var(--muted);font-size:.82rem;line-height:1.65}
.dream-reference-card em{color:#c7b9ed;font-size:.76rem;font-style:normal;font-weight:600}
.dream-hero{max-width:880px!important;margin-bottom:55px}
.variant-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}
.variant-list>div{padding:20px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.022)}
.variant-list h3{margin:0 0 8px!important;color:#eee7f8;font-size:1.25rem!important}
.variant-list p{margin:0}
.reflection-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;padding:0!important}
.reflection-list li{position:relative;margin:0!important;padding:16px 16px 16px 38px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.02)}
.reflection-list li:before{content:"?";position:absolute;left:14px;top:14px;color:var(--gold);font-weight:700}

@media(max-width:900px){
  .reference-hero{grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:38px}
  .reference-intro h1{font-size:clamp(3.2rem,8vw,5.2rem)}
  .dream-reference-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  .phase4-page{padding-top:108px}
  .reference-hero{grid-template-columns:1fr;gap:30px;margin-top:20px}
  .reference-visual{width:min(72vw,280px);margin:0 auto}
  .reference-intro{text-align:center}
  .reference-intro .page-intro{font-size:1rem}
  .meaning-pair{text-align:left}
  .reference-content{margin-top:62px}
  .related-links{grid-template-columns:1fr}
  .reference-pagination{gap:10px}
  .reference-pagination a{padding:16px}
  .reference-pagination strong{font-size:1.05rem}
  .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .reference-card{padding:8px;border-radius:15px}
  .reference-card img{border-radius:9px}
  .reference-card strong{font-size:1.05rem}
  .reference-card em{display:none}
  .library-section{padding-top:58px}
  .dream-reference-grid{grid-template-columns:1fr}
  .dream-reference-card{min-height:220px;padding:23px}
  .variant-list,.reflection-list{grid-template-columns:1fr}
  .library-final-cta{margin-top:60px}
}

@media(max-width:380px){
  .meaning-pair{grid-template-columns:1fr}
  .reference-grid{grid-template-columns:1fr 1fr}
}