/* ═══════════════════════════════════════════════════════════════════════════
   Páginas de contenido: /cartas/* y /lecturas/*.
   Son las páginas que traen gente desde Google, así que casi siempre son la
   PRIMERA pantalla de alguien que no conoce el sitio: tienen que verse del
   mismo lugar que la home (paleta y tipografías de Luz) y terminar siempre en
   una puerta de entrada a una lectura.
   Hoja propia y liviana a propósito, como legal.css: no arrastran los 158 KB
   de luz.css ni el JS de la aplicación para mostrar texto.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --crema:#F1EBDD; --papel:#FBF7EC; --papel-2:#E8DCC6;
  --oscuro:#272522; --tinta:#4A4238; --tinta-suave:#6B6053;
  --oro:#7F5C1F; --oro-claro:#B28A37; --linea:rgba(39,37,34,.16);
  --serif:'Poiret One',Georgia,serif;
  --texto:'EB Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --mono:'Courier Prime',ui-monospace,monospace;
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root{
    --crema:#17150F; --papel:#1F1C16; --papel-2:#2A251C;
    --oscuro:#F1EBDD; --tinta:#D6CDBB; --tinta-suave:#A79C88;
    --oro:#D2A94F; --oro-claro:#D2A94F; --linea:rgba(241,235,221,.16);
    color-scheme:dark;
  }
  .hoja{box-shadow:2px 3px 0 rgba(0,0,0,.2), 6px 12px 26px rgba(0,0,0,.4)}
  .carta-arte img{filter:brightness(.92)}
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:1.12rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ── envoltorio: hoja de papel, igual que las legales ─────────────────── */
.hoja{
  max-width:46rem; margin:2.2rem auto 3.5rem; padding:2.6rem clamp(1.1rem,4vw,3rem) 3rem;
  background:var(--papel); border:1px solid var(--linea);
  box-shadow:2px 3px 0 rgba(39,37,34,.06), 6px 12px 26px rgba(39,37,34,.09);
}
.ancho{max-width:62rem}

.volver{
  display:inline-block; margin-bottom:1.6rem; font-family:var(--sans);
  font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-suave); text-decoration:none;
}
.volver:hover,.volver:focus-visible{color:var(--oro)}

.miga{
  font-family:var(--sans); font-size:.8rem; color:var(--tinta-suave);
  margin:0 0 1.4rem; letter-spacing:.02em;
}
.miga a{color:var(--tinta-suave)}
.miga span{opacity:.55; padding:0 .35rem}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--oro); margin:0 0 .5rem;
}
h1{
  font-family:var(--serif); font-weight:400; color:var(--oscuro);
  font-size:clamp(2rem,6vw,3rem); line-height:1.12; margin:0 0 .8rem;
  letter-spacing:.01em; text-wrap:balance;
}
/* La primera frase responde la pregunta entera: es lo que se lleva un buscador
   y lo primero que lee alguien que llegó de casualidad. */
.lede{
  font-size:1.3rem; line-height:1.5; color:var(--oscuro); margin:0 0 1.8rem;
  text-wrap:pretty;
}

h2{
  font-family:var(--serif); font-weight:400; color:var(--oscuro);
  font-size:clamp(1.35rem,3.4vw,1.7rem); line-height:1.2;
  margin:2.4rem 0 .7rem; letter-spacing:.01em;
}
h3{font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.02em; color:var(--oscuro); margin:1.6rem 0 .4rem}
p{margin:0 0 1rem}
strong{color:var(--oscuro); font-weight:600}
a{color:var(--oro); text-underline-offset:.18em}
a:focus-visible,.volver:focus-visible{outline:2px solid var(--oro); outline-offset:3px}
hr{border:0; border-top:1px solid var(--linea); margin:2.6rem 0}

/* ── la carta ilustrada ───────────────────────────────────────────────── */
.carta-arte{
  float:right; width:min(38%,13rem); margin:.2rem 0 1.2rem 1.6rem;
}
.carta-arte img{
  display:block; width:100%; height:auto; border-radius:.5rem;
  border:1px solid var(--linea);
  box-shadow:2px 3px 0 rgba(39,37,34,.07), 5px 10px 22px rgba(39,37,34,.14);
}
.carta-arte figcaption{
  font-family:var(--sans); font-size:.74rem; color:var(--tinta-suave);
  text-align:center; margin-top:.5rem; letter-spacing:.03em;
}
@media (max-width:520px){
  .carta-arte{float:none; width:min(62%,11rem); margin:0 auto 1.6rem}
}

/* ── palabras clave ───────────────────────────────────────────────────── */
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:0 0 1.8rem}
.chips li{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.04em;
  padding:.28rem .7rem; border:1px solid var(--linea); border-radius:999px;
  color:var(--tinta-suave); background:var(--papel-2);
}

/* ── atajo temprano a la lectura ──────────────────────────────────────── */
.atajo{
  margin:0 0 1.8rem; padding:.7rem 0; border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea); font-size:1.02rem;
}
.atajo a{
  font-family:var(--sans); font-size:.95rem; letter-spacing:.01em;
  text-decoration:none; color:var(--oro); font-weight:500;
}
.atajo a:hover,.atajo a:focus-visible{text-decoration:underline}

/* ── listas de símbolos ───────────────────────────────────────────────── */
.simbolos{list-style:none; padding:0; margin:0 0 1rem}
.simbolos li{
  position:relative; padding-left:1.4rem; margin-bottom:.75rem;
}
.simbolos li::before{
  content:"✦"; position:absolute; left:0; top:.05em; color:var(--oro); font-size:.85em;
}

/* ── respuesta sí/no ──────────────────────────────────────────────────── */
.veredicto{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  padding:1rem 1.2rem; margin:0 0 1rem;
  background:var(--papel-2); border-left:3px solid var(--oro);
}
.veredicto b{
  font-family:var(--sans); font-size:1.05rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--oro);
}
.veredicto span{flex:1 1 14rem; min-width:0}

/* ── llamado a la acción ──────────────────────────────────────────────── */
.cta{
  margin:2.8rem 0 1rem; padding:1.7rem 1.5rem; text-align:center;
  background:var(--papel-2); border:1px solid var(--linea);
}
.cta p{margin:0 0 1.1rem; color:var(--oscuro); font-size:1.14rem}
.cta .chico{font-size:.9rem; color:var(--tinta-suave); margin:.9rem 0 0}
.boton{
  display:inline-block; padding:.8rem 2rem; border-radius:999px;
  background:var(--oro); color:var(--papel); text-decoration:none;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--oro); transition:transform .15s ease, opacity .15s ease;
}
.boton:hover,.boton:focus-visible{transform:translateY(-1px); opacity:.92}
.boton.hueco{background:transparent; color:var(--oro)}

/* ── preguntas frecuentes ─────────────────────────────────────────────── */
.faq dt{font-family:var(--sans); font-weight:600; color:var(--oscuro); margin:1.3rem 0 .3rem}
.faq dd{margin:0}

/* ── precio ───────────────────────────────────────────────────────────── */
.precio{
  font-family:var(--sans); font-size:.92rem; letter-spacing:.04em;
  color:var(--tinta-suave); margin:0 0 1.5rem;
}
.precio b{color:var(--oro); font-size:1.1rem}

/* ── ejemplos de preguntas ────────────────────────────────────────────── */
.ejemplos{list-style:none; padding:0; margin:0 0 1rem}
.ejemplos li{
  font-family:var(--mono); font-size:.95rem; color:var(--tinta);
  padding:.55rem .9rem; margin-bottom:.5rem;
  background:var(--papel-2); border-left:2px solid var(--linea);
}
.ejemplos li::before{content:"“"} .ejemplos li::after{content:"”"}

/* ── grilla del índice de cartas ──────────────────────────────────────── */
.grupo{margin:0 0 2.6rem}
.mazo{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));
}
.mazo a{
  display:block; text-decoration:none; color:var(--tinta); text-align:center;
}
.mazo img{
  display:block; width:100%; height:auto; border-radius:.35rem;
  border:1px solid var(--linea); box-shadow:1px 2px 0 rgba(39,37,34,.06);
  transition:transform .18s ease;
}
.mazo a:hover img,.mazo a:focus-visible img{transform:translateY(-3px)}
.mazo span{
  display:block; font-family:var(--sans); font-size:.78rem; line-height:1.3;
  margin-top:.45rem; color:var(--tinta-suave);
}

/* ── enlaces relacionados ─────────────────────────────────────────────── */
.relacionadas{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--linea)}
.relacionadas h2{font-size:1.05rem; font-family:var(--sans); font-weight:600; margin:0 0 .8rem; letter-spacing:.02em}
.relacionadas ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem}
.relacionadas li a{
  display:inline-block; font-family:var(--sans); font-size:.86rem;
  padding:.35rem .85rem; border:1px solid var(--linea); border-radius:999px;
  text-decoration:none; color:var(--tinta-suave); background:var(--papel);
}
.relacionadas li a:hover,.relacionadas li a:focus-visible{color:var(--oro); border-color:var(--oro)}

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie{
  margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--linea);
  font-family:var(--sans); font-size:.8rem; color:var(--tinta-suave);
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center;
}
.pie a{color:var(--tinta-suave)}
.aviso-legal{
  margin-top:1.6rem; font-size:.85rem; color:var(--tinta-suave);
  font-style:italic; line-height:1.5;
}

@media print{
  body{background:#fff}
  .hoja{box-shadow:none; max-width:none}
  .volver,.cta,.relacionadas{display:none}
}