:root {
  --cream: #FEF6EB;
  --ink: #1A0808;
  --wine: #410002;
  --orange: #F65009;
  --soft-orange: #FFAA85;
  --line: rgba(65, 0, 2, .18);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.site-shell { min-height:100vh; overflow:hidden; }

.topbar {
  height:94px; display:grid; grid-template-columns:76px 1fr 76px; align-items:center;
  padding:0 22px; border-bottom:1px solid rgba(65,0,2,.08); position:sticky; top:0; z-index:20;
  background:rgba(254,246,235,.92); backdrop-filter:blur(16px);
}
.menu-button,.lang-button { appearance:none; border:0; background:transparent; color:var(--ink); font:600 14px var(--sans); }
.menu-button { width:36px; height:36px; padding:7px 3px; }
.menu-button span { display:block; height:3px; background:var(--orange); margin:5px 0; border-radius:3px; }
.lang-button { letter-spacing:.03em; cursor:pointer; }
.lang-button span { color:var(--orange); margin-left:3px; }
.brand { display:flex; justify-content:center; align-items:center; }
.brand img { width:min(250px, 58vw); max-height:60px; object-fit:contain; }

.mobile-menu { display:none; padding:16px 22px 20px; border-bottom:1px solid var(--line); gap:16px; font-weight:500; flex-wrap:wrap; }
.menu-open .mobile-menu { display:flex; }

.hero { padding:22px 18px 38px; }
.story-grid { height:420px; display:grid; grid-template-columns:1.06fr .94fr; gap:9px; }
.story-card { margin:0; overflow:hidden; border-radius:28px; background:#eadbd1; }
.story-card img { height:100%; object-fit:cover; }
.story-card-a img { object-position:50% 10%; transform:scale(1.03); }
.story-card-b img { object-position:50% 50%; }

.hero-copy { padding:34px 10px 0; max-width:720px; }
.eyebrow { margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--wine); }
h1,h2 { font-family:var(--serif); color:var(--wine); font-weight:400; margin:0; }
h1 { font-size:clamp(45px,12vw,72px); line-height:.95; letter-spacing:-.025em; max-width:650px; }
h2 { font-size:clamp(38px,10vw,58px); line-height:.98; letter-spacing:-.02em; }
.hero-text,.section-heading p,.protocol-copy p,.talita-section p,.isbe-copy p,.faq-list p {
  color:rgba(26,8,8,.72); line-height:1.55; font-size:15px;
}
.hero-text { max-width:560px; margin:20px 0 0; }
.primary-cta { display:inline-flex; justify-content:center; align-items:center; margin-top:24px; min-height:54px; padding:0 24px; background:var(--orange); color:white; border-radius:18px; font-weight:600; }

.booking-section { padding:62px 18px 70px; border-top:1px solid var(--line); }
.section-heading { max-width:690px; padding:0 10px; }
.section-heading > p:last-child { margin:15px 0 0; }
.city-grid { display:grid; gap:12px; margin-top:30px; }
.city-card { padding:20px; border:1px solid rgba(65,0,2,.38); border-radius:24px; background:rgba(255,255,255,.12); }
.city-country { display:block; font-size:10px; letter-spacing:.16em; font-weight:600; color:rgba(65,0,2,.58); margin-bottom:12px; }
.city-heading { display:flex; justify-content:space-between; align-items:end; }
.city-heading strong { font:400 39px/1 var(--serif); color:var(--wine); }
.city-heading span { font-size:11px; letter-spacing:.12em; color:var(--orange); font-weight:600; }
.city-actions { display:grid; gap:8px; margin-top:18px; }
.city-actions a { min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-radius:14px; border:1px solid rgba(65,0,2,.18); font-size:13px; font-weight:500; background:rgba(255,255,255,.22); }
.city-actions a:first-child { background:var(--orange); color:#fff; border-color:var(--orange); }
.city-actions a::after { content:"↗"; font-size:17px; }

.protocol-section,.talita-section {
  margin:0 18px; padding:42px 10px 62px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:44px 1fr; gap:12px;
}
.protocol-number,.talita-number { font-size:12px; letter-spacing:.13em; color:var(--orange); padding-top:3px; }
.protocol-copy p:last-child,.talita-section p:last-child { margin:19px 0 0; max-width:650px; }

.talita-section { background:rgba(246,80,9,.035); margin-left:0; margin-right:0; padding-left:28px; padding-right:28px; }

.faq-section { padding:62px 18px 70px; border-top:1px solid var(--line); }
.faq-list { margin-top:30px; border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); padding:0 10px; }
.faq-list summary { list-style:none; cursor:pointer; padding:20px 32px 20px 0; position:relative; font:400 23px/1.15 var(--serif); color:var(--wine); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:2px; top:18px; color:var(--orange); font:400 25px/1 var(--sans); }
.faq-list details[open] summary::after { content:"–"; }
.faq-list p { margin:0; padding:0 30px 20px 0; max-width:760px; }

.isbe-section { margin:0 18px 24px; background:var(--wine); color:var(--cream); border-radius:30px; padding:32px 24px 24px; }
.isbe-section h2 { color:var(--cream); }
.isbe-copy .eyebrow { color:#ffb69a; }
.isbe-copy p:last-child { color:rgba(254,246,235,.72); margin-top:16px; }
.isbe-logo-wrap { margin-top:26px; border-radius:20px; overflow:hidden; background:var(--cream); }
.isbe-logo-wrap img { mix-blend-mode:multiply; }

footer { display:flex; justify-content:space-between; align-items:flex-end; padding:30px 28px 38px; border-top:1px solid var(--line); font-size:12px; color:rgba(26,8,8,.54); }
footer > div { display:flex; flex-direction:column; gap:4px; }
.footer-brand { color:var(--wine); font-weight:600; }

.lang-sheet { position:fixed; z-index:50; top:84px; right:16px; width:170px; padding:8px; border-radius:16px; background:#fffaf3; box-shadow:0 14px 40px rgba(26,8,8,.16); display:none; }
.lang-sheet.open { display:block; }
.lang-sheet button { display:block; width:100%; border:0; padding:11px 12px; text-align:left; background:transparent; color:var(--ink); border-radius:10px; font:500 14px var(--sans); }

@media (min-width:700px) {
  .topbar { height:104px; padding:0 48px; grid-template-columns:52px 1fr 52px; }
  .brand img { width:300px; }
  .hero { padding:30px 40px 80px; }
  .story-grid { height:580px; gap:14px; }
  .hero-copy { padding-top:48px; }
  .booking-section,.faq-section { padding:90px 48px; }
  .city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1100px; }
  .protocol-section,.talita-section { margin:0 40px; grid-template-columns:90px 1fr; padding:70px 8px 90px; }
  .talita-section { margin-left:0; margin-right:0; padding-left:48px; padding-right:48px; }
  .faq-list { max-width:1000px; }
  .isbe-section { margin:0 40px 36px; padding:48px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; }
  .isbe-logo-wrap { margin-top:0; }
  footer { padding:36px 48px 48px; }
}
@media (min-width:1100px) {
  .hero { display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:55px; max-width:1400px; margin:auto; }
  .story-grid { height:680px; }
  .hero-copy { padding:0 0 30px; }
  .booking-section,.faq-section { max-width:1400px; margin:auto; }
  .city-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
  .protocol-section { max-width:1320px; margin:0 auto; }
  .talita-section { max-width:none; }
  .talita-section > * { max-width:1320px; }
  .isbe-section { max-width:1320px; margin:0 auto 40px; }
}

/* V1.5 — city sketches use the whole card as their canvas */
.city-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.city-card > *{
  position:relative;
  z-index:2;
}

/* Full-card canvas: avoids clipping and lets the illustration run behind the buttons. */
.city-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  opacity:.11;
}

/* Paris: keep the full Eiffel silhouette visible, including the tip. */
.city-paris::after{
  background-image:url("assets/city-paris-sketch.png");
  background-size:auto 94%;
  background-position:right 3% center;
}

/* Madrid: wider landmark, spread across the right half of the full card. */
.city-madrid::after{
  background-image:url("assets/city-madrid-sketch.png");
  background-size:58% auto;
  background-position:right -1% center;
}

/* Milano: tall cathedral, nearly full card height. */
.city-milano::after{
  background-image:url("assets/city-milano-sketch.png");
  background-size:auto 88%;
  background-position:right -1% center;
}

/* Lisboa: tram occupies the right side from upper area through the CTAs. */
.city-lisboa::after{
  background-image:url("assets/city-lisboa-sketch.png");
  background-size:auto 86%;
  background-position:right 1% center;
}

@media(max-width:699px){
  .city-card::after{opacity:.115;}

  .city-paris::after{
    background-size:auto 92%;
    background-position:right 2% center;
  }
  .city-madrid::after{
    background-size:64% auto;
    background-position:right -3% center;
  }
  .city-milano::after{
    background-size:auto 86%;
    background-position:right -4% center;
  }
  .city-lisboa::after{
    background-size:auto 84%;
    background-position:right -3% center;
  }
}

/* V1.6 — deliberately secondary email contact */
.email-contact{display:flex;justify-content:center;align-items:center;gap:.45rem;flex-wrap:wrap;padding:1rem 1.25rem 1.35rem;font-size:.82rem;color:rgba(26,8,8,.62)}
.email-contact a{color:#410002;text-decoration:underline;text-underline-offset:3px}

/* V1.7 — header dialogue icon, matching Booking V1 visual language */
.header-chat-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  color:#F65009;
  text-decoration:none;
}
.header-chat-icon{
  position:relative;
  display:block;
  width:19px;
  height:15px;
  border:1.35px solid #F65009;
  border-radius:6px;
  box-sizing:border-box;
}
.header-chat-icon::after{
  content:"";
  position:absolute;
  right:2px;
  bottom:-4px;
  width:6px;
  height:6px;
  border-right:1.35px solid #F65009;
  border-bottom:1.35px solid #F65009;
  background:#FEF6EB;
  transform:skewY(38deg) rotate(14deg);
}
.header-chat-btn:hover{opacity:.72}

/* V1.8 — right-side header actions */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:76px}
.header-chat-btn{width:30px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;text-decoration:none}
.header-chat-icon{position:relative;display:block;width:19px;height:15px;border:1.35px solid #F65009;border-radius:6px;box-sizing:border-box}
.header-chat-icon::after{content:"";position:absolute;right:2px;bottom:-4px;width:6px;height:6px;border-right:1.35px solid #F65009;border-bottom:1.35px solid #F65009;background:#FEF6EB;transform:skewY(38deg) rotate(14deg)}


/* V1.9 — mobile header spacing / WhatsApp tap target */
@media (max-width: 640px){
  .topbar{
    grid-template-columns:90px 1fr 90px;
    padding-left:18px;
    padding-right:18px;
  }
  .header-actions{
    min-width:90px;
    gap:2px;
  }
  .header-chat-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }
  .header-chat-icon{
    width:19px;
    height:15px;
  }
  .brand img{
    width:min(220px,55vw);
  }
}


/* V2.0 — mobile header rebuilt for balanced spacing */
@media (max-width: 640px){
  .topbar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:96px;
    padding:0 18px;
  }

  .menu-btn{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
  }

  .brand{
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:calc(100% - 190px);
  }

  .brand img{
    width:min(210px,52vw);
    height:auto;
  }

  .header-actions{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:auto;
  }

  .lang-button{
    flex:0 0 auto;
  }

  .header-chat-btn{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
  }

  .header-chat-icon{
    width:18px;
    height:14px;
  }
}


/* V2.1 — stack language selector and chat vertically on mobile */
@media (max-width: 640px){
  .header-actions{
    right:18px;
    top:50%;
    transform:translateY(-50%);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
  }

  .lang-button{
    min-width:40px;
    height:26px;
    padding:0 2px;
    line-height:1;
    font-size:.9rem;
  }

  .header-chat-btn{
    width:40px;
    height:34px;
    flex:0 0 34px;
  }

  .brand{
    max-width:calc(100% - 150px);
  }

  .brand img{
    width:min(220px,56vw);
  }
}