/* ==========================================================================
   TRAVEL GUIDE — rediseño visual (prefijo .tg2-)
   Reusa el sistema: --slate --slate-ink --arena --cream --gold --gold-deep,
   "Bon Vivant" (títulos) / "Montserrat" (textos), .section .wrap .band--*.
   ========================================================================== */

/* --- Anclas bajo el header fijo + el índice sticky ----------------------- */
#getting-here, #travel-documents, #on-the-ground, #worth-packing,
#is-ecuador-safe, #weather, #tipping, #faq { scroll-margin-top: 168px; }

/* --- Índice sticky de secciones (como .exp-nav de las fichas de tour) ---- */
.tg2-nav {
  position: sticky; top: 100px; z-index: 40;
  background: rgba(44,63,73,.97);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tg2-nav__inner { display: flex; align-items: center; gap: 1.4rem; justify-content: space-between; padding-block: .5rem; }
.tg2-nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(.7rem, 1.6vw, 1.5rem); margin: 0; padding: 0; }
.tg2-nav__list a {
  font-family: "Montserrat", sans-serif; font-size: .67rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.76);
  text-decoration: none; padding: .45rem 0; display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tg2-nav__list a:hover { color: #fff; border-color: var(--gold); }
.tg2-nav__cta { padding: .5rem 1.15rem; font-size: .68rem; flex: none; }
@media (max-width: 1080px) { .tg2-nav { display: none; } }

/* --- Medallón de ícono dorado (coherente en toda la página) -------------- */
.tg2-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(224,169,28,.42); background: rgba(239,187,47,.10);
  color: var(--gold-deep); line-height: 0;
}
.tg2-ico svg { width: 25px; height: 25px; }
.tg2-ico--lg { width: 64px; height: 64px; }
.tg2-ico--lg svg { width: 30px; height: 30px; }
.tg2-ico--sm { width: 44px; height: 44px; }
.tg2-ico--sm svg { width: 21px; height: 21px; }
.tg2-ico--dark { color: var(--gold); border-color: rgba(239,187,47,.40); background: rgba(239,187,47,.13); }

/* --- Cabeceras con más aire --------------------------------------------- */
.tg2-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tg2-head .section__title { line-height: 1.1; }
.tg2-head--left { text-align: left; }
.tg2-lead-c { max-width: 62ch; margin-inline: auto; text-align: center; }

/* ==========================================================================
   1. GETTING HERE — split editorial: texto + rutas / foto vertical
   ========================================================================== */
.tg2-arrival__grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(2rem, 5vw, 4.2rem); align-items: stretch;
}
.tg2-arrival__fig {
  margin: 0; border-radius: 6px; overflow: hidden; position: relative;
  box-shadow: 0 26px 60px rgba(28,40,47,.24);
}
.tg2-arrival__fig img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s var(--ease);
}
.tg2-arrival__fig:hover img { transform: scale(1.05); }
.tg2-arrival__text .hairline { margin: 1.1rem 0 1.4rem; }
.tg2-arrival__text .lead { margin: 0; }
.tg2-routes { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.tg2-route {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 1.8vw, 1.4rem);
  padding: 1.6rem 0; border-top: 1px solid rgba(58,83,95,.16);
}
.tg2-route:first-child { border-top: 0; padding-top: 0; }
.tg2-route__k {
  font-family: "Montserrat", sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .4rem;
}
.tg2-route__t { font-family: "Bon Vivant", serif; font-weight: 400; font-size: 1.42rem; color: var(--slate-ink); margin: 0 0 .55rem; line-height: 1.2; }
.tg2-route__b p { color: #4f5b62; line-height: 1.74; margin: 0 0 .7rem; }
.tg2-route__b p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .tg2-arrival__grid { grid-template-columns: 1fr; }
  .tg2-arrival__fig { order: -1; }
  .tg2-arrival__fig img { aspect-ratio: 4/3; height: auto; }
}

/* ==========================================================================
   2. TRAVEL DOCUMENTS — tarjetas de vidrio sobre foto (más aire)
   ========================================================================== */
.tg2-docs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); align-items: stretch; }
.tg2-doc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,.96); border-radius: 16px;
  padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tg2-doc:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(0,0,0,.32); }
.tg2-doc .tg2-ico { margin-bottom: 1.25rem; }
.tg2-doc__k {
  font-family: "Montserrat", sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .5rem;
}
.tg2-doc__t { font-family: "Bon Vivant", serif; font-weight: 400; font-size: 1.45rem; color: var(--slate); margin: 0 0 .8rem; line-height: 1.2; }
.tg2-doc__b p { color: #4a565d; line-height: 1.72; margin: 0 0 .7rem; font-size: .96rem; }
.tg2-doc__b p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .tg2-docs__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   3. ON THE GROUND — foto vertical + índice de datos prácticos legible
   ========================================================================== */
.tg2-ground__grid {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.2rem); align-items: stretch;
}
.tg2-ground__fig {
  margin: 0; border-radius: 6px; overflow: hidden; position: relative;
  box-shadow: 0 26px 60px rgba(28,40,47,.24);
}
.tg2-ground__fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease); }
.tg2-ground__fig:hover img { transform: scale(1.05); }
.tg2-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.6rem, 3vw, 2.8rem); }
.tg2-fact {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 1.4rem 0; border-top: 1px solid rgba(58,83,95,.15);
}
.tg2-facts > .tg2-fact:nth-child(1), .tg2-facts > .tg2-fact:nth-child(2) { border-top: 0; padding-top: 0; }
.tg2-fact__n { font-family: "Bon Vivant", serif; font-weight: 400; font-size: 1.22rem; color: var(--slate-ink); margin: 0 0 .35rem; line-height: 1.2; }
.tg2-fact__x { color: #4f5b62; font-size: .92rem; line-height: 1.68; margin: 0; }
@media (max-width: 1000px) { .tg2-facts { grid-template-columns: 1fr; } .tg2-facts > .tg2-fact:nth-child(2) { border-top: 1px solid rgba(58,83,95,.15); padding-top: 1.4rem; } }
@media (max-width: 900px) {
  .tg2-ground__grid { grid-template-columns: 1fr; }
  .tg2-ground__fig { }
  .tg2-ground__fig img { aspect-ratio: 3/2; height: auto; }
}

/* ==========================================================================
   4. WORTH PACKING — tarjetas oscuras con medallón dorado
   ========================================================================== */
.tg2-pack__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.3rem, 3vw, 2.2rem); align-items: stretch; }
.tg2-pack-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px; padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem);
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.tg2-pack-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.09); border-color: rgba(239,187,47,.35); }
.tg2-pack-card .tg2-ico { margin-bottom: 1.25rem; }
.tg2-pack .tg2-pack__k {
  font-family: "Montserrat", sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem;
}
.tg2-pack__t { font-family: "Bon Vivant", serif; font-weight: 400; font-size: 1.42rem; color: #fff; margin: 0 0 .75rem; line-height: 1.2; }
.tg2-pack__b p { color: rgba(255,255,255,.82); line-height: 1.72; margin: 0 0 .6rem; font-size: .96rem; }
.tg2-pack__b p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .tg2-pack__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   5. IS ECUADOR SAFE — banda con foto + tarjeta de vidrio (patrón .about-events)
   ========================================================================== */
.tg2-safe {
  position: relative; overflow: hidden; background-size: cover; background-position: center;
  background-attachment: fixed; padding-block: clamp(3.6rem, 8vw, 7rem);
}
.tg2-safe__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(265deg, rgba(11,18,23,.92) 0%, rgba(11,18,23,.66) 46%, rgba(11,18,23,.18) 100%);
}
.tg2-safe > .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.tg2-safe__card {
  max-width: 640px;
  background: rgba(21,33,40,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--gold);
  border-radius: 16px; padding: clamp(1.7rem, 3.4vw, 2.9rem);
  box-shadow: 0 28px 64px rgba(0,0,0,.42);
}
.tg2-safe__card .eyebrow { margin-bottom: .7rem; }
.tg2-safe__t {
  font-family: "Bon Vivant", serif; font-weight: 400; color: #fff;
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.7rem); line-height: 1.1; margin: 0;
}
.tg2-safe__card .hairline { margin: 1.2rem 0 1.4rem; }
.tg2-safe__card .lead { color: #fff; margin: 0 0 1.2rem; }
.tg2-safe__card p { color: rgba(255,255,255,.86); line-height: 1.78; margin: 0; }
@media (max-width: 900px) {
  .tg2-safe { background-attachment: scroll; }
  .tg2-safe > .wrap { justify-content: center; }
}

/* ==========================================================================
   6. TIPPING — tarjetas con medallón + cifra dorada grande
   ========================================================================== */
.tg2-tip__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 1.9rem); align-items: stretch; }
.tg2-tip-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 1.8vw, 1.4rem);
  background: #fff; border: 1px solid rgba(58,83,95,.08); border-radius: 16px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: 0 14px 34px rgba(44,63,73,.09);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tg2-tip-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(44,63,73,.15); }
.tg2-tip__k {
  font-family: "Montserrat", sans-serif; font-size: .69rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .35rem;
}
.tg2-tip__amt {
  font-family: "Bon Vivant", serif; font-weight: 400; color: var(--gold-deep);
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.95rem); line-height: 1.14; margin: 0 0 .7rem;
}
.tg2-tip__b p { color: #4f5b62; line-height: 1.7; font-size: .95rem; margin: 0 0 .6rem; }
.tg2-tip__b p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .tg2-tip__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   7. GOOD TO KNOW — dos columnas: título sticky + acordeón ancho
   ========================================================================== */
/* .faq-band lleva overflow:hidden (recorta el isotipo) y eso anula el sticky.
   Con overflow:clip se sigue recortando pero el sticky funciona. */
@supports (overflow: clip) { .tg2-faq.faq-band { overflow: clip; } }
.tg2-faq__grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(2rem, 5vw, 4.2rem); align-items: start; }
.tg2-faq__aside { position: sticky; top: 176px; }
.tg2-faq__aside .section__title { color: #fff; margin: 0; }
.tg2-faq__aside .eyebrow { margin-bottom: .7rem; }
.tg2-faq__aside .hairline { margin: 1.2rem 0 0; }
.tg2-faq .faq details { padding: 1.35rem 0; }
.tg2-faq .faq details:first-child { padding-top: 0; }
.tg2-faq .faq summary { font-size: clamp(1.16rem, 1.05rem + .35vw, 1.38rem); line-height: 1.3; }
.tg2-faq .faq details > p { line-height: 1.78; }
@media (max-width: 900px) {
  .tg2-faq__grid { grid-template-columns: 1fr; }
  .tg2-faq__aside { position: static; }
}