/* =========================================================
   ARCANO DORADO — Hoja de estilos principal
   Paleta: negro, dorado, azul noche, blanco marfil
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --black: #07070b;
  --black-soft: #0e0f16;
  --night: #101a33;
  --night-deep: #0a1226;
  --gold: #c9a227;
  --gold-light: #e8cf7b;
  --gold-dim: #8a7124;
  --ivory: #f3ecdd;
  --ivory-dim: #cfc6b0;
  --line: rgba(201,162,39,0.28);
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
  --radius: 2px;
  --maxw: 1180px;
  --font-display: 'Cinzel', serif;
  --font-deco: 'Cinzel Decorative', serif;
  --font-body: 'Cormorant Garamond', serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: radial-gradient(ellipse at top, var(--night-deep) 0%, var(--black) 55%);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--gold-light); text-decoration:none; }
a:hover{ color: var(--gold); }

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ivory);
  margin: 0 0 0.5em;
  font-weight: 600;
}

.eyebrow{
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap: 0.75em;
}
.eyebrow::before{
  content:"";
  width: 28px; height:1px;
  background: var(--gold);
  display:inline-block;
}

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }
section{ padding: 92px 0; position:relative; }

/* ---------- estrella / compás dorado (elemento firma) ---------- */
.compass{
  width: 46px; height:46px;
  position: relative;
  flex: none;
}
.compass svg{ width:100%; height:100%; }
.compass .ring{ animation: spin 22s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .compass .ring{ animation:none; }
}

/* ---------- emblema real de marca (imagen del mago en el círculo) ---------- */
.brand-emblem{
  display:block;
  width: 46px; height:46px; flex:none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(201,162,39,0.35);
}
.brand-emblem.large{ width:120px; height:120px; box-shadow: 0 0 0 1px rgba(201,162,39,0.5), 0 0 40px rgba(201,162,39,0.25); }

/* ---------- header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(7,7,11,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px;
  max-width: var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-name{
  font-family: var(--font-deco);
  font-size: 1.3rem;
  color: var(--gold-light);
  letter-spacing: 0.06em;
}
.brand-tag{
  display:block; font-family: var(--font-body); font-style: italic;
  font-size: 0.68rem; color: var(--ivory-dim); letter-spacing: 0.04em;
  margin-top: -2px;
}
nav.links{ display:flex; gap: 30px; align-items:center; }
nav.links a{
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
nav.links a:hover, nav.links a.active{ color: var(--gold-light); border-color: var(--gold); }
.nav-cta{
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em;
  color: var(--black) !important;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 10px 22px !important;
  border: none;
  text-transform: uppercase;
}
.menu-toggle{ display:none; background:none; border:1px solid var(--line); color: var(--gold); width:42px; height:42px; cursor:pointer; }

/* ---------- botón de ambiente sonoro ---------- */
.sound-toggle{
  position: fixed; right: 22px; bottom: 22px; z-index: 500;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--black-soft); border: 1px solid var(--gold);
  color: var(--gold-light); font-size: 1.3rem; line-height:1;
  cursor: pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.sound-toggle:hover{ transform: scale(1.08); color: var(--gold-light); }
.sound-toggle .sound-icon{ pointer-events:none; }
.sound-toggle.playing{
  animation: soundPulse 2.4s ease-in-out infinite;
}
@keyframes soundPulse{
  0%, 100%{ box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(201,162,39,0.35); }
  50%{ box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(201,162,39,0.65); }
}
@media (prefers-reduced-motion: reduce){
  .sound-toggle.playing{ animation: none; box-shadow: 0 0 0 1px var(--gold), 0 0 20px rgba(201,162,39,0.5); }
}
@media (max-width: 600px){
  .sound-toggle{ right: 14px; bottom: 14px; width: 46px; height: 46px; font-size: 1.15rem; }
}

/* ---------- selector de idioma ---------- */
.lang-switch{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-size:0.75rem; letter-spacing:0.1em;
  color: var(--ivory-dim); margin-left: 4px;
}
.lang-switch .lang-active{ color: var(--gold-light); }
.lang-switch a{ color: var(--ivory-dim); }
.lang-switch a:hover{ color: var(--gold-light); }
@media (max-width: 1150px){
  .lang-switch{ order:2; margin-left:0; margin-right:10px; }
}

@media (max-width: 1150px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background: var(--black-soft); border-bottom: 1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .35s ease;
  }
  nav.links.open{ max-height: 480px; }
  nav.links a, nav.links .nav-cta{ width:100%; padding: 16px 28px !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .menu-toggle{ display:block; }
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 34px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  background: transparent;
  cursor:pointer;
  transition: all .25s ease;
}
.btn:hover{ background: var(--gold); color: var(--black); }
.btn.solid{ background: linear-gradient(180deg, var(--gold-light), var(--gold-dim)); color: var(--black); border-color: transparent; }
.btn.solid:hover{ filter: brightness(1.1); }
.btn.block{ width:100%; justify-content:center; }

/* ---------- hero ---------- */
.hero{
  min-height: 92vh;
  display:flex; align-items:center;
  padding-top: 60px;
  position:relative;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
  background: var(--black);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg picture, .hero-bg img{
  width:100%; height:100%; object-fit: cover; object-position: 88% 16%; display:block;
}
.hero-bg::after{
  /* Degradado de legibilidad: oscurece la izquierda (donde va el texto)
     y dejar ver la ilustración con nitidez a la derecha. */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(7,7,11,0.95) 44%, rgba(7,7,11,0.72) 62%, rgba(7,7,11,0.2) 84%, transparent 100%),
    linear-gradient(180deg, rgba(7,7,11,0.35) 0%, transparent 18%, transparent 78%, rgba(7,7,11,0.65) 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image: radial-gradient(1px 1px at 20% 30%, var(--gold) 40%, transparent 41%),
                     radial-gradient(1px 1px at 70% 60%, var(--gold) 40%, transparent 41%),
                     radial-gradient(1px 1px at 40% 80%, var(--gold) 40%, transparent 41%),
                     radial-gradient(1px 1px at 85% 20%, var(--gold) 40%, transparent 41%),
                     radial-gradient(1px 1px at 55% 15%, var(--gold) 40%, transparent 41%),
                     radial-gradient(1px 1px at 10% 65%, var(--gold) 40%, transparent 41%);
  opacity: 0.35;
  pointer-events:none;
}
.hero-grid{
  display:block;
  max-width: 500px;
  position:relative; z-index:2;
}
.brand-hero-title{
  font-family: var(--font-deco);
  font-size: 3.4rem;
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin: 6px 0 22px;
  background: linear-gradient(180deg, var(--gold-light) 20%, var(--gold-dim) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(201,162,39,0.25);
}
.hero-motto-line{
  font-size: 1.32rem; color: var(--ivory); font-weight:600;
  max-width: 42ch; margin-bottom: 18px;
}
.hero p.lead{ font-size: 1.1rem; color: var(--ivory-dim); max-width: 46ch; margin-bottom: 34px; }
.hero p.motto{ font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1.05rem; letter-spacing: 0.03em; margin: -6px 0 30px; }
.brand-motto{ font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1.15rem; letter-spacing: 0.03em; margin-top: 14px; }

/* ---------- presentación de Arkan con retrato ---------- */
.arkan-intro-grid{
  display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items:center;
  margin-bottom: 46px;
}
.arkan-portrait{
  border-radius: 6px; overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow), 0 0 50px rgba(201,162,39,0.12);
  max-width: 360px; margin: 0 auto;
}
.arkan-portrait img{ width:100%; height:auto; display:block; }
.arkan-intro-text .eyebrow{ margin-bottom: 6px; }
.arkan-intro-text h2{ margin-bottom: 18px; }
.arkan-intro-text p{ color: var(--ivory-dim); font-size:1.08rem; }
@media(max-width:820px){
  .arkan-intro-grid{ grid-template-columns:1fr; text-align:center; gap:30px; }
  .arkan-intro-text .eyebrow{ justify-content:center; }
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- insignias de confianza ---------- */
.trust-badges{
  display:flex; gap: 34px; flex-wrap:wrap; margin-top: 46px;
}
.trust-badge{
  display:flex; align-items:center; gap:12px; max-width: 210px;
}
.trust-badge .trust-icon{
  flex:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--gold); color: var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-family: var(--font-display);
}
.trust-badge span:last-child{ font-size:0.85rem; color: var(--ivory-dim); line-height:1.4; }
.trust-badge strong{ color: var(--ivory); font-weight:600; }

@media(max-width:900px){
  .brand-hero-title{ font-size: 3rem; }
  .hero{ display:block; min-height:0; padding-top:0; }
  .hero-bg{
    position: relative; inset:auto;
    height: 56vh; min-height:340px; max-height:480px;
  }
  .hero-bg::after{
    background: linear-gradient(180deg, rgba(7,7,11,0.15) 0%, rgba(7,7,11,0.35) 60%, var(--black) 100%);
  }
  .hero-grid{ max-width:none; text-align:center; position:relative; z-index:2; }
  .hero .container.hero-grid{ padding-top: 34px; padding-bottom: 50px; }
  .hero-actions{ justify-content:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .trust-badges{ justify-content:center; }
  .trust-badge{ text-align:left; }
  .hero-bg img{ object-position: 82% 22%; }
}

/* ---------- section headers ---------- */
.section-head{ max-width: 680px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 14px; }
.section-head p{ color: var(--ivory-dim); font-size: 1.15rem; }

/* ---------- divisor ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; margin: 8px 0 50px; }
.divider .rule{ height:1px; width:70px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---------- tarjetas de contenido (paneles) ---------- */
.panel{
  background: linear-gradient(160deg, rgba(16,26,51,0.55), rgba(7,7,11,0.7));
  border: 1px solid var(--line);
  padding: 34px;
}

/* ---------- grid arcanos (galería de menores) ---------- */
.arcana-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media(max-width:760px){ .arcana-grid{ grid-template-columns: 1fr; } }
.arcana-tile{
  border: 1px solid var(--line);
  background: var(--black-soft);
  overflow:hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.arcana-tile:hover{ border-color: var(--gold); transform: translateY(-4px); }
.arcana-tile img{ width:100%; }
.arcana-tile .cap{
  padding: 16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-display); font-size:0.85rem; letter-spacing:0.08em;
  color: var(--ivory-dim); text-transform:uppercase;
}
.arcana-tile .cap span.n{ color: var(--gold-light); }

/* Arcanos mayores placeholder cards */
.mayores-grid{
  display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 18px;
}
.mayor-slot{
  aspect-ratio: 5/8.4;
  border: 1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 10px;
  color: var(--ivory-dim);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
}
.mayor-slot .num{ font-family: var(--font-display); color: var(--gold); font-size:1.4rem; }
.mayor-slot .name{ font-family: var(--font-display); font-size:0.72rem; letter-spacing:0.06em; margin-top:8px; text-transform:uppercase; }

.mayores-grid-img{ grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); }
.mayor-card{
  display:block; position:relative; overflow:hidden;
  border: 1px solid var(--line);
  background: var(--black-soft);
  transition: border-color .3s ease, transform .3s ease;
}
.mayor-card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.mayor-card img{ width:100%; aspect-ratio: 5/8.4; object-fit: cover; display:block; }
.mayor-cap{
  padding: 10px 12px;
  display:flex; align-items:baseline; gap:8px;
  font-family: var(--font-display); font-size:0.75rem; letter-spacing:0.05em;
  color: var(--ivory-dim); text-transform:uppercase;
}
.mayor-cap .mayor-num{ color: var(--gold-light); font-size:0.9rem; }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media(max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{
  border: 1px solid var(--line);
  padding: 38px 30px;
  background: linear-gradient(180deg, rgba(16,26,51,0.4), rgba(7,7,11,0.8));
  display:flex; flex-direction:column; gap:18px;
  position:relative;
}
.price-card.featured{ border-color: var(--gold); box-shadow: 0 0 50px rgba(201,162,39,0.15); }
.price-card.featured::before{
  content:"Más elegido";
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--gold); color:var(--black);
  font-family: var(--font-display); font-size:0.65rem; letter-spacing:0.12em;
  text-transform:uppercase; padding: 5px 14px;
}
.price-card h3{ font-size:1.3rem; }
.price-amount{ font-family: var(--font-display); font-size:2.4rem; color: var(--gold-light); }
.price-amount sup{ font-size:1rem; }
.price-amount span.period{ font-family: var(--font-body); font-size:0.95rem; color: var(--ivory-dim); }
.price-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; color: var(--ivory-dim); }
.price-card ul li::before{ content:"✦ "; color: var(--gold); }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
@media(max-width:760px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ border:1px solid var(--line); background: var(--black-soft); padding: 30px; display:flex; flex-direction:column; gap:14px; }
.blog-card .meta{ font-size:0.85rem; color: var(--gold); letter-spacing:0.08em; text-transform:uppercase; font-family: var(--font-display); }
.blog-card h3{ font-size:1.4rem; }
.blog-card p{ color: var(--ivory-dim); }

.article-hero{
  padding: 120px 0 70px;
  text-align:center;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,162,39,0.16), transparent 60%), var(--black);
  border-bottom: 1px solid var(--line);
}
.article-hero .eyebrow{ justify-content:center; }
.article-hero h1{ max-width: 780px; margin: 20px auto 14px; font-size: clamp(2rem,4vw,2.8rem); }
.article-hero .subtitle{ font-style: italic; color: var(--ivory-dim); font-size:1.25rem; }

.article-body{ max-width: 760px; margin: 0 auto; }
.article-body h2{ margin-top: 2em; font-size:1.5rem; color:var(--gold-light); }
.article-body p{ color: var(--ivory-dim); font-size: 1.18rem; }
.article-body p strong{ color: var(--ivory); }

.notice-box{
  border-left: 3px solid var(--gold);
  background: rgba(201,162,39,0.06);
  padding: 20px 26px;
  color: var(--ivory-dim);
  font-size: 1rem;
  margin-top: 3em;
}

.cta-block{
  text-align:center; padding: 50px 30px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(16,26,51,0.6), rgba(7,7,11,0.85));
  margin-top: 3.5em;
}
.cta-block h3{ font-size: 1.6rem; }
.cta-block p{ color: var(--ivory-dim); margin-bottom: 26px; }

/* ---------- lectura / chat Arkan ---------- */
.reader-wrap{ display:grid; grid-template-columns: 320px 1fr; gap: 30px; }
@media(max-width:900px){ .reader-wrap{ grid-template-columns:1fr; } }
.reader-side .panel{ position:sticky; top: 100px; }
.reader-side h4{ font-size:1.05rem; color: var(--gold-light); }
.reader-side p{ color: var(--ivory-dim); font-size: 1rem; }
.spread-select{ display:flex; flex-direction:column; gap:10px; margin: 18px 0; }
.spread-option{
  border:1px solid var(--line); padding: 12px 14px; cursor:pointer;
  font-family: var(--font-display); font-size:0.8rem; letter-spacing:0.06em;
  color: var(--ivory-dim); text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.spread-option.active, .spread-option:hover{ border-color: var(--gold); color: var(--gold-light); }
.spread-option.locked{ opacity: 0.55; cursor: not-allowed; }
.spread-option.locked:hover{ border-color: var(--line); color: var(--ivory-dim); }
.spread-option .lock-icon{ font-size: 0.85em; margin-right: 4px; }
.spread-option .credit-badge{ font-style: italic; color: var(--gold-light); font-size: 0.82em; }
.spread-option .tag-free{ font-style: italic; color: var(--gold); margin-left: 6px; font-size: 0.85em; }
.spread-option .tag-soon{ font-style: italic; color: var(--ivory-dim); margin-left: 6px; font-size: 0.85em; }
.spread-option.coming-soon{ cursor: default; }

.chat-window{
  border:1px solid var(--line); background: var(--black-soft);
  display:flex; flex-direction:column; height: 620px;
}
.chat-log{ flex:1; overflow-y:auto; padding: 26px; display:flex; flex-direction:column; gap:20px; }
.msg{ max-width: 82%; padding: 14px 18px; font-size:1.05rem; line-height:1.5; }
.msg.arkan{ align-self:flex-start; background: rgba(201,162,39,0.08); border:1px solid var(--line); color: var(--ivory); }
.msg.user{ align-self:flex-end; background: rgba(16,26,51,0.7); border:1px solid var(--line); color: var(--ivory); }
.msg .who{ display:block; font-family: var(--font-display); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--gold); margin-bottom:6px; }
.card-reveal{ display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0; }
.mini-card{
  width: 78px; aspect-ratio:5/8.4; border:1px solid var(--gold);
  background: linear-gradient(160deg, var(--night), var(--black));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-display); font-size:0.6rem; color: var(--gold-light); padding:6px;
  animation: flipin .6s ease both;
}
@keyframes flipin{ from{ transform: rotateY(90deg); opacity:0; } to{ transform: rotateY(0); opacity:1; } }
.chat-input{ display:flex; border-top:1px solid var(--line); }
.chat-input input{
  flex:1; background:transparent; border:none; color: var(--ivory); font-family: var(--font-body);
  font-size:1.05rem; padding: 18px 20px; outline:none;
}
.chat-input button{
  border:none; background: var(--gold); color: var(--black); padding: 0 28px;
  font-family: var(--font-display); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
}
.chat-input button:disabled{ opacity:0.5; cursor:not-allowed; }
.typing{ font-style:italic; color: var(--ivory-dim); font-size:0.95rem; }

/* ---------- footer ---------- */
footer.site{
  border-top: 1px solid var(--line);
  padding: 60px 0 30px;
  background: var(--black);
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media(max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h5{ font-family: var(--font-display); font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold); margin-bottom:16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color: var(--ivory-dim); font-size:0.98rem; }
.footer-bottom{ margin-top: 50px; padding-top: 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.85rem; color: var(--ivory-dim); }
.footer-bottom .legal-links a{ color: var(--ivory-dim); }
.footer-bottom .legal-links a:hover{ color: var(--gold-light); }

/* ---------- utilidades ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.small-note{ font-size:0.9rem; color: var(--ivory-dim); }
/* ---------- indicador de sesión en el header ---------- */
.auth-status{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:0.72rem; letter-spacing:0.08em;
  color: var(--ivory-dim); margin-left: 4px;
}
.auth-status #auth-status-text{
  white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis;
}
.auth-status button{
  font-family: var(--font-display); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color: var(--gold-light);
  padding: 7px 16px; cursor:pointer; transition: all .25s ease;
}
.auth-status button:hover{ background: var(--gold); color: var(--black); border-color: var(--gold); }

@media (max-width: 1150px){
  .auth-status{ order:3; margin-left:0; margin-right:10px; }
  .auth-status #auth-status-text{ display:none; }
}