/* =========================================================================
   ZAKU KWARIWAN & UTIBUNA — sistema de diseño
   -------------------------------------------------------------------------
   Concepto: "el tejido de la vida". Un hilo continuo (el mismo motivo que
   nombra a Kwariwan, "el lugar donde se teje la vida") cose visualmente
   cada sección de la página, con pequeños nudos romboidales que citan los
   patrones geométricos de las mochilas arhuacas. Es el único elemento
   decorativo recurrente — todo lo demás se mantiene sobrio.

   Tipografía: Fraunces (display, con su eje óptico da un trazo tallado a
   mano) + Inter (texto, extremadamente legible en ES/EN/DE para cuando se
   sumen los otros idiomas).

   Nota para quien continúe este código: variables en :root, un archivo
   CSS por ahora (el sitio es pequeño), sin build step ni dependencias.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340..600;1,9..144,340..600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- color: materiales del territorio, no una paleta genérica ---- */
  --stone:      #EFE7D6;   /* algodón crudo / lana sin teñir — fondo base */
  --stone-deep: #E4D9C0;   /* variante para bandas y tarjetas */
  --paper:      #FAF6EC;   /* casi blanco, para tarjetas sobre stone-deep */
  --ink:        #26201A;   /* texto principal — tierra quemada, casi negro */
  --ink-soft:   #4A4033;   /* texto secundario */
  --forest:     #2E3F33;   /* verde niebla de la Sierra — secciones oscuras */
  --forest-deep:#1E2B23;
  --clay:       #A8452E;   /* la faja roja — acento, uso deliberadamente escaso */
  --gold:       #B9873F;   /* hilo dorado / luz de amanecer en los picos */
  --gold-soft:  #D8B876;

  --radius: 3px;
  --max: 1180px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.5em 0; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em 0; }
.lede { font-size: 1.15rem; color: var(--ink-soft); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
section { padding: 88px 0; }
@media (max-width: 640px) { section { padding: 56px 0; } .wrap { padding: 0 20px; } }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
}
a.btn:hover, button.btn:hover { transform: translateY(-1px); }
a.btn:focus-visible, button.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.btn-primary { background: var(--clay); color: var(--paper); }
.btn-primary:hover { background: #8f3a26; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); }
.btn-on-dark { background: var(--gold); color: var(--forest-deep); }
.btn-on-dark:hover { background: var(--gold-soft); }

/* ---------------------------------------------------------------------- */
/* Header / nav                                                          */
/* ---------------------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(239,231,214,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(38,32,26,0.1);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.nav-brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.nav-brand span { color: var(--clay); }
.nav-logo { width: 96px; height: auto; display: block; }
footer.site h4 { display: flex; align-items: center; gap: 10px; }
.footer-logo { width: 76px; height: auto; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--clay); }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--stone); border-bottom: 1px solid rgba(38,32,26,0.1);
    max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .nav-links.open { max-height: 420px; }
  .nav-links li { border-top: 1px solid rgba(38,32,26,0.08); }
  .nav-links a { display: block; padding: 16px 28px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }
  .nav .btn-primary.desktop-only { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Hilo — el motivo firma, usado como separador entre secciones          */
/* ---------------------------------------------------------------------- */
.thread { display: block; width: 100%; height: 34px; }
.thread svg { width: 100%; height: 100%; display: block; }
.thread.on-dark .thread-line { stroke: var(--gold-soft); }
.thread.on-dark .thread-knot { fill: var(--gold-soft); }
.thread-line { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.55; }
.thread-knot { fill: var(--clay); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 110px 0 70px 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--stone) 0%, var(--stone) 55%, var(--stone-deep) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow { margin-bottom: 22px; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 46ch; margin-top: 22px; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-quote {
  margin-top: 64px; max-width: 640px;
  font-family: var(--font-display); font-style: italic; font-size: 1.18rem;
  color: var(--ink-soft); line-height: 1.55; position: relative; padding-left: 26px;
  border-left: 2px solid var(--clay);
}

/* mochila-pattern mark, used sparingly as a section accent */
.weave-mark { width: 46px; height: 14px; opacity: 0.9; }

/* ---------------------------------------------------------------------- */
/* Secciones                                                              */
/* ---------------------------------------------------------------------- */
.section-dark { background: var(--forest); color: var(--stone); }
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark .lede { color: #C9D2C6; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }

.img-frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--forest); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame.wide { aspect-ratio: 16/10; }
.img-frame.natural { aspect-ratio: auto; background: none; }
.img-frame.natural img { height: auto; object-fit: initial; }
.img-caption { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid rgba(38,32,26,0.09);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.card .num { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.6rem; display: block; margin-bottom: 10px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0; }
.card a.card-link { text-decoration: none; color: var(--clay); font-weight: 600; font-size: 0.88rem; display: inline-block; margin-top: 14px; }

.pillbox {
  display: inline-block; background: var(--forest); color: var(--paper);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 20px;
}

.stat-row { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 36px; }
.stat b { font-family: var(--font-display); font-size: 2rem; display: block; color: var(--gold); font-weight: 500; }
.stat span { font-size: 0.85rem; color: var(--ink-soft); }
.section-dark .stat span { color: #C9D2C6; }

table.pricing { width: 100%; border-collapse: collapse; margin-top: 18px; }
table.pricing td { padding: 10px 0; border-bottom: 1px solid rgba(250,246,236,0.15); }
table.pricing td:last-child { text-align: right; font-weight: 600; }

.callout {
  background: var(--stone-deep); border-left: 3px solid var(--gold);
  padding: 20px 26px; border-radius: var(--radius); font-size: 0.95rem;
}
.callout.on-dark { background: rgba(250,246,236,0.06); border-left-color: var(--gold-soft); }

.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.video-frame { position: relative; display: block; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame img.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%; background: rgba(20,16,10,0.6);
  border: 2px solid rgba(250,246,236,0.85); display: flex; align-items: center; justify-content: center;
  color: var(--stone); font-size: 1.2rem; pointer-events: none;
}
.video-caption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 700px) { .video-grid { grid-template-columns: 1fr; } }

.placeholder-note {
  font-size: 0.82rem; color: var(--clay); background: #F4E3DC; border: 1px dashed var(--clay);
  padding: 10px 14px; border-radius: var(--radius); margin-top: 10px;
}

/* itinerary list used on program pages */
.day-list { margin-top: 20px; }
.day {
  display: grid; grid-template-columns: 130px 1fr; gap: 24px;
  padding: 26px 0; border-top: 1px solid rgba(38,32,26,0.12);
}
.day:last-child { border-bottom: 1px solid rgba(38,32,26,0.12); }
.day .day-label { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.05rem; }
.day h4 { font-family: var(--font-body); font-weight: 700; margin: 0 0 8px 0; font-size: 1rem; color: var(--ink); }
.day ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.95rem; }
.day ul li { margin-bottom: 4px; }
.section-dark .day { border-top-color: rgba(250,246,236,0.18); }
.section-dark .day:last-child { border-bottom-color: rgba(250,246,236,0.18); }
.section-dark .day h4 { color: var(--paper); }
.section-dark .day ul { color: #C9D2C6; }
@media (max-width: 620px) { .day { grid-template-columns: 1fr; gap: 6px; } }

/* ---------------------------------------------------------------------- */
/* Galería — grid de tarjetas uniformes, como en el sitio Wix original    */
/* ---------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.gallery-grid .gitem {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
  background: var(--stone-deep);
}
.gallery-grid .gitem img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.gallery-grid .gitem:hover img { transform: scale(1.06); }

/* Slider horizontal, como en Wix */
.gallery-slider-wrap { position: relative; margin-top: 40px; }
.gallery-slider {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slider .gitem {
  flex: 0 0 200px; aspect-ratio: 3/4; scroll-snap-align: start;
  overflow: hidden; border-radius: var(--radius); cursor: zoom-in; background: var(--stone-deep);
}
.gallery-slider .gitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery-slider .gitem:hover img { transform: scale(1.06); }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--paper); border: 1px solid rgba(38,32,26,0.15);
  color: var(--ink); width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 5;
}
.slider-arrow.prev { left: -14px; }
.slider-arrow.next { right: -14px; }
@media (max-width: 700px) {
  .gallery-slider .gitem { flex-basis: 150px; }
  .slider-arrow { display: none; }
}

.lightbox {
  position: fixed; inset: 0; background: rgba(20,16,10,0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 4px; display: block; }
.lightbox-close {
  position: absolute; top: 22px; right: 28px; background: none; border: none;
  color: var(--stone); font-size: 2.2rem; line-height: 1; cursor: pointer; font-family: var(--font-body);
}
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(250,246,236,0.12); border: 1px solid rgba(250,246,236,0.3);
  color: var(--stone); width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow:hover { background: rgba(250,246,236,0.22); }
.lightbox-arrow.prev { left: 18px; }
.lightbox-arrow.next { right: 18px; }
@media (max-width: 640px) {
  .lightbox-arrow { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox { padding: 16px; }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
footer.site {
  background: var(--forest-deep); color: #CBD3C7; padding: 64px 0 28px 0;
}
footer.site h4 { color: var(--paper); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
footer.site a { text-decoration: none; color: #CBD3C7; }
footer.site a:hover { color: var(--gold-soft); }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-bottom {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.78rem; color: #8FA091;
}
.social-row { display: flex; gap: 14px; margin-top: 8px; }
.social-row a { border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.social-row a:hover { border-color: var(--gold-soft); }

.lang-switch { display: flex; gap: 6px; font-size: 0.78rem; }
.lang-switch span, .lang-switch a { padding: 3px 7px; border-radius: 3px; text-decoration: none; color: var(--ink-soft); }
.lang-switch span[aria-current] { background: var(--ink); color: var(--stone); }

/* Marcador de imagen pendiente — para que quede evidente qué falta por
   reemplazar con fotografía real antes de publicar. */
.photo-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, var(--stone-deep), var(--stone-deep) 10px, #DCCFAE 10px, #DCCFAE 20px);
  border: 1px dashed var(--ink-soft);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.photo-frame.wide { aspect-ratio: 16/9; }
.photo-frame span {
  font-size: 0.78rem; color: var(--ink-soft); background: rgba(250,246,236,0.88);
  padding: 8px 12px; border-radius: var(--radius); line-height: 1.4;
}

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--ink); color: var(--stone); padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }