:root {
  --radius: 20px;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --text: #0B1522;
  --white: #fff;

  /* ===== tamaños/card ===== */
  --card-width-mobile: min(280px, 80vw);
  --card-width-desktop: 380px;   /* lo recalcula el JS para que quepan EXACTAS 3 o las que se asignen */
  --card-height-mobile: 360px;
  --card-height-desktop: 335px;

  /* ===== controles de ESPACIADO ===== */
  --pad-x: 28px;            /* padding lateral de la card (front/back) */
  --pad-y: 28px;            /* padding vertical de la card (front/back) */
  --row-gap: 12px;          /* separación vertical entre zonas interna */
  --brand-gap: 12px;        /* espacio entre chip y logo */
  --features-gap: 5px;     /* espacio entre cada feature */
  --features-mt: 1.2rem;      /* margen superior del bloque de checks */
  --features-mb: 18px;      /* margen inferior del bloque de checks */

  /* ===== gradientes (sin cambios) ===== */
  --c-facturacion-a: #2563eb; --c-facturacion-b: #1e3a8a;
  --c-nomina-a: #0ea5a2;     --c-nomina-b: #0b7285;
  --c-adm-a: #4f46e5;        --c-adm-b: #3730a3;
  --c-contador-a: #1d4ed8;   --c-contador-b: #1e40af;
  --c-pos-a: #0891b2;        --c-pos-b: #075985;
  --c-posg-a: #4338ca;       --c-posg-b: #312e81;
}

/* consistencia cross-browser */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0;
  font-family:Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:var(--text); background:#ffffff;
}

/* ---- Layout ---- */
.wrap{ max-width:1160px; padding:10rem 16px 64px; margin:0 auto; }
.section-head{ text-align:center; margin-bottom:28px; }
.section-head h2{ font-weight:500; font-size:clamp(22px, 2.2vw, 40px); margin:0 0 8px; letter-spacing:.2px; }
.section-head p{ margin:0; opacity:.75; font-weight:300; }

/* ---- Carrusel ---- */
.carousel{
  position:relative; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
}
.viewport{
  overflow:hidden;             /* evita que se vea la 4ª card */
  scroll-behavior:smooth; outline:none;
}
.track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: var(--card-width-mobile);
  gap:24px; padding:8px; margin:0; list-style:none;
}

/* ---- Card ---- */
.card{
  position:relative; width:100%;
  height:var(--card-height-mobile);
  border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  background:#1d4ed8;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.card:focus-within,.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.12); }

/* Capas */
.card__front,.card__back{
  position:absolute; inset:0;
  padding:var(--pad-y) var(--pad-x);
  display:flex; flex-direction:column; justify-content:space-between;
  color:var(--white);
  transition:opacity .22s ease, transform .22s ease;
  gap: var(--row-gap);
}
.card__front{ opacity:1; transform:translateY(0); }
.card__back { opacity:0; transform:translateY(10px); }
.card:hover .card__front,.card:focus-within .card__front{ opacity:0; transform:translateY(-10px); }
.card:hover .card__back,.card:focus-within .card__back{ opacity:1; transform:translateY(0); }

/* Titular (evita cortes, mismo look) */
.card__title{
  font-size:clamp(28px, 3.2vw, 42px);
  font-weight:300; line-height:1.06; letter-spacing:.2px; color:var(--white);
  word-break:break-word; overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto;
}

/* BRAND DUO */
.brand-duo{ display:flex; align-items:center; gap:var(--brand-gap); }
.brand-duo .chip{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-duo .chip i{ font-size:18px; line-height:1; color:#fff; font-weight:900; }
.brand-duo .brand__img{ height:22px; width:auto; display:block; }

/* Back content */
.card__features{
  margin: var(--features-mt) 0 var(--features-mb);
  padding:0; list-style:none; display:grid; gap:var(--features-gap);
}
.card__features li{
  display:flex; align-items:flex-start; gap:10px;
  font-weight:300; line-height:1.35; color:var(--white);
  font-size:16px; /* si quieres controlarlo, cambia este valor */
}
.badge{
  width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  font-size:13px; line-height:1; color:var(--white);
}

/* CTA */
.btn{
  border:0; background:#fff; color:#1f2a60;
  border-radius:999px; padding:10px 16px;
  font-weight:500; font-size:14px; line-height:normal; min-height:40px;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  text-decoration:none;
}
.btn:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; }

/* Flechas */
.nav{
  height:48px; width:48px; border-radius:50%; border:0;
  display:grid; place-items:center; background:#111827; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer;
}
.nav:disabled{ opacity:.35; cursor:not-allowed; }

/* Badge "Nuevo" (sin cambios) */
.card__pill{
  position:absolute; top:12px; right:12px;
  background:#fbbf24; color:#3a2600;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* ---- Gradientes por card ---- */
.card[data-variant="facturacion"]   { background:linear-gradient(180deg, var(--c-facturacion-a) 0%, var(--c-facturacion-b) 100%); }
.card[data-variant="nomina"]        { background:linear-gradient(180deg, var(--c-nomina-a) 0%, var(--c-nomina-b) 100%); }
.card[data-variant="administrativo"]{ background:linear-gradient(180deg, var(--c-adm-a) 0%, var(--c-adm-b) 100%); }
.card[data-variant="contador"]      { background:linear-gradient(180deg, var(--c-contador-a) 0%, var(--c-contador-b) 100%); }
.card[data-variant="pos"]           { background:linear-gradient(180deg, var(--c-pos-a) 0%, var(--c-pos-b) 100%); }
.card[data-variant="pos-gastro"]    { background:linear-gradient(180deg, var(--c-posg-a) 0%, var(--c-posg-b) 100%); }

/* Responsive */
@media (min-width:1100px){
  .track{ grid-auto-columns: var(--card-width-desktop); }
  .card { height: var(--card-height-desktop); }
}