/*
=========================================================
LA DARSENA DELLA VELA
Main Stylesheet
=========================================================
*/

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);

    color:var(--color-text);

    background:var(--color-background);

    line-height:var(--line-height);

    overflow-x:hidden;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

}

/* =====================================================
   GLOBAL
===================================================== */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:var(--section-space) 0;

}

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    display:inline-block;

    color:var(--color-secondary);

    letter-spacing:3px;

    font-size:.8rem;

    font-weight:600;

    margin-bottom:18px;

}

.section-header h2{

    font-family:var(--font-title);

    font-size:3rem;

    margin-bottom:20px;

}

.section-header p{

    max-width:700px;

    margin:auto;

    color:var(--color-text-light);

}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:56px;

    padding:0 34px;

    border-radius:999px;

    background:var(--color-secondary);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:56px;

    padding:0 34px;

    border-radius:999px;

    border:2px solid white;

    color:white;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:white;

    color:var(--color-primary);

}

/* =====================================================
   PRELOADER
===================================================== */

#preloader{

    position:fixed;

    inset:0;

    background:white;

    z-index:var(--z-preloader);

    display:flex;

    justify-content:center;

    align-items:center;

}

.loader-logo{

    text-align:center;

}

.loader-logo .anchor{

    font-size:70px;

    margin-bottom:20px;

}

.loader-logo h1{

    font-family:var(--font-title);

    font-size:2.5rem;

}

.loader-logo p{

    letter-spacing:5px;

    color:var(--color-secondary);

}

.loader-line{

    width:180px;

    height:3px;

    background:#eee;

    margin:35px auto 0;

    overflow:hidden;

}

.loader-line span{

    display:block;

    width:60%;

    height:100%;

    background:var(--color-secondary);

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    z-index:var(--z-header);

    transition:.35s;

}

header.scrolled{

    background:white;

    box-shadow:var(--shadow-sm);

}

header .container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo-symbol{

    font-size:2rem;

    color:var(--color-secondary);

}

.logo-text strong{

    display:block;

    font-family:var(--font-title);

    font-size:1.4rem;

}

.logo-text small{

    letter-spacing:4px;

    font-size:.72rem;

    color:var(--color-secondary);

}

nav ul{

    display:flex;

    gap:42px;

}

nav a{

    position:relative;

    font-weight:500;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-secondary);

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

.book-button{

    height:50px;

    display:flex;

    align-items:center;

    padding:0 28px;

    border-radius:999px;

    background:var(--color-secondary);

    color:white;

    font-weight:600;

}

/* =====================================================
   HERO
===================================================== */

.hero{

    position:relative;

    height:100vh;

    min-height:760px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

}

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.55)
    );

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

    padding:0 30px;

}

.hero-content span{

    display:inline-block;

    letter-spacing:5px;

    margin-bottom:25px;

    color:var(--color-secondary-light);

    font-weight:600;

}

.hero-content h1{

    font-family:var(--font-title);

    font-size:5.3rem;

    line-height:1.05;

    margin-bottom:30px;

}

.hero-content p{

    font-size:1.25rem;

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

    opacity:.95;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    font-size:2rem;

    animation:bounce 2s infinite;

}

/* =====================================================
   ABOUT
===================================================== */

.about .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-left span{

    display:inline-block;

    color:var(--color-secondary);

    letter-spacing:3px;

    margin-bottom:15px;

}

.about-left h2{

    font-family:var(--font-title);

    font-size:3rem;

    margin-bottom:30px;

}

.about-left p{

    color:var(--color-text-light);

    margin-bottom:25px;

}

.about-features{

    display:grid;

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

    gap:18px;

    margin-top:40px;

}

.about-features div{

    background:white;

    padding:18px 22px;

    border-radius:14px;

    box-shadow:var(--shadow-xs);

    font-weight:600;

}

.about-right img{

    border-radius:28px;

    box-shadow:var(--shadow-lg);

}

/* =====================================================
   SERVICES
===================================================== */

.services{

    background:white;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:white;

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-xs);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

    font-size:2rem;

}

.service-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.service-card p{

    color:var(--color-text-light);

}

/* =====================================================
   GALLERY
===================================================== */

.gallery-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

}

.gallery-main img{

    height:620px;

    object-fit:cover;

    border-radius:22px;

}

.gallery-side{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.gallery-side img{

    height:300px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    transition:var(--transition);

}

.gallery-main img,

.gallery-side img{

    transition:var(--transition);

}

.gallery-main img:hover,

.gallery-side img:hover{

    transform:scale(1.03);

}

.gallery-action{

    text-align:center;

    margin-top:40px;

}

.gallery-action button{

    padding:18px 34px;

    border-radius:999px;

    background:var(--color-primary);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

.gallery-action button:hover{

    background:var(--color-primary-dark);

}

/* =====================================================
   EXPERIENCE
===================================================== */

.experience{

    background:white;

}

.experience-grid{

    display:grid;

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

    gap:28px;

}

.experience-card{

    overflow:hidden;

    border-radius:22px;

    background:white;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.experience-card:hover{

    transform:translateY(-8px);

}

.experience-card img{

    height:260px;

    object-fit:cover;

}

.experience-content{

    padding:28px;

}

.experience-content small{

    color:var(--color-secondary);

    letter-spacing:2px;

    font-weight:600;

}

.experience-content h3{

    margin:12px 0 18px;

    font-size:1.45rem;

}

.experience-content p{

    color:var(--color-text-light);

}

/* =====================================================
   PARALLAX
===================================================== */

.parallax{

    position:relative;

    height:520px;

    background:url("../img/1.png") center center / cover fixed;

    display:flex;

    justify-content:center;

    align-items:center;

}

.parallax-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.parallax-overlay h2{

    color:white;

    font-family:var(--font-title);

    font-size:4rem;

    max-width:900px;

    line-height:1.2;

}

/* =====================================================
   NUMBERS
===================================================== */

.numbers{

    background:var(--color-primary);

    color:white;

}

.numbers .container{

    display:grid;

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

    gap:30px;

}

.number{

    text-align:center;

}

.number h2{

    font-size:3.3rem;

    color:var(--color-secondary);

    margin-bottom:12px;

    font-family:var(--font-title);

}

.number p{

    letter-spacing:1px;

}

/* =====================================================
   LOCATION
===================================================== */

.location-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.location-item{

    display:flex;

    gap:22px;

    margin-bottom:35px;

}

.location-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(212,175,55,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.8rem;

    flex-shrink:0;

}

.location-item h3{

    margin-bottom:8px;

    font-size:1.25rem;

}

.location-item p{

    color:var(--color-text-light);

}

.map-placeholder{

    height:520px;

    border-radius:24px;

    background:#ECECEC;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    color:#666;

    font-weight:600;

}

.map-placeholder small{

    margin-top:15px;

    font-size:1rem;

    color:#888;

}

/* =====================================================
   REVIEWS
===================================================== */

.reviews{

    background:white;

}

.reviews-grid{

    display:grid;

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

    gap:30px;

}

.review-card{

    background:white;

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.review-card:hover{

    transform:translateY(-8px);

}

.stars{

    color:var(--color-secondary);

    font-size:1.3rem;

    margin-bottom:20px;

}

.review-card p{

    color:var(--color-text-light);

    margin-bottom:28px;

    font-style:italic;

}

.review-card strong{

    font-size:1rem;

}

/* =====================================================
   BOOKING
===================================================== */

.booking{

    position:relative;

    overflow:hidden;

    min-height:900px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.booking-background{

    position:absolute;

    inset:0;

}

.booking-background img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.booking-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}

.booking-card{

    position:relative;

    z-index:10;

    width:min(760px,92%);

    background:white;

    border-radius:28px;

    padding:60px;

    box-shadow:var(--shadow-lg);

}

.booking-card span{

    color:var(--color-secondary);

    letter-spacing:3px;

    font-weight:600;

}

.booking-card h2{

    margin:20px 0;

    font-family:var(--font-title);

    font-size:3rem;

}

.booking-card p{

    color:var(--color-text-light);

    margin-bottom:40px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.booking input,

.booking textarea{

    width:100%;

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

    border-radius:12px;

    padding:18px;

    font-size:1rem;

}

.booking textarea{

    resize:vertical;

    min-height:180px;

    margin-bottom:25px;

}

.booking button[type="submit"]{

    width:100%;

    height:58px;

    border-radius:999px;

    background:var(--color-secondary);

    color:white;

    font-size:1rem;

    font-weight:600;

    transition:var(--transition);

}

.booking button[type="submit"]:hover{

    transform:translateY(-3px);

}

.booking-links{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.booking-links a{

    padding:14px 24px;

    border-radius:999px;

    background:var(--color-primary);

    color:white;

    transition:var(--transition);

}

.booking-links a:hover{

    background:var(--color-primary-dark);

}

/* =====================================================
   FAQ
===================================================== */

.faq{

    background:var(--color-background);

}

.faq-list{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:white;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    box-shadow:var(--shadow-xs);

}

.faq-question{

    width:100%;

    padding:26px 32px;

    text-align:left;

    font-size:1.05rem;

    font-weight:600;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-question::after{

    content:"+";

    font-size:1.5rem;

    color:var(--color-secondary);

}

.faq-item.open .faq-question::after{

    content:"−";

}

.faq-answer{

    display:none;

    padding:0 32px 28px;

    color:var(--color-text-light);

}

.faq-item.open .faq-answer{

    display:block;

}

/* =====================================================
   CTA
===================================================== */

.cta{

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    color:white;

    text-align:center;

}

.cta-content{

    max-width:760px;

    margin:auto;

}

.cta span{

    display:block;

    letter-spacing:4px;

    color:var(--color-secondary-light);

    margin-bottom:20px;

    font-weight:600;

}

.cta h2{

    font-family:var(--font-title);

    font-size:3.5rem;

    margin-bottom:30px;

}

.cta p{

    font-size:1.1rem;

    margin-bottom:40px;

    opacity:.9;

}

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

footer{

    background:var(--footer-background);

    color:var(--footer-text);

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.2fr;

    gap:60px;

    margin-bottom:60px;

}

.footer-grid h3{

    font-family:var(--font-title);

    font-size:2rem;

    margin-bottom:20px;

}

.footer-grid h4{

    margin-bottom:20px;

}

.footer-grid ul li{

    margin-bottom:14px;

}

.footer-grid a{

    transition:var(--transition-fast);

}

.footer-grid a:hover{

    color:var(--color-secondary);

}

.socials{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:20px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:30px;

    text-align:center;

    color:#BDBDBD;

    font-size:.9rem;

}

/* =====================================================
   GALLERY MODAL
===================================================== */

.gallery-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:var(--z-modal);

}

.gallery-modal.open{

    display:flex;

}

.gallery-modal-content{

    width:min(92%,1200px);

}

.gallery-modal-content img{

    border-radius:20px;

    max-height:85vh;

    object-fit:contain;

}

#closeGallery{

    position:absolute;

    top:30px;

    right:40px;

    color:white;

    font-size:3rem;

    line-height:1;

}

/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-button{

    position:fixed;

    right:28px;

    bottom:28px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:2rem;

    box-shadow:var(--shadow-lg);

    z-index:var(--z-whatsapp);

    transition:var(--transition);

}

.whatsapp-button:hover{

    transform:scale(1.08);

}

/* =====================================================
   COOKIE BANNER
===================================================== */

.cookie-banner{

    position:fixed;

    left:30px;

    right:30px;

    bottom:30px;

    background:white;

    border-radius:20px;

    padding:28px;

    box-shadow:var(--shadow-lg);

    display:none;

    z-index:var(--z-cookie);

}

.cookie-banner.show{

    display:block;

}

.cookie-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.cookie-actions{

    display:flex;

    gap:15px;

}

.btn-light{

    padding:14px 24px;

    border-radius:999px;

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

    background:white;

}

/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top{

    position:fixed;

    right:30px;

    bottom:120px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--color-primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:var(--transition);

    z-index:var(--z-backtotop);

}

.back-to-top.show{

    opacity:1;

    pointer-events:auto;

}

/* =====================================================
   NEWSLETTER MODAL
===================================================== */

.newsletter-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:var(--z-modal);

}

.newsletter-modal.open{

    display:flex;

}

.newsletter-box{

    width:min(92%,560px);

    background:white;

    border-radius:24px;

    padding:50px;

    position:relative;

    text-align:center;

}

.newsletter-close{

    position:absolute;

    top:20px;

    right:20px;

    font-size:2rem;

}

.newsletter-box span{

    color:var(--color-secondary);

    letter-spacing:3px;

}

.newsletter-box h2{

    font-family:var(--font-title);

    font-size:2.4rem;

    margin:18px 0;

}

.newsletter-box p{

    color:var(--color-text-light);

    margin-bottom:30px;

}

.newsletter-box input{

    width:100%;

    height:56px;

    padding:0 20px;

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

    border-radius:12px;

    margin-bottom:18px;

}

.newsletter-box button[type="submit"]{

    width:100%;

    height:56px;

    border-radius:999px;

    background:var(--color-secondary);

    color:white;

    font-weight:600;

}