:root {
    --color-primary: #b08b4f;
    --color-primary-dark: #8a6838;
    --color-dark: #182521;
    --color-text: #49534f;
    --color-muted: #7c8581;
    --color-light: #f7f3ea;
    --color-white: #ffffff;
    --color-border: rgba(24, 37, 33, 0.12);
    --shadow-soft: 0 20px 50px rgba(24, 37, 33, 0.10);
    --font-title: "Cormorant Garamond", Georgia, serif;
    --font-body: "Montserrat", Arial, sans-serif;
    --container: 1180px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.section {
    padding: 110px 0;
}

.section-label {
    display: block;
    margin-bottom: 15px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

h1,
h2,
h3,
blockquote {
    color: var(--color-dark);
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.1;
}

h2 {
    margin-bottom: 25px;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
}

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid transparent;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.site-header.scrolled {
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 30px rgba(24, 37, 33, 0.08);
    backdrop-filter: blur(14px);
}

.navbar {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
}

.brand-symbol {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(176, 139, 79, 0.45);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text strong {
    color: var(--color-dark);
    font-family: var(--font-title);
    font-size: 1.42rem;
}

.brand-text small {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav a {
    position: relative;
    color: var(--color-dark);
    font-size: 0.81rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.main-nav a:not(.nav-highlight)::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 1px;
    background: var(--color-primary);
    content: "";
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.nav-highlight {
    padding: 12px 20px;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary-dark) !important;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 27px;
    height: 2px;
    margin: 6px auto;
    background: var(--color-dark);
    transition: 0.3s ease;
}

.hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            rgba(239, 235, 222, 0.32),
            rgba(239, 235, 222, 0.50)
        ),
        url("../img/portada-principal.jpg") center center/cover no-repeat;
}

.hero::before {
    position: absolute;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(176, 139, 79, 0.22);
    border-radius: 50%;
    content: "";
}

.hero::after {
    position: absolute;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(176, 139, 79, 0.2);
    border-radius: 50%;
    content: "";
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.25)
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(900px, calc(100% - 40px));
    padding-top: 80px;
    text-align: center;
}

.hero-subtitle {
    display: inline-block;
    margin-bottom: 25px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.hero h1 {
    margin-bottom: 22px;
    font-size: clamp(4.2rem, 10vw, 8rem);
    letter-spacing: -0.04em;
}

.hero p {
    max-width: 690px;
    margin: 0 auto 38px;
    color: #4d5753;
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.btn {
    display: inline-flex;
    min-height: 53px;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-secondary {
    border-color: rgba(24, 37, 33, 0.35);
    background: rgba(255, 255, 255, 0.22);
    color: var(--color-dark);
}

.scroll-indicator {
    position: absolute;
    z-index: 3;
    bottom: 35px;
    left: 50%;
    width: 28px;
    height: 46px;
    border: 1px solid rgba(24, 37, 33, 0.4);
    border-radius: 30px;
    transform: translateX(-50%);
}

.scroll-indicator span {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-dark);
    animation: scrollDown 1.8s infinite;
}

@keyframes scrollDown {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 18px);
    }
}

.welcome {
    background: var(--color-white);
}

.welcome-grid,
.purpose-grid {
    display: grid;
    align-items: center;
    gap: 80px;
    grid-template-columns: 1fr 1fr;
}

.section-image {
    position: relative;
}

.section-image::before {
    position: absolute;
    z-index: 0;
    top: -24px;
    right: -24px;
    width: 70%;
    height: 70%;
    border: 1px solid rgba(176, 139, 79, 0.35);
    content: "";
}

.section-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 560px;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    object-fit: cover;
    object-position: center;
}

.section-content p,
.purpose-content p {
    margin-bottom: 18px;
}

.text-link,
.book-link {
    display: inline-flex;
    margin-top: 15px;
    align-items: center;
    gap: 12px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.text-link span,
.book-link span {
    transition: transform 0.25s ease;
}

.text-link:hover span,
.book-link:hover span {
    transform: translateX(6px);
}

.books-section {
    background: var(--color-light);
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 65px;
    text-align: center;
}

/* =========================================================
   BIBLIOTECA
========================================================= */

.books-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:28px;
    align-items:start;
}

.book-card{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    border:1px solid rgba(196, 150, 82, 0.16);
    border-radius:4px;
    box-shadow:0 18px 45px rgba(24, 31, 42, 0.08);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.book-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(24, 31, 42, 0.14);
}

.book-cover-image {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #07111d;
}

.book-cover-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}

.book-card:hover .book-cover-image img{
    transform:scale(1.025);
    filter:brightness(1.04);
}

.book-info{
    padding:30px 24px 32px;
}

.book-author{
    display:block;
    margin-bottom:16px;
    color:#a46b27;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.17em;
    text-transform:uppercase;
}

.book-info h3{
    margin:0 0 18px;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(1.65rem, 2vw, 2.15rem);
    line-height:1.03;
    color:#10202c;
}

.book-info p{
    margin:0 0 22px;
    color:#53616a;
    font-size:0.95rem;
    line-height:1.7;
}

.book-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#9b611e;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-decoration:none;
    text-transform:uppercase;
}

.book-link span:last-child{
    transition:transform 0.3s ease;
}

.book-link:hover span:last-child{
    transform:translateX(5px);
}

.reflection-section {
    background: var(--color-white);
}

.reflection-box {
    position: relative;
    max-width: 920px;
    padding: 70px 80px;
    border-top: 1px solid rgba(176, 139, 79, 0.4);
    border-bottom: 1px solid rgba(176, 139, 79, 0.4);
    text-align: center;
}

.reflection-icon {
    display: inline-block;
    margin-bottom: 30px;
    color: var(--color-primary);
    font-size: 1.6rem;
}

.reflection-box blockquote {
    margin-bottom: 22px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-style: italic;
}

.reflection-box p {
    color: var(--color-muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.purpose-section {
    background: #e9ece5;
}

.purpose-cards {
    display: grid;
    gap: 20px;
}

.purpose-cards article {
    padding: 27px 30px;
    border-left: 2px solid var(--color-primary);
    background: rgba(255, 255, 255, 0.65);
}

.purpose-cards span {
    color: var(--color-primary-dark);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.purpose-cards h3 {
    margin: 7px 0;
    font-size: 1.8rem;
}

.site-footer {
    padding-top: 80px;
    background: var(--color-dark);
    color: rgba(255, 255, 255, 0.68);
}

.site-footer .brand-text strong {
    color: var(--color-white);
}

.site-footer .brand-text small {
    color: rgba(255, 255, 255, 0.48);
}

.footer-grid {
    display: grid;
    gap: 70px;
    grid-template-columns: 2fr 1fr 1fr;
}

.footer-brand p {
    max-width: 470px;
    margin-top: 25px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links h3 {
    margin-bottom: 7px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-links a {
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #d8b878;
}

.footer-bottom {
    display: flex;
    margin-top: 65px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
    gap: 25px;
    font-size: 0.72rem;
}


/* =========================================================
   HERO CINEMATOGRÁFICO
========================================================= */

.hero-cinematic {
    isolation: isolate;
    min-height: 100svh;
    background: #06111d;
}

.hero-background {
    position: absolute;
    z-index: -4;
    inset: 0;
    background:
        url("../img/portada-principal.jpg")
        center center / cover no-repeat;
    transform: scale(1.03);
    animation: heroBackgroundMove 22s ease-in-out infinite alternate;
}

.hero-cinematic .hero-overlay {
    z-index: -3;
    background:
        linear-gradient(
            180deg,
            rgba(3, 10, 18, 0.18) 0%,
            rgba(3, 10, 18, 0.18) 42%,
            rgba(3, 10, 18, 0.64) 100%
        ),
        radial-gradient(
            circle at center,
            rgba(245, 211, 106, 0.10),
            transparent 38%
        );
}

.hero-light {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(250, 218, 121, 0.16);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    animation: heroLightPulse 5.5s ease-in-out infinite;
}

.hero-stars {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 244, 204, 0.9);
    box-shadow:
        0 0 8px rgba(255, 232, 156, 0.9),
        0 0 18px rgba(255, 232, 156, 0.55);
    animation: starTwinkle 4s ease-in-out infinite;
}

.star-1 {
    top: 19%;
    left: 14%;
}

.star-2 {
    top: 31%;
    left: 27%;
    animation-delay: 0.8s;
}

.star-3 {
    top: 17%;
    right: 19%;
    animation-delay: 1.4s;
}

.star-4 {
    top: 40%;
    right: 12%;
    animation-delay: 2.2s;
}

.star-5 {
    bottom: 26%;
    left: 18%;
    animation-delay: 1.1s;
}

.star-6 {
    right: 25%;
    bottom: 20%;
    animation-delay: 2.8s;
}

.hero-cinematic .hero-content {
    max-width: 950px;
    padding-top: 120px;
    color: #ffffff;
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 24px;
    color: rgba(255, 231, 167, 0.92);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-cinematic h1 {
    margin-bottom: 28px;
    color: #ffffff;
    font-size: clamp(3.8rem, 9vw, 7.8rem);
    text-shadow:
        0 4px 30px rgba(0, 0, 0, 0.35),
        0 0 45px rgba(245, 211, 106, 0.15);
}

.hero-title-symbol {
    color: #e2bc6c;
    font-size: 0.7em;
}

.hero-story {
    position: relative;
    width: min(760px, 100%);
    min-height: 115px;
    margin: 0 auto 32px;
}

.hero-story-line {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 3vw, 2rem) !important;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    pointer-events: none;
}

.hero-story-line.is-active {
    opacity: 1;
    transform: translateY(0);
}

.hero-cinematic .btn-primary {
    border-color: #d9ae62;
    background: rgba(205, 156, 70, 0.95);
    color: #ffffff;
    box-shadow: 0 10px 35px rgba(205, 156, 70, 0.2);
}

.hero-cinematic .btn-primary:hover {
    background: #d7aa5b;
}

.hero-cinematic .btn-secondary {
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(5, 14, 24, 0.25);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.hero-cinematic .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hero-cinematic .scroll-indicator {
    display: flex;
    width: auto;
    height: auto;
    min-width: 100px;
    border: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
}

.scroll-indicator-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: none !important;
}

.scroll-indicator-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 24px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 30px !important;
    background: transparent !important;
    animation: none !important;
}

.scroll-indicator-icon::before {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transform: translateX(-50%);
    animation: scrollDown 1.8s infinite;
}

@keyframes heroBackgroundMove {
    from {
        transform: scale(1.03) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.08) translate3d(0, -1%, 0);
    }
}

@keyframes heroLightPulse {
    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.88);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes starTwinkle {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}


/* =========================================================
   INTRODUCCIÓN DE LA HISTORIA
========================================================= */

.story-introduction {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f4eb 100%
        );
}

.story-image .image-frame {
    position: relative;
}

.story-image .image-frame::after {
    position: absolute;
    z-index: 2;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    content: "";
    pointer-events: none;
}

.section-lead {
    color: var(--color-dark);
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    line-height: 1.45;
}


/* =========================================================
   LÍNEA DEL TIEMPO
========================================================= */

.journey-section {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(176, 139, 79, 0.12),
            transparent 32%
        ),
        #0a1720;
    color: rgba(255, 255, 255, 0.72);
}

.journey-heading h2,
.journey-content h3 {
    color: #ffffff;
}

.journey-heading p {
    color: rgba(255, 255, 255, 0.66);
}

.journey-section .section-label {
    color: #d6b36f;
}

.journey-timeline {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

.journey-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(215, 181, 111, 0.72) 8%,
            rgba(215, 181, 111, 0.72) 92%,
            transparent
        );
    content: "";
    transform: translateX(-50%);
}

.journey-item {
    position: relative;
    display: grid;
    min-height: 310px;
    align-items: center;
    gap: 90px;
    grid-template-columns: 1fr 1fr;
}

.journey-item:nth-child(odd) .journey-content {
    grid-column: 1;
    text-align: right;
}

.journey-item:nth-child(even) .journey-content {
    grid-column: 2;
    text-align: left;
}

.journey-number {
    position: absolute;
    top: 50%;
    color: rgba(215, 181, 111, 0.16);
    font-family: var(--font-title);
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 1;
    transform: translateY(-50%);
}

.journey-item:nth-child(odd) .journey-number {
    right: -3%;
}

.journey-item:nth-child(even) .journey-number {
    left: -3%;
}

.journey-marker {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    border: 4px solid #0a1720;
    border-radius: 50%;
    background: #d6b36f;
    box-shadow:
        0 0 0 1px rgba(214, 179, 111, 0.65),
        0 0 25px rgba(214, 179, 111, 0.42);
    transform: translate(-50%, -50%);
}

.journey-content {
    position: relative;
    z-index: 1;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.journey-kicker {
    display: block;
    margin-bottom: 10px;
    color: #d6b36f;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.journey-content h3 {
    margin-bottom: 15px;
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.journey-content p {
    color: rgba(255, 255, 255, 0.67);
}

/* =========================================================
   ANIMACIONES DE APARICIÓN
========================================================= */

.reveal-element {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.85s ease var(--reveal-delay, 0ms),
        transform 0.85s ease var(--reveal-delay, 0ms);
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-element {
        opacity: 1;
        transform: none;
    }

}

@media (max-width: 1200px) 
{
    .books-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .main-nav {
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .section {
        padding: 80px 0;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
        display: block;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .main-nav {
        position: fixed;
        z-index: 1001;
        inset: 0;
        display: flex;
        padding: 130px 35px 50px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        background: var(--color-light);
        transform: translateX(100%);
        transition: transform 0.35s ease;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .main-nav a {
        font-family: var(--font-title);
        font-size: 2.2rem;
        letter-spacing: 0;
        text-transform: none;
    }

    .nav-highlight {
        padding: 0;
        border: 0;
    }

    .welcome-grid,
    .purpose-grid {
        gap: 55px;
        grid-template-columns: 1fr;
    }

    .section-image img {
        min-height: 430px;
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
    
    .book-cover-image {
        height: 470px;
    }
    
    .hero-cinematic .hero-content {
        padding-top: 110px;
    }
    
    .hero-story {
        min-height: 145px;
    }
    
    .journey-timeline::before {
        left: 14px;
    }
    
    .journey-item {
        display: block;
        min-height: auto;
        padding: 0 0 55px 55px;
    }
    
    .journey-item:nth-child(odd) .journey-content,
    .journey-item:nth-child(even) .journey-content {
        text-align: left;
    }
    
    .journey-marker {
        top: 42px;
        left: 14px;
    }
    
    .journey-number,
    .journey-item:nth-child(odd) .journey-number,
    .journey-item:nth-child(even) .journey-number {
        top: 10px;
        right: 10px;
        left: auto;
        font-size: 5rem;
        transform: none;
    }
    
    .journey-content {
        padding: 30px 25px;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .navbar {
        min-height: 75px;
    }

    .brand-text strong {
        font-size: 1.2rem;
    }

    .brand-text small {
        font-size: 0.55rem;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .books-grid {
        grid-template-columns: 1fr;
    }

    
    .book-info h3,
    .book-info p {
        min-height: auto;
    }
    
    .reflection-box {
        padding: 55px 10px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
    }
    
    .book-cover-image {
        height: auto;
    }

    .book-cover-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    .hero-cinematic h1 {
        font-size: 3.25rem;
    }
    
    .hero-eyebrow {
        max-width: 280px;
        line-height: 1.7;
    }
    
    .hero-story {
        min-height: 165px;
    }
    
    .hero-story-line {
        font-size: 1.35rem !important;
    }
    
    .hero-cinematic .scroll-indicator {
        bottom: 18px;
    }
}

section[id] {
    scroll-margin-top: 88px;
}

@media (max-width: 560px) {
    section[id] {
        scroll-margin-top: 75px;
    }
}

/* =========================================================
   CORRECCIÓN FINAL DEL HERO CINEMATOGRÁFICO
========================================================= */

.hero-cinematic {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #07121c;
}

.hero-cinematic .hero-background {
    position: absolute;
    z-index: -4;
    inset: 0;
    background:
        url("../img/portada-principal.jpg")
        center center / cover no-repeat;
}

.hero-cinematic .hero-overlay {
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 20, 0.18) 0%,
            rgba(4, 12, 20, 0.28) 48%,
            rgba(4, 12, 20, 0.68) 100%
        );
}

.hero-cinematic .hero-content {
    position: relative;
    z-index: 5;
    width: min(950px, calc(100% - 40px));
    padding-top: 110px;
    text-align: center;
}

.hero-cinematic .hero-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: #f1d38f;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-cinematic h1 {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: clamp(3.8rem, 8vw, 7.2rem);
    line-height: 0.95;
    text-shadow:
        0 5px 30px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(224, 183, 104, 0.2);
}

.hero-cinematic .hero-title-symbol {
    color: #dfb967;
    font-size: 0.65em;
}

.hero-cinematic .hero-story {
    position: relative;
    width: min(780px, 100%);
    min-height: 120px;
    margin: 0 auto 28px;
}

/* Oculta obligatoriamente todas las frases */

.hero-cinematic .hero-story-line {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.96) !important;
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 2.7vw, 2rem) !important;
    line-height: 1.35 !important;
    text-align: center;
    opacity: 0 !important;
    visibility: hidden;
    transform: translateY(16px);
    transition:
        opacity 1s ease,
        visibility 1s ease,
        transform 1s ease;
    pointer-events: none;
}

/* Muestra solamente la frase activa */

.hero-cinematic .hero-story-line.is-active {
    opacity: 1 !important;
    visibility: visible;
    transform: translateY(0);
}

.hero-cinematic .hero-buttons {
    position: relative;
    z-index: 6;
}

/* =====================================================
   VIDEO DEL TESTIMONIO
===================================================== */

.story-video {
    position: relative;
}

.video-frame {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #05080d;
    border: 1px solid rgba(196, 150, 68, 0.35);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22),
        0 0 40px rgba(194, 146, 55, 0.12);
}

.santiago-video{

    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    border-radius:22px;

    overflow:hidden;

    display:block;

}

.video-glow {
    position: absolute;
    z-index: 1;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at center,
            rgba(213, 165, 76, 0.18),
            transparent 58%
        );
    filter: blur(35px);
}

.video-caption {
    margin-top: 18px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(30, 39, 45, 0.7);
    letter-spacing: 0.02em;
}

/* Botón de reproducción nativo en navegadores WebKit */

.santiago-video::-webkit-media-controls-panel {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.86),
        rgba(0, 0, 0, 0.15)
    );
}

@media (max-width: 768px) {

    .video-frame {
        border-radius: 16px;
    }

    .video-caption {
        font-size: 0.82rem;
    }

}

/* =====================================================
   MENÚ VISIBLE SOBRE EL HERO
===================================================== */

.site-header:not(.scrolled) .main-nav a {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.site-header:not(.scrolled) .main-nav a:hover {
    color: #e8bd68;
}

.site-header:not(.scrolled) .main-nav .btn-contact,
.site-header:not(.scrolled) .main-nav a:last-child {
    color: #e8bd68;
    border-color: rgba(232, 189, 104, 0.9);
}

/* Cuando el encabezado cambia a fondo claro al bajar */

.site-header.scrolled .main-nav a {
    color: #16202a;
    text-shadow: none;
}

.site-header.scrolled .main-nav a:hover {
    color: #b98938;
}

.site-header.scrolled .main-nav .btn-contact,
.site-header.scrolled .main-nav a:last-child {
    color: #9c6b24;
    border-color: #c99b4c;
}

.site-header:not(.scrolled) .site-logo,
.site-header:not(.scrolled) .site-logo strong,
.site-header:not(.scrolled) .site-logo span {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.site-header.scrolled .site-logo,
.site-header.scrolled .site-logo strong {
    color: #17212a;
    text-shadow: none;
}

.site-header.scrolled .site-logo span {
    color: #7b8186;
    text-shadow: none;
}

.site-header:not(.scrolled)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.48),
        rgba(0, 0, 0, 0)
    );
    z-index: -1;
}

/* =====================================================
   MENÚ SOBRE LA PORTADA
===================================================== */

/* Estado inicial: encabezado transparente sobre el hero */

.site-header:not(.scrolled) .main-nav a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.site-header:not(.scrolled) .main-nav a:hover {
    color: #e8bd68 !important;
}

/* Botón de contacto */

.site-header:not(.scrolled) .main-nav .nav-highlight {
    color: #e8bd68 !important;
    border-color: rgba(232, 189, 104, 0.95) !important;
}

/* Marca o logotipo */

.site-header:not(.scrolled) .brand-text strong {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.site-header:not(.scrolled) .brand-text small {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.site-header:not(.scrolled) .brand-symbol {
    color: #e8bd68 !important;
    border-color: rgba(232, 189, 104, 0.8) !important;
}

/* Ligero degradado oscuro detrás del encabezado */

.site-header:not(.scrolled) {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.48),
        rgba(0, 0, 0, 0.08),
        transparent
    ) !important;
}


/* =====================================================
   MENÚ DESPUÉS DE HACER SCROLL
===================================================== */

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
}

.site-header.scrolled .main-nav a {
    color: #17212a !important;
    text-shadow: none;
}

.site-header.scrolled .main-nav a:hover {
    color: #a9782f !important;
}

.site-header.scrolled .main-nav .nav-highlight {
    color: #9b6d28 !important;
    border-color: #c99b4c !important;
}

.site-header.scrolled .brand-text strong {
    color: #17212a !important;
    text-shadow: none;
}

.site-header.scrolled .brand-text small {
    color: #7a8085 !important;
    text-shadow: none;
}

.site-header.scrolled .brand-symbol {
    color: #a9782f !important;
    border-color: rgba(169, 120, 47, 0.55) !important;
}

/*=========================================================
LIBRO V DESTACADO
=========================================================*/

.featured-book-card{

    position:relative;

    transform:scale(1.05);

    border:1px solid rgba(215,170,70,.45);

    overflow:hidden;

    transition:.45s;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        0 0 30px rgba(215,170,70,.25);

}

.featured-ribbon{

    position:absolute;

    top:0;

    left:0;

    right:0;

    z-index:50;

    padding:12px;

    text-align:center;

    font-size:.70rem;

    letter-spacing:.18em;

    font-weight:700;

    color:#fff;

    text-transform:uppercase;

    background:
        linear-gradient(
            90deg,
            #8d5e16,
            #d8aa47,
            #8d5e16
        );

}

.featured-book-card:hover{

    transform:
        translateY(-12px)
        scale(1.08);

}

.featured-book-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    pointer-events:none;

    border-radius:inherit;

    background:
        radial-gradient(
            circle,
            rgba(230,188,80,.18),
            transparent 70%
        );

}

@keyframes featuredPulse{

    0%{

        box-shadow:
            0 0 25px rgba(215,170,70,.20);

    }

    50%{

        box-shadow:
            0 0 50px rgba(215,170,70,.42);

    }

    100%{

        box-shadow:
            0 0 25px rgba(215,170,70,.20);

    }

}

.featured-book-card{

    animation:
        featuredPulse 5s ease-in-out infinite;

}

/* =====================================================
   PANTALLA DE BIENVENIDA CINEMATOGRÁFICA
===================================================== */

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: #02050a;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.intro-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Fondo */

.intro-background {
    position: absolute;
    inset: -4%;

    background-image:
        url("/assets/img/portada-principal.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.06);

    animation:
        introBackgroundBreath 18s ease-in-out infinite alternate;
}


/* =====================================================
   VIDEO DE INTRODUCCIÓN
===================================================== */

.intro-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

/* Capa oscura */

.intro-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(5, 10, 20, 0.15),
            rgba(2, 5, 10, 0.72) 60%,
            rgba(0, 0, 0, 0.92)
        );
}


/* Luz central */

.intro-light {
    position: absolute;

    width: min(60vw, 750px);
    height: min(60vw, 750px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 228, 164, 0.48) 0%,
            rgba(227, 176, 72, 0.22) 26%,
            rgba(116, 164, 255, 0.12) 47%,
            transparent 72%
        );

    filter: blur(20px);

    animation:
        introLightPulse 5.5s ease-in-out infinite;
}


/* Contenido */

.intro-content {
    position: relative;
    z-index: 5;

    width: min(92%, 900px);

    padding: 40px 24px;

    text-align: center;
    color: #ffffff;

    animation:
        introContentAppear 1.8s ease both;
}


.intro-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 26px;

    border: 1px solid rgba(230, 188, 105, 0.62);
    border-radius: 50%;

    color: #e6bd69;

    font-size: 1.3rem;

    box-shadow:
        0 0 30px rgba(218, 170, 72, 0.18);
}


.intro-kicker {
    margin: 0 0 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.76rem;
    font-weight: 500;

    letter-spacing: 0.3em;
    text-transform: uppercase;

    color: rgba(255, 224, 164, 0.9);
}


.intro-content h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 8vw, 7.4rem);
    font-weight: 500;
    line-height: 0.95;

    color: #ffffff;

    text-shadow:
        0 4px 30px rgba(0, 0, 0, 0.6);
}


.intro-content h2 span {
    color: #d9aa50;
}


.intro-description {
    max-width: 650px;

    margin:
        30px auto
        34px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.86);
}


.intro-button {
    position: relative;

    padding:
        17px
        34px;

    border: 1px solid rgba(223, 178, 87, 0.9);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(190, 134, 39, 0.95),
            rgba(223, 178, 87, 0.96)
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.32),
        0 0 32px rgba(222, 177, 84, 0.18);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


.intro-button:hover {
    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.4),
        0 0 48px rgba(222, 177, 84, 0.34);
}


.intro-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 5px;
}


.intro-audio-note {
    margin-top: 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.5);
}


/* Evitar que la página se mueva mientras está abierta */

body.intro-active {
    overflow: hidden;
}


/* Animaciones */

@keyframes introBackgroundBreath {

    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.12);
    }

}


@keyframes introLightPulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

}


@keyframes introContentAppear {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Dispositivos pequeños */

@media (max-width: 768px) {

    .intro-content {
        padding:
            30px
            20px;
    }

    .intro-symbol {
        width: 52px;
        height: 52px;
        margin-bottom: 20px;
    }

    .intro-kicker {
        font-size: 0.62rem;
        line-height: 1.7;
    }

    .intro-description {
        margin-top: 24px;
        margin-bottom: 28px;
    }

    .intro-button {
        width: min(100%, 320px);

        padding:
            16px
            22px;

        font-size: 0.7rem;
    }

}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .intro-background,
    .intro-light,
    .intro-content {
        animation: none;
    }

    .intro-screen {
        transition-duration: 0.3s;
    }

}



/* =========================================================
   PÁGINA DEL AUTOR
========================================================= */

.autor-page {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(184, 145, 70, 0.08),
            transparent 35%
        ),
        #f7f4ec;
    color: #203630;
}


/* PORTADA */

.autor-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 25px 95px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            rgba(12, 37, 32, 0.98),
            rgba(19, 55, 46, 0.96)
        );
    color: #ffffff;
}

.autor-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(209, 174, 100, 0.65),
        transparent
    );
}

.autor-hero-container {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    margin: 0 auto;
}

.autor-kicker,
.autor-small-title {
    display: block;
    margin-bottom: 18px;
    color: #caa75d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}

.autor-hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 400;
    line-height: 1.05;
}

.autor-subtitle {
    width: min(670px, 100%);
    margin: 25px auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.8;
}

.autor-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: min(320px, 80%);
    margin: 35px auto 0;
}

.autor-divider span {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(202, 167, 93, 0.8)
    );
}

.autor-divider span:last-child {
    background: linear-gradient(
        90deg,
        rgba(202, 167, 93, 0.8),
        transparent
    );
}

.autor-divider i {
    color: #caa75d;
    font-style: normal;
}


/* LUCES DECORATIVAS */

.autor-hero-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.autor-hero-light-one {
    top: -130px;
    left: -100px;
    width: 370px;
    height: 370px;
    background: rgba(203, 165, 83, 0.12);
}

.autor-hero-light-two {
    right: -130px;
    bottom: -170px;
    width: 420px;
    height: 420px;
    background: rgba(61, 117, 105, 0.2);
}


/* PRESENTACIÓN */

.autor-presentation {
    padding: 110px 25px;
}

.autor-container {
    display: grid;
    grid-template-columns: minmax(270px, 390px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
    width: min(1180px, 100%);
    margin: 0 auto;
}

.autor-image-column {
    text-align: center;
}

.autor-image-wrapper {
    position: relative;
    width: min(360px, 100%);
    margin: 0 auto 30px;
    padding: 15px;
}

.autor-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 25px 60px rgba(20, 45, 38, 0.22);
}

.autor-image-decoration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    left: 30px;
    z-index: 1;
    border: 1px solid rgba(181, 142, 65, 0.65);
}

.autor-image-caption {
    margin: 0;
    color: #173b32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
}

.autor-image-role {
    display: block;
    margin-top: 8px;
    color: #857355;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.autor-content h2,
.autor-work-heading h2 {
    margin: 0 0 28px;
    color: #173b32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.15;
}

.autor-content p {
    margin: 0 0 20px;
    color: #536761;
    font-size: 1.03rem;
    line-height: 1.9;
}

.autor-content .autor-lead {
    color: #263f38;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.24rem;
    line-height: 1.75;
}


/* OBRA */

.autor-work {
    padding: 105px 25px;
    background: #eae5da;
}

.autor-work-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.autor-work-heading {
    width: min(760px, 100%);
    margin: 0 auto 60px;
    text-align: center;
}

.autor-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.autor-work-card {
    position: relative;
    padding: 45px 35px;
    overflow: hidden;
    border: 1px solid rgba(24, 61, 52, 0.12);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 15px 40px rgba(23, 59, 50, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.autor-work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(23, 59, 50, 0.12);
}

.autor-card-number {
    display: block;
    margin-bottom: 30px;
    color: rgba(172, 131, 52, 0.55);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
}

.autor-work-card h3 {
    margin: 0 0 18px;
    color: #173b32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 400;
}

.autor-work-card p {
    margin: 0;
    color: #5c6c67;
    line-height: 1.8;
}


/* CITA */

.autor-quote-section {
    padding: 110px 25px;
    background: #16372f;
}

.autor-quote-container {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.autor-quote-symbol {
    display: block;
    height: 65px;
    color: #caa75d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    line-height: 1;
}

.autor-quote-container blockquote {
    margin: 0 auto;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.55;
}

.autor-quote-author {
    display: block;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* BOTONES */

.autor-actions {
    padding: 70px 25px 100px;
    background: #f7f4ec;
}

.autor-actions-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    width: min(800px, 100%);
    margin: 0 auto;
}

.autor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 15px 28px;
    border: 1px solid #af8946;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.autor-button:hover {
    transform: translateY(-3px);
}

.autor-button-primary {
    background: #af8946;
    color: #ffffff;
}

.autor-button-primary:hover {
    background: #987339;
    color: #ffffff;
}

.autor-button-secondary {
    background: transparent;
    color: #173b32;
}

.autor-button-secondary:hover {
    background: #173b32;
    border-color: #173b32;
    color: #ffffff;
}


/* TABLETAS */

@media (max-width: 900px) {

    .autor-hero {
        padding-top: 125px;
    }

    .autor-container {
        grid-template-columns: 1fr;
    }

    .autor-image-column {
        width: min(430px, 100%);
        margin: 0 auto;
    }

    .autor-content {
        text-align: center;
    }

    .autor-work-grid {
        grid-template-columns: 1fr;
    }

}


/* CELULARES */

@media (max-width: 600px) {

    .autor-hero {
        padding: 110px 20px 75px;
    }

    .autor-presentation,
    .autor-work,
    .autor-quote-section {
        padding: 75px 20px;
    }

    .autor-image-wrapper {
        padding: 10px;
    }

    .autor-work-card {
        padding: 35px 25px;
    }

    .autor-actions-container {
        flex-direction: column;
    }

    .autor-button {
        width: 100%;
    }

}

/* =========================================================
   PÁGINA RESUMEN
========================================================= */

.resumen-page {
    background: #f6f1e7;
    color: #173c34;
}


/* VIDEO DE APERTURA */

.resumen-video-section {
    position: relative;
    overflow: hidden;
    padding: 145px 24px 100px;
    background:
        linear-gradient(
            135deg,
            rgba(9, 31, 27, 0.99),
            rgba(22, 65, 54, 0.97)
        );
    color: #ffffff;
}

.resumen-video-container {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    text-align: center;
}

.resumen-kicker,
.resumen-small-title,
.resumen-book-label {
    display: block;
    color: #cda64e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.resumen-video-section h1 {
    margin: 18px 0 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 6.2rem);
    font-weight: 400;
    line-height: 1.05;
}

.resumen-video-intro {
    width: min(720px, 100%);
    margin: 0 auto 45px;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.8;
}

.resumen-video-frame {
    position: relative;
    width: min(1050px, 100%);
    margin: 0 auto;
    padding: 8px;
    border: 1px solid rgba(205, 166, 78, 0.48);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4);
}

.resumen-video {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-height: 650px;
    background: #000000;
    object-fit: contain;
}

.resumen-video-glow {
    position: absolute;
    top: 15%;
    right: 12%;
    bottom: -7%;
    left: 12%;
    z-index: 1;
    background: rgba(195, 151, 58, 0.28);
    filter: blur(70px);
    pointer-events: none;
}

.resumen-video-note {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.resumen-video-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.resumen-video-light-one {
    top: -180px;
    left: -140px;
    width: 500px;
    height: 500px;
    background: rgba(201, 164, 82, 0.12);
}

.resumen-video-light-two {
    right: -180px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    background: rgba(53, 119, 104, 0.22);
}


/* INTRODUCCIÓN */

.resumen-introduction {
    padding: 110px 24px;
}

.resumen-text-container {
    width: min(900px, 100%);
    margin: 0 auto;
}

.resumen-text-container h2,
.resumen-duality-heading h2,
.resumen-creation-content h2,
.resumen-books-heading h2,
.resumen-closing h2 {
    margin: 18px 0 30px;
    color: #133e35;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.12;
}

.resumen-text-container p,
.resumen-creation-content p,
.resumen-books-heading p,
.resumen-closing p {
    color: #586a64;
    font-size: 1.04rem;
    line-height: 1.95;
}

.resumen-text-container .resumen-lead {
    color: #233e36;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    line-height: 1.65;
}


/* DUALIDAD */

.resumen-duality {
    padding: 105px 24px;
    background: #e9e3d7;
}

.resumen-duality-container,
.resumen-books-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.resumen-duality-heading,
.resumen-books-heading {
    width: min(820px, 100%);
    margin: 0 auto 60px;
    text-align: center;
}

.resumen-duality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.resumen-duality-card {
    padding: 45px 35px;
    border: 1px solid rgba(19, 62, 53, 0.12);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 18px 45px rgba(20, 56, 47, 0.06);
}

.resumen-card-symbol {
    display: block;
    margin-bottom: 28px;
    color: #c49a43;
    font-size: 2.2rem;
}

.resumen-duality-card h3 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 400;
}

.resumen-duality-card p {
    margin: 0;
    color: #61706b;
    line-height: 1.85;
}


/* CREACIÓN */

.resumen-creation {
    padding: 110px 24px;
    background: #f7f3ea;
}

.resumen-creation-container {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    align-items: center;
    gap: clamp(50px, 8vw, 100px);
    width: min(1150px, 100%);
    margin: 0 auto;
}

.resumen-love-quote {
    position: relative;
    margin: 0;
    padding: 55px 45px;
    background: #173d34;
    box-shadow: 0 30px 65px rgba(16, 52, 43, 0.2);
}

.resumen-quote-mark {
    display: block;
    height: 65px;
    color: #cba451;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    line-height: 1;
}

.resumen-love-quote p {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.55;
}


/* LIBROS */

.resumen-books {
    padding: 110px 24px;
    background: #e8e2d6;
}

.resumen-books-list {
    display: grid;
    gap: 25px;
}

.resumen-book-item {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 35px;
    padding: 45px;
    border: 1px solid rgba(20, 62, 52, 0.12);
    background: rgba(255, 255, 255, 0.72);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.resumen-book-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(20, 57, 48, 0.1);
}

.resumen-book-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: rgba(179, 134, 46, 0.75);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4rem;
}

.resumen-book-content h3 {
    margin: 14px 0 18px;
    color: #163d34;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 400;
}

.resumen-book-content p {
    margin: 0 0 14px;
    color: #60706a;
    line-height: 1.85;
}

.resumen-book-featured {
    border-color: rgba(190, 143, 47, 0.48);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.84),
            rgba(245, 234, 207, 0.9)
        );
}


/* CIERRE */

.resumen-closing {
    padding: 115px 24px;
    text-align: center;
    background: #143a31;
}

.resumen-closing-container {
    width: min(850px, 100%);
    margin: 0 auto;
}

.resumen-closing h2 {
    color: #ffffff;
}

.resumen-closing p {
    color: rgba(255, 255, 255, 0.72);
}

.resumen-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 45px;
}

.resumen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 15px 28px;
    border: 1px solid #c69c45;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.resumen-button:hover {
    transform: translateY(-3px);
}

.resumen-button-primary {
    background: #c69c45;
    color: #ffffff;
}

.resumen-button-primary:hover {
    background: #ad8332;
    color: #ffffff;
}

.resumen-button-secondary {
    color: #ffffff;
}

.resumen-button-secondary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #173d34;
}


/* TABLETAS */

@media (max-width: 900px) {

    .resumen-duality-grid {
        grid-template-columns: 1fr;
    }

    .resumen-creation-container {
        grid-template-columns: 1fr;
    }

}


/* CELULARES */

@media (max-width: 650px) {

    .resumen-video-section {
        padding: 115px 16px 75px;
    }

    .resumen-introduction,
    .resumen-duality,
    .resumen-creation,
    .resumen-books,
    .resumen-closing {
        padding: 75px 20px;
    }

    .resumen-book-item {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 35px 25px;
    }

    .resumen-book-number {
        justify-content: flex-start;
        font-size: 3rem;
    }

    .resumen-love-quote {
        padding: 45px 30px;
    }

    .resumen-actions {
        flex-direction: column;
    }

    .resumen-button {
        width: 100%;
    }

}