/* =========================================================
   SIEMPRE FUISTE TÚ — micrositio + promoción en home
   Archivo aislado para no alterar los estilos generales.
   ========================================================= */

:root {
    --sft-ink: #15120f;
    --sft-paper: #f3ead9;
    --sft-paper-soft: #fbf7ef;
    --sft-wine: #651716;
    --sft-wine-deep: #3d0c0c;
    --sft-gold: #9e7938;
    --sft-violet: #76558b;
    --sft-violet-soft: #b8a0c9;
}

/* ---------- Promoción en la página principal ---------- */
.sft-home-feature {
    position: relative;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    margin-top: 52px;
    padding: clamp(28px, 4vw, 48px);
    overflow: hidden;
    color: #fffaf2;
    background: linear-gradient(135deg, #17110f 0%, #26110f 52%, #140f17 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(25, 10, 10, .14);
}

.sft-home-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 16%, rgba(140, 90, 164, .14), transparent 26%),
        radial-gradient(circle at 88% 84%, rgba(157, 116, 49, .10), transparent 24%);
    pointer-events: none;
}

.sft-home-cover {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 230px;
    margin: 0 auto;
    align-self: start;
}

.sft-home-cover::before,
.sft-home-feature::after { content: none; }

.sft-home-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 22px 50px rgba(0,0,0,.38);
}

.sft-home-cover-badge {
    position: absolute;
    top: 12px;
    left: -10px;
    padding: 7px 11px;
    color: #2a1710;
    background: #f7e9d4;
    border: 1px solid rgba(158,121,56,.4);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.sft-home-copy {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.sft-home-copy .eyebrow { color: #c9a8dc; }
.sft-home-copy .eyebrow span { background: currentColor; }
.sft-home-copy h3 {
    max-width: 760px;
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: clamp(2.8rem, 5vw, 5.1rem);
    font-weight: 600;
    line-height: .88;
    letter-spacing: -.05em;
}
.sft-home-copy h3 em {
    display: block;
    color: #c7a4d7;
    font-weight: 500;
}
.sft-home-tagline {
    max-width: 650px;
    margin-bottom: 16px;
    color: #eadcc9;
    font-family: var(--serif);
    font-size: clamp(1.18rem, 1.9vw, 1.56rem);
    font-style: italic;
    line-height: 1.25;
}
.sft-home-summary {
    max-width: 710px;
    margin-bottom: 16px;
    color: rgba(255,250,242,.78);
    font-size: .94rem;
    line-height: 1.76;
}
.sft-home-note {
    max-width: 650px;
    margin: 0 0 24px;
    padding-left: 16px;
    color: rgba(255,250,242,.88);
    border-left: 2px solid rgba(216, 185, 133, .64);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.6;
}
.sft-home-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}
.sft-home-meta span {
    padding: 7px 10px;
    color: rgba(255,250,242,.82);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.sft-home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sft-home-primary {
    color: #21120d;
    background: #f4e6cf;
    border-color: #f4e6cf;
}
.sft-home-primary:hover { color: #fff; background: var(--sft-wine); border-color: var(--sft-wine); }
.sft-home-secondary { color: #fffaf2; border-color: rgba(255,255,255,.28); }
.sft-home-secondary:hover { color: #21120d; background: #fffaf2; }
/* ---------- Página exclusiva ---------- */
body.sft-page {
    color: var(--sft-ink);
    background: var(--sft-paper-soft);
}

.sft-page .site-header {
    background: rgba(24, 16, 13, .88);
    box-shadow: 0 10px 35px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.sft-page .brand-mark { background: var(--sft-wine); box-shadow: 0 8px 22px rgba(101,23,22,.32); }
.sft-page .desktop-nav a::after { background: var(--sft-violet-soft); }

.sft-hero {
    position: relative;
    min-height: 900px;
    padding: calc(var(--header-h) + 74px) 0 90px;
    overflow: hidden;
    color: #fffaf2;
    background: #17110f;
    isolation: isolate;
}
.sft-hero::before {
    content: "";
    position: absolute;
    inset: -7%;
    z-index: -3;
    background: url('../img/siempre-fuiste-tu.webp') 55% 44% / cover no-repeat;
    filter: blur(22px) brightness(.39) saturate(.72);
    transform: scale(1.08);
}
.sft-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 70% 18%, rgba(119,84,140,.24), transparent 28%),
        linear-gradient(90deg, rgba(18,12,10,.94) 0%, rgba(18,12,10,.78) 48%, rgba(18,12,10,.58) 100%),
        repeating-linear-gradient(103deg, transparent 0 30px, rgba(255,255,255,.025) 31px, transparent 33px);
}

.sft-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(290px, .72fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}
.sft-hero-copy { max-width: 760px; }
.sft-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #cfb2dd;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.sft-hero-kicker::before { content:""; width: 34px; height: 1px; background: currentColor; }
.sft-hero h1 {
    max-width: 760px;
    margin-bottom: 24px;
    font-size: clamp(4.7rem, 8vw, 8.8rem);
    line-height: .79;
    letter-spacing: -.06em;
}
.sft-hero h1 span { display: block; }
.sft-hero h1 em { display: block; color: #c6a2d5; }
.sft-hero-quote {
    max-width: 680px;
    margin-bottom: 22px;
    color: #f1e5d5;
    font-family: var(--serif);
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    font-style: italic;
    line-height: 1.18;
}
.sft-hero-lead {
    max-width: 680px;
    margin-bottom: 30px;
    color: rgba(255,250,242,.70);
    font-size: .97rem;
    line-height: 1.78;
}
.sft-hero-meta { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px; }
.sft-hero-meta span {
    padding: 8px 11px;
    color: #eadfce;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.sft-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.sft-button-primary { color:#22140f; background:#f3e6d0; border-color:#f3e6d0; }
.sft-button-primary:hover { color:#fff; background:var(--sft-wine); border-color:var(--sft-wine); }
.sft-button-ghost { color:#fffaf2; border-color:rgba(255,255,255,.30); }
.sft-button-ghost:hover { color:#22140f; background:#fffaf2; }

.sft-cover-stage {
    position: relative;
    width: min(100%, 410px);
    margin-inline: auto;
    perspective: 1200px;
}
.sft-cover-stage::before {
    content: "";
    position: absolute;
    inset: 12% -14% -7%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(0,0,0,.62), transparent 66%);
    filter: blur(14px);
}
.sft-cover-stage::after {
    content: "?";
    position: absolute;
    right: -50px;
    top: 20px;
    z-index: -2;
    color: rgba(194, 162, 213, .12);
    font-family: var(--serif);
    font-size: 14rem;
    line-height: 1;
}
.sft-cover-stage img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 38px 90px rgba(0,0,0,.58);
    transform: rotateY(-4deg) rotateZ(.5deg);
}
.sft-cover-note {
    position:absolute;
    right:-18px;
    bottom:24px;
    padding:11px 14px;
    color:#271711;
    background:#f6ead8;
    border-left:3px solid var(--sft-gold);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    box-shadow:0 12px 32px rgba(0,0,0,.28);
}

.sft-intro-band {
    padding: 34px 0;
    color: #efe5d6;
    background: var(--sft-wine-deep);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sft-intro-band .section-shell {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:28px;
}
.sft-intro-mark {
    color:#c5a7d4;
    font-family:var(--serif);
    font-size:4.8rem;
    line-height:.8;
}
.sft-intro-band p { margin:0; max-width:850px; font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.22; }
.sft-intro-band small { color:rgba(255,255,255,.58); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }

.sft-story-section { padding: 120px 0; background: var(--sft-paper-soft); }
.sft-story-grid {
    display:grid;
    grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
    gap:clamp(50px,8vw,110px);
    align-items:start;
}
.sft-story-side { position:sticky; top:110px; }
.sft-story-side .eyebrow { color:var(--sft-wine); }
.sft-story-side h2 { margin-bottom:22px; color:var(--sft-ink); font-size:clamp(3.5rem,5vw,5.8rem); }
.sft-story-side p { color:#6c6259; }
.sft-story-copy {
    padding:clamp(34px,5vw,62px);
    background:#fffdf8;
    border:1px solid rgba(88,55,29,.12);
    box-shadow:0 26px 75px rgba(67,45,28,.08);
}
.sft-story-copy > p { color:#4d453e; font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.68rem); line-height:1.55; }
.sft-story-copy > p:first-child::first-letter {
    float:left;
    margin:4px 10px 0 0;
    color:var(--sft-wine);
    font-family:var(--serif);
    font-size:4.3rem;
    line-height:.72;
}
.sft-story-divider { width:90px; height:1px; margin:30px 0; background:var(--sft-gold); }
.sft-story-closer { margin-bottom:0 !important; color:var(--sft-wine) !important; font-style:italic; }

.sft-data-section { padding: 0 0 120px; background: var(--sft-paper-soft); }
.sft-data-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sft-data-card {
    min-height:190px;
    padding:28px;
    background:#efe4d3;
    border:1px solid rgba(88,55,29,.11);
}
.sft-data-card:nth-child(even) { background:#e9dfec; }
.sft-data-card small { display:block; margin-bottom:22px; color:#786d62; font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sft-data-card strong { display:block; margin-bottom:10px; font-family:var(--serif); font-size:1.65rem; line-height:1; }
.sft-data-card p { margin:0; color:#665c53; font-size:.82rem; line-height:1.6; }

.sft-characters { padding:120px 0; color:#f9f1e5; background:#17110f; }
.sft-characters-head { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:50px; }
.sft-characters-head .eyebrow { color:#c7a7d6; }
.sft-characters-head h2 { margin:0; }
.sft-characters-head > p { margin:0; color:rgba(255,255,255,.61); }
.sft-character-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sft-character {
    position:relative;
    min-height:330px;
    padding:44px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(145deg,#211814,#130f0e);
}
.sft-character::after { position:absolute; right:24px; bottom:-36px; color:rgba(255,255,255,.045); font-family:var(--serif); font-size:11rem; line-height:1; }
.sft-character:first-child::after { content:"L"; }
.sft-character:last-child::after { content:"C"; }
.sft-character small { color:#c9aad7; font-size:.66rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.sft-character h3 { margin:12px 0 16px; font-family:var(--serif); font-size:3rem; }
.sft-character p { position:relative; z-index:1; max-width:520px; margin:0; color:rgba(255,255,255,.65); line-height:1.75; }

.sft-cover-design { padding:120px 0; background:#ece2d2; }
.sft-cover-design-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); align-items:end; gap:50px; margin-bottom:44px; }
.sft-cover-design .eyebrow { color:var(--sft-wine); }
.sft-cover-design h2 { margin-bottom:0; color:var(--sft-ink); }
.sft-cover-design-head > p { margin:0; color:#665c53; }
.sft-wrap-image {
    padding:12px;
    background:#1b1512;
    box-shadow:0 28px 70px rgba(54,38,26,.18);
}
.sft-wrap-image img { width:100%; }
.sft-design-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1px; background:rgba(88,55,29,.15); }
.sft-design-note { padding:26px; background:#f6efe3; }
.sft-design-note b { display:block; margin-bottom:8px; font-family:var(--serif); font-size:1.35rem; }
.sft-design-note p { margin:0; color:#6a6057; font-size:.8rem; line-height:1.6; }

.sft-themes { padding:120px 0; background:#fffaf2; }
.sft-theme-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,8vw,110px); }
.sft-theme-title .eyebrow { color:var(--sft-wine); }
.sft-theme-title h2 { margin-bottom:18px; }
.sft-theme-title p { color:#6c6259; }
.sft-theme-list { display:grid; gap:0; border-top:1px solid rgba(88,55,29,.18); }
.sft-theme-item { display:grid; grid-template-columns:70px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid rgba(88,55,29,.18); }
.sft-theme-item span { color:var(--sft-wine); font-family:var(--serif); font-size:1.7rem; }
.sft-theme-item strong { display:block; margin-bottom:5px; font-family:var(--serif); font-size:1.45rem; }
.sft-theme-item p { margin:0; color:#6b6158; font-size:.83rem; }

.sft-cta {
    position:relative;
    padding:120px 0;
    overflow:hidden;
    color:#fff8ed;
    background:var(--sft-wine-deep);
    text-align:center;
}
.sft-cta::before {
    content:"";
    position:absolute;
    inset:0;
    background:url('../img/siempre-fuiste-tu.webp') center 40% / cover no-repeat;
    opacity:.07;
    filter:blur(8px);
}
.sft-cta .section-shell { position:relative; z-index:1; }
.sft-cta .eyebrow { justify-content:center; color:#d5b9e1; }
.sft-cta h2 { max-width:900px; margin:0 auto 20px; }
.sft-cta p { max-width:720px; margin:0 auto 30px; color:rgba(255,255,255,.66); }

.sft-page-footer { padding:30px 0; background:#110d0c; }
.sft-page-footer .footer-bottom { border-top-color:rgba(255,255,255,.08); }

@media (max-width: 1050px) {
    .sft-home-feature { grid-template-columns: 210px 1fr; gap: 24px; }
    .sft-hero-grid { grid-template-columns:1fr .58fr; }
    .sft-data-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
    .sft-home-feature { grid-template-columns:1fr; }
    .sft-home-cover { max-width: 220px; margin: 0 auto 8px; }
    .sft-home-copy { max-width:720px; }
    .sft-hero { min-height:0; padding-top:calc(var(--header-h) + 50px); }
    .sft-hero-grid { grid-template-columns:1fr; }
    .sft-cover-stage { order:-1; width:min(68vw,370px); }
    .sft-story-grid, .sft-theme-grid { grid-template-columns:1fr; }
    .sft-story-side { position:static; }
    .sft-characters-head, .sft-cover-design-head { grid-template-columns:1fr; }
    .sft-character-grid { grid-template-columns:1fr; }
    .sft-intro-band .section-shell { grid-template-columns:auto 1fr; }
    .sft-intro-band small { grid-column:2; }
    .sft-design-notes { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
    .sft-home-feature { margin-top:36px; padding:24px 18px 28px; border-radius:20px; }
    .sft-home-cover { max-width: 190px; }
    .sft-home-cover-badge { left:-6px; }
    .sft-home-copy h3 { font-size:3rem; }
    .sft-home-actions .button { width:100%; }
    .sft-hero { padding-bottom:68px; }
    .sft-hero h1 { font-size:4.3rem; }
    .sft-cover-stage { width:min(78vw,330px); }
    .sft-cover-note { right:-8px; }
    .sft-intro-band { padding:28px 0; }
    .sft-intro-mark { font-size:3.8rem; }
    .sft-story-section, .sft-characters, .sft-cover-design, .sft-themes, .sft-cta { padding:84px 0; }
    .sft-story-copy { padding:28px 22px; }
    .sft-data-grid { grid-template-columns:1fr; }
    .sft-character { min-height:0; padding:30px 24px; }
    .sft-design-note { padding:22px; }
    .sft-theme-item { grid-template-columns:48px 1fr; gap:14px; }
}