/* ================================
   estos son estilos de frontend para las paginas publicas donde todos pueden ver
   
================================ */
body {
  line-height: 1.3;
  background-color: var(--mr-light);
  margin: 0;
  padding: 0;


 font-size: 14px;
 font-family: "Inter",  Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ================================
   HEADER BASE
================================ */
.site-header .header-main .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 20px;
    /*padding: 6px 20px;*/
}

/* IZQUIERDA */
.header-contact {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* DERECHA */
.header-weather {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ================================
   HERO MODE
================================ */
.site-header.hero-mode23 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
  align-items: center;
}
.site-header.hero-mode {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  /* 🔥 fondo degradado arriba sólido → abajo transparente */
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 19, 0.75) 0%,
    rgba(5, 5, 19, 0.35) 40%,
    rgba(5, 5, 19, 0.00) 100%
  );
color: rgba(255, 255, 255, 0.78);
  /* ✨ efecto glass suave */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ================================
   SCROLLED
================================ */
.site-header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(9, 0, 36, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

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

/* ================================
   TABLET (opcional)
================================ */
@media (max-width: 768px) {
  .site-header .header-main .container {
    flex-direction: column;
    gap: 4px;
  }

  .header-contact,
  .header-weather {
    width: 100%;
    justify-content: center;
  }
}

/* ================================
   MÓVIL PEQUEÑO (LIMPIO)
================================ */
@media (max-width: 480px) {

  /* ❌ OCULTA BANCO + TELÉFONO */
  .header-contact {
    display: none !important;
  }

  /* ✅ SOLO CLIMA CENTRADO */
  .header-weather {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-header .header-main .container {
    flex-direction: column;
  }
}

.site-header.hero-mode + nav.main-nav {
  position: absolute;
  top: 38px; /*era 40*/

  left: 50%;
  transform: translateX(-50%);
 width: max-content;
  /* 👇 CLAVE: en vez de auto, usa un ancho controlado */
  width: min(1100px, 92%);

  backdrop-filter: blur(10px);

  border-radius: 1px;
  padding: 8px 20px;

  z-index: 9999;
}


.site-header.scrolled + nav.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  border-radius: 0;
  background: var(--mr-dark);
}
/* ================================
   NAV RESPONSIVE FIX
================================ */

/* tablet */
@media (max-width: 768px) {
  .site-header.hero-mode + nav.main-nav {
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {

  .site-header.hero-mode + nav.main-nav {
    width: 100%;
    padding: 8px 10px;
  }

  nav.main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}


.header-contact a {
  display: inline-flex;
  align-items: center;   /* 👈 centra texto con icono */
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1;
  transition: 0.2s ease;
}

.header-contact a:hover {
  color: var(--mr-accent);
}
.header-contact i,
.header-weather i,
.header-modern i {
  color: var(--mr-accent);
  font-size: 12px;
  opacity: 0.9;
}
.header-contact i {
  transition: transform 0.2s ease;
}

.header-contact li:hover i {
  transform: scale(1.1);
}

.main-nav {
  position: relative;

  /* 🌑 base elegante */
  background: rgba(8, 10, 20, 0.45);

  /* 💎 glass real */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  /* 🌿 borde casi invisible */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  /* ✨ sombra suave cinematográfica */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

  /* 🎯 transición limpia */
  transition: all 0.3s ease;
}
.main-nav::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at top left,
    rgba(40, 248, 179, 0.05),
    transparent 40%
  );

  pointer-events: none;
}
.nav-logo{
    height: 100%;
    object-fit: contain;
}

.navbar-nav .nav-link {
  color: #ffffffcc;
  font-weight: 400;
  transition: 0.2s;
}
.navbar-nav .nav-link:hover { color: var(--mr-accent); }
.navbar-nav .nav-link.active {
  color: var(--mr-accent) !important;
  border-bottom: 1px solid var(--mr-accent);
  font-weight: 500;
}

/* ================================
   DROPDOWN MODERNO
================================ */
/* ================================
   DROPDOWN MODERNO PRO (CLEAN UI)
================================ */

.dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1px;
 margin-top: 0 !important;
 
/* margin-top: 10px;*/
  /* 🔥 glass oscuro alineado con navbar */
  background: rgba(12, 7, 29, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.35);

  /*padding: 6px;*/
  overflow: hidden;
}

/* ================================
   ITEM BASE
================================ */
.dropdown-item {
  position: relative;

  padding: 8px 12px;
  line-height: 1.3;
  font-size: 13px;

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

  border-radius: 1px;

  transition: all 0.25s ease;
  background: transparent;

display: flex;
align-items: center;
  
}

/* ================================
   HOVER MODERNO (SUAVE + PRO)
================================ */
.dropdown-item:hover {
  color: var(--mr-light);
  background: rgba(40, 248, 134, 0.08);
  transform: translateX(2px);
}

/* línea/acento elegante */
.dropdown-item23::before {
  content: "";
  position: absolute;
  left: 0;
 top: 0px;
bottom: 0px;
  width: 2px;

  background: var(--mr-primarygr);
  opacity: 0;

  transition: all 0.25s ease;
  border-radius: 1px;
}
.dropdown-item::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 2px;

  background: var(--mr-accentgr);

  opacity: 0;

  transition: opacity .25s ease;
}
.dropdown-item:hover::before {
  opacity: 1;
}

/* ================================
   ACTIVE / SELECTED
================================ */
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(40, 248, 134, 0.12) !important;
  color: var(--mr-accent) !important;
}

/* ================================
   FOCUS LIMPIO
================================ */
.dropdown-item:focus,
.dropdown-item:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ================================
   DESKTOP HOVER BEHAVIOR
================================ */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    animation: dropdownFade 0.2s ease;
  }
}
/* micro animación pro */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.navbar-toggler-icon {
  filter: brightness(1.2);
  opacity: 0.85;
}
























/* ================================
   HERO BASE (PRO)
================================ */

/* =========================================================
   HERO CLEAN PRO
========================================================= */

.hero{
  position: relative;

  min-height: clamp(520px, 82vh, 920px);

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

  overflow:hidden;
  isolation:isolate;

  color:var(--mr-light);

  /* 🎨 fondo premium usando tus colores */
  background:
    radial-gradient(
      circle at top,
      rgba(var(--mr-accent-rgb), .12),
      transparent 45%
    ),

    linear-gradient(
      180deg,
      rgba(4,8,20,.92),
      rgba(7,12,28,.82),
      rgba(3,5,14,1)
    );

  border-bottom:1px solid rgba(var(--mr-accent-rgb), .10);
}

/* ✨ overlay elegante */
.hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,.20),
      rgba(0,0,0,.72)
    );

  z-index:1;
}

/* 💡 glow suave premium */
.hero::after{
  content:"";
  position:absolute;

  top:-180px;
  left:50%;

  transform:translateX(-50%);

  width:520px;
  height:520px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(var(--mr-accent-rgb), .16),
      transparent 70%
    );

  filter:blur(60px);

  z-index:0;
  pointer-events:none;
}

/* ================================
   SLIDER CORE
================================ */
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform, opacity;

   background: #000;
}



.hero-slide .slide {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  opacity: 0;
transform: scale(1.06);

  transition:
    opacity 2.2s ease-in-out,
    transform 8s ease-in-out;

  will-change: transform, opacity;
}
.hero-slide .slide.active {
  opacity: 1;
  transform: scale(1.15);
}

.hero-slide .slide.zoom-in {
  animation: zoomIn 8s ease-in-out forwards;
}

.hero-slide .slide.zoom-out {
  animation: zoomOut 8s ease-in-out forwards;
}

@keyframes zoomIn {
  from { transform: scale(1.03); }
  to   { transform: scale(1.10); }
}

@keyframes zoomOut {
  from { transform: scale(1.10); }
  to   { transform: scale(1.03); }
}




.hero43::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.58),
      rgba(0,0,0,.22),
      rgba(0,0,0,.78)
    ),

    radial-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size:
    100% 100%,
    22px 22px;

  opacity:.95;

  pointer-events:none;
}



/* ================================
   OVERLAY CINEMATOGRÁFICO mas oscuro
================================ */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    180deg,

    /* 🔥 arriba: sombra suave (no negro duro) */
    rgba(4, 7, 17, 0.78) 0%,

    /* ✨ luz ambiental sutil (usa tu identidad verde) */
    rgba(3, 105, 80, 0.12) 35%,

    /* 🧠 centro: lectura limpia sin corte */
    rgba(12, 7, 29, 0.35) 60%,

    /* 🌑 base: profundidad suave */
    rgba(3, 5, 14, 0.92) 100%
  );
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: radial-gradient(
    circle at 50% 40%,
    rgba(40, 248, 134, 0.08),
    transparent 60%
  );
}
.hero-content {
  position: absolute;
  left: 50%;
  bottom: 6vh;

  transform: translateX(-50%);

  width: min(92%, 900px);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  gap: var(--mrspace-xs);

  z-index: 2;

  padding: 1rem;
}

/* =========================================================
   🧠 HERO TITLE (AJUSTE LIMPIO)
   Solo mejora tamaño y legibilidad
========================================================= */
.mr-hero-title{

  font-family: 'Bebas Neue', sans-serif;
   text-transform: uppercase;
  margin:0;
font-size: clamp(1rem, 2vw, 1.6rem);
 /* font-size:clamp(1.2rem,2.4vw,2rem);*/

  line-height:1.05;
  letter-spacing:1px;

  color:var(--mr-light);

  text-align:center;

  max-width:950px;

  text-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* segunda linea accent */
.mr-hero-title .tmraccent{
  display:block;

  margin-top:.35rem;
/*  font-size:clamp(1rem,1.8vw,1.45rem);*/
  font-size:clamp(0.7rem,1.4vw,1.25rem);

  letter-spacing:.5px;

  color:var(--mr-accent);

  text-shadow:0 4px 14px rgba(40,248,179,.18);
}



/* descripcion */
.hero-content .subtitle.typewriter{
  margin-top:.4rem;

  max-width:680px;

  font-size:clamp(.78rem,1vw,.98rem);

  line-height:1.45;

  color:rgba(248,249,250,.82);

  text-shadow:0 2px 8px rgba(0,0,0,.32);
}


.hero-buttons {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mrspace-xs);
}

.hero-buttons .btn-ny {
  width: 180px;
  text-align: center;
  padding: 0.6rem 1.8rem;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

/*@media (max-width: 576px) {
  .hero-buttons .btn-ny {
    width: calc(50% - 0.25rem);
    min-width: 0; 
     border-width: 1px;
  }
}*/
@media (max-width:576px){

  .hero-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }

  .hero-buttons .btn-ny{
    width:100%;
    min-width:0;
  }

}
.hero-buttons .btn-ny span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ================================
   TARJETAS DE NOTICIAS
================================ */
.news-card {
  min-width: 320px;
  max-width: 320px;
  width: 100%;

  display: flex;
  flex-direction: column;
  height: 360px;

  background: linear-gradient(145deg, var(--mr-primary), var(--mr-accent));
  border-radius: 10px;

  overflow: hidden; /* 🔥 mejor que visible */
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

  flex-shrink: 0;
  cursor: pointer;

  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;

  scroll-snap-align: start;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px rgba(45, 245, 212, 0.3),
    0 0 30px rgba(14, 247, 150, 0.3);
}

/* Imagen */
.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

/* CONTENIDO */
.news-content {
  padding: 14px;
  color: #0c071d;

  flex: 1;
  display: flex;
  flex-direction: column;
}

/* TITULO UNIFORME */
.news-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  height: 42px;
}

/* FECHA */
.news-date {
  font-size: 0.85rem;
  color: var(--mr-yellow);
  margin-bottom: 10px;
}

/* BOTON */
.read-more-btn {
  background: var(--mr-dark);
  color: var(--mr-accent);
  border: none;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;

  margin-top: auto;

  transition: all 0.3s ease;
}

.read-more-btn:hover {
  background: var(--mr-primary);
  color: var(--mr-yellow);
}

/* ================================
   SLIDER DE NOTICIAS
================================ */
.news-section {
  overflow: hidden;
   background: var(--mr-bg-gradient-dark);
}

/* 🔥 IMPORTANTE: ancho completo real */
.news-slider {
  position: relative;
  width: 100%;
}

/* WRAPPER FULL WIDTH */
.news-wrapper {
  display: flex;
  gap: 16px;

  overflow-x: auto;
  scroll-behavior: smooth;

  padding: 0 20px 10px;

  scroll-snap-type: x mandatory;
}

/* scrollbar limpio */
.news-wrapper::-webkit-scrollbar {
  height: 6px;
}
.news-wrapper::-webkit-scrollbar-thumb {
  background: var(--mr-accent);
  border-radius: 10px;
}

/* ================================
   BOTONES (NO ROMPEN LAYOUT)
================================ */
.slider-btn {
  position: absolute; /* 🔥 clave */
  top: 50%;
  transform: translateY(-50%);

  background: var(--mr-accent);
  border: none;
  color: var(--mr-dark);

  font-size: 1.5rem;
  padding: 6px 10px;

  border-radius: 10px;
  cursor: pointer;

  z-index: 10;
  transition: all 0.2s ease;
}

.slider-btn:hover {
  transform: translateY(-50%) scale(0.9);
}

/* posiciones */
.prev-btn {
  left: 5px;
}

.next-btn {
  right: 5px;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .news-card {
    min-width: 260px;
    max-width: 260px;
    height: 340px;
  }

  .news-title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .news-wrapper {
    padding: 0 10px 10px;
  }
}


/* ================================
   MODAL
================================ */
/* BACKDROP */
.modal-bg {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;   /*eliminar*/
}

.modal-bg.active {
  display: flex;
}

.modal-content {
  background: #111;
  color: #fff;
  padding: 20px;
  max-width: 700px;
  width: 100%;
  border-radius: 5px;
}

.modal-close {
  float: right;
  cursor: pointer;
  font-size: 20px;
}

.modal-close-btn {
  margin-top: 15px;
  cursor: pointer;
}



@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive modal */
@media (max-width: 768px) {
  .modal-content { width: 95%; }
  .modal-image img { height: 200px; }
  .modal-body { padding: 15px; }
  .title-mr.h3 { font-size: 1.8rem; }
}
/*otro modal*/
/* ================================
   CONVENIOS MODERNOS MR
================================ */
.convenios-modern h2 {
  color: var(--mr-primary);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/*.convenios-modern p {
  color: var(--mr-dark-50);
  font-weight: 400;
  max-width: 850px;
  margin: 0 auto 3rem auto;
  line-height: 1.6;
}*/

.convenios-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

.convenios-carousel .carousel-track {
  display: flex;
  gap: 2rem;
  animation: scroll-left 25s linear infinite;
}

.convenios-carousel .logo-item {
  flex: 0 0 auto;
  padding: 10px;
  background: var(--mr-light);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.convenios-carousel .logo-item img {
  max-height: 80px;
  object-fit: contain;
}

.convenios-carousel .logo-item:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive convenios */
@media(max-width: 992px){
  .convenios-carousel .carousel-track { gap: 1.5rem; }
  .convenios-carousel .logo-item img { max-height: 70px; }
}

@media(max-width: 768px){
  .convenios-carousel .carousel-track { gap: 1rem; }
  .convenios-carousel .logo-item img { max-height: 60px; }
}

@media(max-width: 480px){
  .convenios-carousel .logo-item img { max-height: 50px; }
}

/* ================================
   BASE SECTION
================================ */
/* ========================================
   🌤️ LIGHT PRO BACKGROUND (NO PLANO)
======================================== */

.mr-info-section.light-pro {
  position: relative;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f4f7fb 60%,
    #eef2f7 100%
  );
  overflow: hidden;
}

/* glow suave */
.mr-info-section.light-pro::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(var(--mr-accent-rgb), 0.08);
  filter: blur(80px);
  border-radius: 50%;
}

/* ========================================
   🧭 TABS
======================================== */
.mr-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--mrspace-sm);
}

.mr-tab {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 15px 18px;
  border-radius: var(--mrdio-xs);

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);

  box-shadow: var(--mrshadow-sm);

  cursor: pointer;
  transition: var(--mr-transition);
}

.mr-tab i {
  font-size: 1.2rem;
  color: var(--mr-primary);
}

/* hover elegante */
.mr-tab:hover {
  transform: translateX(6px);
  box-shadow: var(--mrshadow-md);
}

/* activo premium */
.mr-tab.active {
  background: var(--mr-primary);
  color: var(--mr-accent);
}

.mr-tab.active i {
  color: var(--mr-accent);
}

/* ========================================
   📦 CONTENIDO
======================================== */
.mr-content-wrapper {
  position: relative;
}

.mr-tab-content12 {
  display: none;

  padding: 30px;
  border-radius: var(--mr-radius-lg);

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);

  box-shadow: var(--mrshadow-md);

  animation: mrFadeUp 0.5s ease;
}
.mr-tab-content {
  position: relative;

  display: none;

  padding: 30px;

  border-radius: var(--mrdio-xs);

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);

  box-shadow: var(--mrshadow-md);

  overflow: hidden;

  animation: mrFadeUp 0.5s ease;
}
.mr-tab-content.active {
  display: block;
}

/* línea decorativa */
.mr-tab-content12::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--mr-primarygr);
  border-radius: 4px;
}
.mr-tab-content::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: var(--mr-primarygr);

  border-radius: 4px 0 0 4px;
}
/* ========================================
   📱 RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .mr-tab {
    padding: 12px;
  }

  .mr-tab-content {
    padding: 20px;
  }
}







/* ================================
   INSTITUTION (FONDO BLANCO MODERNO)  dever mision vision dark
================================ */
/* CONTENEDOR */

.mr-block {
  background: var(--mr-bg-gradient-dark);
}

/* TABS */
.mr-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mr-tab {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px;
  border-radius: var(--mrdio-xs);

  background: rgba(255,255,255,0.04);
   color: var(--mr-aqua-bg);

  cursor: pointer;
  transition: var(--mr-transition);
}

.mr-tab i {
  font-size: 1.2rem;
  color: var(--mr-accent);
}

.mr-tab.active {
  background: var(--mr-darkgr);
  transform: translateX(6px);
  color: var(--mr-accent);
 
}

/* CONTENIDO */
.mr-content {
  padding: 20px;
  border-radius: var(--mrdio-md);

  background: rgba(255,255,255,0.04);
  color: var(--mr-light);

  min-height: 200px;

  animation: mrFadeUp 0.5s ease;
}

/* GLASS CARD */
.mr-glass {
  padding: 15px;
  border-radius: var(--mrdio-md);

  background: rgba(var(--mr-dark-rgb), 0.6);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.08);
}

/* SCROLL */
.mr-scroll {
  max-height: 250px;
  overflow-y: auto;
}

/* MINI POSTS */
.mr-mini-post {
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.mr-mini-post strong {
  color: var(--mr-accent);
  display: block;
}

/* HOVER PRO */
.mr-tab:hover {
  background: rgba(255,255,255,0.08);
  transform: translateX(4px);
}









/* ================================
   HERO INSTITUCIÓN  esto nose
================================ */
.values-section {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(var(--mr-dark-rgb), 0.95),
    rgba(var(--mr-primary-rgb), 0.7)
  );
}

/* overlay suave */
.values-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* card moderna */
.value-card-modern {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--mrdio-md);
  padding: 28px 20px;
  text-align: center;
  transition: all var(--mr-transition);
  backdrop-filter: blur(8px);
}

/* icono grande */
.value-card-modern i {
  font-size: 3rem;
  color: var(--mr-accent);
  display: block;
  margin-bottom: 10px;
  transition: all var(--mr-transition);
  text-shadow: 0 0 18px rgba(var(--mr-accent-rgb), 0.5);
}

/* texto */
.value-card-modern h5 {
  color: #fff;
  font-weight: 530;
  margin: 0;
}

/* hover moderno */
.value-card-modern:hover {
  transform: translateY(-6px);
  background: rgba(var(--mr-accent-rgb), 0.08);
  box-shadow: var(--mrshadow-md);
}

.value-card-modern:hover i {
  transform: scale(1.15);
  color: var(--mr-yellow);
}


/*limp*/

/* =====================================================
   HERO INSTITUCIÓN (MODERNO, LIMPIO, RESPONSIVE)
===================================================== */
.naturaleza {
  position: relative;
  min-height: 70vh;

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

  color: #fff;
  background: url('../img/fondo1.jpg') center/cover no-repeat;

}

/* overlay único y ligero */
.naturaleza .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}


.naturaleza.container {
  position: relative;
  z-index: 2;
}

/* Tarjetas de valores */
.value-card {
  background: rgba(255,255,255,0.08);
  transition: all 0.3s ease;
  cursor: default;
  padding: 20px;
  border-radius: 15px;
}

.value-card:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-5px);
}

.value-card img.value-icon {
  max-height: 70px;
  object-fit: contain;
}

/* ================================
   INFO CARD / VALORES
================================ */
.info-card {
  background: rgba(12,7,29,0.5);
  backdrop-filter: blur(8px);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.35);
}

.icon-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.info-card:hover .icon-img {
  transform: scale(1.2);
}



/* ================================
   ORGANIGRAMA MODERNO MR
================================ */


.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: relative;
}

.org-level {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
}


.org-node {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(var(--mr-accent-rgb), 0.18);

  color: var(--mr-light);
  border-radius: var(--mrdio-xs);

  padding: 18px;
  width: 220px;

  text-align: center;

  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.org-node2 img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--mr-primary);
  object-fit: cover;
  margin-bottom: 10px;
}
.org-node img {
  width: clamp(72px, 6vw, 100px);
  height: clamp(72px, 6vw, 100px);

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid rgba(var(--mr-primary-rgb), 0.7);

  margin-bottom: var(--mrspace-sm);

 /* display: block;*/
}
.org-cargo{
  color: var(--mr-accent);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.org-nombre{
  color: var(--mr-light);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.0;
  margin: 0;
}

.org-node2 h4 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: clamp(1rem,1.5vw,1.2rem);
}

.org-node:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 10px 20px rgba(40, 248, 220, 0.212);
}

.org-level::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 30px;
  background: var(--mr-accent);
}

.level-2::before,
.level-3::before { top: -30px; }
/* ================================
   ARTÍCULOS (MEJORADO)
================================ */

.articulos-section {
  background: var(--mr-dark);
  color: var(--mr-light);
}

/* tarjeta base */
.articulo-card {
  background: rgba(var(--mr-white-rgb, 255,255,255), 0.05);
  border: 1px solid rgba(var(--mr-accent-rgb), 0.08);
  transition: transform var(--mr-transition), box-shadow var(--mr-transition);
  backdrop-filter: blur(6px);
}

/* hover más limpio */
.articulo-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--mrshadow-lg);
  border-color: rgba(var(--mr-accent-rgb), 0.25);
}

/* imagen */
.articulo-card .articulo-img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  transition: transform 0.4s ease;
  border: 2px solid rgba(var(--mr-accent-rgb), 0.2);
}

/* efecto hover imagen */
.articulo-card:hover .articulo-img {
  transform: scale(1.08) rotate(-2deg);
}

/* tipografía jerárquica .articulo-card h3,
.articulo-card h4 {
  font-weight: 600;
  color: var(--mr-light);
}*/


.articulo-card small {
  color: var(--mr-gray-400, #9ca3af);
   font-size: 0.70em;
}

.articulo-card p {
  line-height: 1.5;
  color: var(--mr-gray-200);
}

/* badge más integrado */
.articulo-card .badge {
  font-size: 11px;
  letter-spacing: 0.4px;
  border-radius: var(--mrdio-pill);
  padding: 4px 10px;
}

/* fecha */
.articulo-card .text-info {
  color: var(--mr-accent) !important;
  font-size: 12px;
  opacity: 0.9;
}
/* ================================
   RESPONSIVE
================================ */
@media(max-width:992px) {
  .institution-main { flex-direction: column-reverse; align-items: center; gap: 30px; }
  .text-column, .image-column { flex: unset; width: 100%; }
  .institution-info { flex-direction: column; gap: 20px; }
}

@media(max-width:768px) {
  .naturaleza { min-height: 60vh; padding-bottom: 7rem; }
  .icon-img { width: 50px; height: 50px; }
  .org-level { flex-direction: column; gap: 40px; }
  .org-level::before { display: none; }
  .value-card img.value-icon { max-height: 50px; }
}

@media(max-width:480px) {
  .institution { padding: 35px 10px; }
  .institution-info .info-card { flex-direction: column; text-align: center; }
  .text-column i { font-size: 1.3rem; }
  .title-mr { font-size: clamp(1.5rem,5vw,2rem); }
  .subtitle-mr { font-size: 0.95rem; }
}


.member-name2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;

    text-align: center;

    color: rgba(124, 233, 252, 0.80);

    text-transform: capitalize;
    letter-spacing: 0.2px;
    line-height: 1.25;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}
.member-role2 {
    margin-bottom: 4px;

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

    text-align: center;

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

    text-transform: uppercase;
    letter-spacing: 0.6px;

    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}
.member-desc2 {
    font-size: 12.8px;
    font-weight: 400;
    line-height: 1.35;

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

    margin-bottom: 2px;

    text-align: center;

    /* 🔥 estabilidad visual */
    min-height: 34px;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.hero-miembros{
  position: relative;
  height: clamp(180px, 25vw, 240px);
  background: url('../img/mir11.jpg') center/cover no-repeat;

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

  color: var(--mr-light);
  text-align:center;

  overflow:hidden;
}
/* 🔥 capa oscura elegante */
.hero-miembros2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.322); /* 👈 aquí controlas la opacity */
  backdrop-filter: blur(1px);
}
.hero-miembros-overlay{
  position:absolute;
  inset:0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
  );

  backdrop-filter: blur(1px);
}
/* contenido */
.hero-miembros-content {
  position: relative;
  z-index: 2;

  max-width: 800px;
  padding: 20px;

  margin-top: auto; /* 👈 lo empuja hacia abajo */
}

/* título reutilizando tu sistema */
.hero-miembros .section-title {
  font-size: clamp(1.4rem, 2.5vw, 2.0rem);
  font-weight: 700;

  background: linear-gradient(
    45deg,
    #ffffff,
    rgba(255, 255, 255, 0.85),
    var(--mr-accent)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 10px;

  animation: fadeUp 0.8s ease;
}

/* texto */
.hero-miembros p {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  animation: fadeUp 1s ease;
}

/* animación suave */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   AREA MIEMBROS - CARD
========================= */

.miembros-section {
  background: var(--mr-dark);
  color: #fff;
}


.container-miembros {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    color: #fff;
}

.member-search-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.member-search-input {
  width: min(420px, 90%);
  padding: 12px 18px;

  border-radius: 50px;
 border: 1px solid rgba(255, 255, 255, 0.541);
  color: #fff;
  background: rgba(14, 13, 13, 0.445);

  outline: none;
  transition: all var(--mr-transition, 0.3s ease);

  /*text-align: center;*/
}
.member-search-input:focus {
  border: 1px solid transparent;

  background-image:
    linear-gradient(#000, #000),
    var(--mr-neongr);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  animation: mrBorderMove 4s linear infinite;

  box-shadow: 0 0 15px rgba(var(--mr-accent-rgb), 0.25);
}
.member-search-input:hover {
  border-color: rgba(255,255,255,0.4);
}




.member-card {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;

  background: linear-gradient(160deg,
    #050514 0%,
    #07071a 25%,
    #0b0b2a 50%,
    #060615 100%
  );

  border-radius: 10px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 380px;

  /* 👇 MEJORA PRO: borde elegante */
  border: 1px solid rgba(255,255,255,0.06);

  /* 👇 sensación glass suave */
  box-shadow:
    0 8px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);

  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.member-card:hover {
  transform: translateY(-6px);

  border-color: rgba(56,189,248,0.25); /* acento suave */

  box-shadow:
    0 14px 30px rgba(0,0,0,0.45),
    0 0 20px rgba(56,189,248,0.08);
}
/* Imagen de perfil centrada */
.member-img {
    width: 120px;
    height: 120px;

    border-radius: 50%;
    object-fit: cover;

    margin: 0 auto 15px;

    /* 👇 borde más elegante (no agresivo) */
    border: 2px solid rgba(255,255,255,0.10);

    /* 👇 profundidad suave en vez de glow fuerte */
    box-shadow:
        0 6px 18px rgba(0,0,0,0.35),
        inset 0 0 0 2px rgba(255,255,255,0.03);

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.member-img:hover {
    transform: scale(1.04);

    border-color: rgba(56,189,248,0.25);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.45),
        0 0 12px rgba(56,189,248,0.08);
}


.member-name {
    font-size: 15px;
    font-weight: 500;

    text-align: center;

    color: rgba(124, 233, 252, 0.80);
    letter-spacing: 0.2px;
}

.member-role {
    margin-bottom: 1px;

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

    text-align: center;

       color: var(--mr-gray);

}
.member-desc {
    font-size: 11.5px;
    font-weight: 200;
    line-height: 1.3;

    color: var(--mr-gray-500);

    text-align: left; /* 👈 CLAVE (NO justify) */

    padding: 4px 8px;

      background: rgba(94, 94, 97, 0.06);

    border-radius: 2px;

    margin: 4px 0;
}
.member-desc1 {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.2;

    color: var(--mr-gray-500);

    margin-bottom: 2px;

    text-align: center; 

}
.member-slider {
  padding: 10px 0;
  overflow: hidden; /* 🔥 evita espacios laterales raros */
}

.swiper-wrapper {
  align-items: stretch;
}
.swiper-slide {
  display: flex;
  justify-content: center; /* 🔥 centra cards */
}
@media (max-width: 768px) {
  .member-card {
    max-width: 320px; /* más natural en móvil */
    width: 90%;
  }
}

/* ================================
   MODAL BACKDROP (MODERNO)
================================ */
.modal-bg {
  position: fixed;
  inset: 0;

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

  background: rgba(5, 5, 15, 0.75);
  backdrop-filter: blur(10px);
border-radius: 8px;
  z-index: 99999;

  padding: 20px;
}

/* ================================
   MODAL CONTAINER (GLASS + PREMIUM)
================================ */
.modal-content {
  position: relative;

  width: min(900px, 95%);
  max-height: 90vh;

  overflow-y: auto;

  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;

  box-shadow: 0 25px 60px rgba(0,0,0,0.6);

  padding: 0;

  animation: modalPop .25s ease-out;
}

/* animación */
@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================================
   HEADER DEL MODAL
================================ */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 22px;

  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.modal-title {
  font-size: 16px;
  font-weight: 500;
   color: var(--mr-accent);
}

.modal-close {
  font-size: 22px;
  cursor: pointer;
  color: var(--mr-accent);
  transition: 0.2s;
}

.modal-close:hover {
  transform: scale(1.2);
}

/* ================================
   BODY
================================ */
.modal-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;

  padding: 22px;
}

/* ================================
   PERFIL (IZQUIERDA)
================================ */
.profile-side {
  text-align: center;
}

.profile-img {
  width: 140px;
  height: 140px;

  border-radius: 50%;
  object-fit: cover;

  border: 3px solid var(--mr-accent);

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.profile-name {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.profile-role {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================
   INFO GRID (DERECHA)
================================ */
.profile-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.info-box {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 👈 separación real entre label y value */

  padding: 12px 14px;
  border-radius: 10px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);

  font-size: 13px;

    transition: transform .2s ease, background .2s ease;
}



.info-box:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
}

/* etiqueta */
.info-box b {
  font-size: 11px;
  font-weight: 600;

  color: var(--mr-accent);
  letter-spacing: 0.5px;

  text-transform: uppercase;
}

/* valor */
.info-box span {
  font-size: 13px;
  color: rgba(255,255,255,0.85);

  line-height: 1.4;
}

/* ================================
   DESCRIPCIÓN
================================ */
.profile-description {
  grid-column: 1 / -1;

  margin-top: 10px;

  background: rgba(255,255,255,0.03);
  border-radius: 12px;

  padding: 14px;

  font-size: 13px;
  line-height: 1.6;

  color: rgba(255,255,255,0.75);
}

/* ================================
   BOTONES ACCIÓN
================================ */
.modal-actions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 10px;
}

.btn-modern {
  padding: 10px 16px;
  border-radius: 10px;

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

  border: none;
  cursor: pointer;

  transition: 0.2s;
}

.btn-modern.primary {
  background: var(--mr-primary);
  color: #fff;
}

.btn-modern.primary:hover {
  background: var(--mr-accent);
  color: #000;
}

.btn-modern.dark {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.btn-modern.dark:hover {
  background: rgba(255,255,255,0.12);
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .modal-body {
    grid-template-columns: 1fr;
  }

  .profile-info {
    grid-template-columns: 1fr;
  }
}

/*otro modal pub*/
/* =====================================
   📰 MODAL PUBLICACIONES (EXTENSIÓN)
===================================== */

.modal-publication .modal-body {
  display: flex;              /* rompe el grid viejo */
  flex-direction: column;
  gap: var(--mrspace-md);
}

/* =========================
   HEADER INFO (META)
========================= */
.modal-publication #modalAuthor,
.modal-publication #modalDate,
.modal-publication #modalLugar {
  font-size: 0.8rem;
  color: var(--mr-gray);
}

/* contenedor meta */
.modal-publication .modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================
   TITULOS
========================= */
.modal-publication #modalTitle {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 500;
  color: #fff;
}

.modal-publication #modalSubtitle {
  font-size: 0.95rem;
  color: var(--mr-gray-700);
}

/* =========================
   IMAGEN
========================= */
.modal-publication #modalImg {
  width: 100%;
  max-height: 300px;
  object-fit: cover;

  border-radius: var(--mrdio-xs);
  box-shadow: var(--mrshadow-sm);
}

/* =========================
   CONTENIDO
========================= */
.modal-publication #modalContent {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #eaeaea;
}

/* =========================
   ENLACE
========================= */
.modal-publication #modalEnlace a {
  color: var(--mr-accent);
  font-weight: 500;
  text-decoration: none;
}

.modal-publication #modalEnlace a:hover {
  text-decoration: underline;
}

/* =========================
   ACTIONS
========================= */
.modal-publication .modal-actions {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 22px;
  display: flex;
  justify-content: flex-end;
}

.modal-publication .modal-close-btn {
  background: var(--mr-primary);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--mrdio-xs);
  cursor: pointer;
  transition: var(--mr-transition-fast);
}

.modal-publication .modal-close-btn:hover {
  background: var(--mr-accent);
  color: #000;
}

/* =========================
   SCROLL MODERNO
========================= */
.modal-publication .modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-publication .modal-content::-webkit-scrollbar-thumb {
  background: var(--mr-primary);
  border-radius: var(--mrdio-xs);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  .modal-publication .modal-body {
    padding: 18px;
  }

  .modal-publication #modalImg {
    max-height: 200px;
  }

}

@media (max-width: 480px) {

  .modal-publication #modalTitle {
    font-size: 1.2rem;
  }

}
/*institucion page*/


/* =====================================
   🧱 CARD (OPTIMIZADA)
===================================== */
.mr-presidente-card {
  display: flex;
  gap: 12px;

  height: 100%;

  padding: 14px;
  border-radius: var(--mrdio-xs);

  background: rgba(var(--mr-dark-rgb), 0.65);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.06);

  transition: var(--mr-transition);

  /* 🔥 CLAVE para que no se rompa */
  overflow: hidden;
}

.mr-presidente-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mrshadow-md);
}

/* =====================================
   🖼️ FOTO (MÁS COMPACTA)
===================================== */
.mr-presidente-img {
  flex-shrink: 0;
}

.mr-presidente-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;

  border-radius: var(--mrdio-circle);
  border: 2px solid var(--mr-accent);
}

/* =====================================
   📄 BODY
===================================== */
.mr-presidente-body {
  display: flex;
  flex-direction: column;
  gap: 4px;

  flex: 1;
  min-width: 0; /* 🔥 evita desbordes */
}

/* cargo */
.mr-presidente-cargo {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mr-accent);
  letter-spacing: 0.8px;
}

/* nombre */
.mr-presidente-nombre {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 0;

  line-height: 1.2;
}

/* periodo */
.mr-presidente-periodo {
  font-size: 0.75rem;
  color: var(--mr-gray);
}

/* =====================================
   👥 LISTA (CONTROLADA)
===================================== */
.mr-presidente-lista {
  margin-top: 4px;

  max-height: 155px;        /* 🔥 evita cards gigantes */
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mr-item {
  font-size: 0.75rem;
  color: #ddd;

  line-height: 1.3;
}

.mr-item span {
  color: var(--mr-amber-light);
}

.mr-item b {
  color: #fff;
  font-weight: 500;
}

/* =====================================
   🟢 ESTADO
===================================== */
.mr-presidente-estado {
  margin-top: auto; /* 🔥 empuja abajo */

  font-size: 0.65rem;
  padding: 3px 8px;

  border-radius: var(--mrdio-x);

  background: rgba(255,255,255,0.08);
  color: var(--mr-gray);

  align-self: flex-start;
}

.mr-presidente-estado.activo {
  background: var(--mr-primary);
  color: #fff;
}

/* =====================================
   📱 RESPONSIVE
===================================== */
@media (max-width: 768px) {

  .mr-presidente-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mr-presidente-img img {
    width: 90px;
    height: 90px;
  }

  .mr-presidente-body {
    align-items: center;
  }

  .mr-presidente-lista {
    max-height: none; /* en mobile dejamos crecer */
    align-items: center;
  }

  .mr-presidente-estado {
    align-self: center;
  }

}




.hero-institucion{
    position: relative;
    height: clamp(180px, 25vw, 240px);

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

    text-align: center;
    color: var(--mr-light);

    background: url('../img/mir8.jpg') center center/cover no-repeat;

    overflow: hidden;
}

.hero-institucion-overlay{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top,
            rgba(40,248,179,.08),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            rgba(5,8,15,.25),
            rgba(5,8,15,.75)
        );
}
/* contenido */
.hero-institucion-content {
  position: relative;
  z-index: 2;

  max-width: 800px;
  padding: 20px;

  margin-top: auto; /* 👈 lo empuja hacia abajo */
}



/* ================================== */
/* ESTILOS LIMPIOS, MISMOS COLORES Y FUNCIONALIDAD */
/* ================================== */
.footer-modern {
    background:  var(--mr-primarygr);
    color: #fff;
}

.footer-modern .row>div {
    padding: 10px 15px;
}

.footer-modern a {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    word-break: break-word;
}

.footer-modern a:hover {
    color: var(--mr-accent);
    text-decoration: underline;
}
.footer-modern .bi {
    color: var(--mr-accent);
    font-size: 0.9rem; /* tamaño del icono */
}


.footer-legal {
    background-color: rgba(11, 15, 26, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 6px 0;              /* 🔥 más pequeño */
    min-height: 52px;            /* 🔥 controla altura total */
    display: flex;               /* 🔥 centra vertical */
    align-items: center;         /* 🔥 centro vertical real */
    justify-content: center;

    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-legal .container {
    display: flex;
      
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px; /* separación mínima */
}

.footer-legal-text {
    font-size: 12px;
        font-weight: 200;
    color: rgba(255, 255, 255, 0.651);
    margin: 0;
    line-height: 1.2;  /* 🔥 compacto */
}

.footer-legal-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.493);
    margin: 0;
    line-height: 1.2;
  font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.footer-legal-sub .footer-link {
    color: var(--mr-accent);
    font-weight: 450;
    text-decoration: none;
    opacity: 0.9;
}

.footer-legal-sub .footer-link:hover {
    opacity: 1;
    color: var(--mr-light);
    text-decoration: none;
}
.footer-icon {
  font-size: 14px;
  width: 16px;
  display: inline-flex;
  justify-content: center;
}
.footer-social {
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.7);
      font-size: 1.3rem;
    transition: color 0.3s, transform 0.3s;
     text-decoration: none;
}

.footer-social a:hover {
    color: var(--mr-accent);
    transform: translateY(-2px) scale(1.15);
     text-decoration: none;
}


/*mik*/



#back-to-top {
    bottom: 30px;
    right: 30px;

    font-size: 2.4rem; /* 👈 más grande */
    color: var(--mr-accent);

    display: none;
    transition: 0.25s ease;

    text-decoration: none;
}

#back-to-top:hover {
    color: var(--mr-dark);
    transform: scale(1.15);
}

@media(max-width:768px) {
    #back-to-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        bottom: 20px;
        right: 20px;
    }

    .footer-modern .fas,
    .footer-modern .fa-solid,
    .footer-modern .fa-brands {
        font-size: 0.85rem;
    }
}

@media(max-width:576px) {
    .footer-modern .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

#preloader {
    position: fixed;
    inset: 0;
    background: #0b0f1a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.mr-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(45deg, #22c55e, #4ade80);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: pulse 0.8s infinite ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.4;
    }
}