/* =========================================================
   VARIABLES
========================================================= */

:root {
  --green: #2eb84f;
  --green-dark: #21963d;
  --green-light: #eef9f1;

  --orange: #f5a623;
  --orange-dark: #df8d0c;
  --orange-light: #fff5e5;

  --red: #d63b32;
  --blue: #6f9fe3;

  --text-main: #14213d;
  --text-secondary: #667085;
  --text-light: #8a94a6;

  --background: #f2f4f7;
  --white: #ffffff;

  --border: #e3e7ef;

  --shadow:
    0 8px 24px rgba(16, 24, 40, 0.06);

  --shadow-hover:
    0 12px 30px rgba(16, 24, 40, 0.10);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --container: 1440px;
}


/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--background);
  color: var(--text-main);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
select {
  font-family: inherit;
}

button {
  border: none;
}

img {
  max-width: 100%;
  display: block;
}


/* =========================================================
   HEADER
========================================================= */

.main-header {
  width: 100%;
  height: 112px;

  background: rgba(255, 255, 255, 0.98);

  border-top: 2px solid #151515;
  border-bottom: 1px solid #eceff3;

  position: sticky;
  top: 0;
  z-index: 1000;

  backdrop-filter: blur(15px);
}

.header-container {
  width: 100%;
  max-width: 1880px;
  height: 100%;

  margin: 0 auto;

  padding: 0 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 45px;
}


/* =========================================================
   IDENTIDAD
========================================================= */

.brand {
  display: flex;
  align-items: center;

  gap: 17px;

  min-width: 440px;
}

.brand-icon {
  width: 94px;
  height: 94px;

  min-width: 94px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      #19ad47 0%,
      #3acb61 100%
    );

  color: white;

  font-size: 34px;
  font-weight: 800;

  letter-spacing: -1.4px;

  box-shadow:
    0 14px 28px rgba(35, 181, 77, 0.18);
}

.brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1.02;
}

.brand-text strong {
  color: #20325c;

  font-size: 25px;
  font-weight: 800;

  letter-spacing: -0.8px;
}

.brand-text span {
  margin-top: 10px;

  color: #71809e;

  font-size: 14px;
  font-weight: 700;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-nav {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 38px;
}

.nav-link {
  position: relative;

  display: flex;
  align-items: center;

  height: 112px;

  color: #34466b;

  font-size: 16px;
  font-weight: 800;

  white-space: nowrap;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.nav-link:hover {
  color: var(--green);
}

.nav-link.active {
  color: #1d2f58;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 25px;

  width: 0;
  height: 4px;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--green) 0%,
      var(--green) 65%,
      #d6c646 100%
    );

  transition: width 0.25s ease;
}

.nav-link.active::after {
  width: 48px;
}

.nav-link:hover::after {
  width: 34px;
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
========================================================= */

.mobile-menu-btn {
  display: none;

  width: 46px;
  height: 46px;

  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background: var(--green-light);

  color: var(--green);

  font-size: 20px;

  cursor: pointer;
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.page-content {
  max-width: var(--container);

  margin: 0 auto;

  padding: 38px 26px 70px;
}


/* =========================================================
   INTRO
========================================================= */

.page-intro {
  min-height: 110px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 24px;
}

.intro-content {
  display: flex;
  flex-direction: column;
}

.intro-eyebrow {
  color: var(--green);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  margin-bottom: 6px;
}

.page-intro h1 {
  color: var(--text-main);

  font-size: 34px;
  font-weight: 800;

  letter-spacing: -1px;

  margin-bottom: 5px;
}

.page-intro p {
  color: var(--text-secondary);

  font-size: 15px;
}

.intro-date {
  display: flex;
  flex-direction: column;

  text-align: right;
}

.intro-date span {
  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;
}

.intro-date strong {
  margin-top: 5px;

  color: var(--text-main);

  font-size: 14px;
  font-weight: 700;
}


/* =========================================================
   SECCIONES
========================================================= */

.dashboard-section {
  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  padding: 28px;

  margin-bottom: 28px;
}


/* =========================================================
   ENCABEZADOS DE SECCIÓN
========================================================= */

.section-heading {
  padding-bottom: 20px;

  margin-bottom: 26px;

  border-bottom: 1px solid var(--border);
}

.section-heading h2 {
  color: var(--text-main);

  font-size: 24px;
  font-weight: 800;

  letter-spacing: -0.6px;

  margin-bottom: 3px;
}

.section-heading p {
  color: var(--text-secondary);

  font-size: 15px;
}

.center-heading {
  text-align: center;
}

.section-heading-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


/* =========================================================
   RESUMEN NACIONAL
========================================================= */

.summary-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.summary-card {
  min-height: 115px;

  display: flex;
  align-items: center;

  gap: 18px;

  padding: 22px;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.summary-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-hover);

  border-color: #d7dee8;
}

.summary-icon {
  width: 52px;
  height: 52px;

  min-width: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: var(--green-light);

  color: var(--green);

  border: 1px solid #d5ebd9;

  font-size: 21px;
}

.summary-card:nth-child(even) .summary-icon {
  background: var(--orange-light);

  color: var(--orange-dark);

  border-color: #f4deb8;
}

.summary-info {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.summary-label {
  color: var(--text-secondary);

  font-size: 13px;
  font-weight: 700;

  text-transform: uppercase;
}

.summary-value {
  margin-top: 4px;

  color: var(--text-main);

  font-size: 27px;
  font-weight: 800;

  letter-spacing: -0.7px;
}


/* =========================================================
   FILTRO EDADES
========================================================= */

.age-filter {
  display: flex;
  align-items: center;

  gap: 3px;

  padding: 4px;

  background: #eef1f6;

  border-radius: 13px;
}

.age-btn {
  padding: 9px 16px;

  border-radius: 10px;

  background: transparent;

  color: var(--text-secondary);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;
}

.age-btn:hover {
  color: var(--green);
}

.age-btn.active {
  background: white;

  color: var(--green);

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   PROMEDIOS NACIONALES
========================================================= */

.average-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

.average-card {
  min-height: 220px;

  display: flex;
  flex-direction: column;

  padding: 24px;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.average-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--shadow-hover);
}

.average-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}

.average-card-header h3 {
  color: var(--text-main);

  font-size: 14px;
  font-weight: 800;

  line-height: 1.3;
}

.metric-tag {
  display: inline-flex;

  padding: 6px 11px;

  border-radius: 30px;

  background: #fff0eb;

  color: var(--orange-dark);

  font-size: 11px;
  font-weight: 800;
}

.average-main-value {
  margin: 28px 0 5px;

  text-align: center;

  color: #101828;

  font-size: 43px;
  font-weight: 800;

  letter-spacing: -1.5px;
}

.average-category {
  text-align: center;

  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 700;
}

.age-values {
  margin-top: auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 7px;
}

.age-value {
  min-height: 64px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 8px 5px;

  background: #f0f2f7;

  border: 1px solid transparent;

  border-radius: 12px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.age-value strong {
  order: 2;

  color: var(--text-main);

  font-size: 14px;
  font-weight: 800;
}

.age-value span {
  order: 1;

  margin-bottom: 3px;

  color: var(--text-secondary);

  font-size: 10px;
  font-weight: 700;
}

.age-value.selected-age {
  background: var(--green-light);

  border-color: #bfe3c7;

  transform: translateY(-2px);
}


/* =========================================================
   RANKING
========================================================= */

.rankings-section {
  display: grid;

  grid-template-columns: 230px minmax(0, 1fr);

  gap: 28px;
}

.institution-summary-column {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.institution-stat-card {
  min-height: 205px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px;

  text-align: center;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);
}

.institution-stat-label {
  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 800;

  text-transform: uppercase;
}

.institution-stat-card strong {
  margin: 22px 0 12px;

  color: var(--text-main);

  font-size: 50px;
  font-weight: 800;

  letter-spacing: -2px;
}

.institution-stat-card p {
  color: var(--text-secondary);

  font-size: 13px;
}

.ranking-main {
  min-width: 0;
}

.ranking-select {
  min-width: 180px;

  padding: 10px 15px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: white;

  color: var(--text-main);

  font-size: 13px;
  font-weight: 600;

  outline: none;
}

.ranking-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;
}

.ranking-card {
  padding: 22px;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);
}

.ranking-card-header {
  margin-bottom: 23px;
}

.ranking-card-header h3 {
  color: var(--text-main);

  font-size: 17px;
  font-weight: 800;
}

.ranking-card-header span {
  color: var(--text-secondary);

  font-size: 12px;
}

.ranking-list {
  display: flex;
  flex-direction: column;

  gap: 24px;
}

.ranking-item {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.ranking-name {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  font-size: 11px;
  font-weight: 700;
}

.ranking-name span {
  flex: 1;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-name strong {
  color: var(--text-secondary);

  font-weight: 800;
}

.ranking-bar {
  width: 100%;
  height: 11px;

  overflow: hidden;

  background: #eceff3;

  border-radius: 20px;
}

.ranking-bar span {
  display: block;

  height: 100%;

  background: var(--green);

  border-radius: 20px;
}

.ranking-item:nth-child(2) .ranking-bar span {
  background: var(--blue);
}

.ranking-item:nth-child(3) .ranking-bar span {
  background: var(--orange);
}


/* =========================================================
   GRÁFICAS
========================================================= */

.charts-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;
}

.chart-card {
  min-height: 490px;

  padding: 25px;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  box-shadow:
    0 4px 15px rgba(16, 24, 40, 0.03);
}

.chart-title {
  margin-bottom: 18px;

  text-align: center;
}

.chart-title h3 {
  color: var(--text-main);

  font-size: 19px;
  font-weight: 800;
}

.chart-container {
  position: relative;

  width: 100%;
  height: 400px;
}


/* =========================================================
   QUIÉNES SOMOS
========================================================= */

.about-tabs {
  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 3px;

  margin-bottom: 28px;

  padding: 4px;

  background: #eef1f4;

  border-radius: 12px;
}

.about-tab {
  padding: 11px 10px;

  background: transparent;

  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 700;

  border-radius: 9px;

  cursor: pointer;

  transition: 0.2s ease;
}

.about-tab:hover {
  color: var(--green);
}

.about-tab.active {
  background: var(--green);

  color: white;
}

.about-content {
  max-width: 1100px;

  color: var(--text-secondary);

  font-size: 15px;

  line-height: 1.8;
}

.about-content h3 {
  margin: 21px 0 4px;

  color: var(--text-main);

  font-size: 18px;
}

.about-content h3:first-child {
  margin-top: 0;
}


/* =========================================================
   NOTICIAS
========================================================= */

.news-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;
}

.news-card {
  overflow: hidden;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.news-card:hover {
  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);
}

.news-image {
  width: 100%;
  height: 205px;

  overflow: hidden;

  background: #eceff3;
}

.news-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}

.news-card:hover img {
  transform: scale(1.04);
}

.news-content {
  padding: 21px;
}

.news-content h3 {
  margin-bottom: 9px;

  color: var(--text-main);

  font-size: 17px;
  font-weight: 800;

  line-height: 1.3;
}

.news-content p {
  margin-bottom: 18px;

  color: var(--text-secondary);

  font-size: 13px;

  line-height: 1.6;
}

.news-content a {
  color: var(--green);

  font-size: 12px;
  font-weight: 800;

  text-transform: uppercase;
}

.news-content a i {
  margin-left: 5px;
}


/* =========================================================
   PROCESO DE EVALUACIÓN
========================================================= */

.evaluation-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.evaluation-step {
  min-height: 155px;

  display: flex;
  align-items: flex-start;

  gap: 18px;

  padding: 22px;

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.evaluation-step:hover {
  transform: translateY(-2px);

  border-color: #cce8d2;

  background: #fbfefc;
}

.step-number {
  width: 42px;
  height: 42px;

  min-width: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--green-light);

  color: var(--green);

  font-size: 12px;
  font-weight: 800;
}

.evaluation-step h3 {
  margin-bottom: 6px;

  color: var(--text-main);

  font-size: 15px;
  font-weight: 800;
}

.evaluation-step p {
  color: var(--text-secondary);

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   FOOTER
========================================================= */

.main-footer {
  padding: 42px 25px;

  background: #17210f;

  color: white;
}

.footer-container {
  max-width: var(--container);

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.footer-container strong {
  font-size: 16px;
}

.footer-container p {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 13px;
}

.footer-links {
  display: flex;

  gap: 24px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.70);

  font-size: 12px;
  font-weight: 600;

  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: white;
}


/* =========================================================
   BOTÓN SUBIR
========================================================= */

.scroll-top-btn {
  position: fixed;

  right: 24px;
  bottom: 24px;

  width: 45px;
  height: 45px;

  border-radius: 12px;

  background: var(--green);

  color: white;

  box-shadow:
    0 8px 20px rgba(46, 184, 79, 0.30);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform: translateY(15px);

  transition: 0.25s ease;

  z-index: 999;
}

.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: var(--green-dark);
}


/* =========================================================
   RESPONSIVE 1500
========================================================= */

@media (max-width: 1500px) {

  .header-container {
    padding: 0 35px;
  }

  .brand {
    min-width: 365px;
  }

  .brand-icon {
    width: 76px;
    height: 76px;

    min-width: 76px;

    border-radius: 21px;

    font-size: 29px;
  }

  .brand-text strong {
    font-size: 21px;
  }

  .brand-text span {
    font-size: 12px;
  }

  .main-nav {
    gap: 24px;
  }

  .nav-link {
    font-size: 14px;
  }

}


/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media (max-width: 1200px) {

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

  .ranking-grid {
    grid-template-columns: 1fr;
  }

  .rankings-section {
    grid-template-columns: 200px 1fr;
  }

}


/* =========================================================
   RESPONSIVE 1150
========================================================= */

@media (max-width: 1150px) {

  .main-header {
    height: 86px;
  }

  .header-container {
    padding: 0 24px;
  }

  .brand {
    min-width: auto;
  }

  .brand-icon {
    width: 64px;
    height: 64px;

    min-width: 64px;

    border-radius: 18px;

    font-size: 24px;
  }

  .brand-text strong {
    font-size: 18px;
  }

  .brand-text span {
    margin-top: 6px;

    font-size: 11px;
  }

  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .main-nav.mobile-open {
    display: flex;

    position: absolute;

    top: 86px;
    left: 0;
    right: 0;

    padding: 20px 28px 28px;

    background: white;

    border-bottom: 1px solid var(--border);

    box-shadow:
      0 14px 25px rgba(16, 24, 40, 0.08);

    flex-direction: column;
    align-items: flex-start;

    gap: 0;
  }

  .main-nav.mobile-open .nav-link {
    width: 100%;
    height: auto;

    padding: 13px 0;

    font-size: 14px;
  }

  .main-nav.mobile-open .nav-link::after {
    display: none;
  }

}


/* =========================================================
   RESPONSIVE 950
========================================================= */

@media (max-width: 950px) {

  .page-content {
    padding: 25px 18px 50px;
  }

  .page-intro {
    min-height: auto;

    flex-direction: column;
    align-items: flex-start;
  }

  .intro-date {
    text-align: left;
  }

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

  .charts-grid {
    grid-template-columns: 1fr;
  }

  .rankings-section {
    grid-template-columns: 1fr;
  }

  .institution-summary-column {
    flex-direction: row;
  }

  .institution-stat-card {
    flex: 1;
  }

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

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

  .about-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* =========================================================
   RESPONSIVE 650
========================================================= */

@media (max-width: 650px) {

  .brand-icon {
    width: 55px;
    height: 55px;

    min-width: 55px;

    border-radius: 15px;

    font-size: 20px;
  }

  .brand-text strong {
    font-size: 15px;
  }

  .brand-text span {
    display: none;
  }

  .page-intro h1 {
    font-size: 27px;
  }

  .dashboard-section {
    padding: 20px;

    border-radius: 16px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .average-grid {
    grid-template-columns: 1fr;
  }

  .section-heading-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .age-filter {
    width: 100%;

    overflow-x: auto;
  }

  .age-btn {
    flex: 1;

    white-space: nowrap;
  }

  .institution-summary-column {
    flex-direction: column;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .evaluation-grid {
    grid-template-columns: 1fr;
  }

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

  .charts-grid {
    gap: 16px;
  }

  .chart-card {
    min-height: 390px;

    padding: 17px;
  }

  .chart-container {
    height: 320px;
  }

  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    flex-wrap: wrap;
  }

}


/* =========================================================
   ACTUALIZACIÓN VISUAL 2026
   Estilo inspirado en el dashboard de referencia
   ========================================================= */

:root {
  --green: #2db84d;
  --green-dark: #22913c;
  --green-light: #edf8f0;

  --orange: #f4a326;
  --orange-dark: #d9850d;
  --orange-light: #fff5e6;

  --red: #e33434;
  --blue: #4e83e8;

  --text-main: #111b33;
  --text-secondary: #60718d;
  --text-light: #8b98ac;

  --background: #eef1f6;
  --white: #ffffff;
  --border: #e2e7ef;

  --shadow: 0 8px 24px rgba(17, 27, 51, 0.045);
  --shadow-hover: 0 14px 30px rgba(17, 27, 51, 0.08);

  --radius-lg: 20px;
  --radius-md: 17px;
  --radius-sm: 12px;

  --container: 1720px;
}

body {
  background:
    linear-gradient(180deg, #f4f6fa 0, #eef1f6 240px, #eef1f6 100%);
  color: var(--text-main);
}

/* ---------- Barra superior ---------- */

.utility-bar {
  min-height: 70px;
  padding: 10px clamp(24px, 4vw, 74px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #f8fafc;
  border-top: 1px solid #d8dde6;
  border-bottom: 1px solid #e7eaf0;
}

.utility-left {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.utility-left span {
  color: #687a97;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.utility-left strong {
  margin-top: 5px;
  color: var(--text-main);
  font-size: 17px;
  font-weight: 800;
}

.utility-right {
  position: absolute;
  right: clamp(24px, 4vw, 74px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}

.utility-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #ccd3df;
  border-radius: 50%;
  background: white;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 800;
}

/* ---------- Header ---------- */

.main-header {
  height: 82px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.98);
  box-shadow: none;
}

.header-container {
  max-width: var(--container);
  padding: 0 28px;
  gap: 32px;
}

.brand {
  min-width: 320px;
  gap: 12px;
}

.brand-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  font-size: 17px;
  letter-spacing: -.6px;
  box-shadow: none;
}

.brand-text strong {
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -.35px;
}

.brand-text span {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
}

.main-nav {
  gap: 7px;
}

.nav-link {
  height: 82px;
  padding: 0 10px;
  color: #596a84;
  font-size: 12px;
  font-weight: 700;
}

.nav-link::after {
  bottom: 16px;
  height: 3px;
  background: var(--green);
}

.nav-link.active::after {
  width: 34px;
}

/* ---------- Contenido ---------- */

.page-content {
  max-width: var(--container);
  padding: 30px 28px 64px;
}

.page-intro {
  min-height: 86px;
  margin-bottom: 20px;
}

.intro-eyebrow {
  color: #667894;
  font-size: 11px;
  letter-spacing: .8px;
}

.page-intro h1 {
  margin-bottom: 3px;
  font-size: clamp(28px, 2.2vw, 38px);
  letter-spacing: -1.15px;
}

.page-intro p {
  font-size: 14px;
}

.intro-date {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}

.dashboard-section {
  padding: 26px;
  margin-bottom: 24px;
  border: 1px solid #e1e6ee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(17, 27, 51, .04);
}

.section-heading {
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: 23px;
  letter-spacing: -.7px;
}

.section-heading p {
  font-size: 14px;
}

.center-heading {
  text-align: center;
}

/* ---------- Tarjetas resumen ---------- */

.summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.summary-card {
  min-height: 112px;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(17, 27, 51, .025);
}

.summary-card:hover {
  transform: translateY(-2px);
}

.summary-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 13px;
  font-size: 18px;
  background: #eef3ff;
  color: var(--red);
  border-color: #dfe7f8;
}

.summary-card:nth-child(even) .summary-icon {
  background: #fff0f0;
  color: var(--red);
  border-color: #f6d8d8;
}

.summary-card:nth-child(3n) .summary-icon {
  background: var(--green-light);
  color: var(--green);
  border-color: #d5eadb;
}

.summary-label {
  color: #687a97;
  font-size: 12px;
  font-weight: 750;
}

.summary-value {
  margin-top: 2px;
  color: var(--text-main);
  font-size: clamp(24px, 2vw, 31px);
  letter-spacing: -.9px;
}

/* ---------- Filtros ---------- */

.age-filter {
  padding: 4px;
  gap: 2px;
  border-radius: 13px;
  background: #eceff5;
}

.age-btn {
  min-width: 66px;
  padding: 9px 14px;
  border-radius: 9px;
  color: #5f708c;
}

.age-btn.active {
  color: var(--red);
  background: #fff;
}

/* ---------- Promedios ---------- */

.average-grid {
  gap: 16px;
}

.average-card {
  min-height: 225px;
  padding: 22px;
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(17,27,51,.025);
}

.average-card-header h3 {
  font-size: 14px;
}

.metric-tag {
  background: #fff0f0;
  color: var(--red);
}

.average-main-value {
  margin-top: 30px;
  color: var(--text-main);
  font-size: 42px;
}

.age-value {
  background: #eef1f6;
  border-radius: 11px;
}

.age-value.selected-age {
  background: #fff0f0;
  border-color: #f2caca;
}

/* ---------- Rankings ---------- */

.rankings-section {
  grid-template-columns: 230px minmax(0, 1fr);
}

.institution-stat-card,
.ranking-card,
.chart-card {
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(17,27,51,.025);
}

.institution-stat-card strong {
  color: var(--text-main);
}

.ranking-bar {
  background: #edf0f5;
}

.ranking-bar span {
  background: var(--green);
}

/* ---------- Gráficas ---------- */

.charts-grid {
  gap: 20px;
}

.chart-card {
  min-height: 460px;
  padding: 22px;
}

.chart-container {
  height: 380px;
}

/* ---------- Secciones institucionales ---------- */

.about-tabs {
  background: #edf0f5;
}

.about-tab.active {
  background: var(--green);
  color: #fff;
}

/* ---------- Footer ---------- */

.main-footer {
  background: #fff;
  border-top: 1px solid var(--border);
}

/* ---------- Responsive ---------- */

@media (max-width: 1350px) {
  .main-nav {
    gap: 2px;
  }

  .nav-link {
    padding: 0 7px;
    font-size: 11px;
  }

  .brand {
    min-width: 275px;
  }

  .brand-text span {
    display: none;
  }
}

@media (max-width: 1150px) {
  .utility-left {
    text-align: left;
  }

  .utility-right {
    position: static;
  }

  .main-header {
    height: 74px;
  }

  .header-container {
    height: 74px;
  }

  .main-nav {
    top: 74px;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .utility-right span {
    display: none;
  }

  .summary-grid,
  .average-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rankings-section {
    grid-template-columns: 1fr;
  }

  .institution-summary-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .utility-bar {
    min-height: 60px;
    padding: 8px 18px;
  }

  .utility-left strong {
    font-size: 14px;
  }

  .utility-avatar {
    width: 34px;
    height: 34px;
  }

  .page-content {
    padding: 22px 14px 50px;
  }

  .dashboard-section {
    padding: 18px;
    border-radius: 16px;
  }

  .summary-grid,
  .average-grid,
  .institution-summary-column {
    grid-template-columns: 1fr;
  }

  .section-heading-flex {
    align-items: flex-start;
    flex-direction: column;
  }

  .age-filter {
    width: 100%;
    overflow-x: auto;
  }

  .age-btn {
    min-width: 62px;
  }
}



/* =========================================================
   PORTADA / CARRUSEL INSTITUCIONAL
========================================================= */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(290px, .75fr);
  gap: 22px;
  margin-bottom: 26px;
}

.home-hero-main {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #182238;
  box-shadow: var(--shadow);
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  transition: opacity .35s ease, transform 5s ease;
}

.home-hero-main:hover .hero-media {
  transform: scale(1.04);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 16, 32, .82) 0%, rgba(8, 16, 32, .67) 42%, rgba(8, 16, 32, .20) 77%, rgba(8, 16, 32, .08) 100%),
    linear-gradient(0deg, rgba(8, 16, 32, .38), transparent 55%);
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(650px, 70%);
  min-height: 390px;
  padding: 52px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.hero-kicker {
  margin-bottom: 12px;
  color: #dfe9e2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .85px;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0 0 17px;
  color: white;
  font-size: clamp(30px, 3vw, 45px);
  line-height: 1.08;
  letter-spacing: -1.3px;
}

.hero-copy p {
  max-width: 610px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.72;
}

.hero-dots {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .2s ease, border-radius .2s ease, background .2s ease;
}

.hero-dot.active {
  width: 27px;
  border-radius: 999px;
  background: white;
}

.hero-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(17,27,51,.38);
  color: white;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: background .2s ease, transform .2s ease;
}

.hero-arrow:hover {
  background: rgba(17,27,51,.68);
  transform: translateY(-50%) scale(1.05);
}

.hero-arrow-left { left: 16px; }
.hero-arrow-right { right: 16px; }

.hero-slide { display: none; }

.system-access-card {
  min-height: 390px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow);
}

.system-access-logo {
  min-height: 122px;
  display: grid;
  place-items: center;
  border: 1px solid #e7eee8;
  border-radius: 16px;
  background: linear-gradient(145deg, #f4faf5, #ffffff);
}

.system-mark {
  width: 78px;
  height: 78px;
  position: relative;
}

.system-mark span {
  position: absolute;
  width: 31px;
  height: 31px;
  border-radius: 50% 50% 50% 7px;
}

.system-mark span:nth-child(1) { left: 5px; top: 5px; background: #7bbb28; }
.system-mark span:nth-child(2) { right: 5px; top: 5px; background: #ef921b; transform: rotate(90deg); }
.system-mark span:nth-child(3) { left: 5px; bottom: 5px; background: #eaaa17; transform: rotate(-90deg); }
.system-mark span:nth-child(4) { right: 5px; bottom: 5px; background: #5aa62c; transform: rotate(180deg); }

.system-access-copy {
  flex: 1;
  padding-top: 24px;
}

.system-eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.system-access-copy h2 {
  margin: 6px 0 11px;
  color: var(--text-main);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.7px;
}

.system-access-copy p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.system-access-button {
  min-height: 52px;
  margin-top: 20px;
  padding: 0 16px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 13px;
  background: var(--green);
  color: white;
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}

.system-access-button:hover {
  transform: translateY(-2px);
  background: var(--green-dark);
}

@media (max-width: 1050px) {
  .home-hero {
    grid-template-columns: 1fr;
  }

  .system-access-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .home-hero-main,
  .hero-copy {
    min-height: 420px;
  }

  .hero-copy {
    width: 100%;
    padding: 44px 46px;
  }

  .hero-overlay {
    background: rgba(8,16,32,.66);
  }
}



/* =========================================================
   ESTADÍSTICA POR GÉNERO Y EDAD
========================================================= */

.demographic-section {
  overflow: hidden;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.demographic-heading {
  align-items: flex-end;
}

.demographic-filters {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.scope-filter {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: #edf0f5;
}

.scope-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.scope-btn:hover {
  color: var(--green);
}

.scope-btn.active {
  background: white;
  color: var(--green);
  box-shadow: 0 3px 8px rgba(17, 27, 51, .06);
}

.filter-field {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-field span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px;
}

.filter-field select {
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 650;
  outline: none;
}

.filter-field select:disabled {
  background: #f2f4f7;
  color: #a1a9b7;
  cursor: not-allowed;
}

.demographic-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.demographic-row {
  min-width: 1360px;
  display: grid;
  grid-template-columns: 76px repeat(5, minmax(235px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.age-side-label {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eef1f6;
  color: var(--text-main);
  text-align: center;
  box-shadow: inset 0 0 0 1px #e6eaf0;
}

.age-side-label span {
  max-width: 58px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.demographic-total-row {
  padding-top: 16px;
  border-top: 1px dashed #dfe4ec;
}

.demographic-total-row .age-side-label {
  background: #e52528;
  color: white;
  box-shadow: none;
}

.demographic-chart-card {
  min-height: 210px;
  padding: 15px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 16px rgba(17, 27, 51, .035);
}

.demographic-chart-card h3 {
  margin-bottom: 8px;
  text-align: center;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
}

.mini-chart-wrap {
  position: relative;
  width: 100%;
  height: 165px;
}

.demographic-empty-card {
  display: grid;
  place-items: center;
  background: #fafbfc;
}

.empty-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #96a0b0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.empty-metric i {
  font-size: 18px;
}

@media (max-width: 1050px) {
  .demographic-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .demographic-filters {
    width: 100%;
    justify-content: flex-start;
  }
}



/* =========================================================
   AJUSTE V4 — ESTADÍSTICA POR GÉNERO Y EDAD
   Tarjetas más anchas + desplazamiento horizontal
========================================================= */

.demographic-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 14px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #aab4c4 #edf0f5;
}

.demographic-table-wrap::-webkit-scrollbar {
  height: 11px;
}

.demographic-table-wrap::-webkit-scrollbar-track {
  background: #edf0f5;
  border-radius: 999px;
}

.demographic-table-wrap::-webkit-scrollbar-thumb {
  background: #aab4c4;
  border-radius: 999px;
  border: 2px solid #edf0f5;
}

.demographic-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #8996aa;
}

.demographic-row {
  width: max-content;
  min-width: 100%;
  grid-template-columns:
    86px
    repeat(5, 480px);
  gap: 18px;
}

.demographic-chart-card {
  min-height: 260px;
  padding: 18px 18px 12px;
}

.mini-chart-wrap {
  height: 205px;
}

.age-side-label {
  min-height: 260px;
  position: sticky;
  left: 0;
  z-index: 4;
  box-shadow:
    inset 0 0 0 1px #e6eaf0,
    8px 0 14px rgba(17, 27, 51, .03);
}

.demographic-total-row .age-side-label {
  box-shadow:
    8px 0 14px rgba(17, 27, 51, .05);
}


/* =========================================================
   FILTROS — INDICADORES DE SALUD
========================================================= */

.health-heading {
  align-items: flex-end;
}

.health-filters {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.health-scope-filter {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border-radius: 14px;
  background: #edf0f5;
}

.health-scope-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  background: transparent;
  color: #5f708c;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.health-scope-btn:hover {
  color: var(--green);
}

.health-scope-btn.active {
  background: white;
  color: var(--green);
  box-shadow: 0 3px 9px rgba(17, 27, 51, .06);
}

.health-filter-field {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.health-filter-field span {
  color: #60718d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.health-filter-field select {
  min-height: 48px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.health-filter-field select:disabled {
  background: #f2f4f7;
  color: #b0b8c5;
  cursor: not-allowed;
}

.health-filter-note {
  margin: -8px 0 22px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #e6eaf0;
  border-radius: 11px;
  background: #f8fafc;
  color: #6a7991;
  font-size: 12px;
  font-weight: 600;
}

.health-filter-note i {
  color: var(--blue);
}

@media (max-width: 1050px) {
  .health-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .health-filters {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .health-filter-field {
    min-width: 100%;
  }

  .health-scope-filter {
    width: 100%;
  }

  .health-scope-btn {
    flex: 1;
    padding: 0 10px;
  }
}

/* =========================================================
   EVOLUCIÓN HISTÓRICA 2012–2020
========================================================= */

.historical-health-section {
  position: relative;
  overflow: hidden;
}

.historical-heading {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 24px;
}

.historical-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1768b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.historical-heading h2 {
  margin-bottom: 5px;
}

.historical-heading > p {
  margin: 0 auto;
}


/* =========================================================
   FILTROS
========================================================= */

.historical-scope-filter {
  display: inline-flex;
  gap: 7px;
  margin-top: 18px;
  padding: 5px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #f8fafc;
}

.historical-scope-btn {
  appearance: none;
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  background: transparent;
  color: #43536b;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}

.historical-scope-btn:hover {
  background: #edf4fb;
}

.historical-scope-btn.active {
  background: linear-gradient(135deg, #1768b8, #2586df);
  color: #fff;
  box-shadow: 0 5px 15px rgba(23, 104, 184, .2);
}


/* =========================================================
   NOTA
========================================================= */

.historical-demo-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 7px 11px;
  border: 1px solid #f4dfae;
  border-radius: 9px;
  background: #fffaf0;
  color: #856b25;
  font-size: 11px;
  font-weight: 600;
}


/* =========================================================
   GRID 2 x 2
========================================================= */

.historical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}


/* =========================================================
   TARJETAS
========================================================= */

.historical-chart-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e4e9f0;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(23, 40, 64, .045);
}


/* =========================================================
   HEADER TARJETA
========================================================= */

.historical-card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.historical-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #eef5fd;
  color: #244b7d;
  font-size: 18px;
}

.historical-card-header h3 {
  margin: 0 0 2px;
  color: #172b4d;
  font-size: 16px;
  font-weight: 800;
}

.historical-card-header p {
  margin: 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.4;
}


/* =========================================================
   GRÁFICA
========================================================= */

.historical-chart-wrap {
  position: relative;
  width: 100%;
  height: 255px;
  min-height: 255px;
}

.historical-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}


/* =========================================================
   KPIs
========================================================= */

.historical-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.historical-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 9px 7px;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #fbfcfe;
  text-align: center;
}

.historical-kpi span {
  margin-bottom: 4px;
  color: #718096;
  font-size: 10px;
  font-weight: 600;
}

.historical-kpi strong {
  color: #172b4d;
  font-size: 17px;
  font-weight: 800;
}

.historical-kpi-change strong {
  color: #16924a;
}


/* =========================================================
   BANNER INFERIOR
========================================================= */

.historical-impact-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid #dbeaf9;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    #f0f8ff,
    #eaf5ff,
    #f6fbff
  );
  color: #2165a8;
  text-align: left;
}

.historical-impact-banner > i {
  font-size: 20px;
}

.historical-impact-banner div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.historical-impact-banner strong {
  font-size: 13px;
}

.historical-impact-banner span {
  color: #597a9d;
  font-size: 10px;
  line-height: 1.45;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
  .historical-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .historical-chart-card {
    padding: 14px;
  }

  .historical-chart-wrap {
    height: 230px;
    min-height: 230px;
  }

  .historical-scope-filter {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .historical-scope-btn {
    width: 100%;
  }

  .historical-kpis {
    grid-template-columns: 1fr;
  }

  .historical-kpi {
    min-height: 58px;
  }

  .historical-impact-banner {
    align-items: flex-start;
  }
}


/* =========================================================
   AJUSTES V7 · RESUMEN NACIONAL
   8 tarjetas en formato 4 x 2
========================================================= */

#estadisticas .summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#estadisticas .summary-card-percentage .summary-icon {
  background: #eef8f1;
  color: #1eaf52;
  border-color: #cfe9d7;
}

#estadisticas .summary-card-men .summary-icon {
  background: #fff0f0;
  color: #ef3434;
  border-color: #f3cccc;
}

#estadisticas .summary-card-women .summary-icon {
  background: #eef8f1;
  color: #1eaf52;
  border-color: #cfe9d7;
}

#estadisticas .summary-card-men .summary-icon i {
  transform: scaleY(-1);
}

@media (max-width: 1180px) {
  #estadisticas .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #estadisticas .summary-grid {
    grid-template-columns: 1fr;
  }
}

/* PAGINA-WEB-2026 REFERENCE STYLES */
/* ==========================================================
   PARTE 1
   FUNDACIÓN MOVIMIENTO ES SALUD, A.C.
   BASE + ¿QUIÉNES SOMOS?
========================================================== */


/* ==========================================================
   01. RESET GENERAL
========================================================== */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #f3f6f9;
    color: #0b1d3a;

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   02. VARIABLES · ¿QUIÉNES SOMOS?
========================================================== */

.fms-about {
    --navy: #0b1d3a;
    --navy-light: #18365d;

    --text: #58709a;
    --text-dark: #425a7d;

    --green: #2dbb55;
    --green-dark: #078d42;
    --green-deep: #04753a;
    --green-soft: #e8f7ed;

    --blue: #0fa8b9;
    --lime: #69c93c;

    --background: #f3f6f9;
    --tabs: #edf0f4;
    --border: #dfe6ee;
    --white: #ffffff;

    width: 100%;

    padding:
        18px
        6px
        45px;

    background: var(--background);
    color: var(--navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}


/* ==========================================================
   03. TARJETA PRINCIPAL
========================================================== */

.fms-about-card {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding:
        39px
        35px
        42px;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 27px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   04. ENCABEZADO
========================================================== */

.fms-about-header {
    width: 100%;
}

.fms-about-header h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            27px,
            2vw,
            34px
        );

    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1.1px;
}

.fms-about-header p {
    margin:
        10px
        0
        0;

    color: var(--text);

    font-size: 17px;
    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================================
   05. DIVISOR
========================================================== */

.fms-about-divider {
    width: 100%;
    height: 1px;

    margin:
        25px
        0
        29px;

    background: #dce3eb;
}


/* ==========================================================
   06. PESTAÑAS
========================================================== */

.fms-about-tabs {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 5px;

    width: 100%;

    padding: 5px;

    background: #edf0f4;

    border-radius: 17px;
}

.fms-about-tab {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 51px;

    padding:
        11px
        14px;

    color: #607391;
    background: transparent;

    border: none;
    border-radius: 12px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-about-tab:hover {
    color: var(--green-dark);

    background:
        rgba(
            255,
            255,
            255,
            0.7
        );
}

.fms-about-tab.active {
    color: #ffffff;
    background: var(--green);

    box-shadow:
        0 5px 14px
        rgba(45, 187, 85, 0.17);
}

.fms-about-tab:active {
    transform: scale(0.985);
}

.fms-about-tab:focus-visible {
    outline:
        3px
        solid
        rgba(45, 187, 85, 0.25);

    outline-offset: 2px;
}


/* ==========================================================
   07. CONTENIDO DE PESTAÑAS
========================================================== */

.fms-about-content {
    width: 100%;

    padding-top: 42px;
}

.fms-about-panel {
    display: none;

    width: 100%;
}

.fms-about-panel.active {
    display: block;

    animation:
        fmsPanelIn
        0.3s
        ease;
}

@keyframes fmsPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================
   08. TEXTO GENERAL
========================================================== */

.fms-about-text {
    width: 100%;
}

.fms-about-text h3 {
    margin:
        0
        0
        14px;

    color: var(--navy);

    font-size: 22px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.4px;
}

.fms-about-text h3:not(:first-child) {
    margin-top: 34px;
}

.fms-about-text p {
    width: 100%;
    max-width: 1540px;

    margin:
        0
        0
        9px;

    color: var(--text);

    font-size: 17px;
    font-weight: 400;

    line-height: 1.75;
}

.fms-about-text p strong {
    color: var(--navy);

    font-weight: 750;
}


/* ==========================================================
   09. COLABORACIÓN ANUAL
========================================================== */

.fms-membership {
    margin-top: 36px;
}

.fms-membership h3 {
    margin-bottom: 17px;
}

.fms-membership-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    width: 100%;
    max-width: 950px;
}

.fms-membership-grid article {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 72px;

    padding:
        16px
        20px;

    background: #f7f9fb;

    border: 1px solid #e1e7ed;
    border-radius: 14px;
}

.fms-membership-grid span {
    color: var(--text);

    font-size: 14px;
    font-weight: 650;
}

.fms-membership-grid strong {
    color: var(--green-dark);

    font-size: 21px;
    font-weight: 800;
}


/* ==========================================================
   10. BENEFICIOS Y OBLIGACIONES
========================================================== */

.fms-about-list {
    margin-top: 34px;
}

.fms-about-list h3 {
    margin-bottom: 15px;
}

.fms-about-list ul {
    max-width: 1450px;

    margin: 0;

    padding-left: 23px;
}

.fms-about-list li {
    margin-bottom: 9px;

    padding-left: 4px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.65;
}

.fms-about-list li::marker {
    color: var(--green);
}


/* ==========================================================
   11. RESULTADOS
========================================================== */

.fms-results-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    width: 100%;
    max-width: 1200px;

    margin-top: 26px;
}

.fms-results-grid article {
    min-height: 105px;

    padding:
        20px
        21px;

    background: #f7f9fb;

    border: 1px solid #e1e7ed;
    border-radius: 14px;
}

.fms-results-grid span {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 650;
}

.fms-results-grid strong {
    display: block;

    color: var(--green-dark);

    font-size: 27px;
    font-weight: 800;
}


/* ==========================================================
   12. VALORES
========================================================== */

.fms-values-pending {
    max-width: 700px !important;

    padding:
        20px
        22px;

    background: #f7f9fb;

    border: 1px solid #e1e7ed;
    border-radius: 14px;
}


/* ==========================================================
   13. EQUIPO DE TRABAJO
========================================================== */

.fms-team {
    width: 100%;
}


/* ==========================================================
   14. ENCABEZADO EQUIPO
========================================================== */

.fms-team-heading {
    width: 100%;

    margin-bottom: 25px;
}

.fms-team-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 10px;

    color: #079447;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.6px;
}

.fms-team-eyebrow > span {
    display: block;

    width: 73px;
    height: 2px;

    background: #079447;
}

.fms-team-heading h3 {
    margin:
        0
        0
        10px;

    color: var(--navy);

    font-size:
        clamp(
            40px,
            4vw,
            64px
        );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -2.7px;
}

.fms-team-heading h3 span {
    color: #11a64d;
}

.fms-team-heading > p {
    width: 100%;
    max-width: 920px;

    margin: 0;

    color: var(--text);

    font-size: 14px;

    line-height: 1.65;
}


/* ==========================================================
   15. LAYOUT EQUIPO
========================================================== */

.fms-team-main {
    display: grid;

    grid-template-columns:
        minmax(610px, 1.18fr)
        minmax(460px, 0.82fr);

    gap: 27px;

    width: 100%;

    align-items: stretch;
}

.fms-team-left {
    min-width: 0;
}


/* ==========================================================
   16. ORGANIGRAMA CIRCULAR
========================================================== */

.fms-team-orbit {
    position: relative;

    width: 100%;
    max-width: 700px;
    height: 520px;

    margin: 0 auto;
}

.fms-team-orbit-ring {
    position: absolute;

    z-index: 0;

    top: 64px;
    left: 50%;

    width: 440px;
    height: 390px;

    transform:
        translateX(-50%);

    border:
        1.5px
        dashed
        #91b7d5;

    border-radius: 50%;
}


/* ==========================================================
   17. CENTRO DEL ORGANIGRAMA
========================================================== */

.fms-team-center {
    position: absolute;

    z-index: 4;

    top: 51%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 145px;
    height: 145px;

    transform:
        translate(-50%, -50%);

    background: #ffffff;

    border:
        11px
        solid
        #eef2f4;

    border-radius: 50%;

    box-shadow:
        0 8px 22px
        rgba(11, 29, 58, 0.07);
}

.fms-team-logo-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 105px;
    height: 105px;

    color: #5fbe36;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f6faf5 100%
        );

    border-radius: 50%;

    font-size: 44px;
}


/* ==========================================================
   18. CÍRCULOS DEL ORGANIGRAMA
========================================================== */

.fms-team-circle {
    position: absolute;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 150px;
    height: 150px;

    padding: 14px;

    color: #ffffff;

    border:
        8px
        solid
        rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    font-family: inherit;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(11, 29, 58, 0.12);

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-team-circle::before {
    content: "";

    position: absolute;

    inset: -10px;

    z-index: -1;

    background:
        rgba(22, 161, 75, 0.07);

    border-radius: 50%;
}

.fms-team-circle > i {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 28px;
}

.fms-team-circle strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.13;

    text-align: center;
}

.fms-team-arrow {
    position: absolute;

    bottom: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: var(--navy);
    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 3px 10px
        rgba(11, 29, 58, 0.12);
}

.fms-team-arrow i {
    font-size: 10px;
}

.fms-team-circle:hover {
    filter: brightness(1.05);
}

.fms-team-circle.active {
    box-shadow:
        0 0 0 5px
        rgba(45, 187, 85, 0.11),
        0 10px 25px
        rgba(11, 29, 58, 0.15);
}


/* ==========================================================
   19. POSICIONES DE LOS CINCO CONSEJOS
========================================================== */

.team-general {
    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            145deg,
            #12a74e,
            #007c39
        );
}

.team-general:hover {
    transform:
        translateX(-50%)
        scale(1.035);
}

.team-directivo {
    top: 125px;
    left: 35px;

    background:
        linear-gradient(
            145deg,
            #284e7c,
            #0c2b53
        );
}

.team-directivo:hover {
    transform: scale(1.035);
}

.team-expertos {
    top: 125px;
    right: 35px;

    background:
        linear-gradient(
            145deg,
            #49ce5d,
            #16a342
        );
}

.team-expertos:hover {
    transform: scale(1.035);
}

.team-comunicacion {
    bottom: 2px;
    left: 95px;

    background:
        linear-gradient(
            145deg,
            #7bd73d,
            #48b72e
        );
}

.team-comunicacion:hover {
    transform: scale(1.035);
}

.team-estatales {
    right: 95px;
    bottom: 2px;

    background:
        linear-gradient(
            145deg,
            #21b9c9,
            #0795aa
        );
}

.team-estatales:hover {
    transform: scale(1.035);
}
/* ==========================================================
   PARTE 1B
   PRESENCIA NACIONAL + EQUIPO + RESPONSIVE
========================================================== */


/* ==========================================================
   20. PRESENCIA NACIONAL
========================================================== */

.fms-national-card {
    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr)
        190px;

    align-items: center;

    gap: 18px;

    min-height: 125px;

    margin-top: 14px;

    padding:
        17px
        21px;

    background:
        linear-gradient(
            105deg,
            #f1fbf5,
            #f8fcf9
        );

    border: 1px solid #dceee3;
    border-radius: 17px;

    box-shadow:
        0 5px 17px
        rgba(11, 29, 58, 0.025);
}

.fms-national-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    color: #0ca54d;
    background: #ddf5e6;

    border-radius: 18px;

    font-size: 28px;
}

.fms-national-content > span {
    display: block;

    margin-bottom: 4px;

    color: var(--green-dark);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.fms-national-content > strong {
    display: block;

    margin-bottom: 4px;

    color: var(--navy);

    font-size: 24px;
    font-weight: 850;

    letter-spacing: -0.7px;
}

.fms-national-content p {
    max-width: 430px;

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.45;
}

.fms-national-map {
    display: flex;

    align-items: center;
    justify-content: center;

    height: 80px;

    color: #cae8d4;

    border-left: 1px solid #cfe5d6;

    font-size: 65px;
}


/* ==========================================================
   21. PANEL DERECHO DEL EQUIPO
========================================================== */

.fms-team-detail {
    min-width: 0;
    min-height: 655px;

    padding:
        24px
        24px
        17px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fbfcfd
        );

    border: 1px solid #e1e7ed;
    border-radius: 20px;

    box-shadow:
        0 9px 30px
        rgba(11, 29, 58, 0.055);
}


/* ==========================================================
   22. ENCABEZADO DEL PANEL DERECHO
========================================================== */

.fms-team-detail-header {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        40px;

    align-items: center;

    gap: 13px;

    margin-bottom: 15px;
}

.fms-team-detail-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    color: #058f42;
    background: #dcf4e5;

    border-radius: 50%;

    font-size: 30px;
}

.fms-team-detail-title {
    min-width: 0;
}

.fms-team-detail-title h4 {
    margin:
        0
        0
        5px;

    color: var(--navy);

    font-size: 25px;
    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -0.7px;
}

.fms-team-detail-title p {
    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.45;
}

.fms-team-detail-close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    color: var(--navy);
    background: #f2f5f8;

    border: none;
    border-radius: 50%;

    font-size: 16px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.fms-team-detail-close:hover {
    background: #e8edf2;

    transform: rotate(5deg);
}


/* ==========================================================
   23. LISTA DE INTEGRANTES
========================================================== */

.fms-team-members {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.fms-team-member {
    display: grid;

    grid-template-columns:
        65px
        minmax(0, 1fr)
        32px;

    align-items: center;

    gap: 13px;

    min-height: 79px;

    padding:
        8px
        11px;

    background: #ffffff;

    border: 1px solid #dfe5eb;
    border-radius: 16px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-team-member:hover {
    transform: translateX(3px);

    border-color: #bcdcc7;

    box-shadow:
        0 5px 15px
        rgba(11, 29, 58, 0.045);
}


/* FOTO */

.fms-team-member-photo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #d6d6d6,
            #bcbcbc
        );

    border-radius: 50%;

    font-size: 29px;
}

.fms-team-member-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.fms-avatar-fallback {
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}


/* NOMBRE Y CARGO */

.fms-team-member-info {
    min-width: 0;
}

.fms-team-member-name {
    color: var(--navy);

    font-size: 13px;
    font-weight: 750;

    line-height: 1.3;
}

.fms-team-member-role {
    display: block;

    margin-top: 4px;

    color: var(--text);

    font-size: 10px;
    font-weight: 500;

    line-height: 1.3;
}


/* FLECHA */

.fms-team-member-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: var(--navy);
    background: #ffffff;

    border: 1px solid #edf0f3;
    border-radius: 50%;

    font-size: 9px;

    box-shadow:
        0 2px 7px
        rgba(11, 29, 58, 0.05);
}


/* ==========================================================
   24. SIN INTEGRANTES
========================================================== */

.fms-team-empty {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    padding: 18px;

    background: #f7f9fb;

    border: 1px solid #e1e7ed;
    border-radius: 15px;
}

.fms-team-empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    color: #078d42;
    background: #e1f5e8;

    border-radius: 14px;

    font-size: 21px;
}

.fms-team-empty strong {
    display: block;

    margin-bottom: 4px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 800;
}

.fms-team-empty p {
    margin: 0;

    color: var(--text);

    font-size: 10px;

    line-height: 1.45;
}


/* ==========================================================
   25. PIE DEL PANEL DERECHO
========================================================== */

.fms-team-detail-footer {
    display: grid;

    grid-template-columns:
        66px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid #dde4eb;
}

.fms-team-detail-footer-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    color: #069646;
    background: #e1f5e8;

    border-radius: 17px;

    font-size: 26px;
}

.fms-team-detail-footer strong {
    display: block;

    margin-bottom: 3px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 800;
}

.fms-team-detail-footer p {
    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.45;
}


/* ==========================================================
   26. ACCESOS RÁPIDOS INFERIORES
========================================================== */

.fms-team-shortcuts {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 18px;
}

.fms-team-shortcut {
    display: grid;

    grid-template-columns:
        61px
        minmax(0, 1fr)
        25px;

    align-items: center;

    gap: 11px;

    min-height: 95px;

    padding: 10px;

    color: inherit;

    text-align: left;

    background: #ffffff;

    border: 1px solid #e1e7ed;
    border-radius: 15px;

    font-family: inherit;

    cursor: pointer;

    box-shadow:
        0 4px 14px
        rgba(11, 29, 58, 0.035);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-team-shortcut:hover,
.fms-team-shortcut.active {
    transform: translateY(-2px);

    border-color: #b8dec4;

    box-shadow:
        0 8px 20px
        rgba(11, 29, 58, 0.065);
}


/* ICONOS */

.shortcut-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    color: #ffffff;

    border-radius: 14px;

    font-size: 23px;
}

.shortcut-icon.general {
    background:
        linear-gradient(
            145deg,
            #13a84f,
            #007e3a
        );
}

.shortcut-icon.directivo {
    background:
        linear-gradient(
            145deg,
            #294e7c,
            #102e55
        );
}

.shortcut-icon.expertos {
    background:
        linear-gradient(
            145deg,
            #4ccc5d,
            #16a342
        );
}

.shortcut-icon.comunicacion {
    background:
        linear-gradient(
            145deg,
            #7bd63d,
            #4bb82e
        );
}

.shortcut-icon.estatales {
    background:
        linear-gradient(
            145deg,
            #1cb8c8,
            #0797aa
        );
}


/* TEXTO */

.fms-team-shortcut div {
    min-width: 0;
}

.fms-team-shortcut strong {
    display: block;

    margin-bottom: 4px;

    color: var(--navy);

    font-size: 11px;
    font-weight: 800;

    line-height: 1.2;
}

.fms-team-shortcut p {
    margin: 0;

    color: var(--text);

    font-size: 9px;

    line-height: 1.4;
}


/* FLECHA */

.fms-team-shortcut > i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: var(--navy);
    background: #ffffff;

    border: 1px solid #e4e9ee;
    border-radius: 50%;

    font-size: 8px;
}


/* ==========================================================
   27. ACCESIBILIDAD
========================================================== */

.fms-team-circle:focus-visible,
.fms-team-shortcut:focus-visible,
.fms-team-detail-close:focus-visible {
    outline:
        3px
        solid
        rgba(45, 187, 85, 0.3);

    outline-offset: 3px;
}


/* ==========================================================
   28. RESPONSIVE · PANTALLAS MEDIANAS
========================================================== */

@media (max-width: 1300px) {

    .fms-team-main {
        grid-template-columns:
            minmax(540px, 1fr)
            minmax(400px, 0.85fr);
    }

    .fms-team-orbit {
        max-width: 620px;
    }

    .team-directivo {
        left: 10px;
    }

    .team-expertos {
        right: 10px;
    }

    .team-comunicacion {
        left: 65px;
    }

    .team-estatales {
        right: 65px;
    }

    .fms-team-shortcuts {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


/* ==========================================================
   29. RESPONSIVE · TABLET
========================================================== */

@media (max-width: 1050px) {

    .fms-about-tabs {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .fms-team-main {
        grid-template-columns: 1fr;
    }

    .fms-team-orbit {
        max-width: 700px;
    }

    .team-directivo {
        left: 35px;
    }

    .team-expertos {
        right: 35px;
    }

    .team-comunicacion {
        left: 95px;
    }

    .team-estatales {
        right: 95px;
    }

    .fms-team-detail {
        min-height: auto;
    }

    .fms-results-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ==========================================================
   30. RESPONSIVE · TABLET PEQUEÑA
========================================================== */

@media (max-width: 760px) {

    .fms-about {
        padding:
            10px
            8px
            35px;
    }

    .fms-about-card {
        width: 100%;

        padding:
            30px
            20px
            32px;

        border-radius: 21px;
    }

    .fms-about-content {
        padding-top: 32px;
    }

    .fms-about-text p {
        font-size: 15px;
    }

    .fms-membership-grid {
        grid-template-columns: 1fr;
    }

    .fms-team-heading h3 {
        font-size: 42px;
    }

    .fms-national-card {
        grid-template-columns:
            65px
            minmax(0, 1fr);
    }

    .fms-national-map {
        display: none;
    }

    .fms-team-shortcuts {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ==========================================================
   31. RESPONSIVE · MÓVIL
========================================================== */

@media (max-width: 620px) {

    /* TABS EN SCROLL HORIZONTAL */

    .fms-about-tabs {
        display: flex;

        overflow-x: auto;

        gap: 5px;

        padding: 5px;

        scrollbar-width: none;
    }

    .fms-about-tabs::-webkit-scrollbar {
        display: none;
    }

    .fms-about-tab {
        flex:
            0
            0
            auto;

        min-width: 145px;

        font-size: 12px;
    }


    /* ENCABEZADO */

    .fms-about-header h2 {
        font-size: 27px;
    }

    .fms-about-header p {
        font-size: 14px;
    }


    /* TEXTO */

    .fms-about-text h3 {
        font-size: 19px;
    }

    .fms-about-text p {
        font-size: 14px;

        line-height: 1.7;
    }

    .fms-about-list li {
        font-size: 14px;
    }

    .fms-results-grid {
        grid-template-columns: 1fr;
    }


    /* EQUIPO */

    .fms-team-eyebrow {
        font-size: 9px;
    }

    .fms-team-eyebrow > span {
        width: 45px;
    }

    .fms-team-heading h3 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .fms-team-heading > p {
        font-size: 12px;
    }


    /* ORGANIGRAMA EN MÓVIL */

    .fms-team-orbit {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;

        width: 100%;
        max-width: none;
        height: auto;

        margin-top: 23px;
    }

    .fms-team-orbit-ring,
    .fms-team-center {
        display: none;
    }

    .fms-team-circle,
    .team-general,
    .team-directivo,
    .team-expertos,
    .team-comunicacion,
    .team-estatales {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: 125px;

        transform: none;

        border-width: 5px;
        border-radius: 18px;
    }

    .fms-team-circle::before {
        display: none;
    }

    .fms-team-circle:hover,
    .team-general:hover,
    .team-directivo:hover,
    .team-expertos:hover,
    .team-comunicacion:hover,
    .team-estatales:hover {
        transform: translateY(-2px);
    }

    .fms-team-arrow {
        right: 9px;
        bottom: 9px;
    }


    /* PRESENCIA NACIONAL */

    .fms-national-card {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap: 12px;

        padding: 14px;
    }

    .fms-national-icon {
        width: 54px;
        height: 54px;

        border-radius: 14px;

        font-size: 21px;
    }

    .fms-national-content > strong {
        font-size: 18px;
    }

    .fms-national-content p {
        font-size: 11px;
    }


    /* PANEL DERECHO */

    .fms-team-detail {
        padding:
            18px
            14px;

        border-radius: 16px;
    }

    .fms-team-detail-header {
        grid-template-columns:
            57px
            minmax(0, 1fr)
            34px;

        gap: 10px;
    }

    .fms-team-detail-icon {
        width: 57px;
        height: 57px;

        font-size: 23px;
    }

    .fms-team-detail-title h4 {
        font-size: 18px;
    }

    .fms-team-member {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            27px;
    }

    .fms-team-member-photo {
        width: 52px;
        height: 52px;
    }


    /* ACCESOS INFERIORES */

    .fms-team-shortcuts {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   32. RESPONSIVE · MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 420px) {

    .fms-about-card {
        padding:
            23px
            13px
            25px;
    }

    .fms-team-heading h3 {
        font-size: 30px;
    }

    .fms-team-orbit {
        grid-template-columns: 1fr;
    }

    .fms-team-circle,
    .team-general,
    .team-directivo,
    .team-expertos,
    .team-comunicacion,
    .team-estatales {
        height: 110px;
    }
}
/* ==========================================================
   PARTE 2
   ¿QUÉ ES LA INICIATIVA PONTE AL 100?
========================================================== */

.fms-ponte {
    --ponte-navy: #0b1d3a;
    --ponte-blue: #58709a;
    --ponte-green: #24b45a;
    --ponte-green-dark: #087e3e;
    --ponte-green-soft: #eaf8ef;
    --ponte-bg: #f4f7fa;
    --ponte-white: #ffffff;
    --ponte-border: #e2e8f0;

    width: 100%;
    padding: 18px 20px 24px;

    background: var(--ponte-bg);
    color: var(--ponte-navy);

    font-family: "Inter", Arial, sans-serif;
}

.fms-ponte *,
.fms-ponte *::before,
.fms-ponte *::after {
    box-sizing: border-box;
}


/* ==========================================================
   CONTENEDOR PRINCIPAL
========================================================== */

.fms-ponte-container {
    width: 100%;
    max-width: 1780px;

    margin: 0 auto;
    padding: 52px 58px 55px;

    background: var(--ponte-white);

    border: 1px solid #e1e7ed;
    border-radius: 26px;

    box-shadow: 0 10px 35px rgba(11, 29, 58, 0.04);
}


/* ==========================================================
   ENCABEZADO
========================================================== */

.fms-ponte-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    align-items: end;

    gap: 55px;

    padding-bottom: 32px;

    border-bottom: 1px solid #e5eaf0;
}


/* ==========================================================
   ETIQUETA
========================================================== */

.fms-ponte-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--ponte-green-dark);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.5px;
}


/* ==========================================================
   TÍTULO
========================================================== */

.fms-ponte-title {
    max-width: 680px;

    margin: 0;

    color: var(--ponte-navy);

    font-size: 30px;
    font-weight: 850;

    line-height: 1.04;

    letter-spacing: -1.3px;
}

.fms-ponte-title span {
    color: var(--ponte-green);
}


/* ==========================================================
   FRASE PRINCIPAL
========================================================== */

.fms-ponte-phrase {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 19px;

    background:
        linear-gradient(
            135deg,
            #effaf3 0%,
            #e7f7ed 100%
        );

    border: 1px solid #d1ead9;
    border-radius: 15px;
}

.fms-ponte-phrase > i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ponte-green),
            var(--ponte-green-dark)
        );

    border-radius: 11px;

    font-size: 15px;
}

.fms-ponte-phrase p {
    margin: 0;

    color: #536e60;

    font-size: 9px;
    font-weight: 550;

    line-height: 1.5;

    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fms-ponte-phrase strong {
    display: block;

    margin-top: 2px;

    color: var(--ponte-navy);

    font-size: 11px;
    font-weight: 800;

    text-transform: none;
    letter-spacing: 0;
}


/* ==========================================================
   INTRODUCCIÓN
========================================================== */

.fms-ponte-intro {
    max-width: 1260px;

    padding: 31px 3px 28px;
}

.fms-ponte-intro p {
    margin: 0;

    color: var(--ponte-blue);

    font-size: 10px;
    font-weight: 450;

    line-height: 1.75;
}


/* ==========================================================
   FUNDAMENTO
========================================================== */

.fms-ponte-highlight {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 16px;

    width: 100%;

    padding: 20px 22px;

    background:
        linear-gradient(
            135deg,
            #0b1d3a 0%,
            #123a5f 100%
        );

    border-radius: 17px;

    box-shadow:
        0 10px 25px
        rgba(11, 29, 58, 0.09);
}

.fms-ponte-highlight-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    font-size: 17px;
}

.fms-ponte-small-label {
    display: block;

    margin-bottom: 6px;

    color: var(--ponte-green);

    font-size: 7px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.2px;
}

.fms-ponte-highlight-content p {
    max-width: 1100px;

    margin: 0;

    color: #dbe6f0;

    font-size: 10px;
    font-weight: 450;

    line-height: 1.65;
}

.fms-ponte-highlight-content strong {
    color: #ffffff;

    font-weight: 750;
}


/* ==========================================================
   EVALUACIÓN DE CAPACIDAD FUNCIONAL
========================================================== */

.fms-ponte-evaluation {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.65fr)
        minmax(0, 1.35fr);

    gap: 55px;

    margin-top: 38px;
    padding-top: 38px;

    border-top: 1px solid #e5eaf0;
}


/* ==========================================================
   TÍTULO DE EVALUACIÓN
========================================================== */

.fms-ponte-evaluation-heading {
    display: flex;

    align-items: flex-start;

    gap: 15px;
}

.fms-ponte-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    color: var(--ponte-green-dark);

    background: var(--ponte-green-soft);

    border: 1px solid #d0e9d8;
    border-radius: 10px;

    font-size: 9px;
    font-weight: 850;
}

.fms-ponte-evaluation-heading .fms-ponte-small-label {
    margin-top: 3px;
    margin-bottom: 6px;

    color: var(--ponte-green-dark);
}

.fms-ponte-evaluation-heading h3 {
    margin: 0;

    color: var(--ponte-navy);

    font-size: 17px;
    font-weight: 850;

    line-height: 1.12;

    letter-spacing: -0.6px;
}

.fms-ponte-evaluation-heading h3 span {
    display: block;

    color: var(--ponte-green);
}


/* ==========================================================
   TEXTO DE EVALUACIÓN
========================================================== */

.fms-ponte-evaluation-content {
    display: grid;

    gap: 15px;
}

.fms-ponte-evaluation-content p {
    margin: 0;

    color: var(--ponte-blue);

    font-size: 10px;
    font-weight: 450;

    line-height: 1.7;
}

.fms-ponte-evaluation-content strong {
    color: var(--ponte-navy);

    font-weight: 750;
}


/* ==========================================================
   INDICADORES
========================================================== */

.fms-ponte-indicators {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: 32px;
}

.fms-ponte-indicator {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 75px;

    padding: 13px 14px;

    background: #f6f8fa;

    border: 1px solid #e4e9ee;
    border-radius: 13px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.fms-ponte-indicator:hover {
    background: #f1f8f4;

    border-color: #cfe6d6;

    transform: translateY(-2px);
}

.fms-ponte-indicator-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    color: var(--ponte-green-dark);

    background: var(--ponte-green-soft);

    border-radius: 10px;

    font-size: 14px;
}

.fms-ponte-indicator span {
    display: block;

    margin-bottom: 4px;

    color: #8b99a8;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: 1px;
}

.fms-ponte-indicator strong {
    display: block;

    color: var(--ponte-navy);

    font-size: 9px;
    font-weight: 750;

    line-height: 1.3;
}


/* ==========================================================
   INDICADOR PRINCIPAL
========================================================== */

.fms-ponte-indicator-main {
    background:
        linear-gradient(
            135deg,
            #effaf3 0%,
            #e7f7ed 100%
        );

    border-color: #cee7d6;
}

.fms-ponte-indicator-main .fms-ponte-indicator-icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ponte-green),
            var(--ponte-green-dark)
        );
}

.fms-ponte-indicator-main span {
    color: var(--ponte-green-dark);
}


/* ==========================================================
   SEGUIMIENTO
========================================================== */

.fms-ponte-frequency {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 16px;

    margin-top: 12px;
    padding: 17px 20px;

    background: #f7f9fb;

    border: 1px solid #e4e9ee;
    border-radius: 14px;
}

.fms-ponte-frequency-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    color: var(--ponte-green-dark);

    background: var(--ponte-green-soft);

    border-radius: 11px;

    font-size: 15px;
}

.fms-ponte-frequency-text > span {
    display: block;

    margin-bottom: 3px;

    color: var(--ponte-green-dark);

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 1px;
}

.fms-ponte-frequency-text > strong {
    display: block;

    margin-bottom: 3px;

    color: var(--ponte-navy);

    font-size: 10px;
    font-weight: 800;
}

.fms-ponte-frequency-text p {
    max-width: 900px;

    margin: 0;

    color: var(--ponte-blue);

    font-size: 8px;

    line-height: 1.5;
}


/* ==========================================================
   BADGE · 1× AL AÑO
========================================================== */

.fms-ponte-frequency-badge {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 72px;
    min-height: 54px;

    padding: 8px 13px;

    background: #ffffff;

    border: 1px solid #dce5e9;
    border-radius: 11px;
}

.fms-ponte-frequency-badge strong {
    color: var(--ponte-green-dark);

    font-size: 18px;
    font-weight: 850;

    line-height: 1;
}

.fms-ponte-frequency-badge span {
    margin-top: 4px;

    color: #8391a1;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: 0.8px;
}


/* ==========================================================
   RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-ponte-container {
        padding: 45px 42px 48px;
    }

    .fms-ponte-header {
        gap: 35px;
    }

    .fms-ponte-evaluation {
        gap: 35px;
    }

    .fms-ponte-indicators {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* ==========================================================
   RESPONSIVE · 850px
========================================================== */

@media (max-width: 850px) {

    .fms-ponte {
        padding: 10px 8px 18px;
    }

    .fms-ponte-container {
        padding: 38px 26px 42px;

        border-radius: 20px;
    }

    .fms-ponte-header {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 22px;
    }

    .fms-ponte-phrase {
        max-width: 450px;
    }

    .fms-ponte-evaluation {
        grid-template-columns: 1fr;

        gap: 23px;
    }
}


/* ==========================================================
   RESPONSIVE · 600px
========================================================== */

@media (max-width: 600px) {

    .fms-ponte-container {
        padding: 32px 17px 35px;
    }

    .fms-ponte-title {
        font-size: 27px;
    }

    .fms-ponte-intro {
        padding:
            25px
            1px
            24px;
    }

    .fms-ponte-highlight {
        align-items: flex-start;

        padding: 17px;
    }

    .fms-ponte-highlight-icon {
        width: 42px;
        height: 42px;

        font-size: 14px;
    }

    .fms-ponte-indicators {
        grid-template-columns: 1fr;
    }

    .fms-ponte-indicator {
        min-height: 65px;
    }

    .fms-ponte-frequency {
        grid-template-columns:
            auto
            1fr;
    }

    .fms-ponte-frequency-badge {
        grid-column: 1 / -1;

        flex-direction: row;

        gap: 5px;

        min-height: 42px;
    }

    .fms-ponte-frequency-badge span {
        margin-top: 0;
    }
}


/* ==========================================================
   RESPONSIVE · 420px
========================================================== */

@media (max-width: 420px) {

    .fms-ponte-title {
        font-size: 25px;
    }

    .fms-ponte-phrase {
        padding: 14px;
    }

    .fms-ponte-evaluation-heading {
        gap: 11px;
    }

    .fms-ponte-evaluation-heading h3 {
        font-size: 15px;
    }
}


/* ==========================================================
   ACCESIBILIDAD · REDUCIR MOVIMIENTO
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-ponte-indicator {
        transition: none;
    }
}


/* ==========================================================
   LANDING TYPOGRAPHY SCALE
========================================================== */

main.page-content {
    font-size: 14px;
}

main.page-content p,
main.page-content li {
    font-size: 0.875rem !important;
    line-height: 1.65;
}

main.page-content h1 {
    font-size: clamp(1.875rem, 2.7vw, 2.75rem) !important;
    line-height: 1.15 !important;
}

main.page-content h2 {
    font-size: clamp(1.625rem, 1.35rem + 0.8vw, 2.125rem) !important;
    line-height: 1.2 !important;
}

main.page-content h3 {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem) !important;
    line-height: 1.3 !important;
}

main.page-content h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

main.page-content :is(h1, h2, h3, h4, strong, b),
.main-header :is(strong, b, .nav-link) {
    font-weight: 650 !important;
}

main.page-content button,
main.page-content input,
main.page-content select,
main.page-content textarea {
    font-size: 0.875rem;
}

main.page-content a {
    font-size: max(0.8125rem, 0.875em) !important;
}

main.page-content span {
    font-size: max(0.75rem, 0.875em) !important;
}

main.page-content small,
main.page-content [class*="eyebrow"],
main.page-content [class*="small-label"],
main.page-content [class*="kicker"],
main.page-content [class*="caption"],
main.page-content [class*="legend"],
main.page-content [class*="category"],
main.page-content [class*="date"],
main.page-content [class*="label"] {
    font-size: 0.6875rem !important;
    line-height: 1.4;
}

main.page-content .fms-ponte-indicator > div > span,
main.page-content .fms-ponte-frequency-text > span,
main.page-content .fms-ponte-frequency-badge span {
    font-size: 0.6875rem !important;
}

main.page-content .fms-ponte-indicator strong {
    font-size: 1rem !important;
}

main.page-content .fms-ponte-frequency-text > strong {
    font-size: 1.125rem !important;
}

.main-header .nav-link,
.main-header .brand-text span {
    font-size: 0.9375rem;
}
/* ==========================================================
   PARTE 3
   PROCESO DE LA EVALUACIÓN
   CARRUSEL + LISTADO
========================================================== */


/* ==========================================================
   01. SECCIÓN GENERAL
========================================================== */

.fms-process {
    --process-navy: #0b1d3a;
    --process-text: #58709a;

    --process-green: #24b45a;
    --process-green-dark: #078d3e;
    --process-green-soft: #e2f6e8;

    --process-orange: #ff7417;
    --process-orange-dark: #b94e00;
    --process-orange-soft: #fff0df;

    --process-blue: #159ed8;
    --process-blue-dark: #087db4;
    --process-blue-soft: #def3fc;

    --process-yellow: #f2c83f;
    --process-yellow-dark: #8a6a00;
    --process-yellow-soft: #fff7ce;

    --process-purple: #7a6ed6;
    --process-purple-dark: #5848b4;
    --process-purple-soft: #efedff;

    --process-background: #f3f6f9;
    --process-row: #f5f7fa;
    --process-border: #e1e7ed;

    width: 100%;

    padding:
        18px
        6px
        45px;

    background: var(--process-background);
    color: var(--process-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-process *,
.fms-process *::before,
.fms-process *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. TARJETA PRINCIPAL
========================================================== */

.fms-process-card {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding:
        40px
        35px
        38px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 27px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-process-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 350px);

    align-items: center;

    gap: 45px;

    margin-bottom: 31px;

    padding:
        0
        18px;
}

.fms-process-heading {
    min-width: 0;
}


/* ==========================================================
   04. LÍNEA VERDE + ETIQUETA
========================================================== */

.fms-process-eyebrow {
    display: block;

    position: relative;

    margin-bottom: 10px;

    padding-top: 17px;

    color: var(--process-green);

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 1.35px;
}

.fms-process-eyebrow::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 62px;
    height: 3px;

    background: var(--process-green);

    border-radius: 20px;
}


/* ==========================================================
   05. TÍTULO
========================================================== */

.fms-process-heading h2 {
    margin:
        0
        0
        13px;

    color: var(--process-navy);

    font-size:
        clamp(
            38px,
            4vw,
            64px
        );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -2.6px;
}

.fms-process-heading > p {
    max-width: 850px;

    margin: 0;

    color: var(--process-text);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.55;
}


/* ==========================================================
   06. TARJETA DE PÚBLICO
========================================================== */

.fms-process-audience {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: center;

    gap: 15px;

    min-height: 100px;

    padding:
        18px
        22px;

    background:
        linear-gradient(
            135deg,
            #effaf3,
            #e7f7ec
        );

    border: 1px solid #d9eee1;
    border-radius: 19px;
}

.fms-process-audience-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    color: var(--process-green-dark);
    background: #d4f1dd;

    border-radius: 15px;

    font-size: 25px;
}

.fms-process-audience-text span {
    display: block;

    margin-bottom: 5px;

    color: #6e83a1;

    font-size: 11px;
    font-weight: 500;
}

.fms-process-audience-text strong {
    display: block;

    color: var(--process-navy);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;
}


/* ==========================================================
   07. CARRUSEL
========================================================== */

.fms-process-slider {
    position: relative;

    width: 100%;

    margin-top: 5px;
}


/* ==========================================================
   08. VIEWPORT DEL CARRUSEL
========================================================== */

.fms-process-slider-viewport {
    width: 100%;

    overflow: hidden;

    padding:
        0
        18px;

    border-radius: 18px;
}


/* ==========================================================
   09. TRACK
========================================================== */

.fms-process-slider-track {
    display: flex;

    gap: 10px;

    width: max-content;

    transform: translateX(0);

    transition:
        transform
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change: transform;
}


/* ==========================================================
   10. TARJETAS DEL CARRUSEL
========================================================== */

.fms-process-slide {
    position: relative;

    flex:
        0
        0
        clamp(
            300px,
            29vw,
            455px
        );

    height: 285px;

    overflow: hidden;

    background: #dce3e9;

    border-radius: 18px;

    cursor: pointer;

    isolation: isolate;
}

.fms-process-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 0.65s ease,
        filter 0.35s ease;
}

.fms-process-slide:hover img {
    transform: scale(1.055);
}


/* ==========================================================
   11. DEGRADADO SOBRE FOTOGRAFÍA
========================================================== */

.fms-process-slide-overlay {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 18, 42, 0.01) 20%,
            rgba(4, 18, 42, 0.15) 50%,
            rgba(4, 18, 42, 0.94) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   12. INFORMACIÓN DE CADA TARJETA
========================================================== */

.fms-process-slide-content {
    position: absolute;

    z-index: 2;

    right: 18px;
    bottom: 17px;
    left: 18px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    color: #ffffff;
}


/* ==========================================================
   13. ICONO CIRCULAR
========================================================== */

.fms-process-slide-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    color: #ffffff;
    background: var(--process-green);

    border-radius: 50%;

    font-size: 19px;

    box-shadow:
        0 6px 17px
        rgba(0, 0, 0, 0.12);
}

.fms-process-slide-content span {
    display: block;

    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 800;
}

.fms-process-slide-content h3 {
    margin:
        0
        0
        2px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.4px;
}

.fms-process-slide-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 10px;
    font-weight: 500;

    line-height: 1.3;
}


/* ==========================================================
   14. COLORES DE LAS TARJETAS
========================================================== */

.fms-process-slide.process-green .fms-process-slide-icon {
    color: #078d3e;
    background: #55db83;
}

.fms-process-slide.process-orange .fms-process-slide-icon {
    color: #a64a00;
    background: #ffc171;
}

.fms-process-slide.process-blue .fms-process-slide-icon {
    color: #0877a9;
    background: #67d3f7;
}

.fms-process-slide.process-yellow .fms-process-slide-icon {
    color: #695200;
    background: #ffdc56;
}

.fms-process-slide.process-purple .fms-process-slide-icon {
    color: #ffffff;
    background: #8174df;
}


/* ==========================================================
   15. FLECHAS LATERALES
========================================================== */

.fms-process-slider-arrow {
    position: absolute;

    z-index: 10;

    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 47px;
    height: 47px;

    padding: 0;

    color: var(--process-navy);
    background: rgba(255, 255, 255, 0.97);

    border: none;
    border-radius: 50%;

    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 8px 23px
        rgba(11, 29, 58, 0.16);

    transform: translateY(-50%);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.fms-process-slider-arrow:hover {
    color: #ffffff;
    background: var(--process-green);

    transform:
        translateY(-50%)
        scale(1.06);
}

.fms-process-slider-prev {
    left: 2px;
}

.fms-process-slider-next {
    right: 2px;
}


/* ==========================================================
   16. NAVEGACIÓN BAJO EL CARRUSEL
========================================================== */

.fms-process-slider-navigation {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    min-height: 59px;

    padding:
        0
        30px;
}


/* ==========================================================
   17. DOTS
========================================================== */

.fms-process-dots {
    grid-column: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;
}

.fms-process-dots button {
    width: 10px;
    height: 10px;

    padding: 0;

    background: #d2d9e2;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.fms-process-dots button:hover {
    transform: scale(1.18);
}

.fms-process-dots button.active {
    background: var(--process-green);
}


/* ==========================================================
   18. TEXTO DESLIZA
========================================================== */

.fms-process-swipe {
    grid-column: 3;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    color: #58709a;

    font-size: 10px;
    font-weight: 600;
}

.fms-process-swipe i {
    color: #5275a5;

    font-size: 10px;
}


/* ==========================================================
   19. LISTA DE PRUEBAS
========================================================== */

.fms-process-list {
    display: flex;

    flex-direction: column;

    gap: 8px;

    width: 100%;

    padding:
        0
        18px;
}


/* ==========================================================
   20. FILA
========================================================== */

.fms-process-row {
    display: grid;

    grid-template-columns:
        55px
        100px
        minmax(245px, 0.72fr)
        1px
        minmax(0, 1.8fr);

    align-items: center;

    gap: 15px;

    width: 100%;

    min-height: 99px;

    padding:
        12px
        18px;

    background:
        linear-gradient(
            90deg,
            #f7f9fb,
            #f4f7fa
        );

    border: 1px solid #e5eaf0;
    border-radius: 18px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-process-row:hover {
    transform: translateY(-2px);

    border-color: #d6e2db;

    box-shadow:
        0 6px 17px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   21. NÚMERO DE FILA
========================================================== */

.fms-process-row-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 51px;
    height: 51px;

    color: #ffffff;
    background: var(--process-green);

    border-radius: 50%;

    font-size: 15px;
    font-weight: 850;
}


/* ==========================================================
   22. ICONO DE FILA
========================================================== */

.fms-process-row-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 98px;
    height: 68px;

    color: var(--process-green-dark);
    background: var(--process-green-soft);

    border-radius: 14px;

    font-size: 23px;
}


/* ==========================================================
   23. TÍTULO DE FILA
========================================================== */

.fms-process-row-title {
    min-width: 0;

    padding:
        0
        4px;
}

.fms-process-row-title span {
    display: block;

    margin-bottom: 5px;

    color: var(--process-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.2px;
}

.fms-process-row-title h3 {
    margin: 0;

    color: var(--process-navy);

    font-size: 17px;
    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -0.4px;
}


/* ==========================================================
   24. DIVISOR VERTICAL
========================================================== */

.fms-process-row-divider {
    width: 1px;
    height: 57px;

    background: #d5dde7;
}


/* ==========================================================
   25. DESCRIPCIÓN
========================================================== */

.fms-process-row-description {
    min-width: 0;

    padding:
        0
        15px;
}

.fms-process-row-description p {
    margin: 0;

    color: var(--process-text);

    font-size: 13px;
    font-weight: 500;

    line-height: 1.55;
}

.fms-process-row-description strong {
    color: #294261;

    font-weight: 800;
}


/* ==========================================================
   26. COLORES · VERDE
========================================================== */

.fms-process-row.process-green .fms-process-row-number {
    background: var(--process-green);
}

.fms-process-row.process-green .fms-process-row-icon {
    color: var(--process-green-dark);
    background: var(--process-green-soft);
}

.fms-process-row.process-green .fms-process-row-title span {
    color: var(--process-green);
}


/* ==========================================================
   27. COLORES · NARANJA
========================================================== */

.fms-process-row.process-orange .fms-process-row-number {
    background: var(--process-orange);
}

.fms-process-row.process-orange .fms-process-row-icon {
    color: var(--process-orange-dark);
    background: var(--process-orange-soft);
}

.fms-process-row.process-orange .fms-process-row-title span {
    color: var(--process-orange);
}


/* ==========================================================
   28. COLORES · AZUL
========================================================== */

.fms-process-row.process-blue .fms-process-row-number {
    background: var(--process-blue);
}

.fms-process-row.process-blue .fms-process-row-icon {
    color: var(--process-blue-dark);
    background: var(--process-blue-soft);
}

.fms-process-row.process-blue .fms-process-row-title span {
    color: var(--process-blue-dark);
}


/* ==========================================================
   29. COLORES · AMARILLO
========================================================== */

.fms-process-row.process-yellow .fms-process-row-number {
    color: #654e00;
    background: var(--process-yellow);
}

.fms-process-row.process-yellow .fms-process-row-icon {
    color: var(--process-yellow-dark);
    background: var(--process-yellow-soft);
}

.fms-process-row.process-yellow .fms-process-row-title span {
    color: #b28b00;
}


/* ==========================================================
   30. COLORES · MORADO
========================================================== */

.fms-process-row.process-purple .fms-process-row-number {
    background: var(--process-purple);
}

.fms-process-row.process-purple .fms-process-row-icon {
    color: var(--process-purple-dark);
    background: var(--process-purple-soft);
}

.fms-process-row.process-purple .fms-process-row-title span {
    color: var(--process-purple-dark);
}


/* ==========================================================
   31. FILA DESTACADA DESDE EL CARRUSEL
========================================================== */

.fms-process-row.is-highlighted {
    border-color:
        rgba(
            36,
            180,
            90,
            0.35
        );

    box-shadow:
        0 0 0 3px
        rgba(
            36,
            180,
            90,
            0.07
        );
}


/* ==========================================================
   32. ACCESIBILIDAD
========================================================== */

.fms-process-slider-arrow:focus-visible,
.fms-process-dots button:focus-visible {
    outline:
        3px
        solid
        rgba(36, 180, 90, 0.28);

    outline-offset: 3px;
}


/* ==========================================================
   33. RESPONSIVE · 1450px
========================================================== */

@media (max-width: 1450px) {

    .fms-process-slide {
        flex-basis: 390px;

        height: 270px;
    }

    .fms-process-row {
        grid-template-columns:
            53px
            88px
            minmax(215px, 0.75fr)
            1px
            minmax(0, 1.6fr);
    }

    .fms-process-row-icon {
        width: 86px;
    }
}


/* ==========================================================
   34. RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-process-header {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 25px;
    }

    .fms-process-slide {
        flex-basis: 355px;

        height: 255px;
    }

    .fms-process-row {
        grid-template-columns:
            50px
            75px
            minmax(190px, 0.75fr)
            1px
            minmax(0, 1.45fr);

        gap: 12px;
    }

    .fms-process-row-icon {
        width: 74px;
        height: 62px;
    }

    .fms-process-row-title h3 {
        font-size: 15px;
    }

    .fms-process-row-description p {
        font-size: 12px;
    }
}


/* ==========================================================
   35. RESPONSIVE · TABLET
========================================================== */

@media (max-width: 950px) {

    .fms-process-header {
        grid-template-columns: 1fr;
    }

    .fms-process-audience {
        width: 100%;
        max-width: 440px;
    }

    .fms-process-slide {
        flex-basis: 340px;

        height: 245px;
    }

    .fms-process-row {
        grid-template-columns:
            50px
            68px
            minmax(0, 1fr);

        min-height: 120px;

        padding:
            14px
            16px;
    }

    .fms-process-row-icon {
        width: 66px;
        height: 62px;
    }

    .fms-process-row-divider {
        display: none;
    }

    .fms-process-row-description {
        grid-column:
            2 / 4;

        padding:
            2px
            0
            0;
    }
}


/* ==========================================================
   36. RESPONSIVE · 760px
========================================================== */

@media (max-width: 760px) {

    .fms-process {
        padding:
            10px
            8px
            35px;
    }

    .fms-process-card {
        width: 100%;

        padding:
            28px
            15px
            26px;

        border-radius: 21px;
    }

    .fms-process-header {
        padding:
            0
            5px;
    }

    .fms-process-heading h2 {
        font-size: 39px;

        letter-spacing: -1.8px;
    }

    .fms-process-heading > p {
        font-size: 14px;
    }

    .fms-process-slider-viewport {
        padding:
            0
            5px;
    }

    .fms-process-slide {
        flex-basis:
            min(
                82vw,
                340px
            );

        height: 235px;
    }

    .fms-process-slider-prev {
        left: -2px;
    }

    .fms-process-slider-next {
        right: -2px;
    }

    .fms-process-slider-navigation {
        padding:
            0
            8px;
    }

    .fms-process-swipe span {
        display: none;
    }

    .fms-process-list {
        padding:
            0
            5px;
    }
}


/* ==========================================================
   37. RESPONSIVE · MÓVIL
========================================================== */

@media (max-width: 560px) {

    .fms-process-card {
        padding:
            25px
            11px
            22px;
    }


    /* ENCABEZADO */

    .fms-process-eyebrow {
        font-size: 8px;

        letter-spacing: 0.9px;
    }

    .fms-process-heading h2 {
        font-size: 32px;

        line-height: 1.02;

        letter-spacing: -1.3px;
    }

    .fms-process-heading > p {
        font-size: 13px;

        line-height: 1.55;
    }


    /* PÚBLICO */

    .fms-process-audience {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap: 12px;

        min-height: auto;

        padding:
            14px
            15px;
    }

    .fms-process-audience-icon {
        width: 49px;
        height: 49px;

        font-size: 20px;
    }

    .fms-process-audience-text span {
        font-size: 9px;
    }

    .fms-process-audience-text strong {
        font-size: 11px;
    }


    /* CARRUSEL */

    .fms-process-slide {
        flex-basis: 82vw;

        height: 220px;
    }

    .fms-process-slide-content {
        right: 14px;
        bottom: 14px;
        left: 14px;

        grid-template-columns:
            47px
            minmax(0, 1fr);
    }

    .fms-process-slide-icon {
        width: 47px;
        height: 47px;

        font-size: 17px;
    }

    .fms-process-slide-content h3 {
        font-size: 16px;
    }

    .fms-process-slider-arrow {
        width: 40px;
        height: 40px;
    }

    .fms-process-slider-navigation {
        min-height: 52px;
    }


    /* FILAS */

    .fms-process-row {
        grid-template-columns:
            44px
            55px
            minmax(0, 1fr);

        gap: 10px;

        min-height: 130px;

        padding: 12px;
    }

    .fms-process-row-number {
        width: 43px;
        height: 43px;

        font-size: 12px;
    }

    .fms-process-row-icon {
        width: 54px;
        height: 54px;

        border-radius: 12px;

        font-size: 19px;
    }

    .fms-process-row-title span {
        font-size: 7px;
    }

    .fms-process-row-title h3 {
        font-size: 14px;
    }

    .fms-process-row-description {
        grid-column:
            1 / -1;

        padding:
            3px
            3px
            0;
    }

    .fms-process-row-description p {
        font-size: 11px;

        line-height: 1.5;
    }
}


/* ==========================================================
   38. MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 380px) {

    .fms-process-heading h2 {
        font-size: 28px;
    }

    .fms-process-slide {
        flex-basis: 84vw;

        height: 205px;
    }

    .fms-process-slide-content h3 {
        font-size: 14px;
    }

    .fms-process-row {
        grid-template-columns:
            42px
            50px
            minmax(0, 1fr);
    }

    .fms-process-row-icon {
        width: 49px;
        height: 49px;
    }
}
/* ==========================================================
   PARTE 4
   DIVULGACIÓN · EDUCACIÓN FÍSICA Y SALUD
========================================================== */


/* ==========================================================
   01. SECCIÓN GENERAL
========================================================== */

.fms-outreach {
    --outreach-navy: #0b1d3a;
    --outreach-text: #58709a;

    --outreach-green: #24b45a;
    --outreach-green-dark: #078d3e;
    --outreach-green-soft: #e5f7eb;

    --outreach-background: #f3f6f9;
    --outreach-card: #ffffff;
    --outreach-item: #f5f7fa;
    --outreach-border: #e2e8ef;

    width: 100%;

    padding:
        18px
        6px
        45px;

    background: var(--outreach-background);
    color: var(--outreach-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-outreach *,
.fms-outreach *::before,
.fms-outreach *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. TARJETA PRINCIPAL
========================================================== */

.fms-outreach-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    width: calc(100% - 12px);
    max-width: 1900px;

    min-height: 720px;

    margin: 0 auto;

    overflow: hidden;

    background: var(--outreach-card);

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. LADO IZQUIERDO · IMAGEN
========================================================== */

.fms-outreach-visual {
    position: relative;

    min-width: 0;
    min-height: 720px;

    overflow: hidden;

    background: #d9e0e8;
}


/* ==========================================================
   04. FOTOGRAFÍA
========================================================== */

.fms-outreach-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.01);

    transition:
        transform 0.8s ease;
}

.fms-outreach-visual:hover .fms-outreach-image {
    transform: scale(1.04);
}


/* ==========================================================
   05. DEGRADADO SOBRE LA FOTOGRAFÍA
========================================================== */

.fms-outreach-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 29, 58, 0.01) 25%,
            rgba(11, 29, 58, 0.12) 52%,
            rgba(11, 29, 58, 0.82) 100%
        );
}


/* ==========================================================
   06. INFORMACIÓN INFERIOR DE LA FOTO
========================================================== */

.fms-outreach-photo-caption {
    position: absolute;

    z-index: 2;

    right: 48px;
    bottom: 40px;
    left: 48px;

    display: flex;

    align-items: center;

    gap: 17px;

    color: #ffffff;
}


/* ==========================================================
   07. ICONO DE LA FOTO
========================================================== */

.fms-outreach-photo-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    flex-shrink: 0;

    color: #087d3c;
    background: #58df86;

    border-radius: 50%;

    font-size: 26px;

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   08. TEXTO SOBRE LA FOTO
========================================================== */

.fms-outreach-photo-caption span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 1.1px;
}

.fms-outreach-photo-caption strong {
    display: block;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.4px;
}


/* ==========================================================
   09. LADO DERECHO
========================================================== */

.fms-outreach-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        62px
        75px;
}


/* ==========================================================
   10. ETIQUETA DIVULGACIÓN
========================================================== */

.fms-outreach-eyebrow {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 13px;
}

.fms-outreach-eyebrow > span {
    display: block;

    width: 64px;
    height: 4px;

    background: var(--outreach-green);

    border-radius: 20px;
}

.fms-outreach-eyebrow strong {
    display: block;

    color: var(--outreach-green);

    font-size: 13px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.5px;
}


/* ==========================================================
   11. TÍTULO
========================================================== */

.fms-outreach-title {
    max-width: 760px;

    margin:
        0
        0
        24px;

    color: var(--outreach-navy);

    font-size:
        clamp(
            46px,
            4.6vw,
            72px
        );

    font-weight: 850;

    line-height: 0.96;

    letter-spacing: -3px;
}

.fms-outreach-title span {
    display: block;

    margin-top: 5px;

    color: var(--outreach-green);
}


/* ==========================================================
   12. DESCRIPCIÓN PRINCIPAL
========================================================== */

.fms-outreach-description {
    max-width: 800px;

    margin:
        0
        0
        35px;

    color: var(--outreach-text);

    font-size: 17px;
    font-weight: 500;

    line-height: 1.7;
}


/* ==========================================================
   13. CUADRÍCULA DE TARJETAS
========================================================== */

.fms-outreach-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    width: 100%;

    margin-bottom: 28px;
}


/* ==========================================================
   14. TARJETA
========================================================== */

.fms-outreach-item {
    display: grid;

    grid-template-columns:
        56px
        minmax(0, 1fr);

    align-items: center;

    gap: 15px;

    min-height: 100px;

    padding:
        17px
        19px;

    background:
        linear-gradient(
            135deg,
            #f7f9fb,
            #f3f6f9
        );

    border: 1px solid var(--outreach-border);
    border-radius: 17px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.fms-outreach-item:hover {
    transform: translateY(-3px);

    border-color: #cde6d5;

    box-shadow:
        0 8px 20px
        rgba(11, 29, 58, 0.055);
}


/* ==========================================================
   15. ICONO DE TARJETA
========================================================== */

.fms-outreach-item-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    color: var(--outreach-green-dark);
    background: var(--outreach-green-soft);

    border-radius: 14px;

    font-size: 21px;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.fms-outreach-item:hover .fms-outreach-item-icon {
    color: #ffffff;
    background: var(--outreach-green);

    transform: scale(1.04);
}


/* ==========================================================
   16. TÍTULO DE TARJETA
========================================================== */

.fms-outreach-item h3 {
    margin:
        0
        0
        5px;

    color: var(--outreach-navy);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.25;
}


/* ==========================================================
   17. TEXTO DE TARJETA
========================================================== */

.fms-outreach-item p {
    margin: 0;

    color: var(--outreach-text);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.45;
}


/* ==========================================================
   18. ENLACE INFERIOR
========================================================== */

.fms-outreach-link {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 11px;

    padding:
        8px
        0;

    color: var(--outreach-green-dark);

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;

    transition:
        color 0.2s ease;
}

.fms-outreach-link i {
    font-size: 13px;

    transition:
        transform 0.2s ease;
}

.fms-outreach-link:hover {
    color: var(--outreach-green);
}

.fms-outreach-link:hover i {
    transform: translateX(5px);
}


/* ==========================================================
   19. FOCUS
========================================================== */

.fms-outreach-link:focus-visible {
    outline:
        3px
        solid
        rgba(36, 180, 90, 0.25);

    outline-offset: 5px;

    border-radius: 5px;
}


/* ==========================================================
   20. RESPONSIVE · 1500px
========================================================== */

@media (max-width: 1500px) {

    .fms-outreach-card {
        min-height: 650px;
    }

    .fms-outreach-visual {
        min-height: 650px;
    }

    .fms-outreach-content {
        padding:
            55px
            60px;
    }

    .fms-outreach-title {
        font-size:
            clamp(
                44px,
                4.4vw,
                64px
            );
    }

    .fms-outreach-description {
        font-size: 16px;
    }
}


/* ==========================================================
   21. RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-outreach-card {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        min-height: 610px;
    }

    .fms-outreach-visual {
        min-height: 610px;
    }

    .fms-outreach-content {
        padding:
            45px
            42px;
    }

    .fms-outreach-title {
        font-size: 52px;
    }

    .fms-outreach-description {
        margin-bottom: 26px;

        font-size: 14px;
    }

    .fms-outreach-grid {
        gap: 10px;
    }

    .fms-outreach-item {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 12px;

        min-height: 88px;

        padding: 14px;
    }

    .fms-outreach-item-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .fms-outreach-item h3 {
        font-size: 13px;
    }

    .fms-outreach-item p {
        font-size: 10px;
    }
}


/* ==========================================================
   22. RESPONSIVE · TABLET
========================================================== */

@media (max-width: 950px) {

    .fms-outreach-card {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .fms-outreach-visual {
        min-height: 500px;

        aspect-ratio: 16 / 10;
    }

    .fms-outreach-content {
        padding:
            50px
            45px
            55px;
    }

    .fms-outreach-title {
        max-width: 650px;

        font-size: 58px;
    }

    .fms-outreach-description {
        max-width: 720px;

        font-size: 15px;
    }

    .fms-outreach-photo-caption {
        right: 35px;
        bottom: 32px;
        left: 35px;
    }
}


/* ==========================================================
   23. RESPONSIVE · 700px
========================================================== */

@media (max-width: 700px) {

    .fms-outreach {
        padding:
            10px
            8px
            35px;
    }

    .fms-outreach-card {
        width: 100%;

        border-radius: 22px;
    }

    .fms-outreach-visual {
        min-height: 400px;
    }

    .fms-outreach-content {
        padding:
            40px
            27px
            45px;
    }

    .fms-outreach-title {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .fms-outreach-grid {
        grid-template-columns: 1fr;
    }

    .fms-outreach-item {
        min-height: 90px;
    }

    .fms-outreach-item h3 {
        font-size: 14px;
    }

    .fms-outreach-item p {
        font-size: 11px;
    }
}


/* ==========================================================
   24. RESPONSIVE · MÓVIL
========================================================== */

@media (max-width: 520px) {

    .fms-outreach-card {
        border-radius: 20px;
    }


    /* FOTO */

    .fms-outreach-visual {
        min-height: 330px;

        aspect-ratio: auto;
    }

    .fms-outreach-photo-caption {
        right: 20px;
        bottom: 22px;
        left: 20px;

        gap: 12px;
    }

    .fms-outreach-photo-icon {
        width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .fms-outreach-photo-caption span {
        font-size: 7px;

        letter-spacing: 0.8px;
    }

    .fms-outreach-photo-caption strong {
        font-size: 15px;
    }


    /* CONTENIDO */

    .fms-outreach-content {
        padding:
            34px
            20px
            38px;
    }

    .fms-outreach-eyebrow {
        gap: 11px;

        margin-bottom: 11px;
    }

    .fms-outreach-eyebrow > span {
        width: 48px;
        height: 3px;
    }

    .fms-outreach-eyebrow strong {
        font-size: 10px;
    }

    .fms-outreach-title {
        margin-bottom: 19px;

        font-size: 39px;

        line-height: 0.98;

        letter-spacing: -1.6px;
    }

    .fms-outreach-description {
        margin-bottom: 25px;

        font-size: 13px;

        line-height: 1.65;
    }


    /* TARJETAS */

    .fms-outreach-grid {
        gap: 9px;

        margin-bottom: 22px;
    }

    .fms-outreach-item {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        min-height: 82px;

        padding:
            13px
            14px;

        border-radius: 14px;
    }

    .fms-outreach-item-icon {
        width: 49px;
        height: 49px;

        border-radius: 12px;

        font-size: 18px;
    }

    .fms-outreach-item h3 {
        font-size: 13px;
    }

    .fms-outreach-item p {
        font-size: 10px;
    }


    /* ENLACE */

    .fms-outreach-link {
        font-size: 12px;
    }
}


/* ==========================================================
   25. MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 380px) {

    .fms-outreach-visual {
        min-height: 290px;
    }

    .fms-outreach-content {
        padding:
            30px
            17px
            34px;
    }

    .fms-outreach-title {
        font-size: 34px;
    }

    .fms-outreach-description {
        font-size: 12px;
    }
}
/* ==========================================================
   PARTE 5
   EVENTOS · AGENDA FMS
========================================================== */


/* ==========================================================
   01. SECCIÓN GENERAL
========================================================== */

.fms-events {
    --events-navy: #0b1d3a;
    --events-blue: #58709a;

    --events-green: #24b45a;
    --events-green-dark: #078d3e;
    --events-green-soft: #e5f7eb;

    --events-gray: #f4f7fa;
    --events-gray-2: #f7f9fb;
    --events-border: #dfe6ee;
    --events-white: #ffffff;

    width: 100%;

    padding: 18px 12px 55px;

    background: #f3f6f9;
    color: var(--events-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-events *,
.fms-events *::before,
.fms-events *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
========================================================== */

.fms-events-container {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding:
        55px
        68px
        68px;

    background: var(--events-white);

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-events-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.85fr);

    align-items: start;

    gap: 80px;

    margin-bottom: 50px;
}


/* ==========================================================
   04. ETIQUETA AGENDA FMS
========================================================== */

.fms-events-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: var(--events-navy);

    font-size: 11px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.7px;
}


/* ==========================================================
   05. TÍTULO PRINCIPAL
========================================================== */

.fms-events-title {
    margin: 0;

    color: var(--events-navy);

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    font-weight: 850;

    line-height: 0.95;

    letter-spacing: -3.5px;
}

.fms-events-title span {
    color: var(--events-green);
}


/* ==========================================================
   06. INTRODUCCIÓN
========================================================== */

.fms-events-intro {
    padding-top: 1px;
}

.fms-events-intro > p {
    max-width: 650px;

    margin:
        0
        0
        18px;

    color: var(--events-blue);

    font-size: 17px;
    font-weight: 500;

    line-height: 1.55;
}


/* ==========================================================
   07. LEYENDA
========================================================== */

.fms-events-legend {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 22px;
}

.fms-events-legend-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--events-blue);

    font-size: 10px;
    font-weight: 750;

    line-height: 1;
}

.fms-events-legend-item.upcoming i {
    display: block;

    width: 10px;
    height: 10px;

    background: var(--events-green);

    border-radius: 50%;
}

.fms-events-legend-item.completed i {
    color: #a6b4c7;

    font-size: 10px;
}


/* ==========================================================
   08. ENCABEZADO · EVENTOS REALIZADOS
========================================================== */

.fms-events-section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;
}

.fms-events-section-heading {
    display: flex;

    align-items: center;

    gap: 14px;
}

.fms-events-section-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 49px;
    height: 49px;

    flex-shrink: 0;

    color: #557294;
    background: #f0f4f7;

    border-radius: 13px;

    font-size: 16px;
}

.fms-events-section-heading span {
    display: block;

    margin-bottom: 4px;

    color: var(--events-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.3px;
}

.fms-events-section-heading h3 {
    margin: 0;

    color: var(--events-navy);

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.7px;
}


/* ==========================================================
   09. EVENTO DESTACADO
========================================================== */

.fms-event-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(420px, 0.82fr);

    min-height: 560px;

    overflow: hidden;

    background: #f4f7fa;

    border: 1px solid var(--events-border);
    border-radius: 25px;

    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.fms-event-featured:hover {
    border-color: #d4dee8;

    box-shadow:
        0 14px 36px
        rgba(11, 29, 58, 0.07);
}


/* ==========================================================
   10. IMAGEN DEL EVENTO
========================================================== */

.fms-event-featured-image {
    position: relative;

    min-width: 0;
    min-height: 560px;

    overflow: hidden;

    background: #e9edf1;
}

.fms-event-featured-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 29, 58, 0.01) 40%,
            rgba(11, 29, 58, 0.08) 68%,
            rgba(11, 29, 58, 0.58) 100%
        );
}

.fms-event-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.7s ease;
}

.fms-event-featured:hover .fms-event-featured-image img {
    transform: scale(1.025);
}


/* ==========================================================
   11. FECHA SOBRE LA IMAGEN
========================================================== */

.fms-event-date {
    position: absolute;

    z-index: 2;

    top: 22px;
    left: 22px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 70px;
    min-height: 80px;

    padding: 9px 7px;

    color: var(--events-navy);
    background: rgba(255, 255, 255, 0.96);

    border-radius: 15px;

    box-shadow:
        0 8px 22px
        rgba(11, 29, 58, 0.12);
}

.fms-event-date strong {
    display: block;

    font-size: 27px;
    font-weight: 850;

    line-height: 0.95;
}

.fms-event-date span {
    display: block;

    margin-top: 5px;

    color: var(--events-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.5px;
}

.fms-event-date small {
    display: block;

    margin-top: 4px;

    color: #8392a7;

    font-size: 8px;
    font-weight: 800;
}


/* ==========================================================
   12. ESTADO · EVENTO REALIZADO
========================================================== */

.fms-event-status {
    position: absolute;

    z-index: 2;

    bottom: 22px;
    left: 22px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        10px
        15px;

    color: #ffffff;
    background: var(--events-green-dark);

    border-radius: 100px;

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.5px;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.12);
}

.fms-event-status i {
    font-size: 9px;
}


/* ==========================================================
   13. CONTENIDO DERECHO
========================================================== */

.fms-event-featured-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        58px
        55px;
}


/* ==========================================================
   14. CATEGORÍA
========================================================== */

.fms-event-category {
    display: block;

    margin-bottom: 12px;

    color: var(--events-green);

    font-size: 10px;
    font-weight: 850;

    line-height: 1.3;

    letter-spacing: 0.9px;
}


/* ==========================================================
   15. NOMBRE DEL EVENTO
========================================================== */

.fms-event-name {
    max-width: 620px;

    margin:
        0
        0
        22px;

    color: var(--events-navy);

    font-size:
        clamp(
            34px,
            3vw,
            48px
        );

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -2px;
}

.fms-event-name span {
    display: block;

    color: var(--events-green-dark);
}


/* ==========================================================
   16. DESCRIPCIÓN
========================================================== */

.fms-event-description {
    max-width: 680px;

    margin:
        0
        0
        13px;

    color: var(--events-blue);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.65;
}

.fms-event-description strong {
    color: var(--events-navy);

    font-weight: 750;
}

.fms-event-description-secondary {
    margin-bottom: 29px;
}


/* ==========================================================
   17. DATOS DEL EVENTO
========================================================== */

.fms-event-details {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;

    margin-bottom: 31px;
}

.fms-event-detail {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.fms-event-detail-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    color: var(--events-green-dark);
    background: var(--events-green-soft);

    border-radius: 12px;

    font-size: 16px;
}

.fms-event-detail span {
    display: block;

    margin-bottom: 4px;

    color: #8b9aaf;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;
}

.fms-event-detail strong {
    display: block;

    color: var(--events-navy);

    font-size: 11px;
    font-weight: 800;

    line-height: 1.35;
}


/* ==========================================================
   18. BOTÓN VER EVENTO
========================================================== */

.fms-event-button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    align-self: flex-start;

    gap: 35px;

    min-width: 175px;

    padding:
        15px
        18px;

    color: #ffffff;
    background: var(--events-green-dark);

    border: 0;
    border-radius: 11px;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(7, 141, 62, 0.12);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-event-button i {
    font-size: 10px;

    transition:
        transform 0.2s ease;
}

.fms-event-button:hover {
    background: var(--events-green);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(7, 141, 62, 0.18);
}

.fms-event-button:hover i {
    transform: translateX(4px);
}

.fms-event-button:focus-visible {
    outline:
        3px
        solid
        rgba(36, 180, 90, 0.28);

    outline-offset: 4px;
}


/* ==========================================================
   19. CONTENEDOR PARA FUTUROS EVENTOS
========================================================== */

.fms-events-more {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    width: 100%;
}

.fms-events-more:empty {
    display: none;
}


/* ==========================================================
   20. MODAL · VER EVENTO
========================================================== */

.fms-event-modal {
    position: fixed;

    z-index: 9999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.fms-event-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ==========================================================
   21. FONDO DEL MODAL
========================================================== */

.fms-event-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(5, 18, 38, 0.78);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ==========================================================
   22. VENTANA DEL MODAL
========================================================== */

.fms-event-modal-dialog {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.85fr);

    width:
        min(
            1250px,
            95vw
        );

    max-height: 90vh;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.3);

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        transform 0.3s ease;
}

.fms-event-modal.is-open .fms-event-modal-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   23. CERRAR MODAL
========================================================== */

.fms-event-modal-close {
    position: absolute;

    z-index: 5;

    top: 18px;
    right: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    padding: 0;

    color: var(--events-navy);
    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #e1e7ed;
    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(11, 29, 58, 0.1);

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease;
}

.fms-event-modal-close:hover {
    color: #ffffff;
    background: var(--events-green);

    transform: rotate(90deg);
}


/* ==========================================================
   24. IMAGEN DEL MODAL
========================================================== */

.fms-event-modal-image {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #e9edf1;
}

.fms-event-modal-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(11, 29, 58, 0.2) 100%
        );
}

.fms-event-modal-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   25. CONTENIDO DEL MODAL
========================================================== */

.fms-event-modal-content {
    overflow-y: auto;

    padding:
        70px
        55px
        55px;
}

.fms-event-modal-label {
    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    padding:
        8px
        12px;

    color: var(--events-green-dark);
    background: var(--events-green-soft);

    border-radius: 100px;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;
}

.fms-event-modal-content h3 {
    max-width: 580px;

    margin:
        0
        0
        20px;

    color: var(--events-navy);

    font-size:
        clamp(
            32px,
            3vw,
            46px
        );

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -2px;
}


/* ==========================================================
   26. META DEL MODAL
========================================================== */

.fms-event-modal-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap:
        10px
        22px;

    margin-bottom: 30px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--events-border);
}

.fms-event-modal-meta span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--events-blue);

    font-size: 11px;
    font-weight: 650;
}

.fms-event-modal-meta i {
    color: var(--events-green);

    font-size: 12px;
}


/* ==========================================================
   27. TEXTO DEL MODAL
========================================================== */

.fms-event-modal-content > p {
    margin:
        0
        0
        18px;

    color: var(--events-blue);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.75;
}

.fms-event-modal-content > p strong {
    color: var(--events-navy);

    font-weight: 750;
}


/* ==========================================================
   28. TEMAS DEL EVENTO
========================================================== */

.fms-event-modal-topics {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}

.fms-event-modal-topics span {
    display: inline-flex;

    align-items: center;

    padding:
        9px
        13px;

    color: var(--events-green-dark);
    background: var(--events-green-soft);

    border: 1px solid #d2efdc;
    border-radius: 100px;

    font-size: 10px;
    font-weight: 750;
}


/* ==========================================================
   29. BLOQUEAR SCROLL CON MODAL ABIERTO
========================================================== */

body.fms-modal-open {
    overflow: hidden;
}


/* ==========================================================
   30. RESPONSIVE · 1350px
========================================================== */

@media (max-width: 1350px) {

    .fms-events-container {
        padding:
            50px
            50px
            58px;
    }

    .fms-events-header {
        gap: 50px;
    }

    .fms-event-featured {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(390px, 0.95fr);

        min-height: 530px;
    }

    .fms-event-featured-image {
        min-height: 530px;
    }

    .fms-event-featured-content {
        padding:
            45px
            40px;
    }

    .fms-event-name {
        font-size: 39px;
    }
}


/* ==========================================================
   31. RESPONSIVE · TABLET GRANDE
========================================================== */

@media (max-width: 1050px) {

    .fms-events-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 40px;
    }

    .fms-events-intro {
        max-width: 700px;
    }

    .fms-event-featured {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .fms-event-featured-image {
        min-height: auto;

        aspect-ratio: 16 / 9;
    }

    .fms-event-featured-content {
        padding:
            45px
            45px
            50px;
    }

    .fms-event-name {
        max-width: 700px;

        font-size: 43px;
    }

    .fms-event-description {
        max-width: 800px;
    }

    .fms-event-modal-dialog {
        grid-template-columns: 1fr;

        width:
            min(
                800px,
                94vw
            );

        overflow-y: auto;
    }

    .fms-event-modal-image {
        min-height: auto;

        aspect-ratio: 16 / 9;
    }

    .fms-event-modal-content {
        overflow: visible;

        padding:
            45px
            45px
            50px;
    }
}


/* ==========================================================
   32. RESPONSIVE · TABLET
========================================================== */

@media (max-width: 760px) {

    .fms-events {
        padding:
            10px
            8px
            40px;
    }

    .fms-events-container {
        width: 100%;

        padding:
            38px
            25px
            40px;

        border-radius: 22px;
    }

    .fms-events-title {
        font-size: 52px;

        letter-spacing: -2.5px;
    }

    .fms-events-intro > p {
        font-size: 14px;
    }

    .fms-event-featured {
        border-radius: 19px;
    }

    .fms-event-featured-image {
        aspect-ratio: 4 / 3;
    }

    .fms-event-featured-content {
        padding:
            35px
            27px
            38px;
    }

    .fms-event-name {
        font-size: 37px;

        letter-spacing: -1.5px;
    }

    .fms-event-details {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .fms-event-modal {
        padding: 15px;
    }

    .fms-event-modal-dialog {
        width: 100%;
        max-height: 94vh;

        border-radius: 20px;
    }

    .fms-event-modal-content {
        padding:
            38px
            27px
            40px;
    }
}


/* ==========================================================
   33. RESPONSIVE · MÓVIL
========================================================== */

@media (max-width: 520px) {

    .fms-events-container {
        padding:
            32px
            17px
            32px;
    }

    .fms-events-eyebrow {
        font-size: 9px;
    }

    .fms-events-title {
        font-size: 43px;

        line-height: 0.98;

        letter-spacing: -2px;
    }

    .fms-events-intro > p {
        font-size: 13px;

        line-height: 1.6;
    }

    .fms-events-legend {
        gap: 14px;
    }

    .fms-events-legend-item {
        font-size: 8px;
    }

    .fms-events-section-icon {
        width: 43px;
        height: 43px;

        border-radius: 11px;
    }

    .fms-events-section-heading span {
        font-size: 8px;
    }

    .fms-events-section-heading h3 {
        font-size: 18px;
    }

    .fms-event-featured-image {
        aspect-ratio: 1.2 / 1;
    }

    .fms-event-date {
        top: 14px;
        left: 14px;

        width: 60px;
        min-height: 70px;

        border-radius: 12px;
    }

    .fms-event-date strong {
        font-size: 23px;
    }

    .fms-event-status {
        bottom: 14px;
        left: 14px;

        padding:
            8px
            11px;

        font-size: 7px;
    }

    .fms-event-featured-content {
        padding:
            30px
            20px
            32px;
    }

    .fms-event-category {
        font-size: 8px;
    }

    .fms-event-name {
        margin-bottom: 18px;

        font-size: 31px;

        letter-spacing: -1.3px;
    }

    .fms-event-description {
        font-size: 12px;

        line-height: 1.65;
    }

    .fms-event-description-secondary {
        margin-bottom: 23px;
    }

    .fms-event-detail-icon {
        width: 41px;
        height: 41px;

        font-size: 14px;
    }

    .fms-event-detail strong {
        font-size: 10px;
    }

    .fms-event-button {
        width: 100%;
        min-width: 0;

        padding:
            15px
            17px;
    }

    .fms-event-modal {
        padding: 8px;
    }

    .fms-event-modal-dialog {
        max-height: 96vh;

        border-radius: 17px;
    }

    .fms-event-modal-image {
        aspect-ratio: 4 / 3;
    }

    .fms-event-modal-close {
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;

        font-size: 15px;
    }

    .fms-event-modal-content {
        padding:
            30px
            20px
            35px;
    }

    .fms-event-modal-content h3 {
        font-size: 30px;

        letter-spacing: -1.4px;
    }

    .fms-event-modal-meta {
        align-items: flex-start;

        flex-direction: column;
    }

    .fms-event-modal-content > p {
        font-size: 12px;

        line-height: 1.7;
    }

    .fms-event-modal-topics span {
        font-size: 9px;
    }
}


/* ==========================================================
   34. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-event-featured,
    .fms-event-featured-image img,
    .fms-event-button,
    .fms-event-button i,
    .fms-event-modal,
    .fms-event-modal-dialog,
    .fms-event-modal-close {
        transition: none !important;
    }
}
/* ==========================================================
   PARTE 7
   NOTICIAS Y EVENTOS — FMS
========================================================== */

.fms-news {
    --news-navy: #0b1d3a;
    --news-navy-light: #153d66;

    --news-green: #28bd59;
    --news-green-dark: #087e3e;
    --news-green-soft: #eaf8ef;

    --news-blue: #58709a;
    --news-muted: #7c8ca3;

    --news-bg: #f4f7fa;
    --news-card: #ffffff;

    --news-border: #e2e8f0;
    --news-soft: #f6f8fa;

    width: 100%;

    padding: 12px 10px 18px;

    background: var(--news-bg);

    font-family: "Inter", Arial, sans-serif;

    color: var(--news-navy);
}


/* ==========================================================
   01. RESET EXCLUSIVO
========================================================== */

.fms-news *,
.fms-news *::before,
.fms-news *::after,
.fms-news-modal *,
.fms-news-modal *::before,
.fms-news-modal *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
========================================================== */

.fms-news-container {
    width: 100%;
    max-width: 1900px;

    margin: 0 auto;

    padding: 48px 58px 50px;

    background: #ffffff;

    border: 1px solid #dfe5eb;
    border-radius: 27px;

    box-shadow:
        0 8px 30px
        rgba(11, 29, 58, 0.035);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-news-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.65fr);

    align-items: start;

    gap: 80px;
}


/* ==========================================================
   04. EYEBROW
========================================================== */

.fms-news-eyebrow,
.fms-news-section-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--news-green-dark);

    font-size: 8px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* ==========================================================
   05. TÍTULO PRINCIPAL
========================================================== */

.fms-news-title {
    margin: 0;

    color: var(--news-navy);

    font-size: 31px;
    font-weight: 850;

    line-height: 1.05;

    letter-spacing: -1.2px;
}

.fms-news-title strong {
    color: var(--news-green);

    font-weight: inherit;
}


/* ==========================================================
   06. INTRO
========================================================== */

.fms-news-intro {
    padding-top: 6px;
}

.fms-news-intro p {
    max-width: 550px;

    margin: 0;

    color: var(--news-blue);

    font-size: 9px;
    font-weight: 450;

    line-height: 1.65;
}


/* ==========================================================
   07. LEYENDA
========================================================== */

.fms-news-legend {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 13px;
}

.fms-news-legend span {
    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--news-blue);

    font-size: 7px;
    font-weight: 600;
}

.fms-news-dot {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.fms-news-dot.is-green {
    background: var(--news-green);
}

.fms-news-dot.is-navy {
    background: var(--news-navy);
}


/* ==========================================================
   08. DIVISOR
========================================================== */

.fms-news-divider {
    width: 100%;
    height: 1px;

    margin: 31px 0 33px;

    background: #e6ebf0;
}


/* ==========================================================
   09. CABECERAS DE BLOQUES
========================================================== */

.fms-news-section-header,
.fms-news-latest-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;
}

.fms-news-section-header h3,
.fms-news-latest-header h3 {
    margin: 0;

    color: var(--news-navy);

    font-size: 16px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: -0.4px;
}


/* ==========================================================
   10. CONTROLES DESTACADOS
========================================================== */

.fms-news-featured-controls {
    display: flex;

    align-items: center;

    gap: 8px;
}

.fms-news-featured-prev,
.fms-news-featured-next {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    padding: 0;

    color: var(--news-navy);
    background: #f6f8fa;

    border: 1px solid #e1e7ed;
    border-radius: 50%;

    cursor: pointer;

    font-size: 10px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.fms-news-featured-prev:hover,
.fms-news-featured-next:hover {
    color: #ffffff;

    background: var(--news-green-dark);

    border-color: var(--news-green-dark);

    transform: translateY(-1px);
}


/* ==========================================================
   11. NOTICIA DESTACADA
   SIN ALTURA FIJA
========================================================== */

.fms-news-featured {
    width: 100%;

    min-height: 0;

    margin: 0;
    padding: 0;
}

.fms-news-featured-card {
    display: grid;

    grid-template-columns:
        minmax(380px, 0.92fr)
        minmax(0, 1.08fr);

    width: 100%;
    min-height: 310px;

    overflow: hidden;

    background: #f7f9fb;

    border: 1px solid #e1e7ec;
    border-radius: 21px;
}


/* ==========================================================
   12. IMAGEN DESTACADA
========================================================== */

.fms-news-featured-image {
    position: relative;

    min-height: 310px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eaf8ef,
            #dfe8ef
        );
}

.fms-news-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 310px;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.fms-news-featured-card:hover
.fms-news-featured-image img {
    transform: scale(1.025);
}


/* ==========================================================
   13. FECHA DESTACADA
========================================================== */

.fms-news-date-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 62px;

    color: #ffffff;
    background: var(--news-green-dark);

    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;

    box-shadow:
        0 8px 20px
        rgba(11, 29, 58, 0.13);
}

.fms-news-date-badge strong {
    display: block;

    font-size: 19px;
    font-weight: 900;

    line-height: 1;
}

.fms-news-date-badge span {
    display: block;

    margin-top: 4px;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.8px;
}


/* ==========================================================
   14. CONTENIDO DESTACADO
========================================================== */

.fms-news-featured-content {
    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 39px 45px;
}

.fms-news-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;
}

.fms-news-category {
    color: var(--news-green-dark);

    font-size: 7px;
    font-weight: 850;

    line-height: 1.3;

    letter-spacing: 0.75px;

    text-transform: uppercase;
}

.fms-news-type {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 22px;

    padding: 4px 9px;

    color: var(--news-navy);
    background: #e9eef3;

    border-radius: 100px;

    font-size: 6px;
    font-weight: 750;

    text-transform: uppercase;
}

.fms-news-featured-content h3 {
    max-width: 700px;

    margin: 0;

    color: var(--news-navy);

    font-size: 27px;
    font-weight: 850;

    line-height: 1.12;

    letter-spacing: -0.8px;
}

.fms-news-location {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: var(--news-green-dark);

    font-size: 8px;
    font-weight: 650;
}

.fms-news-location i {
    font-size: 9px;
}

.fms-news-featured-content > p {
    max-width: 720px;

    margin:
        17px
        0
        0;

    color: var(--news-blue);

    font-size: 9px;
    font-weight: 450;

    line-height: 1.7;
}


/* ==========================================================
   15. BOTÓN LEER NOTICIA
========================================================== */

.fms-news-read {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    align-self: flex-start;

    gap: 9px;

    min-height: 38px;

    margin-top: 22px;

    padding: 9px 16px;

    color: #ffffff;
    background: var(--news-green-dark);

    border: 0;
    border-radius: 9px;

    cursor: pointer;

    font-family: inherit;

    font-size: 8px;
    font-weight: 750;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-news-read:hover {
    background: var(--news-green);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(8, 126, 62, 0.16);
}


/* ==========================================================
   16. ÚLTIMAS NOTICIAS
========================================================== */

.fms-news-latest {
    margin-top: 37px;

    padding-top: 33px;

    border-top: 1px solid #e6ebf0;
}


/* ==========================================================
   17. FILTROS
========================================================== */

.fms-news-filters {
    display: flex;

    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 7px;
}

.fms-news-filter {
    min-height: 32px;

    padding:
        7px
        15px;

    color: #71819a;
    background: #f5f7f9;

    border: 1px solid #e2e7ec;
    border-radius: 100px;

    cursor: pointer;

    font-family: inherit;

    font-size: 7px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.fms-news-filter:hover {
    color: var(--news-navy);

    background: #eef2f5;
}

.fms-news-filter.is-active {
    color: #ffffff;

    background: var(--news-green-dark);

    border-color: var(--news-green-dark);
}


/* ==========================================================
   18. GRID DE NOTICIAS
========================================================== */

.fms-news-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    width: 100%;
    min-height: 0;

    margin-top: 20px;
}


/* ==========================================================
   19. TARJETA DE NOTICIA
========================================================== */

.fms-news-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e7ec;
    border-radius: 16px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.fms-news-card:hover {
    transform: translateY(-3px);

    border-color: #d5e1d9;

    box-shadow:
        0 12px 28px
        rgba(11, 29, 58, 0.07);
}


/* ==========================================================
   20. IMAGEN DE TARJETA
========================================================== */

.fms-news-card-image {
    position: relative;

    height: 185px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf8f1,
            #e7edf2
        );
}

.fms-news-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.fms-news-card:hover
.fms-news-card-image img {
    transform: scale(1.035);
}

.fms-news-card-label {
    position: absolute;

    top: 13px;
    left: 13px;

    display: inline-flex;

    align-items: center;

    min-height: 23px;

    padding: 5px 9px;

    color: #ffffff;
    background: rgba(11, 29, 58, 0.88);

    border-radius: 100px;

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;
}


/* ==========================================================
   21. CONTENIDO DE TARJETA
========================================================== */

.fms-news-card-content {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 20px;
}

.fms-news-card-date {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    color: var(--news-green-dark);

    font-size: 7px;
    font-weight: 650;
}

.fms-news-card-content h4 {
    margin: 0;

    color: var(--news-navy);

    font-size: 14px;
    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -0.25px;
}

.fms-news-card-content p {
    margin:
        11px
        0
        0;

    color: var(--news-blue);

    font-size: 8px;

    line-height: 1.65;
}


/* ==========================================================
   22. BOTÓN DE TARJETA
========================================================== */

.fms-news-card-button {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 7px;

    margin-top: auto;

    padding:
        17px
        0
        0;

    color: var(--news-green-dark);
    background: transparent;

    border: 0;

    cursor: pointer;

    font-family: inherit;

    font-size: 7px;
    font-weight: 800;
}

.fms-news-card-button i {
    transition:
        transform 0.2s ease;
}

.fms-news-card-button:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   23. SIN RESULTADOS
========================================================== */

.fms-news-empty {
    grid-column: 1 / -1;

    width: 100%;

    padding: 35px 25px;

    color: var(--news-muted);
    background: #f7f9fb;

    border: 1px dashed #dbe3e9;
    border-radius: 14px;

    font-size: 8px;

    text-align: center;
}


/* ==========================================================
   24. IMAGEN NO DISPONIBLE
========================================================== */

.fms-news-image-missing {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #eef8f1,
            #e8eef3
        );
}

.fms-news-image-missing::after {
    content: "FMS";

    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    color: #ffffff;
    background: var(--news-green-dark);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 900;

    transform:
        translate(
            -50%,
            -50%
        );
}


/* ==========================================================
   25. VER MÁS NOTICIAS
========================================================== */

.fms-news-more {
    display: flex;

    justify-content: center;

    margin-top: 24px;
}

#fms-news-more {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 38px;

    padding: 9px 17px;

    color: var(--news-navy);
    background: #f6f8fa;

    border: 1px solid #e1e7ec;
    border-radius: 9px;

    cursor: pointer;

    font-family: inherit;

    font-size: 7px;
    font-weight: 750;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

#fms-news-more:hover {
    color: #ffffff;

    background: var(--news-navy);

    border-color: var(--news-navy);
}


/* ==========================================================
   26. FOOTER DE NOTICIAS
========================================================== */

.fms-news-footer {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 37px;

    padding:
        18px
        21px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            #0b1d3a,
            #123f68
        );

    border-radius: 15px;
}

.fms-news-footer-icon {
    display: flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #ffffff;
    background: var(--news-green);

    border-radius: 11px;

    font-size: 15px;
}

.fms-news-footer span {
    display: block;

    margin-bottom: 3px;

    color: #5ee585;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 1px;
}

.fms-news-footer strong {
    display: block;

    font-size: 10px;
    font-weight: 800;
}

.fms-news-footer p {
    margin:
        3px
        0
        0;

    color: #c3cfdd;

    font-size: 7px;

    line-height: 1.45;
}


/* ==========================================================
   27. MODAL
========================================================== */

.fms-news-modal {
    position: fixed;

    z-index: 9999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.fms-news-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ==========================================================
   28. FONDO DEL MODAL
========================================================== */

.fms-news-modal-backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    background: rgba(5, 17, 34, 0.72);

    border: 0;

    cursor: pointer;

    backdrop-filter: blur(4px);
}


/* ==========================================================
   29. VENTANA DEL MODAL
========================================================== */

.fms-news-modal-dialog {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);

    width:
        min(
            1050px,
            100%
        );

    max-height:
        calc(
            100vh - 50px
        );

    overflow: hidden;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.24);
}


/* ==========================================================
   30. CERRAR MODAL
========================================================== */

.fms-news-modal-close {
    position: absolute;

    z-index: 5;

    top: 15px;
    right: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    color: var(--news-navy);
    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #e0e6eb;
    border-radius: 50%;

    cursor: pointer;

    font-size: 11px;

    box-shadow:
        0 5px 14px
        rgba(11, 29, 58, 0.08);
}


/* ==========================================================
   31. IMAGEN DEL MODAL
========================================================== */

.fms-news-modal-image {
    min-height: 530px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf8f1,
            #e8eef3
        );
}

.fms-news-modal-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   32. CONTENIDO DEL MODAL
========================================================== */

.fms-news-modal-content {
    max-height:
        calc(
            100vh - 50px
        );

    overflow-y: auto;

    padding:
        55px
        48px
        45px;
}

.fms-news-modal-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 12px;

    color: var(--news-green-dark);

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}

.fms-news-modal-separator {
    color: #a5b0bd;
}

.fms-news-modal-content h2 {
    margin: 0;

    color: var(--news-navy);

    font-size: 27px;
    font-weight: 850;

    line-height: 1.12;

    letter-spacing: -0.7px;
}

.fms-news-modal-location {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 14px;

    color: var(--news-green-dark);

    font-size: 8px;
    font-weight: 650;
}

.fms-news-modal-body {
    margin-top: 24px;
}

.fms-news-modal-body p {
    margin:
        0
        0
        15px;

    color: var(--news-blue);

    font-size: 9px;

    line-height: 1.75;
}

.fms-news-modal-body strong {
    color: var(--news-navy);

    font-weight: 750;
}

.fms-news-modal-source {
    margin-top: 24px;
}

.fms-news-modal-source a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--news-green-dark);

    font-size: 8px;
    font-weight: 750;

    text-decoration: none;
}


/* ==========================================================
   33. BLOQUEAR SCROLL
========================================================== */

body.fms-news-modal-open {
    overflow: hidden;
}


/* ==========================================================
   34. RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-news-container {
        padding:
            45px
            40px;
    }

    .fms-news-header {
        grid-template-columns:
            1fr
            0.75fr;

        gap: 50px;
    }

    .fms-news-featured-content {
        padding:
            34px
            35px;
    }
}


/* ==========================================================
   35. RESPONSIVE · 900px
========================================================== */

@media (max-width: 900px) {

    .fms-news-header {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .fms-news-intro {
        padding-top: 0;
    }

    .fms-news-featured-card {
        grid-template-columns: 1fr;
    }

    .fms-news-featured-image,
    .fms-news-featured-image img {
        min-height: 280px;
        height: 280px;
    }

    .fms-news-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .fms-news-modal-dialog {
        grid-template-columns: 1fr;

        overflow-y: auto;
    }

    .fms-news-modal-image {
        min-height: 300px;
        height: 300px;
    }

    .fms-news-modal-content {
        max-height: none;
    }
}


/* ==========================================================
   36. RESPONSIVE · 700px
========================================================== */

@media (max-width: 700px) {

    .fms-news {
        padding:
            8px
            7px
            15px;
    }

    .fms-news-container {
        padding:
            31px
            18px
            35px;

        border-radius: 20px;
    }

    .fms-news-title {
        font-size: 27px;
    }

    .fms-news-section-header,
    .fms-news-latest-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .fms-news-latest-header {
        gap: 15px;
    }

    .fms-news-filters {
        justify-content: flex-start;

        width: 100%;
    }

    .fms-news-featured-content {
        padding:
            27px
            22px
            29px;
    }

    .fms-news-featured-content h3 {
        font-size: 22px;
    }

    .fms-news-grid {
        grid-template-columns: 1fr;
    }

    .fms-news-footer {
        align-items: flex-start;
    }

    .fms-news-modal {
        padding: 10px;
    }

    .fms-news-modal-dialog {
        max-height:
            calc(
                100vh - 20px
            );

        border-radius: 17px;
    }

    .fms-news-modal-image {
        min-height: 230px;
        height: 230px;
    }

    .fms-news-modal-content {
        padding:
            31px
            22px
            28px;
    }

    .fms-news-modal-content h2 {
        padding-right: 25px;

        font-size: 22px;
    }
}


/* ==========================================================
   37. RESPONSIVE · 480px
========================================================== */

@media (max-width: 480px) {

    .fms-news-title {
        font-size: 25px;
    }

    .fms-news-featured-image,
    .fms-news-featured-image img {
        min-height: 220px;
        height: 220px;
    }

    .fms-news-date-badge {
        top: 13px;
        left: 13px;

        width: 50px;
        height: 55px;
    }

    .fms-news-featured-content h3 {
        font-size: 20px;
    }

    .fms-news-filter {
        padding:
            7px
            12px;
    }

    .fms-news-card-image {
        height: 170px;
    }
}


/* ==========================================================
   38. REDUCIR MOVIMIENTO
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-news *,
    .fms-news-modal * {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}
/* ==========================================================
   PARTE 6
   NUESTROS ASOCIADOS · COLABORACIÓN INSTITUCIONAL
========================================================== */


/* ==========================================================
   01. SECCIÓN GENERAL
========================================================== */

.fms-partners {
    --partners-navy: #0b1d3a;
    --partners-blue: #58709a;

    --partners-green: #24b45a;
    --partners-green-dark: #078d3e;
    --partners-green-soft: #e5f7eb;

    --partners-bg: #f3f6f9;
    --partners-card: #ffffff;
    --partners-item: #f7f9fb;
    --partners-border: #dfe6ee;

    width: 100%;

    padding: 18px 12px 55px;

    background: var(--partners-bg);
    color: var(--partners-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-partners *,
.fms-partners *::before,
.fms-partners *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
========================================================== */

.fms-partners-container {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding:
        75px
        68px
        65px;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-partners-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 55px;

    margin-bottom: 38px;
}


/* ==========================================================
   04. ETIQUETA
========================================================== */

.fms-partners-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--partners-navy);

    font-size: 11px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.7px;
}


/* ==========================================================
   05. TÍTULO
========================================================== */

.fms-partners-title {
    margin:
        0
        0
        18px;

    color: var(--partners-navy);

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    font-weight: 850;

    line-height: 0.95;

    letter-spacing: -3.5px;
}

.fms-partners-title span {
    color: var(--partners-green);
}


/* ==========================================================
   06. DESCRIPCIÓN
========================================================== */

.fms-partners-description {
    max-width: 980px;

    margin: 0;

    color: var(--partners-blue);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================================
   07. CONTADOR 15+
========================================================== */

.fms-partners-counter {
    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 315px;

    padding:
        22px
        28px;

    background:
        linear-gradient(
            135deg,
            #eefbf3,
            #e4f7eb
        );

    border: 1px solid #ccebd7;
    border-radius: 19px;
}

.fms-partners-counter-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    flex-shrink: 0;

    color: var(--partners-green-dark);
    background: #d3f3de;

    border-radius: 16px;

    font-size: 25px;
}

.fms-partners-counter strong {
    display: block;

    margin-bottom: 6px;

    color: var(--partners-navy);

    font-size: 30px;
    font-weight: 850;

    line-height: 0.9;

    letter-spacing: -1.5px;
}

.fms-partners-counter span {
    display: block;

    color: var(--partners-blue);

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;
}


/* ==========================================================
   08. FILTROS
========================================================== */

.fms-partners-filters {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}

.fms-partners-filter {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding:
        0
        17px;

    color: #58708f;
    background: #f5f7fa;

    border: 1px solid #dce3eb;
    border-radius: 100px;

    font-family: inherit;

    font-size: 10px;
    font-weight: 750;

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fms-partners-filter i {
    color: #778ba5;

    font-size: 10px;

    transition:
        color 0.2s ease;
}

.fms-partners-filter:hover {
    color: var(--partners-green-dark);
    background: #f2fbf5;

    border-color: #c9e4d2;
}

.fms-partners-filter.is-active {
    color: #ffffff;
    background: var(--partners-green-dark);

    border-color: var(--partners-green-dark);

    box-shadow:
        0 4px 12px
        rgba(7, 141, 62, 0.13);
}

.fms-partners-filter.is-active i {
    color: #ffffff;
}

.fms-partners-filter:focus-visible {
    outline:
        3px
        solid
        rgba(36, 180, 90, 0.22);

    outline-offset: 3px;
}


/* ==========================================================
   09. DIVISOR
========================================================== */

.fms-partners-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 25px;

    background: #dfe5ec;
}


/* ==========================================================
   10. CUADRÍCULA
========================================================== */

.fms-partners-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 13px;

    width: 100%;

    margin-bottom: 30px;
}


/* ==========================================================
   11. TARJETA DE ASOCIADO
========================================================== */

.fms-partner-card {
    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr);

    align-items: center;

    gap: 16px;

    min-width: 0;
    min-height: 120px;

    padding:
        16px
        17px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #f5f7fa
        );

    border: 1px solid var(--partners-border);
    border-radius: 17px;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        opacity 0.25s ease;
}

.fms-partner-card:hover {
    transform: translateY(-3px);

    border-color: #cfd9e4;

    box-shadow:
        0 9px 22px
        rgba(11, 29, 58, 0.06);
}

.fms-partner-card.is-hidden {
    display: none;
}


/* ==========================================================
   12. LOGO
========================================================== */

.fms-partner-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    flex-shrink: 0;

    overflow: hidden;

    color: #ffffff;

    border-radius: 18px;

    font-size: 16px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.6px;

    text-align: center;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.08);

    transition:
        transform 0.22s ease;
}

.fms-partner-card:hover .fms-partner-logo {
    transform: scale(1.035);
}

.fms-partner-logo i {
    font-size: 25px;
}


/* ==========================================================
   13. INFORMACIÓN
========================================================== */

.fms-partner-info {
    min-width: 0;
}

.fms-partner-info span {
    display: block;

    margin-bottom: 7px;

    color: var(--partners-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: 0.8px;
}

.fms-partner-info h3 {
    margin: 0;

    color: var(--partners-navy);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.25px;
}


/* ==========================================================
   14. COLORES DE LOGOS
========================================================== */

.fms-logo-green {
    background:
        linear-gradient(
            145deg,
            #27b85d,
            #079047
        );
}

.fms-logo-orange {
    background:
        linear-gradient(
            145deg,
            #ff9839,
            #ff7118
        );
}

.fms-logo-burgundy {
    background:
        linear-gradient(
            145deg,
            #9b3659,
            #792541
        );
}

.fms-logo-blue {
    background:
        linear-gradient(
            145deg,
            #34a8d7,
            #1d83b6
        );
}

.fms-logo-cyan {
    background:
        linear-gradient(
            145deg,
            #39b7cb,
            #1d8ba6
        );
}

.fms-logo-imss {
    background:
        linear-gradient(
            145deg,
            #14965b,
            #087746
        );
}

.fms-logo-purple {
    background:
        linear-gradient(
            145deg,
            #9373d5,
            #6448ae
        );
}

.fms-logo-navy {
    background:
        linear-gradient(
            145deg,
            #294f79,
            #102d50
        );
}

.fms-logo-darkblue {
    background:
        linear-gradient(
            145deg,
            #234d78,
            #0d2c50
        );
}

.fms-logo-red {
    background:
        linear-gradient(
            145deg,
            #ef4a4e,
            #d82934
        );
}

.fms-logo-lime {
    background:
        linear-gradient(
            145deg,
            #88ca42,
            #59a92e
        );
}

.fms-logo-sky {
    background:
        linear-gradient(
            145deg,
            #36a9da,
            #1989bd
        );
}

.fms-logo-city {
    background:
        linear-gradient(
            145deg,
            #32b960,
            #079344
        );
}

.fms-logo-edome {
    background:
        linear-gradient(
            145deg,
            #16935b,
            #087441
        );
}


/* ==========================================================
   15. FRANJA INFERIOR
========================================================== */

.fms-partners-alliance {
    display: flex;

    align-items: center;

    gap: 22px;

    width: 100%;
    min-height: 115px;

    padding:
        23px
        31px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #092448,
            #153e65
        );

    border-radius: 19px;

    overflow: hidden;
}

.fms-partners-alliance-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 67px;
    height: 67px;

    flex-shrink: 0;

    color: #087d3f;
    background: #61e68b;

    border-radius: 15px;

    font-size: 24px;
}

.fms-partners-alliance-content {
    min-width: 0;
}

.fms-partners-alliance-content > span {
    display: block;

    margin-bottom: 6px;

    color: #58dd82;

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.2px;
}

.fms-partners-alliance-content h3 {
    margin:
        0
        0
        6px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.5px;
}

.fms-partners-alliance-content p {
    max-width: 1200px;

    margin: 0;

    color: rgba(255, 255, 255, 0.74);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================================
   16. ANIMACIÓN DE FILTRADO
========================================================== */

.fms-partner-card.fms-partner-enter {
    animation:
        fmsPartnerEnter
        0.35s
        ease
        both;
}

@keyframes fmsPartnerEnter {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* ==========================================================
   17. RESPONSIVE · 1450px
========================================================== */

@media (max-width: 1450px) {

    .fms-partners-container {
        padding:
            60px
            50px
            55px;
    }

    .fms-partners-header {
        gap: 35px;
    }

    .fms-partners-grid {
        gap: 11px;
    }

    .fms-partner-card {
        grid-template-columns:
            67px
            minmax(0, 1fr);

        min-height: 105px;

        gap: 13px;

        padding: 14px;
    }

    .fms-partner-logo {
        width: 67px;
        height: 67px;

        border-radius: 16px;

        font-size: 14px;
    }

    .fms-partner-info h3 {
        font-size: 11px;
    }
}


/* ==========================================================
   18. RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-partners-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .fms-partners-title {
        font-size: 60px;
    }

    .fms-partners-description {
        font-size: 14px;
    }

    .fms-partners-counter {
        min-width: 270px;

        padding:
            18px
            20px;
    }
}


/* ==========================================================
   19. RESPONSIVE · 900px
========================================================== */

@media (max-width: 900px) {

    .fms-partners-header {
        grid-template-columns: 1fr;

        gap: 27px;
    }

    .fms-partners-counter {
        justify-self: start;
    }

    .fms-partners-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .fms-partner-card {
        min-height: 110px;
    }
}


/* ==========================================================
   20. RESPONSIVE · 700px
========================================================== */

@media (max-width: 700px) {

    .fms-partners {
        padding:
            10px
            8px
            40px;
    }

    .fms-partners-container {
        width: 100%;

        padding:
            40px
            25px;

        border-radius: 22px;
    }

    .fms-partners-title {
        font-size: 50px;

        letter-spacing: -2.5px;
    }

    .fms-partners-description {
        font-size: 13px;
    }

    .fms-partners-filters {
        gap: 7px;
    }

    .fms-partners-filter {
        min-height: 36px;

        padding:
            0
            13px;

        font-size: 9px;
    }

    .fms-partners-grid {
        grid-template-columns: 1fr;
    }

    .fms-partner-card {
        grid-template-columns:
            65px
            minmax(0, 1fr);

        min-height: 95px;
    }

    .fms-partner-logo {
        width: 65px;
        height: 65px;
    }

    .fms-partner-info h3 {
        font-size: 12px;
    }

    .fms-partners-alliance {
        align-items: flex-start;

        padding:
            24px
            23px;
    }
}


/* ==========================================================
   21. RESPONSIVE · MÓVIL
========================================================== */

@media (max-width: 520px) {

    .fms-partners-container {
        padding:
            33px
            17px;
    }

    .fms-partners-eyebrow {
        font-size: 9px;

        letter-spacing: 1.3px;
    }

    .fms-partners-title {
        margin-bottom: 16px;

        font-size: 42px;

        line-height: 0.98;

        letter-spacing: -2px;
    }

    .fms-partners-description {
        font-size: 12px;

        line-height: 1.65;
    }

    .fms-partners-counter {
        width: 100%;
        min-width: 0;

        padding:
            16px
            18px;

        border-radius: 15px;
    }

    .fms-partners-counter-icon {
        width: 54px;
        height: 54px;

        border-radius: 13px;

        font-size: 21px;
    }

    .fms-partners-counter strong {
        font-size: 25px;
    }

    .fms-partners-counter span {
        font-size: 9px;
    }

    .fms-partners-filters {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        align-items: stretch;

        gap: 7px;
    }

    .fms-partners-filter {
        width: 100%;

        padding:
            0
            9px;

        font-size: 8px;
    }

    .fms-partners-filter:first-child {
        grid-column:
            1 / -1;
    }

    .fms-partner-card {
        grid-template-columns:
            59px
            minmax(0, 1fr);

        gap: 13px;

        min-height: 88px;

        padding: 13px;

        border-radius: 14px;
    }

    .fms-partner-logo {
        width: 59px;
        height: 59px;

        border-radius: 14px;

        font-size: 12px;
    }

    .fms-partner-logo i {
        font-size: 20px;
    }

    .fms-partner-info span {
        margin-bottom: 5px;

        font-size: 7px;
    }

    .fms-partner-info h3 {
        font-size: 11px;
    }

    .fms-partners-alliance {
        flex-direction: column;

        gap: 16px;

        min-height: auto;

        padding:
            22px
            20px;

        border-radius: 16px;
    }

    .fms-partners-alliance-icon {
        width: 55px;
        height: 55px;

        border-radius: 13px;

        font-size: 20px;
    }

    .fms-partners-alliance-content > span {
        font-size: 8px;
    }

    .fms-partners-alliance-content h3 {
        font-size: 17px;
    }

    .fms-partners-alliance-content p {
        font-size: 10px;
    }
}


/* ==========================================================
   22. RESPONSIVE · MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 380px) {

    .fms-partners-title {
        font-size: 37px;
    }

    .fms-partners-filters {
        grid-template-columns: 1fr;
    }

    .fms-partners-filter:first-child {
        grid-column: auto;
    }
}


/* ==========================================================
   23. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-partner-card,
    .fms-partner-logo,
    .fms-partners-filter {
        transition: none !important;
    }

    .fms-partner-card.fms-partner-enter {
        animation: none !important;
    }
}
/* ==========================================================
   PARTE 8
   RESPALDO Y TRAYECTORIA
   RECONOCIMIENTOS Y AVALES
========================================================== */


/* ==========================================================
   01. VARIABLES Y SECCIÓN GENERAL
========================================================== */

.fms-recognition {
    --fms-rec-navy: #0b1d3a;
    --fms-rec-navy-2: #12385d;
    --fms-rec-blue-text: #58709a;

    --fms-rec-green: #24b45a;
    --fms-rec-green-dark: #078d3e;
    --fms-rec-green-light: #61e38b;
    --fms-rec-green-soft: #e5f7eb;

    --fms-rec-crimson: #a51c30;
    --fms-rec-crimson-dark: #7f1525;
    --fms-rec-crimson-soft: #f7e9e8;
    --fms-rec-cream: #fffaf3;

    --fms-rec-bg: #f3f6f9;
    --fms-rec-card: #ffffff;
    --fms-rec-border: #dfe6ee;

    width: 100%;

    padding: 18px 12px 55px;

    background: var(--fms-rec-bg);
    color: var(--fms-rec-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-recognition *,
.fms-recognition *::before,
.fms-recognition *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
========================================================== */

.fms-recognition-container {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding: 72px 68px 60px;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-recognition-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.72fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 42px;
}

.fms-recognition-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--fms-rec-navy);

    font-size: 11px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.7px;
}

.fms-recognition-title {
    margin: 0;

    color: var(--fms-rec-navy);

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    font-weight: 850;

    line-height: 0.95;

    letter-spacing: -3.5px;
}

.fms-recognition-title span {
    display: block;

    color: var(--fms-rec-green);
}

.fms-recognition-intro {
    padding-bottom: 5px;
}

.fms-recognition-intro p {
    max-width: 650px;

    margin: 0;

    color: var(--fms-rec-blue-text);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================================
   04. CUADRÍCULA PRINCIPAL
========================================================== */

.fms-recognition-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    gap: 18px;

    margin-bottom: 18px;
}


/* ==========================================================
   05. RACE AWARDS · TARJETA PRINCIPAL
========================================================== */

.fms-award-card {
    position: relative;

    min-height: 480px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            var(--fms-rec-cream) 100%
        );

    border: 1px solid #ead5d4;
    border-radius: 24px;

    box-shadow:
        0 8px 25px
        rgba(165, 28, 48, 0.045);
}

.fms-award-card::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -120px;

    width: 320px;
    height: 320px;

    background:
        radial-gradient(
            circle,
            rgba(165, 28, 48, 0.065),
            transparent 68%
        );

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   06. CABECERA CARMESÍ
========================================================== */

.fms-award-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 78px;

    padding: 16px 28px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            var(--fms-rec-crimson),
            #8e182a
        );
}

.fms-award-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    color: var(--fms-rec-crimson);
    background: #ffffff;

    border-radius: 12px;

    font-size: 19px;

    box-shadow:
        0 5px 15px
        rgba(75, 8, 18, 0.15);
}

.fms-award-top > span {
    color: #ffffff;

    font-size: 10px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.4px;
}


/* ==========================================================
   07. CONTENIDO RACE AWARDS
========================================================== */

.fms-award-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;
    justify-content: center;

    min-height: 400px;

    padding: 48px 48px 42px;
}

.fms-award-year {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    align-self: flex-start;

    min-width: 72px;

    margin-bottom: 19px;

    padding: 8px 13px;

    color: var(--fms-rec-crimson);
    background: var(--fms-rec-crimson-soft);

    border: 1px solid #efd2d5;
    border-radius: 100px;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: 0.8px;
}

.fms-award-content h3 {
    margin: 0 0 18px;

    color: var(--fms-rec-crimson);

    font-size:
        clamp(
            38px,
            3.5vw,
            55px
        );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -2.5px;
}

.fms-award-content > p {
    max-width: 700px;

    margin: 0 0 32px;

    color: #62525a;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.7;
}

.fms-award-content > p strong {
    color: var(--fms-rec-crimson-dark);

    font-weight: 800;
}


/* ==========================================================
   08. PIE RACE AWARDS
========================================================== */

.fms-award-footer {
    display: flex;

    align-items: center;

    gap: 13px;

    max-width: 470px;

    padding-top: 22px;

    border-top: 1px solid #ead6d6;
}

.fms-award-footer-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    color: #ffffff;
    background: var(--fms-rec-crimson);

    border-radius: 12px;

    font-size: 15px;
}

.fms-award-footer span {
    display: block;

    margin-bottom: 4px;

    color: var(--fms-rec-crimson);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1px;
}

.fms-award-footer strong {
    display: block;

    color: var(--fms-rec-navy);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.3;
}


/* ==========================================================
   09. COLUMNA DERECHA
========================================================== */

.fms-recognition-side {
    display: grid;

    grid-template-rows:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}


/* ==========================================================
   10. AVALES / ESCUELAS
========================================================== */

.fms-endorsement-card,
.fms-schools-card {
    display: flex;

    align-items: center;

    gap: 24px;

    min-height: 230px;

    padding: 32px 35px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #f4f7fa
        );

    border: 1px solid var(--fms-rec-border);
    border-radius: 22px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-endorsement-card:hover,
.fms-schools-card:hover {
    transform: translateY(-3px);

    border-color: #cfe3d6;

    box-shadow:
        0 10px 25px
        rgba(11, 29, 58, 0.06);
}


/* ==========================================================
   11. ICONO AVALES
========================================================== */

.fms-endorsement-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    flex-shrink: 0;

    color: var(--fms-rec-green-dark);
    background: var(--fms-rec-green-soft);

    border-radius: 18px;

    font-size: 28px;
}

.fms-endorsement-content {
    min-width: 0;
}

.fms-endorsement-content > span,
.fms-schools-content > span {
    display: block;

    margin-bottom: 7px;

    color: var(--fms-rec-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.2px;
}

.fms-endorsement-content h3 {
    margin: 0 0 9px;

    color: var(--fms-rec-navy);

    font-size: 25px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -1px;
}

.fms-endorsement-content p,
.fms-schools-content p {
    margin: 0;

    color: var(--fms-rec-blue-text);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.6;
}


/* ==========================================================
   12. 5,000+
========================================================== */

.fms-schools-number {
    display: flex;

    align-items: flex-start;

    flex-shrink: 0;

    min-width: 130px;
}

.fms-schools-number strong {
    color: var(--fms-rec-green-dark);

    font-size: 45px;
    font-weight: 850;

    line-height: 0.9;

    letter-spacing: -2.5px;
}

.fms-schools-number > span {
    margin:
        -2px
        0
        0
        3px;

    color: var(--fms-rec-green);

    font-size: 24px;
    font-weight: 850;

    line-height: 1;
}

.fms-schools-content {
    min-width: 0;
}

.fms-schools-content h3 {
    margin: 0 0 9px;

    color: var(--fms-rec-navy);

    font-size: 21px;
    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -0.8px;
}


/* ==========================================================
   13. TRAYECTORIA NACIONAL
========================================================== */

.fms-national-card {
    position: relative;

    display: grid;

    grid-template-columns:
        75px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    min-height: 155px;

    margin-bottom: 20px;

    padding: 28px 34px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            105deg,
            #092448 0%,
            #11385e 65%,
            #16486d 100%
        );

    border-radius: 22px;

    box-shadow:
        0 9px 25px
        rgba(11, 29, 58, 0.08);
}

.fms-national-card::after {
    content: "";

    position: absolute;

    top: -100px;
    right: 150px;

    width: 280px;
    height: 280px;

    background:
        radial-gradient(
            circle,
            rgba(36, 180, 90, 0.11),
            transparent 67%
        );

    border-radius: 50%;

    pointer-events: none;
}

.fms-national-icon {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    color: #087d3e;
    background: #5be188;

    border-radius: 17px;

    font-size: 27px;
}

.fms-national-content {
    position: relative;

    z-index: 2;

    min-width: 0;
}

.fms-national-content > span {
    display: block;

    margin-bottom: 6px;

    color: #58df84;

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.2px;
}

.fms-national-content h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.7px;
}

.fms-national-content p {
    max-width: 830px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.55;
}

.fms-national-stats {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 25px;

    padding-left: 30px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.16);
}

.fms-national-stat {
    display: flex;

    align-items: center;

    gap: 10px;
}

.fms-national-stat strong {
    color: #ffffff;

    font-size: 29px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -1.5px;
}

.fms-national-stat span {
    color: rgba(255, 255, 255, 0.65);

    font-size: 8px;
    font-weight: 650;

    line-height: 1.3;
}

.fms-national-stat-divider {
    width: 1px;
    height: 38px;

    background: rgba(255, 255, 255, 0.14);
}


/* ==========================================================
   14. AVALES DEL PROGRAMA
========================================================== */

.fms-program-endorsements {
    margin-top: 20px;
    margin-bottom: 20px;

    padding: 40px 40px 42px;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #f5f8fb 100%
        );

    border: 1px solid #dce5ee;
    border-radius: 25px;
}


/* ==========================================================
   15. ENCABEZADO AVALES
========================================================== */

.fms-program-endorsements-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 28px;
}

.fms-program-endorsements-title {
    display: flex;

    align-items: center;

    gap: 19px;
}

.fms-program-endorsements-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    flex-shrink: 0;

    color: var(--fms-rec-green-dark);
    background: #e2f6e9;

    border-radius: 18px;

    font-size: 27px;
}

.fms-program-endorsements-title span {
    display: block;

    margin-bottom: 8px;

    color: var(--fms-rec-green);

    font-size: 10px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.3px;
}

.fms-program-endorsements-title h3 {
    margin: 0;

    color: var(--fms-rec-navy);

    font-size: 28px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -1.2px;
}

.fms-program-endorsements-header > p {
    margin: 0;

    color: var(--fms-rec-blue-text);

    font-size: 14px;
    font-weight: 550;

    line-height: 1.5;

    text-align: right;
}


/* ==========================================================
   16. GRID DE AVALES
========================================================== */

.fms-program-endorsements-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;
}


/* ==========================================================
   17. TARJETA DE INSTITUCIÓN
========================================================== */

.fms-program-endorsement {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    align-items: center;

    gap: 17px;

    min-height: 135px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #dbe4ed;
    border-radius: 18px;

    box-shadow:
        0 2px 5px
        rgba(11, 29, 58, 0.01);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-program-endorsement:hover {
    transform: translateY(-3px);

    border-color: #c8d7e3;

    box-shadow:
        0 10px 24px
        rgba(11, 29, 58, 0.055);
}


/* ==========================================================
   18. LOGOS / BLOQUES DE COLOR
========================================================== */

.fms-program-endorsement-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    flex-shrink: 0;

    color: #ffffff;

    border-radius: 19px;

    font-size: 16px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.5px;

    text-align: center;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.07);
}

.fms-program-endorsement-logo i {
    font-size: 24px;
}


/* SECRETARÍA DE SALUD */

.fms-endorsement-health {
    background:
        linear-gradient(
            145deg,
            #24b45a,
            #078d3e
        );
}


/* ANÁHUAC */

.fms-endorsement-anahuac {
    background:
        linear-gradient(
            145deg,
            #ff9839,
            #f47b20
        );
}


/* FEMMED */

.fms-endorsement-femmed {
    background:
        linear-gradient(
            145deg,
            #32afd0,
            #1989aa
        );
}


/* IPN */

.fms-endorsement-ipn {
    background:
        linear-gradient(
            145deg,
            #993653,
            #75263f
        );
}


/* ==========================================================
   19. INFORMACIÓN DE INSTITUCIÓN
========================================================== */

.fms-program-endorsement-info {
    min-width: 0;

    padding-right: 12px;
}

.fms-program-endorsement-info span {
    display: block;

    margin-bottom: 7px;

    color: var(--fms-rec-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: 0.9px;
}

.fms-program-endorsement-info h4 {
    margin: 0;

    color: var(--fms-rec-navy);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.28;

    letter-spacing: -0.25px;
}


/* ==========================================================
   20. CHECK VERDE
========================================================== */

.fms-program-endorsement-check {
    position: absolute;

    top: 14px;
    right: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    color: #ffffff;
    background: var(--fms-rec-green);

    border-radius: 50%;

    font-size: 8px;
}


/* ==========================================================
   21. ESTRATEGIA NACIONAL
========================================================== */

.fms-national-strategy {
    position: relative;

    display: grid;

    grid-template-columns:
        95px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 28px;

    min-height: 160px;

    padding: 30px 38px;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #092448 0%,
            #11385e 65%,
            #16486d 100%
        );

    border-radius: 23px;

    box-shadow:
        0 9px 25px
        rgba(11, 29, 58, 0.08);
}

.fms-national-strategy::after {
    content: "";

    position: absolute;

    top: -150px;
    right: 80px;

    width: 350px;
    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(61, 216, 116, 0.09),
            transparent 68%
        );

    border-radius: 50%;

    pointer-events: none;
}

.fms-national-strategy-icon {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    flex-shrink: 0;

    color: #078d3e;

    background:
        linear-gradient(
            145deg,
            #66e58d,
            #57dc81
        );

    border-radius: 22px;

    font-size: 33px;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.06);
}

.fms-national-strategy-content {
    position: relative;

    z-index: 2;

    min-width: 0;
}

.fms-national-strategy-content > span {
    display: block;

    margin-bottom: 8px;

    color: #5be187;

    font-size: 10px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.4px;
}

.fms-national-strategy-content h3 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size:
        clamp(
            20px,
            1.7vw,
            28px
        );

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.fms-national-strategy-content p {
    max-width: 1100px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.55;
}


/* ==========================================================
   22. BADGE ESTRATEGIA NACIONAL
========================================================== */

.fms-national-strategy-badge {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 155px;
    min-height: 74px;

    padding: 14px 18px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 17px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fms-national-strategy-badge i {
    color: #58e184;

    font-size: 25px;
}

.fms-national-strategy-badge strong {
    color: #ffffff;

    font-size: 11px;
    font-weight: 750;

    line-height: 1.35;
}


/* ==========================================================
   23. CIERRE
========================================================== */

.fms-recognition-footer {
    display: grid;

    grid-template-columns:
        minmax(30px, 1fr)
        auto
        minmax(30px, 1fr);

    align-items: center;

    gap: 20px;

    margin-top: 31px;
}

.fms-recognition-footer-line {
    width: 100%;
    height: 1px;

    background: #e0e6ed;
}

.fms-recognition-footer p {
    max-width: 700px;

    margin: 0;

    color: #8b99ac;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;

    text-align: center;
}


/* ==========================================================
   24. RESPONSIVE · 1450px
========================================================== */

@media (max-width: 1450px) {

    .fms-recognition-container {
        padding: 60px 50px 55px;
    }

    .fms-recognition-header {
        gap: 45px;
    }

    .fms-award-content {
        padding: 42px 38px;
    }

    .fms-endorsement-card,
    .fms-schools-card {
        padding: 28px;
    }

    .fms-program-endorsements {
        padding: 34px;
    }

    .fms-program-endorsement {
        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 14px;

        min-height: 120px;

        padding: 15px;
    }

    .fms-program-endorsement-logo {
        width: 70px;
        height: 70px;

        border-radius: 17px;

        font-size: 14px;
    }

    .fms-program-endorsement-info h4 {
        font-size: 11px;
    }
}


/* ==========================================================
   25. RESPONSIVE · 1200px
========================================================== */

@media (max-width: 1200px) {

    .fms-recognition-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .fms-recognition-intro {
        max-width: 800px;
    }

    .fms-recognition-grid {
        grid-template-columns: 1fr;
    }

    .fms-award-card {
        min-height: auto;
    }

    .fms-award-content {
        min-height: 350px;
    }

    .fms-recognition-side {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-template-rows: auto;
    }

    .fms-program-endorsements-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .fms-program-endorsement-info h4 {
        font-size: 13px;
    }

    .fms-national-strategy {
        grid-template-columns:
            80px
            minmax(0, 1fr)
            auto;
    }

    .fms-national-strategy-icon {
        width: 78px;
        height: 78px;

        border-radius: 19px;

        font-size: 28px;
    }
}


/* ==========================================================
   26. RESPONSIVE · 900px
========================================================== */

@media (max-width: 900px) {

    .fms-recognition-side {
        grid-template-columns: 1fr;
    }

    .fms-national-card {
        grid-template-columns:
            70px
            minmax(0, 1fr);
    }

    .fms-national-stats {
        grid-column: 2;

        justify-self: start;

        margin-top: 10px;

        padding:
            15px
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);
    }

    .fms-program-endorsements-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .fms-program-endorsements-header > p {
        text-align: left;
    }

    .fms-national-strategy {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }

    .fms-national-strategy-badge {
        grid-column: 2;

        justify-self: start;

        min-width: 150px;

        margin-top: 5px;
    }
}


/* ==========================================================
   27. RESPONSIVE · 700px
========================================================== */

@media (max-width: 700px) {

    .fms-recognition {
        padding: 10px 8px 40px;
    }

    .fms-recognition-container {
        width: 100%;

        padding: 42px 25px 40px;

        border-radius: 22px;
    }

    .fms-recognition-title {
        font-size: 50px;

        letter-spacing: -2.5px;
    }

    .fms-recognition-intro p {
        font-size: 13px;
    }

    .fms-program-endorsements {
        padding: 27px 22px;

        border-radius: 20px;
    }

    .fms-program-endorsements-grid {
        grid-template-columns: 1fr;
    }

    .fms-program-endorsement {
        min-height: 105px;
    }

    .fms-national-strategy {
        padding: 27px;
    }
}


/* ==========================================================
   28. RESPONSIVE · 520px
========================================================== */

@media (max-width: 520px) {

    .fms-recognition-container {
        padding: 34px 17px;
    }

    .fms-recognition-eyebrow {
        font-size: 9px;

        letter-spacing: 1.3px;
    }

    .fms-recognition-title {
        font-size: 42px;

        line-height: 0.98;

        letter-spacing: -2px;
    }

    .fms-recognition-intro p {
        font-size: 12px;

        line-height: 1.65;
    }


    /* RACE AWARDS */

    .fms-award-card {
        border-radius: 18px;
    }

    .fms-award-top {
        min-height: 67px;

        padding: 13px 17px;
    }

    .fms-award-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;

        font-size: 17px;
    }

    .fms-award-top > span {
        font-size: 8px;

        letter-spacing: 1px;
    }

    .fms-award-content {
        min-height: auto;

        padding: 31px 21px 30px;
    }

    .fms-award-year {
        margin-bottom: 15px;

        font-size: 9px;
    }

    .fms-award-content h3 {
        font-size: 38px;

        letter-spacing: -1.8px;
    }

    .fms-award-content > p {
        margin-bottom: 25px;

        font-size: 12px;
    }


    /* AVALES SUPERIORES */

    .fms-endorsement-card,
    .fms-schools-card {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        min-height: auto;

        padding: 24px 21px;

        border-radius: 17px;
    }

    .fms-endorsement-icon {
        width: 59px;
        height: 59px;

        border-radius: 14px;

        font-size: 22px;
    }

    .fms-schools-number {
        min-width: 0;
    }

    .fms-schools-number strong {
        font-size: 40px;
    }


    /* TRAYECTORIA */

    .fms-national-card {
        display: flex;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 24px 21px;

        border-radius: 17px;
    }

    .fms-national-icon {
        width: 59px;
        height: 59px;

        border-radius: 14px;

        font-size: 23px;
    }

    .fms-national-stats {
        width: 100%;

        margin-top: 2px;

        padding-top: 18px;
    }


    /* AVALES DEL PROGRAMA */

    .fms-program-endorsements {
        padding: 24px 17px;

        border-radius: 18px;
    }

    .fms-program-endorsements-title {
        align-items: flex-start;

        gap: 14px;
    }

    .fms-program-endorsements-icon {
        width: 57px;
        height: 57px;

        border-radius: 14px;

        font-size: 22px;
    }

    .fms-program-endorsements-title span {
        margin-bottom: 6px;

        font-size: 8px;
    }

    .fms-program-endorsements-title h3 {
        font-size: 22px;

        line-height: 1.05;
    }

    .fms-program-endorsements-header > p {
        font-size: 11px;
    }

    .fms-program-endorsement {
        grid-template-columns:
            62px
            minmax(0, 1fr);

        gap: 13px;

        min-height: 90px;

        padding: 13px;

        border-radius: 15px;
    }

    .fms-program-endorsement-logo {
        width: 62px;
        height: 62px;

        border-radius: 15px;

        font-size: 12px;
    }

    .fms-program-endorsement-logo i {
        font-size: 19px;
    }

    .fms-program-endorsement-info span {
        margin-bottom: 5px;

        font-size: 7px;
    }

    .fms-program-endorsement-info h4 {
        font-size: 11px;
    }

    .fms-program-endorsement-check {
        top: 10px;
        right: 10px;

        width: 16px;
        height: 16px;

        font-size: 7px;
    }


    /* ESTRATEGIA NACIONAL */

    .fms-national-strategy {
        display: flex;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        min-height: auto;

        padding: 24px 21px;

        border-radius: 18px;
    }

    .fms-national-strategy-icon {
        width: 64px;
        height: 64px;

        border-radius: 16px;

        font-size: 25px;
    }

    .fms-national-strategy-content > span {
        font-size: 8px;
    }

    .fms-national-strategy-content h3 {
        font-size: 19px;

        line-height: 1.15;
    }

    .fms-national-strategy-content p {
        font-size: 10px;
    }

    .fms-national-strategy-badge {
        min-width: 145px;
        min-height: 62px;

        margin-top: 2px;

        padding: 12px 15px;

        border-radius: 14px;
    }

    .fms-national-strategy-badge i {
        font-size: 20px;
    }

    .fms-national-strategy-badge strong {
        font-size: 10px;
    }


    /* CIERRE */

    .fms-recognition-footer {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .fms-recognition-footer p {
        font-size: 9px;
    }
}


/* ==========================================================
   29. RESPONSIVE · 380px
========================================================== */

@media (max-width: 380px) {

    .fms-recognition-title {
        font-size: 37px;
    }

    .fms-national-stats {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;
    }

    .fms-national-stat-divider {
        width: 100%;
        height: 1px;
    }
}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-award-card,
    .fms-endorsement-card,
    .fms-schools-card,
    .fms-program-endorsement {
        transition: none !important;
    }
}
/* ==========================================================
   PARTE 9
   DOCUMENTOS DE RESPALDO · CARRUSEL
========================================================== */

.fms-documents {
    --doc-navy: #0b1d3a;
    --doc-navy-2: #153b61;
    --doc-green: #24b45a;
    --doc-green-dark: #087e3e;
    --doc-green-soft: #e8f7ed;
    --doc-text: #58709a;
    --doc-bg: #f4f7fa;
    --doc-border: #e2e8f0;
    --doc-white: #ffffff;

    width: 100%;
    padding: 18px 12px 55px;

    background: var(--doc-bg);
    color: var(--doc-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-documents *,
.fms-documents *::before,
.fms-documents *::after {
    box-sizing: border-box;
}


/* ==========================================================
   01. CONTENEDOR
========================================================== */

.fms-documents-container {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;
    padding: 72px 68px 58px;

    overflow: hidden;

    background: var(--doc-white);

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   02. ENCABEZADO PRINCIPAL
========================================================== */

.fms-documents-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.72fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;
}

.fms-documents-eyebrow {
    display: block;

    margin-bottom: 11px;

    color: var(--doc-navy);

    font-size: 11px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.7px;
}

.fms-documents-title {
    margin: 0;

    color: var(--doc-navy);

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 850;

    line-height: 0.94;
    letter-spacing: -3.5px;
}

.fms-documents-title span {
    display: block;

    color: var(--doc-green);
}

.fms-documents-intro {
    padding-bottom: 4px;
}

.fms-documents-intro p {
    max-width: 650px;

    margin: 0;

    color: var(--doc-text);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================================
   03. CABECERA DEL CARRUSEL
========================================================== */

.fms-documents-carousel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 20px;
    padding-top: 28px;

    border-top: 1px solid var(--doc-border);
}

.fms-documents-carousel-heading span {
    display: block;

    margin-bottom: 7px;

    color: var(--doc-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.4px;
}

.fms-documents-carousel-heading h3 {
    margin: 0;

    color: var(--doc-navy);

    font-size: 24px;
    font-weight: 820;

    line-height: 1.15;
    letter-spacing: -0.8px;
}


/* ==========================================================
   04. FLECHAS
========================================================== */

.fms-documents-controls {
    display: flex;

    align-items: center;

    gap: 9px;
}

.fms-documents-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    padding: 0;

    color: var(--doc-navy);
    background: #f3f6f8;

    border: 1px solid #e0e6ec;
    border-radius: 13px;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-documents-arrow:hover {
    color: #ffffff;

    background: var(--doc-green-dark);

    border-color: var(--doc-green-dark);

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(8, 126, 62, 0.16);
}

.fms-documents-arrow:active {
    transform: translateY(0);
}

.fms-documents-arrow:focus-visible {
    outline: 3px solid rgba(36, 180, 90, 0.24);
    outline-offset: 3px;
}


/* ==========================================================
   05. CARRUSEL
========================================================== */

.fms-documents-carousel {
    position: relative;

    width: 100%;
}

.fms-documents-viewport {
    position: relative;

    width: 100%;

    overflow: hidden;

    touch-action: pan-y;

    cursor: grab;
}

.fms-documents-viewport.is-dragging {
    cursor: grabbing;
}

.fms-documents-track {
    display: flex;

    align-items: stretch;

    gap: 22px;

    width: max-content;

    transform: translate3d(0, 0, 0);

    will-change: transform;

    transition:
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.fms-documents-viewport.is-dragging
.fms-documents-track {
    transition: none;
}


/* ==========================================================
   06. TARJETAS
========================================================== */

.fms-document-card {
    position: relative;

    flex:
        0 0
        calc((100vw - 230px) / 2.35);

    width:
        calc((100vw - 230px) / 2.35);

    max-width: 590px;
    min-width: 390px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--doc-border);
    border-radius: 22px;

    box-shadow:
        0 5px 20px
        rgba(11, 29, 58, 0.045);

    user-select: none;
    -webkit-user-select: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.fms-document-card:hover {
    transform: translateY(-4px);

    border-color: #cad7e2;

    box-shadow:
        0 14px 32px
        rgba(11, 29, 58, 0.085);
}


/* ==========================================================
   07. PREVISUALIZACIÓN DEL DOCUMENTO
========================================================== */

.fms-document-preview {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 550px;

    overflow: hidden;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #f8fafb 0%,
            #f0f4f7 100%
        );

    border-bottom: 1px solid var(--doc-border);

    cursor: pointer;
}

.fms-document-preview::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.3;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11, 29, 58, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11, 29, 58, 0.018) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}


/* ==========================================================
   08. IMAGEN REAL DEL AVAL
========================================================== */

.fms-document-preview > img {
    position: relative;

    z-index: 2;

    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 490px;

    object-fit: contain;

    pointer-events: none;

    background: #ffffff;

    border: 1px solid #e0e5e9;

    box-shadow:
        0 12px 32px
        rgba(11, 29, 58, 0.11);
}


/* ==========================================================
   09. PLACEHOLDER / HOJA
========================================================== */

.fms-document-placeholder {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: min(100%, 350px);
    height: 470px;

    padding: 45px 32px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #dde4ea;
    border-radius: 4px;

    box-shadow:
        0 13px 32px
        rgba(11, 29, 58, 0.08);
}

.fms-document-placeholder::before {
    content: "";

    position: absolute;

    top: 28px;
    left: 32px;
    right: 32px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--doc-green) 0 28%,
            #e6ebef 28% 100%
        );

    border-radius: 10px;
}

.fms-document-placeholder::after {
    content: "";

    position: absolute;

    left: 45px;
    right: 45px;
    bottom: 48px;

    height: 90px;

    opacity: 0.8;

    background:
        repeating-linear-gradient(
            to bottom,
            #e8edf1 0,
            #e8edf1 2px,
            transparent 2px,
            transparent 18px
        );
}


/* ==========================================================
   10. LOGO SIMULADO DEL DOCUMENTO
========================================================== */

.fms-document-paper-logo {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 76px;
    height: 76px;

    margin-bottom: 22px;

    padding: 0 15px;

    border-radius: 18px;

    font-size: 18px;
    font-weight: 900;

    letter-spacing: -0.7px;
}

.fms-paper-ipn {
    color: #7b1737;

    background: #f7e9ee;
}

.fms-paper-tecnm {
    color: #17365f;

    background: #eaf0f7;
}

.fms-paper-anahuac {
    color: #df6d16;

    background: #fff0e4;
}

.fms-paper-salud {
    color: #087e3e;

    background: #e7f6ec;

    font-size: 24px;
}


/* ==========================================================
   11. TEXTO DEL PLACEHOLDER
========================================================== */

.fms-document-placeholder > span {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: var(--doc-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.3px;
}

.fms-document-placeholder > strong {
    position: relative;

    z-index: 2;

    display: block;

    color: var(--doc-navy);

    font-size: 20px;
    font-weight: 850;

    line-height: 1.15;
    letter-spacing: -0.7px;
}

.fms-document-placeholder > small {
    position: relative;

    z-index: 2;

    display: block;

    margin-top: 11px;

    color: #8a99aa;

    font-size: 9px;
    font-weight: 550;

    line-height: 1.4;
}


/* ==========================================================
   12. BOTÓN AMPLIAR
========================================================== */

.fms-document-expand {
    position: absolute;

    z-index: 6;

    top: 18px;
    right: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    padding: 0;

    color: #ffffff;

    background: rgba(11, 29, 58, 0.92);

    border: 0;
    border-radius: 13px;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(11, 29, 58, 0.16);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-document-expand:hover {
    background: var(--doc-green-dark);

    transform: scale(1.06);

    box-shadow:
        0 9px 22px
        rgba(8, 126, 62, 0.2);
}


/* ==========================================================
   13. INFORMACIÓN DE CADA AVAL
========================================================== */

.fms-document-info {
    display: flex;

    align-items: center;

    gap: 16px;

    min-height: 118px;

    padding: 23px 25px;

    background: #ffffff;
}

.fms-document-info-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    border-radius: 15px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: -0.5px;
}

.fms-info-ipn {
    color: #7b1737;

    background: #f7e9ee;
}

.fms-info-tecnm {
    color: #17365f;

    background: #eaf0f7;
}

.fms-info-anahuac {
    color: #df6d16;

    background: #fff0e4;
}

.fms-info-salud {
    color: #087e3e;

    background: #e7f6ec;

    font-size: 19px;
}


/* ==========================================================
   14. TEXTOS INFERIORES
========================================================== */

.fms-document-info-text {
    min-width: 0;
}

.fms-document-info-text > span {
    display: block;

    margin-bottom: 6px;

    color: var(--doc-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.1px;
}

.fms-document-info-text h3 {
    margin: 0 0 5px;

    color: var(--doc-navy);

    font-size: 16px;
    font-weight: 850;

    line-height: 1.2;
    letter-spacing: -0.45px;
}

.fms-document-info-text p {
    margin: 0;

    color: var(--doc-text);

    font-size: 10px;
    font-weight: 550;

    line-height: 1.35;
}


/* ==========================================================
   15. NAVEGACIÓN INFERIOR
========================================================== */

.fms-documents-navigation {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 22px;
}


/* ==========================================================
   16. PUNTOS
========================================================== */

.fms-documents-dots {
    display: flex;

    align-items: center;

    gap: 7px;
}

.fms-documents-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    background: #cbd5df;

    border: 0;
    border-radius: 999px;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.fms-documents-dot:hover {
    transform: scale(1.2);
}

.fms-documents-dot.is-active {
    width: 26px;

    background: var(--doc-green);
}


/* ==========================================================
   17. INDICACIÓN DESLIZAR
========================================================== */

.fms-documents-swipe {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #7d8da0;

    font-size: 10px;
    font-weight: 650;
}

.fms-documents-swipe i {
    color: var(--doc-green);

    font-size: 10px;

    transition: transform 0.25s ease;
}

.fms-documents-swipe:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   18. NOTA INFERIOR
========================================================== */

.fms-documents-note {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 30px;

    padding: 20px 23px;

    background:
        linear-gradient(
            135deg,
            #f0faf3 0%,
            #e8f7ed 100%
        );

    border: 1px solid #d0ead8;
    border-radius: 17px;
}

.fms-documents-note-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    color: var(--doc-green-dark);
    background: #ffffff;

    border-radius: 12px;

    font-size: 17px;

    box-shadow:
        0 4px 12px
        rgba(8, 126, 62, 0.07);
}

.fms-documents-note > div:last-child > span {
    display: block;

    margin-bottom: 4px;

    color: var(--doc-green-dark);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.2px;
}

.fms-documents-note p {
    margin: 0;

    color: #537065;

    font-size: 11px;
    font-weight: 550;

    line-height: 1.5;
}

.fms-documents-note strong {
    color: var(--doc-green-dark);

    font-weight: 800;
}


/* ==========================================================
   19. MODAL
========================================================== */

.fms-document-modal {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.fms-document-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ==========================================================
   20. FONDO MODAL
========================================================== */

.fms-document-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(5, 16, 31, 0.8);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ==========================================================
   21. VENTANA MODAL
========================================================== */

.fms-document-modal-window {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: min(100%, 960px);
    max-height: calc(100vh - 60px);

    overflow: hidden;

    background: #ffffff;

    border-radius: 23px;

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.32);

    transform:
        translateY(15px)
        scale(0.985);

    transition: transform 0.28s ease;
}

.fms-document-modal.is-open
.fms-document-modal-window {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   22. HEADER MODAL
========================================================== */

.fms-document-modal-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    flex: 0 0 auto;

    padding: 23px 24px 20px 28px;

    background: #ffffff;

    border-bottom: 1px solid var(--doc-border);
}

.fms-document-modal-header > div {
    min-width: 0;
}

.fms-document-modal-header span {
    display: block;

    margin-bottom: 6px;

    color: var(--doc-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;
    letter-spacing: 1.2px;
}

.fms-document-modal-title {
    margin: 0;

    color: var(--doc-navy);

    font-size: 20px;
    font-weight: 850;

    line-height: 1.2;
    letter-spacing: -0.6px;
}


/* ==========================================================
   23. CERRAR MODAL
========================================================== */

.fms-document-modal-close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    color: var(--doc-navy);
    background: #f2f5f7;

    border: 1px solid #e0e6eb;
    border-radius: 12px;

    font-size: 15px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.fms-document-modal-close:hover {
    color: #ffffff;

    background: var(--doc-green-dark);

    transform: rotate(3deg);
}


/* ==========================================================
   24. CONTENIDO MODAL
========================================================== */

.fms-document-modal-content {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    flex: 1;

    min-height: 0;

    overflow: auto;

    padding: 35px;

    background: #eef2f5;
}

.fms-document-modal-content > img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;

    background: #ffffff;

    box-shadow:
        0 15px 45px
        rgba(11, 29, 58, 0.18);
}


/* ==========================================================
   25. PLACEHOLDER DEL MODAL
========================================================== */

.fms-document-modal-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: min(100%, 580px);
    min-height: 650px;

    padding: 50px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #dde4ea;

    box-shadow:
        0 13px 38px
        rgba(11, 29, 58, 0.09);
}

.fms-document-modal-file-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    margin-bottom: 22px;

    color: var(--doc-green-dark);
    background: var(--doc-green-soft);

    border-radius: 20px;

    font-size: 30px;
}

.fms-document-modal-placeholder > span {
    display: block;

    margin-bottom: 9px;

    color: var(--doc-green);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1.3px;
}

.fms-document-modal-placeholder > strong {
    color: var(--doc-navy);

    font-size: 22px;
    font-weight: 850;

    line-height: 1.2;
}

.fms-document-modal-placeholder p {
    max-width: 330px;

    margin: 11px 0 0;

    color: var(--doc-text);

    font-size: 11px;

    line-height: 1.55;
}


/* ==========================================================
   26. BLOQUEAR SCROLL
========================================================== */

body.fms-document-modal-open {
    overflow: hidden;
}


/* ==========================================================
   27. RESPONSIVE · 1450px
========================================================== */

@media (max-width: 1450px) {

    .fms-documents-container {
        padding:
            60px
            50px
            52px;
    }

    .fms-documents-header {
        gap: 45px;
    }

    .fms-document-card {
        flex-basis: 510px;

        width: 510px;
        min-width: 510px;
    }

    .fms-document-preview {
        height: 525px;
    }

    .fms-document-placeholder {
        height: 445px;
    }
}


/* ==========================================================
   28. RESPONSIVE · 1150px
========================================================== */

@media (max-width: 1150px) {

    .fms-documents-header {
        grid-template-columns: 1fr;

        gap: 23px;
    }

    .fms-documents-intro {
        max-width: 760px;
    }

    .fms-document-card {
        flex-basis: 455px;

        width: 455px;
        min-width: 455px;
    }

    .fms-document-preview {
        height: 500px;

        padding: 25px;
    }

    .fms-document-placeholder {
        height: 425px;
    }
}


/* ==========================================================
   29. RESPONSIVE · 850px
========================================================== */

@media (max-width: 850px) {

    .fms-documents {
        padding:
            10px
            8px
            40px;
    }

    .fms-documents-container {
        width: 100%;

        padding:
            45px
            28px
            42px;

        border-radius: 22px;
    }

    .fms-documents-title {
        font-size: 56px;

        letter-spacing: -2.8px;
    }

    .fms-documents-intro p {
        font-size: 14px;
    }

    .fms-documents-carousel-header {
        padding-top: 24px;
    }

    .fms-document-card {
        flex-basis: 72vw;

        width: 72vw;
        min-width: 72vw;

        max-width: 500px;
    }

    .fms-document-preview {
        height: 520px;
    }

    .fms-document-placeholder {
        height: 445px;
    }
}


/* ==========================================================
   30. RESPONSIVE · 600px
========================================================== */

@media (max-width: 600px) {

    .fms-documents-container {
        padding:
            35px
            17px
            34px;
    }

    .fms-documents-header {
        margin-bottom: 32px;
    }

    .fms-documents-eyebrow {
        font-size: 9px;

        letter-spacing: 1.3px;
    }

    .fms-documents-title {
        font-size: 44px;

        line-height: 0.97;

        letter-spacing: -2.2px;
    }

    .fms-documents-intro p {
        font-size: 12px;
    }

    .fms-documents-carousel-header {
        align-items: flex-end;

        gap: 15px;

        margin-bottom: 16px;
    }

    .fms-documents-carousel-heading h3 {
        font-size: 18px;
    }

    .fms-documents-carousel-heading span {
        font-size: 8px;
    }

    .fms-documents-arrow {
        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 12px;
    }

    .fms-documents-track {
        gap: 14px;
    }

    .fms-document-card {
        flex-basis: 84vw;

        width: 84vw;
        min-width: 84vw;

        max-width: none;

        border-radius: 18px;
    }

    .fms-document-preview {
        height: 460px;

        padding: 18px;
    }

    .fms-document-preview > img {
        max-height: 420px;
    }

    .fms-document-placeholder {
        width: 100%;
        height: 405px;

        padding:
            38px
            20px;
    }

    .fms-document-placeholder::before {
        top: 25px;
        left: 26px;
        right: 26px;
    }

    .fms-document-placeholder::after {
        left: 34px;
        right: 34px;
        bottom: 39px;

        height: 78px;
    }

    .fms-document-paper-logo {
        min-width: 65px;
        height: 65px;

        margin-bottom: 18px;

        border-radius: 16px;

        font-size: 15px;
    }

    .fms-paper-salud {
        font-size: 21px;
    }

    .fms-document-placeholder > strong {
        font-size: 18px;
    }

    .fms-document-expand {
        top: 13px;
        right: 13px;

        width: 41px;
        height: 41px;

        border-radius: 11px;

        font-size: 12px;
    }

    .fms-document-info {
        min-height: 105px;

        gap: 13px;

        padding:
            19px
            17px;
    }

    .fms-document-info-logo {
        width: 49px;
        height: 49px;

        flex-basis: 49px;

        border-radius: 12px;

        font-size: 11px;
    }

    .fms-info-salud {
        font-size: 17px;
    }

    .fms-document-info-text h3 {
        font-size: 14px;
    }

    .fms-documents-navigation {
        margin-top: 17px;
    }

    .fms-documents-swipe span {
        display: none;
    }

    .fms-documents-swipe i {
        font-size: 12px;
    }

    .fms-documents-note {
        align-items: flex-start;

        margin-top: 25px;

        padding:
            17px
            16px;
    }

    .fms-documents-note-icon {
        width: 39px;
        height: 39px;

        flex-basis: 39px;

        font-size: 14px;
    }

    .fms-documents-note p {
        font-size: 10px;
    }

    .fms-document-modal {
        padding: 10px;
    }

    .fms-document-modal-window {
        max-height:
            calc(100vh - 20px);

        border-radius: 16px;
    }

    .fms-document-modal-header {
        padding:
            18px
            15px
            16px
            18px;
    }

    .fms-document-modal-title {
        font-size: 15px;
    }

    .fms-document-modal-close {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 10px;
    }

    .fms-document-modal-content {
        padding: 14px;
    }

    .fms-document-modal-placeholder {
        min-height: 500px;

        padding:
            30px
            20px;
    }
}


/* ==========================================================
   31. RESPONSIVE · 390px
========================================================== */

@media (max-width: 390px) {

    .fms-documents-title {
        font-size: 39px;
    }

    .fms-documents-carousel-heading h3 {
        font-size: 16px;
    }

    .fms-document-card {
        flex-basis: 86vw;

        width: 86vw;
        min-width: 86vw;
    }

    .fms-document-preview {
        height: 420px;
    }

    .fms-document-placeholder {
        height: 365px;
    }
}


/* ==========================================================
   32. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-documents-track,
    .fms-document-card,
    .fms-documents-arrow,
    .fms-documents-dot,
    .fms-document-expand,
    .fms-document-modal,
    .fms-document-modal-window,
    .fms-document-modal-close {
        transition: none !important;
    }
}
/* ==========================================================
   PARTE 10
   CONTACTO · FUNDACIÓN MOVIMIENTO ES SALUD
   + FOOTER
========================================================== */


/* ==========================================================
   01. SECCIÓN GENERAL
========================================================== */

.fms-contact {
    --contact-navy: #0b1d3a;
    --contact-navy-light: #153b61;

    --contact-green: #24b45a;
    --contact-green-dark: #078d3e;
    --contact-green-light: #5be187;
    --contact-green-soft: #e5f7eb;

    --contact-blue-text: #58709a;

    --contact-bg: #f3f6f9;
    --contact-white: #ffffff;
    --contact-border: #dfe6ee;

    width: 100%;

    padding: 18px 12px 30px;

    background: var(--contact-bg);
    color: var(--contact-navy);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}

.fms-contact *,
.fms-contact *::before,
.fms-contact *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
========================================================== */

.fms-contact-container {
    width: calc(100% - 12px);
    max-width: 1900px;

    margin: 0 auto;

    padding:
        72px
        68px
        0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce3eb;
    border-radius: 30px;

    box-shadow:
        0 8px 32px
        rgba(11, 29, 58, 0.045);
}


/* ==========================================================
   03. ENCABEZADO
========================================================== */

.fms-contact-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 50px;

    margin-bottom: 42px;
}


/* ==========================================================
   04. EYEBROW
========================================================== */

.fms-contact-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--contact-navy);

    font-size: 11px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.7px;
}


/* ==========================================================
   05. TÍTULO
========================================================== */

.fms-contact-title {
    margin:
        0
        0
        17px;

    color: var(--contact-navy);

    font-size:
        clamp(
            52px,
            5vw,
            78px
        );

    font-weight: 850;

    line-height: 0.95;

    letter-spacing: -3.5px;
}

.fms-contact-title span {
    color: var(--contact-green);
}


/* ==========================================================
   06. DESCRIPCIÓN
========================================================== */

.fms-contact-description {
    max-width: 760px;

    margin: 0;

    color: var(--contact-blue-text);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================================
   07. ICONO DEL ENCABEZADO
========================================================== */

.fms-contact-header-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    color: var(--contact-green-dark);

    background:
        linear-gradient(
            145deg,
            #ebfaef,
            #dcf5e4
        );

    border: 1px solid #caebd5;
    border-radius: 24px;

    font-size: 33px;

    transform: rotate(-4deg);
}


/* ==========================================================
   08. TARJETA PRINCIPAL
========================================================== */

.fms-contact-card {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.78fr)
        1px
        minmax(0, 1.35fr);

    align-items: stretch;

    gap: 35px;

    min-height: 255px;

    margin-bottom: 65px;

    padding:
        37px
        40px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #f4f7fa
        );

    border: 1px solid var(--contact-border);
    border-radius: 24px;
}


/* ==========================================================
   09. PERSONA
========================================================== */

.fms-contact-person {
    display: flex;

    align-items: center;

    gap: 24px;

    min-width: 0;
}


/* ==========================================================
   10. AVATAR
========================================================== */

.fms-contact-avatar {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 108px;
    height: 108px;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #2dc264,
            #078d3e
        );

    border-radius: 28px;

    font-size: 30px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -1.5px;

    box-shadow:
        0 12px 25px
        rgba(7, 141, 62, 0.14);
}


/* ==========================================================
   11. ESTADO
========================================================== */

.fms-contact-status {
    position: absolute;

    right: -3px;
    bottom: -3px;

    width: 24px;
    height: 24px;

    background: #57dd81;

    border: 5px solid #f6f8fa;
    border-radius: 50%;
}


/* ==========================================================
   12. INFORMACIÓN DE PERSONA
========================================================== */

.fms-contact-person-info {
    min-width: 0;
}

.fms-contact-label {
    display: block;

    margin-bottom: 8px;

    color: var(--contact-green);

    font-size: 9px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.3px;
}

.fms-contact-person-info h3 {
    margin:
        0
        0
        10px;

    color: var(--contact-navy);

    font-size:
        clamp(
            23px,
            2vw,
            31px
        );

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -1.2px;
}

.fms-contact-person-info p {
    margin: 0;

    color: var(--contact-blue-text);

    font-size: 11px;
    font-weight: 750;

    line-height: 1;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* ==========================================================
   13. DIVISOR
========================================================== */

.fms-contact-divider {
    width: 1px;
    height: 100%;

    min-height: 150px;

    background: #dce3eb;
}


/* ==========================================================
   14. MÉTODOS DE CONTACTO
========================================================== */

.fms-contact-methods {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items: center;

    gap: 14px;

    min-width: 0;
}


/* ==========================================================
   15. TARJETA DE CONTACTO
========================================================== */

.fms-contact-method {
    position: relative;

    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr)
        28px;

    align-items: center;

    gap: 16px;

    min-width: 0;
    min-height: 125px;

    padding:
        20px
        20px;

    color: inherit;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid #dce4ec;
    border-radius: 18px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.fms-contact-method:hover {
    transform: translateY(-3px);

    background: #ffffff;

    border-color: #c4e4ce;

    box-shadow:
        0 10px 25px
        rgba(11, 29, 58, 0.065);
}


/* ==========================================================
   16. ICONOS DE CONTACTO
========================================================== */

.fms-contact-method-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    color: var(--contact-green-dark);
    background: var(--contact-green-soft);

    border-radius: 16px;

    font-size: 24px;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background-color 0.22s ease;
}

.fms-contact-method:hover
.fms-contact-method-icon {
    transform: scale(1.04);

    color: #ffffff;

    background: var(--contact-green);
}


/* ==========================================================
   17. INFORMACIÓN DEL MÉTODO
========================================================== */

.fms-contact-method-info {
    min-width: 0;
}

.fms-contact-method-info > span {
    display: block;

    margin-bottom: 7px;

    color: var(--contact-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1px;
}

.fms-contact-method-info strong {
    display: block;

    overflow-wrap: anywhere;

    margin-bottom: 6px;

    color: var(--contact-navy);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.25px;
}

.fms-contact-method-info small {
    display: block;

    color: #8a99ac;

    font-size: 9px;
    font-weight: 550;

    line-height: 1.2;
}


/* ==========================================================
   18. FLECHA
========================================================== */

.fms-contact-method-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: #9aa9b9;

    border-radius: 50%;

    font-size: 10px;

    transition:
        color 0.22s ease,
        transform 0.22s ease;
}

.fms-contact-method:hover
.fms-contact-method-arrow {
    color: var(--contact-green);

    transform:
        translate(
            2px,
            -2px
        );
}


/* ==========================================================
   19. FOOTER GENERAL
========================================================== */

.fms-site-footer {
    margin:
        0
        -68px;

    padding:
        0
        68px;

    background: #ffffff;
}


/* ==========================================================
   20. LÍNEA SUPERIOR DEL FOOTER
========================================================== */

.fms-site-footer-line {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,

            #24b45a 0%,
            #24b45a 23%,

            #f4b223 23%,
            #f4b223 42%,

            #0b1d3a 42%,
            #0b1d3a 65%,

            #24b45a 65%,
            #24b45a 100%
        );
}


/* ==========================================================
   21. CONTENIDO FOOTER
========================================================== */

.fms-site-footer-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 40px;

    min-height: 120px;

    padding:
        26px
        0;
}


/* ==========================================================
   22. MARCA
========================================================== */

.fms-site-footer-brand {
    display: flex;

    align-items: center;

    gap: 14px;
}

.fms-site-footer-symbol {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 47px;
    height: 47px;

    flex-shrink: 0;

    color: var(--contact-green-dark);
    background: var(--contact-green-soft);

    border-radius: 13px;

    font-size: 18px;
}

.fms-site-footer-brand strong {
    display: block;

    margin-bottom: 4px;

    color: var(--contact-navy);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.2;
}

.fms-site-footer-brand span {
    display: block;

    color: #8b99aa;

    font-size: 9px;
    font-weight: 500;

    line-height: 1.3;
}


/* ==========================================================
   23. CENTRO DEL FOOTER
========================================================== */

.fms-site-footer-center {
    text-align: center;
}

.fms-site-footer-center > span {
    display: block;

    margin-bottom: 5px;

    color: var(--contact-green);

    font-size: 8px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.1px;
}

.fms-site-footer-center p {
    margin: 0;

    color: #8494a7;

    font-size: 9px;
    font-weight: 550;

    line-height: 1.3;
}


/* ==========================================================
   24. BOTÓN REGRESAR ARRIBA
========================================================== */

.fms-back-to-top {
    display: flex;

    align-items: center;
    justify-content: center;

    justify-self: end;

    width: 48px;
    height: 48px;

    padding: 0;

    color: #ffffff;
    background: var(--contact-navy);

    border: 0;
    border-radius: 14px;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(11, 29, 58, 0.13);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.fms-back-to-top:hover {
    transform: translateY(-3px);

    background: var(--contact-green-dark);

    box-shadow:
        0 10px 22px
        rgba(7, 141, 62, 0.18);
}

.fms-back-to-top:focus-visible,
.fms-contact-method:focus-visible {
    outline:
        3px
        solid
        rgba(36, 180, 90, 0.24);

    outline-offset: 3px;
}


/* ==========================================================
   25. RESPONSIVE · 1450px
========================================================== */

@media (max-width: 1450px) {

    .fms-contact-container {
        padding:
            60px
            50px
            0;
    }

    .fms-contact-card {
        grid-template-columns:
            minmax(300px, 0.72fr)
            1px
            minmax(0, 1.28fr);

        gap: 27px;

        padding: 32px;
    }

    .fms-contact-avatar {
        width: 95px;
        height: 95px;

        border-radius: 24px;

        font-size: 27px;
    }

    .fms-contact-method {
        grid-template-columns:
            56px
            minmax(0, 1fr)
            24px;

        gap: 13px;

        padding: 17px;
    }

    .fms-contact-method-icon {
        width: 56px;
        height: 56px;
    }

    .fms-site-footer {
        margin:
            0
            -50px;

        padding:
            0
            50px;
    }
}


/* ==========================================================
   26. RESPONSIVE · 1150px
========================================================== */

@media (max-width: 1150px) {

    .fms-contact-card {
        grid-template-columns: 1fr;

        gap: 27px;
    }

    .fms-contact-divider {
        width: 100%;
        height: 1px;

        min-height: 1px;
    }

    .fms-contact-methods {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ==========================================================
   27. RESPONSIVE · 850px
========================================================== */

@media (max-width: 850px) {

    .fms-contact {
        padding:
            10px
            8px
            25px;
    }

    .fms-contact-container {
        width: 100%;

        padding:
            45px
            28px
            0;

        border-radius: 22px;
    }

    .fms-contact-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .fms-contact-header-icon {
        width: 75px;
        height: 75px;

        border-radius: 19px;

        font-size: 27px;
    }

    .fms-contact-title {
        font-size: 56px;
    }

    .fms-contact-description {
        font-size: 14px;
    }

    .fms-contact-methods {
        grid-template-columns: 1fr;
    }

    .fms-site-footer {
        margin:
            0
            -28px;

        padding:
            0
            28px;
    }

    .fms-site-footer-content {
        grid-template-columns:
            1fr
            auto;

        gap: 25px;
    }

    .fms-site-footer-center {
        display: none;
    }
}


/* ==========================================================
   28. RESPONSIVE · 550px
========================================================== */

@media (max-width: 550px) {

    .fms-contact-container {
        padding:
            35px
            17px
            0;
    }

    .fms-contact-header {
        margin-bottom: 30px;
    }

    .fms-contact-eyebrow {
        font-size: 9px;

        letter-spacing: 1.3px;
    }

    .fms-contact-title {
        margin-bottom: 14px;

        font-size: 45px;

        line-height: 0.98;

        letter-spacing: -2.2px;
    }

    .fms-contact-description {
        font-size: 12px;

        line-height: 1.65;
    }

    .fms-contact-header-icon {
        width: 62px;
        height: 62px;

        border-radius: 16px;

        font-size: 22px;
    }

    .fms-contact-card {
        gap: 23px;

        margin-bottom: 45px;

        padding:
            22px
            18px;

        border-radius: 19px;
    }

    .fms-contact-person {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .fms-contact-avatar {
        width: 75px;
        height: 75px;

        border-radius: 19px;

        font-size: 22px;
    }

    .fms-contact-status {
        width: 20px;
        height: 20px;

        border-width: 4px;
    }

    .fms-contact-label {
        font-size: 8px;
    }

    .fms-contact-person-info h3 {
        font-size: 24px;

        line-height: 1.05;
    }

    .fms-contact-person-info p {
        font-size: 9px;
    }

    .fms-contact-method {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            24px;

        gap: 12px;

        min-height: 105px;

        padding:
            15px
            13px;

        border-radius: 15px;
    }

    .fms-contact-method-icon {
        width: 52px;
        height: 52px;

        border-radius: 14px;

        font-size: 20px;
    }

    .fms-contact-method-info > span {
        font-size: 7px;
    }

    .fms-contact-method-info strong {
        font-size: 11px;
    }

    .fms-contact-method-info small {
        font-size: 8px;
    }

    .fms-site-footer {
        margin:
            0
            -17px;

        padding:
            0
            17px;
    }

    .fms-site-footer-content {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        min-height: 105px;

        gap: 15px;

        padding:
            22px
            0;
    }

    .fms-site-footer-symbol {
        width: 41px;
        height: 41px;

        border-radius: 11px;

        font-size: 16px;
    }

    .fms-site-footer-brand {
        gap: 10px;
    }

    .fms-site-footer-brand strong {
        font-size: 10px;
    }

    .fms-site-footer-brand span {
        font-size: 8px;
    }

    .fms-back-to-top {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }
}


/* ==========================================================
   29. RESPONSIVE · 390px
========================================================== */

@media (max-width: 390px) {

    .fms-contact-title {
        font-size: 40px;
    }

    .fms-contact-method {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 11px;
    }

    .fms-contact-method-icon {
        width: 46px;
        height: 46px;
    }

    .fms-contact-method-arrow {
        display: none;
    }

    .fms-site-footer-brand span {
        display: none;
    }
}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fms-contact-method,
    .fms-contact-method-icon,
    .fms-contact-method-arrow,
    .fms-back-to-top {
        transition: none !important;
    }
}

.fms-partner-logo:has(img) {
    padding: 8px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(11, 29, 58, 0.08);
}

.fms-partner-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Three-group team layout replaces the five-node prototype orbit. */
.fms-team-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fms-team-detail {
    min-height: 0;
}

@media (min-width: 621px) {
    .fms-team-orbit {
        height: 420px;
    }

    .fms-team-orbit-ring {
        top: 30px;
        height: 330px;
    }

    .fms-team-center {
        top: 55%;
    }

    .team-directivo {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .team-directivo:hover {
        transform: translateX(-50%) scale(1.035);
    }

    .team-expertos {
        top: auto;
        right: auto;
        bottom: 0;
        left: 7%;
    }

    .team-estatales {
        top: auto;
        right: 7%;
        bottom: 0;
        left: auto;
    }
}

@media (max-width: 1050px) {
    .fms-team-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .fms-team-shortcuts {
        grid-template-columns: 1fr;
    }
}