.page-ragazza {
    --r-blue-deep: #2E5A7A;
    --r-blue-soft: #4A7C9E;
    --r-sand: #F5EDE4;
    --r-text: #2c3e50;
}


.ragazza-hero {
    position: relative; min-height: 85vh; width: 100%; overflow: hidden;
    display: flex; justify-content: center; align-items: center; text-align: center;
    background-color: var(--r-blue-deep);
}
.ragazza-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.ragazza-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(46,90,122,0.2) 0%, rgba(46,90,122,0.8) 100%);
}
.ragazza-hero-content { position: relative; z-index: 2; color: white; max-width: 800px; padding: 20px; }
.ragazza-tag { font-family: var(--nunito); letter-spacing: 0.3em; font-size: 0.8rem; text-transform: uppercase; display: block; margin-bottom: 20px; opacity: 0.8; }
.ragazza-hero-content h1 { font-family: var(--alice); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; margin: 0; text-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.ragazza-divider { width: 2px; height: 60px; background-color: white; margin: 30px auto; opacity: 0.6; }
.ragazza-poetic-line { font-family: var(--alice); font-size: 1.4rem; font-style: italic; opacity: 0.9; }

.ragazza-synopsis { background-color: var(--r-sand); padding: 30px 10% 70px;  text-align: center; }
.synopsis-box h2 { font-family: var(--alice); color: var(--r-blue-deep); font-size: 2rem; margin-bottom: 30px; }
.synopsis-box p { font-family: var(--nunito); font-size: 1.2rem; line-height: 1.8; color: var(--r-text); max-width: 700px; margin: 0 auto; }

.ragazza-character { padding: 100px 5%; background-color: white; }
.char-layout { display: flex; align-items: center; justify-content: center; gap: 80px; max-width: 1100px; margin: 0 auto; }
.char-image-wrapper { flex: 1; display: flex; justify-content: flex-end; }
.char-frame {
    width: 350px; height: 550px; position: relative; overflow: hidden;
    border-radius: 250px 250px 0 0; box-shadow: 25px 25px 0 var(--r-blue-soft);
    background-color: #FAF8F5;
}
.char-img {
    width: 100%; height: 100%; object-fit: contain; padding-top: 20px;
    object-position: center top; display: block; filter: saturate(0.9); transition: transform 0.5s ease;
}

.char-info { flex: 1; text-align: left; }
.char-name { font-family: var(--alice); font-size: 3.5rem; color: var(--r-blue-deep); margin: 10px 0 30px; line-height: 1; }
.char-desc { font-family: var(--nunito); font-size: 1.3rem; font-style: italic; color: var(--r-text); border-left: 3px solid var(--r-blue-soft); padding-left: 25px; line-height: 1.6; }

.ragazza-gallery { padding: 10px 5% 80px; background-color: white; }
.gallery-header { text-align: center; margin-bottom: 60px; }
.gallery-header h3 { font-family: var(--alice); font-size: 1.8rem; color: var(--r-blue-deep); letter-spacing: 0.05em; margin-top: 0px; }
.mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 350px 300px; gap: 20px; max-width: 1100px; margin: 0 auto; }
.mosaic-item { overflow: hidden; border-radius: 4px; background-color: #eee; }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover;}
.item-1 { grid-column: 1 / 3; }
.item-1 img {  object-position: 100% 80%;}
.item-2 { grid-column: 3 / 4; grid-row: 1 / 3; }


.world-navigation {
    background-color: white; padding: 60px 5% 60px;
    border-top: 2px solid rgba(46,90,122,0.05);
}
.nav-container {
    max-width: 1100px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}
.nav-side { flex: 1; }

 
.nav-side a { text-decoration: none; display: inline-block; position: relative; }
.nav-side a::after {
    content: ''; position: absolute; bottom: -6px; left: 50%; width: 0; height: 1px;
    background-color: var(--r-blue-soft); opacity: 0;
    transform: translateX(-50%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}
.nav-side a:hover::after { width: 60%; opacity: 0.5; }

 
.nav-label {
    display: block; font-family: var(--nunito); font-size: 0.65rem;
    letter-spacing: 0.3em; color: var(--r-text); opacity: 0.4; margin-bottom: 12px;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: opacity 0.6s ease;
}

 
.nav-project-title {
    font-family: var(--alice); font-size: 1.15rem; color: var(--r-blue-deep);
    display: flex; align-items: center; gap: 12px;
    transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-prev { text-align: left; visibility: hidden;  }
.nav-next { text-align: right; }
.nav-next .nav-project-title { justify-content: flex-end; }

 
.arrow {
    display: inline-block; 
    transition: margin 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}

 
.nav-side a:hover .nav-project-title { color: var(--r-blue-soft); }
.nav-side a:hover .nav-label { opacity: 0.7; }
.nav-prev a:hover .arrow {
    margin-left: -6px;
    margin-right: 6px;
    opacity: 0.7;
}

.nav-next a:hover .arrow {
    margin-left: 6px;
    margin-right: -6px;
    opacity: 0.7;
}
 
.nav-center {
    flex: 0 0 auto; text-align: center; padding: 0 60px;
    height: 60px; display: flex; align-items: center; justify-content: center;
}
.hub-link {
    display: inline-block; color: var(--r-text); opacity: 0.7;
    text-decoration: none; position: relative; padding: 10px 0;
    line-height: 1; transition: opacity 0.6s ease;
}
.hub-link span {
    font-family: var(--alice); font-size: 1.05rem; letter-spacing: 0.05em;
    display: inline-block;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: letter-spacing 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hub-link::after {
    content: ""; position: absolute; bottom: 0; left: 50%; width: 20%; height: 1px;
    background-color: var(--r-blue-deep); opacity: 0.3;
    transform: translateX(-50%);
    transition: width 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
}
.hub-link:hover { opacity: 1; }
.hub-link:hover span { letter-spacing: 0.08em; }
.hub-link:hover::after { width: 100%; opacity: 0.6; background-color: var(--r-blue-soft); }

.ragazza-share-section { background: #fdfdfb; padding: 40px 20px; text-align: center; }
.ragazza-share-row { display: flex; align-items: center; gap: 0; max-width: 280px; margin: 0 auto; }
.ragazza-share-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(46, 90, 122, 0.7)); }
.ragazza-share-line.right { background: linear-gradient(to left, transparent, rgba(46, 90, 122, 0.7)); }
.btn-share-ragazza {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    min-height: 44px;
    transition: all 0.4s ease;
}
.btn-share-ragazza .share-text {
    font-family: var(--nunito); font-size: 0.8rem; letter-spacing: 0.25em;
    text-transform: uppercase; color: rgba(46, 90, 122, 0.5); transition: color 0.4s ease;
}
.btn-share-ragazza svg { opacity: 0.5; color: var(--marine); transition: opacity 0.4s ease; }
.btn-share-ragazza:hover .share-text { color: rgba(46, 90, 122, 0.9); }
.btn-share-ragazza:hover svg { opacity: 0.9; }

.nav-side a:active .nav-project-title,
.nav-side a:active .arrow { opacity: 0.4; transition: opacity 0.1s ease; }
.hub-link:active { opacity: 0.4; transition: opacity 0.1s ease; }
.pe-btn-ragazza:active { transform: scale(0.96); opacity: 0.85; transition: transform 0.1s ease, opacity 0.1s ease; }


@media (max-width: 1100px) and (min-width: 901px) {
    .char-layout {
        gap: 40px;
    }
    .char-name {
        font-size: 2.5rem;
    }
}

@media (max-width: 900px) {

     
    .ragazza-hero { height: 70vh; }
    .ragazza-poetic-line { font-size: 1.15rem; }

     
    .ragazza-synopsis { padding: 30px 8% 70px; }
    .synopsis-box h2 { font-size: 1.7rem; }
    .synopsis-box p { font-size: 1.05rem; }

     
    .ragazza-character { padding: 70px 5%; }
    .char-layout { flex-direction: column; align-items: center; gap: 50px; text-align: center; }
    .char-image-wrapper { justify-content: center; }
    .char-frame { width: 280px; height: 440px; }
    .char-info { text-align: center; }
    .char-desc { border-left: none; border-left: 3px solid var(--r-blue-soft); padding-left: 0; padding-top: 20px; }
    .char-name { font-size: 2.8rem; }

     
    .ragazza-gallery { padding: 10px 5% 80px; }
    .mosaic-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 350px 220px 220px; }
    .item-1 { grid-column: 1 / 3; grid-row: 1; }
    .item-2 { grid-column: 1 / 2; grid-row: 2 / 4; }
    .item-3 { grid-column: 2 / 3; grid-row: 2; }
    .item-4 { grid-column: 2 / 3; grid-row: 3;}
    .item-1 img {  object-position: 100% 74%;}

     
    .world-navigation { padding: 50px 5% 70px; }
    .nav-container { flex-direction: column; align-items: center; gap: 30px; }
    .nav-center { order: 3; padding: 25px 0 0 0; width: 100%; text-align: center; }
    .nav-side { width: 100%; text-align: center; }
    .nav-next .nav-project-title,
    .nav-prev .nav-project-title { justify-content: center; }
    .nav-project-title { font-size: 1.4rem; }
    .nav-label { font-size: 0.7rem; margin-bottom: 8px; }
    .hub-link span { font-size: 1.2rem; }
    .nav-prev a:hover .arrow {
    margin-left: -6px;
    margin-right: 6px;
    opacity: 0.7;
}
.nav-next a:hover .arrow {
    margin-left: 6px;
    margin-right: -6px;
    opacity: 0.7;
}
    .nav-prev {display: none;}
}

@media (max-width: 600px) {

     
    .ragazza-hero { height: 75vh; }
    .ragazza-hero-content { padding: 20px 15px; }
    .ragazza-divider { height: 40px; margin: 20px auto; }
    .ragazza-poetic-line { font-size: 1rem; }

     
    .ragazza-synopsis { padding: 55px 6%; }
    .synopsis-box h2 { font-size: 1.5rem; margin-bottom: 20px; }
    .synopsis-box p { font-size: 1rem; line-height: 1.7; }

     
    .ragazza-character { padding: 55px 6%; }
    .char-layout { gap: 35px; }
    .char-frame { width: 230px; height: 360px; box-shadow: 12px 12px 0 var(--r-blue-soft); }
    .char-name { font-size: 2.2rem; }
    .char-desc { font-size: 1.05rem; }

     
    .ragazza-gallery { padding: 0 6% 60px; }
    .gallery-header { margin-bottom: 35px; }
    .gallery-header h3 { font-size: 1.4rem; }
    .mosaic-grid { grid-template-columns: 1fr; grid-template-rows: 240px 360px 220px 220px; gap: 12px; }
    .item-1 { grid-column: 1; grid-row: 1; }
    .item-2 { grid-column: 1; grid-row: 2;}
    .item-2 img { object-position: center 78%; }
    .item-3 { grid-column: 1; grid-row: 3; }
    .item-4 { grid-column: 1; grid-row: 4; }

}