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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  padding-top: 170px;
  position: relative; /* 🔥 necesario para la columna */
}

/* CONTENEDOR */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  z-index: 10;
  background: white;
  display: flex;
  align-items: center;
  will-change: transform; /* 🔥 mejora rendimiento del fixed */
}

/* HEADER EN DOS FILAS */
.header-content {
  display: flex;
  flex-direction: column;
}

/* FILA SUPERIOR (REDES) */
.header-top {
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  height: 30px; /* 🔥 fijás altura estable */
}

/* ICONOS */
.social {
  display: flex;
  gap: 12px;
}

.social img {
  height: 28px; /* probá entre 22 y 26 según cómo lo veas */
  width: auto;
  display: block;
  opacity: 0.85;
  transition: 0.3s;
}

.social img:hover {
  opacity: 1;
}

.header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120px; /* 🔥 agregar esto */
}

.logo img {
  height: 90px;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
}
/* 🔒 hamburguesa oculta en desktop */
.hamburger {
  display: none;
}

/* ================= 🔥 COLUMNA ================= */

.columna-bg {
  position: absolute;
  top: 0;
  right: calc((100% - 1200px) / 2);
  width: 470px;
  height: 100%;
  background: rgba(219, 223, 250, 0.5);
  backdrop-filter: blur(8px);
  z-index: 2;
}

/* ================= HERO ================= */

.hero {
position: relative;
height: 500px;
display: flex;
align-items: center;
overflow: hidden;
}

.slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

/* 🔥 ESTA LÍNEA SOLUCIONA TODO */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporción y recorta */
}

/* CONTENIDO */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* CARD */
.hero-card {
  width: 100%;
  max-width: 420px;
  padding: 50px;
}

/* TEXTOS */
.hero-card h1 {
  font-size: 50px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-card p {
  font-size: 16px;
  margin-bottom: 30px;
  color: #555;
}

/* BOTÓN */
.btn-afiliarse {
  position: relative;
  display: inline-block;
}

.btn-afiliarse img {
  width: 320px;
  display: block;
}

.btn-afiliarse span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: white;
  font-weight: bold;
  font-size: 24px;
}

/* ================= INSTITUCIONAL ================= */

.institucional {
  padding: 100px 0;
  position: relative;
  z-index: 3; /* 👈 arriba de la columna */
}

.institucional-content {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.2fr;
  gap: 40px 100px;
  align-items: stretch;
}

.institucional-content > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inst-left img {
  width: 120%;
  height: auto;
  display: block;
  border-radius: 4px; /* opcional, queda más pro */
}

.inst-center {
  text-align: justify
} 

.inst-center h2 {
  font-size: 32px;
  margin-bottom: 0px;
}

.inst-center p {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 17px;
}

.inst-right h2 {
  font-size: 32px;
  margin-bottom: 35px;
  text-align: left ; 
}


.inst-right img {
  width: 220px;
}

.img-directiva {
  transform: scale(1.1);
}
/* ================= NOVEDADES ================= */

.novedades {
  padding: 35px 0;
  position: relative;
  background-color: #fff; /* 👈 AQUÍ */ 
}

.novedades::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 0;
}
.novedades-content {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
  gap: 40px 60px;
  align-items: stretch;
  position: relative ;   /* 👈 agregar */  
  z-index: 3 ;
}

/* ITEM */
.nov-item img {
  width: 85%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.cong-item p {
  font-size: 18px;
  line-height: 1.4;
  color: #222;
}
/* ================= CONGRESOS ================= */

.congresos {
  padding: 40px 0;
  position: relative;
  background-color: #d3d7df; /* 👈 AQUÍ */ 
}

.congresos::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #d3d7df;
  z-index: 0;
}
.congresos-content {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
  gap: 40px 60px;
  align-items: stretch;
  position: relative ;   /* 👈 agregar */  
  z-index: 3 ;
}

/* ITEMS */

.cong-item img {
  width: 90%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* DERECHO (calendario) */

.cong-item h2 {
  font-size: 26px;
  line-height: 1.3;
}
/* ================= CONTACTO ================= */

.contacto {
  padding: 80px 0;
  background-color: #f5f5f5;
  position: relative;
  z-index: 3;
}

.contacto-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contacto-info h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.contacto-info p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* FORM */

.contacto-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contacto-form input,
.contacto-form textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  font-size: 14px;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
  outline: none;
  border-bottom: 2px solid #000;
}

/* BOTÓN */

.btn-enviar {
  margin-top: 10px;
  padding: 14px;
  border: none;
  background: #2cb2fa;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-enviar:hover {
  background: #2cb2fa;
}
/* SCROLL OFFSET */
section {
  scroll-margin-top: 172px;
}


/* ===== BOTONES DE SECCIONES ===== */

.boton-seccion {
  display: inline-block;              /* 👈 importante */
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  background-image: url('img/boton-de-secciones.gif'); /* ajustá ruta si hace falta */
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  min-width: 140px;
  text-align: center;
  margin-left: auto;           /* 👈 clave: lo empuja a la derecha */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.boton-seccion:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.contenedor-boton {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
.boton-seccion {
  border: none;
  cursor: pointer;
  margin-top: 20px;
}
.btn-enviar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

.nov-item h3 {
  font-weight: normal;
}
.nov-item,
.cong-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* ================= FOOTER ================= */

.footer {
  position: relative;
  padding: 100px 0;
  background: #cbd5da;
  z-index: 3;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 0;
}

/* IZQUIERDA */

.footer-left img {
  width: 100%;
  max-width: 200px;
}

.footer-left p {
  font-size: 16px;
  color: #555;
}

/* CENTRO */

.footer-center {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-center p {
  font-size: 14px;
  color: #555;
  gap: 3px;
 }

/* DERECHA */

.footer-right p {
  font-size: 14px;
  color: #555;
  gap: 3px;
 }
 .section {
  padding: 80px 0;
}

.section-content {
  display: flex;
  align-items: stretch;
  gap: 40px;
}
.section-left img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

.section-center {
  flex: 1;
}

.section-right {
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloque {
  margin-bottom: 30px;
}

.bloque h2 {
  margin-bottom: 10px;
}

.bloque p {
  color: #555;
  line-height: 1.5;
  text-align: justify;
}
.nav-btn-img {
  width: 48px;
  height: 48px;
  background-image: url("./img/boton-de-secciones.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 8px;

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

  color: white;
  font-size: 20px;
  text-decoration: none;
}
.nav-btn:hover {
  opacity: 0.8;
}
.alt-bg {
  background-color: #f5f5f5; /* mismo gris que novedades */
}
.col-left {
  height: 100%;
}
.section-3col {
  display: grid;
  grid-template-columns: 2fr 0.6fr 0.6fr;
  gap: 40px;
  align-items: start; /* 👈 CAMBIO IMPORTANTE */
}
#mision-vision .col-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#mision-vision .nav-btn-img {
  margin-top: auto;
  align-self: flex-end; /* 👈 ESTE es el correcto */
  margin-bottom: 10px;
}
#mision-vision {
  min-height: 550px; /* probá 450 / 500 / 550 según diseño */
  display: flex;
  align-items: stretch;
}
#mision-vision .section-content {
  flex: 1; /* 👈 hace que ocupe toda la altura */
}
.section h2 {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: bold;
}
.section p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  text-align: justify;
}
/* ===== SECCION COMISION ===== */

.white-bg {
  background-color: #ffffff;
}

#comision-1 {
  min-height: 500px;
  display: flex;
}

#comision-1 .section-content {
  flex: 1;
}

#comision-1 .col-right {
  display: flex;
  flex-direction: column;
}

#comision-1 .comision-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-self: flex-end;
}
#comision-2 {
  min-height: 500px;
  display: flex;
}

#comision-2 .section-content {
  flex: 1;
}

#comision-2 .col-right {
  display: flex;
  flex-direction: column;
}

#comision-2 .comision-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-self: flex-end;
}
#comision-3 {
  min-height: 500px;
  display: flex;
}

#comision-3 .section-content {
  flex: 1;
}

#comision-3 .col-right {
  display: flex;
  flex-direction: column;
}

#comision-3 .comision-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-self: flex-end;
}
#comision-4 {
  min-height: 500px;
  display: flex;
}

#comision-4 .section-content {
  flex: 1;
}

#comision-4 .col-right {
  display: flex;
  flex-direction: column;
}

#comision-4 .comision-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-self: flex-end;
}
#comision-5 {
  min-height: 500px;
  display: flex;
}

#comision-5 .section-content {
  flex: 1;
}

#comision-5 .col-right {
  display: flex;
  flex-direction: column;
}

#comision-5 .comision-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-self: flex-end;
}
#accesos-rapidos {
  padding: 80px 20px;
  min-height: 480px;
  background: #e7edef;
}

.titulo-seccion {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
}

.accesos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.acceso-card {
  display: block;
  padding: 15px;
  background: white;
  border-radius: 10px;
  text-decoration: none;
  color: #333;

  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.acceso-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.acceso-card p {
  font-size: 14px;
  color: #666;
}

/* 🔥 hover elegante */
.acceso-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 10px rgba(0,0,0,0.08);
}

.grid-accesos {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.acceso {
  padding: 12px 20px;
  background: #d3dbdd;
  border-radius: 6px;
  text-decoration: none;
}

#cientifico, #socios {
  padding: 80px 20px;
}
@media (max-width: 900px) {
  .accesos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .accesos-grid {
    grid-template-columns: 1fr;
  }
}
#accesos-rapidos {
  position: relative;
  z-index: 2;
}
.btn-afiliar-contacto {
  display: inline-block;
  margin-top: 15px;
}
.cientifico {
  padding: 80px 20px;
  min-height: 500px;
}

.cientifico-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.cientifico-card {
  display: block;
  padding: 30px;
  background: white;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.cientifico-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.cientifico-card p {
  font-size: 14px;
  color: #666;
}

.cientifico-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
@media (max-width: 900px) {
  .cientifico-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .cientifico-grid {
    grid-template-columns: 1fr;
  }
}
#cientifico {
  position: relative;

  background-image: url("img/cientifico.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 🔥 EFECTO */
  z-index: 2;
}

#cientifico .container {
  position: relative;
  z-index: 2;
}
#cientifico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45); /* o negro suave */
  z-index: 2;
}
#accesos-rapidos {
  position: relative;

  background-image: url("img/cientifico.jpg"); /* misma imagen */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  z-index: 2;
}
#accesos-rapidos::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45); /* igual que científico */
  z-index: 2;
}
#accesos-rapidos .container {
  position: relative;
  z-index: 2;
}

/* MITAD IMAGEN */
.card-img {
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* MITAD TEXTO */
.card-text {
  width: 70%;
  height: 100%;
  background: rgba(0, 0, 0, 0.08); /* 🔥 color institucional */
  color: #666;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  padding: 20px;
}

/* TEXTO */
.card-text h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.card-text p {
  font-size: 14px;
  opacity: 0.9;
}
.split-card:hover .card-img {
  transform: scale(1.05);
  transition: 0.4s;
}
.card-img {
  transition: transform 0.4s ease;
}

  .card-img,
  .card-text {
    width: 100%;
    height: 100px;
  }

.split-card {
  display: flex;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
.cientifico-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  grid-auto-rows: 200px; /* 👈 fuerza TODAS las cards */
}

.card-img,
.card-text {
  height: 100%; /* 👈 ESTO ES LO QUE TE FALTA */
}
.cientifico-card.split-card {
  padding: 0 !important;
  height: 100%;
  display: flex;
}
/* ===== NOVEDADES V2 (SECCIÓN NUEVA, NO ROMPE NADA) ===== */

.novedades-v2 {
  width: 100%;
}

/* CARD BASE */
.nov-card {
  display: flex;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* HOVER */
.nov-card:hover {
  transform: translateY(-3px);
}

.nov-card:hover h3,
.nov-card:hover h2 {
  text-decoration: underline;
}

/* IMAGEN */
.nov-img {
  width: 40%;
  min-height: 180px;
  background-size: cover;
  background-position: center;
}

/* TEXTO */
.nov-text {
  width: 60%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nov-text h2 {
  font-size: 30px;
  margin-bottom: 10px;
}

.nov-text h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.nov-text p {
  font-size: 14px;
  color: #555;
  text-align: justify;
}

/* PRINCIPAL */
.nov-principal {
  margin-bottom: 40px;
}

.nov-principal .nov-card {
  height: 450px;
}

/* LISTADO EN 2 COLUMNAS */
.nov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 25px;
  height: 300px;
}

/* ALTERNANCIA */
.nov-row .nov-card:nth-child(2) {
  flex-direction: row-reverse;
}


.novedades-v2 {
  max-width: 1250px; /* probá 1000–1200 según tu gusto */
  margin: 0 auto;
  padding: 0 20px;
}
.nov-card {
  box-shadow: 0 6px 12px rgba(0,0,0,0.09);
}
/* evitar borde negro y cambios raros al llegar por el link */
#novedad-destacada:focus,
#novedad-destacada:target {
  outline: none;
}

/* evitar que cambie tamaño */
#novedad-destacada {
  transform: none;
}
#novedad-destacada {
  scroll-margin-top: 180px;
}

/* 🔥 nov-text correcto */
.nov-text {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 0 0 12px 12px;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acceso-card {
  text-align: center;
}

.acceso-icono {
  width: 55px;
  height: 55px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acceso-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.acceso-icono {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
}
#congreso-principal,
#congresos-listado {
  scroll-margin-top: 120px;
}
#congreso-principal:focus {
  outline: none;
}
#congreso-principal,
#congresos-listado {
  scroll-margin-top: 180px;
}
.acceso-card,
.nov-card {
  text-decoration: none;
  color: inherit;
}
.nov-card:focus,
.nov-card:active {
  outline: none;
}
#tarjeta-guias,
#tarjeta-clinica,
#tarjeta-publicaciones,
#tarjeta-webinars {
  scroll-margin-top: 190px;
}
/* Solo botones de las tarjetas científicas */
#cientifico .nov-card .nov-text > .nav-btn-img {
  width: 48px;
  height: 48px;
  background-image: url("./img/boton-de-secciones.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 8px;

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

  color: white;
  font-size: 20px;
  text-decoration: none;
}

/* Hover solo para esos botones */
#cientifico .nov-card .nov-text > .nav-btn-img:hover {
  opacity: 0.8;
}
h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 900;
}

p {
  font-family: Arial, sans-serif;
}
.nov-item p,
.cong-item p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}
.footer {
  overflow: hidden;
}

.footer-center p,
.footer-right p {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {

  .columna-bg {
    display: none;
  }

  .institucional-content,
  .novedades-content,
  .congresos-content,
  .contacto-content {
    grid-template-columns: 1fr;
  }

  .hero-content {
    justify-content: center;
    text-align: center;
  }
  
  .header {
    height: auto;
    padding: 10px 0;
  }

  .header-bottom { 
    height: auto ; 
  } 

  body {
    padding-top: 80px;
  }

  /* 🔥 ESTO ES LO IMPORTANTE */
 .header-top {
  display: none;
}

  .logo img {
    height: 60px;
  }

   .hamburger {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
    font-size: 28px;
    cursor: pointer;
  }

  .hero {
    overflow: visible; /* 🔥 CLAVE */
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .inst-left img {
    width: 100%;
  }
  .btn-afiliarse img {     
    width: 240px ; /* probá entre 200 y 260 según lo veas */  
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* oculto */
    width: 50%;
    height: 100vh;
    background: white;

    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 100px 20px;

    transition: right 0.3s ease;
    z-index: 9998;
  }

  .nav.active {
    right: 0; /* visible */
  }
  
  section {
    scroll-margin-top: 0 !important;
  }

  /* 🔥 forzar estructura vertical */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* 🔥 imagen arriba */
  .hero-bg {
    position: relative !important;
    height: 35vh !important; /* más chica */
  }

  .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 🔥 romper overlay DE VERDAD */
  .hero-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;

    display: block !important;
    width: 100% !important;

    padding: 25px 20px;
    text-align: right;
  }

  /* 🔥 contenido limpio abajo */
  .hero-card {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* textos */
  .hero-card h1 {
    font-size: 30px;
  }

  .hero-card p {
    font-size: 14px;
  }

  /* botón */
  .btn-afiliarse img {
    width: 220px !important;
  }
.hero-content {
  background: #eef3f5; /* gris suave */
}
/* ===== HERO FULL SCREEN MOBILE ===== */

.hero {
  min-height: 100vh; /* 🔥 ocupa toda la pantalla */
  display: flex;
  flex-direction: column;
}

/* imagen ocupa la mitad */
.hero-bg {
  height: 50vh; /* mitad superior */
}

/* contenido ocupa la otra mitad */
.hero-content {
  height: 50vh;
  display: flex;
  align-items: center;
}

  .accesos-grid {
    grid-template-columns: repeat(1fr);
    gap: 8px;
  }

  .acceso-card {
    padding: 8px;
  }

  .acceso-icono {
    width: 35px;
    height: 35px;
    margin-bottom: 8px;
  }

  .acceso-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  .acceso-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  #accesos-rapidos {
    padding: 30px 10px;
  }

  .titulo-seccion {
    padding-top: 40px;
    font-size: 22px;
    margin-bottom: 20px;
  }

  .accesos-grid { 
    align-items: start ; /* 🔥 evita que se estiren */ 
  } 

  .acceso-card {
    padding: 6px;
  }

  .acceso-icono {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }

  .acceso-card h3 {
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 1.1;
  }

  .acceso-card p {
    font-size: 13px;
    line-height: 1.2;
  }
 grid-auto-rows: 110px;
 
.hero-content {
  height: 50vh;
  display: flex;
  align-items: center;
}

  .socios-grid {
    grid-template-columns: repeat(1fr);
    gap: 8px;
  }

  .socios-card {
    padding: 8px;
  }

  .socios-icono {
    width: 35px;
    height: 35px;
    margin-bottom: 8px;
  }

  .socios-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  .socios-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  #socios-rapidos {
    padding: 30px 10px;
  }

  .titulo-seccion {
    padding-top: 40px;
    font-size: 22px;
    margin-bottom: 20px;
  }

  .socios-grid { 
    align-items: start ; /* 🔥 evita que se estiren */ 
  } 

  .socios-card {
    padding: 6px;
  }

  .socios-icono {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }

  .socios-card h3 {
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 1.1;
  }

  .socios-card p {
    font-size: 13px;
    line-height: 1.2;
  }
 grid-auto-rows: 110px;
 /* ===== CIENTIFICO MOBILE FIX ===== */

#cientifico .cientifico-grid {
  grid-template-columns: 1fr !important; /* 🔥 una sola columna */
  gap: 10px;
}

#cientifico .cientifico-card.split-card {
  flex-direction: row; /* horizontal */
  height: auto;
}

/* imagen izquierda */
#cientifico .card-img {
  width: 35%;
  min-height: 90px;
}

/* texto derecha */
#cientifico .card-text {
  width: 65%;
  padding: 10px;
}

#cientifico .card-text h3 {
  font-size: 14px;
}

#cientifico .card-text p {
  font-size: 12px;
}
/* 🔥 FORZAR CIENTIFICO MOBILE (modo debug definitivo) */

.cientifico-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.cientifico-card {
  width: 100% !important;
}

.split-card {
  flex-direction: row !important;
}

  /* ===== FIX FINAL CIENTIFICO MOBILE ===== */

  .cientifico-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px;
  }

  .cientifico-card.split-card {
    display: flex;
    flex-direction: row;
    height: auto;
  }

  .card-img {
    width: 40%;
    min-height: 120px;
  }

  .card-text {
    width: 60%;
    padding: 15px;
  }

  .card-text h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .card-text p {
    font-size: 13px;
    line-height: 1.4;
  }
/* ===== AJUSTE SPACING CIENTIFICO MOBILE ===== */

#cientifico {
  padding-top: 20px;   /* 🔽 antes 80px */
}

#cientifico .titulo-seccion {
  margin-top: 0;
  margin-bottom: 15px;
}

/* opcional: subir aún más todo */
#cientifico .container {
  margin-top: -10px;
}
#institucional {
  padding-top: 10px;   /* 🔽 antes 80px */
}
#congresos {
  padding-top: 10px;   /* 🔽 antes 80px */
}

/* ===== ACCESOS FULL SCREEN MOBILE ===== */

#accesos-rapidos {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* contenedor interno */
#accesos-rapidos .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* ===== NOVEDADES MOBILE AJUSTE ===== */

.nov-item img {
  width: 100%;
  height: 220px;       /* 🔥 controla la altura */
  object-fit: cover;   /* 🔥 recorta sin deformar */
}
/* ===== CIENTIFICO FULL SCREEN MOBILE ===== */

#cientifico {
  min-height: 100dvh;
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 👈 evita que se vaya abajo */

  padding-top: 40px; /* 🔧 ajustable */
}

/* contenedor interno */
#cientifico .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#contacto {
  padding-top: 10px;   /* 🔽 antes 80px */
}
/* ===== NOVEDADES MOBILE FINAL LIMPIO ===== */

.novedades-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 🔥 ORDEN */
.nov-item:nth-child(3) { order: 1; }
.nov-item:nth-child(1) { order: 2; }
.nov-item:nth-child(2) { order: 3; }


/* ===== NOTICIA PRINCIPAL ===== */

.nov-item:nth-child(3) {
  display: flex;
  flex-direction: column;
}

.nov-item:nth-child(3) img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #eef3f5;
}

.nov-item:nth-child(3) .contenedor-boton {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}


/* ===== SECUNDARIA 1 ===== */

.nov-item:nth-child(1) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.nov-item:nth-child(1) img {
  width: 35%;
  height: 80px;
  object-fit: cover;
}

.nov-item:nth-child(1) p {
  width: 65%;
  font-size: 12px;
}


/* ===== SECUNDARIA 2 (SOLUCIÓN DEFINITIVA) ===== */

.nov-item:nth-child(2) {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 10px;
  align-items: center;
}

/* imagen */
.nov-item:nth-child(2) img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

/* texto */
.nov-item:nth-child(2) p {
  font-size: 12px;
}

/* 🔥 botón ocupa fila completa abajo */
.nov-item:nth-child(2) .contenedor-boton {
  grid-column: 1 / -1; /* 🔥 clave */
  margin-top: 10px;
  text-align: center;
}
/* 🔥 botón ocupa fila completa abajo */
.nov-item:nth-child(2) .contenedor-boton {
  grid-column: 1 / -1; /* 🔥 clave */
  margin-top: 10px;
  text-align: center;
}
/* ===== CONGRESOS MOBILE FIX FINAL ===== */

.congresos-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 🔥 ORDEN */
.cong-item:nth-child(3) { order: 1; }
.cong-item:nth-child(1) { order: 2; }
.cong-item:nth-child(2) { order: 3; }


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

.cong-item:nth-child(3) {
  display: flex;
  flex-direction: column;
}

.cong-item:nth-child(3) img {
  width: 100%;
  height: 180px;
  object-fit: contain;
}

/* 🔥 BOTÓN PRINCIPAL DERECHA */
.cong-item:nth-child(3) .contenedor-boton {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100%;
  margin-top: 10px;
}
/* 🔥 SOLO la imagen más baja */
.cong-item:nth-child(3) img {
  width: 100%;
  height: 130px;       /* 👈 controlás altura acá */
  object-fit: cover;
}

/* ===== SECUNDARIOS ===== */

.cong-item:nth-child(1),
.cong-item:nth-child(2) {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 10px;
  align-items: center;
}

.cong-item:nth-child(1) img,
.cong-item:nth-child(2) img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

/* 🔥 TEXTO (FORZADO) */
.cong-item:nth-child(1) h2,
.cong-item:nth-child(2) h2 {
  font-size: 20px !important;
  line-height: 1.0;
  margin: 0;
}

/* 🔥 BOTONES CONGRESOS MOBILE */

.cong-item .contenedor-boton {
  grid-column: 1 / -1; /* ocupa toda la fila */
  display: flex;
  justify-content: flex-end; /* lo manda a la derecha */
  margin-top: 10px;
}
/* ===== FIX VISUAL CONGRESOS ===== */

/* 🔥 1. TEXTO PRINCIPAL (item 3) */
.titulo-congreso {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.0;
  margin: 0;
}

/* 🔥 2. IMÁGENES SECUNDARIAS (NO RECORTAR) */
.cong-item:nth-child(1) img,
.cong-item:nth-child(2) img {
  height: 80px;
  object-fit: contain; /* 🔥 en lugar de cover */
  background: #eef3f5;     /* opcional para evitar “huecos feos” */
}
/* 🔥 bordes redondeados en novedades y congresos */

.nov-item img,
.cong-item img {
  border-radius: 8px;
}
/* 🔥 IMÁGENES CONSISTENTES */
.nov-item img,
.cong-item img,
.acceso-card img,
.cientifico-card img {
  border-radius: 8px;
}
/* 🔥 TARJETAS GENERALES */
.acceso-card,
.cientifico-card,
.nov-item,
.cong-item {
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}
/* 🔥 SOMBRA GLOBAL */
.acceso-card,
.cientifico-card,
.nov-item,
.cong-item {
  box-shadow: 0 4px 8px rgba(0,0,0,0.09);
}
/* 🔥 ESPACIADO INTERNO */
.acceso-card,
.cientifico-card,
.nov-item,
.cong-item {
  padding: 12px;
}

/* 🔥 separación entre elementos */
.accesos-grid,
.cientifico-grid,
.novedades-content,
.congresos-content {
  gap: 12px;
}
/* 🔥 BOTONES */
.boton-seccion {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
}
/* 🔥 TITULOS */
.titulo-seccion {
  font-weight: 600;
}

/* 🔥 TEXTOS */
p {
  line-height: 1.4;
}
/* ===== LAYOUT UNIFICADO MOBILE NOVEDADES ===== */

.nov-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* IMAGEN FULL */
.nov-img {
  width: 100% !important;
  height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* TEXTO FULL */
.nov-text {
  width: 100% !important;
  padding: 15px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* BOTÓN ABAJO */
.nov-text .boton-seccion {
  margin-top: 10px;
  align-self: flex-start;
}

/* CONTENEDOR GENERAL */
.nov-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px;
}

/* DESTACADA (misma lógica pero más aire) */
.nov-principal .nov-img {
  height: 220px !important;
}

.nov-principal .nov-text {
  padding: 20px !important;
}

  /* 🔥 LIBERAR ALTURA DE TODA LA SECCIÓN */
  .novedades-v2,
  .nov-principal,
  .nov-row,
  .novedades,
  section {
    height: auto !important;
    min-height: unset !important;
  }

  /* 🔥 PERMITIR CRECER */
  .container {
    height: auto !important;
  }

  /* 🔥 EVITAR RECORTES */
  .novedades,
  .nov-row,
  .nov-card {
    overflow: visible !important;
  }
/* ===== INSTITUCIONAL MOBILE (LAYOUT LIMPIO) ===== */

  /* 🔥 eliminar grid */
  .institucional-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  /* 🔥 ORDEN EXACTO */
  .inst-left { order: 1; }
  .inst-center { order: 2; }
  .inst-right { order: 3; }

  /* 🔥 TODO AL ANCHO */
  .inst-left,
  .inst-center,
  .inst-right {
    width: 100% !important;
  }

  /* 🔥 IMAGEN CONTROLADA */
  .inst-left img {
    width: 100% !important;
    height: auto;
  }

  /* 🔥 TEXTOS PROLIJOS */
  .inst-center,
  .inst-right {
    text-align: left;
  }

  /* 🔥 EVITAR DESBORDE GLOBAL */
  body {
    overflow-x: hidden;
  }

  /* 🔥 ROMPER GRID SÍ O SÍ */
  .institucional .institucional-content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 🔥 FORZAR BLOQUES */
  .institucional .inst-left,
  .institucional .inst-center,
  .institucional .inst-right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 🔥 ORDEN */
  .institucional .inst-left { order: 1 !important; }
  .institucional .inst-center { order: 2 !important; }
  .institucional .inst-right { order: 3 !important; }

  /* 🔥 IMAGEN NO ROMPE */
  .institucional .inst-left img {
    width: 100% !important;
    height: auto !important;
  }
  /* 🔥 FIX INSTITUCIONAL MOBILE */
.section-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
}

/* Cada bloque ocupa todo el ancho */
.col {
  width: 100% !important;
}

/* Imagen arriba */
.col-left {
  order: 1;
}

/* Historia */
.col-center {
  order: 2;
}

/* Misión / Visión */
.col-right {
  order: 3;
}

/* Imagen responsive */
.col-left img {
  width: 100%;
  height: auto;
  display: block;
}
/* 🎨 CONTENEDOR GENERAL */
.section {
  padding: 20px 16px;
}

/* 🧱 TARJETAS */
.section-content .col {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 🖼 IMAGEN COMO TARJETA */
.col-left {
  padding: 0;
  overflow: hidden;
}

.col-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* 📝 TEXTOS */
.col h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

.col p {
  font-size: 15px;
  line-height: 1.6;
}

/* 🔘 BOTON FLECHA */
.nav-btn-img {
  margin-top: 15px;
}
  .nav-btn-img {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
}

}
@media (min-width: 1024px) {

  @media (min-width: 1024px) {

  .novedades-content .nov-item:nth-child(1),
  .novedades-content .nov-item:nth-child(2) {

    display: flex;
    flex-direction: column;

    background: #eceef0;
    border-radius: 12px;
    overflow: hidden;
  }

  .novedades-content .nov-item:nth-child(1) img,
  .novedades-content .nov-item:nth-child(2) img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }

  .novedades-content .nov-item:nth-child(1) p,
  .novedades-content .nov-item:nth-child(2) p {
    padding: 15px;
    margin: 0;
  }

  .novedades-content .nov-item:nth-child(1) .contenedor-boton,
  .novedades-content .nov-item:nth-child(2) .contenedor-boton {
    padding: 0 15px 15px;
  }

}
  .novedades-content .nov-item:nth-child(1),
  .novedades-content .nov-item:nth-child(2) {

    display: flex;
    flex-direction: column;

    background: #eceef0;
    border-radius: 12px;
    overflow: hidden;

    /* 🔥 ESTO */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

.nov-item:hover,
.cong-item:hover {
  transform: translateY(-5px);
}

  /* COLUMNAS 1 Y 2 COMO TARJETAS */
  .congresos-content .cong-item:nth-child(1),
  .congresos-content .cong-item:nth-child(2) {

    display: flex;
    flex-direction: column;

    background: #eceef0;
    border-radius: 12px;
    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* IMAGEN */
  .congresos-content .cong-item:nth-child(1) img,
  .congresos-content .cong-item:nth-child(2) img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* TEXTO */
  .congresos-content .cong-item:nth-child(1) p,
  .congresos-content .cong-item:nth-child(2) p {
    padding: 15px;
    margin: 0;
  }

  /* BOTÓN */
  .congresos-content .cong-item:nth-child(1) .contenedor-boton,
  .congresos-content .cong-item:nth-child(2) .contenedor-boton {
    padding: 0 15px 15px;
  }

  /* HOVER PRO */
  .congresos-content .cong-item:nth-child(1):hover,
  .congresos-content .cong-item:nth-child(2):hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  }

  #socios {
  padding: 80px 20px;
  min-height: 480px;
  background: #e7edef;
}

.titulo-seccion {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
}
}
.socios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.socios-card {
  display: block;
  padding: 15px;
  background: white;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  color: #333;

  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.socios-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.socios-card p {
  font-size: 14px;
  color: #666;
}

/* 🔥 hover elegante */
.socios-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 10px rgba(0,0,0,0.08);
}

.grid-socios {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.socios {
  padding: 12px 20px;
  background: #d3dbdd;
  border-radius: 6px;
  text-decoration: none;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acceso-card {
  text-align: center;
}

.socios-icono {
  width: 55px;
  height: 55px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socios-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.socios-icono {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
}
/* SECCIÓN SOCIOS EN INDEX */
#socios {
  position: relative;
  z-index: 3;
  
  /* Fondo Fijo */
  background-image: url('img/cientifico.jpg'); /* Reemplaza por la ruta de tu imagen */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  
  padding: 60px 20px;
}

/* Si tu fondo es oscuro o con contraste, puedes poner un superpuesto (overlay) opcional */
#socios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(221, 219, 219, 0.4); /* Capa oscura opcional para legibilidad del texto */
  z-index: 4;
}

/* Asegurar que el contenido y las cards estén encima de la capa y la columna */
#socios > div,
#socios .tarjetas-contenedor,
#socios .card {
  position: relative;
  z-index: 10;
}
/* AJUSTE MOBILE PARA SECCIÓN SOCIOS Y ACCESOS */
@media screen and (max-width: 768px) {
  
  /* Forzamos a que el contenedor de las tarjetas de la sección Socios sea de 1 sola columna */
  #socios .recursos-grid,
  #socios > div > div {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Apila verticalmente las cards */
    gap: 20px !important;
    width: 100% !important;
  }

  /* Asegura que las tarjetas individuales abarquen el ancho completo */
  #socios .recursos-grid > a,
  #socios .recursos-grid > div,
  #socios > div > div > a,
  #socios > div > div > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
@media screen and (max-width: 768px) {

  /* Unifica la altura de las tarjetas de Socios y Accesos en mobile */
  #socios .card, 
  #accesos-rapidos .card { /* Reemplaza .card por la clase o tag real de tus tarjetas */
    height: 100px !important; /* Ajustá este valor en px según el alto que busques */
    box-sizing: border-box !important;
    
    /* Para que el contenido interno (título, texto, icono) quede distribuido de forma prolija */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;
    text-align: center !important;
  }

}
@media screen and (max-width: 768px) {

  /* 1. Unifica el contenedor y la altura fija de las tarjetas */
  #accesos-rapidos a,
  #accesos-rapidos .card,
  #socios a,
  #socios .card {
    height: 120px !important; /* Ajustá estos px según lo alto que las quieras */
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 2. Unifica el tamaño de los TÍTULOS de las tarjetas */
  #accesos-rapidos h3,
  #socios h3 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
  }

  /* 3. Unifica el tamaño y la altura de línea de los PÁRRAFOS */
  #accesos-rapidos p,
  #socios p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

}
.socios-icono {
    width: 35px;
    height: 35px;
    margin-bottom: 8px;
  }
}
.comision-nav {
  display: flex;
  justify-content: flex-end; /* Alinea los botones a la derecha */
  gap: 10px;               /* Separa horizontalmente las dos flechas */
  margin-top: 20px;
}
.tarjeta {
  scroll-margin-top: 180px; /* Cambia 80px por la altura real de tu header */
}
:target {
  scroll-margin-top: 180px;
}
.nov-text-block + .nov-text-block {
  margin-top: 1.5rem; /* Le da un espacio arriba al segundo bloque */
}
/* Espaciado superior para que el salto de ancla no quede debajo del header */
section[id],
.nov-principal[id] {
  scroll-margin-top: 110px; /* Ajusta 110px según el alto exacto de tu header */
}

/* Ajuste para pantallas móviles si tu header cambia de tamaño */
@media (max-width: 768px) {
  section[id],
  .nov-principal[id] {
    scroll-margin-top: 40px;
  }
}
/* Si aplicaste esto en CSS: */
.nov-principal {
  scroll-margin-top: 110px;
}
/* =========================================
   ESTILOS DEL FOOTER - SUN
========================================= */

/* Estructura general */
.site-footer {
  background-color: #adb3b8; /* Ajusta este color si tu footer usa otro tono oscuro */
  color: #3d3d3d;
  padding: 40px 20px 20px 20px;
  font-family: inherit;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilo para las columnas */
.footer-col {
  flex: 1;
  min-width: 250px;
  padding: 0 30px; 
  box-sizing: border-box;
}

/* Línea vertical divisora (aplica a la 1ª y 2ª columna) */
.footer-col:not(:last-child) {
  border-right: 1px solid rgba(251, 251, 251, 0.501); 
}

/* Ajustes de padding para los extremos */
.footer-col:first-child {
  padding-left: 0;
}
.footer-col:last-child {
  padding-right: 0;
  border-right: none;
}

/* Textos y listas dentro de las columnas */
.footer-col p, 
.footer-col ul {
  margin-bottom: 15px;
  font-size: 0.95em;
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

/* Estilo del logo en el footer */
.footer-logo {
  max-width: 150px;
  margin-bottom: 15px;
  display: block;
}

/* =========================================
   ENLACES DEL FOOTER UNIFICADOS
========================================= */
.site-footer a,
.site-footer a:visited,
.site-footer a:active {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}

.site-footer a:hover {
  opacity: 0.7;
}

/* =========================================
   LÍNEA FINAL (SUB-FOOTER)
========================================= */
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.footer-bottom p {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* =========================================
   ADAPTACIÓN PARA CELULARES (RESPONSIVE)
========================================= */
@media (max-width: 768px) {
  .footer-col {
    padding: 0;
    margin-bottom: 30px;
    text-align: center; /* Opcional: centra el texto en móviles */
  }
  
  .footer-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea horizontal en móviles */
    padding-bottom: 30px;
  }
  
  .footer-logo {
    margin: 0 auto 15px auto;
  }
}
.site-footer {
  position: relative;        /* Habilita la propiedad z-index */
  z-index: 999;              /* Lo sitúa por encima de casi cualquier elemento */
  isolation: isolate;        /* Asegura que cree su propio nivel de capas */
  
  /* Resto de tus estilos habituales del footer */
  background-color: #a5a8aa; 
  color: #4f4e4e;
  padding: 40px 20px 20px 20px;
}
/* Contenedor de cada línea de contacto */
.contacto-item {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el ícono y el texto */
  margin-bottom: 12px;
}

/* Estilo unificado para los íconos vectores */
.icono-contacto {
  width: 18px;
  height: 18px;
  fill: #3d3d3d; /* Tono gris oscuro corporativo deseado */
  flex-shrink: 0; /* Evita que el ícono se deforme si el texto es largo */
}
.hero{
    height:auto;
}
.hero-video{
    width:100%;
    height:auto;
    display:block;
}
.hero{
    aspect-ratio:16 / 9;
    max-height:500px;
    overflow:hidden;
}
/* 1. Contenedor principal del Hero */
.hero {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Ajusta este valor a la altura deseada del hero */
  overflow: hidden;  /* Corta todo lo que sobresalga para no invadir la otra sección */
  display: flex;
  align-items: center;
}

/* 2. Capa que sostiene al video */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 3. Comportamiento responsive del video */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hace que el video llene el área sin deformarse */
  display: block;
}

/* 4. Asegurar que el contenido (texto y botón) quede sobre el video */
.hero-content {
  position: relative;
  z-index: 2; /* Mayor que el z-index de .hero-bg */
}
/* ==========================================
   Ajustes para Móviles (pantallas <= 768px)
   ========================================== */
@media (max-width: 768px) {
  /* 1. El hero cambia a columna para apilar el video y el texto */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: visible;
  }

  /* 2. El video pasa a flujo normal arriba */
  .hero-bg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Mantiene la proporción del video en móviles */
  }

  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 3. El texto y botón quedan abajo en la pantalla */
  .hero-content {
    position: relative;
    width: 100%;
    z-index: 2;
    padding: 25px 15px; /* Espaciado cómodo */
  }

  .hero-card {
    text-align: center;
  }
}
/* Asegurar que el contenedor del video sea la referencia */
.hero-bg {
  position: absolute; /* O relative en mobile */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Capa de velo/overlay sobre el video */
.hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.35); /* Fondo negro al 35% de opacidad */
  pointer-events: none; /* Permite interactuar a través del velo si fuera necesario */
}
/* ==============================
   SCROLL SOLO TARJETA WEBINARS
   ============================== */

#tarjeta-archivo-webinar .nov-text {
    max-height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
}

#tarjeta-archivo-webinar .nov-text-block {
    margin-bottom: 30px;
}


/* Scroll personalizado solo webinars */

#tarjeta-archivo-webinar .nov-text::-webkit-scrollbar {
    width: 8px;
}

#tarjeta-archivo-webinar .nov-text::-webkit-scrollbar-track {
    background: #edf2f7;
    border-radius: 10px;
}

#tarjeta-archivo-webinar .nov-text::-webkit-scrollbar-thumb {
    background: #5d8ec7;
    border-radius: 10px;
}

#tarjeta-archivo-webinar .nov-text::-webkit-scrollbar-thumb:hover {
    background: #4578b5;
}
/* Corrección vertical exclusiva para tarjeta webinars */

#tarjeta-archivo-webinar .nov-text {
    display: block;
    max-height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
    padding-top: 0;
}
/* Botones webinars a ancho completo */
#tarjeta-webinar .nov-text-block {
    width: 100%;
}

#tarjeta-webinar .btn-cientifico {
    width: 100%;
    display: flex;
    box-sizing: border-box;
}
/* ================= BOTÓN AFILIARSE (HERO) ================= */

.btn-afiliarse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* 🌟 REDONDEO DEL CONTENEDOR Y MÁSCARA */
  border-radius: 10px !important;
  overflow: hidden !important;
  
  /* 🔥 FORZAR RECORTADO DE GIF EN MOTORES WEBKIT/CHROMIUM */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: -webkit-radial-gradient(white, black);
}

.btn-afiliarse img {
  width: 320px; /* Adjusta este valor para el ancho */
  display: block;
  border-radius: 10px !important;
  
  /* 🔥 CORRECCIÓN PARA EVITAR BORDES DUROS EN RADIOS PEQUEÑOS */
  outline: 1px solid transparent;
  backface-visibility: hidden;
}

.btn-afiliarse span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: white;
  font-weight: bold;
  font-size: 24px;
  pointer-events: none;
}

/* ==========================================
   CARRUSEL RESPONSIVO (RECURSOS Y GRUPOS)
   ========================================== */

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
/* Asegurar el alto de la imagen en las tarjetas split-card */
.cientifico-card .card-img {
  width: 100%;
  height: 180px; /* O el alto que tenías definido, ej: 160px - 200px */
  background-size: cover;
  background-position: center;
  border-radius: 8px 8px 0 0; /* Si lleva esquinas redondeadas arriba */
}

/* Pista deslizante en Desktop */
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  padding: 10px 5px;
  /* Ocultar barra de scroll estándar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE y Edge */
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari y Opera */
}

/* Forzar exactamente 4 tarjetas visibles en Desktop */
.accesos-grid .acceso-card,
.accesos-grid .socios-card,
.cientifico-grid .cientifico-card {
  flex: 0 0 calc((100% - 60px) / 4); /* (100% - 3 gaps de 20px) / 4 */
  min-width: calc((100% - 60px) / 4);
  box-sizing: border-box;
}

/* Botones Flechas (< y >) */
.carousel-btn {
  background-color: rgba(89, 161, 234, 0.85); /* Azul SUN */
  color: #ffffff;
  border: none;
  font-size: 1.4rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {
  background-color: #035eba;
  transform: scale(1.1);
}

.prev-btn {
  left: -20px;
}

.next-btn {
  right: -20px;
}

/* ==========================================
   ADAPTACIÓN MOBILE (< 768px)
   ========================================== */
@media (max-width: 768px) {
  /* Ocultar flechas en mobile */
  .carousel-btn {
    display: none;
  }

  /* Volver a disposición vertical tradicional */
  .carousel-track {
    flex-direction: column;
    overflow-x: visible;
  }

  .accesos-grid .acceso-card,
  .accesos-grid .socios-card,
  .cientifico-grid .cientifico-card {
    flex: 1 1 100%;
    min-width: 100%;
    width: 100%;
  }
}
/* 1. La tarjeta completa como contenedor flexible vertical */
.cientifico-card.split-card {
  display: flex !important;
  flex-direction: column !important;
  height: 260px; /* Alto fijo total de la tarjeta */
  background-color: #ffffff; /* Fondo blanco uniforme */
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 2. La imagen ocupa la mitad superior */
.cientifico-card .card-img {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* 3. La zona del texto ocupa el resto y CENTRA el h3 en ambos ejes */
.cientifico-card .card-text {
  flex: 1;
  display: flex !important;
  align-items: center !important;     /* Centrado VERTICAL */
  justify-content: center !important;  /* Centrado HORIZONTAL */
  padding: 12px 15px;
  background-color: #ffffff;           /* Fondo blanco parejo */
  text-align: center;
}

/* 4. Mantiene el estilo original de tu <h3> quitando solo los márgenes para no desalinear */
.cientifico-card .card-text h3 {
  margin: 0;
  /* Hereda la tipografía, color y tamaño original de tu h3 global */
}
/* ==========================================
   CORRECCIÓN MOBILE (< 768px)
   ========================================== */
@media (max-width: 768px) {

  /* Forzar orientación vertical completa en las tarjetas */
  .cientifico-card.split-card {
    flex-direction: column !important; /* Evita que la tarjeta se divida de lado */
    height: auto !important;          /* Permite que adapte su alto en celulares */
    min-height: 240px;
    width: 100% !important;
  }

  /* La imagen ocupa todo el ancho superior */
  .cientifico-card .card-img {
    width: 100% !important;
    height: 150px !important;
  }

  /* El texto ocupa todo el ancho inferior y se mantiene centrado */
  .cientifico-card .card-text {
    width: 100% !important;
    padding: 15px;
    background-color: #ffffff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
  }
}
/* Contenedor principal del visor */
#pdf-viewer-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
}

/* Overlay para solicitar rotación en celulares verticales */
#rotate-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0d1b2a;
  color: #ffffff;
  z-index: 10000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

#rotate-overlay i {
  font-size: 3rem;
  margin-bottom: 15px;
  animation: rotateIcon 2s infinite ease-in-out;
}

@keyframes rotateIcon {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* Mostrar el overlay solo en celulares (pantallas pequeñas) en modo Portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {
  #rotate-overlay {
    display: flex !important;
  }
  #flipbook-container {
    visibility: hidden; /* Oculta el visor mientras esté vertical para evitar saltos */
  }
}
@media (max-width: 768px) {
  .social-mobile {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .social-mobile a img {
    height: 28px !important;
    width: auto !important;
    filter: grayscale(100%) !important;
    opacity: 0.8 !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
  }

  .social-mobile a:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
  }
}

@media (min-width: 769px) {
  .social-mobile {
    display: none !important;
  }
}
/* 1. Ocultar el scrollbar extra y permitir scroll horizontal */
.carousel-track {
  display: flex !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px; /* Espacio entre tarjetas */
}

/* Ocultar barra de desplazamiento visual */
.carousel-track::-webkit-scrollbar {
  display: none;
}

/* 2. Fijar el ancho exacto para ver SOLO 4 tarjetas en pantalla (Escritorio) */
@media (min-width: 769px) {
  .socios-card, .acceso-card {
    /* (100% de ancho - 3 espacios de 20px) / 4 tarjetas */
    flex: 0 0 calc((100% - 60px) / 4) !important;
    max-width: calc((100% - 60px) / 4) !important;
  }
}
/* Centrar únicamente las tarjetas de Registros Nefrológicos en escritorio */
@media (min-width: 769px) {
  #accesos-grid {
    justify-content: center;
  }
}
/* Grilla/Contenedor del carrusel de Socios */
.socios-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
}

/* Ocultar la barra de desplazamiento visual */
.socios-grid::-webkit-scrollbar {
  display: none;
}
.socios-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Forzar que cada tarjeta ocupe exactamente 1/4 del espacio visible */
.socios-card {
  /* Resta los 3 espacios de 20px (60px en total) repartidos entre las 4 tarjetas */
  flex: 0 0 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* Adaptación responsive para pantallas más pequeñas */
@media (max-width: 992px) {
  .socios-card {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 tarjetas por fila en tabletas */
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 576px) {
  .socios-card {
    flex: 0 0 100%; /* 1 tarjeta por fila en móviles */
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  
  /* Contenedor: Alinea los elementos al centro y los apila verticalmente */
  .socios-grid {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra las tarjetas horizontalmente */
    width: 100%;
    gap: 15px; /* Espaciado uniforme entre tarjetas */
    padding: 0;
  }

  /* Tarjetas: Ancho idéntico y centrado para todas */
  .socios-card {
    flex: 0 0 auto !important; /* Desactiva el ancho del carrusel */
    width: 90% !important;     /* Todas ocupan el mismo 90% de la pantalla */
    max-width: 350px !important;/* Evita que se deformen en pantallas grandes de gama alta */
    margin: 0 auto;            /* Asegura el centrado */
    box-sizing: border-box;
  }

}
/* Para que en escritorio el nombre largo entre en una sola línea */
@media (min-width: 769px) {
  .titulo-largo {
    font-size: 1.7rem; /* O el tamaño exacto que haga que entre sin saltar de línea */
    white-space: nowrap;
  }
}