/* ===========================================================
   GLOBAL TOUR LLANOS - Sistema de diseño 2026
   Fuente: manual de identidad suministrado por el cliente
   =========================================================== */

@font-face {
  font-family: 'Montserrat GTL';
  src: url('assets/fonts/Montserrat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fashion Fetish GTL';
  src: url('assets/fonts/FashionFetish-Heavy.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  /* Colores oficiales del manual */
  --brand-orange: #FAA734;
  --brand-blue: #377ADF;
  --brand-sky: #50C4ED;
  --brand-mist: #D6E5E5;

  /* Alias semánticos + compatibilidad con las páginas existentes */
  --gtl-orange:      var(--brand-orange);
  --gtl-orange-deep: #225FB9;
  --gtl-orange-soft: #FFD085;
  --gtl-blue:        var(--brand-blue);
  --gtl-blue-deep:   #1E4FA4;
  --gtl-blue-mid:    #2C69C8;
  --gtl-blue-soft:   #83A9EA;
  --gtl-blue-pale:   #EAF2FC;
  --gtl-gold:        var(--brand-orange);
  --gtl-green:       #14857B;
  --gtl-green-deep:  #0E6258;
  --gtl-teal:        var(--brand-sky);
  --gtl-teal-deep:   #188CB7;

  /* Bases */
  --gtl-dark:   #15171B;
  --gtl-dark-2: #202C3D;
  --gtl-paper:  #F7FAFA;
  --gtl-paper-2:#E8F0F0;
  --gtl-earth:  #4E5D66;
  --gtl-earth-soft: #7B8B93;

  /* Badges — familia fría (azules / teal / cian), sin naranjas */
  --b-relax:   #2FA8C9;
  --b-turist:  #1E5BB0;
  --b-luna:    #5B57C9;
  --b-prom:    #0AA0E0;
  --b-mitad:   #38A9D9;
  --b-fin:     #0B2E5E;
  --b-fam:     #14A098;
  --b-pasadia: #16A6A0;
  --b-aventura:#2C6FB0;

  /* Tipografías incluidas en el manual */
  --font-display: 'Montserrat GTL', Montserrat, Arial, sans-serif;
  --font-accent:  'Montserrat GTL', Montserrat, Arial, sans-serif;
  --font-body:    'Montserrat GTL', Montserrat, Arial, sans-serif;

  /* Sombras cálidas */
  --shadow-sm: 0 4px 14px rgba(36, 73, 103, .08);
  --shadow-md: 0 16px 40px rgba(36, 73, 103, .13);
  --shadow-lg: 0 30px 72px rgba(36, 73, 103, .19);
  --shadow-orange: 0 12px 28px rgba(250, 167, 52, .28);

  --radius: 22px;
  --radius-lg: 34px;
  --maxw: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: linear-gradient(180deg, #fff 0, var(--gtl-paper) 24rem);
  color: var(--gtl-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* Trama mínima inspirada en el azul talco del manual */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .28;
  background-image: radial-gradient(circle at center, rgba(55,122,223,.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, transparent, #000 22rem, transparent 85%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: .98; margin: 0; letter-spacing: .005em; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 110px); }

/* Etiqueta de sección */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gtl-orange-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--gtl-orange);
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--gtl-orange);
  display: inline-block;
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  margin-top: 14px;
  max-width: 18ch;
}
.section-title.center { margin-inline: auto; text-align: center; }
.accent-ital { font-family: var(--font-accent); font-style: normal; font-weight: 800; color: var(--brand-blue); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand-orange); color: var(--gtl-dark); box-shadow: var(--shadow-orange); }
.btn-primary:hover { background: #FFB74F; box-shadow: 0 16px 34px rgba(250,167,52,.34); }
.btn-dark { background: var(--gtl-dark); color: var(--gtl-paper); }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: transparent; border: 1.5px solid var(--gtl-earth); color: var(--gtl-dark); }
.btn-outline:hover { background: var(--gtl-dark); color: #fff; border-color: var(--gtl-dark); }
.btn-green { background: var(--gtl-blue-deep); color: #fff; }
.btn-green:hover { background: var(--gtl-blue-deep); }

/* Badge de tipo de plan */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.badge--relax    { background: var(--brand-mist); color:var(--gtl-dark); }
.badge--turist   { background: var(--gtl-blue-deep); }
.badge--luna     { background: #514AA7; }
.badge--prom     { background: var(--brand-orange); color: var(--gtl-dark); }
.badge--mitad    { background: var(--brand-sky); color:var(--gtl-dark); }
.badge--fin      { background: var(--gtl-blue-deep); }
.badge--fam      { background: #BCE7D7; color:var(--gtl-dark); }
.badge--pasadia  { background: #BDECF7; color:var(--gtl-dark); }
.badge--aventura { background: var(--gtl-blue-deep); }
.badge--extremo  { background: var(--gtl-dark); }
.badge--vip      { background: var(--gtl-dark); }
.badge--tradicional { background: var(--gtl-earth); }

/* Paisajes ilustrados de marca: reemplazan los placeholders genéricos */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--ph-grad, linear-gradient(145deg, var(--brand-sky), var(--brand-blue) 58%, #1E4FA4));
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.ph::before,
.ph::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.ph::before {
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  top: 12%; right: 10%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 16px rgba(255,255,255,.08);
}
.ph::after {
  left: -10%; right: -10%; bottom: -18%; height: 58%;
  border-radius: 50% 55% 0 0;
  background: rgba(20,57,104,.34);
  transform: rotate(-4deg);
}
.ph--sunset { --ph-grad: linear-gradient(155deg, #78D4F3 0%, #377ADF 45%, #224E9D 100%); }
.ph--sea    { --ph-grad: linear-gradient(155deg, #D6F5FF 0%, #50C4ED 42%, #377ADF 100%); }
.ph--savanna{ --ph-grad: linear-gradient(155deg, #D6E5E5 0%, #78C8AC 46%, #377ADF 100%); }
.ph--jungle { --ph-grad: linear-gradient(155deg, #99E6D8 0%, #39AFA2 48%, #225FB9 100%); }
.ph--earth  { --ph-grad: linear-gradient(155deg, #D6E5E5 0%, #98B4C3 48%, #377ADF 100%); }
.ph--night  { --ph-grad: linear-gradient(155deg, #377ADF 0%, #223B6F 55%, #15171B 100%); }
.ph--coral  { --ph-grad: linear-gradient(155deg, #FFE1AD 0%, #FAA734 48%, #F1743D 100%); }
.ph--teal   { --ph-grad: linear-gradient(155deg, #C7F3FF 0%, #50C4ED 48%, #238AB8 100%); }

/* Cards */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(55,122,223,.1);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--gtl-earth); }
.field label .req { color: var(--gtl-orange-deep); }
.field input, .field select, .field textarea {
  min-height: 48px;
  padding: 13px 15px;
  border: 1.5px solid #C8D8E3;
  border-radius: 12px;
  background: #fff;
  color: var(--gtl-dark);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gtl-orange);
  box-shadow: 0 0 0 4px rgba(55,122,223,.16);
}
.field.valid input, .field.valid select, .field.valid textarea { border-color: var(--b-relax); }
.field.error input, .field.error select, .field.error textarea { border-color: #B42318; }
.field .msg { font-size: 0.78rem; color: #B42318; }

.phead h1 .w { color:var(--brand-orange) !important; font-family:var(--font-display) !important; font-style:normal !important; }

/* Utilidades */
.grid { display: grid; gap: 24px; }
.flow > * + * { margin-top: 1em; }
.muted { color: var(--gtl-earth); }
.center { text-align: center; }
.hide { display: none !important; }

/* Floating CTAs */
.floating { position: fixed; right: 22px; bottom: 22px; z-index: 9000; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .25s, box-shadow .25s;
}
.fab:hover { transform: scale(1.08); }
.fab--wa { background: #25D366; color:#fff; }
.fab--pay { background: var(--gtl-orange); color:var(--gtl-dark); }
.fab--wa, .fab--pay { border:2px solid #fff; }
.fab svg { display:block; width: 28px; height: 28px; }

/* Scrollbar tracks for horizontal sliders */
.hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--gtl-earth-soft); border-radius: 100px; }
.hscroll::-webkit-scrollbar-track { background: var(--gtl-paper-2); border-radius: 100px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}