/* ── Twip landing sections (under the hero) ──────────────────────────────
   Same sky background as the hero: sections are transparent windows on it. */
.tsec { position: relative; z-index: 2; padding: 67px 0; text-align: center; }
.tsec-in { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.tsec h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 8px; color: var(--navy); }
.tsec .lead { margin: 0 0 30px; font-size: clamp(15px, 1.2vw, 18px); color: #12456E; opacity: .8; }
.tsec .head-row { display: flex; align-items: baseline; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.tsec .tprops, .tsec .twhy, .tsec .ttiles, .tsec .trail, .tsec .tvoices, .tsec .tfaq { text-align: left; }
#vantaggi { margin-top: 0; padding-top: 100px; }
.tsec .see-all { font-weight: 700; font-size: 15px; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

/* value props */
.tprops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tprop { background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.98); border-radius: 18px; padding: 22px; box-shadow: 0 18px 44px -30px rgba(6,40,70,.75); }
.tprop svg { width: 26px; height: 26px; stroke: var(--navy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.tprop b { display: block; font-family: var(--font-display); font-size: 19px; margin-bottom: 6px; color: var(--navy); }
.tprop span { font-size: 14.5px; line-height: 1.45; color: #12456E; opacity: .92; }

/* why-twip strip */
.twhy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.twhy-i { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.98); border-radius: 18px; padding: 16px; box-shadow: 0 18px 44px -30px rgba(6,40,70,.75); }
.twhy-i .ph { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; background: rgba(14,58,92,.1) center/cover no-repeat; }
.twhy-i p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--navy); }
.twhy-i mark { background: #BDEFDA; color: var(--navy); padding: 1px 5px; border-radius: 5px; }

/* category tiles */
.ttiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ttile { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; display: grid; align-items: end; text-decoration: none; background: #9BD8F0 center/cover no-repeat; box-shadow: 0 22px 50px -34px rgba(6,40,70,.8); transition: transform .3s cubic-bezier(.22,1,.32,1); }
.ttile:hover { transform: translateY(-5px); }
.ttile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,40,70,0) 40%, rgba(6,40,70,.68)); }
.ttile .ph-lab { position: absolute; top: 10px; left: 10px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ttile-txt { display: block; position: relative; z-index: 1; padding: 16px; color: #fff; }
.ttile-txt b { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.12; }
.ttile-txt span { font-size: 13.5px; opacity: .9; }

/* trip cards rail */
.trail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.trail::-webkit-scrollbar { display: none; }
.tcard { text-decoration: none; color: var(--navy); }
.tcard .pic { display: block; position: relative; aspect-ratio: 1; border-radius: 14px; background: #A9E1F6 center/cover no-repeat; overflow: hidden; margin-bottom: 12px; box-shadow: 0 20px 44px -34px rgba(6,40,70,.8); }
.tcard .pic .ph-lab { position: absolute; top: 10px; left: 10px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.tcard .meta { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; }
.tcard .meta span { background: rgba(6,40,70,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; }
.tcard h3 { font-family: var(--font-display); font-size: 16.5px; line-height: 1.28; margin: 0 0 6px; }
.tcard .price { font-size: 14.5px; color: #12456E; }
.tcard .price b { color: var(--navy); }
.tcard .price s { opacity: .55; margin-left: 5px; }
.tcard .price em { font-style: normal; margin-left: 6px; background: #BDEFDA; color: #0B5A46; font-weight: 700; padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }

/* voices */
.tvoices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tvoice .pic { display: block; aspect-ratio: 3/4; border-radius: 14px; background: #A9E1F6 center/cover no-repeat; position: relative; margin-bottom: 12px; box-shadow: 0 20px 44px -34px rgba(6,40,70,.8); }
.tvoice .pic .ph-lab { position: absolute; top: 10px; left: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.tvoice b { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; color: var(--navy); }
.tvoice p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #12456E; opacity: .85; }

/* people row */
.tpeople { display: flex; justify-content: center; gap: clamp(30px, 6vw, 90px); flex-wrap: wrap; text-align: center; }
.tperson .ph { display: block; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 14px; background: rgba(14,58,92,.1) center/cover no-repeat; box-shadow: 0 18px 40px -28px rgba(6,40,70,.8); }
.tperson b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.tperson span { font-size: 14px; color: #12456E; opacity: .75; }

/* faq */
.tfaq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.tfaq details { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 18px 22px; cursor: pointer;
  transition: background .28s ease, box-shadow .32s ease, transform .32s cubic-bezier(.22,1,.32,1); }
.tfaq details:hover { background: rgba(255,255,255,.78); }
.tfaq details.is-open { background: rgba(255,255,255,.86); box-shadow: 0 26px 50px -34px rgba(6,40,70,.55); }
/* il corpo della risposta: altezza animata, testo che sale appena dietro */
.faq-body { height: 0; overflow: hidden; transition: height .42s cubic-bezier(.22,1,.32,1); }
.faq-inner { padding-top: 2px; opacity: 0; transform: translateY(-8px);
  transition: opacity .3s ease .04s, transform .44s cubic-bezier(.22,1,.32,1) .04s; }
.tfaq details.is-open .faq-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .faq-body, .faq-inner, .tfaq details { transition: none; } }
.tfaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy); }
.tfaq summary::-webkit-details-marker { display: none; }
.tfaq summary::after { content: "+"; font-size: 22px; line-height: 1; opacity: .55; flex: none;
  transition: transform .42s cubic-bezier(.22,1,.32,1), opacity .25s ease, color .25s ease; }
.tfaq details.is-open summary::after { transform: rotate(135deg); opacity: 1; color: var(--azzurro-twip); }
.tfaq p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #12456E; opacity: .85; }

/* closing cta */
.tcta { text-align: center; }
.tcta .btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 15px 30px; border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: 0 20px 44px -22px rgba(6,40,70,.9); transition: transform .2s; }
.tcta .btn:hover { transform: translateY(-2px); }

@media (max-width: 1000px) {
  .tsec { padding: 41px 0; }
  .tprops, .twhy, .tvoices { grid-template-columns: repeat(2, 1fr); }
  .ttiles { grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none; overflow-x: auto; }
  .ttile { aspect-ratio: 4 / 5; }
}
@media (max-width: 620px) {
  .tprops, .twhy, .tvoices { grid-template-columns: 1fr; }
}