/* ==========================================================
   YOU SEEM PRETTY SAD FOR A GIRL SO IN LOVE
   Main Stylesheet
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#f6efe9;
    font-family:"Nunito",sans-serif;
    color:#4b3d3d;

    background-image:
    radial-gradient(circle at top left,#ffffff55 0%,transparent 25%),
    radial-gradient(circle at bottom right,#ffd7e355 0%,transparent 25%);

}

/* =======================
      MAIN CONTAINER
======================= */

.desk{

    width:100%;
    display:flex;
    justify-content:center;
    padding:45px;

}

.container{

    width:1180px;

    background:#fffdfb;

    border:2px solid #efd7dc;

    border-radius:18px;

    overflow:hidden;

    box-shadow:

    0 20px 45px rgba(0,0,0,.12);

}

/* =======================
         HEADER
======================= */

header{

    width:100%;
    height:270px;

    overflow:hidden;

}

.banner{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

/* =======================
       NAVIGATION
======================= */

nav{

    background:#f7dbe3;

    display:flex;

    justify-content:center;

    gap:45px;

    padding:18px;

    border-top:2px solid #efd7dc;

    border-bottom:2px solid #efd7dc;

}

nav a{

    text-decoration:none;

    color:#684f58;

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    transition:.35s;

}

nav a:hover{

    color:#b56576;

}

.active{

    color:#a34f68;

}

/* =======================
        CONTENT
======================= */

.wrapper{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:30px;

    padding:35px;

}

/* =======================
        SIDEBAR
======================= */

aside{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* =======================
          BOXES
======================= */

.box{

    background:white;

    border:2px solid #efd7dc;

    border-radius:16px;

    padding:20px;

    box-shadow:

    0 8px 18px rgba(0,0,0,.08);

}

/* =======================
        HEADINGS
======================= */

h1,h2,h3{

    font-family:"Cormorant Garamond",serif;

    color:#7d4859;

}

h1{

    font-size:45px;

    margin-bottom:18px;

}

h2{

    font-size:30px;

    margin-bottom:15px;

}

p{

    line-height:1.8;

    margin-bottom:15px;

}

/* =======================
      CASSETTE
======================= */

.cassette{

    display:block;

    text-align:center;

}

.cassette img{

    width:190px;

    transition:.45s;

}

.cassette img:hover{

    transform:

    scale(1.08)

    rotate(-4deg);

}

/* =======================
      SOUNDTRACK
======================= */

.soundtrack ul{

    list-style:none;

}

.soundtrack li{

    padding:7px 0;

    border-bottom:1px dashed #ecd3d8;

}

/* =======================
        FOOTER
======================= */

footer{

    background:#f7dbe3;

    text-align:center;

    padding:20px;

    font-size:15px;

    color:#6f5460;

} 

/* ==========================================================
   HOME — NOTEBOOK AND SCRAPBOOK DESIGN
   ========================================================== */

body {
    background-color: #e9ced5;
    background-image:
        linear-gradient(rgba(255, 248, 249, 0.38), rgba(255, 248, 249, 0.38)),
        url("../images/pink-background.png");
    background-repeat: repeat;
    background-size: 700px auto;
    background-attachment: fixed;
}

.container {
    position: relative;
    width: min(1180px, 100%);
    background: #f9edf0;
    border: 1px solid rgba(116, 68, 81, 0.25);
    border-radius: 8px;
    overflow: visible;
    box-shadow:
        0 25px 65px rgba(75, 44, 53, 0.24),
        0 3px 8px rgba(75, 44, 53, 0.12);
}

/* ENCABEZADO */

.home-header {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 245px;
    height: auto;
    padding: 35px;
    overflow: hidden;
    background:
        linear-gradient(
            rgba(97, 52, 67, 0.15),
            rgba(97, 52, 67, 0.22)
        ),
        url("../images/floral-panel.png") center / cover;
}

.home-header::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

.title-banner {
    position: relative;
    z-index: 1;
    width: min(800px, 90%);
    padding: 26px 35px;
    text-align: center;
    background: rgba(255, 250, 249, 0.86);
    border: 1px solid rgba(120, 70, 83, 0.32);
    box-shadow:
        0 12px 28px rgba(74, 42, 51, 0.18),
        inset 0 0 0 5px rgba(255, 255, 255, 0.42);
    transform: rotate(-0.5deg);
}

.title-banner h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 0.93;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #713e50;
}

.small-title {
    margin: 0 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #936678;
}

/* NAVEGACIÓN */

.main-navigation {
    position: relative;
    z-index: 5;
    gap: 18px;
    padding: 12px 20px;
    background: #f2d4dc;
    border-top: 1px solid #cfa7b2;
    border-bottom: 1px solid #cfa7b2;
}

.main-navigation a {
    position: relative;
    padding: 7px 18px;
    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: lowercase;
    color: #714b58;
}

.main-navigation a::after {
    content: "♡";
    position: absolute;
    right: -9px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
    opacity: 1;
}

/* DISTRIBUCIÓN DEL HOME */

.home-layout {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr) 210px;
    align-items: start;
    gap: 24px;
    padding: 30px;
    background:
        linear-gradient(
            rgba(255, 251, 249, 0.5),
            rgba(255, 251, 249, 0.5)
        );
}

.home-sidebar,
.home-center,
.home-decorations {
    min-width: 0;
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* TARJETAS DE PAPEL */

.paper-card {
    position: relative;
    padding: 20px 18px;
    background:
        linear-gradient(
            rgba(255, 253, 249, 0.9),
            rgba(255, 253, 249, 0.9)
        ),
        url("../images/notebook-paper.png") center / cover;
    border: 1px solid #d5b8be;
    border-radius: 3px;
    box-shadow:
        4px 7px 0 rgba(114, 69, 82, 0.08),
        0 8px 18px rgba(75, 44, 53, 0.12);
}

.paper-card::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 72px;
    height: 19px;
    background: rgba(223, 191, 170, 0.7);
    transform: translateX(-50%) rotate(-2deg);
    box-shadow: 0 1px 2px rgba(65, 38, 44, 0.15);
}

.paper-card h2 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 28px;
    color: #754657;
}

/* CASSETTE */

.spotify-card {
    text-align: center;
}

.cassette {
    display: block;
    color: #764b59;
    text-decoration: none;
}

.cassette img {
    display: block;
    width: min(190px, 100%);
    margin: 8px auto;
    filter: drop-shadow(0 10px 8px rgba(61, 35, 43, 0.18));
    transition:
        transform 0.38s ease,
        filter 0.38s ease;
}

.cassette span {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 12px;
    border: 1px dashed #b98190;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    background: rgba(255, 245, 246, 0.75);
}

.cassette:hover img {
    transform: translateY(-6px) rotate(-3deg) scale(1.06);
    filter: drop-shadow(0 16px 10px rgba(61, 35, 43, 0.23));
}

/* LISTA DE CANCIONES */

.tracklist {
    list-style-position: inside;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.75;
    color: #694d55;
}

.tracklist li {
    padding: 3px 0;
    border-bottom: 1px dashed rgba(143, 91, 107, 0.25);
}

.station-name {
    margin-bottom: 12px;
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    color: #956576;
}

.second-station {
    margin-top: 22px;
}

/* PÁGINAS DE CUADERNO */

.home-center {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.notebook-section {
    position: relative;
    min-height: 365px;
    padding: 44px 42px 42px 72px;
    background:
        linear-gradient(
            rgba(255, 253, 247, 0.86),
            rgba(255, 253, 247, 0.86)
        ),
        url("../images/notebook-paper.png") center / cover;
    border: 1px solid #d3bbc0;
    box-shadow:
        8px 11px 0 rgba(105, 62, 74, 0.07),
        0 16px 27px rgba(73, 43, 51, 0.13);
    transform: rotate(0.3deg);
}

.notebook-section:nth-child(even) {
    transform: rotate(-0.35deg);
}

.notebook-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 47px;
    width: 1px;
    background: rgba(210, 111, 129, 0.4);
}

.notebook-section::after {
    content: "";
    position: absolute;
    top: -11px;
    right: 54px;
    width: 105px;
    height: 23px;
    background: rgba(225, 196, 173, 0.65);
    transform: rotate(2deg);
}

.notebook-text {
    position: relative;
    z-index: 1;
}

.notebook-text h2 {
    margin-bottom: 20px;
    font-size: clamp(29px, 3.5vw, 42px);
    line-height: 1;
    color: #704253;
}

.notebook-text p {
    margin-bottom: 17px;
    font-family: "Cormorant Garamond", serif;
    font-size: 19px;
    line-height: 1.55;
    color: #4e4043;
}

/* DECORACIONES DERECHAS */

.home-decorations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
}

.illustration-frame {
    position: relative;
    width: 100%;
    padding: 9px 9px 26px;
    background: #fffaf6;
    border: 1px solid #cdb3b8;
    box-shadow: 5px 8px 18px rgba(75, 44, 53, 0.17);
    transform: rotate(2deg);
    transition: transform 0.35s ease;
}

.illustration-frame:hover {
    transform: rotate(0deg) translateY(-5px);
}

.illustration-frame img {
    display: block;
    width: 100%;
}

.girl-decoration {
    width: 90%;
    filter: drop-shadow(0 12px 9px rgba(74, 41, 50, 0.18));
}

.girl-decoration img {
    display: block;
    width: 100%;
}

.ticket-stack {
    position: relative;
    width: 100%;
    min-height: 170px;
}

.ticket {
    position: absolute;
    left: 50%;
    width: 92%;
    filter: drop-shadow(0 8px 6px rgba(71, 41, 48, 0.14));
    transition: transform 0.3s ease;
}

.ticket-one {
    top: 5px;
    transform: translateX(-50%) rotate(-5deg);
}

.ticket-two {
    top: 73px;
    transform: translateX(-50%) rotate(5deg);
}

.ticket-one:hover {
    transform: translateX(-50%) translateY(-5px) rotate(-2deg);
}

.ticket-two:hover {
    transform: translateX(-50%) translateY(-5px) rotate(2deg);
}

/* PANEL INFERIOR */

.bottom-panel {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-top: 1px solid #d6b4bd;
    border-bottom: 1px solid #d6b4bd;
}

.bottom-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.58;
}

.bottom-message {
    position: relative;
    z-index: 1;
    width: min(650px, 85%);
    padding: 24px;
    text-align: center;
    background: rgba(255, 248, 246, 0.86);
    border: 1px solid rgba(123, 71, 87, 0.3);
}

.bottom-message h2 {
    margin-bottom: 7px;
    font-size: 34px;
}

.bottom-message p {
    margin: 0;
}

/* FOOTER */

footer {
    padding: 18px;
    background: #eacbd4;
    border-top: 1px solid #cba4af;
}

footer p {
    margin: 2px 0;
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .home-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .home-decorations {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }

    .ticket-stack {
        min-height: 180px;
    }
}

@media (max-width: 720px) {
    .home-layout {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .home-center {
        order: 1;
    }

    .home-sidebar {
        order: 2;
    }

    .home-decorations {
        order: 3;
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .notebook-section {
        min-height: auto;
        padding: 38px 25px 30px 48px;
    }

    .notebook-section::before {
        left: 31px;
    }

    .home-sidebar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .illustration-frame,
    .girl-decoration {
        width: min(320px, 90%);
    }

    .ticket-stack {
        width: min(300px, 100%);
    }
} 

/* ==========================================================
   HOME HEADER — FINAL BANNER
   ========================================================== */

.home-header {
    min-height: 285px;
    padding: 35px 70px;
    background:
        linear-gradient(
            rgba(255, 245, 247, 0.48),
            rgba(225, 183, 195, 0.36)
        ),
        url("../imagenes/floral-panel.png") center 42% / cover;
}

.home-header::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px dashed rgba(117, 67, 82, 0.34);
    pointer-events: none;
}

.title-banner {
    width: min(850px, 88%);
    padding: 30px 55px 32px;
    background:
        linear-gradient(
            rgba(255, 252, 250, 0.92),
            rgba(250, 236, 239, 0.9)
        );
    border: 1px solid rgba(126, 74, 90, 0.38);
    border-radius: 2px;
    box-shadow:
        10px 13px 0 rgba(111, 65, 78, 0.08),
        0 18px 38px rgba(72, 40, 49, 0.19),
        inset 0 0 0 6px rgba(255, 255, 255, 0.46);
    transform: rotate(-0.4deg);
}

.title-banner::before,
.title-banner::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 92px;
    height: 24px;
    background: rgba(221, 187, 164, 0.72);
    box-shadow: 0 2px 3px rgba(77, 42, 51, 0.13);
}

.title-banner::before {
    left: 54px;
    transform: rotate(-4deg);
}

.title-banner::after {
    right: 54px;
    transform: rotate(4deg);
}

.title-banner h1 {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(43px, 5.5vw, 73px);
    line-height: 0.92;
    letter-spacing: -2px;
    color: #713d51;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.title-banner h1 span {
    margin-top: 8px;
    font-style: italic;
    font-weight: 500;
    color: #986073;
}

.small-title {
    margin-bottom: 13px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4.5px;
    color: #89596b;
}

.banner-subtitle {
    margin: 18px 0 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: italic;
    letter-spacing: 0.7px;
    color: #76505d;
}

.header-decoration {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border: 1px solid rgba(124, 73, 88, 0.32);
    border-radius: 50%;
    background: rgba(255, 248, 247, 0.72);
    color: #a26078;
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    box-shadow: 0 9px 18px rgba(75, 42, 51, 0.13);
}

.header-decoration-left {
    left: 34px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
}

.header-decoration-right {
    right: 34px;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
}

@media (max-width: 720px) {
    .home-header {
        min-height: 250px;
        padding: 28px 20px;
    }

    .title-banner {
        width: 92%;
        padding: 26px 25px;
    }

    .title-banner h1 {
        font-size: clamp(37px, 10vw, 54px);
    }

    .header-decoration {
        display: none;
    }
}

/* ==========================================================
   MAIN NAVIGATION — FINAL STYLE
   ========================================================== */

.main-navigation {
    position: relative;
    z-index: 10;

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

    gap: 0;
    padding: 0 18px;

    background:
        linear-gradient(
            to bottom,
            rgba(248, 225, 231, 0.98),
            rgba(239, 205, 215, 0.98)
        );

    border-top: 1px solid #cda4b0;
    border-bottom: 1px solid #cda4b0;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 5px 12px rgba(86, 48, 59, 0.08);
}

.main-navigation a {
    position: relative;

    display: block;

    padding: 15px 30px;

    color: #75505d;
    text-decoration: none;

    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 600;

    letter-spacing: 1.2px;
    text-transform: lowercase;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.main-navigation a:not(:last-child)::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 1px;
    height: 20px;

    background: rgba(126, 79, 94, 0.2);

    transform: translateY(-50%);
}

.main-navigation a::after {
    content: "♡";

    position: absolute;
    left: 50%;
    bottom: 2px;

    color: #a45f77;
    font-size: 12px;

    opacity: 0;
    transform: translateX(-50%) translateY(5px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.main-navigation a:hover {
    color: #9a536c;

    background: rgba(255, 247, 249, 0.42);

    transform: translateY(-1px);
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.main-navigation a.active {
    color: #8d4961;
    background: rgba(255, 250, 250, 0.52);
}

/* Small decorative labels around the navigation */

.main-navigation::before,
.main-navigation::after {
    position: absolute;
    top: 50%;

    color: rgba(116, 70, 85, 0.45);

    font-family: "Cormorant Garamond", serif;
    font-size: 13px;
    font-style: italic;

    transform: translateY(-50%);
}

.main-navigation::before {
    content: "side a";

    left: 16px;
}

.main-navigation::after {
    content: "side b";

    right: 16px;
}

/* Responsive navigation */

@media (max-width: 850px) {
    .main-navigation::before,
    .main-navigation::after {
        display: none;
    }

    .main-navigation a {
        padding: 14px 20px;
    }
}

@media (max-width: 620px) {
    .main-navigation {
        padding: 8px;
    }

    .main-navigation a {
        flex: 1 1 50%;

        padding: 11px 8px;

        text-align: center;

        font-size: 11px;
    }

    .main-navigation a:not(:last-child)::before {
        display: none;
    }
}

/* ==========================================================
   OPEN NOTEBOOK — HOME CONTENT
   ========================================================== */

.open-notebook {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        42px
        minmax(0, 1.12fr);

    align-items: stretch;

    width: calc(100% - 56px);
    max-width: 1120px;

    margin: 38px auto 55px;

    filter:
        drop-shadow(0 22px 24px rgba(72, 42, 51, 0.17));
}

/* PÁGINAS */

.notebook-page {
    position: relative;
    min-width: 0;
    min-height: 840px;

    overflow: hidden;

    border: 1px solid #d7c4c2;

    background-color: #fffdf7;
    background-image:
        linear-gradient(
            90deg,
            transparent 0,
            transparent 54px,
            rgba(210, 103, 125, 0.25) 55px,
            transparent 56px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 31px,
            rgba(116, 139, 159, 0.16) 32px
        ),
        linear-gradient(
            rgba(255, 253, 248, 0.93),
            rgba(250, 244, 237, 0.93)
        ),
        url("../imagenes/notebook-paper.png");

    background-size:
        auto,
        auto,
        auto,
        cover;
}

.notebook-left {
    border-radius: 10px 2px 2px 10px;

    box-shadow:
        inset -16px 0 24px rgba(78, 51, 56, 0.08),
        inset 0 0 28px rgba(119, 81, 90, 0.04);

    transform: perspective(1100px) rotateY(1.8deg);
    transform-origin: right center;
}

.notebook-right {
    border-radius: 2px 10px 10px 2px;

    box-shadow:
        inset 16px 0 24px rgba(78, 51, 56, 0.08),
        inset 0 0 28px rgba(119, 81, 90, 0.04);

    transform: perspective(1100px) rotateY(-1.8deg);
    transform-origin: left center;
}

.notebook-page::before {
    content: "";

    position: absolute;
    inset: 13px;

    border: 1px dashed rgba(135, 87, 101, 0.18);

    pointer-events: none;
}

.notebook-page::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 22px;

    pointer-events: none;
}

.notebook-left::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            rgba(92, 58, 66, 0.12),
            transparent
        );
}

.notebook-right::after {
    left: 0;

    background:
        linear-gradient(
            to right,
            rgba(92, 58, 66, 0.12),
            transparent
        );
}

/* CONTENIDO DE LAS PÁGINAS */

.page-content {
    position: relative;
    z-index: 2;

    height: 100%;

    padding: 54px 48px 56px 74px;
}

.notebook-right .page-content {
    padding-left: 68px;
    padding-right: 58px;
}

/* AGUJEROS DEL PAPEL */

.page-holes {
    position: absolute;
    z-index: 5;

    top: 58px;
    bottom: 58px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.notebook-left .page-holes {
    right: 8px;
}

.notebook-right .page-holes {
    left: 8px;
}

.page-holes span {
    display: block;

    width: 13px;
    height: 13px;

    border: 1px solid rgba(86, 60, 63, 0.33);
    border-radius: 50%;

    background: #e5d9d3;

    box-shadow:
        inset 0 2px 3px rgba(63, 43, 46, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ESPIRAL */

.notebook-binding {
    position: relative;
    z-index: 8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    padding: 48px 0;

    background:
        linear-gradient(
            to right,
            rgba(80, 55, 60, 0.07),
            transparent 35%,
            transparent 65%,
            rgba(80, 55, 60, 0.07)
        );
}

.notebook-binding span {
    position: relative;

    display: block;

    width: 48px;
    height: 16px;

    border: 3px solid #a7a09d;
    border-left-color: #6f6967;
    border-right-color: #d5ceca;
    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 3px 3px rgba(62, 43, 47, 0.2);
}

/* ENCABEZADOS */

.notebook-heading {
    text-align: center;
}

.page-label {
    margin: 0 0 10px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #a0707f;
}

.notebook-page h2 {
    margin: 0 0 20px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 3.2vw, 48px);
    line-height: 0.98;

    color: #734153;
}

.notebook-page h3 {
    margin: 0 0 11px;

    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-style: italic;
    font-weight: 500;

    color: #936070;
}

.notebook-page p {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    line-height: 1.7;

    color: #514347;
}

.handwritten-note {
    margin-top: -8px;

    font-style: italic;

    color: #9b6d7c;
}

/* CASSETTE */

.notebook-cassette {
    position: relative;

    display: block;

    width: min(270px, 88%);
    margin: 24px auto 35px;

    text-align: center;
    text-decoration: none;
}

.notebook-cassette::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -13px;
    left: 50%;

    width: 95px;
    height: 25px;

    background: rgba(220, 187, 165, 0.67);

    transform: translateX(-50%) rotate(-3deg);
}

.notebook-cassette img {
    display: block;

    width: 100%;
    margin: 0;

    filter:
        drop-shadow(0 11px 8px rgba(66, 43, 48, 0.19));
}

.notebook-cassette span {
    display: inline-block;

    margin-top: 12px;
    padding: 5px 13px;

    border: 1px dashed #b67d8e;

    background: rgba(255, 250, 249, 0.7);

    color: #845365;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}

/* TRACKLIST */

.station-block {
    margin-top: 25px;
}

.second-side {
    margin-top: 34px;
    padding-top: 27px;

    border-top: 1px dashed rgba(132, 82, 98, 0.38);
}

.notebook-tracklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 20px;

    margin: 0;
    padding: 0;

    list-style-position: inside;

    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    line-height: 1.65;

    color: #5d4a50;
}

.notebook-tracklist li {
    border-bottom: 1px dotted rgba(128, 86, 98, 0.25);
}

/* TEXTO DE INTRODUCCIÓN */

.album-introduction,
.eurostar-section {
    position: relative;
}

.album-introduction p,
.eurostar-section p {
    margin-bottom: 16px;
}

.notebook-divider {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 30px 0;
}

.notebook-divider::before,
.notebook-divider::after {
    content: "";

    flex: 1;

    border-top: 1px dashed rgba(134, 85, 100, 0.37);
}

.notebook-divider span {
    color: #a05f75;
    font-size: 18px;
}

/* EUROSTAR */

.eurostar-section h2 {
    max-width: 540px;

    font-size: clamp(31px, 2.7vw, 42px);
}

.eurostar-section::before {
    content: "PARIS";

    position: absolute;
    top: -7px;
    right: -12px;

    padding: 8px 12px;

    border: 2px solid rgba(158, 94, 112, 0.32);
    border-radius: 50%;

    color: rgba(151, 84, 104, 0.4);

    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    transform: rotate(11deg);
}

/* POLAROID */

.notebook-polaroid {
    position: relative;

    width: min(235px, 70%);

    margin: 30px 0 0 auto;
    padding: 9px 9px 27px;

    border: 1px solid #d4c4c0;

    background: #fffaf5;

    box-shadow:
        5px 9px 17px rgba(68, 44, 49, 0.17);

    transform: rotate(3deg);

    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease;
}

.notebook-polaroid::before {
    content: "";

    position: absolute;

    top: -13px;
    left: 50%;

    width: 76px;
    height: 22px;

    background: rgba(221, 188, 164, 0.65);

    transform: translateX(-50%) rotate(-2deg);
}

.notebook-polaroid:hover {
    transform:
        translateY(-7px)
        rotate(0deg)
        scale(1.025);

    box-shadow:
        8px 16px 24px rgba(68, 44, 49, 0.21);
}

.notebook-polaroid img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
}

.notebook-polaroid figcaption {
    margin-top: 8px;

    text-align: center;

    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    font-style: italic;

    color: #805566;
}

/* VISTA PARA TABLET */

@media (max-width: 950px) {
    .open-notebook {
        grid-template-columns:
            minmax(0, 0.9fr)
            32px
            minmax(0, 1.1fr);

        width: calc(100% - 30px);
    }

    .page-content,
    .notebook-right .page-content {
        padding:
            48px
            35px
            50px
            52px;
    }

    .notebook-tracklist {
        grid-template-columns: 1fr;
    }
}

/* VISTA PARA CELULAR */

@media (max-width: 700px) {
    .open-notebook {
        display: flex;
        flex-direction: column;

        width: calc(100% - 24px);

        margin-top: 22px;

        filter:
            drop-shadow(0 14px 15px rgba(72, 42, 51, 0.14));
    }

    .notebook-page {
        min-height: auto;

        border-radius: 7px;

        transform: none;
    }

    .notebook-left {
        margin-bottom: 16px;
    }

    .notebook-binding {
        display: none;
    }

    .notebook-left .page-holes,
    .notebook-right .page-holes {
        display: none;
    }

    .page-content,
    .notebook-right .page-content {
        padding: 44px 27px 44px 44px;
    }

    .notebook-tracklist {
        grid-template-columns: 1fr 1fr;
    }

    .notebook-polaroid {
        width: min(240px, 85%);

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

@media (max-width: 430px) {
    .notebook-tracklist {
        grid-template-columns: 1fr;
    }

    .page-content,
    .notebook-right .page-content {
        padding: 40px 22px 40px 38px;
    }

    .notebook-page p {
        font-size: 17px;
    }
}

/* ==========================================================
   NOTEBOOK BINDING — CORRECTION
   ========================================================== */

.notebook-binding {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-rows: repeat(10, 1fr);
    align-items: center;
    justify-items: center;

    min-height: 840px;
    padding: 50px 0;

    background:
        linear-gradient(
            to right,
            rgba(90, 61, 67, 0.08),
            rgba(255, 255, 255, 0.08) 35%,
            rgba(255, 255, 255, 0.08) 65%,
            rgba(90, 61, 67, 0.08)
        );
}

.notebook-binding span {
    width: 50px;
    height: 15px;

    margin: 0;

    border: 3px solid #9d9694;
    border-left-color: #6f6967;
    border-right-color: #d6cfcb;
    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 2px 2px rgba(60, 42, 46, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    transform: none;
}

/* Hace que los agujeros coincidan mejor con los aros */

.page-holes {
    top: 62px;
    bottom: 62px;

    display: grid;
    grid-template-rows: repeat(8, 1fr);
    align-items: center;
}

.page-holes span {
    justify-self: center;
}

/* Corrige el centro visual del cuaderno */

.notebook-left .page-holes {
    right: 7px;
}

.notebook-right .page-holes {
    left: 7px;
}

/* ==========================================================
   NOTEBOOK TICKETS
   ========================================================== */

.notebook-tickets {
    position: relative;
    width: min(310px, 90%);
    height: 175px;
    margin: 30px 0 0 auto;
}

.notebook-ticket {
    position: absolute;
    left: 50%;
    display: block;
    width: 100%;
    filter: drop-shadow(0 8px 7px rgba(70, 43, 49, 0.16));
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.ticket-top {
    top: 0;
    transform: translateX(-50%) rotate(-4deg);
}

.ticket-bottom {
    top: 66px;
    transform: translateX(-50%) rotate(4deg);
}

.ticket-top:hover {
    transform: translateX(-50%) translateY(-6px) rotate(-1deg);
    filter: drop-shadow(0 13px 9px rgba(70, 43, 49, 0.21));
}

.ticket-bottom:hover {
    transform: translateX(-50%) translateY(-6px) rotate(1deg);
    filter: drop-shadow(0 13px 9px rgba(70, 43, 49, 0.21));
}

/* ==========================================================
   NOTEBOOK BINDING — FINAL ALIGNMENT
   ========================================================== */

.page-holes {
    display: none;
}

.notebook-binding {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    min-height: 100%;
    padding: 42px 0;

    background:
        linear-gradient(
            to right,
            rgba(100, 70, 76, 0.08),
            rgba(243, 220, 226, 0.92) 28%,
            rgba(243, 220, 226, 0.92) 72%,
            rgba(100, 70, 76, 0.08)
        );

    box-shadow:
        inset 7px 0 10px rgba(82, 55, 61, 0.06),
        inset -7px 0 10px rgba(82, 55, 61, 0.06);
}

.notebook-binding span {
    flex: 0 0 auto;

    width: 52px;
    height: 15px;
    margin: 0;

    border: 3px solid #9d9694;
    border-left-color: #686260;
    border-right-color: #d8d1ce;
    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 3px 3px rgba(58, 40, 44, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    transform: translateX(0);
}

/* ==========================================================
   CASSETTE POSITION — CORRECTION
   ========================================================== */

.notebook-cassette {
    width: min(285px, 92%);
    margin: 8px auto 24px;
}

.notebook-cassette img {
    width: 100%;
    margin: 0 auto;
}

.notebook-heading {
    margin-bottom: 8px;
}

.handwritten-note {
    margin-bottom: 6px;
}
.notebook-cassette {
    width: min(285px, 92%);
    margin: -8px auto 22px;
}
/* ==========================================================
   SCRAPBOOK DECORATIONS
   ========================================================== */

.scrapbook-decorations {
    position: absolute;
    z-index: 20;

    left: 0;
    right: 0;

    /*
       El valor coloca las decoraciones aproximadamente
       alrededor del cuaderno, debajo de la navegación.
    */
    top: 640px;

    height: 0;

    pointer-events: none;
}

/* =======================
       BRILLOS Y CORAZÓN
======================= */

.scrapbook-sparkle {
    position: absolute;

    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    border: 1px solid rgba(141, 80, 99, 0.25);
    border-radius: 50%;

    background: rgba(255, 248, 248, 0.83);

    color: #a26178;

    font-family: "Cormorant Garamond", serif;
    font-size: 23px;

    box-shadow:
        0 8px 16px rgba(75, 42, 51, 0.12),
        inset 0 0 0 4px rgba(255, 255, 255, 0.35);

    animation: scrapbook-float 4.5s ease-in-out infinite;
}

.sparkle-one {
    left: 20px;
    top: 75px;

    transform: rotate(-9deg);
}

.sparkle-two {
    right: 17px;
    top: 245px;

    animation-delay: -1.5s;

    transform: rotate(8deg);
}

.sparkle-three {
    right: 42px;
    top: 660px;

    width: 38px;
    height: 38px;

    font-size: 18px;

    animation-delay: -2.7s;
}

@keyframes scrapbook-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -6px;
    }
}

/* =======================
         CLIPS
======================= */

.paper-clip {
    position: absolute;

    width: 25px;
    height: 72px;

    border: 3px solid #aaa3a1;
    border-radius: 18px;

    filter: drop-shadow(2px 4px 2px rgba(60, 40, 45, 0.15));
}

.paper-clip::after {
    content: "";

    position: absolute;

    top: 7px;
    left: 5px;

    width: 10px;
    height: 48px;

    border: 2px solid #c4bcba;
    border-radius: 12px;
}

.clip-left {
    left: 52px;
    top: 365px;

    transform: rotate(-17deg);
}

.clip-right {
    right: 53px;
    top: 490px;

    transform: rotate(14deg);
}

/* =======================
       CINTA ADHESIVA
======================= */

.washi-tape {
    position: absolute;

    display: block;

    width: 115px;
    height: 27px;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(225, 187, 164, 0.74) 0,
            rgba(225, 187, 164, 0.74) 11px,
            rgba(237, 209, 190, 0.74) 11px,
            rgba(237, 209, 190, 0.74) 22px
        );

    opacity: 0.8;

    box-shadow:
        0 2px 3px rgba(69, 43, 49, 0.12);

    mix-blend-mode: multiply;
}

.tape-left {
    left: 13%;
    top: 20px;

    transform: rotate(-5deg);
}

.tape-right {
    right: 12%;
    top: 25px;

    transform: rotate(5deg);
}

/* =======================
    MOVIMIENTO DEL CUADERNO
======================= */

.notebook-left,
.notebook-right {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.open-notebook:hover .notebook-left {
    transform:
        perspective(1100px)
        rotateY(1deg)
        translateY(-2px);
}

.open-notebook:hover .notebook-right {
    transform:
        perspective(1100px)
        rotateY(-1deg)
        translateY(-2px);
}

/* Reduce movimiento para usuarios que lo prefieren */

@media (prefers-reduced-motion: reduce) {
    .scrapbook-sparkle {
        animation: none;
    }

    .notebook-left,
    .notebook-right {
        transition: none;
    }
}

/* Oculta decoraciones laterales cuando no hay espacio */

@media (max-width: 1260px) {
    .sparkle-one,
    .sparkle-two,
    .clip-left,
    .clip-right {
        display: none;
    }
}

@media (max-width: 700px) {
    .scrapbook-decorations {
        display: none;
    }
}

/* ==========================================================
   BOTTOM FLORAL PANEL — CORRECTION
   ========================================================== */

.bottom-panel {
    background:
        linear-gradient(
            rgba(251, 232, 237, 0.42),
            rgba(246, 215, 223, 0.56)
        ),
        url("../imagenes/floral-panel.png") center / cover;

    border-top: 1px solid #d3abb6;
    border-bottom: 1px solid #d3abb6;
}

.bottom-panel > img {
    display: none;
}

.bottom-message {
    box-shadow:
        7px 9px 0 rgba(111, 65, 78, 0.07),
        0 13px 25px rgba(72, 40, 49, 0.12);
}

/* ==========================================================
   THE UNRAVELED TOUR — POSTER WALL
   ========================================================== */

.tour-body {
    background-color: #e7d7d1;

    background-image:
        radial-gradient(
            circle at 18% 22%,
            rgba(255, 255, 255, 0.65),
            transparent 26%
        ),
        radial-gradient(
            circle at 82% 68%,
            rgba(215, 172, 184, 0.26),
            transparent 29%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(123, 91, 91, 0.025) 0,
            rgba(123, 91, 91, 0.025) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            #efe5df,
            #dbc7c3
        );
}

.tour-container {
    background: #e8dad5;
    overflow: hidden;
}

/* =======================
       TOUR HEADER
======================= */

.tour-header {
    position: relative;

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

    min-height: 270px;
    padding: 40px 25px;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255, 250, 246, 0.9),
            rgba(249, 238, 232, 0.92)
        );
}

.tour-header::before {
    content: "";

    position: absolute;
    inset: 22px;

    border: 1px dashed rgba(132, 82, 97, 0.27);
}

.tour-label {
    position: relative;
    z-index: 1;

    margin: 0 0 13px;

    color: #936071;

    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.tour-header h1 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #df779c;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 8vw, 102px);
    font-style: italic;
    font-weight: 500;

    line-height: 0.9;
    letter-spacing: -3px;

    transform: rotate(-1deg);

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.7);
}

.tour-artist {
    position: relative;
    z-index: 1;

    margin: 2px 0 0 250px;

    color: #282322;

    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-style: italic;
}

/* =======================
       POSTER WALL
======================= */

.poster-wall {
    position: relative;

    width: 100%;
    min-height: 1460px;

    padding: 55px;

    overflow: hidden;

    background-color: #e9ded8;

    background-image:
        linear-gradient(
            rgba(255, 251, 247, 0.25),
            rgba(211, 188, 184, 0.17)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(122, 91, 91, 0.025) 35px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 41px,
            rgba(122, 91, 91, 0.02) 42px
        );
}

.poster-wall::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at top,
            rgba(255, 255, 255, 0.54),
            transparent 56%
        ),
        radial-gradient(
            ellipse at bottom right,
            rgba(133, 85, 94, 0.14),
            transparent 52%
        );
}

/* =======================
     INTRODUCTION CARD
======================= */

.tour-intro-card {
    position: absolute;
    z-index: 6;

    top: 55px;
    left: 50%;

    width: min(760px, 77%);

    padding: 48px 65px;

    text-align: center;

    border: 13px solid #f3d8df;
    border-radius: 10px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.92),
            rgba(255, 252, 249, 0.94)
        ),
        url("../imagenes/floral-panel.png") center / cover;

    box-shadow:
        8px 13px 0 rgba(105, 66, 74, 0.08),
        0 20px 34px rgba(71, 47, 50, 0.18);

    transform:
        translateX(-50%)
        rotate(0.3deg);

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

.tour-intro-card::before {
    content: "";

    position: absolute;
    inset: 15px;

    border: 1px solid rgba(157, 102, 120, 0.15);
    border-radius: 4px;

    pointer-events: none;
}

.tour-intro-card:hover {
    transform:
        translateX(-50%)
        translateY(-7px)
        rotate(0deg);

    box-shadow:
        10px 20px 0 rgba(105, 66, 74, 0.07),
        0 28px 42px rgba(71, 47, 50, 0.22);
}

.tour-intro-card p {
    position: relative;
    z-index: 2;

    color: #3f3536;

    font-family: "Cormorant Garamond", serif;
    font-size: 21px;
    line-height: 1.55;
}

.tour-intro-lead {
    margin-bottom: 31px;

    font-size: 29px !important;
    font-style: italic;

    color: #6f4855 !important;
}

.intro-tape {
    position: absolute;
    z-index: 3;

    top: -22px;
    left: 50%;

    width: 190px;
    height: 36px;

    background: rgba(225, 210, 194, 0.85);

    box-shadow:
        0 2px 4px rgba(70, 43, 49, 0.13);

    transform:
        translateX(-50%)
        rotate(1deg);
}

/* =======================
       WALL POSTERS
======================= */

.wall-poster {
    position: absolute;
    z-index: 3;

    margin: 0;

    transition:
        transform 0.38s ease,
        filter 0.38s ease;
}

.wall-poster img {
    display: block;

    width: 100%;
    height: auto;

    box-shadow:
        0 13px 19px rgba(57, 40, 43, 0.24);

    filter:
        saturate(0.95)
        contrast(0.99);
}

.main-tour-poster {
    top: 510px;
    left: 6%;

    width: 55%;

    transform: rotate(-0.8deg);
}

.heart-tour-poster {
    top: 465px;
    right: 5%;

    width: 29%;

    z-index: 5;

    transform: rotate(1.5deg);
}

.fabric-tour-poster {
    top: 850px;
    right: 9%;

    width: 31%;

    z-index: 2;

    transform: rotate(1.1deg);
}

.main-tour-poster:hover {
    transform:
        translateY(-10px)
        rotate(-0.2deg)
        scale(1.012);
}

.heart-tour-poster:hover {
    transform:
        translateY(-9px)
        rotate(0.2deg)
        scale(1.018);
}

.fabric-tour-poster:hover {
    transform:
        translateY(-8px)
        rotate(-0.2deg)
        scale(1.015);
}

.wall-poster:hover img {
    filter:
        saturate(1.04)
        contrast(1.02)
        drop-shadow(0 15px 10px rgba(63, 43, 47, 0.16));
}

/* =======================
        POSTER TAPE
======================= */

.poster-tape {
    position: absolute;
    z-index: 7;

    display: block;

    width: 135px;
    height: 33px;

    background:
        linear-gradient(
            rgba(231, 219, 204, 0.91),
            rgba(217, 201, 183, 0.91)
        );

    opacity: 0.92;

    box-shadow:
        0 2px 3px rgba(68, 43, 48, 0.13);

    pointer-events: none;
}

.tape-main-left {
    top: -18px;
    left: -28px;

    transform: rotate(-24deg);
}

.tape-main-right {
    top: -20px;
    right: 25%;

    transform: rotate(2deg);
}

.tape-heart {
    top: -18px;
    left: 50%;

    width: 170px;

    transform:
        translateX(-50%)
        rotate(4deg);
}

.tape-fabric {
    top: 42%;
    right: -40px;

    width: 120px;

    transform: rotate(90deg);
}

/* =======================
        WALL DETAILS
======================= */

.wall-mark {
    position: absolute;
    z-index: 2;

    color: rgba(153, 89, 110, 0.48);

    font-family: "Cormorant Garamond", serif;
    font-size: 29px;
}

.wall-mark-one {
    left: 8%;
    top: 430px;

    transform: rotate(-11deg);
}

.wall-mark-two {
    right: 6%;
    bottom: 135px;

    transform: rotate(13deg);
}

.wall-note {
    position: absolute;
    z-index: 2;

    right: 8%;
    top: 402px;

    color: rgba(122, 76, 91, 0.5);

    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: italic;

    transform: rotate(3deg);
}

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

@media (max-width: 900px) {
    .tour-artist {
        margin-left: 120px;
    }

    .poster-wall {
        min-height: auto;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 35px;

        padding: 38px 24px 60px;
    }

    .tour-intro-card,
    .wall-poster {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .tour-intro-card {
        width: min(680px, 95%);

        transform: rotate(0.3deg);
    }

    .tour-intro-card:hover {
        transform:
            translateY(-7px)
            rotate(0deg);
    }

    .main-tour-poster {
        width: min(610px, 88%);
    }

    .heart-tour-poster {
        width: min(380px, 64%);

        align-self: flex-end;

        margin-right: 5%;
    }

    .fabric-tour-poster {
        width: min(430px, 70%);

        align-self: flex-start;

        margin-left: 8%;
    }

    .wall-mark,
    .wall-note {
        display: none;
    }
}

@media (max-width: 600px) {
    .tour-header {
        min-height: 220px;
    }

    .tour-header h1 {
        font-size: clamp(50px, 16vw, 76px);
    }

    .tour-artist {
        margin: 8px 0 0 60px;

        font-size: 24px;
    }

    .tour-intro-card {
        padding: 40px 28px;

        border-width: 8px;
    }

    .tour-intro-card p {
        font-size: 18px;
    }

    .tour-intro-lead {
        font-size: 24px !important;
    }

    .main-tour-poster {
        width: 95%;
    }

    .heart-tour-poster,
    .fabric-tour-poster {
        align-self: center;

        width: 82%;

        margin: 0;
    }
}

/* ==========================================================
   THE UNRAVELED TOUR — FINAL POSTER WALL
   ========================================================== */

.tour-body {
    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(255, 255, 255, 0.62),
            transparent 27%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(204, 160, 172, 0.22),
            transparent 30%
        ),
        linear-gradient(
            #efe4de,
            #d9c4c0
        );
}

.tour-container {
    background: #e7d9d3;
    overflow: hidden;
}

/* =======================
       TOUR HEADER
======================= */

.tour-header {
    position: relative;

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

    min-height: 280px;
    padding: 42px 25px;

    text-align: center;

    background:
        linear-gradient(
            rgba(255, 251, 247, 0.94),
            rgba(246, 233, 228, 0.95)
        );

    overflow: hidden;
}

.tour-header::before {
    content: "";

    position: absolute;
    inset: 23px;

    border: 1px dashed rgba(132, 82, 97, 0.25);
}

.tour-label {
    position: relative;
    z-index: 1;

    margin: 0 0 12px;

    color: #966274;

    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.tour-header h1 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #dd789b;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 8vw, 100px);
    font-style: italic;
    font-weight: 500;

    line-height: 0.9;
    letter-spacing: -3px;

    transform: rotate(-1deg);
}

.tour-artist {
    position: relative;
    z-index: 1;

    margin: 7px 0 0 230px;

    color: #312929;

    font-family: "Cormorant Garamond", serif;
    font-size: 29px;
    font-style: italic;
}

/* =======================
        POSTER WALL
======================= */

.tour-wall {
    position: relative;

    min-height: 1420px;

    overflow: hidden;

    background-color: #e9ddd7;

    background-image:
        linear-gradient(
            rgba(255, 252, 248, 0.26),
            rgba(205, 181, 178, 0.14)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 37px,
            rgba(112, 82, 83, 0.025) 38px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 43px,
            rgba(112, 82, 83, 0.02) 44px
        );
}

.tour-wall::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at top center,
            rgba(255, 255, 255, 0.45),
            transparent 52%
        ),
        radial-gradient(
            ellipse at bottom right,
            rgba(105, 68, 76, 0.13),
            transparent 50%
        );
}

/* =======================
        INTRO NOTE
======================= */

.tour-note {
    position: absolute;
    z-index: 6;

    top: 65px;
    left: 50%;

    width: min(690px, 72%);

    padding: 41px 58px;

    text-align: center;

    background:
        linear-gradient(
            rgba(255, 254, 251, 0.95),
            rgba(251, 245, 239, 0.95)
        );

    border: 1px solid #d1b7b6;

    box-shadow:
        7px 10px 0 rgba(103, 66, 72, 0.07),
        0 17px 28px rgba(67, 45, 48, 0.16);

    transform:
        translateX(-50%)
        rotate(0.3deg);

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

.tour-note::before {
    content: "";

    position: absolute;
    inset: 13px;

    border: 1px dashed rgba(145, 91, 107, 0.2);
}

.tour-note:hover {
    transform:
        translateX(-50%)
        translateY(-7px)
        rotate(0deg);

    box-shadow:
        9px 17px 0 rgba(103, 66, 72, 0.06),
        0 26px 38px rgba(67, 45, 48, 0.2);
}

.tour-note p {
    position: relative;
    z-index: 2;

    margin-bottom: 14px;

    color: #443839;

    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    line-height: 1.55;
}

.tour-note-lead {
    font-size: 27px !important;
    font-style: italic;

    color: #754c59 !important;
}

.tour-note-tape {
    position: absolute;
    z-index: 4;

    top: -18px;
    left: 50%;

    width: 170px;
    height: 31px;

    background: rgba(225, 208, 191, 0.87);

    box-shadow:
        0 2px 4px rgba(65, 42, 47, 0.13);

    transform:
        translateX(-50%)
        rotate(-1deg);
}

/* =======================
          POSTERS
======================= */

.tour-poster {
    position: absolute;
    z-index: 3;

    margin: 0;

    transition:
        transform 0.38s ease,
        filter 0.38s ease;
}

.tour-poster img {
    display: block;

    width: 100%;
    height: auto;

    box-shadow:
        0 15px 22px rgba(53, 37, 40, 0.24);

    filter:
        saturate(0.96)
        contrast(1);
}

/* Main black poster */

.tour-poster-main {
    top: 490px;
    left: 7%;

    width: 53%;

    transform: rotate(-1deg);
}

/* Pink poster */

.tour-poster-pink {
    top: 440px;
    right: 7%;

    width: 28%;

    z-index: 5;

    transform: rotate(2deg);
}

/* The Cure poster */

.tour-poster-cure {
    top: 830px;
    right: 9%;

    width: 31%;

    z-index: 4;

    transform: rotate(1deg);
}

/* Hover */

.tour-poster-main:hover {
    transform:
        translateY(-10px)
        rotate(-0.2deg)
        scale(1.012);
}

.tour-poster-pink:hover {
    transform:
        translateY(-9px)
        rotate(0.3deg)
        scale(1.018);
}

.tour-poster-cure:hover {
    transform:
        translateY(-8px)
        rotate(-0.2deg)
        scale(1.016);
}

.tour-poster:hover img {
    filter:
        saturate(1.04)
        contrast(1.02)
        drop-shadow(0 15px 10px rgba(61, 42, 45, 0.15));
}

/* =======================
            TAPE
======================= */

.poster-tape {
    position: absolute;
    z-index: 8;

    display: block;

    width: 130px;
    height: 31px;

    background:
        linear-gradient(
            rgba(231, 218, 202, 0.92),
            rgba(217, 199, 182, 0.92)
        );

    opacity: 0.92;

    box-shadow:
        0 2px 3px rgba(65, 42, 47, 0.13);

    pointer-events: none;
}

.poster-tape-main-left {
    top: -18px;
    left: -25px;

    transform: rotate(-22deg);
}

.poster-tape-main-right {
    top: -18px;
    right: 22%;

    transform: rotate(3deg);
}

.poster-tape-pink {
    top: -16px;
    left: 50%;

    width: 160px;

    transform:
        translateX(-50%)
        rotate(5deg);
}

.poster-tape-cure {
    top: 43%;
    right: -37px;

    width: 115px;

    transform: rotate(90deg);
}

/* =======================
        WALL DETAILS
======================= */

.tour-wall-detail {
    position: absolute;
    z-index: 2;

    color: rgba(151, 88, 108, 0.46);

    font-family: "Cormorant Garamond", serif;
}

.detail-heart {
    top: 415px;
    left: 8%;

    font-size: 28px;

    transform: rotate(-12deg);
}

.detail-star {
    right: 6%;
    bottom: 130px;

    font-size: 25px;

    transform: rotate(10deg);
}

.tour-wall-caption {
    position: absolute;
    z-index: 2;

    top: 390px;
    right: 7%;

    color: rgba(117, 73, 87, 0.48);

    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: italic;

    transform: rotate(3deg);
}

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

@media (max-width: 900px) {
    .tour-artist {
        margin-left: 110px;
    }

    .tour-wall {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 34px;

        min-height: auto;
        padding: 42px 23px 65px;
    }

    .tour-note,
    .tour-poster {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .tour-note {
        width: min(680px, 95%);

        transform: rotate(0.3deg);
    }

    .tour-note:hover {
        transform:
            translateY(-7px)
            rotate(0deg);
    }

    .tour-poster-main {
        width: min(610px, 90%);
    }

    .tour-poster-pink {
        width: min(370px, 65%);

        align-self: flex-end;

        margin-right: 5%;
    }

    .tour-poster-cure {
        width: min(420px, 72%);

        align-self: flex-start;

        margin-left: 8%;
    }

    .tour-wall-detail,
    .tour-wall-caption {
        display: none;
    }
}

@media (max-width: 600px) {
    .tour-header {
        min-height: 225px;
    }

    .tour-header h1 {
        font-size: clamp(48px, 16vw, 74px);
    }

    .tour-artist {
        margin: 8px 0 0 55px;

        font-size: 23px;
    }

    .tour-note {
        padding: 38px 27px;
    }

    .tour-note p {
        font-size: 18px;
    }

    .tour-note-lead {
        font-size: 23px !important;
    }

    .tour-poster-main,
    .tour-poster-pink,
    .tour-poster-cure {
        align-self: center;

        width: 88%;
        margin: 0;
    }
}