/* ==========================================================================
   Barra de anuncios (arriba del header, en todas las páginas)
   Teléfonos y email a la izquierda, carrusel de mensajes a la derecha.
   Sin redes sociales. Marcado en template-parts/header/announcement.php.
   ========================================================================== */

.announcement {
  background: var(--color-peach);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.announcement__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 40px;
}

.announcement__contact {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.announcement__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.announcement__link:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

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

.announcement__viewport { min-width: 380px; text-align: center; }

.announcement__message { display: none; margin: 0; padding: 0; }
.announcement__message.is-active { display: block; animation: fade-in 0.4s ease; }

.announcement__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

@container site (max-width: 1199px) {
  .announcement__contact-item--email { display: none; }
}

/* El contacto pasa al menú mobile */
@container site (max-width: 1023px) {
  .announcement__inner { grid-template-columns: minmax(0, 1fr); }
  .announcement__contact { display: none; }
  .announcement__messages { justify-content: center; }
}

@container site (max-width: 767px) {
  .announcement { font-size: var(--fs-xs); }
  .announcement__messages { gap: 0; }
  .announcement__viewport { flex: 1; min-width: 0; }
}