/* ============================================================
   banca-virtual-796c6cb0--shell.css
   Sección: shell externo — banca-virtual
   Todas las reglas scopeadas bajo .x-shell
   ============================================================ */

.x-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
  padding-top: 30px;
  /* NOTA: url() es relativa a ESTE archivo CSS (/styles/sections/) → ../../assets/ */
  background: url(../../assets/images/bg-banca-vitual.jpg) 50% 100% / cover repeat;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text);
}

.x-shell .x-wrapper {
  width: 100%;
}

.x-shell .x-container {
  width: 100%;
  margin: 0 auto;
}

.x-shell .x-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10.5px;
}

.x-shell .x-col-main,
.x-shell .x-col-img {
  padding: 0 var(--gutter);
  max-width: 100%;
  width: 100%;
  display: block;
}

.x-shell .x-main-text {
  width: 100%;
}

.x-shell .x-filiales {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 435px;
}

.x-shell .x-filiales a.link-gnb {
  display: block;
  width: 32%;
}

.x-shell .x-filiales a.link-gnb img {
  width: 100%;
  height: auto;
}

.x-shell .x-tab-content {
  background: transparent;
  padding: 30px;
  border-radius: var(--radius-wrap);
  width: 100%;
}

.x-shell .x-tab-content iframe {
  width: 100%;
  min-width: 305px;
  min-height: 650px;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
}

.x-shell .x-main-img {
  width: 100%;
}

.x-shell img.img-section {
  width: 100%;
  height: auto;
}

/* ≥768px — columnas en fila */
@media (min-width: 768px) {
  .x-shell .x-wrapper {
    height: 100%;
  }
  .x-shell .x-row {
    height: 100%;
  }
  .x-shell .x-col-main {
    width: 45%;
    display: flex;
    align-items: center;
  }
  .x-shell .x-col-img {
    width: 54%;
    display: flex;
    align-items: flex-end;
  }
  .x-shell img.img-section {
    width: 97%;
    margin-top: 20px;
  }
}

/* 768px–1199px — container fluido al 96% */
@media (min-width: 768px) and (max-width: 1199px) {
  .x-shell .x-container {
    width: 96%;
  }
}

/* ≥1200px — container fijo */
@media (min-width: 1200px) {
  .x-shell .x-container {
    max-width: var(--container-max);
  }
  .x-shell .x-col-main {
    width: 38%;
  }
  .x-shell .x-col-img {
    width: 60%;
  }
}

/* ≥1600px — imagen hero a ancho completo de su columna */
@media (min-width: 1600px) {
  .x-shell img.img-section {
    width: 100%;
  }
}

/* ≤768px — logos apilados/centrados e iframe compacto */
@media (max-width: 768px) {
  .x-shell .x-filiales {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  /* El original declara width:45% en un selector de MENOR especificidad que
     el width:32% base → los logos secundarios se quedan en 32% (118px a 390px).
     Se reproduce el RESULTADO renderizado: 32% para secundarios, 80% para el primero. */
  .x-shell .x-filiales a.link-gnb {
    max-width: 280px;
    text-align: center;
  }
  .x-shell .x-filiales a.link-gnb:first-child {
    width: 80%;
    margin-bottom: 10px;
  }
  .x-shell .x-tab-content iframe {
    max-width: 390px;
    min-height: 475px;
    margin: 0 auto;
    display: block;
  }
}

/* <768px — container a ancho completo con gutter */
@media (max-width: 767.98px) {
  .x-shell .x-container {
    width: 100%;
    padding: 0 var(--gutter);
  }
}

/* ≤500px — tarjeta sin padding lateral */
@media (max-width: 500px) {
  .x-shell .x-tab-content {
    padding: 30px 0;
  }
}