.elementor-829 .elementor-element.elementor-element-e1152d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-e1152d6:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-e1152d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://swm.omardiaz.net/wp-content/uploads/2026/06/swm_pn_hero.webp");background-position:top right;background-repeat:no-repeat;background-size:cover;}.elementor-829 .elementor-element.elementor-element-e1152d6::before, .elementor-829 .elementor-element.elementor-element-e1152d6 > .elementor-background-video-container::before, .elementor-829 .elementor-element.elementor-element-e1152d6 > .e-con-inner > .elementor-background-video-container::before, .elementor-829 .elementor-element.elementor-element-e1152d6 > .elementor-background-slideshow::before, .elementor-829 .elementor-element.elementor-element-e1152d6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-829 .elementor-element.elementor-element-e1152d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(270deg, #00000000 0%, #000000E3 70%);}.elementor-829 .elementor-element.elementor-element-211f215{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-829 .elementor-element.elementor-element-de40041.elementor-element{--align-self:flex-start;}.elementor-829 .elementor-element.elementor-element-de40041 .elementor-heading-title{font-family:"Oswald", Sans-serif;font-size:100px;font-weight:700;text-transform:uppercase;line-height:1.1em;letter-spacing:-1px;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-829 .elementor-element.elementor-element-31e28bc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;text-decoration:none;line-height:1.7em;letter-spacing:0px;}.elementor-829 .elementor-element.elementor-element-31e28bc.elementor-element{--align-self:flex-start;}.elementor-829 .elementor-element.elementor-element-6768d78{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-6768d78.elementor-element{--align-self:flex-start;}.elementor-829 .elementor-element.elementor-element-1d8e045{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-1d8e045:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-1d8e045 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-829 .elementor-element.elementor-element-ffaf12c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-ed11fdd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-736be41{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-eea5910{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-eea5910:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-eea5910 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-829 .elementor-element.elementor-element-38a697c{margin:-5% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-64b8c20{margin:-5% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0% 0% 10% 0%;}.elementor-829 .elementor-element.elementor-element-5bd772a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-5bd772a > .elementor-shape-top svg, .elementor-829 .elementor-element.elementor-element-5bd772a > .e-con-inner > .elementor-shape-top svg{height:0px;}.elementor-829 .elementor-element.elementor-element-e546ae3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-1ea74a4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-1ea74a4 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-829 .elementor-element.elementor-element-af71e64{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-829 .elementor-element.elementor-element-af71e64:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-af71e64 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F4F5;}.elementor-829 .elementor-element.elementor-element-0f8c9a4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-829 .elementor-element.elementor-element-3124024{--display:flex;}.elementor-829 .elementor-element.elementor-element-e44a04a{margin:-5% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-829 .elementor-element.elementor-element-1d8e045{--content-width:1200px;}.elementor-829 .elementor-element.elementor-element-ed11fdd{--content-width:1200px;}.elementor-829 .elementor-element.elementor-element-eea5910{--content-width:1200px;}.elementor-829 .elementor-element.elementor-element-af71e64{--content-width:1200px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-829 .elementor-element.elementor-element-de40041 .elementor-heading-title{font-size:15px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-829 .elementor-element.elementor-element-31e28bc{font-size:15px;}}@media(max-width:767px){.elementor-829 .elementor-element.elementor-element-211f215{--padding-top:72px;--padding-bottom:72px;--padding-left:24px;--padding-right:24px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-829 .elementor-element.elementor-element-de40041 .elementor-heading-title{font-size:14px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-829 .elementor-element.elementor-element-31e28bc{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-1d8e045 *//* ============================================================
   BLOQUE 5 — Programs Banner
   Archivo: swm-block-cierre.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.
   ============================================================ */

:root {
  --swm-cierre-light:       #F3F4F6;
  --swm-cierre-accent-soft: rgba(0, 193, 169, 0.10);
}


/* ─── Sección ──────────────────────────────────────────────── */
.swm-cierre-programs {
  width: 100%;
  background-color: var(--swm-white);
  position: relative;
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-cierre-programs::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71,85,105,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ─── Wrapper ──────────────────────────────────────────────── */
.swm-cierre-programs-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Grid 4 columnas ──────────────────────────────────────── */
.swm-cierre-programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}


/* ─── Card ─────────────────────────────────────────────────── */
.swm-cierre-card {
  background: var(--swm-paper) !important;
  border-radius: var(--swm-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--swm-shadow-card);
}

.swm-cierre-card.is-visible {
  transition:
    transform  0.4s var(--swm-ease),
    box-shadow 0.4s var(--swm-ease);
}

.swm-cierre-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--swm-shadow-hover);
}

/* Imagen superior */
.swm-cierre-card__img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  flex-shrink: 0;
  transition: transform 0.7s var(--swm-ease);
}

.swm-cierre-card:hover .swm-cierre-card__img {
  transform: scale(1.04);
}

/* Cuerpo de la card */
.swm-cierre-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Número de programa */
.swm-cierre-card__num {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--swm-accent) !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.swm-cierre-card__num::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--swm-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Título de la card */
.swm-cierre-card__title {
  font-family: var(--swm-font-title) !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-slate) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
}

/* Texto de la card */
.swm-cierre-card__text {
  font-family: var(--swm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--swm-slate-muted) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex: 1;
  margin: 0 0 20px !important;
}

/* Link "Ver programa →" */
.swm-cierre-card__link {
  font-family: var(--swm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--swm-accent) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  transition: gap 0.25s ease, color 0.25s ease;
}

.swm-cierre-card__link:hover {
  gap: 10px;
  color: var(--swm-accent-dark) !important;
}

.swm-cierre-card__link-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.swm-cierre-card__link:hover .swm-cierre-card__link-arrow {
  transform: translateX(3px);
}


/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .swm-cierre-programs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .swm-cierre-programs-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed11fdd *//* ============================================================
   BLOQUE 2 — Statistics Bento Grid
   Archivo: swm-block-stats.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado (página "Por qué niñas")

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.

   NOTA: Este bloque conserva alineación izquierda en el header
   intencionalmente — es el único caso especial del sitio.
   ============================================================ */


/* ─── Sección ──────────────────────────────────────────────── */
.swm-stats-section {
  width: 100%;
  background-color: var(--swm-paper);
  position: relative;
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71, 85, 105, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}


/* ─── Inner wrapper ────────────────────────────────────────── */
.swm-stats-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Header — alineación izquierda (caso especial) ────────── */
.swm-stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

/* Eyebrow izquierdo */
.swm-stats-header .swm-eyebrow {
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* Título — usa escala global h2 */
.swm-stats-header__title {
  font-family: var(--swm-font-title) !important;
  font-size: var(--swm-text-h2) !important;    /* clamp(32px, 4vw, 52px) */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-brand-purple) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.swm-stats-header__title em {
  font-style: normal !important;
  color: var(--swm-slate) !important;
  opacity: 0.45;
}

/* Nota lateral derecha */
.swm-stats-header__note {
  font-family: var(--swm-font-body) !important;
  font-size: var(--swm-text-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1.5 !important;
  max-width: 260px;
  text-align: right;
  flex-shrink: 0;
  padding-bottom: 4px;
  margin: 0 !important;
}


/* ─── Bento Grid ───────────────────────────────────────────── */
.swm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* ─── Card base ────────────────────────────────────────────── */
.swm-stats-card {
  border-radius: var(--swm-radius-card);
  padding: 48px 44px 44px;
  position: relative;
  overflow: hidden;
}


/* ─── Cards blancas ────────────────────────────────────────── */
.swm-stats-card--stat {
  background: var(--swm-white) !important;
  box-shadow: var(--swm-shadow-card);
  transition: transform var(--swm-transition), box-shadow var(--swm-transition);
}

.swm-stats-card--stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--swm-shadow-hover);
}

/* Esquina decorativa */
.swm-stats-card--stat::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 0 32px 0 80px;
  background: var(--swm-accent);
  opacity: 0.12;
  transition: opacity var(--swm-transition), transform var(--swm-transition);
}

.swm-stats-card--stat:hover::before {
  opacity: 0.22;
  transform: scale(1.15);
}


/* ─── Source tag ───────────────────────────────────────────── */
.swm-stats-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.swm-stats-source__text {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1 !important;
  margin: 0 !important;
}


/* ─── Número gigante ───────────────────────────────────────── */
.swm-stats-number {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(4.5rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  color: var(--swm-accent) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
  display: inline-block;
  position: relative;
}


/* ─── Descripción ──────────────────────────────────────────── */
.swm-stats-desc {
  font-family: var(--swm-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}


/* ─── Card oscura (full-width) ─────────────────────────────── */
.swm-stats-card--context {
  grid-column: 1 / -1;
  background: var(--swm-slate) !important;
  box-shadow: 0 24px 60px rgba(71, 85, 105, 0.20);
  padding: 56px 72px;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Comilla decorativa */
.swm-stats-card--context::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 48px;
  font-family: var(--swm-font-title);
  font-size: 240px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Barra vertical de acento */
.swm-stats-context__strip {
  width: 4px;
  min-height: 80px;
  align-self: stretch;
  background: var(--swm-accent);
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.85;
}

.swm-stats-context__body {
  flex: 1;
}


/* ─── Eyebrow en card oscura ───────────────────────────────── */
.swm-stats-card--context .swm-eyebrow__label {
  color: rgba(244, 244, 245, 0.45) !important;
  font-family: var(--swm-font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
}


/* ─── Texto de contexto ────────────────────────────────────── */
.swm-stats-context__text {
  font-family: var(--swm-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--swm-paper) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
}

.swm-stats-context__text strong {
  font-weight: 600 !important;
  color: var(--swm-white) !important;
}


/* ─── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 960px) {
  .swm-stats-grid          { grid-template-columns: 1fr 1fr; }
  .swm-stats-card--context {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 44px;
  }
  .swm-stats-context__strip {
    width: 40px;
    min-height: 4px;
    align-self: auto;
  }
  .swm-stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
  }
  .swm-stats-header__note {
    text-align: left;
    max-width: 100%;
  }
}


/* ─── Responsive — Mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  .swm-stats-grid          { grid-template-columns: 1fr; }
  .swm-stats-card          { padding: 36px 32px 32px; }
  .swm-stats-card--context { padding: 36px 32px; }
  .swm-stats-card--context::before {
    font-size: 160px;
    top: -10px;
    left: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-64b8c20 *//* ============================================================
   BLOQUE 3 — Fomentamos
   Archivo: swm-block-fomentamos.css
   Dónde va: CSS personalizado de esta PÁGINA en Elementor
             (ícono hamburguesa → Configuración de página → CSS personalizado)

   REQUIERE:  swm-global.css  (tokens, fuentes, keyframes, .swm-eyebrow,
                                .swm-reveal ya definidos)
   JS:        Acordeón "Saber más" — ver script al final de esta entrega.
              swm-global.js observa .swm-reveal — no se necesita JS nuevo
              para esa parte.

   VARIABLES PROPIAS DE ESTE BLOQUE (no duplican el global):
   Solo --swm-fomentamos-accent-soft, que es el rgba del ícono bullet.
   Todo lo demás usa var(--swm-*) del global.

   CHANGELOG DE ESTA VERSIÓN:
   · Eliminado: .swm-fomentamos-row-num (badge de número 01-04)
   · Eliminado: .swm-fomentamos-img-badge (badge sobre la foto)
   · Cambiado: .swm-fomentamos-row de align-items:center → flex-start
     (crítico: evita que la foto se mueva cuando el texto crece)
   · Agregado: acordeón "Saber más" (.swm-fomentamos-bullets-extra,
     .swm-fomentamos-toggle)
   ============================================================ */

:root {
  /* Única variable local — versión rgba del acento para el bg del ícono */
  --swm-fomentamos-accent-soft: rgba(0, 193, 169, 0.08);
}


/* ─── Sección ──────────────────────────────────────────────── */
.swm-fomentamos-section {
  width: 100%;
  background-color: var(--swm-white);
  padding: 120px 40px;
  overflow: hidden;
}

/* ─── Inner wrapper ────────────────────────────────────────── */
.swm-fomentamos-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Header centrado ──────────────────────────────────────── */
.swm-fomentamos-header {
  text-align: center;
  margin-bottom: 88px;
}

/*
   El eyebrow del header lleva líneas en AMBOS lados.
   Usamos .swm-eyebrow del global + el modificador de bloque
   .swm-eyebrow--centered para añadir la segunda línea.
   El global ya define .swm-eyebrow__line y .swm-eyebrow__label.
*/
.swm-fomentamos-header .swm-eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}

/* Título principal */
.swm-fomentamos-title {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(3rem, 7vw, 5.5rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-black) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
  position: relative;
  display: inline-block;
}

/* Subrayado de acento centrado bajo el título */
.swm-fomentamos-title::after {
  /* content: ''; */
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: var(--swm-accent);
  border-radius: 2px;
}

/* Subtítulo */
.swm-fomentamos-subtitle {
  font-family: var(--swm-font-body) !important;
  font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  max-width: 800px;
  margin: 32px auto 0 !important;
}

/* ─── Grid de filas alternadas ─────────────────────────────── */
.swm-fomentamos-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.swm-fomentamos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;   /* CAMBIO: antes era 'center'.
                                Crítico para que la foto no se mueva
                                cuando el texto crece con el acordeón. */
}

/* Layout inverso: imagen a la derecha */
.swm-fomentamos-row--reverse .swm-fomentamos-row__image {
  order: 2;
}
.swm-fomentamos-row--reverse .swm-fomentamos-row__content {
  order: 1;
}

/* ─── Celda imagen ─────────────────────────────────────────── */
.swm-fomentamos-row__image {
  position: relative;
}

/* Dot-grid decorativo detrás de la imagen */
.swm-fomentamos-row__image::before {
  content: '';
  position: absolute;
  inset: -16px -16px 16px 16px;
  border-radius: var(--swm-radius-card);
  background-image: radial-gradient(
    circle,
    rgba(0, 193, 169, 0.18) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  z-index: 0;
}

.swm-fomentamos-row--reverse .swm-fomentamos-row__image::before {
  inset: -16px 16px 16px -16px;
}

/* Contenedor de imagen con radio y sombra */
.swm-fomentamos-img-wrap {
  position: relative;
  border-radius: var(--swm-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  aspect-ratio: 4 / 3;
  z-index: 1;
}

.swm-fomentamos-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  transition: transform 0.8s var(--swm-ease);
}

.swm-fomentamos-img-wrap:hover img {
  transform: scale(1.04);
}

/* ─── Celda contenido ──────────────────────────────────────── */
.swm-fomentamos-row__content {
  display: flex;
  flex-direction: column;
}

/* Título de fila */
.swm-fomentamos-row-title {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-black) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 32px !important;
}

/* ─── Lista de bullets ─────────────────────────────────────── */
.swm-fomentamos-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 !important;
  margin: 0 !important;
}

.swm-fomentamos-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Ícono check circular en mint */
.swm-fomentamos-bullet__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swm-fomentamos-accent-soft);
  border: 1.5px solid var(--swm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.swm-fomentamos-bullet__icon svg {
  width: 10px;
  height: 10px;
  stroke: var(--swm-accent);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Texto del bullet — anular uppercase del tema */
.swm-fomentamos-bullet__text {
  font-family: var(--swm-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

.swm-fomentamos-bullet__text strong {
  font-weight: 600 !important;
  color: var(--swm-black) !important;
}

/* ══════════════════════════════════════════════════════════════
   ACORDEÓN "SABER MÁS"
══════════════════════════════════════════════════════════════ */

/*
   Técnica grid-template-rows 0fr → 1fr: anima alturas variables
   sin medir con JS. El __inner tiene overflow:hidden para recortar
   el contenido mientras la fila está colapsada a 0fr.
*/
.swm-fomentamos-bullets-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--swm-ease);
}

.swm-fomentamos-bullets-extra.is-open {
  grid-template-rows: 1fr;
}

.swm-fomentamos-bullets-extra__inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;   /* mismo gap que separa los bullets normales */
}

/* ─── Toggle "Saber más" — texto + ícono, sin look de botón ──── */
.swm-fomentamos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;        /* pegado al contenido, no al fondo del contenedor */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--swm-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--swm-slate-muted) !important;   /* gris claro inicial */
  transition: color 0.25s ease;
}

.swm-fomentamos-toggle:hover {
  color: var(--swm-slate) !important;         /* mismo color que el texto en hover */
}

/* Ícono doble-chevron ">>" */
.swm-fomentamos-toggle__icon {
  width: 13px;
  height: 9px;
  flex-shrink: 0;
}

/* El toggle desaparece tras abrir su panel (solo un acordeón abierto a la vez) */
.swm-fomentamos-toggle.is-hidden {
  display: none;
}

/* ─── Divisor entre filas ──────────────────────────────────── */
.swm-fomentamos-row-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 193, 169, 0.2),
    transparent
  );
}

/* ─── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 900px) {
  .swm-fomentamos-section  { padding: 80px 32px; }
  .swm-fomentamos-rows     { gap: 64px; }
  .swm-fomentamos-row      { gap: 40px; }
}

/* ─── Responsive — Mobile ──────────────────────────────────── */
@media (max-width: 640px) {
  .swm-fomentamos-section  { padding: 64px 20px; }
  .swm-fomentamos-header   { margin-bottom: 56px; }
  .swm-fomentamos-rows     { gap: 56px; }

  .swm-fomentamos-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Imagen siempre arriba en móvil */
  .swm-fomentamos-row__image  { order: 1 !important; }
  .swm-fomentamos-row__content{ order: 2 !important; }

  /* Ocultar dot-grid en móvil */
  .swm-fomentamos-row__image::before { display: none; }

  .swm-fomentamos-row-title { margin-bottom: 24px !important; }
}

/* ============================================================
   FIX — Toggle "Saber más" heredando estilos de botón del tema
   ============================================================
   El tema/Elementor aplica background, width:100% y display:block
   a todos los <button> globalmente. Estas reglas anulan eso
   específicamente para .swm-fomentamos-toggle.
   ============================================================ */

.swm-fomentamos-toggle {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;   /* clave si el padre es flex/grid */
}

.swm-fomentamos-toggle:hover,
.swm-fomentamos-toggle:focus,
.swm-fomentamos-toggle:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ============================================================
   FIX 2 — .is-hidden perdía contra el !important del toggle
   ============================================================
   El fix anterior usó display:inline-flex !important en el estado
   base, lo cual ahora le ganaba a is-hidden (que no tenía !important).
   Reforzamos is-hidden para que SIEMPRE gane sobre el estado base.
   ============================================================ */

.swm-fomentamos-toggle.is-hidden {
  display: none !important;
}


/* ============================================================
   FIX 3 — Alinear título y texto al borde superior de la foto
   ============================================================
   El tema aplica margin-top por defecto a <h3> y posiblemente al
   contenedor flex. Lo reseteamos a 0 para que el primer elemento
   de texto arranque exactamente donde arranca la imagen.
   ============================================================ */

.swm-fomentamos-row__content {
  margin-top: 0 !important;
}

.swm-fomentamos-row-title {
  margin-top: 0 !important;   /* refuerza el margin-top:0 ya implícito */
}

/* Por si el tema aplica margin-top también al primer <p> o <ul>/<div> hijo */
.swm-fomentamos-row__content > *:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   FIX 4 — align-items: flex-start no se aplicaba
   ============================================================
   Algo en la cascada (otra declaración de .swm-fomentamos-row,
   o un ajuste de Elementor en el contenedor) seguía forzando
   center. Reforzamos con !important para que gane sin ambigüedad.

   Además anclamos explícitamente la imagen arriba — por si el
   contenedor padre (Elementor Column/Container) tiene su propio
   "Vertical Align: Middle" configurado en el panel de Elementor,
   que es una causa muy común de este problema y vive FUERA de
   nuestras clases custom.
   ============================================================ */

.swm-fomentamos-row {
  align-items: flex-start !important;
}

.swm-fomentamos-row__image,
.swm-fomentamos-row__content {
  align-self: flex-start !important;
}

/* ============================================================
   FIX 5 — Eliminar dot-grid decorativo detrás de las imágenes
   ============================================================
   El cliente no quiere el patrón punteado mint que aparecía
   desplazado detrás de cada foto. Se anula el ::before completo.
   ============================================================ */

.swm-fomentamos-row__image::before,
.swm-fomentamos-row--reverse .swm-fomentamos-row__image::before {
  content: none !important;
  display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-eea5910 *//* ============================================================
   BLOQUE 2 — Statistics Bento Grid
   Archivo: swm-block-stats.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado (página "Por qué niñas")

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.

   NOTA: Este bloque conserva alineación izquierda en el header
   intencionalmente — es el único caso especial del sitio.
   ============================================================ */


/* ─── Sección ──────────────────────────────────────────────── */
.swm-stats-section {
  width: 100%;
  background-color: var(--swm-paper);
  position: relative;
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71, 85, 105, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}


/* ─── Inner wrapper ────────────────────────────────────────── */
.swm-stats-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Header — alineación izquierda (caso especial) ────────── */
.swm-stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

/* Eyebrow izquierdo */
.swm-stats-header .swm-eyebrow {
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* Título — usa escala global h2 */
.swm-stats-header__title {
  font-family: var(--swm-font-title) !important;
  font-size: var(--swm-text-h2) !important;    /* clamp(32px, 4vw, 52px) */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-black) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.swm-stats-header__title em {
  font-style: normal !important;
  color: var(--swm-slate) !important;
  opacity: 0.45;
}

/* Nota lateral derecha */
.swm-stats-header__note {
  font-family: var(--swm-font-body) !important;
  font-size: var(--swm-text-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1.5 !important;
  max-width: 260px;
  text-align: right;
  flex-shrink: 0;
  padding-bottom: 4px;
  margin: 0 !important;
}


/* ─── Bento Grid ───────────────────────────────────────────── */
.swm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* ─── Card base ────────────────────────────────────────────── */
.swm-stats-card {
  border-radius: var(--swm-radius-card);
  padding: 48px 44px 44px;
  position: relative;
  overflow: hidden;
}


/* ─── Cards blancas ────────────────────────────────────────── */
.swm-stats-card--stat {
  background: var(--swm-white) !important;
  box-shadow: var(--swm-shadow-card);
  transition: transform var(--swm-transition), box-shadow var(--swm-transition);
}

.swm-stats-card--stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--swm-shadow-hover);
}

/* Esquina decorativa */
.swm-stats-card--stat::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 0 32px 0 80px;
  background: var(--swm-accent);
  opacity: 0.12;
  transition: opacity var(--swm-transition), transform var(--swm-transition);
}

.swm-stats-card--stat:hover::before {
  opacity: 0.22;
  transform: scale(1.15);
}


/* ─── Source tag ───────────────────────────────────────────── */
.swm-stats-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.swm-stats-source__text {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1 !important;
  margin: 0 !important;
}


/* ─── Número gigante ───────────────────────────────────────── */
.swm-stats-number {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(4.5rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  color: var(--swm-accent) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
  display: inline-block;
  position: relative;
}


/* ─── Descripción ──────────────────────────────────────────── */
.swm-stats-desc {
  font-family: var(--swm-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}


/* ─── Card oscura (full-width) ─────────────────────────────── */
.swm-stats-card--context {
  grid-column: 1 / -1;
  background: var(--swm-slate) !important;
  box-shadow: 0 24px 60px rgba(71, 85, 105, 0.20);
  padding: 56px 72px;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Comilla decorativa */
.swm-stats-card--context::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 48px;
  font-family: var(--swm-font-title);
  font-size: 240px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Barra vertical de acento */
.swm-stats-context__strip {
  width: 4px;
  min-height: 80px;
  align-self: stretch;
  background: var(--swm-accent);
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.85;
}

.swm-stats-context__body {
  flex: 1;
}


/* ─── Eyebrow en card oscura ───────────────────────────────── */
.swm-stats-card--context .swm-eyebrow__label {
  color: rgba(244, 244, 245, 0.45) !important;
  font-family: var(--swm-font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
}


/* ─── Texto de contexto ────────────────────────────────────── */
.swm-stats-context__text {
  font-family: var(--swm-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--swm-paper) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
}

.swm-stats-context__text strong {
  font-weight: 600 !important;
  color: var(--swm-white) !important;
}


/* ─── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 960px) {
  .swm-stats-grid          { grid-template-columns: 1fr 1fr; }
  .swm-stats-card--context {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 44px;
  }
  .swm-stats-context__strip {
    width: 40px;
    min-height: 4px;
    align-self: auto;
  }
  .swm-stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
  }
  .swm-stats-header__note {
    text-align: left;
    max-width: 100%;
  }
}


/* ─── Responsive — Mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  .swm-stats-grid          { grid-template-columns: 1fr; }
  .swm-stats-card          { padding: 36px 32px 32px; }
  .swm-stats-card--context { padding: 36px 32px; }
  .swm-stats-card--context::before {
    font-size: 160px;
    top: -10px;
    left: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af71e64 *//* ============================================================
   BLOQUE 4 — ODS (Slate Island) — v3 "cards claras estilo SaaS"
   Archivo: swm-block-ods.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado  (REEMPLAZA la versión anterior)

   REQUIERE: swm-design-system-v2.css + swm-components.css

   CAMBIOS v3 (pedido del cliente):
   · La tarjeta pasa de "color ODS de fondo" a gris muy claro
     (--swm-paper), casi blanco, igual para las 6.
   · El color de cada ODS ahora se usa SOLO en ícono + título
     (ambos heredan de --swm-ods-0X vía currentColor).
   · Ícono + título en una sola fila (antes apilados).
   · Ícono sin recuadro/fondo, más grande (34px, antes 22px
     dentro de una caja de 44px).
   · Título: de Oswald 12px/700 mayúsculas a Inter 19px/600 en
     altas y bajas — mismo peso visual que un heading de tarjeta,
     pero más liviano y legible.
   · Texto del párrafo en el gris estándar del sitio
     (--swm-slate-muted), igual que .swm-card-body-text.
   · El watermark del número se adapta a fondo claro (antes
     blanco translúcido, ahora gris oscuro muy tenue).
   ============================================================ */

:root {
  /* Colores oficiales por ODS — extraídos de los chips de referencia */
  --swm-ods-03: #279B48;   /* Salud y Bienestar */
  --swm-ods-04: #C32136;   /* Educación de Calidad */
  --swm-ods-05: #EF4128;   /* Igualdad de Género */
  --swm-ods-08: #8F1838;   /* Trabajo Decente y Crecimiento Económico */
  --swm-ods-10: #E11284;   /* Reducción de las Desigualdades */
  --swm-ods-17: #14496B;   /* Alianzas para Lograr los Objetivos */
}


/* ─── Outer section ──────────────────────────────────────── */
.swm-ods-section {
  width: 100%;
  background-color: var(--swm-paper);
  position: relative;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-ods-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71,85,105,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}


/* ─── The Slate Island ───────────────────────────────────── */
.swm-ods-island {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--swm-slate) !important;
  border-radius: 48px;
  box-shadow:
    0 30px 60px rgba(71, 85, 105, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 80px;
  overflow: hidden;
}

/* Glow radial mint esquina superior derecha */
.swm-ods-island::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0,193,169,0.09) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}


/* ─── Header — overrides para fondo oscuro ───────────────── */
.swm-ods-island .swm-section-header {
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.swm-ods-island .swm-eyebrow__label {
  color: var(--swm-accent) !important;
  opacity: 0.9;
}

.swm-ods-island .swm-eyebrow__line {
  opacity: 0.7;
}

.swm-ods-island .swm-section-desc,
.swm-ods-island .swm-section-header p {
  color: rgba(243, 244, 246, 0.70) !important;
}


/* ─── Grid 3×2 ───────────────────────────────────────────── */
.swm-ods-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* ─── Card base — gris muy claro, casi blanco ────────────── */
.swm-ods-item {
  background: var(--swm-paper) !important;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(9, 9, 11, 0.16);
}

.swm-ods-item.is-visible {
  transition:
    border-color 0.35s var(--swm-ease),
    box-shadow   0.35s var(--swm-ease),
    transform    0.35s var(--swm-ease);
}

.swm-ods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(9, 9, 11, 0.24);
}

/* Color oficial por ODS — glow de hover sutil a juego */
.swm-ods-item--03:hover { border-color: rgba(39,155,72,.35);  box-shadow: 0 20px 40px rgba(39,155,72,.20); }
.swm-ods-item--04:hover { border-color: rgba(195,33,54,.35);  box-shadow: 0 20px 40px rgba(195,33,54,.20); }
.swm-ods-item--05:hover { border-color: rgba(239,65,40,.35);  box-shadow: 0 20px 40px rgba(239,65,40,.20); }
.swm-ods-item--08:hover { border-color: rgba(143,24,56,.35);  box-shadow: 0 20px 40px rgba(143,24,56,.20); }
.swm-ods-item--10:hover { border-color: rgba(225,18,132,.35); box-shadow: 0 20px 40px rgba(225,18,132,.20); }
.swm-ods-item--17:hover { border-color: rgba(20,73,107,.35);  box-shadow: 0 20px 40px rgba(20,73,107,.20); }

/* Número ODS — watermark esquina derecha, versión fondo claro */
.swm-ods-item__num {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--swm-font-title) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(15, 23, 42, 0.10) !important;
  text-transform: uppercase !important;
  line-height: 1;
  transition: color 0.3s ease;
}

.swm-ods-item:hover .swm-ods-item__num {
  color: rgba(15, 23, 42, 0.20) !important;
}

/* ─── Fila: ícono + título en un solo renglón ────────────── */
.swm-ods-item__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/* Color oficial del ODS — se hereda al ícono (currentColor) y al título */
.swm-ods-item--03 .swm-ods-item__row { color: var(--swm-ods-03); }
.swm-ods-item--04 .swm-ods-item__row { color: var(--swm-ods-04); }
.swm-ods-item--05 .swm-ods-item__row { color: var(--swm-ods-05); }
.swm-ods-item--08 .swm-ods-item__row { color: var(--swm-ods-08); }
.swm-ods-item--10 .swm-ods-item__row { color: var(--swm-ods-10); }
.swm-ods-item--17 .swm-ods-item__row { color: var(--swm-ods-17); }

/* Ícono — sin caja, más grande, color = color del ODS */
.swm-ods-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.swm-ods-item:hover .swm-ods-item__icon {
  transform: scale(1.08);
}

.swm-ods-item__icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

/* Título — junto al ícono, en el color del ODS */
.swm-ods-item__label {
  font-family: var(--swm-font-body) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Texto descriptivo — gris estándar del sitio (igual que .swm-card-body-text) */
.swm-ods-item__text {
  font-family: var(--swm-font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--swm-slate-muted) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}


/* ─── Footer tags ────────────────────────────────────────── */
.swm-ods-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.swm-ods-footer__label {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  margin-right: 4px;
}

.swm-ods-tag {
  font-family: var(--swm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  line-height: 2.5em;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  padding: 4px 12px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: default;
  display: inline-block;
}

.swm-ods-tag:hover {
  color: var(--swm-accent) !important;
  border-color: var(--swm-ods-accent-border);
  background: var(--swm-ods-accent-soft);
}


/* ─── Responsive — Tablet ────────────────────────────────── */
@media (max-width: 960px) {
  .swm-ods-island { padding: 56px 44px; border-radius: 36px; }
  .swm-ods-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ─── Responsive — Mobile ────────────────────────────────── */
@media (max-width: 600px) {
  .swm-ods-island  { padding: 40px 24px; border-radius: 28px; }
  .swm-ods-grid    { grid-template-columns: 1fr; gap: 14px; }
  .swm-ods-island .swm-section-header { margin-bottom: 40px; }
  .swm-ods-footer  { margin-top: 36px; padding-top: 28px; }
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
   BLOQUE 2 — Statistics Bento Grid
   Archivo: swm-block-stats.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado (página "Por qué niñas")

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.

   NOTA: Este bloque conserva alineación izquierda en el header
   intencionalmente — es el único caso especial del sitio.
   ============================================================ */


/* ─── Sección ──────────────────────────────────────────────── */
.swm-stats-section {
  width: 100%;
  background-color: var(--swm-paper);
  position: relative;
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71, 85, 105, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}


/* ─── Inner wrapper ────────────────────────────────────────── */
.swm-stats-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Header — alineación izquierda (caso especial) ────────── */
.swm-stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

/* Eyebrow izquierdo */
.swm-stats-header .swm-eyebrow {
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* Título — usa escala global h2 */
.swm-stats-header__title {
  font-family: var(--swm-font-title) !important;
  font-size: var(--swm-text-h2) !important;    /* clamp(32px, 4vw, 52px) */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-black) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.swm-stats-header__title em {
  font-style: normal !important;
  color: var(--swm-slate) !important;
  opacity: 0.45;
}

/* Nota lateral derecha */
.swm-stats-header__note {
  font-family: var(--swm-font-body) !important;
  font-size: var(--swm-text-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1.5 !important;
  max-width: 260px;
  text-align: right;
  flex-shrink: 0;
  padding-bottom: 4px;
  margin: 0 !important;
}


/* ─── Bento Grid ───────────────────────────────────────────── */
.swm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* ─── Card base ────────────────────────────────────────────── */
.swm-stats-card {
  border-radius: var(--swm-radius-card);
  padding: 48px 44px 44px;
  position: relative;
  overflow: hidden;
}


/* ─── Cards blancas ────────────────────────────────────────── */
.swm-stats-card--stat {
  background: var(--swm-white) !important;
  box-shadow: var(--swm-shadow-card);
  transition: transform var(--swm-transition), box-shadow var(--swm-transition);
}

.swm-stats-card--stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--swm-shadow-hover);
}

/* Esquina decorativa */
.swm-stats-card--stat::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 0 32px 0 80px;
  background: var(--swm-accent);
  opacity: 0.12;
  transition: opacity var(--swm-transition), transform var(--swm-transition);
}

.swm-stats-card--stat:hover::before {
  opacity: 0.22;
  transform: scale(1.15);
}


/* ─── Source tag ───────────────────────────────────────────── */
.swm-stats-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.swm-stats-source__text {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--swm-slate-muted) !important;
  line-height: 1 !important;
  margin: 0 !important;
}


/* ─── Número gigante ───────────────────────────────────────── */
.swm-stats-number {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(4.5rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  color: var(--swm-accent) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
  display: inline-block;
  position: relative;
}


/* ─── Descripción ──────────────────────────────────────────── */
.swm-stats-desc {
  font-family: var(--swm-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}


/* ─── Card oscura (full-width) ─────────────────────────────── */
.swm-stats-card--context {
  grid-column: 1 / -1;
  background: var(--swm-slate) !important;
  box-shadow: 0 24px 60px rgba(71, 85, 105, 0.20);
  padding: 56px 72px;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Comilla decorativa */
.swm-stats-card--context::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 48px;
  font-family: var(--swm-font-title);
  font-size: 240px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Barra vertical de acento */
.swm-stats-context__strip {
  width: 4px;
  min-height: 80px;
  align-self: stretch;
  background: var(--swm-accent);
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.85;
}

.swm-stats-context__body {
  flex: 1;
}


/* ─── Eyebrow en card oscura ───────────────────────────────── */
.swm-stats-card--context .swm-eyebrow__label {
  color: rgba(244, 244, 245, 0.45) !important;
  font-family: var(--swm-font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
}


/* ─── Texto de contexto ────────────────────────────────────── */
.swm-stats-context__text {
  font-family: var(--swm-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--swm-paper) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
}

.swm-stats-context__text strong {
  font-weight: 600 !important;
  color: var(--swm-white) !important;
}


/* ─── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 960px) {
  /* padding eliminado → controlado por .swm-section en Elementor */
  .swm-stats-grid          { grid-template-columns: 1fr 1fr; }
  .swm-stats-card--context {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 44px;
  }
  .swm-stats-context__strip {
    width: 40px;
    min-height: 4px;
    align-self: auto;
  }
  .swm-stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
  }
  .swm-stats-header__note {
    text-align: left;
    max-width: 100%;
  }
}


/* ─── Responsive — Mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  /* padding eliminado → controlado por .swm-section en Elementor */
  .swm-stats-grid          { grid-template-columns: 1fr; }
  .swm-stats-card          { padding: 36px 32px 32px; }
  .swm-stats-card--context { padding: 36px 32px; }
  .swm-stats-card--context::before {
    font-size: 160px;
    top: -10px;
    left: 24px;
  }
}
/* ============================================================
   BLOQUE 3 — Fomentamos
   Archivo: swm-block-fomentamos.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.
   ============================================================ */

:root {
  --swm-fomentamos-accent-soft: rgba(0, 193, 169, 0.08);
}


/* ─── Sección ──────────────────────────────────────────────── */
.swm-fomentamos-section {
  width: 100%;
  background-color: var(--swm-white);
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* ─── Inner wrapper ────────────────────────────────────────── */
.swm-fomentamos-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Grid de filas alternadas ─────────────────────────────── */
.swm-fomentamos-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.swm-fomentamos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.swm-fomentamos-row--reverse .swm-fomentamos-row__image {
  order: 2;
}
.swm-fomentamos-row--reverse .swm-fomentamos-row__content {
  order: 1;
}


/* ─── Celda imagen ─────────────────────────────────────────── */
.swm-fomentamos-row__image {
  position: relative;
}

.swm-fomentamos-row__image::before {
  content: '';
  position: absolute;
  inset: -16px -16px 16px 16px;
  border-radius: var(--swm-radius-card);
  background-image: radial-gradient(
    circle,
    rgba(0, 193, 169, 0.18) 1.5px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  z-index: 0;
}

.swm-fomentamos-row--reverse .swm-fomentamos-row__image::before {
  inset: -16px 16px 16px -16px;
}

.swm-fomentamos-img-wrap {
  position: relative;
  border-radius: var(--swm-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  aspect-ratio: 4 / 3;
  z-index: 1;
}

.swm-fomentamos-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  transition: transform 0.8s var(--swm-ease);
}

.swm-fomentamos-img-wrap:hover img {
  transform: scale(1.04);
}

.swm-fomentamos-img-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: var(--swm-accent);
  color: var(--swm-white);
  font-family: var(--swm-font-title) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 8px 16px;
  border-radius: 100px;
  line-height: 1 !important;
  z-index: 2;
}


/* ─── Celda contenido ──────────────────────────────────────── */
.swm-fomentamos-row__content {
  display: flex;
  flex-direction: column;
}

.swm-fomentamos-row-num {
  font-family: var(--swm-font-title) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--swm-accent) !important;
  margin-bottom: 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.swm-fomentamos-row-num::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--swm-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.swm-fomentamos-row-title {
  font-family: var(--swm-font-title) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-black) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 32px !important;
}


/* ─── Lista de bullets ─────────────────────────────────────── */
.swm-fomentamos-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 !important;
  margin: 0 !important;
}

.swm-fomentamos-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.swm-fomentamos-bullet__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swm-fomentamos-accent-soft);
  border: 1.5px solid var(--swm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.swm-fomentamos-bullet__icon svg {
  width: 10px;
  height: 10px;
  stroke: var(--swm-accent);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.swm-fomentamos-bullet__text {
  font-family: var(--swm-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--swm-slate) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

.swm-fomentamos-bullet__text strong {
  font-weight: 600 !important;
  color: var(--swm-black) !important;
}


/* ─── Divisor entre filas ──────────────────────────────────── */
.swm-fomentamos-row-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 193, 169, 0.2),
    transparent
  );
}


/* ─── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 900px) {
  .swm-fomentamos-rows { gap: 64px; }
  .swm-fomentamos-row  { gap: 40px; }
}


/* ─── Responsive — Mobile ──────────────────────────────────── */
@media (max-width: 640px) {
  .swm-fomentamos-rows { gap: 56px; }

  .swm-fomentamos-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .swm-fomentamos-row__image   { order: 1 !important; }
  .swm-fomentamos-row__content { order: 2 !important; }
  .swm-fomentamos-row__image::before { display: none; }
  .swm-fomentamos-row-title    { margin-bottom: 24px !important; }
}

/* ─── Fix animaciones viewport ──────────────────────────────── */
.swm-fomentamos-row.swm-reveal {
  opacity: 0 !important;
  transform: translateY(48px) !important;
  transition:
    opacity  0.8s var(--swm-ease),
    transform 0.8s var(--swm-ease);
}

.swm-fomentamos-row.swm-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================================
   BLOQUE 4 — ODS (Slate Island)
   Archivo: swm-block-ods.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado

   REQUIERE: swm-design-system-v2.css + swm-components.css

   ELIMINADO vs versión anterior:
   · .swm-ods-header                  → reemplazado por .swm-section-header
   · .swm-ods-header .swm-eyebrow     → ídem
   · .swm-ods-header .swm-eyebrow__label → ídem
   · .swm-ods-header .swm-eyebrow__line  → ídem
   · .swm-ods-title                   → reemplazado por .swm-title-section--light
   · .swm-ods-title__accent           → reemplazado por inline style en HTML
   · .swm-ods-title-divider           → reemplazado por .swm-hero-divider global
   · padding de .swm-ods-section      → controlado por .swm-section en Elementor
   · Stagger nth-child                → migrado a data-swm-delay en HTML
   ============================================================ */

:root {
  --swm-ods-accent-soft:   rgba(0, 193, 169, 0.12);
  --swm-ods-accent-border: rgba(0, 193, 169, 0.25);
  --swm-ods-card-bg:       rgba(255, 255, 255, 0.06);
  --swm-ods-card-border:   rgba(255, 255, 255, 0.10);
  --swm-ods-card-hover-bg: rgba(0, 193, 169, 0.10);
  --swm-ods-light:         #F3F4F6;
}


/* ─── Outer section ──────────────────────────────────────── */
.swm-ods-section {
  width: 100%;
  background-color: var(--swm-paper);
  position: relative;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-ods-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71,85,105,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}


/* ─── The Slate Island ───────────────────────────────────── */
.swm-ods-island {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--swm-slate) !important;
  border-radius: 48px;
  box-shadow:
    0 30px 60px rgba(71, 85, 105, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 80px;
  overflow: hidden;
}

/* Glow radial mint esquina superior derecha */
.swm-ods-island::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0,193,169,0.09) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}


/* ─── Header — overrides para fondo oscuro ───────────────── */
/*
   El header usa .swm-section-header del global.
   Solo sobreescribimos lo que cambia por estar sobre fondo oscuro.
*/
.swm-ods-island .swm-section-header {
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.swm-ods-island .swm-eyebrow__label {
  color: var(--swm-accent) !important;
  opacity: 0.9;
}

.swm-ods-island .swm-eyebrow__line {
  opacity: 0.7;
}

.swm-ods-island .swm-section-desc,
.swm-ods-island .swm-section-header p {
  color: rgba(243, 244, 246, 0.70) !important;
}


/* ─── Grid 3×2 ───────────────────────────────────────────── */
.swm-ods-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* ─── Card ───────────────────────────────────────────────── */
.swm-ods-item {
  background: var(--swm-ods-card-bg);
  border: 1px solid var(--swm-ods-card-border);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.swm-ods-item.is-visible {
  transition:
    background   0.35s var(--swm-ease),
    border-color 0.35s var(--swm-ease),
    transform    0.35s var(--swm-ease),
    box-shadow   0.35s var(--swm-ease);
}

.swm-ods-item:hover {
  background: var(--swm-ods-card-hover-bg) !important;
  border-color: var(--swm-ods-accent-border) !important;
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Número ODS — watermark esquina derecha */
.swm-ods-item__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--swm-font-title) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.15) !important;
  text-transform: uppercase !important;
  line-height: 1;
  transition: color 0.3s ease;
}

.swm-ods-item:hover .swm-ods-item__num {
  color: rgba(0, 193, 169, 0.50) !important;
}

/* Ícono */
.swm-ods-item__icon {
  width: 44px;
  height: 44px;
  background: var(--swm-ods-accent-soft);
  border: 1px solid var(--swm-ods-accent-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.swm-ods-item:hover .swm-ods-item__icon {
  background: rgba(0, 193, 169, 0.20);
  border-color: rgba(0, 193, 169, 0.45);
  transform: scale(1.08);
}

.swm-ods-item__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--swm-accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Label */
.swm-ods-item__label {
  font-family: var(--swm-font-title) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--swm-accent) !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}

/* Texto descriptivo */
.swm-ods-item__text {
  font-family: var(--swm-font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--swm-ods-light) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}


/* ─── Footer tags ────────────────────────────────────────── */
.swm-ods-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.swm-ods-footer__label {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.28) !important;
  margin-right: 4px;
}

.swm-ods-tag {
  font-family: var(--swm-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  line-height: 2.5em;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  padding: 4px 12px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: default;
  display: inline-block;
}

.swm-ods-tag:hover {
  color: var(--swm-accent) !important;
  border-color: var(--swm-ods-accent-border);
  background: var(--swm-ods-accent-soft);
}


/* ─── Responsive — Tablet ────────────────────────────────── */
@media (max-width: 960px) {
  .swm-ods-island { padding: 56px 44px; border-radius: 36px; }
  .swm-ods-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ─── Responsive — Mobile ────────────────────────────────── */
@media (max-width: 600px) {
  .swm-ods-island  { padding: 40px 24px; border-radius: 28px; }
  .swm-ods-grid    { grid-template-columns: 1fr; gap: 14px; }
  .swm-ods-island .swm-section-header { margin-bottom: 40px; }
  .swm-ods-footer  { margin-top: 36px; padding-top: 28px; }
}
/* ============================================================
   BLOQUE 5 — Programs Banner
   Archivo: swm-block-cierre.css
   Dónde va: Elementor → hamburguesa → Configuración de página
             → CSS personalizado

   REQUIERE: swm-design-system-v2.css + swm-components.css

   NOTA: El padding de sección se eliminó — lo controla
   la clase swm-section en el contenedor de Elementor.
   ============================================================ */

:root {
  --swm-cierre-light:       #F3F4F6;
  --swm-cierre-accent-soft: rgba(0, 193, 169, 0.10);
}


/* ─── Sección ──────────────────────────────────────────────── */
.swm-cierre-programs {
  width: 100%;
  background-color: var(--swm-white);
  position: relative;
  overflow: hidden;
  /* padding eliminado → controlado por .swm-section en Elementor */
}

/* Dot-grid decorativo */
.swm-cierre-programs::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(71,85,105,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ─── Wrapper ──────────────────────────────────────────────── */
.swm-cierre-programs-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}


/* ─── Grid 4 columnas ──────────────────────────────────────── */
.swm-cierre-programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}


/* ─── Card ─────────────────────────────────────────────────── */
.swm-cierre-card {
  background: var(--swm-paper) !important;
  border-radius: var(--swm-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--swm-shadow-card);
}

.swm-cierre-card.is-visible {
  transition:
    transform  0.4s var(--swm-ease),
    box-shadow 0.4s var(--swm-ease);
}

.swm-cierre-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--swm-shadow-hover);
}

/* Imagen superior */
.swm-cierre-card__img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  flex-shrink: 0;
  transition: transform 0.7s var(--swm-ease);
}

.swm-cierre-card:hover .swm-cierre-card__img {
  transform: scale(1.04);
}

/* Cuerpo de la card */
.swm-cierre-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Número de programa */
.swm-cierre-card__num {
  font-family: var(--swm-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--swm-accent) !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.swm-cierre-card__num::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--swm-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Título de la card */
.swm-cierre-card__title {
  font-family: var(--swm-font-title) !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--swm-slate) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
}

/* Texto de la card */
.swm-cierre-card__text {
  font-family: var(--swm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--swm-slate-muted) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex: 1;
  margin: 0 0 20px !important;
}

/* Link "Ver programa →" */
.swm-cierre-card__link {
  font-family: var(--swm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--swm-accent) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  transition: gap 0.25s ease, color 0.25s ease;
}

.swm-cierre-card__link:hover {
  gap: 10px;
  color: var(--swm-accent-dark) !important;
}

.swm-cierre-card__link-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.swm-cierre-card__link:hover .swm-cierre-card__link-arrow {
  transform: translateX(3px);
}


/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .swm-cierre-programs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .swm-cierre-programs-grid { grid-template-columns: 1fr; }
}/* End custom CSS */