/* ============================================================
   SEO SHELL — chrome compartido por /tarot/*, /compatibilidad/* y
   /aprende/* (ver lib/seo-shell.js). El resto de la composición (hero,
   cards, índices) vive en css/pages/seo-{tarot,compatibilidad,aprende}.css
   — cada tipo de contenido tiene su propio motivo, esto es solo lo que
   los tres comparten: header, fondo cósmico, breadcrumb, CTA, footer.
   ============================================================ */
body.seo-tarot, body.seo-compatibilidad, body.seo-aprende{
  margin:0;background:var(--void);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;
}
.seo-cosmos{
  position:fixed;inset:0;pointer-events:none;z-index:0;
}

/* ---- Header ---- */
.seo-header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  background:var(--glass-bg);
  backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);
  border-bottom:1px solid var(--border);
}
.seo-wordmark{display:flex;align-items:center;}
.seo-wordmark img{height:32px;width:auto;display:block;}
.seo-header-nav{display:flex;align-items:center;gap:22px;}
.seo-header-nav a{
  font-size:var(--fs-caption);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-premium);
}
.seo-header-nav a:hover{color:var(--gold);}
.seo-nav-cta{
  font-size:var(--fs-kicker);letter-spacing:2px;text-transform:uppercase;
  color:var(--ink) !important;
  border:1px solid rgba(237,237,235,0.4);border-radius:2px;
  padding:9px 20px;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.seo-nav-cta:hover{border-color:var(--gold);color:var(--gold) !important;}

/* ---- Layout base ---- */
.seo-main{position:relative;z-index:1;margin:0 auto;}
.seo-breadcrumb{
  display:flex;gap:10px;align-items:center;
  font-size:var(--fs-caption);letter-spacing:1px;color:var(--muted);
  margin-bottom:36px;
}
.seo-breadcrumb a{color:var(--muted);text-decoration:none;}
.seo-breadcrumb a:hover{color:var(--gold);}
.seo-breadcrumb span.sep{color:rgba(0,0,0,0.3);}
.seo-breadcrumb span.current{color:var(--gold);}

.seo-kicker{
  font-size:var(--fs-kicker);letter-spacing:3px;text-transform:uppercase;color:var(--gold);
}

/* ---- Cabecera de página de índice (tarot/, compatibilidad/, aprende/) ---- */
.seo-page-header{margin-bottom:56px;}
.seo-page-header h1{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(38px,5.5vw,58px);line-height:1.1;letter-spacing:-0.015em;
  margin:14px 0 20px;text-wrap:balance;
}
.seo-page-header p{
  font-family:'Fraunces','Georgia',serif;font-style:italic;font-weight:300;
  font-size:19px;line-height:1.4;color:var(--gold);max-width:640px;margin:0;
}

/* ---- CTA central (pregunta + botón primario), patrón compartido por
   los tres templates ---- */
.seo-cta-block{text-align:center;margin-bottom:96px;}
.seo-cta-block p{
  font-family:'Fraunces','Georgia',serif;font-style:italic;font-weight:300;
  font-size:19px;color:var(--muted);margin:0 0 22px;
}
.seo-cta-block .action-btn{padding:15px 38px;font-size:11px;}

/* ---- Índice de enlaces relacionados (arcanos / signos), patrón de
   lista compartido por tarot y compatibilidad ---- */
.seo-index-label{font-size:var(--fs-kicker);letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:26px;}
.seo-index{
  border-top:1px solid var(--border);padding-top:44px;margin-bottom:72px;
}
.seo-index-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 32px;
}
.seo-index-list a{
  display:flex;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-premium);
}
.seo-index-list a:hover{color:var(--gold);}
.seo-index-list .num{font-size:11px;letter-spacing:1px;color:rgba(237,237,235,0.7);}
.seo-index-list .name{font-family:'Fraunces','Georgia',serif;font-size:15px;}

/* ---- Footer ---- */
.seo-cluster{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  padding:28px 0 8px;border-top:1px solid var(--border);
  font-size:var(--fs-caption);letter-spacing:1px;
}
.seo-cluster a{color:var(--muted);text-decoration:none;}
.seo-cluster a:hover{color:var(--gold);}
.seo-footer{text-align:center;color:var(--muted);font-size:var(--fs-caption);padding:30px 0 40px;}
.seo-footer a{color:var(--muted);}

/* ---- Reveals de scroll (data-reveal, ver js/core/seo-motion.js) ---- */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-hero-seq] > *{opacity:1 !important;transform:none !important;}
}