/*
    SCELTE DI DESIGN — sintesi per chi svilupperà il sito:

    FONT
    - Fraunces (titoli): serif editoriale "morbida", carattere distintivo, molto usata da brand
      ospitalità premium contemporanei. Alternativa consapevole al solito Playfair Display.
    - Newsreader (corpo testo): serif molto leggibile pensata per la lettura lunga, elegante
      senza risultare "da matrimonio".
    - Manrope (label, bottoni, meta info): sans pulito e contemporaneo, meno abusato di Poppins/Montserrat.
    - Cinzel: SOLO logo/wordmark — è il font reale del brand, uso limitato per non affaticare la lettura
      (è un font maiuscolo/inscrizionale, inadatto a paragrafi).

    COLORE — palette ispirata alla maiolica di Vietri/Amalfi invece del solito navy+oro da "yacht charter":
    - Crema calda (non bianco puro): percepita come più premium, meno clinica.
    - Navy petrolio: profondità, fiducia, mare.
    - Terracotta: colore principale dei CTA — richiama i tetti/maioliche della costiera, alto contrasto,
      trasmette calore e urgenza senza scadere nel cliché oro.
    - Ocra smorzato: accento secondario per le etichette di sezione (eco del vecchio oro, più editoriale).
    - Verde verdigris: terzo accento usato con parsimonia (check delle tappe) — il dettaglio che rende
      la palette riconoscibile e non standard.
  */
  :root{
    --navy:#16323F;
    --cream:#FBF5EC;
    --terracotta:#C1602E;
    --terracotta-dark:#A34E23;
    --ochre:#B98B4E;
    --verdigris:#4F7C6F;
    --ink:#24424E;

    --logo-font:'Cinzel', serif;
    --display:'Fraunces', serif;
    --body-serif:'Newsreader', serif;
    --ui:'Manrope', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family: var(--ui);
    color: var(--ink);
    background: var(--cream);
    line-height:1.6;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:480px; margin:0 auto; position:relative; background:var(--cream); box-shadow:0 0 40px rgba(0,0,0,.08);}

  .draft-note{
    background:#fff; color:#666; font-family:var(--ui); font-size:11px;
    padding:10px 16px; border-bottom:1px dashed #ddd; letter-spacing:.02em;
  }

  /* HERO */
  .hero{
    position:relative; min-height:660px;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:28px 26px 44px; color:#fff; overflow:hidden; background:var(--navy);
  }
  .hero-bg{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .hero::after{
    content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
    background:linear-gradient(180deg, rgba(22,50,63,.2) 0%, rgba(22,50,63,.3) 40%, rgba(16,36,45,.95) 100%);
  }
  .brandmark{
    position:relative; z-index:2; display:flex; align-items:center; gap:10px;
    font-family:var(--logo-font); font-size:14px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
    margin-bottom:auto;
  }
  .compass{width:28px; height:28px; flex-shrink:0;}
  .hero-content{position:relative; z-index:2; margin-top:210px;}
  .eyebrow{
    font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ochre); margin-bottom:16px;
  }
  .hero h1{
    font-family:var(--display); font-weight:500; font-size:2.6rem; line-height:1.12;
    letter-spacing:-.01em; margin-bottom:18px;
  }
  .hero p.sub{
    font-family:var(--body-serif); font-style:italic; font-weight:400; font-size:1.15rem;
    color:rgba(255,255,255,.88); max-width:32ch; margin-bottom:28px;
  }
  .cta-row{display:flex; gap:10px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--ui); font-weight:600; font-size:.92rem;
    padding:14px 24px; border-radius:3px; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{background:var(--terracotta); color:#fff;}
  .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}

  /* STICKY CTA */
  .sticky-cta{
    position:sticky; top:0; z-index:20; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 18px; font-family:var(--ui); font-size:.85rem; font-weight:600;
    border-bottom:2px solid var(--terracotta);
  }
  .sticky-cta .wa{
    background:var(--terracotta); color:#fff; padding:9px 16px; border-radius:3px;
    font-size:.82rem; display:flex; align-items:center; gap:6px;
  }

  /* TRUST STRIP */
  .trust{
    display:flex; overflow-x:auto; background:var(--navy); color:var(--cream);
    font-family:var(--ui); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  }
  .trust div{flex:1; text-align:center; padding:16px 10px; border-right:1px solid rgba(255,255,255,.12); white-space:nowrap;}
  .trust div:last-child{border-right:none;}
  .trust strong{display:block; font-family:var(--display); font-weight:500; font-size:1.15rem; color:var(--ochre); margin-bottom:2px; text-transform:none;}

  /* FEATURES ICONS */
  .features{background:var(--cream);}
  .feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px;}
  .feat-item{display:flex; flex-direction:column; gap:10px;}
  .feat-item .icon{
    width:42px; height:42px; border-radius:50%; background:rgba(193,96,46,.1);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .feat-item .icon svg{width:20px; height:20px; stroke:var(--terracotta); fill:none; stroke-width:1.6;}
  .feat-item span{font-family:var(--ui); font-size:.92rem; font-weight:600; color:var(--navy); line-height:1.35;}

  /* SIGNATURE */
  .signature{background:var(--navy); color:#fff; text-align:center;}
  .signature .section-label{color:var(--ochre); justify-content:center;}
  .signature .section-label::before{display:none;}
  .signature h2{color:#fff; max-width:26ch; margin-left:auto; margin-right:auto;}
  .signature p{font-family:var(--body-serif); font-style:italic; font-size:1.15rem; line-height:1.6; color:rgba(255,255,255,.9); max-width:34ch; margin:0 auto;}

  /* CLOSING CTA */
  .closing-cta{background:#F1E8D8; text-align:center;}
  .closing-cta h2{max-width:20ch; margin-left:auto; margin-right:auto;}
  .closing-cta .cta-row{justify-content:center; margin-top:6px;}
  .closing-cta .btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy);}

  /* SECTION GENERIC */
  section{padding:58px 26px;}
  .section-label{
    font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ochre); margin-bottom:14px; display:flex; align-items:center; gap:8px;
  }
  .section-label::before{content:""; width:18px; height:1px; background:var(--ochre);}
  h2{font-family:var(--display); font-weight:500; font-size:1.85rem; color:var(--navy); margin-bottom:20px; letter-spacing:-.01em; line-height:1.2;}

  .perche p{max-width:62ch; color:var(--ink); font-size:1.08rem; font-family:var(--body-serif);}
  .perche{background:var(--cream);}

  /* TOUR CARDS */
  .tours{background:#F1E8D8;}
  .tour-card{background:#fff; border:1px solid rgba(22,50,63,.08); margin-bottom:28px; box-shadow:0 2px 16px rgba(22,50,63,.05); display:flex; flex-direction:column; height:100%;}
  .tour-photo{height:190px; overflow:hidden;}
  .tour-photo img{width:100%; height:100%; object-fit:cover;}
  .tour-body{padding:24px; display:flex; flex-direction:column; flex:1;}
  .tour-body h3{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--navy); margin-bottom:10px;}
  .tour-meta{display:flex; gap:16px; font-family:var(--ui); font-size:11px; font-weight:600; color:var(--verdigris); margin-bottom:14px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.03em;}
  .tour-meta span{display:flex; align-items:center; gap:5px;}
  .tour-body p.desc{font-size:1rem; color:var(--ink); font-family:var(--body-serif); margin-bottom:16px;}
  .bearings{list-style:none; margin-bottom:18px;}
  .bearings li{display:flex; gap:12px; align-items:baseline; font-size:.92rem; font-family:var(--ui); padding:7px 0; border-bottom:1px solid rgba(22,50,63,.06);}
  .bearings li .deg{
    font-family:var(--ui); font-size:11px; color:#fff; min-width:20px; font-weight:700;
    width:19px; height:19px; background:var(--verdigris); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:2px;
  }
  .price-row{display:flex; align-items:center; justify-content:space-between; border-top:1px dashed rgba(22,50,63,.18); padding-top:18px; margin-top:auto;}
  .price{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--navy);}
  .price small{font-family:var(--ui); font-size:.7rem; color:#888; display:block; font-weight:500; margin-top:2px;}
  .btn-small{background:var(--terracotta); color:#fff; font-family:var(--ui); font-size:.82rem; font-weight:600; padding:12px 20px; border-radius:3px;}
  .included{background:var(--cream); border-left:3px solid var(--ochre); padding:12px 16px; font-size:.85rem; font-family:var(--ui); margin-bottom:16px; color:#3a3a3a;}
  .included strong{color:var(--navy); font-family:var(--ui); font-weight:700;}


  /* GALLERY */
  .gallery{background:var(--cream);}
  .gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .gallery-grid .g1{grid-column:1/3; height:220px; overflow:hidden;}
  .gallery-grid .g1 img{width:100%; height:100%; object-fit:cover;}
  .gallery-grid .gsmall{height:130px; overflow:hidden;}
  .gallery-grid .gsmall img{width:100%; height:100%; object-fit:cover;}

  /* TESTIMONIALS */
  .testimonials{background:var(--navy); color:#fff;}
  .testimonials .section-label{color:var(--ochre);}
  .testimonials .section-label::before{background:var(--ochre);}
  .testimonials h2{color:#fff;}
  .quote{border-top:1px solid rgba(255,255,255,.15); padding:22px 0;}
  .quote .stars{color:var(--ochre); font-family:var(--ui); font-size:13px; margin-bottom:10px; letter-spacing:.1em;}
  .quote p{font-family:var(--body-serif); font-style:italic; font-size:1.15rem; margin-bottom:10px; color:rgba(255,255,255,.94); line-height:1.5;}
  .quote span{font-family:var(--ui); font-size:10.5px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em;}

  /* CUSTOM */
  .custom{background:var(--terracotta); color:#fff; text-align:left;}
  .custom h2{color:#fff;}
  .custom p{font-family:var(--body-serif); font-style:italic; font-size:1.2rem; max-width:32ch; margin-bottom:24px; line-height:1.5;}
  .custom .btn-primary{background:var(--navy); color:#fff;}

  /* FOOTER */
  footer{background:#0F262F; color:var(--cream); padding:50px 26px 34px;}
  footer .section-label{color:var(--ochre);}
  footer .section-label::before{background:var(--ochre);}
  .contact-row{display:flex; justify-content:space-between; align-items:center; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.1);}
  .contact-row .who{font-family:var(--ui); font-size:.92rem; font-weight:500;}
  .contact-row .who small{display:block; font-family:var(--ui); font-size:10px; color:var(--ochre); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; font-weight:600;}
  .contact-row .wa-btn{background:var(--terracotta); color:#fff; font-family:var(--ui); font-size:.78rem; font-weight:700; padding:10px 16px; border-radius:3px;}
  .footer-meta{margin-top:28px; font-family:var(--ui); font-size:10.5px; color:rgba(251,245,236,.5); display:flex; gap:18px; flex-wrap:wrap;}

/* ============ RESPONSIVE: TABLET (>= 700px) ============ */
@media (min-width: 700px) {
  .wrap{max-width:700px; box-shadow:0 0 60px rgba(0,0,0,.08);}
  .feat-grid{grid-template-columns:repeat(3,1fr);}
  .tours-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
  .tour-card{margin-bottom:0;}
  .gallery-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:150px;}
  .gallery-grid .g1{grid-column:1/3; grid-row:1/3; height:100%; overflow:hidden;}
  .gallery-grid .gsmall{height:150px;}
  .hero h1{font-size:2.9rem;}
  section{padding:64px 40px;}
}

/* ============ RESPONSIVE: DESKTOP (>= 1100px) ============ */
@media (min-width: 1100px) {
  /* niente più "scheda" centrata con bordo: lo sfondo di ogni sezione
     riempie tutta la larghezza dello schermo, il contenuto resta leggibile
     centrato in una colonna di ~1200px tramite calc() */
  .wrap{max-width:1300px; box-shadow:0 0 60px rgba(0,0,0,.08);}

  .hero{min-height:82vh; padding:40px max(64px, calc((100% - 1300px)/2)) 56px;}
  .hero-content{margin-top:0;}
  .hero h1{font-size:3.6rem; max-width:16ch;}
  .hero p.sub{font-size:1.25rem; max-width:46ch;}

  .sticky-cta{padding:12px max(18px, calc((100% - 1300px)/2));}
  .trust{padding:0 max(0px, calc((100% - 1300px)/2));}

  section{padding:88px max(64px, calc((100% - 1300px)/2));}
  h2{font-size:2.3rem;}
  .feat-grid{grid-template-columns:repeat(6,1fr); gap:28px;}
  .feat-item{align-items:center; text-align:center;}
  .perche p{font-size:1.15rem; max-width:80ch;}
  .tours-grid{grid-template-columns:repeat(2,1fr); gap:36px;}
  .tour-photo{height:230px;}
  .gallery-grid{grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-rows:174px;}
  .gallery-grid .g1{grid-column:1/3; grid-row:1/3; height:100%; overflow:hidden;}
  .gallery-grid .gsmall{height:174px;}
  .testimonials .quote{display:inline-block; width:100%;}
  .signature p{font-size:1.3rem; max-width:44ch;}
  footer{padding:80px max(64px, calc((100% - 1300px)/2)) 44px;}
  .contact-row{max-width:420px;}
}

/* ============ ULTRA-WIDE (>= 1600px): colonna leggermente più ampia ============ */
@media (min-width: 1600px) {
  .hero{padding-left:calc((100% - 1300px)/2); padding-right:calc((100% - 1300px)/2);}
  section{padding-left:calc((100% - 1300px)/2); padding-right:calc((100% - 1300px)/2);}
  footer{padding-left:calc((100% - 1300px)/2); padding-right:calc((100% - 1300px)/2);}
}