:root {
  color-scheme: dark;
  --bg: #110e16;
  --panel: #1c1723;
  --text: #f3ecdf;
  --muted: #c7bba8;
  --gold: #e0ad58;
  --line: #453653;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.7 system-ui, sans-serif; }
a { color: var(--gold); }
.site-header, main, footer { width: min(100% - 2rem, 860px); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
main { padding-block: 3rem; }
article { max-width: 760px; margin-inline: auto; }
h1, h2 { line-height: 1.2; text-wrap: balance; }
h1 { margin: .25rem 0 1rem; font-family: Georgia, serif; font-size: clamp(2.2rem, 7vw, 4rem); }
h2 { margin-top: 2.5rem; font-size: clamp(1.45rem, 4vw, 2rem); }
.eyebrow { margin: 0; color: var(--gold); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lead { color: var(--muted); font-size: 1.2rem; }
.byline { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.position-list { padding-left: 1.4rem; }
.position-list li + li { margin-top: .5rem; }
.direct-answer, .free-draw, .voice-cta { margin-top: 3rem; padding: clamp(1.25rem, 5vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.direct-answer h2, .free-draw h2, .voice-cta h2 { margin-top: .4rem; }
label { display: block; margin-bottom: .35rem; font-weight: 700; }
textarea { width: 100%; min-height: 7rem; resize: vertical; padding: .85rem; border: 1px solid #665275; border-radius: 10px; background: #0f0c13; color: var(--text); font: inherit; }
button, .button { display: inline-block; margin-top: 1rem; padding: .8rem 1.1rem; border: 0; border-radius: 10px; background: var(--gold); color: #1a111f; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.seo-draw-status { min-height: 1.7rem; margin-top: .75rem; color: var(--muted); }
.seo-draw-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.seo-draw-result h3 { margin-bottom: .35rem; }
.seo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; padding: 0; list-style: none; }
.seo-cards li { padding: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.seo-cards img { display: block; width: 100%; height: auto; margin-bottom: .65rem; border-radius: 7px; aspect-ratio: 18 / 31; object-fit: cover; }
.related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.related-links a { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.post-list { display: grid; gap: 1rem; margin-top: 2rem; }
.post-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.post-card h2 { margin-top: 0; }
.blog-hub ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .65rem .85rem; padding: 0; list-style: none; }
.blog-hub a { display: block; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.faq details { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; }
.analytics-consent-banner { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; width: min(430px, calc(100% - 2rem)); padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 35px #0008; }
.analytics-consent-banner p { margin: 0; }
.analytics-consent-banner div { display: flex; gap: .75rem; justify-content: flex-end; }
.analytics-consent-banner button { margin-top: .75rem; }
.spread-directory { margin-top: 2.5rem; padding: clamp(1.25rem, 5vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.spread-directory h2 { margin-top: 0; }
.spread-directory h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; color: var(--gold); }
.spread-directory h3:first-of-type { margin-top: .5rem; }
.spread-directory ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; }
.spread-directory a { text-decoration: none; }
footer { padding-block: 2rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

/* Ejemplo de tirada: misma forma real (grid-template-areas) que usa la app
   en apps/web_full_duplex/frontend/styles.css (.cards-grid.layout-*), para
   que la Cruz Celta, la Estrella, la Herradura, etc. se vean con su forma
   real y no como una rejilla genérica. */
.example-spread { display: grid; gap: 8px; margin: 1.25rem 0 1.5rem; }
.example-spread figure { min-width: 0; margin: 0; text-align: center; }
.example-spread img { display: block; width: 100%; height: auto; border-radius: 7px; aspect-ratio: 18 / 31; object-fit: cover; }
.example-spread figcaption { margin-top: .3rem; overflow-wrap: break-word; hyphens: auto; font-size: .72rem; line-height: 1.25; color: var(--muted); }
.example-spread figcaption strong { display: block; overflow-wrap: break-word; hyphens: auto; color: var(--text); font-size: .78rem; }

.example-spread.layout-single { grid-template-columns: minmax(110px, 180px); justify-content: center; grid-template-areas: "c1"; }
.example-spread.layout-classic_three { grid-template-columns: repeat(3, minmax(90px, 1fr)); grid-template-areas: "c1 c2 c3"; }

.example-spread.layout-celtic_cross {
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  grid-template-rows: repeat(4, minmax(110px, auto));
  grid-template-areas:
    ".  c3 .  .  c10"
    "c5 c1 c2 c6 c9"
    ".  c4 .  .  c8"
    ".  .  .  .  c7";
}

.example-spread.layout-estrella {
  grid-template-columns: repeat(5, minmax(60px, 1fr));
  grid-template-rows: repeat(5, minmax(80px, auto));
  grid-template-areas:
    ". . c1 . ."
    ". c5 . c6 ."
    ". . c7 . ."
    ". c2 . c3 ."
    ". . c4 . .";
}

.example-spread.layout-herradura {
  grid-template-columns: repeat(7, minmax(50px, 1fr));
  grid-template-rows: repeat(4, minmax(80px, auto));
  grid-template-areas:
    ". . . c4 . . ."
    ". c3 . . . c5 ."
    "c2 . . . . . c6"
    ". c1 . . . c7 .";
}

.example-spread.layout-piramide {
  grid-template-columns: repeat(9, minmax(36px, 1fr));
  grid-template-rows: repeat(5, minmax(78px, auto));
  grid-template-areas:
    ". . . . c1 . . . ."
    ". . . c2 . c3 . . ."
    ". . c4 . c5 . c6 . ."
    ". c7 . c8 . c9 . c10 ."
    "c11 . c12 . c13 . c14 . c15";
}

.example-spread.layout-arbol_vida {
  grid-template-columns: repeat(5, minmax(60px, 1fr));
  grid-template-rows: repeat(5, minmax(80px, auto));
  grid-template-areas:
    ". . c10 . ."
    ". c3 . c6 ."
    ". c2 c9 c7 ."
    ". c4 c8 c5 ."
    ". . c1 . .";
}

@media (max-width: 640px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .related-links { grid-template-columns: 1fr; }

  .example-spread.layout-celtic_cross { grid-template-columns: repeat(5, minmax(50px, 1fr)); grid-template-rows: repeat(4, minmax(80px, auto)); }
  .example-spread.layout-estrella { grid-template-columns: repeat(5, minmax(42px, 1fr)); grid-template-rows: repeat(5, minmax(60px, auto)); }
  .example-spread.layout-herradura { grid-template-columns: repeat(7, minmax(36px, 1fr)); grid-template-rows: repeat(4, minmax(60px, auto)); }
  .example-spread.layout-piramide { grid-template-columns: repeat(9, minmax(26px, 1fr)); grid-template-rows: repeat(5, minmax(54px, auto)); }
  .example-spread.layout-arbol_vida { grid-template-columns: repeat(5, minmax(42px, 1fr)); grid-template-rows: repeat(5, minmax(60px, auto)); }
}

.video-embed { text-align: center; }
.video-embed iframe { display: block; margin: 0 auto; width: min(320px, 100%); aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: 12px; background: #0f0c13; }

/* Página /opiniones: cards de testimonios (reutilizan .post-card) */
.testimonial-card .testimonial-stars { color: var(--gold, #d8a451); letter-spacing: 2px; margin: 0 0 6px; }
.testimonial-card .testimonial-text { margin: 0 0 8px; }
.testimonial-card .testimonial-meta { opacity: 0.8; font-size: 14px; margin: 0; }