/* ---- Banners reutilizables: mismo carril de contenido que el resto de la pagina ---- */
.sjw-ban { box-sizing: border-box; width: min(var(--sjw-ancho, 1200px), 100% - 2 * var(--sjw-margen, 1.5rem)); margin: 1.5rem auto; }
.sjw-ban-item { display: block; overflow: hidden; border-radius: .75rem; line-height: 0; transition: transform .25s ease, box-shadow .25s ease; }
a.sjw-ban-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.sjw-ban-item img { display: block; width: 100%; height: auto; }
.sjw-ban--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sjw-ban--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .sjw-ban--dos, .sjw-ban--tres { grid-template-columns: 1fr; gap: .75rem; } }

/* Franja de beneficios */
.sjw-ban--beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; padding: 1.4rem 1.75rem; background: var(--wp--preset--color--suave, #f1f1f1); border-radius: .75rem; }
.sjw-ben { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.sjw-ben-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--tinta, #111); }
.sjw-ben-t { display: flex; flex-direction: column; line-height: 1.25; }
.sjw-ben-t strong { font-size: 1rem; font-weight: 600; }
.sjw-ben-t small { opacity: .75; font-size: .82rem; }
a.sjw-ben:hover .sjw-ben-ico { background: var(--wp--preset--color--tinta, #111); color: var(--wp--preset--color--base, #fff); }
.sjw-ban-vacio { text-align: center; padding: 1rem; background: #fff3cd; }

/* Celular: las franjas muy finas se recortan al centro para que el texto siga legible */
@media (max-width: 640px) {
	.sjw-ban--ancho .sjw-ban-item:not(:has(.sjw-bt)):not(:has(source)) img { min-height: 76px; object-fit: cover; object-position: center; }
	.sjw-ban--beneficios { padding: 1.1rem 1.25rem; }
}

/* ---- Texto editable sobre la imagen (posicion y tamaño por dispositivo) ---- */
.sjw-ban-item { position: relative; container-type: inline-size; }
.sjw-bt { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .35em; padding: clamp(.75rem, 4cqw, 2.25rem); line-height: 1.15; pointer-events: none; box-sizing: border-box; }
.sjw-bt-sub { font-size: clamp(.65rem, 1.7cqw, .9rem); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.sjw-bt-titulo { font-weight: 700; font-size: clamp(1rem, var(--sjw-t, 4.4cqw), 3.5rem); max-width: 22em; }
.sjw-bt-boton { align-self: inherit; display: inline-block; margin-top: .4em; padding: .6em 1.3em; border-radius: 99px; font-size: clamp(.7rem, 1.6cqw, .95rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sjw-bt.sjw-tam-s { --sjw-t: 3cqw; } .sjw-bt.sjw-tam-m { --sjw-t: 4.4cqw; } .sjw-bt.sjw-tam-l { --sjw-t: 6.4cqw; }
.sjw-bt.sjw-tono-oscuro { color: #1b1b1b; } .sjw-bt.sjw-tono-oscuro .sjw-bt-boton { background: #111; color: #fff; }
.sjw-bt.sjw-tono-claro { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); } .sjw-bt.sjw-tono-claro .sjw-bt-boton { background: #fff; color: #111; text-shadow: none; }

/* Computador: posicion horizontal-vertical */
@media (min-width: 641px) {
	.sjw-bt[data-pc^="izq"] { align-items: flex-start; text-align: left; }
	.sjw-bt[data-pc^="centro"] { align-items: center; text-align: center; }
	.sjw-bt[data-pc^="der"] { align-items: flex-end; text-align: right; }
	.sjw-bt[data-pc$="arriba"] { justify-content: flex-start; }
	.sjw-bt[data-pc$="-centro"] { justify-content: center; }
	.sjw-bt[data-pc$="abajo"] { justify-content: flex-end; }
}
/* Celular: su propia posicion y letras mas grandes (el banner es mas angosto) */
@media (max-width: 640px) {
	.sjw-bt.sjw-tam-s { --sjw-t: 5.5cqw; } .sjw-bt.sjw-tam-m { --sjw-t: 7.5cqw; } .sjw-bt.sjw-tam-l { --sjw-t: 10cqw; }
	.sjw-bt-sub { font-size: clamp(.65rem, 3cqw, .85rem); } .sjw-bt-boton { font-size: clamp(.7rem, 3cqw, .9rem); }
	.sjw-bt[data-mo^="izq"] { align-items: flex-start; text-align: left; }
	.sjw-bt[data-mo^="centro"] { align-items: center; text-align: center; }
	.sjw-bt[data-mo^="der"] { align-items: flex-end; text-align: right; }
	.sjw-bt[data-mo$="arriba"] { justify-content: flex-start; }
	.sjw-bt[data-mo$="-centro"] { justify-content: center; }
	.sjw-bt[data-mo$="abajo"] { justify-content: flex-end; }
}

/* ---- Marcas (logos) ---- */
.sjw-ban--marcas { position: relative; }
.sjw-ban-titulo { margin: 0 0 .9rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.sjw-ban--marcas .sjw-cm-pista { gap: .75rem; }
.sjw-marca { flex: 0 0 auto; width: clamp(7.5rem, 11vw, 9.5rem); height: 4.25rem; display: flex; align-items: center; justify-content: center; padding: .6rem 1rem; box-sizing: border-box; border: 1px solid var(--wp--preset--color--borde, #e3e1dd); border-radius: .75rem; background: var(--wp--preset--color--base, #fff); scroll-snap-align: start; transition: box-shadow .2s, transform .2s; }
a.sjw-marca:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.sjw-marca img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
a.sjw-marca:hover img { filter: none; opacity: 1; }
.sjw-ban--marcas .sjw-cm-sig { right: .25rem; top: 62%; }

/* ---- Testimonios ---- */
.sjw-test-grid { display: grid; grid-template-columns: repeat(var(--sjw-cols, 3), minmax(0, 1fr)); gap: 1rem; }
.sjw-test { margin: 0; padding: 1.4rem 1.5rem; border-radius: .9rem; background: var(--wp--preset--color--suave, #f1f1f1); display: flex; flex-direction: column; gap: .9rem; }
.sjw-test blockquote { margin: 0; padding: 0; border: 0; font-size: 1.02rem; line-height: 1.55; }
.sjw-test blockquote::before { content: '\201C'; display: block; font-family: Georgia, serif; font-size: 2.5rem; line-height: .6; opacity: .35; margin-bottom: .35rem; }
.sjw-test figcaption { display: flex; flex-direction: column; font-size: .88rem; }
.sjw-test figcaption span { opacity: .7; }
@media (max-width: 800px) { .sjw-test-grid { grid-template-columns: 1fr; } }