/* =====================================================
   card.css — Tarjeta de acceso (QR / código)
   - Estilo credit card premium
   - QR glass / secure
   - Footer de acciones
   - 100% responsive
   - ✅ Watermark + ✅ Badge SECURE
   ===================================================== */

.sa-card-wrap{
  max-width: 860px;
  width: 100%;
  display:flex;
  justify-content:center;
}

/* =========================
   Card shell
   ========================= */
.sa-card{
  position: relative;
  width: min(560px, 96%);
  aspect-ratio: var(--cc-aspect, 1.586);
  border-radius: var(--cc-radius, 28px);
  padding: var(--cc-pad, 18px);
  overflow:hidden;

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(74,163,255,.08);

  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.74));

  color: rgba(255,255,255,.90);
  transform: translateZ(0);
}

/* Light theme */
html[data-theme="light"] .sa-card{
  border: 1px solid rgba(18,24,38,.12);
  box-shadow:
    0 18px 55px rgba(11,16,32,.10),
    0 0 0 1px rgba(43,108,255,.06);

  background:
    radial-gradient(900px 520px at 18% 12%, rgba(43,108,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(74,163,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));

  color: rgba(11,16,32,.88);
}

/* =========================
   Animated highlight
   ========================= */
.sa-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(74,163,255,.14), transparent 55%),
    radial-gradient(700px 460px at 100% 30%, rgba(56,211,159,.08), transparent 60%),
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,255,255,.06) 45%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,.06) 55%,
      transparent 65%
    );
  opacity:.65;
  mix-blend-mode: screen;
  pointer-events:none;
  transform: translateX(-35%);
  animation: saCardSweep 7.5s linear infinite;
}
@keyframes saCardSweep{
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}
html[data-theme="light"] .sa-card::before{
  opacity:.35;
  mix-blend-mode: normal;
}

/* =========================
   Glow overlay
   ========================= */
.sa-card__glow{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(74,163,255,.22), transparent 60%),
    radial-gradient(520px 260px at 92% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 380px at 50% 120%, rgba(56,211,159,.10), transparent 65%);
  pointer-events:none;
  opacity:.95;
  mix-blend-mode: screen;
}
html[data-theme="light"] .sa-card__glow{
  opacity:.55;
  mix-blend-mode: normal;
}

/* =========================
   Main panel
   ========================= */
.sa-number{
  --qr-size: clamp(96px, 22vw, 140px);
  --qr-pad: 12px;
  --footer-safe: 64px;

  position: relative;
  margin-top: 4px;
  padding: 14px;
  height: 100%;

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);

  display:flex;
  flex-direction: column;
  gap: 10px;

  padding-right: calc(var(--qr-size) + (var(--qr-pad) * 2) + 6px);
  padding-bottom: var(--footer-safe);
}
html[data-theme="light"] .sa-number{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* =========================
   ✅ Watermark susurro.ai
   ========================= */
.sa-number::after{
  content:"susurro.ai";
  position:absolute;
  left: 14px;
  top: 14px;

  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: 11px;

  opacity: .22;
  text-transform: lowercase;
  pointer-events:none;
  user-select:none;

  background: linear-gradient(90deg, rgba(74,163,255,.95), rgba(56,211,159,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .sa-number::after{
  opacity: .18;
  background: linear-gradient(90deg, rgba(43,108,255,.95), rgba(74,163,255,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   Secure chip
   ========================= */
.sa-secchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .6px;
  opacity: .94;
}
.sa-secchip i{ font-size: 16px; }
.sa-secchip__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.30);
}

/* =========================
   Code row
   ========================= */
.sa-number__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.sa-number__left{
  min-width:0;
  flex: 1 1 auto;
}
.sa-number__label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  opacity:.78;
  text-transform: uppercase;
}
.sa-number__value{
  margin-top: 6px;
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: 2.4px;
  font-size: clamp(14px, 2.2vw, 16px);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* =========================
   Footer actions
   ========================= */
.sa-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.sa-actions--inline{
  position:absolute;
  left: 14px;
  bottom: 14px;
  right: calc(var(--qr-size) + (var(--qr-pad) * 2) + 6px);

  height: 48px;
  display:flex;
  align-items:center;
  padding: 8px 10px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .sa-actions--inline{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

.sa-iconbtn{
  width: 40px;
  height: 40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration:none;

  transition: transform .08s ease, filter .12s ease;
}
.sa-iconbtn:hover{ filter: brightness(1.06); }
.sa-iconbtn:active{ transform: translateY(1px); }
.sa-iconbtn i{ font-size:18px; }
html[data-theme="light"] .sa-iconbtn{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* =========================
   QR PREMIUM (glass / secure)
   ========================= */
.sa-qr-in{
  position:absolute;
  right: var(--qr-pad);
  bottom: var(--qr-pad);

  width: var(--qr-size);
  aspect-ratio: 1 / 1;

  border-radius: 18px;
  padding: 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.02)
    );
  backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 42px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);

  z-index: 2;
}
html[data-theme="light"] .sa-qr-in{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.90),
      rgba(255,255,255,.78)
    );
  border: 1px solid rgba(18,24,38,.12);
  box-shadow:
    0 14px 32px rgba(11,16,32,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.sa-qr-in .sa-qr-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ✅ Badge SECURE sobre el QR */
.sa-qr-in::after{
  content:"SECURE";
  position:absolute;
  top: 8px;
  right: 8px;

  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;

  padding: 4px 7px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);

  backdrop-filter: blur(10px);
  opacity: .92;
}
html[data-theme="light"] .sa-qr-in::after{
  background: rgba(18,24,38,.08);
  border: 1px solid rgba(18,24,38,.12);
  color: rgba(11,16,32,.78);
}

/* Labels ocultos para look pro */
.sa-qr-in__label{ display:none; }

/* =========================
   Motion reduce
   ========================= */
@media (prefers-reduced-motion: reduce){
  .sa-card::before{ animation:none; }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  .sa-number{
    --qr-size: clamp(92px, 26vw, 128px);
  }
}
@media (max-width: 576px){
  .sa-number{
    --qr-size: clamp(88px, 28vw, 120px);
    --qr-pad: 10px;
  }
}
@media (max-width: 420px){
  .sa-number{
    --qr-size: clamp(84px, 32vw, 112px);
  }
}
/* =====================================================
   POLISH PRO — spacing + warn padding + code higher
   (pegar al final de card.css)
   ===================================================== */

/* 1) Código un poco más arriba / más aire visual */
.sa-number__row{
  margin-top: 2px;
  margin-bottom: 18px;   /* 👈 separa del área del QR */
  align-items: flex-start;
}

/* 2) Evita que el texto del código “toque” el QR en pantallas pequeñas */
.sa-number__left{
  padding-right: 6px;
}

/* 3) Texto final (warn) con padding arriba/abajo + estilo pro */
.sa-qr-in__warn{
  margin-top: 12px;
  padding: 10px 14px;        /* ✅ padding top/bottom */
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);

  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  opacity: .80;
  text-align: center;

  /* ✅ si el warn está cerca del QR, que no quede “debajo” visualmente */
  max-width: 100%;
  box-sizing: border-box;
}

html[data-theme="light"] .sa-qr-in__warn{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(18,24,38,.03);
}

/* 4) En móviles: aún más separación (por si el código se hace grande) */
@media (max-width: 576px){
  .sa-number__row{
    margin-bottom: 22px;
  }
  .sa-qr-in__warn{
    padding: 10px 12px;
    margin-top: 10px;
  }
}
/* === Level 2 FAQ Cards (Premium) === */
.bt-faq-card{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  padding:12px;
}
html[data-theme="dark"] .bt-faq-card{
  border-color: rgba(255,255,255,.14);
  background: rgba(20,20,20,.6);
}
.bt-faq-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.bt-faq-title{
  font-weight:800;
  font-size:13px;
  opacity:.95;
}
.bt-faq-nav{
  display:flex; flex-wrap:wrap; gap:6px;
}
.bt-faq-pill{
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.12);
  background: transparent;
  color: inherit;
  cursor:pointer;
}
html[data-theme="dark"] .bt-faq-pill{ border-color: rgba(255,255,255,.18); }
.bt-faq-pill[aria-selected="true"]{
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .bt-faq-pill[aria-selected="true"]{
  background: rgba(255,255,255,.08);
}
.bt-faq-body{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:10px;
}
html[data-theme="dark"] .bt-faq-body{ border-top-color: rgba(255,255,255,.10); }
.bt-faq-section{ display:none; }
.bt-faq-section.active{ display:block; }

/* === Level 2.5 FAQ Enhancements === */
.bt-faq-actions{ display:flex; gap:8px; margin-left:auto; }
.bt-faq-action{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid rgba(0,0,0,.12); background: transparent;
  cursor:pointer; font-size:14px;
}
html[data-theme="dark"] .bt-faq-action{ border-color: rgba(255,255,255,.18); }
.bt-faq-action:hover{ opacity:.9; }
.bt-faq-pill{ display:inline-flex; align-items:center; gap:6px; }
.bt-faq-ico{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.bt-faq-section{ animation: btFaqFade .14s ease-out; }
@keyframes btFaqFade { from{opacity:.0; transform: translateY(2px);} to{opacity:1; transform:none;} }

/* === Level 2.8 FAQ Pro Enhancements === */
.bt-faq-top{ display:flex; align-items:center; gap:10px; }
.bt-faq-search{
  flex:1;
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:8px 10px;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .bt-faq-search{
  border-color: rgba(255,255,255,.18);
  background: rgba(20,20,20,.55);
}
.bt-faq-search input{
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: inherit;
  font-size:12px;
}
.bt-faq-pill{
  transition: transform .12s ease-out, background-color .12s ease-out, opacity .12s ease-out;
}
.bt-faq-pill[aria-selected="true"]{ transform: translateY(-1px); }
.bt-faq-pill:hover{ opacity:.92; }
.bt-faq-ico svg{ width:16px; height:16px; display:block; }
.bt-faq-card[data-collapsed="1"] .bt-faq-nav,
.bt-faq-card[data-collapsed="1"] .bt-faq-body{ display:none; }