/*
 * ═══════════════════════════════════════════════════
 * YANACÁ ASOCIADOS — ENHANCEMENTS v3.0
 * Mejoras aditivas premium
 * ═══════════════════════════════════════════════════
 */

/* ── DESIGN TOKENS ──────────────────────────────────── */
:root {
  --yn-green:       #14ba48;
  --yn-green-dark:  #0f8f36;
  --yn-orange:      #ff7b00;
  --yn-teal:        #2ec4b6;
  --yn-shadow-sm:   0 2px 8px rgba(15,20,25,.05);
  --yn-shadow-md:   0 6px 20px rgba(15,20,25,.09);
  --yn-shadow-lg:   0 16px 48px rgba(15,20,25,.13);
  --yn-radius:      14px;
  --yn-ease:        cubic-bezier(.4,0,.2,1);
  --yn-spring:      cubic-bezier(.34,1.56,.64,1);
}

/* ── 1. PRELOADER ────────────────────────────────────── */
#yn-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity .45s var(--yn-ease), visibility .45s;
}
#yn-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.yn-preloader-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: yn-logo-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes yn-logo-pulse {
  from { transform: scale(.92); opacity: .7; }
  to   { transform: scale(1);   opacity: 1; }
}
.yn-preloader-bar {
  width: 160px;
  height: 3px;
  border-radius: 999px;
  background: #eef0f0;
  overflow: hidden;
  position: relative;
}
.yn-preloader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--yn-green), var(--yn-teal), var(--yn-orange));
  border-radius: inherit;
  animation: yn-bar-slide 1s var(--yn-ease) infinite;
}
@keyframes yn-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}

/* ── 2. TYPED CURSOR EN HERO ─────────────────────────── */
.yn-typed-cursor {
  display: inline-block;
  width: 3px;
  height: .9em;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  margin-left: 2px;
  vertical-align: middle;
  animation: yn-blink .8s step-end infinite;
}
@keyframes yn-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 3. TOAST NOTIFICATION ───────────────────────────── */
#yn-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9998;
  background: #172014;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--yn-ease), transform .3s var(--yn-spring);
  white-space: nowrap;
}
#yn-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#yn-toast i {
  color: var(--yn-green);
  font-size: 15px;
}

/* ── 4. HEADER ACTIVE NAV PILL ───────────────────────── */
.nav-menu li a.is-active {
  color: var(--yn-green-dark) !important;
  background: rgba(20,186,72,.09) !important;
}

/* ── 4b. REMOVE PERSISTENT ANCHOR LINK STYLING ──────────── */
/* Específicamente para enlaces anchor (#), remove todos los estilos de "seleccionado" */
.nav-menu a[href^="#"],
.nav-menu li > a[href^="#"] {
  color: var(--text-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-menu a[href^="#"]::after,
.nav-menu li > a[href^="#"]::after {
  width: 0 !important;
}

.nav-menu a[href^="#"]:hover,
.nav-menu li > a[href^="#"]:hover {
  color: var(--yn-green-dark) !important;
  background: rgba(20,186,72,.06) !important;
  box-shadow: none !important;
}

.nav-menu a[href^="#"]:hover::after,
.nav-menu li > a[href^="#"]:hover::after {
  width: 100% !important;
}

/* ── 5. NAVBAR GLASS ENHANCED on scroll ──────────────── */
header.is-scrolled {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 1px 0 rgba(20,186,72,.1), 0 4px 16px rgba(0,0,0,.06) !important;
}

/* ── 6. READING PROGRESS BAR (top) ──────────────────── */
#yn-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 10001;
  background: linear-gradient(90deg, var(--yn-green), var(--yn-teal) 50%, var(--yn-orange));
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  will-change: width;
  transition: width .08s linear;
}

/* ── 7. SCROLL TO TOP BUTTON (reemplaza el inline) ───── */
#yn-scroll-top {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 900;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--yn-green-dark);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(15,143,54,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity .3s var(--yn-ease),
    transform .35s var(--yn-spring),
    background .2s,
    box-shadow .2s;
}
#yn-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#yn-scroll-top:hover {
  background: var(--yn-green);
  box-shadow: 0 8px 24px rgba(20,186,72,.45);
  transform: translateY(-3px);
}

/* ── 8. STAT CARDS — shimmer on hover ────────────────── */
.stat-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s var(--yn-ease) !important;
  overflow: hidden;
  position: relative;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: inherit;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--yn-shadow-lg) !important;
}
.stat-card:hover::after { opacity: 1; }

/* ── 9. ABOUT US KPI CARDS ───────────────────────────── */
.about-us-kpi-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s var(--yn-ease), border-color .3s !important;
  position: relative;
  overflow: hidden;
}
.about-us-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 80% 20%, rgba(20,186,72,.07) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.about-us-kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--yn-shadow-md) !important;
}
.about-us-kpi-card:hover::before { opacity: 1; }

/* ── 10. SERVICES ECOSYSTEM — mobile grid fix ─────────── */
@media (max-width: 900px) {
  .services-ecosystem {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    min-height: unset !important;
    aspect-ratio: unset !important;
    padding: 4px 0 !important;
  }
  .service-center-orb { display: none !important; }
  .service-node {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(20,186,72,.12) !important;
    box-shadow: 0 4px 14px rgba(20,186,72,.07) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: transform .25s var(--yn-ease), box-shadow .25s !important;
  }
  .service-node:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(20,186,72,.16) !important;
  }
  .service-node i {
    animation: none !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
    background: linear-gradient(135deg,#f0fff6,#e4f7ea) !important;
    box-shadow: 0 6px 16px rgba(20,186,72,.14) !important;
    margin: 0 auto 10px !important;
    color: var(--yn-green) !important;
  }
  .service-node h3  { font-size: .78rem !important; color: #0f3320 !important; }
  .service-node p   { font-size: .72rem !important; margin: 0 !important; }
  .service-node-link { font-size: .68rem !important; }
  .services-ecosystem::before,
  .services-ecosystem::after { display: none !important; }
}
@media (max-width: 480px) {
  .service-node p { display: none !important; }
}

/* ── 11. CLIENT SECTOR CARDS ─────────────────────────── */
.client-sector-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--yn-ease), box-shadow .3s var(--yn-ease) !important;
}
.client-sector-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yn-green), var(--yn-teal));
  border-radius: 4px 0 0 4px;
  transition: width .3s var(--yn-ease);
}
.client-sector-card:hover {
  transform: translateX(4px);
  box-shadow: var(--yn-shadow-md) !important;
}
.client-sector-card:hover::before { width: 6px; }

/* ── 12. COVERAGE CHIPS ──────────────────────────────── */
.coverage-chip {
  transition: background .25s, transform .25s var(--yn-spring), color .25s !important;
}
.coverage-chip:hover {
  background: rgba(20,186,72,.15) !important;
  transform: translateY(-2px) scale(1.03) !important;
  color: var(--yn-green-dark) !important;
}

/* ── 13. CLOSING COMMITMENT CARDS — shimmer ──────────── */
.closing-commitment-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--yn-ease), box-shadow .3s !important;
}
.closing-commitment-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  pointer-events: none;
  transition: left .55s var(--yn-ease);
}
.closing-commitment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.15) !important;
}
.closing-commitment-card:hover::after { left: 150%; }

/* ── 14. CTA BUTTONS ELEVATED HOVER ─────────────────── */
.cta-btn--primary {
  transition: transform .25s var(--yn-spring), box-shadow .25s !important;
}
.cta-btn--primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(180,240,180,.45) !important;
}
.cta-btn--secondary {
  transition: transform .25s var(--yn-spring), box-shadow .25s !important;
}
.cta-btn--secondary:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* ── 15. CONTACT LOCATION CARDS ──────────────────────── */
.contact-location-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s !important;
}
.contact-location-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
}

/* ── 16. COPY-TO-CLIPBOARD TRIGGER ──────────────────── */
[data-yn-copy] {
  cursor: pointer;
  position: relative;
}
[data-yn-copy]:hover {
  opacity: .85;
}

/* ── 17. SOCIAL ICON LINKS ───────────────────────────── */
.social-icon-link {
  transition:
    transform .3s var(--yn-spring),
    background .25s,
    color .25s !important;
}
.social-icon-link:hover {
  transform: translateY(-4px) scale(1.12) !important;
}

/* ── 18. BANNER IMG HOVER ────────────────────────────── */
.banner-img {
  transition: transform .5s var(--yn-ease), box-shadow .5s !important;
}
.about-us-split:hover .banner-img,
.clients-hero:hover .banner-img {
  transform: scale(1.03) !important;
}

/* ── 19. SERVICE NODE LINK ───────────────────────────── */
.service-node-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s var(--yn-ease), color .2s !important;
}
.service-node-link::after {
  content: '→';
  transition: transform .2s var(--yn-ease);
  display: inline-block;
}
.service-node-link:hover {
  gap: 8px !important;
}
.service-node-link:hover::after { transform: translateX(3px); }

/* ── 20. REVEAL ANIMATION — smoother + stagger ────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .6s var(--yn-ease),
    transform .6s var(--yn-ease) !important;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stats-grid .stat-card:nth-child(1) { transition-delay: .05s; }
.stats-grid .stat-card:nth-child(2) { transition-delay: .12s; }
.stats-grid .stat-card:nth-child(3) { transition-delay: .19s; }

.about-us-kpi-grid .about-us-kpi-card:nth-child(1) { transition-delay: .04s; }
.about-us-kpi-grid .about-us-kpi-card:nth-child(2) { transition-delay: .1s;  }
.about-us-kpi-grid .about-us-kpi-card:nth-child(3) { transition-delay: .16s; }
.about-us-kpi-grid .about-us-kpi-card:nth-child(4) { transition-delay: .22s; }

.closing-commitments-grid .closing-commitment-card:nth-child(1) { transition-delay: .05s; }
.closing-commitments-grid .closing-commitment-card:nth-child(2) { transition-delay: .11s; }
.closing-commitments-grid .closing-commitment-card:nth-child(3) { transition-delay: .17s; }
.closing-commitments-grid .closing-commitment-card:nth-child(4) { transition-delay: .23s; }

/* ── 21. FOCUS VISIBLE GLOBAL ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--yn-green) !important;
  outline-offset: 3px !important;
  border-radius: 5px !important;
}
:focus:not(:focus-visible) { outline: none !important; }

/* ── 22. SELECTION COLOR ────────────────────────────── */
::selection {
  background: rgba(20,186,72,.22);
  color: #0a2914;
}

/* ── 23. NOSOTROS — highlight card hover ─────────────── */
.highlight-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s, border-color .3s !important;
}
.highlight-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--yn-shadow-md) !important;
}

/* ── 24. SERVICIOS PAGE — service links hover ────────── */
.services-link-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s, border-color .3s !important;
}
.services-link-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--yn-shadow-lg) !important;
}

/* ── 25. MEDIA QUERIES — mobile polish ───────────────── */
@media (max-width: 576px) {
  #yn-scroll-top {
    bottom: 78px;
    right: 16px;
  }
  #yn-toast {
    font-size: 12px;
    padding: 10px 16px;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }
}

/* ── 26. REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #yn-preloader { display: none; }
}

/* ── 27. NOSOTROS — proceso cards ────────────────────── */
.proceso-step {
  transition: transform .3s var(--yn-ease), box-shadow .3s, background .3s !important;
}

/* ── 28. BENEFICIO CARDS ─────────────────────────────── */
.beneficio-card {
  transition: transform .3s var(--yn-ease), box-shadow .3s !important;
}

/* ── 29. INCLUDE ITEMS (carousel servicios) ──────────── */
.include-item {
  transition: transform .3s var(--yn-ease), box-shadow .3s, border-color .3s !important;
}

/* ── 30. IMG ZOOM CURSOR ────────────────────────────────*/
.process-media-card img,
.process-media-card video {
  cursor: zoom-in;
}