/* Fundación Saint Germain México — public site styles
   Luminous palette: violet, blue, gold, soft rose, cream, white.
   Type is deep indigo-violet; backgrounds are white, cream and mist. */

:root {
  --violet: #7b4fab;
  --violet-deep: #4a2d7a;
  --violet-soft: #e8dff5;
  --violet-mist: #f4f1fa;
  --blue: #1e5bd4;
  --blue-sky: #6fa8dc;
  --blue-soft: #dbe6fa;
  --gold: #a87a2c;          /* text-safe gold on cream/white */
  --gold-bright: #c9a24a;
  --gold-light: #f2d98d;
  --rose: #d6889e;
  --rose-soft: #f1c8d4;
  --cream: #faf7f2;
  --white: #ffffff;
  --ink: #3a2a60;           /* deep indigo — replaces black */
  --ink-soft: #5f5878;
  --body: #463c63;
  --line: #e6e0f0;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* compatibility names used by page markup */
  --sgf-ink: var(--ink);
  --sgf-ink-soft: var(--ink-soft);
  --sgf-gold: var(--gold);
  --sgf-line: var(--line);
  --sgf-warm: var(--cream);
  --sgf-serif: var(--serif);
  --sgf-sans: var(--sans);
  --violet-flame: var(--violet);
  --gold-presence: var(--gold-bright);
  --blue-michael: var(--blue);
  --rose-soft-c: var(--rose);
  --green-life: #7fb069;
  --rule: var(--line);

  --wrap: 1180px;
  --shadow: 0 18px 40px -26px rgba(74, 45, 122, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 20.5px; line-height: 1.75;
  color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--violet-deep); }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue-sky); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.12; text-wrap: balance; }

/* ---------- layout ---------- */
.sgf-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(22px, 5vw, 52px); }
.sgf-page { padding: clamp(56px, 8vw, 108px) 0 clamp(76px, 10vw, 128px); }
.sgf-prose { max-width: 800px; margin-left: auto; margin-right: auto; }
.sgf-prose p { font-size: 21.5px; line-height: 1.82; margin: 0 0 24px; }
.sgf-prose h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 56px 0 18px; }
.sgf-prose h3 { font-size: 26px; margin: 36px 0 12px; }
.sgf-prose p.lead { font-size: clamp(22px, 2.4vw, 25px); color: var(--ink-soft); }
.sgf-prose img { border-radius: 16px; }
.sgf-prose li { margin-bottom: 8px; }
.sec { padding: clamp(76px, 11vw, 128px) 0; }
.sec-cream { background: var(--cream); }
.sec-mist { background: linear-gradient(180deg, var(--violet-mist), #fbf9fe); }
.center { text-align: center; }
.narrow { max-width: 660px; margin-left: auto; margin-right: auto; }

.sgf-eyebrow { font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 800; color: var(--gold); margin: 0 0 16px; }
.sgf-h, h1.sgf-h, h2.sgf-h { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 18px; color: var(--ink); }
h1.sgf-h { font-size: clamp(40px, 6vw, 72px); }
h2.sgf-h { font-size: clamp(34px, 4.6vw, 54px); }
.lead { font-size: clamp(22px, 2.4vw, 25px); color: var(--ink-soft); line-height: 1.6; }
.page-intro { margin-bottom: 40px; }
.page-intro p { font-size: 21.5px; line-height: 1.82; margin: 0 0 18px; }
.page-intro .lead { max-width: none; font-size: clamp(22px, 2.4vw, 25px); }

/* ---------- buttons ---------- */
.btn-a { display: inline-block; text-decoration: none; border-radius: 999px; font-weight: 800; font-size: 16px;
  padding: 15px 30px; cursor: pointer; border: 1.5px solid transparent; transition: background .2s, color .2s, box-shadow .2s; font-family: inherit; line-height: 1.3; }
.btn-ink { background: var(--violet-deep); color: #fff; box-shadow: 0 10px 24px -12px rgba(74,45,122,.7); }
.btn-ink:hover { background: var(--violet); color: #fff; }
.btn-gold { background: var(--gold-light); color: var(--violet-deep); }
.btn-gold:hover { background: #f7e6ab; color: var(--violet-deep); }
.btn-out { background: rgba(255,255,255,.85); border-color: var(--violet-deep); color: var(--violet-deep); }
.btn-out:hover { background: var(--violet-deep); color: #fff; }

/* ---------- header ---------- */
.hdr-wrap { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr { display: flex; align-items: center; gap: 22px; padding: 12px clamp(16px, 4vw, 40px); max-width: 1320px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg, .brand .mark { width: 54px; height: 54px; flex-shrink: 0; object-fit: contain; }
.brand-t { display: flex; flex-direction: column; line-height: 1.05; }
.brand-t b { white-space: nowrap; font-family: var(--serif); font-size: clamp(17px, 4vw, 21px); font-weight: 700; }
.brand-t span { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin-top: 3px; }
.nav { display: flex; gap: 20px; font-size: 15px; white-space: nowrap; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--violet-deep); border-bottom-color: var(--gold-bright); }
.hdr-tools { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; border: 1px solid #d9cfe9; border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 800; }
.lang a { padding: 6px 12px; text-decoration: none; color: var(--violet-deep); background: #fff; }
.lang a[aria-current="true"] { background: var(--violet-deep); color: #fff; }
.radio-toggle { border: 1px solid #d9cfe9; background: #fff; color: var(--violet-deep); border-radius: 999px; padding: 6px 14px; font: 800 12px var(--sans); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.radio-toggle:hover { background: var(--violet-mist); }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #d9cfe9; background: #fff; color: var(--violet-deep); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 20px; height: 20px; }
.mobnav { display: none; flex-direction: column; padding: 6px 20px 18px; background: #fff; border-top: 1px solid var(--line); }
.mobnav.open { display: flex; }
.mobnav a { text-decoration: none; color: var(--violet-deep); font-weight: 700; font-size: 18px; padding: 13px 4px; border-bottom: 1px solid #f0ebf7; }
.mobnav .btn-a { margin-top: 14px; text-align: center; border-bottom: 0; color: #fff; }

/* ---------- footer ---------- */
.ftr { background: linear-gradient(160deg, #4a2d7a, #5a3b90); color: #e6dcf5; padding: 72px 0 52px; }
.ftr a { color: #e6dcf5; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.2); }
.ftr-top nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; font-weight: 700; }
.ftr-brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 21px; font-weight: 700; color: #fff; }
.ftr-brand svg, .ftr-brand .mark { width: 52px; height: 52px; object-fit: contain; }
.ftr p { margin: 32px 0 0; font-size: 16.5px; line-height: 1.75; color: #d4c7ea; }
.ftr p strong { color: #fff; }
.ftr .fine { font-size: 13px; color: #c2b3df; margin-top: 12px; }
.ftr-world { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin: 22px 0 0; font-size: 14.5px; }
.ftr-world span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #f2d98d; }
.ftr-world a { color: #f7f1ff; border-bottom: 1px solid rgba(242, 217, 141, .45); }
.ftr-world a:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; }

/* ---------- quotes ---------- */
.sgf-quote, .words { margin: 40px 0 10px; padding: 8px 0 8px 28px; border-left: 3px solid var(--gold-bright);
  font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2.8vw, 28px); line-height: 1.5; color: var(--ink); }
.cite { margin: 0 0 12px; padding-left: 31px; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; }
.gloss { margin: 8px 0 32px; padding: 16px 22px; background: var(--violet-mist); border-radius: 14px; font-size: 18.5px !important; line-height: 1.65 !important; color: var(--ink-soft); }
.gloss b { color: var(--violet-deep); }
.speech { margin: 0 0 14px !important; }
.speech-name { font-weight: 800; color: var(--violet-deep); }
.note-box { margin: 36px 0; padding: 28px 32px; background: var(--cream); border-radius: 18px; border: 1px solid #efe6d6; }
.note-box p { margin: 0 !important; }
.fine { font-size: 15px; color: var(--ink-soft); }

/* ---------- home ---------- */
.hero { position: relative; background: #fff8e4; }
.hero-stage { position: relative; }
.hero-zoom { position: relative; }
.hero img.hero-img { display: block; width: 100%; height: calc(100svh - var(--hdr, 86px)); max-height: none; object-fit: cover; object-position: center 40%; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; background: linear-gradient(180deg, rgba(255,248,228,0), #fff8e4); pointer-events: none; }
.hero-copy { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 100%; max-width: 980px; padding: 0 28px; text-align: center; }
.hero-copy h1 { margin: 0 0 16px; font-size: clamp(36px, 6vw, 76px); text-shadow: 0 2px 22px rgba(255,255,255,.95), 0 1px 3px rgba(255,255,255,.95); }
.hero-copy .sub { margin: 0 auto 12px; max-width: 580px; font-size: clamp(17px, 2.1vw, 22px); color: var(--ink); font-weight: 700; text-shadow: 0 1px 10px rgba(255,255,255,.95); }
.hero-actions { position: relative; z-index: 3; display: flex; justify-content: center; padding: 72px 22px 8px; background: #fff8e4; }
.hero-copy .sgf-eyebrow { font-size: 17px; letter-spacing: .18em; text-shadow: 0 1px 10px rgba(255,255,255,.9); }
.hero-copy .fine { margin: 20px 0 0; color: var(--ink); font-weight: 700; text-shadow: 0 1px 8px rgba(255,255,255,.95); }
.btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(40px, 6vw, 88px); align-items: center; }
.masters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.master a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.master img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); transition: transform .25s; }
.master a:hover img { transform: scale(1.04); }
.master b { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1.15; }
.master span { font-size: 14.5px; color: var(--ink-soft); }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.card { position: relative; display: block; flex: 1 1 280px; max-width: 370px; height: 320px; border-radius: 20px; overflow: hidden; text-decoration: none; background: var(--violet); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-5px); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.card img.fit-chart, .tile img.fit-chart { object-position: center 12%; }
.card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,45,122,0) 38%, rgba(74,45,122,.55) 66%, rgba(74,45,122,.88) 100%); }
.card .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.card h3 { margin: 0 0 6px; color: #fff; font-size: 27px; }
.card p { margin: 0; color: #f1eafb; font-size: 17.5px; line-height: 1.5; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tile { display: flex; flex-direction: column; text-decoration: none; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: box-shadow .2s, transform .2s; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.tile-body { display: block; padding: 20px 20px 24px; }
.tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tile .num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.tile h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.tile p { margin: 10px 0 0; font-size: 17.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.list-cards a { display: block; text-decoration: none; padding: 28px 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: box-shadow .2s, transform .2s; }
.list-cards a:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.list-cards b { display: block; font-family: var(--serif); font-size: 25px; color: var(--ink); line-height: 1.2; margin-bottom: 10px; }
.list-cards span { font-size: 17.5px; color: var(--ink-soft); line-height: 1.55; }

/* Palabras de los Maestros: image, title, a short line, and room between cards */
.word-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 44px 40px; }
.word-card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  padding: 16px 16px 22px; border-radius: 22px; background: #fff;
  border: 1px solid rgba(201, 162, 74, .28);
  box-shadow: 0 18px 40px -28px rgba(74, 45, 122, .4);
}
.word-card, .word-card:hover, .word-card * { text-decoration: none; }
.word-pic { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--wash-lilac); }
.word-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.word-pic-empty { background: linear-gradient(165deg, var(--wash-gold), var(--wash-lilac)); }
.word-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px 0 2px; width: 100%; }
.word-card b { display: block; width: 100%; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.15; color: var(--violet-deep); }
.word-ex {
  display: -webkit-box; width: 100%; color: var(--violet); font-size: 19px; line-height: 1.5;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.word-more {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--violet);
  color: var(--violet-deep); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.word-card:hover .word-more { background: var(--violet-deep); color: #fff; }
@media (min-width: 980px) {
  .word-cards-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 720px) {
  .word-cards { grid-template-columns: 1fr; gap: 28px; }
}

/* official houses, on the Words index */
.family { margin: 88px 0 12px; padding-top: 64px; border-top: 1px solid var(--line); }
.family .lead { max-width: none; }
.family-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.family-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 196px; text-decoration: none;
  padding: 22px 20px 18px; border-radius: 18px; border: 1px solid rgba(201, 162, 74, .28);
  background: linear-gradient(165deg, rgba(255,255,255,.84), rgba(255,255,255,.46)), var(--wash, var(--wash-cream));
}
.family-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--gold); }
.family-card b { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.12; color: var(--ink); }
.family-d { font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); }
.family-go { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.family-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.family-card:hover .family-go { color: var(--violet-deep); }
@media (max-width: 980px) {
  .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quote-slide { max-width: 760px; margin: 0 auto; text-align: center; }
.quote-slide blockquote { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.4; color: var(--ink); }
.quote-slide .cite { padding: 0; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: #d9cfe9; cursor: pointer; padding: 0; }
.dots button[aria-current="true"] { background: var(--gold-bright); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 36px 0; display: grid; gap: 20px; }
.steps li { counter-increment: step; position: relative; padding: 26px 28px 26px 84px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 22px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--gold-bright)); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.steps h3 { margin: 0 0 6px; font-size: 26px; }
.steps p { margin: 0 !important; font-size: 19px !important; color: var(--ink-soft); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 32px; }
.contact-card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.contact-card h3 { margin: 0 0 8px; font-size: 26px; }
.contact-card p { font-size: 20px !important; color: var(--ink-soft); line-height: 1.55; }
.contact-card .sgf-eyebrow { font-size: 12.5px !important; line-height: 1.45; overflow-wrap: break-word; }
.contact-card .btn-a { display: block; text-align: center; overflow-wrap: anywhere; }
/* Contacto WhatsApp QR (FIX4): for visitors on a computer; on a phone the button opens WhatsApp directly, so the code is hidden */
.contact-card .wa-qr { margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-card .wa-qr img { width: 150px; height: 150px; flex: none; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; image-rendering: pixelated; }
.contact-card .wa-qr figcaption { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 760px), (pointer: coarse) { .contact-card .wa-qr { display: none; } }
.hidden { display: none !important; }

/* ---------- FAQ ---------- */
.faq-search { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; margin: 8px 0 32px; }
details.qa { border-bottom: 1px solid var(--line); }
details.qa summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-weight: 800; color: var(--ink); font-size: 19px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--gold); font-weight: 400; }
details.qa[open] summary::after { content: '–'; }
details.qa .ans { padding: 0 0 20px; color: var(--body); }
details.qa .ans p { margin: 0 0 12px !important; }

/* ---------- radio ---------- */
#radio { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: none; }
#radio.show { display: block; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(160deg, #4a2d7a, #5a3b90); color: #f1eafb; border-radius: 999px; box-shadow: 0 0 0 3px #fff, 0 0 22px 6px rgba(255,255,255,.5), 0 18px 40px -16px rgba(74,45,122,.7); max-width: calc(100vw - 36px); }
.radio-card button { border: 0; cursor: pointer; font: 800 12px var(--sans); border-radius: 999px; }
.r-play { width: 40px; height: 40px; background: var(--gold-light); color: var(--violet-deep); font-size: 14px; flex-shrink: 0; }
.r-st { padding: 7px 12px; background: rgba(255,255,255,.14); color: #f1eafb; }
.r-st[aria-pressed="true"] { background: var(--gold-light); color: var(--violet-deep); }
.r-close { width: 32px; height: 32px; background: rgba(255,255,255,.14); color: #f1eafb; }
.r-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.r-label small { display: block; font-weight: 600; color: #d4c7ea; letter-spacing: 0; }

/* ---------- lightbox ---------- */
#lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(74,45,122,.93); opacity: 0; pointer-events: none; transition: opacity .25s; }
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox .inner { position: relative; max-width: 760px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
#lightbox img { max-height: 76vh; width: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 70px -24px rgba(58,42,96,.8); }
#lightbox h3 { color: #fff; margin: 0; font-size: 30px; }
#lightbox p { color: #e6dcf5; margin: 0; max-width: 520px; font-size: 16px; }
#lightbox .x { position: absolute; top: -10px; right: -4px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; cursor: pointer; }
.sgf-zoom { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.sgf-zoom img { transition: transform .2s; }
.sgf-zoom:hover img { transform: scale(1.015); }

/* WhatsApp: a small round button bottom left on every page; on a computer it opens a small box to write (#wa-box) */
#wa-float { position: fixed; left: 18px; bottom: 18px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: #2f9e6c; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 12px 30px -10px rgba(74,45,122,.55); text-decoration: none; transition: transform .2s; }
#wa-float:hover { transform: scale(1.06); background: #278a5d; }
#wa-float:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
#wa-float svg { width: 26px; height: 26px; }
#wa-box { position: fixed; left: 18px; bottom: 86px; z-index: 61; width: min(340px, calc(100vw - 36px)); padding: 18px 18px 14px; color: var(--ink);
  background: #fffcf8; border: 1px solid rgba(201, 162, 74, .55); border-radius: 18px; box-shadow: 0 22px 46px -20px rgba(74, 45, 122, .55); animation: wa-in .22s ease both; }
#wa-box[hidden] { display: none !important; }
@keyframes wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#wa-box h2 { margin: 0 30px 10px 0; font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--ink); }
#wa-box label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px; }
#wa-box textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; max-height: 40vh; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: 16px/1.45 var(--sans); color: var(--ink); background: #fff; }
#wa-box textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
#wa-box .wa-left { margin: 6px 0 12px; font-size: 12px; color: var(--ink-soft); text-align: right; }
#wa-box .wa-send { display: block; text-align: center; padding: 10px 18px; font-size: 15px; background: #2f9e6c; }
#wa-box .wa-send:hover { background: #278a5d; }
#wa-box .wa-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
#wa-box .wa-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 16px; cursor: pointer; }
#wa-box .wa-x:hover { background: var(--violet-mist); color: var(--violet-deep); }
.ftr { padding-bottom: 96px; }

/* a quiet invitation to write. It does not cover the page. */
#reach {
  position: fixed; left: 18px; bottom: 18px; z-index: 55; width: min(300px, calc(100vw - 36px));
  padding: 20px 20px 16px; color: var(--ink);
  background: rgba(255, 252, 248, .94); border: 1px solid rgba(201, 162, 74, .55); border-radius: 18px;
  box-shadow: 0 18px 40px -22px rgba(74, 45, 122, .45);
}
#reach[hidden] { display: none !important; }
#reach.show { animation: reach-in 1.25s ease both; }
@keyframes reach-in {
  0% { opacity: 0; transform: translateY(10px); }
  46% { opacity: 1; transform: translateY(0) rotate(0deg); }
  62% { transform: rotate(-1.4deg); }
  76% { transform: rotate(1.3deg); }
  88% { transform: rotate(-0.6deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
#reach .reach-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 16px; cursor: pointer; }
#reach .reach-x:hover { background: var(--violet-mist); color: var(--violet-deep); }
#reach .reach-eye { margin: 0 28px 6px 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--gold); }
#reach h2 { margin: 0 24px 8px 0; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ink); }
#reach .reach-note { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
#reach .reach-go { padding: 10px 18px; font-size: 14px; }
#reach .reach-quiet { display: block; width: max-content; margin: 26px 0 0; font-size: 13px; font-weight: 700; color: var(--violet); text-decoration: none; border-bottom: 1px solid rgba(123, 79, 171, .35); }
body:has(#reach.show):not(.reading) { padding-bottom: 230px; }
@media (max-width: 820px) {
  #reach { width: min(280px, calc(100vw - 28px)); padding: 16px 16px 14px; }
  #reach h2 { font-size: 22px; }
}
#reach .reach-quiet[hidden] { display: none !important; }
#reach .reach-quiet:hover { color: var(--violet-deep); }
body:has(#radio.show) #reach, body:has(#wa-float) #reach { bottom: 92px; }
body:has(#flame-layer) #reach { visibility: hidden; pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav, .hdr-tools .cta-d { display: none; }
  .burger { display: inline-flex; }
  .radio-toggle span { display: none; }
}
@media (max-width: 820px) {
  .hero-copy { width: min(620px, 100%); padding: 0 18px; }
  .hero-copy h1 { font-size: clamp(34px, 9vw, 56px); }
}
/* pinned sun zoom. These selectors beat the 820px static hero while the scene is on. */
html.hero-on { overflow-x: clip; }
html.hero-on .hero { height: 240vh; }
html.hero-on .hero-stage { position: sticky; top: var(--hdr, 76px); height: calc(100vh - var(--hdr, 76px)); overflow: hidden; }
html.hero-on .hero-zoom { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 21%; will-change: transform; }
html.hero-on .hero img.hero-img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 21%; }
html.hero-on .hero-copy { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); z-index: 2; width: min(980px, 100%); max-width: 980px; margin: 0; padding: 0 28px; }
html.hero-on .hero-copy h1 { position: relative; z-index: 3; }
@media (max-width: 640px) {
  .hdr { gap: 8px; padding: 10px 14px; }
  .hdr-tools { gap: 8px; }
  .brand { gap: 9px; min-width: 0; }
  .brand svg, .brand .mark { width: 42px; height: 42px; }
  .brand-t b { font-size: 15.5px; }
  .brand-t span { font-size: 9.5px; letter-spacing: .24em; }
  .lang a { padding: 6px 9px; }
  .radio-toggle { padding: 6px 9px; }
  body { font-size: 19.5px; }
  .tiles, .family-grid { grid-template-columns: 1fr; }
  .steps li { padding: 70px 20px 20px; }
  .card { height: 280px; }
  .brand-t span { letter-spacing: .22em; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.mobnav .mob-radio { display: none; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0ebf7; color: var(--violet-deep); font: 700 18px var(--sans); padding: 13px 4px; cursor: pointer; }

/* ---------- aquarelle: light washes drawn from the home painting ---------- */
:root {
  --wash-gold: #fff6d4;
  --wash-blue: #e7f3fc;
  --wash-pink: #fdeef4;
  --wash-lilac: #f3eafc;
  --wash-cream: #fbf6ea;
}
body { background: #fffcf8; }
/* pastel lights cross the page once, then fade; they do not turn back */
#lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#lights i {
  position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: radial-gradient(circle, var(--c) 0, color-mix(in srgb, var(--c) 35%, transparent) 28%, transparent 62%);
  animation: var(--path) var(--dur) linear infinite;
  animation-delay: var(--delay);
}
#lights .pink   { --c: #ffb0cc; --s: 46vw; --path: pass-a; --dur: 32s; --delay: -4s; }
#lights .blue   { --c: #8ec8ff; --s: 42vw; --path: pass-b; --dur: 36s; --delay: -18s; }
#lights .purple { --c: #c8a8ff; --s: 44vw; --path: pass-c; --dur: 30s; --delay: -9s; }
#lights .yellow { --c: #ffe58a; --s: 40vw; --path: pass-d; --dur: 34s; --delay: -22s; }
#lights .green  { --c: #a8e4b4; --s: 38vw; --path: pass-e; --dur: 38s; --delay: -12s; }
#lights .gold   { --c: #ffd060; --s: 48vw; --path: pass-f; --dur: 33s; --delay: -27s; }
@keyframes pass-a { 0% { transform: translate3d(-18vw, 12vh, 0); opacity: 0; } 14% { opacity: .9; } 86% { opacity: .75; } 100% { transform: translate3d(112vw, 38vh, 0); opacity: 0; } }
@keyframes pass-b { 0% { transform: translate3d(112vw, 8vh, 0); opacity: 0; } 14% { opacity: .85; } 86% { opacity: .7; } 100% { transform: translate3d(-16vw, 46vh, 0); opacity: 0; } }
@keyframes pass-c { 0% { transform: translate3d(18vw, -20vh, 0); opacity: 0; } 14% { opacity: .85; } 86% { opacity: .7; } 100% { transform: translate3d(62vw, 112vh, 0); opacity: 0; } }
@keyframes pass-d { 0% { transform: translate3d(70vw, 112vh, 0); opacity: 0; } 14% { opacity: .9; } 86% { opacity: .7; } 100% { transform: translate3d(8vw, -18vh, 0); opacity: 0; } }
@keyframes pass-e { 0% { transform: translate3d(-18vw, 78vh, 0); opacity: 0; } 14% { opacity: .8; } 86% { opacity: .65; } 100% { transform: translate3d(110vw, 18vh, 0); opacity: 0; } }
@keyframes pass-f { 0% { transform: translate3d(108vw, 70vh, 0); opacity: 0; } 14% { opacity: .9; } 86% { opacity: .75; } 100% { transform: translate3d(-14vw, 16vh, 0); opacity: 0; } }
.sgf-page, .ftr, #main { position: relative; z-index: 1; }
.sec-cream { background: linear-gradient(180deg, rgba(255, 248, 228, .9), rgba(253, 238, 244, .55)); }
/* Home buttons share this wash, so the field does not restart as a white band. */
.hero-actions + .sec-cream { background: linear-gradient(180deg, #fff8e4, rgba(253, 238, 244, .55)); }
.sec-mist { background: linear-gradient(180deg, rgba(231, 243, 252, .95), rgba(243, 234, 252, .72)); }
.tile, .list-cards a, .contact-card, .steps li, .note-box, .ans-btn, .gloss {
  background:
    linear-gradient(165deg, rgba(255,255,255,.78), rgba(255,255,255,.42)),
    var(--wash, var(--wash-cream));
  border-color: rgba(201, 162, 74, .28);
}
.tile:nth-child(4n+1), .list-cards a:nth-child(4n+1), .steps li:nth-child(4n+1), .contact-card:nth-child(4n+1), .family-card:nth-child(4n+1) { --wash: var(--wash-gold); }
.tile:nth-child(4n+2), .list-cards a:nth-child(4n+2), .steps li:nth-child(4n+2), .contact-card:nth-child(4n+2), .family-card:nth-child(4n+2) { --wash: var(--wash-blue); }
.tile:nth-child(4n+3), .list-cards a:nth-child(4n+3), .steps li:nth-child(4n+3), .contact-card:nth-child(4n+3), .family-card:nth-child(4n+3) { --wash: var(--wash-pink); }
.tile:nth-child(4n), .list-cards a:nth-child(4n), .steps li:nth-child(4n), .contact-card:nth-child(4n), .family-card:nth-child(4n) { --wash: var(--wash-lilac); }
.gloss { --wash: var(--wash-gold); }
.ans-btn:nth-child(4n+1) { --wash: var(--wash-gold); }
.ans-btn:nth-child(4n+2) { --wash: var(--wash-blue); }
.ans-btn:nth-child(4n+3) { --wash: var(--wash-pink); }
.ans-btn:nth-child(4n) { --wash: var(--wash-lilac); }
.quote-slide { background: linear-gradient(180deg, rgba(255,246,212,.55), rgba(255,255,255,0)); border-radius: 28px; padding: 12px 22px 8px; }
.card { box-shadow: 0 22px 40px -28px rgba(90, 70, 40, .45); }
.hdr-wrap { background: rgba(255, 252, 248, .9); }
@media (max-width: 440px) {
  /* phone: Radio stays in the top bar as a small round purple icon (the menu entry stays too) */
  .radio-toggle { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; flex-shrink: 0; }
  .radio-toggle:hover, .radio-toggle[aria-expanded="true"] { background: var(--violet); }
  .radio-toggle svg { width: 18px; height: 18px; }
  .mobnav .mob-radio { display: block; }
  /* brand on two lines: "Saint Germain" / "Foundation México" */
  .brand-t { display: block; width: 9.6em; font-size: 14.5px; line-height: 1.12; }
  .brand-t b { display: inline; white-space: normal; font-size: 14.5px; }
  .brand-t span { display: inline; margin: 0 0 0 .4em; font-size: 9px; letter-spacing: .16em; }
}

/* ================= pass 2: motion, quotes, glossary, reading mode ================= */

/* header eases smaller and blurrier as the page moves */
.hdr-wrap { transition: background .35s ease, box-shadow .35s ease; }
.hdr { transition: padding .3s ease; }
.brand svg, .brand .mark { transition: width .3s ease, height .3s ease; }
.hdr-wrap.scrolled { background: rgba(255, 250, 242, .84); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 10px 30px -24px rgba(168, 122, 44, .35); }
.hdr-wrap.scrolled .hdr { padding-top: 6px; padding-bottom: 6px; }
.hdr-wrap.scrolled .brand svg, .hdr-wrap.scrolled .brand .mark { width: 42px; height: 42px; }

/* sections ease in (only when JS is running, so nothing is ever hidden without it) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* cards lift on hover */
.card, .tile, .list-cards a, .word-card, .contact-card, .steps li, .master img, .ans-btn { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .25s; }
.card:hover, .tile:hover, .list-cards a:hover, .word-card:hover, .contact-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(74,45,122,.5); }

/* the Chart lights once as it enters the view */
.chart-glow { filter: drop-shadow(0 24px 44px rgba(74,45,122,.25)); }
video.chart-glow { display: block; height: auto; background: transparent; }
.chart-glow.lit { animation: chart-lit 2.8s ease-out 1; }
@keyframes chart-lit {
  0% { filter: drop-shadow(0 24px 44px rgba(74,45,122,.25)); }
  45% { filter: drop-shadow(0 0 46px rgba(242,217,141,.95)) drop-shadow(0 24px 44px rgba(123,79,171,.35)); }
  100% { filter: drop-shadow(0 24px 44px rgba(74,45,122,.25)); }
}

/* Violet Flame page: a very slow wash above the title and in the side margins, never behind the text */
.has-wash { position: relative; overflow: hidden; padding-top: 150px; }
.has-wash > .sgf-wrap { position: relative; z-index: 1; }
.flame-wash { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: 0; pointer-events: none; }
.flame-wash::before, .flame-wash::after { content: ''; position: absolute; top: 0; background: linear-gradient(120deg, #e8dff5, #cdb8ee, #f1c8d4, #dbe6fa, #e8dff5); background-size: 300% 300%; animation: flame-wash 48s ease-in-out infinite; }
.flame-wash::before { left: 0; right: 0; height: 130px; -webkit-mask-image: linear-gradient(#4a2d7a, transparent); mask-image: linear-gradient(#4a2d7a, transparent); opacity: .85; }
.flame-wash::after { display: none; }
@media (min-width: 1240px) {
  .flame-wash::after { display: block; left: 0; width: calc((100% - 840px) / 2); bottom: 0; opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, #4a2d7a, transparent); mask-image: linear-gradient(90deg, #4a2d7a, transparent); }
  .flame-wash::before { opacity: .85; }
}
@keyframes flame-wash { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* quote of the day + sharing */
.quote-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.quote-nav button, .share-btn, .read-toggle { font: 800 13px var(--sans); color: var(--violet-deep); background: #fff; border: 1px solid #d9cfe9; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .2s; }
.quote-nav button:hover, .share-btn:hover, .read-toggle:hover { background: var(--violet-mist); }
.quote-slide .slide { animation: slide-in .8s ease both; }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.share { position: relative; display: inline-block; margin: 0 0 18px 27px; }
.quote-slide .share { margin: 8px 0 0; }
.share-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: none; }
.share.open .share-menu { display: block; }
.share-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px; font: 700 14px var(--sans); color: var(--violet-deep); cursor: pointer; }
.share-menu button:hover { background: var(--violet-mist); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--violet-deep); color: #fff; padding: 11px 20px; border-radius: 999px; font: 700 14px var(--sans); z-index: 90; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* glossary + terms */
.gl { margin: 28px 0; }
.gl-item { padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gl-item:target { background: var(--violet-mist); border-radius: 12px; padding-left: 14px; padding-right: 14px; }
.gl dt { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink); }
.gl dd { margin: 4px 0 0; color: var(--body); }
a.term { position: relative; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold); }
a.term:hover, a.term:focus-visible, a.term.open { border-bottom-style: solid; }
a.term::after { content: attr(data-def); position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, 80vw); padding: 10px 14px; background: var(--violet-deep); color: #fff; font: 600 14px/1.45 var(--sans); border-radius: 12px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .25s, transform .25s; z-index: 30; box-shadow: var(--shadow); }
a.term:hover::after, a.term:focus-visible::after, a.term.open::after { opacity: 1; transform: none; }
/* FIX12b: on phones the definition bubble starts at the word and is up to 288px wide. Hidden, it still widened the page
   (sideways scrolling on the 21 pages with glossary words); shown, it was cut off at the right edge. On touch screens and
   narrow windows the definition is a card across the bottom of the screen, above the WhatsApp and radio buttons. */
@media (hover: none), (max-width: 700px) {
  a.term::after { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; z-index: 85; }
}

/* Comenzar: gentle first question */
.ans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 22px 0; }
.ans-btn { padding: 20px 18px; text-align: left; font: 700 17px/1.35 var(--sans); color: var(--violet-deep); background: #fff; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
.ans-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ans-btn[aria-pressed="true"] { background: var(--violet-soft); border-color: var(--violet); }
.ans-panel { padding: 26px 28px; background: var(--cream); border: 1px solid #efe6d6; border-radius: 18px; margin: 14px 0; }
.js [data-ask] .ans-panel { display: none; }
.js [data-ask] .ans-panel.show { display: block; animation: slide-in .6s ease both; }
.ans-panel h3 { margin: 0 0 6px; font-size: 26px; }
.ans-links { margin: 12px 0 18px; padding-left: 20px; }

/* reading mode */
.read-bar { text-align: right; margin-bottom: 6px; }
body.reading { background: #fbf4e6; }
body.reading .hdr-wrap, body.reading .ftr, body.reading #radio, body.reading #wa-float, body.reading #wa-box, body.reading #reach, body.reading .skip, body.reading .flame-wash { display: none !important; }
body.reading .has-wash { padding-top: 0; }
body.reading .sgf-page { padding-top: 60px; background: #fbf4e6; }
body.reading .sgf-prose { max-width: 700px; }
body.reading .sgf-prose p, body.reading .sgf-prose li, body.reading .sgf-prose dd { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 26px); line-height: 1.75; color: var(--ink); }
body.reading .sgf-prose .gloss, body.reading .sgf-prose .cite, body.reading .fine { font-family: var(--sans); font-size: 15px !important; }
body.reading .read-bar { position: fixed; top: 14px; right: 14px; z-index: 80; margin: 0; }
body.reading .read-toggle { background: #fffaf0; border-color: #e5d7b6; }
body.reading .js .reveal, .reading .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .chart-glow.lit, .flame-wash::before, .flame-wash::after, .quote-slide .slide { animation: none !important; }
  .card:hover, .tile:hover, .list-cards a:hover, .word-card:hover, .contact-card:hover, .family-card:hover { transform: none; }
}

/* Traducción (Spanish translation placed under the English original) */
.trad { margin: 8px 0 24px 27px !important; padding: 16px 22px; background: var(--violet-mist); border-radius: 14px; font-size: 20px !important; line-height: 1.75 !important; color: var(--body); }
.trad b { color: var(--violet-deep); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
.quote-slide .trad { margin: 6px auto 0 !important; max-width: 640px; text-align: left; }
body.reading .trad { font-family: var(--sans); font-size: 17px !important; background: #f4ead2; }
.trad-fold { display: none !important; }
.trad-fold.show { display: block !important; }
.trad-ask { display: block; margin: -4px 0 18px 27px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.trad-ask span { color: var(--violet); font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(123, 79, 171, .35); }
.trad-ask:hover span, .trad-ask[aria-expanded="true"] span { border-bottom-color: var(--violet-deep); color: var(--violet-deep); }

/* readings + events */
.reading { margin: 0 0 44px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.reading h2 { margin: 0 0 6px; }
.next-event, .event { padding: 24px 28px; margin: 18px 0; background: var(--cream); border: 1px solid #efe6d6; border-radius: 18px; }
.next-event .sgf-eyebrow { margin-bottom: 10px; font-size: 16px; letter-spacing: .18em; }
.next-event .fine { font-size: 20px; line-height: 1.55; }
.next-event > p { font-size: 21px; }
.next-event > p a { font-weight: 700; }
.event-when { font-weight: 800; color: var(--gold); margin: 0 0 4px !important; font-size: 15px !important; }
.event-title { margin: 0 0 8px; font-size: 27px; }

/* request / member forms */
.req-form { display: grid; gap: 14px; margin: 18px 0; max-width: 520px; }
.req-form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.req-form input, .req-form textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.req-form button { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= menu: six gifts of Light ================= */
.hdr-wrap { --lx: -999px; --ly: -999px; }
.hdr-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(140px circle at var(--lx) var(--ly), rgba(242, 217, 141, .55), rgba(242, 217, 141, 0) 100%); }
.hdr-wrap.lit::before { opacity: 1; }
.hdr, .mobnav { position: relative; z-index: 1; }
.cap { --w: var(--wash-gold); --w2: #ffeab0; --d: #8a6420; }
.cap-gold { --w: var(--wash-gold); --w2: #ffeab0; --d: #8a6420; }
.cap-lilac { --w: var(--wash-lilac); --w2: #e6d6fa; --d: #6a3f9a; }
.cap-blue { --w: var(--wash-blue); --w2: #cfe6f8; --d: #2a5f9e; }
.cap-pink { --w: var(--wash-pink); --w2: #f9d9e6; --d: #a24d72; }
.nav { position: relative; align-items: stretch; gap: 6px; font-size: 14.5px; }
.nav a.cap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 12px 5px; border: 0; border-radius: 16px;
  background: var(--w); color: var(--ink); font-weight: 700; line-height: 1.15; position: relative;
  transition: background .25s ease, transform .25s ease, opacity .25s ease, padding .25s ease; }
.cap-q { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--d); opacity: .6; margin-top: 2px; transition: opacity .25s ease; }
.nav:hover a.cap:not(:hover):not(:focus-visible) { opacity: .72; }
.nav a.cap:hover, .nav a.cap:focus-visible { background: var(--w2); color: var(--ink); transform: translateY(-1px); border: 0; }
.nav a.cap:hover .cap-q, .nav a.cap:focus-visible .cap-q { opacity: 1; }
.nav a.cap[aria-current="page"] { background: var(--w); color: var(--ink); }
.nav a.cap[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 1.5px; background: var(--gold-bright); border-radius: 2px; }
.nav-line { position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0; background: var(--gold-bright); border-radius: 2px; opacity: 0;
  transition: transform .2s ease, width .2s ease, opacity .2s ease; pointer-events: none; }
.hdr-wrap.scrolled .nav a.cap { padding: 4px 10px 3px; }
.mobnav a.cap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 5px 0; padding: 14px 16px; border: 0; border-radius: 14px;
  background: var(--w); color: var(--ink); font-size: 17px; transition: background .2s ease; }
.mobnav a.cap-row .cap-q { margin: 0; font-size: 10px; opacity: .8; }
.mobnav a.cap-row:active, .mobnav a.cap-row:focus-visible { background: var(--w2); }
@media (prefers-reduced-motion: reduce) {
  .hdr-wrap::before, .nav-line { display: none !important; }
  .nav a.cap, .nav a.cap:hover, .nav a.cap:focus-visible { transform: none; transition: none; }
}

/* Preguntas de la vida: category capsules (same pastel gifts as the menu) */
.life-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.life-filters button.cap { display: inline-flex; padding: 8px 16px; border: 0; border-radius: 16px; background: var(--w); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; transition: background .25s, transform .25s, opacity .25s; }
.life-filters button.cap:hover, .life-filters button.cap:focus-visible, .life-filters button.cap[aria-pressed="true"] { background: var(--w2); transform: translateY(-1px); }
.life-filters:hover button.cap:not(:hover):not([aria-pressed="true"]) { opacity: .75; }
.life-card { margin: 0 0 108px; padding: 10px 0 64px; }
.life-card h2 { font-size: clamp(31px, 3.5vw, 42px); line-height: 1.15; margin: 0 0 24px; }
.life-card .sgf-quote { margin-top: 0; }
.life-card .cite {
  margin: 20px 0 4px; padding-left: 31px; max-width: 46em;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.5;
  text-transform: uppercase; color: var(--ink-soft); opacity: .62;
}
@media (prefers-reduced-motion: no-preference) {
  .js .life-card.in .sgf-quote { animation: life-open 1.05s cubic-bezier(.2,.7,.2,1) both; }
  .js .life-card.in .cite { animation: life-cite .9s ease .18s both; }
}
@keyframes life-open { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes life-cite { from { opacity: 0; transform: translateY(8px); } to { opacity: .62; transform: none; } }
@media (prefers-reduced-motion: reduce) { .life-filters button.cap { transition: none; transform: none !important; } }

/* ---------- Violet Flame control, flame layer, open-card halo, sparks ---------- */
.r-flame { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: rgba(255,255,255,.14); color: #f1eafb; }
.r-flame[aria-pressed="true"] { background: #e3d1ff; color: var(--violet-deep); }
.radio-card.is-playing { animation: halo-breathe 2.4s ease-in-out infinite; }
@keyframes halo-breathe {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 16px 3px rgba(255,255,255,.38), 0 18px 40px -16px rgba(74,45,122,.7); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 30px 9px rgba(255,255,255,.7), 0 18px 40px -16px rgba(74,45,122,.7); }
}
#flame-layer { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; background: #1a0b2e; cursor: pointer; }
#flame-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
#flame-layer .fl-close { position: absolute; top: 16px; right: 16px; border: 1px solid rgba(255,255,255,.35); background: rgba(26,11,46,.45); color: #f1eafb; border-radius: 999px; padding: 8px 18px; font: 700 13px var(--sans); cursor: pointer; }
#flame-layer .fl-close:hover { background: rgba(26,11,46,.7); }
@media (max-width: 600px) {
  .radio-card { flex-wrap: wrap; justify-content: center; border-radius: 26px; }
}
#sparks { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
#sparks i { position: absolute; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 8px 3px #fff, 0 0 18px 8px rgba(255,255,255,.95), 0 0 32px 14px rgba(255, 214, 110, .75);
  animation: spark-glow 4.5s ease-in-out forwards; }
@keyframes spark-glow {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
  .radio-card.is-playing { animation: none; }
  #sparks { display: none; }
  #lights i { animation: none; opacity: .5; }
  #lights .pink   { transform: translate3d(18vw, 16vh, 0); }
  #lights .blue   { transform: translate3d(68vw, 12vh, 0); }
  #lights .purple { transform: translate3d(40vw, 48vh, 0); }
  #lights .yellow { transform: translate3d(72vw, 70vh, 0); }
  #lights .green  { transform: translate3d(12vw, 74vh, 0); }
  #lights .gold   { transform: translate3d(46vw, 28vh, 0); }
}

/* ---------- «Entrar» / «Sign in»: quiet text link to the student area, next to Comenzar (added 2026-10-29) ---------- */
.hdr-signin { padding: 10px 6px; font-size: 14px; font-weight: 700; color: var(--violet-deep); text-decoration: none; white-space: nowrap; text-underline-offset: 4px; }
.hdr-signin:hover, .hdr-signin:focus-visible { text-decoration: underline; text-decoration-color: var(--gold-bright); }
/* 2026-10-30: «Entrar» is now a round icon-only button (person in a circle). Name for screen readers = aria-label,
   hover tooltip = title, keyboard focus shows the same word under the circle. The phone menu keeps the full text item.
   Scoped to [aria-label] so a page still holding the old text link (browser cache) keeps the old look. */
.hdr-signin[aria-label] { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid #d9cfe9; background: #fff; color: var(--violet-deep); text-decoration: none; transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.hdr-signin[aria-label] svg { display: block; width: 19px; height: 19px; }
.hdr-signin[aria-label]:hover { background: var(--violet-mist); border-color: var(--violet); box-shadow: 0 0 0 3px rgba(242,217,141,.55); }
.hdr-signin[aria-label]:focus-visible { outline: 3px solid var(--blue-sky); outline-offset: 3px; border-radius: 50%; background: var(--violet-mist); }
.hdr-signin[aria-label]:focus-visible::after { content: attr(title); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--violet-deep); color: #fff; font: 700 12px/1.3 var(--sans); white-space: nowrap; pointer-events: none; z-index: 5; }
@media (max-width: 1180px) { .hdr-tools .hdr-signin[aria-label] { display: none; } }   /* like Comenzar: the menu has it */
@media (prefers-reduced-motion: reduce) { .hdr-signin[aria-label] { transition: none; } }
@media (forced-colors: active) { .hdr-signin[aria-label] { border-color: LinkText; color: LinkText; } }
/* narrower desktops: a more compact header so the nav caps, Radio, Entrar and Comenzar all fit (no sideways scroll) */
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .brand { gap: 9px; }
  .brand-t { display: block; width: 9.6em; font-size: 14.5px; line-height: 1.12; }
  .brand-t b { white-space: normal; font-size: 17px; }
  .brand-t span { display: block; }
  .nav { gap: 4px; }
  .hdr-tools { gap: 8px; }
  .radio-toggle { padding: 6px 9px; }
  .radio-toggle span { display: none; }
}

/* ---------- Musicals schedule (/musica/, /en/music/) ---------- */
.mus { margin: 64px 0 0; padding-top: 40px; border-top: 1px solid var(--line); }
.mus h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 0 0 14px; color: var(--ink); }
.mus h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.mus .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mus-where { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 30px; }
.mus .mus-card { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.mus .mus-card h3 { font-size: 26px; margin: 0 0 8px; }
.mus .mus-card p { margin: 0 0 12px !important; font-size: 16px; line-height: 1.55; }
.mus .mus-card .mus-mx { color: var(--ink-soft); font-size: 15px; }
.mus .mus-card .mus-id, .mus .mus-card .mus-phone { font-size: 14px !important; color: var(--ink-soft); }
.mus .mus-card .mus-phone { margin: 14px 0 0 !important; }
.mus .mus-card .btn-a { padding: 10px 20px; font-size: 15px; }
.mus-tabs { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.mus[data-ready] .mus-tabs { display: flex; }
.mus-tabs button { min-width: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--violet-deep); font: 800 14px var(--sans); cursor: pointer; }
.mus-tabs button:hover { border-color: var(--violet); }
.mus-tabs button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.mus-tabs button[aria-selected="true"] { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.mus-tabs button.done, .mus-tabs button.empty { color: #9a90b3; }
.mus-tabs button.done[aria-selected="true"], .mus-tabs button.empty[aria-selected="true"] { color: #fff; }
.mus-panel { margin: 0 0 10px; }
.mus:not([data-ready]) .mus-panel { margin-bottom: 26px; }
.mus .mus-month { font-size: 24px; margin: 0 0 10px; }
.mus .mus-list { list-style: none; margin: 0; padding: 0; }
.mus .mus-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mus .mus-item p { margin: 0 !important; line-height: 1.5; }
.mus .mus-day { font-weight: 800; color: var(--ink); font-size: 17px; }
.mus .mus-region { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; background: var(--violet-mist); color: var(--violet-deep); }
.mus .mus-eu .mus-region { background: #f6efdc; color: #7a5a1c; }
.mus .mus-time { grid-column: 1; font-size: 15px; color: var(--body); }
.mus .mus-time b { color: var(--ink); }
.mus .mus-act { grid-column: 2; grid-row: 1 / span 2; }
.mus .mus-act .btn-a { padding: 8px 16px; font-size: 14px; }
.mus .mus-item.past { opacity: .6; }
.mus .mus-past { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.mus .mus-none { color: var(--ink-soft); }
.mus .mus-ics { margin: 26px 0 8px !important; }
.mus .mus-note { font-size: 14px !important; color: var(--ink-soft); }
@media (max-width: 560px) {
  .mus .mus-item { grid-template-columns: 1fr; }
  .mus .mus-act { grid-column: 1; grid-row: auto; margin-top: 6px !important; }
}

/* phone: the open radio card is full width (up to two lines), so the WhatsApp button and the invitation move above it */
@media (max-width: 640px) {
  body:has(#radio.show) #wa-float { bottom: 140px; }
  body:has(#radio.show) #reach, body:has(#radio.show) #wa-box { bottom: 204px; }
}

/* ---- FIX8/FIX9: "Acerca de / Origen" dropdown (hover with intent delay, keyboard focus, tap). FIX9: smaller panel, smoother motion ---- */
.nav-dd { position: relative; display: flex; }
.nav-dd > a.cap::before { content: ''; position: absolute; left: 50%; bottom: -3px; width: 5px; height: 5px; margin-left: -2.5px; border-right: 1.5px solid var(--d); border-bottom: 1.5px solid var(--d); transform: rotate(45deg); opacity: .45; transition: transform .2s cubic-bezier(.22,.61,.36,1), opacity .2s ease-out; }
.nav-dd-menu { position: absolute; top: calc(100% + 8px); left: 50%; width: max-content; min-width: 190px; max-width: 300px; display: flex; flex-direction: column; gap: 1px; padding: 5px; background: #fffdf9; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px -14px rgba(60, 40, 110, .32); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, -4px, 0) scale(.985); transform-origin: top center; will-change: opacity, transform;
  transition: opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1), visibility 0s linear .2s; z-index: 60; white-space: normal; }
.nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.nav-dd-menu a { display: block; padding: 7px 11px; border: 0; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.3; text-decoration: none; transition: background-color .16s ease-out, transform .16s ease-out; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: var(--w2); transform: translateX(3px); border: 0; color: var(--ink); }
.nav-dd-menu a[aria-current="page"] { background: var(--w); }
.nav-dd:not(.dd-js):hover .nav-dd-menu, .nav-dd.hov .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0) scale(1); transition: opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.nav-dd:not(.dd-js):hover > a.cap::before, .nav-dd.hov > a.cap::before, .nav-dd:focus-within > a.cap::before, .nav-dd.open > a.cap::before { opacity: .9; transform: translateY(2px) rotate(45deg); }
.nav-dd.closed .nav-dd-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.mobnav .mob-sub { display: flex; flex-direction: column; margin: -2px 0 6px 18px; padding-left: 12px; border-left: 2px solid var(--w2); }
.mobnav .mob-sub a { font-size: 16px; font-weight: 600; padding: 10px 6px; border-bottom: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .nav-dd-menu, .nav-dd-menu a, .nav-dd > a.cap::before { transition: none !important; } .nav-dd-menu, .nav-dd.hov .nav-dd-menu, .nav-dd.open .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { transform: translate3d(-50%, 0, 0) !important; } .nav-dd-menu a:hover { transform: none; } }
/* ---- FIX9b: small quote references and "Ver original" fold-out styled like .trad-ask (new editorial pages) ---- */
.sgf-prose .cite.cite-s { margin: -6px 0 14px; padding-left: 27px; font: 500 11px/1.45 var(--sans); letter-spacing: .02em; text-transform: none; color: #6a6378; }
.sgf-prose .cite-ref { margin: 8px 0 4px; font: 500 11px/1.45 var(--sans); color: #6a6378; }
body.reading .sgf-prose .cite.cite-s, body.reading .sgf-prose .cite-ref { font-size: 11.5px !important; }
details.fix8-orig { margin: -6px 0 18px 27px; }
details.fix8-orig > summary { display: inline-block; list-style: none; cursor: pointer; color: var(--violet); font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(123, 79, 171, .35); padding-bottom: 1px; }
details.fix8-orig > summary::-webkit-details-marker { display: none; }
details.fix8-orig > summary::marker { content: ''; }
details.fix8-orig > summary:hover, details.fix8-orig[open] > summary { color: var(--violet-deep); border-bottom-color: var(--violet-deep); }
details.fix8-orig > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
details.fix8-orig[open] > .sgf-quote { margin-top: 12px; }
/* ---- FIX9c: mobile menu scrolls fully; WhatsApp button hidden while it is open; WhatsApp button semi-transparent and "mostly there" ---- */
.mobnav.open { max-height: calc(100vh - var(--hdr-h, 72px)); max-height: calc(100dvh - var(--hdr-h, 72px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
/* FIX12: the phone menu froze the page when it was opened after scrolling down.
   Cause: FIX9c/FIX11 put overflow:hidden on <html> AND <body>. With both set, <body> becomes its own scroll box, the sticky
   header stops sticking to the screen and jumps back to the top of the document (far above the screen), taking the open
   menu with it; scrolling is locked, so nothing can be tapped. Now:
   - only <html> is locked, so the header stays sticky to the screen;
   - the open menu hangs under the header as a panel (position:absolute), so opening it does not push the page down
     (that push also made the browser shift the scroll position by the menu's height);
   - no backdrop blur while the menu is open (the menu is opaque anyway; blur behind a full-height panel is heavy on phones). */
@media (max-width: 1180px) {   /* FIX12c: same breakpoint as the ☰ button (tablets in landscape too) */
  html.mob-open:has(#mobnav.open) { overflow: hidden; }
  .mobnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; box-shadow: 0 18px 30px -18px rgba(60, 40, 110, .35); }
  html.mob-open .hdr-wrap { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fffdf9; }
}
html.mob-open #wa-float, html.mob-open #wa-box, html.mob-open #reach, body:has(.mobnav.open) #wa-float { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
#wa-float { opacity: .72; transition: opacity .6s ease, visibility 0s linear 0s, transform .2s ease, background .2s ease; }
#wa-float:hover, #wa-float:focus, #wa-float:focus-visible, #wa-float:active, #wa-float[aria-expanded="true"] { opacity: 1; }
#wa-float.wa-nap { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility 0s linear .8s; }
#wa-float.wa-nap:focus { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { #wa-float, #wa-float.wa-nap { transition: none; opacity: .72; visibility: visible; pointer-events: auto; } }
/* ---- FIX10: quote card on Comenzar, reused from the student area (estudiantes/assets/styles.css «cita-poster»), scoped to .pub-cita ---- */
.cita-poster{--cita-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--cita-ink:#fff8ea;--cita-gold:#f2d98d;
  position:relative;isolation:isolate;overflow:hidden;margin:0 0 1.6rem;border:0;border-radius:22px;text-align:center;color:var(--cita-ink);
  padding:clamp(1.4rem,5vw,2.9rem) clamp(1.15rem,5.5vw,3.4rem) clamp(1.2rem,4vw,2.2rem);container-type:inline-size;container-name:cita;
  background:linear-gradient(150deg,#2a0d52 0%,#4a2d7a 55%,#6b3f93 100%);
  box-shadow:0 0 0 1px rgba(242,217,141,.28) inset,0 30px 60px -34px rgba(42,13,82,.85),0 0 46px -18px rgba(242,217,141,.45);
  animation:citaIn .9s cubic-bezier(.2,.7,.2,1) both}
/* backgrounds: purple to gold with soft glows; the glows stay at the edges so the text area stays dark */
.cita-poster.cita-v1{background:radial-gradient(70% 60% at 104% -8%,rgba(242,217,141,.42),transparent 62%),radial-gradient(60% 55% at -6% 108%,rgba(201,162,74,.30),transparent 65%),linear-gradient(150deg,#240b47 0%,#40236f 48%,#5a3486 78%,#6f4a3c 118%)}
.cita-poster.cita-v2{background:radial-gradient(55% 50% at 6% 0%,rgba(241,200,212,.22),transparent 66%),radial-gradient(75% 65% at 102% 106%,rgba(242,217,141,.28),transparent 60%),linear-gradient(165deg,#1d0a3a 0%,#3f2170 52%,#62378f 100%)}
.cita-poster.cita-v3{background:radial-gradient(65% 60% at -4% -6%,rgba(242,217,141,.36),transparent 62%),radial-gradient(80% 50% at 50% 118%,rgba(201,162,74,.34),transparent 70%),linear-gradient(135deg,#33164f 0%,#4b2463 42%,#5e2f5c 74%,#6e4630 120%)}
.cita-poster.cita-v4{background:radial-gradient(1.5px 1.5px at 4% 18%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1px 1px at 6% 64%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1.5px 1.5px at 95% 12%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1px 1px at 96% 48%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1px 1px at 3% 90%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1.5px 1.5px at 95% 86%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1px 1px at 28% 3%,rgba(255,240,200,.85),transparent 100%),radial-gradient(1px 1px at 74% 4%,rgba(255,240,200,.85),transparent 100%),
  radial-gradient(90% 40% at 50% 120%,rgba(242,217,141,.24),transparent 66%),linear-gradient(180deg,#140832 0%,#2c1656 58%,#4a2d7a 100%)}
/* big decorative quotation mark + thin inner gold frame */
.cita-poster:before{content:"\201C";content:"\201C" / "";position:absolute;left:clamp(.3rem,3cqi,1.6rem);top:clamp(-1.4rem,-2cqi,-.6rem);z-index:-1;pointer-events:none;
  font-family:var(--cita-serif);font-weight:600;font-size:clamp(7rem,34cqi,15rem);line-height:1;color:var(--cita-gold);opacity:.16}
.cita-poster:after{content:"";position:absolute;inset:clamp(.45rem,1.6cqi,.8rem);z-index:-1;pointer-events:none;border:1px solid rgba(242,217,141,.26);border-radius:16px}
.cita-head{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0 auto clamp(.9rem,3cqi,1.5rem);max-width:30rem}
.cita-line{flex:1 1 0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,217,141,.85))}
.cita-head .cita-line:last-child{background:linear-gradient(90deg,rgba(242,217,141,.85),transparent)}
.cita-poster .eyebrow{margin:0;color:var(--cita-gold);font-family:var(--cita-serif);font-weight:600;font-size:clamp(.95rem,3.6cqi,1.15rem);letter-spacing:.22em;font-variant-caps:all-small-caps;text-transform:none;white-space:nowrap}
.cita-fig{margin:0 auto;max-width:44rem}
.cita-q{margin:0;padding:0;border:0;background:none}
.cita-q p{margin:0;font-family:var(--cita-serif);font-style:normal;font-synthesis:none;font-weight:500;color:var(--cita-ink);text-shadow:0 1px 14px rgba(20,6,45,.55);font-feature-settings:"kern","liga","onum";animation:citaText 1.1s .15s ease-out both}
.cita-q p+p{margin-top:.7em}
.cita-t-xl .cita-q p{font-size:clamp(1.7rem,8vw,3.1rem);font-size:clamp(1.65rem,7.6cqi,3.15rem);line-height:1.16;text-wrap:balance;letter-spacing:-.005em;
  background:linear-gradient(180deg,#fffaf0 15%,#f6e3a8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 12px rgba(20,6,45,.5))}
.cita-t-xl .cita-fig{max-width:24em}
.cita-t-lg .cita-q p{font-size:clamp(1.32rem,5vw,2.05rem);font-size:clamp(1.3rem,4.7cqi,2.05rem);line-height:1.3;text-wrap:balance}
.cita-t-md .cita-q p{font-size:clamp(1.14rem,3.6vw,1.58rem);font-size:clamp(1.12rem,3.45cqi,1.58rem);line-height:1.42;text-wrap:pretty}
.cita-t-sm .cita-q p{font-size:clamp(1.06rem,2.9vw,1.32rem);font-size:clamp(1.05rem,2.75cqi,1.32rem);line-height:1.5;text-align:left;text-wrap:pretty}
.cita-t-sm .cita-fig{max-width:40rem}
.cita-attr{margin:clamp(1rem,3.4cqi,1.6rem) 0 0;color:var(--cita-gold);font-family:var(--cita-serif);font-weight:600;font-size:clamp(1rem,3.4cqi,1.2rem);letter-spacing:.08em;font-variant-caps:small-caps;line-height:1.3}
.cita-attr cite{font-style:normal}
.cita-rule{display:block;width:3.2rem;height:1px;margin:0 auto .7rem;background:linear-gradient(90deg,transparent,var(--cita-gold),transparent)}
.cita-note{margin:clamp(1rem,3cqi,1.4rem) auto 0;max-width:34rem;font-family:var(--sans);font-size:.8rem;line-height:1.45;color:#fff8ea}
@keyframes citaIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes citaText{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cita-poster,.cita-q p{animation:none}}
@media (forced-colors:active){.cita-t-xl .cita-q p{-webkit-text-fill-color:CanvasText;background:none}}
@media print{.cita-poster{background:#fff;color:#000;box-shadow:none}.cita-q p,.cita-attr,.cita-poster .eyebrow,.cita-note{color:#000;-webkit-text-fill-color:#000;text-shadow:none;filter:none}}
/* «Otra cita» (FIX2, 30 Oct 2026): next quotes are already in the page (hidden); the card glides to the new height. */
.cita-fig[hidden]{display:none}
.cita-more{margin:clamp(.9rem,3cqi,1.3rem) 0 0;text-align:center}
.cita-poster .cita-next{background:rgba(255,248,234,.08);color:var(--cita-gold);border:1px solid rgba(242,217,141,.55);border-radius:999px;font-family:var(--sans);font-weight:700;letter-spacing:.02em;min-height:36px;padding:.4rem 1.05rem;cursor:pointer;transition:background .2s,border-color .2s}
.cita-poster .cita-next:hover,.cita-poster .cita-next:focus-visible{background:rgba(242,217,141,.18);border-color:var(--cita-gold);color:#fff8ea}
.cita-poster .cita-next:focus-visible{outline:2px solid var(--cita-gold);outline-offset:3px}
.cita-poster.cita-sizing{overflow:hidden;transition:height .35s ease}
.cita-fig.cita-in{animation:cita-in .45s ease both}
@keyframes cita-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cita-poster.cita-sizing{transition:none}.cita-fig.cita-in{animation:none}}
@media print{.cita-more{display:none}}
.sgf-prose .pub-cita { margin: 40px 0; border-radius: 22px; }
.sgf-prose .pub-cita blockquote.cita-q { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.sgf-prose .pub-cita .cita-q p { margin: 0; }
.sgf-prose .pub-cita .cita-q p + p { margin-top: .7em; }
.sgf-prose .pub-cita .cita-note { font-size: 13px; color: rgba(255,248,234,.72); text-align: center; }
.pub-cita .cita-next { font: inherit; font-size: 14px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(242,217,141,.55); background: rgba(255,248,234,.08); color: var(--cita-ink); cursor: pointer; }
.pub-cita .cita-next:hover, .pub-cita .cita-next:focus-visible { background: rgba(255,248,234,.18); outline: 2px solid var(--cita-gold); outline-offset: 2px; }
/* ---- FIX10: quotes below the Chart / with the books ---- */
.fix10-quote { margin: 30px auto 8px; max-width: 820px; align-items: stretch; }
/* ---- FIX10: Vimeo preview cards (link out, nothing loads from Vimeo until clicked) ---- */
.vm-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 26px auto 34px; max-width: 640px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.vm-card:hover, .vm-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(60,40,90,.18); }
.vm-card:focus-visible { outline: 3px solid var(--violet, #6b4fa3); outline-offset: 3px; }
.vm-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #2a2036; }
.sgf-prose .vm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; box-shadow: none; border-radius: 0; pointer-events: none; }
.vm-play { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: rgba(30,20,45,.62); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 22px rgba(0,0,0,.35); transition: background .2s, transform .2s; }
.vm-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff; }
.vm-card:hover .vm-play, .vm-card:focus-visible .vm-play { background: rgba(107,79,163,.9); transform: scale(1.06); }
.vm-meta { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 16px; }
.vm-meta b { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.vm-meta span { font-size: 13px; color: #6a6378; letter-spacing: .02em; }
/* ---- FIX10: books block on Comenzar ---- */
.fix10-books { margin: 48px 0 32px; padding: 30px clamp(14px, 4vw, 36px) 26px; border-radius: 24px; background: radial-gradient(80% 60% at 50% 0%, #fffaf0, #fbf3e4); border: 1px solid var(--line); }
.fix10-books h2 { margin-top: 0; }
.bk-row { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.sgf-prose .bk-row li { margin: 0; padding: 0; }
.sgf-prose .bk-row li::before { content: none; }
.sgf-prose .bk-row .bk-cover { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 6px; box-shadow: none; border-radius: 0; -webkit-user-select: none; user-select: none; }
.bk-row a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; height: 100%; padding: 14px 10px 13px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.bk-row a:hover, .bk-row a:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #2f5d3a; }
.bk-vol { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a6d1f; }
.bk-row b { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: #24472c; }
.bk-buy { font-size: 13px; color: #6b4fa3; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .bk-row { gap: 8px; } .bk-row a { padding: 8px 4px 10px; } .bk-row b { font-size: 14px; } .bk-row .bk-buy { font-size: 11px; } .bk-row .bk-vol { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .vm-card, .bk-row a, .vm-play { transition: none; } .vm-card:hover, .bk-row a:hover { transform: none; } }

/* ===================== FIX12c (5 Nov 2026) ===================== */
/* ---- menu: every page reachable from the top menu (tools: public-site/tools/menu_build.py) ---- */
/* desktop: the Enseñanzas panel has two columns (8 teachings | the Masters) and opens from the capsule's left edge */
.nav-dd-menu.dd-wide { flex-direction: row; flex-wrap: wrap; width: 560px; max-width: calc(100vw - 32px); gap: 2px 12px; padding: 8px; }
.nav-dd-menu.dd-wide .dd-all { flex: 1 0 100%; margin-bottom: 4px; color: var(--violet-deep); font-weight: 800; box-shadow: inset 0 -1px 0 var(--line); border-radius: 8px 8px 0 0; }
.nav-dd-menu .dd-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-dd-menu .dd-n { display: inline-block; min-width: 2em; color: var(--gold); font: 800 11px/1 var(--sans); letter-spacing: .06em; }
.nav-dd-menu .dd-h { margin: 7px 11px 4px; font: 800 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.nav-dd.dd-start .nav-dd-menu { left: 0; transform: translate3d(0, -4px, 0) scale(.985); transform-origin: top left; }
.nav-dd.dd-start:not(.dd-js):hover .nav-dd-menu, .nav-dd.dd-start.hov .nav-dd-menu, .nav-dd.dd-start:focus-within .nav-dd-menu, .nav-dd.dd-start.open .nav-dd-menu { transform: translate3d(0, 0, 0) scale(1); }
@media (prefers-reduced-motion: reduce) { .nav-dd.dd-start .nav-dd-menu, .nav-dd.dd-start.hov .nav-dd-menu, .nav-dd.dd-start.open .nav-dd-menu, .nav-dd.dd-start:focus-within .nav-dd-menu { transform: none !important; } }
/* phone: each capsule row keeps its link; the ▾ button next to it opens that section's pages */
.mobnav .mob-grp { display: flex; align-items: center; gap: 8px; }
.mobnav .mob-grp > .cap-row { flex: 1 1 auto; min-width: 0; }
.mobnav .mob-tog { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #e3d9f0; border-radius: 14px; background: #fff; color: var(--violet-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobnav .mob-tog svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.mobnav .mob-tog[aria-expanded="true"] { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.mobnav .mob-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.js .mobnav .mob-sub:not(.show) { display: none; }
.mobnav .mob-sub.show { animation: mobSubIn .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes mobSubIn { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
.mobnav .mob-sub a[aria-current="page"] { color: var(--violet-deep); font-weight: 800; }
.mobnav .mob-sub a[aria-current="page"]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px -14px; border-radius: 50%; background: var(--gold-bright); }
.mobnav .mob-h { margin: 10px 6px 2px; font: 800 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .mobnav .mob-sub.show { animation: none; } .mobnav .mob-tog svg { transition: none; } }

/* ---- scroll animations: more visible, still light (transform and opacity only; nothing moves with reduced motion) ---- */
/* reading progress: a thin gold line at the very top of the screen */
#sgf-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 52; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-bright), #ecd08a 55%, var(--violet)); opacity: .9; }
html.mob-open #sgf-progress { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* blocks rise a little further, settle with a soft ease-out, and blocks that enter together follow one another (--rd) */
  .js .reveal { transform: translate3d(0, 34px, 0) scale(.985); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1); }
  .js .reveal.in { transform: none; transition-delay: var(--rd, 0s); }
  .js .reveal.in.rv-done { transition-delay: 0s; }
  /* section headings: eyebrow, then title, then lead */
  .js .sec > .sgf-wrap.reveal .sgf-eyebrow, .js .sec > .sgf-wrap.reveal .sgf-h, .js .sec > .sgf-wrap.reveal .lead { transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
  .js .sec > .sgf-wrap.reveal:not(.in) .sgf-eyebrow { opacity: 0; transform: translate3d(0, 12px, 0); }
  .js .sec > .sgf-wrap.reveal:not(.in) .sgf-h, .js .sec > .sgf-wrap.reveal:not(.in) .lead { opacity: 0; transform: translate3d(0, 20px, 0); }
  .js .sec > .sgf-wrap.reveal.in .sgf-eyebrow { transition-delay: .1s; }
  .js .sec > .sgf-wrap.reveal.in .sgf-h { transition-delay: .2s; }
  .js .sec > .sgf-wrap.reveal.in .lead { transition-delay: .32s; }
  /* pictures settle into their frames */
  .js .card.reveal img, .js .tile.reveal img, .js .word-card.reveal .word-pic img { transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
  .js .card.reveal:not(.in) img, .js .tile.reveal:not(.in) img, .js .word-card.reveal:not(.in) .word-pic img { transform: scale(1.1); }
  .js .master.reveal img { transition: transform 1.2s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
  .js .master.reveal:not(.in) img { transform: scale(.88); }
  /* hover lift on revealed cards (the revealed state used to cancel it) */
  @media (hover: hover) {
    .js .card.reveal.in:hover, .js .tile.reveal.in:hover, .js .list-cards a.reveal.in:hover, .js .word-card.reveal.in:hover, .js .contact-card.reveal.in:hover { transform: translate3d(0, -6px, 0); }
    .card:hover img, .tile:hover img, .word-card:hover .word-pic img { transform: scale(1.045); }
    .card img, .tile img, .word-pic img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
  }
  /* a gentle press on touch */
  .btn-a:active, .card:active, .tile:active, .word-card:active, .list-cards a:active, .master a:active img { transform: scale(.975); transition-duration: .12s; }
  .btn-a { transition: background .2s, color .2s, box-shadow .2s, transform .25s cubic-bezier(.16,1,.3,1); }
}

/* ---- homepage polish (additions only) ---- */
/* teaching cards: titles stay readable over bright pictures */
.card .scrim { background: linear-gradient(180deg, rgba(74,45,122,0) 28%, rgba(74,45,122,.58) 56%, rgba(44,24,82,.92) 100%); }
.card h3 { text-shadow: 0 2px 16px rgba(30,14,62,.55); }
.card p { text-shadow: 0 1px 10px rgba(30,14,62,.45); }
/* the Masters: a gold ring on hover and focus; on phones the fifth Master is centred instead of alone on the left */
.master a:hover img, .master a:focus-visible img { box-shadow: 0 0 0 4px #fffdf9, 0 0 0 6px var(--gold-bright), 0 22px 40px -22px rgba(74,45,122,.55); }
.master a:focus-visible { outline: none; }
@media (max-width: 700px) {
  .masters { display: flex; flex-wrap: wrap; justify-content: center; }
  .masters > .master { flex: 0 1 calc(50% - 16px); min-width: 0; }
}
/* hero: a small cue that there is more below; fades once the visitor scrolls */
.hero-cue { display: block; width: 26px; height: 26px; margin: 16px auto 0; color: var(--violet-deep); opacity: .7; transition: opacity .5s ease; }
.hero-cue svg { display: block; width: 100%; height: 100%; }
html.sgf-moved .hero-cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cue svg { animation: heroCue 2.4s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes heroCue { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; } 50% { transform: translate3d(0, 7px, 0); opacity: 1; } }
}

/* ---- FIX12d: «En inglés» on Palabras cards whose article exists only in English (public-site/tools/word_excerpts.py) ---- */
.word-lang { align-self: flex-start; display: inline-block; padding: 4px 10px; border: 1px solid #e3d9f0; border-radius: 999px; background: #fbf8ff;
  color: var(--violet); font: 800 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
/* ---- FIX12d: Llama Violeta pages on phones: the violet wash stays, but no longer leaves an empty band above the content ---- */
@media (max-width: 700px) { .has-wash { padding-top: 72px; } }