html, body {
  overflow-x: hidden;
}

:root {
  --background: #f8fafc;
  --card: #ffffff;
  --headlines: #0f172a;
  --main-text: #334155;
  --secondary-text: #64748b;
  --innovation: #4c1d95;
  --highlight: #6d28d9;
  --action: #ff5e00;
  --trust: #2563eb;
  --border: #e5e7eb;
}
body {
  font-family: "Manrope", sans-serif;
  background-color: var(--background);
  color: var(--main-text);
}
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.05);
}
.mesh-gradient-premium {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(76, 29, 149, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(37, 99, 235, 0.06) 0%,
      transparent 40%
    );
}
.glow-innovation {
  filter: blur(110px);
  background: var(--innovation);
  opacity: 0.12;
  border-radius: 50%;
}
.glow-trust {
  filter: blur(110px);
  background: var(--trust);
  opacity: 0.08;
  border-radius: 50%;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.timeline-line {
  background: linear-gradient(
    to bottom,
    var(--innovation) 0%,
    var(--trust) 50%,
    var(--border) 100%
  );
}
.radial-progress-innovation {
  transform: rotate(-90deg);
}

.modernization-card-radial {
  background: radial-gradient(circle at center, #6d28d9 0%, #4c1d95 100%);
}

.gradient-text-accent {
  background: linear-gradient(90deg, #4C1D95 0%, #6D28D9 50%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.pipeline {
  --purple:#7c3aed;
  --blue:#2563eb;
  --orange:#ff5e00;
}

/* LINEA */

.pipeline-line {
  position:absolute;
  left:50%;
  top:0;
  height:0%;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,var(--purple),var(--blue),var(--orange));
  opacity:.6;
  transition:height .6s ease;
}

/* STEP */

.pipeline-step {
  display:flex;
  align-items:center;
  gap:32px;
  opacity:.35;
  transition:.6s;
}

.pipeline-step.reverse {
  justify-content:flex-end;
}

/* NODE */

.pipeline-node {
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  position:relative;
}

.pipeline-node span {
  font-size:28px;
}

/* COLORS */

.purple {background:var(--purple);}
.blue {background:var(--blue);}
.orange {background:var(--orange);}

/* GLOW */

.pipeline-node::after {
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  opacity:0;
  transition:.6s;
}

.purple::after {background:radial-gradient(circle,var(--purple),transparent 60%);}
.blue::after {background:radial-gradient(circle,var(--blue),transparent 60%);}
.orange::after {background:radial-gradient(circle,var(--orange),transparent 60%);}

/* CARD */

.pipeline-card {
  background:white;
  padding:16px 22px;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  max-width:260px;
  transform:translateY(10px);
  opacity:.5;
  transition:.6s;
}

.pipeline-card h4 {
  font-weight:600;
  color:#0f172a;
}

.pipeline-card p {
  font-size:13px;
  color:#64748b;
}

/* ACTIVE */

.pipeline-step.active {
  opacity:1;
}

.pipeline-step.active .pipeline-node::after {
  opacity:.8;
}

.pipeline-step.active .pipeline-card {
  transform:translateY(0);
  opacity:1;
}

/* MOBILE */

@media(max-width:768px){
.pipeline-line{display:none}
.pipeline-step,.pipeline-step.reverse{justify-content:flex-start}
}


.cases-scroll::-webkit-scrollbar{display:none}
.cases-scroll{scroll-behavior:smooth}

.cases-prev,
.cases-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
border-radius:999px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.15);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:.3s;
z-index:20;
}

.group:hover .cases-prev,
.group:hover .cases-next{opacity:1}

.cases-prev{left:-20px}
.cases-next{right:-20px}

.cases-prev span,
.cases-next span{
font-size:26px;
color:#0f172a;
}

@media(max-width:768px){
.cases-prev,
.cases-next{display:none}
}

/*---------------------------------------------------------------*/

/* ===== Cards ===== */
.tech-card{
  background: #ffffff;
  border-radius: 2rem;
  padding: 2rem;
  border: 1px solid #f1f5f9;

  box-shadow: 0 20px 40px rgba(76,29,149,0.05);
  transition: all .3s ease;
}

/* ===== Titles ===== */
.tech-title{
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
}

/* ===== Rows ===== */
.tech-row{
  display: flex;
  align-items: center;
  gap: 1rem;

  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;

  padding: 0.75rem 1rem;

  font-weight: 600;
  color: #334155;

  transition: all .25s ease;
}

/* Hover elegante */
.tech-row:hover{
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15,23,42,0.08);
}

/* ===== Logos ===== */
.tech-logo{
  height: 22px;
  width: auto;
  object-fit: contain;

}

/* ===== Enterprise Glow Effect ===== */

.tech-card{
  position: relative;
  overflow: hidden;
}

/* capa de luz */
.tech-card::before{
  pointer-events: none; 
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2rem;

  background: radial-gradient(
    600px circle at var(--x, 50%) var(--y, 50%),
    rgba(76,29,149,0.12),
    transparent 40%
  );

  opacity: 0;
  transition: opacity .35s ease;
}

/* activación glow */
.tech-card:hover::before{
  opacity: 1;
}

/* elevación suave */
.tech-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 25px 60px rgba(15,23,42,0.12),
    0 0 0 1px rgba(76,29,149,0.08);
}




/**********************************************************/
.case-card.is-flipped .case-inner{
  transform: rotateY(180deg);
}