/* ============================================================
   EXTRAS CSS — ISC Colombia
   Preloader · Cursor · Split-text · Magnético · Shimmer · Variantes
   ============================================================ */

/* ---- Ocultar cursor nativo en desktop ---- */
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

/* ================================================================
   CURSOR PERSONALIZADO
   ================================================================ */
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--reseda, #848C67);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(132, 140, 103, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s,
    background   0.25s;
  will-change: transform;
}

#cursor-ring.cursor-hover {
  width: 54px;
  height: 54px;
  border-color: rgba(132, 140, 103, 1);
  background: rgba(132, 140, 103, 0.07);
}

/* ================================================================
   PRELOADER — Cortina que sube (curtain rise)
   ================================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #141a0c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* Salida: toda la pantalla sube como telón */
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1) !important;
  opacity: 1   !important;
  visibility: visible !important;
}

#preloader.preloader-hide {
  transform: translateY(-100%) !important;
}

/* Línea de acento en la base del preloader (se ve al subir) */
#preloader::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--reseda, #848C67), transparent);
  opacity: 0.6;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* SVG serpiente con glow */
.preloader-snake {
  width: 130px;
  height: 130px;
  animation: snakeWiggle 1.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 18px rgba(132, 140, 103, 0.5));
}

@keyframes snakeWiggle {
  0%   { transform: rotate(-9deg) scale(0.94); }
  100% { transform: rotate(9deg)  scale(1.06); }
}

/* Trazo que se dibuja */
#snake-body {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: drawSnake 1.8s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes drawSnake {
  to { stroke-dashoffset: 0; }
}

/* Texto que emerge desde abajo (clip + slide) */
.preloader-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  overflow: hidden;       /* clip del slide */
  line-height: 1.6;
}

.preloader-text-inner {
  display: block;
  color: rgba(155, 161, 134, 0.85);
  animation: textRise 1s cubic-bezier(0.76, 0, 0.24, 1) 0.55s both;
}

@keyframes textRise {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Barra de carga con shimmer */
.preloader-bar {
  width: 200px;
  height: 2px;
  background: rgba(132, 140, 103, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.preloader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--ebony, #5C6249) 0%,
    var(--sage, #9BA186) 50%,
    var(--ebony, #5C6249) 100%
  );
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 1.7s cubic-bezier(0.4, 0, 0.2, 1);
  animation: barShimmer 1.8s linear infinite;
}

@keyframes barShimmer {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}

/* ================================================================
   HÉROE — Reveal línea por línea (split-text)
   ================================================================ */

/* Contenedor de cada línea oculta con overflow */
.hero-line {
  display: block;
  overflow: hidden;
  line-height: 1.08 !important;
  margin-bottom: 0.05em;
}

/* El texto real se desliza hacia arriba con un leve skew */
.hero-line-inner {
  display: block;
  animation: lineReveal 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes lineReveal {
  from {
    transform: translateY(108%) skewY(2.5deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
  }
}

/* Palabras del hero-desc: fade + rise escalonado */
.hero-word {
  display: inline-block;
  animation: wordUp 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes wordUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   CLIP-PATH REVEALS — section labels y títulos
   ================================================================ */

.clip-pending {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

.clip-pending.clip-revealed {
  clip-path: inset(0 0 0% 0);
}

/* ================================================================
   ESCALAS DIVISORAS — shimmer pasante
   ================================================================ */

.scales-divider {
  position: relative;
  overflow: hidden;
}

/* Barra de luz que cruza las escamas de izquierda a derecha */
.scales-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 90%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(155, 161, 134, 0.55) 42%,
    rgba(225, 219, 202, 0.45) 50%,
    rgba(155, 161, 134, 0.55) 58%,
    transparent 100%
  );
  pointer-events: none;
  animation: scalesShimmer 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes scalesShimmer {
  0%   { left: -90%; opacity: 0;   }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* ================================================================
   VARIANTES DE FADE-IN DIRECCIONAL
   ================================================================ */

/* Desde la izquierda */
.fade-in-left {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Desde la derecha */
.fade-in-right {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Escala con leve traslación */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.84) translateY(22px);
  transition:
    opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-scale.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Rotación sutil */
.fade-in-rotate {
  opacity: 0;
  transform: rotate(-3deg) translateY(24px);
  transition:
    opacity   0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-rotate.visible {
  opacity: 1;
  transform: rotate(0deg) translateY(0);
}

/* ================================================================
   STATS — pop al contar
   ================================================================ */
.stat-number.stat-pop {
  animation: statPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes statPop {
  from { transform: scale(0.65); opacity: 0.4; }
  to   { transform: scale(1);    opacity: 1;   }
}

/* ================================================================
   BOTONES MAGNÉTICOS — los custom props son seteados por extras.js
   Extras.css carga DESPUÉS de styles.css, así que gana el cascade
   con igual especificidad y ambos !important
   ================================================================ */

/* Definir los vars en el elemento (fallback 0px) */
.btn-primary, .btn-outline, .btn-submit, .cart-btn {
  --mag-dx: 0px;
  --mag-dy: 0px;
}

/* Override hover transforms incluyendo el desplazamiento magnético */
.btn-primary:hover {
  transform: translate(var(--mag-dx), calc(var(--mag-dy) - 3px)) !important;
}
.btn-outline:hover {
  transform: translate(var(--mag-dx), calc(var(--mag-dy) - 3px)) !important;
}
.btn-submit:hover {
  transform: translate(var(--mag-dx), calc(var(--mag-dy) - 3px)) !important;
}
.cart-btn:hover {
  transform: translate(var(--mag-dx), var(--mag-dy)) scale(1.08) !important;
}

/* ================================================================
   DÍAS FUNDACIÓN — números tabulares
   ================================================================ */
#stat-dias {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   SCROLL PROGRESS BAR — barra de progreso superior
   ================================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--ebony, #5C6249), var(--reseda, #848C67), var(--sage, #9BA186));
  z-index: 100001;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
}

/* ================================================================
   NAV — indicador de sección activa
   ================================================================ */
.nav-links a.nav-active {
  color: var(--ebony) !important;
}
.nav-links a.nav-active::after {
  width: 100% !important;
}

/* ================================================================
   HERO em — brillo pulsante en el texto italic
   ================================================================ */
@keyframes heroEmGlow {
  0%, 100% { color: var(--reseda, #848C67); }
  50%       { color: #b8c290; text-shadow: 0 0 24px rgba(132,140,103,0.45); }
}
.hero-content h1 em {
  animation: heroEmGlow 4s ease-in-out infinite;
}

/* ================================================================
   VALUES LIST — reveal escalonado al hacer scroll
   ================================================================ */
.values-list.values-animate li {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.values-list.values-visible li {
  opacity: 1;
  transform: translateX(0);
}
.values-list.values-visible li:nth-child(1) { transition-delay: 0.00s; }
.values-list.values-visible li:nth-child(2) { transition-delay: 0.08s; }
.values-list.values-visible li:nth-child(3) { transition-delay: 0.16s; }
.values-list.values-visible li:nth-child(4) { transition-delay: 0.24s; }
.values-list.values-visible li:nth-child(5) { transition-delay: 0.32s; }
.values-list.values-visible li:nth-child(6) { transition-delay: 0.40s; }

/* ================================================================
   STEP NUMS — pop animado con bounce al entrar en viewport
   ================================================================ */
@keyframes stepNumPop {
  0%   { transform: scale(0.55) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.step.step-animated .step-num {
  animation: stepNumPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.step:nth-child(2).step-animated .step-num { animation-delay: 0.13s; }
.step:nth-child(3).step-animated .step-num { animation-delay: 0.26s; }
.step:nth-child(4).step-animated .step-num { animation-delay: 0.39s; }

/* ================================================================
   TEAM AVATAR — anillo dashed giratorio al hover
   ================================================================ */
.team-avatar {
  position: relative;
}
.team-avatar::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed transparent;
  transition: border-color 0.4s;
  pointer-events: none;
}
.team-card:hover .team-avatar::after {
  border-color: rgba(132,140,103,0.65);
  animation: spin-slow 4s linear infinite;
}

/* ================================================================
   COMBO BANNER — precio con pulso de atención
   ================================================================ */
@keyframes comboPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); text-shadow: 0 2px 18px rgba(92,98,73,0.3); }
}
.combo-price {
  display: inline-block;
  animation: comboPulse 2.8s ease-in-out infinite;
}

/* ================================================================
   SECTION LABEL — subrayado que crece al entrar en viewport
   ================================================================ */
.section-label {
  position: relative;
}
.section-label::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--reseda, #848C67);
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1) 0.2s;
}
.section-label.label-visible::after {
  width: 100%;
}

/* ================================================================
   SOCIAL FLOAT — anillo expansivo al hover
   ================================================================ */
.social-float-btn {
  position: relative;
  overflow: visible !important;
}
@keyframes socialRingExpand {
  from { transform: translate(-50%,-50%) scale(1); opacity: 0.55; }
  to   { transform: translate(-50%,-50%) scale(1.65); opacity: 0; }
}
.social-float-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid currentColor;
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  pointer-events: none;
}
.social-float-btn:hover::before {
  animation: socialRingExpand 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ================================================================
   NAV SCROLLED — sombra más pronunciada con scroll
   ================================================================ */
nav.scrolled-deep {
  box-shadow: 0 6px 32px rgba(46,49,39,0.14) !important;
}

/* ================================================================
   STAT NUMBERS — highlight animado al hacer hover en stats bar
   ================================================================ */
.stat:hover .stat-number {
  color: var(--bone);
  text-shadow: 0 0 20px rgba(155,161,134,0.5);
  transition: color 0.3s, text-shadow 0.3s;
}

/* ================================================================
   PROJECT IMAGE PHOTO — zoom suave en el contenedor
   ================================================================ */
.project-img--photo {
  overflow: hidden;
}
.project-img--photo img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
.project-card:hover .project-img--photo img {
  transform: scale(1.06) !important;
}

/* ================================================================
   PRODUCT FEATURED — imagen foto con zoom
   ================================================================ */
.product-img--photo {
  overflow: hidden;
}
.product-img--photo img {
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .product-img--photo img {
  transform: scale(1.07);
}

/* ================================================================
   ESCAMAS FLOTANTES — canvas de partículas en el hero
   ================================================================ */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ================================================================
   INDICADOR DE SECCIÓN — puntos de navegación lateral
   Reset completo para anular cualquier estilo heredado del nav global
   ================================================================ */
#section-indicator {
  /* resets de nav global */
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  left: auto !important;
  top: 50% !important;
  animation: none !important;
  /* layout propio */
  position: fixed;
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-end;
  width: auto;
  height: auto;
  justify-content: initial;
}
#section-indicator a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
}
.si-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid, #5C6249);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.22s, transform 0.22s;
  white-space: nowrap;
  pointer-events: none;
}
.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(132,140,103,0.45);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.28s, border-color 0.28s, transform 0.28s, box-shadow 0.28s;
}
#section-indicator a:hover .si-label,
#section-indicator a.si-active .si-label {
  opacity: 1;
  transform: translateX(0);
}
#section-indicator a.si-active .si-dot {
  background: var(--ebony, #5C6249);
  border-color: var(--ebony, #5C6249);
  transform: scale(1.5);
  box-shadow: 0 0 0 3px rgba(92,98,73,0.16);
}
#section-indicator a:hover .si-dot {
  background: var(--reseda, #848C67);
  border-color: var(--reseda, #848C67);
  transform: scale(1.25);
}
@media (max-width: 1100px) {
  #section-indicator { display: none; }
}

/* ================================================================
   RIPPLE — onda en clics de botones (btn-outline, btn-add-cart, cart-btn)
   Keyframe renombrado para no chocar con el rippleAnim de script.js
   ================================================================ */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0);
  animation: rippleExpand 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes rippleExpand {
  to { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ================================================================
   MAPA TOOLTIP — escala + slide al aparecer
   ================================================================ */
.mapa-tooltip {
  transform-origin: top left;
  transform: scale(0.88) translateY(6px) !important;
  transition: opacity 0.18s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.mapa-tooltip.visible {
  transform: scale(1) translateY(0) !important;
}

/* ================================================================
   STATS — números tabulares durante el conteo
   ================================================================ */
.stat-number.is-counting {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   TILT 3D — las cards tienen perspectiva mientras se aplica via JS
   ================================================================ */
.product-card,
.team-card,
.project-card,
.about-card,
.alcance-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ================================================================
   TEXT SCRAMBLE — el h2 parpadea brevemente al entrar en viewport
   los estilos del texto no cambian, solo el contenido via JS
   ================================================================ */
h2 {
  will-change: contents;
}

/* ================================================================
   MOTION ACCESSIBILITY — prefers-reduced-motion  (a11y crítico)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  /* Garantiza que el contenido sea visible sin animaciones */
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale,
  .fade-in-rotate,
  .galeria-card,
  .hero-word,
  .hero-line-inner,
  .clip-pending {
    opacity:   1    !important;
    transform: none !important;
    clip-path: none !important;
  }
  #hero-grain,
  #hero-particles { display: none !important; }
}

/* ================================================================
   STEP TITLE — se ilumina junto con el número al entrar en viewport
   (el .step-num ya se ilumina vía styles.css; esto añade el título)
   ================================================================ */
.step-title { transition: color 0.55s ease; }
.step.step-lit .step-title { color: rgba(225, 219, 202, 0.92); }

/* ================================================================
   GALERÍA — tarjetas aparecen en cascada al renderizarse
   ================================================================ */
@keyframes galeriaCardIn {
  from {
    opacity:   0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}
.galeria-card {
  animation:       galeriaCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}

/* ================================================================
   MODALES — escala + fade al abrirse (selector de atributo inline)
   ================================================================ */
@keyframes modalCardIn {
  from {
    opacity:   0;
    transform: scale(0.93) translateY(18px);
  }
  to {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
}
.modal-overlay[style*="flex"] .modal-card,
.modal-overlay[style*="flex"] .modal-foto-card {
  animation: modalCardIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ================================================================
   HERO — grano de película sobre el video para textura cinematográfica
   ================================================================ */
#hero-grain {
  position:         absolute;
  inset:            0;
  z-index:          3;
  pointer-events:   none;
  opacity:          0.04;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:   200px 200px;
  animation:         grainAnimate 0.7s steps(2) infinite;
}
@keyframes grainAnimate {
  0%   { background-position:   0px   0px; }
  33%  { background-position: -44px  22px; }
  66%  { background-position:  18px -38px; }
  100% { background-position:  52px  14px; }
}

/* ================================================================
   MAPA — destello táctil al seleccionar un departamento
   ================================================================ */
@keyframes depFlash {
  0%   { filter: brightness(1.7) saturate(1.5); }
  60%  { filter: brightness(1.2) saturate(1.2); }
  100% { filter: brightness(0.85); }
}
.dep.dep-flash {
  animation: depFlash 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ================================================================
   FIX EASINGS — reemplaza curvas con overshoot por ease-out natural
   ================================================================ */
/* statPop sin bounce */
@keyframes statPop {
  from { transform: scale(0.72); opacity: 0.5; }
  to   { transform: scale(1);    opacity: 1;   }
}
/* stepNumPop sin bounce */
@keyframes stepNumPop {
  0%   { transform: scale(0.58) rotate(-8deg);  opacity: 0; }
  70%  { transform: scale(1.05) rotate(1.5deg);             }
  100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}