.hero-banner {
  position: relative;
  color: white;
}

.hero-banner__bg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  filter: brightness(0.4);
  z-index: -10
}

.hero-banner__info {
  color: white
}

.main-form {
  background: white;
  padding: 2em 2em 4em;
  margin: 2em 1em;
  position: relative;
  border-radius: 0.5em;
  overflow: hidden;
}

.main-form__title {
  border: none;
  text-align: center;
  /* max-width: 11em; */
}

.main-form__input,
.main-form__select {
  display: block;
  width: 100%;
  padding: 0.8em 0.2em;
  font-size: 0.9em;
  color: #5f5f5f;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #e9e7e7;
  outline: none;
  transition: .3s background-color ease;
}

.main-form__input::placeholder {
  color: #5f5f5f;
}

.main-form__input:focus,
.main-form__select:focus {
  background-color: #f8fbff;
}

.main-form__info {
  color: #5f5f5f;
  margin: 0.5em 0 0;
  font-size: 0.8em;
}

.main-form__submit {
  width: 100%;
  padding: 1em;
  background: #ff6600;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  outline: none;
}

.post-cards-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
}

.post-card {
  box-shadow: 0 0 15px #c5c5c5;
  height: 100%;
  border-radius: 0.5em;
  overflow: hidden;
  transition: .3s box-shadow ease
}

.post-card:hover { 
  box-shadow: 0 0 20px #b5b5b5
}

.post-card a {
  color: inherit;
  text-decoration: none
}

.post-card__media > * {
  width: 100%;
  height: 100%;
}

.post-card__content {
  padding: 1em;
}

.post-card__title {
  margin: 0;
  margin-bottom: 0.2em;
  line-height: 1.1;
}

.post-card__info {
  font-size: 0.9em;
  margin-bottom: 1em;
}

.benefits {
  background: #f4f4f4;
  padding-top: 1em;
  margin-top: 1em;
}

.benefits__man {
  padding-top: 2em;
  width: 100%;
  height: 100%;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .benefits__man {
    padding-top: 5em;
  }
}

.benefits__list {
  list-style-image: url(../img/check.png)
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





.main-footer {
  background-color: #212528;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

.main-footer__slogan {
  color: #ffffff;
  font-size: 1.6em;
  font-weight: normal;
  margin-bottom: 1em;
}

.main-footer__logo-container {
  max-width: 14em;
  margin-bottom: 0.5em;
}

.main-footer__logo {
  width: 100%;
}

.newsletter {
  display: flex;
  align-items: center;
}

.newsletter__form {
  display: flex;
}

.newsletter__info {
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  margin-right: 1em;
}

.newsletter__input {
  color: #161616;  
  border: none;
  min-width: 17em;
  padding: 0.8em 1em;
}

.newsletter__input::placeholder {
  color: #474747
}

.newsletter__submit {
  border: none;
  background-color: #e56010;
  color: #ffffff;
  padding: 0.8em 1em;
}

.newsletter__input:focus,
.newsletter__submit:focus {
  outline: #e56010 dashed 3px;
}

.footer-sites {
  text-align: center;
}

.footer-sites__title {
  font-size: 1.4em;
  margin: 1em 0 0;
}

.footer-sites__list {
  display: flex;
  list-style: none;
  padding: 0;
}

.footer-sites__item::before {
  content: '|';
  margin-left: 0.3em;
}

.footer-sites__item:first-child::before {
  content: '';
}

@media (max-width: 698px) {
  .newsletter {
    flex-direction: column;
  }

  .newsletter__form {
    margin: 2em 0 1em;
  }
}

@media (max-width: 528px) {
  .footer-sites {
    font-size: 0.7em;
  }  
}



.u-v-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* ==== HOTFIX: Blindar footer contra overrides globales ==== */
.__newFooter_main .row {
  /* Si alguna hoja convirtió .row en flex, lo neutralizamos aquí */
  display: block !important;
  margin-left: -15px;
  margin-right: -15px;
}

.__newFooter_main .__newFooter_top .row > [class*="col-"] {
  /* Restaurar padding típico de las columnas Bootstrap */
  padding-left: 15px;
  padding-right: 15px;
  float: left; /* por si lo anularon */
}

@media (min-width: 992px) {
  .__newFooter_main .__newFooter_top .col-md-3 { width: 25%; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .__newFooter_main .__newFooter_top .col-sm-6 { width: 50%; }
}
@media (max-width: 767px) {
  .__newFooter_main .__newFooter_top .col-xs-12 { width: 100%; }
}

/* Parte inferior del footer: layout robusto */
.__newFooter_bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Ajustes típicos que suelen ser pisados por resets globales */
.__newFooter_main ul { list-style: none; margin: 0; padding: 0; }
.__newFooter_logo { max-width: 180px; height: auto; }
.__newFooter_certification { max-height: 40px; height: auto; width: auto; }
.__newFooter_social-link i { font-size: 20px; line-height: 1; }


/* =========================================================
   Footer oscuro en dos franjas (superior e inferior)
   ========================================================= */

/* Paleta: cámbiala si querés afinar el tono */
:root {
  --footer-bg: #494949;          /* gris oscuro - franja superior */
  --footer-bottom-bg: #1f1f1f;   /* casi negro - franja inferior */
  --footer-text: #e6e6e6;
  --footer-text-muted: #c9c9c9;
  --footer-link: #ffffff;
  --footer-link-hover: #f2f2f2;
}

/* 1) Fondo de la franja superior (todo el ancho) */
footer.__newFooter_main,
.__newFooter_main {
  background: var(--footer-bg) !important;
  color: var(--footer-text);
}

/* No queremos fondos “blancos” heredados dentro del footer */
.__newFooter_main .container,
.__newFooter_main .row,
.__newFooter_main [class*="col-"] {
  background: transparent !important;
}

/* Tipografía/links legibles en oscuro */
.__newFooter_main h4,
.__newFooter_main h5,
.__newFooter_main strong { color: var(--footer-link); }

.__newFooter_main p,
.__newFooter_main li { color: var(--footer-text-muted); }

.__newFooter_main a {
  color: var(--footer-link);
  text-decoration: none;
}
.__newFooter_main a:hover,
.__newFooter_main a:focus {
  color: var(--footer-link-hover);
  text-decoration: underline;
}

/* 2) Franja inferior (copyright/íconos) con color propio */
/* Si existe un wrapper .__newFooter_bottom úsalo */
.__newFooter_main .__newFooter_bottom {
  background: var(--footer-bottom-bg) !important;
  color: var(--footer-text);
}

/* Y, en todo caso, aseguremos color en el contenedor interior */
.__newFooter_main .__newFooter_bottom-container {
  position: relative;
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 0;
}

/* Full-bleed: si la franja inferior no tiene wrapper full-width,
   este pseudo-elemento pinta el fondo a todo el ancho aunque el
   contenido esté centrado en .container */
.__newFooter_main .__newFooter_bottom-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%; right: 50%;
  margin-left: -50vw;  /* se extiende al 100% del viewport */
  margin-right: -50vw;
  background: var(--footer-bottom-bg);
}

/* Iconos/elementos en la franja inferior */
.__newFooter_main .__newFooter_social-link i {
  color: var(--footer-text);
  opacity: .9;
}
.__newFooter_main .__newFooter_social-link i:hover { opacity: 1; }

/* (Opcional) separador sutil entre franjas */
.__newFooter_main .__newFooter_top { 
  padding-top: 32px; padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Mantener el hotfix de grid del mensaje anterior */
.__newFooter_main .row { display: block !important; margin-left: -15px; margin-right: -15px; }
.__newFooter_main .__newFooter_top .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; float: left; }
@media (min-width: 992px) { .__newFooter_main .__newFooter_top .col-md-3 { width: 25%; } }
@media (min-width: 768px) and (max-width: 991px) { .__newFooter_main .__newFooter_top .col-sm-6 { width: 50%; } }
@media (max-width: 767px) { .__newFooter_main .__newFooter_top .col-xs-12 { width: 100%; } }

/* =============================
   FOOTER — tipografía y espaciado
   ============================= */

/* Variables simples por si luego querés afinar */
.__newFooter_main {
  --footer-lh: 1.7;   /* interlineado cómodo en textos y enlaces */
  --footer-gap: 8px;  /* separación visual entre ítems de lista */
}

/* Aplica interlineado cómodo a textos y enlaces del footer */
.__newFooter_main p,
.__newFooter_main li,
.__newFooter_main a {
  line-height: var(--footer-lh);
}

/* Separación vertical uniforme entre los items de las columnas */
.__newFooter_main .__newFooter_col ul > li + li,
.__newFooter_main .__newFooter_links li + li,
.__newFooter_main ul > li + li {
  margin-top: var(--footer-gap);
}

/* Títulos de columna: más aire abajo y buen leading */
.__newFooter_main h4,
.__newFooter_main h5 {
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Descripción bajo el logo (si existe ese párrafo) */
.__newFooter_main .__newFooter_logo-col p {
  margin-top: 10px;
  line-height: 1.5;
}

/* Asegura que resets globales no compacten listas dentro del footer */
.__newFooter_main ul { margin: 0; padding: 0; }
.__newFooter_main li { margin: 0; }

/* Tamaño base para enlaces del footer (ajusta a gusto) */
.__newFooter_main a { font-size: 15px; }
@media (min-width: 1200px) { .__newFooter_main a { font-size: 16px; } }

/* =============================
   Footer — TÍTULOS en mayúscula + negrita
   ============================= */

/* Ajusta el tracking si quieres clavarlo al píxel */
.__newFooter_main { --footer-title-letter: .03em; }

.__newFooter_main .__newFooter_top .__newFooter_col h4,
.__newFooter_main .__newFooter_top .__newFooter_col h5,
.__newFooter_main .__newFooter_top .__newFooter_col > strong,
.__newFooter_main .__newFooter_top .__newFooter_col > .title,
.__newFooter_main .__newFooter_top .__newFooter_col > .__title,
.__newFooter_main .__newFooter_top .__newFooter_col .__newFooter_section-title {
  text-transform: uppercase;
  font-weight: 700;                /* negrita */
  letter-spacing: var(--footer-title-letter);
  color: var(--footer-link);       /* mismo color que venimos usando */
  margin-bottom: 14px;
  line-height: 1.3;
  display: block;                  /* por si fueran <strong> o spans */
}

/* Si el título está linkeado, aseguremos estilo igual */
.__newFooter_main .__newFooter_top .__newFooter_col h4 a,
.__newFooter_main .__newFooter_top .__newFooter_col h5 a,
.__newFooter_main .__newFooter_top .__newFooter_col > strong a {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: var(--footer-title-letter);
  color: var(--footer-link);
}

/* =============================
   Footer — franja inferior (legal + social)
   ============================= */

/* Asegurar layout del contenedor inferior */
.__newFooter_main .__newFooter_bottom-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;              /* permite que social baje en móviles */
  position: relative;
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 0;
}

/* --- Legal en una sola línea con separadores --- */
.__newFooter_main .__legal-list {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;            /* que NO se apilen en desktop */
  gap: 20px;                    /* separación base entre ítems */
  margin: 0;
  padding: 0;
  list-style: none;
}

.__newFooter_main .__legal-list li {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;          /* evita salto dentro de cada ítem */
  color: var(--footer-text-muted);
  line-height: 1.6;
}

/* Enlaces del legal */
.__newFooter_main .__legal-list a {
  color: var(--footer-link);
  text-decoration: none;
}
.__newFooter_main .__legal-list a:hover { text-decoration: underline; }

/* Barra vertical entre items (no para el primero) */
.__newFooter_main .__legal-list li + li {
  position: relative;
  padding-left: 22px;           /* espacio antes de la barra */
}
.__newFooter_main .__legal-list li + li::before {
  content: "|";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;                  /* sutil sobre fondo oscuro */
}

/* Móviles: permitir salto y quitar la barra */
@media (max-width: 600px) {
  .__newFooter_main .__legal-list { flex-wrap: wrap; gap: 10px 16px; }
  .__newFooter_main .__legal-list li { white-space: normal; }
  .__newFooter_main .__legal-list li + li { padding-left: 0; }
  .__newFooter_main .__legal-list li + li::before { display: none; }
}

/* --- Facebook SVG blanco (hereda el color del link) --- */
.__newFooter_main .__newFooter_social-link {
  color: #fff;                  /* color del icono */
  line-height: 0;               /* quita posibles espacios extra */
}
.__newFooter_main .__newFooter_social-link .__social-svg {
  width: 20px;
  height: 20px;
  fill: currentColor !important; /* usa el color del link */
  opacity: .9;
  transition: opacity .2s ease;
}
.__newFooter_main .__newFooter_social-link:hover .__social-svg { opacity: 1; }

/* Por si alguna hoja fuerza fill negro en paths del SVG */
.__newFooter_main .__newFooter_social-link svg path {
  fill: currentColor !important;
}

/* =============================
   Footer — detalles finales
   ============================= */

/* 1) © junto a "Red21 1998–2024" sin tocar el HTML
      (lo insertamos en el 1er item de la lista legal) */
.__newFooter_main .__legal-list li:first-child {
  position: relative;
  padding-left: 1.1em;                 /* espacio para el icono */
}
.__newFooter_main .__legal-list li:first-child::before {
  content: "©";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  opacity: .85;
  font-size: .95em;                    /* un pelín más chico que el texto */
  line-height: 1;
}

/* 2) Todo en una sola línea (desktop) 
      y el Facebook a la derecha, más grande */
.__newFooter_main .__newFooter_bottom-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;                      /* móvil: puede saltar */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Desktop / tablet: forzar una sola línea */
@media (min-width: 768px) {
  .__newFooter_main .__newFooter_bottom-container { flex-wrap: nowrap; }
  .__newFooter_main .__newFooter_legal { 
    flex: 1 1 auto; 
    min-width: 0;                       /* permite encoger sin romper línea */
  }
  .__newFooter_main .__newFooter_bottom-right {
    flex: 0 0 auto;                     /* ancho justo del bloque derecho */
  }
}

/* Asegurar la lista legal en horizontal (y barras verticales que ya pusimos) */
.__newFooter_main .__legal-list {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;                    /* desktop: no apilar */
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 600px) {
  .__newFooter_main .__legal-list { flex-wrap: wrap; gap: 10px 16px; }
}

/* 3) Facebook más grande, blanco, y en línea */
.__newFooter_main .__newFooter_social-link {
  color: #fff;                          /* color del icono */
  display: inline-flex;
  align-items: center;
}
.__newFooter_main .__newFooter_social-link .__social-svg {
  width: 26px;                          /* <-- tamaño más grande */
  height: 26px;
  fill: currentColor !important;        /* hereda el color del enlace */
  opacity: .9;
  transition: opacity .2s ease;
}
.__newFooter_main .__newFooter_social-link:hover .__social-svg { opacity: 1; }

/* Por si alguna hoja fuerza negro en el path del SVG */
.__newFooter_main .__newFooter_social-link svg path {
  fill: currentColor !important;
}
/* ==========================================
   A) Texto de columnas en gris claro (no blanco)
   ========================================== */

/* Color base de los ítems bajo CURSOS / INSTITUCIONAL / CONTACTO */
.__newFooter_main .__newFooter_col .__newFooter_list li,
.__newFooter_main .__newFooter_col .__newFooter_list a {
  color: #c9ced3 !important;               /* gris claro sobre fondo oscuro */
  line-height: 1.7;
}

/* Hover un poco más claro (pero no blanco puro si no querés) */
.__newFooter_main .__newFooter_col .__newFooter_list a:hover,
.__newFooter_main .__newFooter_col .__newFooter_list a:focus {
  color: #eef1f4 !important;               /* o usa #ffffff si preferís blanco */
  text-decoration: underline;
}

/* Asegura que los TÍTULOS sigan blancos y en negrita */
.__newFooter_main .__newFooter_top .__newFooter_col h4,
.__newFooter_main .__newFooter_top .__newFooter_col h5 {
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 14px;
}

/* ==========================================
   B) Franja inferior en UNA sola línea (desktop)
   ========================================== */

.__newFooter_main .__newFooter_bottom-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;                          /* móvil puede saltar */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Desktop / tablet: fuerzo una sola línea */
@media (min-width: 992px) {
  .__newFooter_main .__newFooter_bottom-container { flex-wrap: nowrap !important; }
  .__newFooter_main .__newFooter_legal { flex: 1 1 auto; min-width: 0; }
  .__newFooter_main .__newFooter_bottom-right { flex: 0 0 auto; margin-left: 16px; }
}

/* Legal en horizontal con separadores (si ya lo tenías, lo reafirmo) */
.__newFooter_main .__legal-list {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.__newFooter_main .__legal-list li { white-space: nowrap; color: #c9ced3; }
.__newFooter_main .__legal-list li + li { position: relative; padding-left: 22px; }
.__newFooter_main .__legal-list li + li::before {
  content: "|"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: .5;
}
.__newFooter_main .__legal-list a { color: #eef1f4; text-decoration: none; }
.__newFooter_main .__legal-list a:hover { text-decoration: underline; }

/* Mobile: permite salto y quita separadores verticales */
@media (max-width: 600px) {
  .__newFooter_main .__legal-list { flex-wrap: wrap; gap: 10px 16px; }
  .__newFooter_main .__legal-list li { white-space: normal; }
  .__newFooter_main .__legal-list li + li { padding-left: 0; }
  .__newFooter_main .__legal-list li + li::before { display: none; }
}

/* ==========================================
   C) Facebook más grande y BLANCO + bloque derecho en línea
   ========================================== */

.__newFooter_main .__newFooter_bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;                                 /* espacio entre icono y sellos */
}

/* Icono Facebook: blanco, grande, horizontal */
.__newFooter_main .__newFooter_social-link {
  display: inline-flex;
  align-items: center;
  color: #ffffff !important;                 /* color del icono */
  line-height: 0;
}
.__newFooter_main .__newFooter_social-link .__social-svg {
  width: 28px;                               /* tamaño mayor como en diseñador */
  height: 28px;
  fill: currentColor !important;             /* usa el color del enlace */
  opacity: .95;                              /* un pelín más sólido */
  transition: opacity .2s ease;
}
.__newFooter_main .__newFooter_social-link:hover .__social-svg { opacity: 1; }
/* Por si alguna hoja fuerza negro en el path */
.__newFooter_main .__newFooter_social-link svg path { fill: currentColor !important; }

/* Si los sellos empujan y rompen la línea, limita su altura */
.__newFooter_main .__newFooter_certification { max-height: 24px; height: auto; }

/* En móviles, si querés, oculta los sellos para ganar espacio
@media (max-width: 480px) {
  .__newFooter_main .__newFooter_certifications { display: none; }
}
*/