/* =============================================
   HONEY'B — styles.css  v2
   Cinematic · Organic Luxury · Brand Storytelling
   ============================================= */

:root {
  --gold:       #C8972A;
  --gold-light: #E8C97A;
  --gold-pale:  #F5E6C8;
  --gold-deep:  #8B6514;
  --cream:      #FAF6EE;
  --cream-mid:  #F0E8D4;
  --dark:       #1A1208;
  --dark-mid:   #2D1F0A;
  --dark-warm:  #3D2E12;
  --text:       #2A1E08;
  --text-mid:   #5A4520;
  --text-soft:  #9A7C45;
  --white:      #FFFFFF;
  --green:      #2D4A2D;

  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease2: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 72px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Animations ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(36px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes lineIn   { from { width:0 } to { width:100% } }
@keyframes hexDrift { 0%{transform:translateY(0) rotate(0)} 100%{transform:translateY(-28px) rotate(12deg)} }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes mapPulse { 0%,100%{r:12;opacity:.4} 50%{r:18;opacity:.1} }
@keyframes drip     { 0%{transform:scaleY(0);transform-origin:top} 100%{transform:scaleY(1);transform-origin:top} }

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Buttons ── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--dark);
  font-weight: 700; font-size: .9rem;
  padding: 14px 28px; border-radius: 50px;
  box-shadow: 0 4px 24px rgba(200,151,42,.4);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(200,151,42,.5); }
.btn-gold.full  { width:100%; justify-content:center; }
.btn-gold.big   { width:100%; justify-content:center; font-size:1rem; padding:18px 32px; }

.btn-outline-light {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--cream);
  font-weight: 600; font-size: .9rem;
  padding: 13px 28px; border-radius: 50px;
  border: 1.5px solid rgba(250,246,238,.35);
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-outline-light:hover { border-color: var(--gold); background: rgba(200,151,42,.1); transform: translateY(-2px); }
.btn-outline-light.big  { width:100%; justify-content:center; font-size:1rem; padding:17px 32px; }

.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  font-weight: 600; font-size: .9rem;
  padding: 14px 24px; border-radius: 50px;
  transition: background .2s, transform .2s;
}
.btn-wa:hover { background: #1ebe5d; transform: translateY(-2px); }

.btn-outline-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--gold-light);
  font-weight: 600; font-size: .9rem;
  padding: 13px 28px; border-radius: 50px;
  border: 1.5px solid rgba(200,151,42,.4);
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-outline-gold:hover { border-color: var(--gold); background: rgba(200,151,42,.1); transform: translateY(-2px); }

/* ── Section helpers ── */
.s-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.s-label.light { color: var(--gold-light); }

.s-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1;
  color: var(--text); margin-bottom: 18px;
}
.s-title em { font-style: italic; color: var(--gold); }
.s-title.light { color: var(--cream); }
.s-title.light em { color: var(--gold-light); }

.s-sub {
  font-size: 1.05rem; color: var(--text-mid);
  line-height: 1.7; max-width: 640px; margin-bottom: 52px;
}
.s-sub.light { color: rgba(250,246,238,.65); }

.s-light  { background: var(--cream);     padding: 100px 0; }
.s-dark   { background: var(--dark);      padding: 100px 0; }
.s-warm   { background: var(--cream-mid); padding: 100px 0; }
.s-cream  { background: #F2EAD5;          padding: 100px 0; }
.s-tierra { background: #EDE4CF;          padding: 0; }
.s-hotel  { position: relative; overflow: hidden; }

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; z-index: 1000;
  transition: background .4s var(--ease), box-shadow .4s;
}
#nav.scrolled {
  background: rgba(250,246,238,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(200,151,42,.18);
}
.nav-logo {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.25rem; letter-spacing: .15em; color: var(--gold-light);
  transition: color .2s;
}
#nav.scrolled .nav-logo { color: var(--gold); }

.nav-links { display:flex; list-style:none; gap:24px; }
.nav-links a {
  font-size: .84rem; font-weight: 500; color: rgba(250,246,238,.8);
  letter-spacing: .03em; transition: color .2s;
}
#nav.scrolled .nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--gold); }

.nav-cta {
  background: var(--gold); color: var(--dark);
  font-size: .84rem; font-weight: 700;
  padding: 9px 20px; border-radius: 50px;
  transition: background .2s, transform .2s;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }

.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:rgba(250,246,238,.8); transition:all .3s; }
#nav.scrolled .hamburger span { background: var(--text); }

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
#hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 64px) 8% 80px;
  overflow: hidden;
  background: linear-gradient(160deg, #f5efe0 0%, #e8d9bb 40%, #c8a96a 100%);
}

/* Piso en perspectiva 3D */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: 50% 100%;
  transform: perspective(600px) rotateX(55deg) scale(2.5);
  background-image:
    linear-gradient(rgba(180,130,50,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,130,50,0.35) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  pointer-events: none;
}

/* Gradiente encima para fundir el piso con el fondo */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(245,239,224,0.0) 0%,
      rgba(245,239,224,0.0) 40%,
      rgba(245,239,224,0.85) 75%,
      rgba(245,239,224,1.0) 100%),
    linear-gradient(to right,
      rgba(245,239,224,0.6) 0%,
      transparent 30%,
      transparent 70%,
      rgba(245,239,224,0.6) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.hero-media { display: none; }
.hex-field  { display: none; }
.hero-grain { display: none; }

/* ════════════════════════════════════════════
   HERO CARRUSEL
════════════════════════════════════════════ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 6s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(245,239,224,0.55) 0%,
    rgba(245,239,224,0.35) 50%,
    rgba(245,239,224,0.70) 100%
  );
  pointer-events: none;
}

/* Dots navegación */
.hero-dots {
  position: absolute;
  bottom: 80px;
  right: 48px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26,20,16,0.25);
  cursor: pointer;
  transition: background 0.3s, height 0.3s, border-radius 0.3s;
}

.hero-dot.active {
  background: #C8972A;
  height: 22px;
  border-radius: 3px;
}

/* ════════════════════════════════════════════
   POR QUÉ
════════════════════════════════════════════ */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }

.trio-card {
  background:var(--white); border:1px solid rgba(200,151,42,.12);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.trio-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(200,151,42,.12); }

.trio-img { width:100%; height:180px; object-fit:cover; }
.trio-card > .trio-icon, .trio-card > h3, .trio-card > p { padding:0 24px; }
.trio-icon { font-size:1.3rem; color:var(--gold); margin-top:20px; margin-bottom:12px; display:block; }
.trio-card h3 { font-family:var(--font-serif); font-size:1.15rem; color:var(--text); margin-bottom:10px; }
.trio-card p  { font-size:.92rem; color:var(--text-mid); line-height:1.65; padding-bottom:24px; }

/* ════════════════════════════════════════════
   SCROLLYTELLING — HONEY FLOW  (definitivo)
   3 steps · Texto izq · Canvas miel dcha
════════════════════════════════════════════ */
.scrolly-root {
  position: relative;
  background: #0d0800;
}

.scrolly-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
  z-index: 2;
}

/* ─── PANEL TEXTO ─── */
.scrolly-text {
  position: relative;
  display: flex;
  align-items: center;
  background: #0d0800;
  /* sutil trama de panal */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 4L58 20v32L30 68 2 52V20z' fill='none' stroke='rgba(200,151,42,0.06)' stroke-width='1'/%3E%3Cpath d='M30 68L58 84v16L30 116 2 100V84z' fill='none' stroke='rgba(200,151,42,0.04)' stroke-width='1'/%3E%3C/svg%3E");
}

.st-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 64px 0 72px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1),
              transform .8s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.st-step.st-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.st-eyebrow {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.st-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  flex-shrink: 0;
}

.st-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 5.5vw, 5rem);
  color: #FAF6EE;
  line-height: .95;
  margin-bottom: 28px;
  letter-spacing: -.02em;
}
.st-h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #E8C97A, #C8972A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.st-step > p {
  font-size: 1rem;
  color: rgba(250,246,238,.52);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 340px;
}

.st-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.st-num {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E8C97A, #C8972A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.st-desc {
  font-size: .85rem;
  color: rgba(250,246,238,.38);
}

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,151,42,.08);
  border: 1px solid rgba(200,151,42,.22);
  color: #E8C97A;
  font-size: .8rem;
  padding: 11px 22px;
  border-radius: 50px;
  letter-spacing: .04em;
}

/* ─── PANEL VISUAL ─── */
.scrolly-visual {
  position: relative;
  overflow: hidden;
  background: #060400;
}

/* Imagen de fondo — visible y nítida */
.sv-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1);
}
.sv-frame.sv-active { opacity: 1; }

.sv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.5s cubic-bezier(0.16,1,0.3,1);
  /* imagen bien visible — solo leve oscurecimiento */
  filter: brightness(.72) saturate(.9);
}
.sv-frame.sv-active .sv-img {
  transform: scale(1);
  filter: brightness(.78) saturate(.95);
}

/* Canvas: SOBRE la imagen pero con screen blend — brilla sin tapar */
.honey-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* miel.avif — textura muy suave, casi imperceptible */
.honey-img-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.honey-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .06;
  mix-blend-mode: overlay;
}

/* Dots laterales */
.sv-dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.sv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250,246,238,.18);
  transition: background .4s, height .4s, border-radius .4s;
  cursor: pointer;
}
.sv-dot-active {
  background: #C8972A;
  height: 22px;
  border-radius: 3px;
}

/* Barra progreso */
.sv-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(250,246,238,.05);
  z-index: 10;
}
.sv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #C8972A, #E8C97A);
  width: 33%;
  transition: width .7s cubic-bezier(0.16,1,0.3,1);
}

/* Driver panels */
.scrolly-driver { position: relative; z-index: 1; }
.sd-panel        { height: 100vh; }

/* Mobile */
@media (max-width: 960px) {
  .scrolly-sticky  { grid-template-columns: 1fr; height: auto; position: relative; }
  .scrolly-visual  { display: none; }
  .scrolly-driver  { display: none; }
  .st-step {
    position: relative; inset: auto;
    opacity: 1; transform: none;
    padding: 72px 28px;
    display: none; pointer-events: auto;
  }
  .st-step.st-active { display: flex; }
  .st-h2 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
}

/* ════════════════════════════════════════════
   HISTORIA
════════════════════════════════════════════ */
.historia-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-top:40px; }
.historia-since { font-size:.85rem; color:var(--gold); letter-spacing:.1em; font-weight:600; margin-bottom:18px; }
.historia-left p { font-size:.97rem; color:var(--text-mid); line-height:1.78; margin-bottom:18px; }
.historia-left blockquote {
  font-family:var(--font-serif); font-size:1.15rem; font-style:italic;
  color:var(--gold-deep); border-left:3px solid var(--gold);
  padding:14px 22px; margin:24px 0;
  background:rgba(200,151,42,.05); border-radius:0 var(--r) var(--r) 0;
}
.historia-nota { font-size:.83rem !important; color:var(--text-soft) !important; font-style:italic; }

.ceo-card {
  background:var(--white); border:1px solid rgba(200,151,42,.14);
  border-radius:var(--r-xl); padding:32px; overflow:hidden;
  box-shadow:0 8px 40px rgba(200,151,42,.07); position:relative;
}
.ceo-card::after {
  content:''; position:absolute; top:0; right:0;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(200,151,42,.07) 0%, transparent 70%);
  pointer-events:none;
}
.ceo-photo { width:72px; height:72px; border-radius:50%; overflow:hidden; border:3px solid var(--gold); margin-bottom:18px; }
.ceo-photo img { width:100%; height:100%; object-fit:cover; }
.ceo-init { width:100%; height:100%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:1.4rem; color:var(--dark); }
.ceo-body h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.ceo-role { display:block; font-size:.78rem; color:var(--gold); letter-spacing:.08em; margin-bottom:14px; }
.ceo-body p { font-size:.9rem; color:var(--text-mid); line-height:1.65; margin-bottom:18px; }
.ceo-badges { display:flex; flex-direction:column; gap:8px; }
.ceo-badges span { font-size:.78rem; color:var(--text-mid); background:var(--cream); padding:5px 12px; border-radius:50px; display:inline-block; align-self:flex-start; }

/* ════════════════════════════════════════════
   PRODUCTOS
════════════════════════════════════════════ */
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.prod-card {
  background:var(--white); border:1px solid rgba(200,151,42,.12);
  border-radius:var(--r-xl); padding:28px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.prod-card:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(200,151,42,.14); }
.prod-dark { background:var(--dark); border-color:rgba(200,151,42,.22); }

.prod-badge {
  position:absolute; top:20px; right:20px;
  background:var(--gold); color:var(--dark);
  font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:50px;
  letter-spacing:.06em; text-transform:uppercase;
}
.prod-badge.b2b { background:rgba(200,151,42,.18); color:var(--gold-light); border:1px solid rgba(200,151,42,.3); }

.prod-img-wrap {
  width:100%; height:220px; border-radius:var(--r); overflow:hidden;
  margin-bottom:22px; background:var(--cream-mid);
}
.prod-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.prod-card:hover .prod-img-wrap img { transform:scale(1.04); }

.prod-label { font-size:.72rem; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; margin-bottom:6px; }
.prod-dark .prod-label { color:var(--gold-light); }
.prod-card h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.prod-dark h3 { color:var(--cream); }
.prod-card > p { font-size:.88rem; color:var(--text-mid); line-height:1.6; margin-bottom:18px; }
.prod-dark > p { color:rgba(250,246,238,.55); }

.prod-specs {
  background:rgba(200,151,42,.05); border:1px solid rgba(200,151,42,.1);
  border-radius:var(--r); padding:16px; margin-bottom:22px;
  display:flex; flex-direction:column; gap:10px;
}
.prod-dark .prod-specs { background:rgba(200,151,42,.08); border-color:rgba(200,151,42,.15); }
.ps-row { display:flex; align-items:flex-start; gap:12px; }
.ps-k { font-size:.7rem; font-weight:600; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; min-width:90px; padding-top:1px; }
.ps-v { font-size:.86rem; color:var(--text-mid); line-height:1.5; }
.prod-dark .ps-v { color:rgba(250,246,238,.6); }

.prod-hotel-link { display:block; text-align:center; font-size:.84rem; color:var(--gold-light); margin-top:12px; transition:color .2s; }
.prod-hotel-link:hover { color:var(--gold); }

.shipping-strip {
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin-top:36px; padding:14px 32px;
  background:rgba(200,151,42,.06); border-radius:50px;
  border:1px solid rgba(200,151,42,.14); font-size:.88rem; color:var(--text-mid);
}
.ss-sep { color:var(--gold); }

/* ════════════════════════════════════════════
   CÓMO SE USA
════════════════════════════════════════════ */
.video-wrap { margin-bottom:60px; }
.video-frame {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--dark-warm); aspect-ratio:16/7; max-width:900px; margin:0 auto;
}
.video-thumb { width:100%; height:100%; object-fit:cover; }
.video-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.vp-icon { font-size:4rem; color:var(--gold); opacity:.8; }
.vp-label { font-family:var(--font-serif); font-size:1.1rem; color:rgba(250,246,238,.7); letter-spacing:.06em; }
.vp-link { font-size:.85rem; color:var(--gold-light); border:1px solid rgba(200,151,42,.3); padding:8px 20px; border-radius:50px; margin-top:8px; transition:background .2s; }
.vp-link:hover { background:rgba(200,151,42,.15); }

.steps-row {
  display:flex; align-items:flex-start; gap:0; position:relative;
}
.steps-row::before {
  content:''; position:absolute; top:28px; left:24px; right:24px;
  height:1px; background:rgba(200,151,42,.18);
}
.step-item { flex:1; padding:0 20px; }
.step-n { font-family:var(--font-display); font-size:2.4rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:18px; position:relative; z-index:1; }
.step-item h3 { font-family:var(--font-serif); font-size:1.05rem; color:var(--cream); margin-bottom:10px; }
.step-item p  { font-size:.9rem; color:rgba(250,246,238,.55); line-height:1.6; }
.step-arrow { font-size:1.3rem; color:rgba(200,151,42,.35); padding-top:20px; flex-shrink:0; }

.tip-strip {
  margin-top:44px; padding:18px 24px;
  background:rgba(200,151,42,.1); border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.93rem; color:rgba(250,246,238,.75); line-height:1.6;
}

/* ════════════════════════════════════════════
   AROMAS
════════════════════════════════════════════ */
.aromas-track {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding:0 40px; margin-top:52px; max-width:1200px; margin-left:auto; margin-right:auto;
}
.aroma-card {
  border-radius:var(--r-lg); overflow:hidden; position:relative; cursor:pointer;
  height:420px; border:1.5px solid rgba(200,151,42,.15);
  transition:transform .4s var(--ease), box-shadow .4s, flex .5s;
}
.aroma-card:hover, .aroma-card.a-active {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 24px 64px rgba(200,151,42,.18);
  border-color:var(--gold);
}
.aroma-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aroma-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,18,8,.9) 0%, rgba(26,18,8,.3) 60%, transparent 100%);
}
.aroma-body { position:absolute; bottom:0; left:0; right:0; padding:28px; z-index:2; }
.aroma-emoji { font-size:2.2rem; margin-bottom:10px; display:block; }
.aroma-name { font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--cream); margin-bottom:3px; }
.aroma-sub  { font-size:.72rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.aroma-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.aroma-tags span { font-size:.7rem; color:rgba(250,246,238,.6); background:rgba(255,255,255,.08); padding:3px 9px; border-radius:50px; }
.aroma-body p { font-size:.88rem; color:rgba(250,246,238,.7); line-height:1.55; }

/* ════════════════════════════════════════════
   IMPACTO
════════════════════════════════════════════ */
.impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.impact-card {
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:var(--white); border:1px solid rgba(200,151,42,.12);
  transition:transform .3s var(--ease), box-shadow .3s; min-height:280px;
}
.impact-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(200,151,42,.1); }
.impact-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.15; }
.ic-body { position:relative; z-index:1; padding:40px 28px; text-align:center; }
.ic-icon { font-size:2.5rem; margin-bottom:14px; }
.impact-card h3 { font-family:var(--font-serif); font-size:1.12rem; color:var(--text); margin-bottom:10px; }
.impact-card p  { font-size:.9rem; color:var(--text-mid); line-height:1.65; }

/* ════════════════════════════════════════════
   PROVEEDORES — TIERRA
════════════════════════════════════════════ */

/* Hero del territorio */
.tierra-hero { position:relative; height:65vh; min-height:440px; overflow:hidden; }
.th-media { position:absolute; inset:0; }
.th-img { width:100%; height:100%; object-fit:cover; }
.th-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(26,18,8,.25) 0%,
    rgba(26,18,8,.6) 60%,
    #EDE4CF 100%
  );
}
.th-content {
  position:absolute; bottom:60px; left:0; right:0;
}
.th-title {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem,5vw,4rem); color:var(--cream); line-height:1.05; margin-bottom:14px;
}
.th-title em { font-style:italic; color:var(--gold-light); }
.th-sub { font-size:1.05rem; color:rgba(250,246,238,.7); max-width:540px; }

/* Body */
.tierra-body { padding:72px 40px 100px; max-width:1200px; margin:0 auto; }

.tierra-main { margin-bottom:56px; max-width:800px; }
.tierra-lead { font-family:var(--font-serif); font-size:1.25rem; color:var(--dark); line-height:1.6; margin-bottom:20px; }
.tierra-main p { font-size:.98rem; color:var(--text-mid); line-height:1.78; margin-bottom:16px; }

/* Galería */
.tierra-gallery { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:72px; }
.tg-main { border-radius:var(--r-lg); overflow:hidden; position:relative; }
.tg-main img { width:100%; height:400px; object-fit:cover; display:block; }
.tg-caption {
  position:absolute; bottom:0; left:0; right:0; padding:16px 20px;
  background:linear-gradient(to top, rgba(26,18,8,.8), transparent);
  font-size:.82rem; color:rgba(250,246,238,.8); letter-spacing:.06em;
}
.tg-side { display:grid; grid-template-rows:repeat(3,1fr); gap:16px; }
.tg-sm { border-radius:var(--r); overflow:hidden; position:relative; }
.tg-sm img { width:100%; height:100%; object-fit:cover; }
.tg-sm-cap {
  position:absolute; bottom:0; left:0; right:0; padding:10px 14px;
  background:linear-gradient(to top, rgba(26,18,8,.7), transparent);
  font-size:.76rem; color:rgba(250,246,238,.75);
}

/* Skambra section */
.skambra-section {
  background:var(--white); border-radius:var(--r-xl); padding:48px;
  border:1px solid rgba(200,151,42,.15); margin-bottom:56px;
  box-shadow:0 4px 32px rgba(200,151,42,.07);
}
.skambra-logo-wrap {
  display:flex; align-items:center; gap:20px; margin-bottom:24px;
}
.skambra-icon { font-size:3rem; }
.skambra-logo-wrap h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--text); }
.skambra-loc { font-size:.82rem; color:var(--gold); letter-spacing:.08em; display:block; margin-top:2px; }
.skambra-section > p { font-size:.96rem; color:var(--text-mid); line-height:1.78; margin-bottom:16px; }

.skambra-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.sf-item {
  background:var(--cream); border-radius:var(--r); padding:24px 20px;
  border:1px solid rgba(200,151,42,.1);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.sf-item:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(200,151,42,.1); }
.sf-icon { font-size:1.6rem; margin-bottom:12px; }
.sf-item h4 { font-size:.92rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.sf-item p  { font-size:.84rem; color:var(--text-mid); line-height:1.6; }

/* Mapa del origen */
.origen-map {
  background:var(--dark); border-radius:var(--r-xl); padding:48px;
  margin-bottom:48px; border:1px solid rgba(200,151,42,.15);
}
.om-head { margin-bottom:36px; }
.om-head h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--cream); margin-bottom:6px; }
.om-head p  { font-size:.92rem; color:rgba(250,246,238,.55); }

.om-visual { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:center; }
.om-colombia { display:flex; justify-content:center; }
.colombia-svg { width:200px; }
.map-pulse { animation: mapPulse 2s ease-in-out infinite; }

.omd-item {
  display:flex; align-items:flex-start; gap:16px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.omd-item:last-child { border-bottom:none; }
.omd-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.omd-item div { display:flex; flex-direction:column; gap:3px; }
.omd-item strong { font-size:.75rem; font-weight:600; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; }
.omd-item span   { font-size:.88rem; color:rgba(250,246,238,.6); line-height:1.5; }

.tierra-blockquote {
  font-family:var(--font-serif); font-size:1.4rem; font-style:italic;
  color:var(--dark); text-align:center; padding:40px;
  border:1px solid rgba(200,151,42,.25); border-radius:var(--r-lg);
  background:rgba(200,151,42,.04); position:relative;
}
.tierra-blockquote::before {
  content:'"'; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:5rem; color:rgba(200,151,42,.15); line-height:1;
}

/* ════════════════════════════════════════════
   CALIDAD
════════════════════════════════════════════ */
.calidad-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:8px; }
.cal-main-img { width:100%; height:280px; object-fit:cover; border-radius:var(--r-lg); margin-bottom:12px; }
.cal-mini-imgs { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cal-mini-imgs img { height:140px; width:100%; object-fit:cover; border-radius:var(--r); }
.calidad-cards { display:flex; flex-direction:column; gap:18px; }
.cal-card { background:var(--white); border:1px solid rgba(200,151,42,.1); border-radius:var(--r); padding:24px; position:relative; }
.cal-n { font-family:var(--font-display); font-size:2.5rem; font-weight:900; color:rgba(200,151,42,.1); line-height:1; margin-bottom:10px; display:block; }
.cal-card h3 { font-size:.93rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.cal-card p  { font-size:.85rem; color:var(--text-mid); line-height:1.6; }
.invima-note { margin-top:32px; padding:14px 20px; background:rgba(200,151,42,.05); border-radius:var(--r); font-size:.86rem; color:var(--text-mid); border:1px solid rgba(200,151,42,.1); }
.invima-note strong { color:var(--text); }

/* ════════════════════════════════════════════
   TESTIMONIOS + SOCIAL
════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.testi-card {
  background:var(--white); border:1px solid rgba(200,151,42,.14);
  border-radius:var(--r-lg); padding:32px; position:relative;
}
.testi-card::before { content:'"'; position:absolute; top:16px; left:22px; font-family:var(--font-display); font-size:5rem; color:rgba(200,151,42,.07); line-height:1; }
.testi-stars { color:var(--gold); letter-spacing:3px; margin-bottom:14px; }
.testi-card p { font-size:.93rem; color:var(--text-mid); line-height:1.75; margin-bottom:18px; position:relative; z-index:1; }
.testi-who { font-size:.78rem; color:var(--gold-deep); font-weight:600; }
.testi-nota { font-size:.8rem; color:var(--text-soft); font-style:italic; text-align:center; }

/* Social embeds */
.social-embeds { margin:52px 0; }
.se-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.se-head h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--text); }
.se-links { display:flex; gap:12px; }
.se-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:500; color:var(--text-mid);
  background:var(--white); border:1px solid rgba(200,151,42,.15);
  padding:8px 16px; border-radius:50px; transition:color .2s, border-color .2s;
}
.se-link:hover { color:var(--gold); border-color:var(--gold); }
.se-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.se-card { border-radius:var(--r); overflow:hidden; border:1px solid rgba(200,151,42,.1); }
.se-thumb { position:relative; aspect-ratio:9/16; background:var(--dark); }
.se-thumb img { width:100%; height:100%; object-fit:cover; }
.se-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:rgba(250,246,238,.8);
  background:rgba(26,18,8,.3);
  transition:background .2s;
}
.se-card:hover .se-play { background:rgba(200,151,42,.25); }
.se-watch {
  display:block; text-align:center; font-size:.8rem; font-weight:500;
  color:var(--text-mid); padding:10px; background:var(--white);
  transition:color .2s;
}
.se-watch:hover { color:var(--gold); }

/* ════════════════════════════════════════════
   FAQ
════════════════════════════════════════════ */
.faq-wrap { max-width:760px; }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid rgba(200,151,42,.12); }
.faq-q {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; font-size:.97rem; font-weight:500; color:var(--text);
  text-align:left; transition:color .2s;
}
.faq-q:hover { color:var(--gold); }
.faq-q span { font-size:1.4rem; color:var(--gold); transition:transform .3s; flex-shrink:0; margin-left:16px; }
.faq-item.open .faq-q span { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; font-size:.91rem; color:var(--text-mid); line-height:1.7; transition:max-height .4s var(--ease), padding .4s; }
.faq-item.open .faq-a { max-height:200px; padding-bottom:18px; }

/* ════════════════════════════════════════════
   HOTELERÍA — B2B PREMIUM
════════════════════════════════════════════ */
.s-hotel { background:var(--dark); }

.hotel-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hotel-bg-img { width:100%; height:100%; object-fit:cover; opacity:.15; }
.hotel-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(26,18,8,.97) 0%, rgba(45,31,10,.9) 50%, rgba(26,18,8,.97) 100%);
}
.hotel-bg-grain {
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 4L76 24v32L40 76 4 56V24z' fill='none' stroke='rgba(200,151,42,0.04)' stroke-width='1'/%3E%3C/svg%3E");
}

.hotel-header { position:relative; z-index:2; padding-top:100px; padding-bottom:60px; text-align:center; }
.hotel-title {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(3rem,7vw,6rem); color:var(--cream); line-height:1;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.hotel-amp { color:rgba(250,246,238,.2); font-style:italic; }
.hotel-title em { color:var(--gold-light); font-style:italic; }
.hotel-sub { font-size:1.05rem; color:rgba(250,246,238,.6); max-width:580px; margin:0 auto 44px; line-height:1.7; }
.hotel-sub strong { color:var(--gold-light); }

.hotel-kpis { display:flex; justify-content:center; gap:1px; flex-wrap:wrap; }
.hkpi {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:22px 40px; min-width:150px;
  background:rgba(255,255,255,.04); border:1px solid rgba(200,151,42,.14);
  transition:background .2s;
}
.hkpi:first-child { border-radius:var(--r) 0 0 var(--r); }
.hkpi:last-child  { border-radius:0 var(--r) var(--r) 0; }
.hkpi:hover { background:rgba(200,151,42,.08); }
.hkpi b { font-family:var(--font-display); font-size:2rem; font-weight:900; color:var(--gold-light); line-height:1; }
.hkpi span { font-size:.73rem; color:rgba(250,246,238,.45); letter-spacing:.06em; text-align:center; }

/* Hotel scrollytelling */
.hotel-scrolly { position:relative; z-index:2; }

.hs-sticky {
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
}

/* Visual (left) */
.hs-visual {
  position:relative; overflow:hidden;
  border-right:1px solid rgba(200,151,42,.08);
}
.hs-scenes { position:absolute; inset:0; }
.hs-scene { position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); }
.hs-scene.hs-active { opacity:1; }
.hs-scene img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.2s var(--ease); }
.hs-scene.hs-active img { transform:scale(1); }
.hs-scene::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(26,18,8,.5) 0%, transparent 50%), linear-gradient(to top, rgba(26,18,8,.7) 0%, transparent 40%);
}
.hsc-inner {
  position:absolute; inset:0; z-index:2;
  flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:rgba(26,18,8,.8);
}
.hsc-inner span { font-size:5rem; filter:drop-shadow(0 8px 24px rgba(200,151,42,.3)); }
.hsc-inner p { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--cream); }

/* Ficha flotante */
.hs-ficha {
  position:absolute; bottom:32px; left:32px; right:32px; z-index:5;
  background:rgba(26,18,8,.75); backdrop-filter:blur(12px);
  border:1px solid rgba(200,151,42,.2); border-radius:var(--r); padding:18px 20px;
}
.hf-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.hf-row:last-child { border-bottom:none; }
.hf-k { font-size:.68rem; font-weight:600; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; min-width:80px; }
.hf-v { font-size:.8rem; color:rgba(250,246,238,.6); }

/* Content (right) */
.hs-content {
  display:flex; align-items:center; padding:60px 80px 60px 60px;
  position:relative; height:100vh;
}
.hs-step { position:absolute; top:50%; left:0; right:0; padding:0 80px 0 60px; transform:translateY(-50%) translateY(28px); opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none; }
.hs-step.hs-step-active { opacity:1; transform:translateY(-50%); pointer-events:auto; }

.hst-tag { font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block; }
.hs-step h3 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:900; color:var(--cream); line-height:1.15; margin-bottom:18px; }
.hs-step h3 em { font-style:italic; color:var(--gold-light); }
.hs-step > p { font-size:.97rem; color:rgba(250,246,238,.62); line-height:1.78; margin-bottom:26px; }
.hst-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.hst-list li { font-size:.9rem; color:rgba(250,246,238,.72); line-height:1.6; }
.hst-cta { display:flex; flex-direction:column; gap:12px; }
.hst-resp { font-size:.75rem; color:rgba(250,246,238,.35); padding-left:4px; }

/* driver panels */
.hs-panels { position:relative; z-index:1; }
.hs-panel { height:100vh; }

/* CTA final */
.hotel-cta-final { position:relative; z-index:2; padding:80px 40px; }
.hcf-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(200,151,42,.22);
  border-radius:var(--r-xl); padding:60px; text-align:center;
  backdrop-filter:blur(10px); position:relative; overflow:hidden;
}
.hcf-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200,151,42,.09), transparent 60%); pointer-events:none; }
.hcf-card h3 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:var(--cream); margin-bottom:14px; position:relative; z-index:1; }
.hcf-card p  { font-size:.98rem; color:rgba(250,246,238,.55); line-height:1.7; margin-bottom:32px; max-width:500px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
.hcf-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }

/* ════════════════════════════════════════════
   CONTACTO
════════════════════════════════════════════ */
.contacto-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contacto-info { display:flex; flex-direction:column; gap:20px; }
.ci { display:flex; align-items:flex-start; gap:16px; }
.ci > span { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.ci div { display:flex; flex-direction:column; gap:4px; }
.ci strong { font-size:.72rem; font-weight:600; letter-spacing:.1em; color:var(--gold-light); text-transform:uppercase; }
.ci span, .ci a { font-size:.93rem; color:rgba(250,246,238,.65); transition:color .2s; }
.ci a:hover { color:var(--gold-light); }
.contacto-ctas { display:flex; flex-direction:column; gap:14px; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
footer { background:var(--dark-mid); padding:60px 0 0; border-top:1px solid rgba(200,151,42,.1); }
.footer-inner { display:grid; grid-template-columns:1fr 2fr; gap:60px; margin-bottom:48px; }
.footer-logo { font-family:var(--font-display); font-weight:900; font-size:1.4rem; letter-spacing:.15em; color:var(--gold); margin-bottom:14px; }
.footer-brand p { font-size:.86rem; color:rgba(250,246,238,.45); line-height:1.65; margin-bottom:6px; }
.footer-tag { font-style:italic; color:rgba(200,151,42,.55) !important; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.fn-col { display:flex; flex-direction:column; gap:10px; }
.fn-col strong { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,246,238,.3); margin-bottom:4px; }
.fn-col a { font-size:.86rem; color:rgba(250,246,238,.5); transition:color .2s; }
.fn-col a:hover { color:var(--gold-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.05); padding:18px 40px; text-align:center; font-size:.8rem; color:rgba(250,246,238,.28); }

/* WhatsApp FAB */
.wa-fab {
  position:fixed; bottom:32px; right:32px;
  width:56px; height:56px; background:#25D366;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 32px rgba(37,211,102,.4); z-index:999;
  transition:transform .3s var(--ease), box-shadow .3s;
  animation:waPulse 4s ease-in-out infinite;
}
.wa-fab:hover { transform:scale(1.12) translateY(-4px); box-shadow:0 14px 44px rgba(37,211,102,.55); }
@keyframes waPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ════════════════════════════════════════════
   MOBILE NAV
════════════════════════════════════════════ */
@media (max-width:960px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  #nav.menu-open .nav-links {
    display:flex; flex-direction:column;
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:rgba(26,18,8,.97); backdrop-filter:blur(20px);
    padding:40px; gap:18px; z-index:1000;
  }
  #nav.menu-open .nav-links a { font-size:1.2rem; }

  .trio            { grid-template-columns:1fr; }
  .products-grid   { grid-template-columns:1fr; }
  .historia-grid   { grid-template-columns:1fr; }
  .tierra-gallery  { grid-template-columns:1fr; }
  .tg-side         { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .skambra-facts   { grid-template-columns:1fr 1fr; }
  .om-visual       { grid-template-columns:1fr; }
  .calidad-layout  { grid-template-columns:1fr; }
  .testi-grid      { grid-template-columns:1fr; }
  .se-grid         { grid-template-columns:1fr 1fr; }
  .contacto-grid   { grid-template-columns:1fr; }
  .aromas-track    { grid-template-columns:1fr; }
  .impact-grid     { grid-template-columns:1fr; }
  .footer-inner    { grid-template-columns:1fr; }
  .footer-nav      { grid-template-columns:repeat(2,1fr); }

  /* Scrollytelling mobile: stack */
  .scrolly-sticky  { grid-template-columns:1fr; height:auto; position:relative; }
  .scrolly-visual  { display:none; }
  .sd-panel        { height:auto; }
  .st-step         {
    position:relative;
    inset:auto;
    opacity:1;
    transform:none;
    padding:60px 28px;
    pointer-events:auto;
    display:none;
    justify-content:flex-start;
  }
  .st-step.st-active { display:flex; }
  .scrolly-driver  { display:none; }

  /* Hotel scrolly mobile */
  .hs-sticky       { grid-template-columns:1fr; height:auto; position:relative; }
  .hs-visual       { display:none; }
  .hs-content      { padding:40px; height:auto; }
  .hs-step         { position:relative; top:auto; left:auto; right:auto; transform:none; opacity:1; padding:0; pointer-events:auto; display:none; }
  .hs-step.hs-step-active { display:block; }
  .hs-panels       { display:none; }

  .steps-row { flex-direction:column; }
  .steps-row::before { display:none; }
  .step-arrow { display:none; }

  .hotel-title { font-size:clamp(2.2rem,8vw,4rem); }
  .hotel-kpis  { gap:0; }
  .hkpi        { flex:1; min-width:120px; padding:16px 18px; }
  .hkpi:first-child, .hkpi:last-child { border-radius:0; }

  .line-a, .line-b, .line-c { font-size:clamp(3rem,12vw,5rem); }
  .wrap { padding:0 20px; }
  #nav { padding:0 20px; }
  .tierra-body { padding:48px 20px 80px; }
  .skambra-section { padding:32px 24px; }
  .origen-map { padding:32px 24px; }
  .hcf-card { padding:40px 24px; }
  .hcf-btns { flex-direction:column; }
}

@media (max-width:600px) {
  .skambra-facts { grid-template-columns:1fr; }
  .se-grid       { grid-template-columns:1fr; }
  .hotel-kpis    { flex-wrap:wrap; }
  .hkpi          { border-radius:var(--r) !important; flex:1 1 45%; }
}

/* ═══════════════════════════════════════════
   VIDEO PLAYER — custom controls
═══════════════════════════════════════════ */
.video-wrap { margin-bottom: 56px; }

.video-player-box {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  max-width: 860px;
  margin: 0 auto;
  cursor: pointer;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

.video-player-box video {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Play overlay — hides after play */
.vplay-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: rgba(26,18,8,.45);
  backdrop-filter: blur(2px);
  transition: opacity .4s, visibility .4s;
  z-index: 4;
}
.vplay-overlay.hidden { opacity: 0; visibility: hidden; }

.vplay-btn {
  width: 80px; height: 80px;
  transition: transform .3s var(--ease);
}
.vplay-btn:hover { transform: scale(1.1); }
.vplay-btn svg { width: 100%; height: 100%; }

.vplay-ring {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  stroke-linecap: round;
  animation: ringDraw 1.4s var(--ease) .3s forwards;
}
@keyframes ringDraw {
  to { stroke-dashoffset: 0; }
}

.vplay-label {
  font-family: var(--font-serif);
  font-size: 1rem; font-style: italic;
  color: rgba(250,246,238,.8);
  letter-spacing: .05em;
}

/* Custom controls bar */
.vctrls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 14px;
  background: linear-gradient(to top, rgba(26,18,8,.85), transparent);
  opacity: 0;
  transition: opacity .3s;
  z-index: 5;
}
.video-player-box:hover .vctrls,
.video-player-box.playing .vctrls { opacity: 1; }

.vc-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(250,246,238,.85); padding: 4px;
  transition: color .2s, transform .15s;
  flex-shrink: 0;
}
.vc-btn:hover { color: var(--gold); transform: scale(1.15); }
.vc-btn svg { width: 20px; height: 20px; display: block; }

.vc-progress {
  flex: 1; cursor: pointer; padding: 6px 0;
}
.vc-bar {
  height: 3px; background: rgba(255,255,255,.2);
  border-radius: 2px; overflow: hidden; position: relative;
}
.vc-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width .1s linear;
}
.vc-time {
  font-size: .75rem; color: rgba(250,246,238,.6);
  min-width: 36px; text-align: right; flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SOCIAL SECTION — testimonios
═══════════════════════════════════════════ */
.social-section { margin: 52px 0 12px; }

.social-head {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.social-head h3 {
  font-family: var(--font-serif); font-size: 1.2rem; color: var(--text);
}
.social-links { display: flex; gap: 10px; }

.slink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; padding: 9px 18px;
  border-radius: 50px; transition: transform .2s, box-shadow .2s;
}
.slink:hover { transform: translateY(-2px); }
.slink-ig {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  box-shadow: 0 4px 20px rgba(220,39,67,.3);
}
.slink-ig:hover { box-shadow: 0 8px 28px rgba(220,39,67,.45); }
.slink-tt {
  background: #000; color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.slink-tt:hover { box-shadow: 0 8px 28px rgba(0,0,0,.4); }

.social-video-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.svid-card {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(200,151,42,.12);
  background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: block;
}
.svid-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(200,151,42,.12); }

.svid-thumb {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--dark);
}
.svid-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.svid-card:hover .svid-thumb img { transform: scale(1.05); }

.svid-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: rgba(250,246,238,.9);
  background: rgba(26,18,8,.35);
  transition: background .2s;
}
.svid-card:hover .svid-play { background: rgba(200,151,42,.35); }

.svid-platform {
  position: absolute; top: 10px; right: 10px;
  font-size: .68rem; font-weight: 700; padding: 4px 10px;
  border-radius: 50px; letter-spacing: .06em;
}
.svid-platform.ig { background: linear-gradient(135deg,#e6683c,#cc2366); color:#fff; }
.svid-platform.tt { background: #000; color:#fff; }

.svid-card > span {
  display: block; padding: 10px 14px;
  font-size: .82rem; color: var(--text-mid);
}

/* ═══════════════════════════════════════════
   PROVEEDORES — map mini + skambra updates
═══════════════════════════════════════════ */
.tg-sm-map {
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
}
.mini-map-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 16px;
}
.mini-colombia { width: 100px; }
.map-pulse-mini { animation: miniPulse 2s ease-in-out infinite; }
@keyframes miniPulse { 0%,100%{opacity:.4;r:10} 50%{opacity:.1;r:16} }
.mini-map-label { font-size: .72rem; color: rgba(250,246,238,.55); letter-spacing: .08em; }

.map-pulse   { animation: bigPulse  2s ease-in-out infinite; }
.map-pulse-2 { animation: bigPulse2 2s ease-in-out .5s infinite; }
@keyframes bigPulse  { 0%,100%{opacity:.35;r:13} 50%{opacity:.08;r:20} }
@keyframes bigPulse2 { 0%,100%{opacity:.12;r:22} 50%{opacity:.02;r:30} }

.skambra-head {
  display: flex; align-items: center; gap: 20px; margin-bottom: 22px;
}
.skambra-icon { font-size: 2.8rem; }
.skambra-head h3 {
  font-family: var(--font-display); font-size: 1.45rem;
  font-weight: 700; color: var(--text);
}
.skambra-loc { font-size: .8rem; color: var(--gold); letter-spacing: .08em; display: block; margin-top: 3px; }
.skambra-body > p { font-size: .96rem; color: var(--text-mid); line-height: 1.78; margin-bottom: 14px; }

/* Hotelería scene fallback */
.hsc-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(26,18,8,.85);
}
.hsc-fallback span { font-size: 4.5rem; }
.hsc-fallback p { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--cream); }

/* ═══════════════════════════════════════════
   INLINE SOCIAL VIDEO CARDS
═══════════════════════════════════════════ */
.svid-inline { cursor: pointer; }

.svid-has-video {
  position: relative;
  overflow: hidden;
}

.svid-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s;
  background: #000;
}

.svid-has-video.is-playing .svid-video  { opacity: 1; }
.svid-has-video.is-playing .svid-play-btn { opacity: 0; }

.svid-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: rgba(250,246,238,.9);
  background: rgba(26,18,8,.35);
  transition: background .2s, opacity .3s;
  z-index: 2;
}
.svid-inline:hover .svid-play-btn { background: rgba(200,151,42,.35); }

/* Platform badge reuse */
.svid-platform {
  position: absolute; top: 10px; right: 10px;
  font-size: .68rem; font-weight: 700; padding: 4px 10px;
  border-radius: 50px; letter-spacing: .06em; z-index: 3;
  transition: opacity .3s;
}
.svid-has-video.is-playing .svid-platform { opacity: .5; }

/* ═══════════════════════════════════════════════════
   TIERRALTA — Sección inmersiva rediseñada
   Hero · Scrollytelling · Mosaico · Facts
═══════════════════════════════════════════════════ */

/* Hero stats strip */
.tierra-hero-inner { max-width: 720px; }
.th-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 32px;
  flex-wrap: wrap;
}
.th-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 28px 0 0;
}
.th-stat b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
}
.th-stat span {
  font-size: .72rem;
  color: rgba(250,246,238,.5);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.th-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(200,151,42,.3);
  margin-right: 28px;
  flex-shrink: 0;
}

/* ── TIERRALTA SCROLLYTELLING ── */
.tierralta-scrolly {
  position: relative;
  background: var(--dark);
}

.ts-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr; /* visual izq | texto dcha */
  overflow: hidden;
  z-index: 2;
}

/* Panel visual izquierdo */
.ts-visual {
  position: relative;
  overflow: hidden;
  background: #0a0600;
}
.ts-frames { position: absolute; inset: 0; }
.ts-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.ts-frame.ts-active { opacity: 1; }
.ts-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1.5s var(--ease);
  display: block;
}
.ts-frame.ts-active img { transform: scale(1); }
.ts-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 50%, rgba(26,18,8,.5) 100%),
    linear-gradient(to top, rgba(26,18,8,.8) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}
.ts-frame-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: .78rem;
  color: rgba(250,246,238,.55);
  font-style: italic;
  z-index: 2;
  letter-spacing: .06em;
}

/* Mapa pin flotante sobre la imagen */
.ts-map-pin {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(26,18,8,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,151,42,.25);
  border-radius: 12px;
  padding: 12px 14px;
}
.ts-colombia { width: 64px; }
.ts-map-label {
  font-size: .65rem;
  color: rgba(250,246,238,.55);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Dots */
.ts-dots {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}
.ts-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250,246,238,.2);
  transition: background .4s, transform .4s, height .4s, border-radius .4s;
}
.ts-dot-active {
  background: var(--gold);
  transform: scale(1.3);
  height: 18px;
  border-radius: 3px;
}

/* Panel texto derecho */
.ts-content {
  position: relative;
  background: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(200,151,42,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  border-left: 1px solid rgba(200,151,42,.08);
  height: 100vh;
  display: flex;
  align-items: center;
}

.ts-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 72px 0 64px;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  pointer-events: none;
}
.ts-step.ts-step-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ts-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ts-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
  flex-shrink: 0;
}

.ts-h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  color: var(--cream);
  line-height: 1.0;
  margin-bottom: 24px;
}
.ts-h3 em {
  font-style: italic;
  color: var(--gold-light);
}

.ts-step > p {
  font-size: 1rem;
  color: rgba(250,246,238,.58);
  line-height: 1.78;
  margin-bottom: 28px;
  max-width: 380px;
}

.ts-detail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(200,151,42,.1);
  border: 1px solid rgba(200,151,42,.25);
  color: var(--gold-light);
  font-size: .82rem;
  padding: 10px 20px;
  border-radius: 50px;
}
.ts-detail-icon { font-size: 1rem; }

.ts-cta-group { margin-top: 4px; }

/* Driver panels */
.ts-panels { position: relative; z-index: 1; }
.ts-panel  { height: 100vh; }

/* ── GALERÍA MOSAICO COMPLETA ── */
.tierra-gallery-full {
  padding: 80px 40px 100px;
}
.tgf-head {
  text-align: center;
  margin-bottom: 48px;
}
.tgf-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 10px;
}
.tgf-head h3 em { font-style: italic; color: var(--gold); }
.tgf-head p { font-size: .95rem; color: var(--text-mid); }

/* Mosaic grid: 1 big left + 2 columns of 2 */
.tgf-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 56px;
  height: 480px;
}
.tgf-big {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
}
.tgf-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.tgf-big:hover img { transform: scale(1.04); }

.tgf-small-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tgf-sm {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  flex: 1;
}
.tgf-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.tgf-sm:hover img { transform: scale(1.05); }

/* Hover overlay on mosaic */
.tgf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,18,8,.75) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  opacity: 0;
  transition: opacity .3s;
}
.tgf-big:hover .tgf-overlay,
.tgf-sm:hover .tgf-overlay { opacity: 1; }
.tgf-overlay span {
  font-size: .78rem;
  color: rgba(250,246,238,.85);
  font-style: italic;
  letter-spacing: .06em;
}

/* Facts cards */
.tierra-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.tf-card {
  background: var(--white);
  border: 1px solid rgba(200,151,42,.12);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.tf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(200,151,42,.1);
}
.tf-icon { font-size: 1.8rem; margin-bottom: 12px; }
.tf-card h4 { font-size: .92rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.tf-card p  { font-size: .84rem; color: var(--text-mid); line-height: 1.6; }

/* ── Mobile overrides ── */
@media (max-width: 960px) {
  .ts-sticky  { grid-template-columns: 1fr; height: auto; position: relative; }
  .ts-visual  { display: none; }
  .ts-panels  { display: none; }
  .ts-content { height: auto; border-left: none; }
  .ts-step    {
    position: relative; inset: auto;
    opacity: 1; transform: none;
    padding: 48px 28px;
    display: none;
    pointer-events: auto;
  }
  .ts-step.ts-step-active { display: flex; }

  .tgf-mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .tgf-big    { height: 260px; grid-column: 1 / -1; }
  .tgf-small-col { flex-direction: row; }
  .tgf-sm     { height: 180px; }
  .tierra-facts { grid-template-columns: 1fr 1fr; }
  .th-stats   { gap: 16px; }
  .th-stat-sep { display: none; }
  .tierra-gallery-full { padding: 48px 20px 60px; }
}

@media (max-width: 600px) {
  .tierra-facts { grid-template-columns: 1fr; }
  .tgf-mosaic   { grid-template-columns: 1fr; height: auto; }
  .tgf-sm       { height: 200px; }
  .tgf-small-col { flex-direction: column; }
}

/* ════════════════════════════════════════════
   VISOR 3D — Hotelería
════════════════════════════════════════════ */
.viewer3d-wrap {
  position: relative;
  z-index: 2;
  padding: 0 40px 72px;
}

.viewer3d-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,151,42,.2);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 32px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(200,151,42,.12);
}

/* Canvas panel */
.viewer3d-canvas-wrap {
  position: relative;
  height: 520px;
  background: radial-gradient(ellipse at 40% 40%, #1a1000 0%, #0a0600 70%);
  overflow: hidden;
}

#canvas3d {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Loader */
.viewer3d-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, #1a1000, #060400);
  z-index: 10;
  transition: opacity .6s ease, visibility .6s ease;
  pointer-events: none;
}
.viewer3d-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.v3d-spinner {
  width: 42px; height: 42px;
  border: 2.5px solid rgba(200,151,42,.2);
  border-top-color: #C8972A;
  border-radius: 50%;
  animation: spin3d .8s linear infinite;
}
@keyframes spin3d { to { transform: rotate(360deg); } }

.viewer3d-loader span {
  font-size: .8rem; color: rgba(200,151,42,.6);
  letter-spacing: .1em; text-transform: uppercase;
}

/* Drag hint */
.viewer3d-hint {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; color: rgba(250,246,238,.38);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  padding: 7px 16px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none; z-index: 5;
  transition: opacity .5s;
}
.viewer3d-hint.fade { opacity: 0; }

/* Info panel */
.viewer3d-info {
  padding: 48px 40px;
  display: flex; flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(200,151,42,.12);
}

.v3d-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}

.viewer3d-info h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2rem; color: var(--cream);
  line-height: 1.1; margin-bottom: 14px;
}
.viewer3d-info h3 em { font-style: italic; color: var(--gold-light); }

.viewer3d-info > p {
  font-size: .92rem; color: rgba(250,246,238,.52);
  line-height: 1.72; margin-bottom: 28px; max-width: 300px;
}

.v3d-specs {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 0; border-top: 1px solid rgba(200,151,42,.1);
  border-bottom: 1px solid rgba(200,151,42,.1);
  margin-bottom: 24px;
}
.v3d-spec { display: flex; gap: 12px; align-items: flex-start; }
.v3d-k {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  color: var(--gold); text-transform: uppercase; min-width: 68px; padding-top: 1px;
}
.v3d-v { font-size: .85rem; color: rgba(250,246,238,.6); line-height: 1.5; }

/* Control buttons */
.v3d-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.v3d-btn-rotate, .v3d-btn-reset {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600;
  padding: 9px 18px; border-radius: 50px; cursor: pointer;
  transition: all .2s; letter-spacing: .04em;
}
.v3d-btn-rotate {
  background: rgba(200,151,42,.15); color: var(--gold-light);
  border: 1px solid rgba(200,151,42,.3);
}
.v3d-btn-rotate:hover, .v3d-btn-rotate.active {
  background: rgba(200,151,42,.3); color: #fff;
}
.v3d-btn-rotate.active svg { animation: spin3d 1.2s linear infinite; }

.v3d-btn-reset {
  background: rgba(255,255,255,.05); color: rgba(250,246,238,.5);
  border: 1px solid rgba(255,255,255,.08);
}
.v3d-btn-reset:hover { background: rgba(255,255,255,.1); color: var(--cream); }

/* Mobile */
@media (max-width: 900px) {
  .viewer3d-inner { grid-template-columns: 1fr; }
  .viewer3d-canvas-wrap { height: 360px; } model-viewer { min-height: 360px; }
  .viewer3d-info {
    padding: 28px 24px;
    border-left: none;
    border-top: 1px solid rgba(200,151,42,.12);
  }
  .viewer3d-wrap { padding: 0 20px 48px; }
}

/* ════════════════════════════════════════════
   HOTEL BENEFITS — grid estático (sin drivers)
════════════════════════════════════════════ */
.hotel-benefits {
  position: relative;
  z-index: 2;
  padding: 0 40px 72px;
}

.hb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hb-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,151,42,.18);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.hb-card:hover {
  border-color: rgba(200,151,42,.4);
  transform: translateY(-4px);
}

.hb-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.hb-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.65) saturate(.8);
  transition: filter .4s, transform .4s;
}
.hb-card:hover .hb-img img {
  filter: brightness(.75) saturate(.9);
  transform: scale(1.04);
}
.hb-img-tag {
  position: absolute;
  bottom: 12px; left: 16px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 50px;
  border: 1px solid rgba(200,151,42,.3);
}

.hb-body {
  padding: 24px 28px 28px;
}
.hb-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--cream); line-height: 1.2;
  margin: 8px 0 16px;
}
.hb-body h3 em { font-style: italic; color: var(--gold-light); }

.hst-tag {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}

.hst-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.hst-list li {
  font-size: .87rem;
  color: rgba(250,246,238,.6);
  line-height: 1.55;
}

.hst-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hst-resp {
  font-size: .75rem;
  color: rgba(250,246,238,.35);
}

@media (max-width: 700px) {
  .hb-grid { grid-template-columns: 1fr; }
  .hotel-benefits { padding: 0 20px 48px; }
}

/* ════════════════════════════════════════════
   PRODUCTOS v2 — estilo referencia
════════════════════════════════════════════ */
.prod2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.prod2-card {
  background: #1a1208;
  border: 1px solid rgba(200,151,42,.18);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.prod2-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 72px rgba(200,151,42,.18);
  border-color: rgba(200,151,42,.4);
}

/* Badge esquina superior derecha */
.prod2-badge {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 5;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-light);
  background: rgba(26,18,8,.75);
  border: 1px solid rgba(200,151,42,.4);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 50px;
}

/* Imagen hero */
.prod2-img {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.prod2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.prod2-card:hover .prod2-img img {
  transform: scale(1.05);
}
.prod2-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, #1a1208 100%);
}

/* Body */
.prod2-body {
  padding: 28px 32px 36px;
}

.prod2-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.prod2-weight {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
}
.prod2-weight span {
  font-size: 1.6rem;
}
.prod2-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(250,246,238,.4);
  text-transform: uppercase;
  padding-bottom: 4px;
}

.prod2-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(250,246,238,.65);
  line-height: 1.65;
  margin-bottom: 24px;
}

/* Specs table */
.prod2-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
  border-top: 1px solid rgba(200,151,42,.1);
}
.prod2-row {
  display: flex;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(200,151,42,.08);
  align-items: flex-start;
}
.prod2-k {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
  min-width: 100px;
  padding-top: 2px;
  flex-shrink: 0;
}
.prod2-v {
  font-size: .88rem;
  color: rgba(250,246,238,.55);
  line-height: 1.5;
}

/* Botones */
.prod2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--gold);
  color: var(--dark);
  transition: background .2s, transform .2s;
}
.prod2-btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.prod2-btn-outline {
  background: transparent;
  color: rgba(250,246,238,.75);
  border: 1px solid rgba(200,151,42,.35);
}
.prod2-btn-outline:hover {
  background: rgba(200,151,42,.12);
  color: var(--gold-light);
  border-color: var(--gold);
}

/* Mobile */
@media (max-width: 768px) {
  .prod2-grid { grid-template-columns: 1fr; }
  .prod2-img  { height: 220px; }
  .prod2-body { padding: 22px 20px 28px; }
}

/* ════════════════════════════════════════════
   CALIDAD v2 — Carrusel premium
════════════════════════════════════════════ */
.calidad2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
  margin-top: 8px;
  margin-bottom: 32px;
}

/* ── Carrusel ── */
.cal2-carousel {
  position: relative;
  user-select: none;
}

.cal2-track {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--dark);
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}

.cal2-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .75s cubic-bezier(0.16,1,0.3,1),
              transform .75s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.cal2-slide.cal2-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.cal2-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cal2-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 20px;
  background: linear-gradient(to top, rgba(26,18,8,.85), transparent);
  font-size: .8rem;
  font-style: italic;
  color: rgba(250,246,238,.75);
  letter-spacing: .05em;
}

/* Flechas */
.cal2-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(26,18,8,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,151,42,.3);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .2s, border-color .2s, transform .2s;
}
.cal2-arrow:hover {
  background: rgba(200,151,42,.25);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.08);
}
.cal2-arrow svg { width: 18px; height: 18px; }
.cal2-prev { left: 14px; }
.cal2-next { right: 14px; }

/* Dots */
.cal2-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.cal2-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(200,151,42,.25);
  border: none; cursor: pointer;
  transition: background .3s, transform .3s, width .3s, border-radius .3s;
  padding: 0;
}
.cal2-dot.cal2-dot-active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
  transform: none;
}

/* Miniaturas */
.cal2-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.cal2-thumb {
  flex: 1;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .3s, opacity .3s, transform .3s;
  opacity: .5;
  aspect-ratio: 4/3;
}
.cal2-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cal2-thumb:hover { opacity: .8; transform: translateY(-2px); }
.cal2-thumb.cal2-thumb-active {
  border-color: var(--gold);
  opacity: 1;
}

/* ── Cards info ── */
.cal2-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}
.cal2-card {
  background: var(--white);
  border: 1px solid rgba(200,151,42,.1);
  border-radius: var(--r);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.cal2-card:hover {
  border-color: rgba(200,151,42,.3);
  transform: translateX(4px);
  box-shadow: 0 8px 32px rgba(200,151,42,.08);
}
.cal2-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.cal2-card:hover::before { opacity: 1; }

.cal2-n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: rgba(200,151,42,.12);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.cal2-card h3 {
  font-size: .93rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.cal2-card p {
  font-size: .85rem;
  color: var(--text-mid);
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
  .calidad2-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Benefits list dentro del scrollytelling ── */
.st-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.st-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(200,151,42,.07);
  border: 1px solid rgba(200,151,42,.18);
  border-radius: 12px;
  padding: 13px 16px;
  transition: background .3s, border-color .3s, transform .3s;
}
.st-benefit:hover {
  background: rgba(200,151,42,.13);
  border-color: rgba(200,151,42,.35);
  transform: translateX(4px);
}

.st-benefit-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 0 6px rgba(200,151,42,.4));
}

.st-benefit-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.st-benefit-body strong {
  font-size: .84rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .03em;
}
.st-benefit-body span {
  font-size: .8rem;
  color: rgba(250,246,238,.5);
  line-height: 1.55;
}
/* ════════════════════════════════════════════
   HISTORIA v2 — grid + carrusel
════════════════════════════════════════════ */
.historia2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
  margin-top: 40px;
}

.historia2-right {
  position: relative;
  top: 0;
}

.hcar-stack {
  position: relative;
  height: 580px;
  margin-bottom: 16px;
}

.hcar-slide {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  opacity: 0;
  transform: scale(.92) translateY(24px);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1),
              transform .7s cubic-bezier(0.16,1,0.3,1);
  z-index: 1;
}
.hcar-slide.hcar-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 5;
}
.hcar-slide.hcar-exit {
  opacity: 0;
  transform: scale(1.04) translateY(-20px);
  z-index: 4;
  transition: opacity .5s cubic-bezier(0.65,0,0.35,1),
              transform .5s cubic-bezier(0.65,0,0.35,1);
}
.hcar-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hcar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.hcar-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(200,151,42,.2);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  flex-shrink: 0;
}
.hcar-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  transform: scale(1.1);
}
.hcar-btn svg { width: 16px; height: 16px; }

.hcar-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.hcar-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(200,151,42,.25);
  cursor: pointer;
  transition: background .3s, width .3s, border-radius .3s;
  border: none;
  padding: 0;
  display: inline-block;
}
.hcar-dot.hcar-dot-active {
  background: var(--gold);
  width: 22px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════
   HISTORIA v3 — centrada en el fundador
════════════════════════════════════════════ */
.hf2-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hf2-avatar-lg {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.3rem;
  color: var(--dark); flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(200,151,42,.3);
}
.hf2-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.hf2-role {
  display: block;
  font-size: .76rem; color: var(--gold);
  letter-spacing: .07em; margin-bottom: 3px;
}
.hf2-year {
  display: block;
  font-size: .74rem; color: var(--text-soft);
}

.historia2-text {
  font-size: .97rem;
  color: var(--text-mid);
  line-height: 1.78;
  margin-bottom: 28px;
}
.historia2-text em { font-style: italic; color: var(--gold-deep); }

/* Logros */
.hf2-logros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.hf2-logro {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid rgba(200,151,42,.12);
  border-radius: var(--r);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.hf2-logro:hover {
  border-color: rgba(200,151,42,.3);
  transform: translateX(4px);
  box-shadow: 0 6px 24px rgba(200,151,42,.08);
}
.hf2-logro-icon {
  font-size: 1.2rem; flex-shrink: 0; margin-top: 1px;
}
.hf2-logro div { display: flex; flex-direction: column; gap: 3px; }
.hf2-logro strong {
  font-size: .86rem; font-weight: 700; color: var(--text);
}
.hf2-logro span {
  font-size: .78rem; color: var(--text-soft); line-height: 1.5;
}

.historia2-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-style: italic;
  color: var(--gold-deep);
  border-left: 3px solid var(--gold);
  padding: 12px 20px;
  background: rgba(200,151,42,.05);
  border-radius: 0 var(--r) var(--r) 0;
  line-height: 1.65;
}

/* Tag flotante sobre el carrusel */
.hcar-floattag {
  position: absolute;
  bottom: 68px;
  left: -18px;
  background: var(--white);
  border: 1px solid rgba(200,151,42,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 7px;
  pointer-events: none;
  animation: floatTag 3s ease-in-out infinite;
}
@keyframes floatTag {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Mobile */
@media (max-width: 900px) {
  .historia2-grid   { grid-template-columns: 1fr; gap: 40px; }
  .hcar-stack       { height: 320px; }
  .hcar-floattag    { left: 16px; bottom: 76px; }
}

/* ════════════════════════════════════════════
   IMPACTO — Header con video lateral premium
════════════════════════════════════════════ */
.impacto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
  margin-bottom: 52px;
}

.impacto-texto { flex: 1; }
.impacto-texto .s-sub { margin-bottom: 0; }

.impacto-video-wrap {
  flex-shrink: 0;
  width: 200px;
  position: relative;
}

/* Marco decorativo exterior */
.impacto-video-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--r-lg) + 6px);
  background: linear-gradient(135deg, rgba(200,151,42,.5), rgba(232,201,122,.15), rgba(200,151,42,.4));
  z-index: 0;
}

/* Brillo pulsante */
.impacto-video-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-lg) + 3px);
  background: linear-gradient(135deg, var(--gold), transparent 60%);
  opacity: .25;
  z-index: 0;
  animation: videoGlow 3s ease-in-out infinite alternate;
}
@keyframes videoGlow {
  from { opacity: .15; }
  to   { opacity: .4; }
}

.impacto-video {
  width: 100%;
  border-radius: var(--r-lg);
  display: block;
  object-fit: cover;
  aspect-ratio: 9/16;
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

/* Tag flotante */
.impacto-video-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--dark);
  border-radius: 50px;
  padding: 7px 16px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(200,151,42,.35);
  animation: floatTag 3s ease-in-out infinite;
}
@keyframes floatTag {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Punto de estado (live dot) */
.impacto-video-wrap .live-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #25D366;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(37,211,102,.25);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(37,211,102,.25); }
  50%      { box-shadow: 0 0 0 7px rgba(37,211,102,.1); }
}

@media (max-width: 768px) {
  .impacto-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .impacto-video-wrap {
    width: 140px;
    align-self: flex-end;
    margin-top: -20px;
  }
}

@media (max-width: 480px) {
  .impacto-video-wrap { width: 120px; }
}