/* ============================================================
   STELLIE TRAVELS — Sistema visual cálido "MAREA · WARM"
   Crema luminosa dominante + tinta cálida cinematográfica
   Oro con cuentagotas · verde-mar Caribe
   Display: Marcellus  ·  Texto/UI: Hanken Grotesk
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

/* -- Montserrat (display) -- */
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Light.otf")    format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Regular.otf")  format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Medium.otf")   format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-SemiBold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Bold.otf")     format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-ExtraBold.otf")format("opentype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Black.otf")    format("opentype"); font-weight:900; font-display:swap; }

/* -- Clash Grotesk (texto) -- */
@font-face { font-family:"Clash Grotesk"; src:url("assets/fonts/ClashGrotesk-Light.otf")    format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("assets/fonts/ClashGrotesk-Regular.otf")  format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("assets/fonts/ClashGrotesk-Medium.otf")   format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("assets/fonts/ClashGrotesk-Semibold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("assets/fonts/ClashGrotesk-Bold.otf")     format("opentype"); font-weight:700; font-display:swap; }

:root {
  /* ---- Neutros cálidos (luz) ---- */
  --canvas:    #F4EFE6;  /* hueso cálido — fondo dominante */
  --paper:     #FBF8F1;  /* tarjetas / papel más claro */
  --sand:      #EBE1CE;  /* sección clara variante (arena) */
  --sand-2:    #E4DAC4;  /* arena más profunda */
  --sand-border:#D8CCB2;

  /* ---- Tinta cálida (oscuro cinematográfico) ---- */
  --ink:       #12100B;  /* texto sobre claro · base oscura cálida */
  --petrol:    #100E0A;  /* secciones oscuras / nav glass / footer */
  --petrol-2:  #16130D;  /* variación de sección oscura */
  --sea-deep:  #15332C;  /* secciones inmersivas (jungla-mar cálido) */
  --sea-deep-2:#1d4a3e;

  /* ---- Oro ---- */
  --gold:      #C6A256;  /* acento sobre oscuro · CTA · líneas */
  --gold-soft: #DCC182;  /* hover / detalles */
  --gold-deep: #9C7C36;  /* acento sobre claro (eyebrows) */

  /* ---- Mar / jungla (San Blas) ---- */
  --sea:       #2E7D7B;
  --sea-light: #8FC9C4;
  --jungle:    #15302A;

  /* ---- Texto sobre claro ---- */
  --ink-soft:  rgba(18,16,11,0.66);
  --ink-faint: rgba(18,16,11,0.44);

  /* ---- Texto sobre oscuro (crema) ---- */
  --ivory:       #F4ECDD;
  --ivory-soft:  rgba(244,236,221,0.74);
  --ivory-faint: rgba(244,236,221,0.46);
  --muted:       #9a948a;  /* secundario que lee sobre oscuro */

  /* ---- Líneas ---- */
  --line-gold:      rgba(198,162,86,0.45);
  --line-gold-soft: rgba(198,162,86,0.22);
  --line-dark:      rgba(244,236,221,0.13);  /* sobre oscuro */
  --line-light:     rgba(18,16,11,0.13);     /* sobre claro */

  /* ---- Gradientes de respaldo (no chillones) ---- */
  --g-immersive: linear-gradient(155deg,#1d4a3e 0%,#11241d 70%,#0c1812 100%);
  --g-sea:       linear-gradient(155deg,#2E7D7B 0%,#103a37 80%);
  --g-night:     linear-gradient(160deg,#1a2a26 0%,#0a0f0c 85%);

  /* ---- Tipografía (v1: Montserrat póster + Clash Grotesk) ---- */
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Clash Grotesk", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, Menlo, monospace;
  --display-weight:900; --display-transform:uppercase; --display-tracking:-0.015em; --display-lh:0.94;

  /* ---- Escala ---- */
  --fs-hero:   clamp(46px, 7.2vw, 112px);
  --fs-d1:     clamp(38px, 5.4vw, 84px);
  --fs-d2:     clamp(30px, 3.9vw, 58px);
  --fs-h1:     clamp(27px, 3vw, 42px);
  --fs-h2:     clamp(23px, 2.3vw, 32px);
  --fs-h3:     clamp(19px, 1.7vw, 24px);
  --fs-body-lg:18.5px;
  --fs-body:   16.5px;
  --fs-sm:     14px;
  --fs-eyebrow:12px;

  --lh-body:   1.66;
  --tracking-eyebrow: 0.32em;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2,0.7,0.2,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:460ms; --dur-page:640ms;

  /* ---- Radius / sombra ---- */
  --r-sm:6px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-1: 0 4px 16px rgba(28,25,22,0.07);
  --shadow-2: 0 24px 60px -24px rgba(28,25,22,0.30);
}

/* ============================================================
   BASE — luz dominante
   ============================================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--canvas); }
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:var(--ink); }

/* ---- Grano sutil ---- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- Display ---- */
.display{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:var(--display-transform); letter-spacing:var(--display-tracking); line-height:var(--display-lh); margin:0; }
.fs-hero{ font-size:var(--fs-hero); }
.fs-d1{ font-size:var(--fs-d1); }
.fs-d2{ font-size:var(--fs-d2); }
.fs-h1{ font-size:var(--fs-h1); }
.fs-h2{ font-size:var(--fs-h2); }
.fs-h3{ font-size:var(--fs-h3); }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; text-wrap:pretty; color:var(--ink-soft); }
strong{ font-weight:600; color:var(--ink); }
a{ color:inherit; }

.lead{ font-size:var(--fs-body-lg); line-height:1.62; color:var(--ink-soft); }
.muted{ color:var(--ink-faint); }

/* ---- Eyebrow / kicker dorado ---- */
.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--gold-deep); display:inline-flex; align-items:center; gap:14px;
}
.eyebrow.ruled::before{ content:""; width:38px; height:1px; background:currentColor; opacity:.85; flex:none; }
.eyebrow.ruled.both::after{ content:""; width:38px; height:1px; background:currentColor; opacity:.85; flex:none; }

/* ============================================================
   SECCIONES — ritmo claro / oscuro
   ============================================================ */
.container{ max-width:1200px; margin:0 auto; padding:0 32px; }
.container-wide{ max-width:1400px; margin:0 auto; padding:0 40px; }
.section{ padding:128px 0; position:relative; }
.section-tight{ padding:88px 0; position:relative; }

/* claras */
.bg-canvas{ background:var(--canvas); color:var(--ink); }
.bg-paper{ background:var(--paper); color:var(--ink); }
.bg-sand{ background:var(--sand); color:var(--ink); }
.bg-sand-2{ background:var(--sand-2); color:var(--ink); }

/* oscuras (cinematográficas) — texto crema, eyebrow oro */
.bg-petrol,.bg-petrol-2,.bg-sea{ color:var(--ivory); }
.bg-petrol{ background:var(--petrol); }
.bg-petrol-2{ background:var(--petrol-2); }
.bg-sea{ background:var(--sea-deep); }
.bg-petrol p,.bg-petrol-2 p,.bg-sea p{ color:var(--ivory-soft); }
.bg-petrol strong,.bg-petrol-2 strong,.bg-sea strong{ color:var(--ivory); }
.bg-petrol .lead,.bg-petrol-2 .lead,.bg-sea .lead{ color:var(--ivory-soft); }
.bg-petrol .eyebrow,.bg-petrol-2 .eyebrow,.bg-sea .eyebrow{ color:var(--gold); }
.bg-petrol .muted,.bg-petrol-2 .muted,.bg-sea .muted{ color:var(--muted); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:0.04em;
  padding:16px 32px; border-radius:var(--r-pill); border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap;
  transition:all var(--dur-base) var(--ease-out);
}
.btn:active{ transform:scale(.985); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-soft); }
/* outline sobre oscuro */
.btn-outline{ background:transparent; color:var(--ivory); border:1px solid var(--line-gold); padding:15px 30px; }
.btn-outline:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
/* outline sobre claro */
.btn-outline-ink{ background:transparent; color:var(--ink); border:1px solid rgba(18,16,11,0.3); padding:15px 30px; }
.btn-outline-ink:hover{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.btn-ghost{ background:none; padding:8px 0; border-radius:0; color:inherit; gap:9px; border-bottom:1px solid var(--line-gold); }
.btn-ghost:hover{ gap:15px; color:var(--gold-deep); }
.btn-lg{ padding:18px 40px; font-size:15px; }
.btn-sm{ padding:11px 22px; font-size:13px; }
.arrow::after{ content:"→"; transition:transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow::after{ transform:translateX(4px); }
.btn-wa{ background:#1f9d57; color:#fff; }
.btn-wa:hover{ background:#188047; }

/* ============================================================
   FOTOGRAFÍA
   ============================================================ */
.photo{ position:relative; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; }
.scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,10,.84) 0%, rgba(8,12,10,.28) 48%, rgba(8,12,10,.08) 100%); }
.scrim-bottom{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,10,.76) 0%, transparent 58%); }
.scrim-soft{ position:absolute; inset:0; background:rgba(8,12,10,.38); }

/* ---- Reglas ---- */
.rule-gold{ height:1px; width:100%; background:var(--line-gold); border:0; }
.rule-dark{ height:1px; width:100%; background:var(--line-dark); border:0; }
.rule-light{ height:1px; width:100%; background:var(--line-light); border:0; }

/* ---- Tags / chips ---- */
.tag{ display:inline-flex; align-items:center; font-family:var(--font-body); font-weight:600;
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; padding:6px 13px; border-radius:var(--r-pill); }
.tag-gold{ background:var(--gold); color:var(--ink); }
.tag-ink{ background:rgba(8,12,10,.62); color:var(--ivory); backdrop-filter:blur(4px); border:1px solid var(--line-gold-soft); }
.tag-outline{ border:1px solid var(--line-gold); color:var(--gold); }

/* ============================================================
   INPUTS — claros por defecto
   ============================================================ */
.input,.textarea,.select{
  font-family:var(--font-body); font-size:15px; width:100%; padding:15px 16px; border-radius:var(--r-sm);
  border:1px solid var(--sand-border); background:var(--paper); color:var(--ink);
  outline:none; transition:border-color var(--dur-base), background var(--dur-base);
}
.input:focus,.textarea:focus,.select:focus{ border-color:var(--gold); }
.input::placeholder,.textarea::placeholder{ color:var(--ink-faint); }
.label{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:block; }
/* inputs sobre oscuro */
.bg-petrol .input,.bg-petrol-2 .input,.bg-sea .input,
.bg-petrol .textarea,.bg-petrol-2 .textarea,.bg-sea .textarea,
.bg-petrol .select,.bg-petrol-2 .select,.bg-sea .select{
  background:rgba(244,236,221,0.05); border-color:var(--line-dark); color:var(--ivory);
}
.bg-petrol .label,.bg-petrol-2 .label,.bg-sea .label{ color:var(--muted); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   NAV — translúcida sobre héroe oscuro, sólida al scroll
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:24px 40px;
  transition:background var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out), border-color var(--dur-slow);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(16,14,10,.82); backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1);
  border-bottom:1px solid var(--line-gold-soft); padding:15px 40px;
}
.brand{ font-family:var(--font-display); font-weight:800; letter-spacing:0.2em; text-transform:uppercase; font-size:19px;
  color:var(--ivory); text-decoration:none; display:flex; align-items:center; gap:3px; line-height:1; }
.brand .dot{ color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-link{ font-family:var(--font-body); font-weight:500; font-size:13.5px; letter-spacing:0.03em;
  color:var(--ivory); text-decoration:none; opacity:.82; transition:opacity var(--dur-base), color var(--dur-base); }
.nav-link:hover,.nav-link.active{ opacity:1; color:var(--gold); }
.nav-right{ display:flex; align-items:center; gap:22px; }
.lang{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; color:var(--ivory-soft); letter-spacing:.05em; }
.lang button{ background:none; border:none; color:inherit; cursor:pointer; font:inherit; padding:0; opacity:.55; transition:opacity var(--dur-base), color var(--dur-base); }
.lang button.on{ opacity:1; color:var(--gold); }
.lang .sep{ opacity:.4; }
.nav-burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.nav-burger span{ width:24px; height:1.5px; background:var(--ivory); display:block; }

.drawer{ position:fixed; inset:0; z-index:65; background:rgba(16,14,10,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); }
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer a{ color:var(--ivory); text-decoration:none; font-family:var(--font-display); letter-spacing:.06em; font-size:28px; }
.drawer a:hover{ color:var(--gold); }
.drawer .close{ position:absolute; top:26px; right:30px; background:none; border:none; color:var(--ivory); font-size:32px; cursor:pointer; line-height:1; }

/* ============================================================
   FOOTER — tinta cálida
   ============================================================ */
.footer{ background:var(--petrol); color:var(--ivory); padding:100px 0 40px; border-top:1px solid var(--line-gold-soft); }
.footer a{ color:var(--ivory-soft); text-decoration:none; transition:color var(--dur-base); }
.footer a:hover{ color:var(--gold); }
.footer .eyebrow{ color:var(--gold); }
.footgrid{ display:grid; gap:48px; grid-template-columns:1.5fr 1fr 1fr 1fr; }
@media(max-width:820px){ .footgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footgrid{ grid-template-columns:1fr; } }
.footcol h5{ font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.footcol a{ display:block; padding:6px 0; font-size:14px; }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{ position:fixed; right:26px; bottom:26px; z-index:70; width:58px; height:58px; border-radius:50%;
  background:#1f9d57; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(31,157,87,.6); text-decoration:none; transition:transform var(--dur-base) var(--ease-out); }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:30px; height:30px; }

/* ============================================================
   HELPERS
   ============================================================ */
.split{ display:grid; gap:64px; align-items:center; }
@media(min-width:880px){ .split.cols-2{ grid-template-columns:1fr 1fr; } }
.stack-sm > * + *{ margin-top:14px; }
.center{ text-align:center; }
.maxw-sm{ max-width:540px; } .maxw-md{ max-width:680px; } .maxw-lg{ max-width:820px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.secthead{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.secthead.center{ align-items:center; text-align:center; }

/* ---- Bilingüe ---- */
html[data-lang="en"] [lang="es"]{ display:none !important; }
html[data-lang="es"] [lang="en"]{ display:none !important; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .section{ padding:88px 0; }
  .section-tight{ padding:64px 0; }
  .container,.container-wide{ padding:0 22px; }
  .split{ gap:40px; }
}