:root{
  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;

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

  /* === Brand book Siigo === */
  --siigo-blue-500:#00AAFF;     /* azul Siigo base */
  --siigo-navy:#00244C;         /* azul profundo */
  --brand-green:#7AC23A;        /* secundario brand */
  --brand-green-strong:#619B2E; /* rgb(97,155,46) */
  --brand-yellow:#FFC933;
  --brand-orange:#FFA532;
  --brand-red:#F7274E;
  --brand-purple:#7800B7;

  --gray-600:#666666; --gray-300:#d7d7d7; --gray-200:#ededed;

  /* efectos */
  --glow: radial-gradient(120px 120px at 80% 85%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:#ffffff;
}

/* ===== Sección bajo el Hero (ancla) ===== */
#siigo-cards { margin-top:15rem; padding-top:12px; position:relative; }
#siigo-cards::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1160px,100%); height:12px; box-shadow:0 -12px 30px rgba(0,0,0,.06); pointer-events:none;
}

/* ---- Layout ---- */
.wrap{ max-width:1160px; padding:64px 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 por PÁGINAS ===== */
.carousel{ position:relative; display:flex; flex-direction:column; gap:18px; }

/* Ahora el viewport NO hace scroll horizontal del contenido.
   Está oculto y navegamos por páginas con transform */
.viewport{
  overflow:hidden; outline:none;
}

/* El track se mueve -100% por cada página */
.track{
  display:flex; gap:0; padding:0; margin:0;
  list-style:none;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}

/* Cada página ocupa 100% del ancho visible */
.page{
  min-width:100%;
  padding:8px; /* respiración interna */
}

/* Dentro de cada página, 3 columnas en desktop, 1 en mobile */
.cards{
  display:grid; gap:24px; margin:0; padding:0; list-style:none;
  grid-template-columns: 1fr;            /* mobile por defecto */
}
@media (min-width:900px){
  .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Controles inferiores (no intrusivos) */
.controls{ display:flex; align-items:center; justify-content:center; gap:12px; }
.nav{
  height:30px; width:36px; border-radius:999px; border:0;
  display:grid; place-items:center; background:#0b1220; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer;
}
.nav:disabled{ opacity:.35; cursor:not-allowed; }
.nav:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.dots{ display:flex; gap:8px; align-items:center; }
.dots button{
  width:10px; height:10px; border-radius:999px; border:1px solid #cbd5e1;
  background:#e2e8f0; padding:0; cursor:pointer;
}
.dots button[aria-selected="true"]{ background:#0b1220; border-color:#0b1220; }
.dots button:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ===== Card ===== */
.card{
  /* controles por card (puedes sobreescribir inline) */
  --pad-x: var(--s-7);
  --pad-y: var(--s-7);
  --row-gap: var(--s-5);
  --features-gap: var(--s-4);
  --footer-gap: var(--s-3);
  --brand-gap: var(--s-3);
  --badge-safe: 28px; /* separa brand-duo del badge superior */

  position:relative; height:440px; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
.card:focus-within,.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; background:var(--glow); transition:opacity .25s ease;
}
.card:hover::after,.card:focus-within::after{ opacity:.9; }

/* Badge superior izquierda (confianza) */
.card__badge{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.38);
  color:#fff; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:500; backdrop-filter: blur(4px);
  z-index:4;
}

/* Capas en GRID */
.card__front, .card__back{
  position:absolute; inset:0;
  padding:var(--pad-y) var(--pad-x);
  display:grid; grid-template-rows:auto 1fr auto;
  row-gap:var(--row-gap);
  color:var(--white); transition:opacity .22s ease, transform .22s ease;
  align-items:start;
}
.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); }

/* Zonas */
.card__header{ display:flex; flex-direction:column; gap:var(--s-3); }
.card__content{}
.card__footer{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--footer-gap); }

/* Titular */
.card__title{
  margin:0;
  font-size:clamp(28px, 3.2vw, 42px);
  font-weight:300; line-height:1.06; letter-spacing:.2px; color:var(--white);
}

/* 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: despegar brand-duo del badge */
.card__back .card__header{ margin-top:var(--badge-safe); }

/* Features */
.card__features{ margin:0; padding:0; list-style:none; display:grid; gap:var(--features-gap); }
.card__features li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; font-weight:300; line-height:1.35; color:var(--white); }
.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);
}

/* Micro-confianza */
.trust-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; opacity:.9; }
.trust-pill{
  display:flex; gap:8px; align-items:center;
  height:36px; padding:0 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
  font-size:12px;
}
.trust-pill i{ font-size:12px; }

/* CTA (botón) */
.btn{
  border:0; background:#fff; color:#1f2a60;
  border-radius:999px; padding:10px 16px; font-weight:500; font-size:14px; line-height:20px;
  min-height:40px; box-shadow:0 6px 16px rgba(0,0,0,.14);
  transition:transform .08s ease, box-shadow .08s ease;
  text-decoration:none; /* sin subrayado */
}
.btn:hover{ box-shadow:0 8px 20px rgba(0,0,0,.18); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); box-shadow:0 3px 10px rgba(0,0,0,.18); }
.btn:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; }

/* Badge “Nuevo” — solo frontal, izquierda, VERDE engagement */
.card__pill{
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg,var(--brand-green-strong) 0%, var(--brand-green) 100%);
  color:#0f2402;
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 18px rgba(97,155,46,.35), inset 0 1px 0 rgba(255,255,255,.45);
  z-index:4;
}
.card__back .card__pill{ display:none !important; }

/* ===== Gradientes por card ===== */
.card[data-variant="facturacion"]{ background:linear-gradient(180deg, var(--siigo-blue-500) 0%, var(--siigo-navy) 100%); }
.card[data-variant="nomina"]{ background:linear-gradient(180deg, #00B6FF 0%, #0b7285 100%); }
.card[data-variant="administrativo"]{ background:linear-gradient(180deg, #4B6CFF 0%, #3730a3 100%); }
.card[data-variant="contador"]{ background:linear-gradient(180deg, #2F80ED 0%, #1e40af 100%); }
.card[data-variant="pos"]{ background:linear-gradient(180deg, #00B6FF 0%, #075985 100%); }
.card[data-variant="pos-gastro"]{ background:linear-gradient(180deg, var(--brand-purple) 0%, #312e81 100%); }

/* Perf & a11y */
@media (prefers-reduced-motion: reduce){
  .track{ transition:none !important; }
  .card, .card__front, .card__back { transition:none !important; }
  .card::after{ display:none; }
}

/* Responsive */
@media (min-width:1100px){
  .card{ height:400px; }
}