/* genesis.css — OWNER genesis · Slide 3 · Genesis Hand anotada */

#slide-4{
  background:
    radial-gradient(120% 120% at 50% 42%, var(--navy-800) 0%, var(--navy-900) 70%);
}

.gen{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1rem,2.4vh,2rem);
  width:100%;
  padding-top:clamp(20px,5vh,48px);
  padding-bottom:clamp(20px,5vh,48px);
}

/* ---------- Encabezado ---------- */
.gen__head .eyebrow{display:block;margin-bottom:.7rem}
.gen__title{
  font-size:clamp(1.9rem,4vw,3.2rem);
  color:var(--ink);
  max-width:18ch;
}

/* ---------- Figura + anotaciones ---------- */
.gen__figure{
  position:relative;
  align-self:center;
  display:block;
  width:auto;
  max-width:100%;
  margin:0;
  line-height:0;
  filter:drop-shadow(0 30px 60px rgba(2,6,18,.55));
}
.gen__img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:48vh;
  /* funde los bordes de la imagen con el fondo navy de la slide */
  -webkit-mask-image:radial-gradient(125% 125% at 50% 50%, #000 72%, transparent 100%);
          mask-image:radial-gradient(125% 125% at 50% 50%, #000 72%, transparent 100%);
}

/* Líneas SVG */
.gen__lines{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
}
.gen__line{
  fill:none;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  opacity:.85;
  stroke-dasharray:1;
  stroke-dashoffset:0;            /* visible por defecto (sin JS) */
}
.gen__line--red{stroke:var(--red)}
.gen__line--accent{stroke:var(--accent)}
.gen__line--steel{stroke:var(--steel)}

/* Estado "armado" por JS: ocultas hasta entrar en viewport */
.gen__figure.is-armed .gen__line{stroke-dashoffset:1}
.gen__figure.is-armed .gen__dot,
.gen__figure.is-armed .gen__chip{opacity:0}
.gen__figure.is-armed.is-drawn .gen__line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease);
}
.gen__figure.is-armed.is-drawn .gen__dot{opacity:1;transition:opacity .4s var(--ease) .5s}
.gen__figure.is-armed.is-drawn .gen__chip{opacity:1;transition:opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s}
.gen__figure.is-armed .gen__chip{transform:translateY(6px)}
.gen__figure.is-armed.is-drawn .gen__chip{transform:none}

/* Puntos ancla sobre las piezas */
.gen__dot{
  position:absolute;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 12px currentColor;
}
.gen__dot::after{
  content:"";
  position:absolute;inset:-5px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.6;
  animation:gen-pulse 2.6s var(--ease) infinite;
}
.gen__dot--red{color:var(--red)}
.gen__dot--accent{color:var(--accent)}
.gen__dot--steel{color:var(--steel)}
@keyframes gen-pulse{
  0%{transform:scale(.7);opacity:.7}
  70%{transform:scale(1.7);opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.gen__dot::after{animation:none}}

/* Chips de etiqueta */
.gen__chip{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  max-width:42vw;
  padding:.5rem .8rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--glass);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.7);
  color:var(--ink);
  font-family:var(--font-head);
  font-size:clamp(.72rem,1.05vw,.9rem);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.15;
  white-space:nowrap;
}
.gen__chip-dot{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:var(--chip,var(--steel));
  box-shadow:0 0 8px var(--chip,var(--steel));
}
.gen__chip--red{--chip:var(--red)}
.gen__chip--accent{--chip:var(--accent)}
.gen__chip--steel{--chip:var(--steel)}
.gen__chip-sub{
  display:block;
  width:100%;
  margin-top:.12rem;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.74em;
  letter-spacing:.01em;
  color:var(--muted);
}
.gen__chip--steel:has(.gen__chip-sub){white-space:normal;max-width:13rem}

/* ---------- Pie: lede + stats ---------- */
.gen__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem 2rem;
}
.gen__lede{
  max-width:46ch;
  color:var(--muted);
  font-size:clamp(.92rem,1.15vw,1.05rem);
  line-height:1.6;
}
.gen__stats{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:flex-end;
  text-align:right;
}
.gen__stat{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  padding:.5rem .95rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(15,31,85,.32);
  color:var(--muted);
  font-size:.84rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.gen__stat b{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.gen__stat span{color:var(--steel-dim);margin:0 .1rem}
.gen__stat--accent{
  border-color:rgba(79,124,255,.4);
  background:rgba(79,124,255,.12);
}
.gen__stat--accent b{color:var(--accent-soft)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  /* En teléfono la imagen es pequeña: las líneas/puntos quedan apretados, así que
     se ocultan y los chips pasan a una LEYENDA en grid debajo de la imagen. */
  .gen__lines,
  .gen__dot{display:none !important}

  .gen__figure{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 10px;
    width:100%;
    filter:none;
  }
  .gen__img{
    grid-column:1 / -1;
    width:100%;max-height:none;
    -webkit-mask-image:none;mask-image:none;
  }
  /* Chips → ítems de leyenda estáticos (ignoran left/top inline) */
  .gen__figure .gen__chip{
    position:static;
    opacity:1 !important;
    transform:none !important;
    width:100%;
    max-width:none;
    font-size:.72rem;
    padding:.55rem .7rem;
    border-radius:12px;
    background:rgba(15,31,85,.34);
    white-space:normal;
  }
  .gen__chip-sub{display:inline}
  .gen__chip--steel:has(.gen__chip-sub){white-space:normal;max-width:none}

  .gen__foot{flex-direction:column;align-items:flex-start}
  .gen__stats{align-items:flex-start;text-align:left}
}
@media (max-width:560px){
  .gen__figure{grid-template-columns:1fr}
  .gen__chip-dot{width:8px;height:8px}
}