/**
 * Sebanda Insurance — Home Page Styles
 *
 * Fiel a sebandainsurancefranchise4.com (Elementor Kit #19)
 * Todas las medidas y colores extraídos del CSS de la referencia.
 *
 * Variables globales del Kit #19 (post-19.css):
 *   --e-global-color-primary/accent:  #9cfe00  (verde lima)
 *   --e-global-color-text:            #000000
 *   --e-global-color-aaa0003:         #f7f7f7
 *   --e-global-color-aaa0006:         #ebebeb
 *   --e-global-color-2b877cd:         rgba(255,255,255,0.92)  (~#FFFFFFEB)
 *   h2: Lato 36px / 700 / lh 45px  (mobile: 25px / lh 1.4)
 *   h3: Lato 20px / 700
 *   body: Lato 16px / 400
 *
 * @package SebandIns
 */

/* ════════════════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════════════════ */
:root {
  --sbi-green:         #9cfe00;
  --sbi-green-hover:   #7dcc00;
  --sbi-black:         #000000;
  --sbi-white:         #ffffff;
  --sbi-gray-text:     #656565;
  --sbi-gray-light:    #f7f7f7;
  --sbi-border:        #ebebeb;
  --sbi-form-bg:       rgba(255,255,255,0.92);
  --sbi-radius:        20px;
  --sbi-shadow:        0px 0px 60px 0px rgba(0,0,0,.10);
  --sbi-font:          'Lato', -apple-system, sans-serif;
  --sbi-font-alt:      'Plus Jakarta Sans', -apple-system, sans-serif;
  --sbi-max-width:     1200px;
  --sbi-transition:    0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
.sbi-page {
  font-family: var(--sbi-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sbi-black);
}

.sbi-page *, .sbi-page *::before, .sbi-page *::after {
  box-sizing: border-box;
}

/* Neutralizar Kadence */
.content-area .sbi-page,
main.wrap .sbi-page,
#inner-wrap .sbi-page {
  padding: 0 !important;
  max-width: none !important;
}
.page-template-page-home-php main.wrap,
.page-template-page-home-php #inner-wrap {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════
   BOTONES  (ref: .elementor-kit-19 .elementor-button)
   bg: #9cfe00 | color: #000 | border-radius: 20px | bold uppercase
═══════════════════════════════════════════════════════════════ */
.sbi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--sbi-radius);
  font-family: var(--sbi-font);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--sbi-transition), color var(--sbi-transition), border-color var(--sbi-transition);
  white-space: nowrap;
  line-height: 1;
}

.sbi-btn--primary {
  background: var(--sbi-green);
  color: var(--sbi-black);
  border-color: var(--sbi-green);
}
.sbi-btn--primary:hover,
.sbi-btn--primary:focus {
  background: var(--sbi-black);
  color: var(--sbi-green);
  border-color: var(--sbi-black);
}

.sbi-btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}
.sbi-btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

/* ════════════════════════════════════════════════════════════
   HERO  (ref: 3a65c220)
   bg: imagen real + gradient(90deg, #fff 53%, transparent 77%)
   min-height: auto (la contenido la expande)
═══════════════════════════════════════════════════════════════ */
.sbi-hero {
  position: relative;
  overflow: clip; /* clip recorta horizontal sin colapsar sticky/sticky */
  min-height: 560px;
  display: flex;
  align-items: stretch;
  background-color: var(--sbi-white);
}

.sbi-hero__bg {
  position: absolute;
  inset: 0;
  /* background-image se aplica vía inline style en el elemento */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* El overlay NO cubre el fondo — cada elemento tiene su propio bg semitransparente.
   Solo se mantiene un gradiente muy suave para legibilidad en los extremos. */
.sbi-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sbi-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding: 0;
  gap: 0;
}

/* ── Columna izquierda (ref: 5bbb6d69)
   justify-content: center, gap: 10px */
.sbi-hero__content {
  flex: 1 1 50%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 4rem 2rem 4rem 3rem;
}

/* H1 Hero (ref: 57a789c8)
   bg: var(--e-global-color-accent) = #9cfe00
   padding: 1% 1%, border-radius: 20px, text-align: center */
.sbi-hero__title {
  font-family: var(--sbi-font);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--sbi-black);
  background: var(--sbi-green);
  padding: 1% 3%;
  border-radius: var(--sbi-radius);
  text-align: center;
  align-self: flex-start;
}

/* Párrafo subtítulo y trust items con fondo semitransparente
   (ref: 4ad037d2, aa4b1a2, e5ee870, 8f67450)
   bg: var(--e-global-color-2b877cd) = rgba(255,255,255,0.92)
   padding: 2% 2%, border-radius: 20px */
.sbi-hero__tag-item {
  background: rgba(255,255,255,0.92);
  padding: 2% 2%;
  border-radius: var(--sbi-radius);
  font-family: var(--sbi-font-alt);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--sbi-black);
  margin: 0;
  display: block;
}

/* ── Columna derecha: formulario */
.sbi-hero__form-col {
  flex: 0 0 auto;
  width: clamp(340px, 44%, 540px);
  display: flex;
  align-items: flex-start;
  padding-block: 2rem;
}

/* ════════════════════════════════════════════════════════════
   FORMULARIO — sbi-qf
   · Contenedor con fondo blanco y forma curva (250px izquierda)
   · Inputs con solo border-bottom — estilo limpio tipo línea
   · Placeholder gris, sin labels visibles
   · Botón verde lima full-width
═══════════════════════════════════════════════════════════════ */

.sbi-qf {
  background: rgba(255,255,255,0.97);
  border-radius: 250px 0 0 250px;
  padding: 3em 3em 3em 5em;
  width: 100%;
}

.sbi-qf__title {
  font-family: var(--sbi-font);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--sbi-black);
  line-height: 1.25;
  padding-left: 1.5rem;
}

/* Grid de campos: columna única con espacio entre ellos */
.sbi-qf__grid {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* ── Wrapper de campo ── */
.sbi-f {
  display: block;
  position: relative;
}

/* Ocultar labels HTML si los hubiera (usamos solo placeholder) */
.sbi-f label,
.sbi-f > label {
  display: none;
}

/* ── Input / Select — solo border-bottom, fondo transparente ── */
.sbi-qf .sbi-f input:not([type="radio"]):not([type="checkbox"]),
.sbi-qf .sbi-f select,
.sbi-qf .sbi-rep input:not([type="radio"]):not([type="checkbox"]),
.sbi-qf .sbi-rep select,
.sbi-qf .sbi-cond input:not([type="radio"]):not([type="checkbox"]),
.sbi-qf .sbi-cond select {
  font-family: var(--sbi-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--sbi-black) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #888 !important;
  border-radius: 0 !important;
  padding: 14px 8px 12px !important;
  width: 100% !important;
  display: block !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  transition: border-color var(--sbi-transition) !important;
}

.sbi-qf .sbi-f input:not([type="radio"]):not([type="checkbox"]):focus,
.sbi-qf .sbi-f select:focus,
.sbi-qf .sbi-rep input:not([type="radio"]):not([type="checkbox"]):focus,
.sbi-qf .sbi-rep select:focus,
.sbi-qf .sbi-cond input:not([type="radio"]):not([type="checkbox"]):focus,
.sbi-qf .sbi-cond select:focus {
  border-bottom-color: var(--sbi-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Placeholder */
.sbi-f input::placeholder,
.sbi-rep input::placeholder,
.sbi-cond input::placeholder {
  color: rgba(0,0,0,0.35);
  font-size: 16px;
}

/* Select: opción por defecto en gris como placeholder */
.sbi-f select option:first-child,
.sbi-rep select option:first-child {
  color: rgba(0,0,0,0.35);
}

/* Flecha del select alineada verticalmente al centro del padding */
.sbi-f--sel { position: relative; }
.sbi-f--sel::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sbi-black);
  font-size: 1rem;
}

/* ── Radio: contenedor propio sin clase sbi-f ── */
.sbi-radio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 14px 8px 12px;
  border-bottom: 1px solid #888;
}

.sbi-f__rl {
  font-family: var(--sbi-font);
  font-size: 17px;
  font-weight: 400;
  color: rgba(0,0,0,0.38);
  flex-shrink: 0;
}

.sbi-f__rg { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.sbi-f__rb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: var(--sbi-black);
}

/* Input radio: oculto — lo reemplazamos con un custom circle verde */
.sbi-radio-native {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 2px solid var(--sbi-green) !important;
  border-bottom: 2px solid var(--sbi-green) !important;
  border-radius: 50% !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: none !important;
}

/* Punto interior verde al seleccionar */
.sbi-radio-native::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sbi-green);
  transform: scale(0);
  transition: transform 0.15s;
}

.sbi-radio-native:checked {
  background: #fff !important;
  border-color: var(--sbi-green) !important;
}

.sbi-radio-native:checked::after {
  transform: scale(1);
}

/* ── Repeater ── */
.sbi-rep {
  border-bottom: 1px solid #888;
  padding: 12px 8px 10px;
  background: transparent;
}

.sbi-rep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sbi-rep__label {
  font-family: var(--sbi-font);
  font-size: 17px;
  font-weight: 400;
  color: rgba(0,0,0,0.38);  /* mismo gris que los placeholders */
}

.sbi-rep__note {
  font-size: 12px;
  color: var(--sbi-gray-text);
  margin-right: 8px;
}

/* Controles +/- en verde lima */
.sbi-rep__ctrls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sbi-green);
  border-radius: var(--sbi-radius);
  padding: 3px 12px;
}

.sbi-rep__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--sbi-black);
  padding: 0 2px;
  transition: opacity .15s;
}
.sbi-rep__btn:hover   { opacity: 0.6; }
.sbi-rep__btn:disabled { opacity: 0.25; cursor: default; }

.sbi-rep__count {
  font-size: 15px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  color: var(--sbi-black);
}

/* Sub-campos del repeater en 2 columnas */
.sbi-rep__rows { display: flex; flex-direction: column; gap: 0; }
.sbi-rep__row  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
/* Fila de ancho completo dentro del repeater (radio Sexo, etc.) */
.sbi-rep__row--full {
  display: block;
  grid-template-columns: none;
}
.sbi-rep__row--full .sbi-radio-row {
  border-bottom: 1px solid rgba(0,0,0,0.15);
  padding: 8px 8px 6px;
}
/* Wrapper del campo en el repeater: flex para alinear el border-bottom */
.sbi-rep__row .sbi-f {
  display: flex;
  align-items: flex-end;
}

.sbi-rep__row .sbi-f input,
.sbi-rep__row .sbi-f select {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  height: 44px !important;
  line-height: 1 !important;
  width: 100% !important;
}
.sbi-rep__row .sbi-f input::placeholder {
  font-size: 14px;
}

/* Input fecha: misma altura que el resto, icono pequeño */
.sbi-rep__row .sbi-f input[type="date"] {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(0,0,0,0.5) !important;
  padding: 0 4px !important;
  height: 44px !important;
  min-width: 0 !important;
  width: 100% !important;
  line-height: 44px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.sbi-rep__row .sbi-f input[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  opacity: 0.4;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Grupo condicional (aparece cuando seguro=Sí) ── */
.sbi-cond {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
.sbi-cond .sbi-f input {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  border-radius: 0;
}

/* ── Botón submit: full-width, verde lima, bold uppercase ── */
.sbi-qf__submit {
  width: 100%;
  background: var(--sbi-green) !important;
  color: var(--sbi-black);
  border: none;
  border-radius: var(--sbi-radius);
  font-family: var(--sbi-font);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1rem 1rem;
  cursor: pointer;
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  transition: background var(--sbi-transition), color var(--sbi-transition);
}
.sbi-qf__submit:hover {
  background: var(--sbi-black);
  color: var(--sbi-green);
}

/* Nota pie: misma tipografía y color que en la imagen */
.sbi-qf__note {
  font-family: var(--sbi-font);
  font-size: 0.78rem;
  color: rgba(0,0,0,0.55);
  margin-top: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0 0.5rem 1.5rem;
  background: transparent;
}

/* ── Mensajes de resultado del formulario ── */
.sbi-qf__notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--sbi-font);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.sbi-qf__notice--success {
  background: color-mix(in srgb, var(--sbi-green) 20%, transparent);
  border: 1px solid var(--sbi-green);
  color: var(--sbi-black);
}
.sbi-qf__notice--error {
  background: #fff0f0;
  border: 1px solid #f5c6cb;
  color: #7b1a1a;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .sbi-hero__form-col { width: 100%; padding: 0; }
  .sbi-qf {
    border-radius: 0 0 14px 14px;
    padding: 1.5em 1.25em;
  }
  /* En móvil: grid 2 columnas para campos cortos lado a lado */
  .sbi-qf__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
  }
  /* Campos que ocupan fila completa — solo hijos directos del grid raíz
     para no afectar select/radio dentro de los repeaters */
  .sbi-qf__grid > .sbi-f--full,
  .sbi-qf__grid > .sbi-rep,
  .sbi-qf__grid > .sbi-cond,
  .sbi-qf__grid > .sbi-radio-row,
  .sbi-qf__grid > .sbi-qf__submit,
  .sbi-qf__grid > .sbi-qf__notice,
  .sbi-qf__grid > .sbi-qf__note {
    grid-column: 1 / -1;
  }
  .sbi-cond { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   REVIEWS — carrusel  (ref: 41ace843)
   padding: 2em 0 | border-bottom: 1px solid #ebebeb
   Layout: flex row — col izq (heading+btn) | col der (carrusel)
═══════════════════════════════════════════════════════════════ */
.sbi-reviews {
  padding: 2em 0;
  background: var(--sbi-white);
  border-bottom: 1px solid var(--sbi-border);
}

.sbi-reviews__inner {
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* Flex row (ref: 41ace843 — flex row, gap: 0) */
.sbi-reviews__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}

/* Col izquierda: heading + btn (ref: 45a4042c) */
.sbi-reviews__header {
  flex: 0 0 auto;
  width: clamp(200px, 28%, 320px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 2rem;
  padding-top: 1rem;
}

.sbi-reviews__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  color: var(--sbi-black);
}

/* Col derecha: carrusel (ref: 5d1f96c)
   Quote.png aplicado via ::before con opacity 0.1 (ref: --overlay-opacity:0.1) */
.sbi-reviews__carousel-wrap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 1em 1em 1em 5em;
}

.sbi-reviews__carousel-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/sebanda/Quote.png');
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 150px auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* El contenido del carrusel debe estar por encima del ::before */
.sbi-swiper {
  position: relative;
  z-index: 1;
}

/* Swiper — slides */
.sbi-swiper {
  overflow: hidden;
}

.sbi-swiper__wrapper {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.sbi-swiper__slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
}

/* Testimonial card */
.sbi-testimonial {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sbi-testimonial__text {
  font-family: var(--sbi-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sbi-black);
  margin: 0;
}

.sbi-testimonial__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.sbi-testimonial__img img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.sbi-testimonial__cite {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sbi-testimonial__name {
  font-weight: 700;
  font-size: 1rem;
  /* color: var(--e-global-color-secondary) = #656565 */
  color: var(--sbi-gray-text);
}

.sbi-testimonial__title {
  font-size: 0.875rem;
  color: var(--sbi-gray-text);
}

/* Paginación (bullets) */
.sbi-swiper__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.sbi-swiper__bullet {
  /* Reset completo de estilos de botón de Kadence */
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex-shrink: 0;
  width: 6px !important;
  height: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background: var(--sbi-black) !important;
  cursor: pointer;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  font-size: 0;
  box-shadow: none !important;
  outline-offset: 2px;
  transition: background var(--sbi-transition), opacity var(--sbi-transition), transform var(--sbi-transition);
}

.sbi-swiper__bullet.is-active {
  background: var(--sbi-green) !important;
  opacity: 1;
  transform: scale(1.3);
}

/* ════════════════════════════════════════════════════════════
   SAVINGS  (ref: 692d13f1)
   padding: 1em 0 10em | bg: imagen ref + overlay 0.5
   Grid 3 col | tarjetas: border-radius 10px, box-shadow, padding 2em
═══════════════════════════════════════════════════════════════ */
/* Fondo blanco (ref: 692d13f1 hereda bg del tema Hello = #fff)
   Las tarjetas son negras sobre fondo blanco */
.sbi-savings {
  padding: 1em 0 10em;
  background-color: var(--sbi-white);
  color: var(--sbi-black);
}

.sbi-savings__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

.sbi-savings__header {
  text-align: center;
  padding: 2em 0 0;
}

.sbi-savings__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  /* La sección hereda fondo blanco del body (ref: 692d13f1 background_background:classic sin bg-color)
     El texto es negro sobre fondo blanco */
  color: var(--sbi-black);
}

.sbi-savings__subtitle-wrap {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.sbi-savings__subtitle {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  /* Negro sobre fondo blanco */
  color: var(--sbi-black);
  margin: 0;
}

/* Grid 3 columnas (ref: 14501b57 — repeat(3,1fr), gap 10px) */
.sbi-savings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Saving card (ref: 2c102ce5/7b2ecb4/7e9fa18)
   bg: #000000 (--e-global-color-text), border-radius 10px
   box-shadow: 0 0 60px rgba(0,0,0,0.1)
   text-align: center (ref: 99bcbf5, a34dea7, a7dca57 → text-align:center) */
.sbi-saving-card {
  background: #000000;
  border-radius: 10px;
  box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.1);
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform var(--sbi-transition);
  text-align: center;
}
.sbi-saving-card:hover { transform: translateY(-4px); }

/* Nombre: blanco bold (ref: h4 en card) */
.sbi-saving-card__name {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--sbi-white);
  margin: 0;
}

/* Headline: "Pagaba" + "ahora paga" en columna */
.sbi-saving-card__headline {
  font-family: var(--sbi-font);
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* "Pagaba $X / mes"
   Ref: --dynamic-text-color = #ebebeb, marker: strikethrough animado (izq→der)
   Wrapper inline-block para que ::after mida solo el ancho del texto, no toda la línea.
   El tachado nativo (text-decoration) no es animable. */
.sbi-saving-card__before {
  display: block;                   /* ocupa toda la línea */
  font-size: 0.95rem;
}
/* Span interno — inline-block → ::after hereda su ancho exacto */
.sbi-saving-card__before-inner {
  color: #ebebeb;                   /* --e-global-color-aaa0006 */
  display: inline-block;
  position: relative;
}

/* Línea roja animada — solo sobre el texto, no toda la celda */
.sbi-saving-card__before-inner::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%;
  height: 2px;
  background: #e53935;
  border-radius: 1px;
  transition: transform 0.6s ease 0.3s;
}

/* Cuando la tarjeta entra en viewport, activa la animación */
.sbi-saving-card.is-visible .sbi-saving-card__before-inner::after {
  transform: translateY(-50%) scaleX(1);
}

/* "ahora paga $Y / mes"
   Ref: .elementor-headline-plain-text { color: --e-global-color-aaa0001 } = #FFFFFF */
.sbi-saving-card__after {
  color: var(--sbi-white);
  font-weight: 700;
  display: block;
  font-size: 1rem;
}

/* "Ahorra $Z al año" — verde lima accent (ref: 81816f0 → color: --e-global-color-accent = #9cfe00) */
.sbi-saving-card__savings {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--sbi-green);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   WHY  (ref: 2b7bf47b)
   Layout: 2 columnas sin padding lateral (full-bleed)
   Col izq (409bea7c): 50%, padding 1em 5em 5em 1em
   Col der (2421a2c5): 50%, imagen why-family.jpg + overlay gradiente
   Overlay: linear-gradient(90deg, #000 5%, rgba(255,255,255,0) 75%)
   Grid interno (19ffa76): repeat(2, 1fr) — 4 cards en 2×2
   Counter cards (4d9cb0c, 7c42205): border-radius 20px, padding 15%
   Icon box cards (fc45b43, 05540fe): border-radius 20px, padding 10%
═══════════════════════════════════════════════════════════════ */
.sbi-why {
  position: relative;
  overflow: hidden;
  background-color: var(--sbi-white);
}

/* Inner = flex row sin max-width — ocupa todo el ancho
   ref: 2b7bf47b → justify-content: flex-end */
.sbi-why__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 560px;
}

/* Col izquierda: heading + cards
   ref: 409bea7c → width: 50% */
.sbi-why__col {
  flex: 0 0 50%;
  padding: 5em 5em 5em 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* En viewports > 1200px centrar el contenido con max-width */
@media (min-width: 1200px) {
  .sbi-why__col {
    padding-left: calc((100vw - 1200px) / 2 + 2rem);
  }
}

.sbi-why__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0 0 0.75rem;
  color: var(--sbi-black);
}

/* Divisor (ref: 5c561429) */
.sbi-divider {
  border: none;
  border-top: 1px solid var(--sbi-border);
  margin: 0.75rem 0 1.5rem;
}

/* Grid 2×2 (ref: 19ffa76 — repeat(2, 1fr)) */
.sbi-why__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  flex: 1;
}

/* Counter card (ref: 4d9cb0c, 7c42205)
   bg: #f7f7f7 (--e-global-color-aaa0003), border-radius: 20px, padding: 15% */
.sbi-why__card {
  background: var(--sbi-gray-light);
  border-radius: var(--sbi-radius);
  padding: 5%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Icon box card (ref: fc45b43, 05540fe)
   padding: 10% */
.sbi-why__card--iconbox {
  padding: 10%;
}

.sbi-counter__label {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--sbi-black);
  margin: 0;
  order: 2;
}

/* Número del counter arriba del label (Elementor pone número primero) */
.sbi-counter__number {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  color: var(--sbi-black);
  display: flex;
  align-items: baseline;
  gap: 2px;
  order: 1;
}

.sbi-counter__prefix,
.sbi-counter,
.sbi-counter__suffix {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Icon box (ref: 7f64e77 — view-default, position-block-start) */
.sbi-iconbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* view-default: sin fondo, sin borde — solo el SVG en verde
   (ref: elementor-view-default → fill: var(--e-global-color-primary) = #9cfe00) */
.sbi-iconbox__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
.sbi-iconbox__icon svg {
  fill: var(--sbi-green);
  width: 40px;
  height: 40px;
}

.sbi-iconbox__title {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 0 0.25rem;
  color: var(--sbi-black);
}

.sbi-iconbox__desc {
  font-size: 1rem;
  color: var(--sbi-gray-text);
  margin: 0;
  line-height: 1.5;
}

.sbi-why__cta { margin-top: 2rem; }

/* Col derecha: imagen con overlay gradiente oscuro desde la izquierda (ref: 2421a2c5)
   Imagen: why-family.jpg (insurance-is-important...)
   ref: width 50%, overlay-opacity:1, min-height:300px
   Overlay: linear-gradient(90deg, --e-global-color-text 5%, #FFFFFF00 75%)
   = linear-gradient(90deg, #000000 5%, rgba(255,255,255,0) 75%) */
.sbi-why__col-right {
  flex: 0 0 50%;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 300px;
}

/* Overlay exacto de la referencia: negro opaco 5% → transparente 75% */
.sbi-why__col-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sbi-black) 5%, rgba(255,255,255,0) 75%);
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   STEPS / CÓMO FUNCIONA  (ref: 5b919760)
   padding: 7em 0 | flex row, justify: space-between
   Col izq (74f35c83): 50%, padding 3em 5em 3em 1em, bg_img_2.png bottom right
   Col der (47df17c0): 50%, grid 2×1 con gap 10px
   Iconos: inline-start (fila: icono + título en misma línea), font-size 40px
═══════════════════════════════════════════════════════════════ */
.sbi-steps {
  padding: 7em 0;
  background: var(--sbi-white);
  overflow: visible;
}

.sbi-steps__inner {
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding-left: 2rem;
  padding-right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  /* overflow visible para que la 2ª imagen sobresalga */
  overflow: visible;
}

/* Col izquierda (ref: 74f35c83)
   width: 50% | padding: 3em 5em 3em 1em
   bg_img_2.png bottom right 100px */
.sbi-steps__col-left {
  flex: 0 0 50%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1.5rem;
  padding: 3em 5em 3em 1em;
  background-image: url('https://sebandainsurancefranchise4.com/wp-content/uploads/2026/05/bg_img_2.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 100px auto;
}

.sbi-steps__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  color: var(--sbi-black);
}

.sbi-steps__subtitle {
  font-size: 1rem;
  color: var(--sbi-gray-text);
  margin: 0;
}

.sbi-steps__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Step item: icon-box position-inline-start
   (icono + cuerpo en fila, align-items: start, gap: 10px) */
.sbi-step-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* Icono: view-default, fill accent #9cfe00, font-size 40px
   (ref: 49eeda2e, 0132e1e, d4c87a9 → .elementor-icon font-size:40px) */
.sbi-step-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.sbi-step-item__icon svg {
  fill: var(--sbi-green);
  width: 40px;
  height: 40px;
}

/* Título: color secondary (#656565), margin-block-end: 3px */
.sbi-step-item__title {
  font-family: var(--sbi-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sbi-gray-text);
  margin-bottom: 3px;
}

.sbi-step-item__desc {
  font-size: 0.95rem;
  color: var(--sbi-gray-text);
  margin: 0;
  line-height: 1.5;
}

/* Col derecha: grid 2 columnas (ref: 47df17c0)
   Desktop >1024: altura fija 500px = altura imágenes → alineadas, sin hueco.
   ≤1024: align-self stretch → grid hereda altura de la sección →
          al estrechar el texto crece → grid crece → hueco = escalera fluida. */
.sbi-steps__col-right {
  flex: 0 0 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* Desktop: contenedor exactamente igual de alto que las imágenes */
  height: 500px;
  align-self: start;
  align-items: start;
}

/* Imagen 1 (ref: 13293dd8 — height 500px) */
.sbi-steps__img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 14px;
  align-self: start;
}

/* Imagen 2 (ref: 139da547 — align-self flex-end)
   En desktop: celda = 500px, imagen = 500px → sin hueco, alineadas.
   En ≤1024 el override activa stretch → celda crece → imagen baja. */
.sbi-steps__img--end {
  height: 500px;
  align-self: end;
}

/* ════════════════════════════════════════════════════════════
   PRODUCTS  (ref: 6e95ef74)
   padding: 3em 0 | bg: gris claro
   Header: H2 + H3 "Lista de productos"
   Grid 3 col con imagen + texto flotante
═══════════════════════════════════════════════════════════════ */
.sbi-products {
  padding: 3em 0;
}

.sbi-products__inner {
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

.sbi-products__header {
  padding: 2em 2em;
  margin-bottom: 1.5rem;
}

.sbi-products__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0 0 0.5rem;
  color: var(--sbi-black);
}

.sbi-products__subtitle {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
  color: var(--sbi-black);
}

/* Grid 3 columnas (ref: 5257d252 — e-grid) */
.sbi-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Product card (ref: container con imagen + container flotante)
   La imagen es el fondo, el body flota encima con transform hover */
.sbi-product-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sbi-white);
  box-shadow: var(--sbi-shadow);
}

.sbi-product-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.sbi-product-card:hover .sbi-product-card__img {
  transform: scale(1.03);
}

/* Body flotante encima de la imagen.
   En reposo: solo el título es visible (el botón queda debajo del borde inferior).
   translateY(calc(100% - <altura-título>)) oculta el botón.
   Usamos translateY(calc(100% - 3.5rem)) — 3.5rem ≈ altura de una línea de título + padding.
   En hover: sube hasta mostrar el botón completo (translateY(0)). */
.sbi-product-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--sbi-black);
  padding: 1.25rem 1.5rem;
  /* Reposo: desplazado hacia abajo, solo el título asoma */
  transform: translateY(calc(100% - 3.5rem));
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Título visible siempre (blanco sobre negro) */
.sbi-product-card__title {
  color: var(--sbi-white);
}

.sbi-product-card:hover .sbi-product-card__body {
  transform: translateY(0);
}

.sbi-product-card__title {
  font-family: var(--sbi-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
  color: var(--sbi-white);
}

/* ════════════════════════════════════════════════════════════
   FAQ  (ref: 371ed64d)
   padding: 1em 0 2em | bg: blanco (con overlay aaa0003 #f7f7f7)
   Grid 2 col en desktop (ref: 4a7eabc3)
   <details>/<summary> nativo — fiel al Nested Accordion
═══════════════════════════════════════════════════════════════ */
/* Sección FAQ (ref: 371ed64d)
   padding: 1em 0 2em | bg: gris claro
   El header (3680c7f0) tiene bg_img_2.png top left */
.sbi-faq {
  padding: 1em 0 2em;
}

.sbi-faq__inner {
  max-width: var(--sbi-max-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* Header con bg_img_2.png top-left (ref: 3680c7f0 → bg top left, ~140px) */
.sbi-faq__header {
  padding: 2em 2em;
  margin-bottom: 0.5rem;
  background-image: url('https://sebandainsurancefranchise4.com/wp-content/uploads/2026/05/bg_img_2.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 140px auto;
  text-align: center;
}

.sbi-faq__title {
  font-family: var(--sbi-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  color: var(--sbi-black);
}

/* Grid 2 col — cada item su altura natural (ref: 4a7eabc3)
   align-items: start → no fuerza alturas iguales */
.sbi-accordion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0 2em 2em;
  align-items: start;
}

/* Accordion item (ref: 50f466a / 492f379)
   border-radius: 20px (--n-accordion-border-radius)
   padding del trigger: 1em */
.sbi-accordion__item {
  border: 2px solid var(--sbi-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--sbi-white);
  transition: box-shadow var(--sbi-transition), border-color var(--sbi-transition);
  display: flex;
  flex-direction: column;
}
.sbi-accordion__item[open] {
  border: 0px;
}

.sbi-accordion__trigger {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1em;
  cursor: pointer;
  font-family: var(--sbi-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sbi-black);
  background: var(--sbi-white);
  /* Sin border-radius propio — lo hereda del item padre con overflow:hidden */
  border-radius: 0;
  transition: background var(--sbi-transition), color var(--sbi-transition);
}
.sbi-accordion__trigger::-webkit-details-marker { display: none; }
.sbi-accordion__trigger::marker { display: none; }
.sbi-accordion__trigger:hover { background: var(--sbi-gray-light); }
/* Item abierto: trigger negro con texto verde, sin radius propio */
.sbi-accordion__item[open] > .sbi-accordion__trigger {
  background: var(--sbi-black);
  color: var(--sbi-green);
  border-radius: 20px;
}



.sbi-accordion__trigger-text { flex: 1; }

/* Icono +/- (ref: círculo verde con borde negro fino, SVG negro dentro)
   Ref: width/height ≈ 28px, border: 1px solid #000 */
.sbi-accordion__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* En item abierto: icono con borde verde (se invierte sobre fondo negro) */

/* Mostrar/ocultar los SVGs según el estado */
.sbi-accordion__icon--open { display: none; }
.sbi-accordion__icon--open svg { fill: var(--sbi-green) }

.sbi-accordion__icon--closed { display: flex; }
.sbi-accordion__icon--closed svg { fill: var(--sbi-black) }

.sbi-accordion__item[open] .sbi-accordion__icon--open { display: flex; }
.sbi-accordion__item[open] .sbi-accordion__icon--closed { display: none; }

.sbi-accordion__body {
  border-top: 1px solid var(--sbi-border);
}

.sbi-accordion__content {
  padding: 1rem 1.5rem 1.5rem;
  color: var(--sbi-gray-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sbi-accordion__content p { margin: 0; }

/* ════════════════════════════════════════════════════════════
   CTA FINAL  (ref: 43494a20)
   padding: 5em 0 | bg: imagen + overlay oscuro
   flex col, align center, text center
═══════════════════════════════════════════════════════════════ */
.sbi-cta-final {
  padding: 5em 0;
  background-color: var(--sbi-black);
  /* background-image se aplica vía inline style en el elemento */
  background-size: cover;
  background-position: center;
  color: var(--sbi-white);
  position: relative;
  overflow: hidden;
}

/* Overlay exacto de la referencia: #000 0% → rgba(1,17,103,0.1) 100%
   ref: linear-gradient(90deg, var(--e-global-color-text) 0%, #0111671A 100%)
   = negro → azul muy transparente al 10% */
.sbi-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--sbi-black) 0%, rgba(1,17,103,0.1) 100%);
  z-index: 0;
}

/* Inner col izquierda (ref: 68df30f1)
   El contenedor externo (43494a20) es flex-row con justify:flex-start.
   El inner (68df30f1) ocupa width:50% en desktop, padding 2em.
   En móvil pasa a 100% de ancho. */
.sbi-cta-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 50%;                       /* 50% del ancho total en desktop */
  padding: 2em 2em;
  gap: 1.5rem;
}

.sbi-cta-final__title {
  font-family: var(--sbi-font);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--sbi-white);
  line-height: 1.2;
}

.sbi-cta-final__text {
  color: var(--sbi-white);
  font-family: var(--sbi-font-alt);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
}

/* Bloque teléfono inferior */
.sbi-cta-final__support {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.sbi-cta-final__support-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.sbi-cta-final__support-text {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
.sbi-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  /* Visible por defecto hasta que JS aplique IntersectionObserver */
  will-change: opacity, transform;
}
.sbi-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) !important;
}

.sbi-reveal--left  { transform: translateX(-24px); }
.sbi-reveal--right { transform: translateX(24px); }

.sbi-reveal[data-delay="1"] { transition-delay: 0.1s; }
.sbi-reveal[data-delay="2"] { transition-delay: 0.2s; }
.sbi-reveal[data-delay="3"] { transition-delay: 0.3s; }
.sbi-reveal[data-delay="4"] { transition-delay: 0.4s; }
.sbi-reveal[data-delay="5"] { transition-delay: 0.5s; }
.sbi-reveal[data-delay="6"] { transition-delay: 0.6s; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 1024px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sbi-hero__content { flex: 0 0 55%; }
  .sbi-hero__form-col { width: clamp(300px, 45%, 460px); }

  .sbi-products__grid { grid-template-columns: repeat(2, 1fr); }

  .sbi-why__inner { min-height: 460px; }
  .sbi-why__col { flex: 0 0 50%; padding: 3em 2em 3em 2rem; }
  .sbi-why__cards { grid-template-columns: repeat(2, 1fr); }
  .sbi-steps { padding: 3em 0; }
  .sbi-products { padding: 2em 0; }
  .sbi-savings { padding: 1em 0 5em; }
  .sbi-faq { padding: 1em 0 2em; }
  .sbi-cta-final { padding: 3em 0; }

  /* Steps ≤1024: grid pasa a stretch → escalera activada (ref: img height 400px) */
  .sbi-steps__col-left { flex: 0 0 50%; padding: 2em 3em 2em 1em; background-size: 50px auto; }
  .sbi-steps__col-right {
    flex: 0 0 50%;
    height: auto;
    align-self: stretch;
    align-items: stretch;
  }
  .sbi-steps__img { height: 400px; }
  .sbi-steps__img--end { height: 400px; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 767px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hero mobile (ref: 3a65c220 @max-767)
     flex-direction: column-reverse → formulario arriba, texto abajo
     overlay-opacity: 0 → imagen sin gradiente
     bg: 800px auto top center */
  .sbi-hero {
    min-height: auto;
  }
  .sbi-hero__bg {
    background-size: 800px auto !important;
    background-position: top center !important;
  }
  .sbi-hero__overlay {
    opacity: 0;
  }
  .sbi-hero__inner {
    flex-direction: column-reverse;
    padding: 0;
  }
  .sbi-hero__content {
    flex: 1 1 auto;
    max-width: 100%;
    padding: 1em 1em 2em;
  }
  .sbi-hero__form-col {
    width: 100%;
    padding: 0;
  }
  /* H1: padding igual en mobile (ref: 57a789c8 @max-767 padding:1% 1% 1% 1%) */
  .sbi-hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    align-self: auto;
    width: 100%;
  }
  /* Trust items: font-size 16px en mobile */
  .sbi-hero__tag-item { font-size: 16px; }

  /* H2 mobile: 25px (ref: kit-19 @max-767) */
  .sbi-reviews__title,
  .sbi-savings__title,
  .sbi-why__title,
  .sbi-steps__title,
  .sbi-products__title,
  .sbi-faq__title,
  .sbi-cta-final__title {
    font-size: 25px;
    line-height: 1.4;
  }

  /* Reviews mobile: col apilada, botón alineado izquierda, carousel sin corte */
  .sbi-reviews__layout { flex-direction: column; }
  .sbi-reviews__header {
    width: 100%;
    padding-right: 0;
    align-items: flex-start;   /* botón alineado izquierda */
  }
  .sbi-reviews__header .sbi-btn {
    align-self: flex-start;    /* no se estira al 100% */
    width: auto;
  }
  .sbi-reviews__carousel-wrap {
    padding: 1em 0;
    width: 100%;
    overflow: visible;         /* el carousel no se corta */
  }

  /* Savings: 1 col */
  .sbi-savings__grid { grid-template-columns: 1fr; }
  .sbi-savings { padding: 1em 0 3em; }

  /* Why: col apilada */
  .sbi-why__inner { flex-direction: column; min-height: auto; }
  .sbi-why__col { flex: 1 1 auto; padding: 2em 1.5rem; }
  .sbi-why__cards { grid-template-columns: 1fr; }
  .sbi-why__col-right { min-height: 280px; }

  /* Why cards: centrado en móvil (ref: Elementor mobile) */
  .sbi-why__card { text-align: center; align-items: center; }
  .sbi-counter__number { justify-content: center; }
  .sbi-counter__label { text-align: center; }
  .sbi-iconbox { align-items: center; text-align: center; }
  .sbi-iconbox__content { text-align: center; }

  /* Steps móvil: imágenes ARRIBA, texto ABAJO.
     DOM: col-left (texto) antes que col-right (imágenes).
     column-reverse invierte el orden visual → imágenes primero. */
  .sbi-steps__inner { flex-direction: column-reverse; flex-wrap: wrap; padding-left: 1.5rem; padding-right: 1.5rem; }
  /* Texto: ocupa 100% del ancho, alineado a la izquierda */
  .sbi-steps__col-left { flex: 0 0 100%; width: 100%; min-width: auto; padding: 2em 1.5rem; background-size: 50px auto; text-align: left; }
  .sbi-steps__col-right {
    flex: 0 0 100%;
    width: 100%;
    align-self: auto;
    /* Grid 2 col en móvil — imágenes lado a lado */
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }
  .sbi-steps__img { height: 160px; }
  .sbi-steps__img--end { height: 160px; align-self: auto; }
  .sbi-steps { padding: 2em 0; }

  /* Steps items: alineados a la izquierda en móvil */
  .sbi-step-item { flex-direction: row; align-items: flex-start; text-align: left; }
  .sbi-step-item__body { text-align: left; }

  /* Botones CTA de Why y Steps: izquierda en móvil */
  .sbi-why__cta { text-align: center; }
  .sbi-steps__col-left .sbi-reveal { text-align: left; }

  /* Products: 1 col */
  .sbi-products__grid { grid-template-columns: 1fr; }
  .sbi-products { padding: 2em 0; }
  .sbi-products__header { padding: 1em 0; }

  /* FAQ: 1 col */
  .sbi-accordion { grid-template-columns: 1fr; }
  .sbi-faq__header { padding: 1em 0; }
  .sbi-accordion { padding: 0; }
  .sbi-faq { padding: 1em 0 2em; }

  .sbi-cta-final { padding: 2em 0; }
  /* Móvil: inner ocupa 100% del ancho, alineado a la IZQUIERDA */
  .sbi-cta-final__inner { width: 100%; align-items: flex-start; text-align: left; }
  .sbi-cta-final__support { align-items: flex-start; text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤ 480px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sbi-savings__grid { grid-template-columns: 1fr; }
  .sbi-products__grid { grid-template-columns: 1fr; }
}