/* ================================================
   HGW Colombia · base.css
   Reset, body, animaciones, utilidades globales
   ================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  min-width: 320px;
}
/* Textura noise */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:1000; opacity:0.4;
}
img  { max-width:100%; height:auto; display:block; }
button, input, textarea, select { font-family:inherit; }

/* ── Cursor personalizado (solo mouse real) ── */
@media (hover:hover) and (pointer:fine) {
  body { cursor:none; }
  .cursor {
    width:10px; height:10px;
    background:var(--gold); border-radius:50%;
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:9999;
    transition:transform 0.15s; mix-blend-mode:difference;
  }
  .cursor-ring {
    width:36px; height:36px;
    border:1px solid var(--gold); border-radius:50%;
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:9998;
    transition:all 0.25s; opacity:0.5;
  }
}
@media (hover:none),(pointer:coarse) {
  .cursor,.cursor-ring { display:none; }
  body { cursor:auto; }
}

/* ── Animaciones globales ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes lineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spinSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes marquee  { from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}

/* ── Reveal on scroll ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.12s; }
.reveal-d2 { transition-delay:0.24s; }
.reveal-d3 { transition-delay:0.36s; }

/* ── Layout ── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
section    { position:relative; overflow:hidden; }

/* ── Eyebrow ── */
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.eyebrow-line { width:28px; height:1px; background:var(--gold); flex-shrink:0; }
.eyebrow span { font-size:var(--t-xs); letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:500; }

/* ── Headings ── */
.section-h2 {
  font-family:var(--serif);
  font-size:var(--t-h2); font-weight:800;
  line-height:1.05; letter-spacing:-1px; color:var(--cream);
  margin-bottom:16px;
}
.section-h2 em { font-style:italic; color:var(--gold); }
.section-lead  { font-size:var(--t-m); font-weight:300; color:var(--text2); line-height:1.75; max-width:520px; }

/* ── Botones ── */
.btn-primary {
  background:var(--gold); color:var(--ink);
  padding:14px 32px; font-size:var(--t-s);
  font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer; border-radius:2px;
  display:inline-block; transition:background 0.2s,transform 0.2s,box-shadow 0.2s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn-primary:hover  { background:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,0.3); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary {
  color:var(--text2); font-size:var(--t-s);
  letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:color 0.2s,gap 0.2s; -webkit-tap-highlight-color:transparent;
}
.btn-secondary:hover { color:var(--cream); gap:14px; }

.btn-whatsapp {
  background:#25d366; color:#fff;
  padding:14px 32px; font-size:var(--t-s); font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  display:inline-flex; align-items:center; gap:10px;
  border:none; cursor:pointer;
  transition:background 0.2s,transform 0.2s,box-shadow 0.2s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn-whatsapp:hover  { background:#20bd5a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,0.35); }
.btn-whatsapp:active { transform:translateY(0); }

/* ── FAB WhatsApp flotante ── */
.fab-wa {
  position:fixed;
  bottom:clamp(20px,4vw,28px);
  right:clamp(16px,3vw,28px);
  z-index:400;
  width:clamp(50px,8vw,58px); height:clamp(50px,8vw,58px);
  border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px,4vw,26px);
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.5);
  animation:float 3s ease-in-out infinite;
  transition:transform 0.3s,box-shadow 0.3s;
  -webkit-tap-highlight-color:transparent;
}
.fab-wa:hover { transform:scale(1.1) translateY(-4px); box-shadow:0 8px 28px rgba(37,211,102,0.6); }