/* =========================================================
   DeepSoul — Sección: Ecosistema (bento)
   Las secciones guardadas para el futuro están en /secciones-guardadas
   ========================================================= */
   ========================================================= */

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section__head--center { align-items: center; text-align: center; }
.section__head--center .lead { margin-inline: auto; }

/* =========================================================
   BENTO
   ========================================================= */

.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s, opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.tile:hover { border-color: var(--line-2); }
.tile h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.tile p { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.tile__body { position: relative; z-index: 1; }
.tile__tag { display: inline-block; margin-bottom: 12px; font-size: 10px; color: var(--text-3); }
.tile__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tile__big {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tile--mind { grid-column: span 2; grid-row: span 2; }
.tile--learn { grid-column: span 2; justify-content: space-between; }
.tile--secure { grid-column: span 2; }

/* Mind (atom) */
.mind {
  position: absolute;
  inset: 0 0 90px;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.mind__core {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, #c4b5fd 18%, #8b5cf6 45%, rgba(99, 102, 241, .2) 72%, transparent 74%);
  box-shadow: 0 0 60px rgba(139, 92, 246, .7), 0 0 120px rgba(34, 211, 238, .25);
  animation: core-breathe 4s ease-in-out infinite;
}
@keyframes core-breathe {
  50% { transform: scale(1.08); box-shadow: 0 0 80px rgba(139, 92, 246, .9), 0 0 160px rgba(34, 211, 238, .35); }
}
.mind__ring {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1px solid rgba(165, 180, 252, .28);
  transform: rotateY(var(--ry)) rotateX(72deg);
  animation: atom var(--t) linear infinite;
}
.mind__ring::after {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 12px #22d3ee, 0 0 24px #22d3ee;
}
.mind__ring:nth-child(2)::after { background: #e879f9; box-shadow: 0 0 12px #d946ef, 0 0 24px #d946ef; }
@keyframes atom {
  to { transform: rotateY(var(--ry)) rotateX(72deg) rotateZ(360deg); }
}

/* Learn (sparkline) */
.spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 52%;
}
.spark__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--ease) .3s;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, .8));
}
.spark__area { opacity: 0; transition: opacity 1.6s ease 1s; }
.tile.is-in .spark__line { stroke-dashoffset: 0; }
.tile.is-in .spark__area { opacity: 1; }

/* Always on */
.always {
  position: absolute;
  inset: 0 0 70px;
  display: grid;
  place-items: center;
}
.always i {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, .6);
  animation: ripple 3s var(--ease) infinite;
}
.always i:nth-child(2) { animation-delay: 1.5s; }
@keyframes ripple {
  from { transform: scale(.6); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}
.always__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cube */
.cube-wrap {
  position: absolute;
  inset: 0 0 70px;
  display: grid;
  place-items: center;
  perspective: 600px;
}
.cube {
  --c: 64px;
  position: relative;
  width: var(--c);
  height: var(--c);
  transform-style: preserve-3d;
  animation: cube-spin 12s linear infinite;
}
.cube i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(165, 180, 252, .7);
  background: rgba(99, 102, 241, .06);
  box-shadow: inset 0 0 18px rgba(139, 92, 246, .35);
}
.cube i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); }
.cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); border-color: rgba(103, 232, 249, .8); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
@keyframes cube-spin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to { transform: rotateX(-24deg) rotateY(360deg); }
}

/* Secure */
.tile--secure { flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; }
.shield {
  flex: 0 0 auto;
  width: 104px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, .45));
}
.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #67e8f9, #c084fc, transparent);
  box-shadow: 0 0 18px rgba(103, 232, 249, .8);
  opacity: .7;
  animation: scan 4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(226px); }
}

/* Scale (bars) */
.bars {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  bottom: 96px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bars i {
  flex: 1;
  height: 100%;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #c084fc, rgba(99, 102, 241, .25));
  transform-origin: bottom;
  transform: scaleY(var(--h));
  animation: grow 3.2s var(--ease) infinite alternate;
}
.bars i:nth-child(odd) { background: linear-gradient(180deg, #67e8f9, rgba(99, 102, 241, .2)); }
.bars i:nth-child(2) { animation-delay: -.4s; }
.bars i:nth-child(3) { animation-delay: -.8s; }
.bars i:nth-child(4) { animation-delay: -1.2s; }
.bars i:nth-child(5) { animation-delay: -1.6s; }
.bars i:nth-child(6) { animation-delay: -2s; }
.bars i:nth-child(7) { animation-delay: -2.4s; }
@keyframes grow {
  from { transform: scaleY(calc(var(--h) * .55)); }
  to { transform: scaleY(var(--h)); }
}

/* Wave */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  width: 100%;
  height: calc(100% - 120px);
  overflow: hidden;
}
.wave__p { fill: none; stroke: url(#wv-g); stroke-width: 1.6; vector-effect: non-scaling-stroke; animation: wave 3s linear infinite; }
.wave__p--2 { opacity: .55; animation-duration: 4.2s; }
.wave__p--3 { opacity: .35; animation-duration: 2.2s; }
@keyframes wave { to { transform: translateX(-100px); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .tile--mind { grid-row: span 2; }
}

@media (max-width: 640px) {
  .bento__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .tile--mind,
  .tile--learn,
  .tile--secure { grid-column: auto; }
  .tile--mind { grid-row: span 2; }
  .tile--secure { gap: 18px; }
  .shield { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .spark__line { stroke-dashoffset: 0; }
  .spark__area { opacity: 1; }
}