/* ============================================================
   Soluciones de Pago - ASI Honduras
   Artes oficiales de Marketing + capa de enlaces reales
   ============================================================ */

:root{
  --azul-bril:#052EAE;
  --azul:#07227D;
  --azul-prof:#011C63;
  --amarillo:#FFEC01;
  --blanco:#fff;
  /* fondo mas oscuro que las artes -> las artes flotan por encima */
  --fondo:#010B26;
  --fondo-2:#01143F;
  --texto:#eaf0ff;
  --texto-sec:#9db0e0;
  --panel-bg:rgb(255 255 255 / .06);
  --borde:rgb(255 255 255 / .12);

  --radio:20px;
  --max:1160px;
  --gap:clamp(12px,2.6vw,20px);
  --pad:clamp(14px,4vw,24px);

  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sombra:0 6px 22px rgb(14 26 58 / .10);
  --sombra-alta:0 14px 34px rgb(14 26 58 / .18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--fuente);
  background:var(--fondo);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgb(5 46 174 / .38), transparent 62%),
    radial-gradient(900px 520px at 8% 42%, rgb(5 46 174 / .22), transparent 60%),
    linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo) 55%);
  background-attachment:fixed;
  color:var(--texto);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
h1,h2{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
a{color:inherit}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--amarillo);color:var(--azul-prof);
  padding:12px 20px;border-radius:0 0 var(--radio) 0;font-weight:700;
}
.skip:focus{left:0}

:where(a,button):focus-visible{
  outline:3px solid var(--azul-bril);
  outline-offset:3px;
  border-radius:10px;
}

/* ============ LAYOUT ============ */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:var(--pad);
  display:grid;
  gap:var(--gap);
  grid-template-columns:minmax(0,1fr);
}
/* min-width:0 -> los items pueden encogerse por debajo de su min-content */
.wrap>*{min-width:0}

@media(min-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .card--ancho,.panel{grid-column:1 / -1}
}

/* ============ CARDS DE ARTE ============ */
.card{
  background:var(--fondo-2);
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:0 10px 30px rgb(0 0 0 / .38);
  display:flex;
  flex-direction:column;
}
.arte{width:100%;height:auto;flex:0 0 auto}

/* arte completo como enlace */
.arte-link{display:block;flex:0 0 auto;transition:opacity .16s ease}
.arte-link:hover{opacity:.94}
.arte-link:focus-visible{outline-offset:-4px}

/* el bloque de accion se pega al fondo -> cards de la misma fila quedan parejas */
.card__cta{
  padding:clamp(16px,3.5vw,22px);
  display:flex;justify-content:center;align-items:center;
  margin-top:auto;
}
.acciones{
  padding:clamp(14px,3vw,20px);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin-top:auto;
}
.redes{margin-top:auto}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-height:54px;padding:12px 30px;
  border-radius:999px;text-decoration:none;font-weight:800;
  background:var(--amarillo);color:var(--azul-prof);
  transition:transform .16s ease,box-shadow .16s ease;
  text-align:center;
}
.btn--primary{
  font-size:clamp(1.02rem,3.6vw,1.16rem);
  box-shadow:0 8px 20px rgb(5 46 174 / .22);
  width:100%;max-width:360px;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.btn__host{font-size:.72em;font-weight:600;opacity:.66}

.btn--sm{min-height:48px;padding:11px 22px;font-size:.95rem}
.btn--ghost{
  background:transparent;color:var(--azul-bril);
  border:2px solid var(--azul-bril);
}
.btn--ghost:hover{background:var(--azul-bril);color:var(--blanco)}

/* ============ BANCOS ============ */
/* panel generico: bancos y redes sociales */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:clamp(24px,5vw,36px) var(--pad);
  text-align:center;
}
.panel__title{
  font-size:clamp(1.22rem,4.6vw,1.85rem);
  font-weight:800;color:var(--blanco);
  margin-bottom:.3em;
}
.panel__sub{
  color:var(--texto-sec);
  font-size:clamp(.92rem,3.2vw,1.02rem);
  margin-bottom:clamp(20px,4vw,28px);
}
.bancos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(94px,1fr));
  gap:clamp(10px,2.4vw,18px);
  max-width:860px;margin:0 auto;
}
.banco{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:12px 8px;height:100%;
  border-radius:16px;
  text-decoration:none;color:var(--blanco);
  border:1px solid var(--borde);
  background:rgb(255 255 255 / .05);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.banco:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgb(0 0 0 / .42);
  background:rgb(255 255 255 / .12);
}
.banco img{width:clamp(56px,13vw,72px);height:auto;border-radius:13px}
.banco__nombre{font-size:.8rem;font-weight:700;text-align:center;line-height:1.25}

/* ============ REDES (mismo formato que la grilla de bancos) ============ */
.redes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(94px,1fr));
  gap:clamp(10px,2.4vw,18px);
  max-width:430px;margin:0 auto;padding:0;
}
.red{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:12px 8px;height:100%;min-height:139px;
  border-radius:16px;border:1px solid var(--borde);
  background:rgb(255 255 255 / .05);
  text-decoration:none;color:var(--blanco);
  font-size:.8rem;font-weight:700;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.red:hover{
  transform:translateY(-4px);
  background:rgb(255 255 255 / .12);
  box-shadow:0 14px 30px rgb(0 0 0 / .42);
}
.red svg{width:clamp(28px,7vw,34px);height:clamp(28px,7vw,34px);fill:var(--amarillo)}

/* ============ FOOTER ============ */
/* aire al final de la pagina (ya no hay footer) */
.wrap{padding-bottom:clamp(28px,6vw,48px)}

/* ============ MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:hover,.banco:hover,.red:hover{transform:none}
}