/* ============================================================
   Sello Pro Integridad – Estilos globales de widgets
   ============================================================ */

/* ── Reset global – sin borde, sin fondo involuntario ── */
[class*="elementor-widget-sello_"],
[class*="elementor-widget-sello_"] > .elementor-widget-container {
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Wrappers externos de cada widget: transparentes */
.spi-iniciativa-wrap,
.spi-beneficios-wrap,
.spi-proceso-wrap,
.spi-razones-wrap,
.spi-participar-wrap,
.spi-grafico-wrap,
.spi-grafico-wrap,
.spi-tabla-outer,
.spi-stats-wrap,
.spi-faq-wrap,
.spi-hero-wrap > *,
.spi-cta-wrap > * {
  /* no background aquí — cada sub-elemento define el suyo */
}

/* Imágenes sin borde, sin sombra en todos nuestros widgets */
[class*="elementor-widget-sello_"] img {
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
  max-width:  100%;
}

/* Íconos: sin fondo de círculo (transparente por defecto, configurable en panel) */
.spi-bene-icon-wrap,
.spi-proc-icon-wrap,
.spi-raz-icon-wrap,
.spi-tb-icon-circle {
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ── Paleta ── */
:root {
  --spi-navy:        #1B2C4E;
  --spi-teal:        #2A7A78;
  --spi-teal-light:  #DFF0EE;
  --spi-gold:        #F5B832;
  --spi-text:        #333333;
  --spi-card-bg:     #FFFFFF;
  --spi-card-radius: 16px;
  --spi-card-shadow: 0 2px 16px rgba(0,0,0,0.07);
  --spi-divider:     #E0E0E0;
}

/* ============================================================
   Widget 1 – Iniciativa 2 Columnas
   ============================================================ */

.spi-iniciativa-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  font-family: inherit;
}

/* ── Columna base ── */
.spi-col {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Texto introductorio ── */
.spi-intro-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--spi-text);
}

.spi-intro-text strong {
  color: var(--spi-navy);
  font-weight: 700;
}

/* ── Lista con checkmarks ── */
.spi-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spi-check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--spi-divider);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--spi-text);
}

.spi-check-item:last-child {
  border-bottom: none;
}

.spi-check-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--spi-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.spi-check-icon svg {
  width: 28px;
  height: 28px;
}

/* ── Columna derecha – interior ── */
.spi-right-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spi-right-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.spi-sello-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1.35;
  margin: 0;
  flex: 1;
  min-width: 140px;
}

/* ── Logo + badge ── */
.spi-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.spi-logo-img {
  max-width: 160px;
  height: auto;
  display: block;
}

.spi-sector-badge {
  display: inline-block;
  background: #F0F0F0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--spi-navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Lista con estrellas ── */
.spi-starlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spi-star-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--spi-text);
}

.spi-star-icon {
  color: var(--spi-gold);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}

/* ── Caja de categorías ── */
.spi-categories-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--spi-teal-light);
  border-radius: 10px;
  padding: 14px 18px;
  flex-wrap: wrap;
}

.spi-cat-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--spi-teal);
  display: flex;
  align-items: center;
}

.spi-cat-icon svg {
  width: 18px;
  height: 18px;
}

.spi-cat-label {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--spi-teal);
  font-size: 14px;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid rgba(42, 122, 120, 0.3);
}

/* ── Chips individuales de categorías ── */
.spi-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.spi-cat-chip {
  background: #FFFFFF;
  color: var(--spi-navy);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ============================================================
   Widget 2 – Tarjetas Beneficios
   ============================================================ */

.spi-beneficios-wrap {
  display: grid;
  gap: 20px;
}

.spi-beneficios-wrap.spi-cols-3 { grid-template-columns: repeat(3, 1fr); }
.spi-beneficios-wrap.spi-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ── Tarjeta ── */
.spi-bene-card {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  padding: 28px 22px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
}

/* ── Ícono (sin círculo, sin fondo, imagen grande) ── */
.spi-bene-icon-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 0;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.spi-bene-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.spi-bene-icon-placeholder {
  background: #ECEEF6;
}

/* ── Cuerpo de la tarjeta ── */
.spi-bene-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-top: 4px;
}

.spi-bene-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1.25;
  margin: 0;
}

.spi-bene-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* ============================================================
   Widget 3 – Timeline de Proceso
   ============================================================ */

.spi-proceso-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Fila de burbujas numéricas ── */
.spi-proc-numbers-row {
  display: grid;
  grid-template-columns: repeat(var(--spi-proc-cols, 5), 1fr);
  gap: 14px;
  padding: 0;
}

.spi-proc-num-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.spi-proc-num-item:last-child {
  /* igual que el resto: centrado en su celda */
}

/* Conector dibujado como pseudo-elemento desde el centro de cada celda
   hasta el centro de la siguiente (cruzando el gap de 14px) */
.spi-proc-num-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  right: calc(-50% - 14px);
  height: 0;
  border-top: 2px dashed #C8CBD8;
  z-index: 0;
}

/* Los <span> de conector del HTML quedan ocultos; los pseudo-elementos los reemplazan */
.spi-proc-connector {
  display: none;
}

.spi-proc-bubble {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}

/* ── Fila de tarjetas ── */
.spi-proc-cards-row {
  display: grid;
  grid-template-columns: repeat(var(--spi-proc-cols, 5), 1fr);
  gap: 14px;
  align-items: stretch;
}

/* ── Tarjeta individual ── */
.spi-proc-card {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  gap: 0;
}

/* ── Ícono (sin círculo, sin fondo, imagen grande) ── */
.spi-proc-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 0;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 16px;
  flex-shrink: 0;
  overflow: visible;
}

.spi-proc-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Título ── */
.spi-proc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--spi-navy);
  text-transform: uppercase;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0 16px 10px;
  text-align: center;
}

/* ── Acento de color bajo el título ── */
.spi-proc-accent {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin: 0 auto 12px;
  flex-shrink: 0;
}

/* ── Contenido (viñetas / párrafo) ── */
.spi-proc-content {
  flex: 1;
  width: 100%;
  padding: 0 16px 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  color: var(--spi-text);
  box-sizing: border-box;
}

.spi-proc-content ul,
.spi-proc-content ol {
  margin: 0;
  padding-left: 16px;
}

.spi-proc-content li {
  margin-bottom: 6px;
}

.spi-proc-content li:last-child {
  margin-bottom: 0;
}

.spi-proc-content p {
  margin: 0;
}

.spi-proc-content a {
  color: var(--spi-navy);
  text-decoration: underline;
}

/* ── Footer con fecha ── */
.spi-proc-footer {
  width: 100%;
  border-top: 1px solid #EAEAEA;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  background: #FAFAFA;
}

.spi-proc-cal-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--proc-step-color, var(--spi-navy));
  display: flex;
  align-items: center;
}

.spi-proc-cal-icon svg {
  width: 22px;
  height: 22px;
}

.spi-proc-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1.35;
}

/* ============================================================
   Widget 4 – Logo y Razones
   ============================================================ */

.spi-razones-wrap {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  align-items: stretch;
}

/* ── Columna izquierda ── */
.spi-raz-left {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  box-sizing: border-box;
}

.spi-raz-left .spi-raz-quote {
  margin-top: auto;
}

/* Logo */
.spi-raz-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.spi-raz-logo-img {
  max-width: 200px;
  height: auto;
  display: block;
}

.spi-raz-logo-subtitle {
  font-size: 13px;
  color: var(--spi-navy);
  margin: 0;
  font-weight: 500;
}

.spi-raz-badge {
  display: inline-block;
  background: #F0F0F0;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--spi-navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Separador decorativo */
.spi-raz-separator {
  display: flex;
  align-items: center;
  gap: 0;
}

.spi-raz-sep-line {
  flex: 1;
  height: 1px;
  background: #DCDDE6;
}

.spi-raz-sep-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5B6FBF;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Cita */
.spi-raz-quote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: none;
}

.spi-raz-quote-mark {
  font-size: 52px;
  line-height: 0.75;
  color: #CCCED8;
  font-family: Georgia, serif;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

.spi-raz-quote-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--spi-text);
  border-left: 2px solid #DCDDE6;
  padding-left: 14px;
}

.spi-raz-quote-text strong {
  color: var(--spi-navy);
  font-weight: 700;
}

.spi-raz-quote-text a {
  color: var(--spi-navy);
  text-decoration: underline;
}

/* ── Columna derecha – tarjetas razón ── */
.spi-raz-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
}

.spi-raz-right .spi-raz-card {
  flex: 1;
}

.spi-raz-card {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0 20px 20px;
  position: relative;
  overflow: hidden;
}

/* Ícono (sin círculo, sin fondo, imagen grande) */
.spi-raz-icon-wrap {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 0;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.spi-raz-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Cuerpo */
.spi-raz-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 24px;
}

.spi-raz-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1.3;
  margin: 0;
}

.spi-raz-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Acento lateral derecho */
.spi-raz-card-accent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 0 var(--spi-card-radius) var(--spi-card-radius) 0;
}

/* ============================================================
   Widget 5 – Logo y Pasos
   ============================================================ */

.spi-participar-wrap {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  align-items: stretch;
}

/* Columna izquierda – reutiliza .spi-raz-logo-area, .spi-raz-badge, .spi-raz-logo-subtitle */
.spi-part-left {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  box-sizing: border-box;
}

.spi-part-left .spi-part-highlight {
  margin-top: auto;
}

/* Bloque destacado (caja con ícono + texto bold) */
.spi-part-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 10px;
  padding: 14px 16px;
}

.spi-part-hl-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spi-part-hl-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.spi-part-hl-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1.5;
  margin: 0;
}

/* Columna derecha – reutiliza .spi-raz-card y clases derivadas */
.spi-part-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
}

.spi-part-right .spi-raz-card {
  flex: 1;
  align-items: center;
}

/* ============================================================
   Widget 6 – Gráfico de Barras (v2, estructura plana)
   ============================================================ */

.spi-grafico-wrap {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  align-items: stretch;
}

/* ── Tarjeta contenedora del gráfico ── */
.spi-graf2-card {
  background: var(--spi-card-bg);
  border-radius: var(--spi-card-radius);
  box-shadow: var(--spi-card-shadow);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}

.spi-graf2-ylabel {
  font-size: 11.5px;
  color: #777;
  margin: 0;
  line-height: 1.3;
}

/* ── Fila principal: eje Y + (barras + labels X) ── */
.spi-graf2-main {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
}

/* Ticks del eje Y: flex column con space-between, misma altura que el área */
.spi-graf2-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.spi-graf2-yaxis span {
  font-size: 11px;
  color: #888;
  line-height: 1;
}

/* Columna derecha: barras + etiquetas X */
.spi-graf2-plot-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Área de barras: flex row, ítems pegados al fondo */
.spi-graf2-bars-area {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  padding: 0 8px;
  box-sizing: border-box;
}

/* Un grupo de barras (par de barras + label) */
.spi-graf2-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* Par de barras lado a lado */
.spi-graf2-pair {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-end;
}

/* Columna de una barra: valor encima + barra debajo */
.spi-graf2-bc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.spi-graf2-bv {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--spi-navy);
  line-height: 1;
  white-space: nowrap;
}

/* La barra propiamente dicha — altura en px vía JS/inline */
.spi-graf2-bar {
  width: 42px;
  border-radius: 4px 4px 0 0;
  transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  /* height:0 inicial → JS la actualiza al valor correcto */
}

/* Etiquetas eje X */
.spi-graf2-xlabels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 8px 8px 0;
  gap: 8px;
}

.spi-graf2-xlabel {
  font-size: 11.5px;
  color: #555;
  text-align: center;
  line-height: 1.35;
  flex: 1;
}

/* Leyenda */
.spi-graf2-legend {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.spi-graf2-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--spi-navy);
}

.spi-graf2-legend-item i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  font-style: normal;
  flex-shrink: 0;
}

/* Columna de tarjetas (derecha) */
.spi-graf-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
}

.spi-graf-cards .spi-raz-card {
  flex: 1;
}

/* ============================================================
   Widget 7 – Tabla de Costos (grid plano)
   ============================================================ */

.spi-tabla-outer {
  width: 100%;
  overflow-x: auto;          /* scroll horizontal en pantallas pequeñas */
  -webkit-overflow-scrolling: touch;
}

.spi-tb-scroll-hint {
  display: none;
  margin: 8px 0 0;
  font-size: 12px;
  color: #8B93A7;
  text-align: center;
}

/*
 * UN ÚNICO grid contenedor: todos los celdas (cabeceras + datos)
 * son hijos directos de .spi-tabla-flat.
 * grid-template-columns: label-col + 3 columnas de valor
 */
.spi-tabla-flat {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 560px;          /* evita que el grid colapse antes de hacer scroll */
}

/* ── Cabecera: celda vacía + 3 títulos ── */
.spi-tb-spacer {
  /* celda vacía esquina superior izquierda */
}

.spi-tb-colhead {
  font-size: 15px;
  font-weight: 700;
  color: var(--spi-navy);
  text-align: center;
  padding: 0 0 6px;
}

/* ── Celda de etiqueta (columna 1 de cada fila) ── */
.spi-tb-label {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  box-sizing: border-box;
}

.spi-tb-icon-circle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spi-tb-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.spi-tb-row-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Celdas de valor (columnas 2-4) ── */
.spi-tb-val {
  background: #FFFFFF;
  border-radius: 10px;
  text-align: center;
  padding: 14px 8px;
  font-size: 15px;
  color: var(--spi-navy);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.spi-tb-val-bold {
  font-weight: 700;
}

/* Celda que ocupa columnas 2-4 (fila "span") */
.spi-tb-val-span {
  grid-column: 2 / 5;
}

/* ============================================================
   Widget 8 – Panel Propósito
   ============================================================ */

.spi-prop-wrap {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  border-radius: 20px;
  padding: 56px 48px;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

/* ── Columna izquierda ── */
.spi-prop-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spi-prop-title {
  font-weight: 800;
  color: var(--spi-navy);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

/* Acento decorativo: línea + punto */
.spi-prop-accent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}

.spi-prop-accent-line {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
}

.spi-prop-accent-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Cuerpo de texto */
.spi-prop-body {
  color: var(--spi-navy);
  line-height: 1.75;
}

.spi-prop-body strong,
.spi-prop-body b {
  font-weight: 700;
}

.spi-prop-body u {
  text-decoration: underline;
}

.spi-prop-body a {
  color: var(--spi-navy);
}

/* ── Columna derecha ── */
.spi-prop-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

/* Imagen decorativa */
.spi-prop-deco {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.spi-prop-deco-img {
  max-width: 100%;
  max-height: 300px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Logos en la parte inferior */
.spi-prop-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.spi-prop-logo {
  max-height: 48px;
  max-width: 130px;
  height: auto;
  object-fit: contain;
  display: block;
}

.spi-prop-logo-sep {
  display: block;
  width: 1.5px;
  height: 40px;
  background: #B0B8CC;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .spi-beneficios-wrap.spi-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .spi-proc-cards-row             { grid-template-columns: repeat(3, 1fr); }
  /* Especificidad x5 para ganarle al CSS que genera Elementor para el
     control "Ancho columna izquierda":
     ".elementor-2 .elementor-element.elementor-element-<id> .spi-razones-wrap"
     (4 clases, !important). Ambas reglas son !important, así que gana
     la de mayor especificidad sin importar el media query. */
  .spi-razones-wrap.spi-razones-wrap.spi-razones-wrap.spi-razones-wrap.spi-razones-wrap,
  .spi-participar-wrap.spi-participar-wrap.spi-participar-wrap.spi-participar-wrap.spi-participar-wrap,
  .spi-grafico-wrap.spi-grafico-wrap.spi-grafico-wrap.spi-grafico-wrap.spi-grafico-wrap   { grid-template-columns: 1fr !important; }
  .spi-tabla-flat                 { grid-template-columns: 160px repeat(3, 1fr); }
  .spi-raz-card-body               { padding-right: 16px; }
  /* Panel Propósito: el widget se renderiza con flex inline (no grid),
     por lo que hay que forzar el apilado sobre esos estilos inline. */
  .spi-prop-wrap                  { flex-direction: column !important; padding: 36px 28px !important; }
  .spi-prop-left,
  .spi-prop-right                 { flex: 1 1 auto !important; width: 100%; min-width: 0; }
  .spi-prop-right                 { height: auto !important; align-items: center !important; text-align: center; }
  .spi-prop-deco                  { justify-content: center !important; }
  .spi-prop-logos                 { justify-content: center; }
}

@media (max-width: 600px) {
  .spi-iniciativa-wrap,
  .spi-beneficios-wrap.spi-cols-3,
  .spi-beneficios-wrap.spi-cols-2,
  .spi-proc-cards-row {
    grid-template-columns: 1fr;
  }
  .spi-proc-numbers-row { display: none; }
  .spi-graf2-bar        { width: 32px; }
  /* Hero responsive */
  .spi-hero-content     { padding: 48px 24px !important; }
  /* Stats responsive */
  .spi-stats-row        { flex-direction: column; }
  .spi-stat-item        { border-right: none !important; border-bottom: 1.5px solid #DCE3F0; }
  .spi-stat-item:last-child { border-bottom: none; }
  /* CTA responsive */
  .spi-cta-wrap         { border-radius: 0 !important; }
  /* Logo y Razones / Logo y Pasos responsive */
  .spi-raz-left,
  .spi-part-left        { padding: 24px 20px; }
  .spi-raz-logo-img     { max-width: 140px; }
  .spi-raz-quote-mark   { font-size: 34px; }
  .spi-raz-quote-text   { font-size: 13.5px; padding-left: 10px; }
  .spi-raz-card         { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .spi-raz-icon-wrap    { width: 48px; height: 48px; }
  .spi-raz-card-body    { padding-right: 0; flex-basis: 100%; }
  .spi-part-highlight   { flex-wrap: wrap; padding: 12px 14px; }
  .spi-part-hl-icon     { width: 28px; height: 28px; }
  .spi-part-hl-icon img { width: 24px; height: 24px; }
  /* Tabla de costos: en mobile pasa a modo "tarjetas apiladas" (una
     fila = una tarjeta, todo se ve bajando, sin scroll horizontal).
     Esos estilos van inline en widget-tabla.php con selector #id para
     poder ganarle a "display:table-cell !important" con más
     especificidad. Acá solo queda ocultar el hint de scroll, que ya
     no aplica en este breakpoint. */
  .spi-tb-scroll-hint    { display: none; }
  .spi-tabla-outer       { overflow-x: visible; }
  .spi-tb-row-name       { font-size: 13.5px !important; }
  /* Panel Propósito responsive */
  .spi-prop-wrap        { padding: 28px 20px !important; gap: 24px !important; border-radius: 14px !important; }
  .spi-prop-title       { font-size: 30px !important; }
  .spi-prop-body        { font-size: 15px !important; }
  .spi-prop-deco img    { max-height: 180px !important; }
  .spi-prop-logos       { flex-wrap: wrap; justify-content: center; gap: 12px !important; }
  /* Ancho y alto fijos e iguales para ambos logos: al usar max-height/
     max-width cada imagen queda a una escala distinta según su propio
     aspect ratio (una se ve más chica que la otra). Con width/height
     fijos + object-fit:contain (ya viene inline en el <img>) ambas
     ocupan la misma caja visual. */
  .spi-prop-logo         { width: 100px !important; height: 40px !important; max-width: 100px !important; max-height: 40px !important; }
}

/* ============================================================
   Widgets nuevos – Hero, Estadísticas, FAQ, CTA (v1.3.0)
   ============================================================ */

/* ── Hero hover estados ── */
.spi-hero-btn:hover { opacity: 0.88; }

/* ── Estadísticas ── */
.spi-stats-wrap      { font-family: inherit; }
.spi-stat-item       { transition: transform .2s; }
.spi-stat-item:hover { transform: translateY(-2px); }

/* ── FAQ ── */
.spi-faq-wrap        { font-family: inherit; }
.spi-faq-q:hover     { opacity: 0.85; }
.spi-faq-item        {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  transition: background .2s, box-shadow .2s;
}
.spi-faq-item.spi-faq-open {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.spi-faq-a           { transition: max-height .3s ease, padding .3s ease; }
.spi-faq-a *         { margin-top: 0; }
.spi-faq-a p:last-child { margin-bottom: 0; }

/* ── CTA ── */
.spi-cta-wrap        { font-family: inherit; }
.spi-cta-btn:hover   { opacity: 0.88; }

/* ── Proceso burbujas más grandes (CSS fallback) ── */
.spi-proc-bubble {
  width: 60px;
  height: 60px;
  min-width: 60px;
  font-size: 26px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}