/*
 * Maga Enraizada — the look of the public site's bands (v0.18.0), on top of the core's resources/css/site.css.
 * Client data: the paper grain of the design and, for the «aquelarre» palette, Maga's landing as she made it
 * (Cormorant Garamond, spaced capitals, dashed lines, the framed portrait and the seal).
 */

/* Paper grain on every band, as in the approved design. */
.blk::after, .sf::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.7; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .blk::after, .dark .sf::after { mix-blend-mode: soft-light; opacity: 0.5; }

/* Consultas: a few stars in the night of its opening band. */
[data-palette="indigo"] .blk-banner.tone-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-size: 720px 560px;
    background-image:
        radial-gradient(1.4px 1.4px at 9% 18%, #efe7d0 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 31% 74%, #efe7d0 50%, transparent 51%),
        radial-gradient(1.8px 1.8px at 46% 12%, #c3a15d 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 63% 88%, #efe7d0 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 84% 22%, #efe7d0 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 93% 64%, #c3a15d 50%, transparent 51%);
}

/* ============ the Aquelarre Digital landing (its own design, kept as Maga made it) ============ */
:is(body[data-palette="aquelarre"] .cms-page .blk, .cms-page .blk[data-palette="aquelarre"]) { padding-block: clamp(64px, 10vw, 120px); }
/* v0.41.0: two bands of the same tone read as one section here too (the rule above hid the core's joined spacing: ~250 px of
   empty paper before and after «Iremos…»). Vertical rhythm between the blocks of one section: 40–64 px. */
:is(body[data-palette="aquelarre"] .cms-page .blk, .cms-page .blk[data-palette="aquelarre"]).blk--joined { padding-top: 0; }
:is(body[data-palette="aquelarre"] .cms-page .blk, .cms-page .blk[data-palette="aquelarre"]):has(+ .blk--joined) { padding-bottom: clamp(40px, 5vw, 56px); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk--joined .it-grid:first-child { margin-top: 0; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk--joined .it-seal { margin-bottom: 32px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk > .blk-in { max-width: 1080px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) :is(.b-h1, .b-h2, .b-h3, .tl-title, .rw-title) { font-weight: 500; line-height: 1.05; letter-spacing: 0; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) :is(.b-h1, .b-h2) em { font-weight: 400; }
/* v0.41.0: the sepia text only on paper (light mode); in dark mode the light tones turn into the night and keep their cream text
   (the sepia made «¿Quién te guía…?» unreadable there). */
:root:not(.dark) :is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tone-light { --t-fg: #3a2e18; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-eyebrow,
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-label,
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .pr-label,
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-num { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-num { font-size: 0.68rem; letter-spacing: 0.22em; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-lead, :is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-prose blockquote { font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.35; }

/* Opening band: big title, gold italic line, the map. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-banner--art { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 9vw, 110px); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-banner--art .b-h1 { font-size: clamp(3.4rem, 9vw, 6.6rem); letter-spacing: -0.01em; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-banner--art .b-lead { font-size: clamp(1.75rem, 4.7vw, 3.4rem); line-height: 1.1; color: var(--pl-accent-dark); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-banner--art .b-eyebrow { color: var(--pl-accent-dark); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .bn-points p { font-size: 1.02rem; color: var(--pl-on-dark-muted); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .bn-cta { margin-top: 6px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .bn-small { color: color-mix(in oklab, var(--pl-on-dark) 70%, transparent); }

/* Buttons: pills in spaced capitals between two small stars. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-btn {
    gap: 12px; padding: 16px 30px; border-radius: 999px; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
    transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-btn::before, :is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-btn::after { content: "✦"; font-size: 0.7rem; color: var(--pl-accent-dark); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-btn:hover { transform: translateY(-1px); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tone-dark .b-btn--primary:hover { background: #fff8e6; border-color: #fff8e6; }

/* Dashed lines instead of hairlines. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk { --rule-style: dashed; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--ruled { --t-line: var(--pl-accent); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--ruled .it-label { color: var(--pl-accent); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--boxed li { border-color: color-mix(in oklab, var(--pl-accent) 35%, transparent); background: rgba(255, 250, 235, 0.35); }
/* v0.41.0: each card as tall as its own text (no half-empty card under the short ones). */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--boxed { align-items: start; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--boxed li { padding: 20px 22px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-grid--boxed .it-label { color: var(--pl-accent); }

/* The seal of the 20 weeks, slightly turned. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-seal { margin-top: 0; margin-bottom: 8px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-seal-badge { position: relative; transform: rotate(-8deg); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-seal-badge::before { content: ""; position: absolute; inset: 6px; border: 1px dashed currentColor; border-radius: 50%; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .it-seal-badge > div > span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* Framed portrait of «Tu guía», with her name in a pill and a star. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-figure--framed { position: sticky; top: 32px; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-figure--framed::before { content: ""; position: absolute; inset: -18px -26px auto auto; width: 150px; height: 150px; border: 1px dashed var(--pl-accent); border-radius: 50%; opacity: 0.7; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-frame { border-color: var(--pl-accent); background: rgba(255, 250, 235, 0.55); transform: rotate(-1.5deg); box-shadow: 0 10px 30px rgba(58, 46, 24, 0.15); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-frame::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(122, 90, 43, 0.5); border-radius: 2px; pointer-events: none; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-frame-signature { transform: rotate(-4deg); }
@media (max-width: 960px) { :is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-figure--framed { position: relative; top: auto; max-width: 360px; } }

/* Stages: spaced capitals, glowing live dots. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-mk--live { box-shadow: 0 0 0 4px rgba(195, 161, 93, 0.2); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-stage--live .tl-dot { box-shadow: 0 0 0 6px rgba(195, 161, 93, 0.18); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-line { border-color: rgba(239, 231, 208, 0.35); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tl-sub { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 400; }

/* Investment: notice in a capsule, options as soft cards. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .pr-option { border-color: rgba(239, 231, 208, 0.35); background: rgba(239, 231, 208, 0.04); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .pr-option--main { border-color: var(--pl-accent-dark); background: rgba(195, 161, 93, 0.08); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .pr-option .b-btn { justify-content: center; }

/* The landing's medallion in sepia on paper, cream on the forest. */
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tone-light .b-medallion { color: var(--pl-accent); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .tone-dark .b-medallion { color: var(--pl-on-dark); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-pricing .b-medallion { color: var(--pl-accent-dark); }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .blk-decor { opacity: 0.55; }
:is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) :is(.tone-light, .tone-light-2) .blk-decor { color: var(--pl-accent); opacity: 0.35; }

@media (max-width: 620px) {
    :is(body[data-palette="aquelarre"] .cms-page, .cms-page [data-palette="aquelarre"]) .b-btn { padding: 15px 22px; font-size: 0.76rem; letter-spacing: 0.12em; }
}
