/* Página Plataforma: estilos propios (mantiene base en style.css) */ 
 
 .page-platform{ 
   background: #ffffff; 
 } 
 
 /* HERO */ 
 .platform-hero{
  position: relative;
  padding: 10px 0 56px;
  overflow: hidden;
} 
 
 .platform-hero::before{ 
   content:""; 
   position:absolute; 
   inset:0; 
   background: 
     radial-gradient(ellipse 110% 70% at 20% 35%, rgba(255, 63, 158, 0.10), transparent 55%), 
     radial-gradient(ellipse 120% 70% at 80% 25%, rgba(59, 130, 246, 0.10), transparent 60%), 
     radial-gradient(ellipse 120% 70% at 65% 80%, rgba(147, 51, 234, 0.10), transparent 60%), 
     linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0)); 
   pointer-events:none; 
   z-index:0; 
 } 
 
 .platform-hero-grid{ 
   position: relative; 
   z-index: 1; 
   display: grid; 
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); 
   gap: 56px; 
   align-items: center; 
 } 
 
 .platform-kicker{ 
   margin: 0 0 10px; 
   font-size: 0.85rem; 
   text-transform: uppercase; 
   letter-spacing: 0.12em; 
   color: rgba(0,0,0,0.55); 
 } 
 
 .platform-title{ 
   margin: 0 0 10px; 
   font-size: clamp(2.2rem, 4vw, 3.2rem); 
   line-height: 1.05; 
   letter-spacing: -0.03em; 
 } 
 
 .platform-subtitle{ 
   margin: 0 0 18px; 
   font-size: 1.05rem; 
   color: rgba(0,0,0,0.65); 
   max-width: 60ch; 
   line-height: 1.55; 
 } 
 
 .platform-hero-cta{ 
   display:flex; 
   gap: 14px; 
   flex-wrap: wrap; 
 } 
 
 /* Visual “sistema” */
/* Hero visual: Architecture Stack */
.platform-hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}

.platform-stack{
  width: min(520px, 100%);
  position: relative;
  padding: 24px;
}

.platform-stack::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,63,158,0.14), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(circle at 60% 85%, rgba(147,51,234,0.12), transparent 62%);
  filter: blur(18px);
  opacity: 0.9;
}

.stack-layer{
  position: relative;
  display:flex;
  align-items: center;
  padding: 20px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.06);
}

.layer-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,0.82);
  line-height: 1.15;
}

/*
.layer-sub{
  font-size: 0.92rem;
  color: rgba(0,0,0,0.62);
}
*/

.layer-1{ transform: translateY(0px); }
.layer-2{ transform: translateY(-18px); }
.layer-3{ transform: translateY(-36px); }
.layer-4{ transform: translateY(-54px); }

/* Micro-animación: flotación sutil (pro) */
.platform-stack .stack-layer{
  animation: stackFloat 5.5s ease-in-out infinite;
}

.platform-stack .layer-2{ animation-delay: .15s; }
.platform-stack .layer-3{ animation-delay: .3s; }
.platform-stack .layer-4{ animation-delay: .45s; }

@keyframes stackFloat{
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Responsive */
@media (max-width: 960px){
  .layer-2, .layer-3, .layer-4{ transform: none; }
  .platform-stack{ padding: 10px; }
} 
 
 /* Secciones */ 
 .platform-section{ 
   padding: 72px 0; 
 } 
 
 .platform-h2{ 
   margin: 0 0 14px; 
   font-size: clamp(1.8rem, 2.6vw, 2.2rem); 
   letter-spacing: -0.02em; 
 } 
 
 .platform-h3{ 
   margin: 0 0 10px; 
   font-size: 1.15rem; 
   letter-spacing: -0.01em; 
 } 
 
 .platform-p{ 
   margin: 0 0 12px; 
   color: rgba(0,0,0,0.65); 
   line-height: 1.65; 
 } 
 
 .center{ 
   text-align:center; 
 } 
 
 .platform-lead{ 
   max-width: 78ch; 
   margin-inline: auto; 
 } 
 
 /* 2 columnas */ 
 .two-col{ 
   display:grid; 
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); 
   gap: 40px; 
   align-items: start; 
 } 
 
 /* Aside cards */ 
 .platform-aside{ 
   display:flex; 
   flex-direction: column; 
   gap: 14px; 
 } 
 
 .platform-aside-card{ 
  background: #f4f4f4; 
  border-radius: 18px; 
  padding: 18px 18px; 
  border: 1px solid rgba(0,0,0,0.06); 
  display: flex;
  align-items: flex-start;
  gap: 16px;
} 

.platform-aside-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}
.platform-aside-icon svg {
  width: 24px;
  height: 24px;
}

.platform-aside-content {
  flex: 1;
}

.platform-aside-title{ 
  margin: 0 0 6px; 
  font-weight: 700; 
  color: rgba(0,0,0,0.82); 
} 
 
 .platform-aside-text{ 
   margin: 0; 
   color: rgba(0,0,0,0.62); 
   line-height: 1.55; 
 } 
 
 /* Break section */ 
 .platform-break{ 
   background: #0b0b0b; 
   color: #ffffff; 
 } 
 
 .platform-break .platform-h2, 
 .platform-break .platform-p{ 
   color: rgba(255,255,255,0.88); 
 } 
 
 .platform-architecture{ 
   margin-top: 28px; 
   display:grid; 
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); 
   gap: 34px; 
   align-items: center; 
 } 
 
 .platform-diagram{ 
   width: 100%; 
   height: auto; 
   display:block; 
   border-radius: 18px; 
   background: rgba(255,255,255,0.05); 
   border: 1px solid rgba(255,255,255,0.10); 
 } 
 
 /* Componentes */ 
 .platform-components{ 
   margin-top: 18px; 
   display:grid; 
   grid-template-columns: repeat(2, minmax(0, 1fr)); 
   gap: 16px; 
 } 
 
 .platform-component{ 
   background: #f4f4f4; 
   border-radius: 18px; 
   padding: 22px; 
   border: 1px solid rgba(0,0,0,0.06); 
 } 
 
 /* Compare */ 
.platform-compare{ 
  background: #ffe9f5;
  padding: 80px 0;
} 

.platform-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

.platform-compare-grid{ 
  display:grid; 
  grid-template-columns: 1fr; 
  gap: 24px; 
  margin-top: 0; 
  align-items: stretch;
} 

.platform-compare-col{ 
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06); 
  border-radius: 24px; 
  padding: 32px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
} 

/* Estilo para la columna de Herramientas (menos destacada / gris) */
.platform-compare-col-weak {
  background: #f4f4f4; /* Gris suave */
  border-color: transparent;
  box-shadow: none;
  opacity: 0.9;
}
.platform-compare-col-weak .platform-compare-title {
  color: #666; /* Título gris oscuro */
}
.platform-compare-col-weak::before {
  display: none; /* Sin barra de color superior */
}

/* Estilo para MOCCA (destacada) */
.platform-compare-col-strong { 
  background: #ffffff;
  border: 2px solid #ff3f9e; /* Fallback */
  border: 2px solid var(--color-primary); 
  box-shadow: 0 12px 32px rgba(255, 63, 158, 0.12);
  transform: scale(1.02);
  z-index: 2;
} 

.platform-compare-col-strong::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--color-primary);
  display: block; /* Asegurar que se muestre */
}

.platform-compare-title{ 
  margin: 0 0 16px; 
  font-size: 1.5rem;
  font-weight: 800; 
  letter-spacing: -0.02em; 
  color: #111;
}

.platform-compare-col-strong .platform-compare-title {
  color: var(--color-primary-dark);
}

.platform-quote{ 
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800; 
  letter-spacing: -0.02em; 
  margin: 32px 0 0;
  max-width: 100%;
  background: -webkit-linear-gradient(45deg, #111, #555);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
} 
 
 /* Lista */ 
 .platform-list{ 
   margin: 0 0 14px; 
   padding-left: 18px; 
   color: rgba(0,0,0,0.70); 
   line-height: 1.65; 
 } 
 
 .platform-cta-card{ 
   background: #f4f4f4; 
   border-radius: 18px; 
   padding: 22px; 
   border: 1px solid rgba(0,0,0,0.06); 
 } 
 
 .platform-cta-kicker{ 
   margin: 0 0 10px; 
   font-weight: 800; 
   color: rgba(0,0,0,0.85); 
 } 
 
 .platform-cta-btn{ 
   margin-top: 10px; 
   display:inline-flex; 
 } 
 
 /* Responsive */ 
 @media (max-width: 960px){ 
   .platform-hero-grid, 
   .two-col, 
   .platform-architecture{ 
     grid-template-columns: 1fr; 
   } 
 
   .platform-orbit{ 
     width: 360px; 
     height: 360px; 
   } 
 
   .platform-components{ 
     grid-template-columns: 1fr; 
   } 
 
   .platform-compare-grid{ 
     grid-template-columns: 1fr; 
   } 
 } 
 
 @media (max-width: 520px){ 
   .platform-hero{ 
    padding: 56px 0 44px; 
  } 
}

/* Core visual – Plataforma */ 
.platform-core-lottie{ 
  width: 400px; 
  height: 400px; 
  opacity: 0.9; 
} 

.platform-hero-visual{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

/* Mobile */ 
@media (max-width: 768px){ 
  .platform-core-lottie{ 
    width: 280px; 
    height: 280px; 
    margin-top: 20px; 
  } 
}

/* Arquitectura general: Lottie de nodos */ 
.platform-architecture-visual{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  position: relative; 
} 

.platform-arch-lottie{ 
  width: 420px !important; 
  height: 420px !important; 
  opacity: 0.85; 
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.35)); 
} 

/* halo suave detrás para integrarlo al fondo oscuro */ 
.platform-architecture-visual::before{ 
  content:""; 
  position:absolute; 
  width: 420px; 
  height: 420px; 
  border-radius: 999px; 
  background: 
    radial-gradient(circle at 35% 35%, rgba(255,63,158,0.20), transparent 55%), 
    radial-gradient(circle at 70% 40%, rgba(59,130,246,0.12), transparent 60%), 
    radial-gradient(circle at 55% 75%, rgba(147,51,234,0.14), transparent 62%); 
  filter: blur(22px); 
  opacity: 0.9; 
  z-index: 0; 
  pointer-events:none; 
} 

.platform-architecture-visual > *{ 
  position: relative; 
  z-index: 1; 
} 

/* responsive */ 
@media (max-width: 960px){ 
  .platform-arch-lottie{ 
    width: 320px !important; 
    height: 320px !important; 
  } 
  .platform-architecture-visual::before{ 
    width: 320px; 
    height: 320px; 
  } 
} 

/* Íconos Componentes Plataforma */
.platform-component-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.platform-component-head .platform-h3 {
  margin: 0;
  line-height: 1.2;
}

.platform-icon {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
  flex-shrink: 0;
  stroke-width: 1.5px;
}

.platform-component:hover .platform-icon {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Visual infraestructura – Plataforma vs herramientas */
.platform-compare-visual{
  display: flex;
  justify-content: flex-start; /* Alineado a la izquierda */
  margin-top: 0;
}

.platform-compare-image{
  width: 100%;
  max-width: 100%; /* Aprovecha el ancho de la columna */
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 960px){
  .platform-compare-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .platform-compare-visual{
    justify-content: center;
    margin-top: 0;
    order: -1; /* Imagen arriba en móvil */
  }
  
  .platform-compare-image{
    max-width: 500px;
  }
  
  .platform-quote {
    text-align: center;
  }
}

/* Highlight Text */
.platform-highlight-pink {
  color: #ff3f9e !important;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}