/* ═══════════════════════════════════════════════════════════
   VWT · PILAR · páginas de apoyo con identidad Vito
   Experiencias, tours privados, preguntas frecuentes, privacidad
   y 404. Apertura tipográfica, listas editoriales, acordeón del
   sitio y cierre en negro. Claro y oscuro.
   ═══════════════════════════════════════════════════════════ */
.pi{ --pad: clamp(1.4rem,5vw,6rem); --max: calc(1400px * var(--k, 1)); --sec: clamp(3.2rem,calc(7 * var(--1vh)),5.6rem); --t: .9s; --e: cubic-bezier(.22,1,.36,1);
     --acc: #AC3749; --vino: #6B1D2A; --ink: #0B0708; --soft: #3A3436; --mut: #7F6E73; --papel: #FFFFFF; --humo: #F6F2F0; --negro: #0B0708; --linea: rgba(11,7,8,.14);
     font-family: 'Poppins', sans-serif; background: var(--papel); color: var(--ink) }
.pi-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.pi-kick{ display: block; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.pi-kick-light{ color: rgba(255,255,255,.78) }
.pi-h1, .pi-h2{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .94; max-width: 22ch }
.pi-h2{ color: #fff }
.pi-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch; font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft) }
.pi-n{ display: block; font-size: .82rem; font-weight: 700; color: var(--acc) }
.pi-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 }
.pi-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px; background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff; text-decoration: none; font: inherit; font-size: .88rem; font-weight: 600; transition: background-color var(--t) var(--e), transform var(--t) var(--e) }
.pi-btn:hover{ background: var(--vino) !important; transform: translateY(-2px) }
.pi-lnk{ display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) }
.pi-lnk i{ font-style: normal; transition: transform .6s var(--e) }
.pi-lnk:hover i{ transform: translateX(4px) }
.pi-lnk-light{ color: #fff !important; -webkit-text-fill-color: #fff }
.pi-cta{ display: grid; gap: .9rem; justify-items: start }
.pi-cta-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: calc(35.2px * var(--k, 1))}
.pi-fin{ padding: var(--sec) 0; background: var(--negro); color: #fff }
.pi-fin-grid{ display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,.4fr); gap: calc(80.0px * var(--k, 1)); align-items: end }
.pi-fin .pi-btn{ background: #fff !important; color: var(--negro) !important; -webkit-text-fill-color: var(--negro) }
.pi-fin .pi-btn:hover{ background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff }

/* lista editorial (experiencias, tours privados) */
.pi-lista-sec{ padding: 0 0 var(--sec); border-top: 1px solid var(--linea) }
.pi-lista{ list-style: none; margin: 0; padding: 0 }
.pi-i{ display: grid; grid-template-columns: clamp(160px,26vw,380px) minmax(0,1fr); gap: calc(48.0px * var(--k, 1)); align-items: center; padding: clamp(1.6rem,3vw,2.6rem) 0; border-bottom: 1px solid var(--linea) }
.pi-i:not(:has(.pi-fig)){ grid-template-columns: 1fr }
.pi-fig{ display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--negro) }
.pi-fig img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--e) }
.pi-fig:hover img{ transform: scale(1.06) }
.pi-h{ margin: .4rem 0 0; font-size: calc(48.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: .98 }
.pi-tx p{ margin: .7rem 0 0; max-width: 56ch; font-size: calc(17.9px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft) }
.pi-tx .pi-lnk{ margin-top: 1rem }

/* preguntas frecuentes */
.pf-idx{ display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: calc(38.4px * var(--k, 1)); padding-top: 1.2rem; border-top: 1px solid var(--linea) }
.pf-idx a{ font-size: calc(20.8px * var(--k, 1)); font-weight: 300; letter-spacing: -.02em; color: var(--mut); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--t) var(--e), border-color var(--t) var(--e) }
.pf-idx a:hover{ color: var(--ink); border-bottom-color: var(--acc) }
.pf-sec{ padding: var(--sec) 0; border-top: 1px solid var(--linea); scroll-margin-top: calc(var(--nav-h, 62px) + 1rem) }
.pf-grid{ display: grid; grid-template-columns: minmax(0,.36fr) minmax(0,.64fr); gap: calc(80.0px * var(--k, 1)); align-items: start }
.pf-hd{ position: sticky; top: calc(var(--nav-h, 62px) + 2rem) }
.pf-h{ margin: .5rem 0 0; font-size: calc(54.4px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: .98; max-width: 14ch }
.pf-l{ border-top: 1px solid var(--linea) }
.pf-q{ border-bottom: 1px solid var(--linea) }
.pf-q summary{ display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none; padding: clamp(1.1rem,2vw,1.5rem) 0; font-size: calc(19.5px * var(--k, 1)); font-weight: 600; letter-spacing: -.025em; transition: color var(--t) var(--e) }
.pf-q summary::-webkit-details-marker{ display: none }
.pf-q summary span{ flex: 1 1 auto }
.pf-q summary:hover, .pf-q[open] summary{ color: var(--acc) }
.pf-q summary i{ position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(11,7,8,.35); transition: background-color var(--t) var(--e), border-color var(--t) var(--e), transform var(--t) var(--e) }
.pf-q summary i::before, .pf-q summary i::after{ content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); transform: translate(-50%,-50%); transition: opacity var(--t) var(--e), background-color var(--t) var(--e) }
.pf-q summary i::before{ width: 9px; height: 1.5px }
.pf-q summary i::after{ width: 1.5px; height: 9px }
.pf-q[open] summary i{ background: var(--acc); border-color: var(--acc); transform: rotate(90deg) }
.pf-q[open] summary i::before{ background: #fff }
.pf-q[open] summary i::after{ opacity: 0 }
.pf-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--e) }
.pf-q[open] .pf-r{ grid-template-rows: 1fr }
.pf-r > div{ overflow: hidden }
.pf-r p{ margin: 0; padding: 0 3rem 1.4rem 0; max-width: 62ch; font-size: calc(17.3px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--soft) }

/* privacidad y 404 */
.pl-cuerpo{ padding: 0 0 var(--sec); border-top: 1px solid var(--linea) }
.pl-in{ max-width: 76ch; margin-inline: 0; padding-top: var(--sec) }
.pl-in h2{ margin: clamp(2rem,3.4vw,2.8rem) 0 .8rem; font-size: calc(33.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05 }
.pl-in h2:first-child{ margin-top: 0 }
.pl-in p, .pl-in li{ font-size: calc(17.9px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--soft); margin: 0 0 1rem }
.pl-in a{ color: var(--acc); text-decoration: underline; text-underline-offset: .18em }
.p4-open{ min-height: calc(calc(100 * var(--1vh)) - var(--nav-h, 62px)); display: flex; align-items: center }

@media (max-width: 800px){ .pi-i{ grid-template-columns: 1fr } .pi-fin-grid, .pf-grid{ grid-template-columns: 1fr } .pf-hd{ position: static; margin-bottom: 1rem } .pf-r{ transition: none } }
html[data-theme="dark"] .pi, body.dark .pi{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --negro: #0C0A0A; --linea: rgba(255,255,255,.12) }
html[data-theme="dark"] .pf-q summary i, body.dark .pf-q summary i{ border-color: rgba(255,255,255,.3) }
html[data-theme="dark"] .pi-fin, body.dark .pi-fin{ border-top: 1px solid rgba(255,255,255,.12) }
html[data-theme="dark"] .pi-fin .pi-btn, body.dark .pi-fin .pi-btn{ background: #F7F5F5 !important; color: #000 !important; -webkit-text-fill-color: #000 }