:root {
    --navy: #0F1B3D;
    --navy-soft: #1E2D52;
    --navy-line: #2A3A60;
    --rose: #E8A4B2;
    --rose-deep: #C9697E;
    --rose-soft: #FBE8EC;
    --cream: #FFFBF7;
    --cream-warm: #F5EFE6;
    --white: #FFFFFF;
    --ink: #161A2C;
    --ink-soft: #5A6076;
    --line: #E8E2D8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--cream); color: var(--ink); margin: 0; line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
.lang-es .en { display: none; }
.lang-en .es { display: none; }
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 251, 247, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 18px 60px; display: flex; justify-content: space-between; align-items: center; }
.back-link { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.back-link:hover { color: var(--rose-deep); }
.topic-counter { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.5px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 60px; }
.hero { background: var(--navy); color: var(--cream); padding: 100px 0 120px; margin-bottom: 80px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; background: radial-gradient(circle, var(--rose-deep) 0%, transparent 65%); opacity: 0.18; border-radius: 50%; pointer-events: none; }
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 60px; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-tag { display: inline-block; color: var(--rose); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid rgba(232, 164, 178, 0.35); }
.hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 64px; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--rose); font-weight: 400; }
.hero-quote { background: linear-gradient(135deg, rgba(232, 164, 178, 0.08) 0%, rgba(232, 164, 178, 0.02) 100%); border-left: 3px solid var(--rose); padding: 32px 36px; border-radius: 4px; }
.hero-quote-label { font-size: 11px; color: var(--rose); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.hero-quote p { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.5; margin: 0; color: var(--cream); }
section.block { margin-bottom: 100px; }
.section-num { font-family: 'Fraunces', serif; color: var(--rose-deep); font-size: 14px; font-weight: 500; letter-spacing: 4px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.section-num::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 42px; line-height: 1.15; color: var(--navy); margin: 0 0 18px 0; letter-spacing: -0.01em; max-width: 720px; }
.section-title em { font-style: italic; color: var(--rose-deep); }
.section-intro { font-size: 18px; color: var(--ink-soft); max-width: 720px; margin: 0 0 50px 0; line-height: 1.65; }
.ctx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ctx-card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 36px 32px; transition: all 0.3s ease; }
.ctx-card:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 27, 61, 0.06); }
.ctx-year { font-family: 'Fraunces', serif; font-style: italic; font-size: 48px; color: var(--rose-deep); line-height: 1; margin-bottom: 18px; font-weight: 500; }
.ctx-card h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; margin: 0 0 16px 0; color: var(--navy); line-height: 1.25; }
.ctx-card p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.roles-table { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.role-row { display: grid; grid-template-columns: 200px 200px 1fr; padding: 24px 32px; border-bottom: 1px solid var(--line); align-items: center; transition: background 0.2s; }
.role-row:last-child { border-bottom: none; }
.role-row:hover { background: var(--cream); }
.role-row.you { background: linear-gradient(90deg, var(--rose-soft) 0%, var(--white) 60%); border-left: 4px solid var(--rose-deep); padding-left: 28px; }
.role-row.you:hover { background: linear-gradient(90deg, var(--rose-soft) 0%, var(--cream) 60%); }
.role-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--navy); }
.role-row.you .role-name { color: var(--rose-deep); }
.role-row.you .role-name::after { content: ' ★'; color: var(--rose-deep); }
.role-tag { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.role-row.you .role-tag { color: var(--rose-deep); }
.role-covers { font-size: 15px; color: var(--ink); line-height: 1.55; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pillar { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 44px; position: relative; transition: all 0.3s ease; }
.pillar:hover { border-color: var(--rose); box-shadow: 0 20px 50px rgba(15, 27, 61, 0.08); }
.pillar-num { position: absolute; top: 32px; right: 36px; font-family: 'Fraunces', serif; font-style: italic; font-size: 64px; font-weight: 400; color: var(--rose-soft); line-height: 1; pointer-events: none; user-select: none; }
.pillar h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; color: var(--navy); margin: 0 0 18px 0; line-height: 1.25; max-width: 85%; }
.pillar p { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 12px 0; }
.pillar p:last-child { margin-bottom: 0; }
.term { position: relative; color: var(--rose-deep); font-weight: 500; border-bottom: 1px dotted var(--rose-deep); cursor: help; }
.term::after { content: attr(data-def); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--cream); padding: 14px 18px; border-radius: 8px; font-size: 13.5px; line-height: 1.55; font-weight: 400; width: 320px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100; box-shadow: 0 12px 32px rgba(15, 27, 61, 0.25); border-bottom: 2px solid var(--rose); }
.term::before { content: ''; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--navy); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 100; }
.term:hover::after, .term:hover::before, .term:focus::after, .term:focus::before { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.term:focus { outline: none; }
.audio-wrapper { background: var(--navy); border-radius: 16px; padding: 56px; color: var(--cream); display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: center; position: relative; overflow: hidden; }
.audio-wrapper::before { content: ''; position: absolute; bottom: -100px; left: -100px; width: 300px; height: 300px; background: radial-gradient(circle, var(--rose) 0%, transparent 70%); opacity: 0.12; border-radius: 50%; pointer-events: none; }
.audio-meta-label { font-size: 11px; color: var(--rose); letter-spacing: 3px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.audio-meta h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 32px; line-height: 1.15; margin: 0 0 14px 0; }
.audio-meta p { margin: 0; color: rgba(255, 251, 247, 0.7); font-size: 15px; line-height: 1.65; }
audio { width: 100%; height: 54px; filter: invert(0.92); }
.audio-control { position: relative; z-index: 1; }
.speech-block { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); border-radius: 16px; padding: 60px; color: var(--cream); position: relative; overflow: hidden; }
.speech-block::before { content: ''; position: absolute; top: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, var(--rose) 0%, transparent 60%); opacity: 0.1; border-radius: 50%; pointer-events: none; }
.speech-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid rgba(232, 164, 178, 0.25); position: relative; }
.speech-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; margin: 0; }
.speech-meta { font-family: 'Fraunces', serif; font-style: italic; color: var(--rose); font-size: 14px; letter-spacing: 1px; }
.speech-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; position: relative; }
.speech-col { position: relative; }
.speech-col-label { font-size: 11px; color: var(--rose); letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.speech-col-label::before { content: ''; width: 30px; height: 1px; background: var(--rose); }
.speech-col p { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.7; margin: 0 0 16px 0; color: var(--cream); }
.speech-col p:last-child { margin-bottom: 0; }
.speech-col p strong { font-style: normal; font-weight: 600; color: var(--rose); background: linear-gradient(180deg, transparent 60%, rgba(232, 164, 178, 0.15) 60%); padding: 0 2px; }
.speech-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(232, 164, 178, 0.2); transform: translateX(-50%); }
.rebuttal-block { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 0; }
.rebuttal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.rebuttal-row:last-child { border-bottom: none; }
.rebuttal-attack { background: var(--cream-warm); padding: 32px 36px; border-right: 1px solid var(--line); }
.rebuttal-attack-label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rebuttal-attack-label::before { content: '⚔'; font-size: 14px; color: var(--ink-soft); }
.rebuttal-attack p { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; line-height: 1.55; color: var(--navy); margin: 0; }
.rebuttal-counter { background: var(--white); padding: 32px 36px; border-left: 3px solid var(--rose-deep); }
.rebuttal-counter-label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--rose-deep); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rebuttal-counter-label::before { content: '↻'; font-size: 14px; color: var(--rose-deep); }
.rebuttal-counter p { font-size: 15.5px; line-height: 1.65; margin: 0 0 10px 0; color: var(--ink); }
.rebuttal-counter p:last-child { margin-bottom: 0; }
.rebuttal-counter strong { color: var(--rose-deep); font-weight: 600; }
.scalpel-list { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); border-radius: 16px; padding: 50px 56px; color: var(--cream); position: relative; overflow: hidden; }
.scalpel-list::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--rose) 0%, transparent 65%); opacity: 0.12; border-radius: 50%; pointer-events: none; }
.scalpel-list h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; margin: 0 0 8px 0; color: var(--cream); position: relative; }
.scalpel-list .sub { font-family: 'Fraunces', serif; font-style: italic; color: var(--rose); font-size: 14px; letter-spacing: 1px; margin-bottom: 36px; position: relative; }
.scalpel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; position: relative; }
.scalpel { background: rgba(255, 251, 247, 0.05); border-left: 2px solid var(--rose); padding: 22px 26px; border-radius: 6px; backdrop-filter: blur(4px); }
.scalpel-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--rose); font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; }
.scalpel p { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; line-height: 1.55; margin: 0; color: var(--cream); }
.lang-fab { position: fixed; bottom: 32px; left: 32px; z-index: 60; background: var(--navy); color: var(--cream); border: none; border-radius: 100px; padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; cursor: pointer; box-shadow: 0 12px 32px rgba(15, 27, 61, 0.3); display: flex; align-items: center; gap: 12px; transition: all 0.25s ease; }
.lang-fab:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201, 105, 126, 0.35); }
.lang-fab .globe { font-size: 16px; }
.lang-fab .pill { background: var(--rose); color: var(--navy); padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.lang-fab .pill-target { background: rgba(255, 251, 247, 0.15); color: var(--cream); padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
.end-spacer { height: 100px; }

/* === HERO IMAGE BAND === */
.hero-image-band { width: 100%; max-width: 1280px; margin: -60px auto 80px; padding: 0 60px; position: relative; z-index: 2; }
.hero-image-band img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 24px 60px rgba(15, 27, 61, 0.18); }

/* === FACT GRID (Datos clave) === */
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fact-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 32px 36px; position: relative; transition: all 0.3s ease; }
.fact-card:hover { border-color: var(--rose); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 27, 61, 0.06); }
.fact-number { position: absolute; top: 22px; right: 30px; font-family: 'Fraunces', serif; font-style: italic; font-size: 38px; color: var(--rose-soft); font-weight: 500; line-height: 1; pointer-events: none; user-select: none; }
.fact-card .punch { font-family: 'Fraunces', serif; font-style: italic; font-size: 21px; font-weight: 500; color: var(--rose-deep); margin: 0 0 14px 0; line-height: 1.3; padding-right: 60px; }
.fact-card .detail { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0; }
.fact-card .detail strong { color: var(--navy); font-weight: 600; background: linear-gradient(180deg, transparent 65%, rgba(232, 164, 178, 0.25) 65%); padding: 0 2px; }