/* Variables and Global Styles */

:root {
  --primary-color: #00326d;
  --accent-color: #ffb500;
  --bg-color: #f3f3f3;
  --white: #ffffff;
  --black: #1a1a1a;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --atc-yellow-logo: #fab400;
  --gray-light: #f2f2f2;
  --gray-extra-light: #f7f7f7;
  --font-primary--origin: Avenir, -apple-system, Roboto, Helvetica, sans-serif;
  --font-primary: Roboto, sans-serif;
  --font-secondary: Inter, -apple-system, Roboto, Helvetica, sans-serif;
}

a {
  color: var(--primary-color);
}

/* navbar styles */

.navbar-nav a::after {
  content: "";
  width: 0;
  height: 0;
  background-color: var(--white);
  position: absolute;
  bottom: -4px;
  right: 0;
  left: 0;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.navbar-nav a:hover::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--white);
  opacity: 1;
  position: absolute;
  bottom: -4px;
  right: 0;
  left: 0;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.bg-atc {
  background-color: var(--primary-color) !important;
}

.bg-atc a {
  color: #ffffff !important;
  margin: 0 !important;
  position: relative;
}

.bg-atc .nav-link {
  padding: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bg-atc .contact-btn {
  background-color: var(--white);
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
}

.bg-atc .contact-btn:hover {
  background-color: var(--black);
  border-color: white !important;
  color: var(--white) !important;
}

.bg-atc .user-btn {
  background-color: var(--primary-color);
  border: solid 2px aliceblue;
  padding: 4px;
  width: 39px;
  height: 39px;
}
.bg-atc .user-btn a {
  color: var(--primary-color) !important;
}

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  font-family: var(--font-primary);
}

p {
  font-size: 18px;
  color: var(--black);
}

.home {
  background-color: #f3f3f3;
  display: flex;
  padding-top: 35px;
  flex-direction: column;
  align-items: center;
}
/*atc*/
.content-atc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.presentation-section {
  background-color: var(--gray-extra-light);
  margin-top: 6%;
  width: 100%;
  color: var(--primary-color);
  border-bottom: solid 4px var(--primary-color);
}

.presentation-content {
  margin: 3%;
}

.presentation-title {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 24px 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.presentation-title span {
  text-transform: lowercase;
}

.presentation-text {
  margin-bottom: 16px;
  margin-left: 22px;
}

.download-buttons {
  display: flex;
  margin-top: 18px;
  gap: 36px;
  flex-wrap: wrap;
}

.download-btn {
  border-radius: 50px;
  background-color: var(--accent-color);
  padding: 12px 28px;
  font-family: var(--font-primary);
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 500;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.membership-section {
  margin: 3%;
  border-radius: 51px;
  padding: 12px 0 4px;
}

.membership-content {
  display: flex;
  gap: 20px;
}

.membership-info {
  flex: 3;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
}

.membership-title {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 24px 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.membership-text {
  font-weight: 400;
  margin-left: 22px;
}

.membership-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 56px;
}

.member-type-btn {
  border-radius: 50px;
  background-color: var(--accent-color);
  
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 400;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.member-type-btn:hover {
  background-color: var(--primary-color);
  font-family: var(--font-primary);
}

.governing-title {
  color: var(--primary-color);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 24px 0;
  text-align: center;
  font-family: var(--font-primary);
}

.governing-section {
  padding-top: 3%;
  background-color: var(--gray-extra-light);
  border-top: solid 4px var(--primary-color);
}

.governing-content {
  margin: 3%;
  margin-top: 0;
  display: flex;
  gap: 20px;
}

.governing-image {
  flex: 1;
}

.gov-img {
  aspect-ratio: 1.26;
  object-fit: contain;
  width: 100%;
  border-radius: 30px;
}

.governing-text {
  flex: 2;
  font-family: var(--font-primary);
  color: var(--primary-color);
  margin-top: 24px;
}

.assembly-title,
.board-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 12px;
}

.assembly-text,
.board-text {
  font-weight: 400;
  margin-top: 22px;
  margin-bottom: 28px;
}

.board-info {
  margin-top: 0;
}

@media (max-width: 991px) {
  .side-image {
    max-width: 100%;
    margin-top: 20px;
  }
  .section-title {
    padding: 0 20px;
  }
  .presentation-section {
    margin-top: 40px;
  }
  .membership-section {
    margin-top: 40px;
  }
  .governing-title {
    margin-top: 40px;
    font-size: 40px;
  }
  .governing-section {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .membership-content {
    flex-direction: column;
  }
  .membership-buttons {
    align-items: center;
  }
  .governing-content {
    flex-direction: column;
  }
  .governing-text {
    padding: 0 30px;
  }
}

/* Header and Navigation */
.nav-menu {
  display: flex;
  width: 100%;
  max-width: 1688px;
  margin: 35px auto 0;
  align-items: center;
  gap: 40px 100px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-logo {
  aspect-ratio: 2.71;
  width: 217px;
  max-width: 120px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .nav-logo {
    width: 217px;
    max-width: 180px;
  }
}

.nav-links {
  display: flex;
  align-items: initial;
  gap: 16px;
  flex-wrap: wrap;
  margin: initial;
}

@media (min-width: 992px) {
  .nav-links {
    margin: 0 auto;
    align-items: center;
  }
}

.nav-link {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 992px) {
  .nav-contact {
    margin-top: initial;
  }
}

.contact-btn {
  border-radius: 60px;
  background-color: var(--primary-color);
  color: var(--bg-color);
  padding: 8px 16px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.user-btn {
  border-radius: 31px;
  background-color: var(--primary-color);
  width: 49px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.user-icon {
  width: 21px;
  aspect-ratio: 0.84;
  object-fit: contain;
}

.navbar-collapse {
  padding: 0 12px;
}

.navbar-toggler {
  background-color: var(--primary-color);
}

.navbar-toggler-icon {
  background-image: url("/themes/default/atc4/images/burguer.svg");
}

/* Hero Section */

.hero-slider {
  margin-bottom: 30px;
  padding-left: 16px;
  padding-right: 16px;
}
.hero {
  position: relative;
  margin-bottom: 40px;
}

.hero-text {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
  padding: 8px 12px 8px 8px;
  border-radius: 0 16px 0 16px;
  min-width: auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 576px) {
  .hero-text {
    min-width: auto;
    border-radius: 0 24px 0 24px;
    left: 0;
    bottom: 0;
    padding: 8px 16px 8px 8px;
  }
}

@media (min-width: 768px) {
  .hero-text {
    min-width: 560px;
    border-radius: 0 30px 0 30px;
    left: 0;
    bottom: 0;
    padding: 16px;
  }
}

.hero-text::before,
.hero-text::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-size: contain !important;
  display: flex;
}

@media (min-width: 576px) {
  .hero-text:before,
  .hero-text:after {
    width: 24px;
  height: 24px;
  }
}

@media (min-width: 768px) {
  .hero-text:before,
  .hero-text:after {
    
    width: 30px;
  height: 30px;
  }
}

.hero-text:before {
  top: -24px;
  left: 0;
  background: transparent
    url("/themes/default/atc4/media/icon-before--rounded.svg") center no-repeat;
}

.hero-text:after {
  bottom: 0;
  right: -24px;
  background: transparent
    url("/themes/default/atc4/media/icon-after--rounded.svg") center no-repeat;
}

@media (min-width: 576px) {
.hero-text:before {
  top: -24px;
  left: 0;
}

.hero-text:after {
  bottom: 0;
  right: -24px;
}
}

@media (min-width: 768px) {
.hero-text:before {
  top: -30px;
  left: 0;
}

.hero-text:after {
  bottom: 0;
  right: -30px;
}
}


.hero-media img {
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

@media (min-width: 576px) {
  .hero-media img {
    border-radius: 26px;
  }
}

@media (min-width: 768px) {
  .hero-media img {
    border-radius: 34px;
  }
}

.hero-title {
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  text-shadow: none;
}

@media (min-width: 576px) {
  .hero-title {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 34px;
  }
}

.hero-subtitle {
  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
  text-shadow: none;
}

@media (min-width: 576px) {
  .hero-subtitle {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 24px;
  }
}

.hero-dots {
  position: absolute;
  bottom: 24px;
  display: none !important;
  align-self: center;
  /* display: flex; */
  align-items: center;
  gap: 18px;
  justify-content: center;
  background-color: var(--gray-extra-light);
  width: calc(100% - 32px);
}

.dot {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  align-self: stretch;
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  width: 16px;
  flex-shrink: 0;
  height: 16px;
}

.dot.active {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Objectives Section */

.objectives-section {
  margin-bottom: 40px;
}

.objectives-title {
  color: var(--primary-color);
  font-size: 48px;
  font-weight: 500;
  text-align: center;
}

.objectives-container {
  display: flex;
  margin-top: 40px;
  width: 100%;
  align-items: stretch;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 500;
  text-align: center;
  flex-wrap: wrap;
  padding: 12px;
}

@media (min-width: 576px) {
  .objectives-container {
    flex-direction: column;
    gap: 20px;
  }
}

@media (min-width: 768px) {
  .objectives-container {
    flex-direction: row;
    gap: 40px;
  }
}

.objective-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  gap: 12px;
}

@media (min-width: 576px) {
  .objective-item {
    flex-direction: column;
    justify-content: center;
  }
}

.objective-icon {
  aspect-ratio: 1;
  width: 40px;
}

@media (min-width: 768px) {
  .objective-icon {
    width: 70px;
  }
}

.objective-text {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0;
}

/* Calendar Section */
.calendar-section {
  display: flex;

  width: 100%;
  padding: 12px;
  border-radius: 30px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 40px;
}

@media (min-width: 991px) {
  .calendar-section {
    padding: 24px;
  }
}

.calendar-header {
  display: flex;
  width: 100%;
  padding: 24px;
  align-items: start;
  gap: 40px 100px;
  font-size: 48px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
  justify-content: space-between;
  flex-wrap: wrap;
}

.month-text {
  transform: rotate(-2.659108977443085e-18rad);
  color: var(--primary-color);
}

.year-number {
  transform: rotate(-2.659108977443085e-18rad);
  color: var(--primary-color);
  letter-spacing: 2.88px;
}

.week-label {
  transform: rotate(-8.863696246818361e-19rad);
  display: flex;
  width: 100%;
  padding: 8px 0;
  align-items: center;
  font-size: 24px;
  color: rgba(255, 181, 0, 1);
  font-weight: 400;
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0.48px;
  line-height: 47px;
  justify-content: start;
  flex-wrap: wrap;
}

.day-label {
  align-self: stretch;
  transform: rotate(8.863696246818361e-19rad);
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0 16px;
  gap: 8px;
  flex: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

.week-row {
  transform: rotate(-8.863696246818361e-19rad);
  display: flex;
  width: 100%;
  align-items: stretch;
  font-size: 26px;
  color: var(--primary-color);
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  line-height: 1;
  justify-content: start;
  flex: 1;
  flex-wrap: wrap;
  height: 100%;
}

.day-cell {
  transform: rotate(8.863696246818361e-19rad);
  display: flex;
  min-width: 240px;
  padding: 8px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

.day-cell.highlighted {
  border-radius: 30px;
  border: 2px solid rgba(0, 50, 109, 1);
}

.day-cell.weekend {
  background-color: rgba(0, 0, 0, 0.14);
}

.day-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: end;
}

.day-number {
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4);
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 44px;
  width: 44px;
  padding: 0 15px;
}

.day-number.highlighted-day {
  border-radius: 43px;
  background-color: var(--accent-color);
  overflow: hidden;
  height: 44px;
}

.next-month {
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4);
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  gap: 8px;
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  font-weight: 600;
  flex: 1;
  flex-shrink: 1;
  flex-basis: 29px;
}

.event-box {
  border-radius: 21px;
  background-color: var(--primary-color);
  z-index: 10;
  display: none;
  margin-bottom: -47px;
  padding: 10px 22px;
  flex-direction: column;
  align-items: stretch;
}

.event-box.visible {
  display: flex;
}

.event-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
  color: white;
}

.event-time {
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
  align-self: start;
  margin-top: 14px;
  color: white;
}

.event-highlight {
  background-color: rgb(0, 0, 0);
}

.event-time-highlight {
  background-color: rgb(255, 255, 255);
}

.event-light {
  color: rgb(255, 255, 255);
}

.event-container {
  margin-top: 8px;
  width: 100%;
  padding: 0 4px;
  color: rgba(255, 255, 255, 1);
  flex: 1;
}

.event {
  min-width: 100px;
  width: 100%;
}

.event.special {
  display: flex;
  height: 32px;
  width: 100%;
  align-items: start;
  justify-content: start;
}

.event-item {
  display: flex;
  width: 100%;
  align-items: start;
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  justify-content: start;
}

.event-text {
  flex: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  border-radius: 21px;
  background-color: rgba(14, 14, 34, 0.29);
  width: 100%;
  padding: 0 16px;
  gap: 8px;
}

.event-item.secondary {
  display: flex;
  margin-top: 8px;
  width: 100%;
  align-items: start;
  color: #f8f7fa;
  font-weight: 300;
  white-space: nowrap;
  justify-content: start;
}

/* Committees Section */
.committees-section {
  background-color: rgba(209, 209, 209, 1);
  align-self: stretch;
  padding: 30px;
  border-radius: 30px;
  margin-bottom: 40px;
}

.committees-content {
  gap: 20px;
  display: flex;
}

.committees-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: normal;
  width: 66%;
  margin-left: 0px;
}

.committees-description {
  color: var(--primary-color);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}

.committees-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: normal;
  gap: 24px;
  width: 34%;
}

.action-button {
  align-self: start;
  border-radius: 50px;
  background-color: var(--accent-color);
  padding: 16px 40px;
  gap: 10px;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-button:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

/* Work Groups Section */
.work-groups-content {
  margin-top: 30px;
}

.work-group {
  margin-bottom: 70px;
}

.work-group-title {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 30px;
}

.work-group-description {
  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.work-group-description + .work-group-description {
  font-weight: 600;
}

.action-button {
  border-radius: 50px;
  background-color: var(--accent-color);
  padding: 16px 40px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
}

.divider {
  border: 1px dotted rgba(0, 50, 109, 1);
  margin: 12px;
  margin-top: 30px;
  width: 90%;
}

/* Publications Section */
.hero-banner {
  width: 100%;
  align-items: center;
  justify-content: center;
}

.publicaciones-img {
  width: 100%;
  height: auto;
}

.publications-title {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  margin-top: 40px;
}

.publications-container {
  display: flex;
  margin-top: 35px;
  align-items: center;
  gap: 18px;
  text-align: center;
  text-transform: uppercase;
  justify-content: center;
  flex-wrap: wrap;
}

.publication-card {
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  width: 280px;
  transition: all 0.3s ease;
  box-sizing: content-box;
  border-radius: 30px;
  border: solid 4px transparent;
  overflow: hidden;
}

.publication-card:hover {
  border: solid 4px var(--accent-color);
  width: 280px;
}

@media (min-width: 576px) {
  .publication-card:hover {
    width: calc(280px + 64px);
  }
}

.publication-content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 180px;
  width: 100%;
  padding: 16px;
}

@media (min-width: 576px) {
  .publication-content {
    height: 280px;
  }
}

@media (min-width: 768px) {
  .publication-content {
    height: 480px;
  }
}

.publication-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.publication-info {
  position: absolute;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
}

.publication-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 600;
  justify-content: start;
}

.tag {
  align-self: stretch;
  border-radius: 40px;
  background-color: var(--accent-color);
  margin-top: auto;
  margin-bottom: auto;
  min-height: 25px;
  padding: 0 19px;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag_a {
  color: rgba(255, 181, 0, 1);
  text-decoration: none;
  align-self: flex-end;
}

.tag_a:hover {
  font-weight: 600;
}

.tag-empty {
  border-radius: 43px;
  align-self: stretch;
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  width: 130px;
  flex-shrink: 0;
  height: 25px;
  gap: 10px;
}

.tag-dot {
  border-radius: 43px;
  background-color: var(--accent-color);
  align-self: stretch;
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  width: 25px;
  flex-shrink: 0;
  height: 25px;
  gap: 10px;
}

.publication-name {
  color: var(--accent-color);
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  /*! align-self: start; */
  text-transform: uppercase;
  /*! position: absolute; */
  bottom: 32px;
  margin-bottom: 0;
  z-index: 999;
  /* border: solid 1px red;*/
  height: 100%;
  display: flex;
  /*! justify-content: flex-end; */
  /*! align-content: flex-end; */
}

.main-content {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .main-content {
    margin-top: 36px;
  }
}

.main-content section:last-child {
  margin-bottom: 30px;
}

.partner-info {
  margin: 0;
}

.partner-description {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.description-content {
  position: relative;
  width: 50%;
  padding: 0;
}

@media (min-width: 992px) {
  .description-content {
    padding: 20px;
  }
}

.description-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.description-text {
  border: solid 4px var(--primary-color);
  padding: 16px;
  border-radius: 20px;
  background-color: var(--white);
  height: 100%;
}

.description-text p {
  color: var(--black);
  font-size: 20px;
  font-weight: 400;
}

.description-text p:nth-child(2),
.description-text p:nth-child(3) {
  color: var(--black);
}

.partner-image {
  width: 100%;

  object-fit: contain;
  border-radius: 30px;
  height: 100%;
}

.partner-image2 {
  width: 50%;
  border-radius: 30px;
}

.join-btn {
  display: block;
  margin: 0 auto;
  background-color: var(--accent-color);
  border: none;
  border-radius: 60px;
  padding: 12px 60px;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  width: fit-content;
  text-decoration: none;
}

@media (min-width: 576px) {
  .join-btn {
    margin: 0 auto;
  }
}

@media (min-width: 992px) {
  .join-btn {
    margin: 0 auto;
  }
}

.join-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-mas {
  display: block;
  margin: auto;
  margin-bottom: 40px;
  background-color: var(--accent-color);
  border: none;
  border-radius: 60px;
  padding: 8px 40px;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-mas:hover {
  background-color: var(--primary-color);
  color: var(--accent-color);
}

.btn-upload {
  display: inline-flex;
  margin: auto;
  background-color: var(--white);
  border: dashed 2px var(--primary-color);
  border-radius: 12px;
  padding: 8px 12px 8px 46px;
  color: var(--black);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.btn-upload:hover {
  background-color: var(--gray-light);
  color: var(--black);
  border: dashed 2px var(--primary-color);
}

.btn-upload::before {
  content: "";
  position: absolute;
  left: 12px; /* separa el icono del borde */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("/themes/default/atc4/images/upload.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/*RUTAS*/
.content-rutas {
  margin: 3%;
  width: 100%;
}

.committees-container {
  padding: 2% 0%;
}

.committee-card {
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 181, 0, 1);
  align-self: stretch;
  display: flex;
  padding: 30px 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.committee-number {
  display: flex;
  max-width: 100%;
  align-items: start;
  gap: 13px;
  justify-content: start;
}

.number-text {
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 36px;
}

.committee-image {
  margin: 0;
}

.document-img {
  aspect-ratio: 0.74;
  object-fit: contain;
  object-position: center;
  width: 260px;
  margin-top: 18px;
  max-width: 100%;
}

.card-footer {
  display: flex;
  max-width: 100%;
  align-items: start;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.date-container {
  display: flex;
  align-items: start;
  gap: 6px;
  flex-wrap: wrap;
}

.date-text {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--white);
  background-color: var(--primary-color);
  font-weight: 400;
  text-transform: uppercase;
  border: 1px solid rgba(0, 50, 109, 1);
  border-radius: 8px;
  padding: 6px 12px;
  margin: 12px 0;
}

.taskforce-name {
  font-size: 20px;
}

.action-container {
  min-height: 25px;
  width: 27px;
}

.download-button-wrapper {
  display: flex;
  align-items: start;
  justify-content: start;
}

.download-button {
  border-radius: 44px;
}

.download-icon-bg {
  border-radius: 60px;
  background-color: var(--accent-color);
  display: flex;
  height: 36px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  width: 36px;
  margin: 10px 0;
}

.download-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 27px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-icon svg {
  width: 15px;
  height: 15px;
  fill: #000;
}

.download-icon-img {
  aspect-ratio: 1.08;
  object-fit: contain;
  object-position: center;
  width: 27px;
  border-radius: 43px;
  flex-shrink: 0;
}

.committees-grid {
  display: grid;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .committees-container {
    padding-left: 20px;
  }
  .committees-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .number-text {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 992px) {
  .committees-container {
    padding-left: 20px;
  }
  .committees-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .number-text {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {
  .committees-grid {
    justify-content: center;
    align-items: center;
  }
}

/* Rutas grid */

.rutas-grid {
  display: grid;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .rutas-container {
    padding-left: 20px;
  }
  .rutas-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 992px) {
  .rutas-container {
    padding-left: 20px;
  }
  .rutas-grid {
    max-width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .rutas-grid {
    justify-content: center;
    align-items: center;
  }
}

/* Join Section */
.join-section {
  border-radius: 12px;
}

.join-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.join-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
  color: var(--primary-color);
  text-transform: uppercase;
}

.join-description {
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
  margin: 18px 0;
}

.join-button {
  border-radius: 60px;
  background-color: var(--accent-color);
  border: none;
  padding: 12px 52px;
  font-size: 15px;
  color: var(--primary-color);
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 auto;
}

.decorative-line {
  aspect-ratio: 7.81;
  width: 1488px;
  max-width: 100%;
  border-radius: 30px;
  margin-top: 40px;
}

/* rutas*/
.routes-section {
  display: flex;
  margin: 5% 2% 0% 2%;
  flex-direction: column;
  font-family: var(--font-primary);
  color: var(--primary-color);
  justify-content: center;
}

/* Events Grid */
.events-grid {
  display: flex;
  /* justify-content: end;
	align-items: center; */
  padding: 2%;
  width: 100%;
  flex-wrap: wrap;
}

.events-card {
  border-radius: 30px;
  background-color: var(--white);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid var(--accent-color);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 630px;
  margin: 1%;
}

.events-card.highlight {
  background-color: var(--accent-color);
}

.events-title {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  line-height: 24px;
  margin: 0;
  padding: 0 20px;
}

.events-image {
  width: 100%;
  max-width: 367px;
  margin-top: 18px;
  object-fit: contain;
}

.events-details {
  display: flex;
  margin-top: 18px;
  align-items: start;
  gap: 40px 116px;
  justify-content: center;
  width: 100%;
}

.events-info {
  display: flex;
  gap: 8px;
}

.events-date,
.events-location {
  border-radius: 43px;
  border: 1px solid var(--primary-color);
  padding: 0 19px;
  min-height: 25px;
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 350;
  display: flex;
  align-items: center;
}

.events-date {
  text-transform: uppercase;
}

.action-button2 {
  border-radius: 43px;
  background-color: var(--bg-color);
  border: none;
  width: 27px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.action-button2.yellow {
  background-color: var(--accent-color);
}

.action-icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 991px) {
  .routes-section {
    max-width: 100%;
    margin-top: 40px;
  }
}

.tab-control {
  justify-content: flex-start;
  margin: 0 auto;
  margin-bottom: 40px;
  border-radius: 100px;
  background: linear-gradient(
      0deg,
      rgba(208, 208, 208, 0.5) 0%,
      rgba(208, 208, 208, 0.5) 100%
    ),
    rgba(0, 0, 0, 0.1);
  background-blend-mode: color-burn, luminosity;
  box-shadow: 0px -0.5px 1px 0px rgba(255, 255, 255, 0.3) inset,
    0px -0.5px 1px 0px rgba(255, 255, 255, 0.25) inset,
    1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset,
    1px 1.5px 4px 0px rgba(0, 0, 0, 0.1) inset;
  align-self: center;
  display: flex;
  min-height: 50px;
  width: 700px;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  font-size: 15px;
}

.tab-btn {
  border: none;
  align-self: stretch;
  border-radius: 100px;
  padding: 8px;
  font-weight: 350;
  flex: 1;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.content-wrapper {
  width: 100%;
}

.content-image {
  aspect-ratio: 1.43;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.content-text {
  margin-top: 16px;
}

.content-title {
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.content-description {
  border-radius: 30px;
  padding: 30px 0;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}
/* Partner List Section */
.partner-list {
  margin: 5% 2%;
}

.partner-columns {
  display: grid;
  gap: 42px;
  margin-top: 40px;
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 576px) {
  .partner-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.honor-partners,
.merit-partners {
  width: fit-content;
}

.partner-section-title {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.partner-items {
  list-style: none;
  padding: 0;
  margin: 0 0 0 20px;
}

.partner-item {
  margin-top: 20px;
}

.partner-divider {
  border: 1px solid var(--primary-color);
  margin: 0;
  display: none;
}

.partner-name {
  display: block;
  margin-top: 30px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 400;
}

.pagination-btn {
  width: 48px;
  height: 48px;
  border-radius: 51px;
  background-color: var(--accent-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination-icon {
  width: 24px;
  aspect-ratio: 1;
  object-fit: contain;
}

.page-number {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 350;
  text-decoration: none;
}

.page-number.active {
  text-decoration: underline;
}

/* Content Section */
.content {
  margin: 50px auto;
  width: 100%;
  max-width: 1689px;
}

.content__header {
  /* display: flex;
	justify-content: space-between;
	align-items: center; */
  /* 	margin: 2% 3%; */

  margin-top: 24px;
}

.content__title {
  color: var(--primary-color);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  margin-bottom: 30px;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

/* Search Bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}

.search-bar__form {
  width: 100%;
}

.search-bar__container {
  display: flex;
  width: 100%;
  max-width: 600px;
  align-items: center;
  gap: 12px;
}

.content__search {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-bar__field {
  width: calc(100% - 60px);
}

@media (min-width: 768px) {
  .search-bar__field {
    width: 460px;
  }
}

.search-bar__input {
  border-radius: 60px;
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  padding: 6px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--black);
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
}

.search-bar__actions {
  display: flex;
  gap: 12px;
}

.search-bar__button {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: none;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-reset {
  background-color: var(--primary-color);
}

.search-bar__icon {
  width: 20px;
  aspect-ratio: 1;
  object-fit: contain;
}

/*SOcios 2*/
.partners-section {
  padding: 2px;
}

.partners-container {
  width: 100%;
}

.partners-content {
  display: flex;
  margin-top: 60px;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.partners-content-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: end;
}

.partners-header {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: start;
}

.header-content {
  display: flex;
  width: 1691px;
  align-items: flex-start;
  gap: 0;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100%;
}

.partners-title {
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 24px 0;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.search-container {
  display: flex;
  /*! min-width: 240px; */
  align-items: center;
  gap: 25px;
  justify-content: start;
}

.search-input {
  align-self: stretch;
  border-radius: 51px;
  background-color: var(--accent-color);
  border: 2px solid rgba(255, 181, 0, 1);
  min-width: 240px;
  margin: auto 0;
  min-height: 48px;
  padding: 0 52px;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-align: center;
  text-transform: uppercase;
  width: 334px;
}

.search-button {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: none;
  align-self: stretch;
  display: flex;
  margin: auto 0;
  min-height: 48px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.search-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 28px;
  align-self: stretch;
  margin: auto;
}

.partners-grid {
  display: grid;
  margin-top: 20px;
  /*! min-height: 1082px; */
  width: 100%;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .partners-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.partner-card {
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 181, 0, 1);
  align-self: stretch;
  display: flex;
  /*! min-width: 240px; */
  /*! margin: auto 0; */
  padding: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  /*! width: 211px; */
  position: relative;
}

.partner-card a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
}

.partner-card a:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

.partner-info2 {
  /*! display: flex; */
  /*! max-width: 100%; */
  /*! width: 255px; */
  /*! align-items: start; */
  /*! gap: 13px; */
  /*! justify-content: start; */
  /*! padding: 16px; */
  background-color: transparent;
}

.partner-name2 {
  border-radius: 0;
  /*! min-width: 240px; */
  /*! width: 255px; */
  /*! padding: 16px; */
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  /*! line-height: 1; */
  margin: 0;
}

.partner-logo {
  aspect-ratio: 2.08;
  object-fit: contain;
  object-position: center;
  width: 250px;
  margin-top: 18px;
  max-width: 100%;
}

.pagination {
  align-self: end;
  display: flex;
  margin-top: 20px;
  align-items: end;
  gap: 20px;
  justify-content: end;
  margin: 0 auto;
}

.pagination-button {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: none;
  display: flex;
  min-height: 48px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.pagination-button.prev {
  transform: rotate(-180deg);
}

.pagination-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 24px;
  align-self: stretch;
  margin: auto;
}

.pagination-number {
  align-self: stretch;
  border-radius: 51px;
  min-height: 48px;
  padding: 0 17px;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-align: center;
  text-transform: uppercase;
  width: 48px;
  background: none;
  border: none;
  cursor: pointer;
}

.pagination-number.active {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .partners-container {
    max-width: 100%;
  }
  .partners-content {
    max-width: 100%;
    margin-top: 40px;
  }
  .partners-content-inner {
    max-width: 100%;
  }
  .header-content {
    max-width: 100%;
  }
  .search-input {
    padding: 0 20px;
    white-space: normal;
  }
  .partners-grid {
    max-width: 100%;
  }
  .pagination-number {
    white-space: normal;
  }
}

/* atriculos rutas*/
.articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 100px;
  padding: 35px 80px;
  flex-wrap: wrap;
}

.articles-title {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 25px;
}

.search-input {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  padding: 12px 52px;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-transform: uppercase;
  min-width: 240px;
  min-height: 48px;
}

.search-button {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-icon {
  width: 28px;
  height: 28px;
}

/* Articles grid */
.articles-container {
  padding: 0 80px;
}

.articles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

/* Article card */
.article-card {
  background-color: white;
  border-radius: 30px;
  border: 2px solid var(--accent-color);
  box-shadow: 1px 2px 4px var(--shadow-color);
  padding: 30px 20px;
  width: 49%;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.article-title {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  flex: 1;
}

.article-indicator {
  width: 27px;
  height: 25px;
  background-color: var(--accent-color);
  border-radius: 43px;
}

.article-description {
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 350;
  line-height: 12px;
  margin: 18px 0;
}

.article-footer {
  margin-top: 18px;
}

.authors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.author-tag {
  border: 1px solid var(--primary-color);
  border-radius: 43px;
  padding: 6px 19px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 350;
  text-transform: uppercase;
  text-align: center;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 25px;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 28px;
}

.pagination-button {
  background-color: var(--accent-color);
  border: none;
  border-radius: 51px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination-icon {
  width: 24px;
  height: 24px;
}

.page-number {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 350;
  text-align: center;
  text-transform: uppercase;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-number.current {
  text-decoration: underline;
}

/* Responsive styles */
@media (max-width: 991px) {
  .articles-header {
    padding-right: 20px;
  }
  .search-input {
    padding-left: 20px;
    padding-right: 20px;
  }
  .articles-container {
    padding: 0 20px;
  }
  .article-card {
    max-width: 100%;
  }
  .article-title,
  .article-description,
  .authors-list {
    max-width: 100%;
  }
}

/* Publication List */

.publication-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.publication-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #cecaca;
  border-radius: 16px;
  background-color: #fff;
  padding: 12px;
  gap: 24px;
}

@media (min-width: 768px) {
  .publication-item {
    flex-wrap: nowrap;
  }
}

.publication-item__content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 22px;
  margin-top: 12px;
}

.publication-item__title {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

.publication-item__teaser {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}

.publication-item__teaser--media {
  max-width: 180px;
}

.publication-item__teaser img {
  max-width: 100%;
  height: auto;
}

.publication-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-left: 10%;
  width: 90%;
}

.publication-item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.tag2 {
  border-radius: 50px;
  border: 1px solid var(--primary-color);
  padding: 6px 18px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 400;
  background-color: var(--gray-extra-light);
}

.publication-item__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pdf-icon {
  width: 40px;
  aspect-ratio: 1.6;
  object-fit: contain;
}

.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.action-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.action-btn__icon {
  width: 27px;
  aspect-ratio: 1.08;
  object-fit: contain;
  
}

/* Pagination */
.pagination__btn {
  border-radius: 50px;
  background-color: var(--accent-color);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination__btn img {
  max-width: 18px;
}

.pagination__btn--prev {
  transform: rotate(180deg);
}

.pagination__numbers {
  display: flex;
  gap: 8px;
}

.pagination__number {
  border: none;
  background: none;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 400;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 60px;
}

.pagination__number--active {
  text-decoration: underline;
  font-weight: 600;
}

/* Footer */
.main-footer {
  width: 100%;
  background-color: var(--primary-color);
  padding: 16px 26px;
  border-radius: 20px 20px 0 0;
}

@media (min-width: 768px) {
  .main-footer {
    padding: 54px 66px;
    border-radius: 40px 40px 0 0;
  }
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

@media (min-width: 768px) {
  .footer-links {
    gap: 85px;
  }
}

.footer-title {
  color: var(--accent-color);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 39px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link {
  color: var(--accent-color);
  font-size: 16px;
  font-weight: 350;
  text-decoration: none;
}

.footer-contact {
  text-align: left;
}

@media (min-width: 768px) {
  .footer-contact {
    text-align: right;
  }
}

.social-links {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .social-links {
    justify-content: flex-end;
  }
}

.social-icon {
  width: 32px;
  aspect-ratio: 1;
  object-fit: contain;
}

.location-title {
  color: var(--accent-color);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 49px 0 36px;
}

.location-address {
  color: var(--accent-color);
  font-size: 16px;
  font-weight: 350;
  font-style: normal;
}

/*Comites*/
.header-bg {
  inset: 0;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  margin: 12px 0;
}

.header-title {
  position: relative;
  margin-top: -100px;
  font-size: 28px;
  color: var(--primary-color);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  line-height: 36px;
}

.members-section {
  display: flex;

  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 991px) {
  .members-section {
    max-width: 100%;
    margin-top: 40px;
  }
}

.tab-navigation {
  display: flex;
  flex-wrap: nowrap; /* Mantiene todo en una línea */
  overflow-x: auto; /* Scroll horizontal si no caben */
  overflow-y: hidden; /* Evita que crezca verticalmente */
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  scrollbar-width: none; /* Oculta scroll en Firefox */
  border-radius: 100px;
  background: linear-gradient(
      0deg,
      rgba(208, 208, 208, 0.5) 0%,
      rgba(208, 208, 208, 0.5) 100%
    ),
    rgba(0, 0, 0, 0.1);
  background-blend-mode: color-burn, luminosity;
  box-shadow: 0px -0.5px 1px rgba(255, 255, 255, 0.3) inset,
    0px -0.5px 1px rgba(255, 255, 255, 0.25) inset,
    1px 1.5px 4px rgba(0, 0, 0, 0.08) inset,
    1px 1.5px 4px rgba(0, 0, 0, 0.1) inset;
  padding: 4px;
  gap: 4px;
  min-height: 50px;
}

.tab-navigation::-webkit-scrollbar {
  display: none; /* Oculta scroll en Chrome, Safari y Edge */
}

.tab-btn {
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--primary-color);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap; /* Evita que el texto se rompa */
  /* flex: 0 0 auto; -- excluido como pediste */
}

.tab-btn.active {
  border-radius: 20px;
  background-color: var(--accent-color);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.members-content {
  margin-top: 20px;
  width: 100%;
}

@media (min-width: 991px) {
  .members-content {
    max-width: 100%;
    margin-top: 30px;
  }
}

@media (max-width: 640px) {
  .members-content {
    padding: 0 20px;
  }
}

.search-header {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 991px) {
  .search-header {
    max-width: 100%;
  }
}

.section-title {
  color: var(--primary-color);
  font-size: 22px;
  font-family: var(--font-primary);
  font-weight: 400;
  flex: 1;
  margin: 0;
}

.section-title span {
  font-weight: 600;
}

.section-subtitle {
  color: var(--primary-color);
  font-size: 20px;
  font-family: var(--font-primary);
  font-weight: 400;
  flex: 1;
  width: 201px;
  margin: 0;
}

.search-container {
  border-radius: 51px;
  display: flex;
  justify-content: flex-start;

  gap: 25px;
  flex: 1;
}

.search-input {
  border-radius: 51px;
  background-color: var(--accent-color);
  border: 2px solid rgba(255, 181, 0, 1);
  min-height: 48px;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-align: center;
  text-transform: uppercase;
  width: 50%;
}

.search-btn {
  border: none;
  border-radius: 51px;
  background-color: var(--accent-color);
  min-height: 48px;
  padding: 10px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 28px;
}

@media (max-width: 991px) {
  .search-input {
    padding: 0 20px;
  }
}

.members-list {
  margin-top: 20px;
  width: 100%;
  font-family: var(--font-primary);
  color: var(--primary-color);
  font-weight: 350;
  line-height: 1;
}

.members-list p {
  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.member-card {
  margin-top: 20px;
}

.member-info {
  display: flex;
  width: 100%;
  gap: 40px 100px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.member-name {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  width: 656px;
}

.member-details {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.company-name {
  font-size: 18px;
  margin: 0;
  width: 450px;
  text-align: left;
}

.location-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
}

.location-text {
  border: 1px solid rgba(0, 50, 109, 1);
  border-radius: 43px;
  padding: 0 19px;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.location-icon {
  aspect-ratio: 1.07;
  object-fit: contain;
  object-position: center;
  width: 32px;
  border-radius: 43px;
}

@media (max-width: 991px) {
  .member-info {
    max-width: 100%;
  }
  .member-name {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .member-info {
    flex-direction: row;
    justify-content: flex-start;
  }
  .member-name {
    font-size: 14px;
  }
  .company-name {
    font-size: 14px;
    min-width: 100px;
    max-width: 100px;
  }
  .location-badge {
    margin-left: 80px;
  }
}

.members-actions {
  display: flex;
  margin-top: 20px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.mail-all {
  border-radius: 51px;
  align-self: stretch;
  min-width: 240px;
  margin: auto 0;
  flex: 1;
  width: 412px;
}

.mail-btn {
  border: 2px solid rgba(255, 181, 0, 1);
  border-radius: 51px;
  background-color: var(--accent-color);
  display: flex;
  min-height: 48px;
  padding: 0 30px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-transform: uppercase;
}

.mail-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 20px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.page-btn {
  border: none;
  border-radius: 51px;
  background-color: var(--accent-color);
  min-height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.page-btn.prev {
  transform: rotate(180deg);
}

.page-icon {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 24px;
}

.page-link {
  font-family: var(--font-primary);
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 350;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-link.active {
  text-decoration: underline;
}

/* aCommittees Section */
.acommittees-section {
  margin: 40px 0;
}

.section-title-commites {
  font-weight: 600;
  color: var(--primary-color);

  font-size: 26px;
  border-left: 4px solid var(--accent-color);
  padding-left: 16px;
}

.acommittees-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .acommittees-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
  }
}

@media (min-width: 768px) {
  .acommittees-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.acommittee-card {
  border-radius: 20px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid var(--accent-color);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  align-items: center;
  justify-content: center;
}

.acommittee-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.acommittee-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0;
}

.indicator-dot {
  display: flex;
  justify-content: center;
  width: 27px;
  height: 25px;
  background-color: var(--accent-color);
  border-radius: 43px;
  flex-shrink: 0;
}

.indicator-dot-img {
  width: 50%;
}

.acommittee-member {
  margin-top: 35px;
  font-size: 12px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 43px;
  padding: 0 19px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Media Queries */
@media (max-width: 991px) {
  .menu {
    max-width: 100%;
  }
  .nav-menu {
    max-width: 100%;
  }
  .navigation {
    max-width: 100%;
  }
  .contact-btn {
    white-space: initial;
  }
  .hero {
    max-width: 100%;
  }

  .objectives-title {
    font-size: 40px;
  }
  .objectives-container {
    margin-top: 40px;
  }
  .calendar-section {
    max-width: 100%;
  }
  .calendar-header {
    max-width: 100%;
    padding: 20px;
    font-size: 40px;
    white-space: initial;
  }
  .month-text {
    font-size: 40px;
  }
  .year-number {
    font-size: 40px;
  }
  .week-label {
    max-width: 100%;
    white-space: initial;
  }
  .day-label {
    white-space: initial;
  }
  .week-row {
    max-width: 100%;
    white-space: initial;
  }
  .day-cell {
    white-space: initial;
  }
  .day-number {
    white-space: initial;
  }
  .event-box {
    margin-right: -7px;
    margin-bottom: 10px;
    padding: 10px 20px;
  }
  .event-item.secondary {
    white-space: initial;
  }
  .event-text {
    white-space: initial;
  }
  .committees-section {
    max-width: 100%;
    padding: 24px;
    margin-top: 40px;
  }
  .committees-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
  }
  .committees-info {
    width: 100%;
  }
  .committees-description {
    max-width: 100%;
  }
  .committees-actions {
    width: 100%;
  }
  .action-buttons {
    max-width: 100%;
  }
  .action-button {
    padding: 12px 20px;
  }
  .publications-section {
    margin-bottom: 40px;
  }
  .publication-card {
    max-width: 100%;
  }
  .publication-content {
    max-width: 100%;
  }
  .publication-info {
    max-width: 100%;
  }
  .publication-name {
    max-width: 100%;
  }
  .site-footer {
    max-width: 100%;
    padding: 20px;
    margin-top: 40px;
  }
  .footer-links {
    max-width: 100%;
  }
  .social-media {
    padding-left: 20px;
  }
  .location-heading {
    margin-top: 40px;
  }
  .partner-description {
    flex-direction: column;
  }
  .description-content,
  .partner-image {
    width: 100%;
  }

  .partner-list {
    margin-top: 40px;
  }
  .main-footer {
    margin-top: 40px;
  }
  .footer-content {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .description-text {
    font-size: 16px;
  }
  .partner-toggle {
    width: 353px;
    min-height: 31px;
    margin: 0 20px;
  }
  .partner-name {
    font-size: 16px;
  }
  .pagination {
    justify-content: center;
  }
  .content {
    padding: 0 20px;
  }

  .search-bar__input {
    font-size: 16px;
    padding: 8px 20px;
  }
  .search-bar__icon {
    width: 20px;
  }
  .publication-item__title {
    font-size: 20px;
  }
  .tag {
    font-size: 10px;
  }
  .action-btn__icon {
    width: 36px;
  }
}

/* CUSTOM CSS */
.articulo-card {
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 181, 0, 1);
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

@media (min-width: 992px) {
  .articulo-card {
    flex-direction: row;
  }
}

.articulo-title-container {
  display: flex;
  max-width: 100%;
  width: 95%;
  align-items: start;
  gap: 13px;
  justify-content: start;
  padding: 16px;
}

.articulo-body-container {
  display: flex;
  align-items: start;
  gap: 14px;
  justify-content: start;
}

/* CUSTOM CSS END */
.div-salto {
  margin-top: 24px; /* Espacio arriba */
  margin-bottom: 24px; /* Espacio abajo */
  width: 100%; /* Ocupa todo el ancho */
  height: 0; /* Sin contenido visible */
  clear: both; /* Limpia floats si los hay */
}

button a {
  color: var(--primary-color);
  text-decoration: none;
}

button a:hover {
  color: var(--white);
  text-decoration: none;
}

.acommittee-header a {
  color: var(--primary-color);
  text-decoration: none;
}

.nounderline {
  text-decoration: none;
}

.colorize {
  color: var(--primary-color);
}

.table-articulo {
  border: 0px solid red;
  text-align: center;
  font-size: 16px;
  color: var(--primary-color);
  vertical-align: top;
}

.tr-articulo {
  border: 0px solid red;
  text-align: center;
  font-size: 16px;
  color: var(--primary-color);
  vertical-align: top;
}

.td-articulo {
  padding: 2px;
  border: 0px solid red;
  text-align: center;
  font-size: 16px;
  color: var(--primary-color);
  vertical-align: top;
}

.articulo-img {
  width: 150px;
  padding: 2px;
  border: 1px solid #ccc;
  margin: 5px 0px 0px 10px;
}

.articulo-title {
  text-align: left;
  font-size: 20px;
  font-weight: 600;
}

.articulo-body {
  text-align: left;
  font-size: 16px;
}

.label-nowrap {
  white-space: nowrap;
}

/** ERROR MESSAGES **/
#session-errors button {
  display: none;
}

#session-errors {
  border: 2px red solid;
  border-radius: 8px;
  color: red;
  padding: 5px;
  background-color: rgb(221, 221, 221);
}

#session-errors-display {
  /* 	border: 1px red solid; */
  padding: 5px;
}

#session-errors ul li {
  list-style-type: none;
}

/** **/
input {
  padding: 8px; /* Espaciado interno */
  border-radius: 4px; /* Bordes redondeados */
  border: solid 1px #ddd;
  margin: 8px 0;
}

textarea {
  padding: 8px; /* Espaciado interno */
  border-radius: 4px; /* Bordes redondeados */
  border: solid 1px #ddd;
  margin: 8px 0;
}
input[readonly] {
  background-color: #f0f0f0; /* Fondo gris claro para indicar que es readonly */
  border: 1px solid #ccc; /* Borde más suave */
  color: #666; /* Texto más tenue */
  cursor: not-allowed; /* Cursor que indica no editable */
  /*     padding: 8px; Espaciado interno */
  /*     border-radius: 4px; Bordes redondeados */
}

/** Formularios por si suena la flauta **/

.committees-grid form {
  border-radius: 16px;
  background-color: #ffffff;
  padding: 12px 12px 22px 12px;
  border: solid 1px #ecece2;
}

.committees-grid form tbody label {
  font-size: 16px;
  color: #333333;
  font-weight: 600;
}

.committees-grid form tbody tr:nth-child(odd) {
  font-size: 16px;
  background-color: var(--gray-extra-light);
}

.committees-grid form input[type="text"],
.committees-grid form textarea {
  border: solid 1px #d9d9cf;
  border-radius: 8px;
  margin-bottom: 12px;
}

.committees-grid form .member-type-btn,
.membership-buttons .member-type-btn {
  border-radius: 60px;
  background-color: var(--accent-color);
  border: solid 2px var(--accent-color);
  padding: 12px 24px 8px;
  font-family: var(--font-primary);
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 500;
  text-transform: uppercase;
  /*! border: none; */
  cursor: pointer;
  line-height: normal;
  transition: all 0.3s ease;
}

.committees-grid form .member-type-btn:hover,
.membership-buttons .member-type-btn:hover {
  background-color: var(--gray-extra-light);
  border: solid 2px var(--primary-color);
  color: var(--primary-color);
}

.committees-grid form .checkbox {
  margin-bottom: 12px;
  font-size: 16px;
}
.committees-grid form .checkbox:last-child {
  margin-bottom: 0;
  font-size: 16px;
}

.committees-grid form .checkbox label {
  font-size: 16px;
  color: #333333;
}

.committees-grid form .checkbox a {
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 600;
}

/* Calendario */

.fc-col-header .fc-col-header-cell-cushion {
  color: var(--accent-color);
  border: none;
  text-decoration: none;
}

.fc .fc-daygrid-day-number {
  text-decoration: none;
  font-weight: 600;
}

.fc-liquid-hack .fc-daygrid-day-frame {
  position: static;
  background-color: var(--white);
  border: solid 2px var(--primary-color);
  border-radius: 12px;
  margin: 4px;
  padding: 6px;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border: none;
}

.fc-theme-standard .fc-scrollgrid {
  border: none;
}

.fc .fc-toolbar-title {
  text-transform: uppercase;
  color: var(--primary-color);
}

.fc .fc-toolbar {
  flex-wrap: wrap;
  gap: 12px;
}

.fc-event-main {
  /*  background-color: var(--primary-color) !important; */
  padding: 8px !important;
  /*  border-color: var(--primary-color) !important; */
  border-radius: 12px !important;
}

.fc .fc-daygrid-event {
  /*  background-color: #fff !important; */
  border-radius: 12px !important;
  border: none !important;
}

/* Modal */

.modal-content {
  border-radius: 20px;
  border: 2px solid var(--primary-color);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

.modal-header .modal-title {
  color: var(--primary-color);
  line-height: 1.2;
}

.modal-body {
  color: var(--primary-color);
  background-color: var(--gray-light);
  margin: 16px;
  border-radius: 6px;
}

.modal-footer .btn-secondary {
  background-color: var(--accent-color);
  border: none;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 400;
  padding: 6px 26px;
  transition: all 0.3s ease;
}

.modal-footer .btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.modal-body.header {
  background-color: var(--primary-color);
  color: white;
  margin-top: 0;
}

.modal-body.header dd {
  margin-bottom: 0;
}

.modal-body.content {
  max-width: fit-content !important;
  margin-top: 0;
}

.modal-body.content dl {
  background-color: var(--white);
  border-radius: 6px;
  padding: 12px 0;
}
.modal-body.content dd {
  margin-bottom: 6px;
}
.modal-header {
  border: none;
}
.modal-footer {
  border: none;
  margin-top: 0;
  padding-top: 0;
}
.modal-footer .btn-primary {
  background-color: var(--primary-color);
  border: none;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--white);
  font-weight: 400;
  padding: 6px 26px;
  transition: all 0.3s ease;
}

.modal-footer .btn-primary:hover {
  background-color: var(--black);
  color: var(--white);
}

/* formulario */

.container-form {
  background-color: #fff;
  border-radius: 12px;
  border: solid 1px #f2f2f2;
  padding: 16px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 40px !important;
}

.container-form .btn.btn-primary {
  background-color: var(--primary-color);
  border-radius: 50px;
  padding: 8px 20px;
  margin: 0 auto;
  display: block;
}

.container-form .btn.btn-primary:hover {
  background-color: var(--accent-color);
  border-radius: 50px;
  padding: 8px 20px;
  color: var(--black);
}

/* Hero Slider - Estilos base */
.hero-slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.hero-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Contenedor de imágenes */
.hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.hero-media img.active {
  display: block;
  opacity: 1;
}

/* Texto dinámico - Posición inferior izquierda */
.hero-text {
  position: absolute;
  z-index: 10;
  max-width: 500px;
  animation: slideInUp 0.6s ease-in-out;
}

/* Dots - Centrados en la parte superior */
.hero-dots {
  position: absolute;
  /* top: 20px; */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
  background-color: transparent;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.3);
}

.hero-dot:hover {
  background-color: gray;
}

/* Controles de navegación */
.hero-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 12px 16px;
  cursor: pointer;
  z-index: 12;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.hero-control:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.hero-prev {
  left: 20px;
}

.hero-next {
  right: 20px;
}

.hero-control span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animación de entrada del texto */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-slider {
    height: 350px;
  }

  .hero-text {
    max-width: 90%;
  }

  .hero-control {
    font-size: 1.5rem;
    padding: 8px 12px;
  }

  .hero-prev {
    left: 10px;
  }

  .hero-next {
    right: 10px;
  }

  .hero-dots {
    top: 15px;
    gap: 8px;
  }

  .hero-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    height: 250px;
  }

  .hero-control {
    font-size: 1.2rem;
    padding: 6px 10px;
  }
}

/* Magazine card */

.magazine-card {
  border-radius: 30px;
  background-color: var(--white);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  border: 2px solid var(--accent-color);
  padding: 30px 20px;
  margin-bottom: 30px;
  
}

.magazine-title {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 24px;
  margin-bottom: 16px;
  
}

.magazine-media {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}

@media (min-width: 576px) {
  .magazine-media {
    flex-direction: column;
    gap: 24px;
  }
}

.magazine-media img {
  margin-bottom: 16px;
  border-radius: 6px;
  border: solid 1px var(--gray-light);
}

.magazine-details {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  align-items: start;
  justify-content: center;
  width: 100%;
}

.magazine-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 576px) {
  .magazine-info {
    grid-template-columns: 160px 1fr;
    gap: 12px;
    
  }
}

@media (min-width: 768px) {
  .magazine-info {
    grid-template-columns: 220px 1fr;
    gap: 16px;
    
  }
}

@media (min-width: 992px) {
  .magazine-info {
    grid-template-columns: 360px 1fr;
    gap: 24px;
    
  }
}

.magazine-actions {
  display: flex;
  gap: 16px;
  flex-direction: column;
}