/* =========================
   NAVBAR
========================= */

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

.navbar-nav .nav-link {
  font-family: var(--font-heading);
  font-size: 1.25em; /* 17px */
  color: var(--color-menu-text);
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
  color: var(--color-hover) /* temporal hasta definir color real */
}

.navbar-toggler {
  border-color: rgba(255,255,255,.5);
}

/* Botón descarga */
.button.compendio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  background-color: var(--color-primary);
  color: var(--color-white);

  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);

  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-heading);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button.compendio:hover {
  transform: translateY(-2px);
}

.button.compendio:active {
  transform: translateY(0);
  opacity: 0.9;
}


/* === Section title highlight === */
.section-title-highlight {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg) var(--space-xs) calc(var(--space-xl) * 3);
  border-radius: var(--radius-lg);

  text-transform: uppercase;
  background-image: url('../img/icons/megafono-blanco.png');
  background-size: 50px 54px;
  background-repeat: no-repeat;
  background-position: 20px center;
}
.icon-megafono{
  width: 50px; /* ajustá según diseño */
  height: 54px;
  display: inline-block;

  
}
.experiencia-accordion .accordion-button {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-white);
}

.pais-mexico {
  background-color: var(--color-mexico);
}

.pais-peru {
  background-color: var(--color-peru);
}

.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size:var(--fs-sm);
  background-color: var(--color-menu-text);
  padding:var(--space-xxs) var(--space-xs);
  color:var(--color-primary-alt2);
  border-radius: var(--radius-sm);
  text-transform:uppercase;
}

.card-btn::after {
  content: "➜";
  transition: transform 0.2s ease;
}

.card-btn:hover {
  
  color:var(--color-primary-alt1);
  background-color: var(--color-bg-light);
}

.card-btn:hover::after {
  transform: translateX(2px);
}

/* =========================
   ACORDEON PAISES - EXPERIENCIAS
========================= */

.experiencia-accordion {
  margin-top: var(--space-xl);
}


.experiencia-accordion .accordion-button {
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  margin-bottom:var(--space-lg);
}

.accordion-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1vw + 0.8rem, 1.5rem);
  text-transform: uppercase;
  color: var(--color-white);
}

.accordion-subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-top: 4px;
  opacity: 0.9;
  color: var(--color-white);
}

.experiencia-accordion .accordion-body {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.accordion-button.pais-mexico { background-color: var(--color-card-1); }
.accordion-button.pais-mexico:hover { background-color: color-mix(in srgb, var(--color-card-1) 80%, transparent); }
.accordion-button.pais-mexico:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-1) 90%, black); }
#mexico .accordion-body { background-color: color-mix(in srgb, var(--color-card-1) 10%, white);}

.accordion-button.pais-guatemala-y-honduras { background-color: var(--color-card-2); }
.accordion-button.pais-guatemala-y-honduras:hover { background-color: color-mix(in srgb, var(--color-card-2) 80%, transparent); }
.accordion-button.pais-guatemala-y-honduras:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-2) 90%, black); }
#guatemala-y-honduras .accordion-body { background-color: color-mix(in srgb, var(--color-card-2) 10%, white);}

.accordion-button.pais-el-salvador { background-color: var(--color-card-3); }
.accordion-button.pais-el-salvador:hover { background-color: color-mix(in srgb, var(--color-card-3) 80%, transparent); }
.accordion-button.pais-el-salvador:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-3) 90%, black); }
#el-salvador .accordion-body { background-color: color-mix(in srgb, var(--color-card-3) 10%, white);}

.accordion-button.pais-republica-dominicana { background-color: var(--color-card-4); }
.accordion-button.pais-republica-dominicana:hover { background-color: color-mix(in srgb, var(--color-card-4) 80%, transparent); }
.accordion-button.pais-republica-dominicana:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-4) 90%, black); }
#republica-dominicana .accordion-body { background-color: color-mix(in srgb, var(--color-card-4) 10%, white);}

.accordion-button.pais-peru { background-color: var(--color-card-5); }
.accordion-button.pais-peru:hover { background-color: color-mix(in srgb, var(--color-card-5) 80%, transparent); }
.accordion-button.pais-peru:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-5) 90%, black); }
#peru .accordion-body { background-color: color-mix(in srgb, var(--color-card-5) 10%, white);}

.accordion-button.pais-brasil { background-color: var(--color-card-6); }
.accordion-button.pais-brasil:hover { background-color: color-mix(in srgb, var(--color-card-6) 80%, transparent); }
.accordion-button.pais-brasil:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-6) 90%, black); }
#brasil .accordion-body { background-color: color-mix(in srgb, var(--color-card-6) 10%, white);}

.accordion-button.pais-chile { background-color: var(--color-card-7); }
.accordion-button.pais-chile:hover { background-color: color-mix(in srgb, var(--color-card-7) 80%, transparent); }
.accordion-button.pais-chile:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-7) 90%, black); }
#chile .accordion-body { background-color: color-mix(in srgb, var(--color-card-7) 10%, white);}

.accordion-button.pais-argentina { background-color: var(--color-card-8); }
.accordion-button.pais-argentina:hover { background-color: color-mix(in srgb, var(--color-card-8) 80%, transparent); }
.accordion-button.pais-argentina:not(.collapsed) { background-color: color-mix(in srgb, var(--color-card-8) 90%, black); }
#argentina .accordion-body { background-color: color-mix(in srgb, var(--color-card-8) 10%, white);}

.experiencia-content {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--space-lg);
}

.experiencia-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xxl);
}
.pais-mexico .experiencia-title { color: var(--color-card-1); }
.pais-guatemala-honduras .experiencia-title { color: var(--color-card-2); }
.pais-el-salvador .experiencia-title { color: var(--color-card-3); }
.pais-republica-dominicana .experiencia-title { color: var(--color-card-4); }
.pais-peru .experiencia-title { color: var(--color-card-5); }
.pais-brasil .experiencia-title { color: var(--color-card-6); }
.pais-chile .experiencia-title { color: var(--color-card-7); }
.pais-argentina .experiencia-title { color: var(--color-card-8); }

.experiencia-meta-label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  margin-bottom: 0;
}
.experiencia-meta-value {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.experiencia-section h5 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.experiencia-section p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--color-text);
}

.experiencia-cta a, .pieza-item .button {
  display: inline-block;
  background-color: var(--color-primary-alt4);
  color: var(--color-primary-alt1);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.experiencia-cta a:hover, .pieza-item .button:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
  color:var(--color-primary-alt4);
}

.experiencia-cta {
  margin-top: var(--space-lg);
}

.experiencia-image img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: calc(var(--radius-md) * 4);
  display: block;
  margin-top: var(--space-xl);
}

.campana-lead {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  padding:var(--space-xxxl) var(--space-md) 0 var(--space-md);
}