/* =========================================================
   FUENTES
========================================================= */

        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');


        /* =========================================================
   VARIABLES
========================================================= */

        :root {

            --crema: #f8f4ed;
            --papel: #fffdf9;
            --verde: #607c6b;
            --verde-profundo: #314b3e;
            --verde-claro: #dce7df;
            --salvia: #a9bcae;

            --beige: #e9ddcd;
            --arena: #d6c4ad;

            --texto: #28322d;
            --texto-suave: #68736c;

            --blanco: #ffffff;

            --sombra: 0 25px 70px rgba(49, 75, 62, .10);

            --serif: 'Cormorant Garamond', Georgia, serif;
            --sans: 'DM Sans', Arial, sans-serif;

        }


        /* =========================================================
   RESET
========================================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {

            background: var(--crema);

            color: var(--texto);

            font-family: var(--sans);

            line-height: 1.7;

        }


        /* =========================================================
   BARRA SUPERIOR
========================================================= */

        .nav {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            height: 70px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 6%;

            background: rgba(248, 244, 237, .88);

            backdrop-filter: blur(14px);

            border-bottom: 1px solid rgba(49, 75, 62, .08);

            z-index: 1000;

        }


        .nav-brand {

            font-family: var(--serif);

            font-size: 22px;

            font-style: italic;

            color: var(--verde-profundo);

        }


        .nav-links {

            display: flex;

            gap: 28px;

            list-style: none;

        }


        .nav-links a {

            color: var(--texto-suave);

            text-decoration: none;

            font-size: 11px;

            letter-spacing: 1px;

            text-transform: uppercase;

            transition: .3s;

        }


        .nav-links a:hover {

            color: var(--verde);

        }


        /* =========================================================
   BOTÓN MENÚ MÓVIL
========================================================= */

        .menu-mobile {

            display: none;

            border: none;

            background: none;

            font-size: 24px;

            color: var(--verde-profundo);

        }


        /* =========================================================
   PORTADA
========================================================= */

        .cover {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 110px 8% 70px;
           position: relative;
            overflow: hidden;
            background:

                radial-gradient(circle at 15% 20%,
                    rgba(169, 188, 174, .35),
                    transparent 28%),
                radial-gradient(circle at 85% 80%,
                    rgba(233, 221, 205, .6),
                    transparent 32%),

                var(--crema);

        }


        /* detalles decorativos */

        .cover::before {

            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            border: 1px solid rgba(96, 124, 107, .18);

            border-radius: 50%;

            top: -180px;
            left: -150px;

        }


        .cover::after {

            content: "";

            position: absolute;

            width: 600px;
            height: 600px;

            border: 1px solid rgba(96, 124, 107, .12);

            border-radius: 50%;

            right: -300px;
            bottom: -280px;

        }


        .cover-inner {

            width: min(1100px, 100%);

            display: grid;

            grid-template-columns: 1fr 1fr;

            align-items: center;

            gap: 80px;

            position: relative;

            z-index: 2;

        }


        /* =========================================================
   LOGO
========================================================= */

        .logo-container {

            width: 300px;

            height: 300px;

            margin: auto;

            position: relative;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        /* círculos */

        .logo-ring {

            position: absolute;

            width: 280px;

            height: 280px;

            border-radius: 50%;

            border: 1px solid rgba(96, 124, 107, .35);

        }


        .logo-ring.inner {

            width: 235px;

            height: 235px;

            border-color: rgba(96, 124, 107, .18);

        }


        /* muñequitos */

        .person {

            position: absolute;

            width: 67px;

            height: 67px;

            border-radius: 50%;

            background: var(--verde);

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 8px 25px rgba(49, 75, 62, .16);

        }


        .person::before {

            content: "";

            width: 16px;
            height: 16px;

            border-radius: 50%;

            background: #f8f4ed;

            position: absolute;

            top: 14px;

        }


        .person::after {

            content: "";

            width: 35px;
            height: 20px;

            border-radius: 20px 20px 12px 12px;

            background: #f8f4ed;

            position: absolute;

            bottom: 10px;

        }


        .person.one {
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
        }


        .person.two {
            right: 5px;
            top: 50%;

            transform: translateY(-50%);
        }


        .person.three {

            bottom: 5px;
            left: 50%;

            transform: translateX(-50%);

        }


        .person.four {

            left: 5px;
            top: 50%;

            transform: translateY(-50%);

        }


        /* corazón */

        .heart {

            position: relative;

            z-index: 5;

            width: 75px;
            height: 75px;

            background: var(--beige);

            transform: rotate(-45deg);

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 12px 35px rgba(49, 75, 62, .14);

        }


        .heart::before,
        .heart::after {

            content: "";

            position: absolute;

            width: 75px;
            height: 75px;

            background: var(--beige);

            border-radius: 50%;

        }


        .heart::before {

            top: -38px;
            left: 0;

        }


        .heart::after {

            left: 38px;
            top: 0;

        }


        .heart span {

            position: relative;

            z-index: 5;

            transform: rotate(45deg);

            color: var(--verde-profundo);

            font-family: var(--serif);

            font-size: 31px;

            font-style: italic;

        }


        /* =========================================================
   TEXTO PORTADA
========================================================= */

        .cover-text {

            text-align: left;

        }


        .kicker {

            color: var(--verde);

            font-size: 11px;

            letter-spacing: 4px;

            text-transform: uppercase;

            font-weight: 600;

            margin-bottom: 20px;

        }


        .cover-title {

            font-family: var(--serif);

            font-weight: 500;

            font-size: clamp(65px, 8vw, 112px);

            line-height: .78;

            letter-spacing: -4px;

            color: var(--verde-profundo);

        }


        .cover-title em {

            display: block;

            font-weight: 400;

            font-size: .78em;

            margin-left: 55px;

            margin-top: 15px;

            color: var(--verde);

        }


        .cover-subtitle {

            margin-top: 38px;

            max-width: 510px;

            font-family: var(--serif);

            font-size: 23px;

            font-style: italic;

            line-height: 1.3;

            color: var(--texto-suave);

        }


        .cover-author {

            margin-top: 45px;

            padding-top: 22px;

            border-top: 1px solid rgba(49, 75, 62, .18);

            width: 330px;

        }


        .cover-author strong {

            display: block;

            font-family: var(--serif);

            font-size: 22px;

            font-weight: 600;

            color: var(--verde-profundo);

        }


        .cover-author span {

            display: block;

            font-size: 10px;

            letter-spacing: 2px;

            text-transform: uppercase;

            color: var(--texto-suave);

            margin-top: 4px;

        }


        /* =========================================================
   INDICADOR
========================================================= */

        .scroll-note {

            position: absolute;

            bottom: 25px;

            left: 50%;

            transform: translateX(-50%);

            font-size: 9px;

            letter-spacing: 3px;

            text-transform: uppercase;

            color: var(--texto-suave);

        }


        /* =========================================================
   ESTRUCTURA DE LIBRO
========================================================= */

        .book-section {

            padding: 120px 8%;

            position: relative;

        }


        .book-section:nth-child(even) {

            background: var(--papel);

        }


        .section-inner {

            width: min(1050px, 100%);

            margin: auto;

        }


        /* =========================================================
   ENCABEZADOS
========================================================= */

        .section-number {

            font-family: var(--serif);

            font-size: 15px;

            color: var(--verde);

            font-style: italic;

            margin-bottom: 8px;

        }


        .section-title {

            font-family: var(--serif);

            font-weight: 500;

            font-size: clamp(48px, 6vw, 76px);

            line-height: .95;

            letter-spacing: -2px;

            color: var(--verde-profundo);

        }


        .section-line {

            width: 70px;

            height: 1px;

            background: var(--verde);

            margin: 25px 0 40px;

        }


        /* =========================================================
   CARTA AL LECTOR
========================================================= */

        .letter {

            max-width: 800px;

            margin: auto;

        }


        .letter-opening {

            font-family: var(--serif);

            font-size: 32px;

            font-style: italic;

            color: var(--verde);

            margin-bottom: 30px;

        }


        .letter p {

            font-family: var(--serif);

            font-size: 21px;

            line-height: 1.65;

            margin-bottom: 22px;

            color: #455149;

        }


        .signature {

            margin-top: 40px;

            font-family: var(--serif);

            font-size: 28px;

            font-style: italic;

            color: var(--verde-profundo);

        }


        /* =========================================================
   ÍNDICE
========================================================= */

        .index {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 1px;

            background: rgba(49, 75, 62, .12);

            border: 1px solid rgba(49, 75, 62, .12);

        }


        .index-item {

            background: var(--papel);

            padding: 28px;

            text-decoration: none;

            color: var(--texto);

            display: flex;

            align-items: center;

            gap: 22px;

            transition: .3s;

        }


        .index-item:hover {

            background: var(--verde-claro);

            transform: translateY(-3px);

        }


        .index-num {

            font-family: var(--serif);

            font-size: 27px;

            font-style: italic;

            color: var(--verde);

        }


        .index-text strong {

            display: block;

            font-family: var(--serif);

            font-size: 22px;

            font-weight: 600;

        }


        .index-text span {

            display: block;

            font-size: 10px;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            color: var(--texto-suave);

            margin-top: 3px;

        }


        /* =========================================================
   INTRODUCCIÓN
========================================================= */

        .intro {

            display: grid;

            grid-template-columns: .7fr 1.3fr;

            gap: 80px;

            align-items: start;

        }


        .intro-quote {

            font-family: var(--serif);

            font-size: 45px;

            line-height: 1;

            font-style: italic;

            color: var(--verde);

        }


        .intro-text p {

            font-family: var(--serif);

            font-size: 21px;

            line-height: 1.65;

            color: #455149;

            margin-bottom: 25px;

        }


        /* =========================================================
   CAPÍTULO
========================================================= */

        .chapter {

            padding: 140px 8%;

            background:

                linear-gradient(120deg,
                    #f8f4ed,
                    #edf3ee);

        }


        .chapter-header {

            display: grid;

            grid-template-columns: 160px 1fr;

            gap: 50px;

            align-items: start;

            margin-bottom: 70px;

        }


        .chapter-label {

            font-family: var(--serif);

            font-size: 19px;

            font-style: italic;

            color: var(--verde);

            padding-top: 12px;

        }


        .chapter-title {

            font-family: var(--serif);

            font-size: clamp(48px, 6vw, 82px);

            line-height: .92;

            font-weight: 500;

            color: var(--verde-profundo);

        }


        .chapter-content {

            width: min(800px, 100%);

            margin: auto;

        }


        .chapter-content p {

            font-family: var(--serif);

            font-size: 22px;

            line-height: 1.7;

            margin-bottom: 30px;

            color: #455149;

        }


        .dropcap:first-letter {

            float: left;

            font-family: var(--serif);

            font-size: 82px;

            line-height: .72;

            padding-right: 10px;

            color: var(--verde);

        }


        /* =========================================================
   TARJETAS DE CONCEPTOS
========================================================= */

        .concepts {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

            margin-top: 60px;

        }


        .concept {

            padding: 35px 28px;

            background: rgba(255, 255, 255, .65);

            border: 1px solid rgba(49, 75, 62, .10);

            min-height: 250px;

        }


        .concept-symbol {

            font-family: var(--serif);

            font-size: 40px;

            color: var(--verde);

            font-style: italic;

        }


        .concept h3 {

            font-family: var(--serif);

            font-size: 27px;

            margin: 15px 0 10px;

            color: var(--verde-profundo);

        }


        .concept p {

            font-family: var(--sans);

            font-size: 13px;

            line-height: 1.7;

            color: var(--texto-suave);

        }


        /* =========================================================
   FRASE DESTACADA
========================================================= */

        .quote-section {

            padding: 150px 8%;

            background: var(--verde-profundo);

            color: white;

            text-align: center;

            position: relative;

            overflow: hidden;

        }


        .quote-section::before {

            content: "“";

            position: absolute;

            font-family: var(--serif);

            font-size: 300px;

            color: rgba(255, 255, 255, .04);

            top: -80px;

            left: 5%;

        }


        .big-quote {

            width: min(850px, 100%);

            margin: auto;

            position: relative;

            z-index: 2;

        }


        .big-quote p {

            font-family: var(--serif);

            font-size: clamp(38px, 5vw, 65px);

            line-height: 1.05;

            font-style: italic;

        }


        .big-quote span {

            display: block;

            margin-top: 30px;

            font-family: var(--sans);

            font-size: 10px;

            letter-spacing: 3px;

            text-transform: uppercase;

            color: var(--salvia);

        }


        /* =========================================================
   OBJETIVOS
========================================================= */

        .objectives {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 20px;

        }


        .objective {

            padding: 30px;

            border-left: 3px solid var(--verde);

            background: var(--papel);

        }


        .objective-number {

            font-family: var(--serif);

            font-size: 20px;

            font-style: italic;

            color: var(--verde);

        }


        .objective h3 {

            font-family: var(--serif);

            font-size: 27px;

            margin: 8px 0;

        }


        .objective p {

            font-size: 13px;

            color: var(--texto-suave);

        }


        /* =========================================================
   ALCANCE
========================================================= */

        .reach {

            display: flex;

            align-items: center;

            gap: 50px;

            padding: 55px;

            background: var(--verde-claro);

        }


        .reach-circle {

            min-width: 160px;

            height: 160px;

            border-radius: 50%;

            border: 1px solid var(--verde);

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            font-family: var(--serif);

            font-size: 25px;

            font-style: italic;

            color: var(--verde-profundo);

        }


        .reach-text h3 {

            font-family: var(--serif);

            font-size: 35px;

            color: var(--verde-profundo);

        }


        .reach-text p {

            margin-top: 10px;

            font-size: 14px;

            color: #536158;

        }


        /* =========================================================
   CIERRE
========================================================= */

        .closing {

            min-height: 90vh;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding: 100px 8%;

            background:

                radial-gradient(circle,
                    rgba(169, 188, 174, .3),
                    transparent 50%),

                var(--crema);

        }


        .closing-inner {

            max-width: 850px;

        }


        .closing-small {

            font-size: 10px;

            text-transform: uppercase;

            letter-spacing: 4px;

            color: var(--verde);

            margin-bottom: 25px;

        }


        .closing h2 {

            font-family: var(--serif);

            font-size: clamp(55px, 8vw, 100px);

            line-height: .85;

            font-weight: 500;

            color: var(--verde-profundo);

        }


        .closing h2 em {

            color: var(--verde);

            font-weight: 400;

        }


        .closing p {

            font-family: var(--serif);

            font-size: 25px;

            font-style: italic;

            line-height: 1.4;

            color: var(--texto-suave);

            margin: 40px auto;

            max-width: 700px;

        }


        .closing-author {

            font-family: var(--serif);

            font-size: 28px;

            color: var(--verde-profundo);

            font-style: italic;

        }


        /* =========================================================
   PIE
========================================================= */

        footer {

            padding: 40px 8%;

            background: var(--verde-profundo);

            color: white;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }


        footer strong {

            font-family: var(--serif);

            font-size: 22px;

            font-style: italic;

        }


        footer span {

            font-size: 10px;

            letter-spacing: 1px;

            color: var(--salvia);

        }


        /* =========================================================
   ANIMACIONES
========================================================= */

        .reveal {

            opacity: 0;

            transform: translateY(30px);

            transition:

                opacity .8s ease,

                transform .8s ease;

        }


        .reveal.visible {

            opacity: 1;

            transform: translateY(0);

        }


        /* =========================================================
   RESPONSIVE
========================================================= */

        @media(max-width:850px) {

            .nav {

                padding: 0 20px;

            }

            .nav-links {

                display: none;

            }

            .menu-mobile {

                display: block;

            }

            .cover-inner {

                grid-template-columns: 1fr;

                gap: 35px;

                text-align: center;

            }

            .cover-text {

                text-align: center;

                order: 1;

            }

            .logo-container {

                order: 0;

                width: 230px;
                height: 230px;

            }

            .logo-ring {

                width: 220px;
                height: 220px;

            }

            .logo-ring.inner {

                width: 185px;
                height: 185px;

            }

            .cover-title em {

                margin-left: 0;

            }

            .cover-author {

                margin-left: auto;
                margin-right: auto;

            }

            .intro {

                grid-template-columns: 1fr;

                gap: 30px;

            }

            .chapter-header {

                grid-template-columns: 1fr;

                gap: 10px;

            }

            .concepts {

                grid-template-columns: 1fr;

            }

            .objectives {

                grid-template-columns: 1fr;

            }

            .index {

                grid-template-columns: 1fr;

            }

            .reach {

                flex-direction: column;

                text-align: center;

            }

            footer {

                flex-direction: column;

                gap: 10px;

                text-align: center;

            }

        }


        @media(max-width:500px) {

            .book-section,
            .chapter {

                padding: 90px 22px;

            }

            .cover {

                padding-left: 22px;
                padding-right: 22px;

            }

            .cover-title {

                font-size: 62px;

            }

            .cover-subtitle {

                font-size: 20px;

            }

            .letter p,
            .intro-text p,
            .chapter-content p {

                font-size: 19px;

            }

        }