/* ============================================================
   INSTITUTO INTELIGENTE × SEMANA INFORMÁTICA 2026
   Paleta oficial: verde profundo + lima + trails de luz
   ============================================================ */

:root {
  /* Green Palette (SI2026) */
  --green-900:    #0B3D2A;   /* deeper band */
  --green-800:    #0F4A33;   /* header band */
  --green-700:    #145A3D;   /* primary brand */
  --green-600:    #1D6E4C;
  --green-500:    #2A845D;
  --green-400:    #3F9B74;

  --lime:         #A8CC3A;   /* bright accent */
  --lime-bright:  #BCE04C;
  --lime-soft:    rgba(168,204,58,0.14);

  /* Neutrals */
  --paper:        #F5F5F2;   /* body background */
  --paper-2:      #EDEDE8;
  --paper-3:      #E2E2DC;
  --white:        #FFFFFF;

  --ink:          #1A2B20;   /* dark text on light bg */
  --ink-2:        #2F4438;
  --ink-soft:     #5D7067;
  --ink-ghost:    rgba(20,90,61,0.12);
  --line:         rgba(20,90,61,0.14);
  --line-strong:  rgba(20,90,61,0.28);

  /* Legacy tokens mapped for compatibility */
  --accent:       var(--lime);
  --accent-2:     #8FB32E;
  --accent-blue:  var(--green-500);
  --accent-blue-2:var(--green-700);
  --accent-red:   var(--lime-bright);

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --shadow-soft:  0 10px 30px -12px rgba(11,61,42,0.18);
  --shadow-hard:  0 24px 50px -18px rgba(11,61,42,0.32);
  --shadow-green: 0 20px 50px -20px rgba(20,90,61,0.5);

  --band-h: 92px;
}

* { box-sizing: border-box; }
*::selection { background: var(--lime); color: var(--green-900); }

html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
strong { font-weight: 700; color: var(--green-800); }
em { font-style: italic; color: var(--green-700); font-weight: 500; }

.container {
  width: min(1280px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.accent { color: var(--lime); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 80;
  background: rgba(255,255,255,0.08);
}
.progress-bar__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--lime), var(--lime-bright));
  transition: width 120ms linear;
  box-shadow: 0 0 14px rgba(168,204,58,0.8);
}

/* ============================================================
   SI2026 TOP BAND (fixed)
   ============================================================ */
.si-band {
  position: fixed;
  left: 0; right: 0;
  z-index: 70;
  height: var(--band-h);
  background: linear-gradient(180deg, var(--green-800), var(--green-900));
  color: var(--white);
  overflow: hidden;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,0.35);
}
.si-band--top {
  top: 0;
  border-bottom: 1px solid rgba(168,204,58,0.2);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
  will-change: transform, opacity;
}
.si-band--top.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.si-band--bottom {
  bottom: 0; top: auto;
  box-shadow: 0 -6px 24px -8px rgba(0,0,0,0.35);
  border-top: 1px solid rgba(168,204,58,0.18);
  background: linear-gradient(0deg, var(--green-800), var(--green-900));
}

.si-band__inner {
  height: 100%;
  max-width: min(1600px, 96vw);
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  gap: 24px;
}

.si-band__trails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}
.si-band__trails svg { width: 100%; height: 100%; }

/* Left side of top band: Simarro logo + tag */
.si-band__left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.si-band__simarro {
  height: calc(var(--band-h) - 12px);
  max-height: 84px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.98;
  transition: transform 0.3s ease;
}
.si-band__simarro:hover { transform: scale(1.05); }
.si-band__divider { opacity: 0.4; font-size: 18px; }
.si-band__proj {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  white-space: nowrap;
}

/* SI2026 wordmark */
.si-band__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--white);
  transition: transform 0.3s ease;
}
.si-band__brand:hover { transform: translateY(-1px); }

.si-logo svg {
  width: 38px; height: 38px;
  filter: drop-shadow(0 0 6px rgba(168,204,58,0.5));
}

.si-wordmark {
  display: flex; flex-direction: column;
  line-height: 0.95;
  font-family: var(--font-display);
}
.si-wordmark__l1 {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white);
  display: flex; align-items: baseline; gap: 6px;
}
.si-wordmark__year {
  font-size: 11px;
  font-weight: 700;
  color: var(--lime);
  padding: 2px 5px;
  background: rgba(168,204,58,0.14);
  border-radius: 2px;
}
.si-wordmark__l2 {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
}

.si-band__dates {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--lime);
  padding: 4px 8px;
  border: 1px solid rgba(168,204,58,0.5);
  border-radius: 2px;
  text-transform: uppercase;
}

/* Bottom band content */
.si-band__slogan {
  display: flex; flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-display);
}
.si-band__slogan-main {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.005em;
}
.si-band__slogan-sub {
  font-size: 0.92rem;
  color: var(--lime);
  font-weight: 500;
}

.si-band__right {
  display: flex; align-items: center; gap: 16px;
}
.si-band__hash {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.9);
}
.si-socials {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px;
}
.si-soc {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  transition: all 0.25s ease;
}
.si-soc svg { width: 18px; height: 18px; display: block; }
.si-socials li:hover .si-soc {
  background: var(--lime);
  color: var(--green-900);
  transform: translateY(-2px);
}

/* ============================================================
   SIDE NAV DOTS
   ============================================================ */
.side-nav {
  position: fixed;
  right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 55;
  display: flex; flex-direction: column; gap: 12px;
}
.side-nav__dot {
  width: 9px; height: 9px;
  border: 1.5px solid var(--green-700);
  border-radius: 50%;
  display: block;
  transition: all 0.35s cubic-bezier(.6,.2,.2,1);
  position: relative;
  background: var(--paper);
}
.side-nav__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--green-800);
  padding: 5px 9px;
  border: 1px solid var(--lime);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  text-transform: uppercase;
  border-radius: 2px;
}
.side-nav__dot:hover::after { opacity: 1; }
.side-nav__dot:hover { background: var(--green-700); transform: scale(1.35); }
.side-nav__dot.is-active {
  background: var(--lime);
  border-color: var(--lime);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(168,204,58,0.22);
}

/* ============================================================
   SLIDE BASE
   ============================================================ */
.slide {
  min-height: 100vh;
  padding: 70px 0 60px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.slide > * {
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.slide:not(.is-current) > * {
  opacity: 0;
  transform: translateY(40px) scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
  .slide > *,
  .slide:not(.is-current) > * { opacity: 1; transform: none; transition: none; }
}

.slide__header {
  max-width: 980px;
  margin-bottom: 56px;
}
.slide__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--green-700);
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  background: var(--lime);
  border-radius: 2px;
  font-weight: 600;
}
.slide__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
  color: var(--green-800);
}
.slide__title .accent { color: var(--green-500); position: relative; }
.slide__title .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 6px;
  background: var(--lime);
  opacity: 0.55;
  z-index: -1;
  transform: skewX(-12deg);
}
.slide__lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0;
}

/* reveal base */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.6,.2,1), transform 0.9s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   1. HERO (dark green + trails)
   ============================================================ */
.slide--hero {
  padding: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(ellipse at 80% 50%, var(--green-700) 0%, var(--green-800) 40%, var(--green-900) 100%);
  color: var(--white);
}
.slide--hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 85%, rgba(168,204,58,0.06), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(168,204,58,0.04), transparent 35%);
  pointer-events: none;
}
.slide--hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168,204,58,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,204,58,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.hero__trails {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__trails svg { width: 100%; height: 100%; }

.trails-drift path {
  animation: drift 4s ease-in-out infinite;
}
.trails-drift path:nth-child(2) { animation-delay: 1.3s; animation-duration: 5.5s; }

@keyframes drift {
  0%   { stroke-dashoffset: 0; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -900; opacity: 0; }
}

.hero__content {
  padding: 130px 0 120px;
  max-width: 1100px;
  position: relative;
  z-index: 3;
}

.hero__badges {
  display: flex; gap: 14px; margin-bottom: 40px;
  opacity: 0; transform: translateY(12px);
  animation: slideUp 0.9s ease 0.2s forwards;
  flex-wrap: wrap;
}
.badge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: rgba(11,61,42,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(168,204,58,0.3);
  border-radius: 4px;
  font-family: var(--font-display);
}
.badge--accent {
  border-color: var(--lime);
  background: rgba(168,204,58,0.12);
  box-shadow: 0 0 24px -6px rgba(168,204,58,0.45);
}
.badge__big {
  font-size: 2rem; font-weight: 800;
  color: var(--lime);
  line-height: 1;
  text-shadow: 0 0 20px rgba(168,204,58,0.4);
}
.badge__label {
  font-size: 13px; font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--white);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word {
  display: inline-block;
  opacity: 0; transform: translateY(100%);
  animation: wordReveal 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__title .word--accent {
  color: var(--lime);
  text-shadow: 0 0 30px rgba(168,204,58,0.3);
}

.hero__title .line:nth-child(1) .word:nth-child(1) { animation-delay: 0.25s; }
.hero__title .line:nth-child(1) .word:nth-child(2) { animation-delay: 0.35s; }
.hero__title .line:nth-child(2) .word:nth-child(1) { animation-delay: 0.55s; }
.hero__title .line:nth-child(2) .word:nth-child(2) { animation-delay: 0.65s; }
.hero__title .line:nth-child(2) .word:nth-child(3) { animation-delay: 0.75s; }
.hero__title .line:nth-child(3) .word:nth-child(1) { animation-delay: 0.9s; }
.hero__title .line:nth-child(3) .word:nth-child(2) { animation-delay: 1s; }
.hero__title .line:nth-child(3) .word:nth-child(3) { animation-delay: 1.1s; }
.hero__title .line:nth-child(3) .word:nth-child(4) { animation-delay: 1.2s; }

@keyframes wordReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp     { to { opacity: 1; transform: translateY(0); } }

.hero__sub {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255,255,255,0.86);
  max-width: 720px;
  margin: 0 0 32px;
  opacity: 0; transform: translateY(12px);
  animation: slideUp 0.9s ease 1.4s forwards;
}
.hero__sub strong { color: var(--lime); }
.hero__sub em { color: var(--white); font-style: italic; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  opacity: 0;
  animation: slideUp 0.9s ease 1.7s forwards;
}
.meta-item { display: inline-flex; align-items: center; gap: 8px; }
.meta-item__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(168,204,58,0.8);
}

.scroll-indicator {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.65);
  z-index: 5;
  animation: floatDown 2s ease-in-out infinite;
}
.scroll-indicator__text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
}
.scroll-indicator__line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  position: relative;
}
.scroll-indicator__line::after {
  content: ''; position: absolute;
  top: 0; left: -1.5px;
  width: 4px; height: 10px;
  background: var(--lime);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--lime);
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes floatDown { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@keyframes scrollDot { 0% { top: 0; opacity: 0; } 40% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ============================================================
   2. VISIÓN
   ============================================================ */
.vision__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 30px 80px;
  align-items: stretch;
}
.pillar {
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--green-700);
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-left-color 0.4s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard);
  border-left-color: var(--lime);
}
.pillar--tl { grid-column: 1; grid-row: 1; }
.pillar--tr { grid-column: 3; grid-row: 1; }
.pillar--bl { grid-column: 1; grid-row: 2; }
.pillar--br { grid-column: 3; grid-row: 2; }

.pillar__corner {
  position: absolute; top: -14px; left: 20px;
  background: var(--lime);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--green-900);
  padding: 3px 10px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 14px;
  color: var(--green-800);
}
.pillar p {
  color: var(--ink-2);
  margin: 0 0 16px;
  font-size: 0.96rem;
}
.pillar__tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pillar__tags li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: var(--lime-soft);
  color: var(--green-700);
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}

.vision__core {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  width: 150px;
}
.vision__core svg { width: 100%; }
.vision__core svg defs linearGradient stop:first-child { stop-color: var(--green-700); }
.vision__core svg defs linearGradient stop:last-child  { stop-color: var(--green-900); }
.vision__core-label {
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  white-space: nowrap;
  font-weight: 700;
}

.led-blink circle { animation: blink 2.4s ease-in-out infinite; fill: var(--lime) !important; }
.led-blink--2 circle { animation: blink 2s ease-in-out infinite 0.6s; fill: rgba(255,255,255,0.9) !important; }
@keyframes blink { 0%, 70%, 100% { opacity: 1; } 80% { opacity: 0.2; } }

.vision__links {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.vision__links path { stroke: var(--green-500) !important; }
.vision__links g:last-child path { stroke: var(--lime) !important; opacity: 0.8; }

/* ============================================================
   3. HARDWARE
   ============================================================ */
.hw__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.hw-card {
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hw-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green-700);
  transition: background 0.4s ease;
}
.hw-card--titan::before { background: var(--lime); }
.hw-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hard); }

.hw-card__head { margin-bottom: 20px; border-bottom: 1px dashed var(--line-strong); padding-bottom: 16px; }
.hw-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--green-800);
  padding: 4px 10px;
  background: var(--lime-soft);
  border-left: 3px solid var(--green-700);
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 600;
}
.hw-card__tag--warm {
  color: var(--green-900);
  background: var(--lime);
  border-left-color: var(--green-800);
}
.hw-card__head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  color: var(--green-800);
}

.hw-card__image {
  position: relative;
  height: 220px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(20,90,61,0.04), rgba(168,204,58,0.08));
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.hw-card__image img {
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
  position: relative; z-index: 2;
}
.hw-card:hover .hw-card__image img { transform: scale(1.05); }
.hw-card__image-glow {
  position: absolute;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(20,110,76,0.4), transparent 65%);
  filter: blur(40px);
  top: 10%; left: 10%;
  pointer-events: none;
  animation: pulseGlow 4s ease-in-out infinite;
}
.hw-card__image-glow--warm {
  background: radial-gradient(circle, rgba(168,204,58,0.5), transparent 65%);
  animation-delay: 1s;
}
@keyframes pulseGlow { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

.hw-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin: 0;
}
.hw-card__specs > div { border-left: 2px solid var(--lime); padding-left: 10px; }
.hw-card__specs dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--green-700);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 600;
}
.hw-card__specs dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}
.hw-card__specs dd strong { color: var(--green-800); }

.hw__bar {
  margin-top: 40px;
  display: flex; align-items: center; gap: 16px;
}
.hw__bar-dash {
  flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--green-700) 0 8px, transparent 8px 14px);
}
.hw__bar-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  font-weight: 700;
}

/* ============================================================
   4. RED
   ============================================================ */
.layers {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}
.layers__stack { position: relative; }
.layers__stack::before {
  content: '';
  position: absolute;
  left: 105px; top: 40px; bottom: 40px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--green-700) 0 6px, transparent 6px 12px);
}

.layer {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  margin-bottom: 28px;
  align-items: center;
  position: relative;
}
.layer__box {
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--lime);
  background: var(--white);
  position: relative;
  box-shadow: var(--shadow-soft);
}
.layer__box::after {
  content: '';
  position: absolute;
  right: -32px; top: 50%;
  width: 32px; height: 1px;
  background: var(--green-700);
}
.layer__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  margin-bottom: 4px;
  font-weight: 700;
}
.layer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--green-800);
  margin-bottom: 8px;
  line-height: 1.15;
}
.layer__icon { color: var(--green-700); }
.layer__icon svg { width: 100%; max-width: 120px; height: auto; }
.layer__desc {
  font-size: 0.95rem;
  color: var(--ink-2);
  padding: 14px 18px;
  background: rgba(20,90,61,0.04);
  border-left: 2px solid var(--lime);
}
.layer__desc strong { color: var(--green-800); }

.layers__metrics {
  display: grid;
  gap: 14px;
  position: sticky; top: calc(var(--band-h) + 20px);
}
.metric {
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  position: relative;
}
.metric::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--lime);
}
.metric__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--green-800);
  line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.metric__unit {
  font-size: 0.85rem;
  color: var(--green-700);
  font-family: var(--font-mono);
  font-weight: 600;
}
.metric__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ============================================================
   5. RENDIMIENTO
   ============================================================ */
.perf__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 50px;
  align-items: start;
}
.chart {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.chart__svg { width: 100%; height: auto; }
.chart__svg g[stroke] { stroke: var(--line-strong); }
.chart__svg text { fill: var(--ink-soft) !important; }
.chart__svg .perf__band { fill: var(--lime) !important; }
.chart__svg .perf__band-label { fill: var(--green-800) !important; font-weight: 700; }
.chart__svg .perf__curve { stroke: var(--green-700) !important; }

.perf__curve {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.5s ease 0.3s;
  filter: drop-shadow(0 2px 6px rgba(20,90,61,0.3));
}
.chart.is-visible .perf__curve { stroke-dashoffset: 0; }
.perf__band { transform: scaleY(0); transform-origin: bottom; transition: transform 1s ease 1.5s; }
.chart.is-visible .perf__band { transform: scaleY(1); }
.perf__band-label { opacity: 0; transition: opacity 0.5s ease 2.2s; }
.chart.is-visible .perf__band-label { opacity: 1; }

.chart__evolution {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.evo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.evo__step {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  color: var(--ink-soft);
  min-width: 120px;
  background: rgba(20,90,61,0.02);
}
.evo__step--final {
  border-color: var(--green-700);
  background: var(--lime-soft);
  color: var(--green-800);
  font-weight: 600;
}
.evo__arrow { color: var(--green-700); font-weight: 700; }

.perf__metrics { display: grid; gap: 18px; }
.perf-card {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease;
}
.perf-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--lime);
}
.perf-card:hover { transform: translateX(-4px); }
.perf-card h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.perf-card--blue::before { background: var(--green-500); }
.perf-card--warm::before { background: var(--lime); }
.perf-card--ink::before { background: var(--green-800); }
.perf-card__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.8rem;
  color: var(--green-800);
  line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 8px;
}
.perf-card__unit {
  font-size: 1rem; color: var(--green-700); font-family: var(--font-mono); font-weight: 600;
}
.perf-card p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.perf-card p strong { color: var(--green-800); }

/* ============================================================
   6. RAGs
   ============================================================ */
.rag__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
}
.step {
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 28px 24px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.step:hover { transform: translateY(-5px); border-color: var(--green-700); }
.step__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--green-900);
  margin-bottom: 14px;
  background: var(--lime);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 700;
}
.step__icon {
  width: 86px; height: 86px; margin: 0 auto 16px;
  color: var(--green-700);
  background: var(--lime-soft);
  padding: 14px;
  border-radius: 50%;
  border: 2px dashed var(--lime);
  position: relative;
  animation: stepHalo 3.2s ease-in-out infinite;
}
.step:nth-child(3) .step__icon { animation-delay: -1.1s; }
.step:nth-child(5) .step__icon { animation-delay: -2.2s; }
@keyframes stepHalo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,204,58,0.5); }
  60%      { box-shadow: 0 0 0 12px rgba(168,204,58,0); }
}
.step__icon svg { width: 100%; height: 100%; display: block; }

/* ---- Step 1: docs ingest ---- */
.step-ico--1 .doc-back  { fill: rgba(168,204,58,0.08); }
.step-ico--1 .doc-front {
  transform-box: fill-box;
  transform-origin: center;
  animation: docHover 3s ease-in-out infinite;
}
@keyframes docHover {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-1px, -2px); }
}
.step-ico--1 .docline {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: docLine 2.4s ease-in-out infinite;
}
.step-ico--1 .dl-1 { animation-delay: 0.0s; }
.step-ico--1 .dl-2 { animation-delay: 0.3s; }
.step-ico--1 .dl-3 { animation-delay: 0.6s; }
.step-ico--1 .dl-4 { animation-delay: 0.9s; }
@keyframes docLine {
  0%   { stroke-dashoffset: 20; opacity: 0.2; }
  30%  { stroke-dashoffset: 0;  opacity: 1; }
  70%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: -20; opacity: 0.2; }
}

/* ---- Step 2: vector search ---- */
.step-ico--2 .mag-ring {
  stroke-dasharray: 6 4;
  animation: magRingSpin 6s linear infinite;
  transform-box: fill-box;
  transform-origin: 28px 28px;
}
@keyframes magRingSpin {
  to { stroke-dashoffset: -40; }
}
.step-ico--2 .mag-cross {
  transform-box: fill-box;
  transform-origin: 28px 28px;
  animation: magCross 4s linear infinite;
}
@keyframes magCross {
  0%   { transform: rotate(0);   opacity: 0.6; }
  50%  { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.6; }
}
.step-ico--2 .mag-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: magDot 1.6s ease-in-out infinite;
}
@keyframes magDot {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.6); opacity: 1;   }
}

/* ---- Step 3: generation + status ---- */
.step-ico--3 .g-doc   { fill: rgba(168,204,58,0.06); }
.step-ico--3 .g-server{ fill: rgba(168,204,58,0.08); }
.step-ico--3 .g-status {
  transform-box: fill-box;
  transform-origin: center;
  animation: statusBlink 1.1s ease-in-out infinite;
}
@keyframes statusBlink {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.step-ico--3 .g-line {
  transform-box: fill-box;
  transform-origin: left center;
  animation: lineGrow 2.4s ease-in-out infinite;
}
.step-ico--3 .gl-1 { animation-delay: 0.0s; }
.step-ico--3 .gl-2 { animation-delay: 0.35s; }
.step-ico--3 .gl-3 { animation-delay: 0.7s; }
@keyframes lineGrow {
  0%   { transform: scaleX(0); opacity: 0; }
  25%  { transform: scaleX(1); opacity: 1; }
  80%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}
.step-ico--3 .g-sline {
  stroke-dasharray: 10;
  animation: slineFlow 1.8s linear infinite;
}
.step-ico--3 .gsl-2 { animation-delay: -0.4s; }
.step-ico--3 .gsl-3 { animation-delay: -0.8s; }
@keyframes slineFlow {
  to { stroke-dashoffset: -20; }
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem;
  margin: 0 0 10px;
  color: var(--green-800);
}
.step p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.step__arrow {
  align-self: center;
  width: 80px;
  height: 0;
  border-top: 2px dashed var(--green-700);
  opacity: 0.45;
}

.rag__impact {
  border-top: 1px dashed var(--line-strong);
  padding-top: 30px;
}
.impact-head {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
.impact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.impact {
  padding: 22px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  transition: all 0.3s ease;
  border-top: 3px solid var(--green-700);
  position: relative;
  overflow: hidden;
}
.impact::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  transform: translateX(-100%);
  animation: impactSweep 3.6s ease-in-out infinite;
}
.impact:nth-child(2)::before { animation-delay: -1.2s; }
.impact:nth-child(3)::before { animation-delay: -2.4s; }
@keyframes impactSweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.impact:hover {
  border-color: var(--green-700);
  border-top-color: var(--lime);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.impact h4 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--green-700);
}
.impact p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }

/* ============================================================
   7. AGENTES IA
   ============================================================ */
.agents__diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.agents__col { display: flex; flex-direction: column; gap: 16px; }
.col__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--green-700);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.io-card {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  font-size: 0.92rem;
  color: var(--ink-2);
  transition: all 0.35s ease;
  position: relative;
}
.io-card strong { display: block; margin-bottom: 4px; color: var(--green-800); font-family: var(--font-display); font-size: 1rem; }
.agents__col--in .io-card { border-left: 4px solid var(--green-500); }
.agents__col--in .io-card:hover { transform: translateX(4px); border-left-color: var(--lime); }
.agents__col--out .io-card { border-right: 4px solid var(--lime); }
.agents__col--out .io-card:hover { transform: translateX(-4px); border-right-color: var(--green-700); }

.agents__core {
  position: relative;
  width: 220px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.hex { width: 200px; height: 220px; z-index: 2; }
.hex polygon:first-child { fill: rgba(168,204,58,0.15); stroke: var(--green-700); }
.hex polygon:nth-child(2) { stroke: var(--lime); }
.hex text { fill: var(--green-800); }
.hex circle { fill: var(--lime); }
.hex__pulse {
  position: absolute;
  inset: 20px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  animation: corePulse 3s ease-in-out infinite;
  opacity: 0;
}
@keyframes corePulse {
  0% { opacity: 0.55; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.4); }
}

.agents__links { display: none; }

/* ============================================================
   8. AULA INVERTIDA — AGENTE INTERMEDIARIO
   ============================================================ */
.slide--aula {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(168,204,58,0.05) 100%);
}

.aula__flow {
  display: grid;
  grid-template-columns: 1fr 0.9fr 1fr 0.9fr 1fr;
  align-items: stretch;
  gap: 14px;
  position: relative;
  margin-top: 10px;
}

.aula__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 18px 20px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.aula__col:hover { transform: translateY(-3px); box-shadow: var(--shadow-hard); }

.aula__col--student::before,
.aula__col--teacher::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--green-700);
}
.aula__col--agent {
  background: linear-gradient(165deg, var(--green-800), var(--green-900));
  border-color: var(--green-700);
  color: var(--white);
  box-shadow:
    var(--shadow-hard),
    0 0 40px -8px rgba(168,204,58,0.4);
}
.aula__col--agent::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--lime);
}

/* personas */
.aula__persona {
  position: relative;
  width: 80px; height: 80px;
  margin-bottom: 10px;
}
.aula__persona-svg {
  width: 80px; height: 80px;
  display: block;
  position: relative; z-index: 2;
}
.aula__persona-svg .p-head,
.aula__persona-svg .p-body {
  fill: var(--white);
  stroke: var(--green-800);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.aula__persona-svg .p-eye { fill: var(--green-800); }
.aula__persona-svg .p-hat { fill: var(--green-800); }
.aula__persona--teacher .p-body { fill: rgba(168,204,58,0.15); }

.aula__persona-pulse {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  opacity: 0;
  animation: aulaPulseRing 2.4s ease-out infinite;
}
.aula__col--teacher .aula__persona-pulse { animation-delay: -1.2s; }
@keyframes aulaPulseRing {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

.aula__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green-900);
  margin-bottom: 2px;
}
.aula__role--agent { color: var(--white); }
.aula__col--agent .aula__role { color: var(--lime); }

.aula__tag {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--green-700);
  padding: 4px 10px;
  background: rgba(168,204,58,0.15);
  border-radius: 2px;
  margin-bottom: 18px;
}
.aula__col--agent .aula__tag {
  color: var(--lime);
  background: rgba(168,204,58,0.18);
}

/* bubbles — stacked in one grid cell so only one occupies layout space */
.aula__bubbles {
  list-style: none; padding: 0; margin: 4px 0 0;
  width: 100%;
  display: grid;
  grid-template-areas: 'stack';
  grid-template-columns: 1fr;
  min-height: 92px;
}
.aula__bubbles .bubble {
  grid-area: stack;
  align-self: start;
  font-size: 0.82rem;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-align: left;
  position: relative;
  opacity: 0;
  animation: bubbleCycle 21s linear infinite;
}
.aula__bubbles--student .bubble { --enter-x: -14px; }
.aula__bubbles--teacher .bubble {
  --enter-x: 14px;
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, rgba(168,204,58,0.08), var(--paper));
}
.aula__bubbles .bubble b { color: var(--green-900); font-weight: 700; }
.aula__bubbles .bubble .mono { color: var(--green-700); }

/* per-bubble: unique vertical offset (different position inside box) + staggered delay.
   Cycle = 21s, stagger = 1.75s (12 × 1.75 = 21), bubble visible for ~1.1s (with 0.3s gap
   before next fades in — no overlap). */
.aula__bubbles .b-1  { --offset-y: 0px;  animation-delay:   0s; }
.aula__bubbles .b-2  { --offset-y: 22px; animation-delay: 1.75s; }
.aula__bubbles .b-3  { --offset-y: 8px;  animation-delay:  3.5s; }
.aula__bubbles .b-4  { --offset-y: 30px; animation-delay: 5.25s; }
.aula__bubbles .b-5  { --offset-y: 4px;  animation-delay:   7s; }
.aula__bubbles .b-6  { --offset-y: 18px; animation-delay: 8.75s; }
.aula__bubbles .b-7  { --offset-y: 12px; animation-delay: 10.5s; }
.aula__bubbles .b-8  { --offset-y: 26px; animation-delay: 12.25s; }
.aula__bubbles .b-9  { --offset-y: 2px;  animation-delay:  14s; }
.aula__bubbles .b-10 { --offset-y: 24px; animation-delay: 15.75s; }
.aula__bubbles .b-11 { --offset-y: 14px; animation-delay: 17.5s; }
.aula__bubbles .b-12 { --offset-y: 20px; animation-delay: 19.25s; }

@keyframes bubbleCycle {
  0%   { opacity: 0; transform: translate(var(--enter-x, 0), var(--offset-y, 0)); }
  1.2% { opacity: 1; transform: translate(0,                var(--offset-y, 0)); }
  6.5% { opacity: 1; transform: translate(0,                var(--offset-y, 0)); }
  8%   { opacity: 0; transform: translate(var(--enter-x, 0), var(--offset-y, 0)); }
  100% { opacity: 0; transform: translate(var(--enter-x, 0), var(--offset-y, 0)); }
}

/* agent center */
.aula__agent {
  position: relative;
  width: 150px; height: 150px;
  margin-bottom: 12px;
}
.aula__agent-core {
  position: absolute;
  inset: 30px;
  display: grid; place-items: center;
  z-index: 3;
}
.aula__agent-core svg { width: 100%; height: 100%; }
.aula__agent-core .agent-hex {
  fill: rgba(168,204,58,0.18);
  stroke: var(--lime);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(168,204,58,0.5));
  transform-box: fill-box;
  transform-origin: center;
  animation: agentHexPulse 2.2s ease-in-out infinite;
}
.aula__agent-core .agent-brain path,
.aula__agent-core .agent-brain line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.aula__agent-core .agent-brain circle {
  fill: var(--lime);
}

@keyframes agentHexPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(168,204,58,0.35)); transform: scale(0.98); }
  50%      { filter: drop-shadow(0 0 14px rgba(168,204,58,0.85)); transform: scale(1.03); }
}

.aula__agent-halo {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(168,204,58,0.55);
  border-radius: 50%;
  opacity: 0;
  animation: agentHalo 3s ease-out infinite;
}
.aula__agent-halo--d2 { animation-delay: -1s; }
.aula__agent-halo--d3 { animation-delay: -2s; }
@keyframes agentHalo {
  0%   { transform: scale(0.5); opacity: 0.8; }
  80%  { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.aula__agent-scan {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(168,204,58,0.25) 40deg, transparent 80deg, transparent 360deg);
  animation: agentScan 4s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes agentScan {
  to { transform: rotate(360deg); }
}

.aula__agent-stats {
  list-style: none; padding: 0; margin: 10px 0 0;
  width: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.aula__agent-stats li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.82rem;
  padding: 6px 10px;
  background: rgba(168,204,58,0.07);
  border: 1px solid rgba(168,204,58,0.2);
  border-left: 3px solid var(--lime);
  text-align: left;
}
.aula__agent-stats .mono {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--lime);
  font-weight: 700;
}
.aula__agent-stats b { color: var(--white); font-weight: 600; }

/* link connectors */
.aula__link {
  position: relative;
  align-self: center;
  width: 100%;
  min-height: 120px;
}
.aula__link svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.aula-line {
  fill: none;
  stroke-width: 2;
}
.aula-line--ghost {
  stroke: rgba(20,90,61,0.18);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.aula-packet {
  fill: var(--lime);
  filter: drop-shadow(0 0 5px rgba(168,204,58,0.8));
}
.aula-packet--rev {
  fill: #d6ea6f;
  filter: drop-shadow(0 0 5px rgba(214,234,111,0.85));
}
.aula-arrow path {
  fill: var(--lime);
  filter: drop-shadow(0 0 3px rgba(168,204,58,0.6));
}
.aula-arrow--rev path {
  fill: #d6ea6f;
  filter: drop-shadow(0 0 3px rgba(214,234,111,0.6));
}
.aula-link-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--green-700);
  text-anchor: middle;
  text-transform: uppercase;
}
.aula-link-label--rev { fill: #3fa069; }

.aula__footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--green-700);
  padding: 14px 20px;
  border-top: 1px dashed var(--line-strong);
}

/* ============================================================
   9. ECOSISTEMA
   ============================================================ */
.eco__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.eco-card {
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease;
  border-top: 4px solid var(--green-700);
}
.eco-card--warm { border-top-color: var(--lime); }
.eco-card:hover { transform: translateY(-5px); }
.eco-card__head {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line-strong);
  margin-bottom: 20px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.eco-card__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.3rem;
  color: var(--green-800);
}
.eco-card__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--green-700);
  text-transform: uppercase;
  font-weight: 600;
}
.eco-card--warm .eco-card__sub { color: var(--green-800); background: var(--lime); padding: 3px 8px; border-radius: 2px; }
.eco-card__viz {
  background:
    linear-gradient(165deg, rgba(20,90,61,0.04), rgba(168,204,58,0.05));
  padding: 18px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.eco-card__viz::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(168,204,58,0.1), transparent 45%);
  pointer-events: none;
}
.eco-card__viz svg { width: 100%; height: auto; display: block; position: relative; }

/* ---- shared label ---- */
.centinela__label, .secure__label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 1.5px;
  fill: var(--green-700);
  font-weight: 600;
}

/* ============== CENTINELA (energy) ============== */
.centinela__grid line {
  stroke: rgba(20,90,61,0.08);
  stroke-width: 0.6;
}
.centinela__live {
  fill: var(--lime);
  filter: drop-shadow(0 0 4px var(--lime));
  animation: ecoPulse 1.6s ease-in-out infinite;
}
.centinela__shadow { fill: rgba(20,90,61,0.12); }
.centinela__body {
  fill: rgba(168,204,58,0.05);
  stroke: var(--green-800);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.centinela__roof {
  fill: none;
  stroke: var(--green-800);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.centinela__floor {
  stroke: rgba(20,90,61,0.35);
  stroke-width: 0.9;
  stroke-dasharray: 2 3;
}
.centinela__door {
  fill: rgba(20,90,61,0.25);
  stroke: var(--green-800);
  stroke-width: 1;
}
.centinela__windows .cw {
  fill: var(--lime);
  opacity: 0.25;
  animation: windowBlink 3.5s ease-in-out infinite;
}
.cw-1  { animation-delay: 0.0s; }
.cw-2  { animation-delay: 0.3s; }
.cw-3  { animation-delay: 0.6s; }
.cw-4  { animation-delay: 0.9s; }
.cw-5  { animation-delay: 1.2s; }
.cw-6  { animation-delay: 0.2s; }
.cw-7  { animation-delay: 0.5s; }
.cw-8  { animation-delay: 0.8s; }
.cw-9  { animation-delay: 1.1s; }
.cw-10 { animation-delay: 1.4s; }
.cw-11 { animation-delay: 0.4s; }
.cw-12 { animation-delay: 0.7s; }
.cw-13 { animation-delay: 1.0s; }
.cw-14 { animation-delay: 1.3s; }
.cw-15 { animation-delay: 1.6s; }
@keyframes windowBlink {
  0%, 100% { opacity: 0.2; }
  45%      { opacity: 0.9; }
  55%      { opacity: 0.35; }
}

.centinela__solar path {
  fill: var(--green-800);
  stroke: var(--lime);
  stroke-width: 0.6;
}

.centinela__thermals .therm {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  opacity: 0.85;
  animation: thermalFlow 3.6s linear infinite;
}
.centinela__thermals .therm-2 { animation-duration: 4.4s; animation-delay: -0.8s; opacity: 0.7; }
.centinela__thermals .therm-3 { animation-duration: 5.2s; animation-delay: -1.6s; opacity: 0.55; }
@keyframes thermalFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -140; }
}

.centinela__thermfill {
  animation: thermalBreathe 4s ease-in-out infinite;
}
@keyframes thermalBreathe {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.45; }
}

.centinela__sensors .sensor__ring {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.2;
  opacity: 0.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: sensorPing 2.2s ease-out infinite;
}
.centinela__sensors .sensor__dot {
  fill: var(--lime);
  filter: drop-shadow(0 0 3px var(--lime));
}
.centinela__sensors .sensor--delay .sensor__ring { animation-delay: -0.7s; }
.centinela__sensors .sensor--delay2 .sensor__ring { animation-delay: -1.4s; }
@keyframes sensorPing {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.centinela__wires .wire {
  fill: none;
  stroke: var(--green-700);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}
.wire-bit {
  fill: var(--lime);
  filter: drop-shadow(0 0 2px var(--lime));
  opacity: 0.9;
}
.wire-bit-1 { animation: wireBit1 2.4s linear infinite; }
.wire-bit-2 { animation: wireBit2 2.8s linear infinite; animation-delay: -0.8s; }
.wire-bit-3 { animation: wireBit3 2.6s linear infinite; animation-delay: -1.4s; }
@keyframes wireBit1 {
  0%   { transform: translate(62px, 70px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(110px, 82px); opacity: 0; }
}
@keyframes wireBit2 {
  0%   { transform: translate(62px, 115px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(110px, 120px); opacity: 0; }
}
@keyframes wireBit3 {
  0%   { transform: translate(62px, 160px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(110px, 160px); opacity: 0; }
}

.centinela__gauge .gauge-bg {
  fill: rgba(20,90,61,0.08);
  stroke: rgba(20,90,61,0.25);
  stroke-width: 0.6;
}
.centinela__gauge .gauge-fill {
  transform-box: fill-box;
  transform-origin: left center;
  animation: gaugeFill 5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(168,204,58,0.5));
}
@keyframes gaugeFill {
  0%   { transform: scaleX(0.25); }
  45%  { transform: scaleX(0.82); }
  55%  { transform: scaleX(0.82); }
  100% { transform: scaleX(0.35); }
}
.centinela__gauge .gauge-ticks line {
  stroke: rgba(255,255,255,0.6);
  stroke-width: 1;
}

/* ============== SECURE (siem) ============== */
.secure__grid line {
  stroke: rgba(20,90,61,0.07);
  stroke-width: 0.6;
}
.secure__pulse-dot {
  fill: var(--lime);
  filter: drop-shadow(0 0 4px var(--lime));
  animation: ecoPulse 1.4s ease-in-out infinite;
}

.secure__rings .ring {
  fill: none;
  stroke: var(--green-700);
  stroke-width: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: ringPulse 4s ease-in-out infinite;
}
.secure__rings .ring-1 { opacity: 0.22; }
.secure__rings .ring-2 { opacity: 0.35; animation-delay: -1s; }
.secure__rings .ring-3 { opacity: 0.5;  animation-delay: -2s; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.55; }
}

.secure__sweep { opacity: 0.85; }

.secure__spokes .spoke {
  stroke: var(--green-700);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  opacity: 0.3;
}
.secure__spokes .spoke--alert {
  stroke: #e63946;
  opacity: 0.55;
  animation: alertLine 1s ease-in-out infinite;
}
@keyframes alertLine {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}

.secure__nodes .snode__ring {
  fill: var(--white);
  stroke: var(--green-700);
  stroke-width: 1.2;
}
.secure__nodes .snode__dot {
  fill: var(--green-700);
}
.secure__nodes .snode--alert .snode__ring {
  stroke: #e63946;
  stroke-width: 1.4;
}
.secure__nodes .snode--alert .snode__dot {
  fill: #e63946;
  filter: drop-shadow(0 0 3px #e63946);
}
.secure__nodes .snode--alert .snode__halo {
  fill: none;
  stroke: #e63946;
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: alertHalo 1.4s ease-out infinite;
}
@keyframes alertHalo {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(1.8); }
}

.secure__core .core-halo {
  fill: rgba(168,204,58,0.2);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: corePulse 2.4s ease-in-out infinite;
}
.secure__core .core-outline {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(168,204,58,0.6));
}
.secure__core .core-shield {
  fill: var(--lime);
  stroke: var(--green-900);
  stroke-width: 0.6;
}
@keyframes corePulse {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50%      { transform: scale(1.1); opacity: 0.9; }
}

.secure__packets .pkt {
  fill: var(--lime);
  filter: drop-shadow(0 0 3px var(--lime));
}
.secure__packets .pkt--alert {
  fill: #e63946;
  filter: drop-shadow(0 0 4px #e63946);
}

/* shared pulse */
@keyframes ecoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.6; }
}
.centinela__live, .secure__pulse-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.eco-card__list { margin: 0; }
.eco-card__list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--line);
}
.eco-card__list > div:last-child { border-bottom: none; }
.eco-card__list dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  color: var(--green-700);
  text-transform: uppercase;
  font-weight: 700;
}
.eco-card__list dd { margin: 0; font-size: 0.92rem; color: var(--ink-2); }


/* ============================================================
   10. FUTURO
   ============================================================ */
.future__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 50px;
}
.phases { display: grid; gap: 20px; }
.phase {
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.phase:hover { border-color: var(--green-700); transform: translateX(6px); }
.phase::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 6px; height: 100%;
  background: var(--lime);
}
.phase__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--green-900);
  margin-bottom: 6px;
  display: inline-block;
  background: var(--lime);
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
}
.phase h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 6px 0;
  color: var(--green-800);
}
.phase p { margin: 0; font-size: 0.94rem; color: var(--ink-2); }

.map__svg { width: 100%; max-width: 420px; margin: 0 auto; display: block; }
.map__land { fill: rgba(20,90,61,0.1); stroke: var(--green-700); stroke-width: 1.2; }
.map__cloud path { stroke: var(--green-700) !important; fill: rgba(168,204,58,0.18) !important; }
.map__cloud text { fill: var(--green-800) !important; }
.map__dash line { stroke: var(--lime) !important; }
.map__net line { stroke: var(--green-700) !important; stroke-dasharray: 300; stroke-dashoffset: 300; }
.map.is-visible .map__net line { animation: drawIn 1.5s ease forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.map__nodes circle {
  fill: var(--lime) !important;
  stroke: var(--green-800) !important;
  stroke-width: 1.5;
  opacity: 0;
  animation: popIn 0.4s ease forwards;
}
.map__nodes circle:nth-child(1){ animation-delay: 0.4s; }
.map__nodes circle:nth-child(2){ animation-delay: 0.55s; }
.map__nodes circle:nth-child(3){ animation-delay: 0.7s; }
.map__nodes circle:nth-child(4){ animation-delay: 0.85s; }
.map__nodes circle:nth-child(5){ animation-delay: 1s; }
.map__nodes circle:nth-child(6){ animation-delay: 1.15s; }
.map__nodes circle:nth-child(7){ animation-delay: 1.3s; }
.map__nodes circle:nth-child(8){ animation-delay: 1.45s; }
@keyframes popIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.map__core { fill: var(--green-800) !important; }
.map__core-ring { stroke: var(--lime) !important; stroke-width: 2; animation: ringPulse 2.2s ease-in-out infinite; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.5; r: 14; }
  50% { opacity: 1; r: 24; }
}

.final-quote {
  margin: 40px auto 40px;
  padding: 44px 50px;
  background: linear-gradient(135deg, var(--green-800), var(--green-900));
  color: var(--white);
  text-align: center;
  position: relative;
  max-width: 1080px;
  overflow: hidden;
}
.final-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(168,204,58,0.12), transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(168,204,58,0.08), transparent 40%);
  pointer-events: none;
}
.final-quote::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
}
.final-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  position: relative; z-index: 2;
}
.final-quote strong { color: var(--lime); font-weight: 700; }
.final-quote em { color: var(--white); font-style: italic; font-weight: 600; }

.final-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px dashed var(--line-strong);
  gap: 14px;
}
.final-footer__col {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--ink-soft);
}
.final-footer__col--right { text-align: right; align-items: flex-end; }
.final-footer .mono { color: var(--green-700); font-weight: 600; }

/* ============================================================
   8b. PILOTO DAM
   ============================================================ */
.slide--pilot {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(168,204,58,0.06) 100%);
}

.pilot__pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  margin-bottom: 50px;
}
.pilot__connector {
  position: absolute;
  left: 12%; right: 12%; top: 58px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green-700) 0 6px, transparent 6px 12px);
  z-index: 0;
  pointer-events: none;
}

.pilot-step {
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 26px 22px 22px;
  position: relative;
  box-shadow: var(--shadow-soft);
  z-index: 1;
  display: flex; flex-direction: column;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.pilot-step:hover {
  transform: translateY(-6px);
  border-color: var(--green-700);
  box-shadow: var(--shadow-hard);
}
.pilot-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lime);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s ease;
}
.pilot-step.is-visible::before { transform: scaleX(1); }

.pilot-step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--green-800);
  margin-bottom: 6px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--green-700), var(--green-800));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.pilot-step__num::after {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--lime);
  margin-top: 8px;
}
.pilot-step__icon {
  width: 54px; height: 54px;
  color: var(--green-700);
  background: var(--lime-soft);
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0 14px;
  transition: transform 0.4s ease, background 0.4s ease;
}
.pilot-step:hover .pilot-step__icon {
  background: var(--lime);
  color: var(--green-900);
  transform: rotate(-4deg) scale(1.05);
}
.pilot-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-800);
  margin: 0 0 10px;
  line-height: 1.2;
}
.pilot-step p {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0 0 14px;
  flex: 1;
}
.pilot-step__tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.pilot-step__tags li {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: rgba(20,90,61,0.08);
  color: var(--green-700);
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}

/* MODULES + STATS ROW */
.pilot__bottom {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 34px;
}

.pilot__modules {
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--green-700);
  position: relative;
}
.pilot__modules-head {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  margin-bottom: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.modules-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.module {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 18px;
  background: rgba(20,90,61,0.04);
  color: var(--green-800);
  border: 1px solid var(--line-strong);
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: default;
}
.module:hover {
  background: var(--lime);
  color: var(--green-900);
  border-color: var(--lime);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 14px -6px rgba(168,204,58,0.6);
}
.module--primary {
  background: var(--lime);
  color: var(--green-900);
  border-color: var(--green-700);
  font-weight: 700;
  box-shadow: 0 4px 0 var(--green-700);
}
.module--primary:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 0 var(--green-700); }

/* STATS */
.pilot__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pilot-stat {
  padding: 20px 16px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.3s ease;
}
.pilot-stat:hover { transform: translateY(-3px); }
.pilot-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green-500);
}
.pilot-stat--lime::before { background: var(--lime); }
.pilot-stat--dark {
  background: linear-gradient(135deg, var(--green-800), var(--green-900));
  color: var(--white);
  border-color: var(--green-900);
}
.pilot-stat--dark::before { background: var(--lime); }
.pilot-stat--dark .pilot-stat__key { color: var(--lime); }
.pilot-stat--dark .pilot-stat__note { color: rgba(255,255,255,0.6); }

.pilot-stat__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--green-800);
  letter-spacing: -0.02em;
}
.pilot-stat--lime .pilot-stat__big { color: var(--green-800); }
.pilot-stat--dark .pilot-stat__big { color: var(--lime); text-shadow: 0 0 20px rgba(168,204,58,0.4); }
.pilot-stat__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--green-700);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}
.pilot-stat__note {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}

/* GUARANTEE BAND */
.pilot__guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px 32px;
  background: linear-gradient(135deg, var(--green-800), var(--green-900));
  color: var(--white);
  position: relative;
  overflow: hidden;
  border-left: 6px solid var(--lime);
}
.pilot__guarantee::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(168,204,58,0.18), transparent 45%);
  pointer-events: none;
}
.pilot__guarantee-mark {
  font-size: 2.8rem;
  color: var(--lime);
  line-height: 1;
  text-shadow: 0 0 20px rgba(168,204,58,0.5);
  position: relative; z-index: 2;
}
.pilot__guarantee p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  position: relative; z-index: 2;
}
.pilot__guarantee strong { color: var(--lime); }
.pilot__guarantee em { color: var(--white); font-weight: 700; font-style: italic; }

/* ============================================================
   12. RECURSOS / QRs
   ============================================================ */
.slide--qr {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(20,90,61,0.05) 100%);
  position: relative;
}
.slide--qr::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(168,204,58,0.1), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(20,90,61,0.08), transparent 35%);
  pointer-events: none;
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 28px;
  align-items: stretch;
}

.qr-card {
  background: var(--white);
  border: 1px solid var(--line-strong);
  padding: 22px 20px 24px;
  position: relative;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}
.qr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--green-700);
  transition: background 0.4s ease;
}
.qr-card--yt::before { background: #CC1E2E; }
.qr-card--web::before { background: var(--lime); }
.qr-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hard);
  border-color: var(--green-700);
}
.qr-card:hover::before { background: var(--lime); }
.qr-card--yt:hover::before { background: #e63946; }

.qr-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-strong);
}
.qr-card__platform {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-800);
  text-transform: uppercase;
}
.qr-card__platform-icon { width: 18px; height: 18px; color: var(--green-700); }
.qr-card--yt .qr-card__platform-icon { color: #CC1E2E; }

.qr-card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 3px 8px;
  background: var(--lime);
  color: var(--green-900);
  font-weight: 700;
  border-radius: 2px;
}
.qr-card__tag--alt {
  background: var(--green-800);
  color: var(--lime);
}

.qr-card__qr {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 340px;
  width: 100%;
  margin: 0 auto 18px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform 0.4s ease;
}
.qr-card:hover .qr-card__qr { transform: scale(1.02); }
.qr-card__qr img {
  width: 100%; height: auto; display: block;
  /* QRs already encoded in green palette */
}

/* VIDEO PLAYER (replaces some QR cards in grid) */
.qr-video {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: center;
  background: #000;
  border: 1px solid rgba(20,90,61,0.3);
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,0.35),
    0 0 0 1px rgba(168,204,58,0.18);
  overflow: hidden;
  border-radius: 4px;
}
.qr-video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.qr-video__corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--green-700);
  pointer-events: none;
  z-index: 3;
}
.qr-video__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.qr-video__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.qr-video__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.qr-video__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Corner brackets */
.qr-card__corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--green-700);
  transition: border-color 0.4s ease;
}
.qr-card:hover .qr-card__corner { border-color: var(--lime); }
.qr-card__corner--tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.qr-card__corner--tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.qr-card__corner--bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.qr-card__corner--br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.qr-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.qr-card__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--green-800);
  margin: 0;
}
.qr-card__body p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0 0 10px;
  flex: 1;
  line-height: 1.45;
}
.qr-card__link {
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(20,90,61,0.05);
  border: 1px solid var(--line-strong);
  color: var(--green-800);
  font-size: 0.85rem;
  transition: all 0.3s ease;
  margin-top: auto;
  border-radius: 2px;
}
.qr-card__link:hover {
  background: var(--lime);
  color: var(--green-900);
  border-color: var(--green-700);
  transform: translateX(3px);
}
.qr-card__arrow {
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform 0.3s ease;
}
.qr-card__link:hover .qr-card__arrow { transform: translate(2px, -2px); }

.qr__footnote {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--green-700);
  font-weight: 700;
  padding: 14px;
  border-top: 1px dashed var(--line-strong);
  margin-top: 14px;
}

/* ============================================================
   13. MUJERES + TECH
   ============================================================ */
.slide--women {
  background:
    linear-gradient(180deg, var(--green-900) 0%, var(--green-800) 60%, #0f3a28 100%);
  color: var(--white);
  position: relative;
}
.women__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(168,204,58,0.18), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,0.06), transparent 42%),
    linear-gradient(rgba(168,204,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,204,58,0.04) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
}
.slide--women .slide__title { color: var(--white); }
.slide--women .slide__title .accent { color: var(--lime); }
.slide--women .slide__title .accent::after { background: rgba(168,204,58,0.25); }
.slide--women .slide__lede { color: rgba(255,255,255,0.78); }
.slide--women .slide__lede strong { color: var(--lime); font-weight: 700; }
.slide--women .slide__kicker {
  background: rgba(168,204,58,0.18);
  color: var(--lime);
}

.women__grid {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.women__video {
  position: relative;
  width: 100%;
  max-width: 960px;
}
.women__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(168,204,58,0.25),
    0 0 40px -10px rgba(168,204,58,0.35);
}
.women__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.women__video-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--lime);
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
}
.women__video-corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.women__video-corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.women__video-corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.women__video-corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.women__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 26px;
  border-radius: 8px;
  background: linear-gradient(165deg, rgba(255,255,255,0.04), rgba(168,204,58,0.06));
  border: 1px solid rgba(168,204,58,0.22);
  backdrop-filter: blur(4px);
}
.women__badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.14em;
}
.women__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: womenPulse 2.2s ease-in-out infinite;
}
@keyframes womenPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.women__headline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
  color: var(--white);
}
.women__accent {
  color: var(--lime);
  background: linear-gradient(120deg, transparent 0%, rgba(168,204,58,0.2) 50%, transparent 100%);
  padding: 0 4px;
}

.women__points {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.women__points li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(168,204,58,0.15);
}
.women__points li:first-child { border-top: 0; padding-top: 4px; }
.women__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--lime);
  padding-top: 2px;
  letter-spacing: 0.08em;
}
.women__points strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  font-size: 0.98rem;
  margin-bottom: 3px;
}
.women__points p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  line-height: 1.5;
}

.women__cta {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lime);
  padding-top: 10px;
  border-top: 1px dashed rgba(168,204,58,0.28);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .si-band__proj, .si-band__divider { display: none; }
  .si-band__slogan-sub { display: none; }
}
@media (max-width: 960px) {
  :root { --band-h: 74px; }
  .side-nav { display: none; }
  .si-band__dates { display: none; }
  .si-band__simarro { height: calc(var(--band-h) - 10px); max-height: 66px; }
  .si-band__inner { padding: 0 16px; gap: 10px; }
  .si-wordmark__l1, .si-wordmark__l2 { font-size: 12px; }
  .si-band__slogan-main { font-size: 0.95rem; }
  .si-band__hash { font-size: 11px; }
  .si-socials li:nth-child(n+4) { display: none; }
  .vision__grid, .hw__grid, .layers, .perf__grid, .eco__grid, .future__grid { grid-template-columns: 1fr; gap: 24px; }
  .vision__core { grid-column: 1; grid-row: auto; margin: 0 auto; }
  .layers__stack::before { display: none; }
  .layers__metrics { position: static; grid-template-columns: 1fr 1fr; }
  .rag__flow { grid-template-columns: 1fr; }
  .step__arrow { transform: rotate(90deg); justify-self: center; }
  .step__arrow svg { width: 40px; }
  .agents__diagram { grid-template-columns: 1fr; gap: 30px; }
  .agents__core { margin: 0 auto; }
  .impact__grid { grid-template-columns: 1fr; }
  .pilot__pipeline { grid-template-columns: 1fr 1fr; }
  .pilot__connector { display: none; }
  .pilot__bottom { grid-template-columns: 1fr; }
  .pilot__stats { grid-template-columns: 1fr; }
  .pilot__guarantee { grid-template-columns: 1fr; text-align: center; }
  .qr-grid { grid-template-columns: 1fr 1fr; }
  .aula__flow { grid-template-columns: 1fr; gap: 20px; }
  .aula__link { min-height: 80px; transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .qr-grid { grid-template-columns: 1fr; }
  .hero__content { padding: 130px 0 120px; }
}

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