.wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 105px 110px 90px 110px;
  display: block;
  position: relative;
  overflow-x: clip;
}

.wrapper h2 {
  position: relative;
  font-size: 64pt;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1px;
  z-index: 1;
}

.subtext-top {
  font-size: 19pt;
  margin-top: 25px;
  opacity: 0.9;
}

.wrapper > div:first-child{ 
  margin-bottom: 10px; 
}

.subtext-bottom{
  font-size: 31pt;
  max-width: 900px;
  margin: 40px 0 0 auto;
  text-align: right;
  opacity: 0.9;
  position: relative;
  z-index: 3;
}

/* -------- Responsive -------- */
@media (max-width: 1200px) {
  .wrapper h2 { font-size: 50pt; }
  .subtext-top, .subtext-bottom{ font-size: 28pt; }
}

@media (max-width: 768px) {
  .wrapper{
    padding: 60px 30px 60px 30px;
  }
  .wrapper h2 { font-size: 42pt; }
  .subtext-top, .subtext-bottom{ font-size: 24pt; }
}

/* ===========================
   CONTAINER
   =========================== */
.cards{
  position: relative;
  height: 760px;
  max-width: 1200px;
  margin: 34px auto 0;
  z-index: 2;
}

/* ===========================
   POSITIONS
   =========================== */
.s1{ left: 0px;   top: 520px; z-index:1;}
.s2{ left: 210px; top: 410px; z-index:2;}
.s3{ left: 420px; top: 300px; z-index:3;}
.s4{ left: 630px; top: 190px; z-index:4;}
.s5{ left: 790px; top:  80px; z-index:5;}

.t-step{
  position:absolute;
}

/* ===========================
   STEP DOT
   =========================== */
.t-dot{
  position:absolute;
  top:-14px;
  left:26px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#0b0f18;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  border:1px solid rgba(255,255,255,0.25);
  z-index:10;
}

/* ===========================
   CARD BASE
   =========================== */
.t-card{
  width:430px;
  height:150px;
  padding:20px 22px;
  border-radius:18px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  overflow:hidden;
  transition:height .45s cubic-bezier(.2,.8,.2,1), transform .35s ease;
}

.t-step:hover{
  z-index:20;
}

.t-step:hover .t-card{
  height:280px;
}

/* ===========================
   TOP
   =========================== */
.t-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.t-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===========================
   SVG ICON
   =========================== */
.icon{
  width:100%;
  height:100%;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:.3s ease;
}

.icon-bg{
  fill: var(--card2);
  stroke: var(--border);
  stroke-width: 1;
}

.icon-shape{
  fill: var(--text);
  transition:.3s ease;
}

.t-step:hover .icon-shape{
  fill: var(--logoAccent);
}

.t-meta{
  font-size:12px;
  letter-spacing:2px;
  opacity:.7;
}

.t-title{
  font-size:28px;
  margin-bottom:8px;
}

/* ===========================
   HIDDEN TEXT
   =========================== */
.t-desc,.t-note{
  font-size:16px;
  line-height:1.5;
  opacity:0;
  transform:translateY(10px);
  transition:.35s ease;
}

.t-step:hover .t-desc,
.t-step:hover .t-note{
  opacity:1;
  transform:translateY(0);
}

.t-note{
  margin-top:8px;
  opacity:.6;
}

/* ===========================
   LÍNEAS HTML QUE CONECTAN LOS 5 PUNTOS
   =========================== */

/* Estilo base para todas las líneas */
.arrow-line {
  position: absolute;
  height: 30px;
  background: #dbf059;
  box-shadow: 0 0 20px rgba(219, 240, 89, 0.4);
  transform-origin: left center;
  opacity: 0;
  z-index: 1;
}

/* Línea del punto 1 al punto 2 */
.arrow-line-1 {
  left: 41px;
  top: 506px; /* 521px - 15px (mitad de la altura) */
  width: 237px;
  transform: rotate(-27.62deg);
}

/* Línea del punto 2 al punto 3 */
.arrow-line-2 {
  left: 251px;
  top: 396px; /* 411px - 15px */
  width: 237px;
  transform: rotate(-27.62deg);
}

/* Línea del punto 3 al punto 4 */
.arrow-line-3 {
  left: 461px;
  top: 286px; /* 301px - 15px */
  width: 237px;
  transform: rotate(-27.62deg);
}

/* Línea del punto 4 al punto 5 */
.arrow-line-4 {
  left: 671px;
  top: 176px; /* 191px - 15px */
  width: 194px;
  transform: rotate(-34.5deg);
}

/* Punta de flecha en el punto 5 */
.arrow-tip {
  position: absolute;
  left: 815px;
  top: 66px; /* 81px - 15px */
  width: 0;
  height: 0;
  border-left: 50px solid #dbf059;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  opacity: 0;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(219, 240, 89, 0.4));
}

/* ===========================
   ANIMACIONES
   =========================== */

/* Animación: aparecer las líneas progresivamente */
.wrapper.is-inview .arrow-line-1 {
  animation: lineIn 0.6s ease 0.7s forwards;
}

.wrapper.is-inview .arrow-line-2 {
  animation: lineIn 0.6s ease 1.2s forwards;
}

.wrapper.is-inview .arrow-line-3 {
  animation: lineIn 0.6s ease 1.8s forwards;
}

.wrapper.is-inview .arrow-line-4 {
  animation: lineIn 0.6s ease 2.3s forwards;
}

.wrapper.is-inview .arrow-tip {
  animation: tipIn 0.4s ease 2.8s forwards;
}

@keyframes lineIn {
  from {
    opacity: 0;
    transform: rotate(var(--angle, -27.62deg)) scaleX(0);
  }
  to {
    opacity: 1;
    transform: rotate(var(--angle, -27.62deg)) scaleX(1);
  }
}

.arrow-line-1 { --angle: -27.62deg; }
.arrow-line-2 { --angle: -27.62deg; }
.arrow-line-3 { --angle: -27.62deg; }
.arrow-line-4 { --angle: -34.5deg; }

@keyframes tipIn {
  to {
    opacity: 1;
  }
}

/* Steps appear on each pause */
.wrapper .t-step{
  opacity: 0;
  transform: translateY(10px);
}

.wrapper.is-inview .t-step{
  animation: nxStepIn .45s ease forwards;
}

.wrapper.is-inview .s1{ animation-delay: 0.7s; }
.wrapper.is-inview .s2{ animation-delay: 1.2s; }
.wrapper.is-inview .s3{ animation-delay: 1.8s; }
.wrapper.is-inview .s4{ animation-delay: 2.3s; }
.wrapper.is-inview .s5{ animation-delay: 2.8s; }

@keyframes nxStepIn{
  to{ 
    opacity: 1; 
    transform: none; 
  }
}

/* ===========================
   RESPONSIVE MOBILE
   =========================== */
@media (max-width: 1000px){
  .cards{
    margin-top:0;
    height:auto;
    padding:60px 20px;
  }
  
  .t-step{
    position:relative;
    left:auto!important;
    top:auto!important;
    margin-bottom:25px;
  }
  
  .t-card{
    width:100%;
    height: auto !important;
  }
  
  /* Mostrar todo el contenido en mobile */
  .t-desc, .t-note{
    opacity: 1;
    transform: none;
  }
  
  /* Ocultar flechas en mobile */
  .arrow-line,
  .arrow-tip {
    display: none;
  }
  
  /* Indicador simple en mobile */
  .t-step::before{
    content: '';
    position: absolute;
    left: -30px;
    top: 20px;
    width: 20px;
    height: 2px;
    background: #dbf059;
  }
}

@media (max-width: 768px){
  .wrapper{
    padding: 60px 20px;
  }
  
  .subtext-bottom{
    text-align: center;
    margin: 40px auto 0;
  }
  
  .t-card{
    padding: 16px 18px;
  }
}