/* sajucoreano — estilos compartidos de las páginas de contenido (guías, signos, horóscopo, legal).
   Generado/servido junto con tools/build-site.js. Mismos tokens de diseño que la página principal. */
:root {
  --c-bg: #0D1927; --c-surface: #152238; --c-card: #1C2E47;
  --c-gold: #C9A135; --c-gold-soft: #E8C96B; --c-jade: #2D7A56; --c-jade-soft: #4DAF7C;
  --c-cream: #F7F0E3; --c-muted: #8A9BB0; --c-border: rgba(201,161,53,0.20);
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --radius: 12px; --transition: 0.25s ease;
}
@media (prefers-color-scheme: light) {
  :root { --c-bg: #F5EDD6; --c-surface: #EDE0C4; --c-card: #FBF5E8; --c-cream: #1C2E47; --c-muted: #56667A; --c-border: rgba(201,161,53,0.32); }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--c-bg); color: var(--c-cream); font-family: var(--ff-body); font-size: 16px; line-height: 1.75; }
a { color: var(--c-gold); text-decoration: none; }
a:hover { color: var(--c-gold-soft); text-decoration: underline; }
img { max-width: 100%; }

/* ── NAV (siempre oscura, como en la página principal) ── */
.pnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; height: 60px; background: rgba(13,25,39,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); }
.pnav .logo { font-family: var(--ff-display); font-size: 1.45rem; color: var(--c-gold); letter-spacing: 0.04em; white-space: nowrap; }
.pnav .logo span { color: #F7F0E3; }
.pnav .logo:hover { text-decoration: none; }
.pnav-links { display: flex; gap: 22px; list-style: none; align-items: center; }
.pnav-links a { color: #8A9BB0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.pnav-links a:hover { color: var(--c-gold); text-decoration: none; }
.pnav-cta { background: var(--c-gold); color: #0D1927 !important; padding: 6px 16px; border-radius: 20px; }
.pnav-cta:hover { background: var(--c-gold-soft); }
.plang { display: flex; gap: 6px; align-items: center; }
.plang a, .plang strong { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--c-gold); }
.plang a { color: var(--c-gold); }
.plang a:hover { background: rgba(201,161,53,0.15); text-decoration: none; }
.plang strong { background: var(--c-gold); color: #0D1927; }
@media (max-width: 1000px) { .pnav-links .hide-md { display: none; } }
@media (max-width: 640px) { .pnav { padding: 0 14px; } .pnav-links { gap: 10px; } .pnav-links .hide-sm { display: none; } .pnav .logo { font-size: 1.25rem; } }

/* ── PÁGINA ── */
.page { max-width: 820px; margin: 0 auto; padding: 32px 22px 56px; }
.crumbs { font-size: 0.8rem; color: var(--c-muted); margin-bottom: 22px; }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-gold); }
.crumbs .sep { margin: 0 7px; opacity: 0.6; }
.eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 10px; }
h1 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.15; margin-bottom: 16px; text-wrap: balance; }
h1 em { color: var(--c-gold); font-style: italic; }
.lead { font-size: 1.1rem; color: var(--c-muted); margin-bottom: 30px; }
h2 { font-family: var(--ff-display); font-weight: 600; font-size: 1.65rem; line-height: 1.25; margin: 38px 0 12px; color: var(--c-cream); text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 700; margin: 22px 0 6px; color: var(--c-gold-soft); letter-spacing: 0.02em; }
.page p { margin-bottom: 14px; }
.page ul, .page ol { margin: 0 0 16px 22px; }
.page li { margin-bottom: 7px; }
.page strong { color: var(--c-gold-soft); font-weight: 700; }
@media (prefers-color-scheme: light) { .page strong { color: #8A6A10; } }
.note { font-size: 0.86rem; color: var(--c-muted); border-left: 3px solid var(--c-gold); padding: 4px 0 4px 14px; margin: 18px 0; }
.updated { font-size: 0.82rem; color: var(--c-muted); margin-bottom: 26px; }

/* ── HERO de Maestro del Día / signo ── */
.hero-glyph { display: flex; align-items: center; gap: 22px; margin: 6px 0 24px; }
.hero-glyph .glyph { font-family: var(--ff-display); font-size: 5.2rem; line-height: 1; color: var(--c-gold); min-width: 90px; text-align: center; }
.hero-glyph .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-cream); }
.chip.wood { border-color: #2D7A56; } .chip.fire { border-color: #C25B3A; } .chip.earth { border-color: #B8860B; } .chip.metal { border-color: #8B9EB8; } .chip.water { border-color: #2B6CB0; }

/* ── TARJETAS ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 26px; }
.card { display: block; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 16px; color: var(--c-cream); transition: var(--transition); }
.card:hover { border-color: var(--c-gold); transform: translateY(-2px); text-decoration: none; }
.card .g { font-family: var(--ff-display); font-size: 2.2rem; color: var(--c-gold); line-height: 1.1; }
.card .t { font-weight: 700; margin-top: 6px; font-size: 0.98rem; }
.card .s { font-size: 0.82rem; color: var(--c-muted); margin-top: 3px; line-height: 1.5; }
.card .e { font-size: 1.9rem; }

/* ── TABLAS ── */
.tbl-wrap { overflow-x: auto; margin: 14px 0 22px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
th { color: var(--c-gold); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── BLOQUES ── */
.cta-box { background: linear-gradient(135deg, rgba(45,122,86,0.9), rgba(26,74,53,0.95)); border-radius: 16px; padding: 26px 24px; text-align: center; margin: 40px 0 8px; color: #F7F0E3; }
.cta-box h2 { margin: 0 0 8px; font-size: 1.5rem; color: #F7F0E3; }
.cta-box p { color: #F7F0E3; opacity: 0.92; margin-bottom: 16px; }
.btn { display: inline-block; background: var(--c-gold); color: #0D1927; font-weight: 800; padding: 12px 28px; border-radius: 30px; }
.btn:hover { background: var(--c-gold-soft); text-decoration: none; color: #0D1927; }
.rel { margin-top: 36px; padding-top: 6px; border-top: 1px solid var(--c-border); }
.rel-tag { display: inline-block; margin: 4px 8px 4px 0; padding: 5px 14px; border-radius: 18px; border: 1px solid var(--c-border); font-size: 0.86rem; background: var(--c-card); color: var(--c-cream); }
.rel-tag:hover { border-color: var(--c-gold); text-decoration: none; color: var(--c-gold); }
.rel-tag.on { border-color: var(--c-gold); color: var(--c-gold); }

/* ── VIDEO (fachada: no carga YouTube hasta hacer clic) ── */
.vwrap { max-width: 300px; margin: 14px 0 6px; }
.vfacade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 9/16; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--c-border); color: #F7F0E3; font-family: var(--ff-body);
  background: linear-gradient(160deg, #152238 0%, #0D1927 62%, #1A4A35 100%); }
.vfacade .g { font-family: var(--ff-display); font-size: 4rem; color: #C9A135; opacity: 0.85; line-height: 1; }
.vfacade .p { background: rgba(201,161,53,0.92); color: #0D1927; font-weight: 800; padding: 8px 20px; border-radius: 22px; font-size: 0.9rem; }
.vfacade:hover .p { background: #E8C96B; }
.vwrap iframe { width: 100%; aspect-ratio: 9/16; border: 0; border-radius: 14px; }
.vsoon { font-size: 0.9rem; color: var(--c-muted); }

/* ── PIE ── */
.pfooter { background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 44px 22px 26px; }
.pfooter-in { max-width: 1000px; margin: 0 auto; }
.pfooter-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.pfooter h4 { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 12px; }
.pfooter ul { list-style: none; }
.pfooter li { margin-bottom: 8px; font-size: 0.88rem; }
.pfooter li a { color: var(--c-muted); }
.pfooter li a:hover { color: var(--c-gold); }
.pfooter .brand { font-family: var(--ff-display); font-size: 1.7rem; color: var(--c-gold); margin-bottom: 8px; }
.pfooter .tag { font-size: 0.86rem; color: var(--c-muted); max-width: 300px; }
.pfooter-bottom { border-top: 1px solid var(--c-border); padding-top: 18px; font-size: 0.76rem; color: var(--c-muted); display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .pfooter-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pfooter-top { grid-template-columns: 1fr; } .hero-glyph .glyph { font-size: 4rem; min-width: 70px; } }

/* ── COOKIES ── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--c-surface); border-top: 1px solid var(--c-gold);
  padding: 14px 22px; display: none; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 -6px 24px rgba(0,0,0,0.35); }
.cookie-banner p { font-size: 0.8rem; color: var(--c-cream); max-width: 640px; margin: 0; line-height: 1.5; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn-outline, .cookie-btn-solid { padding: 8px 20px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 1.5px solid var(--c-gold); font-family: var(--ff-body); }
.cookie-btn-outline { background: transparent; color: var(--c-gold); }
.cookie-btn-solid { background: var(--c-gold); color: #0D1927; }
@media (max-width: 560px) { .cookie-banner { flex-direction: column; text-align: center; padding: 14px; } }

/* Matriz de compatibilidad (12×12) */
.matrix .tbl-wrap { margin: 14px 0 8px; }
.matrix table { min-width: 560px; }
.matrix th, .matrix td { text-align: center; padding: 4px 2px; font-size: 1rem; }
.matrix td:first-child { text-align: left; white-space: nowrap; font-size: 0.82rem; padding-right: 10px; }
.msym { display: inline-block; min-width: 26px; line-height: 26px; border-radius: 6px; font-weight: 800; font-size: 0.9rem; text-align: center; text-decoration: none !important; }
.m-same { color: var(--c-muted); background: rgba(138,155,176,0.14); }
.m-yukhap { color: #E8788A; background: rgba(232,120,138,0.14); }
.m-samhap { color: var(--c-jade-soft); background: rgba(77,175,124,0.14); }
.m-chung { color: #E0913A; background: rgba(224,145,58,0.16); }
.m-neutral { color: var(--c-muted); }
a.msym:hover { outline: 1px solid var(--c-gold); }
.legend { margin: 6px 0 22px; line-height: 2.2; }

/* Buscador de año (signo chino por año) */
.yearfind{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 8px;padding:16px;border:1px solid rgba(214,176,80,.3);border-radius:12px;background:rgba(214,176,80,.06)}
.yearfind label{font-weight:700;margin-right:6px}
.yearfind input{width:140px;padding:10px 12px;font-size:1.05rem;border-radius:8px;border:1px solid rgba(214,176,80,.45);background:rgba(255,255,255,.06);color:inherit;font-family:inherit}
.yearfind .btn{border:0;cursor:pointer}

.about-sign{margin:26px 0 8px}.about-sign img{max-width:260px;height:auto;filter:brightness(1.05)}

/* Suscripción por correo */
.sub-box{margin:22px 0;padding:22px;border:1px solid rgba(214,176,80,.3);border-radius:14px;background:rgba(255,255,255,.03)}
.sub-box h2{margin:0 0 6px;font-size:1.25rem}
.sub-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 8px}
.sub-row input[type=email]{flex:1 1 220px;padding:11px 13px;font-size:1rem;border-radius:8px;border:1px solid rgba(214,176,80,.45);background:rgba(255,255,255,.06);color:inherit;font-family:inherit}
.sub-row .btn{border:0;cursor:pointer}
.sub-consent{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;opacity:.85;line-height:1.4}
.sub-consent input{margin-top:3px}
.sub-msg{margin-top:10px;font-weight:700;color:#D4A83A}