/* CSS Document */
:root{
  --bg:#eef3f7;           /* fondo único 635c70 */
  --ink:#19212a;
  --muted:#635c70;
  --primary:#6226D9;      /* morado corporativo */
  --card:#F9F7FD;
  --shadow-soft:0 10px 25px rgba(0,0,0,.07);
}

/* Base */
*{box-sizing:border-box}
body{margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  /*font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; */
  color:var(--ink);
  background:var(--bg)}
.ps-section{padding-top:0px; padding-right:0px; padding-bottom:60px; padding-left:0px; 0 50px 0;background:var(--bg)}
.ps-container{width:min(1100px,94vw);margin:0 auto}

.ps-title{margin:0 0 8px;/*font-weight:800;font-size:clamp(28px,4vw,40px);*/text-align:center}
.ps-subtitle{margin:0 auto 58px;color:var(--muted);/*max-width:72ch*/text-align:center;}

/* Tabs */
.ps-tabs{display:flex;gap:16px;justify-content:center;margin:18px 0 28px}
.ps-tab{
  appearance:none;border:0;cursor:pointer;background:transparent;color:var(--primary);
  padding:.65rem 2rem;border-radius:999px;font-weight:700;font-size:1rem;
  transition:background .2s,color .2s,transform .2s;
}
.ps-tab[aria-selected="true"]{
  /*background:var(--primary); rgba(98,38,217,0.12)*/ color:#fff; transform:translateY(-1px);background:#6226d9;
}
.ps-tab:hover:not([aria-selected="true"]){
  background:#ffb31a;color:#ffffff;
}

/* Panes */
.ps-pane{display:none}
.ps-pane.is-active{display:block}

/* Imagen “flotando” */
.device-frame{/*background:#fff;border-radius:32px;padding:.9rem;box-shadow:var(--shadow-soft);width:min(380px,100%);*/padding-top:75px;padding-bottom:75px;vertical-align: middle;}
.device-left{max-width:380px}
.floating-img{display:block;width:100%;height:auto;border-radius:26px;animation:floatY 4.5s ease-in-out infinite}
@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}




/* Cards (colores planos) */
.ps-card{
  display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border-radius:20px;padding:.95rem 1rem;box-shadow:var(--shadow-soft);
  transition:transform .2s,box-shadow .2s;margin-bottom:25px;
}
.ps-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.ps-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(98,38,217,.12); color:var(--primary); font-size:1.05rem; flex:0 0 36px;
}
.ps-icon i{color:inherit}
.ps-card-title{margin:.05rem 0 .4rem;/*font-weight:800;font-size:1.03rem;line-height:1.3*/}
.ps-card-text{margin:0;padding-bottom:5px;color:var(--muted);/*font-size:.93rem;line-height:1.45;*/}

/* Compact (Variante 2) */
.ps-card.compact{border-radius:18px;padding:.8rem .9rem .8rem;margin:0;/*margin-bottom:12px !important;*/display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:.75rem;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.ps-card.compact:hover{box-shadow:0 12px 26px rgba(0,0,0,.1);transform:translateY(-1px)}
.ps-icon.compact{width:36px;height:36px;border-radius:10px;font-size:1.05rem;grid-row:1 / span 2;background:rgba(98,38,217,.12);color:var(--primary)}
.ps-card-title.compact{margin:0 0 .15rem;/*font-size:1.03rem;line-height:1.3*/}
.ps-card-text.compact{margin:0;/*font-size:.93rem;line-height:1.45*/}

/* Burbujas (morado sólido + icono blanco) */
.bubble-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.bubble{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#6226D9; color:#fff;
  border-radius:999px;padding:.45rem .85rem;font-weight:700;font-size:.9rem;
  box-shadow:0 6px 16px rgba(98,38,217,.25);
}
.bubble i{color:#fff;font-size:.95rem}

/* ===== Variante 1 ===== */
.v1-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.v1-col{grid-column:span 4}
.v1-device{grid-column:span 4;display:flex;justify-content:center}

/* Mobile: imagen primero */
@media (max-width:992px){
  .v1-grid{grid-template-columns:1fr}
  .v1-device{grid-column:1 / -1;grid-row:1}
  .v1-col:nth-of-type(1){grid-column:1 / -1;grid-row:2}
  .v1-col:nth-of-type(2){grid-column:1 / -1;grid-row:3}
}

/* ===== Variante 2 ===== */
.v2-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.v2-device{grid-column:span 4;display:flex;justify-content:center}
.v2-cards{grid-column:span 8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* Mobile: imagen primero y luego cards 1 columna */
@media (max-width:992px){
  .v2-grid{grid-template-columns:1fr}
  .v2-device{grid-column:1 / -1}
  .v2-cards{grid-column:1 / -1;grid-template-columns:1fr}
}