/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
}

/* ===== Estilo general de enlaces (sobrescrito en secciones específicas) ===== */
a { 
  color: var(--link);
  text-decoration: none;
}

a:hover { 
  color: var(--link-hover);
}

/* NOTA:
   - En secciones como .comunicaciones y .descargas, se usa color var(--text-primary)
     y subrayado.
   - Ver overrides en brandingPBA.css */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--third-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #3e9bdd;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--third-color);
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 8px 0;
  border-bottom: 1px solid #e6f2fb;
}

#header.header-scrolled {
  border-color: #fff;
  box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
}

#header .logo a {
  color: var(--primary-color);
}

#header .logo img {
  max-height: 48px;
}

@media (max-width: 992px) {
  #header .logo {
    font-size: 0px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 16px;
  color: var(--primary-color);
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--link);
}

.navbar .getstarted,
.navbar .getstarted:focus {
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 4px;
  color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  background: #fff;
  border: 1px solid var(--border-color);  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: var(--link);
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}
@media (max-width: 768px) {
  .navbar a,
  .navbar a:focus {
    font-size: 14px;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: var(--secondary-color);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: var(--secondary-color);
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--link);
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
  color: var(--link);
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section - versión unificada en celeste
--------------------------------------------------------------*/
/* ===== Hero centrado, altura segura ===== */
#hero {
  width: 100%;
  min-height: calc(100svh - var(--header-height));
  height: auto;

  position: relative;
  /* === Fondo celeste texturado (igual que Principios Generales) === */
  background: var(--bg-white);
}

#hero.u-bg-textura-celeste {
  background-image: url("../img/Unidos/textura-celeste-10-new1.png");
  background-repeat: repeat;
  background-size: 192px auto;

  /* Centrado vertical universal */
  display: flex;
  align-items: center;

  /* Aire adaptable arriba y abajo */

  padding-block: clamp(16px, 4vh, 64px);
}

#hero:before {
  content: "";
  position: absolute;
  inset: 0;
}

#hero:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .container {
  padding-top: 0;
  text-align: center;
}
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/Unidos/PBA-Celeste-Base.png") left /25% auto no-repeat;
  opacity: 0.25; /* ajustá la intensidad */
  pointer-events: none; /* no bloquea clics */
}
/* 📱 Versión para celulares */
@media (max-width: 768px) {
  #hero::after {
    background: url("../img/Unidos/PBA-Celeste-Base.png") center bottom /45% auto no-repeat;
    opacity: 0.25; /* opcional: un poco más visible */
  }
}
/* === Texto principal === */

#hero h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.2;
}
#hero h2 { font-size: var(--fs-h2); font-weight: 600; }
#hero h3 { font-size: var(--fs-h3); font-weight: 400; color: var(--text-primary); /* subtítulo más suave */
}

/* === Botón principal === */
#hero .btn-get-started {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 30px;
  color: #fff;
  border: none;
}


/* === Ajustes responsive === */
@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-height: 800px),
(max-width: 992px) {
  #hero {
    height: auto;
  }

}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: var(--section-padding) 0; /* usa las variables del branding */
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  text-transform: none;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: var(--text-accent);
}
.section-title p { color: var(--text-primary); }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--text-accent);
}
.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li + li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: var(--link);
  line-height: 1;
}

.about .content p {
  margin-bottom: 0;
}

.about .content .btn-learn-more {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 5px;
  transition: 0.3s;
  line-height: 1;
  color: var(--link);
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid var(--third-color);
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
  padding: var(--section-padding) 0;
}

.counts .count-box {
  width: 100%;
  text-align: center;
}

.counts .count-box span {
  font-size: 48px;
  line-height: 48px;
  display: block;
  font-weight: 700;
  color: var(--secondary-color);
  margin-left: 80px;
  margin: auto;
}

.counts .count-box p {
  padding: 8px 0 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1e6ca6;
}

/*--------------------------------------------------------------
/*--------------------------------------------------------------
# About Video (Ficha individual estilo testimonial)
--------------------------------------------------------------*/
.about-video .testimonial-item {
  background-color: var(--tertiary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  padding: 24px;
  text-align: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover coherente */
.about-video .testimonial-item:hover {
  background-color: var(--bg-white);
  box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, 0.12);
}

/* Foto circular centrada */
.about-video .testimonial-item .testimonial-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin: 12px auto 16px auto;
  display: block;
}

/* Texto */
.about-video .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  border-radius: 6px;
  background-color: transparent;
}

/* Nombre */
.about-video .testimonial-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 2px;
}

/* Cargo */
.about-video .testimonial-item h6 {
  font-size: 14px;
  color: var(--secondary-color);
  margin: 0;
}
/* Íconos de comillas (idénticos a testimonial) */
.about-video .quote-icon-left,
.about-video .quote-icon-right {
  color: #c9e3f5;             /* mismo color celeste suave */
  font-size: 26px;
}

.about-video .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.about-video .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

/* Tarjeta individual */
.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
  background-color: var(--tertiary-color); /* fondo institucional */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  padding: 24px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover igual que otras tarjetas */
.testimonials .testimonial-item:hover {
  background-color: var(--bg-white);
  box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, 0.12);
}

/* Imagen del afiliado */
.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 12px auto 16px auto; /* aire debajo de la foto */
}

/* Iconos de comillas */
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #c9e3f5;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

/* Texto del testimonio */
.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  background-color: transparent; /* el fondo lo toma la tarjeta */
}

/* Nombre del afiliado */
.testimonials .testimonial-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 2px;
}

/* Cargo del afiliado */
.testimonials .testimonial-item h6 {
  font-size: 14px;
  color: var(--secondary-color); /* azul institucional */
  margin: 0;
}

/* Localidad o distrito */
.testimonials .testimonial-item h5 {
  font-size: 14px;
  color: var(--primary-color);
  margin: 0;
}

/* Paginación del carrusel */
.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--secondary-color);
  opacity: 1;
  border: 1px solid var(--third-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--link);
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  text-align: center;
  padding: 70px 20px 80px 20px;
  transition: all ease-in-out 0.3s;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05);
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
  font-weight: 600;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .icon-box h4 a {
  color: var(--secondary-color);
  transition: ease-in-out 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);
}


/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px 8px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: var(--link);
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio .portfolio-wrap::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 2px;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #fff;
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid var(--third-color);
}

.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: var(--link);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(18, 66, 101, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

.team .member .member-img {
  position: relative;
  overflow: hidden;
}

.team .member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team .member .social a {
  transition: color 0.3s;
  color: var(--secondary-color);
  margin: 0 10px;
  display: inline-block;
}

.team .member .social a:hover {
  color: var(--link);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
  line-height: 0;
}

.team .member .member-info {
  background-color: var(--tertiary-color);
  padding: 25px 15px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: var(--primary-color);
}

.team .member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-color);
}

.team .member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: #777777;
}

.team .member:hover .social {
  opacity: 1;
}
.team .member:hover .social {
  opacity: 1;
}

.team .member .member-info .social.always-visible {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 12px;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  height: auto;
  transition: none;
}

.team .member .member-info .social.always-visible a {
  color: var(--secondary-color);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.team .member .member-info .social.always-visible a:hover {
  color: var(--link-hover);
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-list {
  padding: 0 100px;
}

.faq .faq-list ul {
  padding: 0;
  list-style: none;
}

.faq .faq-list li + li {
  margin-top: 15px;
}

.faq .faq-list li {
  padding: 20px;
  border-radius: 4px;
  position: relative;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}

.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  right: 0;
  left: 20px;
  color: #87c1ea;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #343a40;
}

.faq .faq-list a.collapsed:hover {
  color: var(--link);
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1200px) {
  .faq .faq-list {
    padding: 0;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  width: 100%;
}

.contact .info i {
  font-size: 20px;
  color: var(--link);
  float: left;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--secondary-color);
}

.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #217bbc;
}

.contact .info .email,
.contact .info .phone {
  margin-top: 40px;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--link);
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}


@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  min-height: 40px;
  margin-top: 72px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 58px;
  }
}

.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #1a5e90;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/* -------------------------------------------------------------
   CartaOrgánica — tabs consistentes, accesibles y tokenizados
------------------------------------------------------------- */
.cartaorganica .nav-tabs{
  border:0;
  gap:.5rem; /* aire entre ítems */
}

/* Ítems de la lista (izquierda) */
.cartaorganica .nav-link{
  border:0;
  padding-block: .9rem;
  padding-inline: 1rem;
  color: var(--text-primary);
  border-radius: .4rem;
  border-inline-start: .25rem solid transparent; /* indicador a la izquierda */
  cursor:pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Tipos dentro del tab-item: usar escala del sistema */
.cartaorganica .nav-link h4{
  font-size: var(--fs-h4);
  font-weight: 600;
  margin:0;
}
.cartaorganica .nav-link p{
  font-size: .9rem;
  margin:0;
  color: var(--text-primary);
}

/* Hover / Active / Focus-visible coherentes */
.cartaorganica .nav-link:hover h4{ color: var(--primary-color); }
.cartaorganica .nav-link.active{
  border-inline-start-color: var(--primary-color);
}
.cartaorganica .nav-link.active h4{ color: var(--primary-color); }
.cartaorganica .nav-link:focus-visible{
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Contenido */
.cartaorganica .tab-pane.active{
  animation: slide-down .35s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  .cartaorganica .tab-pane.active{ animation: none; }
}

/* Encabezado dentro del contenido */
.cartaorganica .tab-pane h3{
  font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  font-weight: 600;
  margin-bottom: .8rem;
  color: var(--primary-color);
}

/* Tipografía y ritmo del cuerpo del artículo */
.cartaorganica .tab-pane{
  font-family: var(--font-primary);
  color: var(--text-primary);
  line-height: var(--lh-body);
}
.cartaorganica .nav-link p,
.cartaorganica .tab-pane p,
.cartaorganica .tab-pane ol,
.cartaorganica .tab-pane ul{
  color: var(--text-primary);
  margin-bottom: var(--rhythm);
}
.cartaorganica .tab-pane p:last-child{ margin-bottom:0; }
/* Fondo blanco institucional para el contenido de cada capítulo */
.cartaorganica .tab-pane {
  background-color: var(--tertiary-color);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
}
/* === Fondo y estilo en los botones de capítulos === */

/* Todos los capítulos (no seleccionados): gris medio */
.cartaorganica .nav-link {
  background-color: var(--bg-white);
  color: var(--text-primary);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover: un poco más claro */
.cartaorganica .nav-link:hover {
  background-color: var(--tertiary-color);
}

/* Capítulo activo: blanco institucional + negrita + borde celeste */
.cartaorganica .nav-link.active {
  background-color: var(--tertiary-color);
  border-inline-start-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}

/* Asegura que el texto dentro del activo (h4 y p) también se tiña y resalte */
.cartaorganica .nav-link.active h4,
.cartaorganica .nav-link.active p {
  color: var(--primary-color);
  font-weight: 700;
}
/* Listas un poco más legibles */
.cartaorganica .tab-pane ol,
.cartaorganica .tab-pane ul{ padding-left: 1.1rem; }

/* Imágenes: sin floats; que se adapten elegantemente */
.cartaorganica .tab-pane .figure{
  display:flex; gap:.75rem; align-items:flex-start; margin-bottom: var(--rhythm);
}
.cartaorganica .tab-pane .figure img{
  max-width: 300px; height:auto; border-radius: var(--radius-sm);
}
@media (max-width: 768px){
  .cartaorganica .tab-pane .figure{ display:block; }
  .cartaorganica .tab-pane .figure img{ max-width:100%; margin-bottom:.5rem; }
}

/* Animación global (dejá una sola definición en todo el CSS) */
@keyframes slide-down{ from{opacity:0; transform: translateY(-2px);} to{opacity:1; transform:none;} }

/*--------------------------------------------------------------
# Sección Afiliate (CTA)
--------------------------------------------------------------*/
#cta {
  border: 2px solid var(--bg-gris-medio); /* Contorno gris más oscuro */
  border-radius: 8px; /* Esquinas suaves */
  padding: var(--section-padding) 0;
  text-align: center;
  margin: 40px auto;
  width: 90%;
  max-width: 1100px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* Sombra sutil, opcional */
}

#cta h3 {
  color: #112D4D; /* Azul institucional */
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

#cta p {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

#cta .cta-btn {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 6px;
  background: #74BCE5; /* Celeste institucional */
  color: #FFFFFF; /* Texto blanco */
  transition: 0.3s;
  text-decoration: none;
  border: none;
}
/*--------------------------------------------------------------

# Líneas de acción (SERVICES) — alineación, espacios e imágenes
# (mismo criterio que Donación, pero aplicado a #services)
--------------------------------------------------------------*/
#services .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;  /* todas las tarjetas a la misma altura */
  /* Gutters Bootstrap + separación vertical */
  --bs-gutter-x: 24px;              /* espacio lateral entre columnas */
  --bs-gutter-y: 24px;              /* espacio vertical entre filas */
  row-gap: 24px;                    /* refuerzo del gap vertical */
}

#services .col-lg-4,
#services .col-md-6 {
  display: flex;                     /* cada columna es un contenedor flex */
  margin-top: 0 !important;          /* evita saltos entre filas */
}

#services .icon-box {
  display: flex;
  flex-direction: column;            /* imagen arriba, texto abajo */
  flex: 1 1 auto;                    /* iguala alturas entre tarjetas */
  width: 100%;
}

/* Imagen: tamaño consistente y centrada sin deformar */
#services .icon {
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#services .icon img {
  display: block;
  width: 100%;
  height: 320px;        /* ↑ probá 220px si querés más grande */
  object-fit: contain;  /* mantiene proporción sin recortar */
  padding: 10px 0;      /* aire arriba y abajo */
}

/* Separación entre imagen y título (reemplaza el inline) */
#services .icon + .pt-40 {
  padding-top: 16px;    /* espacio debajo de la imagen */
  flex: 1 1 auto;
}
#services .pt-40 h4 {
  margin-top: 0;
  text-align: center;
}
#services .pt-40 p {
  margin-bottom: 0;
}

/* Utilitaria general (por si la usás en otras partes del sitio) */
.pt-40 { padding-top: 40px; } /* En #services la sobreescribimos a 16px */
/*--------------------------------------------------------------
# Reajuste tarjetas de secciones (como Ecología y Medio Ambiente)
--------------------------------------------------------------*/
.icon-box {
  background: var(--bg-gris-mapa); /* gris claro, consistente con la nueva paleta */
  color: #112D4D; /* azul profundo para texto */
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 0 20px rgba(17, 45, 77, 0.08);
  text-align: left;
  transition: all 0.3s ease-in-out;
  height: 100%;
}

.icon-box:hover {
  transform: scale(1.03);
  background: #ffffff; /* efecto suave al pasar el mouse */
  box-shadow: 0 0 25px rgba(17, 45, 77, 0.15);
}

.icon-box h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #74BCE5; /* celeste institucional */
  margin-bottom: 10px;
}

.icon-box p {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}
/*--------------------------------------------------------------
# Líneas de acción - estilo de tarjetas
--------------------------------------------------------------*/
.services .icon-box h4 {
  font-family: 'Inter', sans-serif;
  color: #74BCE5; /* celeste institucional */
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.services .icon-box .icon {
  font-size: 48px; /* tamaño aumentado */
  color: #74BCE5;  /* también celeste */
  margin-bottom: 20px;
}
/* === Ajuste de espacio bajo imágenes en las tarjetas de líneas de acción === */
.services .icon + .pt-40 {
  padding-top: 40px;
}

.services .pt-40 h4 {
  margin-top: 10px;
}
/*--------------------------------------------------------------
# Líneas de acción (SERVICES) – ajuste final de imágenes
--------------------------------------------------------------*/
#services .icon img {
  display: block;
  width: 100%;
  height: 280px;        /* altura más grande y pareja */
  object-fit: cover;    /* llena el cuadro sin deformarse */
  border-radius: 8px;   /* bordes suaves */
}

/* Margen debajo de la imagen (entre dibujo y texto) */
#services .icon + .pt-40 {
  padding-top: 20px;
}

/* En pantallas chicas reducimos un poco la altura */
@media (max-width: 575.98px) {
  #services .icon img {
    height: 220px;
  }
}
/*--------------------------------------------------------------
# COUNTS — igual estilo que "Líneas de acción"
--------------------------------------------------------------*/
#counts .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;     /* todas las tarjetas a la misma altura */
  --bs-gutter-x: 24px;      /* mismo espacio lateral que services */
  --bs-gutter-y: 24px;      /* mismo espacio vertical que services */
  row-gap: 24px;
}

#counts .col-lg-3,
#counts .col-md-5,
#counts .col-6 {
  display: flex;            /* cada columna se comporta como contenedor flex */
}

#counts .count-box {
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow-main);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;

  display: flex;            /* centra vertical y horizontal */
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;             /* todas las tarjetas quedan parejitas */
}

/* Número grande (igual jerarquía que títulos de las tarjetas) */
#counts .count-box .purecounter {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;          /* subí/bajá si querés más/menos grande */
  line-height: 1;
  color: var(--secondary-color); /* azul profundo */
  display: inline-block;
  margin-bottom: 8px;
}

/* Etiqueta debajo del número */
#counts .count-box p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-color);   /* celeste institucional */
}

/* Responsive: suavizamos tamaño en pantallas chicas */
@media (max-width: 575.98px) {
  #counts .count-box .purecounter { font-size: 40px; }
  #counts .count-box { padding: 24px 18px; }
}
/* =========================
   Footer — versión final unificada
   ========================= */
:root{
  --footer-h: 48px;
}

#footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--text-primary, #1a1a1a);
  font-size: 0.85rem;           /* texto principal un poco más chico */
  line-height: 1.2;
  padding: 8px 0;
  box-shadow: none;
}

body{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}

/* Layout interno */
#footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
@media (min-width: 768px){
  #footer .container{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
}

/* Lado izquierdo (© Unidos + Designed by) */
#footer .footer-left{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

#footer .credits{
  font-size: 0.7rem;            /* aún más chica */
  color: var(--text-muted, #666);
}
#footer .credits a{
  color: var(--primary-color, #112D4D);
  text-decoration: none;
}
#footer .credits a:hover{
  text-decoration: underline;
}

/* Lado derecho (#UnidosPBA + iconos) */
#footer .footer-right{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#footer .hashtag{
  font-weight: 600;
  color: var(--primary-color, #112D4D);
}

/* Iconos sociales */
#footer .social-links{
  display: flex;
  align-items: center;
  gap: 8px;
}

#footer .social-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  color: var(--primary-color, #112D4D);
  text-decoration: none;
  border: 0;
}
#footer .social-links a:hover{
  color: var(--text-muted, #335c81);
}

#footer .social-links .bi{
  font-size: 17px;
}

/* Responsive */
@media (max-width: 576px){
  #footer{
    font-size: 0.8rem;
  }
  #footer .credits{ font-size: 0.65rem; }
}
/* Justificar por defecto */
p {
  text-align: justify;
  text-justify: inter-word;
}
/* Excepción: centrar solo los <p> de las tarjetas en Donaciones y Afiliate */
#donaciones .icon-box .pt-40 p,
#afiliate .icon-box .pt-40 p {
  text-align: center !important;
  text-justify: auto !important;
}

/* Excepciones: centrados */
.section-title p,
.section-title h2,
.section-title h3,
#hero h1,
#hero h2,
#hero h3,
footer p,
footer .copyright,
footer .credits,
.testimonials .testimonial-item p {
  text-align: center !important;
}

/* Excepciones: a la izquierda (párrafos de tarjetas) */
.icon-box p.description {
  text-align: left !important;
}
/*--------------------------------------------------------------
# Principios Generales – íconos más grandes y en azul secundario
--------------------------------------------------------------*/
#principios-generales .icon i {
  font-size: 36px;              /* agranda el ícono */
  color: var(--secondary-color); /* aplica azul secundario */
  transition: 0.3s ease;         /* suaviza el cambio si luego se anima */
}
/*--------------------------------------------------------------
# Hero – Ajustes responsive y tipografía de subtítulos
--------------------------------------------------------------*/

/* Imagen del logo principal */
#hero img {
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* Subtítulos del hero */
#hero h2,
#hero h3 {
  color: var(--secondary-color); /* usa el azul institucional */
  font-weight: 600;
  line-height: 1.3;
}

/* Tamaños más grandes que los actuales */
#hero h2 {
  font-size: 44px; /* antes era 28px */
}

#hero h3 {
  font-size: 26px; /* antes era 22px */
}

/* Ajustes en móviles */
@media (max-width: 768px) {
  #hero img {
    max-width: 280px;
  }

  #hero h2 {
    font-size: 32px;
  }

  #hero h3 {
    font-size: 22px;
  }
}
/*--------------------------------------------------------------
/* === Logos diferenciados === */
.logo-desktop {
  display: block;
}
.logo-mobile {
  display: none;
}

/* 📱 En pantallas chicas, intercambiamos */
@media (max-width: 992px) {
  .logo-desktop {
    display: none;
  }
  .logo-mobile {
    display: block;
    max-height: 52px; /* ajustá según necesites */
  }
}