/**
 * Andean Labs — Glass Light + motion tokens
 * Extiende la identidad existente (colores, tipografía) sin tocar la estructura.
 * Cargar DESPUÉS de los estilos inline de index.html para poder sobrescribir.
 */

:root {
  /* —— Glass tokens —— */
  --glass-bg: rgba(22, 34, 28, 0.55);
  --glass-bg-strong: rgba(13, 21, 18, 0.78);
  --glass-bg-card: rgba(28, 44, 36, 0.55);
  --glass-bg-card-hover: rgba(40, 60, 50, 0.68);
  --glass-border: rgba(200, 209, 203, 0.22);
  --glass-border-bright: rgba(224, 137, 90, 0.42);
  --glass-highlight: linear-gradient(
    145deg,
    rgba(242, 239, 232, 0.22) 0%,
    rgba(242, 239, 232, 0.05) 28%,
    rgba(111, 154, 137, 0.08) 58%,
    rgba(201, 113, 61, 0.04) 100%
  );
  --glass-blur: 18px;
  --glass-saturate: 1.45;
  --glass-radius: 12px;
  --glass-radius-sm: 7px;
  --glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(242, 239, 232, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
  --glass-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(242, 239, 232, 0.16) inset,
    0 0 0 1px rgba(224, 137, 90, 0.12);
  --glass-shine: linear-gradient(
    105deg,
    transparent 35%,
    rgba(242, 239, 232, 0.08) 48%,
    transparent 62%
  );

  /* —— Motion tokens —— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 640ms;
  --dur-reveal: 720ms;
  --reveal-y: 22px;
  --stagger-step: 70ms;
  --header-pad: 14px;
  --header-pad-compact: 8px;
}

/* ========== Glass utility ========== */
.glass,
.glass-surface {
  background: var(--glass-bg);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-surface,
  header,
  .lab-card,
  .serv-card,
  .news-card,
  .partners-slider,
  .gallery-slider,
  .gallery-nav,
  .partner-nav,
  .lang-switch,
  .share-btn,
  .social-icon,
  .field input,
  .field textarea,
  .partner-placeholder,
  .gallery-caption,
  .stat,
  form {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ========== Header / nav glass ========== */
header {
  background: var(--glass-bg-strong);
  background-image: var(--glass-highlight);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:
    background-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft),
    border-color var(--dur-med) var(--ease-soft);
}

header.is-compact {
  background: rgba(13, 21, 18, 0.88);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
  border-bottom-color: var(--glass-border-bright);
}

header .nav {
  padding-top: var(--header-pad);
  padding-bottom: var(--header-pad);
  transition: padding var(--dur-med) var(--ease-soft);
}

header.is-compact .nav {
  padding-top: var(--header-pad-compact);
  padding-bottom: var(--header-pad-compact);
}

header.is-compact .brand-mark {
  height: 24px;
  transition: height var(--dur-med) var(--ease-soft);
}

.brand-mark {
  transition: height var(--dur-med) var(--ease-soft);
}

.navlinks a {
  transition:
    color var(--dur-fast) var(--ease-soft),
    opacity var(--dur-fast) var(--ease-soft);
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--copper-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.navlinks a:hover::after,
.navlinks a:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 980px) {
  .navlinks {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
  .navlinks a::after {
    display: none;
  }
}

.lang-switch {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.06);
}

.lang-btn {
  transition:
    background var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}

.lang-btn:hover {
  transform: translateY(-1px);
}

.lang-btn.active {
  background: rgba(201, 113, 61, 0.18);
  color: var(--copper-bright);
  box-shadow: inset 0 0 0 1px var(--glass-border-bright);
}

.nav-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius-sm);
  transition:
    background var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
  box-shadow: 0 4px 16px rgba(201, 113, 61, 0.25);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(201, 113, 61, 0.35);
}

/* ========== Hero shine + parallax hooks ========== */
.hero {
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(201, 113, 61, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 78% 18%, rgba(111, 154, 137, 0.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
}

.hero-grid,
.hero-watermark {
  position: relative;
  z-index: 1;
}

.hero-watermark {
  transform: translate3d(0, calc(var(--hero-parallax, 0px) * 0.45), 0);
  transition: opacity var(--dur-slow) var(--ease-soft);
}

.hero-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--glass-shine);
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.hero.is-lit .hero-shine {
  animation: heroShine 4.8s var(--ease-soft) infinite;
}

@keyframes heroShine {
  0% { background-position: 120% 0; }
  45%, 100% { background-position: -40% 0; }
}

.schema {
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero:hover .schema {
  transform: translateY(-4px);
}

/* ========== Buttons microinteractions ========== */
.btn {
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius-sm);
  transition:
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.btn-primary {
  box-shadow: 0 6px 20px rgba(201, 113, 61, 0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 113, 61, 0.4);
}

.btn-ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--patina);
  box-shadow: var(--glass-shadow);
}

.btn:focus-visible {
  outline: 2px solid var(--copper-bright);
  outline-offset: 3px;
}

/* ========== Ambient light behind glass surfaces ========== */
#labs,
#servicios,
#noticias,
#convenios {
  position: relative;
  isolation: isolate;
}

#labs::before,
#servicios::before,
#noticias::before,
#convenios::before {
  content: "";
  position: absolute;
  inset: 8% 5% auto;
  height: 55%;
  background:
    radial-gradient(ellipse 50% 60% at 25% 40%, rgba(201, 113, 61, 0.1), transparent 70%),
    radial-gradient(ellipse 45% 55% at 75% 30%, rgba(111, 154, 137, 0.12), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

#labs > .wrap,
#servicios > .wrap,
#noticias > .wrap,
#convenios > .wrap {
  position: relative;
  z-index: 1;
}

/* ========== Lab cards glass ========== */
.lab-grid {
  gap: 12px;
  background: transparent;
  border: none;
}

.lab-card {
  position: relative;
  background: var(--glass-bg-card);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:
    background var(--dur-med) var(--ease-soft),
    border-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-out);
}

.lab-card::before,
.serv-card::before,
.news-card::before,
.partners-slider::before,
.gallery-slider::before,
form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 239, 232, 0.45) 30%,
    rgba(224, 137, 90, 0.35) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

.lab-card:hover,
.lab-card:focus-within {
  background: var(--glass-bg-card-hover);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-4px);
}

.lab-card h3,
.lab-card p,
.lab-list {
  color: inherit;
}

.lab-card p {
  color: var(--paper-dim);
}

.lab-list {
  color: var(--muted);
}

/* Contraste AA: texto sobre vidrio oscuro */
.lab-card h3,
.serv-card h4,
.news-body h3,
.partner-name,
.contact-item .val {
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.lab-card p,
.serv-card p,
.news-body p,
.partner-tagline {
  color: #c5d0ca; /* > AA vs dark glass */
}

/* ========== Services glass ========== */
.serv-grid {
  gap: 12px;
  background: transparent;
  border: none;
}

.serv-card {
  position: relative;
  background: var(--glass-bg-card);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  transition:
    background var(--dur-med) var(--ease-soft),
    border-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-out);
}

.serv-card:hover,
.serv-card:focus-within {
  background: var(--glass-bg-card-hover);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
}

/* ========== News glass ========== */
.news-card {
  position: relative;
  background: var(--glass-bg-card);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  transition:
    border-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-out);
}

.news-card:hover,
.news-card:focus-within {
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-4px);
}

.share-btn {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft);
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--patina);
  color: var(--patina);
  transform: translateY(-1px);
  background: rgba(111, 154, 137, 0.12);
}

/* ========== Partners / gallery glass ========== */
.partners-slider,
.gallery-slider {
  position: relative;
  overflow: hidden;
  background:
    var(--glass-highlight),
    var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.partners-slider {
  background-image:
    var(--glass-highlight),
    repeating-linear-gradient(135deg, rgba(13, 21, 18, 0.35) 0 2px, transparent 2px 14px);
}

.partner-placeholder {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.06);
}

.gallery-nav,
.partner-nav {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-sm);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft);
}

.gallery-nav:hover,
.partner-nav:hover,
.gallery-nav:focus-visible,
.partner-nav:focus-visible {
  border-color: var(--patina);
  color: var(--patina);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
  background: rgba(111, 154, 137, 0.12);
}

.gallery-dot,
.partner-dot {
  transition:
    transform var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.gallery-dot:hover,
.partner-dot:hover {
  transform: scale(1.25);
}

.gallery-dot.active,
.partner-dot.active {
  box-shadow: 0 0 0 3px rgba(224, 137, 90, 0.25);
}

.gallery-caption {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 21, 18, 0.55) 35%,
    rgba(13, 21, 18, 0.88) 100%
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.gallery-media {
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  overflow: hidden;
}

.gallery-placeholder {
  background: var(--glass-bg-card);
  border-radius: var(--glass-radius);
}

/* Carrusel: transiciones más suaves (solo opacity/transform) */
.gallery-slide.active,
.partner-slide.active {
  animation: glassFadeIn var(--dur-slow) var(--ease-out);
}

@keyframes glassFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========== Stats / contact / form glass ========== */
.stat-strip {
  gap: 12px;
  background: transparent;
  border: none;
}

.stat {
  background: var(--glass-bg-card);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft);
}

.stat:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-shadow-hover);
}

.contact-item {
  border-top-color: var(--glass-border);
}

form {
  position: relative;
  background: var(--glass-bg-card);
  background-image: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: 28px 24px;
}

.field input,
.field textarea {
  background: rgba(13, 21, 18, 0.55);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--patina);
  box-shadow: 0 0 0 3px rgba(111, 154, 137, 0.2);
  background: rgba(13, 21, 18, 0.7);
}

.social-icon {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow);
}

.podcast-photo,
.podcast-photo picture,
.bio-photos picture,
.bio-photos img {
  border-radius: var(--glass-radius);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-soft);
}

.podcast-photo:hover,
.podcast-photo:hover picture,
.bio-photos picture:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

.gallery-media picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.proj-row {
  border-top-color: var(--glass-border);
  transition:
    background var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
  border-radius: var(--glass-radius-sm);
  padding-left: 8px;
  padding-right: 8px;
}

.proj-row:hover {
  background: rgba(24, 40, 33, 0.35);
  transform: translateX(4px);
}

/* ========== Reveal on scroll (enhanced) ========== */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-stagger > .reveal-child,
.lab-grid > .lab-card,
.serv-grid > .serv-card,
.news-grid > .news-card,
.stat-strip > .stat {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--stagger-i, 0) * var(--stagger-step));
}

.reveal.in > .lab-card,
.reveal.in > .serv-card,
.reveal.in > .news-card,
.reveal.in > .stat,
.reveal-stagger.in > .reveal-child,
.lab-grid.reveal.in > .lab-card,
.serv-grid.reveal.in > .serv-card,
.news-grid.reveal.in > .news-card,
.stat-strip.reveal.in > .stat,
.is-staggered.in > .lab-card,
.is-staggered.in > .serv-card,
.is-staggered.in > .news-card,
.is-staggered.in > .stat {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Language swap fade */
html.is-lang-fading main {
  opacity: 0.35;
  transition: opacity var(--dur-med) var(--ease-soft);
}

html:not(.is-lang-fading) main {
  transition: opacity var(--dur-med) var(--ease-soft);
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }

  .reveal,
  .reveal.in,
  .lab-grid > .lab-card,
  .serv-grid > .serv-card,
  .news-grid > .news-card,
  .stat-strip > .stat,
  .reveal.in > .lab-card,
  .reveal.in > .serv-card,
  .reveal.in > .news-card,
  .reveal.in > .stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gallery-slide.active,
  .partner-slide.active {
    animation: none;
  }

  .hero.is-lit .hero-shine,
  .hero::after,
  .hero-watermark,
  .schema {
    animation: none !important;
    transform: none !important;
  }

  header .nav,
  .brand-mark,
  .btn,
  .lab-card,
  .serv-card,
  .news-card,
  .proj-row,
  .gallery-nav,
  .partner-nav {
    transition: none !important;
  }

  .lab-card:hover,
  .serv-card:hover,
  .news-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .proj-row:hover {
    transform: none !important;
  }

  html.is-lang-fading main {
    opacity: 1;
    transition: none;
  }
}