/* Baci Patagonici: fotografia editoriale, stesso mondo cromatico del MAIN. */
:root { --paper: #F3E6C8; --ink: #33261B; --ease: cubic-bezier(.22,1,.36,1); }
html { scroll-padding-top: 88px; }
body { font-weight: 400; }
::selection { background: var(--gold-light); color: var(--obsidian); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 1100; padding: .7rem 1rem; background: var(--cream); color: var(--ink); }
.skip-link:focus { top: 5rem; }
.reading-progress { position: fixed; left: 0; top: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--gold-light); z-index: 1200; pointer-events: none; }
.site-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 600; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem clamp(1.3rem,5vw,4rem); gap: 1rem; border-bottom: 1px solid rgba(246,232,192,.23); color: var(--cream); }
.wordmark { font-family: 'TAN Pearl',serif; font-size: .95rem; color: inherit; text-decoration: none; line-height: 1.35; letter-spacing: .04em; }
.wordmark small { display: block; font-family: 'Cormorant Infant',serif; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-top: .3rem; }
.nav-links { display: flex; gap: 1.8rem; align-items: center; }
.nav-links a { color: inherit; text-decoration: none; font-size: .76rem; letter-spacing: .19em; text-transform: uppercase; padding: .4rem 0; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-date { font-size: .75rem; letter-spacing: .15em; opacity: .9; }
body.locked .site-nav { visibility: hidden; }

/* Copertina fotografica, movimento senza background-attachment: fixed. */
.hero { min-height: 850px; min-height: max(760px,100svh); padding: 9rem 5vw 10rem; align-items: center; }
.hero-bg { background: #4A3728; overflow: hidden; }
.hero-photo { width: 100%; height: 116%; position: absolute; top: -8%; left: 0; object-fit: cover; object-position: 50% 42%; will-change: transform; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(27,24,19,.28),rgba(27,24,19,.1) 26%,rgba(27,24,19,.32) 72%,#33261B 100%),linear-gradient(90deg,rgba(27,24,19,.1),rgba(27,24,19,.06)); }
.hero > .peaks, .hero > .aurora, .hero > .stars { display: none; }
.hero-content { max-width: 960px; width: 100%; text-shadow: 0 2px 28px rgba(20,18,12,.4); }
.hero-eyebrow { color: var(--cream); opacity: .92; margin-bottom: 1.8rem; font-size: .77rem; letter-spacing: .3em; }
.hero-title { font-size: clamp(4rem,10vw,8.5rem); letter-spacing: .01em; line-height: 1.03; color: var(--cream); }
.hero-title em { color: var(--cream); }
.hero-sub { color: var(--cream); font-size: clamp(1.1rem,2.3vw,1.6rem); margin-top: 2.6rem; }
.hero-route { color: var(--cream); opacity: .85; font-size: .73rem; margin-top: 1rem; }
.hero .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); text-shadow: none; padding: 1rem 1.6rem; gap: 1.4rem; letter-spacing: .16em; margin-top: 2.3rem; }
.hero .btn:hover { color: var(--cream); background: var(--gold-deep,#5C5B2E); border-color: var(--gold-light); box-shadow: none; }
.hero-secondary { display: block; width: fit-content; margin: 1rem auto 0; color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(246,232,192,.55); font-size: .9rem; padding: .15rem; }
.hero-coordinates { position: absolute; bottom: 4rem; left: 5vw; z-index: 3; display: grid; gap: .45rem; font-size: .65rem; letter-spacing: .23em; text-transform: uppercase; color: var(--cream); }
.hero-coordinates b { font-weight: 400; font-size: .94rem; letter-spacing: .12em; }
.hero-annotation { position: absolute; right: 5vw; bottom: 4rem; z-index: 3; width: 180px; font-size: .93rem; line-height: 1.5; text-align: right; color: var(--cream); }
.scroll-hint { bottom: 2.3rem; color: var(--cream); opacity: .9; }

/* L'invito e' intimo: primo panorama ancora scuro, niente effetto vetrina. */
#gate::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(28,23,18,.48),rgba(28,23,18,.7)),url('/images/fitz-roy.webp') center 40%/cover no-repeat; }
#gate .peaks, #gate .aurora { display: none; }
#gate .stars { opacity: .35; }
.gate-content { margin-bottom: 0; max-width: 470px; }
.gate-eyebrow, .gate-title em { color: var(--cream); }
.gate-sub { color: var(--cream); opacity: .86; }
.gate-input { background: rgba(33,27,21,.34); border-color: rgba(246,232,192,.45); }
.gate-form .btn { border-color: var(--cream); color: var(--cream); min-width: 180px; }
.gate-form .btn:hover { color: var(--obsidian); background: var(--cream); box-shadow: none; }
.gate-error { color: var(--cream); }

/* Un foglio di diario tra le fotografie. */
#viaggio { background: var(--paper); color: var(--ink); padding-block: clamp(5rem,9vw,9rem); }
.story-layout { max-width: 1170px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem,7vw,7rem); align-items: center; }
.story-photo { position: relative; padding: 1rem 1rem 2.7rem; background: #F9EFD9; transform: rotate(-3deg); box-shadow: 0 16px 36px rgba(68,51,31,.12); }
.story-photo img { width: 100%; height: clamp(330px,34vw,480px); object-fit: cover; }
.story-photo figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .65rem; text-align: center; font-size: .9rem; letter-spacing: .05em; color: #6A563A; }
.story-stamp { position: absolute; top: -1.4rem; right: -1.4rem; width: 92px; height: 92px; border: 1px solid var(--gold); color: var(--gold-deep,#5C5B2E); background: var(--paper); border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; transform: rotate(12deg); }
.story-copy .section-label { color: #6C6C33; opacity: 1; }
.story-copy .section-title { font-size: clamp(2.2rem,4.8vw,3.5rem); }
.story-copy .section-title em { color: #6C6C33; display: block; margin-top: .22em; }
.story-copy .body-text { color: #65513B; font-size: 1.16rem; line-height: 1.8; }
.story-copy .body-text strong { color: var(--ink); font-weight: 600; }
.story-copy .signature { color: #6C6C33; font-size: 1.3rem; margin-top: 1.5rem; }
.story-copy .note { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(124,123,63,.25); font-size: 1.04rem; line-height: 1.7; color: #65513B; }
#viaggio + .divider { display: none; }

/* Il percorso: foto che segue le tappe, non sette pagine di testo. */
#tappe { background: var(--obsidian); }
#tappe .container { max-width: 1180px; }
.journey-head { text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.journey-head .section-title { margin-bottom: 0; }
.journey-head .body-text { max-width: 430px; margin-left: auto; font-size: 1.1rem; }
.journey-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.journey-window { position: sticky; top: 2rem; margin: 0; overflow: hidden; }
.journey-window img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: opacity .24s ease; }
.journey-window figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 5rem 1.5rem 1.5rem; background: linear-gradient(transparent,rgba(26,23,16,.8)); color: var(--cream); pointer-events: none; }
.journey-window figcaption small { display: block; font-size: .67rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: .4rem; }
.journey-window figcaption b { font-family: 'TAN Pearl',serif; font-size: 1.6rem; font-weight: 400; }
.route { margin-top: 0; padding-left: 2.6rem; }
.route::before { left: .8rem; }
.stop { padding-bottom: 1.65rem; opacity: .72; transition: opacity .4s; }
.stop.is-current, .stop:hover, .stop:focus-within { opacity: 1; }
.stop::before { left: -2.14rem; width: .65rem; height: .65rem; top: .35rem; transition: background .3s; }
.stop.is-current::before { background: var(--gold-light); }
.stop h3 { font-family: 'Cormorant Infant',serif; font-size: 1.8rem; font-weight: 500; letter-spacing: .02em; }
.stop p { font-size: 1.03rem; line-height: 1.65; }
.stop-meta { font-size: .63rem; letter-spacing: .16em; }
.stop a { display: inline-block; padding-block: .35rem; font-size: .65rem; }

/* Respiro tra il racconto e la lista regalo. */
.landscape-break { min-height: 500px; height: min(68vw,620px); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 3rem 1.5rem; }
.landscape-break img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.landscape-break::after { content: ''; position: absolute; inset: 0; background: rgba(243,230,200,.38); }
.landscape-break .landscape-quote { position: relative; z-index: 1; text-align: center; max-width: 800px; }
.landscape-quote .section-label { color: var(--obsidian); opacity: 1; }
.landscape-quote p:not(.section-label) { font-family: 'TAN Pearl',serif; font-size: clamp(2rem,5vw,3.4rem); line-height: 1.3; color: var(--obsidian); }
.landscape-quote small { display: block; margin-top: 1.5rem; font-size: .73rem; letter-spacing: .22em; text-transform: uppercase; color: var(--obsidian); }

/* Vetrina fotografica, taglio pulito e quote sempre visibili. */
#esperienze { padding-top: clamp(4.5rem,8vw,7rem); }
#esperienze .container.wide { max-width: 1240px; }
#esperienze .section-title { font-size: clamp(2.3rem,5vw,3.8rem); }
.filters { gap: .45rem; margin-bottom: 2.8rem; }
.chip { padding: .65rem .95rem; font-size: .9rem; min-height: 44px; }
.grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; }
.card { padding: 0; border: 1px solid rgba(196,168,131,.15); background: #3A2C20; overflow: hidden; transition: border-color .3s; }
.card:hover { transform: none; border-color: rgba(196,168,131,.5); }
.card-photo { position: relative; aspect-ratio: 16/11; overflow: hidden; background: #4A3728; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%,rgba(34,29,21,.48)); pointer-events: none; }
.card-country { position: absolute; bottom: 1rem; left: 1.25rem; z-index: 1; color: var(--cream); font-size: .64rem; letter-spacing: .21em; text-transform: uppercase; }
.card-number { position: absolute; right: 1rem; top: .9rem; z-index: 1; color: var(--cream); font-size: .77rem; letter-spacing: .1em; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.card-content { padding: 1.4rem 1.35rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.card-top { margin-bottom: .65rem; }
.card-top .card-icon { display: none; }
.card-stage { text-align: left; color: var(--gold-light); font-size: .62rem; letter-spacing: .17em; }
.card h3 { font-size: 1.55rem; font-weight: 500; margin-bottom: .55rem; min-height: 2.4em; }
.card p { font-size: 1.04rem; line-height: 1.6; }
.price { padding-top: .9rem; margin-top: 1.1rem; border-top: 1px solid rgba(196,168,131,.16); }
.price b { font-size: 1.4rem; }
.price small { font-size: .92rem; }
.card .bar i { width: 100% !important; transform: scaleX(var(--fill,0)); transform-origin: left; transition: transform .6s var(--ease); }
.card-actions { gap: .5rem; }
.card-actions .btn { padding: .8rem .55rem; letter-spacing: .1em; font-size: .7rem; min-height: 44px; }
.stepper { align-items: center; }
.stepper button { width: 2rem; min-height: 44px; }
.stepper span { min-width: 1.4rem; }
.card.full .card-photo img { opacity: .65; }
.card.full { opacity: 1; }
.card.free { background: var(--paper); color: var(--ink); border: 0; }
.card.free .card-content { padding-top: 2rem; justify-content: center; }
.card.free .card-top .card-icon { display: block; width: 34px; height: 34px; }
.card.free h3 { color: var(--ink); min-height: auto; }
.card.free p { color: #65513B; }
.card.free .card-stage, .card.free .in-cart { color: #65662E; }
.card.free .btn { color: #5C5B2E; border-color: #7C7B3F; }
.card.free .btn:hover { color: var(--cream); }
.card.free .amount { flex-basis: 7rem; }
.card.free .amount input, .card.free .amount span { color: var(--ink); }
.amount-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: 1.5rem; }
.amount-preset { min-height: 44px; padding: .7rem .35rem; background: transparent; border: 1px solid rgba(92,91,46,.35); color: #5C5B2E; font-size: 1.05rem; cursor: pointer; transition: background .2s,color .2s,border-color .2s; }
.amount-preset:hover, .amount-preset.selected { color: var(--cream); background: #5C5B2E; border-color: #5C5B2E; }
.amount-label { display: block; margin-top: 1.25rem; color: #65513B; font-size: .92rem; }
.card-actions.free-actions { margin-top: .45rem; }
.free-note { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: #65662E; margin-bottom: 2rem; }
.how { font-size: 1.1rem; }
.card.photo-enter { opacity: 0; transform: translateY(25px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--delay,0ms); }
.card.photo-enter.visible { opacity: 1; transform: none; }
footer { border-top: 1px solid rgba(124,123,63,.2); opacity: 1; padding-top: 3.5rem; }
.photo-credits-link { display: inline-block; font-size: .73rem; opacity: .8; letter-spacing: .08em; padding-top: .8rem; border-bottom: 1px solid rgba(124,123,63,.25); }
.preview-mode .site-nav { top: 1.6rem; }
.preview-notice { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1050; padding: .4rem 1rem; font-size: .7rem; letter-spacing: .1em; color: var(--ink); background: var(--paper); pointer-events: none; }
.drawer { transition: transform .4s var(--ease),visibility .4s; }
.drawer .fine { font-size: .96rem; }
.close, .copy, .remove { min-height: 44px; }
.line { gap: .65rem; }
.line .stepper button { width: 1.8rem; }
.line-amt { font-size: 1rem; }
.cart-fab { transition: transform .35s var(--ease),background .3s; }
.cart-fab.bump { animation: none; }
.btn.solid { background: #65662F; border-color: #9EA05A; }

@media (hover:hover) and (pointer:fine) {
  .card:hover .card-photo img { transform: scale(1.065); }
}
@media (min-width:1400px) { .hero-content { padding-top: 2rem; } }
@media (max-width:1000px) {
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-layout { gap: 3rem; }
  .journey-head { gap: 2rem; }
  .nav-date { display: none; }
}
@media (max-width:700px) {
  .hero { min-height: 760px; min-height: 100svh; padding: 9rem 1.3rem 9rem; }
  .hero-photo { object-position: 52% 40%; }
  .hero-title { font-size: clamp(3rem,12vw,5rem); }
  .hero-eyebrow { font-size: .63rem; line-height: 1.8; letter-spacing: .2em; max-width: 270px; margin: 0 auto 1.4rem; }
  .hero-sub { max-width: 290px; margin-inline: auto; margin-top: 1.8rem; font-size: 1.13rem; }
  .hero-route { letter-spacing: .15em; font-size: .63rem; }
  .hero-coordinates { left: 1.3rem; bottom: 3.7rem; font-size: .55rem; }
  .hero-coordinates b { font-size: .8rem; }
  .hero-annotation { display: none; }
  .scroll-hint { left: auto; right: 1.3rem; bottom: 3.7rem; transform: none; animation: none; font-size: .55rem; }
  .site-nav { padding: 1.25rem 1.3rem; }
  .wordmark { font-size: .78rem; }
  .wordmark small { font-size: .55rem; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: .62rem; letter-spacing: .08em; }
  .nav-links a:first-child { display: none; }
  #viaggio { padding: 4.5rem 1.5rem; }
  .story-layout { grid-template-columns: 1fr; gap: 3.8rem; }
  .story-photo { max-width: 390px; width: 88%; margin-inline: auto; }
  .story-photo img { height: 350px; }
  .story-stamp { width: 80px; height: 80px; font-size: .6rem; right: -1.3rem; }
  .story-copy .body-text { font-size: 1.08rem; }
  .journey-head { grid-template-columns: 1fr; gap: 1rem; }
  .journey-head .body-text { margin-left: 0; }
  .journey-layout { grid-template-columns: 1fr; gap: 2rem; }
  .journey-window { position: relative; top: 0; }
  .journey-window img { aspect-ratio: 5/4; }
  .journey-window figcaption b { font-size: 1.3rem; }
  .stop { opacity: 1; }
  .stop h3 { font-size: 1.65rem; }
  .landscape-break { height: 450px; min-height: 400px; }
  .landscape-quote p:not(.section-label) { font-size: 1.85rem; }
  .grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 1.7rem; }
  .card h3 { min-height: 0; }
  .card-photo { aspect-ratio: 16/10; }
  .card-content { padding-inline: 1.3rem; }
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: start; padding: .4rem 0 1rem; margin-bottom: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
  .chip { flex: none; }
  .line .card-icon { display: none; }
  .line .stepper button { width: 1.65rem; }
  .drawer-body { padding-inline: 1.15rem; }
  .bank-row { padding-inline: .85rem; gap: .6rem; }
  .preview-notice { font-size: .55rem; white-space: nowrap; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hero-photo,.landscape-break img { transform: none !important; will-change: auto; }
  .card.photo-enter { opacity: 1; transform: none; }
  .star { animation: none; opacity: .35; }
}