:root{
  --color-primary:#2f409a;
  --color-accent:#21b2ff;
  --color-title:#fedc00;
  --bg-page:#f6f7fb;
  --bg-card:#2f409a;
  --text:#ffffff;
  --muted:rgba(255,255,255,.88);
  --shadow:0 12px 30px rgba(23,32,90,.14);

  --radius-lg:20px;
  --radius-pill:999px;

  --wrap:1350px;      /* ancho máximo (más amplio que antes) */
  --gap:32px;         /* separación entre cards */

  --bg-vertical-url: url('/static/img/fondo_vertical.png');
  --bg-horizontal-url: url('/static/img/fondo_horizontal.png');
}

/* ===== Lienzo ===== */
html,body{/*background:var(--bg-page);*/ overflow-x:hidden;}
.contacto-bg{min-height:100vh; padding:34px 0 70px}

/* ===== Grid 3 → 2 → 1 ===== */
.contacto-container{
  width:min(96vw, var(--wrap));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gap);
}
@media (max-width: 1080px){
  .contacto-container{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 720px){
  .contacto-container{grid-template-columns:1fr; gap:24px}
}

/* ===== Tarjeta base ===== */
.card{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  color:var(--text);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px 28px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:360px;
}

/* Fondos por tarjeta */
.card--vbg{
  background-image:
    var(--bg-vertical-url);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.card--hbg{
  background-image:
    var(--bg-horizontal-url);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.card-title{
  color:var(--color-title);
  font-size:2.0rem;
  font-weight:800;
  letter-spacing:.2px;
  text-align:left;
  margin:0 0 6px;
}
.card-desc{ color:var(--muted); font-size:1.06rem }

/* ===== Listas ===== */
.list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px; font-size:1.07rem;
}
.list-with-icons li{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
}

/* Badge iconos */
.icon-badge{
  display:inline-grid; place-items:center;
  width:40px;height:40px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.icon-badge img{width:22px;height:22px;object-fit:contain}
.icon-badge:hover{transform:translateY(-2px); background:rgba(255,255,255,.14)}
.icon-badge--social{width:36px;height:36px}

/* Socials */
.socials{display:flex;align-items:center;gap:12px;margin-top:6px}
.socials .card-desc{margin-right:6px}

/* ===== PAGO ===== */
.tabs{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;          /* ← en desktop NO hay scroll */
  margin-top:4px;
  padding-bottom:2px;
  overflow:visible;
}
.tab-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-weight:700; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.10);
  transition:background .15s ease, transform .12s ease, color .15s ease, border-color .15s ease;
}
.tab-pill:hover{background:rgba(255,255,255,.14); transform:translateY(-1px)}
.tab-pill.is-active{ background:rgba(255,255,255,.20); color:var(--color-title); border-color:rgba(255,255,255,.28) }

/* resto de info */
.pago-info{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.bank-logos, .cards-logos{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.bank-logos img, .cards-logos img{height:28px; width:auto; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}
.cuentas{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cuenta-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cuenta-line .label{font-weight:700;color:#fff}
.cuenta-line .value{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

/* ===== FAQs ocupa toda la fila ===== */
.faqs-card{ grid-column:1 / -1 }

/* ===== Responsivo ===== */
@media (max-width:1080px){
  .card-title{font-size:1.7rem}
}
@media (max-width:860px){
  /* en pantallas medianas, si no entra, permitimos scroll horizontal suave SOLO aquí */
  .tabs{flex-wrap:nowrap; overflow:auto hidden; scroll-behavior:smooth}
}
@media (max-width:720px){
  .card{padding:22px 22px; min-height:320px}
  .card-title{font-size:1.45rem}
  .card-desc,.list{font-size:1rem}
  .icon-badge{width:36px;height:36px}
  .icon-badge img{width:20px;height:20px}
  .bank-logos img, .cards-logos img{height:24px}
}
@media (max-width:420px){
  .card{padding:18px 16px;border-radius:16px}
  .card-title{font-size:1.25rem}
  .tab-pill{padding:7px 12px;font-size:.95rem}
  .bank-logos img, .cards-logos img{height:22px}
}

/* ===== Contacto – mejoras de responsividad (append-only) ===== */

/* espaciamiento fluido para todo el lienzo */
:root{
  --padX: clamp(14px, 4vw, 28px);
  --gap: clamp(18px, 3vw, 32px);
}
.contacto-bg{ padding-block: clamp(20px, 4vw, 70px); }

/* contenedor: max-width + padding interno (mejor que width:96vw) */
.contacto-container{
  width: auto;                       /* override del width anterior */
  max-width: var(--wrap);
  padding-inline: var(--padX);
  gap: var(--gap);
}

/* tarjetas: padding/min-height fluidos + leve overlay para legibilidad
   (no cambia tu imagen de fondo; solo la mezcla un poquito) */
.card{
  padding: clamp(18px, 3.5vw, 28px);
  min-height: clamp(220px, 48vh, 360px);
  background-color: rgba(6,4,142,.18);
  background-blend-mode: overlay;
}
@media (max-width: 900px){
  .card{ min-height: auto; }         /* evita tarjetas “largas” en móvil */
}

/* títulos y textos se escalan suave */
.card-title{
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
}

/* listas con icono: mejor envoltura en 2 líneas si hace falta */
.list-with-icons li{
  grid-template-columns: minmax(40px, auto) 1fr;
  align-items: start;
}

/* badges: tamaño táctil cómodo */
.icon-badge{
  width: clamp(40px, 6.2vw, 44px);
  height: clamp(40px, 6.2vw, 44px);
}
.icon-badge--social{
  width: clamp(36px, 5.6vw, 40px);
  height: clamp(36px, 5.6vw, 40px);
}

/* pestañas de bancos: scroll horizontal suave en pantallas medias/pequeñas */
@media (max-width: 860px){
  .tabs{
    flex-wrap: nowrap;
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-gutter: stable both-edges;
  }
  .tab-pill{ scroll-snap-align: start; }
  .tabs::-webkit-scrollbar{ display: none; }
  .tabs{ scrollbar-width: none; }    /* Firefox */
}

/* logos y cuentas más compactos en móvil, evitando desbordes numéricos */
@media (max-width: 720px){
  .bank-logos, .cards-logos{ gap: clamp(8px, 2.2vw, 14px); }
  .bank-logos img, .cards-logos img{ height: clamp(20px, 3.8vw, 24px); }
  .cuenta-line{ gap: 6px; }
  .cuenta-line .value{ word-break: break-word; }
}

/* la tarjeta de FAQs sigue ocupando todo el ancho en todos los cortes */
.faqs-card{ grid-column: 1 / -1; }

/* accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .icon-badge:hover, .tab-pill:hover{ transform: none; }
}

/* ===== Fix: tabs sin scroll en anchos medianos ===== */

/* 1) De 1100px hacia abajo: envolver y compactar, sin overflow */
@media (max-width: 1100px){
  .tabs{
    flex-wrap: wrap !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scrollbar-gutter: auto !important;
  }
  .tab-pill{
    margin-bottom: 8px;
    padding: clamp(6px, 1.6vw, 10px) clamp(10px, 2vw, 14px);
    font-size: clamp(.9rem, 1.8vw, 1rem);
  }
}

/* 2) Solo en pantallas muy chicas: scroll horizontal suave y sin barra */
@media (max-width: 520px){
  .tabs{
    flex-wrap: nowrap !important;
    overflow: auto hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .tab-pill{
    margin-bottom: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .tabs::-webkit-scrollbar{ display: none; }
  .tabs{ scrollbar-width: none; }
}